@hanzogui/web 2.0.0

package/src/helpers/getThemeCSSRules.native.ts

@@ -0,0 +1,3 @@
+export function getThemeCSSRules() {
+  return []
+}

package/src/helpers/getThemeCSSRules.ts

@@ -0,0 +1,192 @@
+import { simpleHash } from '@hanzogui/helpers'
+import { getSetting } from '../config'
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
+import { variableToString } from '../createVariable'
+import type { CreateGuiProps, ThemeParsed, Variable } from '../types'
+import { getOrCreateVariable, getOrCreateMutatedVariable } from './registerCSSVariable'
+import { sortString } from './sortString'
+
+const darkLight = ['dark', 'light']
+const lightDark = ['light', 'dark']
+
+export function getThemeCSSRules(props: {
+  config: CreateGuiProps
+  themeName: string
+  theme: ThemeParsed
+  names: string[]
+  hasDarkLight?: boolean
+  // Use mutated variable prefix (mt) instead of regular (t) - for dynamic theme mutation
+  useMutatedVariables?: boolean
+}): string[] {
+  if (process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    // empty - CSS already extracted at build time
+  } else if (process.env.HANZO_GUI_TARGET === 'native') {
+    // no CSS on native
+  } else if (
+    !process.env.HANZO_GUI_DOES_SSR_CSS ||
+    process.env.HANZO_GUI_DOES_SSR_CSS === 'mutates-themes' ||
+    process.env.HANZO_GUI_DOES_SSR_CSS === 'false'
+  ) {
+    const cssRuleSets: string[] = []
+    const { config, themeName, theme, names } = props
+
+    // special case for SSR
+    const hasDarkLight =
+      props.hasDarkLight ??
+      (config.themes && ('light' in config.themes || 'dark' in config.themes))
+
+    const CNP = `.${THEME_CLASSNAME_PREFIX}`
+    let vars = ''
+
+    const variableCreator = props.useMutatedVariables
+      ? getOrCreateMutatedVariable
+      : getOrCreateVariable
+
+    for (const themeKey in theme) {
+      const variable = theme[themeKey] as Variable
+      const value = variableCreator(variable.val).variable
+      // Hash themeKey in case it has invalid chars too
+      vars += `--${process.env.HANZO_GUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
+        themeKey,
+        40
+      )}:${value};`
+    }
+
+    const isDarkBase = themeName === 'dark'
+    const isLightBase = themeName === 'light'
+    const baseSelectors = names.map((name) => `${CNP}${name}`)
+    const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
+
+    // since we dont specify dark/light in classnames we have to do an awkward specificity war
+    // hardcoded to support 2 levels of nesting (e.g. light > dark or dark > light)
+    if (hasDarkLight) {
+      const maxDepth = 2
+
+      for (const subName of names) {
+        const isDark = isDarkBase || subName.startsWith('dark_')
+        const isLight = !isDark && (isLightBase || subName.startsWith('light_'))
+
+        if (!(isDark || isLight)) {
+          // neither light nor dark subtheme, just generate one selector with :root:root which
+          // will override all :root light/dark selectors generated below
+          selectorsSet.add(`${CNP}${subName}`)
+          continue
+        }
+
+        const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, '')}`
+        const order = isDark ? darkLight : lightDark
+        const [stronger, weaker] = order
+        const numSelectors = Math.round(maxDepth * 1.5)
+
+        for (let depth = 0; depth < numSelectors; depth++) {
+          const isOdd = depth % 2 === 1
+
+          if (isOdd && depth < 3) {
+            continue
+          }
+
+          const parents = new Array(depth + 1).fill(0).map((_, idx) => {
+            return `${CNP}${idx % 2 === 0 ? stronger : weaker}`
+          })
+
+          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
+
+          if (isOdd) {
+            const [_first, second, ...rest] = parentSelectors
+            parentSelectors = [second, ...rest, second]
+          }
+
+          const lastParentSelector = parentSelectors[parentSelectors.length - 1]
+          const nextChildSelector =
+            childSelector === lastParentSelector ? '' : childSelector
+
+          // for light/dark/light:
+          const parentSelectorString = parentSelectors.join(' ')
+          selectorsSet.add(`${parentSelectorString} ${nextChildSelector}`)
+        }
+      }
+    }
+
+    const selectors = [...selectorsSet].sort(sortString)
+
+    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
+    const selectorsString =
+      selectors
+        .map((x) => {
+          const addTo = getSetting('addThemeClassName')
+          const isOnRoot = isBaseTheme(x) && (addTo === 'html' || addTo === 'body')
+          if (!isOnRoot) return `:root ${x}`
+          return `${addTo === 'body' ? 'body' : ':root'}${x}`
+        })
+        .join(', ') + `, .tm_xxt`
+
+    const css = `${selectorsString} {${vars}}`
+    cssRuleSets.push(css)
+
+    if (getSetting('shouldAddPrefersColorThemes')) {
+      const isDark = themeName.startsWith('dark')
+      const baseName = isDark ? 'dark' : 'light'
+      const lessSpecificSelectors = selectors
+        .map((x) => {
+          if (x == darkSelector || x === lightSelector) return `:root`
+          if (
+            (isDark && x.startsWith(lightSelector)) ||
+            (!isDark && x.startsWith(darkSelector))
+          ) {
+            return
+          }
+          return x.replace(/^\.t_(dark|light) /, '').trim()
+        })
+        .filter(Boolean)
+        .join(', ')
+
+      // only emit body background/color for base themes, not every sub-theme
+      const isBase = !themeName.includes('_')
+      let bodyRulesString = ''
+      if (isBase) {
+        const bgString = theme.background
+          ? `background:${variableToString(theme.background)};`
+          : ''
+        const fgString = theme.color ? `color:${variableToString(theme.color)}` : ''
+        bodyRulesString = bgString || fgString ? `body{${bgString}${fgString}}\n    ` : ''
+      }
+
+      const themeRules = `${lessSpecificSelectors} {${vars}}`
+      const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+    ${bodyRulesString}${themeRules}
+  }`
+      cssRuleSets.push(prefersMediaSelectors)
+    }
+
+    const selectionStyles = getSetting('selectionStyles')
+    if (selectionStyles) {
+      const rules = selectionStyles(theme as any)
+      if (rules) {
+        const selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(', ')
+        const styles = Object.entries(rules)
+          .flatMap(([k, v]) =>
+            v
+              ? `${k === 'backgroundColor' ? 'background' : k}:${variableToString(v)}`
+              : []
+          )
+          .join(';')
+        if (styles) {
+          const css = `${selectionSelectors}{${styles}}`
+          cssRuleSets.push(css)
+        }
+      }
+    }
+
+    return cssRuleSets
+  }
+
+  return []
+}
+
+const darkSelector = '.t_dark'
+const lightSelector = '.t_light'
+const isBaseTheme = (x: string) =>
+  x === darkSelector ||
+  x === lightSelector ||
+  x.startsWith('.t_dark ') ||
+  x.startsWith('.t_light ')

