@hanzogui/themes 2.0.0

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.tsx

@@ -0,0 +1,8 @@
+export * from './themes'
+export * from './tokens'
+export * from './componentThemeDefinitions'
+export * from './palettes'
+export * from '@hanzogui/colors/legacy'
+export * from './templates'
+export * from './shadows'
+export * from '@hanzogui/theme-builder'

package/src/opacify.ts

@@ -0,0 +1,125 @@
+/**
+ * Interpolate between two colors
+ * @param color1 - First color (hex or hsl)
+ * @param color2 - Second color (hex or hsl)
+ * @param amount - 0 = color1, 1 = color2, 0.5 = middle
+ */
+export function interpolateColor(color1: string, color2: string, amount: number): string {
+  const rgb1 = parseToRgb(color1)
+  const rgb2 = parseToRgb(color2)
+  if (!rgb1 || !rgb2) return color1
+
+  const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * amount)
+  const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * amount)
+  const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * amount)
+
+  return `rgb(${r}, ${g}, ${b})`
+}
+
+function parseToRgb(color: string): { r: number; g: number; b: number } | null {
+  if (typeof color !== 'string') return null
+
+  // Handle hex
+  if (color.startsWith('#')) {
+    let hex = color.slice(1)
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+    if (hex.length >= 6) {
+      return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+      }
+    }
+  }
+
+  // Handle rgb/rgba
+  if (color.startsWith('rgb')) {
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+    if (match) {
+      return {
+        r: Number.parseInt(match[1], 10),
+        g: Number.parseInt(match[2], 10),
+        b: Number.parseInt(match[3], 10),
+      }
+    }
+  }
+
+  // Handle hsl/hsla
+  if (color.startsWith('hsl')) {
+    const match = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/)
+    if (match) {
+      const h = Number.parseInt(match[1], 10)
+      const s = Number.parseInt(match[2], 10) / 100
+      const l = Number.parseInt(match[3], 10) / 100
+      return hslToRgb(h, s, l)
+    }
+  }
+
+  return null
+}
+
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  let r: number
+  let g: number
+  let b: number
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1
+      if (t > 1) t -= 1
+      if (t < 1 / 6) return p + (q - p) * 6 * t
+      if (t < 1 / 2) return q
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h / 360 + 1 / 3)
+    g = hue2rgb(p, q, h / 360)
+    b = hue2rgb(p, q, h / 360 - 1 / 3)
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
+}
+
+export function opacify(color: string, opacity = 0.1): string {
+  // Handle dynamic color objects (from $theme-dark/$theme-light)
+  if (typeof color !== 'string') return color
+
+  // handle hsl/hsla
+  if (color.startsWith('hsl')) {
+    const match = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/)
+    if (match) {
+      const [, h, s, l] = match
+      return `hsla(${h}, ${s}%, ${l}%, ${opacity})`
+    }
+  }
+
+  // handle hex
+  if (color.startsWith('#')) {
+    let hex = color.slice(1)
+
+    // expand shorthand hex
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+
+    // set alpha channel to specified opacity
+    if (hex.length === 6 || hex.length === 8) {
+      const alphaHex = Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, '0')
+      return `#${hex.slice(0, 6)}${alphaHex}`
+    }
+  }
+
+  return color
+}

package/src/palettes.tsx

