@tamagui/themes 1.31.3 → 1.32.0

package/src/helpers.ts

@@ -0,0 +1,44 @@
+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,12 +1,6 @@
-// import generatedThemes from './generated'
-// import { themes as runtimeThemes } from './themes'
-
-// export const themes =
-//   process.env.NODE_ENV === 'development'
-//     ? runtimeThemes
-//     : (generatedThemes as typeof runtimeThemes)
-
-// export * from './themes.outlined'
 export * from './themes'
 export * from './tokens'
+export * from './masks'
+export * from './componentThemeDefinitions'
+export * from './palettes'
 export * from '@tamagui/colors'

package/src/masks.tsx

@@ -0,0 +1,45 @@
+import {
+  combineMasks,
+  createIdentityMask,
+  createInverseMask,
+  createMask,
+  createSoftenMask,
+  createStrengthenMask,
+  skipMask,
+} from '@tamagui/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()),
+  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,
+    }
+  }),
+  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,
+    }
+  }),
+}

package/src/palettes.tsx

@@ -0,0 +1,91 @@
+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',
+    '#f9f9f9',
+    'hsl(0, 0%, 97.3%)',
+    'hsl(0, 0%, 95.1%)',
+    'hsl(0, 0%, 94.0%)',
+    'hsl(0, 0%, 92.0%)',
+    'hsl(0, 0%, 89.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

@@ -0,0 +1,19 @@
+const lightShadowColor = 'rgba(0,0,0,0.02)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.066)'
+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/templates.tsx

@@ -0,0 +1,111 @@
+import { MaskOptions } from '@tamagui/create-theme'
+
+import { palettes } from './palettes'
+
+export const { templates, maskOptions } = (() => {
+  const templateColors = {
+    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 = {
+    ...templateColors,
+    // 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,
+  }
+
+  const templates = {
+    base: template,
+    colorLight: {
+      ...template,
+      // light color themes are a bit less sensitive
+      borderColor: 4,
+      borderColorHover: 5,
+      borderColorFocus: 4,
+      borderColorPress: 4,
+    },
+  }
+
+  const overrideShadows = {
+    shadowColor: 0,
+    shadowColorHover: 0,
+    shadowColorPress: 0,
+    shadowColorFocus: 0,
+  }
+
+  const overrideWithColors = {
+    ...overrideShadows,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0,
+  }
+
+  const baseMaskOptions: MaskOptions = {
+    override: overrideShadows,
+    skip: overrideShadows,
+    // avoids the transparent ends
+    max: palettes.light.length - 2,
+    min: 1,
+  }
+
+  const skipShadowsAndColors = {
+    ...overrideShadows,
+    ...templateColors,
+  }
+
+  const maskOptions = {
+    component: {
+      ...baseMaskOptions,
+      override: overrideWithColors,
+      skip: skipShadowsAndColors,
+    },
+    alt: {
+      ...baseMaskOptions,
+    },
+    button: {
+      ...baseMaskOptions,
+      override: {
+        ...overrideWithColors,
+        borderColor: 'transparent',
+        borderColorHover: 'transparent',
+      },
+      skip: skipShadowsAndColors,
+    },
+  } satisfies Record<string, MaskOptions>
+
+  return {
+    templates,
+    maskOptions,
+  }
+})()

package/src/themes-new.tsx

@@ -0,0 +1,74 @@
+import { createThemeBuilder } from '@tamagui/create-theme'
+
+import { componentThemeDefinitions } from './componentThemeDefinitions'
+import { masks } from './masks'
+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, {
+    avoidNestingWithin: ['alt1', 'alt2', 'active'],
+  })
+
+export const themes = themesBuilder.build()

package/src/{themes.outlined.tsx → themes-old.tsx}

@@ -8,7 +8,7 @@ import {
   skipMask,
 } from '@tamagui/create-theme'
 
-import { colorTokens, darkColors, lightColors, tokens } from './tokens'
+import { colorTokens, darkColors, lightColors } from './tokens'
 
 type ColorName = keyof typeof colorTokens.dark
 
