@tamagui/themes 1.31.3 → 1.32.0

package/dist/esm/themes.js

@@ -1,311 +1,4 @@
-import {
-  addChildren,
-  applyMask,
-  createStrengthenMask,
-  createTheme,
-  createWeakenMask,
-  skipMask
-} from "@tamagui/create-theme";
-import { colorTokens, darkColors, lightColors } from "./tokens";
-const lightTransparent = "rgba(255,255,255,0)";
-const darkTransparent = "rgba(10,10,10,0)";
-const palettes = {
-  dark: [
-    darkTransparent,
-    "#050505",
-    "#151515",
-    "#191919",
-    "#232323",
-    "#282828",
-    "#323232",
-    "#424242",
-    "#494949",
-    "#545454",
-    "#626262",
-    "#a5a5a5",
-    "#fff",
-    lightTransparent
-  ],
-  light: [
-    lightTransparent,
-    "#fff",
-    "#f9f9f9",
-    "hsl(0, 0%, 97.3%)",
-    "hsl(0, 0%, 95.1%)",
-    "hsl(0, 0%, 94.0%)",
-    "hsl(0, 0%, 92.0%)",
-    "hsl(0, 0%, 89.5%)",
-    "hsl(0, 0%, 81.0%)",
-    "hsl(0, 0%, 56.1%)",
-    "hsl(0, 0%, 50.3%)",
-    "hsl(0, 0%, 42.5%)",
-    "hsl(0, 0%, 9.0%)",
-    darkTransparent
-  ]
-};
-const templateColors = {
-  color1: 1,
-  color2: 2,
-  color3: 3,
-  color4: 4,
-  color5: 5,
-  color6: 6,
-  color7: 7,
-  color8: 8,
-  color9: 9,
-  color10: 10,
-  color11: 11,
-  color12: 12
-};
-const templateShadows = {
-  shadowColor: 1,
-  shadowColorHover: 1,
-  shadowColorPress: 2,
-  shadowColorFocus: 2
-};
-const toSkip = {
-  ...templateShadows
-};
-const override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0]));
-const overrideShadows = Object.fromEntries(
-  Object.entries(templateShadows).map(([k]) => [k, 0])
-);
-const overrideWithColors = {
-  ...override,
-  color: 0,
-  colorHover: 0,
-  colorFocus: 0,
-  colorPress: 0
-};
-const template = {
-  ...templateColors,
-  ...toSkip,
-  // the background, color, etc keys here work like generics - they make it so you
-  // can publish components for others to use without mandating a specific color scale
-  // the @tamagui/button Button component looks for `$background`, so you set the
-  // dark_red_Button theme to have a stronger background than the dark_red theme.
-  background: 2,
-  backgroundHover: 3,
-  backgroundPress: 4,
-  backgroundFocus: 5,
-  backgroundStrong: 1,
-  backgroundTransparent: 0,
-  color: -1,
-  colorHover: -2,
-  colorPress: -1,
-  colorFocus: -2,
-  colorTransparent: -0,
-  borderColor: 4,
-  borderColorHover: 5,
-  borderColorPress: 3,
-  borderColorFocus: 4,
-  placeholderColor: -4
-};
-const lightShadowColor = "rgba(0,0,0,0.02)";
-const lightShadowColorStrong = "rgba(0,0,0,0.066)";
-const darkShadowColor = "rgba(0,0,0,0.2)";
-const darkShadowColorStrong = "rgba(0,0,0,0.3)";
-const lightShadows = {
-  shadowColor: lightShadowColorStrong,
-  shadowColorHover: lightShadowColorStrong,
-  shadowColorPress: lightShadowColor,
-  shadowColorFocus: lightShadowColor
-};
-const darkShadows = {
-  shadowColor: darkShadowColorStrong,
-  shadowColorHover: darkShadowColorStrong,
-  shadowColorPress: darkShadowColor,
-  shadowColorFocus: darkShadowColor
-};
-const lightTemplate = {
-  ...template,
-  background: 2,
-  backgroundHover: 3,
-  backgroundPress: 4,
-  // our light color palette is... a bit unique
-  borderColor: 6,
-  borderColorHover: 7,
-  borderColorFocus: 5,
-  borderColorPress: 6,
-  ...lightShadows
-};
-const darkTemplate = { ...template, ...darkShadows };
-const light = createTheme(palettes.light, lightTemplate);
-const dark = createTheme(palettes.dark, darkTemplate);
-const baseThemes = {
-  light,
-  dark
-};
-const masks = {
-  skip: skipMask,
-  weaker: createWeakenMask(),
-  stronger: createStrengthenMask()
-};
-const maskOptions = {
-  override,
-  skip: toSkip,
-  // avoids the transparent ends
-  max: palettes.light.length - 2,
-  min: 1
-};
-const transparent = (hsl, opacity = 0) => hsl.replace(`%)`, `%, ${opacity})`).replace(`hsl(`, `hsla(`);
-const [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map(
-  (colorSet, i) => {
-    const isLight = i === 0;
-    const theme = baseThemes[isLight ? "light" : "dark"];
-    return Object.fromEntries(
-      Object.keys(colorSet).map((color) => {
-        const colorPalette = Object.values(colorSet[color]);
-        const [head, tail] = [
-          colorPalette.slice(0, 6),
-          colorPalette.slice(colorPalette.length - 5)
-        ];
-        const palette = [
-          transparent(colorPalette[0]),
-          ...head,
-          ...tail,
-          theme.color,
-          transparent(colorPalette[colorPalette.length - 1])
-        ];
-        const colorTheme = createTheme(
-          palette,
-          isLight ? {
-            ...lightTemplate,
-            // light color themes are a bit less sensitive
-            borderColor: 4,
-            borderColorHover: 5,
-            borderColorFocus: 4,
-            borderColorPress: 4
-          } : darkTemplate
-        );
-        return [color, colorTheme];
-      })
-    );
-  }
-);
-const allThemes = addChildren(baseThemes, (name, theme) => {
-  const isLight = name === "light";
-  const inverseName = isLight ? "dark" : "light";
-  const inverseTheme = baseThemes[inverseName];
-  const colorThemes = isLight ? lightColorThemes : darkColorThemes;
-  const inverseColorThemes = isLight ? darkColorThemes : lightColorThemes;
-  const allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
-    const inverse = inverseColorThemes[colorName];
-    return {
-      ...getAltThemes({
-        theme: colorTheme,
-        inverse,
-        isLight
-      }),
-      ...getComponentThemes(colorTheme, inverse, isLight)
-    };
-  });
-  const baseSubThemes = {
-    ...getAltThemes({ theme, inverse: inverseTheme, isLight }),
-    ...getComponentThemes(theme, inverseTheme, isLight)
-  };
-  return {
-    ...baseSubThemes,
-    ...allColorThemes
-  };
-});
-function getAltThemes({
-  theme,
-  inverse,
-  isLight,
-  activeTheme
-}) {
-  const maskOptionsAlt = {
-    ...maskOptions,
-    override: overrideShadows
-  };
-  const alt1 = applyMask(theme, masks.weaker, maskOptionsAlt);
-  const alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt);
-  const active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : (() => {
-    return applyMask(theme, masks.weaker, {
-      ...maskOptions,
-      strength: 3,
-      skip: {
-        ...maskOptions.skip,
-        color: 1
-      }
-    });
-  })());
-  return addChildren({ alt1, alt2, active }, (_, subTheme) => {
-    return getComponentThemes(subTheme, subTheme === inverse ? theme : inverse, isLight);
-  });
-}
-function getComponentThemes(theme, inverse, isLight) {
-  const componentMaskOptions = {
-    ...maskOptions,
-    override: overrideWithColors,
-    skip: {
-      ...maskOptions.skip,
-      // skip colors too just for component sub themes
-      ...templateColors
-    }
-  };
-  const weaker1 = applyMask(theme, masks.weaker, componentMaskOptions);
-  const base = applyMask(weaker1, masks.stronger, componentMaskOptions);
-  const weaker2 = applyMask(weaker1, masks.weaker, {
-    ...componentMaskOptions,
-    override: overrideWithColors
-  });
-  const stronger1 = applyMask(theme, masks.stronger, componentMaskOptions);
-  const inverse1 = applyMask(inverse, masks.weaker, componentMaskOptions);
-  const inverse2 = applyMask(inverse1, masks.weaker, componentMaskOptions);
-  const strongerBorderLighterBackground = isLight ? {
-    ...stronger1,
-    borderColor: weaker1.borderColor,
-    borderColorHover: weaker1.borderColorHover,
-    borderColorPress: weaker1.borderColorPress,
-    borderColorFocus: weaker1.borderColorFocus
-  } : {
-    ...applyMask(theme, masks.skip, componentMaskOptions),
-    borderColor: weaker1.borderColor,
-    borderColorHover: weaker1.borderColorHover,
-    borderColorPress: weaker1.borderColorPress,
-    borderColorFocus: weaker1.borderColorFocus
-  };
-  const overlayTheme = {
-    background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.9)"
-  };
-  const weaker2WithoutBorder = {
-    ...weaker2,
-    borderColor: "transparent",
-    borderColorHover: "transparent"
-  };
-  return {
-    ListItem: isLight ? stronger1 : base,
-    Card: weaker1,
-    Button: weaker2WithoutBorder,
-    Checkbox: weaker2,
-    DrawerFrame: weaker1,
-    SliderTrack: stronger1,
-    SliderTrackActive: weaker2,
-    SliderThumb: inverse1,
-    Progress: weaker1,
-    ProgressIndicator: inverse,
-    Switch: weaker2,
-    SwitchThumb: inverse2,
-    TooltipArrow: weaker1,
-    TooltipContent: weaker2,
-    Input: strongerBorderLighterBackground,
-    TextArea: strongerBorderLighterBackground,
-    Tooltip: inverse1,
-    // make overlays always dark
-    SheetOverlay: overlayTheme,
-    DialogOverlay: overlayTheme,
-    ModalOverlay: overlayTheme
-  };
-}
-const themes = {
-  ...allThemes,
-  // bring back the full type, the rest use a subset to avoid clogging up ts,
-  // tamagui will be smart and use the top level themes as the type for useTheme() etc
-  light: createTheme(palettes.light, lightTemplate, { nonInheritedValues: lightColors }),
-  dark: createTheme(palettes.dark, darkTemplate, { nonInheritedValues: darkColors })
-};
+import * as themes from "./generated-new";
 export {
   themes
 };

