@hanzogui/themes 8.0.0 → 8.1.0

package/types/v4-hanzogui.d.ts

@@ -1,4 +1,16 @@
 declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_black" | "light_white" | "light_blue_surface1" | "light_gray_surface1" | "light_green_surface1" | "light_orange_surface1" | "light_pink_surface1" | "light_purple_surface1" | "light_red_surface1" | "light_yellow_surface1" | "light_black_surface1" | "light_white_surface1" | "light_blue_surface2" | "light_gray_surface2" | "light_green_surface2" | "light_orange_surface2" | "light_pink_surface2" | "light_purple_surface2" | "light_red_surface2" | "light_yellow_surface2" | "light_black_surface2" | "light_white_surface2" | "light_blue_accent" | "light_gray_accent" | "light_green_accent" | "light_orange_accent" | "light_pink_accent" | "light_purple_accent" | "light_red_accent" | "light_yellow_accent" | "light_black_accent" | "light_white_accent" | "dark_black" | "dark_white" | "dark_blue_surface1" | "dark_gray_surface1" | "dark_green_surface1" | "dark_orange_surface1" | "dark_pink_surface1" | "dark_purple_surface1" | "dark_red_surface1" | "dark_yellow_surface1" | "dark_black_surface1" | "dark_white_surface1" | "dark_blue_surface2" | "dark_gray_surface2" | "dark_green_surface2" | "dark_orange_surface2" | "dark_pink_surface2" | "dark_purple_surface2" | "dark_red_surface2" | "dark_yellow_surface2" | "dark_black_surface2" | "dark_white_surface2" | "dark_blue_accent" | "dark_gray_accent" | "dark_green_accent" | "dark_orange_accent" | "dark_pink_accent" | "dark_purple_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_black_accent" | "dark_white_accent" | "light_blue_alt1" | "light_blue_alt2" | "light_green_alt1" | "light_green_alt2" | "light_orange_alt1" | "light_orange_alt2" | "light_pink_alt1" | "light_pink_alt2" | "light_purple_alt1" | "light_purple_alt2" | "light_red_alt1" | "light_red_alt2" | "light_yellow_alt1" | "light_yellow_alt2" | "dark_blue_alt1" | "dark_blue_alt2" | "dark_green_alt1" | "dark_green_alt2" | "dark_orange_alt1" | "dark_orange_alt2" | "dark_pink_alt1" | "dark_pink_alt2" | "dark_purple_alt1" | "dark_purple_alt2" | "dark_red_alt1" | "dark_red_alt2" | "dark_yellow_alt1" | "dark_yellow_alt2" | "light_gray_alt1" | "light_gray_alt2" | "dark_gray_alt1" | "dark_gray_alt2" | "light_blue_surface3" | "light_gray_surface3" | "light_green_surface3" | "light_orange_surface3" | "light_pink_surface3" | "light_purple_surface3" | "light_red_surface3" | "light_yellow_surface3" | "dark_blue_surface3" | "dark_gray_surface3" | "dark_green_surface3" | "dark_orange_surface3" | "dark_pink_surface3" | "dark_purple_surface3" | "dark_red_surface3" | "dark_yellow_surface3" | "light_tan" | "light_tan_surface1" | "light_tan_surface2" | "light_black_surface3" | "light_white_surface3" | "light_tan_surface3" | "light_tan_accent" | "light_black_alt1" | "light_white_alt1" | "light_tan_alt1" | "light_black_alt2" | "light_white_alt2" | "light_tan_alt2" | "dark_tan" | "dark_tan_surface1" | "dark_tan_surface2" | "dark_black_surface3" | "dark_white_surface3" | "dark_tan_surface3" | "dark_tan_accent" | "dark_black_alt1" | "dark_white_alt1" | "dark_tan_alt1" | "dark_black_alt2" | "dark_white_alt2" | "dark_tan_alt2", {
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
     yellow1: string;
     yellow2: string;
     yellow3: string;
@@ -83,18 +95,6 @@ declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "ligh
     gray10: string;
     gray11: string;
     gray12: string;
-    blue1: string;
-    blue2: string;
-    blue3: string;
-    blue4: string;
-    blue5: string;
-    blue6: string;
-    blue7: string;
-    blue8: string;
-    blue9: string;
-    blue10: string;
-    blue11: string;
-    blue12: string;
     color: string;
     shadowColor: string;
     borderColor: string;

package/types/v5-themes-subtle.d.ts

