@hanzogui/theme-builder 2.0.0

package/src/defaultComponentThemes.ts

@@ -0,0 +1,26 @@
+import type { SimpleThemesDefinition } from './createThemes'
+
+/**
+ * @deprecated component themes are no longer recommended - configure component styles directly via themes or component defaultProps instead
+ */
+export const defaultComponentThemes = {
+  ListItem: { template: 'surface1' },
+  SelectItem: { template: 'surface1' },
+  SelectTrigger: { template: 'surface1' },
+  Card: { template: 'surface1' },
+  Button: { template: 'surface3' },
+  Checkbox: { template: 'surface2' },
+  Switch: { template: 'surface2' },
+  SwitchThumb: { template: 'inverse' },
+  TooltipContent: { template: 'surface2' },
+  Progress: { template: 'surface1' },
+  RadioGroupItem: { template: 'surface2' },
+  TooltipArrow: { template: 'surface1' },
+  SliderTrackActive: { template: 'surface2' },
+  SliderTrack: { template: 'inverse' },
+  SliderThumb: { template: 'inverse' },
+  Tooltip: { template: 'inverse' },
+  ProgressIndicator: { template: 'inverse' },
+  Input: { template: 'surface1' },
+  TextArea: { template: 'surface1' },
+} satisfies SimpleThemesDefinition

package/src/defaultTemplates.ts

@@ -0,0 +1,157 @@
+import { objectFromEntries, objectKeys } from './helpers'
+import type { BuildTemplates } from './types'
+
+const getTemplates = () => {
+  const lightTemplates = getBaseTemplates('light')
+  const darkTemplates = getBaseTemplates('dark')
+  const templates = {
+    ...objectFromEntries(
+      objectKeys(lightTemplates).map(
+        (name) => [`light_${name}`, lightTemplates[name]] as const
+      )
+    ),
+    ...objectFromEntries(
+      objectKeys(darkTemplates).map(
+        (name) => [`dark_${name}`, darkTemplates[name]] as const
+      )
+    ),
+  }
+  return templates as Record<keyof typeof templates, typeof lightTemplates.base>
+}
+
+const getBaseTemplates = (scheme: 'dark' | 'light') => {
+  const isLight = scheme === 'light'
+
+  // our palettes have 4 things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const bgIndex = 6
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+  // always +1 because palette is structured with higher indices = more contrast from background
+  const increaseContrast = 1
+  const borderColor = bgIndex + 3
+
+  const baseColors = {
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
+  }
+
+  // templates use the palette and specify index
+  // negative goes backwards from end so -1 is the last item
+  const base = {
+    accentBackground: 0,
+    accentColor: -0,
+
+    background0: 1,
+    background02: 2,
+    background04: 3,
+    background06: 4,
+    background08: 5,
+    color1: bgIndex,
+    color2: bgIndex + 1,
+    color3: bgIndex + 2,
+    color4: bgIndex + 3,
+    color5: bgIndex + 4,
+    color6: bgIndex + 5,
+    color7: bgIndex + 6,
+    color8: bgIndex + 7,
+    color9: bgIndex + 8,
+    color10: bgIndex + 9,
+    color11: bgIndex + 10,
+    color12: bgIndex + 11,
+    color0: -1,
+    color02: -2,
+    color04: -3,
+    color06: -4,
+    color08: -5,
+    // the background, color, etc keys here work like generics - they make it so you
+    // can publish components for others to use without mandating a specific color scale
+    // the @hanzogui/button Button component looks for `$background`, so you set the
+    // dark_red_Button theme to have a stronger background than the dark_red theme.
+    background: bgIndex,
+    backgroundHover: bgIndex + increaseContrast * 2,
+    backgroundPress: bgIndex + increaseContrast * 3,
+    backgroundFocus: bgIndex + increaseContrast * 2,
+    borderColor,
+    borderColorHover: borderColor + lighten,
+    borderColorPress: borderColor + darken,
+    borderColorFocus: borderColor,
+    ...baseColors,
+    colorTransparent: -1,
+  }
+
+  const surface1 = {
+    ...baseColors,
+    background: base.background + 1,
+    backgroundHover: base.backgroundHover + 1,
+    backgroundPress: base.backgroundPress + 1,
+    backgroundFocus: base.backgroundFocus + 1,
+    backgroundActive: base.background + 1,
+    borderColor: base.borderColor + 1,
+    borderColorHover: base.borderColorHover + 1,
+    borderColorFocus: base.borderColorFocus + 1,
+    borderColorPress: base.borderColorPress + 1,
+  }
+
+  const surface2 = {
+    ...baseColors,
+    background: base.background + 2,
+    backgroundHover: base.backgroundHover + 2,
+    backgroundPress: base.backgroundPress + 2,
+    backgroundFocus: base.backgroundFocus + 2,
+    backgroundActive: base.background + 2,
+    borderColor: base.borderColor + 2,
+    borderColorHover: base.borderColorHover + 2,
+    borderColorFocus: base.borderColorFocus + 2,
+    borderColorPress: base.borderColorPress + 2,
+  }
+
+  const surface3 = {
+    ...baseColors,
+    background: base.background + 3,
+    backgroundHover: base.backgroundHover + 3,
+    backgroundPress: base.backgroundPress + 3,
+    backgroundFocus: base.backgroundFocus + 3,
+    backgroundActive: base.background + 3,
+    borderColor: base.borderColor + 3,
+    borderColorHover: base.borderColorHover + 3,
+    borderColorFocus: base.borderColorFocus + 3,
+    borderColorPress: base.borderColorPress + 3,
+  }
+
+  const alt1 = {
+    color: base.color - 1,
+    colorHover: base.colorHover - 1,
+    colorPress: base.colorPress - 1,
+    colorFocus: base.colorFocus - 1,
+  }
+
+  const alt2 = {
+    color: base.color - 2,
+    colorHover: base.colorHover - 2,
+    colorPress: base.colorPress - 2,
+    colorFocus: base.colorFocus - 2,
+  }
+
+  const inverse = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    alt1,
+    alt2,
+    inverse,
+  } satisfies BuildTemplates
+}
+
+export const defaultTemplates = getTemplates()

