@hanzogui/themes 2.0.0

package/src/v5-tokens.ts

@@ -0,0 +1,107 @@
+import { sizeToSpace } from './utils'
+
+// the same as v3 for now, but duplicated to avoid accidental changes to both
+
+// --- tokens ---
+
+// should roughly map to button/input etc height at each level
+// fonts should match that height/lineHeight at each stop
+// so these are really non-linear on purpose
+// why?
+//   - at sizes <1, used for fine grained things (borders, smallest paddingY)
+//     - so smallest padY should be roughly 1-4px so it can join with lineHeight
+//   - at sizes >=1, have to consider "pressability" (jumps up)
+//   - after that it should go upwards somewhat naturally
+//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster
+//  but also one more wrinkle...
+//  space is used in conjunction with size
+//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)
+export const size = {
+  $0: 0,
+  '$0.25': 2,
+  '$0.5': 4,
+  '$0.75': 8,
+  $1: 20,
+  '$1.5': 24,
+  $2: 28,
+  '$2.5': 32,
+  $3: 36,
+  '$3.5': 40,
+  $4: 44,
+  $true: 44,
+  '$4.5': 48,
+  $5: 52,
+  $6: 64,
+  $7: 74,
+  $8: 84,
+  $9: 94,
+  $10: 104,
+  $11: 124,
+  $12: 144,
+  $13: 164,
+  $14: 184,
+  $15: 204,
+  $16: 224,
+  $17: 224,
+  $18: 244,
+  $19: 264,
+  $20: 284,
+}
+
+type SizeKeysIn = keyof typeof size
+type Sizes = {
+  [Key in SizeKeysIn extends `$${infer Key}` ? Key : SizeKeysIn]: number
+}
+type SizeKeys = `${keyof Sizes extends `${infer K}` ? K : never}`
+
+export const spaces = Object.entries(size).map(([k, v]) => {
+  return [k, sizeToSpace(v)] as const
+})
+
+export const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])
+
+type SizeKeysWithNegatives =
+  | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>
+  | SizeKeys
+
+export const space: {
+  [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number
+} = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative),
+} as any
+
+export const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500,
+}
+
+export const radius = {
+  0: 0,
+  1: 3,
+  2: 5,
+  3: 7,
+  4: 9,
+  true: 9,
+  5: 10,
+  6: 16,
+  7: 19,
+  8: 22,
+  9: 26,
+  10: 34,
+  11: 42,
+  12: 50,
+}
+
+export const tokens = {
+  radius,
+  zIndex,
+  space,
+  size,
+} as const
+
+export type V5Tokens = typeof tokens

package/src/v5.tsx

@@ -0,0 +1,11 @@
+export { createThemes } from '@hanzogui/theme-builder'
+export { themes } from './generated-v5'
+export type {
+  Theme as V5Theme,
+  ThemeNames as V5ThemeNames,
+  Themes as V5Themes,
+} from './generated-v5'
+export { v5Templates } from './v5-templates'
+export * from './v5-themes'
+export { tokens } from './v5-tokens'
+export type { V5Tokens } from './v5-tokens'

package/tests/v5-themes.test.ts

