@ethlete/core 5.0.0-next.64 → 5.0.0-next.66

package/generators/tailwind-4-color-theme/generator.js

@@ -1,6 +1,7 @@
 import { formatFiles, logger, visitNotIgnoredFiles } from '@nx/devkit';
 import { posix } from 'path';
 import { Project, SyntaxKind } from 'ts-morph';
+import { colorThemeCss, cssThemeName } from '../../design/theme-css.js';
 export default async function generate(tree, schema) {
     logger.log('\n🔄 Starting Tailwind 4 theme generator...\n');
     const themesPath = schema.themesPath || 'src/themes.ts';
@@ -200,8 +201,8 @@ function parseThemeObject(obj, sourceFile, context) {
     return theme;
 }
 function applyDefaultThemeOverride(themes, defaultTheme) {
-    const wanted = createCssThemeName(defaultTheme);
-    const target = themes.find((t) => t.name === defaultTheme || createCssThemeName(t.name) === wanted);
+    const wanted = cssThemeName(defaultTheme);
+    const target = themes.find((t) => t.name === defaultTheme || cssThemeName(t.name) === wanted);
     if (!target) {
         throw new Error(`No theme named "${defaultTheme}" found. Available themes: ${themes.map((t) => t.name).join(', ')}`);
     }
@@ -362,12 +363,6 @@ function parseColorMap(initializer, sourceFile, context) {
     }
     return null;
 }
-function createCssThemeName(name) {
-    return name
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^a-z0-9-]/g, '');
-}
 function generateColorThemeNameTypes(themes, schema) {
     const themesPath = schema.themesPath || 'src/themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-themes.css';
@@ -391,8 +386,6 @@ export {};
 `;
 }
 function generateTailwindThemeCss(themes, utilityPrefix, runtimePrefix, schema) {
-    const tailwindVars = [];
-    const themeVars = [];
     const themesPath = schema.themesPath || 'src/themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-themes.css';
     const header = `/*
@@ -405,183 +398,7 @@ function generateTailwindThemeCss(themes, utilityPrefix, runtimePrefix, schema)
  */
 
 `;
-    for (const theme of themes) {
-        const name = createCssThemeName(theme.name);
-        tailwindVars.push(`  /* ${theme.name} theme */`);
-        addTailwindColorVariants(tailwindVars, `${utilityPrefix}-${name}`, theme.primary.color);
-        tailwindVars.push('');
-        addTailwindColorVariants(tailwindVars, `${utilityPrefix}-on-${name}`, theme.primary.onColor);
-        tailwindVars.push('');
-        addTailwindColorVariants(tailwindVars, `${utilityPrefix}-${name}-ink`, theme.primary.inkColor || theme.primary.color);
-        tailwindVars.push('');
-        if (theme.secondary) {
-            addTailwindColorVariants(tailwindVars, `${utilityPrefix}-${name}-secondary`, theme.secondary.color);
-            tailwindVars.push('');
-            addTailwindColorVariants(tailwindVars, `${utilityPrefix}-on-${name}-secondary`, theme.secondary.onColor);
-            tailwindVars.push('');
-        }
-        if (theme.tertiary) {
-            addTailwindColorVariants(tailwindVars, `${utilityPrefix}-${name}-tertiary`, theme.tertiary.color);
-            tailwindVars.push('');
-            addTailwindColorVariants(tailwindVars, `${utilityPrefix}-on-${name}-tertiary`, theme.tertiary.onColor);
-            tailwindVars.push('');
-        }
-    }
-    tailwindVars.push('');
-    const hasSecondary = themes.some((t) => t.secondary);
-    const hasTertiary = themes.some((t) => t.tertiary);
-    // Collect the dynamic theme colors once. They are emitted in `@theme` (so Tailwind generates
-    // the utilities) and ALSO re-declared on every color selector in the alias block below. A
-    // Tailwind `@theme` variable only lands on `:root`, so `rgb(var(--<runtime>-color-*))` resolves
-    // once against the root color scope and inherits that concrete color into descendants - which
-    // means `bg-<prefix>-theme-*` utilities would ignore nested `.<runtime>-color--*` scopes.
-    // Re-declaring them per color selector makes the utilities resolve against the nearest scope.
-    const dynamicColorVars = [];
-    addDynamicThemeColors(dynamicColorVars, utilityPrefix, runtimePrefix, 'theme', 'primary', false);
-    addDynamicInkColors(dynamicColorVars, utilityPrefix, runtimePrefix, 'theme-ink', 'primary-ink');
-    if (hasSecondary) {
-        addDynamicThemeColors(dynamicColorVars, utilityPrefix, runtimePrefix, 'theme-secondary', 'secondary', false);
-    }
-    if (hasTertiary) {
-        addDynamicThemeColors(dynamicColorVars, utilityPrefix, runtimePrefix, 'theme-tertiary', 'tertiary', false);
-    }
-    tailwindVars.push('  /* Dynamic theme colors (references runtime CSS variables) */');
-    tailwindVars.push(...dynamicColorVars);
-    themes.forEach((theme) => {
-        const name = createCssThemeName(theme.name);
-        const isDefault = theme.isDefault;
-        if (isDefault) {
-            const selectors = [':root', `.${runtimePrefix}-color--default`, `.${runtimePrefix}-color--${name}`];
-            themeVars.push(`${selectors.join(', ')} {`);
-        }
-        else {
-            themeVars.push(`.${runtimePrefix}-color--${name} {`);
-        }
-        addThemeColorVariants(themeVars, runtimePrefix, '', theme);
-        themeVars.push('}\n');
-    });
-    // Re-indent the dynamic theme colors (from 2-space `@theme` indent to the 4-space alias-block
-    // indent) and drop trailing blank lines so they slot cleanly into the alias selector below.
-    const dynamicColorAliasLines = dynamicColorVars.map((line) => (line === '' ? '' : `  ${line}`));
-    while (dynamicColorAliasLines.length && dynamicColorAliasLines[dynamicColorAliasLines.length - 1] === '') {
-        dynamicColorAliasLines.pop();
-    }
-    const aliasBlock = `/* Convenience aliases (rgb + solid + opacity variants) */
-@layer base {
-  :root, :where([class*="${runtimePrefix}-color--"]) {
-    --${runtimePrefix}-theme-color-primary-rgb: var(--${runtimePrefix}-color-primary);
-    --${runtimePrefix}-theme-color-primary-opacity: 1;
-    --${runtimePrefix}-theme-color-primary-solid: rgb(var(--${runtimePrefix}-theme-color-primary-rgb));
-    --${runtimePrefix}-theme-color-primary: rgb(var(--${runtimePrefix}-theme-color-primary-rgb) / var(--${runtimePrefix}-theme-color-primary-opacity));
-
-    --${runtimePrefix}-theme-color-on-primary-rgb: var(--${runtimePrefix}-color-on-primary);
-    --${runtimePrefix}-theme-color-on-primary-opacity: 1;
-    --${runtimePrefix}-theme-color-on-primary-solid: rgb(var(--${runtimePrefix}-theme-color-on-primary-rgb) / var(--${runtimePrefix}-theme-color-on-primary-opacity));
-    --${runtimePrefix}-theme-color-on-primary: rgb(var(--${runtimePrefix}-theme-color-on-primary-rgb) / var(--${runtimePrefix}-theme-color-on-primary-opacity));
-
-    --${runtimePrefix}-theme-color-ink-rgb: var(--${runtimePrefix}-color-primary-ink, var(--${runtimePrefix}-color-primary));
-    --${runtimePrefix}-theme-color-ink-opacity: 1;
-    --${runtimePrefix}-theme-color-ink-solid: rgb(var(--${runtimePrefix}-theme-color-ink-rgb) / var(--${runtimePrefix}-theme-color-ink-opacity));
-    --${runtimePrefix}-theme-color-ink: rgb(var(--${runtimePrefix}-theme-color-ink-rgb) / var(--${runtimePrefix}-theme-color-ink-opacity));
-
-    /* Dynamic Tailwind theme colors - re-declared per color scope so that
-       bg-${utilityPrefix}-theme-* utilities resolve against the nearest .${runtimePrefix}-color--*
-       scope instead of the value computed once at :root. */
-${dynamicColorAliasLines.join('\n')}
-  }
-}
-`;
-    return `${header}@theme {
-${tailwindVars.join('\n')}
-}
-
-@layer base {
-${themeVars.join('\n')}
-}
-
-${aliasBlock}`;
-}
-function addDynamicThemeColors(vars, utilityPrefix, runtimePrefix, tailwindName, cssVarName, addSpacingBefore) {
-    if (addSpacingBefore && vars.length > 0 && vars[vars.length - 1] !== '') {
-        vars.push('');
-    }
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}: rgb(var(--${runtimePrefix}-color-${cssVarName}));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-hover: rgb(var(--${runtimePrefix}-color-${cssVarName}-hover));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-focus: rgb(var(--${runtimePrefix}-color-${cssVarName}-focus));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-active: rgb(var(--${runtimePrefix}-color-${cssVarName}-active));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-disabled: rgb(var(--${runtimePrefix}-color-${cssVarName}-disabled));`);
-    vars.push('');
-    vars.push(`  --color-${utilityPrefix}-on-${tailwindName}: rgb(var(--${runtimePrefix}-color-on-${cssVarName}));`);
-    vars.push(`  --color-${utilityPrefix}-on-${tailwindName}-hover: rgb(var(--${runtimePrefix}-color-on-${cssVarName}-hover));`);
-    vars.push(`  --color-${utilityPrefix}-on-${tailwindName}-focus: rgb(var(--${runtimePrefix}-color-on-${cssVarName}-focus));`);
-    vars.push(`  --color-${utilityPrefix}-on-${tailwindName}-active: rgb(var(--${runtimePrefix}-color-on-${cssVarName}-active));`);
-    vars.push(`  --color-${utilityPrefix}-on-${tailwindName}-disabled: rgb(var(--${runtimePrefix}-color-on-${cssVarName}-disabled));`);
-    vars.push('');
-}
-function addDynamicInkColors(vars, utilityPrefix, runtimePrefix, tailwindName, cssVarName) {
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}: rgb(var(--${runtimePrefix}-color-${cssVarName}));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-hover: rgb(var(--${runtimePrefix}-color-${cssVarName}-hover));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-focus: rgb(var(--${runtimePrefix}-color-${cssVarName}-focus));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-active: rgb(var(--${runtimePrefix}-color-${cssVarName}-active));`);
-    vars.push(`  --color-${utilityPrefix}-${tailwindName}-disabled: rgb(var(--${runtimePrefix}-color-${cssVarName}-disabled));`);
-    vars.push('');
-}
-function addTailwindColorVariants(vars, colorName, colorSet) {
-    vars.push(`  --color-${colorName}: rgb(${colorSet.default});`);
-    const hoverValue = 'hover' in colorSet && colorSet.hover ? colorSet.hover : colorSet.default;
-    vars.push(`  --color-${colorName}-hover: rgb(${hoverValue});`);
-    const focusValue = 'focus' in colorSet && colorSet.focus ? colorSet.focus : hoverValue;
-    vars.push(`  --color-${colorName}-focus: rgb(${focusValue});`);
-    const activeValue = 'active' in colorSet && colorSet.active ? colorSet.active : hoverValue;
-    vars.push(`  --color-${colorName}-active: rgb(${activeValue});`);
-    const disabledValue = 'disabled' in colorSet && colorSet.disabled ? colorSet.disabled : colorSet.default;
-    vars.push(`  --color-${colorName}-disabled: rgb(${disabledValue});`);
-}
-function addThemeColorVariants(vars, prefix, altPrefix, theme) {
-    const addSwatch = (level, swatch) => {
-        const defaultColor = swatch.color.default;
-        const hoverColor = swatch.color.hover || defaultColor;
-        const focusColor = swatch.color.focus || hoverColor;
-        const activeColor = swatch.color.active || hoverColor;
-        const disabledColor = swatch.color.disabled || defaultColor;
-        vars.push(`  --${prefix}-color-${altPrefix}${level}: ${defaultColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-hover: ${hoverColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-focus: ${focusColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-active: ${activeColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-disabled: ${disabledColor};`);
-        vars.push('');
-        const onDefaultColor = swatch.onColor.default;
-        const onHoverColor = swatch.onColor.hover || onDefaultColor;
-        const onFocusColor = swatch.onColor.focus || onHoverColor;
-        const onActiveColor = swatch.onColor.active || onDefaultColor;
-        const onDisabledColor = swatch.onColor.disabled || onDefaultColor;
-        vars.push(`  --${prefix}-color-${altPrefix}on-${level}: ${onDefaultColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-hover: ${onHoverColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-focus: ${onFocusColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-active: ${onActiveColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-disabled: ${onDisabledColor};`);
-        const inkDefaultColor = swatch.inkColor?.default || defaultColor;
-        const inkHoverColor = swatch.inkColor?.hover || inkDefaultColor;
-        const inkFocusColor = swatch.inkColor?.focus || inkHoverColor;
-        const inkActiveColor = swatch.inkColor?.active || inkDefaultColor;
-        const inkDisabledColor = swatch.inkColor?.disabled || inkDefaultColor;
-        vars.push('');
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink: ${inkDefaultColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-hover: ${inkHoverColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-focus: ${inkFocusColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-active: ${inkActiveColor};`);
-        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-disabled: ${inkDisabledColor};`);
-        if (theme.secondary || theme.tertiary) {
-            vars.push('');
-        }
-    };
-    addSwatch('primary', theme.primary);
-    if (theme.secondary) {
-        addSwatch('secondary', theme.secondary);
-    }
-    if (theme.tertiary) {
-        addSwatch('tertiary', theme.tertiary);
-    }
+    return `${header}${colorThemeCss(themes, { prefix: utilityPrefix, runtimePrefix })}`;
 }
 function findMainStylesFile(tree) {
     const potentialFiles = [];

package/generators/tailwind-4-surface-theme/generator.js

@@ -1,5 +1,6 @@
 import { formatFiles, logger, visitNotIgnoredFiles } from '@nx/devkit';
 import { Project, SyntaxKind } from 'ts-morph';
+import { cssThemeName, surfaceThemeCss } from '../../design/theme-css.js';
 export default async function generate(tree, schema) {
     logger.log('\n🔄 Starting Tailwind 4 surface theme generator...\n');
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
@@ -293,8 +294,8 @@ function parseSurfaceThemeObject(obj, sourceFile) {
 // flags on themes of that type. Matches the theme's name or its CSS-safe form. Themes of
 // the other type keep their flags. Returns the resolved name.
 function applyDefaultSurfaceThemeOverride(themes, defaultTheme, type) {
-    const wanted = createCssSurfaceName(defaultTheme);
-    const matches = themes.filter((t) => t.name === defaultTheme || createCssSurfaceName(t.name) === wanted);
+    const wanted = cssThemeName(defaultTheme);
+    const matches = themes.filter((t) => t.name === defaultTheme || cssThemeName(t.name) === wanted);
     const target = matches.find((t) => t.type === type);
     if (!target) {
         const [firstMatch] = matches;
@@ -329,12 +330,6 @@ function validateSurfaceThemeConfiguration(themes) {
 }
 //#endregion
 //#region CSS Generation
-function createCssSurfaceName(name) {
-    return name
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^a-z0-9-]/g, '');
-}
 function generateSurfaceThemeNameTypes(themes, schema) {
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-surface-themes.css';
@@ -358,8 +353,6 @@ export {};
 `;
 }
 function generateSurfaceThemeCss(themes, utilityPrefix, runtimePrefix, schema) {
-    const tailwindVars = [];
-    const themeVars = [];
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-surface-themes.css';
     const header = `/*
@@ -372,230 +365,7 @@ function generateSurfaceThemeCss(themes, utilityPrefix, runtimePrefix, schema) {
  */
 
 `;
-    // Static Tailwind @theme block - one color set per surface theme
-    for (const theme of themes) {
-        const name = createCssSurfaceName(theme.name);
-        tailwindVars.push(`  /* ${theme.name} surface */`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-bg: rgb(${theme.background});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}: rgb(${theme.color});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-muted: rgb(${theme.colorMuted});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-subtle: rgb(${theme.colorSubtle});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-border: rgb(${theme.border});`);
-        if (theme.interactionColor) {
-            const { color, onColor, inkColor } = theme.interactionColor;
-            pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-interaction`, color);
-            if (onColor) {
-                pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-on-interaction`, onColor);
-            }
-            if (inkColor) {
-                pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-interaction-ink`, inkColor);
-            }
-        }
-        tailwindVars.push('');
-    }
-    // Dynamic surface colors (reference runtime CSS variables).
-    // These are ALSO re-declared on every surface selector in the alias block below. A Tailwind
-    // `@theme` variable only lands on `:root`, so `rgb(var(--<runtime>-surface-*))` resolves once
-    // against the root surface and inherits that concrete color into descendants - which means
-    // `bg-<prefix>-surface-*` utilities would ignore nested surface scopes (e.g. an elevated
-    // surface). Re-declaring them per surface selector makes the utilities resolve against the
-    // nearest surface instead.
-    const dynamicSurfaceColors = buildDynamicSurfaceColors(utilityPrefix, runtimePrefix);
-    tailwindVars.push('  /* Dynamic surface colors (references runtime CSS variables) */');
-    tailwindVars.push(...dynamicSurfaceColors.map((decl) => `  ${decl}`));
-    // Runtime CSS - theme selector classes
-    for (const theme of themes) {
-        const name = createCssSurfaceName(theme.name);
-        const isDefault = theme.isDefault;
-        if (isDefault) {
-            const selectors = [`.${runtimePrefix}-surface--default-${theme.type}`, `.${runtimePrefix}-surface--${name}`];
-            themeVars.push(`${selectors.join(', ')} {`);
-        }
-        else {
-            themeVars.push(`.${runtimePrefix}-surface--${name} {`);
-        }
-        pushSurfaceVars(themeVars, runtimePrefix, theme, '  ');
-        themeVars.push('}\n');
-    }
-    // Root defaults - apply the default surface vars to :root
-    const defaultLight = themes.find((t) => t.isDefault && t.type === 'light');
-    const defaultDark = themes.find((t) => t.isDefault && t.type === 'dark');
-    if (defaultLight && defaultDark) {
-        pushSchemeSurfaceVars(themeVars, runtimePrefix, defaultLight);
-        pushSchemeSurfaceVars(themeVars, runtimePrefix, defaultDark);
-        pushForcedSchemeSurfaceVars(themeVars, runtimePrefix, defaultLight);
-        pushForcedSchemeSurfaceVars(themeVars, runtimePrefix, defaultDark);
-    }
-    else {
-        // A single registered surface type has no other scheme to switch to, so its default must
-        // land on :root unconditionally - behind prefers-color-scheme it would leave every surface
-        // variable undefined for users whose OS asks for the scheme the app lacks.
-        pushRootSurfaceVars(themeVars, runtimePrefix, defaultLight ?? defaultDark);
-    }
-    // Convenience var aliases - available on any element with a surface class or :root (via media queries)
-    const aliasBlock = `/* Convenience aliases (rgb + solid variants) */
-@layer base {
-  :root, :where([class*="${runtimePrefix}-surface--"]) {
-    --${runtimePrefix}-surface-background-rgb: var(--${runtimePrefix}-surface-background);
-    --${runtimePrefix}-surface-background-solid: rgb(var(--${runtimePrefix}-surface-background-rgb));
-
-    --${runtimePrefix}-surface-color-rgb: var(--${runtimePrefix}-surface-color);
-    --${runtimePrefix}-surface-color-solid: rgb(var(--${runtimePrefix}-surface-color-rgb));
-
-    --${runtimePrefix}-surface-color-muted-rgb: var(--${runtimePrefix}-surface-color-muted);
-    --${runtimePrefix}-surface-color-muted-solid: rgb(var(--${runtimePrefix}-surface-color-muted-rgb));
-
-    --${runtimePrefix}-surface-color-subtle-rgb: var(--${runtimePrefix}-surface-color-subtle);
-    --${runtimePrefix}-surface-color-subtle-solid: rgb(var(--${runtimePrefix}-surface-color-subtle-rgb));
-
-    --${runtimePrefix}-surface-border-rgb: var(--${runtimePrefix}-surface-border);
-    --${runtimePrefix}-surface-border-solid: rgb(var(--${runtimePrefix}-surface-border-rgb));
-
-    --${runtimePrefix}-surface-interaction-rgb: var(--${runtimePrefix}-surface-interaction);
-    --${runtimePrefix}-surface-interaction-solid: rgb(var(--${runtimePrefix}-surface-interaction-rgb));
-
-    --${runtimePrefix}-surface-interaction-hover-rgb: var(--${runtimePrefix}-surface-interaction-hover);
-    --${runtimePrefix}-surface-interaction-hover-solid: rgb(var(--${runtimePrefix}-surface-interaction-hover-rgb));
-
-    --${runtimePrefix}-surface-interaction-focus-rgb: var(--${runtimePrefix}-surface-interaction-focus);
-    --${runtimePrefix}-surface-interaction-focus-solid: rgb(var(--${runtimePrefix}-surface-interaction-focus-rgb));
-
-    --${runtimePrefix}-surface-interaction-active-rgb: var(--${runtimePrefix}-surface-interaction-active);
-    --${runtimePrefix}-surface-interaction-active-solid: rgb(var(--${runtimePrefix}-surface-interaction-active-rgb));
-
-    --${runtimePrefix}-surface-interaction-disabled-rgb: var(--${runtimePrefix}-surface-interaction-disabled);
-    --${runtimePrefix}-surface-interaction-disabled-solid: rgb(var(--${runtimePrefix}-surface-interaction-disabled-rgb));
-
-    /* Dynamic Tailwind surface colors - re-declared per surface scope so that
-       bg-${utilityPrefix}-surface-* utilities resolve against the nearest surface
-       (e.g. a nested elevated surface) instead of the value computed once at :root. */
-${dynamicSurfaceColors.map((decl) => `    ${decl}`).join('\n')}
-  }
-}
-`;
-    return `${header}@theme {
-${tailwindVars.join('\n')}
-}
-
-@layer base {
-${themeVars.join('\n')}
-}
-
-${aliasBlock}
-${buildSurfaceColorScope(runtimePrefix)}`;
-}
-// The reserved `surface` color scope. It bridges the two theming systems - color variables out of
-// surface variables - so `[etProvideColor]="'surface'"` renders a component in the neutral of
-// whatever surface it sits on. It lives here rather than in the SDK's own CSS because a stylesheet
-// shipped with `ProvideColorDirective` would land in every bundle that themes anything, and only
-// apps that use the scope should pay for it.
-function buildSurfaceColorScope(runtimePrefix) {
-    const tint = `var(--${runtimePrefix}-surface-interaction, var(--${runtimePrefix}-surface-color))`;
-    const on = `var(--${runtimePrefix}-surface-on-interaction, var(--${runtimePrefix}-surface-background))`;
-    const ink = `var(--${runtimePrefix}-surface-interaction-ink, var(--${runtimePrefix}-surface-color))`;
-    const state = (name, source, fallback) => INTERACTION_STATE_SUFFIXES.map((suffix) => `    --${runtimePrefix}-color-${name}${suffix}: ${suffix ? `var(--${runtimePrefix}-surface-${source}${suffix}, ${fallback})` : fallback};`).join('\n');
-    return `/* The reserved \`surface\` color: resolves the color tokens from the ambient surface's neutral swatch. */
-@layer base {
-  .${runtimePrefix}-color--surface {
-${state('primary', 'interaction', tint)}
-
-${state('on-primary', 'on-interaction', on)}
-
-${state('primary-ink', 'interaction-ink', ink)}
-  }
-}
-`;
-}
-// Dynamic surface color declarations (unindented). Emitted in `@theme` (so Tailwind generates
-// the utilities) and re-declared on every surface selector (so the utilities resolve per scope).
-function buildDynamicSurfaceColors(utilityPrefix, runtimePrefix) {
-    // `on-interaction` and `interaction-ink` are optional per theme, so each falls back to the
-    // surface's own background/color - the same defaults the `.<runtimePrefix>-color--surface`
-    // bridge applies.
-    const onFallback = `var(--${runtimePrefix}-surface-background)`;
-    const inkFallback = `var(--${runtimePrefix}-surface-color)`;
-    return [
-        `--color-${utilityPrefix}-surface-bg: rgb(var(--${runtimePrefix}-surface-background));`,
-        `--color-${utilityPrefix}-surface: rgb(var(--${runtimePrefix}-surface-color));`,
-        `--color-${utilityPrefix}-surface-muted: rgb(var(--${runtimePrefix}-surface-color-muted));`,
-        `--color-${utilityPrefix}-surface-subtle: rgb(var(--${runtimePrefix}-surface-color-subtle));`,
-        `--color-${utilityPrefix}-surface-border: rgb(var(--${runtimePrefix}-surface-border));`,
-        `--color-${utilityPrefix}-surface-interaction: rgb(var(--${runtimePrefix}-surface-interaction));`,
-        `--color-${utilityPrefix}-surface-interaction-hover: rgb(var(--${runtimePrefix}-surface-interaction-hover));`,
-        `--color-${utilityPrefix}-surface-interaction-focus: rgb(var(--${runtimePrefix}-surface-interaction-focus));`,
-        `--color-${utilityPrefix}-surface-interaction-active: rgb(var(--${runtimePrefix}-surface-interaction-active));`,
-        `--color-${utilityPrefix}-surface-interaction-disabled: rgb(var(--${runtimePrefix}-surface-interaction-disabled));`,
-        ...INTERACTION_STATE_SUFFIXES.map((suffix) => `--color-${utilityPrefix}-surface-on-interaction${suffix}: rgb(var(--${runtimePrefix}-surface-on-interaction${suffix}, ${onFallback}));`),
-        ...INTERACTION_STATE_SUFFIXES.map((suffix) => `--color-${utilityPrefix}-surface-interaction-ink${suffix}: rgb(var(--${runtimePrefix}-surface-interaction-ink${suffix}, ${inkFallback}));`),
-    ];
-}
-const INTERACTION_STATE_SUFFIXES = ['', '-hover', '-focus', '-active', '-disabled'];
-// Fills the optional states from the ones that are set, matching how the color theme generator
-// resolves a swatch: hover falls back to default, focus to hover, active and disabled to default.
-function resolveInteractionStates(map) {
-    const hover = map.hover || map.default;
-    return {
-        '': map.default,
-        '-hover': hover,
-        '-focus': map.focus || hover,
-        '-active': map.active || map.default,
-        '-disabled': map.disabled || map.default,
-    };
-}
-function pushStaticInteractionColors(vars, name, map) {
-    const states = resolveInteractionStates(map);
-    for (const suffix of INTERACTION_STATE_SUFFIXES) {
-        vars.push(`  ${name}${suffix}: rgb(${states[suffix]});`);
-    }
-}
-function pushRuntimeInteractionVars(vars, name, map, indent) {
-    const states = resolveInteractionStates(map);
-    for (const suffix of INTERACTION_STATE_SUFFIXES) {
-        vars.push(`${indent}${name}${suffix}: ${states[suffix]};`);
-    }
-}
-function pushRootSurfaceVars(vars, runtimePrefix, theme) {
-    if (!theme)
-        return;
-    vars.push(`:root {`);
-    pushSurfaceVars(vars, runtimePrefix, theme, '  ');
-    vars.push(`  color-scheme: ${theme.type};`);
-    vars.push(`}\n`);
-}
-function pushSchemeSurfaceVars(vars, runtimePrefix, theme) {
-    vars.push(`@media (prefers-color-scheme: ${theme.type}) {`);
-    vars.push(`  :root {`);
-    pushSurfaceVars(vars, runtimePrefix, theme, '    ');
-    vars.push(`    color-scheme: ${theme.type};`);
-    vars.push(`  }`);
-    vars.push(`}\n`);
-}
-// `:root.<prefix>-scheme--<type>` must out-specify the `:root` inside the media query above, so the
-// class set by `provideColorScheme()` overrides the OS preference regardless of source order.
-function pushForcedSchemeSurfaceVars(vars, runtimePrefix, theme) {
-    vars.push(`:root.${runtimePrefix}-scheme--${theme.type} {`);
-    pushSurfaceVars(vars, runtimePrefix, theme, '  ');
-    vars.push(`  color-scheme: ${theme.type};`);
-    vars.push(`}\n`);
-}
-function pushSurfaceVars(vars, runtimePrefix, theme, indent) {
-    vars.push(`${indent}--${runtimePrefix}-surface-background: ${theme.background};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color: ${theme.color};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color-muted: ${theme.colorMuted};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color-subtle: ${theme.colorSubtle};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-border: ${theme.border};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-type: ${theme.type};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-elevation: ${theme.elevation};`);
-    if (theme.interactionColor) {
-        const { color, onColor, inkColor } = theme.interactionColor;
-        pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-interaction`, color, indent);
-        if (onColor) {
-            pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-on-interaction`, onColor, indent);
-        }
-        if (inkColor) {
-            pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-interaction-ink`, inkColor, indent);
-        }
-    }
+    return `${header}${surfaceThemeCss(themes, { prefix: utilityPrefix, runtimePrefix })}`;
 }
 function findMainStylesFile(tree) {
     const potentialFiles = [];

package/package.json

@@ -1,8 +1,23 @@
 {
   "name": "@ethlete/core",
-  "version": "5.0.0-next.64",
+  "version": "5.0.0-next.66",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ethlete-io/ethdk",
+    "directory": "libs/core"
+  },
   "license": "MIT",
   "sideEffects": false,
+  "exports": {
+    "./design/*": "./design/*.ts",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ethlete-core.d.ts",
+      "default": "./fesm2022/ethlete-core.mjs"
+    }
+  },
   "peerDependencies": {
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0",
@@ -33,15 +48,6 @@
   "generators": "./generators/generators.json",
   "module": "fesm2022/ethlete-core.mjs",
   "typings": "types/ethlete-core.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ethlete-core.d.ts",
-      "default": "./fesm2022/ethlete-core.mjs"
-    }
-  },
   "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"