@codeleap/styles 5.5.1 → 5.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.5.1",
+  "version": "5.5.4",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "5.5.1",
+    "@codeleap/config": "5.5.4",
     "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.4",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/lib/createTheme.ts

@@ -71,7 +71,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,10 +1,9 @@
 import { AppTheme, ColorMap, IAppVariants, ITheme, Theme } from '../types'
-import { map, atom, computed } from 'nanostores'
+import { map, computed, atom } from 'nanostores'
 
 export type ThemeState = {
   theme: AppTheme<Theme> | null
   colorScheme: string | null
-  variants: IAppVariants
 }
 
 class ThemeStore {
@@ -89,9 +88,7 @@ export const themeStore = new ThemeStore()
 export const themeStoreComputed = computed([
   themeStore['themeStore'], 
   themeStore['colorSchemeStore'], 
-  themeStore['variantsStore']
-], (theme, colorScheme, variants) => ({
+], (theme, colorScheme) => ({
   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
-}
+}