@tamagui/themes 1.101.6 → 1.102.0

package/dist/esm/v3-themes.mjs

@@ -83,7 +83,7 @@ const colorTokens = {
     ...postfixObjKeys(lightColors, "Light"),
     ...postfixObjKeys(darkColors, "Dark")
   },
-  palettes = (() => {
+  defaultPalettes = (() => {
     const transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
       getColorPalette = (colors, accentColors) => {
         const colorPalette = Object.values(colors),
@@ -113,156 +113,159 @@ const colorTokens = {
       ...colorPalettes
     };
   })(),
-  getTemplates = scheme => {
-    const isLight = scheme === "light",
-      bgIndex = 5,
-      lighten = isLight ? -1 : 1,
-      darken = -lighten,
-      borderColor = bgIndex + 3,
-      base = {
-        accentBackground: 0,
-        accentColor: -0,
-        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
+  getTemplates = () => {
+    const getBaseTemplates = scheme => {
+        const isLight = scheme === "light",
+          bgIndex = 5,
+          lighten = isLight ? -1 : 1,
+          darken = -lighten,
+          borderColor = bgIndex + 3,
+          base = {
+            accentBackground: 0,
+            accentColor: -0,
+            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
+          },
+          surface12 = {
+            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
+          },
+          surface22 = {
+            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
+          },
+          surface32 = {
+            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
+          },
+          surfaceActiveBg = {
+            background: base.background + 5,
+            backgroundHover: base.background + 5,
+            backgroundPress: base.backgroundPress + 5,
+            backgroundFocus: base.backgroundFocus + 5
+          },
+          surfaceActive = {
+            ...surfaceActiveBg,
+            // match border to background when active
+            borderColor: surfaceActiveBg.background,
+            borderColorHover: surfaceActiveBg.backgroundHover,
+            borderColorFocus: surfaceActiveBg.backgroundFocus,
+            borderColorPress: surfaceActiveBg.backgroundPress
+          },
+          inverseSurface12 = {
+            color: surface12.background,
+            colorHover: surface12.backgroundHover,
+            colorPress: surface12.backgroundPress,
+            colorFocus: surface12.backgroundFocus,
+            background: base.color,
+            backgroundHover: base.colorHover,
+            backgroundPress: base.colorPress,
+            backgroundFocus: base.colorFocus,
+            borderColor: base.color - 2,
+            borderColorHover: base.color - 3,
+            borderColorFocus: base.color - 4,
+            borderColorPress: base.color - 5
+          },
+          inverseActive = {
+            ...inverseSurface12,
+            background: base.color - 2,
+            backgroundHover: base.colorHover - 2,
+            backgroundPress: base.colorPress - 2,
+            backgroundFocus: base.colorFocus - 2,
+            borderColor: base.color - 2 - 2,
+            borderColorHover: base.color - 3 - 2,
+            borderColorFocus: base.color - 4 - 2,
+            borderColorPress: base.color - 5 - 2
+          },
+          alt1 = {
+            color: base.color - 1,
+            colorHover: base.colorHover - 1,
+            colorPress: base.colorPress - 1,
+            colorFocus: base.colorFocus - 1
+          },
+          alt2 = {
+            color: base.color - 2,
+            colorHover: base.colorHover - 2,
+            colorPress: base.colorPress - 2,
+            colorFocus: base.colorFocus - 2
+          };
+        return {
+          base,
+          alt1,
+          alt2,
+          surface1: surface12,
+          surface2: surface22,
+          surface3: surface32,
+          inverseSurface1: inverseSurface12,
+          inverseActive,
+          surfaceActive
+        };
       },
-      surface12 = {
-        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
-      },
-      surface22 = {
-        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
-      },
-      surface32 = {
-        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
-      },
-      surfaceActiveBg = {
-        background: base.background + 5,
-        backgroundHover: base.background + 5,
-        backgroundPress: base.backgroundPress + 5,
-        backgroundFocus: base.backgroundFocus + 5
-      },
-      surfaceActive = {
-        ...surfaceActiveBg,
-        // match border to background when active
-        borderColor: surfaceActiveBg.background,
-        borderColorHover: surfaceActiveBg.backgroundHover,
-        borderColorFocus: surfaceActiveBg.backgroundFocus,
-        borderColorPress: surfaceActiveBg.backgroundPress
-      },
-      inverseSurface12 = {
-        color: surface12.background,
-        colorHover: surface12.backgroundHover,
-        colorPress: surface12.backgroundPress,
-        colorFocus: surface12.backgroundFocus,
-        background: base.color,
-        backgroundHover: base.colorHover,
-        backgroundPress: base.colorPress,
-        backgroundFocus: base.colorFocus,
-        borderColor: base.color - 2,
-        borderColorHover: base.color - 3,
-        borderColorFocus: base.color - 4,
-        borderColorPress: base.color - 5
-      },
-      inverseActive = {
-        ...inverseSurface12,
-        background: base.color - 2,
-        backgroundHover: base.colorHover - 2,
-        backgroundPress: base.colorPress - 2,
-        backgroundFocus: base.colorFocus - 2,
-        borderColor: base.color - 2 - 2,
-        borderColorHover: base.color - 3 - 2,
-        borderColorFocus: base.color - 4 - 2,
-        borderColorPress: base.color - 5 - 2
-      },
-      alt1 = {
-        color: base.color - 1,
-        colorHover: base.colorHover - 1,
-        colorPress: base.colorPress - 1,
-        colorFocus: base.colorFocus - 1
-      },
-      alt2 = {
-        color: base.color - 2,
-        colorHover: base.colorHover - 2,
-        colorPress: base.colorPress - 2,
-        colorFocus: base.colorFocus - 2
-      };
+      lightTemplates = getBaseTemplates("light"),
+      darkTemplates = getBaseTemplates("dark");
     return {
-      base,
-      alt1,
-      alt2,
-      surface1: surface12,
-      surface2: surface22,
-      surface3: surface32,
-      inverseSurface1: inverseSurface12,
-      inverseActive,
-      surfaceActive
+      ...objectFromEntries(objectKeys(lightTemplates).map(name => [`light_${name}`, lightTemplates[name]])),
+      ...objectFromEntries(objectKeys(darkTemplates).map(name => [`dark_${name}`, darkTemplates[name]]))
     };
   },
-  lightTemplates = getTemplates("light"),
-  darkTemplates = getTemplates("dark"),
-  templates = {
-    ...objectFromEntries(objectKeys(lightTemplates).map(name => [`light_${name}`, lightTemplates[name]])),
-    ...objectFromEntries(objectKeys(darkTemplates).map(name => [`dark_${name}`, darkTemplates[name]]))
-  },
+  defaultTemplates = getTemplates(),
   shadows = {
     light: {
       shadowColor: lightShadowColorStrong,
@@ -326,7 +329,63 @@ const colorTokens = {
     parent: "",
     template: "surface3"
   }],
-  themeBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addThemes({
+  componentThemes = {
+    ListItem: {
+      template: "surface1"
+    },
+    SelectTrigger: surface1,
+    Card: surface1,
+    Button: surface3,
+    Checkbox: surface2,
+    Switch: surface2,
+    SwitchThumb: inverseSurface1,
+    TooltipContent: surface2,
+    Progress: {
+      template: "surface1"
+    },
+    RadioGroupItem: surface2,
+    TooltipArrow: {
+      template: "surface1"
+    },
+    SliderTrackActive: {
+      template: "surface3"
+    },
+    SliderTrack: {
+      template: "surface1"
+    },
+    SliderThumb: inverseSurface1,
+    Tooltip: inverseSurface1,
+    ProgressIndicator: inverseSurface1,
+    SheetOverlay: overlayThemeDefinitions,
+    DialogOverlay: overlayThemeDefinitions,
+    ModalOverlay: overlayThemeDefinitions,
+    Input: surface1,
+    TextArea: surface1
+  },
+  defaultSubThemes = {
+    alt1: {
+      template: "alt1"
+    },
+    alt2: {
+      template: "alt2"
+    },
+    active: {
+      template: "surface3"
+    },
+    surface1: {
+      template: "surface1"
+    },
+    surface2: {
+      template: "surface2"
+    },
+    surface3: {
+      template: "surface3"
+    },
+    surface4: {
+      template: "surfaceActive"
+    }
+  },
+  themeBuilder = createThemeBuilder().addPalettes(defaultPalettes).addTemplates(defaultTemplates).addThemes({
     light: {
       template: "base",
       palette: "light",
@@ -370,61 +429,7 @@ const colorTokens = {
       palette: "gray",
       template: "base"
     }
-  }).addChildThemes({
-    alt1: {
-      template: "alt1"
-    },
-    alt2: {
-      template: "alt2"
-    },
-    active: {
-      template: "surface3"
-    },
-    surface1: {
-      template: "surface1"
-    },
-    surface2: {
-      template: "surface2"
-    },
-    surface3: {
-      template: "surface3"
-    },
-    surface4: {
-      template: "surfaceActive"
-    }
-  }).addComponentThemes({
-    ListItem: {
-      template: "surface1"
-    },
-    SelectTrigger: surface1,
-    Card: surface1,
-    Button: surface3,
-    Checkbox: surface2,
-    Switch: surface2,
-    SwitchThumb: inverseSurface1,
-    TooltipContent: surface2,
-    Progress: {
-      template: "surface1"
-    },
-    RadioGroupItem: surface2,
-    TooltipArrow: {
-      template: "surface1"
-    },
-    SliderTrackActive: {
-      template: "surface3"
-    },
-    SliderTrack: {
-      template: "surface1"
-    },
-    SliderThumb: inverseSurface1,
-    Tooltip: inverseSurface1,
-    ProgressIndicator: inverseSurface1,
-    SheetOverlay: overlayThemeDefinitions,
-    DialogOverlay: overlayThemeDefinitions,
-    ModalOverlay: overlayThemeDefinitions,
-    Input: surface1,
-    TextArea: surface1
-  }, {
+  }).addChildThemes(defaultSubThemes).addComponentThemes(componentThemes, {
     avoidNestingWithin: ["alt1", "alt2", "surface1", "surface2", "surface3", "surface4"]
   }),
   themesIn = themeBuilder.build(),
@@ -509,4 +514,4 @@ function objectFromEntries(arr) {
 function objectKeys(obj) {
   return Object.keys(obj);
 }
-export { getTemplates, objectFromEntries, objectKeys, palettes, postfixObjKeys, radius, size, sizeToSpace, space, spaces, spacesNegative, themes, tokens, zIndex };
+export { componentThemes, defaultPalettes, defaultSubThemes, defaultTemplates, objectFromEntries, objectKeys, postfixObjKeys, radius, size, sizeToSpace, space, spaces, spacesNegative, themes, tokens, zIndex };