@tamagui/themes 1.5.2 → 1.5.5

package/dist/cjs/themes.js

@@ -45,7 +45,7 @@ const palettes = {
   light: [
     lightTransparent,
     "#fff",
-    "#f4f4f4",
+    "#f9f9f9",
     "hsl(0, 0%, 99.0%)",
     "hsl(0, 0%, 97.3%)",
     "hsl(0, 0%, 95.1%)",
@@ -97,16 +97,16 @@ const template = {
   colorPress: -1,
   colorFocus: -2,
   colorTransparent: -0,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
   placeholderColor: -4
 };
-const lightShadowColor = "rgba(0,0,0,0.15)";
-const lightShadowColorStrong = "rgba(0,0,0,0.2)";
-const darkShadowColor = "rgba(0,0,0,0.3)";
-const darkShadowColorStrong = "rgba(0,0,0,0.45)";
+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,
@@ -121,6 +121,10 @@ const darkShadows = {
 };
 const lightTemplate = {
   ...template,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
   ...lightShadows
 };
 const darkTemplate = { ...template, ...darkShadows };
@@ -163,20 +167,18 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
     return Object.fromEntries(
       Object.keys(colorSet).map((color) => {
         const colorPalette = Object.values(colorSet[color]);
-        const first6 = colorPalette.slice(0, 6);
-        const last5 = colorPalette.slice(colorPalette.length - 5);
-        const shadows = isLight ? lightShadows : darkShadows;
+        const [head, tail] = [
+          colorPalette.slice(0, 6),
+          colorPalette.slice(colorPalette.length - 5)
+        ];
         const palette = [
           transparent(colorPalette[0]),
-          ...first6,
-          ...last5,
+          ...head,
+          ...tail,
           theme.color,
           transparent(colorPalette[colorPalette.length - 1])
         ];
-        const colorTheme = (0, import_create_theme.createTheme)(palette, {
-          ...template,
-          ...shadows
-        });
+        const colorTheme = (0, import_create_theme.createTheme)(palette, isLight ? lightTemplate : darkTemplate);
         return [color, colorTheme];
       })
     );
@@ -199,6 +201,7 @@ const allThemes = (0, import_create_theme.addChildren)(baseThemes, (name, themeI
     const inverse1 = (0, import_create_theme.applyMask)(inverse, masks.weaker, { skip });
     const inverse2 = (0, import_create_theme.applyMask)(inverse1, masks.weaker, { skip });
     return {
+      Card: stronger1,
       Button: stronger2,
       DrawerFrame: stronger1,
       SliderTrack: theme2,

package/dist/cjs/themes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themes.tsx"],
-  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        const shadows = isLight ? lightShadows : darkShadows\n        const palette = [\n          transparent(colorPalette[0]),\n          ...first6,\n          ...last5,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, {\n          ...template,\n          ...shadows,\n        })\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f9f9f9',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 4,\n  borderColorHover: 5,\n  borderColorPress: 3,\n  borderColorFocus: 4,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // were re-ordering these\n        const [head, tail] = [\n          colorPalette.slice(0, 6),\n          colorPalette.slice(colorPalette.length - 5),\n        ]\n        // add our transparent colors first/last\n        // and make sure the last (foreground) color is white/black rather than colorful\n        // this is mostly for consistency with the older theme-base\n        const palette = [\n          transparent(colorPalette[0]),\n          ...head,\n          ...tail,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Card: stronger1,\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
+  "mappings": "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",
   "names": ["theme", "name"]
 }

package/dist/esm/themes.js

@@ -28,7 +28,7 @@ const palettes = {
   light: [
     lightTransparent,
     "#fff",
-    "#f4f4f4",
+    "#f9f9f9",
     "hsl(0, 0%, 99.0%)",
     "hsl(0, 0%, 97.3%)",
     "hsl(0, 0%, 95.1%)",
@@ -80,16 +80,16 @@ const template = {
   colorPress: -1,
   colorFocus: -2,
   colorTransparent: -0,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
   placeholderColor: -4
 };
-const lightShadowColor = "rgba(0,0,0,0.15)";
-const lightShadowColorStrong = "rgba(0,0,0,0.2)";
-const darkShadowColor = "rgba(0,0,0,0.3)";
-const darkShadowColorStrong = "rgba(0,0,0,0.45)";
+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,
@@ -104,6 +104,10 @@ const darkShadows = {
 };
 const lightTemplate = {
   ...template,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
   ...lightShadows
 };
 const darkTemplate = { ...template, ...darkShadows };
@@ -146,20 +150,18 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     return Object.fromEntries(
       Object.keys(colorSet).map((color) => {
         const colorPalette = Object.values(colorSet[color]);
-        const first6 = colorPalette.slice(0, 6);
-        const last5 = colorPalette.slice(colorPalette.length - 5);
-        const shadows = isLight ? lightShadows : darkShadows;
+        const [head, tail] = [
+          colorPalette.slice(0, 6),
+          colorPalette.slice(colorPalette.length - 5)
+        ];
         const palette = [
           transparent(colorPalette[0]),
-          ...first6,
-          ...last5,
+          ...head,
+          ...tail,
           theme.color,
           transparent(colorPalette[colorPalette.length - 1])
         ];
-        const colorTheme = createTheme(palette, {
-          ...template,
-          ...shadows
-        });
+        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate);
         return [color, colorTheme];
       })
     );
@@ -182,6 +184,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     const inverse1 = applyMask(inverse, masks.weaker, { skip });
     const inverse2 = applyMask(inverse1, masks.weaker, { skip });
     return {
+      Card: stronger1,
       Button: stronger2,
       DrawerFrame: stronger1,
       SliderTrack: theme2,

package/dist/esm/themes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themes.tsx"],
-  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        const shadows = isLight ? lightShadows : darkShadows\n        const palette = [\n          transparent(colorPalette[0]),\n          ...first6,\n          ...last5,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, {\n          ...template,\n          ...shadows,\n        })\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f9f9f9',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 4,\n  borderColorHover: 5,\n  borderColorPress: 3,\n  borderColorFocus: 4,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // were re-ordering these\n        const [head, tail] = [\n          colorPalette.slice(0, 6),\n          colorPalette.slice(colorPalette.length - 5),\n        ]\n        // add our transparent colors first/last\n        // and make sure the last (foreground) color is white/black rather than colorful\n        // this is mostly for consistency with the older theme-base\n        const palette = [\n          transparent(colorPalette[0]),\n          ...head,\n          ...tail,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Card: stronger1,\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
+  "mappings": "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",
   "names": ["theme", "name"]
 }

package/dist/esm/themes.mjs

@@ -28,7 +28,7 @@ const palettes = {
   light: [
     lightTransparent,
     "#fff",
-    "#f4f4f4",
+    "#f9f9f9",
     "hsl(0, 0%, 99.0%)",
     "hsl(0, 0%, 97.3%)",
     "hsl(0, 0%, 95.1%)",
@@ -80,16 +80,16 @@ const template = {
   colorPress: -1,
   colorFocus: -2,
   colorTransparent: -0,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
   placeholderColor: -4
 };
-const lightShadowColor = "rgba(0,0,0,0.15)";
-const lightShadowColorStrong = "rgba(0,0,0,0.2)";
-const darkShadowColor = "rgba(0,0,0,0.3)";
-const darkShadowColorStrong = "rgba(0,0,0,0.45)";
+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,
@@ -104,6 +104,10 @@ const darkShadows = {
 };
 const lightTemplate = {
   ...template,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
   ...lightShadows
 };
 const darkTemplate = { ...template, ...darkShadows };
@@ -146,20 +150,18 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     return Object.fromEntries(
       Object.keys(colorSet).map((color) => {
         const colorPalette = Object.values(colorSet[color]);
-        const first6 = colorPalette.slice(0, 6);
-        const last5 = colorPalette.slice(colorPalette.length - 5);
-        const shadows = isLight ? lightShadows : darkShadows;
+        const [head, tail] = [
+          colorPalette.slice(0, 6),
+          colorPalette.slice(colorPalette.length - 5)
+        ];
         const palette = [
           transparent(colorPalette[0]),
-          ...first6,
-          ...last5,
+          ...head,
+          ...tail,
           theme.color,
           transparent(colorPalette[colorPalette.length - 1])
         ];
-        const colorTheme = createTheme(palette, {
-          ...template,
-          ...shadows
-        });
+        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate);
         return [color, colorTheme];
       })
     );
@@ -182,6 +184,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     const inverse1 = applyMask(inverse, masks.weaker, { skip });
     const inverse2 = applyMask(inverse1, masks.weaker, { skip });
     return {
+      Card: stronger1,
       Button: stronger2,
       DrawerFrame: stronger1,
       SliderTrack: theme2,

package/dist/esm/themes.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themes.tsx"],
-  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f4f4f4',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.15)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.2)'\nconst darkShadowColor = 'rgba(0,0,0,0.3)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.45)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // we want a much lighter text color by default so swap them around a bit\n        const first6 = colorPalette.slice(0, 6)\n        const last5 = colorPalette.slice(colorPalette.length - 5)\n        const shadows = isLight ? lightShadows : darkShadows\n        const palette = [\n          transparent(colorPalette[0]),\n          ...first6,\n          ...last5,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, {\n          ...template,\n          ...shadows,\n        })\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  addChildren,\n  applyMask,\n  createStrengthenMask,\n  createTheme,\n  createWeakenMask,\n} from '@tamagui/create-theme'\n\nimport { colorTokens, darkColors, lightColors } from './tokens'\n\ntype ColorName = keyof typeof colorTokens.dark\n\nconst lightTransparent = 'rgba(255,255,255,0)'\nconst darkTransparent = 'rgba(10,10,10,0)'\n\n// background => foreground\nconst palettes = {\n  dark: [\n    darkTransparent,\n    '#090909',\n    '#151515',\n    '#191919',\n    '#232323',\n    '#282828',\n    '#323232',\n    '#424242',\n    '#494949',\n    '#545454',\n    '#626262',\n    '#a5a5a5',\n    '#fff',\n    lightTransparent,\n  ],\n  light: [\n    lightTransparent,\n    '#fff',\n    '#f9f9f9',\n    'hsl(0, 0%, 99.0%)',\n    'hsl(0, 0%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 93.0%)',\n    'hsl(0, 0%, 90.9%)',\n    'hsl(0, 0%, 80.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 52.3%)',\n    'hsl(0, 0%, 43.5%)',\n    'hsl(0, 0%, 9.0%)',\n    darkTransparent,\n  ],\n}\n\nconst colorScale = {\n  color1: 1,\n  color2: 2,\n  color3: 3,\n  color4: 4,\n  color5: 5,\n  color6: 6,\n  color7: 7,\n  color8: 8,\n  color9: 9,\n  color10: 10,\n  color11: 11,\n  color12: 12,\n}\n\n// we can use subset of our template as a \"skip\" so it doesn't get adjusted with masks\nconst skip = {\n  ...colorScale,\n  shadowColor: 1,\n  shadowColorHover: 1,\n  shadowColorPress: 2,\n  shadowColorFocus: 2,\n}\n\n// templates use the palette and specify index\n// negative goes backwards from end so -1 is the last item\nconst template = {\n  ...skip,\n  // the background, color, etc keys here work like generics - they make it so you\n  // can publish components for others to use without mandating a specific color scale\n  // the @tamagui/button Button component looks for `$background`, so you set the\n  // dark_red_Button theme to have a stronger background than the dark_red theme.\n  background: 2,\n  backgroundHover: 3,\n  backgroundPress: 1,\n  backgroundFocus: 2,\n  backgroundStrong: 1,\n  backgroundTransparent: 0,\n  color: -1,\n  colorHover: -2,\n  colorPress: -1,\n  colorFocus: -2,\n  colorTransparent: -0,\n  borderColor: 4,\n  borderColorHover: 5,\n  borderColorPress: 3,\n  borderColorFocus: 4,\n  placeholderColor: -4,\n}\n\nconst lightShadowColor = 'rgba(0,0,0,0.02)'\nconst lightShadowColorStrong = 'rgba(0,0,0,0.066)'\nconst darkShadowColor = 'rgba(0,0,0,0.2)'\nconst darkShadowColorStrong = 'rgba(0,0,0,0.3)'\n\nconst lightShadows = {\n  shadowColor: lightShadowColorStrong,\n  shadowColorHover: lightShadowColorStrong,\n  shadowColorPress: lightShadowColor,\n  shadowColorFocus: lightShadowColor,\n}\n\nconst darkShadows = {\n  shadowColor: darkShadowColorStrong,\n  shadowColorHover: darkShadowColorStrong,\n  shadowColorPress: darkShadowColor,\n  shadowColorFocus: darkShadowColor,\n}\n\nconst lightTemplate = {\n  ...template,\n  borderColor: 3,\n  borderColorHover: 4,\n  borderColorPress: 2,\n  borderColorFocus: 3,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate, {\n  nonInheritedValues: lightColors,\n})\n\nconst dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })\n\ntype Theme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: Theme\n  dark: Theme\n} = {\n  light,\n  dark,\n}\n\n// avoid transparent ends\nconst max = palettes.dark.length - 1\nconst masks = {\n  weaker: createWeakenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger: createStrengthenMask({\n    by: 1,\n    min: 1,\n    max,\n  }),\n  stronger2: createStrengthenMask({\n    by: 2,\n    min: 1,\n    max,\n  }),\n}\n\nconst allThemes = addChildren(baseThemes, (name, themeIn) => {\n  const theme = themeIn as Theme\n  const isLight = name === 'light'\n  const inverseName = isLight ? 'dark' : 'light'\n  const inverseTheme = baseThemes[inverseName]\n  const transparent = (hsl: string, opacity = 0) =>\n    hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`)\n\n  // setup colorThemes and their inverses\n  const [colorThemes, inverseColorThemes] = [\n    colorTokens[name],\n    colorTokens[inverseName],\n  ].map((colorSet) => {\n    return Object.fromEntries(\n      Object.keys(colorSet).map((color) => {\n        const colorPalette = Object.values(colorSet[color as ColorName])\n        // were re-ordering these\n        const [head, tail] = [\n          colorPalette.slice(0, 6),\n          colorPalette.slice(colorPalette.length - 5),\n        ]\n        // add our transparent colors first/last\n        // and make sure the last (foreground) color is white/black rather than colorful\n        // this is mostly for consistency with the older theme-base\n        const palette = [\n          transparent(colorPalette[0]),\n          ...head,\n          ...tail,\n          theme.color,\n          transparent(colorPalette[colorPalette.length - 1]),\n        ]\n        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, Theme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme as any, inverse as any),\n      ...getComponentThemes(colorTheme as any, inverse as any),\n    }\n  })\n\n  return {\n    ...getAltThemes(theme, inverseTheme),\n    ...getComponentThemes(theme, inverseTheme),\n    ...allColorThemes,\n  }\n\n  function getComponentThemes(theme: Theme, inverse: Theme) {\n    const stronger1 = applyMask(theme, masks.stronger, { skip })\n    const stronger2 = applyMask(stronger1, masks.stronger, { skip })\n    const inverse1 = applyMask(inverse, masks.weaker, { skip })\n    const inverse2 = applyMask(inverse1, masks.weaker, { skip })\n    return {\n      Card: stronger1,\n      Button: stronger2,\n      DrawerFrame: stronger1,\n      SliderTrack: theme,\n      SliderTrackActive: stronger2,\n      SliderThumb: inverse1,\n      Progress: stronger1,\n      ProgressIndicator: inverse,\n      Switch: stronger2,\n      SwitchThumb: inverse2,\n      TooltipArrow: stronger1,\n      TooltipContent: stronger2,\n    }\n  }\n\n  function getAltThemes(theme: Theme, inverse: Theme) {\n    const alt1 = applyMask(theme, masks.weaker, { skip })\n    const alt2 = applyMask(alt1, masks.weaker, { skip })\n    const active = applyMask(theme, masks.stronger2, { skip })\n    return addChildren({ alt1, alt2, active }, (name, theme) => {\n      return getComponentThemes(theme as any, inverse)\n    })\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type (the rest use a subset)\n  light,\n  dark,\n}\n"],
+  "mappings": "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",
   "names": ["theme", "name"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/themes",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -32,13 +32,13 @@
     }
   },
   "dependencies": {
-    "@tamagui/colors": "^1.5.2",
-    "@tamagui/core": "^1.5.2",
-    "@tamagui/create-theme": "^1.5.2",
-    "@tamagui/create-themes": "^1.5.2"
+    "@tamagui/colors": "^1.5.5",
+    "@tamagui/core": "^1.5.5",
+    "@tamagui/create-theme": "^1.5.5",
+    "@tamagui/create-themes": "^1.5.5"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.5.2"
+    "@tamagui/build": "^1.5.5"
   },
   "publishConfig": {
     "access": "public"

package/src/themes.tsx

@@ -34,7 +34,7 @@ const palettes = {
   light: [
     lightTransparent,
     '#fff',
-    '#f4f4f4',
+    '#f9f9f9',
     'hsl(0, 0%, 99.0%)',
     'hsl(0, 0%, 97.3%)',
     'hsl(0, 0%, 95.1%)',
@@ -92,17 +92,17 @@ const template = {
   colorPress: -1,
   colorFocus: -2,
   colorTransparent: -0,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  borderColor: 4,
+  borderColorHover: 5,
+  borderColorPress: 3,
+  borderColorFocus: 4,
   placeholderColor: -4,
 }
 
-const lightShadowColor = 'rgba(0,0,0,0.15)'
-const lightShadowColorStrong = 'rgba(0,0,0,0.2)'
-const darkShadowColor = 'rgba(0,0,0,0.3)'
-const darkShadowColorStrong = 'rgba(0,0,0,0.45)'
+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,
@@ -120,6 +120,10 @@ const darkShadows = {
 
 const lightTemplate = {
   ...template,
+  borderColor: 3,
+  borderColorHover: 4,
+  borderColorPress: 2,
+  borderColorFocus: 3,
   ...lightShadows,
 }
 
@@ -177,21 +181,22 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     return Object.fromEntries(
       Object.keys(colorSet).map((color) => {
         const colorPalette = Object.values(colorSet[color as ColorName])
-        // we want a much lighter text color by default so swap them around a bit
-        const first6 = colorPalette.slice(0, 6)
-        const last5 = colorPalette.slice(colorPalette.length - 5)
-        const shadows = isLight ? lightShadows : darkShadows
+        // 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]),
-          ...first6,
-          ...last5,
+          ...head,
+          ...tail,
           theme.color,
           transparent(colorPalette[colorPalette.length - 1]),
         ]
-        const colorTheme = createTheme(palette, {
-          ...template,
-          ...shadows,
-        })
+        const colorTheme = createTheme(palette, isLight ? lightTemplate : darkTemplate)
         return [color, colorTheme]
       })
     ) as Record<ColorName, Theme>
@@ -217,6 +222,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
     const inverse1 = applyMask(inverse, masks.weaker, { skip })
     const inverse2 = applyMask(inverse1, masks.weaker, { skip })
     return {
+      Card: stronger1,
       Button: stronger2,
       DrawerFrame: stronger1,
       SliderTrack: theme,

package/types/themes.d.ts

@@ -3,6 +3,10 @@ declare const lightTemplate: {
     shadowColorHover: string;
     shadowColorPress: string;
     shadowColorFocus: string;
+    borderColor: number;
+    borderColorHover: number;
+    borderColorPress: number;
+    borderColorFocus: number;
     background: number;
     backgroundHover: number;
     backgroundPress: number;
@@ -14,10 +18,6 @@ declare const lightTemplate: {
     colorPress: number;
     colorFocus: number;
     colorTransparent: number;
-    borderColor: number;
-    borderColorHover: number;
-    borderColorPress: number;
-    borderColorFocus: number;
     placeholderColor: number;
     color1: number;
     color2: number;
@@ -137,6 +137,10 @@ export declare const themes: {
         shadowColorHover: string;
         shadowColorPress: string;
         shadowColorFocus: string;
+        borderColor: string;
+        borderColorHover: string;
+        borderColorPress: string;
+        borderColorFocus: string;
         background: string;
         backgroundHover: string;
         backgroundPress: string;
@@ -148,10 +152,6 @@ export declare const themes: {
         colorPress: string;
         colorFocus: string;
         colorTransparent: string;
-        borderColor: string;
-        borderColorHover: string;
-        borderColorPress: string;
-        borderColorFocus: string;
         placeholderColor: string;
         color1: string;
         color2: string;
@@ -267,6 +267,10 @@ export declare const themes: {
         shadowColorHover: string;
         shadowColorPress: string;
         shadowColorFocus: string;
+        borderColor: string;
+        borderColorHover: string;
+        borderColorPress: string;
+        borderColorFocus: string;
         background: string;
         backgroundHover: string;
         backgroundPress: string;
@@ -278,10 +282,6 @@ export declare const themes: {
         colorPress: string;
         colorFocus: string;
         colorTransparent: string;
-        borderColor: string;
-        borderColorHover: string;
-        borderColorPress: string;
-        borderColorFocus: string;
         placeholderColor: string;
         color1: string;
         color2: string;
@@ -299,6 +299,7 @@ export declare const themes: {
     light_alt1: Theme;
     light_alt2: Theme;
     light_active: Theme;
+    light_Card: Theme;
     light_Button: Theme;
     light_DrawerFrame: Theme;
     light_SliderTrack: Theme;
@@ -310,6 +311,7 @@ export declare const themes: {
     light_SwitchThumb: Theme;
     light_TooltipArrow: Theme;
     light_TooltipContent: Theme;
+    light_alt1_Card: Theme;
     light_alt1_Button: Theme;
     light_alt1_DrawerFrame: Theme;
     light_alt1_SliderTrack: Theme;
@@ -321,6 +323,7 @@ export declare const themes: {
     light_alt1_SwitchThumb: Theme;
     light_alt1_TooltipArrow: Theme;
     light_alt1_TooltipContent: Theme;
+    light_alt2_Card: Theme;
     light_alt2_Button: Theme;
     light_alt2_DrawerFrame: Theme;
     light_alt2_SliderTrack: Theme;
@@ -332,6 +335,7 @@ export declare const themes: {
     light_alt2_SwitchThumb: Theme;
     light_alt2_TooltipArrow: Theme;
     light_alt2_TooltipContent: Theme;
+    light_active_Card: Theme;
     light_active_Button: Theme;
     light_active_DrawerFrame: Theme;
     light_active_SliderTrack: Theme;
@@ -354,6 +358,7 @@ export declare const themes: {
     light_blue_alt1: Theme;
     light_blue_alt2: Theme;
     light_blue_active: Theme;
+    light_blue_Card: Theme;
     light_blue_Button: Theme;
     light_blue_DrawerFrame: Theme;
     light_blue_SliderTrack: Theme;
@@ -365,6 +370,7 @@ export declare const themes: {
     light_blue_SwitchThumb: Theme;
     light_blue_TooltipArrow: Theme;
     light_blue_TooltipContent: Theme;
+    light_blue_alt1_Card: Theme;
     light_blue_alt1_Button: Theme;
     light_blue_alt1_DrawerFrame: Theme;
     light_blue_alt1_SliderTrack: Theme;
@@ -376,6 +382,7 @@ export declare const themes: {
     light_blue_alt1_SwitchThumb: Theme;
     light_blue_alt1_TooltipArrow: Theme;
     light_blue_alt1_TooltipContent: Theme;
+    light_blue_alt2_Card: Theme;
     light_blue_alt2_Button: Theme;
     light_blue_alt2_DrawerFrame: Theme;
     light_blue_alt2_SliderTrack: Theme;
@@ -387,6 +394,7 @@ export declare const themes: {
     light_blue_alt2_SwitchThumb: Theme;
     light_blue_alt2_TooltipArrow: Theme;
     light_blue_alt2_TooltipContent: Theme;
+    light_blue_active_Card: Theme;
     light_blue_active_Button: Theme;
     light_blue_active_DrawerFrame: Theme;
     light_blue_active_SliderTrack: Theme;
@@ -401,6 +409,7 @@ export declare const themes: {
     light_gray_alt1: Theme;
     light_gray_alt2: Theme;
     light_gray_active: Theme;
+    light_gray_Card: Theme;
     light_gray_Button: Theme;
     light_gray_DrawerFrame: Theme;
     light_gray_SliderTrack: Theme;
@@ -412,6 +421,7 @@ export declare const themes: {
     light_gray_SwitchThumb: Theme;
     light_gray_TooltipArrow: Theme;
     light_gray_TooltipContent: Theme;
+    light_gray_alt1_Card: Theme;
     light_gray_alt1_Button: Theme;
     light_gray_alt1_DrawerFrame: Theme;
     light_gray_alt1_SliderTrack: Theme;
@@ -423,6 +433,7 @@ export declare const themes: {
     light_gray_alt1_SwitchThumb: Theme;
     light_gray_alt1_TooltipArrow: Theme;
     light_gray_alt1_TooltipContent: Theme;
+    light_gray_alt2_Card: Theme;
     light_gray_alt2_Button: Theme;
     light_gray_alt2_DrawerFrame: Theme;
     light_gray_alt2_SliderTrack: Theme;
@@ -434,6 +445,7 @@ export declare const themes: {
     light_gray_alt2_SwitchThumb: Theme;
     light_gray_alt2_TooltipArrow: Theme;
     light_gray_alt2_TooltipContent: Theme;
+    light_gray_active_Card: Theme;
     light_gray_active_Button: Theme;
     light_gray_active_DrawerFrame: Theme;
     light_gray_active_SliderTrack: Theme;
@@ -448,6 +460,7 @@ export declare const themes: {
     light_green_alt1: Theme;
     light_green_alt2: Theme;
     light_green_active: Theme;
+    light_green_Card: Theme;
     light_green_Button: Theme;
     light_green_DrawerFrame: Theme;
     light_green_SliderTrack: Theme;
@@ -459,6 +472,7 @@ export declare const themes: {
     light_green_SwitchThumb: Theme;
     light_green_TooltipArrow: Theme;
     light_green_TooltipContent: Theme;
+    light_green_alt1_Card: Theme;
     light_green_alt1_Button: Theme;
     light_green_alt1_DrawerFrame: Theme;
     light_green_alt1_SliderTrack: Theme;
@@ -470,6 +484,7 @@ export declare const themes: {
     light_green_alt1_SwitchThumb: Theme;
     light_green_alt1_TooltipArrow: Theme;
     light_green_alt1_TooltipContent: Theme;
+    light_green_alt2_Card: Theme;
     light_green_alt2_Button: Theme;
     light_green_alt2_DrawerFrame: Theme;
     light_green_alt2_SliderTrack: Theme;
@@ -481,6 +496,7 @@ export declare const themes: {
     light_green_alt2_SwitchThumb: Theme;
     light_green_alt2_TooltipArrow: Theme;
     light_green_alt2_TooltipContent: Theme;
+    light_green_active_Card: Theme;
     light_green_active_Button: Theme;
     light_green_active_DrawerFrame: Theme;
     light_green_active_SliderTrack: Theme;
@@ -495,6 +511,7 @@ export declare const themes: {
     light_orange_alt1: Theme;
     light_orange_alt2: Theme;
     light_orange_active: Theme;
+    light_orange_Card: Theme;
     light_orange_Button: Theme;
     light_orange_DrawerFrame: Theme;
     light_orange_SliderTrack: Theme;
@@ -506,6 +523,7 @@ export declare const themes: {
     light_orange_SwitchThumb: Theme;
     light_orange_TooltipArrow: Theme;
     light_orange_TooltipContent: Theme;
+    light_orange_alt1_Card: Theme;
     light_orange_alt1_Button: Theme;
     light_orange_alt1_DrawerFrame: Theme;
     light_orange_alt1_SliderTrack: Theme;
@@ -517,6 +535,7 @@ export declare const themes: {
     light_orange_alt1_SwitchThumb: Theme;
     light_orange_alt1_TooltipArrow: Theme;
     light_orange_alt1_TooltipContent: Theme;
+    light_orange_alt2_Card: Theme;
     light_orange_alt2_Button: Theme;
     light_orange_alt2_DrawerFrame: Theme;
     light_orange_alt2_SliderTrack: Theme;
@@ -528,6 +547,7 @@ export declare const themes: {
     light_orange_alt2_SwitchThumb: Theme;
     light_orange_alt2_TooltipArrow: Theme;
     light_orange_alt2_TooltipContent: Theme;
+    light_orange_active_Card: Theme;
     light_orange_active_Button: Theme;
     light_orange_active_DrawerFrame: Theme;
     light_orange_active_SliderTrack: Theme;
@@ -542,6 +562,7 @@ export declare const themes: {
     light_pink_alt1: Theme;
     light_pink_alt2: Theme;
     light_pink_active: Theme;
+    light_pink_Card: Theme;
     light_pink_Button: Theme;
     light_pink_DrawerFrame: Theme;
     light_pink_SliderTrack: Theme;
@@ -553,6 +574,7 @@ export declare const themes: {
     light_pink_SwitchThumb: Theme;
     light_pink_TooltipArrow: Theme;
     light_pink_TooltipContent: Theme;
+    light_pink_alt1_Card: Theme;
     light_pink_alt1_Button: Theme;
     light_pink_alt1_DrawerFrame: Theme;
     light_pink_alt1_SliderTrack: Theme;
@@ -564,6 +586,7 @@ export declare const themes: {
     light_pink_alt1_SwitchThumb: Theme;
     light_pink_alt1_TooltipArrow: Theme;
     light_pink_alt1_TooltipContent: Theme;
+    light_pink_alt2_Card: Theme;
     light_pink_alt2_Button: Theme;
     light_pink_alt2_DrawerFrame: Theme;
     light_pink_alt2_SliderTrack: Theme;
@@ -575,6 +598,7 @@ export declare const themes: {
     light_pink_alt2_SwitchThumb: Theme;
     light_pink_alt2_TooltipArrow: Theme;
     light_pink_alt2_TooltipContent: Theme;
+    light_pink_active_Card: Theme;
     light_pink_active_Button: Theme;
     light_pink_active_DrawerFrame: Theme;
     light_pink_active_SliderTrack: Theme;
@@ -589,6 +613,7 @@ export declare const themes: {
     light_purple_alt1: Theme;
     light_purple_alt2: Theme;
     light_purple_active: Theme;
+    light_purple_Card: Theme;
     light_purple_Button: Theme;
     light_purple_DrawerFrame: Theme;
     light_purple_SliderTrack: Theme;
@@ -600,6 +625,7 @@ export declare const themes: {
     light_purple_SwitchThumb: Theme;
     light_purple_TooltipArrow: Theme;
     light_purple_TooltipContent: Theme;
+    light_purple_alt1_Card: Theme;
     light_purple_alt1_Button: Theme;
     light_purple_alt1_DrawerFrame: Theme;
     light_purple_alt1_SliderTrack: Theme;
@@ -611,6 +637,7 @@ export declare const themes: {
     light_purple_alt1_SwitchThumb: Theme;
     light_purple_alt1_TooltipArrow: Theme;
     light_purple_alt1_TooltipContent: Theme;
+    light_purple_alt2_Card: Theme;
     light_purple_alt2_Button: Theme;
     light_purple_alt2_DrawerFrame: Theme;
     light_purple_alt2_SliderTrack: Theme;
@@ -622,6 +649,7 @@ export declare const themes: {
     light_purple_alt2_SwitchThumb: Theme;
     light_purple_alt2_TooltipArrow: Theme;
     light_purple_alt2_TooltipContent: Theme;
+    light_purple_active_Card: Theme;
     light_purple_active_Button: Theme;
     light_purple_active_DrawerFrame: Theme;
     light_purple_active_SliderTrack: Theme;
@@ -636,6 +664,7 @@ export declare const themes: {
     light_red_alt1: Theme;
     light_red_alt2: Theme;
     light_red_active: Theme;
+    light_red_Card: Theme;
     light_red_Button: Theme;
     light_red_DrawerFrame: Theme;
     light_red_SliderTrack: Theme;
@@ -647,6 +676,7 @@ export declare const themes: {
     light_red_SwitchThumb: Theme;
     light_red_TooltipArrow: Theme;
     light_red_TooltipContent: Theme;
+    light_red_alt1_Card: Theme;
     light_red_alt1_Button: Theme;
     light_red_alt1_DrawerFrame: Theme;
     light_red_alt1_SliderTrack: Theme;
@@ -658,6 +688,7 @@ export declare const themes: {
     light_red_alt1_SwitchThumb: Theme;
     light_red_alt1_TooltipArrow: Theme;
     light_red_alt1_TooltipContent: Theme;
+    light_red_alt2_Card: Theme;
     light_red_alt2_Button: Theme;
     light_red_alt2_DrawerFrame: Theme;
     light_red_alt2_SliderTrack: Theme;
@@ -669,6 +700,7 @@ export declare const themes: {
     light_red_alt2_SwitchThumb: Theme;
     light_red_alt2_TooltipArrow: Theme;
     light_red_alt2_TooltipContent: Theme;
+    light_red_active_Card: Theme;
     light_red_active_Button: Theme;
     light_red_active_DrawerFrame: Theme;
     light_red_active_SliderTrack: Theme;
@@ -683,6 +715,7 @@ export declare const themes: {
     light_yellow_alt1: Theme;
     light_yellow_alt2: Theme;
     light_yellow_active: Theme;
+    light_yellow_Card: Theme;
     light_yellow_Button: Theme;
     light_yellow_DrawerFrame: Theme;
     light_yellow_SliderTrack: Theme;
@@ -694,6 +727,7 @@ export declare const themes: {
     light_yellow_SwitchThumb: Theme;
     light_yellow_TooltipArrow: Theme;
     light_yellow_TooltipContent: Theme;
+    light_yellow_alt1_Card: Theme;
     light_yellow_alt1_Button: Theme;
     light_yellow_alt1_DrawerFrame: Theme;
     light_yellow_alt1_SliderTrack: Theme;
@@ -705,6 +739,7 @@ export declare const themes: {
     light_yellow_alt1_SwitchThumb: Theme;
     light_yellow_alt1_TooltipArrow: Theme;
     light_yellow_alt1_TooltipContent: Theme;
+    light_yellow_alt2_Card: Theme;
     light_yellow_alt2_Button: Theme;
     light_yellow_alt2_DrawerFrame: Theme;
     light_yellow_alt2_SliderTrack: Theme;
@@ -716,6 +751,7 @@ export declare const themes: {
     light_yellow_alt2_SwitchThumb: Theme;
     light_yellow_alt2_TooltipArrow: Theme;
     light_yellow_alt2_TooltipContent: Theme;
+    light_yellow_active_Card: Theme;
     light_yellow_active_Button: Theme;
     light_yellow_active_DrawerFrame: Theme;
     light_yellow_active_SliderTrack: Theme;
@@ -730,6 +766,7 @@ export declare const themes: {
     dark_alt1: Theme;
     dark_alt2: Theme;
     dark_active: Theme;
+    dark_Card: Theme;
     dark_Button: Theme;
     dark_DrawerFrame: Theme;
     dark_SliderTrack: Theme;
@@ -741,6 +778,7 @@ export declare const themes: {
     dark_SwitchThumb: Theme;
     dark_TooltipArrow: Theme;
     dark_TooltipContent: Theme;
+    dark_alt1_Card: Theme;
     dark_alt1_Button: Theme;
     dark_alt1_DrawerFrame: Theme;
     dark_alt1_SliderTrack: Theme;
@@ -752,6 +790,7 @@ export declare const themes: {
     dark_alt1_SwitchThumb: Theme;
     dark_alt1_TooltipArrow: Theme;
     dark_alt1_TooltipContent: Theme;
+    dark_alt2_Card: Theme;
     dark_alt2_Button: Theme;
     dark_alt2_DrawerFrame: Theme;
     dark_alt2_SliderTrack: Theme;
@@ -763,6 +802,7 @@ export declare const themes: {
     dark_alt2_SwitchThumb: Theme;
     dark_alt2_TooltipArrow: Theme;
     dark_alt2_TooltipContent: Theme;
+    dark_active_Card: Theme;
     dark_active_Button: Theme;
     dark_active_DrawerFrame: Theme;
     dark_active_SliderTrack: Theme;
@@ -785,6 +825,7 @@ export declare const themes: {
     dark_blue_alt1: Theme;
     dark_blue_alt2: Theme;
     dark_blue_active: Theme;
+    dark_blue_Card: Theme;
     dark_blue_Button: Theme;
     dark_blue_DrawerFrame: Theme;
     dark_blue_SliderTrack: Theme;
@@ -796,6 +837,7 @@ export declare const themes: {
     dark_blue_SwitchThumb: Theme;
     dark_blue_TooltipArrow: Theme;
     dark_blue_TooltipContent: Theme;
+    dark_blue_alt1_Card: Theme;
     dark_blue_alt1_Button: Theme;
     dark_blue_alt1_DrawerFrame: Theme;
     dark_blue_alt1_SliderTrack: Theme;
@@ -807,6 +849,7 @@ export declare const themes: {
     dark_blue_alt1_SwitchThumb: Theme;
     dark_blue_alt1_TooltipArrow: Theme;
     dark_blue_alt1_TooltipContent: Theme;
+    dark_blue_alt2_Card: Theme;
     dark_blue_alt2_Button: Theme;
     dark_blue_alt2_DrawerFrame: Theme;
     dark_blue_alt2_SliderTrack: Theme;
@@ -818,6 +861,7 @@ export declare const themes: {
     dark_blue_alt2_SwitchThumb: Theme;
     dark_blue_alt2_TooltipArrow: Theme;
     dark_blue_alt2_TooltipContent: Theme;
+    dark_blue_active_Card: Theme;
     dark_blue_active_Button: Theme;
     dark_blue_active_DrawerFrame: Theme;
     dark_blue_active_SliderTrack: Theme;
@@ -832,6 +876,7 @@ export declare const themes: {
     dark_gray_alt1: Theme;
     dark_gray_alt2: Theme;
     dark_gray_active: Theme;
+    dark_gray_Card: Theme;
     dark_gray_Button: Theme;
     dark_gray_DrawerFrame: Theme;
     dark_gray_SliderTrack: Theme;
@@ -843,6 +888,7 @@ export declare const themes: {
     dark_gray_SwitchThumb: Theme;
     dark_gray_TooltipArrow: Theme;
     dark_gray_TooltipContent: Theme;
+    dark_gray_alt1_Card: Theme;
     dark_gray_alt1_Button: Theme;
     dark_gray_alt1_DrawerFrame: Theme;
     dark_gray_alt1_SliderTrack: Theme;
@@ -854,6 +900,7 @@ export declare const themes: {
     dark_gray_alt1_SwitchThumb: Theme;
     dark_gray_alt1_TooltipArrow: Theme;
     dark_gray_alt1_TooltipContent: Theme;
+    dark_gray_alt2_Card: Theme;
     dark_gray_alt2_Button: Theme;
     dark_gray_alt2_DrawerFrame: Theme;
     dark_gray_alt2_SliderTrack: Theme;
@@ -865,6 +912,7 @@ export declare const themes: {
     dark_gray_alt2_SwitchThumb: Theme;
     dark_gray_alt2_TooltipArrow: Theme;
     dark_gray_alt2_TooltipContent: Theme;
+    dark_gray_active_Card: Theme;
     dark_gray_active_Button: Theme;
     dark_gray_active_DrawerFrame: Theme;
     dark_gray_active_SliderTrack: Theme;
@@ -879,6 +927,7 @@ export declare const themes: {
     dark_green_alt1: Theme;
     dark_green_alt2: Theme;
     dark_green_active: Theme;
+    dark_green_Card: Theme;
     dark_green_Button: Theme;
     dark_green_DrawerFrame: Theme;
     dark_green_SliderTrack: Theme;
@@ -890,6 +939,7 @@ export declare const themes: {
     dark_green_SwitchThumb: Theme;
     dark_green_TooltipArrow: Theme;
     dark_green_TooltipContent: Theme;
+    dark_green_alt1_Card: Theme;
     dark_green_alt1_Button: Theme;
     dark_green_alt1_DrawerFrame: Theme;
     dark_green_alt1_SliderTrack: Theme;
@@ -901,6 +951,7 @@ export declare const themes: {
     dark_green_alt1_SwitchThumb: Theme;
     dark_green_alt1_TooltipArrow: Theme;
     dark_green_alt1_TooltipContent: Theme;
+    dark_green_alt2_Card: Theme;
     dark_green_alt2_Button: Theme;
     dark_green_alt2_DrawerFrame: Theme;
     dark_green_alt2_SliderTrack: Theme;
@@ -912,6 +963,7 @@ export declare const themes: {
     dark_green_alt2_SwitchThumb: Theme;
     dark_green_alt2_TooltipArrow: Theme;
     dark_green_alt2_TooltipContent: Theme;
+    dark_green_active_Card: Theme;
     dark_green_active_Button: Theme;
     dark_green_active_DrawerFrame: Theme;
     dark_green_active_SliderTrack: Theme;
@@ -926,6 +978,7 @@ export declare const themes: {
     dark_orange_alt1: Theme;
     dark_orange_alt2: Theme;
     dark_orange_active: Theme;
+    dark_orange_Card: Theme;
     dark_orange_Button: Theme;
     dark_orange_DrawerFrame: Theme;
     dark_orange_SliderTrack: Theme;
@@ -937,6 +990,7 @@ export declare const themes: {
     dark_orange_SwitchThumb: Theme;
     dark_orange_TooltipArrow: Theme;
     dark_orange_TooltipContent: Theme;
+    dark_orange_alt1_Card: Theme;
     dark_orange_alt1_Button: Theme;
     dark_orange_alt1_DrawerFrame: Theme;
     dark_orange_alt1_SliderTrack: Theme;
@@ -948,6 +1002,7 @@ export declare const themes: {
     dark_orange_alt1_SwitchThumb: Theme;
     dark_orange_alt1_TooltipArrow: Theme;
     dark_orange_alt1_TooltipContent: Theme;
+    dark_orange_alt2_Card: Theme;
     dark_orange_alt2_Button: Theme;
     dark_orange_alt2_DrawerFrame: Theme;
     dark_orange_alt2_SliderTrack: Theme;
@@ -959,6 +1014,7 @@ export declare const themes: {
     dark_orange_alt2_SwitchThumb: Theme;
     dark_orange_alt2_TooltipArrow: Theme;
     dark_orange_alt2_TooltipContent: Theme;
+    dark_orange_active_Card: Theme;
     dark_orange_active_Button: Theme;
     dark_orange_active_DrawerFrame: Theme;
     dark_orange_active_SliderTrack: Theme;
@@ -973,6 +1029,7 @@ export declare const themes: {
     dark_pink_alt1: Theme;
     dark_pink_alt2: Theme;
     dark_pink_active: Theme;
+    dark_pink_Card: Theme;
     dark_pink_Button: Theme;
     dark_pink_DrawerFrame: Theme;
     dark_pink_SliderTrack: Theme;
@@ -984,6 +1041,7 @@ export declare const themes: {
     dark_pink_SwitchThumb: Theme;
     dark_pink_TooltipArrow: Theme;
     dark_pink_TooltipContent: Theme;
+    dark_pink_alt1_Card: Theme;
     dark_pink_alt1_Button: Theme;
     dark_pink_alt1_DrawerFrame: Theme;
     dark_pink_alt1_SliderTrack: Theme;
@@ -995,6 +1053,7 @@ export declare const themes: {
     dark_pink_alt1_SwitchThumb: Theme;
     dark_pink_alt1_TooltipArrow: Theme;
     dark_pink_alt1_TooltipContent: Theme;
+    dark_pink_alt2_Card: Theme;
     dark_pink_alt2_Button: Theme;
     dark_pink_alt2_DrawerFrame: Theme;
     dark_pink_alt2_SliderTrack: Theme;
@@ -1006,6 +1065,7 @@ export declare const themes: {
     dark_pink_alt2_SwitchThumb: Theme;
     dark_pink_alt2_TooltipArrow: Theme;
     dark_pink_alt2_TooltipContent: Theme;
+    dark_pink_active_Card: Theme;
     dark_pink_active_Button: Theme;
     dark_pink_active_DrawerFrame: Theme;
     dark_pink_active_SliderTrack: Theme;
@@ -1020,6 +1080,7 @@ export declare const themes: {
     dark_purple_alt1: Theme;
     dark_purple_alt2: Theme;
     dark_purple_active: Theme;
+    dark_purple_Card: Theme;
     dark_purple_Button: Theme;
     dark_purple_DrawerFrame: Theme;
     dark_purple_SliderTrack: Theme;
@@ -1031,6 +1092,7 @@ export declare const themes: {
     dark_purple_SwitchThumb: Theme;
     dark_purple_TooltipArrow: Theme;
     dark_purple_TooltipContent: Theme;
+    dark_purple_alt1_Card: Theme;
     dark_purple_alt1_Button: Theme;
     dark_purple_alt1_DrawerFrame: Theme;
     dark_purple_alt1_SliderTrack: Theme;
@@ -1042,6 +1104,7 @@ export declare const themes: {
     dark_purple_alt1_SwitchThumb: Theme;
     dark_purple_alt1_TooltipArrow: Theme;
     dark_purple_alt1_TooltipContent: Theme;
+    dark_purple_alt2_Card: Theme;
     dark_purple_alt2_Button: Theme;
     dark_purple_alt2_DrawerFrame: Theme;
     dark_purple_alt2_SliderTrack: Theme;
@@ -1053,6 +1116,7 @@ export declare const themes: {
     dark_purple_alt2_SwitchThumb: Theme;
     dark_purple_alt2_TooltipArrow: Theme;
     dark_purple_alt2_TooltipContent: Theme;
+    dark_purple_active_Card: Theme;
     dark_purple_active_Button: Theme;
     dark_purple_active_DrawerFrame: Theme;
     dark_purple_active_SliderTrack: Theme;
@@ -1067,6 +1131,7 @@ export declare const themes: {
     dark_red_alt1: Theme;
     dark_red_alt2: Theme;
     dark_red_active: Theme;
+    dark_red_Card: Theme;
     dark_red_Button: Theme;
     dark_red_DrawerFrame: Theme;
     dark_red_SliderTrack: Theme;
@@ -1078,6 +1143,7 @@ export declare const themes: {
     dark_red_SwitchThumb: Theme;
     dark_red_TooltipArrow: Theme;
     dark_red_TooltipContent: Theme;
+    dark_red_alt1_Card: Theme;
     dark_red_alt1_Button: Theme;
     dark_red_alt1_DrawerFrame: Theme;
     dark_red_alt1_SliderTrack: Theme;
@@ -1089,6 +1155,7 @@ export declare const themes: {
     dark_red_alt1_SwitchThumb: Theme;
     dark_red_alt1_TooltipArrow: Theme;
     dark_red_alt1_TooltipContent: Theme;
+    dark_red_alt2_Card: Theme;
     dark_red_alt2_Button: Theme;
     dark_red_alt2_DrawerFrame: Theme;
     dark_red_alt2_SliderTrack: Theme;
@@ -1100,6 +1167,7 @@ export declare const themes: {
     dark_red_alt2_SwitchThumb: Theme;
     dark_red_alt2_TooltipArrow: Theme;
     dark_red_alt2_TooltipContent: Theme;
+    dark_red_active_Card: Theme;
     dark_red_active_Button: Theme;
     dark_red_active_DrawerFrame: Theme;
     dark_red_active_SliderTrack: Theme;
@@ -1114,6 +1182,7 @@ export declare const themes: {
     dark_yellow_alt1: Theme;
     dark_yellow_alt2: Theme;
     dark_yellow_active: Theme;
+    dark_yellow_Card: Theme;
     dark_yellow_Button: Theme;
     dark_yellow_DrawerFrame: Theme;
     dark_yellow_SliderTrack: Theme;
@@ -1125,6 +1194,7 @@ export declare const themes: {
     dark_yellow_SwitchThumb: Theme;
     dark_yellow_TooltipArrow: Theme;
     dark_yellow_TooltipContent: Theme;
+    dark_yellow_alt1_Card: Theme;
     dark_yellow_alt1_Button: Theme;
     dark_yellow_alt1_DrawerFrame: Theme;
     dark_yellow_alt1_SliderTrack: Theme;
@@ -1136,6 +1206,7 @@ export declare const themes: {
     dark_yellow_alt1_SwitchThumb: Theme;
     dark_yellow_alt1_TooltipArrow: Theme;
     dark_yellow_alt1_TooltipContent: Theme;
+    dark_yellow_alt2_Card: Theme;
     dark_yellow_alt2_Button: Theme;
     dark_yellow_alt2_DrawerFrame: Theme;
     dark_yellow_alt2_SliderTrack: Theme;
@@ -1147,6 +1218,7 @@ export declare const themes: {
     dark_yellow_alt2_SwitchThumb: Theme;
     dark_yellow_alt2_TooltipArrow: Theme;
     dark_yellow_alt2_TooltipContent: Theme;
+    dark_yellow_active_Card: Theme;
     dark_yellow_active_Button: Theme;
     dark_yellow_active_DrawerFrame: Theme;
     dark_yellow_active_SliderTrack: Theme;

package/types/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"AAwHA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGlB,CAAA;AAUD,KAAK,KAAK,GAAG;KAAG,GAAG,IAAI,MAAM,OAAO,aAAa,GAAG,MAAM;CAAE,CAAA;AA8G5D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.tsx"],"names":[],"mappings":"AAwHA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAA;AAUD,KAAK,KAAK,GAAG;KAAG,GAAG,IAAI,MAAM,OAAO,aAAa,GAAG,MAAM;CAAE,CAAA;AAgH5D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}