@hanzogui/themes 2.0.0

package/src/themes-old.tsx

@@ -0,0 +1,378 @@
+import type { MaskOptions } from '@hanzogui/create-theme'
+import {
+  addChildren,
+  applyMask,
+  createStrengthenMask,
+  createTheme,
+  createWeakenMask,
+  skipMask,
+} from '@hanzogui/create-theme'
+
+import { colorTokens, darkColors, lightColors } from './tokens'
+
+type ColorName = keyof typeof colorTokens.dark
+
+const lightTransparent = 'rgba(255,255,255,0)'
+const darkTransparent = 'rgba(10,10,10,0)'
+
+// background => foreground
+const palettes = {
+  dark: [
+    darkTransparent,
+    '#050505',
+    '#151515',
+    '#191919',
+    '#232323',
+    '#282828',
+    '#323232',
+    '#424242',
+    '#494949',
+    '#545454',
+    '#626262',
+    '#a5a5a5',
+    '#fff',
+    lightTransparent,
+  ],
+  light: [
+    lightTransparent,
+    '#fff',
+    '#f9f9f9',
+    'hsl(0, 0%, 97.3%)',
+    'hsl(0, 0%, 95.1%)',
+    'hsl(0, 0%, 94.0%)',
+    'hsl(0, 0%, 92.0%)',
+    'hsl(0, 0%, 89.5%)',
+    'hsl(0, 0%, 81.0%)',
+    'hsl(0, 0%, 56.1%)',
+    'hsl(0, 0%, 50.3%)',
+    'hsl(0, 0%, 42.5%)',
+    'hsl(0, 0%, 9.0%)',
+    darkTransparent,
+  ],
+}
+
+const templateColors = {
+  color1: 1,
+  color2: 2,
+  color3: 3,
+  color4: 4,
+  color5: 5,
+  color6: 6,
+  color7: 7,
+  color8: 8,
+  color9: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12,
+}
+
+const templateShadows = {
+  shadowColor: 1,
+  shadowColorHover: 1,
+  shadowColorPress: 2,
+  shadowColorFocus: 2,
+}
+
+// we can use subset of our template as a "override" so it doesn't get adjusted with masks
+// we want to skip over templateColor + templateShadows
+const toSkip = {
+  ...templateShadows,
+}
+
+const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]))
+const overrideShadows = Object.fromEntries(
+  Object.entries(templateShadows).map(([k]) => [k, 0])
+)
+const overrideWithColors = {
+  ...override,
+  color: 0,
+  colorHover: 0,
+  colorFocus: 0,
+  colorPress: 0,
+}
+
+// templates use the palette and specify index
+// negative goes backwards from end so -1 is the last item
+const template = {
+  ...templateColors,
+  ...toSkip,
+  // the background, color, etc keys here work like generics - they make it so you
+  // can publish components for others to use without mandating a specific color scale
+  // the @hanzogui/button Button component looks for `$background`, so you set the
+  // dark_red_Button theme to have a stronger background than the dark_red theme.
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 4,
+  backgroundFocus: 5,
+  backgroundStrong: 1,
+  backgroundTransparent: 0,
+  color: -1,
+  colorHover: -2,
+  colorPress: -1,
+  colorFocus: -2,
+  colorTransparent: -0,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
+  placeholderColor: -4,
+}
+
+const lightShadowColor = 'rgba(0,0,0,0.02)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.066)'
+const darkShadowColor = 'rgba(0,0,0,0.2)'
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor,
+}
+
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor,
+}
+
+const lightTemplate = {
+  ...template,
+
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 4,
+
+  // our light color palette is... a bit unique
+  borderColor: 6,
+  borderColorHover: 7,
+  borderColorFocus: 5,
+  borderColorPress: 6,
+  ...lightShadows,
+}
+
+const darkTemplate = { ...template, ...darkShadows }
+
+const light = createTheme(palettes.light, lightTemplate)
+const dark = createTheme(palettes.dark, darkTemplate)
+
+type SubTheme = typeof light
+
+const baseThemes: {
+  light: SubTheme
+  dark: SubTheme
+} = {
+  light,
+  dark,
+}
+
+const masks = {
+  skip: skipMask,
+  weaker: createWeakenMask(),
+  stronger: createStrengthenMask(),
+}
+
+// default mask options for most uses
+const maskOptions: MaskOptions = {
+  override,
+  skip: toSkip,
+  // avoids the transparent ends
+  max: palettes.light.length - 2,
+  min: 1,
+}
+
+const transparent = (hsl: string, opacity = 0) =>
+  hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
+
+// setup colorThemes and their inverses
+const [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map(
+  (colorSet, i) => {
+    const isLight = i === 0
+    const theme = baseThemes[isLight ? 'light' : 'dark']
+
+    return Object.fromEntries(
+      Object.keys(colorSet).map((color) => {
+        const colorPalette = Object.values(colorSet[color]) as string[]
+        // were re-ordering these
+        const [head, tail] = [
+          colorPalette.slice(0, 6),
+          colorPalette.slice(colorPalette.length - 5),
+        ]
+        // add our transparent colors first/last
+        // and make sure the last (foreground) color is white/black rather than colorful
+        // this is mostly for consistency with the older theme-base
+        const palette = [
+          transparent(colorPalette[0]),
+          ...head,
+          ...tail,
+          theme.color,
+          transparent(colorPalette[colorPalette.length - 1]),
+        ]
+
+        const colorTheme = createTheme(
+          palette,
+          isLight
+            ? {
+                ...lightTemplate,
+                // light color themes are a bit less sensitive
+                borderColor: 4,
+                borderColorHover: 5,
+                borderColorFocus: 4,
+                borderColorPress: 4,
+              }
+            : darkTemplate
+        )
+
+        return [color, colorTheme]
+      })
+    ) as Record<ColorName, SubTheme>
+  }
+)
+
+const allThemes = addChildren(baseThemes, (name, theme) => {
+  const isLight = name === 'light'
+  const inverseName = isLight ? 'dark' : 'light'
+  const inverseTheme = baseThemes[inverseName]
+  const colorThemes = isLight ? lightColorThemes : darkColorThemes
+  const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes
+
+  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
+    const inverse = inverseColorThemes[colorName]
+    return {
+      ...getAltThemes({
+        theme: colorTheme,
+        inverse,
+        isLight,
+      }),
+      ...getComponentThemes(colorTheme, inverse, isLight),
+    }
+  })
+
+  const baseSubThemes = {
+    ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
+    ...getComponentThemes(theme, inverseTheme, isLight),
+  }
+
+  return {
+    ...baseSubThemes,
+    ...allColorThemes,
+  }
+})
+
+function getAltThemes({
+  theme,
+  inverse,
+  isLight,
+  activeTheme,
+}: {
+  theme: SubTheme
+  inverse: SubTheme
+  isLight: boolean
+  activeTheme?: SubTheme
+}) {
+  const maskOptionsAlt = {
+    ...maskOptions,
+    override: overrideShadows,
+  }
+  const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt)
+  const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt)
+
+  const active =
+    activeTheme ??
+    (process.env.ACTIVE_THEME_INVERSE
+      ? inverse
+      : (() => {
+          return applyMask(theme, masks.weaker, {
+            ...maskOptions,
+            strength: 3,
+            skip: {
+              ...maskOptions.skip,
+              color: 1,
+            },
+          })
+        })())
+
+  return addChildren({ alt1, alt2, active }, (_, subTheme) => {
+    return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight)
+  })
+}
+
+function getComponentThemes(theme: SubTheme, inverse: SubTheme, isLight: boolean) {
+  const componentMaskOptions: MaskOptions = {
+    ...maskOptions,
+    override: overrideWithColors,
+    skip: {
+      ...maskOptions.skip,
+      // skip colors too just for component sub themes
+      ...templateColors,
+    },
+  }
+  const weaker1 = applyMask(theme, masks.weaker, componentMaskOptions)
+  const base = applyMask(weaker1, masks.stronger, componentMaskOptions)
+  const weaker2 = applyMask(weaker1, masks.weaker, componentMaskOptions)
+  const stronger1 = applyMask(theme, masks.stronger, componentMaskOptions)
+  const inverse1 = applyMask(inverse, masks.weaker, componentMaskOptions)
+  const inverse2 = applyMask(inverse1, masks.weaker, componentMaskOptions)
+  const strongerBorderLighterBackground: SubTheme = isLight
+    ? {
+        ...stronger1,
+        borderColor: weaker1.borderColor,
+        borderColorHover: weaker1.borderColorHover,
+        borderColorPress: weaker1.borderColorPress,
+        borderColorFocus: weaker1.borderColorFocus,
+      }
+    : {
+        ...applyMask(theme, masks.skip, componentMaskOptions),
+        borderColor: weaker1.borderColor,
+        borderColorHover: weaker1.borderColorHover,
+        borderColorPress: weaker1.borderColorPress,
+        borderColorFocus: weaker1.borderColorFocus,
+      }
+
+  const overlayTheme = {
+    background: isLight ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.9)',
+  } as SubTheme
+
+  const weaker2WithoutBorder = {
+    ...weaker2,
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+  }
+
+  return {
+    ListItem: isLight ? stronger1 : base,
+    Card: weaker1,
+    Button: weaker2WithoutBorder,
+    Checkbox: weaker2,
+    DrawerFrame: weaker1,
+    SliderTrack: stronger1,
+    SliderTrackActive: weaker2,
+    SliderThumb: inverse1,
+    Progress: weaker1,
+    ProgressIndicator: inverse,
+    Switch: weaker2,
+    SwitchThumb: inverse2,
+    TooltipArrow: weaker1,
+    TooltipContent: weaker2,
+    Input: strongerBorderLighterBackground,
+    TextArea: strongerBorderLighterBackground,
+    Tooltip: inverse1,
+    // make overlays always dark
+    SheetOverlay: overlayTheme,
+    DialogOverlay: overlayTheme,
+    ModalOverlay: overlayTheme,
+  }
+}
+
+export const themes = {
+  ...allThemes,
+  // bring back the full type, the rest use a subset to avoid clogging up ts,
+  // hanzo-gui will be smart and use the top level themes as the type for useTheme() etc
+  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
+  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),
+}
+
+// if (process.env.NODE_ENV === 'development') {
+//   console.log(JSON.stringify(themes).length)
+// }