package/src/defaultTemplatesStronger.ts

@@ -0,0 +1,152 @@
+import { objectFromEntries, objectKeys } from './helpers'
+import type { BuildTemplates } from './types'
+
+const getTemplates = () => {
+  const lightTemplates = getBaseTemplates('light')
+  const darkTemplates = getBaseTemplates('dark')
+  const templates = {
+    ...objectFromEntries(
+      objectKeys(lightTemplates).map(
+        (name) => [`light_${name}`, lightTemplates[name]] as const
+      )
+    ),
+    ...objectFromEntries(
+      objectKeys(darkTemplates).map(
+        (name) => [`dark_${name}`, darkTemplates[name]] as const
+      )
+    ),
+  }
+  return templates as Record<keyof typeof templates, typeof lightTemplates.base>
+}
+
+const getBaseTemplates = (scheme: 'dark' | 'light') => {
+  const isLight = scheme === 'light'
+
+  // our palettes have 4 things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const bgIndex = 6
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+  const borderColor = bgIndex + 3
+
+  const baseColors = {
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
+  }
+
+  // templates use the palette and specify index
+  // negative goes backwards from end so -1 is the last item
+  const base = {
+    accentBackground: 0,
+    accentColor: -0,
+
+    background0: 1,
+    background02: 2,
+    background04: 3,
+    background06: 4,
+    background08: 5,
+    color1: bgIndex,
+    color2: bgIndex + 1,
+    color3: bgIndex + 2,
+    color4: bgIndex + 3,
+    color5: bgIndex + 4,
+    color6: bgIndex + 5,
+    color7: bgIndex + 6,
+    color8: bgIndex + 7,
+    color9: bgIndex + 8,
+    color10: bgIndex + 9,
+    color11: bgIndex + 10,
+    color12: bgIndex + 11,
+    color0: -1,
+    color02: -2,
+    color04: -3,
+    color06: -4,
+    color08: -5,
+    // the background, color, etc keys here work like generics - they make it so you
+    // can publish components for others to use without mandating a specific color scale
+    // the @hanzogui/button Button component looks for `$background`, so you set the
+    // dark_red_Button theme to have a stronger background than the dark_red theme.
+    background: bgIndex,
+    backgroundHover: bgIndex + lighten, // always lighten on hover no matter the scheme
+    backgroundPress: bgIndex + darken, // always darken on press no matter the theme
+    backgroundFocus: bgIndex + darken,
+    borderColor,
+    borderColorHover: borderColor + lighten,
+    borderColorPress: borderColor + darken,
+    borderColorFocus: borderColor,
+    ...baseColors,
+    colorTransparent: -1,
+  }
+
+  const surface1 = {
+    ...baseColors,
+    background: base.background + 2,
+    backgroundHover: base.backgroundHover + 2,
+    backgroundPress: base.backgroundPress + 2,
+    backgroundFocus: base.backgroundFocus + 2,
+    borderColor: base.borderColor + 2,
+    borderColorHover: base.borderColorHover + 2,
+    borderColorFocus: base.borderColorFocus + 2,
+    borderColorPress: base.borderColorPress + 2,
+  }
+
+  const surface2 = {
+    ...baseColors,
+    background: base.background + 3,
+    backgroundHover: base.backgroundHover + 3,
+    backgroundPress: base.backgroundPress + 3,
+    backgroundFocus: base.backgroundFocus + 3,
+    borderColor: base.borderColor + 3,
+    borderColorHover: base.borderColorHover + 3,
+    borderColorFocus: base.borderColorFocus + 3,
+    borderColorPress: base.borderColorPress + 3,
+  }
+
+  const surface3 = {
+    ...baseColors,
+    background: base.background + 4,
+    backgroundHover: base.backgroundHover + 4,
+    backgroundPress: base.backgroundPress + 4,
+    backgroundFocus: base.backgroundFocus + 4,
+    borderColor: base.borderColor + 4,
+    borderColorHover: base.borderColorHover + 4,
+    borderColorFocus: base.borderColorFocus + 4,
+    borderColorPress: base.borderColorPress + 4,
+  }
+
+  const alt1 = {
+    color: base.color - 1,
+    colorHover: base.colorHover - 1,
+    colorPress: base.colorPress - 1,
+    colorFocus: base.colorFocus - 1,
+  }
+
+  const alt2 = {
+    color: base.color - 2,
+    colorHover: base.colorHover - 2,
+    colorPress: base.colorPress - 2,
+    colorFocus: base.colorFocus - 2,
+  }
+
+  const inverse = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    alt1,
+    alt2,
+    inverse,
+  } satisfies BuildTemplates
+}
+
+export const defaultTemplatesStronger = getTemplates()

