@codeleap/styles 5.7.0 → 5.8.1

package/package.json

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

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "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/createTheme.ts

@@ -95,6 +95,17 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
 
       themePersistor.set(alternateColorsKey, unpersistedAlternateColors)
     },
+    ejectColorScheme(name) {
+      themeStore.ejectColorScheme(name)
+
+      const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+
+      if (name in persistedAlternateColors) {
+        delete persistedAlternateColors[name]
+      }
+
+      themePersistor.set(alternateColorsKey, persistedAlternateColors)
+    },
 
     baseSpacing: theme.baseSpacing,
 

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/themeStore.ts

@@ -53,41 +53,53 @@ class ThemeStore {
 
   // utils
 
-  private getBaseColorScheme(): ColorMap {
+  private getBaseSchemeColors(): 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 baseSchemeColors = this.getBaseSchemeColors()
     const currentAlternateColors = this.alternateColorsScheme ?? {}
 
     const alternateColors = {
       ...currentAlternateColors,
 
       [name]: {
-        ...baseColors,
+        ...baseSchemeColors,
         ...colors,
-      }
+      },
     }
-    
+
     this.setAlternateColorsScheme(alternateColors)
 
     return alternateColors
   }
+
+  ejectColorScheme(name:string) {
+    const currentAlternateColors = this.alternateColorsScheme ?? {}
+
+    if (name in currentAlternateColors) {
+      delete currentAlternateColors[name]
+    }
+
+    this.setAlternateColorsScheme(currentAlternateColors)
+
+    return currentAlternateColors
+  }
 }
 
 export const themeStore = new ThemeStore()
 
 export const themeStoreComputed = computed([
-  themeStore['themeStore'], 
-  themeStore['colorSchemeStore'], 
+  themeStore.themeStore,
+  themeStore.colorSchemeStore,
 ], (theme, colorScheme) => ({
   theme: theme as unknown as AppTheme<Theme>,
   colorScheme,

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,
+    },
+  }
 }

package/src/types/theme.ts

@@ -78,6 +78,7 @@ type PredefinedAppTheme<T extends Theme> = PredefinedThemeDerivedValues<T> & {
   setColorScheme: (colorScheme: string) => void
   currentColorScheme: () => ColorScheme<T>
   injectColorScheme: (name: string, colorMap: ColorMap) => void
+  ejectColorScheme: (name: string) => void
   spacing: SpacingMap
   media: MediaQueries
   border: BorderCreator