@bettercms-ai/kit 0.1.0

package/src/theme/defaults/config.ts

@@ -0,0 +1,84 @@
+import {RootTheme_v2} from '../system'
+
+const BORDER_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
+  _version: 2,
+  avatar: {
+    sizes: [
+      {distance: -4, size: 19},
+      {distance: -4, size: 25},
+      {distance: -8, size: 33},
+      {distance: -12, size: 49},
+    ],
+    focusRing: {offset: 1, width: 1},
+  },
+  button: {
+    textWeight: 'medium',
+    border: {width: BORDER_WIDTH},
+    focusRing: {offset: -1, width: 1},
+  },
+  card: {
+    border: {width: BORDER_WIDTH},
+    focusRing: {offset: -1, width: 1},
+    shadow: {outline: OUTLINE_WIDTH},
+  },
+  container: [320, 640, 960, 1280, 1600, 1920],
+  media: [360, 600, 900, 1200, 1800, 2400],
+  layer: {
+    dialog: {zOffset: 600},
+    popover: {zOffset: 400},
+    tooltip: {zOffset: 200},
+  },
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  shadow: [
+    null,
+    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
+    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
+    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
+    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
+  ],
+  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
+  input: {
+    border: {
+      width: BORDER_WIDTH,
+    },
+    checkbox: {
+      size: 17,
+      focusRing: {offset: -1, width: 1},
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {offset: -1, width: 1},
+    },
+    switch: {
+      width: 25,
+      height: 17,
+      padding: 5,
+      transitionDurationMs: 150,
+      transitionTimingFunction: 'ease-out',
+      focusRing: {offset: 1, width: 1},
+    },
+    select: {
+      focusRing: {offset: -1, width: 1},
+    },
+    text: {
+      focusRing: {offset: -1, width: 1},
+    },
+  },
+  style: {
+    button: {
+      root: {
+        transition: 'background-color 100ms,border-color 100ms,color 100ms',
+      },
+    },
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  },
+}

package/src/theme/defaults/fonts.ts

@@ -0,0 +1,227 @@
+import {ThemeFonts} from '../system'
+
+export const defaultThemeFonts: ThemeFonts = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  heading: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+      },
+    ],
+  },
+  text: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+      },
+    ],
+  },
+}

package/src/theme/getScopedTheme.ts

@@ -0,0 +1,98 @@
+import {defineLazyProperty} from './build/lib/lazy'
+import {defaultThemeConfig} from './defaults/config'
+import {
+  RootTheme,
+  RootTheme_v2,
+  Theme,
+  ThemeColor,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+} from './system'
+import {is_v2, v0_v2, v2_v0} from './versioning'
+import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
+
+// cache[scheme][tone][rootTheme] = theme
+const cache = new Map<
+  ThemeColorSchemeKey,
+  Map<ThemeColorCardToneKey, WeakMap<RootTheme | RootTheme_v2, Theme>>
+>()
+
+/** @internal */
+export function getScopedTheme(
+  themeProp: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+): Theme {
+  const cachedTheme = _getCachedTheme(themeProp, scheme, tone)
+
+  if (cachedTheme) return cachedTheme
+
+  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
+  const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
+
+  const layer_v0 = v0.layer || defaultThemeConfig.layer
+
+  const colorScheme_v2 = v2.color[scheme] || v2.color.light
+  const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
+  const color_v2_9 = themeColor_v0_v2_9(color_v2)
+  const layer_v2 = v2.layer || defaultThemeConfig.layer
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {color: _v0Color, ...v0Rest} = v0
+
+  const bcms = {
+    ...v0Rest,
+    layer: layer_v0,
+    v2: {
+      ...v2,
+      _resolved: true,
+      color: color_v2_9,
+      layer: layer_v2,
+    },
+  } as Theme['bcms']
+
+  // Defer v0 color computation — only resolved if legacy code reads theme.bcms.color
+  defineLazyProperty(bcms, 'color', () => {
+    const colorScheme_v0 = v0.color[scheme] || v0.color.light
+    return (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
+  })
+
+  const theme: Theme = {bcms}
+
+  _setCachedTheme(themeProp, scheme, tone, theme)
+
+  return theme
+}
+
+function _getCachedTheme(
+  rootTheme: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+) {
+  const schemeCache = cache.get(scheme)
+
+  if (!schemeCache) return undefined
+
+  const toneCache = schemeCache.get(tone)
+
+  if (!toneCache) return undefined
+
+  return toneCache.get(rootTheme)
+}
+
+function _setCachedTheme(
+  rootTheme: RootTheme | RootTheme_v2,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorCardToneKey,
+  theme: Theme,
+) {
+  if (!cache.has(scheme)) cache.set(scheme, new Map())
+
+  const schemeCache = cache.get(scheme)!
+
+  if (!schemeCache.has(tone)) schemeCache.set(tone, new WeakMap())
+
+  const toneCache = schemeCache.get(tone)!
+
+  toneCache.set(rootTheme, theme)
+}

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './build'
+export * from './config'
+export * from './getScopedTheme'
+export * from './system'
+export * from './versioning'

package/src/theme/system/avatar.ts

@@ -0,0 +1,14 @@
+import {ThemeFocusRing} from './focusRing'
+
+/**
+ * @public
+ */
+export interface ThemeAvatar_v2 {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}

package/src/theme/system/color/_constants.ts

@@ -0,0 +1,45 @@
+import {COLOR_HUES} from '../../../color/index.mjs'
+
+/** @public */
+export const THEME_COLOR_SCHEMES = ['light', 'dark'] as const
+
+/** @public */
+export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
+
+/** @public */
+export const THEME_COLOR_CARD_TONES = [
+  'transparent',
+  'default',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATE_TONES = [
+  'default',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
+
+/** @public */
+export const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
+
+/** @public */
+export const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const
+
+/** @public */
+export const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const
+
+/** @public */
+export const THEME_COLOR_AVATAR_COLORS = COLOR_HUES

package/src/theme/system/color/_helpers.ts

@@ -0,0 +1,24 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '../../../color/index.mjs'
+
+import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
+
+/** @internal */
+export function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey {
+  return THEME_COLOR_BLEND_MODES.includes(str as ThemeColorBlendModeKey)
+}
+
+/** @internal */
+export function isColorHueKey(str: string): str is ColorHueKey {
+  return COLOR_HUES.includes(str as ColorHueKey)
+}
+
+/** @internal */
+export function isColorTintKey(str: string): str is ColorTintKey {
+  return COLOR_TINTS.includes(str as ColorTintKey)
+}
+
+/** @internal */
+export function isColorButtonMode(str: string): str is ThemeColorButtonModeKey {
+  return THEME_COLOR_BUTTON_MODES.includes(str as ThemeColorButtonModeKey)
+}

package/src/theme/system/color/_system.ts

@@ -0,0 +1,40 @@
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+} from './_constants'
+
+/**
+ * @public
+ */
+export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
+
+/** @public */
+export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/** @public */
+export type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
+
+/** @public */
+export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/** @public */
+export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+/** @public */
+export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/** @public */
+export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/** @public */
+export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/** @public */
+export type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]

package/src/theme/system/color/avatar.ts

@@ -0,0 +1,15 @@
+import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorAvatarHue_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+}
+
+/**
+ * @public
+ */
+export type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

