@tamagui/themes 2.7.7 → 3.0.0-beta.643.1

package/src/helpers.ts

@@ -1,44 +0,0 @@
-type ObjectType = Record<PropertyKey, unknown>
-
-type PickByValue<OBJ_T, VALUE_T> = // From https://stackoverflow.com/a/55153000
-  Pick<OBJ_T, { [K in keyof OBJ_T]: OBJ_T[K] extends VALUE_T ? K : never }[keyof OBJ_T]>
-
-type ObjectEntries<OBJ_T> = // From https://stackoverflow.com/a/60142095
-  { [K in keyof OBJ_T]: [keyof PickByValue<OBJ_T, OBJ_T[K]>, OBJ_T[K]] }[keyof OBJ_T][]
-
-export const objectKeys = <O extends object>(obj: O) => Object.keys(obj) as Array<keyof O>
-
-export function objectEntries<OBJ_T extends ObjectType>(
-  obj: OBJ_T
-): ObjectEntries<OBJ_T> {
-  return Object.entries(obj) as ObjectEntries<OBJ_T>
-}
-
-type EntriesType =
-  | [PropertyKey, unknown][]
-  | ReadonlyArray<readonly [PropertyKey, unknown]>
-
-// Existing Utils
-type DeepWritable<OBJ_T> = { -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]> }
-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
-
-// New Utils
-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
-type MergeIntersectingObjects<ObjT> = { [key in keyof ObjT]: ObjT[key] }
-type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<
-  UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>
->
-
-export function objectFromEntries<ARR_T extends EntriesType>(
-  arr: ARR_T
-): EntriesToObject<ARR_T> {
-  return Object.fromEntries(arr) as EntriesToObject<ARR_T>
-}

package/src/index.tsx

@@ -1,8 +0,0 @@
-export * from './themes'
-export * from './tokens'
-export * from './componentThemeDefinitions'
-export * from './palettes'
-export * from '@tamagui/colors/legacy'
-export * from './templates'
-export * from './shadows'
-export * from '@tamagui/theme-builder'

package/src/opacify.ts

