@bettercms-ai/kit 0.1.0

package/src/theme/system/v0/color/solid.ts

@@ -0,0 +1,26 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
+ */
+export interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
+export interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}

package/src/theme/system/v0/color/spot.ts

@@ -0,0 +1,13 @@
+import {ThemeColorAvatarColorKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatarColorKey` instead
+ */
+export type ThemeColorSpotKey = ThemeColorAvatarColorKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatar_v2` instead
+ */
+export type ThemeColorSpot = Record<ThemeColorSpotKey, string>

package/src/theme/system/v0/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar'
+export * from './color'
+export * from './input'

package/src/theme/system/v0/input.ts

@@ -0,0 +1,23 @@
+/**
+ * @public
+ * @deprecated Use `ThemeInput_v2` instead
+ */
+export interface ThemeInput {
+  checkbox: {
+    size: number
+  }
+  radio: {
+    size: number
+    markSize: number
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+  }
+  border: {
+    width: number
+  }
+}

package/src/theme/versioning/getTheme_v2.ts

@@ -0,0 +1,57 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {Theme, Theme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<Theme, Theme_v2>()
+
+/** @public */
+export function getTheme_v2(theme: Theme): Theme_v2 {
+  if (theme.bcms.v2?._resolved) return theme.bcms.v2
+
+  const cached_v2 = cache.get(theme)
+
+  if (cached_v2) return cached_v2
+
+  const v2: Theme_v2 = {
+    _version: 2,
+    _resolved: true,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.bcms.avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...theme.bcms.button,
+    },
+    card: defaultThemeConfig.card,
+    color: themeColor_v0_v2(theme.bcms.color),
+    container: theme.bcms.container,
+    font: theme.bcms.fonts,
+    input: {
+      ...defaultThemeConfig.input,
+      ...theme.bcms.input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...theme.bcms.input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...theme.bcms.input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...theme.bcms.input.switch,
+      },
+    },
+    layer: theme.bcms.layer ?? defaultThemeConfig.layer,
+    media: theme.bcms.media,
+    radius: theme.bcms.radius,
+    shadow: theme.bcms.shadows,
+    space: theme.bcms.space,
+    style: theme.bcms.styles,
+  }
+
+  cache.set(theme, v2)
+
+  return v2
+}

package/src/theme/versioning/index.ts

@@ -0,0 +1,5 @@
+export * from './getTheme_v2'
+export * from './is_v0'
+export * from './is_v2'
+export * from './v0_v2'
+export * from './v2_v0'

package/src/theme/versioning/is_v0.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {
+  return themeProp._version === 0
+}