@@ -3,6 +3,18 @@
  */
 export * from './v5-themes';
 export declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_neutral" | "light_black" | "light_white" | "light_teal" | "light_blue_surface1" | "light_gray_surface1" | "light_green_surface1" | "light_orange_surface1" | "light_pink_surface1" | "light_purple_surface1" | "light_red_surface1" | "light_yellow_surface1" | "light_neutral_surface1" | "light_black_surface1" | "light_white_surface1" | "light_teal_surface1" | "light_blue_surface2" | "light_gray_surface2" | "light_green_surface2" | "light_orange_surface2" | "light_pink_surface2" | "light_purple_surface2" | "light_red_surface2" | "light_yellow_surface2" | "light_neutral_surface2" | "light_black_surface2" | "light_white_surface2" | "light_teal_surface2" | "light_blue_accent" | "light_gray_accent" | "light_green_accent" | "light_orange_accent" | "light_pink_accent" | "light_purple_accent" | "light_red_accent" | "light_yellow_accent" | "light_neutral_accent" | "light_black_accent" | "light_white_accent" | "light_teal_accent" | "dark_neutral" | "dark_black" | "dark_white" | "dark_teal" | "dark_blue_surface1" | "dark_gray_surface1" | "dark_green_surface1" | "dark_orange_surface1" | "dark_pink_surface1" | "dark_purple_surface1" | "dark_red_surface1" | "dark_yellow_surface1" | "dark_neutral_surface1" | "dark_black_surface1" | "dark_white_surface1" | "dark_teal_surface1" | "dark_blue_surface2" | "dark_gray_surface2" | "dark_green_surface2" | "dark_orange_surface2" | "dark_pink_surface2" | "dark_purple_surface2" | "dark_red_surface2" | "dark_yellow_surface2" | "dark_neutral_surface2" | "dark_black_surface2" | "dark_white_surface2" | "dark_teal_surface2" | "dark_blue_accent" | "dark_gray_accent" | "dark_green_accent" | "dark_orange_accent" | "dark_pink_accent" | "dark_purple_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_neutral_accent" | "dark_black_accent" | "dark_white_accent" | "dark_teal_accent", {
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
     yellow1: string;
     yellow2: string;
     yellow3: string;
@@ -87,18 +99,6 @@ export declare const themes: Record<"light_blue" | "light_gray" | "light_green"
     gray10: string;
     gray11: string;
     gray12: string;
-    blue1: string;
-    blue2: string;
-    blue3: string;
-    blue4: string;
-    blue5: string;
-    blue6: string;
-    blue7: string;
-    blue8: string;
-    blue9: string;
-    blue10: string;
-    blue11: string;
-    blue12: string;
     color: string;
     shadowColor: string;
     borderColor: string;

package/types/v5-themes.d.ts

