@tamagui/themes 1.5.8 → 1.5.10

package/dist/esm/themes.mjs

@@ -11,7 +11,7 @@ const darkTransparent = "rgba(10,10,10,0)";
 const palettes = {
   dark: [
     darkTransparent,
-    "#090909",
+    "#050505",
     "#151515",
     "#191919",
     "#232323",
@@ -29,15 +29,15 @@ const palettes = {
     lightTransparent,
     "#fff",
     "#f9f9f9",
-    "hsl(0, 0%, 99.0%)",
     "hsl(0, 0%, 97.3%)",
     "hsl(0, 0%, 95.1%)",
-    "hsl(0, 0%, 93.0%)",
-    "hsl(0, 0%, 90.9%)",
-    "hsl(0, 0%, 80.0%)",
+    "hsl(0, 0%, 94.0%)",
+    "hsl(0, 0%, 92.0%)",
+    "hsl(0, 0%, 89.5%)",
+    "hsl(0, 0%, 81.0%)",
     "hsl(0, 0%, 56.1%)",
-    "hsl(0, 0%, 52.3%)",
-    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 50.3%)",
+    "hsl(0, 0%, 42.5%)",
     "hsl(0, 0%, 9.0%)",
     darkTransparent
   ]
@@ -104,41 +104,31 @@ const darkShadows = {
 };
 const lightTemplate = {
   ...template,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  // our light color palette is... a bit unique
+  borderColor: 6,
+  borderColorHover: 7,
+  borderColorFocus: 5,
+  borderColorPress: 6,
   ...lightShadows
 };
 const darkTemplate = { ...template, ...darkShadows };
-const light = createTheme(palettes.light, lightTemplate, {
-  nonInheritedValues: lightColors
-});
-const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors });
+const light = createTheme(palettes.light, lightTemplate);
+const dark = createTheme(palettes.dark, darkTemplate);
 const baseThemes = {
   light,
   dark
 };
-const max = palettes.dark.length - 1;
 const masks = {
-  weaker: createWeakenMask({
-    by: 1,
-    min: 1,
-    max
-  }),
-  stronger: createStrengthenMask({
-    by: 1,
-    min: 1,
-    max
-  }),
-  stronger2: createStrengthenMask({
-    by: 2,
-    min: 1,
-    max
-  })
+  weaker: createWeakenMask(),
+  stronger: createStrengthenMask()
+};
+const maskOptions = {
+  skip,
+  // avoids the transparent ends
+  max: palettes.light.length - 2,
+  min: 1
 };
-const allThemes = addChildren(baseThemes, (name, themeIn) => {
-  const theme = themeIn;
+const allThemes = addChildren(baseThemes, (name, theme) => {
   const isLight = name === "light";
   const inverseName = isLight ? "dark" : "light";
   const inverseTheme = baseThemes[inverseName];
@@ -165,10 +155,11 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
           palette,
           isLight ? {
             ...lightTemplate,
+            // light color themes are a bit less sensitive
             borderColor: 4,
             borderColorHover: 5,
-            borderColorFocus: 6,
-            borderColorPress: 5
+            borderColorFocus: 4,
+            borderColorPress: 4
           } : darkTemplate
         );
         return [color, colorTheme];
@@ -178,50 +169,71 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
   const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
     const inverse = inverseColorThemes[colorName];
     return {
-      ...getAltThemes(colorTheme, inverse),
+      ...getAltThemes(colorTheme, inverse, inverse),
       ...getComponentThemes(colorTheme, inverse)
     };
   });
+  const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
+    ...maskOptions,
+    strength: 4
+  });
+  const baseSubThemes = {
+    ...getAltThemes(theme, inverseTheme, baseActiveTheme),
+    ...getComponentThemes(theme, inverseTheme)
+  };
   return {
-    ...getAltThemes(theme, inverseTheme),
-    ...getComponentThemes(theme, inverseTheme),
+    ...baseSubThemes,
     ...allColorThemes
   };