@@ -0,0 +1,91 @@
+import { objectFromEntries, objectKeys } from './helpers'
+import { colorTokens } from './tokens'
+
+export const palettes = (() => {
+  const lightTransparent = 'rgba(255,255,255,0)'
+  const darkTransparent = 'rgba(10,10,10,0)'
+
+  const transparent = (hsl: string, opacity = 0) =>
+    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
+
+  const getColorPalette = (colors: object, color = colors[0]): string[] => {
+    const colorPalette = Object.values(colors)
+
+    // were re-ordering these
+    const [head, tail] = [
+      colorPalette.slice(0, 6),
+      colorPalette.slice(colorPalette.length - 5),
+    ]
+
+    // add our transparent colors first/last
+    // and make sure the last (foreground) color is white/black rather than colorful
+    // this is mostly for consistency with the older theme-base
+    return [
+      transparent(colorPalette[0]),
+      ...head,
+      ...tail,
+      color,
+      transparent(colorPalette[colorPalette.length - 1]),
+    ]
+  }
+
+  const lightColor = 'hsl(0, 0%, 9.0%)'
+  const lightPalette = [
+    lightTransparent,
+    '#fff',
+    '#f8f8f8',
+    'hsl(0, 0%, 96.3%)',
+    'hsl(0, 0%, 94.1%)',
+    'hsl(0, 0%, 92.0%)',
+    'hsl(0, 0%, 90.0%)',
+    'hsl(0, 0%, 88.5%)',
+    'hsl(0, 0%, 81.0%)',
+    'hsl(0, 0%, 56.1%)',
+    'hsl(0, 0%, 50.3%)',
+    'hsl(0, 0%, 42.5%)',
+    lightColor,
+    darkTransparent,
+  ]
+
+  const darkColor = '#fff'
+  const darkPalette = [
+    darkTransparent,
+    '#050505',
+    '#151515',
+    '#191919',
+    '#232323',
+    '#282828',
+    '#323232',
+    '#424242',
+    '#494949',
+    '#545454',
+    '#626262',
+    '#a5a5a5',
+    darkColor,
+    lightTransparent,
+  ]
+
+  const lightPalettes = objectFromEntries(
+    objectKeys(colorTokens.light).map(
+      (key) =>
+        [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)] as const
+    )
+  )
+
+  const darkPalettes = objectFromEntries(
+    objectKeys(colorTokens.dark).map(
+      (key) => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)] as const
+    )
+  )
+
+  const colorPalettes = {
+    ...lightPalettes,
+    ...darkPalettes,
+  }
+
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+    ...colorPalettes,
+  }
+})()

package/src/shadows.tsx

@@ -0,0 +1,19 @@
+const lightShadowColor = 'rgba(0,0,0,0.04)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.085)'
+const darkShadowColor = 'rgba(0,0,0,0.2)'
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+
+export const shadows = {
+  light: {
+    shadowColor: lightShadowColorStrong,
+    shadowColorHover: lightShadowColorStrong,
+    shadowColorPress: lightShadowColor,
+    shadowColorFocus: lightShadowColor,
+  },
+  dark: {
+    shadowColor: darkShadowColorStrong,
+    shadowColorHover: darkShadowColorStrong,
+    shadowColorPress: darkShadowColor,
+    shadowColorFocus: darkShadowColor,
+  },
+}

package/src/subtleChildrenThemes.ts

@@ -0,0 +1,54 @@
+import {
+  type PaletteAdjustments,
+  defaultChildrenThemes,
+  adjustPalettes,
+} from './v5-themes'
+
+export const v5SubtlePaletteAdjustments: PaletteAdjustments<
+  typeof defaultChildrenThemes
+> = {
+  default: {
+    light: (hsl) => ({
+      ...hsl,
+      s: hsl.s * 0.9,
+    }),
+    dark: (hsl, i) => ({
+      ...hsl,
+      s: hsl.s * (i <= 4 ? 0.7 : 0.9),
+    }),
+  },
+  // yellow palette in radix is especially off from the rest
+  yellow: {
+    light: (hsl, i) => {
+      // progressively darken and desaturate toward text colors for better contrast
+      // i=1 is lightest bg, i=12 is darkest text
+      const t = (i - 1) / 11 // 0 to 1
+
+      // saturation: starts at sStart, ends at sEnd
+      const sStart = 0.65
+      const sEnd = 0.4
+
+      // lightness: starts at lStart, ends at lEnd
+      const lStart = 1.08
+      const lEnd = 0.8
+
+      return {
+        ...hsl,
+        s: hsl.s * (sStart + t * (sEnd - sStart)),
+        l: hsl.l * (lStart + t * (lEnd - lStart)),
+      }
+    },
+
+    dark: (hsl, i) => ({
+      ...hsl,
+      s: hsl.s * (i <= 7 ? 0.45 : 0.55),
+      l: hsl.l * (i <= 4 ? 0.8 : 1),
+    }),
+  },
+}
+
+export const subtleChildrenThemes = adjustPalettes(defaultChildrenThemes, {
+  ...v5SubtlePaletteAdjustments,
+  gray: undefined, // skip
+  neutral: undefined, // skip
+})

package/src/templates.tsx