package/src/defaultTemplatesStrongest.ts

@@ -0,0 +1,152 @@
+import { objectFromEntries, objectKeys } from './helpers'
+import type { BuildTemplates } from './types'
+
+const getTemplates = () => {
+  const lightTemplates = getBaseTemplates('light')
+  const darkTemplates = getBaseTemplates('dark')
+  const templates = {
+    ...objectFromEntries(
+      objectKeys(lightTemplates).map(
+        (name) => [`light_${name}`, lightTemplates[name]] as const
+      )
+    ),
+    ...objectFromEntries(
+      objectKeys(darkTemplates).map(
+        (name) => [`dark_${name}`, darkTemplates[name]] as const
+      )
+    ),
+  }
+  return templates as Record<keyof typeof templates, typeof lightTemplates.base>
+}
+
+const getBaseTemplates = (scheme: 'dark' | 'light') => {
+  const isLight = scheme === 'light'
+
+  // our palettes have 4 things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const bgIndex = 6
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+  const borderColor = bgIndex + 3
+
+  const baseColors = {
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
+  }
+
+  // templates use the palette and specify index
+  // negative goes backwards from end so -1 is the last item
+  const base = {
+    accentBackground: 0,
+    accentColor: -0,
+
+    background0: 1,
+    background02: 2,
+    background04: 3,
+    background06: 4,
+    background08: 5,
+    color1: bgIndex,
+    color2: bgIndex + 1,
+    color3: bgIndex + 2,
+    color4: bgIndex + 3,
+    color5: bgIndex + 4,
+    color6: bgIndex + 5,
+    color7: bgIndex + 6,
+    color8: bgIndex + 7,
+    color9: bgIndex + 8,
+    color10: bgIndex + 9,
+    color11: bgIndex + 10,
+    color12: bgIndex + 11,
+    color0: -1,
+    color02: -2,
+    color04: -3,
+    color06: -4,
+    color08: -5,
+    // the background, color, etc keys here work like generics - they make it so you
+    // can publish components for others to use without mandating a specific color scale
+    // the @hanzogui/button Button component looks for `$background`, so you set the
+    // dark_red_Button theme to have a stronger background than the dark_red theme.
+    background: bgIndex,
+    backgroundHover: bgIndex + lighten, // always lighten on hover no matter the scheme
+    backgroundPress: bgIndex + darken, // always darken on press no matter the theme
+    backgroundFocus: bgIndex + darken,
+    borderColor,
+    borderColorHover: borderColor + lighten,
+    borderColorPress: borderColor + darken,
+    borderColorFocus: borderColor,
+    ...baseColors,
+    colorTransparent: -1,
+  }
+
+  const surface1 = {
+    ...baseColors,
+    background: base.background + 3,
+    backgroundHover: base.backgroundHover + 3,
+    backgroundPress: base.backgroundPress + 3,
+    backgroundFocus: base.backgroundFocus + 3,
+    borderColor: base.borderColor + 3,
+    borderColorHover: base.borderColorHover + 3,
+    borderColorFocus: base.borderColorFocus + 3,
+    borderColorPress: base.borderColorPress + 3,
+  }
+
+  const surface2 = {
+    ...baseColors,
+    background: base.background + 4,
+    backgroundHover: base.backgroundHover + 4,
+    backgroundPress: base.backgroundPress + 4,
+    backgroundFocus: base.backgroundFocus + 4,
+    borderColor: base.borderColor + 4,
+    borderColorHover: base.borderColorHover + 4,
+    borderColorFocus: base.borderColorFocus + 4,
+    borderColorPress: base.borderColorPress + 4,
+  }
+
+  const surface3 = {
+    ...baseColors,
+    background: base.background + 5,
+    backgroundHover: base.backgroundHover + 5,
+    backgroundPress: base.backgroundPress + 5,
+    backgroundFocus: base.backgroundFocus + 5,
+    borderColor: base.borderColor + 5,
+    borderColorHover: base.borderColorHover + 5,
+    borderColorFocus: base.borderColorFocus + 5,
+    borderColorPress: base.borderColorPress + 5,
+  }
+
+  const alt1 = {
+    color: base.color - 1,
+    colorHover: base.colorHover - 1,
+    colorPress: base.colorPress - 1,
+    colorFocus: base.colorFocus - 1,
+  }
+
+  const alt2 = {
+    color: base.color - 2,
+    colorHover: base.colorHover - 2,
+    colorPress: base.colorPress - 2,
+    colorFocus: base.colorFocus - 2,
+  }
+
+  const inverse = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    alt1,
+    alt2,
+    inverse,
+  } satisfies BuildTemplates
+}
+
+export const defaultTemplatesStrongest = getTemplates()

