From 087f517db839684acbfd07b3ca591003be94a0a8 Mon Sep 17 00:00:00 2001 From: Hebilicious Date: Sun, 26 Oct 2025 03:01:14 +0700 Subject: [PATCH 1/2] feat: variantNameOnly --- .changeset/bold-towns-exist.md | 12 ++ README.md | 266 +++++++++++++++--------- src/modules/colors.ts | 26 ++- tests/__snapshots__/colors.test.ts.snap | 55 ++++- tests/colors.test.ts | 55 +++++ 5 files changed, 306 insertions(+), 108 deletions(-) create mode 100644 .changeset/bold-towns-exist.md diff --git a/.changeset/bold-towns-exist.md b/.changeset/bold-towns-exist.md new file mode 100644 index 0000000..e48c27c --- /dev/null +++ b/.changeset/bold-towns-exist.md @@ -0,0 +1,12 @@ +--- +"@hebilicious/cssforge": minor +--- + +# Introduce variantNameOnly feature for themes. + +When working with themes, you can choose to only include the variant name in the CSS variable name by setting +`variantNameOnly: true` in the color definition settings. This is usually used in combination with `condition` to conditionnally apply themes. + +- Default: `--theme-${themeName}-${colorName}-${variantName}` +- VariantOnly Name: `--${variantName}` +- Path : `theme.${themeName}.${colorName}.${variantName}` \ No newline at end of file diff --git a/README.md b/README.md index afa37b0..5092ae0 100644 --- a/README.md +++ b/README.md @@ -247,7 +247,10 @@ export default defineConfig({ }, variables: { 1: "palette.simple.white", - 2: "gradients.white-green.primary", + 2: "gradients.white-green.primary", //Reference the color name directly. + }, + settings: { + variantNameOnly: true, }, }, }, @@ -263,12 +266,35 @@ export default defineConfig({ 1: "palette.another.yellow", 2: "palette.another.cyan", }, + settings: { + variantNameOnly: true, + }, }, }, settings: { condition: "@media (prefers-color-scheme: dark)", }, }, + pink: { + value: { + background: { + value: { + primary: "var(--1)", + secondary: "var(--2)", + }, + variables: { + 1: "palette.simple.red", + 2: "palette.simple.violet", + }, + settings: { + variantNameOnly: true, + }, + }, + }, + settings: { + condition: ".ThemePink", + }, + }, }, }, }); @@ -325,7 +351,10 @@ export default defineConfig({ }, variables: { 1: "palette.simple.white", - 2: "gradients.white-green", //Reference the color name directly. + 2: "gradients.white-green.primary", //Reference the color name directly. + }, + settings: { + variantNameOnly: true, }, }, }, @@ -341,12 +370,35 @@ export default defineConfig({ 1: "palette.another.yellow", 2: "palette.another.cyan", }, + settings: { + variantNameOnly: true, + }, }, }, settings: { condition: "@media (prefers-color-scheme: dark)", }, }, + pink: { + value: { + background: { + value: { + primary: "var(--1)", + secondary: "var(--2)", + }, + variables: { + 1: "palette.simple.red", + 2: "palette.simple.violet", + }, + settings: { + variantNameOnly: true, + }, + }, + }, + settings: { + condition: ".ThemePink", + }, + }, }, }, }); @@ -357,40 +409,58 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Colors ____*/ - /* Palette */ - /* simple */ - --palette-simple-white: oklch(100% 0 0); - --palette-simple-black: oklch(0% 0 0); - --palette-simple-green: oklch(86.644% 0.29483 142.49535); - --palette-simple-blue: oklch(45.201% 0.31321 264.05202); - --palette-simple-violet: oklch(70% 0.2 270); - --palette-simple-red: oklch(62.796% 0.25768 29.23388); - .Another { - /* another */ - --palette-another-yellow: oklch(96.798% 0.21101 109.76924); - --palette-another-cyan: oklch(90.54% 0.15455 194.76896); - } - /* Gradients */ - --gradients-white-green-primary: linear-gradient( - to right, - var(--palette-simple-white), - var(--palette-simple-green) - ); - /* Themes */ - /* Theme: light */ +/*____ Colors ____*/ +/* Palette */ +/* simple */ +--palette-simple-white: oklch(100% 0 0); +--palette-simple-black: oklch(0% 0 0); +--palette-simple-green: oklch(86.644% 0.29483 142.49535); +--palette-simple-blue: oklch(45.201% 0.31321 264.05202); +--palette-simple-violet: oklch(70% 0.2 270); +--palette-simple-red: oklch(62.796% 0.25768 29.23388); +/* another */ +.Another { + --palette-another-yellow: oklch(96.798% 0.21101 109.76924); + --palette-another-cyan: oklch(90.54% 0.15455 194.76896); +} +/* Gradients */ +/* white-green */ +--gradients-white-green-primary: linear-gradient(to right, var(--palette-simple-white), var(--palette-simple-green)); +/* Themes */ +/* Theme: light */ +/* background */ +--primary: var(--palette-simple-white); +--secondary: var(--gradients-white-green-primary); +/* Theme: dark */ +@media (prefers-color-scheme: dark) { /* background */ - @media (prefers-color-scheme: dark) { - /* Theme: dark */ - /* background */ - --theme-dark-background-primary: var(--palette-another-yellow); - --theme-dark-background-secondary: var(--palette-another-cyan); - } + --primary: var(--palette-another-yellow); + --secondary: var(--palette-another-cyan); +} +/* Theme: pink */ +.ThemePink { + /* background */ + --primary: var(--palette-simple-red); + --secondary: var(--palette-simple-violet); +} } ``` +#### Condition + +You can conditionnally apply colors, gradients or themes by setting the `condition` property to a selector or media query. Your variables will be wrapped within the condition. + +#### Theme: Variant Name Only + +When working with themes, you can choose to only include the variant name in the CSS variable name by setting +`variantNameOnly: true` in the color definition settings. This is usually used in combination with `condition` to conditionnally apply themes. + +- Default: `--theme-${themeName}-${colorName}-${variantName}` +- VariantOnly Name: `--${variantName}` +- Path : `theme.${themeName}.${colorName}.${variantName}` + ### Spacing Define custom spacing scale, that can be referenced for other types, such as primitives. @@ -438,11 +508,11 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Spacing ____*/ - --spacing-size-1: 0.25rem; - --spacing-size-2: 0.5rem; - --spacing-size-3: 0.75rem; - --spacing-size-4: 1rem; +/*____ Spacing ____*/ +--spacing-size-1: 0.25rem; +--spacing-size-2: 0.5rem; +--spacing-size-3: 0.75rem; +--spacing-size-4: 1rem; } ``` @@ -499,12 +569,12 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Spacing ____*/ - --spacing_fluid-base-hi-xs: clamp(0rem, 0rem + 0vw, 0rem); - --spacing_fluid-base-hi-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); - --spacing_fluid-base-hi-m: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); - --spacing_fluid-base-hi-xs-s: clamp(0rem, -0.5rem + 2.5vw, 1.5rem); - --spacing_fluid-base-hi-s-m: clamp(0.25rem, -1.1667rem + 7.0833vw, 4.5rem); +/*____ Spacing ____*/ +--spacing_fluid-base-hi-xs: clamp(0rem, 0rem + 0vw, 0rem); +--spacing_fluid-base-hi-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); +--spacing_fluid-base-hi-m: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); +--spacing_fluid-base-hi-xs-s: clamp(0rem, -0.5rem + 2.5vw, 1.5rem); +--spacing_fluid-base-hi-s-m: clamp(0.25rem, -1.1667rem + 7.0833vw, 4.5rem); } ``` @@ -567,26 +637,26 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Spacing ____*/ - --spacing_fluid-base-smooth-3xs: clamp(0.0625rem, -0.0417rem + 0.5208vw, 0.375rem); - --spacing_fluid-base-smooth-2xs: clamp(0.125rem, -0.0833rem + 1.0417vw, 0.75rem); - --spacing_fluid-base-smooth-xs: clamp(0.1875rem, -0.125rem + 1.5625vw, 1.125rem); - --spacing_fluid-base-smooth-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); - --spacing_fluid-base-smooth-m: clamp(0.375rem, -0.25rem + 3.125vw, 2.25rem); - --spacing_fluid-base-smooth-l: clamp(0.5rem, -0.3333rem + 4.1667vw, 3rem); - --spacing_fluid-base-smooth-xl: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); - --spacing_fluid-base-smooth-2xl: clamp(1rem, -0.6667rem + 8.3333vw, 6rem); - --spacing_fluid-base-smooth-3xl: clamp(1.5rem, -1rem + 12.5vw, 9rem); - --spacing_fluid-base-smooth-3xs-2xs: clamp(0.0625rem, -0.1667rem + 1.1458vw, 0.75rem); - --spacing_fluid-base-smooth-2xs-xs: clamp(0.125rem, -0.2083rem + 1.6667vw, 1.125rem); - --spacing_fluid-base-smooth-xs-s: clamp(0.1875rem, -0.25rem + 2.1875vw, 1.5rem); - --spacing_fluid-base-smooth-s-m: clamp(0.25rem, -0.4167rem + 3.3333vw, 2.25rem); - --spacing_fluid-base-smooth-m-l: clamp(0.375rem, -0.5rem + 4.375vw, 3rem); - --spacing_fluid-base-smooth-l-xl: clamp(0.5rem, -0.8333rem + 6.6667vw, 4.5rem); - --spacing_fluid-base-smooth-xl-2xl: clamp(0.75rem, -1rem + 8.75vw, 6rem); - --spacing_fluid-base-smooth-2xl-3xl: clamp(1rem, -1.6667rem + 13.3333vw, 9rem); - --spacing-gap-1: 0.25rem; - --spacing-gap-2: 0.5rem; +/*____ Spacing ____*/ +--spacing_fluid-base-smooth-3xs: clamp(0.0625rem, -0.0417rem + 0.5208vw, 0.375rem); +--spacing_fluid-base-smooth-2xs: clamp(0.125rem, -0.0833rem + 1.0417vw, 0.75rem); +--spacing_fluid-base-smooth-xs: clamp(0.1875rem, -0.125rem + 1.5625vw, 1.125rem); +--spacing_fluid-base-smooth-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); +--spacing_fluid-base-smooth-m: clamp(0.375rem, -0.25rem + 3.125vw, 2.25rem); +--spacing_fluid-base-smooth-l: clamp(0.5rem, -0.3333rem + 4.1667vw, 3rem); +--spacing_fluid-base-smooth-xl: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); +--spacing_fluid-base-smooth-2xl: clamp(1rem, -0.6667rem + 8.3333vw, 6rem); +--spacing_fluid-base-smooth-3xl: clamp(1.5rem, -1rem + 12.5vw, 9rem); +--spacing_fluid-base-smooth-3xs-2xs: clamp(0.0625rem, -0.1667rem + 1.1458vw, 0.75rem); +--spacing_fluid-base-smooth-2xs-xs: clamp(0.125rem, -0.2083rem + 1.6667vw, 1.125rem); +--spacing_fluid-base-smooth-xs-s: clamp(0.1875rem, -0.25rem + 2.1875vw, 1.5rem); +--spacing_fluid-base-smooth-s-m: clamp(0.25rem, -0.4167rem + 3.3333vw, 2.25rem); +--spacing_fluid-base-smooth-m-l: clamp(0.375rem, -0.5rem + 4.375vw, 3rem); +--spacing_fluid-base-smooth-l-xl: clamp(0.5rem, -0.8333rem + 6.6667vw, 4.5rem); +--spacing_fluid-base-smooth-xl-2xl: clamp(0.75rem, -1rem + 8.75vw, 6rem); +--spacing_fluid-base-smooth-2xl-3xl: clamp(1rem, -1.6667rem + 13.3333vw, 9rem); +--spacing-gap-1: 0.25rem; +--spacing-gap-2: 0.5rem; } ``` @@ -658,17 +728,17 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Typography ____*/ - --typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); - --typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); - --typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); - --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); - --typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); - --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); - --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); - --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); - --typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); - --typography-weight-arial-regular: 600; +/*____ Typography ____*/ +--typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); +--typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); +--typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); +--typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); +--typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); +--typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); +--typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); +--typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); +--typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); +--typography-weight-arial-regular: 600; } ``` @@ -746,12 +816,12 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Typography ____*/ - --typography_fluid-comicsans-text-e: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); - --typography_fluid-comicsans-text-d: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); - --typography_fluid-comicsans-text-c: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); - --typography_fluid-comicsans-text-b: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); - --typography_fluid-comicsans-text-a: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); +/*____ Typography ____*/ +--typography_fluid-comicsans-text-e: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); +--typography_fluid-comicsans-text-d: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); +--typography_fluid-comicsans-text-c: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); +--typography_fluid-comicsans-text-b: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); +--typography_fluid-comicsans-text-a: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); } ``` @@ -870,26 +940,26 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { - /*____ Spacing ____*/ - --spacing-size-2: 0.5rem; - --spacing-size-3: 0.75rem; - /*____ Typography ____*/ - --typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); - --typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); - --typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); - --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); - --typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); - --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); - --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); - --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); - --typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); - /*____ Primitives ____*/ - /* button */ - --button-small-width: 7.5rem; - --button-small-height: 2.5rem; - --button-small-fontSize: var(--typography_fluid-arial-m); - --button-small-radius: 0.5rem; - --button-small-padding: var(--spacing-size-2) var(--spacing-size-3); +/*____ Spacing ____*/ +--spacing-size-2: 0.5rem; +--spacing-size-3: 0.75rem; +/*____ Typography ____*/ +--typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); +--typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); +--typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); +--typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); +--typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); +--typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); +--typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); +--typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); +--typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); +/*____ Primitives ____*/ +/* button */ +--button-small-width: 7.5rem; +--button-small-height: 2.5rem; +--button-small-fontSize: var(--typography_fluid-arial-m); +--button-small-radius: 0.5rem; +--button-small-padding: var(--spacing-size-2) var(--spacing-size-3); } ``` diff --git a/src/modules/colors.ts b/src/modules/colors.ts index a9a0567..a3b5100 100644 --- a/src/modules/colors.ts +++ b/src/modules/colors.ts @@ -97,7 +97,13 @@ interface ColorInThemeValues { interface ColorInTheme { value: ColorInThemeValues; variables?: Variables; - settings?: unknown; + settings?: { + /** + * Only include the variant name in the CSS variable name. + * --theme-light-colors-primaryBackground => --primaryBackground + */ + variantNameOnly?: boolean; + }; } export interface ThemeConfig { @@ -222,18 +228,19 @@ export function processColors(colors: ColorConfig): Output { settings: WithCondition | undefined, initialComment: string, ) { - const comments: string[] = []; + const leadingComments: string[] = []; + const innerComments: string[] = []; const vars: string[] = []; if (settings?.condition) { - comments.push(initialComment); + leadingComments.push(initialComment); } else { cssOutput.push(initialComment); } return { addComment(c: string) { - if (settings?.condition) comments.push(c); + if (settings?.condition) innerComments.push(c); else cssOutput.push(c); }, pushVariable(v: string) { @@ -242,8 +249,9 @@ export function processColors(colors: ColorConfig): Output { }, finalize() { if (settings?.condition && vars.length > 0) { + cssOutput.push(...leadingComments); cssOutput.push(`${settings.condition} {`); - cssOutput.push(...comments.map((c) => ` ${c}`)); + cssOutput.push(...innerComments.map((c) => ` ${c}`)); cssOutput.push(...vars.map((v) => ` ${v}`)); cssOutput.push(`}`); } @@ -349,14 +357,18 @@ export function processColors(colors: ColorConfig): Output { colors: palette, }); + const variantNameOnly = colorInTheme.settings?.variantNameOnly ?? false; for (const [variantName, variantValue] of Object.entries(colorInTheme.value)) { validateName(variantName); const resolvedValue = resolveValue({ map: resolvedMap, - value: variantValue as string, + value: variantValue, }); - const key = `--${moduleKey}-${themeName}-${colorName}-${variantName}`; + const key = variantNameOnly + ? `--${variantName}` + : `--${moduleKey}-${themeName}-${colorName}-${variantName}`; + const variable = `${key}: ${resolvedValue};`; handler.pushVariable(variable); diff --git a/tests/__snapshots__/colors.test.ts.snap b/tests/__snapshots__/colors.test.ts.snap index b800da7..3c2fdaa 100644 --- a/tests/__snapshots__/colors.test.ts.snap +++ b/tests/__snapshots__/colors.test.ts.snap @@ -284,8 +284,8 @@ snapshot[`processColors - handles gradients with conditions 1`] = ` /* coral */ --palette-coral-50: oklch(73.58% 0.16378 34.33822); /* Gradients */ +/* orangeGradient */ @media (prefers-color-scheme: dark) { - /* orangeGradient */ --gradients-orangeGradient-primary: linear-gradient(to right, var(--palette-coral-50), var(--palette-coral-50)); }" `; @@ -315,8 +315,8 @@ snapshot[`processColors - handles palette colors with conditions 1`] = ` "/* Palette */ /* background */ --palette-background-light: oklch(100% 0 0); +/* backgroundDark */ @media (prefers-color-scheme: dark) { - /* backgroundDark */ --palette-backgroundDark-dark: oklch(0% 0 0); }" `; @@ -347,8 +347,8 @@ snapshot[`processColors - handles themes with class condition 1`] = ` /* base */ --palette-base-primary: oklch(73.511% 0.16799 40.24666); /* Themes */ +/* Theme: dark */ .dark-theme { - /* Theme: dark */ /* background */ --theme-dark-background-primary: var(--palette-base-primary); }" @@ -374,3 +374,52 @@ snapshot[`processColors - handles themes with class condition 2`] = ` ], ] `; + +snapshot[`processColors - handles theme variantNameOnly 1`] = ` +"/* Palette */ +/* simple */ +--palette-simple-white: oklch(100% 0 0); +--palette-simple-black: oklch(0% 0 0); +/* Themes */ +/* Theme: light */ +/* background */ +--primary: var(--palette-simple-white); +--secondary: var(--palette-simple-black);" +`; + +snapshot[`processColors - handles theme variantNameOnly 2`] = ` +[ + [ + "palette.simple.white", + { + key: "--palette-simple-white", + value: "oklch(100% 0 0)", + variable: "--palette-simple-white: oklch(100% 0 0);", + }, + ], + [ + "palette.simple.black", + { + key: "--palette-simple-black", + value: "oklch(0% 0 0)", + variable: "--palette-simple-black: oklch(0% 0 0);", + }, + ], + [ + "theme.light.background.primary", + { + key: "--primary", + value: "var(--palette-simple-white)", + variable: "--primary: var(--palette-simple-white);", + }, + ], + [ + "theme.light.background.secondary", + { + key: "--secondary", + value: "var(--palette-simple-black)", + variable: "--secondary: var(--palette-simple-black);", + }, + ], +] +`; diff --git a/tests/colors.test.ts b/tests/colors.test.ts index 266964a..108d88a 100644 --- a/tests/colors.test.ts +++ b/tests/colors.test.ts @@ -491,3 +491,58 @@ Deno.test("processColors - handles themes with class condition", async (t) => { await assertSnapshot(t, css); await assertSnapshot(t, Array.from(resolveMap.entries())); }); + +Deno.test("processColors - handles theme variantNameOnly", async (t) => { + const config = defineConfig({ + colors: { + palette: { + value: { + simple: { + value: { + white: "oklch(100% 0 0)", + black: { hex: "#000" }, + }, + }, + }, + }, + theme: { + light: { + value: { + background: { + value: { + primary: "var(--1)", + secondary: "var(--2)", + }, + variables: { + 1: "palette.simple.white", + 2: "palette.simple.black", + }, + settings: { + variantNameOnly: true, + }, + }, + }, + }, + }, + }, + }); + + const { css, resolveMap } = processColors(config.colors); + const lines = getLines(css); + + const primaryLine = lines.find((l) => l.includes("--primary:")); + const secondaryLine = lines.find((l) => l.includes("--secondary:")); + + assertEquals(primaryLine?.trim(), "--primary: var(--palette-simple-white);"); + assertEquals(secondaryLine?.trim(), "--secondary: var(--palette-simple-black);"); + + assertEquals(Array.from(resolveMap.keys()), [ + "palette.simple.white", + "palette.simple.black", + "theme.light.background.primary", + "theme.light.background.secondary", + ]); + + await assertSnapshot(t, css); + await assertSnapshot(t, Array.from(resolveMap.entries())); +}); From 042017e9254936476ebda59c5772b769e2b1401b Mon Sep 17 00:00:00 2001 From: Hebilicious Date: Sun, 26 Oct 2025 03:04:35 +0700 Subject: [PATCH 2/2] chore: format --- .changeset/bold-towns-exist.md | 7 +- CHANGELOG.md | 4 +- README.md | 215 +++++++++++++++++---------------- 3 files changed, 117 insertions(+), 109 deletions(-) diff --git a/.changeset/bold-towns-exist.md b/.changeset/bold-towns-exist.md index e48c27c..7ea18a8 100644 --- a/.changeset/bold-towns-exist.md +++ b/.changeset/bold-towns-exist.md @@ -4,9 +4,10 @@ # Introduce variantNameOnly feature for themes. -When working with themes, you can choose to only include the variant name in the CSS variable name by setting -`variantNameOnly: true` in the color definition settings. This is usually used in combination with `condition` to conditionnally apply themes. +When working with themes, you can choose to only include the variant name in the CSS +variable name by setting `variantNameOnly: true` in the color definition settings. This is +usually used in combination with `condition` to conditionnally apply themes. - Default: `--theme-${themeName}-${colorName}-${variantName}` - VariantOnly Name: `--${variantName}` -- Path : `theme.${themeName}.${colorName}.${variantName}` \ No newline at end of file +- Path : `theme.${themeName}.${colorName}.${variantName}` diff --git a/CHANGELOG.md b/CHANGELOG.md index a22202d..faa1840 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,8 +6,8 @@ - 41bff15: # Conditions and variables access - Add the posibility to add conditions for colors modules. This is a breaking change for the - configuration format. + Add the posibility to add conditions for colors modules. This is a breaking change for + the configuration format. ## 0.2.1 diff --git a/README.md b/README.md index 5092ae0..ade741b 100644 --- a/README.md +++ b/README.md @@ -409,40 +409,44 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Colors ____*/ -/* Palette */ -/* simple */ ---palette-simple-white: oklch(100% 0 0); ---palette-simple-black: oklch(0% 0 0); ---palette-simple-green: oklch(86.644% 0.29483 142.49535); ---palette-simple-blue: oklch(45.201% 0.31321 264.05202); ---palette-simple-violet: oklch(70% 0.2 270); ---palette-simple-red: oklch(62.796% 0.25768 29.23388); -/* another */ -.Another { - --palette-another-yellow: oklch(96.798% 0.21101 109.76924); - --palette-another-cyan: oklch(90.54% 0.15455 194.76896); -} -/* Gradients */ -/* white-green */ ---gradients-white-green-primary: linear-gradient(to right, var(--palette-simple-white), var(--palette-simple-green)); -/* Themes */ -/* Theme: light */ -/* background */ ---primary: var(--palette-simple-white); ---secondary: var(--gradients-white-green-primary); -/* Theme: dark */ -@media (prefers-color-scheme: dark) { - /* background */ - --primary: var(--palette-another-yellow); - --secondary: var(--palette-another-cyan); -} -/* Theme: pink */ -.ThemePink { + /*____ Colors ____*/ + /* Palette */ + /* simple */ + --palette-simple-white: oklch(100% 0 0); + --palette-simple-black: oklch(0% 0 0); + --palette-simple-green: oklch(86.644% 0.29483 142.49535); + --palette-simple-blue: oklch(45.201% 0.31321 264.05202); + --palette-simple-violet: oklch(70% 0.2 270); + --palette-simple-red: oklch(62.796% 0.25768 29.23388); + /* another */ + .Another { + --palette-another-yellow: oklch(96.798% 0.21101 109.76924); + --palette-another-cyan: oklch(90.54% 0.15455 194.76896); + } + /* Gradients */ + /* white-green */ + --gradients-white-green-primary: linear-gradient( + to right, + var(--palette-simple-white), + var(--palette-simple-green) + ); + /* Themes */ + /* Theme: light */ /* background */ - --primary: var(--palette-simple-red); - --secondary: var(--palette-simple-violet); -} + --primary: var(--palette-simple-white); + --secondary: var(--gradients-white-green-primary); + /* Theme: dark */ + @media (prefers-color-scheme: dark) { + /* background */ + --primary: var(--palette-another-yellow); + --secondary: var(--palette-another-cyan); + } + /* Theme: pink */ + .ThemePink { + /* background */ + --primary: var(--palette-simple-red); + --secondary: var(--palette-simple-violet); + } } ``` @@ -450,12 +454,15 @@ This will generate the following CSS : #### Condition -You can conditionnally apply colors, gradients or themes by setting the `condition` property to a selector or media query. Your variables will be wrapped within the condition. +You can conditionnally apply colors, gradients or themes by setting the `condition` +property to a selector or media query. Your variables will be wrapped within the +condition. #### Theme: Variant Name Only -When working with themes, you can choose to only include the variant name in the CSS variable name by setting -`variantNameOnly: true` in the color definition settings. This is usually used in combination with `condition` to conditionnally apply themes. +When working with themes, you can choose to only include the variant name in the CSS +variable name by setting `variantNameOnly: true` in the color definition settings. This is +usually used in combination with `condition` to conditionnally apply themes. - Default: `--theme-${themeName}-${colorName}-${variantName}` - VariantOnly Name: `--${variantName}` @@ -508,11 +515,11 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Spacing ____*/ ---spacing-size-1: 0.25rem; ---spacing-size-2: 0.5rem; ---spacing-size-3: 0.75rem; ---spacing-size-4: 1rem; + /*____ Spacing ____*/ + --spacing-size-1: 0.25rem; + --spacing-size-2: 0.5rem; + --spacing-size-3: 0.75rem; + --spacing-size-4: 1rem; } ``` @@ -569,12 +576,12 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Spacing ____*/ ---spacing_fluid-base-hi-xs: clamp(0rem, 0rem + 0vw, 0rem); ---spacing_fluid-base-hi-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); ---spacing_fluid-base-hi-m: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); ---spacing_fluid-base-hi-xs-s: clamp(0rem, -0.5rem + 2.5vw, 1.5rem); ---spacing_fluid-base-hi-s-m: clamp(0.25rem, -1.1667rem + 7.0833vw, 4.5rem); + /*____ Spacing ____*/ + --spacing_fluid-base-hi-xs: clamp(0rem, 0rem + 0vw, 0rem); + --spacing_fluid-base-hi-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); + --spacing_fluid-base-hi-m: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); + --spacing_fluid-base-hi-xs-s: clamp(0rem, -0.5rem + 2.5vw, 1.5rem); + --spacing_fluid-base-hi-s-m: clamp(0.25rem, -1.1667rem + 7.0833vw, 4.5rem); } ``` @@ -637,26 +644,26 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Spacing ____*/ ---spacing_fluid-base-smooth-3xs: clamp(0.0625rem, -0.0417rem + 0.5208vw, 0.375rem); ---spacing_fluid-base-smooth-2xs: clamp(0.125rem, -0.0833rem + 1.0417vw, 0.75rem); ---spacing_fluid-base-smooth-xs: clamp(0.1875rem, -0.125rem + 1.5625vw, 1.125rem); ---spacing_fluid-base-smooth-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); ---spacing_fluid-base-smooth-m: clamp(0.375rem, -0.25rem + 3.125vw, 2.25rem); ---spacing_fluid-base-smooth-l: clamp(0.5rem, -0.3333rem + 4.1667vw, 3rem); ---spacing_fluid-base-smooth-xl: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); ---spacing_fluid-base-smooth-2xl: clamp(1rem, -0.6667rem + 8.3333vw, 6rem); ---spacing_fluid-base-smooth-3xl: clamp(1.5rem, -1rem + 12.5vw, 9rem); ---spacing_fluid-base-smooth-3xs-2xs: clamp(0.0625rem, -0.1667rem + 1.1458vw, 0.75rem); ---spacing_fluid-base-smooth-2xs-xs: clamp(0.125rem, -0.2083rem + 1.6667vw, 1.125rem); ---spacing_fluid-base-smooth-xs-s: clamp(0.1875rem, -0.25rem + 2.1875vw, 1.5rem); ---spacing_fluid-base-smooth-s-m: clamp(0.25rem, -0.4167rem + 3.3333vw, 2.25rem); ---spacing_fluid-base-smooth-m-l: clamp(0.375rem, -0.5rem + 4.375vw, 3rem); ---spacing_fluid-base-smooth-l-xl: clamp(0.5rem, -0.8333rem + 6.6667vw, 4.5rem); ---spacing_fluid-base-smooth-xl-2xl: clamp(0.75rem, -1rem + 8.75vw, 6rem); ---spacing_fluid-base-smooth-2xl-3xl: clamp(1rem, -1.6667rem + 13.3333vw, 9rem); ---spacing-gap-1: 0.25rem; ---spacing-gap-2: 0.5rem; + /*____ Spacing ____*/ + --spacing_fluid-base-smooth-3xs: clamp(0.0625rem, -0.0417rem + 0.5208vw, 0.375rem); + --spacing_fluid-base-smooth-2xs: clamp(0.125rem, -0.0833rem + 1.0417vw, 0.75rem); + --spacing_fluid-base-smooth-xs: clamp(0.1875rem, -0.125rem + 1.5625vw, 1.125rem); + --spacing_fluid-base-smooth-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem); + --spacing_fluid-base-smooth-m: clamp(0.375rem, -0.25rem + 3.125vw, 2.25rem); + --spacing_fluid-base-smooth-l: clamp(0.5rem, -0.3333rem + 4.1667vw, 3rem); + --spacing_fluid-base-smooth-xl: clamp(0.75rem, -0.5rem + 6.25vw, 4.5rem); + --spacing_fluid-base-smooth-2xl: clamp(1rem, -0.6667rem + 8.3333vw, 6rem); + --spacing_fluid-base-smooth-3xl: clamp(1.5rem, -1rem + 12.5vw, 9rem); + --spacing_fluid-base-smooth-3xs-2xs: clamp(0.0625rem, -0.1667rem + 1.1458vw, 0.75rem); + --spacing_fluid-base-smooth-2xs-xs: clamp(0.125rem, -0.2083rem + 1.6667vw, 1.125rem); + --spacing_fluid-base-smooth-xs-s: clamp(0.1875rem, -0.25rem + 2.1875vw, 1.5rem); + --spacing_fluid-base-smooth-s-m: clamp(0.25rem, -0.4167rem + 3.3333vw, 2.25rem); + --spacing_fluid-base-smooth-m-l: clamp(0.375rem, -0.5rem + 4.375vw, 3rem); + --spacing_fluid-base-smooth-l-xl: clamp(0.5rem, -0.8333rem + 6.6667vw, 4.5rem); + --spacing_fluid-base-smooth-xl-2xl: clamp(0.75rem, -1rem + 8.75vw, 6rem); + --spacing_fluid-base-smooth-2xl-3xl: clamp(1rem, -1.6667rem + 13.3333vw, 9rem); + --spacing-gap-1: 0.25rem; + --spacing-gap-2: 0.5rem; } ``` @@ -728,17 +735,17 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Typography ____*/ ---typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); ---typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); ---typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); ---typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); ---typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); ---typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); ---typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); ---typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); ---typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); ---typography-weight-arial-regular: 600; + /*____ Typography ____*/ + --typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); + --typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); + --typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); + --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); + --typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); + --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); + --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); + --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); + --typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); + --typography-weight-arial-regular: 600; } ``` @@ -816,12 +823,12 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Typography ____*/ ---typography_fluid-comicsans-text-e: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); ---typography_fluid-comicsans-text-d: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); ---typography_fluid-comicsans-text-c: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); ---typography_fluid-comicsans-text-b: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); ---typography_fluid-comicsans-text-a: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); + /*____ Typography ____*/ + --typography_fluid-comicsans-text-e: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); + --typography_fluid-comicsans-text-d: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); + --typography_fluid-comicsans-text-c: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); + --typography_fluid-comicsans-text-b: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); + --typography_fluid-comicsans-text-a: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); } ``` @@ -940,26 +947,26 @@ This will generate the following CSS : ```css /*____ CSSForge ____*/ :root { -/*____ Spacing ____*/ ---spacing-size-2: 0.5rem; ---spacing-size-3: 0.75rem; -/*____ Typography ____*/ ---typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); ---typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); ---typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); ---typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); ---typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); ---typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); ---typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); ---typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); ---typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); -/*____ Primitives ____*/ -/* button */ ---button-small-width: 7.5rem; ---button-small-height: 2.5rem; ---button-small-fontSize: var(--typography_fluid-arial-m); ---button-small-radius: 0.5rem; ---button-small-padding: var(--spacing-size-2) var(--spacing-size-3); + /*____ Spacing ____*/ + --spacing-size-2: 0.5rem; + --spacing-size-3: 0.75rem; + /*____ Typography ____*/ + --typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); + --typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); + --typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); + --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); + --typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); + --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); + --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); + --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); + --typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); + /*____ Primitives ____*/ + /* button */ + --button-small-width: 7.5rem; + --button-small-height: 2.5rem; + --button-small-fontSize: var(--typography_fluid-arial-m); + --button-small-radius: 0.5rem; + --button-small-padding: var(--spacing-size-2) var(--spacing-size-3); } ```