@@ -1,125 +0,0 @@
-/**
- * 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 (from $theme-dark/$theme-light)
-  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/palettes.tsx

@@ -1,91 +0,0 @@
-import { objectFromEntries, objectKeys } from './helpers'
-import { colorTokens } from './tokens'
-
-export const palettes = (() => {
-  const lightTransparent = 'rgba(255,255,255,0)'
-  const darkTransparent = 'rgba(10,10,10,0)'
-
-  const transparent = (hsl: string, opacity = 0) =>
-    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
-
-  const getColorPalette = (colors: object, color = colors[0]): string[] => {
-    const colorPalette = Object.values(colors)
-
-    // 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
-    return [
-      transparent(colorPalette[0]),
-      ...head,
-      ...tail,
-      color,
-      transparent(colorPalette[colorPalette.length - 1]),
-    ]
-  }
-
-  const lightColor = 'hsl(0, 0%, 9.0%)'
-  const lightPalette = [
-    lightTransparent,
-    '#fff',
-    '#f8f8f8',
-    'hsl(0, 0%, 96.3%)',
-    'hsl(0, 0%, 94.1%)',
-    'hsl(0, 0%, 92.0%)',
-    'hsl(0, 0%, 90.0%)',
-    'hsl(0, 0%, 88.5%)',
-    'hsl(0, 0%, 81.0%)',
-    'hsl(0, 0%, 56.1%)',
-    'hsl(0, 0%, 50.3%)',
-    'hsl(0, 0%, 42.5%)',
-    lightColor,
-    darkTransparent,
-  ]
-
-  const darkColor = '#fff'
-  const darkPalette = [
-    darkTransparent,
-    '#050505',
-    '#151515',
-    '#191919',
-    '#232323',
-    '#282828',
-    '#323232',
-    '#424242',
-    '#494949',
-    '#545454',
-    '#626262',
-    '#a5a5a5',
-    darkColor,
-    lightTransparent,
-  ]
-
-  const lightPalettes = objectFromEntries(
-    objectKeys(colorTokens.light).map(
-      (key) =>
-        [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)] as const
-    )
-  )
-
-  const darkPalettes = objectFromEntries(
-    objectKeys(colorTokens.dark).map(
-      (key) => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)] as const
-    )
-  )
-
-  const colorPalettes = {
-    ...lightPalettes,
-    ...darkPalettes,
-  }
-
-  return {
-    light: lightPalette,
-    dark: darkPalette,
-    ...colorPalettes,
-  }
-})()

package/src/shadows.tsx

@@ -1,19 +0,0 @@
-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)'
-
-export const shadows = {
-  light: {
-    shadowColor: lightShadowColorStrong,
-    shadowColorHover: lightShadowColorStrong,
-    shadowColorPress: lightShadowColor,
-    shadowColorFocus: lightShadowColor,
-  },
-  dark: {
-    shadowColor: darkShadowColorStrong,
-    shadowColorHover: darkShadowColorStrong,
-    shadowColorPress: darkShadowColor,
-    shadowColorFocus: darkShadowColor,
-  },
-}

package/src/subtleChildrenThemes.ts

@@ -1,54 +0,0 @@
-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/templates.tsx

@@ -1,104 +0,0 @@
-import type { MaskOptions } from '@tamagui/create-theme'
-
-import { palettes } from './palettes'
-
-const templateColorsSpecific = {
-  color1: 1,
-  color2: 2,
-  color3: 3,
-  color4: 4,
-  color5: 5,
-  color6: 6,
-  color7: 7,
-  color8: 8,
-  color9: 9,
-  color10: 10,
-  color11: 11,
-  color12: 12,
-}
-
-// templates use the palette and specify index
-// negative goes backwards from end so -1 is the last item
-const template = {
-  ...templateColorsSpecific,
-  // 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: 2,
-  backgroundHover: 3,
-  backgroundPress: 4,
-  backgroundFocus: 5,
-  backgroundStrong: 1,
-  backgroundTransparent: 0,
-  color: -1,
-  colorHover: -2,
-  colorPress: -1,
-  colorFocus: -2,
-  colorTransparent: -0,
-  borderColor: 5,
-  borderColorHover: 6,
-  borderColorFocus: 4,
-  borderColorPress: 5,
-  placeholderColor: -4,
-}
-
-export const templates = {
-  base: template,
-  colorLight: {
-    ...template,
-    // light color themes are a bit less sensitive
-    borderColor: 4,
-    borderColorHover: 5,
-    borderColorFocus: 4,
-    borderColorPress: 4,
-  },
-}
-
-const shadows = {
-  shadowColor: 0,
-  shadowColorHover: 0,
-  shadowColorPress: 0,
-  shadowColorFocus: 0,
-}
-
-const colors = {
-  ...shadows,
-  color: 0,
-  colorHover: 0,
-  colorFocus: 0,
-  colorPress: 0,
-}
-
-const baseMaskOptions: MaskOptions = {
-  override: shadows,
-  skip: shadows,
-  // avoids the transparent ends
-  max: palettes.light.length - 2,
-  min: 1,
-}
-
-const skipShadowsAndSpecificColors = {
-  ...shadows,
-  ...templateColorsSpecific,
-}
-
-export const maskOptions = {
-  component: {
-    ...baseMaskOptions,
-    override: colors,
-    skip: skipShadowsAndSpecificColors,
-  },
-  alt: {
-    ...baseMaskOptions,
-  },
-  button: {
-    ...baseMaskOptions,
-    override: {
-      ...colors,
-      borderColor: 'transparent',
-      borderColorHover: 'transparent',
-    },
-    skip: skipShadowsAndSpecificColors,
-  },
-} satisfies Record<string, MaskOptions>

package/src/themes-new.ts

@@ -1,74 +0,0 @@
-import { createThemeBuilder } from '@tamagui/theme-builder'
-import { componentThemeDefinitions } from './componentThemeDefinitions'
-import { masks } from '@tamagui/theme-builder'
-import { palettes } from './palettes'
-import { shadows } from './shadows'
-import { maskOptions, templates } from './templates'
-import { darkColors, lightColors } from './tokens'
-
-const colorThemeDefinition = (colorName: string) => [
-  {
-    parent: 'light',
-    palette: colorName,
-    template: 'colorLight',
-  },
-  {
-    parent: 'dark',
-    palette: colorName,
-    template: 'base',
-  },
-]
-
-const themesBuilder = createThemeBuilder()
-  .addPalettes(palettes)
-  .addTemplates(templates)
-  .addMasks(masks)
-  .addThemes({
-    light: {
-      template: 'base',
-      palette: 'light',
-      nonInheritedValues: {
-        ...lightColors,
-        ...shadows.light,
-      },
-    },
-    dark: {
-      template: 'base',
-      palette: 'dark',
-      nonInheritedValues: {
-        ...darkColors,
-        ...shadows.dark,
-      },
-    },
-  })
-  .addChildThemes({
-    orange: colorThemeDefinition('orange'),
-    yellow: colorThemeDefinition('yellow'),
-    green: colorThemeDefinition('green'),
-    blue: colorThemeDefinition('blue'),
-    purple: colorThemeDefinition('purple'),
-    pink: colorThemeDefinition('pink'),
-    red: colorThemeDefinition('red'),
-  })
-  .addChildThemes({
-    alt1: {
-      mask: 'soften',
-      ...maskOptions.alt,
-    },
-    alt2: {
-      mask: 'soften2',
-      ...maskOptions.alt,
-    },
-    active: {
-      mask: 'soften3',
-      skip: {
-        color: 1,
-      },
-    },
-  })
-  .addChildThemes(componentThemeDefinitions, {
-    // to save bundle size but make alt themes not work on components
-    // avoidNestingWithin: ['alt1', 'alt2'],
-  })
-
-export const themes = themesBuilder.build()