unom/style
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

--

Browse Source
This commit is contained in:
Enrico Bühler 2021-11-11 21:02:36 +01:00
parent 98c7a5170c
commit 86477d3590
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Theme/index.test.ts
View File

@ -1,5 +1,5 @@
import { import {
generateThemeOverrideClass, generateThemeOverride,
generateThemeRoot, generateThemeRoot,
generateTheme, generateTheme,
ThemeInput, ThemeInput,
@ -23,18 +23,18 @@ const exampleThemes: ThemeInput[] = [
]; ];
test("it generates css based on input properties", () => { test("it generates css based on input properties", () => {
const themeClass = generateThemeOverrideClass({ const themeClass = generateThemeOverride({
properties: exampleProperties, properties: exampleProperties,
className: "dark-theme", selector: ".dark-theme",
}); });
expect(themeClass).toBeDefined(); expect(themeClass).toBeDefined();
}); });
test("no input so it returns empty string", () => { test("no input so it returns empty string", () => {
const themeClass = generateThemeOverrideClass({ const themeClass = generateThemeOverride({
properties: {}, properties: {},
className: "dark-theme", selector: ".dark-theme",
}); });
expect(themeClass).toBeDefined(); expect(themeClass).toBeDefined();

15
src/Theme/index.ts
View File

@ -4,17 +4,18 @@ import { generateShades, ColorsInput, ShadesOptions } from "./Colors";
export interface ThemeInput { export interface ThemeInput {
name: string; name: string;
colors: ColorsInput; colors: ColorsInput;
selector?: string;
} }
const generateThemeOverrideClass = (input: { const generateThemeOverride = (input: {
properties: any; properties: any;
className: string; selector: string;
}) => { }) => {
const propKeys = Object.keys(input.properties); const propKeys = Object.keys(input.properties);
if (propKeys.length > 0) { if (propKeys.length > 0) {
return ` return `
.${input.className} {${propKeys ${input.selector} {${propKeys
.map((key) => `\t--${key}: ${input.properties[key]};`) .map((key) => `\t--${key}: ${input.properties[key]};`)
.join("\n")}}`; .join("\n")}}`;
} else return ""; } else return "";
@ -65,9 +66,9 @@ const generateTheme = (options: {
const themeOverrides = themes const themeOverrides = themes
.slice(1) .slice(1)
.map((theme) => { .map((theme) => {
const overrideClass = generateThemeOverrideClass({ const overrideClass = generateThemeOverride({
properties: { ...theme.colors }, properties: { ...theme.colors },
className: theme.name, selector: theme.selector ? theme.selector : "." + theme.name,
}); });
return overrideClass; return overrideClass;
@ -78,10 +79,10 @@ const generateTheme = (options: {
} else return themeRoot; } else return themeRoot;
}; };
export { generateThemeOverrideClass, generateThemeRoot, generateTheme }; export { generateThemeOverride, generateThemeRoot, generateTheme };
export default { export default {
Colors, Colors,
generateThemeOverrideClass, generateThemeOverride,
generateThemeRoot, generateThemeRoot,
generateTheme, generateTheme,
}; };