package/src/theme/versioning/is_v2.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {
+  return themeProp._version === 2
+}

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -0,0 +1,243 @@
+import {
+  ThemeColor,
+  ThemeColorCard_v2,
+  ThemeColorGenericState,
+  ThemeColorInputMode_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+  ThemeColorInputStates,
+  ThemeColorMuted,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+} from '../system'
+
+const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
+
+/** @internal */
+export function themeColor_v0_v2(color_v0: ThemeColor): ThemeColorCard_v2 {
+  const cached_v2 = cache.get(color_v0)
+
+  if (cached_v2) return cached_v2
+
+  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled)
+
+  const color_v2: ThemeColorCard_v2 = {
+    _blend: color_v0._blend || (color_v0.dark ? 'screen' : 'multiply'),
+    _dark: color_v0.dark,
+    accent: base.accent,
+    avatar: base.avatar,
+    backdrop: color_v0.base.shadow.ambient,
+    badge: base.badge,
+    bg: color_v0.base.bg,
+    border: color_v0.base.border,
+    button: {
+      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
+      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
+      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed),
+    },
+    code: base.code,
+    fg: color_v0.base.fg,
+    focusRing: color_v0.base.focusRing,
+    icon: base.muted.fg,
+    input: {
+      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
+      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid),
+    },
+    kbd: base.kbd,
+    link: base.link,
+    muted: {
+      ...base.muted,
+      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg,
+    },
+    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
+    shadow: color_v0.base.shadow,
+    skeleton: {
+      from: color_v0.skeleton?.from || color_v0.base.border,
+      to: color_v0.skeleton?.to || color_v0.base.border,
+    },
+    syntax: color_v0.syntax,
+  }
+
+  cache.set(color_v0, color_v2)
+
+  return color_v2
+}
+
+function stateTonesThemeColor_v0_v2(
+  v0: ThemeColor,
+  t: Omit<ThemeColorMuted, 'transparent'>,
+): ThemeColorSelectable_v2 {
+  return {
+    default: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
+    neutral: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
+    primary: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
+    },
+    suggest: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
+    },
+    positive: {
+      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled),
+    },
+    caution: {
+      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled),
+    },
+    critical: {
+      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),
+    },
+  }
+}
+
+function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): ThemeColorState_v2 {
+  return {
+    ...state,
+    avatar: {
+      gray: {
+        bg: v0.spot.gray,
+        fg: v0.base.bg,
+      },
+      blue: {
+        bg: v0.spot.blue,
+        fg: v0.base.bg,
+      },
+      purple: {
+        bg: v0.spot.purple,
+        fg: v0.base.bg,
+      },
+      magenta: {
+        bg: v0.spot.magenta,
+        fg: v0.base.bg,
+      },
+      red: {
+        bg: v0.spot.red,
+        fg: v0.base.bg,
+      },
+      orange: {
+        bg: v0.spot.orange,
+        fg: v0.base.bg,
+      },
+      yellow: {
+        bg: v0.spot.yellow,
+        fg: v0.base.bg,
+      },
+      green: {
+        bg: v0.spot.green,
+        fg: v0.base.bg,
+      },
+      cyan: {
+        bg: v0.spot.cyan,
+        fg: v0.base.bg,
+      },
+    },
+    badge: {
+      default: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg,
+      },
+      neutral: {
+        bg: v0.muted.transparent.enabled.bg,
+        fg: v0.muted.transparent.enabled.fg,
+        dot: v0.muted.transparent.enabled.muted.fg,
+        icon: v0.muted.transparent.enabled.muted.fg,
+      },
+      primary: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg,
+      },
+      suggest: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg,
+      },
+      positive: {
+        bg: v0.muted.positive.enabled.bg,
+        fg: v0.muted.positive.enabled.fg,
+        dot: v0.muted.positive.enabled.muted.fg,
+        icon: v0.muted.positive.enabled.muted.fg,
+      },
+      caution: {
+        bg: v0.muted.caution.enabled.bg,
+        fg: v0.muted.caution.enabled.fg,
+        dot: v0.muted.caution.enabled.muted.fg,
+        icon: v0.muted.caution.enabled.muted.fg,
+      },
+      critical: {
+        bg: v0.muted.critical.enabled.bg,
+        fg: v0.muted.critical.enabled.fg,
+        dot: v0.muted.critical.enabled.muted.fg,
+        icon: v0.muted.critical.enabled.muted.fg,
+      },
+    },
+    kbd: {
+      bg: v0.muted.default.enabled.bg,
+      fg: v0.muted.default.enabled.fg,
+      border: v0.muted.default.enabled.border,
+    },
+    muted: {
+      ...v0.muted.default.enabled.muted,
+      bg: state.bg2 || state.bg,
+    },
+    skeleton: {
+      from: state.skeleton?.from || state.border,
+      to: state.skeleton?.to || state.border,
+    },
+  }
+}
+
+function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputMode_v2 {
+  return {
+    enabled: inputStateThemeColor_v0_v2(states.enabled),
+    disabled: inputStateThemeColor_v0_v2(states.disabled),
+    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
+    hovered: inputStateThemeColor_v0_v2(states.hovered),
+  }
+}
+
+function inputStateThemeColor_v0_v2(state: ThemeColorInputState): ThemeColorInputState_v2 {
+  return {
+    bg: state.bg,
+    border: state.border,
+    fg: state.fg,
+    muted: {
+      bg: state.bg2,
+    },
+    placeholder: state.placeholder,
+  }
+}

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -0,0 +1,49 @@
+import type {ThemeColorCard_v2} from '../system'
+
+/**
+ * Apply `neutral` and `suggest` if they're not already part of the color object,
+ * as this was introduced in v2.9, but is not compatible with v2.0.
+ *
+ * @param color - The color object to upgrade
+ * @returns The upgraded color object. Returns as-is if already upgraded.
+ * @internal
+ */
+export function themeColor_v0_v2_9(color: ThemeColorCard_v2): ThemeColorCard_v2 {
+  if ('neutral' in color.badge) {
+    return color // Already at >= v2.9
+  }
+
+  // TypeScript narrows to `never` because the above should always be true
+  const colors = color as ThemeColorCard_v2
+
+  return {
+    ...colors,
+    badge: {
+      ...colors.badge,
+      neutral: colors.badge.default,
+      suggest: colors.badge.primary,
+    },
+    button: {
+      bleed: {
+        ...colors.button.bleed,
+        neutral: colors.button.bleed.default,
+        suggest: colors.button.bleed.primary,
+      },
+      default: {
+        ...colors.button.default,
+        neutral: colors.button.default.default,
+        suggest: colors.button.default.primary,
+      },
+      ghost: {
+        ...colors.button.ghost,
+        neutral: colors.button.ghost.default,
+        suggest: colors.button.ghost.primary,
+      },
+    },
+    selectable: {
+      ...colors.selectable,
+      neutral: colors.selectable.default,
+      suggest: colors.selectable.primary,
+    },
+  }
+}