package/src/themes.tsx

@@ -0,0 +1 @@
+export { themes } from './generated-new'

package/src/tokens.tsx

@@ -0,0 +1,199 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@hanzogui/colors/legacy'
+import type { Variable } from '@hanzogui/web'
+import { createTokens } from '@hanzogui/web'
+
+// 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}`
+
+const spaces = Object.entries(size).map(([k, v]) => {
+  return [k, sizeToSpace(v)] as const
+})
+
+// a bit odd but keeping backward compat for values >8 while fixing below
+function sizeToSpace(v: number) {
+  if (v === 0) return 0
+  if (v === 2) return 0.5
+  if (v === 4) return 1
+  if (v === 8) return 1.5
+  if (v <= 16) return Math.round(v * 0.333)
+  return Math.floor(v * 0.7 - 12)
+}
+
+const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v])
+
+type SizeKeysWithNegatives =
+  | Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'>
+  | SizeKeys
+
+type SizeKeysWithNegativesString = `$${SizeKeysWithNegatives}`
+
+export const space: {
+  [Key in SizeKeysWithNegativesString]: 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 colorTokens = {
+  light: {
+    blue: blue,
+    gray: gray,
+    green: green,
+    orange: orange,
+    pink: pink,
+    purple: purple,
+    red: red,
+    yellow: yellow,
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    yellow: yellowDark,
+  },
+}
+
+export const darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.yellow,
+}
+
+export const lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.yellow,
+}
+
+export const color = {
+  ...postfixObjKeys(lightColors, 'Light'),
+  ...postfixObjKeys(darkColors, 'Dark'),
+}
+
+function postfixObjKeys<
+  A extends { [key: string]: Variable<string> | string },
+  B extends string,
+>(
+  obj: A,
+  postfix: B
+): {
+  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string
+} {
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
+  ) as any
+}
+
+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 = createTokens({
+  color,
+  radius,
+  zIndex,
+  space,
+  size,
+})
+
+export type hello = 'asdad'

