@ethlete/core 5.0.0-next.63 → 5.0.0-next.65

package/generators/generators.json

@@ -21,6 +21,11 @@
       "schema": "./migrate-surface-interaction-swatch/schema.json",
       "description": "Rewrite surface theme interactionColor maps into the { color, onColor, inkColor } swatch shape"
     },
+    "migrate-color-theme-variants": {
+      "implementation": "./migrate-color-theme-variants/migration",
+      "schema": "./migrate-color-theme-variants/schema.json",
+      "description": "Rewrite surface theme colorTheme and semanticColorThemes into colorThemeVariants"
+    },
     "migrate-legacy-color-themes": {
       "implementation": "./migrate-legacy-color-themes/migration",
       "schema": "./migrate-legacy-color-themes/schema.json",

package/generators/migrate-color-theme-variants/color-theme-variants.js

@@ -0,0 +1,136 @@
+import { Project, SyntaxKind } from 'ts-morph';
+const createProject = () => new Project({
+    useInMemoryFileSystem: true,
+    compilerOptions: {
+        target: 99,
+        module: 99,
+    },
+});
+const findProperty = (literal, name) => {
+    const property = literal.getProperty(name);
+    return property?.isKind(SyntaxKind.PropertyAssignment) ? property : undefined;
+};
+const stringValue = (property) => {
+    const initializer = property?.getInitializer();
+    return initializer?.isKind(SyntaxKind.StringLiteral) || initializer?.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)
+        ? initializer.getLiteralText()
+        : undefined;
+};
+const literalsOf = (sourceFile) => sourceFile.getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression);
+export const collectColorThemesInFile = (filePath, content) => {
+    if (!content.includes('primary'))
+        return [];
+    return literalsOf(createProject().createSourceFile(filePath, content)).flatMap((literal) => {
+        const name = stringValue(findProperty(literal, 'name'));
+        if (!name || !literal.getProperty('primary'))
+            return [];
+        return [
+            {
+                name,
+                type: stringValue(findProperty(literal, 'type')),
+                isDefault: findProperty(literal, 'isDefault')?.getInitializer()?.getText() === 'true',
+            },
+        ];
+    });
+};
+const uniqueName = (names) => {
+    const unique = [...new Set(names)];
+    return unique.length === 1 ? unique[0] : undefined;
+};
+const quote = (value) => (/^[A-Za-z_$][\w$]*$/.test(value) ? value : `'${value}'`);
+/**
+ * Rewrites a surface theme's deprecated `colorTheme` and `semanticColorThemes` into `colorThemeVariants`, keyed by
+ * the `isDefault` theme and the theme of each `type` in `themes`. Existing `colorThemeVariants` entries win, then
+ * `semanticColorThemes`, then `colorTheme`, the same order the runtime resolves them in.
+ */
+export const migrateColorThemeVariantsInFile = (filePath, content, themes) => {
+    if (!content.includes('colorTheme') && !content.includes('semanticColorThemes')) {
+        return { changed: false, content, unresolved: [] };
+    }
+    const defaultName = uniqueName(themes.filter((theme) => theme.isDefault).map((theme) => theme.name));
+    const nameOfType = (type) => uniqueName(themes.filter((theme) => theme.type === type).map((theme) => theme.name));
+    const sourceFile = createProject().createSourceFile(filePath, content);
+    const unresolved = [];
+    let changed = false;
+    const surfaces = literalsOf(sourceFile).filter((literal) => literal.getProperty('elevation'));
+    for (const literal of surfaces) {
+        const colorTheme = findProperty(literal, 'colorTheme');
+        const semantic = findProperty(literal, 'semanticColorThemes');
+        if (!colorTheme && !semantic)
+            continue;
+        const surfaceName = stringValue(findProperty(literal, 'name')) ?? '<unnamed surface>';
+        const variants = findProperty(literal, 'colorThemeVariants');
+        const variantsLiteral = variants?.getInitializer();
+        if (variants && !variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+            unresolved.push(`${surfaceName}: colorThemeVariants is not an object literal`);
+            continue;
+        }
+        const existingKeys = new Set(variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)
+            ? variantsLiteral
+                .getProperties()
+                .flatMap((property) => property.isKind(SyntaxKind.PropertyAssignment) ? [property.getName().replace(/['"]/g, '')] : [])
+            : []);
+        const additions = new Map();
+        const toRemove = [];
+        const add = (key, value) => {
+            if (!existingKeys.has(key) && !additions.has(key))
+                additions.set(key, value);
+        };
+        let semanticResolved = true;
+        if (semantic) {
+            const semanticLiteral = semantic.getInitializer();
+            if (!semanticLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                semanticResolved = false;
+                unresolved.push(`${surfaceName}: semanticColorThemes is not an object literal`);
+            }
+            else {
+                const pending = [];
+                for (const property of semanticLiteral.getProperties()) {
+                    const type = property.isKind(SyntaxKind.PropertyAssignment) ? property.getName().replace(/['"]/g, '') : '';
+                    const value = property.isKind(SyntaxKind.PropertyAssignment) ? stringValue(property) : undefined;
+                    const key = type ? nameOfType(type) : undefined;
+                    if (!value || !key) {
+                        semanticResolved = false;
+                        unresolved.push(`${surfaceName}: semanticColorThemes entry ${property.getText()} has no single color theme of that type or no string value`);
+                        continue;
+                    }
+                    pending.push([key, value]);
+                }
+                if (semanticResolved)
+                    pending.forEach(([key, value]) => add(key, value));
+            }
+        }
+        let colorThemeResolved = true;
+        if (colorTheme) {
+            const value = stringValue(colorTheme);
+            if (!value || !defaultName) {
+                colorThemeResolved = false;
+                unresolved.push(`${surfaceName}: colorTheme ${colorTheme.getInitializer()?.getText()} needs a string value and exactly one isDefault color theme`);
+            }
+            else if (value !== defaultName) {
+                add(defaultName, value);
+            }
+        }
+        const added = [...additions];
+        if (semantic && semanticResolved) {
+            toRemove.push(semantic);
+        }
+        if (colorTheme && colorThemeResolved) {
+            toRemove.push(colorTheme);
+        }
+        if (toRemove.length === 0)
+            continue;
+        if (added.length > 0) {
+            const text = added.map(([key, value]) => `${quote(key)}: '${value}'`).join(', ');
+            if (variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                variantsLiteral.addPropertyAssignments(added.map(([key, value]) => ({ name: quote(key), initializer: `'${value}'` })));
+            }
+            else {
+                toRemove.shift()?.replaceWithText(`colorThemeVariants: { ${text} }`);
+            }
+        }
+        toRemove.forEach((property) => property.remove());
+        changed = true;
+    }
+    return { changed, content: changed ? sourceFile.getFullText() : content, unresolved };
+};

package/generators/migrate-color-theme-variants/migration.js

@@ -0,0 +1,46 @@
+import { formatFiles, visitNotIgnoredFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-provider-shape/migration-scope.js';
+import { collectColorThemesInFile, migrateColorThemeVariantsInFile } from './color-theme-variants.js';
+const isSource = (filePath) => filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+export default async function migrateColorThemeVariants(tree, schema) {
+    console.log('\n🔄 Migrating surface colorTheme and semanticColorThemes to colorThemeVariants...');
+    const themes = [];
+    visitNotIgnoredFiles(tree, '', (filePath) => {
+        if (!isSource(filePath))
+            return;
+        const content = tree.read(filePath, 'utf-8');
+        if (content)
+            themes.push(...collectColorThemesInFile(filePath, content));
+    });
+    const defaults = themes.filter((theme) => theme.isDefault).map((theme) => theme.name);
+    console.log(`   Color themes found: ${themes.map((theme) => theme.name).join(', ') || 'none'}`);
+    console.log(`   Default color theme: ${defaults.join(', ') || 'none'}`);
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    let filesChanged = 0;
+    let unresolvedCount = 0;
+    scope.visit(tree, (filePath) => {
+        if (!isSource(filePath))
+            return;
+        const before = tree.read(filePath, 'utf-8');
+        if (!before)
+            return;
+        const result = migrateColorThemeVariantsInFile(filePath, before, themes);
+        for (const message of result.unresolved) {
+            unresolvedCount++;
+            console.warn(`   ⚠ ${filePath}: ${message}`);
+        }
+        if (!result.changed)
+            return;
+        tree.write(filePath, result.content);
+        filesChanged++;
+        console.log(`   ✓ ${filePath}`);
+    });
+    console.log(filesChanged === 0 ? '   Nothing to migrate.\n' : `\n✅ Migrated ${filesChanged} file(s).\n`);
+    if (unresolvedCount > 0) {
+        console.warn(`   Review ${unresolvedCount} unresolved value(s) manually. They keep working until the next major.\n`);
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+}

package/generators/migrate-color-theme-variants/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-color-theme-variants",
+  "title": "Migrate surface colorTheme and semanticColorThemes to colorThemeVariants",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to migrate. Defaults to every project in the workspace.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to migrate, relative to the workspace root (e.g. 'apps/web'). Unioned with `projects`. Defaults to the whole workspace.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

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 = [];