@codeleap/styles 6.2.3 → 6.8.0

package/src/hooks/useNestedStylesByKey.ts

@@ -2,6 +2,14 @@ import { useMemo } from 'react'
 import { ICSS } from '../types'
 import { getNestedStylesByKey } from '../utils'
 
+/**
+ * Memoised wrapper around `getNestedStylesByKey`. Returns the sub-record of
+ * `componentStyles` whose keys start with `match`, with the prefix stripped and the
+ * remainder lowercased. Re-computes only when `componentStyles` changes by reference.
+ *
+ * Use instead of `useCompositionStyles` when you need the slice for a single element
+ * and don't want the overhead of iterating over an array.
+ */
 export function useNestedStylesByKey<T extends string>(match: string, componentStyles: Partial<Record<T, ICSS>>) {
   const styles = {
     ...componentStyles

package/src/hooks/useStyleObserver.ts

@@ -1,12 +1,13 @@
 import { useMemo } from 'react'
 
 /**
- * Hook that observes style changes by creating a memoized string representation.
- * 
- * @param {any} style - Style value to observe (array, object, or primitive)
- * @returns {string} Serialized string representation of the style for comparison
+ * Produces a stable string that changes only when the style value changes, suitable
+ * for use as a `useEffect`/`useMemo` dependency when the style prop is an object or
+ * array (which would otherwise trigger on every render due to referential inequality).
+ * Falsy entries are stripped from arrays before serialisation, so `[null, style]` and
+ * `[style]` yield the same string.
  */
-export const useStyleObserver = (style) => {
+export const useStyleObserver = (style: any) => {
   return useMemo(() => {
     if (Array.isArray(style)) {
       return JSON.stringify(style?.filter(v => !!v))

package/src/hooks/useTheme.ts

@@ -3,6 +3,20 @@ import { useStore } from '@nanostores/react'
 
 type ThemeSelector<T> = (state: ThemeState) => T
 
+/**
+ * Subscribes to the global theme state and returns either the full `ThemeState`
+ * (when called without arguments) or a derived value (when called with a selector).
+ * Uses nanostores' `useStore` under the hood, so re-renders are triggered only when
+ * the selected slice changes by reference.
+ *
+ * @example
+ * // Full state
+ * const { theme, colorScheme } = useTheme()
+ *
+ * @example
+ * // Derived slice — component only re-renders when colorScheme changes
+ * const colorScheme = useTheme(s => s.colorScheme)
+ */
 export const useTheme = <T = ThemeState>(
   selector?: ThemeSelector<T>
 ): T => {

package/src/lib/calc.ts

@@ -1,5 +1,13 @@
 type Unit = 'px' | 'vh' | 'dvh' | 'vw' | 'dvw' | '%' | 'lvh' | 'svh'
 
+/**
+ * Chainable builder for CSS `calc()` expressions. Each arithmetic method appends
+ * to the expression and returns `this`, so calls can be chained. Call `build()`
+ * at the end to get the final `calc(...)` string.
+ *
+ * @example
+ * calc(100, '%').sub(16).build() // → 'calc((100%) - (16px))'
+ */
 class CalcBuilder {
   private expression: string
 
@@ -38,4 +46,9 @@ class CalcBuilder {
   }
 }
 
+/**
+ * Entry point for building CSS `calc()` expressions. Pass an initial numeric value
+ * and optional unit (default `'px'`), then chain `.add()`, `.sub()`, `.mult()`, `.div()`,
+ * and finally call `.build()` to get the complete string.
+ */
 export const calc = (base: number, unit: Unit = 'px') => new CalcBuilder(base, unit)

package/src/lib/createStyles.ts

@@ -1,14 +1,22 @@
-import { AnyRecord, ICSS, ITheme } from '../types'
+import { AnyRecord, ComponentContext, ICSS, ITheme } from '../types'
 import { themeStore } from '../theme'
 
 type Value = AnyRecord
 
 type StylesShape<K extends string, V extends Value> = Partial<Record<K, ICSS & Partial<Omit<V, keyof ICSS>>>>
 
+/**
+ * Symbol used to attach a context-aware factory function to a styles proxy.
+ * `CodeleapStyleRegistry.registerVariants` reads this symbol from each entry to
+ * identify which variants require a `ComponentContext` at resolution time.
+ * Not intended for direct use by consumers.
+ */
+export const CONTEXT_FACTORY_SYMBOL = Symbol('contextFactory')
+
 /**
  * Creates a reactive styles object that automatically updates when theme changes.
  * Uses a proxy to re-compute styles on each access, ensuring theme changes are reflected.
- * 
+ *
  * @template K - Style keys (extends string)
  * @template V - Additional value type (extends AnyRecord)
  * @param {StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>)} styles - Static styles object or function that receives theme
@@ -26,14 +34,37 @@ export function createStyles<K extends string, V extends Value = {}>(
       return styles
     }
   }
-  
+
   // We use a proxy here so that the color scheme is recomputed every time the
   // theme changes. This is necessary because the theme is a singleton which does not cause
   // a re-render when it changes. The end-user will only have to worry about remounting the root component
   // when the theme changes in order to get the new color scheme due to this proxy.
   return new Proxy(compute() as StylesShape<K, V>, {
     get(target, prop) {
-      return compute()[prop as string]
+      return (compute() as Record<string, any>)[prop as string]
+    },
+  })
+}
+
+/**
+ * Like `createStyles`, but the factory also receives a `ComponentContext` so that
+ * individual style values can vary based on runtime boolean/numeric state (e.g.,
+ * `isDisabled`, `isSelected`). The resulting proxy exposes a `CONTEXT_FACTORY_SYMBOL`
+ * getter so the registry can invoke the factory with the actual context at render time.
+ * Use this instead of `createStyles` when variant styles depend on component state.
+ */
+export function createStylesWithContext<K extends string, V extends Value = {}, C extends ComponentContext = {}>(
+  styles: (theme: ITheme, context: C) => StylesShape<K, V>,
+) {
+  const compute = (context: C = {} as C) => {
+    const current = themeStore.theme
+    return !current ? {} as StylesShape<K, V> : styles(current, context)
+  }
+
+  return new Proxy(compute() as StylesShape<K, V>, {
+    get(target, prop) {
+      if (prop === CONTEXT_FACTORY_SYMBOL) return styles
+      return (compute() as Record<string, any>)[prop as string]
     },
   })
 }

package/src/lib/createTheme.ts

@@ -1,16 +1,37 @@
-import { AppTheme, Theme } from '../types'
+import { AppTheme, Theme, ITheme } from '../types'
 import { borderCreator, createMediaQueries, defaultVariants, spacingFactory } from '../variants'
 import { minifier, multiplierProperty } from '../tools'
 import { themeStore } from '../theme'
+import { applyColorSchemeToDOM, buildCssVarProxy, flattenColorMap, DOM_COLOR_SCHEME_KEY } from './cssVariables'
 
 type ThemePersistor = {
   get: (name: string) => any
   set: (name: string, value: any) => void
+  getNoCompress?: (name: string) => any
+  setNoCompress?: (name: string, value: any) => void
+  getSystemColorScheme?: () => string | null
 }
 
 const colorSchemeKey = '@styles.theme.colorScheme'
 const alternateColorsKey = '@styles.theme.alternateColors'
 
+/**
+ * Builds and registers the runtime `AppTheme<T>` object from a raw `Theme` definition.
+ *
+ * Key behaviours:
+ * - On web (`theme.isBrowser = true`), `theme.colors` is replaced with a CSS-var proxy
+ *   so all color references become `var(--cl-<token>)` strings. The active scheme's
+ *   real values are still accessible via `theme.currentSchemeColors`.
+ * - Persists the selected color scheme to storage and restores it on next load.
+ *   Falls back to `getSystemColorScheme()` if no persisted value exists.
+ * - `alternateColors` from storage are merged with those in the theme definition
+ *   (runtime-injected schemes take priority).
+ * - The constructed theme is immediately set on `themeStore` so hooks and the registry
+ *   can read it synchronously during the same render pass.
+ *
+ * @param theme - Raw theme object (output of `validateTheme` or a compliant literal).
+ * @param themePersistor - Storage adapter for persisting color-scheme selection and injected schemes.
+ */
 export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePersistor): AppTheme<T> => {
   const {
     colors,
@@ -35,10 +56,19 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
     },
     set: (key: string, value: any) => {
       return themePersistor.set(key, !value ? '' : minifier.compress(value))
-    }
+    },
+    getNoCompress: (key: string) => {
+      if (themePersistor.getNoCompress) return themePersistor.getNoCompress(key)
+      if (typeof localStorage !== 'undefined') return localStorage.getItem(key)
+      return null
+    },
+    setNoCompress: (key: string, value: any) => {
+      if (themePersistor.setNoCompress) return themePersistor.setNoCompress(key, value)
+      if (typeof localStorage !== 'undefined') localStorage.setItem(key, value)
+    },
   }
 
-  themeStore.setColorScheme(persistor.get(colorSchemeKey) ?? 'default')
+  themeStore.setColorScheme(persistor.get(colorSchemeKey) ?? themePersistor.getSystemColorScheme?.() ?? 'default')
 
   const persistedAlternateColors = persistor.get(alternateColorsKey)
 
@@ -49,6 +79,15 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
 
   themeStore.setAlternateColorsScheme(alternateColors)
 
+  // On web: build CSS var proxy once — theme.colors returns var(--cl-X) strings.
+  // On RN (isBrowser falsy): keep raw RGBA values as before.
+  const cssVarColors = theme.isBrowser ? buildCssVarProxy(colors) : colors
+
+  // Apply persisted scheme to DOM immediately (browser-only, no-op on server/RN)
+  applyColorSchemeToDOM(persistor.getNoCompress(DOM_COLOR_SCHEME_KEY) ?? 'default')
+
+  const baseSpacing = theme.baseSpacing ?? 1
+
   const themeObj: AppTheme<T> = {
     ...otherThemeValues,
 
@@ -64,18 +103,26 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
 
     breakpoints: breakpoints ?? {},
 
-    get colors() {
-      const colorScheme = themeStore.colorScheme ?? 'default'
-
-      if (colorScheme === 'default') return colors
+    // On web: var(--cl-X) strings — browser CSS handles color switching.
+    // On RN: raw RGBA values, scheme-reactive as before.
+    colors: cssVarColors as T['colors'],
 
+    // Always the active scheme's real RGBA values — use when you need the actual color in JS.
+    get currentSchemeColors(): T['colors'] {
+      const colorScheme = themeStore.colorScheme ?? 'default'
+      if (colorScheme === 'default') return colors as T['colors']
       const scheme = themeStore.alternateColorsScheme?.[colorScheme]
-
       if (!scheme) {
         console.warn(`Color scheme ${colorScheme} not found in theme`)
       }
+      return (scheme ?? colors) as T['colors']
+    },
 
-      return scheme ?? colors
+    getCssVariables(schemeName?: string): Record<string, string> {
+      const map = !schemeName || schemeName === 'default'
+        ? colors
+        : themeStore.alternateColorsScheme?.[schemeName] ?? colors
+      return flattenColorMap(map as Record<string, any>)
     },
 
     setColorScheme(colorScheme: string) {
@@ -87,8 +134,10 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
       }
 
       themeStore.setColorScheme(colorScheme)
-
       persistor.set(colorSchemeKey, colorScheme)
+      // Store uncompressed for the FOUC prevention script (lz can't run inline)
+      persistor.setNoCompress(DOM_COLOR_SCHEME_KEY, colorScheme)
+      applyColorSchemeToDOM(colorScheme)
     },
 
     injectColorScheme(name, colorMap) {
@@ -116,24 +165,24 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
       persistor.set(alternateColorsKey, persistedAlternateColors)
     },
 
-    baseSpacing: theme.baseSpacing,
+    baseSpacing,
 
-    value: (n = 1) => theme.baseSpacing * n,
+    value: (n = 1) => baseSpacing * n,
 
     spacing: {
-      value: (n = 1) => theme.baseSpacing * n,
-      gap: multiplierProperty(theme.baseSpacing, 'gap'),
-      ...spacingFactory(theme.baseSpacing, 'padding'),
-      ...spacingFactory(theme.baseSpacing, 'margin'),
-      ...spacingFactory(theme.baseSpacing, 'p', true),
-      ...spacingFactory(theme.baseSpacing, 'm', true),
+      value: (n = 1) => baseSpacing * n,
+      gap: multiplierProperty(baseSpacing, 'gap'),
+      ...spacingFactory(baseSpacing, 'padding'),
+      ...spacingFactory(baseSpacing, 'margin'),
+      ...spacingFactory(baseSpacing, 'p', true),
+      ...spacingFactory(baseSpacing, 'm', true),
     },
 
     inset: {
-      top: multiplierProperty(theme.baseSpacing, 'top'),
-      bottom: multiplierProperty(theme.baseSpacing, 'bottom'),
-      left: multiplierProperty(theme.baseSpacing, 'left'),
-      right: multiplierProperty(theme.baseSpacing, 'right'),
+      top: multiplierProperty(baseSpacing, 'top'),
+      bottom: multiplierProperty(baseSpacing, 'bottom'),
+      left: multiplierProperty(baseSpacing, 'left'),
+      right: multiplierProperty(baseSpacing, 'right'),
     },
 
     presets: {
@@ -160,16 +209,16 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
     values: values ?? {},
 
     sized: (size) => {
-      const value = typeof size == 'number' ? size * theme.baseSpacing : size
+      const value = typeof size == 'number' ? size * baseSpacing : size
 
       return {
         width: value,
         height: value,
       }
     },
-  }
+  } as AppTheme<T>
 
-  themeStore.setTheme(themeObj)
+  themeStore.setTheme(themeObj as unknown as ITheme)
 
   return themeObj
 }

package/src/lib/cssVariables.ts

@@ -0,0 +1,74 @@
+/**
+ * CSS custom-property prefix used for all codeleap design-token variables.
+ * Color tokens are injected as `--cl-<tokenPath>` on `:root` (or a scheme-specific
+ * `[data-color-scheme]` selector). Changing this value after tokens are injected
+ * will break existing CSS that references `var(--cl-*)`.
+ */
+export const CSS_VAR_PREFIX = '--cl-'
+
+/**
+ * Storage key used to persist the active color scheme name in an uncompressed format
+ * (plain string, not LZ-encoded). Stored separately so a lightweight inline script
+ * can read it before React hydrates and set `data-color-scheme` on `<html>` to prevent
+ * a flash of the wrong color scheme (FOUC).
+ */
+export const DOM_COLOR_SCHEME_KEY = '@styles.dom.colorScheme'
+
+/**
+ * Recursively flattens a nested color token object into a flat map of CSS custom-property
+ * names to their values. Nesting levels are joined with `-` (e.g., `{ primary: { solid: '#fff' } }`
+ * → `{ '--cl-primary-solid': '#fff' }`). Non-string leaf values are silently skipped.
+ */
+export function flattenColorMap(
+  obj: Record<string, any>,
+  path = '',
+  prefix = CSS_VAR_PREFIX,
+): Record<string, string> {
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(obj)) {
+    const cssPath = path ? `${path}-${key}` : key
+    if (typeof value === 'string') {
+      result[`${prefix}${cssPath}`] = value
+    } else if (value && typeof value === 'object') {
+      Object.assign(result, flattenColorMap(value, cssPath, prefix))
+    }
+  }
+  return result
+}
+
+/**
+ * Recursively replaces every string leaf in `obj` with a `var(--cl-<path>)` reference,
+ * preserving the original object shape. Used on web to replace raw color values with
+ * CSS variable references so that color-scheme switching via `data-color-scheme` CSS
+ * selectors works without JavaScript re-renders.
+ */
+export function buildCssVarProxy<T>(obj: T, path = '', prefix = CSS_VAR_PREFIX): T {
+  if (typeof obj !== 'object' || obj === null) return obj
+  const result: Record<string, any> = {}
+  for (const [key, value] of Object.entries(obj as Record<string, any>)) {
+    const cssPath = path ? `${path}-${key}` : key
+    if (typeof value === 'string') {
+      result[key] = `var(${prefix}${cssPath})`
+    } else if (value && typeof value === 'object') {
+      result[key] = buildCssVarProxy(value, cssPath, prefix)
+    } else {
+      result[key] = value
+    }
+  }
+  return result as T
+}
+
+/**
+ * Sets or removes `data-color-scheme` on `document.documentElement` to trigger the
+ * matching CSS selector that applies alternate-scheme custom-property overrides.
+ * The `'default'` scheme removes the attribute entirely so the `:root` base variables
+ * apply. No-ops on non-browser environments (SSR, React Native).
+ */
+export function applyColorSchemeToDOM(colorScheme: string) {
+  if (typeof document === 'undefined') return
+  if (colorScheme === 'default') {
+    delete document.documentElement.dataset.colorScheme
+  } else {
+    document.documentElement.dataset.colorScheme = colorScheme
+  }
+}

package/src/lib/index.ts

@@ -1,3 +1,4 @@
-export { createStyles } from './createStyles'
+export { createStyles, createStylesWithContext, CONTEXT_FACTORY_SYMBOL } from './createStyles'
 export { createTheme } from './createTheme'
 export { calc } from './calc'
+export { flattenColorMap, buildCssVarProxy, applyColorSchemeToDOM, CSS_VAR_PREFIX, DOM_COLOR_SCHEME_KEY } from './cssVariables'

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

@@ -3,11 +3,11 @@ import { createStyles } from '../createStyles'
 import { themeStore } from '../../theme'
 import { mockTheme, MockedTheme } from '../../tests/theme'
 
-describe('createStyles', () => {
-  let currentTheme: MockedTheme = null
+describe('createStyles (web — isBrowser: true)', () => {
+  let currentTheme: MockedTheme = null as any
 
   beforeEach(() => {
-    mockTheme()
+    mockTheme({ isBrowser: true })
 
     currentTheme = themeStore.theme as unknown as MockedTheme
   })
@@ -30,10 +30,10 @@ describe('createStyles', () => {
   })
 
   it('should compute styles from function when theme is available', () => {
-    const functionStyles = (theme: MockedTheme) => ({
+    const functionStyles = (theme: any) => ({
       button: {
-        color: theme.colors.neutralSo,
-        backgroundColor: theme.colors.secondary
+        color: theme.colors.neutralSolid500,
+        backgroundColor: theme.colors.buttonRegularPrimaryBgDefault,
       },
       container: {
         padding: theme.spacing.value(2)
@@ -42,33 +42,34 @@ describe('createStyles', () => {
 
     const styles = createStyles(functionStyles)
 
+    // On web (isBrowser: true), theme.colors returns CSS var references
     expect(styles.button).toEqual({
-      color: currentTheme.colors.neutralSo,
-      backgroundColor: currentTheme.colors.secondary
+      color: 'var(--cl-neutralSolid500)',
+      backgroundColor: 'var(--cl-buttonRegularPrimaryBgDefault)',
     })
     expect(styles.container).toEqual({
       padding: 16
     })
   })
 
-  it('should recompute styles when theme changes (proxy behavior)', () => {
-    const functionStyles = (theme: MockedTheme) => ({
+  it('should return CSS var references regardless of active color scheme (proxy behavior)', () => {
+    const functionStyles = (theme: any) => ({
       button: { color: theme.colors.buttonRegularPrimaryBgDefault }
     })
 
     const styles = createStyles(functionStyles)
 
-    // Initial theme
-    expect(styles.button).toEqual({ color: currentTheme.colors.primarySolid800 })
+    // CSS var reference is static — same string before and after scheme change.
+    // The browser CSS cascade (via data-color-scheme attribute) handles the actual color switch.
+    expect(styles.button).toEqual({ color: 'var(--cl-buttonRegularPrimaryBgDefault)' })
 
     currentTheme.setColorScheme('dark')
 
-    // Should reflect new theme due to proxy
-    expect(styles.button).toEqual({ color: currentTheme.colors.primarySolid500 })
+    expect(styles.button).toEqual({ color: 'var(--cl-buttonRegularPrimaryBgDefault)' })
   })
 
   it('should handle complex theme-based styles', () => {
-    const functionStyles = (theme: MockedTheme) => ({
+    const functionStyles = (theme: any) => ({
       button: {
         color: theme.colors.redSolid100,
         border: `1px solid ${theme.colors.neutralSolid1000}`,
@@ -84,14 +85,14 @@ describe('createStyles', () => {
     const styles = createStyles(functionStyles)
 
     expect(styles.button).toEqual({
-      color: currentTheme.colors.redSolid100,
-      border: `1px solid ${currentTheme.colors.neutralSolid1000}`,
+      color: 'var(--cl-redSolid100)',
+      border: '1px solid var(--cl-neutralSolid1000)',
       '@media (max-width: 768px)': {
         fontSize: '14px'
       }
     })
     expect(styles.alert).toEqual({
-      backgroundColor: currentTheme.colors.redSolid600
+      backgroundColor: 'var(--cl-redSolid600)',
     })
   })
 
@@ -106,12 +107,10 @@ describe('createStyles', () => {
   })
 
   it('should work with mixed ICSS and custom properties', () => {
-    const functionStyles = (theme: MockedTheme) => ({
+    const functionStyles = (theme: any) => ({
       component: {
-        // ICSS properties
         color: theme.colors.blueSolid900,
         padding: '10px',
-        // Custom properties (merged with ICSS)
         customProp: 'custom-value',
         dataAttribute: 'test'
       }
@@ -120,7 +119,7 @@ describe('createStyles', () => {
     const styles = createStyles(functionStyles)
 
     expect(styles.component).toEqual({
-      color: currentTheme.colors.blueSolid900,
+      color: 'var(--cl-blueSolid900)',
       padding: '10px',
       customProp: 'custom-value',
       dataAttribute: 'test'
@@ -130,7 +129,7 @@ describe('createStyles', () => {
   it('should maintain proxy behavior across multiple accesses', () => {
     let computeCount = 0
 
-    const functionStyles = (theme: MockedTheme) => {
+    const functionStyles = (theme: any) => {
       computeCount++
       return {
         button: { color: theme.colors.blueSolid100 }
@@ -149,3 +148,61 @@ describe('createStyles', () => {
     expect(computeCount).toBe(3)
   })
 })
+
+describe('createStyles (RN — isBrowser: false)', () => {
+  let currentTheme: MockedTheme = null as any
+
+  beforeEach(() => {
+    mockTheme({ isBrowser: false })
+    currentTheme = themeStore.theme as unknown as MockedTheme
+  })
+
+  it('should compute styles from function with raw RGBA values', () => {
+    const functionStyles = (theme: any) => ({
+      button: {
+        color: theme.colors.neutralSolid500,
+        backgroundColor: theme.colors.buttonRegularPrimaryBgDefault,
+      },
+    })
+
+    const styles = createStyles(functionStyles)
+
+    expect(styles.button).toEqual({
+      color: 'rgba(136, 136, 136, 1.00)',
+      backgroundColor: 'rgba(43, 105, 122, 1.00)',
+    })
+  })
+
+  it('should return raw RGBA for active scheme after setColorScheme', () => {
+    const functionStyles = (theme: any) => ({
+      button: { color: theme.colors.buttonRegularPrimaryBgDefault },
+    })
+
+    const styles = createStyles(functionStyles)
+
+    // On RN, colors is raw — before scheme change it's the light value
+    expect(styles.button).toEqual({ color: 'rgba(43, 105, 122, 1.00)' })
+
+    // After switching, same key in the proxy still returns the light value
+    // because theme.colors is the static raw colors object (not scheme-reactive on RN).
+    // Use theme.currentSchemeColors for the active scheme's values.
+    currentTheme.setColorScheme('dark')
+
+    expect(styles.button).toEqual({ color: 'rgba(43, 105, 122, 1.00)' })
+  })
+
+  it('currentSchemeColors returns the active scheme raw values', () => {
+    const styles = createStyles((theme: any) => ({
+      button: { color: theme.currentSchemeColors.buttonRegularPrimaryBgDefault },
+    }))
+
+    // Light mode
+    expect(styles.button).toEqual({ color: 'rgba(43, 105, 122, 1.00)' })
+
+    currentTheme.setColorScheme('dark')
+
+    // Dark mode colors — dark scheme overrides buttonRegularPrimaryBgDefault
+    const darkValue = currentTheme.currentSchemeColors.buttonRegularPrimaryBgDefault as string
+    expect(styles.button).toEqual({ color: darkValue })
+  })
+})