@tamagui/themes 2.0.0-1768586279389 → 2.0.0-1768696252732

package/dist/cjs/v5-palettes.native.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var v5_palettes_exports = {};
+__export(v5_palettes_exports, {
+  blackColors: () => blackColors,
+  darkPalette: () => darkPalette,
+  darkShadows: () => darkShadows,
+  lightPalette: () => lightPalette,
+  lightShadows: () => lightShadows,
+  neutral: () => neutral,
+  neutralPalette: () => neutralPalette,
+  palettes: () => palettes,
+  whiteBlack: () => whiteBlack,
+  whiteColors: () => whiteColors
+});
+module.exports = __toCommonJS(v5_palettes_exports);
+var import_colors = require("@tamagui/colors"),
+  darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
+  lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 74%)", "hsl(0, 0%, 68%)", "hsl(0, 0%, 60%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 2%)"],
+  neutralPalette = ["hsl(0, 0%, 68%)", "hsl(0, 0%, 65%)", "hsl(0, 0%, 62%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 53%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 47%)", "hsl(0, 0%, 44%)", "hsl(0, 0%, 41%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 32%)"],
+  whiteBlack = {
+    white: "rgba(255,255,255,1)",
+    white0: "rgba(255,255,255,0)",
+    white02: "rgba(255,255,255,0.2)",
+    white04: "rgba(255,255,255,0.4)",
+    white06: "rgba(255,255,255,0.6)",
+    white08: "rgba(255,255,255,0.8)",
+    black: "rgba(0,0,0,1)",
+    black0: "rgba(0,0,0,0)",
+    black02: "rgba(0,0,0,0.2)",
+    black04: "rgba(0,0,0,0.4)",
+    black06: "rgba(0,0,0,0.6)",
+    black08: "rgba(0,0,0,0.8)"
+  },
+  darkShadows = {
+    shadow1: "rgba(0,0,0,0.1)",
+    shadow2: "rgba(0,0,0,0.18)",
+    shadow3: "rgba(0,0,0,0.25)",
+    shadow4: "rgba(0,0,0,0.4)",
+    shadow5: "rgba(0,0,0,0.55)",
+    shadow6: "rgba(0,0,0,0.66)"
+  },
+  lightShadows = {
+    shadow1: "rgba(0,0,0,0.025)",
+    shadow2: "rgba(0,0,0,0.04)",
+    shadow3: "rgba(0,0,0,0.06)",
+    shadow4: "rgba(0,0,0,0.095)",
+    shadow5: "rgba(0,0,0,0.195)",
+    shadow6: "rgba(0,0,0,0.3)"
+  },
+  blackColors = {
+    black1: darkPalette[0],
+    black2: darkPalette[1],
+    black3: darkPalette[2],
+    black4: darkPalette[3],
+    black5: darkPalette[4],
+    black6: darkPalette[5],
+    black7: darkPalette[6],
+    black8: darkPalette[7],
+    black9: darkPalette[8],
+    black10: darkPalette[9],
+    black11: darkPalette[10],
+    black12: darkPalette[11]
+  },
+  whiteColors = {
+    white1: lightPalette[0],
+    white2: lightPalette[1],
+    white3: lightPalette[2],
+    white4: lightPalette[3],
+    white5: lightPalette[4],
+    white6: lightPalette[5],
+    white7: lightPalette[6],
+    white8: lightPalette[7],
+    white9: lightPalette[8],
+    white10: lightPalette[9],
+    white11: lightPalette[10],
+    white12: lightPalette[11]
+  },
+  neutral = {
+    neutral1: neutralPalette[0],
+    neutral2: neutralPalette[1],
+    neutral3: neutralPalette[2],
+    neutral4: neutralPalette[3],
+    neutral5: neutralPalette[4],
+    neutral6: neutralPalette[5],
+    neutral7: neutralPalette[6],
+    neutral8: neutralPalette[7],
+    neutral9: neutralPalette[8],
+    neutral10: neutralPalette[9],
+    neutral11: neutralPalette[10],
+    neutral12: neutralPalette[11]
+  },
+  palettes = {
+    dark: darkPalette,
+    light: lightPalette,
+    dark_blue: Object.values(import_colors.blueDark),
+    light_blue: Object.values(import_colors.blue),
+    dark_gray: Object.values(import_colors.grayDark),
+    light_gray: Object.values(import_colors.gray),
+    dark_green: Object.values(import_colors.greenDark),
+    light_green: Object.values(import_colors.green),
+    dark_red: Object.values(import_colors.redDark),
+    light_red: Object.values(import_colors.red),
+    dark_yellow: Object.values(import_colors.yellowDark),
+    light_yellow: Object.values(import_colors.yellow)
+  };
+//# sourceMappingURL=v5-palettes.native.js.map

