@hanzogui/themes 2.0.0

package/src/v3-tokens.ts

@@ -0,0 +1,103 @@
+import { sizeToSpace } from './utils'
+
+// --- 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 as Key extends `$${infer K}` ? K : Key]: number
+}
+type SizeKeys = keyof Sizes
+
+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

package/src/v3.tsx

@@ -0,0 +1,12 @@
+export { themes } from './generated-v3'
+export { tokens } from './v3-themes'
+
+// specific colors since we have cjs here
+export { blue, blueDark } from '@hanzogui/colors/legacy'
+export { green, greenDark } from '@hanzogui/colors/legacy'
+export { red, redDark } from '@hanzogui/colors/legacy'
+export { orange, orangeDark } from '@hanzogui/colors/legacy'
+export { yellow, yellowDark } from '@hanzogui/colors/legacy'
+export { pink, pinkDark } from '@hanzogui/colors/legacy'
+export { purple, purpleDark } from '@hanzogui/colors/legacy'
+export { gray, grayDark } from '@hanzogui/colors/legacy'

package/src/v4-default.ts

@@ -0,0 +1,191 @@
+import * as Colors from '@hanzogui/colors/legacy'
+import { createThemes, defaultComponentThemes } from '@hanzogui/theme-builder'
+
+/**
+ * This is the default config v4 definitions.
+ *   - uses shorthands v4
+ *   - uses tokens v4 which are mostly the same as v3
+ */
+
+// Themes:
+
+const darkPalette = [
+  '#050505',
+  '#151515',
+  '#191919',
+  '#232323',
+  '#282828',
+  '#323232',
+  '#424242',
+  '#494949',
+  '#545454',
+  '#626262',
+  '#a5a5a5',
+  '#fff',
+]
+
+const lightPalette = [
+  '#fff',
+  '#f2f2f2',
+  'hsl(0, 0%, 93%)',
+  'hsl(0, 0%, 91%)',
+  'hsl(0, 0%, 88%)',
+  'hsl(0, 0%, 85%)',
+  'hsl(0, 0%, 82%)',
+  'hsl(0, 0%, 76%)',
+  'hsl(0, 0%, 56%)',
+  'hsl(0, 0%, 50%)',
+  'hsl(0, 0%, 42%)',
+  'hsl(0, 0%, 9%)',
+]
+
+const lightShadows = {
+  shadow1: 'rgba(0,0,0,0.04)',
+  shadow2: 'rgba(0,0,0,0.08)',
+  shadow3: 'rgba(0,0,0,0.16)',
+  shadow4: 'rgba(0,0,0,0.24)',
+  shadow5: 'rgba(0,0,0,0.32)',
+  shadow6: 'rgba(0,0,0,0.4)',
+}
+
+const darkShadows = {
+  shadow1: 'rgba(0,0,0,0.2)',
+  shadow2: 'rgba(0,0,0,0.3)',
+  shadow3: 'rgba(0,0,0,0.4)',
+  shadow4: 'rgba(0,0,0,0.5)',
+  shadow5: 'rgba(0,0,0,0.6)',
+  shadow6: 'rgba(0,0,0,0.7)',
+}
+
+const blackColors = {
+  black1: darkPalette[0],
+  black2: darkPalette[1],
+  black3: darkPalette[2],
+  black4: darkPalette[3],
+  black5: darkPalette[4],
+  black6: darkPalette[5],
+  black7: darkPalette[6],
+  black8: darkPalette[7],
+  black9: darkPalette[8],
+  black10: darkPalette[9],
+  black11: darkPalette[10],
+  black12: darkPalette[11],
+}
+
+const whiteColors = {
+  white1: lightPalette[0],
+  white2: lightPalette[1],
+  white3: lightPalette[2],
+  white4: lightPalette[3],
+  white5: lightPalette[4],
+  white6: lightPalette[5],
+  white7: lightPalette[6],
+  white8: lightPalette[7],
+  white9: lightPalette[8],
+  white10: lightPalette[9],
+  white11: lightPalette[10],
+  white12: lightPalette[11],
+}
+
+const generatedThemes = createThemes({
+  componentThemes: defaultComponentThemes,
+
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette,
+    },
+
+    // for values we don't want being inherited onto sub-themes
+    extra: {
+      light: {
+        ...Colors.blue,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...Colors.green,
+        ...lightShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: lightShadows.shadow1,
+      },
+      dark: {
+        ...Colors.blueDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
+        ...Colors.greenDark,
+        ...darkShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: darkShadows.shadow1,
+      },
+    },
+  },
+
+  // inverse accent theme
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette,
+    },
+  },
+
+  childrenThemes: {
+    black: {
+      palette: {
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors),
+      },
+    },
+    white: {
+      palette: {
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors),
+      },
+    },
+
+    blue: {
+      palette: {
+        dark: Object.values(Colors.blueDark),
+        light: Object.values(Colors.blue),
+      },
+    },
+    red: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red),
+      },
+    },
+    yellow: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
+      },
+    },
+    green: {
+      palette: {
+        dark: Object.values(Colors.greenDark),
+        light: Object.values(Colors.green),
+      },
+    },
+  },
+
+  grandChildrenThemes: {
+    accent: {
+      template: 'inverse',
+    },
+  },
+})
+
+export type GuiThemes = typeof generatedThemes
+
+export const themes = generatedThemes
+
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Hanzo GUI has ~1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Hanzo GUI CSS, this will save you bundle size:
+ */
+// export const themes: GuiThemes =
+//   process.env.HANZO_GUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+//     ? {}
+//     : (generatedThemes as any)

