@tamagui/themes 1.121.11 → 1.121.12

package/src/v4-createTheme.ts

@@ -0,0 +1,403 @@
+import { createThemeBuilder, type ThemeBuilder } from '@tamagui/theme-builder'
+import { parseToHsla } from 'color2k'
+import { getThemeSuitePalettes } from './getThemeSuitePalettes'
+import type { BuildPalettes, BuildTemplates, BuildThemeSuiteProps } from './types'
+import { defaultTemplates } from './v4-defaultTemplates'
+
+export { getThemeSuitePalettes, PALETTE_BACKGROUND_OFFSET } from './getThemeSuitePalettes'
+export type * from './types'
+export { defaultTemplates } from './v4-defaultTemplates'
+
+/**
+ * TODO
+ *
+ *  - we avoidNestingWithin accent, but sometimes want it eg v4-tamagui grandChildren
+ *    a good default would be to IF palette is set, dont nest, IF only template, nest
+ *    needs to update both runtime logic and types
+ */
+
+type ExtraThemeValues = Record<string, string>
+type ExtraThemeValuesByScheme<Values extends ExtraThemeValues = ExtraThemeValues> = {
+  dark: Values
+  light: Values
+}
+
+type SimpleThemeDefinition = { palette?: Palette; template?: string }
+type BaseThemeDefinition<Extra extends ExtraThemeValuesByScheme> = {
+  palette: Palette
+  template?: string
+  extra?: Extra
+}
+
+type SimpleThemesDefinition = Record<string, SimpleThemeDefinition>
+type SimplePaletteDefinitions = Record<string, string[]>
+
+type SinglePalette = string[]
+type SchemePalette = { light: SinglePalette; dark: SinglePalette }
+type Palette = SinglePalette | SchemePalette
+
+const defaultPalettes: SimplePaletteDefinitions = createPalettes(
+  getThemesPalettes({
+    base: {
+      palette: ['#fff', '#000'],
+    },
+    accent: {
+      palette: ['#ff0000', '#ff9999'],
+    },
+  })
+)
+
+export type CreateThemesProps<
+  Accent extends BaseThemeDefinition<Extra> | undefined = undefined,
+  GrandChildrenThemes extends SimpleThemesDefinition | undefined = undefined,
+  Extra extends ExtraThemeValuesByScheme = ExtraThemeValuesByScheme,
+  ChildrenThemes extends SimpleThemesDefinition = SimpleThemesDefinition,
+  ComponentThemes extends SimpleThemesDefinition = SimpleThemesDefinition,
+  Templates extends BuildTemplates = typeof defaultTemplates,
+> = {
+  base: BaseThemeDefinition<Extra>
+  accent?: Accent
+  childrenThemes?: ChildrenThemes
+  grandChildrenThemes?: GrandChildrenThemes
+  templates?: Templates
+  componentThemes?: ComponentThemes
+  colorsToTheme?: (props: {
+    colors: string[]
+    name: string
+    scheme?: 'light' | 'dark'
+  }) => Record<string, string>
+}
+
+export function createThemeSuite<
+  Extra extends ExtraThemeValuesByScheme,
+  SubThemes extends SimpleThemesDefinition,
+  ComponentThemes extends SimpleThemesDefinition,
+  GrandChildrenThemes extends SimpleThemesDefinition | undefined = undefined,
+  Accent extends BaseThemeDefinition<Extra> | undefined = undefined,
+>(
+  props: CreateThemesProps<Accent, GrandChildrenThemes, Extra, SubThemes, ComponentThemes>
+) {
+  const {
+    accent,
+    childrenThemes,
+    grandChildrenThemes,
+    templates = defaultTemplates,
+    componentThemes = defaultComponentThemes as unknown as any,
+  } = props
+
+  const builder = createSimpleThemeBuilder({
+    extra: props.base.extra,
+    componentThemes,
+    palettes: createPalettes(getThemesPalettes(props)),
+    templates: templates as typeof defaultTemplates,
+    accentTheme: !!accent as Accent extends undefined ? false : true,
+    childrenThemes: normalizeSubThemes(childrenThemes),
+    grandChildrenThemes: (grandChildrenThemes
+      ? normalizeSubThemes(grandChildrenThemes)
+      : undefined) as GrandChildrenThemes extends undefined
+      ? undefined
+      : Record<keyof GrandChildrenThemes, any>,
+  })
+
+  return builder.themes
+}
+
+function normalizeSubThemes<A extends SimpleThemesDefinition>(defs?: A) {
+  return Object.fromEntries(
+    Object.entries(defs || {}).map(([name, value]) => {
+      return [
+        name,
+        {
+          palette: name,
+          template: value.template || 'base',
+        },
+      ]
+    })
+  ) as Record<keyof A, any>
+}
+
+type NamesWithChildrenNames<ParentNames extends string, ChildNames> =
+  | ParentNames
+  | (ChildNames extends string ? `${ParentNames}_${ChildNames}` : never)
+
+// a simpler API surface
+export function createSimpleThemeBuilder<
+  Extra extends ExtraThemeValuesByScheme,
+  Templates extends BuildTemplates,
+  Palettes extends SimplePaletteDefinitions,
+  ChildrenThemes extends Record<
+    string,
+    {
+      template: keyof Templates extends string ? keyof Templates : never
+      palette?: string
+    }
+  >,
+  GrandChildrenThemes extends
+    | undefined
+    | Record<
+        string,
+        {
+          template: keyof Templates extends string ? keyof Templates : never
+          palette?: string
+        }
+      >,
+  HasAccent extends boolean,
+  ComponentThemes extends SimpleThemesDefinition,
+  FullTheme = {
+    [ThemeKey in keyof Templates['light_base'] | keyof Extra['dark']]: string
+  },
+>(props: {
+  palettes?: Palettes
+  accentTheme?: HasAccent
+  templates?: Templates
+  childrenThemes?: ChildrenThemes
+  grandChildrenThemes?: GrandChildrenThemes
+  componentThemes?: ComponentThemes
+  extra?: Extra
+}): {
+  themeBuilder: ThemeBuilder<any>
+  themes: {
+    [Key in
+      | 'light'
+      | 'dark'
+      | (HasAccent extends true ? 'light_accent' | 'dark_accent' : never)
+      | (keyof ChildrenThemes extends string
+          ? `${'light' | 'dark'}_${GrandChildrenThemes extends undefined
+              ? keyof ChildrenThemes
+              : NamesWithChildrenNames<keyof ChildrenThemes, keyof GrandChildrenThemes>}`
+          : never)]: FullTheme
+  }
+} {
+  const {
+    extra,
+    childrenThemes = null as unknown as ChildrenThemes,
+    grandChildrenThemes = null as unknown as GrandChildrenThemes,
+    templates = defaultTemplates as unknown as Templates,
+    palettes = defaultPalettes as unknown as Palettes,
+    componentThemes = templates === (defaultTemplates as any)
+      ? (defaultComponentThemes as unknown as ComponentThemes)
+      : undefined,
+  } = props
+
+  // start theme-builder
+  let themeBuilder = createThemeBuilder()
+    .addPalettes(palettes)
+    .addTemplates(templates)
+    .addThemes({
+      light: {
+        template: 'base',
+        palette: 'light',
+        nonInheritedValues: extra?.light,
+      },
+      dark: {
+        template: 'base',
+        palette: 'dark',
+        nonInheritedValues: extra?.dark,
+      },
+    })
+    .addChildThemes(
+      palettes.light_accent
+        ? {
+            accent: [
+              {
+                parent: 'light',
+                template: 'base',
+                palette: 'light_accent',
+              },
+              {
+                parent: 'dark',
+                template: 'base',
+                palette: 'dark_accent',
+              },
+            ],
+          }
+        : {}
+    )
+
+  if (childrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(childrenThemes, {
+      avoidNestingWithin: ['accent'],
+    }) as any
+  }
+
+  if (grandChildrenThemes) {
+    themeBuilder = themeBuilder.addChildThemes(grandChildrenThemes, {
+      avoidNestingWithin: ['accent'],
+    }) as any
+  }
+
+  if (componentThemes) {
+    themeBuilder = themeBuilder.addComponentThemes(getComponentThemes(componentThemes), {
+      avoidNestingWithin: [
+        // ...Object.keys(childrenThemes || {}),
+        ...Object.keys(grandChildrenThemes || {}),
+      ],
+    })
+  }
+
+  return {
+    themeBuilder,
+    themes: themeBuilder.build() as any,
+  }
+}
+
+// for studio
+// allows more detailed configuration, used by studio
+// eventually we should merge this down into simple and have it handle what we need
+export function createThemes(props: BuildThemeSuiteProps) {
+  const palettes = createPalettes(props.palettes)
+  return createSimpleThemeBuilder({
+    palettes,
+    templates: props.templates,
+    componentThemes: defaultComponentThemes,
+  })
+}
+
+function getSchemePalette(colors: SinglePalette): SchemePalette {
+  return {
+    light: colors,
+    dark: colors.toReversed(),
+  }
+}
+
+function getAnchors(palette: SchemePalette) {
+  const maxIndex = 11
+  const numItems = palette.light.length
+
+  const anchors = palette.light.map((lcolor, index) => {
+    const dcolor = palette.dark[index]
+    const [lhue, lsat, llum] = parseToHsla(lcolor)
+    const [dhue, dsat, dlum] = parseToHsla(dcolor)
+    return {
+      index: spreadIndex(maxIndex, numItems, index),
+      hue: { light: lhue, dark: dhue },
+      sat: { light: lsat, dark: dsat },
+      lum: { light: llum, dark: dlum },
+    } as const
+  })
+
+  return anchors
+}
+
+function spreadIndex(maxIndex: number, numItems: number, index: number) {
+  return Math.round((index / (numItems - 1)) * maxIndex)
+}
+
+function coerceSimplePaletteToSchemePalette(def: Palette) {
+  return Array.isArray(def) ? getSchemePalette(def) : def
+}
+
+function getThemesPalettes(props: CreateThemesProps<any, any>): BuildPalettes {
+  const base = coerceSimplePaletteToSchemePalette(props.base.palette)
+  const accent = props.accent
+    ? coerceSimplePaletteToSchemePalette(props.accent.palette)
+    : null
+
+  const baseAnchors = getAnchors(base)
+
+  function getSubThemesPalettes(defs: SimpleThemesDefinition) {
+    return Object.fromEntries(
+      Object.entries(defs).map(([key, value]) => {
+        return [
+          key,
+          {
+            name: key,
+            anchors: value.palette
+              ? getAnchors(coerceSimplePaletteToSchemePalette(value.palette))
+              : baseAnchors,
+          },
+        ]
+      })
+    )
+  }
+
+  return {
+    base: {
+      name: 'base',
+      anchors: baseAnchors,
+    },
+    ...(accent && {
+      accent: {
+        name: 'accent',
+        anchors: getAnchors(accent),
+      },
+    }),
+    ...(props.childrenThemes && getSubThemesPalettes(props.childrenThemes)),
+    ...(props.grandChildrenThemes && getSubThemesPalettes(props.grandChildrenThemes)),
+  }
+}
+
+export const getComponentThemes = (components: SimpleThemesDefinition) => {
+  return Object.fromEntries(
+    Object.entries(components).map(([componentName, { template }]) => {
+      return [
+        componentName,
+        {
+          parent: '',
+          template: template || 'base',
+        },
+      ]
+    })
+  )
+}
+
+export const defaultComponentThemes = {
+  ListItem: { template: 'surface1' },
+  SelectTrigger: { template: 'surface1' },
+  Card: { template: 'surface1' },
+  Button: { template: 'surface3' },
+  Checkbox: { template: 'surface2' },
+  Switch: { template: 'surface2' },
+  SwitchThumb: { template: 'inverse' },
+  TooltipContent: { template: 'surface2' },
+  Progress: { template: 'surface1' },
+  RadioGroupItem: { template: 'surface2' },
+  TooltipArrow: { template: 'surface1' },
+  SliderTrackActive: { template: 'surface3' },
+  SliderTrack: { template: 'surface1' },
+  SliderThumb: { template: 'inverse' },
+  Tooltip: { template: 'inverse' },
+  ProgressIndicator: { template: 'inverse' },
+  Input: { template: 'surface1' },
+  TextArea: { template: 'surface1' },
+} satisfies SimpleThemesDefinition
+
+export function createPalettes(palettes: BuildPalettes): SimplePaletteDefinitions {
+  const accentPalettes = palettes.accent ? getThemeSuitePalettes(palettes.accent) : null
+  const basePalettes = getThemeSuitePalettes(palettes.base)
+
+  const next = Object.fromEntries(
+    Object.entries(palettes).flatMap(([name, palette]) => {
+      const palettes = getThemeSuitePalettes(palette)
+      const isAccent = name.startsWith('accent')
+      const oppositePalettes = isAccent ? basePalettes : accentPalettes
+      const oppositeLight = oppositePalettes!.light
+      const oppositeDark = oppositePalettes!.dark
+
+      const bgOffset = 7
+
+      const out = [
+        [
+          name === 'base' ? 'light' : `light_${name}`,
+          [
+            oppositeLight[bgOffset],
+            ...palettes.light,
+            oppositeLight[oppositeLight.length - bgOffset - 1],
+          ],
+        ],
+        [
+          name === 'base' ? 'dark' : `dark_${name}`,
+          [
+            oppositeDark[oppositeDark.length - bgOffset - 1],
+            ...palettes.dark,
+            oppositeDark[bgOffset],
+          ],
+        ],
+      ] as const
+
+      return out
+    })
+  )
+
+  return next as any
+}