package/dist/cjs/v5-palettes.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","v5_palettes_exports","__export","blackColors","darkPalette","darkShadows","lightPalette","lightShadows","neutral","neutralPalette","palettes","whiteBlack","whiteColors","module","exports","import_colors","require","white","white0","white02","white04","white06","white08","black","black0","black02","black04","black06","black08","shadow1","shadow2","shadow3","shadow4","shadow5","shadow6","black1","black2","black3","black4","black5","black6","black7","black8","black9","black10","black11","black12","white1","white2","white3","white4","white5","white6","white7","white8","white9","white10","white11","white12","neutral1","neutral2","neutral3","neutral4","neutral5","neutral6","neutral7","neutral8","neutral9","neutral10","neutral11","neutral12","dark","light","dark_blue","Object","values","blueDark","light_blue","blue","dark_gray","grayDark","light_gray","gray","dark_green","greenDark","light_green","green","dark_red","redDark","light_red","red","dark_yellow","yellowDark","light_yellow","yellow"],"sources":["../../src/v5-palettes.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/v5-themes.cjs

@@ -21,80 +21,23 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var v5_themes_exports = {};
 __export(v5_themes_exports, {
   createV5Theme: () => createV5Theme,
-  darkPalette: () => darkPalette,
-  defaultColors: () => defaultColors,
-  lightPalette: () => lightPalette,
+  defaultChildrenThemes: () => defaultChildrenThemes,
+  defaultDarkPalette: () => darkPalette,
+  defaultGrandChildrenThemes: () => defaultGrandChildrenThemes,
+  defaultLightPalette: () => lightPalette,
   themes: () => themes
 });
 module.exports = __toCommonJS(v5_themes_exports);
 var import_colors = require("@tamagui/colors"),
   import_theme_builder = require("@tamagui/theme-builder"),
   import_opacify = require("./opacify.cjs");
-const blue = import_colors.blue,
-  blueDark = import_colors.blueDark,
-  green = import_colors.green,
-  greenDark = import_colors.greenDark,
-  purple = import_colors.purple,
-  purpleDark = import_colors.purpleDark,
-  red = import_colors.red,
-  redDark = import_colors.redDark,
-  yellow = import_colors.yellow,
-  yellowDark = import_colors.yellowDark,
-  pink = import_colors.pink,
-  pinkDark = import_colors.pinkDark,
-  orange = import_colors.orange,
-  orangeDark = import_colors.orangeDark,
-  teal = import_colors.teal,
-  tealDark = import_colors.tealDark,
-  gray = import_colors.gray,
-  grayDark = import_colors.grayDark,
-  darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
+function paletteToNamedColors(name, palette) {
+  return Object.fromEntries(palette.map((color, i) => [`${name}${i + 1}`, color]));
+}
+const darkPalette = ["#050505", "#151515", "#191919", "#232323", "#282828", "#323232", "#424242", "#494949", "#545454", "#626262", "#a5a5a5", "#fff"],
   lightPalette = ["#fff", "#f8f8f8", "hsl(0, 0%, 93%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 80%)", "hsl(0, 0%, 74%)", "hsl(0, 0%, 68%)", "hsl(0, 0%, 60%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 20%)", "hsl(0, 0%, 2%)"],
   neutralPalette = ["hsl(0, 0%, 68%)", "hsl(0, 0%, 65%)", "hsl(0, 0%, 62%)", "hsl(0, 0%, 59%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 53%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 47%)", "hsl(0, 0%, 44%)", "hsl(0, 0%, 41%)", "hsl(0, 0%, 38%)", "hsl(0, 0%, 32%)"],