+  function getAltThemes(theme2, inverse, activeTheme) {
+    const alt1 = applyMask(theme2, masks.weaker, maskOptions);
+    const alt2 = applyMask(alt1, masks.weaker, maskOptions);
+    const active = activeTheme ?? applyMask(theme2, masks.weaker, {
+      ...maskOptions,
+      strength: 4
+    });
+    return addChildren({ alt1, alt2, active }, (name2, subTheme) => {
+      return getComponentThemes(subTheme, subTheme === inverse ? theme2 : inverse);
+    });
+  }
   function getComponentThemes(theme2, inverse) {
-    const stronger1 = applyMask(theme2, masks.stronger, { skip });
-    const stronger2 = applyMask(stronger1, masks.stronger, { skip });
-    const inverse1 = applyMask(inverse, masks.weaker, { skip });
-    const inverse2 = applyMask(inverse1, masks.weaker, { skip });
+    const weaker1 = applyMask(theme2, masks.weaker, maskOptions);
+    const weaker2 = applyMask(weaker1, masks.weaker, maskOptions);
+    const stronger1 = applyMask(theme2, masks.stronger, maskOptions);
+    const inverse1 = applyMask(inverse, masks.weaker, maskOptions);
+    const inverse2 = applyMask(inverse1, masks.weaker, maskOptions);
+    const strongerBorderLighterBackground = {
+      ...stronger1,
+      borderColor: weaker1.borderColor,
+      borderColorHover: weaker1.borderColorHover,
+      borderColorPress: weaker1.borderColorPress,
+      borderColorFocus: weaker1.borderColorFocus
+    };
     return {
-      Card: stronger1,
-      Button: stronger2,
-      DrawerFrame: stronger1,
-      SliderTrack: theme2,
-      SliderTrackActive: stronger2,
+      Card: weaker1,
+      Button: weaker2,
+      DrawerFrame: weaker1,
+      SliderTrack: stronger1,
+      SliderTrackActive: weaker2,
       SliderThumb: inverse1,
-      Progress: stronger1,
+      Progress: weaker1,
       ProgressIndicator: inverse,
-      Switch: stronger2,
+      Switch: weaker1,
       SwitchThumb: inverse2,
-      TooltipArrow: stronger1,
-      TooltipContent: stronger2
+      TooltipArrow: weaker1,
+      TooltipContent: weaker2,
+      Input: strongerBorderLighterBackground,
+      TextArea: strongerBorderLighterBackground,
+      Tooltip: inverse1
     };
   }
