@tamagui/theme-base 1.0.1-beta.19 → 1.0.1-beta.191

package/dist/cjs/colorUtils.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,7 +23,7 @@ __export(colorUtils_exports, {
 });
 module.exports = __toCommonJS(colorUtils_exports);
 var import_core = require("@tamagui/core");
-const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
+const hexToRGBA = (hex, alpha = 1) => {
   if (!isValidHex(hex)) {
     throw new Error("Invalid HEX");
   }
@@ -31,8 +31,8 @@ const hexToRGBA = /* @__PURE__ */ __name((hex, alpha = 1) => {
   const hexArr = getChunksFromString(hex.slice(1), chunkSize);
   const [r, g, b, a] = (hexArr == null ? void 0 : hexArr.map(convertHexUnitTo256)) ?? [];
   return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
-}, "hexToRGBA");
-const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
+};
+const setColorAlpha = (colorIn, alpha = 1) => {
   let color = `${(0, import_core.getVariableValue)(colorIn)}`;
   if (color.startsWith("hsl(")) {
     return color.replace("hsl", "hsla").replace(")", `, ${alpha})`);
@@ -44,11 +44,11 @@ const setColorAlpha = /* @__PURE__ */ __name((colorIn, alpha = 1) => {
     return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
   }
   return color;
-}, "setColorAlpha");
-const isValidHex = /* @__PURE__ */ __name((hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex), "isValidHex");
-const getChunksFromString = /* @__PURE__ */ __name((st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g")), "getChunksFromString");
-const convertHexUnitTo256 = /* @__PURE__ */ __name((hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16), "convertHexUnitTo256");
-const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
+};
+const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+const getChunksFromString = (st, chunkSize = 0) => st.match(new RegExp(`.{${chunkSize}}`, "g"));
+const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16);
+const getAlphaFloat = (a, alpha = 1) => {
   if (a !== void 0) {
     return a / 255;
   }
@@ -56,7 +56,7 @@ const getAlphaFloat = /* @__PURE__ */ __name((a, alpha = 1) => {
     return 1;
   }
   return alpha;
-}, "getAlphaFloat");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   hexToRGBA,

package/dist/cjs/colorUtils.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/colorUtils.tsx"],
   "sourcesContent": ["import { Variable, getVariableValue } from '@tamagui/core'\n\nexport const hexToRGBA = (hex: string, alpha = 1) => {\n  if (!isValidHex(hex)) {\n    throw new Error('Invalid HEX')\n  }\n  const chunkSize = Math.floor((hex.length - 1) / 3)\n  const hexArr = getChunksFromString(hex.slice(1), chunkSize)\n  const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []\n  return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`\n}\n\nexport const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {\n  let color = `${getVariableValue(colorIn)}`\n  if (color.startsWith('hsl(')) {\n    return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)\n  }\n  if (color.startsWith('#')) {\n    return hexToRGBA(color, alpha)\n  }\n  if (color.startsWith('rgb(')) {\n    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)\n  }\n  return color\n}\n\nconst isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)\n\nconst getChunksFromString = (st: string, chunkSize = 0) =>\n  st.match(new RegExp(`.{${chunkSize}}`, 'g'))\n\nconst convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)\n\nconst getAlphaFloat = (a: any, alpha = 1) => {\n  if (a !== undefined) {\n    return a / 255\n  }\n  if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {\n    return 1\n  }\n  return alpha\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2C;AAEpC,MAAM,YAAY,wBAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,MAAO,KAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,KAAK,kCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD,GARyB;AAUlB,MAAM,gBAAgB,wBAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,GAAG,kCAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT,GAZ6B;AAc7B,MAAM,aAAa,wBAAC,QAAgB,6BAA6B,KAAK,GAAG,GAAtD;AAEnB,MAAM,sBAAsB,wBAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC,GADjB;AAG5B,MAAM,sBAAsB,wBAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE,GAAjE;AAE5B,MAAM,gBAAgB,wBAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT,GARsB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2C;AAEpC,MAAM,YAAY,CAAC,KAAa,QAAQ,MAAM;AACnD,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,IAAI,MAAM,aAAa;AAAA,EAC/B;AACA,QAAM,YAAY,KAAK,OAAO,IAAI,SAAS,KAAK,CAAC;AACjD,QAAM,SAAS,oBAAoB,IAAI,MAAM,CAAC,GAAG,SAAS;AAC1D,QAAM,CAAC,GAAG,GAAG,GAAG,CAAC,KAAI,iCAAQ,IAAI,yBAAwB,CAAC;AAC1D,SAAO,QAAQ,MAAM,MAAM,MAAM,cAAc,GAAG,KAAK;AACzD;AAEO,MAAM,gBAAgB,CAAC,SAA4B,QAAQ,MAAM;AACtE,MAAI,QAAQ,OAAG,8BAAiB,OAAO;AACvC,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,MAAI,MAAM,WAAW,GAAG,GAAG;AACzB,WAAO,UAAU,OAAO,KAAK;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,WAAO,MAAM,QAAQ,OAAO,MAAM,EAAE,QAAQ,KAAK,KAAK,QAAQ;AAAA,EAChE;AACA,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,QAAgB,6BAA6B,KAAK,GAAG;AAEzE,MAAM,sBAAsB,CAAC,IAAY,YAAY,MACnD,GAAG,MAAM,IAAI,OAAO,KAAK,cAAc,GAAG,CAAC;AAE7C,MAAM,sBAAsB,CAAC,WAAmB,SAAS,OAAO,OAAO,IAAI,OAAO,MAAM,GAAG,EAAE;AAE7F,MAAM,gBAAgB,CAAC,GAAQ,QAAQ,MAAM;AAC3C,MAAI,MAAM,QAAW;AACnB,WAAO,IAAI;AAAA,EACb;AACA,MAAI,OAAO,SAAS,YAAY,QAAQ,KAAK,QAAQ,GAAG;AACtD,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx"],
   "sourcesContent": ["export * from './themes'\nexport * from './tokens'\nexport * from '@tamagui/colors'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,qBADd;AAEA,wBAAc,4BAFd;",
   "names": []
 }

package/dist/cjs/themes.js

@@ -1,27 +1,8 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,55 +15,84 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var themes_exports = {};
 __export(themes_exports, {
+  colorNames: () => colorNames,
   colorSchemes: () => colorSchemes,
-  darkGradient: () => darkGradient,
-  lightGradient: () => lightGradient,
   themes: () => themes
 });
 module.exports = __toCommonJS(themes_exports);
-var Colors = __toESM(require("@tamagui/colors"));
-var import_colors = require("@tamagui/colors");
 var import_core = require("@tamagui/core");
 var import_colorUtils = require("./colorUtils");
 var import_tokens = require("./tokens");
-const alternates = [1, 2, 3, 4];
+const alternates = [1, 2, 3];
+const alts = [1, 2];
 function createThemesFrom(name, getTheme, props) {
   const { shift = 0 } = props;
   const theme = getTheme(0 + shift, props);
   let themeEntries = [[name, theme]];
   const altThemes = alternates.map((alt) => [
+    `${name}_alt${alt}`,
+    getTheme(alt * 1 + shift, props)
+  ]);
+  const altThemes2 = alternates.map((alt) => [
     `${name}_alt${alt}`,
     getTheme(alt + shift, props)
   ]);
   const altButtonThemes = alternates.map((_, i) => {
-    const [bName, bTheme] = [altThemes[i][0], (altThemes[i + 1] || altThemes[i])[1]];
+    const [bName, bTheme] = [altThemes2[i][0], (altThemes2[i + 1] || altThemes2[i])[1]];
     return [`${bName}_Button`, bTheme];
   });
   const darkerTheme = getTheme(Math.max(0, shift + (props.isLight ? 1 : -1)), props);
-  const activeTheme = makeActiveTheme(theme);
+  const activeTheme = props.activeTheme || {
+    ...theme,
+    borderColor: props.backgrounds[7],
+    background: props.backgrounds[6],
+    backgroundHover: props.backgrounds[6],
+    backgroundPress: props.backgrounds[6]
+  };
+  const inverted = altThemes.map(([_name, theme2]) => {
+    return {
+      ...theme2,
+      background: theme2.color,
+      backgroundHover: theme2.colorHover,
+      backgroundFocus: theme2.colorFocus,
+      backgroundPress: theme2.colorPress,
+      color: theme2.background,
+      colorHover: theme2.backgroundHover,
+      colorFocus: theme2.backgroundFocus,
+      colorPress: theme2.backgroundPress
+    };
+  });
   themeEntries = [
     ...themeEntries,
-    ...altThemes,
-    ...altButtonThemes,
-    [`${name}_Button`, altThemes[0][1]],
+    ...altThemes.slice(0, alts.length),
+    ...altButtonThemes.slice(0, alts.length),
+    [`${name}_Button`, altThemes2[1][1]],
+    [`${name}_DrawerFrame`, altThemes2[1][1]],
+    [`${name}_SliderTrack`, altThemes[0][1]],
+    [`${name}_SliderTrackActive`, altThemes[2][1]],
+    [`${name}_SliderThumb`, inverted[2]],
+    [`${name}_Progress`, altThemes[2][1]],
+    [`${name}_ProgressIndicator`, inverted[2]],
+    [`${name}_Switch`, altThemes[0][1]],
+    [`${name}_SwitchThumb`, inverted[2]],
+    [`${name}_TooltipArrow`, altThemes[1][1]],
+    [`${name}_TooltipContent`, altThemes[1][1]],
     [`${name}_darker`, darkerTheme],
     [`${name}_active`, activeTheme]
   ];
   const themes2 = Object.fromEntries(themeEntries);
   return themes2;
 }
-__name(createThemesFrom, "createThemesFrom");
-const createTheme = /* @__PURE__ */ __name((str = 1, {
+const themeCreator = (str = 1, {
   backgrounds,
   isLight = true,
   isBase = false,
   colors = [...backgrounds].reverse(),
   borderColors = isLight ? colors : backgrounds,
-  backgroundStronger,
+  backgroundStrong,
   offsets: offsetsProp
 }) => {
   const offsets = {
@@ -90,36 +100,49 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     background: (offsetsProp == null ? void 0 : offsetsProp.background) ?? [0, 0, 0, 0],
     color: (offsetsProp == null ? void 0 : offsetsProp.color) ?? [0, 0, 0, 0]
   };
-  const darkColors = isLight ? colors : backgrounds;
+  const darkColors2 = isLight ? colors : backgrounds;
   const lighterDir = isLight ? -1 : 1;
   const darkerDir = -lighterDir;
   const strongerDir = isLight ? darkerDir : lighterDir;
-  const get = /* @__PURE__ */ __name((arr, index, name = "background") => {
+  const softerDir = -strongerDir;
+  const get = (arr, index, name = "background") => {
     return arr[Math.max(0, Math.min(index + (offsets[name][str] || 0), arr.length - 1))];
-  }, "get");
+  };
   const colorTranslucent = (0, import_colorUtils.setColorAlpha)((0, import_core.getVariableValue)(get(colors, 0 + str, "color")), 0.5);
-  let theme = {
+  const theme = {
     background: get(backgrounds, str),
-    backgroundStronger: backgroundStronger || get(backgrounds, str + strongerDir),
-    backgroundSoft: get(backgrounds, str + 3),
-    backgroundHover: get(backgrounds, str + strongerDir),
-    backgroundPress: get(backgrounds, str + darkerDir * 1),
+    backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
+    backgroundSoft: get(backgrounds, str + softerDir * 2),
+    backgroundHover: get(backgrounds, str + lighterDir),
+    backgroundPress: get(backgrounds, str + darkerDir),
     backgroundFocus: get(backgrounds, str + darkerDir * 2),
-    backgroundTransparent: import_tokens.color.grayA1,
+    backgroundTransparent: "hsla(0, 0%, 0%, 0.012)",
     color: get(colors, 0 + str, "color"),
     colorHover: get(colors, 1 + str, "color"),
     colorPress: get(colors, 2 + str, "color"),
     colorFocus: get(colors, 3 + str, "color"),
     colorTranslucent,
-    colorMid: colors[Math.floor(colors.length / 2)],
-    shadowColor: isLight ? import_tokens.color.grayA2 : import_tokens.color.grayA8,
-    shadowColorHover: darkColors[!isLight ? 1 : 8],
-    shadowColorPress: darkColors[!isLight ? 1 : 8],
-    shadowColorFocus: darkColors[!isLight ? 1 : 8],
+    colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
+    shadowColor: isLight ? "hsla(0, 0%, 0%, 0.03)" : "hsla(0, 0%, 0%, 0.2)",
+    shadowColorHover: darkColors2[!isLight ? 1 : 8],
+    shadowColorPress: darkColors2[!isLight ? 1 : 8],
+    shadowColorFocus: darkColors2[!isLight ? 1 : 8],
     borderColor: null,
     borderColorHover: null,
     borderColorPress: null,
-    borderColorFocus: null
+    borderColorFocus: null,
+    color1: backgrounds[0],
+    color2: backgrounds[1],
+    color3: backgrounds[2],
+    color4: backgrounds[3],
+    color5: backgrounds[4],
+    color6: backgrounds[5],
+    color7: backgrounds[6],
+    color8: backgrounds[7],
+    color9: backgrounds[8],
+    color10: backgrounds[9],
+    color11: backgrounds[10],
+    color12: backgrounds[11]
   };
   if (isBase) {
     Object.assign(theme, {
@@ -137,62 +160,52 @@ const createTheme = /* @__PURE__ */ __name((str = 1, {
     });
   }
   return theme;
-}, "createTheme");
-const colorSchemes = [
-  { name: "blue", colors: Colors.blue, darkColors: Colors.blueDark },
-  { name: "gray", colors: Colors.gray, darkColors: Colors.grayDark },
-  { name: "green", colors: Colors.green, darkColors: Colors.greenDark },
-  { name: "indigo", colors: Colors.indigo, darkColors: Colors.indigoDark },
-  { name: "orange", colors: Colors.orange, darkColors: Colors.orangeDark },
-  { name: "pink", colors: Colors.pink, darkColors: Colors.pinkDark },
-  { name: "purple", colors: Colors.purple, darkColors: Colors.purpleDark },
-  { name: "red", colors: Colors.red, darkColors: Colors.redDark },
-  { name: "violet", colors: Colors.violet, darkColors: Colors.violetDark },
-  { name: "yellow", colors: Colors.yellow, darkColors: Colors.yellowDark },
-  { name: "teal", colors: Colors.teal, darkColors: Colors.tealDark },
-  { name: "lime", colors: Colors.lime, darkColors: Colors.limeDark },
-  { name: "brown", colors: Colors.brown, darkColors: Colors.brownDark }
-];
-const lightGradient = [
-  "#fff",
-  "#f4f4f4",
-  import_tokens.color.gray1,
-  import_tokens.color.gray2,
-  import_tokens.color.gray3,
-  import_tokens.color.gray4,
-  import_tokens.color.gray5,
-  import_tokens.color.gray6,
-  import_tokens.color.gray7,
-  import_tokens.color.gray8,
-  import_tokens.color.gray9,
-  import_tokens.color.gray10,
-  import_tokens.color.gray11,
-  import_tokens.color.gray12
-];
-const darkGradient = [
-  "#111111",
-  "#151515",
-  "#191919",
-  "#232323",
-  "#282828",
-  "#323232",
-  "#383838",
-  "#424242",
-  "#494949",
-  "#545454",
-  "#626262",
-  "#777777"
-];
-const lightThemes = createThemesFrom("light", createTheme, {
-  backgrounds: lightGradient,
-  backgroundStronger: "#fcfcfc",
-  borderColors: lightGradient.slice(2),
-  isLight: true
+};
+const themeColors = {
+  light: [
+    "#fff",
+    "#f4f4f4",
+    "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%, 88.7%)",
+    "hsl(0, 0%, 85.8%)",
+    "hsl(0, 0%, 78.0%)",
+    "hsl(0, 0%, 56.1%)",
+    "hsl(0, 0%, 52.3%)",
+    "hsl(0, 0%, 43.5%)",
+    "hsl(0, 0%, 9.0%)"
+  ],
+  dark: [
+    "#111111",
+    "#151515",
+    "#191919",
+    "#232323",
+    "#282828",
+    "#323232",
+    "#383838",
+    "#424242",
+    "#494949",
+    "#545454",
+    "#626262",
+    "#777777"
+  ]
+};
+const lightThemes = createThemesFrom("light", themeCreator, {
+  backgrounds: themeColors.light,
+  backgroundStrong: import_core.isWeb ? "#fefefe" : "#f2f2f2",
+  borderColors: themeColors.light.slice(2),
+  isLight: true,
+  offsets: {
+    background: [2, 2, 2, 2, 2, 2]
+  }
 });
-const darkThemes = createThemesFrom("dark", createTheme, {
-  backgrounds: darkGradient,
-  colors: lightGradient.slice(2),
-  backgroundStronger: "#111",
+const darkThemes = createThemesFrom("dark", themeCreator, {
+  backgrounds: themeColors.dark,
+  colors: themeColors.light.slice(2),
+  backgroundStrong: "#070707",
   isBase: true,
   isLight: false,
   shift: 1,
@@ -200,45 +213,78 @@ const darkThemes = createThemesFrom("dark", createTheme, {
     color: [0, 4, 5, 5, 5, 5]
   }
 });
-const baseThemes = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, lightThemes), {
-  light: __spreadValues(__spreadValues({}, import_colors.allLightColors), lightThemes.light),
-  light_active: makeActiveTheme(lightThemes.light),
+darkThemes.dark_darker.background = "#030303";
+darkThemes.dark_darker.backgroundStrong = "#000";
+const light = (0, import_core.createTheme)({
+  ...import_tokens.lightColors,
+  ...lightThemes.light
+});
+const dark = (0, import_core.createTheme)({
+  ...import_tokens.darkColors,
+  ...darkThemes.dark
+});
+const baseThemes = {
+  ...lightThemes,
+  light,
+  light_active: lightThemes.light,
   light_Card: lightThemes.light,
+  light_SliderTrack: lightThemes.light_alt1,
+  light_SliderTrackActive: lightThemes.light_alt2,
+  light_Switch: lightThemes.light_alt2,
+  light_SwitchThumb: lightThemes.light,
   light_DrawerFrame: lightThemes.light_alt1,
-  light_Button: lightThemes.light_alt1
-}), darkThemes), {
-  dark: __spreadValues(__spreadValues({}, import_colors.allDarkColors), darkThemes.dark),
-  dark_active: makeActiveTheme(darkThemes.dark),
-  dark_Card: darkThemes.dark_alt1,
-  dark_DrawerFrame: darkThemes.dark_alt2,
+  ...darkThemes,
+  dark,
+  dark_active: darkThemes.dark,
+  dark_Card: darkThemes.dark,
+  dark_DrawerFrame: darkThemes.dark_alt1,
+  dark_SliderTrack: darkThemes.dark_darker,
+  dark_SliderTrackActive: darkThemes.dark_alt2,
+  dark_Switch: darkThemes.dark_alt2,
+  dark_SwitchThumb: darkThemes.dark_darker,
   dark_Button: darkThemes.dark_alt1
-});
-function makeActiveTheme(theme) {
-  const res = __spreadValues({}, theme);
-  res.backgroundHover = res.background;
-  res.colorHover = res.color;
-  res.backgroundPress = res.background;
-  res.colorPress = res.color;
-  return res;
+};
+const darkEntries = Object.entries(dark);
+const lightEntries = Object.entries(light);
+function findColors(prefix, dark2 = false) {
+  return Object.fromEntries(
+    (dark2 ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))
+  );
 }
-__name(makeActiveTheme, "makeActiveTheme");
-const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) => {
+const colorSchemes = [
+  { name: "blue", colors: findColors("blue"), darkColors: findColors("blue", true) },
+  { name: "gray", colors: findColors("gray"), darkColors: findColors("gray", true) },
+  { name: "green", colors: findColors("green"), darkColors: findColors("green", true) },
+  { name: "orange", colors: findColors("orange"), darkColors: findColors("orange", true) },
+  { name: "pink", colors: findColors("pink"), darkColors: findColors("pink", true) },
+  { name: "purple", colors: findColors("purple"), darkColors: findColors("purple", true) },
+  { name: "red", colors: findColors("red"), darkColors: findColors("red", true) },
+  { name: "yellow", colors: findColors("yellow"), darkColors: findColors("yellow", true) }
+];
+const colorNames = [
+  "blue",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "yellow",
+  "gray"
+];
+const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors: darkColors2 }) => {
   const [altLightThemes, altDarkThemes] = [
-    { colors: darkColors, backgrounds: colors },
-    { colors, backgrounds: darkColors }
+    { colors: darkColors2, backgrounds: colors },
+    { colors, backgrounds: darkColors2 }
   ].map((props, i) => {
     const isLight = i === 0;
+    const colorsBase = Object.values(props.colors).slice(2);
     const [backgrounds, colors2] = [
       Object.values(props.backgrounds),
-      Object.values(props.colors).slice(isLight ? 2 : 2)
+      isLight ? colorsBase : [colorsBase[0], "#ccc", ...colorsBase.slice(1)]
     ];
     const scheme = isLight ? "light" : "dark";
     const shift = isLight ? 0 : 1;
-    if (!isLight) {
-      const [_, h, sp, lp] = backgrounds[0].match(/hsl\(([0-9\.]+), ([0-9\.]+)\%, ([0-9\.]+)\%\)/);
-      backgrounds.unshift(`hsl(${h}, ${sp}%, ${parseFloat(lp) / 2}%)`);
-    }
-    const themeWithAlts = createThemesFrom(name, createTheme, {
+    const themeWithAlts = createThemesFrom(name, themeCreator, {
       colors: colors2,
       backgrounds,
       borderColors: backgrounds,
@@ -246,34 +292,37 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
       shift,
       isBase: false,
       offsets: {
-        background: isLight ? [1, 1, 1, 1, 1, 1] : null,
+        background: isLight ? [2, 2, 2, 2, 2, 2] : null,
         borderColor: isLight ? [2, 2, 2, 3, 2] : null,
         color: isLight ? [0, 0, -1, -2, -3, -3, -4] : [-1, -1, -1, -1, -1, -1]
       }
     });
     return Object.entries(themeWithAlts).map(([k, v]) => [`${scheme}_${k}`, v]);
   });
-  const lightButtonTheme = altLightThemes[0];
-  const darkButtonTheme = altDarkThemes[0];
-  return [
-    ...altLightThemes,
-    [`${lightButtonTheme[0]}_Button`, altLightThemes[2][1]],
-    [`${lightButtonTheme[0]}_Card`, altLightThemes[2][1]],
-    [`${lightButtonTheme[0]}_DrawerFrame`, altLightThemes[2][1]],
-    ...altDarkThemes,
-    [`${darkButtonTheme[0]}_Button`, altDarkThemes[2][1]],
-    [`${darkButtonTheme[0]}_Card`, altDarkThemes[2][1]],
-    [`${darkButtonTheme[0]}_DrawerFrame`, altDarkThemes[2][1]]
-  ];
+  return [...altLightThemes, ...altDarkThemes];
 });
 const colorThemes = Object.fromEntries(colorThemeEntries);
-const allThemes = __spreadValues(__spreadValues({}, baseThemes), colorThemes);
+baseThemes.dark_active = {
+  ...colorThemes.dark_blue_alt2,
+  background: import_tokens.darkColors.blue10,
+  backgroundHover: import_tokens.darkColors.blue11,
+  backgroundPress: import_tokens.darkColors.blue9,
+  backgroundFocus: import_tokens.darkColors.blue9,
+  color: import_tokens.darkColors.blue12,
+  colorHover: import_tokens.darkColors.blue12,
+  colorPress: import_tokens.darkColors.blue12,
+  colorFocus: import_tokens.darkColors.blue12
+};
+baseThemes.light_active = baseThemes.dark_active;
+const allThemes = {
+  ...baseThemes,
+  ...colorThemes
+};
 const themes = allThemes;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  colorNames,
   colorSchemes,
-  darkGradient,
-  lightGradient,
   themes
 });
 //# sourceMappingURL=themes.js.map