package/src/v4-default.ts

@@ -0,0 +1,88 @@
+import { green, greenDark, red, redDark, yellow, yellowDark } from '@tamagui/colors'
+import { createThemeSuite } from './v4-createTheme'
+
+const colorTokens = {
+  light: {
+    green,
+    red,
+    yellow,
+  },
+  dark: {
+    green: greenDark,
+    red: redDark,
+    yellow: yellowDark,
+  },
+}
+
+const lightShadowColor = 'rgba(0,0,0,0.04)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.085)'
+const darkShadowColor = 'rgba(0,0,0,0.2)'
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+
+const darkPalette = ['#050505', '#fff']
+const lightPalette = ['#fff', 'hsl(0, 0%, 9.0%)']
+
+/**
+ * Default themes for the tamagui.dev site
+ * If you'd like to create your own themes, use `createThemeSuite`
+ */
+export const defaultThemes = createThemeSuite({
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette,
+    },
+
+    // we set a bunch of colors like $red1 => $red12
+    // we only want to set it on the base light/dark theme not all sub-themes
+    extra: {
+      light: {
+        ...colorTokens.light.green,
+        ...colorTokens.light.red,
+        ...colorTokens.light.yellow,
+        shadowColor: lightShadowColorStrong,
+        shadowColorHover: lightShadowColorStrong,
+        shadowColorPress: lightShadowColor,
+        shadowColorFocus: lightShadowColor,
+      },
+      dark: {
+        ...colorTokens.dark.green,
+        ...colorTokens.dark.red,
+        ...colorTokens.dark.yellow,
+        shadowColor: darkShadowColorStrong,
+        shadowColorHover: darkShadowColorStrong,
+        shadowColorPress: darkShadowColor,
+        shadowColorFocus: darkShadowColor,
+      },
+    },
+  },
+
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette,
+    },
+    template: 'inverse',
+  },
+
+  childrenThemes: {
+    error: {
+      palette: {
+        dark: Object.values(colorTokens.dark.red),
+        light: Object.values(colorTokens.light.red),
+      },
+    },
+    warning: {
+      palette: {
+        dark: Object.values(colorTokens.dark.yellow),
+        light: Object.values(colorTokens.light.yellow),
+      },
+    },
+    success: {
+      palette: {
+        dark: Object.values(colorTokens.dark.green),
+        light: Object.values(colorTokens.light.green),
+      },
+    },
+  },
+})