-  function getAltThemes(theme2, inverse) {
-    const alt1 = applyMask(theme2, masks.weaker, { skip });
-    const alt2 = applyMask(alt1, masks.weaker, { skip });
-    const active = applyMask(theme2, masks.stronger2, { skip });
-    return addChildren({ alt1, alt2, active }, (name2, theme3) => {
-      return getComponentThemes(theme3, inverse);
-    });
-  }
 });
 const themes = {
   ...allThemes,
   // bring back the full type, the rest use a subset to avoid clogging up ts,
   // tamagui will be smart and use the top level themes as the type for useTheme() etc
-  light,
-  dark
+  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
+  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
 };
 export {
   themes

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    '#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 SubTheme = { [key in keyof typeof lightTemplate]: string }\n\nconst baseThemes: {\n  light: SubTheme\n  dark: SubTheme\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 SubTheme\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(\n          palette,\n          isLight\n            ? {\n                ...lightTemplate,\n                borderColor: 4,\n                borderColorHover: 5,\n                borderColorFocus: 6,\n                borderColorPress: 5,\n              }\n            : darkTemplate\n        )\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, SubTheme>\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: SubTheme, inverse: SubTheme) {\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: SubTheme, inverse: SubTheme) {\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 to avoid clogging up ts,\n  // tamagui will be smart and use the top level themes as the type for useTheme() etc\n  light,\n  dark,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  MaskOptions,\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    '#050505',\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%, 97.3%)',\n    'hsl(0, 0%, 95.1%)',\n    'hsl(0, 0%, 94.0%)',\n    'hsl(0, 0%, 92.0%)',\n    'hsl(0, 0%, 89.5%)',\n    'hsl(0, 0%, 81.0%)',\n    'hsl(0, 0%, 56.1%)',\n    'hsl(0, 0%, 50.3%)',\n    'hsl(0, 0%, 42.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  // our light color palette is... a bit unique\n  borderColor: 6,\n  borderColorHover: 7,\n  borderColorFocus: 5,\n  borderColorPress: 6,\n  ...lightShadows,\n}\n\nconst darkTemplate = { ...template, ...darkShadows }\n\nconst light = createTheme(palettes.light, lightTemplate)\nconst dark = createTheme(palettes.dark, darkTemplate)\n\ntype SubTheme = typeof light\n\nconst baseThemes: {\n  light: SubTheme\n  dark: SubTheme\n} = {\n  light,\n  dark,\n}\n\nconst masks = {\n  weaker: createWeakenMask(),\n  stronger: createStrengthenMask(),\n}\n\nconst maskOptions: MaskOptions = {\n  skip,\n\n  // avoids the transparent ends\n  max: palettes.light.length - 2,\n  min: 1,\n}\n\nconst allThemes = addChildren(baseThemes, (name, 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 string[]\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(\n          palette,\n          isLight\n            ? {\n                ...lightTemplate,\n                // light color themes are a bit less sensitive\n                borderColor: 4,\n                borderColorHover: 5,\n                borderColorFocus: 4,\n                borderColorPress: 4,\n              }\n            : darkTemplate\n        )\n        return [color, colorTheme]\n      })\n    ) as Record<ColorName, SubTheme>\n  })\n\n  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {\n    const inverse = inverseColorThemes[colorName]\n    return {\n      ...getAltThemes(colorTheme, inverse, inverse),\n      ...getComponentThemes(colorTheme, inverse),\n    }\n  })\n\n  const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {\n    ...maskOptions,\n    strength: 4,\n  })\n\n  const baseSubThemes = {\n    ...getAltThemes(theme, inverseTheme, baseActiveTheme),\n    ...getComponentThemes(theme, inverseTheme),\n  }\n\n  return {\n    ...baseSubThemes,\n    ...allColorThemes,\n  }\n\n  function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {\n    const alt1 = applyMask(theme, masks.weaker, maskOptions)\n    const alt2 = applyMask(alt1, masks.weaker, maskOptions)\n    const active =\n      activeTheme ??\n      applyMask(theme, masks.weaker, {\n        ...maskOptions,\n        strength: 4,\n      })\n    return addChildren({ alt1, alt2, active }, (name, subTheme) => {\n      return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)\n    })\n  }\n\n  function getComponentThemes(theme: SubTheme, inverse: SubTheme) {\n    const weaker1 = applyMask(theme, masks.weaker, maskOptions)\n    const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)\n    const stronger1 = applyMask(theme, masks.stronger, maskOptions)\n    const inverse1 = applyMask(inverse, masks.weaker, maskOptions)\n    const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)\n    const strongerBorderLighterBackground: SubTheme = {\n      ...stronger1,\n      borderColor: weaker1.borderColor,\n      borderColorHover: weaker1.borderColorHover,\n      borderColorPress: weaker1.borderColorPress,\n      borderColorFocus: weaker1.borderColorFocus,\n    }\n    return {\n      Card: weaker1,\n      Button: weaker2,\n      DrawerFrame: weaker1,\n      SliderTrack: stronger1,\n      SliderTrackActive: weaker2,\n      SliderThumb: inverse1,\n      Progress: weaker1,\n      ProgressIndicator: inverse,\n      Switch: weaker1,\n      SwitchThumb: inverse2,\n      TooltipArrow: weaker1,\n      TooltipContent: weaker2,\n      Input: strongerBorderLighterBackground,\n      TextArea: strongerBorderLighterBackground,\n      Tooltip: inverse1,\n    }\n  }\n})\n\nexport const themes = {\n  ...allThemes,\n  // bring back the full type, the rest use a subset to avoid clogging up ts,\n  // tamagui will be smart and use the top level themes as the type for useTheme() etc\n  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),\n  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),\n}\n"],
+  "mappings": "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",
   "names": ["theme", "name"]
 }

package/package.json

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

package/src/themes.tsx

