--

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();

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,
 };