package/src/helpers/getTokenForKey.ts

@@ -0,0 +1,223 @@
+import { tokenCategories } from '@hanzogui/helpers'
+import { getConfig } from '../config'
+import { isVariable } from '../createVariable'
+import type {
+  GetStyleState,
+  ResolveVariableAs,
+  SplitStyleProps,
+  Variable,
+} from '../types'
+import { getFontsForLanguage } from './getVariantExtras'
+import { normalizeColor } from './normalizeColor'
+
+const fontShorthand = {
+  fontSize: 'size',
+  fontWeight: 'weight',
+}
+
+let didLogMissingToken = false
+const colorKeys = tokenCategories.color
+
+// mutable state for font family tracking across propMapper
+let _lastFontFamilyToken: any = null
+
+export function getLastFontFamilyToken() {
+  return _lastFontFamilyToken
+}
+
+export function setLastFontFamilyToken(value: any) {
+  _lastFontFamilyToken = value
+}
+
+export const getTokenForKey = (
+  key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+) => {
+  let resolveAs = styleProps.resolveValues || 'none'
+
+  if (resolveAs === 'none') {
+    return value
+  }
+
+  // parse opacity modifier: $token/50 → base token + 50% opacity
+  // only for color-related style properties
+  let opacityModifier: number | undefined
+  if (key in colorKeys) {
+    const slashIdx = value.indexOf('/')
+    if (slashIdx > 0) {
+      const raw = value.slice(slashIdx + 1)
+      // reject empty string after slash ($color/) to avoid Number("") === 0
+      if (raw.length > 0) {
+        const num = Number(raw)
+        if (!Number.isNaN(num)) {
+          opacityModifier = Math.max(0, Math.min(1, num / 100))
+          value = value.slice(0, slashIdx)
+        }
+      }
+    }
+  }
+
+  const { theme, conf = getConfig(), context, fontFamily, staticConfig } = styleState
+
+  const themeValue = theme ? theme[value] || theme[value.slice(1)] : undefined
+
+  const tokensParsed = conf.tokensParsed
+  let valOrVar: any
+  let hasSet = false
+
+  const customTokenAccept = staticConfig?.accept?.[key]
+  if (customTokenAccept) {
+    const val = themeValue ?? tokensParsed[customTokenAccept]?.[value]
+    if (val != null) {
+      resolveAs = 'value' // always resolve custom tokens as values
+      valOrVar = val
+      hasSet = true
+    }
+  }
+
+  if (themeValue) {
+    if (resolveAs === 'except-theme') {
+      return value
+    }
+
+    valOrVar = themeValue
+    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
+      globalThis.guiAvoidTracking = true
+      console.info(
+        ` - resolving ${key} to theme value ${value} resolveAs ${resolveAs}`,
+        valOrVar
+      )
+      globalThis.guiAvoidTracking = false
+    }
+    hasSet = true
+  } else {
+    if (value in conf.specificTokens) {
+      hasSet = true
+      valOrVar = conf.specificTokens[value]
+    } else {
+      switch (key) {
+        case 'fontFamily': {
+          const fontsParsed = context?.language
+            ? getFontsForLanguage(conf.fontsParsed, context.language)
+            : conf.fontsParsed
+          valOrVar = fontsParsed[value]?.family || value
+          setLastFontFamilyToken(value)
+          hasSet = true
+          break
+        }
+        case 'fontSize':
+        case 'lineHeight':
+        case 'letterSpacing':
+        case 'fontWeight': {
+          const fam = fontFamily || conf.defaultFontToken
+          if (fam) {
+            const fontsParsed = context?.language
+              ? getFontsForLanguage(conf.fontsParsed, context.language)
+              : conf.fontsParsed
+            const font = fontsParsed[fam] || fontsParsed[conf.defaultFontToken]
+            valOrVar = font?.[fontShorthand[key] || key]?.[value] || value
+            hasSet = true
+          }
+          break
+        }
+      }
+      for (const cat in tokenCategories) {
+        if (key in tokenCategories[cat]) {
+          const res = tokensParsed[cat]?.[value]
+
+          if (res != null) {
+            valOrVar = res
+            hasSet = true
+          } else {
+            if (process.env.NODE_ENV === 'development') {
+              if (process.env.HANZO_GUI_DISABLE_MISSING_TOKEN_LOG !== '1') {
+                if (!didLogMissingToken) {
+                  didLogMissingToken = true
+                  console.groupCollapsed(
+                    `[hanzo-gui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
+                  )
+                  console.info(
+                    `Note: this could just be due to you not setting all the theme tokens Hanzo GUI expects, which is harmless, but
+                    it also often can be because you have a duplicated Hanzo GUI in your bundle, which can cause tricky bugs.`
+                  )
+                  console.info(
+                    `To see if you have duplicated dependencies, in Chrome DevTools hit CMD+P and type GuiProvider.
+                    If you see both a .cjs and a .mjs entry, it's duplicated.`
+                  )
+                  console.info(
+                    `You can debug that issue by opening the .mjs and .cjs files and setting a breakpoint at the top of each.`
+                  )
+                  console.info(
+                    `We only log this warning one time as it's sometimes harmless, to disable this log entirely set process.env.HANZO_GUI_DISABLE_MISSING_TOKEN_LOG=1.`
+                  )
+                  console.groupEnd()
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    if (!hasSet) {
+      const spaceVar = tokensParsed.space[value]
+      if (spaceVar != null) {
+        valOrVar = spaceVar
+        hasSet = true
+      }
+    }
+  }
+
+  if (hasSet) {
+    let out = resolveVariableValue(key, valOrVar, resolveAs)
+
+    // apply opacity modifier via color-mix (web) or rgba (native)
+    if (opacityModifier !== undefined && opacityModifier < 1) {
+      out = normalizeColor(String(out), opacityModifier) ?? out
+    }
+
+    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
+      globalThis.guiAvoidTracking = true
+      console.info(`resolved`, resolveAs, valOrVar, out)
+      globalThis.guiAvoidTracking = false
+    }
+    return out
+  }
+
+  // they didn't define this token don't return anything, we could warn?
+
+  if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
+    console.warn(`Warning: no token found for ${key}, omitting`)
+  }
+}
+
+export function resolveVariableValue(
+  key: string,
+  valOrVar: Variable | any,
+  resolveValues?: ResolveVariableAs
+) {
+  if (resolveValues === 'none') {
+    return valOrVar
+  }
+  if (isVariable(valOrVar)) {
+    if (resolveValues === 'value') {
+      return valOrVar.val
+    }
+
+    // @ts-expect-error this is fine until we can type better
+    const get = valOrVar?.get
+
+    // shadowColor doesn't support dynamic style
+    if (process.env.HANZO_GUI_TARGET !== 'native' || key !== 'shadowColor') {
+      if (typeof get === 'function') {
+        const resolveDynamicFor = resolveValues === 'web' ? 'web' : undefined
+        return get(resolveDynamicFor)
+      }
+    }
+
+    return process.env.HANZO_GUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
+  }
+  return valOrVar
+}

package/src/helpers/getVariantExtras.tsx

@@ -0,0 +1,67 @@
+import { getSetting } from '../config'
+import { getVariableValue } from '../createVariable'
+import type { GenericFonts, GetStyleState, LanguageContextType } from '../types'
+
+const cache = new WeakMap()
+
+export const getVariantExtras = (styleState: GetStyleState) => {
+  if (cache.has(styleState)) {
+    return cache.get(styleState)
+  }
+
+  const { props, conf, context, theme, styleProps } = styleState
+  const styledContext = styleProps.styledContext
+  let fonts = conf.fontsParsed
+  if (context?.language) {
+    fonts = getFontsForLanguage(conf.fontsParsed, context.language)
+  }
+
+  const next = {
+    fonts,
+    tokens: conf.tokensParsed,
+    theme,
+    context: styledContext,
+    get fontFamily() {
+      return (
+        getVariableValue(styleState.fontFamily || styleState.props.fontFamily) ||
+        props.fontFamily ||
+        getVariableValue(getSetting('defaultFont'))
+      )
+    },
+    get font() {
+      return (
+        fonts[this.fontFamily] ||
+        (!props.fontFamily || props.fontFamily[0] === '$'
+          ? fonts[getSetting('defaultFont') || '']
+          : undefined)
+      )
+    },
+    props,
+  }
+
+  cache.set(styleState, next)
+
+  return next as any
+}
+
+const fontLanguageCache = new WeakMap()
+
+export function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {
+  if (fontLanguageCache.has(language)) {
+    return fontLanguageCache.get(language)
+  }
+  const next = {
+    ...fonts,
+    ...Object.fromEntries(
+      Object.entries(language).flatMap(([name, lang]) => {
+        if (lang === 'default') {
+          return []
+        }
+        const langKey = `$${name}_${lang}`
+        return [[`$${name}`, fonts[langKey]]]
+      })
+    ),
+  }
+  fontLanguageCache.set(language, next)
+  return next
+}