@tamagui/theme-builder 1.79.4 → 1.79.5

package/src/buildThemeSuite.ts

@@ -0,0 +1,376 @@
+import {
+  MaskOptions,
+  ThemeDefinitions,
+  createMask,
+  createSoftenMask,
+} from '@tamagui/create-theme'
+import { masks as defaultMasks, maskOptions } from '@tamagui/themes'
+
+import { buildMask } from './buildMask'
+import { getThemeSuitePalettes } from './buildThemeSuitePalettes'
+import { createThemeBuilder } from './ThemeBuilder'
+import { BuildThemeMask, BuildThemeSuiteProps } from './types'
+
+export function buildThemeSuite({ baseTheme, subThemes }: BuildThemeSuiteProps) {
+  const theme = baseTheme
+
+  const maskThemes = (subThemes || []).filter(
+    (x) => x.type === 'mask'
+  ) as BuildThemeMask[]
+
+  const customMasks = Object.fromEntries(
+    maskThemes.map((maskTheme) => {
+      return [maskTheme.name, buildMask(maskTheme.masks)]
+    })
+  )
+
+  // base palletes need to add in sub theme palettes if customized
+  const palettes = getThemeSuitePalettes(theme as any)
+
+  const max = palettes.dark.length - 1
+  const min = 1
+
+  const componentMask = {
+    ...maskOptions.component,
+    max,
+    min,
+    overrideSwap: {
+      accentBackground: 0,
+      accentColor: -0,
+    },
+    overrideShift: {
+      ...maskOptions.component.override,
+    },
+    skip: {
+      ...maskOptions.component.skip,
+    },
+  } satisfies MaskOptions
+
+  const customMaskOptions = {
+    alt: {
+      ...maskOptions.alt,
+      max,
+      min,
+      overrideSwap: {
+        accentBackground: 0,
+        accentColor: -0,
+      },
+      overrideShift: {
+        ...maskOptions.alt.override,
+      },
+      skip: {
+        ...maskOptions.alt.skip,
+      },
+    },
+    component: componentMask,
+    componentInverse: {
+      ...componentMask,
+    },
+  } satisfies Record<string, MaskOptions>
+
+  const baseTemplate = {
+    accentBackground: 0,
+    accentColor: -0,
+
+    background0: 1,
+    background025: 2,
+    background05: 3,
+    background075: 4,
+
+    color0: -4,
+    color025: -3,
+    color05: -2,
+    color075: -1,
+
+    background: 5,
+    backgroundHover: 6,
+    backgroundPress: 7,
+    backgroundFocus: 8,
+
+    color: -5,
+    colorHover: -6,
+    colorPress: -5,
+    colorFocus: -6,
+
+    placeholderColor: -6,
+
+    borderColor: 7,
+    borderColorHover: 8,
+    borderColorFocus: 9,
+    borderColorPress: 8,
+  }
+
+  function createTemplates() {
+    const template = {
+      color1: 5,
+      color2: 6,
+      color3: 7,
+      color4: 8,
+      color5: 9,
+      color6: 10,
+      color7: 11,
+      color8: 12,
+      color9: 13,
+      color10: 14,
+      color11: 15,
+      color12: 16,
+      ...baseTemplate,
+    }
+
+    const accentTemplateLight = {
+      background: 0,
+      backgroundHover: baseTemplate.backgroundHover + 4,
+      backgroundPress: baseTemplate.backgroundPress + 4,
+      backgroundFocus: baseTemplate.backgroundFocus + 4,
+      borderColor: baseTemplate.borderColor + 2,
+      borderColorHover: baseTemplate.borderColorHover + 2,
+      borderColorFocus: baseTemplate.borderColorFocus + 2,
+      borderColorPress: baseTemplate.borderColorPress + 2,
+      color: -5,
+      colorHover: -6,
+      colorPress: -7,
+      colorFocus: -5,
+    }
+
+    const accentTemplateDark = {
+      background: baseTemplate.backgroundHover + 4,
+      backgroundHover: baseTemplate.backgroundHover + 5,
+      backgroundPress: baseTemplate.backgroundPress + 3,
+      backgroundFocus: baseTemplate.backgroundFocus + 5,
+      borderColor: baseTemplate.borderColor + 2,
+      borderColorHover: baseTemplate.borderColorHover + 2,
+      borderColorFocus: baseTemplate.borderColorFocus + 2,
+      borderColorPress: baseTemplate.borderColorPress + 2,
+      color: -5,
+      colorHover: -6,
+      colorPress: -7,
+      colorFocus: -5,
+    }
+
+    return {
+      base: template,
+      accentLight: accentTemplateLight,
+      accentDark: accentTemplateDark,
+    }
+  }
+
+  const templates = createTemplates()
+
+  function getComponentThemeDefinitions() {
+    const overlayThemes = {
+      light: {
+        background: 'rgba(0,0,0,0.5)',
+      },
+      dark: {
+        background: 'rgba(0,0,0,0.9)',
+      },
+    }
+
+    const overlayThemeDefinitions = [
+      {
+        parent: 'light',
+        theme: overlayThemes.light,
+      },
+      {
+        parent: 'dark',
+        theme: overlayThemes.dark,
+      },
+    ]
+
+    const componentTheme = [
+      {
+        parent: 'light_accent',
+        template: 'accentLight',
+        palette: 'lightAccent',
+      },
+
+      {
+        parent: 'dark_accent',
+        template: 'accentDark',
+        palette: 'darkAccent',
+      },
+
+      {
+        parent: 'light',
+        mask: 'soften2',
+        ...customMaskOptions.component,
+      },
+
+      {
+        parent: 'dark',
+        mask: 'soften2',
+        ...customMaskOptions.component,
+      },
+    ]
+
+    const componentThemeDefinitions = {
+      Card: {
+        mask: 'soften',
+        ...customMaskOptions.component,
+      },
+
+      Button: componentTheme,
+
+      Checkbox: {
+        mask: 'softenBorder2',
+        ...customMaskOptions.component,
+      },
+
+      Switch: {
+        mask: 'soften2',
+        ...customMaskOptions.component,
+      },
+
+      SwitchThumb: {
+        mask: 'inverse',
+        ...customMaskOptions.componentInverse,
+      },
+
+      TooltipContent: {
+        mask: 'soften2',
+        ...customMaskOptions.component,
+      },
+
+      DrawerFrame: {
+        mask: 'soften',
+        ...customMaskOptions.component,
+      },
+
+      Progress: {
+        mask: 'soften',
+        ...customMaskOptions.component,
+      },
+
+      RadioGroupItem: {
+        mask: 'softenBorder2',
+        ...customMaskOptions.component,
+      },
+
+      TooltipArrow: {
+        mask: 'soften',
+        ...customMaskOptions.component,
+      },
+
+      SliderTrackActive: {
+        mask: 'inverseSoften',
+        ...customMaskOptions.component,
+      },
+
+      SliderTrack: {
+        mask: 'soften2',
+        ...customMaskOptions.component,
+      },
+
+      SliderThumb: {
+        mask: 'inverse',
+        ...customMaskOptions.componentInverse,
+      },
+
+      Tooltip: {
+        mask: 'inverse',
+        ...customMaskOptions.component,
+      },
+
+      ProgressIndicator: {
+        mask: 'inverse',
+        ...customMaskOptions.componentInverse,
+      },
+
+      SheetOverlay: overlayThemeDefinitions,
+      DialogOverlay: overlayThemeDefinitions,
+      ModalOverlay: overlayThemeDefinitions,
+
+      Input: {
+        mask: 'softenBorder2',
+        ...customMaskOptions.component,
+      },
+
+      TextArea: {
+        mask: 'softenBorder2',
+        ...customMaskOptions.component,
+      },
+    } satisfies ThemeDefinitions<keyof typeof defaultMasks>
+
+    return componentThemeDefinitions
+  }
+
+  const builder = createThemeBuilder()
+    .addPalettes(palettes)
+    .addMasks({
+      ...defaultMasks,
+      soften3Border2: createMask((template, options) => {
+        const softer2 = createSoftenMask({ strength: 3 }).mask(template, options)
+        const softer1 = createSoftenMask({ strength: 2 }).mask(template, options)
+        return {
+          ...softer2,
+          borderColor: softer1.borderColor,
+          borderColorHover: softer1.borderColorHover,
+          borderColorPress: softer1.borderColorPress,
+          borderColorFocus: softer1.borderColorFocus,
+        }
+      }),
+      ...customMasks,
+    })
+    .addTemplates(templates)
+    .addThemes({
+      light: {
+        template: 'base',
+        palette: 'light',
+      },
+      dark: {
+        template: 'base',
+        palette: 'dark',
+      },
+    })
+    .addChildThemes(
+      Object.fromEntries(
+        maskThemes.map((theme) => {
+          return [
+            theme.name,
+            {
+              mask: theme.name,
+            },
+          ]
+        })
+      )
+    )
+    .addChildThemes({
+      // disabling as we don't need to preview these
+      alt1: {
+        mask: 'soften2Border1',
+        ...maskOptions.alt,
+      },
+      alt2: {
+        mask: 'soften3Border2',
+        ...maskOptions.alt,
+      },
+    })
+    .addChildThemes(
+      palettes.lightAccent
+        ? {
+            accent: [
+              {
+                parent: 'light',
+                template: 'base',
+                palette: 'lightAccent',
+              },
+              {
+                parent: 'dark',
+                template: 'base',
+                palette: 'darkAccent',
+              },
+            ],
+          }
+        : {}
+    )
+    .addChildThemes(getComponentThemeDefinitions())
+
+  const built = builder.build()
+
+  return {
+    built,
+    palettes,
+  }
+}
+
+export type BuildBaseThemesResult = ReturnType<typeof buildThemeSuite>

