From 86477d35901e08221d85300de4b17c0ef36c01f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrico=20B=C3=BChler?= <privat@enricobuehler.de>
Date: Thu, 11 Nov 2021 21:02:36 +0100
Subject: [PATCH] --

---
 src/Theme/index.test.ts | 10 +++++-----
 src/Theme/index.ts      | 15 ++++++++-------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Theme/index.test.ts b/src/Theme/index.test.ts
index 54cb9ff..56e4001 100644
--- a/src/Theme/index.test.ts
+++ b/src/Theme/index.test.ts
@@ -1,5 +1,5 @@
 import {
-  generateThemeOverrideClass,
+  generateThemeOverride,
   generateThemeRoot,
   generateTheme,
   ThemeInput,
@@ -23,18 +23,18 @@ const exampleThemes: ThemeInput[] = [
 ];
 
 test("it generates css based on input properties", () => {
-  const themeClass = generateThemeOverrideClass({
+  const themeClass = generateThemeOverride({
     properties: exampleProperties,
-    className: "dark-theme",
+    selector: ".dark-theme",
   });
 
   expect(themeClass).toBeDefined();
 });
 
 test("no input so it returns empty string", () => {
-  const themeClass = generateThemeOverrideClass({
+  const themeClass = generateThemeOverride({
     properties: {},
-    className: "dark-theme",
+    selector: ".dark-theme",
   });
 
   expect(themeClass).toBeDefined();
diff --git a/src/Theme/index.ts b/src/Theme/index.ts
index 552168b..6acffc7 100644
--- a/src/Theme/index.ts
+++ b/src/Theme/index.ts
@@ -4,17 +4,18 @@ import { generateShades, ColorsInput, ShadesOptions } from "./Colors";
 export interface ThemeInput {
   name: string;
   colors: ColorsInput;
+  selector?: string;
 }
 
-const generateThemeOverrideClass = (input: {
+const generateThemeOverride = (input: {
   properties: any;
-  className: string;
+  selector: string;
 }) => {
   const propKeys = Object.keys(input.properties);
 
   if (propKeys.length > 0) {
     return ` 
-    .${input.className} {${propKeys
+    ${input.selector} {${propKeys
       .map((key) => `\t--${key}: ${input.properties[key]};`)
       .join("\n")}}`;
   } else return "";
@@ -65,9 +66,9 @@ const generateTheme = (options: {
     const themeOverrides = themes
       .slice(1)
       .map((theme) => {
-        const overrideClass = generateThemeOverrideClass({
+        const overrideClass = generateThemeOverride({
           properties: { ...theme.colors },
-          className: theme.name,
+          selector: theme.selector ? theme.selector : "." + theme.name,
         });
 
         return overrideClass;
@@ -78,10 +79,10 @@ const generateTheme = (options: {
   } else return themeRoot;
 };
 
-export { generateThemeOverrideClass, generateThemeRoot, generateTheme };
+export { generateThemeOverride, generateThemeRoot, generateTheme };
 export default {
   Colors,
-  generateThemeOverrideClass,
+  generateThemeOverride,
   generateThemeRoot,
   generateTheme,
 };