@hanzogui/themes 2.0.0

package/src/v5-templates.ts

@@ -0,0 +1,126 @@
+import { PALETTE_BACKGROUND_OFFSET, type BuildTemplates } from '@hanzogui/theme-builder'
+
+const objectFromEntries = <const T extends readonly (readonly [string, any])[]>(
+  entries: T
+): { [K in T[number] as K[0]]: K[1] } => {
+  return Object.fromEntries(entries) as any
+}
+
+const objectKeys = <O extends object>(obj: O): (keyof O)[] => {
+  return Object.keys(obj) as (keyof O)[]
+}
+
+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 PALETTE_BACKGROUND_OFFSET things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+
+  // base
+  const background = PALETTE_BACKGROUND_OFFSET
+  const borderColor = background + 2
+  const color = -background
+
+  // helper for surface themes - they need their own hover/press/focus calculations
+  // because those need to be relative to their elevated background, not base
+  const makeSurface = (offset: number, colorOffset = 0) => {
+    const clr = color - colorOffset
+    const bg = background + offset
+    const brdr = borderColor + offset
+
+    return {
+      color: clr,
+      colorHover: clr + (isLight ? 0 : lighten),
+      colorPress: clr,
+      colorFocus: clr + darken,
+
+      background: bg,
+      // hover lightens always
+      backgroundHover: bg + lighten,
+      // press darkens always
+      backgroundPress: bg + darken,
+      // focus: lightens in dark mode, darkens in light
+      backgroundFocus: bg + offset,
+      backgroundActive: bg,
+
+      borderColor: brdr,
+      borderColorHover: brdr + lighten,
+      borderColorFocus: brdr,
+      borderColorPress: brdr + darken,
+    }
+  }
+
+  // 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: background,
+    color2: background + 1,
+    color3: background + 2,
+    color4: background + 3,
+    color5: background + 4,
+    color6: background + 5,
+    color7: background + 6,
+    color8: background + 7,
+    color9: background + 8,
+    color10: background + 9,
+    color11: background + 10,
+    color12: background + 11,
+    color0: -1,
+    color02: -2,
+    color04: -3,
+    color06: -4,
+    color08: -5,
+    // v5 = we make this actually 1 up (surface1 technically from before)
+    // this way "generics" are automatically differentiated from base bg
+    ...makeSurface(1),
+    placeholderColor: color - 3,
+    colorTransparent: -1,
+  }
+
+  const surface1 = makeSurface(2, 1)
+  const surface2 = makeSurface(3, 1)
+  const surface3 = makeSurface(5, 1)
+
+  const accent = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    accent,
+  } satisfies BuildTemplates
+}
+
+export const v5Templates = getTemplates()

package/src/v5-themes-subtle.ts

@@ -0,0 +1,18 @@
+/**
+ * Subtle v5 themes - pre-built desaturated color themes
+ */
+
+export * from './v5-themes'
+
+import { subtleChildrenThemes } from './subtleChildrenThemes'
+import { createV5Theme } from './v5-themes'
+
+export const themes = createV5Theme({ childrenThemes: subtleChildrenThemes })
+
+// type checks - don't remove
+themes.dark.background0075
+themes.dark_yellow.background0075
+themes.dark.background
+themes.dark.accent1
+// @ts-expect-error
+themes.dark.nonValid