@tamagui/config-v5 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/theme-builder/masks.tsx

@@ -0,0 +1,83 @@
+// copied from @tamagui/themes
+
+import type { MaskDefinitions } from '../create-theme'
+import {
+  combineMasks,
+  createIdentityMask,
+  createInverseMask,
+  createMask,
+  createSoftenMask,
+  createStrengthenMask,
+  skipMask,
+} from '../create-theme'
+
+export const masks = {
+  identity: createIdentityMask(),
+  soften: createSoftenMask(),
+  soften2: createSoftenMask({ strength: 2 }),
+  soften3: createSoftenMask({ strength: 3 }),
+  strengthen: createStrengthenMask(),
+  inverse: createInverseMask(),
+  inverseSoften: combineMasks(createInverseMask(), createSoftenMask({ strength: 2 })),
+  inverseSoften2: combineMasks(createInverseMask(), createSoftenMask({ strength: 3 })),
+  inverseSoften3: combineMasks(createInverseMask(), createSoftenMask({ strength: 4 })),
+  inverseStrengthen2: combineMasks(
+    createInverseMask(),
+    createStrengthenMask({ strength: 2 })
+  ),
+  strengthenButSoftenBorder: createMask((template, options) => {
+    const stronger = createStrengthenMask().mask(template, options)
+    const softer = createSoftenMask().mask(template, options)
+    return {
+      ...stronger,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus,
+    }
+  }),
+  soften2Border1: createMask((template, options) => {
+    const softer2 = createSoftenMask({ strength: 2 }).mask(template, options)
+    const softer1 = createSoftenMask({ strength: 1 }).mask(template, options)
+    return {
+      ...softer2,
+      borderColor: softer1.borderColor,
+      borderColorHover: softer1.borderColorHover,
+      borderColorPress: softer1.borderColorPress,
+      borderColorFocus: softer1.borderColorFocus,
+    }
+  }),
+  soften3FlatBorder: createMask((template, options) => {
+    const borderMask = createSoftenMask({ strength: 2 }).mask(template, options)
+    const softer3 = createSoftenMask({ strength: 3 }).mask(template, options)
+    return {
+      ...softer3,
+      borderColor: borderMask.borderColor,
+      borderColorHover: borderMask.borderColorHover,
+      borderColorPress: borderMask.borderColorPress,
+      borderColorFocus: borderMask.borderColorFocus,
+    }
+  }),
+  softenBorder: createMask((template, options) => {
+    const plain = skipMask.mask(template, options)
+    const softer = createSoftenMask().mask(template, options)
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus,
+    }
+  }),
+  softenBorder2: createMask((template, options) => {
+    const plain = skipMask.mask(template, options)
+    const softer = createSoftenMask({ strength: 2 }).mask(template, options)
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus,
+    }
+  }),
+} satisfies MaskDefinitions

package/src/theme-builder/types.ts

@@ -0,0 +1,97 @@
+import type { Template } from '../create-theme'
+
+export type GetThemeFn<ThemeType extends Record<string, string | number>> = (props: {
+  name: string
+  theme: Record<string, string>
+  scheme?: 'light' | 'dark'
+  parentName: string
+  parentNames: string[]
+  level: number
+  palette?: string[]
+  template?: Template
+}) => ThemeType
+
+export type TemplateStrategy = 'base' | 'stronger' | 'strongest'
+
+export type ThemeSuiteItem = {
+  id: string
+  name: string
+  createdAt: number
+  updatedAt: number
+  schemes: { light: boolean; dark: boolean }
+  palettes: Record<string, BuildPalette>
+  templateStrategy?: TemplateStrategy
+}
+
+export type ThemeSuiteItemData = Omit<ThemeSuiteItem, 'id' | 'createdAt' | 'updatedAt'>
+
+export type BuildTemplates = Record<string, Template>
+
+export type BuildSubTheme = BuildTheme
+
+export type BuildPalettes = Record<string, BuildPalette>
+
+export type BuildPalette = {
+  name: string
+  scale?: ScaleTypeName
+  anchors: BuildThemeAnchor[]
+}
+
+export type BuildThemeSuiteProps = Omit<ThemeSuiteItemData, 'name'>
+
+export type BuildThemeSuitePalettes = {
+  light: string[]
+  dark: string[]
+  lightAccent?: string[]
+  darkAccent?: string[]
+}
+
+export type ScaleTypeName =
+  | 'custom'
+  | 'radix'
+  | 'radix-b'
+  | 'radius-bold'
+  | 'radius-bright'
+  | 'linear'
+  | 'pastel'
+  | 'pastel-desaturating'
+  | 'neon'
+  | 'neon-bright'
+  | 'neon-c'
+
+export type BuildThemeBase = {
+  id: string
+  name: string
+  errors?: string[]
+}
+
+export type BuildThemeAnchor = {
+  index: number
+  hue: {
+    light: number
+    dark: number
+    sync?: boolean
+    syncLeft?: boolean
+  }
+  sat: {
+    light: number
+    dark: number
+    sync?: boolean
+    syncLeft?: boolean
+  }
+  lum: {
+    light: number
+    dark: number
+  }
+  alpha: {
+    light: number
+    dark: number
+  }
+}
+
+export type BuildTheme = BuildThemeBase & {
+  type: 'theme'
+  template: string
+  palette: string
+  accent?: BuildTheme
+}