package/src/theme/system/color/badge.ts

@@ -0,0 +1,16 @@
+import {ThemeColorStateToneKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+/**
+ * @public
+ */
+export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

package/src/theme/system/color/button.ts

@@ -0,0 +1,17 @@
+import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
+import {ThemeColorState_v2} from './state'
+
+/**
+ * @public
+ */
+export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

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

@@ -0,0 +1,34 @@
+import {ThemeColorBlendModeKey, ThemeColorCardToneKey, ThemeColorSchemeKey} from './_system'
+import {ThemeColorButton_v2} from './button'
+import {ThemeColorInput_v2} from './input'
+import {ThemeColorSelectable_v2} from './selectable'
+import {ThemeColorShadow} from './shadow'
+import {ThemeColorState_v2} from './state'
+import {ThemeColorSyntax} from './syntax'
+
+/**
+ * @public
+ */
+export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
+  /** @internal */
+  _blend: ThemeColorBlendModeKey
+  _dark: boolean
+
+  backdrop: string
+  button: ThemeColorButton_v2
+  focusRing: string
+  input: ThemeColorInput_v2
+  selectable: ThemeColorSelectable_v2
+  shadow: ThemeColorShadow
+  syntax: ThemeColorSyntax
+}
+
+/**
+ * @public
+ */
+export type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>

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

@@ -0,0 +1,13 @@
+export * from './_constants'
+export * from './_helpers'
+export * from './_system'
+export * from './avatar'
+export * from './badge'
+export * from './button'
+export * from './color'
+export * from './input'
+export * from './kbd'
+export * from './selectable'
+export * from './shadow'
+export * from './state'
+export * from './syntax'

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

@@ -0,0 +1,25 @@
+import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorInputState_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  border: string
+  fg: string
+  muted: {
+    bg: string
+  }
+  placeholder: string
+}
+
+/**
+ * @public
+ */
+export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

package/src/theme/system/color/kbd.ts

@@ -0,0 +1,8 @@
+/**
+ * @public
+ */
+export interface ThemeColorKBD {
+  bg: string
+  fg: string
+  border: string
+}

package/src/theme/system/color/selectable.ts

@@ -0,0 +1,12 @@
+import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
+import {ThemeColorState_v2} from './state'
+
+/**
+ * @public
+ */
+export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

package/src/theme/system/color/shadow.ts

@@ -0,0 +1,7 @@
+/** @public */
+export interface ThemeColorShadow {
+  outline: string
+  umbra: string
+  penumbra: string
+  ambient: string
+}