package/src/theme/versioning/v0_v2.ts

@@ -0,0 +1,94 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {RootTheme, RootTheme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<RootTheme, RootTheme_v2>()
+
+/** @internal */
+export function v0_v2(v0: RootTheme): RootTheme_v2 {
+  if (v0.v2) return v0.v2
+
+  const cached_v2 = cache.get(v0)
+
+  if (cached_v2) return cached_v2
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusRing: _unused_focusRing,
+    fonts: font,
+    input,
+    layer,
+    media,
+    radius,
+    shadows: shadow,
+    space,
+    styles: style,
+  } = v0
+
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...button,
+    },
+    card: defaultThemeConfig.card,
+    color: {
+      light: {
+        transparent: themeColor_v0_v2(color.light.transparent),
+        default: themeColor_v0_v2(color.light.default),
+        neutral: themeColor_v0_v2(color.light.transparent),
+        primary: themeColor_v0_v2(color.light.primary),
+        suggest: themeColor_v0_v2(color.light.primary),
+        positive: themeColor_v0_v2(color.light.positive),
+        caution: themeColor_v0_v2(color.light.caution),
+        critical: themeColor_v0_v2(color.light.critical),
+      },
+      dark: {
+        transparent: themeColor_v0_v2(color.dark.transparent),
+        default: themeColor_v0_v2(color.dark.default),
+        neutral: themeColor_v0_v2(color.dark.transparent),
+        primary: themeColor_v0_v2(color.dark.primary),
+        suggest: themeColor_v0_v2(color.dark.primary),
+        positive: themeColor_v0_v2(color.dark.positive),
+        caution: themeColor_v0_v2(color.dark.caution),
+        critical: themeColor_v0_v2(color.dark.critical),
+      },
+    },
+    container,
+    font,
+    input: {
+      ...defaultThemeConfig.input,
+      ...input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...input.switch,
+      },
+    },
+    layer: layer ?? defaultThemeConfig.layer,
+    media,
+    radius,
+    shadow,
+    space,
+    style,
+  }
+
+  cache.set(v0, v2)
+
+  return v2
+}

package/src/theme/versioning/v2_v0.ts