@@ -523,6 +523,18 @@ export type CreateV5ThemeOptions<Children extends Record<string, ChildTheme> = t
  */
 export declare function createV5Theme<Children extends Record<string, ChildTheme> = typeof defaultChildrenThemes, GrandChildren extends Record<string, GrandChildrenThemeDefinition> = typeof v5GrandchildrenThemes, GetThemeReturn extends Record<string, string | number> = {}>(options?: CreateV5ThemeOptions<Children, GrandChildren, GetThemeReturn>): Record<"light" | "dark" | "light_accent" | "dark_accent" | ("black" | "white" | keyof Children extends string ? `light_${(GrandChildren extends undefined ? undefined : Record<keyof GrandChildren, any>) extends infer T ? T extends (GrandChildren extends undefined ? undefined : Record<keyof GrandChildren, any>) ? T extends undefined ? "black" | "white" | (string & keyof Children) : "black" | "white" | (string & keyof Children) | (keyof T extends infer T_1 ? T_1 extends keyof T ? T_1 extends string ? `black_${T_1}` | `white_${T_1}` | `${string & keyof Children}_${T_1}` : never : never : never) : never : never}` | `dark_${(GrandChildren extends undefined ? undefined : Record<keyof GrandChildren, any>) extends infer T_2 ? T_2 extends (GrandChildren extends undefined ? undefined : Record<keyof GrandChildren, any>) ? T_2 extends undefined ? "black" | "white" | (string & keyof Children) : "black" | "white" | (string & keyof Children) | (keyof T_2 extends infer T_3 ? T_3 extends keyof T_2 ? T_3 extends string ? `black_${T_3}` | `white_${T_3}` | `${string & keyof Children}_${T_3}` : never : never : never) : never : never}` : never), { [ThemeKey in "color" | "shadowColor" | "borderColor" | "borderColorHover" | "colorHover" | "colorFocus" | "colorPress" | "color1" | "color2" | "color3" | "color4" | "color5" | "color6" | "color7" | "color8" | "color9" | "color10" | "color11" | "color12" | "background" | "placeholderColor" | "colorTransparent" | "backgroundHover" | "backgroundPress" | "backgroundFocus" | "borderColorFocus" | "borderColorPress" | "accentBackground" | "accentColor" | "background0" | "background02" | "background04" | "background06" | "background08" | "color0" | "color02" | "color04" | "color06" | "color08" | "black" | "black2" | "black1" | "black4" | "black8" | "black12" | "black3" | "black5" | "black7" | "black9" | "black10" | "black6" | "black11" | "white" | "white2" | "white1" | "white4" | "white8" | "white12" | "white3" | "white5" | "white7" | "white9" | "white10" | "white6" | "white11" | "white0" | "white02" | "white04" | "white06" | "white08" | "black0" | "black02" | "black04" | "black06" | "black08" | "shadow1" | "shadow2" | "shadow3" | "shadow4" | "shadow5" | "shadow6" | "shadow7" | "shadow8" | "highlight1" | "highlight2" | "highlight3" | "highlight4" | "highlight5" | "highlight6" | "highlight7" | "highlight8" | "outlineColor" | "accent0" | "accent2" | "accent1" | "accent4" | "accent8" | "accent12" | "accent3" | "accent5" | "accent7" | "accent9" | "accent10" | "accent6" | "accent11" | keyof UnionToIntersection<ChildrenColors<Children, "dark">>]: string; } & Omit<DefaultV5ThemeValues, keyof GetThemeReturn> & GetThemeReturn>;
 export declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_neutral" | "light_black" | "light_white" | "light_teal" | "light_blue_surface1" | "light_gray_surface1" | "light_green_surface1" | "light_orange_surface1" | "light_pink_surface1" | "light_purple_surface1" | "light_red_surface1" | "light_yellow_surface1" | "light_neutral_surface1" | "light_black_surface1" | "light_white_surface1" | "light_teal_surface1" | "light_blue_surface2" | "light_gray_surface2" | "light_green_surface2" | "light_orange_surface2" | "light_pink_surface2" | "light_purple_surface2" | "light_red_surface2" | "light_yellow_surface2" | "light_neutral_surface2" | "light_black_surface2" | "light_white_surface2" | "light_teal_surface2" | "light_blue_accent" | "light_gray_accent" | "light_green_accent" | "light_orange_accent" | "light_pink_accent" | "light_purple_accent" | "light_red_accent" | "light_yellow_accent" | "light_neutral_accent" | "light_black_accent" | "light_white_accent" | "light_teal_accent" | "dark_neutral" | "dark_black" | "dark_white" | "dark_teal" | "dark_blue_surface1" | "dark_gray_surface1" | "dark_green_surface1" | "dark_orange_surface1" | "dark_pink_surface1" | "dark_purple_surface1" | "dark_red_surface1" | "dark_yellow_surface1" | "dark_neutral_surface1" | "dark_black_surface1" | "dark_white_surface1" | "dark_teal_surface1" | "dark_blue_surface2" | "dark_gray_surface2" | "dark_green_surface2" | "dark_orange_surface2" | "dark_pink_surface2" | "dark_purple_surface2" | "dark_red_surface2" | "dark_yellow_surface2" | "dark_neutral_surface2" | "dark_black_surface2" | "dark_white_surface2" | "dark_teal_surface2" | "dark_blue_accent" | "dark_gray_accent" | "dark_green_accent" | "dark_orange_accent" | "dark_pink_accent" | "dark_purple_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_neutral_accent" | "dark_black_accent" | "dark_white_accent" | "dark_teal_accent", {
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
     yellow1: string;
     yellow2: string;
     yellow3: string;
@@ -607,18 +619,6 @@ export declare const themes: Record<"light_blue" | "light_gray" | "light_green"
     gray10: string;
     gray11: string;
     gray12: string;
-    blue1: string;
-    blue2: string;
-    blue3: string;
-    blue4: string;
-    blue5: string;
-    blue6: string;
-    blue7: string;
-    blue8: string;
-    blue9: string;
-    blue10: string;
-    blue11: string;
-    blue12: string;
     color: string;
     shadowColor: string;
     borderColor: string;

package/.turbo/turbo-build.log

@@ -1,2 +0,0 @@
-$ hanzogui-build
-built @hanzogui/themes in 4235 ms

package/tests/v5-themes.test.ts

@@ -1,215 +0,0 @@
-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

@@ -1,43 +0,0 @@
-{
-  "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"
-    }
-  ]
-}