@tamagui/themes 1.88.13 → 1.89.0-1706308641099

package/dist/esm/helpers.mjs

@@ -0,0 +1,8 @@
+const objectKeys = obj => Object.keys(obj);
+function objectEntries(obj) {
+  return Object.entries(obj);
+}
+function objectFromEntries(arr) {
+  return Object.fromEntries(arr);
+}
+export { objectEntries, objectFromEntries, objectKeys };

package/dist/esm/index.mjs

@@ -0,0 +1,8 @@
+export * from "./themes.mjs";
+export * from "./tokens.mjs";
+export * from "./masks.mjs";
+export * from "./componentThemeDefinitions.mjs";
+export * from "./palettes.mjs";
+export * from "@tamagui/colors";
+export * from "./templates.mjs";
+export * from "./shadows.mjs";

package/dist/esm/masks.mjs

@@ -0,0 +1,90 @@
+import { combineMasks, createIdentityMask, createInverseMask, createMask, createSoftenMask, createStrengthenMask, skipMask } from "@tamagui/create-theme";
+const masks = {
+  identity: createIdentityMask(),
+  soften: createSoftenMask(),
+  soften2: createSoftenMask({
+    strength: 2
+  }),
+  soften3: createSoftenMask({
+    strength: 3
+  }),
+  strengthen: createStrengthenMask(),
+  inverse: createInverseMask(),
+  inverseSoften: combineMasks(createInverseMask(), createSoftenMask({
+    strength: 2
+  })),
+  inverseSoften2: combineMasks(createInverseMask(), createSoftenMask({
+    strength: 3
+  })),
+  inverseSoften3: combineMasks(createInverseMask(), createSoftenMask({
+    strength: 4
+  })),
+  inverseStrengthen2: combineMasks(createInverseMask(), createStrengthenMask({
+    strength: 2
+  })),
+  strengthenButSoftenBorder: createMask((template, options) => {
+    const stronger = createStrengthenMask().mask(template, options),
+      softer = createSoftenMask().mask(template, options);
+    return {
+      ...stronger,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  soften2Border1: createMask((template, options) => {
+    const softer2 = createSoftenMask({
+        strength: 2
+      }).mask(template, options),
+      softer1 = createSoftenMask({
+        strength: 1
+      }).mask(template, options);
+    return {
+      ...softer2,
+      borderColor: softer1.borderColor,
+      borderColorHover: softer1.borderColorHover,
+      borderColorPress: softer1.borderColorPress,
+      borderColorFocus: softer1.borderColorFocus
+    };
+  }),
+  soften3FlatBorder: createMask((template, options) => {
+    const borderMask = createSoftenMask({
+      strength: 2
+    }).mask(template, options);
+    return {
+      ...createSoftenMask({
+        strength: 3
+      }).mask(template, options),
+      borderColor: borderMask.borderColor,
+      borderColorHover: borderMask.borderColorHover,
+      borderColorPress: borderMask.borderColorPress,
+      borderColorFocus: borderMask.borderColorFocus
+    };
+  }),
+  softenBorder: createMask((template, options) => {
+    const plain = skipMask.mask(template, options),
+      softer = createSoftenMask().mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  }),
+  softenBorder2: createMask((template, options) => {
+    const plain = skipMask.mask(template, options),
+      softer = createSoftenMask({
+        strength: 2
+      }).mask(template, options);
+    return {
+      ...plain,
+      borderColor: softer.borderColor,
+      borderColorHover: softer.borderColorHover,
+      borderColorPress: softer.borderColorPress,
+      borderColorFocus: softer.borderColorFocus
+    };
+  })
+};
+export { masks };

package/dist/esm/palettes.mjs

@@ -0,0 +1,28 @@
+import { objectFromEntries, objectKeys } from "./helpers.mjs";
+import { colorTokens } from "./tokens.mjs";
+const palettes = (() => {
+  const lightTransparent = "rgba(255,255,255,0)",
+    darkTransparent = "rgba(10,10,10,0)",
+    transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
+    getColorPalette = (colors, color = colors[0]) => {
+      const colorPalette = Object.values(colors),
+        [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)];
+      return [transparent(colorPalette[0]), ...head, ...tail, color, transparent(colorPalette[colorPalette.length - 1])];
+    },
+    lightColor = "hsl(0, 0%, 9.0%)",
+    lightPalette = [lightTransparent, "#fff", "#f8f8f8", "hsl(0, 0%, 96.3%)", "hsl(0, 0%, 94.1%)", "hsl(0, 0%, 92.0%)", "hsl(0, 0%, 90.0%)", "hsl(0, 0%, 88.5%)", "hsl(0, 0%, 81.0%)", "hsl(0, 0%, 56.1%)", "hsl(0, 0%, 50.3%)", "hsl(0, 0%, 42.5%)", lightColor, darkTransparent],
+    darkColor = "#fff",
+    darkPalette = [darkTransparent, "#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", darkColor, lightTransparent],
+    lightPalettes = objectFromEntries(objectKeys(colorTokens.light).map(key => [`light_${key}`, getColorPalette(colorTokens.light[key], lightColor)])),
+    darkPalettes = objectFromEntries(objectKeys(colorTokens.dark).map(key => [`dark_${key}`, getColorPalette(colorTokens.dark[key], darkColor)])),
+    colorPalettes = {
+      ...lightPalettes,
+      ...darkPalettes
+    };
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+    ...colorPalettes
+  };
+})();
+export { palettes };

package/dist/esm/shadows.mjs

@@ -0,0 +1,19 @@
+const lightShadowColor = "rgba(0,0,0,0.04)",
+  lightShadowColorStrong = "rgba(0,0,0,0.085)",
+  darkShadowColor = "rgba(0,0,0,0.2)",
+  darkShadowColorStrong = "rgba(0,0,0,0.3)",
+  shadows = {
+    light: {
+      shadowColor: lightShadowColorStrong,
+      shadowColorHover: lightShadowColorStrong,
+      shadowColorPress: lightShadowColor,
+      shadowColorFocus: lightShadowColor
+    },
+    dark: {
+      shadowColor: darkShadowColorStrong,
+      shadowColorHover: darkShadowColorStrong,
+      shadowColorPress: darkShadowColor,
+      shadowColorFocus: darkShadowColor
+    }
+  };
+export { shadows };

package/dist/esm/templates.mjs

@@ -0,0 +1,93 @@
+import { palettes } from "./palettes.mjs";
+const templateColorsSpecific = {
+    color1: 1,
+    color2: 2,
+    color3: 3,
+    color4: 4,
+    color5: 5,
+    color6: 6,
+    color7: 7,
+    color8: 8,
+    color9: 9,
+    color10: 10,
+    color11: 11,
+    color12: 12
+  },
+  template = {
+    ...templateColorsSpecific,
+    // 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: 5,
+    borderColorHover: 6,
+    borderColorFocus: 4,
+    borderColorPress: 5,
+    placeholderColor: -4
+  },
+  templates = {
+    base: template,
+    colorLight: {
+      ...template,
+      // light color themes are a bit less sensitive
+      borderColor: 4,
+      borderColorHover: 5,
+      borderColorFocus: 4,
+      borderColorPress: 4
+    }
+  },
+  shadows = {
+    shadowColor: 0,
+    shadowColorHover: 0,
+    shadowColorPress: 0,
+    shadowColorFocus: 0
+  },
+  colors = {
+    ...shadows,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0
+  },
+  baseMaskOptions = {
+    override: shadows,
+    skip: shadows,
+    // avoids the transparent ends
+    max: palettes.light.length - 2,
+    min: 1
+  },
+  skipShadowsAndSpecificColors = {
+    ...shadows,
+    ...templateColorsSpecific
+  },
+  maskOptions = {
+    component: {
+      ...baseMaskOptions,
+      override: colors,
+      skip: skipShadowsAndSpecificColors
+    },
+    alt: {
+      ...baseMaskOptions
+    },
+    button: {
+      ...baseMaskOptions,
+      override: {
+        ...colors,
+        borderColor: "transparent",
+        borderColorHover: "transparent"
+      },
+      skip: skipShadowsAndSpecificColors
+    }
+  };
+export { maskOptions, templates };

package/dist/esm/themes-new.mjs

@@ -0,0 +1,62 @@
+import { createThemeBuilder } from "@tamagui/theme-builder";
+import { componentThemeDefinitions } from "./componentThemeDefinitions.mjs";
+import { masks } from "./masks.mjs";
+import { palettes } from "./palettes.mjs";
+import { shadows } from "./shadows.mjs";
+import { maskOptions, templates } from "./templates.mjs";
+import { darkColors, lightColors } from "./tokens.mjs";
+const colorThemeDefinition = colorName => [{
+    parent: "light",
+    palette: colorName,
+    template: "colorLight"
+  }, {
+    parent: "dark",
+    palette: colorName,
+    template: "base"
+  }],
+  themesBuilder = createThemeBuilder().addPalettes(palettes).addTemplates(templates).addMasks(masks).addThemes({
+    light: {
+      template: "base",
+      palette: "light",
+      nonInheritedValues: {
+        ...lightColors,
+        ...shadows.light
+      }
+    },
+    dark: {
+      template: "base",
+      palette: "dark",
+      nonInheritedValues: {
+        ...darkColors,
+        ...shadows.dark
+      }
+    }
+  }).addChildThemes({
+    orange: colorThemeDefinition("orange"),
+    yellow: colorThemeDefinition("yellow"),
+    green: colorThemeDefinition("green"),
+    blue: colorThemeDefinition("blue"),
+    purple: colorThemeDefinition("purple"),
+    pink: colorThemeDefinition("pink"),
+    red: colorThemeDefinition("red")
+  }).addChildThemes({
+    alt1: {
+      mask: "soften",
+      ...maskOptions.alt
+    },
+    alt2: {
+      mask: "soften2",
+      ...maskOptions.alt
+    },
+    active: {
+      mask: "soften3",
+      skip: {
+        color: 1
+      }
+    }
+  }).addChildThemes(componentThemeDefinitions, {
+    // to save bundle size but make alt themes not work on components
+    // avoidNestingWithin: ['alt1', 'alt2'],
+  }),
+  themes = themesBuilder.build();
+export { themes };

package/dist/esm/themes-old.mjs

@@ -0,0 +1,260 @@
+import { addChildren, applyMask, createStrengthenMask, createTheme, createWeakenMask, skipMask } from "@tamagui/create-theme";
+import { colorTokens, darkColors, lightColors } from "./tokens.mjs";
+const lightTransparent = "rgba(255,255,255,0)",
+  darkTransparent = "rgba(10,10,10,0)",
+  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]
+  },
+  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
+  },
+  templateShadows = {
+    shadowColor: 1,
+    shadowColorHover: 1,
+    shadowColorPress: 2,
+    shadowColorFocus: 2
+  },
+  toSkip = {
+    ...templateShadows
+  },
+  override = Object.fromEntries(Object.entries(toSkip).map(([k]) => [k, 0])),
+  overrideShadows = Object.fromEntries(Object.entries(templateShadows).map(([k]) => [k, 0])),
+  overrideWithColors = {
+    ...override,
+    color: 0,
+    colorHover: 0,
+    colorFocus: 0,
+    colorPress: 0
+  },
+  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
+  },
+  lightShadowColor = "rgba(0,0,0,0.02)",
+  lightShadowColorStrong = "rgba(0,0,0,0.066)",
+  darkShadowColor = "rgba(0,0,0,0.2)",
+  darkShadowColorStrong = "rgba(0,0,0,0.3)",
+  lightShadows = {
+    shadowColor: lightShadowColorStrong,
+    shadowColorHover: lightShadowColorStrong,
+    shadowColorPress: lightShadowColor,
+    shadowColorFocus: lightShadowColor
+  },
+  darkShadows = {
+    shadowColor: darkShadowColorStrong,
+    shadowColorHover: darkShadowColorStrong,
+    shadowColorPress: darkShadowColor,
+    shadowColorFocus: darkShadowColor
+  },
+  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
+  },
+  darkTemplate = {
+    ...template,
+    ...darkShadows
+  },
+  light = createTheme(palettes.light, lightTemplate),
+  dark = createTheme(palettes.dark, darkTemplate),
+  baseThemes = {
+    light,
+    dark
+  },
+  masks = {
+    skip: skipMask,
+    weaker: createWeakenMask(),
+    stronger: createStrengthenMask()
+  },
+  maskOptions = {
+    override,
+    skip: toSkip,
+    // avoids the transparent ends
+    max: palettes.light.length - 2,
+    min: 1
+  },
+  transparent = (hsl, opacity = 0) => hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla("),
+  [lightColorThemes, darkColorThemes] = [colorTokens.light, colorTokens.dark].map((colorSet, i) => {
+    const isLight = i === 0,
+      theme = baseThemes[isLight ? "light" : "dark"];
+    return Object.fromEntries(Object.keys(colorSet).map(color => {
+      const colorPalette = Object.values(colorSet[color]),
+        [head, tail] = [colorPalette.slice(0, 6), colorPalette.slice(colorPalette.length - 5)],
+        palette = [transparent(colorPalette[0]), ...head, ...tail, theme.color, transparent(colorPalette[colorPalette.length - 1])],
+        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];
+    }));
+  }),
+  allThemes = addChildren(baseThemes, (name, theme) => {
+    const isLight = name === "light",
+      inverseTheme = baseThemes[isLight ? "dark" : "light"],
+      colorThemes = isLight ? lightColorThemes : darkColorThemes,
+      inverseColorThemes = isLight ? darkColorThemes : lightColorThemes,
+      allColorThemes = addChildren(colorThemes, (colorName, colorTheme) => {
+        const inverse = inverseColorThemes[colorName];
+        return {
+          ...getAltThemes({
+            theme: colorTheme,
+            inverse,
+            isLight
+          }),
+          ...getComponentThemes(colorTheme, inverse, isLight)
+        };
+      });
+    return {
+      ...{
+        ...getAltThemes({
+          theme,
+          inverse: inverseTheme,
+          isLight
+        }),
+        ...getComponentThemes(theme, inverseTheme, isLight)
+      },
+      ...allColorThemes
+    };
+  });
+function getAltThemes({
+  theme,
+  inverse,
+  isLight,
+  activeTheme
+}) {
+  const maskOptionsAlt = {
+      ...maskOptions,
+      override: overrideShadows
+    },
+    alt1 = applyMask(theme, masks.weaker, maskOptionsAlt),
+    alt2 = applyMask(alt1, masks.weaker, maskOptionsAlt),
+    active = activeTheme ?? (process.env.ACTIVE_THEME_INVERSE ? inverse : applyMask(theme, masks.weaker, {
+      ...maskOptions,
+      strength: 3,
+      skip: {
+        ...maskOptions.skip,
+        color: 1
+      }
+    }));
+  return addChildren({
+    alt1,
+    alt2,
+    active
+  }, (_, subTheme) => 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
+      }
+    },
+    weaker1 = applyMask(theme, masks.weaker, componentMaskOptions),
+    base = applyMask(weaker1, masks.stronger, componentMaskOptions),
+    weaker2 = applyMask(weaker1, masks.weaker, componentMaskOptions),
+    stronger1 = applyMask(theme, masks.stronger, componentMaskOptions),
+    inverse1 = applyMask(inverse, masks.weaker, componentMaskOptions),
+    inverse2 = applyMask(inverse1, masks.weaker, componentMaskOptions),
+    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
+    },
+    overlayTheme = {
+      background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.9)"
+    },
+    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
+  })
+};
+export { themes };

