@codeleap/styles 5.7.1 → 5.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.7.1",
+  "version": "5.8.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "5.7.1",
+    "@codeleap/config": "5.8.2",
     "ts-node-dev": "^1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.7.1",
+  "version": "5.8.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/lib/StaleControl.ts

@@ -1,6 +1,6 @@
 
 export class StaleControl {
-  private wiperId: NodeJS.Timeout = null
+  private wiperId: NodeJS.Timer = null
 
   constructor(
     private staleTime: number = 60, // minutes

package/src/lib/borderCreator.ts

@@ -23,7 +23,7 @@ export const borderCreator: BorderCreator = (args) => {
 
   const theme = themeStore.themeTyped
 
-  const color = theme?.baseColors?.[colorKey] ?? colorKey
+  const color = theme?.colors?.[colorKey] ?? colorKey
 
   let borderStyles: ICSS = {}
 

package/src/lib/dynamicVariants.ts

@@ -22,6 +22,9 @@ export type Value =
   | number
   | ''
 
+// @note
+// Typing has been removed because figma's new color organization is extremely heavy, 
+// perhaps in a future typescript update
 type Color = string // keyof IColors
 
 export type DynamicVariants =
@@ -44,7 +47,7 @@ export const createDynamicVariants = () => {
 
   colorVariants.forEach(variant => {
     createVariant(variant, (theme, color: Color) => ({
-      [variant]: theme.baseColors[color],
+      [variant]: theme.colors[color],
     }))
   })
 
@@ -63,7 +66,7 @@ export const createDynamicVariants = () => {
       const variant = `border${capitalize(direction)}${capitalize(property)}`
 
       createVariant(variant, (theme, value: string) => ({
-        [variant]: property == 'color' ? theme.baseColors[value] : theme.radius[value],
+        [variant]: property == 'color' ? theme.colors[value] : theme.radius[value],
       }))
     })
   })
@@ -71,7 +74,7 @@ export const createDynamicVariants = () => {
   createVariant('cursor', (theme, cursor: typeof cursorTypes[number]) => ({ cursor }))
 
   createVariant('bg', (theme, color: Color) => ({
-    backgroundColor: theme.baseColors[color],
+    backgroundColor: theme.colors[color],
   }))
 
   createVariant('effect', (theme, effect: keyof IEffects) => theme.effects[effect])

package/src/lib/hooks.ts

@@ -41,7 +41,7 @@ export const useTheme = <T = ThemeState>(
 }
 
 export function useCompositionStyles<T extends string, C extends string>(
-  composition: Array<T>,
+  composition: (T | Array<T>),
   componentStyles: Partial<Record<C, ICSS>>
 ): Partial<Record<T, ICSS>> {
   const styles = {
@@ -51,8 +51,12 @@ export function useCompositionStyles<T extends string, C extends string>(
   return useMemo(() => {
     const compositionStyles = {}
 
-    for (const element of composition) {
-      compositionStyles[element as string] = getNestedStylesByKey(element, styles)
+    if (Array.isArray(composition)) {
+      for (const element of composition) {
+        compositionStyles[element as string] = getNestedStylesByKey(element, styles)
+      }
+    } else {
+      compositionStyles[composition as string] = getNestedStylesByKey(composition, styles)
     }
 
     return compositionStyles

package/src/lib/themeStore.ts

@@ -53,7 +53,7 @@ class ThemeStore {
 
   // utils
 
-  private getBaseColorScheme(): ColorMap {
+  private getBaseSchemeColors(): ColorMap {
     const alternateColors = this.alternateColorsScheme ?? {}
     const colorSchemeKeys = Object.keys(alternateColors)
 
@@ -65,14 +65,14 @@ class ThemeStore {
   }
 
   injectColorScheme(name: string, colors: ColorMap) {
-    const baseColors = this.getBaseColorScheme()
+    const baseSchemeColors = this.getBaseSchemeColors()
     const currentAlternateColors = this.alternateColorsScheme ?? {}
 
     const alternateColors = {
       ...currentAlternateColors,
 
       [name]: {
-        ...baseColors,
+        ...baseSchemeColors,
         ...colors,
       },
     }

package/src/lib/validateTheme.ts

@@ -1,10 +1,15 @@
 import { Theme } from '../types/theme'
 
 export function validateTheme<T extends Theme>(theme: T) {
+  const baseColors = theme.baseColors
+  
   const colors = theme.colors
-  const requiredColors = Object.keys(colors)
 
   const alternateColors = theme.alternateColors
+
+  const requiredColors = Object.keys(colors)
+
+  const mergedAlternateColors = {}
   
   if (alternateColors) {
     for (const [colorSchemeName, colorSchemeColors] of Object.entries(alternateColors)) {
@@ -15,8 +20,20 @@ export function validateTheme<T extends Theme>(theme: T) {
           throw new Error(`Alternate color scheme ${colorSchemeName} is missing color ${requiredColor}`)
         }
       }
+
+      mergedAlternateColors[colorSchemeName] = {
+        ...baseColors,
+        ...colorSchemeColors,
+      }
     }
   }
 
-  return theme
+  return {
+    ...theme,
+    alternateColors: mergedAlternateColors,
+    colors: {
+      ...baseColors,
+      ...colors,
+    },
+  }
 }