feat: added logic to define tokens

Author: coderdiaz

packages/jacaranda/src/tokens.test.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect } from 'vitest';
+import { createTokens } from './tokens';
+
+describe('createTokens', () => {
+  it('should create styles function', () => {
+    const { styles } = createTokens({
+      colors: {
+        primary: '#000000',
+        secondary: '#ffffff',
+      },
+      spacing: {
+        sm: 8,
+        md: 16,
+      },
+    });
+
+    expect(typeof styles).toBe('function');
+  });
+
+  it('should resolve token references in styles', () => {
+    const { styles } = createTokens({
+      colors: {
+        primary: '#000000',
+      },
+      spacing: {
+        sm: 8,
+      },
+    });
+
+    const result = styles({
+      base: {
+        backgroundColor: '$colors.primary',
+        padding: '$spacing.sm',
+      },
+      variants: {},
+    });
+
+    expect(result()).toEqual({
+      backgroundColor: '#000000',
+      padding: 8,
+    });
+  });
+
+  it('should resolve token references in variants', () => {
+    const { styles } = createTokens({
+      colors: {
+        primary: '#000000',
+      },
+      borderStyles: {
+        default: 'solid',
+      },
+    });
+
+    const result = styles({
+      base: {},
+      variants: {
+        type: {
+          primary: {
+            backgroundColor: '$colors.primary',
+            borderStyle: '$borderStyles.default',
+          },
+        },
+      },
+    });
+
+    expect(result({ type: 'primary' })).toEqual({
+      backgroundColor: '#000000',
+      borderStyle: 'solid',
+    });
+  });
+
+  it('should handle compound variants', () => {
+    const { styles } = createTokens({
+      colors: {
+        primary: '#000000',
+      },
+      spacing: {
+        sm: 8,
+      },
+    });
+
+    const result = styles({
+      base: {},
+      variants: {
+        size: { small: {} },
+        type: { primary: {} },
+      },
+      compoundVariants: [{
+        variants: { size: 'small' as const, type: 'primary' as const },
+        style: {
+          backgroundColor: '$colors.primary',
+          padding: '$spacing.sm',
+        },
+      }],
+    });
+
+    expect(result({ size: 'small', type: 'primary' })).toEqual({
+      backgroundColor: '#000000',
+      padding: 8,
+    });
+  });
+
+  it('should ignore missing token references', () => {
+    const { styles } = createTokens({
+      colors: {
+        primary: '#000000',
+      },
+    });
+
+    const result = styles({
+      base: {
+        backgroundColor: '$colors.nonexistent',
+        color: '$colors.primary',
+      },
+      variants: {},
+    });
+
+    expect(result()).toEqual({
+      color: '#000000',
+    });
+  });
+
+  it('should support all allowed token categories', () => {
+    const { styles } = createTokens({
+      colors: { primary: '#000000' },
+      spacing: { sm: 8 },
+      fontSizes: { base: 16 },
+      fonts: { body: 'Arial' },
+      lineHeight: { normal: 1.5 },
+      borderWidth: { thin: 1 },
+      borderStyles: { default: 'solid' },
+    });
+
+    const result = styles({
+      base: {
+        color: '$colors.primary',
+        padding: '$spacing.sm',
+        fontSize: '$fontSizes.base',
+        fontFamily: '$fonts.body',
+        lineHeight: '$lineHeight.normal',
+        borderWidth: '$borderWidth.thin',
+        borderStyle: '$borderStyles.default',
+      },
+      variants: {},
+    });
+
+    expect(result()).toEqual({
+      color: '#000000',
+      padding: 8,
+      fontSize: 16,
+      fontFamily: 'Arial',
+      lineHeight: 1.5,
+      borderWidth: 1,
+      borderStyle: 'solid',
+    });
+  });
+}); 

packages/jacaranda/src/tokens.ts

@@ -0,0 +1,90 @@
+import { styles as baseStyles } from './index';
+import type { StyleObject } from './index';
+
+// Define allowed token categories and their value types
+interface AllowedTokenCategories {
+  colors: string;
+  spacing: number;
+  fontSizes: number;
+  fonts: string;
+  lineHeight: number;
+  borderWidth: number;
+  borderStyles: 'solid' | 'dashed' | 'dotted' | 'none';
+}
+
+// Update TokenConfig to only allow specific categories
+type TokenConfig = {
+  [K in keyof AllowedTokenCategories]?: Record<string, AllowedTokenCategories[K]>;
+};
+
+interface CreateTokensReturn {
+  styles: typeof baseStyles;
+}
+
+// Helper to resolve token references in style objects
+function resolveTokens(style: StyleObject, tokens: TokenConfig): StyleObject {
+  return Object.entries(style).reduce<Record<string, any>>((acc, [key, value]) => {
+    if (typeof value !== 'string' || !value.startsWith('$')) {
+      acc[key] = value;
+      return acc;
+    }
+
+    const tokenPath = value.slice(1).split('.');
+    const [category, token] = tokenPath;
+    
+    const tokenValue = tokens[category as keyof TokenConfig]?.[token];
+    if (tokenValue !== undefined) {
+      acc[key] = tokenValue;
+    }
+
+    return acc;
+  }, {}) as StyleObject;
+}
+
+/**
+ * Creates a token system and returns the styles function
+ */
+export function createTokens<T extends TokenConfig>(tokenConfig: T): CreateTokensReturn {
+  // Create the tokens object
+  const tokens = Object.entries(tokenConfig).reduce((acc, [category, values]) => {
+    return {
+      ...acc,
+      [category]: values,
+    };
+  }, {} as any);
+
+  // Create a wrapped styles function that resolves token references
+  const wrappedStyles: typeof baseStyles = (config: any) => {
+    // Resolve tokens in base styles
+    const resolvedBase = config.base ? resolveTokens(config.base, tokens) : config.base;
+
+    // Resolve tokens in variants
+    const resolvedVariants = config.variants ? Object.entries(config.variants).reduce((acc, [key, variantGroup]: [string, any]) => {
+      const resolvedGroup = Object.entries(variantGroup).reduce((groupAcc, [variantKey, styles]: [string, any]) => {
+        return {
+          ...groupAcc,
+          [variantKey]: resolveTokens(styles, tokens),
+        };
+      }, {});
+      return { ...acc, [key]: resolvedGroup };
+    }, {}) : {};
+
+    // Resolve tokens in compound variants
+    const resolvedCompoundVariants = config.compoundVariants?.map((compound: any) => ({
+      ...compound,
+      style: resolveTokens(compound.style, tokens),
+    }));
+
+    // Return the styles function with resolved tokens
+    return baseStyles({
+      ...config,
+      base: resolvedBase,
+      variants: resolvedVariants,
+      compoundVariants: resolvedCompoundVariants,
+    });
+  };
+
+  return {
+    styles: wrappedStyles,
+  };
+}