package/src/v5/opacify.ts

@@ -0,0 +1,125 @@
+/**
+ * Interpolate between two colors
+ * @param color1 - First color (hex or hsl)
+ * @param color2 - Second color (hex or hsl)
+ * @param amount - 0 = color1, 1 = color2, 0.5 = middle
+ */
+export function interpolateColor(color1: string, color2: string, amount: number): string {
+  const rgb1 = parseToRgb(color1)
+  const rgb2 = parseToRgb(color2)
+  if (!rgb1 || !rgb2) return color1
+
+  const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * amount)
+  const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * amount)
+  const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * amount)
+
+  return `rgb(${r}, ${g}, ${b})`
+}
+
+function parseToRgb(color: string): { r: number; g: number; b: number } | null {
+  if (typeof color !== 'string') return null
+
+  // Handle hex
+  if (color.startsWith('#')) {
+    let hex = color.slice(1)
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+    if (hex.length >= 6) {
+      return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+      }
+    }
+  }
+
+  // Handle rgb/rgba
+  if (color.startsWith('rgb')) {
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+    if (match) {
+      return {
+        r: Number.parseInt(match[1], 10),
+        g: Number.parseInt(match[2], 10),
+        b: Number.parseInt(match[3], 10),
+      }
+    }
+  }
+
+  // Handle hsl/hsla
+  if (color.startsWith('hsl')) {
+    const match = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/)
+    if (match) {
+      const h = Number.parseInt(match[1], 10)
+      const s = Number.parseInt(match[2], 10) / 100
+      const l = Number.parseInt(match[3], 10) / 100
+      return hslToRgb(h, s, l)
+    }
+  }
+
+  return null
+}
+
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  let r: number
+  let g: number
+  let b: number
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1
+      if (t > 1) t -= 1
+      if (t < 1 / 6) return p + (q - p) * 6 * t
+      if (t < 1 / 2) return q
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h / 360 + 1 / 3)
+    g = hue2rgb(p, q, h / 360)
+    b = hue2rgb(p, q, h / 360 - 1 / 3)
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
+}
+
+export function opacify(color: string, opacity = 0.1): string {
+  // Handle dynamic color objects
+  if (typeof color !== 'string') return color
+
+  // handle hsl/hsla
+  if (color.startsWith('hsl')) {
+    const match = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/)
+    if (match) {
+      const [, h, s, l] = match
+      return `hsla(${h}, ${s}%, ${l}%, ${opacity})`
+    }
+  }
+
+  // handle hex
+  if (color.startsWith('#')) {
+    let hex = color.slice(1)
+
+    // expand shorthand hex
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+
+    // set alpha channel to specified opacity
+    if (hex.length === 6 || hex.length === 8) {
+      const alphaHex = Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, '0')
+      return `#${hex.slice(0, 6)}${alphaHex}`
+    }
+  }
+
+  return color
+}

package/src/v5/subtleChildrenThemes.ts

@@ -0,0 +1,54 @@
+import {
+  type PaletteAdjustments,
+  defaultChildrenThemes,
+  adjustPalettes,
+} from './v5-themes'
+
+export const v5SubtlePaletteAdjustments: PaletteAdjustments<
+  typeof defaultChildrenThemes
+> = {
+  default: {
+    light: (hsl) => ({
+      ...hsl,
+      s: hsl.s * 0.9,
+    }),
+    dark: (hsl, i) => ({
+      ...hsl,
+      s: hsl.s * (i <= 4 ? 0.7 : 0.9),
+    }),
+  },
+  // yellow palette in radix is especially off from the rest
+  yellow: {
+    light: (hsl, i) => {
+      // progressively darken and desaturate toward text colors for better contrast
+      // i=1 is lightest bg, i=12 is darkest text
+      const t = (i - 1) / 11 // 0 to 1
+
+      // saturation: starts at sStart, ends at sEnd
+      const sStart = 0.65
+      const sEnd = 0.4
+
+      // lightness: starts at lStart, ends at lEnd
+      const lStart = 1.08
+      const lEnd = 0.8
+
+      return {
+        ...hsl,
+        s: hsl.s * (sStart + t * (sEnd - sStart)),
+        l: hsl.l * (lStart + t * (lEnd - lStart)),
+      }
+    },
+
+    dark: (hsl, i) => ({
+      ...hsl,
+      s: hsl.s * (i <= 7 ? 0.45 : 0.55),
+      l: hsl.l * (i <= 4 ? 0.8 : 1),
+    }),
+  },
+}
+
+export const subtleChildrenThemes = adjustPalettes(defaultChildrenThemes, {
+  ...v5SubtlePaletteAdjustments,
+  gray: undefined, // skip
+  neutral: undefined, // skip
+})

