@bettercms-ai/kit 0.1.0

package/src/theme/build/resolveColorTokens.ts

@@ -0,0 +1,268 @@
+import {COLOR_HUES, ColorHueKey} from '../../color/index.mjs'
+
+import {
+  ColorConfigCardTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigStateTone,
+  ThemeColorAvatarTokens,
+  ThemeColorBadgeTokens,
+  ThemeColorBaseTokens,
+  ThemeColorButtonTokens,
+  ThemeColorInputStateTokens,
+  ThemeColorInputTokens,
+  ThemeColorStatesTokens,
+  ThemeColorStateTokens,
+  ThemeColorTokens,
+} from '../config'
+import {defaultColorTokens} from '../defaults/colorTokens'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  ThemeColorButtonModeKey,
+  ThemeColorCardToneKey,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+} from '../system'
+import {merge} from './merge'
+
+/**
+ * Convert a tree of color tokens from a sparse format to a dense format.
+ */
+export function resolveColorTokens(inputTokens?: ThemeColorTokens): ThemeColorTokens {
+  const tokens = merge(defaultColorTokens, inputTokens)
+
+  return {
+    base: resolveBaseColorTokens(tokens),
+    button: resolveButtonColorTokens(tokens),
+    input: resolveInputColorTokens(tokens),
+    selectable: resolveSelectableColorTokens(tokens),
+    syntax: tokens.syntax,
+  }
+}
+
+function resolveBaseColorTokens(sparseTokens: ThemeColorTokens) {
+  const tokens: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>> = {}
+
+  // base tones
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    tokens[tone] = resolveBaseColorTones(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveBaseColorTones(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorCardToneKey,
+): ThemeColorBaseTokens {
+  const spec = merge(inputTokens?.base?.['*'], inputTokens?.base?.[tone])
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue || 'gray'
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}
+
+function resolveButtonColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> {
+  const tokens: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> = {}
+
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveButtonToneColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTokens {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone)
+  }
+
+  return tokens
+}
+
+function resolveButtonModeColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+  tone: ThemeColorStateToneKey,
+): ThemeColorStatesTokens {
+  const tokens: ThemeColorStatesTokens = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state)
+  }
+
+  return tokens
+}
+
+function resolveButtonStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+  mode: ThemeColorButtonModeKey,
+  state: ThemeColorStateKey,
+): ThemeColorStateTokens {
+  const spec = merge(
+    inputTokens?.button?.[mode]?.['*']?.['*'],
+    inputTokens?.button?.[mode]?.[tone]?.['*'],
+    inputTokens?.button?.[mode]?.['*']?.[state],
+    inputTokens?.button?.[mode]?.[tone]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}
+
+function resolveInputColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> {
+  const tokens: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> = {}
+
+  for (const mode of THEME_COLOR_INPUT_MODES) {
+    tokens[mode] = resolveInputModeColorTokens(inputTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveInputModeColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+): ThemeColorInputTokens {
+  const states: ThemeColorInputTokens = {}
+
+  for (const state of THEME_COLOR_INPUT_STATES) {
+    states[state] = resolveInputStateColorTokens(inputTokens, mode, state)
+  }
+
+  return states
+}
+
+function resolveInputStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+  state: ColorConfigInputState,
+): ThemeColorInputStateTokens {
+  const spec = merge(
+    inputTokens?.input?.['*']?.['*'],
+    inputTokens?.input?.[mode]?.['*'],
+    inputTokens?.input?.['*']?.[state],
+    inputTokens?.input?.[mode]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.input?.[mode]?._hue
+
+  return {...spec, _hue: hue}
+}
+
+function resolveSelectableColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>> {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveSelectableToneColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+): {_hue?: ColorHueKey} & ThemeColorStatesTokens {
+  const states: {_hue?: ColorHueKey} & ThemeColorStatesTokens = {
+    _hue: inputTokens?.selectable?.[tone]?._hue || inputTokens?.base?.[tone]?._hue,
+  }
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state)
+  }
+
+  return states
+}
+
+function resolveSelectableStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+  state: ThemeColorStateKey,
+) {
+  const spec = merge(
+    inputTokens?.selectable?.['*']?.['*'],
+    inputTokens?.selectable?.[tone]?.['*'],
+    inputTokens?.selectable?.['*']?.[state],
+    inputTokens?.selectable?.[tone]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}

package/src/theme/build/theme.test.ts

@@ -0,0 +1,27 @@
+import {buildTheme} from './buildTheme'
+import {getContrastRatio} from './lib/color-fns'
+
+const AA_MIN = 4.5
+
+it('should have sufficient contrast', () => {
+  const base = buildTheme().v2!.color.light.default
+  const selectable = base.selectable.default
+
+  const contrasts = {
+    base: {
+      fg: getContrastRatio(base.bg, base.fg),
+    },
+    selectable: {
+      enabled: {
+        fg: getContrastRatio(selectable.enabled.bg, selectable.enabled.fg),
+        muted: {
+          fg: getContrastRatio(selectable.enabled.bg, selectable.enabled.muted.fg),
+        },
+      },
+    },
+  }
+
+  expect(contrasts.base.fg).toBeGreaterThan(AA_MIN)
+  expect(contrasts.selectable.enabled.fg).toBeGreaterThan(AA_MIN)
+  expect(contrasts.selectable.enabled.muted.fg).toBeGreaterThan(AA_MIN)
+})

package/src/theme/config/helpers.ts

@@ -0,0 +1,55 @@
+import {
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_CARD_KEYS,
+  COLOR_CONFIG_CARD_TONES,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  ColorConfigBlendKey,
+  ColorConfigCardKey,
+  ColorConfigCardTone,
+  ColorConfigOpacityValue,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+  ColorConfigValue,
+} from './system'
+import {parseTokenValue} from './tokens'
+
+/** @internal */
+export function isColorConfigBaseTone(str: string): str is ColorConfigCardTone {
+  return COLOR_CONFIG_CARD_TONES.includes(str as ColorConfigCardTone)
+}
+
+/** @internal */
+export function isColorConfigBaseKey(str: string): str is ColorConfigCardKey {
+  return COLOR_CONFIG_CARD_KEYS.includes(str as ColorConfigCardKey)
+}
+
+/** @internal */
+export function isColorConfigStateKey(str: string): str is ColorConfigStateKey {
+  return COLOR_CONFIG_STATE_KEYS.includes(str as ColorConfigStateKey)
+}
+
+/** @internal */
+export function isColorConfigStateTone(str: string): str is ColorConfigStateTone {
+  return COLOR_CONFIG_STATE_TONES.includes(str as ColorConfigStateTone)
+}
+
+/** @internal */
+export function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str as ColorConfigBlendKey)
+}
+
+/** @internal */
+export function isColorTokenValue(str: string): str is ColorConfigValue {
+  return parseTokenValue(str)?.type === 'color' || parseTokenValue(str)?.type === 'hue'
+}
+
+/** @internal */
+export function isColorValue(str: string): str is 'black' | 'white' {
+  return str === 'black' || str === 'white'
+}
+
+/** @internal */
+export function isColorOpacityValue(str: string): str is ColorConfigOpacityValue {
+  return str === '0' || /^0\.[0-9]+$/.test(str) || str === '1'
+}