-  neutral = {
-    neutral1: neutralPalette[0],
-    neutral2: neutralPalette[1],
-    neutral3: neutralPalette[2],
-    neutral4: neutralPalette[3],
-    neutral5: neutralPalette[4],
-    neutral6: neutralPalette[5],
-    neutral7: neutralPalette[6],
-    neutral8: neutralPalette[7],
-    neutral9: neutralPalette[8],
-    neutral10: neutralPalette[9],
-    neutral11: neutralPalette[10],
-    neutral12: neutralPalette[11]
-  },
-  tanLightPalette = ["hsla(40, 30%, 98%, 1)", "hsla(40, 24%, 94%, 1)", "hsla(38, 23%, 91%, 1)", "hsla(36, 20%, 90%, 1)", "hsla(36, 20%, 88%, 1)", "hsla(35, 20%, 85%, 1)", "hsla(35, 21%, 74%, 1)", "hsla(34, 20%, 70%, 1)", "hsla(35, 20%, 67%, 1)", "hsla(34, 19%, 47%, 1)", "hsla(35, 18%, 37%, 1)", "hsla(35, 17%, 20%, 1)"],
-  tanDarkPalette = ["hsla(30, 9%, 10%, 1)", "hsla(30, 10%, 12%, 1)", "hsla(31, 11%, 18%, 1)", "hsla(30, 12%, 23%, 1)", "hsla(30, 14%, 28%, 1)", "hsla(30, 16%, 33%, 1)", "hsla(30, 18%, 38%, 1)", "hsla(30, 20%, 45%, 1)", "hsla(30, 21%, 50%, 1)", "hsla(29, 22%, 58%, 1)", "hsla(34, 24%, 70%, 1)", "hsla(11, 12%, 79%, 1)"],
-  tan = {
-    tan1: tanLightPalette[0],
-    tan2: tanLightPalette[1],
-    tan3: tanLightPalette[2],
-    tan4: tanLightPalette[3],
-    tan5: tanLightPalette[4],
-    tan6: tanLightPalette[5],
-    tan7: tanLightPalette[6],
-    tan8: tanLightPalette[7],
-    tan9: tanLightPalette[8],
-    tan10: tanLightPalette[9],
-    tan11: tanLightPalette[10],
-    tan12: tanLightPalette[11]
-  },
-  tanDark = {
-    tan1: tanDarkPalette[0],
-    tan2: tanDarkPalette[1],
-    tan3: tanDarkPalette[2],
-    tan4: tanDarkPalette[3],
-    tan5: tanDarkPalette[4],
-    tan6: tanDarkPalette[5],
-    tan7: tanDarkPalette[6],
-    tan8: tanDarkPalette[7],
-    tan9: tanDarkPalette[8],
-    tan10: tanDarkPalette[9],
-    tan11: tanDarkPalette[10],
-    tan12: tanDarkPalette[11]
-  },
+  neutral = paletteToNamedColors("neutral", neutralPalette),
   whiteBlack = {
     white: "rgba(255,255,255,1)",
     white0: "rgba(255,255,255,0)",
@@ -109,35 +52,6 @@ const blue = import_colors.blue,
     black06: "rgba(0,0,0,0.6)",
     black08: "rgba(0,0,0,0.8)"
   },
