@codeleap/styles 6.2.3 → 6.8.0

package/src/lib/tests/createStylesWithContext.spec.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach } from 'bun:test'
+import { createStyles, createStylesWithContext, CONTEXT_FACTORY_SYMBOL } from '../createStyles'
+import { themeStore } from '../../theme'
+import { mockTheme, MockedTheme } from '../../tests/theme'
+
+describe('createStylesWithContext (web — isBrowser: true)', () => {
+  let currentTheme: MockedTheme = null as any
+
+  beforeEach(() => {
+    mockTheme({ isBrowser: true })
+    currentTheme = themeStore.theme as unknown as MockedTheme
+  })
+
+  it('exposes the factory function via CONTEXT_FACTORY_SYMBOL', () => {
+    const factory = (theme: any, context: { isActive: boolean }) => ({
+      wrapper: { color: context.isActive ? theme.colors.neutralSo : theme.colors.secondary },
+    })
+
+    const styles = createStylesWithContext(factory as any)
+
+    expect((styles as any)[CONTEXT_FACTORY_SYMBOL]).toBe(factory)
+  })
+
+  it('plain createStyles proxy returns undefined for CONTEXT_FACTORY_SYMBOL', () => {
+    const styles = createStyles((theme: any) => ({
+      wrapper: { color: theme.colors.neutralSo },
+    }))
+
+    expect((styles as any)[CONTEXT_FACTORY_SYMBOL]).toBeUndefined()
+  })
+
+  it('returns expected styles when accessed with default (empty) context', () => {
+    const styles = createStylesWithContext((theme: any, context: { multiplier?: number }) => ({
+      wrapper: { padding: (context.multiplier ?? 1) * 8 },
+    }))
+
+    expect(styles.wrapper).toEqual({ padding: 8 })
+  })
+
+  it('re-evaluates on every property access (proxy behavior)', () => {
+    let callCount = 0
+
+    const styles = createStylesWithContext((theme: any, context: {}) => {
+      callCount++
+      return { wrapper: { color: theme.colors.neutralSo } }
+    })
+
+    callCount = 0
+
+    styles.wrapper
+    styles.wrapper
+    styles.wrapper
+
+    expect(callCount).toBe(3)
+  })
+
+  it('reflects theme changes on subsequent accesses', () => {
+    const styles = createStylesWithContext((theme: any, _context: {}) => ({
+      wrapper: { color: theme.colors.buttonRegularPrimaryBgDefault },
+    }))
+
+    // CSS var reference is static — same regardless of active scheme.
+    // The browser CSS cascade handles the actual color switch.
+    expect(styles.wrapper).toEqual({ color: 'var(--cl-buttonRegularPrimaryBgDefault)' })
+
+    currentTheme.setColorScheme('dark')
+
+    expect(styles.wrapper).toEqual({ color: 'var(--cl-buttonRegularPrimaryBgDefault)' })
+  })
+
+  it('returns undefined for non-existent keys', () => {
+    const styles = createStylesWithContext((_theme: any, _context: {}) => ({
+      wrapper: { color: 'red' },
+    }))
+
+    expect((styles as any).nonExistent).toBeUndefined()
+  })
+})
+
+describe('createStylesWithContext (RN — isBrowser: false)', () => {
+  let currentTheme: MockedTheme = null as any
+
+  beforeEach(() => {
+    mockTheme({ isBrowser: false })
+    currentTheme = themeStore.theme as unknown as MockedTheme
+  })
+
+  it('returns raw RGBA values when isBrowser is false', () => {
+    const styles = createStylesWithContext((_theme: any, _context: {}) => ({
+      wrapper: { color: _theme.colors.neutralSolid500 },
+    }))
+
+    expect(styles.wrapper).toEqual({ color: 'rgba(136, 136, 136, 1.00)' })
+  })
+
+  it('currentSchemeColors reflects active scheme on RN', () => {
+    const styles = createStylesWithContext((_theme: any, _context: {}) => ({
+      wrapper: { color: _theme.currentSchemeColors.buttonRegularPrimaryBgDefault },
+    }))
+
+    expect(styles.wrapper).toEqual({ color: 'rgba(43, 105, 122, 1.00)' })
+
+    currentTheme.setColorScheme('dark')
+
+    const darkValue = currentTheme.currentSchemeColors.buttonRegularPrimaryBgDefault as string
+    expect(styles.wrapper).toEqual({ color: darkValue })
+  })
+})