@@ -0,0 +1,215 @@
+import { describe, expect, test, assertType } from 'vitest'
+import {
+  createV5Theme,
+  themes as defaultThemes,
+  defaultChildrenThemes,
+} from '../src/v5-themes'
+import { opacify, interpolateColor } from '../src/opacify'
+
+describe('opacify', () => {
+  test('converts hex to hex with alpha', () => {
+    expect(opacify('#ff0000', 0.5)).toBe('#ff000080')
+    expect(opacify('#fff', 0.25)).toBe('#ffffff40') // shorthand
+  })
+
+  test('converts hsl to hsla', () => {
+    expect(opacify('hsl(0, 100%, 50%)', 0.5)).toBe('hsla(0, 100%, 50%, 0.5)')
+  })
+
+  test('returns unsupported formats unchanged', () => {
+    expect(opacify('rgb(255, 0, 0)', 0.5)).toBe('rgb(255, 0, 0)')
+    expect(opacify('invalid', 0.5)).toBe('invalid')
+  })
+})
+
+describe('interpolateColor', () => {
+  test('interpolates between colors', () => {
+    expect(interpolateColor('#000000', '#ffffff', 0)).toBe('rgb(0, 0, 0)')
+    expect(interpolateColor('#000000', '#ffffff', 1)).toBe('rgb(255, 255, 255)')
+    expect(interpolateColor('#000000', '#ffffff', 0.5)).toBe('rgb(128, 128, 128)')
+  })
+
+  test('handles different color formats', () => {
+    expect(interpolateColor('rgb(0, 0, 0)', 'rgb(255, 255, 255)', 0.5)).toBe(
+      'rgb(128, 128, 128)'
+    )
+    expect(interpolateColor('hsl(0, 100%, 50%)', 'hsl(0, 100%, 100%)', 0.5)).toMatch(
+      /^rgb/
+    )
+  })
+
+  test('returns first color on invalid input', () => {
+    expect(interpolateColor('#ff0000', 'invalid', 0.5)).toBe('#ff0000')
+  })
+})
+
+describe('v5 themes', () => {
+  test('generates expected theme structure', () => {
+    const keys = Object.keys(defaultThemes)
+
+    // Base + accent
+    expect(keys).toContain('light')
+    expect(keys).toContain('dark')
+    expect(keys).toContain('light_accent')
+
+    // Children themes
+    expect(keys).toContain('light_blue')
+    expect(keys).toContain('dark_red')
+  })
+
+  test('light and dark themes have different values', () => {
+    expect(defaultThemes.light.background).not.toBe(defaultThemes.dark.background)
+    expect(defaultThemes.light.color).not.toBe(defaultThemes.dark.color)
+  })
+
+  test('accent themes are inverted', () => {
+    expect(defaultThemes.light.background).not.toBe(defaultThemes.light_accent.background)
+    expect(defaultThemes.dark.background).not.toBe(defaultThemes.dark_accent.background)
+  })
+
+  test('getTheme computes opacity and interpolation colors', () => {
+    // Opacity variants
+    expect(defaultThemes.light.color01).toBeDefined()
+    expect(defaultThemes.light.background01).toBeDefined()
+    expect(defaultThemes.light.background08).toBeDefined()
+    expect(defaultThemes.light.outlineColor).toBeDefined()
+
+    // Works on all theme types
+    expect(defaultThemes.light_blue.color01).toBeDefined()
+  })
+
+  test('children colors spread to base theme extras', () => {
+    expect(defaultThemes.light.blue1).toBe(defaultChildrenThemes.blue.light.blue1)
+    expect(defaultThemes.light.blue12).toBe(defaultChildrenThemes.blue.light.blue12)
+    expect(defaultThemes.dark.blue1).toBe(defaultChildrenThemes.blue.dark.blue1)
+  })
+
+  test('includes shadow and whiteBlack colors', () => {
+    expect(defaultThemes.light.shadow1).toBeDefined()
+    expect(defaultThemes.light.shadow6).toBeDefined()
+    expect(defaultThemes.light.white).toBe('rgba(255,255,255,1)')
+    expect(defaultThemes.light.black).toBe('rgba(0,0,0,1)')
+  })
+
+  test('has color1-12 and accent1-12 tokens', () => {
+    expect(defaultThemes.light.color1).toBeDefined()
+    expect(defaultThemes.light.color12).toBeDefined()
+    expect(defaultThemes.light.accent1).toBeDefined()
+    expect(defaultThemes.light.accent12).toBeDefined()
+  })
+})
+
+describe('createV5Theme options', () => {
+  test('custom palettes affect black/white colors', () => {
+    const themes = createV5Theme({
+      darkPalette: [
+        '#111',
+        '#222',
+        '#333',
+        '#444',
+        '#555',
+        '#666',
+        '#777',
+        '#888',
+        '#999',
+        '#aaa',
+        '#bbb',
+        '#ccc',
+      ],
+    })
+    expect(themes.light.black1).toBe('#111')
+    expect(themes.light.black12).toBe('#ccc')
+  })
+
+  test('componentThemes: false removes component themes', () => {
+    const themes = createV5Theme({ componentThemes: false })
+    const keys = Object.keys(themes)
+    expect(keys.filter((k) => k.includes('Button'))).toHaveLength(0)
+  })
+
+  test('empty childrenThemes produces minimal themes', () => {
+    const themes = createV5Theme({ childrenThemes: {} })
+    const keys = Object.keys(themes)
+    expect(keys).toContain('light')
+    expect(keys).toContain('light_black') // internal
+    expect(keys).not.toContain('light_blue')
+  })
+
+  test('custom childrenThemes adds color themes', () => {
+    const themes = createV5Theme({
+      childrenThemes: {
+        brand: {
+          light: { brand1: '#e0f7fa', brand12: '#00251a' },
+          dark: { brand1: '#00251a', brand12: '#e0f7fa' },
+        },
+      },
+    })
+    expect(themes.light.brand1).toBe('#e0f7fa')
+    expect(themes.dark.brand1).toBe('#00251a')
+  })
+
+  test('grandChildrenThemes override defaults', () => {
+    const themes = createV5Theme({
+      grandChildrenThemes: { custom: { template: 'surface1' } },
+    })
+    const keys = Object.keys(themes)
+    expect(keys).toContain('light_blue_custom')
+    expect(keys).not.toContain('light_blue_accent')
+  })
+
+  test('custom getTheme merges on top of built-in computed values', () => {
+    const themes = createV5Theme({
+      getTheme: ({ palette }) => ({
+        myOverlay: opacify(palette![7]!, 0.5),
+        outlineColor: '#123456',
+      }),
+    })
+
+    expect(themes.light.color01).toBeDefined()
+    expect(themes.light.myOverlay).toBeDefined()
+    expect(themes.light.outlineColor).toBe('#123456')
+  })
+})
+
+describe('defaultChildrenThemes', () => {
+  test('has expected structure', () => {
+    expect(Object.keys(defaultChildrenThemes.blue.light)).toHaveLength(12)
+    expect(defaultChildrenThemes.neutral.light).toEqual(
+      defaultChildrenThemes.neutral.dark
+    )
+  })
+})
+
+describe('type safety', () => {
+  test('theme values are string | number', () => {
+    assertType<string | number>(defaultThemes.light.background)
+    assertType<string | number>(defaultThemes.light.color01)
+    assertType<string | number>(defaultThemes.light.blue1)
+  })
+
+  test('custom themes infer types correctly', () => {
+    const themes = createV5Theme({
+      childrenThemes: {
+        brand: {
+          light: { brand1: '#fff', brand12: '#000' },
+          dark: { brand1: '#000', brand12: '#fff' },
+        },
+      },
+    })
+    // brand colors should be typed
+    assertType<string | number>(themes.light.brand1)
+  })
+
+  test('custom getTheme values infer types correctly', () => {
+    const themes = createV5Theme({
+      getTheme: ({ palette }) => ({
+        myOverlay: opacify(palette![7]!, 0.5),
+      }),
+    })
+
+    assertType<string | number>(themes.light.myOverlay)
+    assertType<string | number>(themes.dark.outlineColor)
+    // @ts-expect-error
+    themes.light.nonValidCustomKey
+  })
+})

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "exclude": [
+    "types",
+    "tests",
+    "v2.d.ts",
+    "v2.js",
+    "v2-themes.cjs",
+    "v2-themes.d.ts",
+    "v3.d.ts",
+    "v3.cjs",
+    "v3-themes.cjs",
+    "v3-themes.d.ts",
+    "v4.d.ts",
+    "v4.cjs",
+    "v5.d.ts",
+    "v5.cjs",
+    "v5-subtle.d.ts",
+    "v5-subtle.cjs",
+    "dist",
+    "**/__tests__"
+  ],
+  "references": [
+    {
+      "path": "../cli"
+    },
+    {
+      "path": "../colors"
+    },
+    {
+      "path": "../create-theme"
+    },
+    {
+      "path": "../theme-builder"
+    },
+    {
+      "path": "../web"
+    }
+  ]
+}