@codeleap/styles 5.5.1 → 5.5.3

package/package.json

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

package/package.json.bak

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

package/src/lib/createTheme.ts

@@ -34,20 +34,16 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
 
   const persistedAlternateColors = themePersistor.get(alternateColorsKey)
 
-  const alternateColors = {
+  const currentAlternateColors = {
     ...(persistedAlternateColors ?? {}),
     ...otherThemeValues?.alternateColors,
   }
 
-  themeStore.setAlternateColorsScheme(alternateColors)
+  themeStore.setAlternateColorsScheme(currentAlternateColors)
 
   const themeObj: AppTheme<T> = {
     ...otherThemeValues,
 
-    get alternateColors() {
-      return themeStore.alternateColorsScheme
-    },
-
     baseColors,
 
     currentColorScheme() {
@@ -71,7 +67,7 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
     },
 
     setColorScheme(colorScheme: string) {
-      const hasScheme = !!themeStore.alternateColorsScheme?.[colorScheme]
+      const hasScheme = colorScheme === 'default' ? true : !!themeStore.alternateColorsScheme?.[colorScheme]
 
       if (!hasScheme) {
         console.warn(`Color scheme ${colorScheme} not found in theme`)

package/src/lib/themeStore.ts

@@ -1,20 +1,18 @@
 import { AppTheme, ColorMap, IAppVariants, ITheme, Theme } from '../types'
-import { map, atom, computed } from 'nanostores'
+import { map, computed } from 'nanostores'
 
 export type ThemeState = {
   theme: AppTheme<Theme> | null
-  colorScheme: string | null
-  variants: IAppVariants
 }
 
 class ThemeStore {
-  private readonly alternateColorsSchemeStore = map<{ [key: string]: ColorMap }>({})
+  private alternateColorsSchemeStore: { [key: string]: ColorMap } = {}
 
-  public readonly colorSchemeStore = atom<string | null>(null)
+  public colorSchemeStore: string = null
 
-  public readonly themeStore = map<ITheme | null>(null)
+  public themeStore = map<ITheme | null>(null)
 
-  public readonly variantsStore = map<IAppVariants>({})
+  public variantsStore: IAppVariants = {} as IAppVariants
 
   get theme() {
     return this.themeStore.get()
@@ -25,23 +23,23 @@ class ThemeStore {
   }
 
   get colorScheme() {
-    return this.colorSchemeStore.get()
+    return this.colorSchemeStore
   }
 
   get variants() {
-    return this.variantsStore.get()
+    return this.variantsStore
   }
 
   get alternateColorsScheme() {
-    return this.alternateColorsSchemeStore.get() ?? {}
+    return this.alternateColorsSchemeStore ?? {}
   }
 
   setVariants<T>(variants: T) {
-    this.variantsStore.set(variants as unknown as IAppVariants)
+    this.variantsStore = variants as unknown as IAppVariants
   }
 
   setColorScheme(colorScheme: string) {
-    this.colorSchemeStore.set(colorScheme)
+    this.colorSchemeStore = colorScheme
   }
 
   setTheme(theme: ITheme) {
@@ -49,7 +47,7 @@ class ThemeStore {
   }
 
   setAlternateColorsScheme(colors: { [key: string]: ColorMap }) {
-    this.alternateColorsSchemeStore.set(colors)
+    this.alternateColorsSchemeStore = colors
   }
 
   // utils
@@ -88,10 +86,6 @@ export const themeStore = new ThemeStore()
 
 export const themeStoreComputed = computed([
   themeStore['themeStore'], 
-  themeStore['colorSchemeStore'], 
-  themeStore['variantsStore']
-], (theme, colorScheme, variants) => ({
+], (theme) => ({
   theme: theme as unknown as AppTheme<Theme>,
-  colorScheme,
-  variants
 }))

package/src/tools/colors.ts

@@ -1,3 +1,5 @@
+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
@@ -36,28 +38,54 @@ export function hslToHex(h: number, s: number, l: number): string {
   return `#${[f(0), f(8), f(4)].map(x => x.toString(16).padStart(2, '0')).join('')}`
 }
 
-export function generateColorScheme(anchorHex: string, steps: number = 10): string[] {
-  const { h, s } = hexToHSL(anchorHex)
+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 }
+}
 
-  const lightest = 95
-  const darkest = 20
-  const increment = (lightest - darkest) / (steps - 1)
+export function hslToRGB(h: number, s: number, l: number) {
+  s /= 100
+  l /= 100
 
-  const colors: string[] = []
+  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)))))
 
-  for (let i = 0; i < steps; i++) {
-    const l = lightest - i * increment
-    colors.push(hslToHex(h, s, l))
+  return {
+    r: f(0),
+    g: f(8),
+    b: f(4)
   }
-
-  return colors
 }
 
-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 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 {
@@ -75,4 +103,4 @@ export function getTextColor(backgroundHex: string, darkColor = 'black', lightCo
   const rgb = hexToRGB(backgroundHex)
   const luminance = getLuminance(rgb)
   return luminance > 0.5 ? darkColor : lightColor
-}
+}