-  extraColorsDark = {
-    // in between 1/2
-    color1pt5: "rgba(20,20,20)",
-    color2pt5: "#222",
-    // TODO: ideally just functions for alpha($color1, 0.1)
-    // extra low opacities
-    color01: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.1),
-    color0075: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.075),
-    color005: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.05),
-    color0025: (0, import_opacify.opacify)(darkPalette[darkPalette.length - 1], 0.025),
-    background01: (0, import_opacify.opacify)(darkPalette[0], 0.1),
-    background0075: (0, import_opacify.opacify)(darkPalette[0], 0.075),
-    background005: (0, import_opacify.opacify)(darkPalette[0], 0.05),
-    background0025: (0, import_opacify.opacify)(darkPalette[0], 0.025)
-  },
-  extraColorsLight = {
-    // in between 1/2
-    color1pt5: "#f9f9f9",
-    color2pt5: "#f4f4f4",
-    // extra low opacities
-    color01: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.1),
-    color0075: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.075),
-    color005: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.05),
-    color0025: (0, import_opacify.opacify)(lightPalette[lightPalette.length - 1], 0.025),
-    background01: (0, import_opacify.opacify)(lightPalette[0], 0.1),
-    background0075: (0, import_opacify.opacify)(lightPalette[0], 0.075),
-    background005: (0, import_opacify.opacify)(lightPalette[0], 0.05),
-    background0025: (0, import_opacify.opacify)(lightPalette[0], 0.025)
-  },
   darkShadows = {
     shadow1: "rgba(0,0,0,0.1)",
     shadow2: "rgba(0,0,0,0.18)",
@@ -153,207 +67,108 @@ const blue = import_colors.blue,
     shadow4: "rgba(0,0,0,0.095)",
     shadow5: "rgba(0,0,0,0.195)",
     shadow6: "rgba(0,0,0,0.3)"
-  },
-  blackColors = {
-    black1: darkPalette[0],
-    black2: darkPalette[1],
-    black3: darkPalette[2],
-    black4: darkPalette[3],
-    black5: darkPalette[4],
-    black6: darkPalette[5],
-    black7: darkPalette[6],
-    black8: darkPalette[7],
-    black9: darkPalette[8],
-    black10: darkPalette[9],
-    black11: darkPalette[10],
-    black12: darkPalette[11]
-  },
-  whiteColors = {
-    white1: lightPalette[0],
-    white2: lightPalette[1],
-    white3: lightPalette[2],
-    white4: lightPalette[3],
-    white5: lightPalette[4],
-    white6: lightPalette[5],
-    white7: lightPalette[6],
-    white8: lightPalette[7],
-    white9: lightPalette[8],
-    white10: lightPalette[9],
-    white11: lightPalette[10],
-    white12: lightPalette[11]
   };