@@ -1,4 +1,5 @@
 import {
+  MaskOptions,
   addChildren,
   applyMask,
   createStrengthenMask,
@@ -17,7 +18,7 @@ const darkTransparent = 'rgba(10,10,10,0)'
 const palettes = {
   dark: [
     darkTransparent,
-    '#090909',
+    '#050505',
     '#151515',
     '#191919',
     '#232323',
@@ -35,15 +36,15 @@ const palettes = {
     lightTransparent,
     '#fff',
     '#f9f9f9',
-    'hsl(0, 0%, 99.0%)',
     'hsl(0, 0%, 97.3%)',
     'hsl(0, 0%, 95.1%)',
-    'hsl(0, 0%, 93.0%)',
-    'hsl(0, 0%, 90.9%)',
-    'hsl(0, 0%, 80.0%)',
+    'hsl(0, 0%, 94.0%)',
+    'hsl(0, 0%, 92.0%)',
+    'hsl(0, 0%, 89.5%)',
+    'hsl(0, 0%, 81.0%)',
     'hsl(0, 0%, 56.1%)',
-    'hsl(0, 0%, 52.3%)',
-    'hsl(0, 0%, 43.5%)',
+    'hsl(0, 0%, 50.3%)',
+    'hsl(0, 0%, 42.5%)',
     'hsl(0, 0%, 9.0%)',
     darkTransparent,
   ],
@@ -120,22 +121,20 @@ const darkShadows = {
 
 const lightTemplate = {
   ...template,
-  borderColor: 3,
-  borderColorHover: 4,
-  borderColorPress: 2,
-  borderColorFocus: 3,
+  // our light color palette is... a bit unique
+  borderColor: 6,
+  borderColorHover: 7,
+  borderColorFocus: 5,
+  borderColorPress: 6,
   ...lightShadows,
 }
 
 const darkTemplate = { ...template, ...darkShadows }
 
-const light = createTheme(palettes.light, lightTemplate, {
-  nonInheritedValues: lightColors,
-})
-
-const dark = createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
+const light = createTheme(palettes.light, lightTemplate)
+const dark = createTheme(palettes.dark, darkTemplate)
 
-type SubTheme = { [key in keyof typeof lightTemplate]: string }
+type SubTheme = typeof light
 
 const baseThemes: {
   light: SubTheme
@@ -145,28 +144,20 @@ const baseThemes: {
   dark,
 }
 
-// avoid transparent ends
-const max = palettes.dark.length - 1
 const masks = {
-  weaker: createWeakenMask({
-    by: 1,
-    min: 1,
-    max,
-  }),
-  stronger: createStrengthenMask({
-    by: 1,
-    min: 1,
-    max,
-  }),
-  stronger2: createStrengthenMask({
-    by: 2,
-    min: 1,
-    max,
-  }),
+  weaker: createWeakenMask(),
+  stronger: createStrengthenMask(),
+}
+
+const maskOptions: MaskOptions = {
+  skip,
+
+  // avoids the transparent ends
+  max: palettes.light.length - 2,
+  min: 1,
 }
 
-const allThemes = addChildren(baseThemes, (name, themeIn) => {
-  const theme = themeIn as SubTheme
+const allThemes = addChildren(baseThemes, (name, theme) => {
   const isLight = name === 'light'
   const inverseName = isLight ? 'dark' : 'light'
   const inverseTheme = baseThemes[inverseName]
@@ -180,7 +171,7 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
   ].map((colorSet) => {
     return Object.fromEntries(
       Object.keys(colorSet).map((color) => {
-        const colorPalette = Object.values(colorSet[color as ColorName])
+        const colorPalette = Object.values(colorSet[color]) as string[]
         // were re-ordering these
         const [head, tail] = [
           colorPalette.slice(0, 6),
@@ -201,10 +192,11 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
           isLight
             ? {
                 ...lightTemplate,
+                // light color themes are a bit less sensitive
                 borderColor: 4,
                 borderColorHover: 5,
-                borderColorFocus: 6,
-                borderColorPress: 5,
+                borderColorFocus: 4,
+                borderColorPress: 4,
               }
             : darkTemplate
         )
@@ -216,52 +208,77 @@ const allThemes = addChildren(baseThemes, (name, themeIn) => {
   const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
     const inverse = inverseColorThemes[colorName]
     return {
-      ...getAltThemes(colorTheme as any, inverse as any),
-      ...getComponentThemes(colorTheme as any, inverse as any),
+      ...getAltThemes(colorTheme, inverse, inverse),
+      ...getComponentThemes(colorTheme, inverse),
     }
   })
 
-  return {
-    ...getAltThemes(theme, inverseTheme),
+  const baseActiveTheme = applyMask(colorThemes.blue, masks.weaker, {
+    ...maskOptions,
+    strength: 4,
+  })
+
+  const baseSubThemes = {
+    ...getAltThemes(theme, inverseTheme, baseActiveTheme),
     ...getComponentThemes(theme, inverseTheme),
+  }
+
+  return {
+    ...baseSubThemes,
     ...allColorThemes,
   }
 
+  function getAltThemes(theme: SubTheme, inverse: SubTheme, activeTheme?: SubTheme) {
+    const alt1 = applyMask(theme, masks.weaker, maskOptions)
+    const alt2 = applyMask(alt1, masks.weaker, maskOptions)
+    const active =
+      activeTheme ??
+      applyMask(theme, masks.weaker, {
+        ...maskOptions,
+        strength: 4,
+      })
+    return addChildren({ alt1, alt2, active }, (name, subTheme) => {
+      return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse)
+    })
+  }
+
   function getComponentThemes(theme: SubTheme, inverse: SubTheme) {
-    const stronger1 = applyMask(theme, masks.stronger, { skip })
-    const stronger2 = applyMask(stronger1, masks.stronger, { skip })
-    const inverse1 = applyMask(inverse, masks.weaker, { skip })
-    const inverse2 = applyMask(inverse1, masks.weaker, { skip })
+    const weaker1 = applyMask(theme, masks.weaker, maskOptions)
+    const weaker2 = applyMask(weaker1, masks.weaker, maskOptions)
+    const stronger1 = applyMask(theme, masks.stronger, maskOptions)
+    const inverse1 = applyMask(inverse, masks.weaker, maskOptions)
+    const inverse2 = applyMask(inverse1, masks.weaker, maskOptions)
+    const strongerBorderLighterBackground: SubTheme = {
+      ...stronger1,
+      borderColor: weaker1.borderColor,
+      borderColorHover: weaker1.borderColorHover,
+      borderColorPress: weaker1.borderColorPress,
+      borderColorFocus: weaker1.borderColorFocus,
+    }
     return {
-      Card: stronger1,
-      Button: stronger2,
-      DrawerFrame: stronger1,
-      SliderTrack: theme,
-      SliderTrackActive: stronger2,
+      Card: weaker1,
+      Button: weaker2,
+      DrawerFrame: weaker1,
+      SliderTrack: stronger1,
+      SliderTrackActive: weaker2,
       SliderThumb: inverse1,
-      Progress: stronger1,
+      Progress: weaker1,
       ProgressIndicator: inverse,
-      Switch: stronger2,
+      Switch: weaker1,
       SwitchThumb: inverse2,
-      TooltipArrow: stronger1,
-      TooltipContent: stronger2,
+      TooltipArrow: weaker1,
+      TooltipContent: weaker2,
+      Input: strongerBorderLighterBackground,
+      TextArea: strongerBorderLighterBackground,
+      Tooltip: inverse1,
     }
   }
-
-  function getAltThemes(theme: SubTheme, inverse: SubTheme) {
-    const alt1 = applyMask(theme, masks.weaker, { skip })
-    const alt2 = applyMask(alt1, masks.weaker, { skip })
-    const active = applyMask(theme, masks.stronger2, { skip })
-    return addChildren({ alt1, alt2, active }, (name, theme) => {
-      return getComponentThemes(theme as any, inverse)
-    })
-  }
 })
 
 export const themes = {
   ...allThemes,
   // bring back the full type, the rest use a subset to avoid clogging up ts,
   // tamagui will be smart and use the top level themes as the type for useTheme() etc
-  light,
-  dark,
+  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
+  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors }),
 }