package/src/tests/theme.ts

@@ -6,7 +6,11 @@ import darkMode from './colors/darkMode'
 import { createTheme } from '../lib'
 import { validateTheme } from '../theme'
 
-export const mockTheme = () => {
+type MockThemeOptions = {
+  isBrowser?: boolean
+}
+
+export const mockTheme = ({ isBrowser = true }: MockThemeOptions = {}) => {
   return createTheme(
     validateTheme({
       baseColors,
@@ -46,7 +50,7 @@ export const mockTheme = () => {
       icons: {},
       presets: {},
       values: {},
-      isBrowser: true,
+      isBrowser,
     }),
     {
       set: (name, colorSchema) => {},

package/src/theme/generateColorScheme.ts

@@ -20,25 +20,28 @@ const defaultAlphasMap = Object.fromEntries(
 )
 
 /**
- * Generates a complete color scheme from an anchor color.
- * Creates solid variants with different lightness and transparent variants.
- * 
- * @param {string} anchorHex - Base hex color for the scheme
- * @param {string} prefix - Prefix for generated color names
- * @param {object} lightnesses - Custom lightness mapping
- * @param {object} alphas - Custom alpha mapping
- * @returns {ColorMap} Complete color scheme object
+ * Derives a 20-token color ramp from a single anchor hex color.
+ *
+ * Produces two groups of tokens:
+ * - **10 solid tokens** (`{prefix}Solid100` … `{prefix}Solid1000`) — vary the lightness
+ *   of the anchor's hue/saturation from ~95 L (lightest) to ~10 L (darkest).
+ * - **10 transparent tokens** (`{prefix}Transparent100` … `{prefix}Transparent1000`) —
+ *   keep the anchor's exact RGB channels but increase alpha from 0.05 to 0.90.
+ *
+ * Default lightness steps: `[95, 85, 75, 60, 45, 30, 27, 21, 16, 10]`.
+ * Default alpha steps: `[0.05, 0.10, …, 0.90]`.
+ * Both can be overridden by passing custom maps (step → value).
  */
 export function generateColorScheme(
   anchorHex: string,
   prefix = 'primary',
   lightnesses:typeof defaultLightnessMap = defaultLightnessMap,
   alphas: typeof defaultAlphasMap = defaultAlphasMap,
-): ColorMap {
+): Record<string, string> {
   const { h, s } = colorTools.hexToHSL(anchorHex)
   const baseRGB = colorTools.hexToRGB(anchorHex)
 
-  const scheme: ColorMap = {}
+  const scheme: Record<string, string> = {}
 
   Object.entries(lightnesses).forEach(([step, lightness]) => {
     const rgb = colorTools.hslToRGB(h, s, lightness)

package/src/theme/tests/themeStore.spec.ts

@@ -14,7 +14,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
     it('should handle theme management', () => {
       const mockTheme = {
         colors: { primary: '#007bff' },
-        spacing: { small: '8px' }
+        spacing: { small: '8px' },
       }
 
       store.setTheme(mockTheme)
@@ -39,21 +39,21 @@ describe('ThemeStore - Heavy Load Tests', () => {
             secondary: `#${(i * 2).toString(16).padStart(6, '0')}`,
             background: `#${(i * 3).toString(16).padStart(6, '0')}`,
             surface: `#${(i * 4).toString(16).padStart(6, '0')}`,
-            text: `#${(i * 5).toString(16).padStart(6, '0')}`
+            text: `#${(i * 5).toString(16).padStart(6, '0')}`,
           },
           spacing: {
             xs: `${i}px`,
             sm: `${i * 2}px`,
             md: `${i * 4}px`,
             lg: `${i * 8}px`,
-            xl: `${i * 16}px`
+            xl: `${i * 16}px`,
           },
           typography: {
             fontSize: `${i}px`,
             fontWeight: i % 900,
-            lineHeight: i / 100
+            lineHeight: i / 100,
           },
-          iteration: i
+          iteration: i,
         }
 
         store.setTheme(theme)
@@ -75,27 +75,27 @@ describe('ThemeStore - Heavy Load Tests', () => {
     })
 
     it('should handle massive color schemes with deep nesting', () => {
-      const colorSchemes = {}
+      const colorSchemes: Record<string, any> = {}
       const schemeCount = 1000
       const colorsPerScheme = 100
 
       // Generate massive color schemes
       for (let scheme = 0; scheme < schemeCount; scheme++) {
-        const colors = {}
+        const colors: Record<string, any> = {}
         for (let color = 0; color < colorsPerScheme; color++) {
           colors[`color_${color}`] = {
             primary: `#${(scheme * color).toString(16).padStart(6, '0')}`,
             variants: {
               light: `#${(scheme * color + 100000).toString(16).padStart(6, '0')}`,
               dark: `#${(scheme * color + 200000).toString(16).padStart(6, '0')}`,
-              medium: `#${(scheme * color + 300000).toString(16).padStart(6, '0')}`
+              medium: `#${(scheme * color + 300000).toString(16).padStart(6, '0')}`,
             },
             states: {
               hover: `#${(scheme * color + 400000).toString(16).padStart(6, '0')}`,
               active: `#${(scheme * color + 500000).toString(16).padStart(6, '0')}`,
               disabled: `#${(scheme * color + 600000).toString(16).padStart(6, '0')}`,
-              focus: `#${(scheme * color + 700000).toString(16).padStart(6, '0')}`
-            }
+              focus: `#${(scheme * color + 700000).toString(16).padStart(6, '0')}`,
+            },
           }
         }
         colorSchemes[`scheme_${scheme}`] = colors
@@ -120,8 +120,8 @@ describe('ThemeStore - Heavy Load Tests', () => {
         base: {
           primary: '#000000',
           secondary: '#111111',
-          tertiary: '#222222'
-        }
+          tertiary: '#222222',
+        },
       })
 
       for (let i = 0; i < operations; i++) {
@@ -130,14 +130,15 @@ describe('ThemeStore - Heavy Load Tests', () => {
           primary: `#${i.toString(16).padStart(6, '0')}`,
           accent: `#${(i * 2).toString(16).padStart(6, '0')}`,
           background: `#${(i * 3).toString(16).padStart(6, '0')}`,
-          customColor: `#${(i * 4).toString(16).padStart(6, '0')}`
+          customColor: `#${(i * 4).toString(16).padStart(6, '0')}`,
         }
 
         // Inject scheme
         const injected = store.injectColorScheme(schemeName, colors)
-        expect(injected[schemeName]).toBeDefined()
-        expect(injected[schemeName].primary).toBe(colors.primary)
-        expect(injected[schemeName].secondary).toBe('#111111') // inherited
+        const scheme = injected[schemeName] as Record<string, string>
+        expect(scheme).toBeDefined()
+        expect(scheme.primary).toBe(colors.primary)
+        expect(scheme.secondary).toBe('#111111') // inherited
 
         // Every 10th operation, eject some schemes
         if (i % 10 === 0 && i > 0) {
@@ -150,17 +151,17 @@ describe('ThemeStore - Heavy Load Tests', () => {
       const endTime = performance.now()
       const executionTime = endTime - startTime
 
-      expect(executionTime).toBeLessThan(3000) // Should be fast
+      expect(executionTime).toBeLessThan(3500) // Should be fast
       console.log(`Color scheme operations: ${operations} inject/eject operations in ${executionTime.toFixed(2)}ms`)
     })
 
     it('should handle massive variants with complex structures', () => {
       const componentCount = 500
       const variantsPerComponent = 50
-      const variants = {}
+      const variants: Record<string, any> = {}
 
       for (let comp = 0; comp < componentCount; comp++) {
-        const componentVariants = {}
+        const componentVariants: Record<string, any> = {}
         for (let variant = 0; variant < variantsPerComponent; variant++) {
           componentVariants[`variant_${variant}`] = {
             className: `comp-${comp}-var-${variant}`,
@@ -172,14 +173,14 @@ describe('ThemeStore - Heavy Load Tests', () => {
               margin: `${comp * variant}px`,
               borderRadius: `${variant / 2}px`,
               transform: `rotate(${variant}deg) scale(${1 + comp / 100})`,
-              boxShadow: `${variant}px ${comp}px ${comp + variant}px rgba(${comp}, ${variant}, ${comp + variant}, 0.${variant})`
+              boxShadow: `${variant}px ${comp}px ${comp + variant}px rgba(${comp}, ${variant}, ${comp + variant}, 0.${variant})`,
             },
             states: {
               hover: { opacity: 0.8 + (variant / 100) },
               active: { transform: `scale(${1 + variant / 1000})` },
               disabled: { opacity: 0.5 },
-              focus: { outline: `${variant}px solid #${comp.toString(16).padStart(6, '0')}` }
-            }
+              focus: { outline: `${variant}px solid #${comp.toString(16).padStart(6, '0')}` },
+            },
           }
         }
         variants[`component_${comp}`] = componentVariants
@@ -206,7 +207,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
         // Simultaneous updates
         store.setTheme({
           colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
-          iteration: i
+          iteration: i,
         })
 
         store.setColorScheme(`scheme_${i % 50}`)
@@ -215,21 +216,21 @@ describe('ThemeStore - Heavy Load Tests', () => {
           [`component_${i}`]: {
             [`variant_${i}`]: {
               className: `test-${i}`,
-              styles: { color: `#${i.toString(16).padStart(6, '0')}` }
-            }
-          }
+              styles: { color: `#${i.toString(16).padStart(6, '0')}` },
+            },
+          },
         })
 
         store.injectColorScheme(`dynamic_${i % 100}`, {
           primary: `#${(i * 2).toString(16).padStart(6, '0')}`,
-          secondary: `#${(i * 3).toString(16).padStart(6, '0')}`
+          secondary: `#${(i * 3).toString(16).padStart(6, '0')}`,
         })
 
         // Verify consistency every 200 iterations
         if (i % 200 === 0) {
           expect(getThemeStore()?.iteration).toBe(i)
           expect(store.colorScheme).toBe(`scheme_${i % 50}`)
-          expect(store.variants[`component_${i}`]).toBeDefined()
+          expect((store.variants as any)[`component_${i}`]).toBeDefined()
         }
       }
 
@@ -246,12 +247,12 @@ describe('ThemeStore - Heavy Load Tests', () => {
   describe('function storage and execution stress tests', () => {
     it('should handle thousands of stored functions with complex computations', () => {
       const functionCount = 5000
-      const theme = {
+      const theme: Record<string, Record<string, any>> = {
         colors: {},
         spacing: {},
         calculators: {},
         transformers: {},
-        validators: {}
+        validators: {},
       }
 
       const startTime = performance.now()
@@ -259,23 +260,23 @@ describe('ThemeStore - Heavy Load Tests', () => {
       // Store various types of functions
       for (let i = 0; i < functionCount; i++) {
         // Simple calculators
-        theme.calculators[`calc_${i}`] = (value) => value * (i + 1)
+        theme.calculators[`calc_${i}`] = (value: any) => value * (i + 1)
 
         // Complex transformers
-        theme.transformers[`transform_${i}`] = (input) => {
+        theme.transformers[`transform_${i}`] = (input: any) => {
           return {
             scaled: input * Math.pow(2, i % 10),
             offset: input + (i * 3.14159),
             computed: Math.sin(input + i) * 100,
             conditional: input > i ? input * 2 : input / 2,
-            recursive: i > 0 ? theme.calculators[`calc_${i - 1}`]?.(input) || input : input
+            recursive: i > 0 ? theme.calculators[`calc_${i - 1}`]?.(input) || input : input,
           }
         }
 
         // Spacing functions
         theme.spacing[`space_${i}`] = (multiplier = 1) => `${i * 8 * multiplier}px`
 
-        // Color functions  
+        // Color functions
         theme.colors[`color_${i}`] = (opacity = 1) => {
           const r = (i * 37) % 256
           const g = (i * 73) % 256
@@ -284,7 +285,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
         }
 
         // Validators
-        theme.validators[`validate_${i}`] = (value) => {
+        theme.validators[`validate_${i}`] = (value: any) => {
           return value !== null &&
             value !== undefined &&
             (typeof value === 'number' ? value >= i : value.length >= i % 10)
@@ -324,7 +325,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
         // Test some complex chaining every 100 iterations
         if (i % 100 === 0) {
           const chainResult = getThemeStore()?.transformers[`transform_${i}`]?.(
-            getThemeStore()?.calculators[`calc_${i}`]?.(testValue) || 0
+            getThemeStore()?.calculators[`calc_${i}`]?.(testValue) || 0,
           )
           if (chainResult) executionResults++
         }
@@ -347,15 +348,15 @@ describe('ThemeStore - Heavy Load Tests', () => {
 
       // Create deeply nested function chains
       const theme = {
-        fibonacci: {},
-        factorial: {},
-        compose: {},
-        pipeline: {}
+        fibonacci: {} as Record<string, any>,
+        factorial: {} as Record<string, any>,
+        compose: {} as Record<string, any>,
+        pipeline: {} as Record<string, any>,
       }
 
       // Fibonacci functions
       for (let i = 0; i < depth; i++) {
-        theme.fibonacci[`fib_${i}`] = (n) => {
+        theme.fibonacci[`fib_${i}`] = (n: any) => {
           if (n <= 1) return n
           if (i > 0 && theme.fibonacci[`fib_${i - 1}`]) {
             return theme.fibonacci[`fib_${i - 1}`](n - 1) + theme.fibonacci[`fib_${i - 1}`](n - 2)
@@ -366,7 +367,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
 
       // Factorial chains
       for (let i = 0; i < depth; i++) {
-        theme.factorial[`fact_${i}`] = (n) => {
+        theme.factorial[`fact_${i}`] = (n: any) => {
           if (n <= 1) return 1
           const prevFact = theme.factorial[`fact_${Math.max(0, i - 1)}`]
           return prevFact ? n * prevFact(n - 1) : n
@@ -375,7 +376,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
 
       // Function composition
       for (let i = 0; i < depth; i++) {
-        theme.compose[`comp_${i}`] = (value) => {
+        theme.compose[`comp_${i}`] = (value: any) => {
           let result = value
           for (let j = 0; j <= i && j < 10; j++) {
             result = Math.sqrt(Math.abs(result * (j + 1)))
@@ -386,13 +387,13 @@ describe('ThemeStore - Heavy Load Tests', () => {
 
       // Pipeline functions
       for (let i = 0; i < depth; i++) {
-        theme.pipeline[`pipe_${i}`] = (input) => {
+        theme.pipeline[`pipe_${i}`] = (input: any) => {
           const steps = [
-            (x) => x * 2,
-            (x) => x + i,
-            (x) => Math.pow(x, 1.5),
-            (x) => x % 1000,
-            (x) => theme.compose[`comp_${Math.min(i, depth - 1)}`]?.(x) || x
+            (x: any) => x * 2,
+            (x: any) => x + i,
+            (x: any) => Math.pow(x, 1.5),
+            (x: any) => x % 1000,
+            (x: any) => theme.compose[`comp_${Math.min(i, depth - 1)}`]?.(x) || x,
           ]
           return steps.reduce((acc, fn) => fn(acc), input)
         }
@@ -427,7 +428,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
           // Test chained execution
           if (i % 50 === 0) {
             const chainedResult = getThemeStore()?.pipeline[`pipe_${i % depth}`]?.(
-              getThemeStore()?.compose[`comp_${i % depth}`]?.(testValue) || 0
+              getThemeStore()?.compose[`comp_${i % depth}`]?.(testValue) || 0,
             )
             if (typeof chainedResult === 'number') successfulExecutions++
           }
@@ -449,27 +450,27 @@ describe('ThemeStore - Heavy Load Tests', () => {
       const factoryCount = 1000
       const generatedPerFactory = 10
 
-      const theme = {
+      const theme: Record<string, Record<string, any>> = {
         factories: {},
         generated: {},
-        dynamicComputed: {}
+        dynamicComputed: {},
       }
 
       const startTime = performance.now()
 
       // Create function factories
       for (let i = 0; i < factoryCount; i++) {
-        theme.factories[`factory_${i}`] = (config) => {
+        theme.factories[`factory_${i}`] = (config: any) => {
           return {
-            calculator: (value) => value * (config.multiplier || 1) + (config.offset || 0),
-            validator: (value) => value >= (config.min || 0) && value <= (config.max || 1000),
-            transformer: (value) => ({
+            calculator: (value: any) => value * (config.multiplier || 1) + (config.offset || 0),
+            validator: (value: any) => value >= (config.min || 0) && value <= (config.max || 1000),
+            transformer: (value: any) => ({
               original: value,
               scaled: value * (config.scale || 1),
               formatted: `${config.prefix || ''}${value}${config.suffix || ''}`,
-              computed: Math.pow(value, config.power || 1)
+              computed: Math.pow(value, config.power || 1),
             }),
-            composer: (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value)
+            composer: (...fns: any[]) => (value: any) => fns.reduce((acc, fn) => fn(acc), value),
           }
         }
 
@@ -483,14 +484,14 @@ describe('ThemeStore - Heavy Load Tests', () => {
             max: i * 100,
             prefix: `gen_${i}_`,
             suffix: `_${j}`,
-            power: 1 + (j / 5)
+            power: 1 + (j / 5),
           }
 
           const generatedFunctions = theme.factories[`factory_${i}`](config)
           theme.generated[`gen_${i}_${j}`] = generatedFunctions
 
           // Create dynamic computed values
-          theme.dynamicComputed[`comp_${i}_${j}`] = (input) => {
+          theme.dynamicComputed[`comp_${i}_${j}`] = (input: any) => {
             const calc = generatedFunctions.calculator(input)
             const valid = generatedFunctions.validator(calc)
             const transform = generatedFunctions.transformer(calc)
@@ -499,7 +500,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
               calculated: calc,
               isValid: valid,
               transformed: transform,
-              final: valid ? transform.computed : 0
+              final: valid ? transform.computed : 0,
             }
           }
         }
@@ -543,9 +544,9 @@ describe('ThemeStore - Heavy Load Tests', () => {
               const generated = getThemeStore()?.generated[`gen_${i}_${j}`]
               if (generated?.composer) {
                 const composed = generated.composer(
-                  (x) => x * 2,
-                  (x) => x + 10,
-                  generated.calculator
+                  (x: any) => x * 2,
+                  (x: any) => x + 10,
+                  generated.calculator,
                 )(testValue)
                 if (typeof composed === 'number') executionCount++
               }
@@ -577,11 +578,11 @@ describe('ThemeStore - Heavy Load Tests', () => {
 
       for (let set = 0; set < hugeSets; set++) {
         // Create massive theme
-        const hugeTheme = {
+        const hugeTheme: Record<string, Record<string, any>> = {
           colors: {},
           spacing: {},
           typography: {},
-          components: {}
+          components: {},
         }
 
         for (let i = 0; i < itemsPerSet; i++) {
@@ -590,16 +591,16 @@ describe('ThemeStore - Heavy Load Tests', () => {
           hugeTheme.typography[`font_${i}`] = `${i}px`
           hugeTheme.components[`comp_${i}`] = {
             styles: { margin: `${i}px` },
-            variants: Array.from({ length: 10 }, (_, j) => `variant_${j}`)
+            variants: Array.from({ length: 10 }, (_, j) => `variant_${j}`),
           }
         }
 
         store.setTheme(hugeTheme)
 
         // Create massive color schemes
-        const hugeColorSchemes = {}
+        const hugeColorSchemes: Record<string, any> = {}
         for (let i = 0; i < itemsPerSet; i++) {
-          const scheme = {}
+          const scheme: Record<string, any> = {}
           for (let j = 0; j < 50; j++) {
             scheme[`color_${j}`] = `#${(i * j).toString(16).padStart(6, '0')}`
           }
@@ -630,7 +631,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
       for (let i = 0; i < updates; i++) {
         themeStore.setTheme({
           colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
-          iteration: i
+          iteration: i,
         })
         themeStore.setColorScheme(`scheme_${i % 100}`)
 
@@ -681,7 +682,7 @@ describe('ThemeStore - Heavy Load Tests', () => {
       for (let i = 0; i < updates; i++) {
         themeStore.setTheme({
           colors: { primary: `#${i.toString(16).padStart(6, '0')}` },
-          iteration: i
+          iteration: i,
         })
       }
 

package/src/theme/themeStore.ts

@@ -5,7 +5,7 @@ import { map, computed, atom } from 'nanostores'
  * Theme state interface containing theme and color scheme information.
  */
 export type ThemeState = {
-  theme: AppTheme<Theme> | null
+  theme: ITheme | null
   colorScheme: string | null
 }
 
@@ -18,9 +18,9 @@ export class ThemeStore {
 
   public readonly colorSchemeStore = atom<string | null>(null)
 
-  public readonly themeStore = map<ITheme | null>(null)
-
-  public readonly variantsStore = map<IAppVariants>({})
+  public readonly themeStore = atom<ITheme | null>(null)
+  
+  public readonly variantsStore = map<IAppVariants>({} as IAppVariants)
 
   /**
    * Gets the current theme.
@@ -35,7 +35,8 @@ export class ThemeStore {
    * @returns {AppTheme<Theme>} Current theme cast to AppTheme type
    */
   get themeTyped() {
-    return this.themeStore.get() as unknown as AppTheme<Theme>
+    const theme = this.themeStore.get()
+    return theme ? theme as unknown as AppTheme<Theme> : null
   }
 
   /**
@@ -159,8 +160,10 @@ export class ThemeStore {
 export const themeStore = new ThemeStore()
 
 /**
- * Computed store that combines theme and color scheme for reactive updates.
- * @returns {ThemeState} Combined theme state with theme and colorScheme
+ * Derived nanostores `computed` that combines `themeStore` and `colorSchemeStore`
+ * into a single `ThemeState` atom. Components subscribe to this via `useTheme`
+ * so they re-render only when either the theme object or the active color scheme
+ * changes — not on every `ThemeStore` method call.
  */
 export const themeStoreComputed = computed([
   themeStore.themeStore,

package/src/theme/validateTheme.ts

@@ -22,7 +22,7 @@ export function validateTheme<T extends Theme>(theme: T) {
 
   const requiredColors = Object.keys(colors)
 
-  const mergedAlternateColors = {}
+  const mergedAlternateColors: Record<string, any> = {}
   
   if (alternateColors) {
     for (const [colorSchemeName, colorSchemeColors] of Object.entries(alternateColors)) {