package/src/buildThemeSuitePalettes.ts

@@ -0,0 +1,91 @@
+import { hsla, parseToHsla, toHex } from 'color2k'
+
+import { getThemeSuiteScale } from './buildThemeSuiteScales'
+import { BuildTheme, BuildThemeSuitePalettes } from './types'
+
+/**
+ * palette generally is:
+ *
+ * [constrastBackground, backgroundTransparent, ...background, ...foreground, foregroundTransparent, accentForeground]
+ */
+
+const generateColorPalette = ({
+  theme,
+  scheme,
+  forAccent,
+}: {
+  theme: BuildTheme
+  scheme: 'light' | 'dark'
+  forAccent?: boolean
+}) => {
+  // const { color, scale, accent, accentColor, accentScale } = theme
+
+  const color = forAccent ? theme.accent || theme.color : theme.color
+  const scale = forAccent ? theme.accentScale || theme.scale : theme.scale
+
+  const { lumScale, satScale } = getThemeSuiteScale(theme, forAccent)
+  const [hue, sat, lum] = parseToHsla(color)
+  const isDark = scheme === 'dark'
+
+  const lumValues = isDark ? lumScale.dark : lumScale.light
+
+  let palette: string[] = lumValues.map((lum, idx) => {
+    if (sat > 0) {
+      if (satScale) {
+        return hsla(hue, satScale[scheme][idx], lum, 1)
+      }
+      return hsla(hue, sat, lum, 1)
+    }
+    return hsla(0, 0, lum, 1)
+  })
+
+  const [background] = palette
+  const foreground = palette[palette.length - 1]
+
+  const transparentValues = [background, foreground].map((color) => {
+    const [h, s, l] = parseToHsla(color)
+    // fully transparent to partially
+    return [
+      hsla(h, s, l, 0),
+      hsla(h, s, l, 0.25),
+      hsla(h, s, l, 0.5),
+      hsla(h, s, l, 0.75),
+    ] as const
+  })
+  const reverseForeground = [...transparentValues[1]].reverse()
+  palette = [...transparentValues[0], ...palette, ...reverseForeground]
+
+  if (theme.accent) {
+    const baseAccent = forAccent ? theme.color : theme.accent
+    const accentHsla = parseToHsla(baseAccent)
+    const accentLum = accentHsla[2]
+    const isAccentLight = accentLum > 0.5
+
+    const oppositeLightnessAccent = isAccentLight
+      ? toHex(hsla(accentHsla[0], accentHsla[1], 1 - accentLum, 1))
+      : theme.accent
+
+    const fg = isAccentLight && !isDark ? oppositeLightnessAccent : baseAccent
+    const bg = fg === baseAccent ? oppositeLightnessAccent : baseAccent
+
+    // unshift bg
+    palette.unshift(bg)
+    // push color
+    palette.push(fg)
+  } else {
+    // were keeping the palettes the same length with or without accent to avoid headache
+    palette.unshift('rgba(0,0,0,0)')
+    palette.push('rgba(0,0,0,0)')
+  }
+
+  return palette
+}
+
+export function getThemeSuitePalettes(theme: BuildTheme): BuildThemeSuitePalettes {
+  return {
+    light: generateColorPalette({ theme, scheme: 'light' }),
+    lightAccent: generateColorPalette({ theme, scheme: 'light', forAccent: true }),
+    dark: generateColorPalette({ theme, scheme: 'dark' }),
+    darkAccent: generateColorPalette({ theme, scheme: 'dark', forAccent: true }),
+  }
+}