package/src/getThemeSuitePalettes.ts

@@ -0,0 +1,101 @@
+import { hsla, parseToHsla } from 'color2k'
+import type { BuildPalette } from './types'
+
+/**
+ * palette generally is:
+ *
+ * [constrastBackground, accent, backgroundTransparent, ...background, ...foreground, foregroundTransparent, accentForeground]
+ */
+
+const paletteSize = 12
+
+// how many things come before the actual bg color (transparencies etc)
+// 👋 SYNC WITH gui.hanzo.ai/features/studio/constants
+export const PALETTE_BACKGROUND_OFFSET = 6
+
+const generateColorPalette = ({
+  palette: buildPalette,
+  scheme,
+}: {
+  palette: BuildPalette
+  scheme: 'light' | 'dark'
+}) => {
+  if (!buildPalette) {
+    return [] as string[]
+  }
+
+  const { anchors } = buildPalette
+
+  let palette: string[] = []
+
+  const add = (h: number, s: number, l: number, a?: number) => {
+    palette.push(hsla(h, s, l, a ?? 1))
+  }
+
+  const numAnchors = Object.keys(anchors).length
+
+  for (const [anchorIndex, anchor] of anchors.entries()) {
+    const [h, s, l, a] = [
+      anchor.hue[scheme],
+      anchor.sat[scheme],
+      anchor.lum[scheme],
+      anchor.alpha?.[scheme] ?? 1,
+    ]
+
+    if (anchorIndex !== 0) {
+      const lastAnchor = anchors[anchorIndex - 1]
+      const steps = anchor.index - lastAnchor.index
+
+      const lastHue = lastAnchor.hue[scheme]
+      const lastSat = lastAnchor.sat[scheme]
+      const lastLum = lastAnchor.lum[scheme]
+
+      const stepHue = (lastHue - h) / steps
+      const stepSat = (lastSat - s) / steps
+      const stepLum = (lastLum - l) / steps
+
+      // backfill:
+      for (let step = lastAnchor.index + 1; step < anchor.index; step++) {
+        const str = anchor.index - step
+        add(h + stepHue * str, s + stepSat * str, l + stepLum * str)
+      }
+    }
+
+    add(h, s, l, a)
+
+    const isLastAnchor = anchorIndex === numAnchors - 1
+    if (isLastAnchor && palette.length < paletteSize) {
+      // forwardfill:
+      for (let step = anchor.index + 1; step < paletteSize; step++) {
+        add(h, s, l)
+      }
+    }
+  }
+
+  // add transparent values
+  const background = palette[0]
+  const foreground = palette[palette.length - 1]
+
+  const transparentValues = [background, foreground].map((color) => {
+    const [h, s, l] = parseToHsla(color)
+    // fully transparent to partially
+    return [
+      hsla(h, s, l, 0),
+      hsla(h, s, l, 0.2),
+      hsla(h, s, l, 0.4),
+      hsla(h, s, l, 0.6),
+      hsla(h, s, l, 0.8),
+    ] as const
+  })
+  const reverseForeground = [...transparentValues[1]].reverse()
+  palette = [...transparentValues[0], ...palette, ...reverseForeground]
+
+  return palette
+}
+
+export function getThemeSuitePalettes(palette: BuildPalette) {
+  return {
+    light: generateColorPalette({ palette, scheme: 'light' }),
+    dark: generateColorPalette({ palette, scheme: 'dark' }),
+  }
+}