package/src/v4-defaultTemplates.ts

@@ -0,0 +1,165 @@
+import { objectFromEntries, objectKeys } from './helpers'
+import type { BuildTemplates } from './types'
+
+const lightShadowColor = 'rgba(0,0,0,0.04)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.085)'
+const darkShadowColor = 'rgba(0,0,0,0.2)'
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+
+const shadows = {
+  light: {
+    shadowColor: lightShadowColorStrong,
+    shadowColorHover: lightShadowColorStrong,
+    shadowColorPress: lightShadowColor,
+    shadowColorFocus: lightShadowColor,
+  },
+  dark: {
+    shadowColor: darkShadowColorStrong,
+    shadowColorHover: darkShadowColorStrong,
+    shadowColorPress: darkShadowColor,
+    shadowColorFocus: darkShadowColor,
+  },
+}
+
+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 4 things padding each end until you get to bg/color:
+  // [accentBg, transparent1, transparent2, transparent3, transparent4, background, ...]
+  const bgIndex = 5
+  const lighten = isLight ? -1 : 1
+  const darken = -lighten
+  const borderColor = bgIndex + 3
+
+  // templates use the palette and specify index
+  // negative goes backwards from end so -1 is the last item
+  const base = {
+    accentBackground: 0,
+    accentColor: -0,
+
+    ...(isLight ? shadows.light : shadows.dark),
+
+    background0: 1,
+    background025: 2,
+    background05: 3,
+    background075: 4,
+    color1: bgIndex,
+    color2: bgIndex + 1,
+    color3: bgIndex + 2,
+    color4: bgIndex + 3,
+    color5: bgIndex + 4,
+    color6: bgIndex + 5,
+    color7: bgIndex + 6,
+    color8: bgIndex + 7,
+    color9: bgIndex + 8,
+    color10: bgIndex + 9,
+    color11: bgIndex + 10,
+    color12: bgIndex + 11,
+    color0: -1,
+    color025: -2,
+    color05: -3,
+    color075: -4,
+    // 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 @tamagui/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: bgIndex,
+    backgroundHover: bgIndex + lighten, // always lighten on hover no matter the scheme
+    backgroundPress: bgIndex + darken, // always darken on press no matter the theme
+    backgroundFocus: bgIndex + darken,
+    borderColor,
+    borderColorHover: borderColor + lighten,
+    borderColorPress: borderColor + darken,
+    borderColorFocus: borderColor,
+    color: -bgIndex,
+    colorHover: -bgIndex - 1,
+    colorPress: -bgIndex,
+    colorFocus: -bgIndex - 1,
+    colorTransparent: -1,
+    placeholderColor: -bgIndex - 3,
+    outlineColor: -2,
+  }
+
+  const surface1 = {
+    background: base.background + 1,
+    backgroundHover: base.backgroundHover + 1,
+    backgroundPress: base.backgroundPress + 1,
+    backgroundFocus: base.backgroundFocus + 1,
+    borderColor: base.borderColor + 1,
+    borderColorHover: base.borderColorHover + 1,
+    borderColorFocus: base.borderColorFocus + 1,
+    borderColorPress: base.borderColorPress + 1,
+  }
+
+  const surface2 = {
+    background: base.background + 2,
+    backgroundHover: base.backgroundHover + 2,
+    backgroundPress: base.backgroundPress + 2,
+    backgroundFocus: base.backgroundFocus + 2,
+    borderColor: base.borderColor + 2,
+    borderColorHover: base.borderColorHover + 2,
+    borderColorFocus: base.borderColorFocus + 2,
+    borderColorPress: base.borderColorPress + 2,
+  }
+
+  const surface3 = {
+    background: base.background + 3,
+    backgroundHover: base.backgroundHover + 3,
+    backgroundPress: base.backgroundPress + 3,
+    backgroundFocus: base.backgroundFocus + 3,
+    borderColor: base.borderColor + 3,
+    borderColorHover: base.borderColorHover + 3,
+    borderColorFocus: base.borderColorFocus + 3,
+    borderColorPress: base.borderColorPress + 3,
+  }
+
+  const alt1 = {
+    color: base.color - 1,
+    colorHover: base.colorHover - 1,
+    colorPress: base.colorPress - 1,
+    colorFocus: base.colorFocus - 1,
+  }
+
+  const alt2 = {
+    color: base.color - 2,
+    colorHover: base.colorHover - 2,
+    colorPress: base.colorPress - 2,
+    colorFocus: base.colorFocus - 2,
+  }
+
+  const inverse = Object.fromEntries(
+    Object.entries(base).map(([key, index]) => {
+      return [key, -index]
+    })
+  )
+
+  return {
+    base,
+    surface1,
+    surface2,
+    surface3,
+    alt1,
+    alt2,
+    inverse,
+  } satisfies BuildTemplates
+}
+
+export const defaultTemplates = getTemplates()