package/src/theme/config/index.ts

@@ -0,0 +1,4 @@
+export * from './helpers'
+export * from './system'
+export * from './tokens'
+export * from './types'

package/src/theme/config/system.ts

@@ -0,0 +1,115 @@
+import {ColorHueKey, ColorTintKey} from '../../color/index.mjs'
+
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  ThemeColorBlendModeKey,
+} from '../system'
+
+/** @public */
+export const COLOR_CONFIG_STATE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'accent/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+  'status/dot',
+  'status/icon',
+] as const
+
+/** @public */
+export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+/** @public */
+export const COLOR_CONFIG_CARD_KEYS = [
+  ...COLOR_CONFIG_STATE_KEYS,
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+] as const
+
+/** @public */
+export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
+
+/** @public */
+export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
+
+/** @public */
+export type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+
+/** @public */
+export type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+export type ColorConfigValue =
+  | `black`
+  | `white`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueKey}`
+  | `${ColorHueKey} ${number}%`
+  | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey} ${number}%`
+  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${ColorTintKey}`
+  | `${ColorTintKey} ${number}%`
+  | `${ColorTintKey}/${ColorConfigOpacityValue}`
+
+/** @public */
+export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
+/** @public */
+export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
+
+/** @public */
+export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
+
+/** @public */
+export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
+
+/** @public */
+export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
+
+/** @public */
+export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
+
+/** @public */
+export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
+
+/** @public */
+export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+/** @public */
+export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
+
+/** @public */
+export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
+
+/** @public */
+export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
+
+/** @public */
+export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
+
+/** @public */
+export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
+
+/** @public */
+export type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]

package/src/theme/config/tokens/color/index.ts

@@ -0,0 +1 @@
+export * from './types'

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

@@ -0,0 +1,133 @@
+import {ColorHueKey} from '../../../../color/index.mjs'
+
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey, ThemeColorSyntax} from '../../../system'
+import {
+  ColorBlendModeTokenValue,
+  ColorConfigCardTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigState,
+  ColorConfigStateTone,
+  ThemeColorTokenValue,
+} from '../../system'
+
+/** @public */
+export interface ThemeColorAvatarHueTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+}
+
+/** @public */
+export interface ThemeColorAvatarTokens {
+  '*'?: ThemeColorAvatarHueTokens
+  'gray'?: ThemeColorAvatarHueTokens
+  'blue'?: ThemeColorAvatarHueTokens
+  'purple'?: ThemeColorAvatarHueTokens
+  'magenta'?: ThemeColorAvatarHueTokens
+  'red'?: ThemeColorAvatarHueTokens
+  'orange'?: ThemeColorAvatarHueTokens
+  'yellow'?: ThemeColorAvatarHueTokens
+  'green'?: ThemeColorAvatarHueTokens
+  'cyan'?: ThemeColorAvatarHueTokens
+}
+
+/** @public */
+export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
+  focusRing?: ThemeColorTokenValue
+  backdrop?: ThemeColorTokenValue
+  shadow?: {
+    outline?: ThemeColorTokenValue
+    umbra?: ThemeColorTokenValue
+    penumbra?: ThemeColorTokenValue
+    ambient?: ThemeColorTokenValue
+  }
+}
+
+/** @public */
+export interface ThemeColorBadgeToneTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+}
+
+/** @public */
+export type ThemeColorBadgeTokens = Partial<
+  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
+>
+
+/** @public */
+export interface ThemeColorStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  accent?: {
+    fg?: ThemeColorTokenValue
+  }
+  avatar?: ThemeColorAvatarTokens
+  badge?: ThemeColorBadgeTokens
+  bg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  code?: {
+    bg?: ThemeColorTokenValue
+    fg?: ThemeColorTokenValue
+  }
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+  kbd?: {
+    bg?: ThemeColorTokenValue
+    fg?: ThemeColorTokenValue
+    border?: ThemeColorTokenValue
+  }
+  link?: {
+    fg?: ThemeColorTokenValue
+  }
+  muted?: {
+    bg?: ThemeColorTokenValue
+    fg?: ThemeColorTokenValue
+  }
+  skeleton?: {
+    from?: ThemeColorTokenValue
+    to?: ThemeColorTokenValue
+  }
+}
+
+/** @public */
+export type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>
+
+/** @public */
+export interface ThemeColorButtonTokens
+  extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
+  _hue?: ColorHueKey
+}
+
+/** @public */
+export interface ThemeColorInputStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  muted?: {
+    bg?: ThemeColorTokenValue
+  }
+  placeholder?: ThemeColorTokenValue
+}
+
+/** @public */
+export interface ThemeColorInputTokens
+  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
+  _hue?: ColorHueKey
+}
+
+/** @public */
+export interface ThemeColorTokens {
+  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
+  button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
+  input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
+  selectable?: Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>>
+  syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
+}

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

@@ -0,0 +1,4 @@
+export * from './color'
+export * from './parseTokenKey'
+export * from './parseTokenValue'
+export * from './types'

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

@@ -0,0 +1,64 @@
+import {parseTokenKey} from './parseTokenKey'
+
+test('parse token key', () => {
+  expect(parseTokenKey('*/_blend')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: '_blend',
+  })
+
+  expect(parseTokenKey('*/_hue')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: '_hue',
+  })
+
+  expect(parseTokenKey('primary/_hue')).toEqual({
+    type: 'base',
+    tone: 'primary',
+    key: '_hue',
+  })
+
+  expect(parseTokenKey('*/bg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'bg',
+  })
+
+  expect(parseTokenKey('*/focusRing')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'focusRing',
+  })
+
+  expect(parseTokenKey('*/muted/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'muted/fg',
+  })
+
+  expect(parseTokenKey('*/link/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'link/fg',
+  })
+
+  expect(parseTokenKey('*/code/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'code/fg',
+  })
+
+  expect(parseTokenKey('default/_blend')).toEqual({
+    type: 'base',
+    tone: 'default',
+    key: '_blend',
+  })
+
+  expect(parseTokenKey('button/*/default/_blend')).toEqual({
+    type: 'button',
+    tone: '*',
+    mode: 'default',
+    key: '_blend',
+  })
+})