-const defaultColors = {
-  light: {
-    blue,
-    gray,
-    green,
-    neutral,
-    orange,
-    pink,
-    purple,
-    red,
-    tan,
-    teal,
-    yellow
-  },
-  dark: {
-    blue: blueDark,
-    gray: grayDark,
-    green: greenDark,
-    neutral,
-    // same for both light and dark - that's the point!
-    orange: orangeDark,
-    pink: pinkDark,
-    purple: purpleDark,
-    red: redDark,
-    tan: tanDark,
-    teal: tealDark,
-    yellow: yellowDark
-  }
-};
-function createV5Theme(options = {}) {
-  const {
-      darkPalette: customDarkPalette = darkPalette,
-      lightPalette: customLightPalette = lightPalette,
-      colors = {},
-      includeDefaultColors = !0,
-      grandChildrenThemes: customGrandChildrenThemes = {}
-    } = options,
-    childrenThemes = {
-      black: {
-        palette: {
-          dark: Object.values(blackColors),
-          light: Object.values(blackColors)
-        }
-      },
-      white: {
-        palette: {
-          dark: Object.values(whiteColors),
-          light: Object.values(whiteColors)
-        }
-      }
-    };
-  includeDefaultColors && Object.assign(childrenThemes, {
+const defaultChildrenThemes = {
     gray: {
-      palette: {
-        dark: Object.values(grayDark),
-        light: Object.values(gray)
-      }
+      light: import_colors.gray,
+      dark: import_colors.grayDark
     },
     blue: {
-      palette: {
-        dark: Object.values(blueDark),
-        light: Object.values(blue)
-      }
+      light: import_colors.blue,
+      dark: import_colors.blueDark
     },
     red: {
-      palette: {
-        dark: Object.values(redDark),
-        light: Object.values(red)
-      }
+      light: import_colors.red,
+      dark: import_colors.redDark
     },
     yellow: {
-      palette: {
-        dark: Object.values(yellowDark),
-        light: Object.values(yellow)
-      }
+      light: import_colors.yellow,
+      dark: import_colors.yellowDark
     },
     green: {
-      palette: {
-        dark: Object.values(greenDark),
-        light: Object.values(green)
-      }
+      light: import_colors.green,
+      dark: import_colors.greenDark
     },
-    teal: {
-      palette: {
-        dark: Object.values(tealDark),
-        light: Object.values(teal)
-      }
+    neutral: {
+      light: neutral,
+      dark: neutral
+    }
+  },
+  defaultGrandChildrenThemes = {
+    accent: {
+      template: "inverse"
+    }
+    // simplified and removed:
+    // alt1: { template: 'alt1' },
+    // alt2: { template: 'alt2' },
+    // surface1: { template: 'surface1' },
+    // surface2: { template: 'surface2' },
+    // surface3: { template: 'surface3' },
+  };
+function createV5Theme(options = {}) {
+  const {
+      darkPalette: customDarkPalette = darkPalette,
+      lightPalette: customLightPalette = lightPalette,
+      childrenThemes = defaultChildrenThemes,
+      grandChildrenThemes = defaultGrandChildrenThemes,
+      componentThemes: customComponentThemes = import_theme_builder.defaultComponentThemes
+    } = options,
+    blackColors = paletteToNamedColors("black", customDarkPalette),
+    whiteColors = paletteToNamedColors("white", customLightPalette),
+    extraBase = {
+      ...blackColors,
+      ...whiteColors,
+      ...whiteBlack
     },
-    orange: {
-      palette: {
-        dark: Object.values(orangeDark),
-        light: Object.values(orange)
-      }
+    lightExtraBase = {
+      ...extraBase,
+      ...lightShadows,
+      shadowColor: lightShadows.shadow1
     },
-    pink: {
-      palette: {
-        dark: Object.values(pinkDark),
-        light: Object.values(pink)
-      }
+    darkExtraBase = {
+      ...extraBase,
+      ...darkShadows,
+      shadowColor: darkShadows.shadow1
     },
-    purple: {
+    lightExtra = {
+      ...lightExtraBase
+    },
+    darkExtra = {
+      ...darkExtraBase
+    };
+  for (const theme of Object.values(childrenThemes)) theme.light && Object.assign(lightExtra, theme.light), theme.dark && Object.assign(darkExtra, theme.dark);
+  const childrenWithPalettes = {
+    // Always include black/white for theme generation
+    black: {
       palette: {
-        dark: Object.values(purpleDark),
-        light: Object.values(purple)
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors)
       }
     },
-    neutral: {
+    white: {
       palette: {
-        dark: neutralPalette,
-        light: neutralPalette
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors)
       }
     },
-    tan: {
+    ...Object.fromEntries(Object.entries(childrenThemes).map(([name, theme]) => [name, {
       palette: {
-        dark: tanDarkPalette,
-        light: tanLightPalette
+        light: Object.values(theme.light),
+        dark: Object.values(theme.dark)
       }
-    }
-  });
-  for (const [name, palette] of Object.entries(colors)) childrenThemes[name] = {
-    palette: {
-      dark: palette.dark,
-      light: palette.light
-    }
+    }]))
   };
   return (0, import_theme_builder.createThemes)({
-    componentThemes: import_theme_builder.defaultComponentThemes,
+    // componentThemes: false disables them, undefined/truthy values enable them
+    componentThemes: customComponentThemes,
     base: {
       palette: {
         dark: customDarkPalette,
         light: customLightPalette
       },
       extra: {
-        light: {
-          ...blackColors,
-          ...blue,
-          ...gray,
-          ...green,
-          ...lightShadows,
-          ...neutral,
-          ...orange,
-          ...pink,
-          ...purple,
-          ...red,
-          ...tan,
-          ...teal,
-          ...whiteColors,
-          ...yellow,
-          shadowColor: lightShadows.shadow1,
-          ...whiteBlack,
-          ...extraColorsLight
-        },
-        dark: {
-          ...blackColors,
-          ...blueDark,
-          ...darkShadows,
-          ...grayDark,
-          ...greenDark,
-          ...neutral,
-          // same for both light and dark
-          ...orangeDark,
-          ...pinkDark,
-          ...purpleDark,
-          ...redDark,
-          ...tanDark,
-          ...tealDark,
-          ...whiteColors,
-          ...yellowDark,
-          shadowColor: darkShadows.shadow1,
-          ...whiteBlack,
-          ...extraColorsDark
-        }
+        light: lightExtra,
+        dark: darkExtra
       }
     },
     accent: {
@@ -362,28 +177,39 @@ function createV5Theme(options = {}) {
         light: customDarkPalette
       }
     },
-    childrenThemes,
-    grandChildrenThemes: {
-      accent: {
-        template: "inverse"
-      },
-      alt1: {
-        template: "alt1"
-      },
-      alt2: {
-        template: "alt2"
-      },
-      surface1: {
-        template: "surface1"
-      },
-      surface2: {
-        template: "surface2"
-      },
-      surface3: {
-        template: "surface3"
-      },
-      ...customGrandChildrenThemes
+    childrenThemes: childrenWithPalettes,
+    grandChildrenThemes,
+    // Add computed colors to ALL themes based on each theme's palette
+    getTheme: ({
+      palette
+    }) => {
+      if (!palette || palette.length < 3) throw new Error(`invalid palette: ${JSON.stringify(palette)}`);
+      const bgColor = palette[1],
+        fgColor = palette[palette.length - 2];
+      return {
+        // In-between shades
+        color0pt5: (0, import_opacify.interpolateColor)(bgColor, palette[2], 0.5),
+        color1pt5: (0, import_opacify.interpolateColor)(palette[1], palette[2], 0.5),
+        color2pt5: (0, import_opacify.interpolateColor)(palette[2], palette[3], 0.5),
+        // Opacity variants of foreground color
+        color01: (0, import_opacify.opacify)(fgColor, 0.1),
+        color0075: (0, import_opacify.opacify)(fgColor, 0.075),
+        color005: (0, import_opacify.opacify)(fgColor, 0.05),
+        color0025: (0, import_opacify.opacify)(fgColor, 0.025),
+        color002: (0, import_opacify.opacify)(fgColor, 0.02),
+        color001: (0, import_opacify.opacify)(fgColor, 0.01),
+        // Opacity variants of background color
+        background01: (0, import_opacify.opacify)(bgColor, 0.1),
+        background0075: (0, import_opacify.opacify)(bgColor, 0.075),
+        background005: (0, import_opacify.opacify)(bgColor, 0.05),
+        background0025: (0, import_opacify.opacify)(bgColor, 0.025),
+        background002: (0, import_opacify.opacify)(bgColor, 0.02),
+        background001: (0, import_opacify.opacify)(bgColor, 0.01)
+      };
     }
   });
 }
-const themes = createV5Theme();
+const themes = createV5Theme();
+themes.dark.background0075;
+themes.dark.background;
+themes.dark.accent1;