@@ -0,0 +1,104 @@
+import type { MaskOptions } from '@hanzogui/create-theme'
+
+import { palettes } from './palettes'
+
+const templateColorsSpecific = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12,
+}
+
+// templates use the palette and specify index
+// negative goes backwards from end so -1 is the last item
+const template = {
+  ...templateColorsSpecific,
+  // 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: 2,
+  backgroundHover: 3,
+  backgroundPress: 4,
+  backgroundFocus: 5,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 5,
+  borderColorHover: 6,
+  borderColorFocus: 4,
+  borderColorPress: 5,
+  placeholderColor: -4,
+}
+
+export const templates = {
+  base: template,
+  colorLight: {
+    ...template,
+    // light color themes are a bit less sensitive
+    borderColor: 4,
+    borderColorHover: 5,
+    borderColorFocus: 4,
+    borderColorPress: 4,
+  },
+}
+
+const shadows = {
+  shadowColor: 0,
+  shadowColorHover: 0,
+  shadowColorPress: 0,
+  shadowColorFocus: 0,
+}
+
+const colors = {
+  ...shadows,
+  color: 0,
+  colorHover: 0,
+  colorFocus: 0,
+  colorPress: 0,
+}
+
+const baseMaskOptions: MaskOptions = {
+  override: shadows,
+  skip: shadows,
+  // avoids the transparent ends
+  max: palettes.light.length - 2,
+  min: 1,
+}
+
+const skipShadowsAndSpecificColors = {
+  ...shadows,
+  ...templateColorsSpecific,
+}
+
+export const maskOptions = {
+  component: {
+    ...baseMaskOptions,
+    override: colors,
+    skip: skipShadowsAndSpecificColors,
+  },
+  alt: {
+    ...baseMaskOptions,
+  },
+  button: {
+    ...baseMaskOptions,
+    override: {
+      ...colors,
+      borderColor: 'transparent',
+      borderColorHover: 'transparent',
+    },
+    skip: skipShadowsAndSpecificColors,
+  },
+} satisfies Record<string, MaskOptions>

package/src/themes-new.ts

@@ -0,0 +1,74 @@
+import { createThemeBuilder } from '@hanzogui/theme-builder'
+import { componentThemeDefinitions } from './componentThemeDefinitions'
+import { masks } from '@hanzogui/theme-builder'
+import { palettes } from './palettes'
+import { shadows } from './shadows'
+import { maskOptions, templates } from './templates'
+import { darkColors, lightColors } from './tokens'
+
+const colorThemeDefinition = (colorName: string) => [
+  {
+    parent: 'light',
+    palette: colorName,
+    template: 'colorLight',
+  },
+  {
+    parent: 'dark',
+    palette: colorName,
+    template: 'base',
+  },
+]
+
+const themesBuilder = createThemeBuilder()
+  .addPalettes(palettes)
+  .addTemplates(templates)
+  .addMasks(masks)
+  .addThemes({
+    light: {
+      template: 'base',
+      palette: 'light',
+      nonInheritedValues: {
+        ...lightColors,
+        ...shadows.light,
+      },
+    },
+    dark: {
+      template: 'base',
+      palette: 'dark',
+      nonInheritedValues: {
+        ...darkColors,
+        ...shadows.dark,
+      },
+    },
+  })
+  .addChildThemes({
+    orange: colorThemeDefinition('orange'),
+    yellow: colorThemeDefinition('yellow'),
+    green: colorThemeDefinition('green'),
+    blue: colorThemeDefinition('blue'),
+    purple: colorThemeDefinition('purple'),
+    pink: colorThemeDefinition('pink'),
+    red: colorThemeDefinition('red'),
+  })
+  .addChildThemes({
+    alt1: {
+      mask: 'soften',
+      ...maskOptions.alt,
+    },
+    alt2: {
+      mask: 'soften2',
+      ...maskOptions.alt,
+    },
+    active: {
+      mask: 'soften3',
+      skip: {
+        color: 1,
+      },
+    },
+  })
+  .addChildThemes(componentThemeDefinitions, {
+    // to save bundle size but make alt themes not work on components
+    // avoidNestingWithin: ['alt1', 'alt2'],
+  })
+
+export const themes = themesBuilder.build()