@codeleap/styles 5.5.0 → 5.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.5.0",
+  "version": "5.5.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "5.5.0",
+    "@codeleap/config": "5.5.3",
     "ts-node-dev": "^1.1.8"
   },
   "scripts": {
@@ -26,9 +26,11 @@
   },
   "dependencies": {
     "@fastify/deepmerge": "1.3.0",
+    "@nanostores/persistent": "^1.1.0",
+    "@nanostores/react": "^1.0.0",
     "js-sha256": "0.11.0",
     "lz-string": "^1.5.0",
-    "rfdc": "^1.4.1",
-    "zustand": "4.5.0"
+    "nanostores": "^1.0.1",
+    "rfdc": "^1.4.1"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.5.0",
+  "version": "5.5.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -26,9 +26,11 @@
   },
   "dependencies": {
     "@fastify/deepmerge": "1.3.0",
+    "@nanostores/persistent": "^1.1.0",
+    "@nanostores/react": "^1.0.0",
     "js-sha256": "0.11.0",
     "lz-string": "^1.5.0",
-    "rfdc": "^1.4.1",
-    "zustand": "4.5.0"
+    "nanostores": "^1.0.1",
+    "rfdc": "^1.4.1"
   }
 }

package/src/index.ts

@@ -3,5 +3,6 @@ import './lib/utils'
 
 export * from './lib'
 export * from './types'
+export * from './tools'
 
 export { default as deepmerge } from '@fastify/deepmerge'

package/src/lib/Cacher.ts

@@ -1,9 +1,7 @@
-import { create } from 'zustand'
-import { createJSONStorage, persist, StateStorage } from 'zustand/middleware'
-import { AnyRecord } from '../types'
 import { CacheType } from '../types/cache'
 import { StyleConstants } from './constants'
 import { hashKey } from './hashKey'