package/src/utils.ts

@@ -0,0 +1,51 @@
+export function postfixObjKeys<A extends { [key: string]: string }, B extends string>(
+  obj: A,
+  postfix: B
+): {
+  [Key in `${keyof A extends string ? keyof A : never}${B}`]: string
+} {
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])
+  ) as any
+}
+
+// a bit odd but keeping backward compat for values >8 while fixing below
+export function sizeToSpace(v: number) {
+  if (v === 0) return 0
+  if (v === 2) return 0.5
+  if (v === 4) return 1
+  if (v === 8) return 1.5
+  if (v <= 16) return Math.round(v * 0.333)
+  return Math.floor(v * 0.7 - 12)
+}
+
+export function objectFromEntries<ARR_T extends EntriesType>(
+  arr: ARR_T
+): EntriesToObject<ARR_T> {
+  return Object.fromEntries(arr) as EntriesToObject<ARR_T>
+}
+
+export type EntriesType =
+  | [PropertyKey, unknown][]
+  | ReadonlyArray<readonly [PropertyKey, unknown]>
+
+export type DeepWritable<OBJ_T> = { -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]> }
+export type UnionToIntersection<UNION_T> = // From https://stackoverflow.com/a/50375286
+  (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void
+    ? I
+    : never
+
+export type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> =
+  DeepWritable<ARR_T> extends (infer R)[]
+    ? R extends [infer key, infer val]
+      ? { [prop in key & PropertyKey]: val }
+      : never
+    : never
+export type MergeIntersectingObjects<ObjT> = { [key in keyof ObjT]: ObjT[key] }
+export type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<
+  UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>
+>
+
+export function objectKeys<O extends object>(obj: O) {
+  return Object.keys(obj) as Array<keyof O>
+}