package/src/buildThemeSuiteScales.ts

@@ -0,0 +1,209 @@
+import { parseToHsla } from 'color2k'
+
+import { BuildTheme, ScaleTypeName } from './types'
+
+export const getThemeSuiteScale = (theme: BuildTheme, accent?: boolean): ScaleType => {
+  const color = accent ? theme.accent || theme.color : theme.color
+  const scale = accent ? theme.accentScale || theme.scale : theme.scale
+
+  let base = scaleTypes[theme.scale || '']
+
+  if (!color) {
+    return base
+  }
+
+  const [h, s, l] = parseToHsla(color)
+  // const isColorBright = l > 0.5
+
+  return {
+    ...base,
+    lumScale: {
+      light: adjustScale(theme, base.lumScale.light, l, true),
+      dark: adjustScale(theme, base.lumScale.dark, 1 - l),
+    },
+    ...(base.satScale && {
+      satScale: {
+        light: adjustScale(theme, base.satScale.light, s, true),
+        dark: adjustScale(theme, base.satScale.dark, s),
+      },
+    }),
+  }
+}
+
+export type ScaleType<A extends ScaleTypeName = ScaleTypeName> = {
+  name: string
+  createdFrom?: A // we copy the scale values - keeping this helps us refer back to the scale. also helpful if we change scales in the future
+  lumScale: {
+    light: Array<number>
+    dark: Array<number>
+  }
+  satScale?: {
+    light: Array<number>
+    dark: Array<number>
+  }
+}
+
+export const scaleTypes: Record<ScaleTypeName, ScaleType> = {
+  radix: {
+    name: 'Radius',
+    createdFrom: 'radix',
+    lumScale: {
+      light: [
+        0.992, 0.95, 0.92, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086,
+      ],
+      dark: [
+        0.07, 0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.52, 0.61, 0.93,
+      ],
+    },
+    satScale: {
+      light: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
+      dark: [0.65, 0.55, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
+    },
+  },
+
+  'radix-b': {
+    name: 'Radius B',
+    createdFrom: 'radix-b',
+    lumScale: {
+      light: [
+        0.92, 0.868, 0.832, 0.804, 0.747, 0.7, 0.659, 0.541, 0.453, 0.36, 0.32, 0.27,
+      ],
+      dark: [
+        0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.47, 0.52, 0.56, 0.61,
+      ],
+    },
+  },
+
+  'radius-bright': {
+    name: 'Radius Bright',
+    createdFrom: 'radius-bright',
+    lumScale: {
+      light: [1, 0.954, 0.94, 0.9, 0.85, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086],
+      dark: [0, 0.1, 0.16, 0.2, 0.24, 0.36, 0.42, 0.46, 0.5, 0.54, 0.84, 0.97],
+    },
+  },
+
+  'radius-bold': {
+    name: 'Radius Bold',
+    createdFrom: 'radius-bold',
+    lumScale: {
+      light: [1, 0.9, 0.885, 0.82, 0.77, 0.54, 0.32, 0.25, 0.16, 0.12, 0.075, 0],
+      dark: [0, 0.13, 0.2, 0.24, 0.3, 0.34, 0.45, 0.55, 0.65, 0.885, 0.9, 1],
+    },
+  },
+
+  linear: {
+    name: 'Linear',
+    createdFrom: 'linear',
+    lumScale: {
+      light: [1, 0.925, 0.9, 0.85, 0.75, 0.6, 0.4, 0.3, 0.25, 0.15, 0.125, 0],
+      dark: [0, 0.075, 0.125, 0.15, 0.25, 0.4, 0.6, 0.75, 0.85, 0.9, 0.925, 1],
+    },
+  },
+
+  neon: {
+    name: 'Neon',
+    createdFrom: 'neon',
+    lumScale: {
+      light: [
+        0.978, 0.938, 0.902, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.27, 0.086,
+      ],
+      dark: [
+        0.07, 0.11, 0.136, 0.158, 0.179, 0.205, 0.243, 0.313, 0.439, 0.52, 0.61, 0.93,
+      ],
+    },
+  },
+
+  'neon-bright': {
+    name: 'Neon B',
+    createdFrom: 'neon-bright',
+    lumScale: {
+      light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
+      dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
+    },
+  },
+
+  'neon-c': {
+    name: 'Neon C',
+    createdFrom: 'neon-c',
+    lumScale: {
+      light: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
+      dark: [0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.2, 0.1, 0],
+    },
+    satScale: {
+      light: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+      dark: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    },
+  },
+
+  pastel: {
+    name: 'Pastel',
+    createdFrom: 'pastel',
+    lumScale: {
+      light: [
+        0.978, 0.938, 0.902, 0.868, 0.832, 0.804, 0.747, 0.659, 0.541, 0.453, 0.36, 0.2,
+      ],
+      dark: [0.07, 0.15, 0.176, 0.198, 0.2, 0.225, 0.243, 0.313, 0.439, 0.52, 0.61, 0.9],
+    },
+    satScale: {
+      light: [0.5, 0.45, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
+      dark: [0.5, 0.45, 0.4, 0.4, 0.35, 0.35, 0.35, 0.35, 0.4, 0.4, 0.3, 0.2],
+    },
+  },
+
+  'pastel-desaturating': {
+    name: 'Pastel D',
+    createdFrom: 'pastel-desaturating',
+    lumScale: {
+      light: [
+        0.935, 0.838, 0.802, 0.768, 0.732, 0.704, 0.647, 0.559, 0.441, 0.353, 0.17, 0,
+      ],
+      dark: [0.085, 0.1, 0.12, 0.14, 0.17, 0.22, 0.27, 0.35, 0.409, 0.49, 0.58, 0.9],
+    },
+    satScale: {
+      light: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15],
+      dark: [0.6, 0.5, 0.4, 0.35, 0.3, 0.3, 0.3, 0.3, 0.4, 0.35, 0.25, 0.15],
+    },
+  },
+}
+
+const adjustScale = (
+  theme: BuildTheme,
+  scale: number[],
+  userVal: number,
+  isLight = false
+) => {
+  const scaleMin = scale.reduce((acc, cur) => Math.min(cur, acc), Infinity)
+  const scaleMax = scale.reduce((acc, cur) => Math.max(cur, acc), 0)
+
+  if (scaleMin === scaleMax) {
+    return scale.map(() => userVal)
+  }
+
+  const res = scale.map((val, i) => {
+    if (userVal > 0.5) {
+      return val + (userVal - 0.5) * (1 - val)
+    } else {
+      return val * (1 / (1.5 - userVal))
+    }
+
+    // // goes from 0 - 1 where 0 = closest to edge, 1 = furthest
+    // const distanceFromEdge = 2 * (userVal < 0.5 ? userVal : 1 - userVal)
+
+    // // goes from 0 - 1 where 0 = furthest from edge, 1 = closest
+    // const strengthOfUserVal = 1 - distanceFromEdge
+
+    // // gets stronger as we get closer to edges
+    // const next = userVal * strengthOfUserVal + val * (1 - strengthOfUserVal)
+
+    // return clamp(
+    //   val < 0
+    //     ? // TODO
+    //       val
+    //     : next,
+    //   [0, 1]
+    // )
+  })
+
+  return res
+}

package/src/index.ts

@@ -2,3 +2,8 @@ export * from './ThemeBuilder'
 export * from '@tamagui/create-theme'
 export * from './buildMask'
 export * from './types'
+
+// theme suite builders
+export * from './buildThemeSuite'
+export * from './buildThemeSuitePalettes'
+export * from './buildThemeSuiteScales'

package/src/types.ts

@@ -1,10 +1,23 @@
 // only used by the studio theme builder generated:
 
-import { Template } from '@tamagui/create-theme'
+import { MaskOptions, Template } from '@tamagui/create-theme'
 
 export type BuildThemeSuiteProps = {
   baseTheme: BuildTheme
   subThemes?: (BuildTheme | BuildThemeMask)[]
+  componentMask?: MaskOptions
+  templates?: {
+    base: Template
+    accentLight: Template
+    accentDark: Template
+  }
+}
+
+export type BuildThemeSuitePalettes = {
+  light: string[]
+  dark: string[]
+  lightAccent?: string[]
+  darkAccent?: string[]
 }
 
 export type ScaleTypeName =
@@ -29,7 +42,8 @@ export type BuildTheme = BuildThemeBase & {
   type: 'theme'
   color: string
   scale: ScaleTypeName
-  scaleContrast?: number
+  spreadLuminance?: number
+  spreadSaturation?: number
   template?: Template
   accent?: string
   accentColor?: string