@bettercms-ai/kit 0.1.0

package/src/theme/config/tokens/parseTokenKey.ts

@@ -0,0 +1,67 @@
+import {isColorButtonMode} from '../../system'
+import {
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+} from '../helpers'
+import {TokenKeyNode} from './types'
+
+/** @internal */
+export function parseTokenKey(str: string): TokenKeyNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join('/')
+
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+  }
+
+  if (segment0 === 'button') {
+    const segment1 = segments.shift() || ''
+
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || ''
+
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join('/')
+
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+      }
+    }
+  }
+
+  return undefined
+}

package/src/theme/config/tokens/parseTokenValue.test.ts

@@ -0,0 +1,42 @@
+import {parseTokenValue} from './parseTokenValue'
+
+test('parse color value', () => {
+  expect(parseTokenValue('cyan')).toEqual({
+    type: 'hue',
+    value: 'cyan',
+  })
+
+  expect(parseTokenValue('50')).toEqual({
+    type: 'color',
+    tint: '50',
+  })
+
+  expect(parseTokenValue('50 50%')).toEqual({
+    type: 'color',
+    tint: '50',
+    mix: 0.5,
+  })
+
+  expect(parseTokenValue('cyan/500')).toEqual({
+    type: 'color',
+    hue: 'cyan',
+    tint: '500',
+  })
+
+  expect(parseTokenValue('cyan/500 50%')).toEqual({
+    type: 'color',
+    hue: 'cyan',
+    mix: 0.5,
+    tint: '500',
+  })
+
+  expect(parseTokenValue('screen')).toEqual({
+    type: 'blendMode',
+    value: 'screen',
+  })
+
+  expect(parseTokenValue('multiply')).toEqual({
+    type: 'blendMode',
+    value: 'multiply',
+  })
+})

package/src/theme/config/tokens/parseTokenValue.ts

@@ -0,0 +1,133 @@
+import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
+import {isColorOpacityValue, isColorValue} from '../helpers'
+import {TokenValueNode} from './types'
+
+function isColorMixPercentValue(str: string): str is `${number}%` {
+  return /^\d+%$/.test(str)
+}
+
+/** @internal */
+export function parseTokenValue(str: string): TokenValueNode | undefined {
+  const segments = str.split('/')
+
+  let nextSegment = segments.shift() || ''
+
+  const [segment0, segment0mix] = nextSegment.split(' ')
+
+  if (isColorTintKey(segment0)) {
+    const tint = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix = Number(segment0mix.slice(0, -1)) / 100
+
+      return {
+        type: 'color',
+        tint,
+        mix,
+      }
+    }
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        tint,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      tint,
+    }
+  }
+
+  if (isColorValue(segment0)) {
+    const key = segment0 as 'black' | 'white'
+    const segment1 = segments.shift() || ''
+
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix = Number(segment0mix.slice(0, -1)) / 100
+
+      return {
+        type: 'color',
+        key,
+        mix,
+      }
+    }
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        key,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      key,
+    }
+  }
+
+  if (isColorHueKey(segment0)) {
+    const hue = segment0
+
+    nextSegment = segments.shift() || ''
+
+    const [segment1, segment1mix] = nextSegment.split(' ')
+
+    if (isColorTintKey(segment1)) {
+      const tint = segment1
+      const segment2 = segments.shift() || ''
+
+      if (isColorMixPercentValue(segment1mix)) {
+        const mix = Number(segment1mix.slice(0, -1)) / 100
+
+        return {
+          type: 'color',
+          hue,
+          tint,
+          mix,
+        }
+      }
+
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2)
+
+        return {
+          type: 'color',
+          hue,
+          tint,
+          opacity,
+        }
+      }
+
+      return {
+        type: 'color',
+        hue,
+        tint,
+      }
+    }
+
+    return {
+      type: 'hue',
+      value: hue,
+    }
+  }
+
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0
+
+    return {
+      type: 'blendMode',
+      value,
+    }
+  }
+
+  return undefined
+}

package/src/theme/config/tokens/types.ts

@@ -0,0 +1,53 @@
+import {ColorHueKey, ColorTintKey} from '../../../color/index.mjs'
+
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+import {
+  ColorConfigBlendKey,
+  ColorConfigCardKey,
+  ColorConfigCardTone,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+} from '../system'
+
+/** @internal */
+export interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigCardTone
+  key: ColorConfigCardKey | ColorConfigBlendKey
+}
+
+/** @internal */
+export interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ThemeColorButtonModeKey
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+/** @internal */
+export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+/** @internal */
+export interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white'
+  hue?: ColorHueKey
+  mix?: number
+  opacity?: number
+  tint?: ColorTintKey
+}
+
+/** @internal */
+export interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueKey
+}
+
+/** @internal */
+export interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ThemeColorBlendModeKey
+}
+
+/** @internal */
+export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode

package/src/theme/config/types.ts

@@ -0,0 +1,46 @@
+import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '../../color/index.mjs'
+
+import {
+  ThemeAvatar_v2,
+  ThemeFocusRing,
+  ThemeFonts,
+  ThemeFontWeightKey,
+  ThemeInput_v2,
+  ThemeLayer,
+  ThemeShadow,
+  ThemeStyles,
+} from '../system'
+import {ThemeColorTokens} from './tokens'
+
+/** @public */
+export type ThemeColorPalette = {
+  black: string | ColorPaletteValue
+  white: string | ColorPaletteValue
+} & Record<ColorHueKey, Record<ColorTintKey, string | ColorPaletteValue>>
+
+/** @public */
+export interface ThemeConfig {
+  avatar?: ThemeAvatar_v2
+  button?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color?: ThemeColorTokens
+  container?: number[]
+  font?: ThemeFonts
+  input?: ThemeInput_v2
+  layer?: ThemeLayer
+  media?: number[]
+  palette?: ThemeColorPalette
+  radius?: number[]
+  shadow?: Array<ThemeShadow | null>
+  space?: number[]
+  /** @internal */
+  style?: ThemeStyles
+}

package/src/theme/defaults/colorPalette.ts

@@ -0,0 +1,5 @@
+import {color} from '../../color/index.mjs'
+
+import {ThemeColorPalette} from '../config'
+
+export const defaultColorPalette: ThemeColorPalette = color