@idealyst/theme 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",

package/src/babel/plugin.js

@@ -435,6 +435,15 @@ function expandCompoundVariantsArray(t, arrayNode, themeParam, keys, verbose, ex
         } else if (iteratorInfo.type === 'sizes' && iteratorInfo.componentName) {
             keysToExpand = keys?.sizes?.[iteratorInfo.componentName] || [];
             variantKeyName = 'size';
+        } else if (iteratorInfo.type === 'surfaceColors') {
+            keysToExpand = keys?.surfaceColors || [];
+            variantKeyName = 'background';
+        } else if (iteratorInfo.type === 'textColors') {
+            keysToExpand = keys?.textColors || [];
+            variantKeyName = 'color';
+        } else if (iteratorInfo.type === 'borderColors') {
+            keysToExpand = keys?.borderColors || [];
+            variantKeyName = 'borderColor';
         }
 
         if (keysToExpand.length === 0) {
@@ -498,6 +507,32 @@ function findIteratorPattern(t, node, themeParam, debugLog = () => {}) {
                             return;
                         }
 
+                        // Color iterators: theme.colors.$surface, theme.colors.$text, theme.colors.$border
+                        // Pattern: theme.colors.$surface expands to screen, primary, secondary, etc.
+                        if (i > 0 && chain[i - 1] === 'colors') {
+                            if (iteratorName === 'surface') {
+                                result = {
+                                    type: 'surfaceColors',
+                                    accessPath: chain.slice(i + 1),
+                                };
+                                return;
+                            }
+                            if (iteratorName === 'text') {
+                                result = {
+                                    type: 'textColors',
+                                    accessPath: chain.slice(i + 1),
+                                };
+                                return;
+                            }
+                            if (iteratorName === 'border') {
+                                result = {
+                                    type: 'borderColors',
+                                    accessPath: chain.slice(i + 1),
+                                };
+                                return;
+                            }
+                        }
+
                         if (i > 0 && chain[i - 1] === 'sizes') {
                             result = {
                                 type: 'sizes',
@@ -561,6 +596,12 @@ function expandVariantWithIterator(t, valueNode, themeParam, keys, iteratorInfo,
         keysToExpand = keys?.typography || [];
     } else if (iteratorInfo.type === 'sizes' && iteratorInfo.componentName) {
         keysToExpand = keys?.sizes?.[iteratorInfo.componentName] || [];
+    } else if (iteratorInfo.type === 'surfaceColors') {
+        keysToExpand = keys?.surfaceColors || [];
+    } else if (iteratorInfo.type === 'textColors') {
+        keysToExpand = keys?.textColors || [];
+    } else if (iteratorInfo.type === 'borderColors') {
+        keysToExpand = keys?.borderColors || [];
     }
 
     if (keysToExpand.length === 0) {
@@ -573,9 +614,14 @@ function expandVariantWithIterator(t, valueNode, themeParam, keys, iteratorInfo,
 
     for (const key of keysToExpand) {
         const expandedValue = replaceIteratorRefs(t, valueNode, themeParam, iteratorInfo, key);
+        // Use string literal for keys with special characters (like hyphens)
+        // e.g., 'inverse-secondary' cannot be a valid identifier
+        const keyNode = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+            ? t.identifier(key)
+            : t.stringLiteral(key);
         expandedProps.push(
             t.objectProperty(
-                t.identifier(key),
+                keyNode,
                 expandedValue
             )
         );
@@ -621,6 +667,22 @@ function replaceIteratorRefs(t, node, themeParam, iteratorInfo, key) {
                             dollarIndex = i;
                             break;
                         }
+                        // Color iterators: theme.colors.$surface -> theme.colors.surface.{key}
+                        if (iteratorInfo.type === 'surfaceColors' && iterName === 'surface' && i > 0 && chain[i - 1] === 'colors') {
+                            hasIterator = true;
+                            dollarIndex = i;
+                            break;
+                        }
+                        if (iteratorInfo.type === 'textColors' && iterName === 'text' && i > 0 && chain[i - 1] === 'colors') {
+                            hasIterator = true;
+                            dollarIndex = i;
+                            break;
+                        }
+                        if (iteratorInfo.type === 'borderColors' && iterName === 'border' && i > 0 && chain[i - 1] === 'colors') {
+                            hasIterator = true;
+                            dollarIndex = i;
+                            break;
+                        }
                     }
                 }
 
@@ -664,7 +726,14 @@ function replaceIteratorRefs(t, node, themeParam, iteratorInfo, key) {
 function buildMemberExpression(t, base, chain) {
     let expr = t.identifier(base);
     for (const part of chain) {
-        expr = t.memberExpression(expr, t.identifier(part));
+        // Use bracket notation for keys with special characters (like hyphens)
+        // e.g., theme.colors.surface['inverse-secondary'] instead of theme.colors.surface.inverse-secondary
+        const isValidIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(part);
+        if (isValidIdentifier) {
+            expr = t.memberExpression(expr, t.identifier(part));
+        } else {
+            expr = t.memberExpression(expr, t.stringLiteral(part), true); // computed = true
+        }
     }
     return expr;
 }

package/src/builder.ts

@@ -173,6 +173,25 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Set (replace) an existing intent in the theme.
+     * Use this to override an intent inherited from a base theme.
+     */
+    setIntent<K extends TIntents>(
+        name: K,
+        value: IntentValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            intents: {
+                ...this.config.intents,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
     /**
      * Add a custom border radius value.
      */
@@ -245,6 +264,182 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Add a new pallet color to the theme.
+     * Expands the available pallet colors.
+     */
+    addPalletColor<K extends string>(
+        name: K,
+        shades: Record<Shade, ColorValue>
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet | K, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet | K, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                pallet: {
+                    ...this.config.colors.pallet,
+                    [name]: shades,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set (replace) an existing pallet color in the theme.
+     * Use this to override a pallet color inherited from a base theme.
+     */
+    setPalletColor<K extends TPallet>(
+        name: K,
+        shades: Record<Shade, ColorValue>
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                pallet: {
+                    ...this.config.colors.pallet,
+                    [name]: shades,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Add a new surface color to the theme.
+     * Expands the available surface colors.
+     */
+    addSurfaceColor<K extends string>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface | K, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface | K, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                surface: {
+                    ...this.config.colors.surface,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set (replace) an existing surface color in the theme.
+     * Use this to override a surface color inherited from a base theme.
+     */
+    setSurfaceColor<K extends TSurface>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                surface: {
+                    ...this.config.colors.surface,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Add a new text color to the theme.
+     * Expands the available text colors.
+     */
+    addTextColor<K extends string>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText | K, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText | K, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                text: {
+                    ...this.config.colors.text,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set (replace) an existing text color in the theme.
+     * Use this to override a text color inherited from a base theme.
+     */
+    setTextColor<K extends TText>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                text: {
+                    ...this.config.colors.text,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Add a new border color to the theme.
+     * Expands the available border colors.
+     */
+    addBorderColor<K extends string>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder | K, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder | K, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                border: {
+                    ...this.config.colors.border,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set (replace) an existing border color in the theme.
+     * Use this to override a border color inherited from a base theme.
+     */
+    setBorderColor<K extends TBorder>(
+        name: K,
+        value: ColorValue
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
+        newBuilder.config = {
+            ...this.config,
+            colors: {
+                ...this.config.colors,
+                border: {
+                    ...this.config.colors.border,
+                    [name]: value,
+                } as any,
+            },
+        };
+        return newBuilder;
+    }
+
     /**
      * Set the sizes configuration.
      */