+import { StateStorage } from '../types/store'
 
 function getStaleTime() {
   const time = 7
@@ -15,23 +13,15 @@ function getStaleTime() {
   return currentTime
 }
 
-type StorePersistor = {
-  cached: AnyRecord
-  cacheFor: (key: string, value: any) => void
-  staleTime: Date
-  reset: () => void
-}
-
 export class Cache<T extends any = any> {
   cache: Record<string, T> = {}
 
-  persistor = null
+  get persistKeyCache() {
+    return `@styles.caches.${this.registryName}.cache`
+  }
 
-  store: StorePersistor = {
-    cached: {},
-    cacheFor: () => null,
-    reset: () => null,
-    staleTime: null
+  get persistKeyStaleTime() {
+    return `@styles.caches.${this.registryName}.staleTime`
   }
 
   constructor(
@@ -39,23 +29,21 @@ export class Cache<T extends any = any> {
     private storage: StateStorage = null,
     public persistCache: boolean = !!storage,
   ) {
-    if (!persistCache) return
+    if (!persistCache || !StyleConstants.STORE_CACHE_ENABLED) return
 
-    this.createPersistor(registryName)
-
-    if (!StyleConstants.STORE_CACHE_ENABLED || !this.persistor) return
+    const { persistedCache, persistedStaleTime } = this.loadStorage()
 
     const currentTime = new Date()
-    const staleTime = new Date(this.store.staleTime)
 
-    const isStaled = currentTime > staleTime
+    const isStaled = currentTime > persistedStaleTime
 
     if (isStaled) {
-      this.store.reset()
+      this.clearStorage()
       return
     }
 
-    this.setCache(this.store.cached)
+    this.setCache(persistedCache)
+    this.storeStaleTime(persistedStaleTime)
   }
 
   keyFor(cacheBaseKey: string, data: Array<any> | any) {
@@ -72,60 +60,53 @@ export class Cache<T extends any = any> {
 
   cacheFor(key: string, cache: T) {
     this.cache[key] = cache
-    if (this.persistCache) this.store.cacheFor(key, cache)
+    if (this.persistCache) this.storeCache()
     return cache
   }
 
+  // utils
+
   setCache(cache: Record<string, T>) {
     this.cache = cache
   }
 
   clear() {
     this.cache = {}
-    if (this.persistCache) this.persistor.persist.clearStorage()
+    this.clearStorage()
   }
 
-  createPersistor(registryName: string) {
-    if (!this.persistCache) return null
-
-    const persistor = create(persist<StorePersistor>(
-      (set, get) => ({
-        staleTime: getStaleTime(),
-        cached: {},
-        cacheFor: (key, value) => set(store => {
-          const cached = store.cached
-
-          cached[key] = value
-    
-          return {
-            cached
-          }
-        }),
-        reset: () => set({
-          cached: {},
-          staleTime: getStaleTime()
-        })
-      }),
-      {
-        name: `@styles.caches.${registryName}`,
-        version: StyleConstants.STORES_PERSIST_VERSION,
-        migrate: (persistedState: StorePersistor, version) => {
-          if (version != StyleConstants.STORES_PERSIST_VERSION) {
-            persistedState.staleTime = getStaleTime()
-            persistedState.cached = {}
-    
-            return persistedState
-          }
-    
-          return persistedState as StorePersistor
-        },
-        storage: createJSONStorage(() => this.storage),
-      }
-    ))
-
-    this.persistor = persistor
-    this.store = persistor.getState()
-
-    return persistor
+  // storage
+
+  loadStorage() {
+    if (!this.persistCache) return
+
+    const persistedStaleTime = this.storage.getItem(this.persistKeyStaleTime)
+    const persistedCache = JSON.parse(this.storage.getItem(this.persistKeyCache))
+
+    return {
+      persistedStaleTime: !persistedStaleTime ? getStaleTime() : new Date(persistedStaleTime),
+      persistedCache,
+    }
+  }
+
+  clearStorage() {
+    if (!this.persistCache) return
+
+    this.storage.removeItem(this.persistKeyStaleTime)
+    this.storage.removeItem(this.persistKeyCache)
+  }
+
+  storeCache(cache: Record<string, T> = null) {
+    if (!this.persistCache) return
+
+    const value = JSON.stringify(cache ?? this.cache)
+    this.storage.setItem(this.persistKeyCache, value)
+  }
+
+  storeStaleTime(staleTime: Date) {
+    if (!this.persistCache) return
+
+    const value = staleTime.toISOString()
+    this.storage.setItem(this.persistKeyStaleTime, value)
   }
 }

package/src/lib/StyleCache.ts

@@ -3,7 +3,7 @@ import { hashKey } from './hashKey'
 import { StyleConstants } from './constants'
 import { CacheType } from '../types/cache'
 import { minifier } from './minifier'
-import { StateStorage } from 'zustand/middleware'
+import { StateStorage } from '../types/store'
 
 export class StyleCache {
   baseKey: string

package/src/lib/StylePersistor.ts

@@ -1,4 +1,4 @@
-import { StateStorage } from 'zustand/middleware'
+import { StateStorage } from '../types/store'
 import { minifier } from './minifier'
 
 export type StoragePersistor = {

package/src/lib/StyleRegistry.ts

@@ -1,6 +1,6 @@
 /* eslint-disable dot-notation */
 import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleAggregator, StyleProp, VariantStyleSheet } from '../types'
-import { ThemeStore, themeStore } from './themeStore'
+import { themeStore } from './themeStore'
 import deepmerge from '@fastify/deepmerge'
 import { MultiplierFunction } from './spacing'
 import { defaultVariants } from './defaultVariants'
@@ -8,8 +8,8 @@ import { dynamicVariants } from './dynamicVariants'
 import { capitalize, ignoredStyleKeys, isSpacingKey } from './utils'
 import { StyleCache } from './StyleCache'
 import { minifier } from './minifier'
-import { StateStorage } from 'zustand/middleware'
 import rfdc from 'rfdc'
+import { StateStorage } from '../types/store'
 
 const deepClone = rfdc()
 
@@ -22,20 +22,16 @@ export class CodeleapStyleRegistry {
 
   components: Record<string, AnyStyledComponent> = {}
 
-  private theme: ThemeStore
-
   private styleCache: StyleCache
 
   constructor(storage: StateStorage) {
     this.styleCache = new StyleCache(storage)
 
-    this.theme = themeStore.getState()
-
     this.registerCommonVariants()
 
-    const currentColorScheme = this.theme?.current?.['currentColorScheme']?.() ?? this.theme?.colorScheme ?? 'default'
+    const currentColorScheme = themeStore.theme?.['currentColorScheme']?.() ?? themeStore.colorScheme ?? 'default'
 
-    this.styleCache.registerBaseKey([currentColorScheme, this.theme.current, this.commonVariants])
+    this.styleCache.registerBaseKey([currentColorScheme, themeStore.theme, this.commonVariants])
   }
 
   computeCommonVariantStyle(componentName: string, variant: string, component = null) {
@@ -47,7 +43,7 @@ export class CodeleapStyleRegistry {
       }
     }
 
-    const theme = this.theme.current
+    const theme = themeStore.theme
 
     let mediaQuery = null
 
@@ -104,7 +100,7 @@ export class CodeleapStyleRegistry {
       return cache.value
     }
 
-    const theme = this.theme.current
+    const theme = themeStore.theme
 
     const variantStyles = variants.map((variant) => {
       if (!!stylesheet[variant]) {
@@ -294,7 +290,7 @@ export class CodeleapStyleRegistry {
     const [breakpoint, query] = responsiveKey?.includes(':') ? responsiveKey?.split(':') : [responsiveKey, 'down']
 
     // @ts-expect-error - media not has type
-    const mediaQuery = this.theme.current.media?.[query]?.(breakpoint)
+    const mediaQuery = themeStore.theme?.media?.[query]?.(breakpoint)
 
     return mediaQuery
   }
@@ -471,11 +467,11 @@ export class CodeleapStyleRegistry {
   }
 
   registerCommonVariants() {
-    const spacingVariants = this.theme.current?.['spacing']
+    const spacingVariants = themeStore.theme?.['spacing']
 
-    const insetVariants = this.theme.current?.['inset']
+    const insetVariants = themeStore.theme?.['inset']
 
-    const appVariants = this.theme.variants
+    const appVariants = themeStore.variants
 
     const commonVariants = deepmerge({ all: true })(
       defaultVariants,
@@ -516,11 +512,9 @@ export class CodeleapStyleRegistry {
   }
 
   update() {
-    this.theme = themeStore.getState()
-
-    const currentColorScheme = this.theme?.current?.['currentColorScheme']?.() ?? this.theme?.colorScheme ?? 'default'
+    const currentColorScheme = themeStore.theme?.['currentColorScheme']?.() ?? themeStore.colorScheme ?? 'default'
 
-    this.styleCache.registerBaseKey([currentColorScheme, this.theme.current, this.commonVariants])
+    this.styleCache.registerBaseKey([currentColorScheme, themeStore.theme, this.commonVariants])
   }
 
   private copyStyle(style: any) {
@@ -529,7 +523,7 @@ export class CodeleapStyleRegistry {
 
   createStyles<K extends string = string>(styles: Record<K, StyleProp<AnyRecord, ''>> | ((theme: ITheme) => Record<K, StyleProp<AnyRecord, ''>>)): Record<K, ICSS> {
     const compute = () => {
-      const current = themeStore.getState().current
+      const current = themeStore.theme
 
       const stylesObj = typeof styles === 'function' ? styles(current) : styles
 

package/src/lib/borderCreator.ts

@@ -1,4 +1,4 @@
-import { AppTheme, IColors, ICSS, Theme } from '../types'
+import { IColors, ICSS } from '../types'
 import { borderDirection } from './dynamicVariants'
 import { themeStore } from './themeStore'
 import { capitalize } from './utils'
@@ -21,7 +21,7 @@ export const borderCreator: BorderCreator = (args) => {
     directions = ['left', 'top', 'bottom', 'right'],
   } = args
 
-  const theme = themeStore.getState().current as AppTheme<Theme>
+  const theme = themeStore.themeTyped
 
   const color = theme?.baseColors?.[colorKey] ?? colorKey
 

package/src/lib/createAppVariants.ts

@@ -6,7 +6,7 @@ type AppVariantsMap = {
 }
 
 export function createAppVariants<T extends AppVariantsMap>(variants: T) {
-  themeStore.setState({ variants })
+  themeStore.setVariants(variants)
 
   return variants
 }

package/src/lib/createStyles.ts

@@ -9,7 +9,7 @@ export function createStyles<K extends string, V extends Value = {}>(
   styles: StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>),
 ) {
   const compute = () => {
-    const current = themeStore.getState().current
+    const current = themeStore.theme
 
     if (typeof styles === 'function') {
       return !current ? {} as StylesShape<K, V> : styles(current)

package/src/lib/createTheme.ts

@@ -1,4 +1,4 @@
-import { AppTheme, ColorScheme, Theme } from '../types'
+import { AppTheme, Theme } from '../types'
 import { borderCreator } from './borderCreator'
 import { createMediaQueries } from './mediaQuery'
 import { multiplierProperty } from './multiplierProperty'
@@ -6,12 +6,15 @@ import { defaultVariants } from './defaultVariants'
 import { spacingFactory } from './spacing'
 import { themeStore } from './themeStore'
 
-type ColorSchemaPersistor = {
-  get: () => string
-  set: (colorSchema: string) => void
+type ThemePersistor = {
+  get: (name: string) => any
+  set: (name: string, value: any) => void
 }
 
-export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: ColorSchemaPersistor): AppTheme<T> => {
+const colorSchemeKey = '@styles.theme.colorScheme'
+const alternateColorsKey = '@styles.theme.alternateColors'
+
+export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePersistor): AppTheme<T> => {
   const {
     colors,
     breakpoints,
@@ -27,23 +30,34 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
     ...otherThemeValues
   } = theme
 
+  themeStore.setColorScheme(themePersistor.get(colorSchemeKey) ?? 'default')
+
+  const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+
+  const currentAlternateColors = {
+    ...(persistedAlternateColors ?? {}),
+    ...otherThemeValues?.alternateColors,
+  }
+
+  themeStore.setAlternateColorsScheme(currentAlternateColors)
+
   const themeObj: AppTheme<T> = {
     ...otherThemeValues,
 
     baseColors,
 
     currentColorScheme() {
-      return themeStore.getState().colorScheme
+      return themeStore.colorScheme
     },
 
     breakpoints: breakpoints ?? {},
 
     get colors() {
-      const colorScheme = themeStore.getState().colorScheme
+      const colorScheme = themeStore.colorScheme ?? 'default'
 
       if (colorScheme === 'default') return colors
 
-      const scheme = theme.alternateColors?.[colorScheme]
+      const scheme = themeStore.alternateColorsScheme?.[colorScheme]
 
       if (!scheme) {
         console.warn(`Color scheme ${colorScheme} not found in theme`)
@@ -52,12 +66,34 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
       return scheme ?? colors
     },
 
-    setColorScheme(colorScheme: ColorScheme<Theme>) {
-      themeStore.setState({ colorScheme: colorScheme as string })
-      colorSchemaPersistor.set(colorScheme as string)
+    setColorScheme(colorScheme: string) {
+      const hasScheme = colorScheme === 'default' ? true : !!themeStore.alternateColorsScheme?.[colorScheme]
+
+      if (!hasScheme) {
+        console.warn(`Color scheme ${colorScheme} not found in theme`)
+        return
+      }
+
+      themeStore.setColorScheme(colorScheme)
+
+      themePersistor.set(colorSchemeKey, colorScheme)
+    },
+
+    injectColorScheme(name, colorMap) {
+      themeStore.injectColorScheme(name, colorMap)
+
+      const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+
+      const unpersistedAlternateColors = {
+        ...(persistedAlternateColors ?? {}),
+        [name]: colorMap,
+      }
+
+      themePersistor.set(alternateColorsKey, unpersistedAlternateColors)
     },
 
     baseSpacing: theme.baseSpacing,
+
     value: (n = 1) => theme.baseSpacing * n,
 
     spacing: {
@@ -109,10 +145,7 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
     },
   }
 
-  themeStore.setState({
-    current: themeObj,
-    colorScheme: colorSchemaPersistor.get() ?? 'default',
-  })
+  themeStore.setTheme(themeObj)
 
   return themeObj
 }

package/src/lib/hooks.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
 import { ICSS } from '../types'
 import { getNestedStylesByKey } from './utils'
-import { useShallow } from 'zustand/react/shallow'
-import { ThemeStore, themeStore } from './themeStore'
+import { ThemeState, themeStoreComputed } from './themeStore'
+import { useStore } from '@nanostores/react'
 
 export const useStyleObserver = (style) => {
   return useMemo(() => {
@@ -26,10 +26,18 @@ export function useNestedStylesByKey<T extends string>(match: string, componentS
   }, [styles])
 }
 
-type ThemeSelector<T = Record<string, any>> = (store: ThemeStore) => T
+type ThemeSelector<T> = (state: ThemeState) => T
 
-export const useTheme = <T = Record<string, any>>(selector: ThemeSelector<T>): T => {
-  return themeStore(useShallow(selector))
+export const useTheme = <T = ThemeState>(
+  selector?: ThemeSelector<T>
+): T => {
+  const state = useStore(themeStoreComputed)
+  
+  if (!selector) {
+    return state as T
+  }
+  
+  return selector(state)
 }
 
 export function useCompositionStyles<T extends string, C extends string>(

package/src/lib/themeStore.ts

@@ -1,14 +1,91 @@
-import { create } from 'zustand'
-import { IAppVariants, ITheme } from '../types'
+import { AppTheme, ColorMap, IAppVariants, ITheme, Theme } from '../types'
+import { map, computed } from 'nanostores'
 
-export type ThemeStore = {
-  colorScheme: string | null
-  current: ITheme | null
-  variants: IAppVariants
+export type ThemeState = {
+  theme: AppTheme<Theme> | null
 }
 
-export const themeStore = create<ThemeStore>(() => ({
-  colorScheme: null,
-  current: null,
-  variants: {},
+class ThemeStore {
+  private alternateColorsSchemeStore: { [key: string]: ColorMap } = {}
+
+  public colorSchemeStore: string = null
+
+  public themeStore = map<ITheme | null>(null)
+
+  public variantsStore: IAppVariants = {} as IAppVariants
+
+  get theme() {
+    return this.themeStore.get()
+  }
+
+  get themeTyped() {
+    return this.themeStore.get() as unknown as AppTheme<Theme>
+  }
+
+  get colorScheme() {
+    return this.colorSchemeStore
+  }
+
+  get variants() {
+    return this.variantsStore
+  }
+
+  get alternateColorsScheme() {
+    return this.alternateColorsSchemeStore ?? {}
+  }
+
+  setVariants<T>(variants: T) {
+    this.variantsStore = variants as unknown as IAppVariants
+  }
+
+  setColorScheme(colorScheme: string) {
+    this.colorSchemeStore = colorScheme
+  }
+
+  setTheme(theme: ITheme) {
+    this.themeStore.set(theme)
+  }
+
+  setAlternateColorsScheme(colors: { [key: string]: ColorMap }) {
+    this.alternateColorsSchemeStore = colors
+  }
+
+  // utils
+
+  private getBaseColorScheme(): ColorMap {
+    const alternateColors = this.alternateColorsScheme ?? {}
+    const colorSchemeKeys = Object.keys(alternateColors)
+    
+    if (colorSchemeKeys.length === 0) {
+      return {}
+    }
+    
+    return alternateColors[colorSchemeKeys[0]] ?? {}
+  }
+
+  injectColorScheme(name: string, colors: ColorMap) {
+    const baseColors = this.getBaseColorScheme()
+    const currentAlternateColors = this.alternateColorsScheme ?? {}
+
+    const alternateColors = {
+      ...currentAlternateColors,
+
+      [name]: {
+        ...baseColors,
+        ...colors,
+      }
+    }
+    
+    this.setAlternateColorsScheme(alternateColors)
+
+    return alternateColors
+  }
+}
+
+export const themeStore = new ThemeStore()
+
+export const themeStoreComputed = computed([
+  themeStore['themeStore'], 
+], (theme) => ({
+  theme: theme as unknown as AppTheme<Theme>,
 }))

package/src/tools/colors.ts

@@ -0,0 +1,106 @@
+import { ColorMap } from '../types'
+
+export function hexToHSL(hex: string) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+
+  const max = Math.max(r, g, b), min = Math.min(r, g, b)
+  let h = 0, s = 0, l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    h /= 6
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  }
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  s /= 100
+  l /= 100
+
+  const k = (n: number) => (n + h / 30) % 12
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number) =>
+    Math.round(255 * (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))))
+
+  return `#${[f(0), f(8), f(4)].map(x => x.toString(16).padStart(2, '0')).join('')}`
+}
+
+export function hexToRGB(hex: string) {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return { r, g, b }
+}
+
+export function hslToRGB(h: number, s: number, l: number) {
+  s /= 100
+  l /= 100
+
+  const k = (n: number) => (n + h / 30) % 12
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number) =>
+    Math.round(255 * (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))))
+
+  return {
+    r: f(0),
+    g: f(8),
+    b: f(4)
+  }
+}
+
+export function generateColorScheme(
+  anchorHex: string, 
+  prefix: string = 'primary'
+): ColorMap {
+  const { h, s } = hexToHSL(anchorHex)
+  const baseRGB = hexToRGB(anchorHex)
+  
+  const scheme: ColorMap = {}
+  
+  const lightnesses = [95, 85, 75, 60, 45, 30, 27, 21, 16, 10]
+  
+  lightnesses.forEach((lightness, index) => {
+    const step = (index + 1) * 100
+    const rgb = hslToRGB(h, s, lightness)
+    scheme[`${prefix}Solid${step}`] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1.00)`
+  })
+  
+  const alphas = [0.05, 0.10, 0.20, 0.30, 0.40, 0.50, 0.60, 0.70, 0.80, 0.90]
+  
+  alphas.forEach((alpha, index) => {
+    const step = (index + 1) * 100
+    scheme[`${prefix}Transparent${step}`] = `rgba(${baseRGB.r}, ${baseRGB.g}, ${baseRGB.b}, ${alpha.toFixed(2)})`
+  })
+  
+  return scheme
+}
+
+export function getLuminance({ r, g, b }: { r: number; g: number; b: number }): number {
+  const [R, G, B] = [r, g, b].map(c => {
+    const channel = c / 255
+    return channel <= 0.03928
+      ? channel / 12.92
+      : Math.pow((channel + 0.055) / 1.055, 2.4)
+  })
+
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B
+}
+
+export function getTextColor(backgroundHex: string, darkColor = 'black', lightColor = 'white'): string {
+  const rgb = hexToRGB(backgroundHex)
+  const luminance = getLuminance(rgb)
+  return luminance > 0.5 ? darkColor : lightColor
+}

package/src/tools/index.ts

@@ -0,0 +1 @@
+export * as colorTools from './colors'

package/src/types/store.ts

@@ -0,0 +1,5 @@
+export interface StateStorage {
+  getItem: (name: string) => string | null
+  setItem: (name: string, value: string) => void
+  removeItem: (name: string) => void
+}

package/src/types/theme.ts

@@ -8,7 +8,7 @@ type AnyMap = {
   [key: string]: any
 }
 
-type ColorMap = {
+export type ColorMap = {
   [key: string]: string
 }
 
@@ -75,8 +75,9 @@ type PredefinedThemeDerivedValues<T extends Theme> = {
 }
 
 type PredefinedAppTheme<T extends Theme> = PredefinedThemeDerivedValues<T> & {
-  setColorScheme: (colorScheme: ColorScheme<T>) => void
+  setColorScheme: (colorScheme: string) => void
   currentColorScheme: () => ColorScheme<T>
+  injectColorScheme: (name: string, colorMap: ColorMap) => void
   spacing: SpacingMap
   media: MediaQueries
   border: BorderCreator