package/src/v4-gui.ts

@@ -0,0 +1,287 @@
+import * as Colors from '@hanzogui/colors/legacy'
+import { createV4Themes, defaultComponentThemes } from '@hanzogui/theme-builder'
+import { desaturate } from 'color2k'
+
+const desat = (colors: Record<string, string>, amount: number) => {
+  return Object.fromEntries(
+    Object.entries(colors).map(([key, value]) => [key, desaturate(value, amount)])
+  )
+}
+
+const colorsGreenDark = desat(Colors.greenDark, 0.2) as typeof Colors.greenDark
+const colorsGreen = desat(Colors.green, 0.2) as typeof Colors.green
+
+// with color2k:
+
+/**
+ * Default themes for the gui.hanzo.ai site
+ * If you'd like to create your own themes, use `createThemes`
+ */
+
+const darkPalette = [
+  '#040404',
+  '#090909',
+  '#111',
+  '#151515',
+  '#222',
+  '#282828',
+  '#343434',
+  '#424242',
+  '#515151',
+  '#626262',
+  '#a5a5a5',
+  '#fff',
+]
+
+const lightPalette = [
+  '#fff',
+  '#f2f2f2',
+  'hsl(0, 0%, 93%)',
+  'hsl(0, 0%, 91%)',
+  'hsl(0, 0%, 88%)',
+  'hsl(0, 0%, 85%)',
+  'hsl(0, 0%, 82%)',
+  'hsl(0, 0%, 76%)',
+  'hsl(0, 0%, 56%)',
+  'hsl(0, 0%, 50%)',
+  'hsl(0, 0%, 42%)',
+  'hsl(0, 0%, 9%)',
+]
+
+const lightShadows = {
+  shadow1: 'rgba(0,0,0,0.04)',
+  shadow2: 'rgba(0,0,0,0.08)',
+  shadow3: 'rgba(0,0,0,0.16)',
+  shadow4: 'rgba(0,0,0,0.24)',
+  shadow5: 'rgba(0,0,0,0.32)',
+  shadow6: 'rgba(0,0,0,0.4)',
+  shadow7: 'rgba(0,0,0,0.5)',
+  shadow8: 'rgba(0,0,0,0.6)',
+  shadow9: 'rgba(0,0,0,0.7)',
+  shadow10: 'rgba(0,0,0,0.8)',
+}
+
+const darkShadows = {
+  shadow1: 'rgba(0,0,0,0.2)',
+  shadow2: 'rgba(0,0,0,0.3)',
+  shadow3: 'rgba(0,0,0,0.4)',
+  shadow4: 'rgba(0,0,0,0.5)',
+  shadow5: 'rgba(0,0,0,0.6)',
+  shadow6: 'rgba(0,0,0,0.65)',
+  shadow7: 'rgba(0,0,0,0.75)',
+  shadow8: 'rgba(0,0,0,0.8)',
+  shadow9: 'rgba(0,0,0,0.85)',
+  shadow10: 'rgba(0,0,0,0.9)',
+}
+
+const blackColors = {
+  black1: darkPalette[0],
+  black2: darkPalette[1],
+  black3: darkPalette[2],
+  black4: darkPalette[3],
+  black5: darkPalette[4],
+  black6: darkPalette[5],
+  black7: darkPalette[6],
+  black8: darkPalette[7],
+  black9: darkPalette[8],
+  black10: darkPalette[9],
+  black11: darkPalette[10],
+  black12: darkPalette[11],
+}
+
+const whiteColors = {
+  white1: lightPalette[0],
+  white2: lightPalette[1],
+  white3: lightPalette[2],
+  white4: lightPalette[3],
+  white5: lightPalette[4],
+  white6: lightPalette[5],
+  white7: lightPalette[6],
+  white8: lightPalette[7],
+  white9: lightPalette[8],
+  white10: lightPalette[9],
+  white11: lightPalette[10],
+  white12: lightPalette[11],
+}
+
+const themes = createV4Themes({
+  componentThemes: defaultComponentThemes,
+
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette,
+    },
+
+    // for values we don't want being inherited onto sub-themes
+    extra: {
+      light: {
+        ...Colors.blue,
+        ...Colors.gray,
+        ...colorsGreen,
+        ...Colors.orange,
+        ...Colors.pink,
+        ...Colors.purple,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...lightShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: lightShadows.shadow1,
+        colorBg: '#fff',
+      },
+      dark: {
+        ...Colors.blueDark,
+        ...Colors.grayDark,
+        ...colorsGreenDark,
+        ...Colors.orangeDark,
+        ...Colors.pinkDark,
+        ...Colors.purpleDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
+        ...darkShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: darkShadows.shadow1,
+        colorBg: '#000',
+      },
+    },
+  },
+
+  // inverse accent theme
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette,
+    },
+  },
+
+  childrenThemes: {
+    black: {
+      palette: {
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors),
+      },
+    },
+    white: {
+      palette: {
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors),
+      },
+    },
+    gray: {
+      palette: {
+        dark: Object.values(Colors.grayDark),
+        light: Object.values(Colors.gray),
+      },
+    },
+    blue: {
+      palette: {
+        dark: Object.values(Colors.blueDark),
+        light: Object.values(Colors.blue),
+      },
+    },
+    orange: {
+      palette: {
+        dark: Object.values(Colors.orangeDark),
+        light: Object.values(Colors.orange),
+      },
+    },
+    red: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red),
+      },
+    },
+    yellow: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
+      },
+    },
+    green: {
+      palette: {
+        dark: Object.values(colorsGreenDark),
+        light: Object.values(colorsGreen),
+      },
+    },
+    purple: {
+      palette: {
+        dark: Object.values(Colors.purpleDark),
+        light: Object.values(Colors.purple),
+      },
+    },
+    pink: {
+      palette: {
+        dark: Object.values(Colors.pinkDark),
+        light: Object.values(Colors.pink),
+      },
+    },
+    tan: {
+      palette: {
+        light: [
+          'hsla(40, 30%, 98%, 1)',
+          'hsla(40, 24%, 94%, 1)',
+          'hsla(38, 23%, 91%, 1)',
+          'hsla(36, 20%, 90%, 1)',
+          'hsla(36, 20%, 88%, 1)',
+          'hsla(35, 20%, 85%, 1)',
+          'hsla(35, 21%, 74%, 1)',
+          'hsla(34, 20%, 70%, 1)',
+          'hsla(35, 20%, 67%, 1)',
+          'hsla(34, 19%, 47%, 1)',
+          'hsla(35, 18%, 37%, 1)',
+          'hsla(35, 17%, 20%, 1)',
+        ],
+        dark: [
+          'hsla(30, 9%, 10%, 1)',
+          'hsla(30, 10%, 12%, 1)',
+          'hsla(31, 11%, 18%, 1)',
+          'hsla(30, 12%, 23%, 1)',
+          'hsla(30, 14%, 28%, 1)',
+          'hsla(30, 16%, 33%, 1)',
+          'hsla(30, 18%, 38%, 1)',
+          'hsla(30, 20%, 45%, 1)',
+          'hsla(30, 21%, 50%, 1)',
+          'hsla(29, 22%, 58%, 1)',
+          'hsla(34, 24%, 70%, 1)',
+          'hsla(11, 12%, 79%, 1)',
+        ],
+      },
+    },
+  },
+
+  grandChildrenThemes: {
+    // inverse accent theme
+    accent: {
+      template: 'inverse',
+    },
+    alt1: {
+      template: 'alt1',
+    },
+    alt2: {
+      template: 'alt2',
+    },
+    surface1: {
+      template: 'surface1',
+    },
+    surface2: {
+      template: 'surface2',
+    },
+    surface3: {
+      template: 'surface3',
+    },
+  },
+})
+
+export type GuiThemes = typeof themes
+
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Hanzo GUI has <1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Hanzo GUI CSS, this will save you bundle size:
+ */
+export const guiThemes: GuiThemes =
+  process.env.HANZO_GUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+    ? ({} as any)
+    : (themes as any)

package/src/v4-tokens.ts

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

package/src/v4.tsx

@@ -0,0 +1,4 @@
+export { tokens } from './v4-tokens'
+export { createThemes } from '@hanzogui/theme-builder'
+export { themes as guiThemes } from './generated-v4-gui'
+export { themes as defaultThemes } from './generated-v4'

package/src/v5-subtle.tsx

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