package/dist/esm/themes.mjs

@@ -0,0 +1,2 @@
+import * as themes from "./generated-new.mjs";
+export { themes };

package/dist/esm/tokens.mjs

@@ -0,0 +1,123 @@
+import { blue, blueDark, gray, grayDark, green, greenDark, orange, orangeDark, pink, pinkDark, purple, purpleDark, red, redDark, yellow, yellowDark } from "@tamagui/colors";
+import { createTokens } from "@tamagui/web";
+const size = {
+    $0: 0,
+    "$0.25": 2,
+    "$0.5": 4,
+    "$0.75": 8,
+    $1: 20,
+    "$1.5": 24,
+    $2: 28,
+    "$2.5": 32,
+    $3: 36,
+    "$3.5": 40,
+    $4: 44,
+    $true: 44,
+    "$4.5": 48,
+    $5: 52,
+    $6: 64,
+    $7: 74,
+    $8: 84,
+    $9: 94,
+    $10: 104,
+    $11: 124,
+    $12: 144,
+    $13: 164,
+    $14: 184,
+    $15: 204,
+    $16: 224,
+    $17: 224,
+    $18: 244,
+    $19: 264,
+    $20: 284
+  },
+  spaces = Object.entries(size).map(([k, v]) => [k, sizeToSpace(v)]);
+function sizeToSpace(v) {
+  return v === 0 ? 0 : v === 2 ? 0.5 : v === 4 ? 1 : v === 8 ? 1.5 : v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12);
+}
+const spacesNegative = spaces.slice(1).map(([k, v]) => [`-${k.slice(1)}`, -v]),
+  space = {
+    ...Object.fromEntries(spaces),
+    ...Object.fromEntries(spacesNegative)
+  },
+  zIndex = {
+    0: 0,
+    1: 100,
+    2: 200,
+    3: 300,
+    4: 400,
+    5: 500
+  },
+  colorTokens = {
+    light: {
+      blue,
+      gray,
+      green,
+      orange,
+      pink,
+      purple,
+      red,
+      yellow
+    },
+    dark: {
+      blue: blueDark,
+      gray: grayDark,
+      green: greenDark,
+      orange: orangeDark,
+      pink: pinkDark,
+      purple: purpleDark,
+      red: redDark,
+      yellow: yellowDark
+    }
+  },
+  darkColors = {
+    ...colorTokens.dark.blue,
+    ...colorTokens.dark.gray,
+    ...colorTokens.dark.green,
+    ...colorTokens.dark.orange,
+    ...colorTokens.dark.pink,
+    ...colorTokens.dark.purple,
+    ...colorTokens.dark.red,
+    ...colorTokens.dark.yellow
+  },
+  lightColors = {
+    ...colorTokens.light.blue,
+    ...colorTokens.light.gray,
+    ...colorTokens.light.green,
+    ...colorTokens.light.orange,
+    ...colorTokens.light.pink,
+    ...colorTokens.light.purple,
+    ...colorTokens.light.red,
+    ...colorTokens.light.yellow
+  },
+  color = {
+    ...postfixObjKeys(lightColors, "Light"),
+    ...postfixObjKeys(darkColors, "Dark")
+  };
+function postfixObjKeys(obj, postfix) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
+}
+const radius = {
+    0: 0,
+    1: 3,
+    2: 5,
+    3: 7,
+    4: 9,
+    true: 9,
+    5: 10,
+    6: 16,
+    7: 19,
+    8: 22,
+    9: 26,
+    10: 34,
+    11: 42,
+    12: 50
+  },
+  tokens = createTokens({
+    color,
+    radius,
+    zIndex,
+    space,
+    size
+  });
+export { color, colorTokens, darkColors, lightColors, radius, size, space, tokens, zIndex };