package/src/helpers.ts

@@ -0,0 +1,44 @@
+type ObjectType = Record<PropertyKey, unknown>
+
+type PickByValue<OBJ_T, VALUE_T> = // From https://stackoverflow.com/a/55153000
+  Pick<OBJ_T, { [K in keyof OBJ_T]: OBJ_T[K] extends VALUE_T ? K : never }[keyof OBJ_T]>
+
+type ObjectEntries<OBJ_T> = // From https://stackoverflow.com/a/60142095
+  { [K in keyof OBJ_T]: [keyof PickByValue<OBJ_T, OBJ_T[K]>, OBJ_T[K]] }[keyof OBJ_T][]
+
+export const objectKeys = <O extends object>(obj: O) => Object.keys(obj) as Array<keyof O>
+
+export function objectEntries<OBJ_T extends ObjectType>(
+  obj: OBJ_T
+): ObjectEntries<OBJ_T> {
+  return Object.entries(obj) as ObjectEntries<OBJ_T>
+}
+
+type EntriesType =
+  | [PropertyKey, unknown][]
+  | ReadonlyArray<readonly [PropertyKey, unknown]>
+
+// Existing Utils
+type DeepWritable<OBJ_T> = { -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]> }
+type UnionToIntersection<UNION_T> = // From https://stackoverflow.com/a/50375286
+  (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void
+    ? I
+    : never
+
+// New Utils
+type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> =
+  DeepWritable<ARR_T> extends (infer R)[]
+    ? R extends [infer key, infer val]
+      ? { [prop in key & PropertyKey]: val }
+      : never
+    : never
+type MergeIntersectingObjects<ObjT> = { [key in keyof ObjT]: ObjT[key] }
+type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<
+  UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>
+>
+
+export function objectFromEntries<ARR_T extends EntriesType>(
+  arr: ARR_T
+): EntriesToObject<ARR_T> {
+  return Object.fromEntries(arr) as EntriesToObject<ARR_T>
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export * from './ThemeBuilder'
+export * from '@hanzogui/create-theme'
+
+export { createStudioThemes } from './createStudioThemes'
+export {
+  createThemes,
+  createV4Themes,
+  createPalettes,
+  createV4ThemeBuilder,
+  type CreateThemesProps,
+} from './createThemes'
+
+export { defaultTemplates } from './defaultTemplates'
+/** @deprecated component themes are no longer recommended */
+export { defaultComponentThemes } from './defaultComponentThemes'
+
+export { PALETTE_BACKGROUND_OFFSET, getThemeSuitePalettes } from './getThemeSuitePalettes'
+
+// copied from themes to avoid cyclic dep
+export { masks } from './masks'
+
+export type * from './types'