@hanzogui/themes 8.0.1 → 8.1.1

package/types/v5-themes.d.ts

@@ -547,6 +547,78 @@ export declare const themes: Record<"light_blue" | "light_gray" | "light_green"
     yellow10: string;
     yellow11: string;
     yellow12: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    red7: string;
+    red8: string;
+    red9: string;
+    red10: string;
+    red11: string;
+    red12: string;
+    purple1: string;
+    purple2: string;
+    purple3: string;
+    purple4: string;
+    purple5: string;
+    purple6: string;
+    purple7: string;
+    purple8: string;
+    purple9: string;
+    purple10: string;
+    purple11: string;
+    purple12: string;
+    pink1: string;
+    pink2: string;
+    pink3: string;
+    pink4: string;
+    pink5: string;
+    pink6: string;
+    pink7: string;
+    pink8: string;
+    pink9: string;
+    pink10: string;
+    pink11: string;
+    pink12: string;
+    orange1: string;
+    orange2: string;
+    orange3: string;
+    orange4: string;
+    orange5: string;
+    orange6: string;
+    orange7: string;
+    orange8: string;
+    orange9: string;
+    orange10: string;
+    orange11: string;
+    orange12: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    green7: string;
+    green8: string;
+    green9: string;
+    green10: string;
+    green11: string;
+    green12: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    gray10: string;
+    gray11: string;
+    gray12: string;
     color: string;
     shadowColor: string;
     borderColor: string;
@@ -624,78 +696,6 @@ export declare const themes: Record<"light_blue" | "light_gray" | "light_green"
     white10: string;
     white6: string;
     white11: string;
-    gray1: string;
-    gray2: string;
-    gray3: string;
-    gray4: string;
-    gray5: string;
-    gray6: string;
-    gray7: string;
-    gray8: string;
-    gray9: string;
-    gray10: string;
-    gray11: string;
-    gray12: string;
-    red1: string;
-    red2: string;
-    red3: string;
-    red4: string;
-    red5: string;
-    red6: string;
-    red7: string;
-    red8: string;
-    red9: string;
-    red10: string;
-    red11: string;
-    red12: string;
-    green1: string;
-    green2: string;
-    green3: string;
-    green4: string;
-    green5: string;
-    green6: string;
-    green7: string;
-    green8: string;
-    green9: string;
-    green10: string;
-    green11: string;
-    green12: string;
-    orange1: string;
-    orange2: string;
-    orange3: string;
-    orange4: string;
-    orange5: string;
-    orange6: string;
-    orange7: string;
-    orange8: string;
-    orange9: string;
-    orange10: string;
-    orange11: string;
-    orange12: string;
-    pink1: string;
-    pink2: string;
-    pink3: string;
-    pink4: string;
-    pink5: string;
-    pink6: string;
-    pink7: string;
-    pink8: string;
-    pink9: string;
-    pink10: string;
-    pink11: string;
-    pink12: string;
-    purple1: string;
-    purple2: string;
-    purple3: string;
-    purple4: string;
-    purple5: string;
-    purple6: string;
-    purple7: string;
-    purple8: string;
-    purple9: string;
-    purple10: string;
-    purple11: string;
-    purple12: string;
     teal1: string;
     teal2: string;
     teal3: string;

package/.turbo/turbo-build.log

@@ -1,2 +0,0 @@
-$ hanzogui-build
-built @hanzogui/themes in 2757 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"
-    }
-  ]
-}