@tamagui/themes 1.31.4 → 1.32.1

package/src/themes.tsx

@@ -1,381 +1,7 @@
-import {
-  MaskOptions,
-  addChildren,
-  applyMask,
-  createStrengthenMask,
-  createTheme,
-  createWeakenMask,
-  skipMask,
-} from '@tamagui/create-theme'
+// TODO automate generating with a watch command
 
-import { colorTokens, darkColors, lightColors, tokens } from './tokens'
+import * as themes from './generated-new'
 
-type ColorName = keyof typeof colorTokens.dark
+export { themes }
 
-const lightTransparent = 'rgba(255,255,255,0)'
-const darkTransparent = 'rgba(10,10,10,0)'
-
-// background => foreground
-const palettes = {
-  dark: [
-    darkTransparent,
-    '#050505',
-    '#151515',
-    '#191919',
-    '#232323',
-    '#282828',
-    '#323232',
-    '#424242',
-    '#494949',
-    '#545454',
-    '#626262',
-    '#a5a5a5',
-    '#fff',
-    lightTransparent,
-  ],
-  light: [
-    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%)',
-    'hsl(0, 0%, 9.0%)',
-    darkTransparent,
-  ],
-}
-
-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,
-}
-
-const templateShadows = {
-  shadowColor: 1,
-  shadowColorHover: 1,
-  shadowColorPress: 2,
-  shadowColorFocus: 2,
-}
-
-// we can use subset of our template as a "override" so it doesn't get adjusted with masks
-// we want to skip over templateColor + templateShadows
-const toSkip = {
-  ...templateShadows,
-}
-
-const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]))
-const overrideShadows = Object.fromEntries(
-  Object.entries(templateShadows).map(([k]) => [k, 0])
-)
-const overrideWithColors = {
-  ...override,
-  color: 0,
-  colorHover: 0,
-  colorFocus: 0,
-  colorPress: 0,
-}
-
-// templates use the palette and specify index
-// negative goes backwards from end so -1 is the last item
-const template = {
-  ...templateColors,
-  ...toSkip,
-  // 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: 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,
-
-  background: 2,
-  backgroundHover: 3,
-  backgroundPress: 4,
-
-  // our light color palette is... a bit unique
-  borderColor: 6,
-  borderColorHover: 7,
-  borderColorFocus: 5,
-  borderColorPress: 6,
-  ...lightShadows,
-}
-
-const darkTemplate = { ...template, ...darkShadows }
-
-const light = createTheme(palettes.light, lightTemplate)
-const dark = createTheme(palettes.dark, darkTemplate)
-
-type SubTheme = typeof light
-
-const baseThemes: {
-  light: SubTheme
-  dark: SubTheme
-} = {
-  light,
-  dark,
-}
-
-const masks = {
-  skip: skipMask,
-  weaker: createWeakenMask(),
-  stronger: createStrengthenMask(),
-}
-
-// default mask options for most uses
-const maskOptions: MaskOptions = {
-  override,
-  skip: toSkip,
-  // avoids the transparent ends
-  max: palettes.light.length - 2,
-  min: 1,
-}
-
-const transparent = (hsl: string, opacity = 0) =>
-  hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)
-
-// setup colorThemes and their inverses
-const [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map(
-  (colorSet, i) => {
-    const isLight = i === 0
-    const theme = baseThemes[isLight ? 'light' : 'dark']
-
-    return Object.fromEntries(
-      Object.keys(colorSet).map((color) => {
-        const colorPalette = Object.values(colorSet[color]) as string[]
-        // 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
-        const palette = [
-          transparent(colorPalette[0]),
-          ...head,
-          ...tail,
-          theme.color,
-          transparent(colorPalette[colorPalette.length - 1]),
-        ]
-
-        const colorTheme = createTheme(
-          palette,
-          isLight
-            ? {
-                ...lightTemplate,
-                // light color themes are a bit less sensitive
-                borderColor: 4,
-                borderColorHover: 5,
-                borderColorFocus: 4,
-                borderColorPress: 4,
-              }
-            : darkTemplate
-        )
-
-        return [color, colorTheme]
-      })
-    ) as Record<ColorName, SubTheme>
-  }
-)
-
-const allThemes = addChildren(baseThemes, (name, theme) => {
-  const isLight = name === 'light'
-  const inverseName = isLight ? 'dark' : 'light'
-  const inverseTheme = baseThemes[inverseName]
-  const colorThemes = isLight ? lightColorThemes : darkColorThemes
-  const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes
-
-  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
-    const inverse = inverseColorThemes[colorName]
-    return {
-      ...getAltThemes({
-        theme: colorTheme,
-        inverse,
-        isLight,
-      }),
-      ...getComponentThemes(colorTheme, inverse, isLight),
-    }
-  })
-
-  const baseSubThemes = {
-    ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
-    ...getComponentThemes(theme, inverseTheme, isLight),
-  }
-
-  return {
-    ...baseSubThemes,
-    ...allColorThemes,
-  }
-})
-
-function getAltThemes({
-  theme,
-  inverse,
-  isLight,
-  activeTheme,
-}: {
-  theme: SubTheme
-  inverse: SubTheme
-  isLight: boolean
-  activeTheme?: SubTheme
-}) {
-  const maskOptionsAlt = {
-    ...maskOptions,
-    override: overrideShadows,
-  }
-  const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt)
-  const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt)
-
-  const active =
-    activeTheme ??
-    (process.env.ACTIVE_THEME_INVERSE
-      ? inverse
-      : (() => {
-          return applyMask(theme, masks.weaker, {
-            ...maskOptions,
-            strength: 3,
-            skip: {
-              ...maskOptions.skip,
-              color: 1,
-            },
-          })
-        })())
-
-  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,
-    override: overrideWithColors,
-  })
-  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 = {
-  ...allThemes,
-  // bring back the full type, the rest use a subset to avoid clogging up ts,
-  // tamagui will be smart and use the top level themes as the type for useTheme() etc
-  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
-  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),
-}
-
-// if (process.env.NODE_ENV === 'development') {
-//   console.log(JSON.stringify(themes).length)
-// }
+// export { themes } from './themes-new'