package/src/v5/v5-builder.ts

@@ -0,0 +1,6 @@
+// v5 theme builder entry - everything needed to build custom v5 themes at
+// runtime. this pulls in the internal legacy builder and @tamagui/colors, while
+// the default @tamagui/themes/v5 entry stays static and builder-free.
+export { createThemes } from '../theme-builder'
+export { v5Templates } from './v5-templates'
+export * from './v5-themes'

package/src/v5/v5-subtle-builder.ts

@@ -0,0 +1,5 @@
+// v5-subtle theme builder entry - the v5 builder plus the pre-built subtle
+// palette adjustments. like v5-builder this stays in the opt-in config-v5
+// package while the default @tamagui/themes/v5-subtle entry remains static.
+export * from './v5-builder'
+export { subtleChildrenThemes, v5SubtlePaletteAdjustments } from './subtleChildrenThemes'

package/src/v5/v5-templates.ts

@@ -0,0 +1,126 @@
+import { PALETTE_BACKGROUND_OFFSET, type BuildTemplates } from '../theme-builder'
+
+const objectFromEntries = <const T extends readonly (readonly [string, any])[]>(
+  entries: T
+): { [K in T[number] as K[0]]: K[1] } => {
+  return Object.fromEntries(entries) as any
+}
+
+const objectKeys = <O extends object>(obj: O): (keyof O)[] => {
+  return Object.keys(obj) as (keyof O)[]
+}
+
+const getTemplates = () => {
+  const lightTemplates = getBaseTemplates('light')
+  const darkTemplates = getBaseTemplates('dark')
+  const templates = {
+    ...objectFromEntries(
+      objectKeys(lightTemplates).map(
+        (name) => [`light_${name}`, lightTemplates[name]] as const
+      )
+    ),
+    ...objectFromEntries(
+      objectKeys(darkTemplates).map(
+        (name) => [`dark_${name}`, darkTemplates[name]] as const
+      )
+    ),
+  }
+  return templates as Record<keyof typeof templates, typeof lightTemplates.base>
+}
+
+const getBaseTemplates = (scheme: 'dark' | 'light') => {
+  const isLight = scheme === 'light'
+
+  // our palettes have PALETTE_BACKGROUND_OFFSET things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+
+  // base
+  const background = PALETTE_BACKGROUND_OFFSET
+  const borderColor = background + 2
+  const color = -background
+
+  // helper for surface themes - they need their own hover/press/focus calculations
+  // because those need to be relative to their elevated background, not base
+  const makeSurface = (offset: number, colorOffset = 0) => {
+    const clr = color - colorOffset
+    const bg = background + offset
+    const brdr = borderColor + offset
+
+    return {
+      color: clr,
+      colorHover: clr + (isLight ? 0 : lighten),
+      colorPress: clr,
+      colorFocus: clr + darken,
+
+      background: bg,
+      // hover lightens always
+      backgroundHover: bg + lighten,
+      // press darkens always
+      backgroundPress: bg + darken,
+      // focus: lightens in dark mode, darkens in light
+      backgroundFocus: bg + offset,
+      backgroundActive: bg,
+
+      borderColor: brdr,
+      borderColorHover: brdr + lighten,
+      borderColorFocus: brdr,
+      borderColorPress: brdr + darken,
+    }
+  }
+
+  // templates use the palette and specify index
+  // negative goes backwards from end so -1 is the last item
+  const base = {
+    accentBackground: 0,
+    accentColor: -0,
+    background0: 1,
+    background02: 2,
+    background04: 3,
+    background06: 4,
+    background08: 5,
+    color1: background,
+    color2: background + 1,
+    color3: background + 2,
+    color4: background + 3,
+    color5: background + 4,
+    color6: background + 5,
+    color7: background + 6,
+    color8: background + 7,
+    color9: background + 8,
+    color10: background + 9,
+    color11: background + 10,
+    color12: background + 11,
+    color0: -1,
+    color02: -2,
+    color04: -3,
+    color06: -4,
+    color08: -5,
+    // v5 = we make this actually 1 up (surface1 technically from before)
+    // this way "generics" are automatically differentiated from base bg
+    ...makeSurface(1),
+    placeholderColor: color - 3,
+    colorTransparent: -1,
+  }
+
+  const surface1 = makeSurface(2, 1)
+  const surface2 = makeSurface(3, 1)
+  const surface3 = makeSurface(5, 1)
+
+  const accent = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    accent,
+  } satisfies BuildTemplates
+}
+
+export const v5Templates = getTemplates()