@@ -0,0 +1,135 @@
+import {defineLazyProperty} from '../build/lib/lazy'
+import {
+  RootTheme,
+  RootTheme_v2,
+  ThemeColor,
+  ThemeColorCard_v2,
+  ThemeColorInputMode_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+  ThemeColorInputStates,
+  ThemeColorScheme,
+} from '../system'
+
+const cache = new WeakMap<RootTheme_v2, RootTheme>()
+
+const V0_TONES = ['transparent', 'default', 'primary', 'positive', 'caution', 'critical'] as const
+
+function lazyV0Scheme(schemeKey: 'light' | 'dark', color: RootTheme_v2['color']): ThemeColorScheme {
+  const scheme = {} as ThemeColorScheme
+
+  for (const tone of V0_TONES) {
+    defineLazyProperty(scheme, tone, () => themeColor_v2_v0(color[schemeKey][tone]))
+  }
+
+  return scheme
+}
+
+/** @internal */
+export function v2_v0(v2: RootTheme_v2): RootTheme {
+  const cachedTheme = cache.get(v2)
+
+  if (cachedTheme) return cachedTheme
+
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    font: fonts,
+    input,
+    media,
+    radius,
+    shadow: shadows,
+    space,
+    style: styles,
+  } = v2
+
+  // Lazy v0 color — two-level lazy structure so we don't force-evaluate
+  // the v2 lazy getters until a v0 tone is actually accessed.
+  const v0Color = {} as RootTheme['color']
+
+  defineLazyProperty(v0Color, 'light', () => lazyV0Scheme('light', color))
+  defineLazyProperty(v0Color, 'dark', () => lazyV0Scheme('dark', color))
+
+  const theme: RootTheme = {
+    _version: 0,
+    avatar,
+    button,
+    container,
+    color: v0Color,
+    focusRing: input.text.focusRing,
+    fonts,
+    input,
+    media,
+    radius,
+    shadows,
+    space,
+    styles,
+
+    v2,
+  }
+
+  cache.set(v2, theme)
+
+  return theme
+}
+
+function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
+  return {
+    base: {
+      bg: color_v2.bg,
+      fg: color_v2.fg,
+      border: color_v2.border,
+      focusRing: color_v2.focusRing,
+      shadow: color_v2.shadow,
+    },
+    button: color_v2.button,
+    card: color_v2.selectable.default,
+    dark: color_v2._dark,
+    input: {
+      default: inputStatesThemeColor_v2_v0(color_v2.input.default),
+      invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid),
+    },
+    muted: {
+      ...color_v2.button.ghost,
+      transparent: color_v2.button.ghost.default,
+    },
+    solid: {
+      ...color_v2.button.default,
+      transparent: color_v2.button.default.default,
+    },
+    selectable: color_v2.selectable,
+    spot: {
+      gray: color_v2.avatar.gray.bg,
+      blue: color_v2.avatar.blue.bg,
+      purple: color_v2.avatar.purple.bg,
+      magenta: color_v2.avatar.magenta.bg,
+      red: color_v2.avatar.red.bg,
+      orange: color_v2.avatar.orange.bg,
+      yellow: color_v2.avatar.yellow.bg,
+      green: color_v2.avatar.green.bg,
+      cyan: color_v2.avatar.cyan.bg,
+    },
+    syntax: color_v2.syntax,
+  }
+}
+
+function inputStatesThemeColor_v2_v0(t: ThemeColorInputMode_v2): ThemeColorInputStates {
+  return {
+    enabled: inputStateThemeColor_v2_v0(t.enabled),
+    disabled: inputStateThemeColor_v2_v0(t.disabled),
+    readOnly: inputStateThemeColor_v2_v0(t.readOnly),
+    hovered: inputStateThemeColor_v2_v0(t.hovered),
+  }
+}
+
+function inputStateThemeColor_v2_v0(t: ThemeColorInputState_v2): ThemeColorInputState {
+  return {
+    bg: t.bg,
+    bg2: t.muted.bg,
+    border: t.border,
+    fg: t.fg,
+    placeholder: t.placeholder,
+  }
+}