@ethlete/core 5.0.0-next.8 → 5.0.0-next.9

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

@@ -167,9 +167,9 @@ function parseThemeObject(obj, sourceFile) {
                     theme.isDefault = true;
                 }
                 break;
-            case 'isDefaultAlt':
-                if (initializer.isKind(SyntaxKind.TrueKeyword)) {
-                    theme.isDefaultAlt = true;
+            case 'type':
+                if (initializer.isKind(SyntaxKind.StringLiteral)) {
+                    theme.type = initializer.getLiteralValue();
                 }
                 break;
             case 'primary':
@@ -188,8 +188,6 @@ function parseThemeObject(obj, sourceFile) {
 }
 function validateThemeConfiguration(themes) {
     const defaultThemes = themes.filter((t) => t.isDefault);
-    const defaultAltThemes = themes.filter((t) => t.isDefaultAlt);
-    const bothDefaultAndAlt = themes.filter((t) => t.isDefault && t.isDefaultAlt);
     // Error: No default theme
     if (defaultThemes.length === 0) {
         throw new Error('No default theme found. At least one theme must have isDefault: true');
@@ -198,13 +196,18 @@ function validateThemeConfiguration(themes) {
     if (defaultThemes.length > 1) {
         throw new Error(`Multiple default themes found: ${defaultThemes.map((t) => t.name).join(', ')}. Only one theme can have isDefault: true`);
     }
-    // Error: Theme has both isDefault and isDefaultAlt
-    if (bothDefaultAndAlt.length > 0) {
-        throw new Error(`Theme "${bothDefaultAndAlt[0].name}" has both isDefault and isDefaultAlt set to true. A theme can only be one or the other`);
-    }
-    // Error: Multiple default alt themes
-    if (defaultAltThemes.length > 1) {
-        throw new Error(`Multiple default alt themes found: ${defaultAltThemes.map((t) => t.name).join(', ')}. Only one theme can have isDefaultAlt: true`);
+    // Error: Duplicate theme types
+    const typedThemes = themes.filter((t) => t.type);
+    const typeMap = new Map();
+    for (const theme of typedThemes) {
+        const existing = typeMap.get(theme.type) || [];
+        existing.push(theme.name);
+        typeMap.set(theme.type, existing);
+    }
+    for (const [type, names] of typeMap) {
+        if (names.length > 1) {
+            throw new Error(`Multiple themes with type "${type}" found: ${names.join(', ')}. Only one theme can have a given type`);
+        }
     }
 }
 function parseThemeSwatch(obj, sourceFile) {
@@ -312,8 +315,7 @@ function generateTailwindThemeCss(themes, prefix, schema) {
 `;
     // Validation is now done separately before this function is called
     const defaultThemes = themes.filter((t) => t.isDefault);
-    const defaultAltThemes = themes.filter((t) => t.isDefaultAlt);
-    const regularThemes = themes.filter((t) => !t.isDefault && !t.isDefaultAlt);
+    const regularThemes = themes.filter((t) => !t.isDefault);
     // Generate static Tailwind @theme block for each theme
     for (const theme of themes) {
         const name = createCssThemeName(theme.name);
@@ -344,13 +346,10 @@ function generateTailwindThemeCss(themes, prefix, schema) {
         }
     }
     tailwindVars.push('');
-    // Generate dynamic theme variables - check main themes and alt themes separately
+    // Main theme dynamic colors
     const mainThemes = [...defaultThemes, ...regularThemes];
     const hasSecondary = mainThemes.some((t) => t.secondary);
     const hasTertiary = mainThemes.some((t) => t.tertiary);
-    const hasAltSecondary = defaultAltThemes.some((t) => t.secondary);
-    const hasAltTertiary = defaultAltThemes.some((t) => t.tertiary);
-    // Main theme dynamic colors
     tailwindVars.push('  /* Dynamic theme colors (references runtime CSS variables) */');
     addDynamicThemeColors(tailwindVars, prefix, 'theme', 'primary', true);
     addDynamicInkColors(tailwindVars, prefix, 'theme-ink', 'primary-ink');
@@ -360,54 +359,54 @@ function generateTailwindThemeCss(themes, prefix, schema) {
     if (hasTertiary) {
         addDynamicThemeColors(tailwindVars, prefix, 'theme-tertiary', 'tertiary', false);
     }
-    // Alt theme dynamic colors
-    tailwindVars.push('  /* Alt theme dynamic colors */');
-    addDynamicThemeColors(tailwindVars, prefix, 'alt-theme', 'alt-primary', true);
-    addDynamicInkColors(tailwindVars, prefix, 'alt-theme-ink', 'alt-primary-ink');
-    if (hasAltSecondary) {
-        addDynamicThemeColors(tailwindVars, prefix, 'alt-theme-secondary', 'alt-secondary', false);
-    }
-    if (hasAltTertiary) {
-        addDynamicThemeColors(tailwindVars, prefix, 'alt-theme-tertiary', 'alt-tertiary', false);
-    }
-    // Generate runtime CSS for ALL themes (both main and alt variants)
+    // Generate runtime CSS for all themes
     themes.forEach((theme) => {
         const name = createCssThemeName(theme.name);
-        // Determine if this is the default or default-alt theme
+        // Determine if this is the default theme
         const isDefault = theme.isDefault;
-        const isDefaultAlt = theme.isDefaultAlt;
-        // Generate main color variant (.et-color--{name})
+        // Generate color variant (.et-color--{name})
         if (isDefault) {
             // Default color gets :root and .et-color--default selectors
             const selectors = [':root', `.${prefix}-color--default`, `.${prefix}-color--${name}`];
             themeVars.push(`${selectors.join(', ')} {`);
         }
-        else if (!isDefaultAlt) {
+        else {
             // Regular colors just get their own class
             themeVars.push(`.${prefix}-color--${name} {`);
         }
-        if (isDefault || !isDefaultAlt) {
-            addThemeColorVariants(themeVars, prefix, '', theme);
-            themeVars.push('}\n');
-        }
-        // Generate alt color variant (.et-color-alt--{name})
-        if (isDefaultAlt) {
-            // Default alt color gets :root and .et-color-alt--default selectors
-            const selectors = [':root', `.${prefix}-color-alt--default`, `.${prefix}-color-alt--${name}`];
-            themeVars.push(`${selectors.join(', ')} {`);
-        }
-        else {
-            // All colors (including default and regular) get an alt variant
-            themeVars.push(`.${prefix}-color-alt--${name} {`);
-        }
-        addThemeColorVariants(themeVars, prefix, 'alt-', theme);
+        addThemeColorVariants(themeVars, prefix, '', theme);
         themeVars.push('}\n');
     });
+    // Convenience var aliases — available on any element with a color class (or root for default)
+    const aliasBlock = `/* Convenience aliases (rgb + solid + opacity variants) */
+@layer base {
+  :root, :where([class*="${prefix}-color--"]) {
+    --${prefix}-theme-color-primary-rgb: var(--${prefix}-color-primary);
+    --${prefix}-theme-color-primary-opacity: 1;
+    --${prefix}-theme-color-primary-solid: rgb(var(--${prefix}-theme-color-primary-rgb));
+    --${prefix}-theme-color-primary: rgb(var(--${prefix}-theme-color-primary-rgb) / var(--${prefix}-theme-color-primary-opacity));
+
+    --${prefix}-theme-color-on-primary-rgb: var(--${prefix}-color-on-primary);
+    --${prefix}-theme-color-on-primary-opacity: 1;
+    --${prefix}-theme-color-on-primary-solid: rgb(var(--${prefix}-theme-color-on-primary-rgb) / var(--${prefix}-theme-color-on-primary-opacity));
+    --${prefix}-theme-color-on-primary: rgb(var(--${prefix}-theme-color-on-primary-rgb) / var(--${prefix}-theme-color-on-primary-opacity));
+
+    --${prefix}-theme-color-ink-rgb: var(--${prefix}-color-primary-ink, var(--${prefix}-color-primary));
+    --${prefix}-theme-color-ink-opacity: 1;
+    --${prefix}-theme-color-ink-solid: rgb(var(--${prefix}-theme-color-ink-rgb) / var(--${prefix}-theme-color-ink-opacity));
+    --${prefix}-theme-color-ink: rgb(var(--${prefix}-theme-color-ink-rgb) / var(--${prefix}-theme-color-ink-opacity));
+  }
+}
+`;
     return `${header}@theme {
 ${tailwindVars.join('\n')}
 }
 
-${themeVars.join('\n')}`;
+@layer base {
+${themeVars.join('\n')}
+}
+
+${aliasBlock}`;
 }
 function addDynamicThemeColors(vars, prefix, tailwindName, cssVarName, addSpacingBefore) {
     if (addSpacingBefore && vars.length > 0 && vars[vars.length - 1] !== '') {

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

@@ -143,6 +143,27 @@ function parseSurfaceThemeObject(obj) {
             }
             continue;
         }
+        if (propName === 'interactionColor' && initializer.isKind(SyntaxKind.ObjectLiteralExpression)) {
+            const interactionProps = initializer.getProperties();
+            const interactionColor = {};
+            for (const iProp of interactionProps) {
+                if (!iProp.isKind(SyntaxKind.PropertyAssignment))
+                    continue;
+                const iPropName = iProp.getName();
+                const iInit = iProp.getInitializer();
+                if (iInit?.isKind(SyntaxKind.StringLiteral)) {
+                    interactionColor[iPropName] = iInit.getLiteralValue();
+                }
+            }
+            if (interactionColor.default &&
+                interactionColor.hover &&
+                interactionColor.focus &&
+                interactionColor.active &&
+                interactionColor.disabled) {
+                theme.interactionColor = interactionColor;
+            }
+            continue;
+        }
         if (propName === 'elevation') {
             if (initializer.isKind(SyntaxKind.NumericLiteral)) {
                 theme.elevation = Number(initializer.getLiteralValue());
@@ -219,6 +240,13 @@ function generateSurfaceThemeCss(themes, prefix, schema) {
         tailwindVars.push(`  --color-${prefix}-surface-${name}-muted: rgb(${theme.colorMuted});`);
         tailwindVars.push(`  --color-${prefix}-surface-${name}-subtle: rgb(${theme.colorSubtle});`);
         tailwindVars.push(`  --color-${prefix}-surface-${name}-border: rgb(${theme.border});`);
+        if (theme.interactionColor) {
+            tailwindVars.push(`  --color-${prefix}-surface-${name}-interaction: rgb(${theme.interactionColor.default});`);
+            tailwindVars.push(`  --color-${prefix}-surface-${name}-interaction-hover: rgb(${theme.interactionColor.hover});`);
+            tailwindVars.push(`  --color-${prefix}-surface-${name}-interaction-focus: rgb(${theme.interactionColor.focus});`);
+            tailwindVars.push(`  --color-${prefix}-surface-${name}-interaction-active: rgb(${theme.interactionColor.active});`);
+            tailwindVars.push(`  --color-${prefix}-surface-${name}-interaction-disabled: rgb(${theme.interactionColor.disabled});`);
+        }
         tailwindVars.push('');
     }
     // Dynamic surface colors (reference runtime CSS variables)
@@ -228,6 +256,12 @@ function generateSurfaceThemeCss(themes, prefix, schema) {
     tailwindVars.push(`  --color-${prefix}-surface-muted: rgb(var(--${prefix}-surface-color-muted));`);
     tailwindVars.push(`  --color-${prefix}-surface-subtle: rgb(var(--${prefix}-surface-color-subtle));`);
     tailwindVars.push(`  --color-${prefix}-surface-border: rgb(var(--${prefix}-surface-border));`);
+    // Dynamic interaction colors (reference runtime CSS variables)
+    tailwindVars.push(`  --color-${prefix}-surface-interaction: rgb(var(--${prefix}-surface-interaction));`);
+    tailwindVars.push(`  --color-${prefix}-surface-interaction-hover: rgb(var(--${prefix}-surface-interaction-hover));`);
+    tailwindVars.push(`  --color-${prefix}-surface-interaction-focus: rgb(var(--${prefix}-surface-interaction-focus));`);
+    tailwindVars.push(`  --color-${prefix}-surface-interaction-active: rgb(var(--${prefix}-surface-interaction-active));`);
+    tailwindVars.push(`  --color-${prefix}-surface-interaction-disabled: rgb(var(--${prefix}-surface-interaction-disabled));`);
     // Runtime CSS — theme selector classes
     for (const theme of themes) {
         const name = createCssSurfaceName(theme.name);
@@ -239,20 +273,87 @@ function generateSurfaceThemeCss(themes, prefix, schema) {
         else {
             themeVars.push(`.${prefix}-surface--${name} {`);
         }
-        themeVars.push(`  --${prefix}-surface-background: ${theme.background};`);
-        themeVars.push(`  --${prefix}-surface-color: ${theme.color};`);
-        themeVars.push(`  --${prefix}-surface-color-muted: ${theme.colorMuted};`);
-        themeVars.push(`  --${prefix}-surface-color-subtle: ${theme.colorSubtle};`);
-        themeVars.push(`  --${prefix}-surface-border: ${theme.border};`);
-        themeVars.push(`  --${prefix}-surface-type: ${theme.type};`);
-        themeVars.push(`  --${prefix}-surface-elevation: ${theme.elevation};`);
+        pushSurfaceVars(themeVars, prefix, theme, '  ');
         themeVars.push('}\n');
     }
+    // Media query defaults — apply surface vars to :root based on prefers-color-scheme
+    const defaultLight = themes.find((t) => t.isDefault && t.type === 'light');
+    const defaultDark = themes.find((t) => t.isDefault && t.type === 'dark');
+    if (defaultLight) {
+        themeVars.push(`@media (prefers-color-scheme: light) {`);
+        themeVars.push(`  :root {`);
+        pushSurfaceVars(themeVars, prefix, defaultLight, '    ');
+        themeVars.push(`  }`);
+        themeVars.push(`}\n`);
+    }
+    if (defaultDark) {
+        themeVars.push(`@media (prefers-color-scheme: dark) {`);
+        themeVars.push(`  :root {`);
+        pushSurfaceVars(themeVars, prefix, defaultDark, '    ');
+        themeVars.push(`  }`);
+        themeVars.push(`}\n`);
+    }
+    // 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*="${prefix}-surface--"]) {
+    --${prefix}-surface-background-rgb: var(--${prefix}-surface-background);
+    --${prefix}-surface-background-solid: rgb(var(--${prefix}-surface-background-rgb));
+
+    --${prefix}-surface-color-rgb: var(--${prefix}-surface-color);
+    --${prefix}-surface-color-solid: rgb(var(--${prefix}-surface-color-rgb));
+
+    --${prefix}-surface-color-muted-rgb: var(--${prefix}-surface-color-muted);
+    --${prefix}-surface-color-muted-solid: rgb(var(--${prefix}-surface-color-muted-rgb));
+
+    --${prefix}-surface-color-subtle-rgb: var(--${prefix}-surface-color-subtle);
+    --${prefix}-surface-color-subtle-solid: rgb(var(--${prefix}-surface-color-subtle-rgb));
+
+    --${prefix}-surface-border-rgb: var(--${prefix}-surface-border);
+    --${prefix}-surface-border-solid: rgb(var(--${prefix}-surface-border-rgb));
+
+    --${prefix}-surface-interaction-rgb: var(--${prefix}-surface-interaction);
+    --${prefix}-surface-interaction-solid: rgb(var(--${prefix}-surface-interaction-rgb));
+
+    --${prefix}-surface-interaction-hover-rgb: var(--${prefix}-surface-interaction-hover);
+    --${prefix}-surface-interaction-hover-solid: rgb(var(--${prefix}-surface-interaction-hover-rgb));
+
+    --${prefix}-surface-interaction-focus-rgb: var(--${prefix}-surface-interaction-focus);
+    --${prefix}-surface-interaction-focus-solid: rgb(var(--${prefix}-surface-interaction-focus-rgb));
+
+    --${prefix}-surface-interaction-active-rgb: var(--${prefix}-surface-interaction-active);
+    --${prefix}-surface-interaction-active-solid: rgb(var(--${prefix}-surface-interaction-active-rgb));
+
+    --${prefix}-surface-interaction-disabled-rgb: var(--${prefix}-surface-interaction-disabled);
+    --${prefix}-surface-interaction-disabled-solid: rgb(var(--${prefix}-surface-interaction-disabled-rgb));
+  }
+}
+`;
     return `${header}@theme {
 ${tailwindVars.join('\n')}
 }
 
-${themeVars.join('\n')}`;
+@layer base {
+${themeVars.join('\n')}
+}
+
+${aliasBlock}`;
+}
+function pushSurfaceVars(vars, prefix, theme, indent) {
+    vars.push(`${indent}--${prefix}-surface-background: ${theme.background};`);
+    vars.push(`${indent}--${prefix}-surface-color: ${theme.color};`);
+    vars.push(`${indent}--${prefix}-surface-color-muted: ${theme.colorMuted};`);
+    vars.push(`${indent}--${prefix}-surface-color-subtle: ${theme.colorSubtle};`);
+    vars.push(`${indent}--${prefix}-surface-border: ${theme.border};`);
+    vars.push(`${indent}--${prefix}-surface-type: ${theme.type};`);
+    vars.push(`${indent}--${prefix}-surface-elevation: ${theme.elevation};`);
+    if (theme.interactionColor) {
+        vars.push(`${indent}--${prefix}-surface-interaction: ${theme.interactionColor.default};`);
+        vars.push(`${indent}--${prefix}-surface-interaction-hover: ${theme.interactionColor.hover};`);
+        vars.push(`${indent}--${prefix}-surface-interaction-focus: ${theme.interactionColor.focus};`);
+        vars.push(`${indent}--${prefix}-surface-interaction-active: ${theme.interactionColor.active};`);
+        vars.push(`${indent}--${prefix}-surface-interaction-disabled: ${theme.interactionColor.disabled};`);
+    }
 }
 function findMainStylesFile(tree) {
     const potentialFiles = [];

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@ethlete/core",
-  "version": "5.0.0-next.8",
+  "version": "5.0.0-next.9",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
-    "@analogjs/vite-plugin-angular": "2.3.1",
-    "@angular/cdk": "21.2.1",
-    "@angular/common": "21.2.1",
-    "@angular/core": "21.2.1",
-    "@angular/forms": "21.2.1",
-    "@angular/platform-browser": "21.2.1",
-    "@angular/router": "21.2.1",
+    "@analogjs/vite-plugin-angular": "2.5.1",
+    "@angular/cdk": "21.2.11",
+    "@angular/common": "21.2.13",
+    "@angular/core": "21.2.13",
+    "@angular/forms": "21.2.13",
+    "@angular/platform-browser": "21.2.13",
+    "@angular/router": "21.2.13",
     "@ethlete/types": "^2.0.0-next.0",
     "@floating-ui/dom": "1.7.6",
-    "@nx/devkit": "22.5.4",
-    "@nx/vite": "22.5.4",
+    "@nx/devkit": "22.7.2",
+    "@nx/vite": "22.7.2",
     "rxjs": "7.8.2",
     "ts-morph": "21.0.1",
     "typescript": "5.9.3",
-    "vite": "^7.0.0"
+    "vite": "8.0.13"
   },
   "generators": "./generators/generators.json",
   "module": "fesm2022/ethlete-core.mjs",
@@ -32,6 +32,7 @@
       "default": "./fesm2022/ethlete-core.mjs"
     }
   },
+  "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
   }