@@ -100,10 +100,10 @@ const template = {
   // 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: 1,
-  backgroundHover: 1,
-  backgroundPress: 1,
-  backgroundFocus: 1,
+  background: 2,
+  backgroundHover: 3,
+  backgroundPress: 4,
+  backgroundFocus: 5,
   backgroundStrong: 1,
   backgroundTransparent: 0,
   color: -1,
@@ -111,13 +111,32 @@ const template = {
   colorPress: -1,
   colorFocus: -2,
   colorTransparent: -0,
-  borderColor: 8,
-  borderColorHover: 9,
-  borderColorPress: 7,
-  borderColorFocus: 6,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
   placeholderColor: -4,
 }
 
+const lightShadowColor = 'rgba(0,0,0,0.02)'
+const lightShadowColorStrong = 'rgba(0,0,0,0.066)'
+const darkShadowColor = 'rgba(0,0,0,0.2)'
+const darkShadowColorStrong = 'rgba(0,0,0,0.3)'
+
+const lightShadows = {
+  shadowColor: lightShadowColorStrong,
+  shadowColorHover: lightShadowColorStrong,
+  shadowColorPress: lightShadowColor,
+  shadowColorFocus: lightShadowColor,
+}
+
+const darkShadows = {
+  shadowColor: darkShadowColorStrong,
+  shadowColorHover: darkShadowColorStrong,
+  shadowColorPress: darkShadowColor,
+  shadowColorFocus: darkShadowColor,
+}
+
 const lightTemplate = {
   ...template,
 
@@ -126,13 +145,14 @@ const lightTemplate = {
   backgroundPress: 4,
 
   // our light color palette is... a bit unique
-  borderColor: 10,
-  borderColorHover: 9,
-  borderColorFocus: 8,
-  borderColorPress: 7,
+  borderColor: 6,
+  borderColorHover: 7,
+  borderColorFocus: 5,
+  borderColorPress: 6,
+  ...lightShadows,
 }
 
-const darkTemplate = { ...template }
+const darkTemplate = { ...template, ...darkShadows }
 
 const light = createTheme(palettes.light, lightTemplate)
 const dark = createTheme(palettes.dark, darkTemplate)
@@ -176,8 +196,8 @@ const [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark
         const colorPalette = Object.values(colorSet[color]) as string[]
         // were re-ordering these
         const [head, tail] = [
-          colorPalette.slice(0, 4),
-          colorPalette.slice(colorPalette.length - 7),
+          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
@@ -225,11 +245,13 @@ const allThemes = addChildren(baseThemes, (name, theme) => {
         inverse,
         isLight,
       }),
+      ...getComponentThemes(colorTheme, inverse, isLight),
     }
   })
 
   const baseSubThemes = {
     ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
+    ...getComponentThemes(theme, inverseTheme, isLight),
   }
 
   return {
@@ -271,7 +293,76 @@ function getAltThemes({
           })
         })())
 
-  return { alt1, alt2, active }
+  return addChildren({ alt1, alt2, active }, (_, subTheme) => {
+    return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight)
+  })
+}
+
+function getComponentThemes(theme: SubTheme, inverse: SubTheme, isLight: boolean) {
+  const componentMaskOptions: MaskOptions = {
+    ...maskOptions,
+    override: overrideWithColors,
+    skip: {
+      ...maskOptions.skip,
+      // skip colors too just for component sub themes
+      ...templateColors,
+    },
+  }
+  const weaker1 = applyMask(theme, masks.weaker, componentMaskOptions)
+  const base = applyMask(weaker1, masks.stronger, componentMaskOptions)
+  const weaker2 = applyMask(weaker1, masks.weaker, componentMaskOptions)
+  const stronger1 = applyMask(theme, masks.stronger, componentMaskOptions)
+  const inverse1 = applyMask(inverse, masks.weaker, componentMaskOptions)
+  const inverse2 = applyMask(inverse1, masks.weaker, componentMaskOptions)
+  const strongerBorderLighterBackground: SubTheme = isLight
+    ? {
+        ...stronger1,
+        borderColor: weaker1.borderColor,
+        borderColorHover: weaker1.borderColorHover,
+        borderColorPress: weaker1.borderColorPress,
+        borderColorFocus: weaker1.borderColorFocus,
+      }
+    : {
+        ...applyMask(theme, masks.skip, componentMaskOptions),
+        borderColor: weaker1.borderColor,
+        borderColorHover: weaker1.borderColorHover,
+        borderColorPress: weaker1.borderColorPress,
+        borderColorFocus: weaker1.borderColorFocus,
+      }
+
+  const overlayTheme = {
+    background: isLight ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.9)',
+  } as SubTheme
+
+  const weaker2WithoutBorder = {
+    ...weaker2,
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+  }
+
+  return {
+    ListItem: isLight ? stronger1 : base,
+    Card: weaker1,
+    Button: weaker2WithoutBorder,
+    Checkbox: weaker2,
+    DrawerFrame: weaker1,
+    SliderTrack: stronger1,
+    SliderTrackActive: weaker2,
+    SliderThumb: inverse1,
+    Progress: weaker1,
+    ProgressIndicator: inverse,
+    Switch: weaker2,
+    SwitchThumb: inverse2,
+    TooltipArrow: weaker1,
+    TooltipContent: weaker2,
+    Input: strongerBorderLighterBackground,
+    TextArea: strongerBorderLighterBackground,
+    Tooltip: inverse1,
+    // make overlays always dark
+    SheetOverlay: overlayTheme,
+    DialogOverlay: overlayTheme,
+    ModalOverlay: overlayTheme,
+  }
 }
 
 export const themes = {