package/dist/esm/themes.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themes.tsx"],
-  "mappings": "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",
+  "mappings": "AAEA,YAAY,YAAY;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/themes",
-  "version": "1.31.3",
+  "version": "1.32.0",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -11,9 +11,9 @@
     "dist"
   ],
   "scripts": {
-    "generate": "node -r esbuild-register ./src/generate.ts",
-    "build": "tamagui-build && yarn generate",
-    "watch": "tamagui-build --watch",
+    "generate": "tamagui generate-themes ./src/themes-new.tsx ./src/generated-new.ts",
+    "build": "tamagui-build",
+    "watch": "yarn build --watch",
     "lint": "../../node_modules/.bin/rome check src",
     "lint:fix": "../../node_modules/.bin/rome check --apply src",
     "clean": "tamagui-build clean",
@@ -33,12 +33,14 @@
     }
   },
   "dependencies": {
-    "@tamagui/colors": "1.31.3",
-    "@tamagui/create-theme": "1.31.3",
-    "@tamagui/web": "1.31.3"
+    "@tamagui/colors": "1.32.0",
+    "@tamagui/create-theme": "1.32.0",
+    "@tamagui/web": "1.32.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.31.3"
+    "@tamagui/build": "1.32.0",
+    "@tamagui/cli": "1.32.0",
+    "vitest": "^0.26.3"
   },
   "publishConfig": {
     "access": "public"

package/src/componentThemeDefinitions.tsx

@@ -0,0 +1,137 @@
+import { maskOptions } from './templates'
+
+const overlayThemes = {
+  light: {
+    background: 'rgba(0,0,0,0.5)',
+  },
+  dark: {
+    background: 'rgba(0,0,0,0.9)',
+  },
+}
+
+export const overlayThemeDefinitions = [
+  {
+    parent: 'light',
+    theme: overlayThemes.light,
+  },
+  {
+    parent: 'dark',
+    theme: overlayThemes.dark,
+  },
+]
+
+export const componentThemeDefinitions = {
+  ListItem: [
+    {
+      parent: 'light',
+      mask: 'strengthen',
+      ...maskOptions.component,
+    },
+    {
+      parent: 'dark',
+      mask: 'identity',
+      ...maskOptions.component,
+    },
+  ],
+
+  Card: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  Button: {
+    mask: 'soften2',
+    ...maskOptions.button,
+  },
+
+  Checkbox: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  SliderTrackActive: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  Switch: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  SwitchThumb: {
+    mask: 'inverseStrengthen2',
+    ...maskOptions.component,
+    debug: true,
+  },
+
+  TooltipContent: {
+    mask: 'soften2',
+    ...maskOptions.component,
+  },
+
+  DrawerFrame: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  Progress: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  TooltipArrow: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  SliderTrack: {
+    mask: 'soften',
+    ...maskOptions.component,
+  },
+
+  SliderThumb: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  Tooltip: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  ProgressIndicator: {
+    mask: 'inverse',
+    ...maskOptions.component,
+  },
+
+  SheetOverlay: overlayThemeDefinitions,
+  DialogOverlay: overlayThemeDefinitions,
+  ModalOverlay: overlayThemeDefinitions,
+
+  Input: [
+    {
+      parent: 'light',
+      mask: 'strengthenButSoftenBorder',
+      ...maskOptions.component,
+    },
+    {
+      parent: 'dark',
+      mask: 'softenBorder',
+      ...maskOptions.component,
+    },
+  ],
+
+  TextArea: [
+    {
+      parent: 'light',
+      mask: 'strengthenButSoftenBorder',
+      ...maskOptions.component,
+    },
+    {
+      parent: 'dark',
+      mask: 'softenBorder',
+      ...maskOptions.component,
+    },
+  ],
+}