material-theme-builder 4.0.0 → 5.1.0

package/dist/react.js

@@ -3333,19 +3333,17 @@ import {
   SchemeNeutral,
   SchemeTonalSpot,
   SchemeVibrant,
-  TonalPalette as TonalPalette2
+  TonalPalette
 } from "@material/material-color-utilities";
 import { kebabCase as kebabCase4, upperFirst as upperFirst2 } from "lodash-es";
 
 // src/lib/builder.css.ts
-import {
-  hexFromArgb
-} from "@material/material-color-utilities";
+import { hexFromArgb } from "@material/material-color-utilities";
 import { kebabCase } from "lodash-es";
 function buildCss(ctx) {
   const {
     prefix,
-    allPalettes,
+    refPalettes,
     mergedColorsLight,
     mergedColorsDark,
     tokenToPalette,
@@ -3353,10 +3351,9 @@ function buildCss(ctx) {
   } = ctx;
   function buildRefPaletteLookup() {
     const lookup = {};
-    for (const [name, palette] of Object.entries(allPalettes)) {
-      const paletteName = kebabCase(name);
-      for (const tone of STANDARD_TONES) {
-        const hex = hexFromArgb(palette.tone(tone));
+    for (const [paletteName, tones] of Object.entries(refPalettes)) {
+      for (const { tone, argb } of tones) {
+        const hex = hexFromArgb(argb);
         if (!lookup[hex]) lookup[hex] = [];
         lookup[hex].push({ paletteName, tone });
       }
@@ -3384,15 +3381,12 @@ function buildCss(ctx) {
     const value = hexFromArgb(colorValue);
     return `${name}:${value};`;
   }
-  function generateTonalPaletteVars(paletteName, palette) {
-    return STANDARD_TONES.map((tone) => {
-      const color = palette.tone(tone);
-      return refPaletteVar(paletteName, tone, color);
-    }).join(" ");
+  function generateTonalPaletteVars(paletteName, tones) {
+    return tones.map(({ tone, argb }) => refPaletteVar(paletteName, tone, argb)).join(" ");
   }
   function generateTonalVars() {
-    return Object.entries(allPalettes).map(
-      ([name, palette]) => generateTonalPaletteVars(kebabCase(name), palette)
+    return Object.entries(refPalettes).map(
+      ([paletteName, tones]) => generateTonalPaletteVars(paletteName, tones)
     ).join(" ");
   }
   const refPaletteLookup = buildRefPaletteLookup();
@@ -3694,29 +3688,8 @@ import {
   DynamicScheme,
   Hct,
   hexFromArgb as hexFromArgb4,
-  MaterialDynamicColors,
-  TonalPalette
+  MaterialDynamicColors
 } from "@material/material-color-utilities";
-var MTB_TONES = [
-  0,
-  5,
-  10,
-  15,
-  20,
-  25,
-  30,
-  35,
-  40,
-  50,
-  60,
-  70,
-  80,
-  90,
-  95,
-  98,
-  99,
-  100
-];
 var FIXTURE_TOKEN_ORDER = [
   "primary",
   "surfaceTint",
@@ -3771,7 +3744,6 @@ var FIXTURE_TOKEN_ORDER = [
 function buildJson(ctx) {
   const {
     hexSource,
-    sourceHct,
     effectiveSourceArgb,
     primaryHct,
     SchemeClass,
@@ -3782,34 +3754,16 @@ function buildJson(ctx) {
     error,
     neutral,
     neutralVariant,
-    hexCustomColors
+    hexCustomColors,
+    refPalettes
   } = ctx;
-  const neuHct = neutral ? Hct.fromInt(argbFromHex(neutral)) : sourceHct;
-  const nvHct = neutralVariant ? Hct.fromInt(argbFromHex(neutralVariant)) : sourceHct;
-  const rawPalettes = {
-    primary: TonalPalette.fromInt(effectiveSourceArgb),
-    secondary: secondary ? TonalPalette.fromInt(argbFromHex(secondary)) : TonalPalette.fromHueAndChroma(sourceHct.hue, sourceHct.chroma / 3),
-    tertiary: tertiary ? TonalPalette.fromInt(argbFromHex(tertiary)) : TonalPalette.fromHueAndChroma(
-      (sourceHct.hue + 60) % 360,
-      sourceHct.chroma / 2
-    ),
-    neutral: TonalPalette.fromHueAndChroma(
-      neuHct.hue,
-      Math.min(neuHct.chroma / 12, 4)
-    ),
-    "neutral-variant": TonalPalette.fromHueAndChroma(
-      nvHct.hue,
-      Math.min(nvHct.chroma / 6, 8)
-    )
-  };
   function buildJsonSchemes() {
-    function extractSchemeColors(scheme2, backgroundScheme) {
+    function extractSchemeColors(scheme2) {
       const colors = {};
       for (const tokenName of FIXTURE_TOKEN_ORDER) {
         const dynamicColor = MaterialDynamicColors[tokenName];
-        const useScheme = backgroundScheme && (tokenName === "background" || tokenName === "onBackground") ? backgroundScheme : scheme2;
         colors[tokenName] = hexFromArgb4(
-          dynamicColor.getArgb(useScheme)
+          dynamicColor.getArgb(scheme2)
         ).toUpperCase();
       }
       return colors;
@@ -3849,26 +3803,18 @@ function buildJson(ctx) {
         neutralVariantPalette: nvPalette || baseScheme.neutralVariantPalette
       });
       if (errPalette) composedScheme.errorPalette = errPalette;
-      jsonSchemes[name] = extractSchemeColors(composedScheme, baseScheme);
+      jsonSchemes[name] = extractSchemeColors(composedScheme);
     }
     return jsonSchemes;
   }
-  function rawPalettesToJson() {
+  function refPalettesToJson() {
     const jsonPalettes = {};
-    const RAW_PALETTE_NAMES = [
-      "primary",
-      "secondary",
-      "tertiary",
-      "neutral",
-      "neutral-variant"
-    ];
-    for (const name of RAW_PALETTE_NAMES) {
-      const palette = rawPalettes[name];
-      const tones = {};
-      for (const tone of MTB_TONES) {
-        tones[tone.toString()] = hexFromArgb4(palette.tone(tone)).toUpperCase();
+    for (const [name, tones] of Object.entries(refPalettes)) {
+      const jsonTones = {};
+      for (const { tone, argb } of tones) {
+        jsonTones[tone.toString()] = hexFromArgb4(argb).toUpperCase();
       }
-      jsonPalettes[name] = tones;
+      jsonPalettes[name] = jsonTones;
     }
     return jsonPalettes;
   }
@@ -3895,14 +3841,14 @@ function buildJson(ctx) {
     name: c.name,
     color: c.hex.toUpperCase(),
     description: "",
-    harmonized: c.blend ?? DEFAULT_BLEND
+    harmonized: c.blend
   }));
   return {
     seed,
     coreColors,
     extendedColors,
     schemes: buildJsonSchemes(),
-    palettes: rawPalettesToJson()
+    palettes: refPalettesToJson()
   };
 }
 
@@ -4242,51 +4188,53 @@ function getPalette(palettes, colorName) {
   }
   return palette;
 }
-function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
-  const baseVars = toRecord(tokenNames, (tokenName) => {
-    const dynamicColor = MaterialDynamicColors2[tokenName];
-    const argb = dynamicColor.getArgb(scheme);
-    return [tokenName, argb];
-  });
-  const customVars = {};
-  customColors.forEach((color) => {
-    const colorname = color.name;
-    const getPaletteForColor = () => getPalette(colorPalettes, colorname);
-    const colorDynamicColor = new DynamicColor(
+function buildCustomColorRoles(colorname, palette) {
+  const getPaletteForColor = () => palette;
+  return {
+    [colorname]: new DynamicColor(
       colorname,
       getPaletteForColor,
       (s) => s.isDark ? 80 : 40,
       // Main color: lighter in dark mode, darker in light mode
       true
       // background
-    );
-    const onColorDynamicColor = new DynamicColor(
+    ),
+    [`on${upperFirst2(colorname)}`]: new DynamicColor(
       `on${upperFirst2(colorname)}`,
       getPaletteForColor,
       (s) => s.isDark ? 20 : 100,
       // Text on main color: high contrast (dark on light, light on dark)
       false
-    );
-    const containerDynamicColor = new DynamicColor(
+    ),
+    [`${colorname}Container`]: new DynamicColor(
       `${colorname}Container`,
       getPaletteForColor,
       (s) => s.isDark ? 30 : 90,
       // Container: subtle variant (darker in dark mode, lighter in light mode)
       true
       // background
-    );
-    const onContainerDynamicColor = new DynamicColor(
+    ),
+    [`on${upperFirst2(colorname)}Container`]: new DynamicColor(
       `on${upperFirst2(colorname)}Container`,
       getPaletteForColor,
       (s) => s.isDark ? 90 : 30,
       // Text on container: high contrast against container background
       false
-    );
-    customVars[colorname] = colorDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst2(colorname)}`] = onColorDynamicColor.getArgb(scheme);
-    customVars[`${colorname}Container`] = containerDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst2(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
+    )
+  };
+}
+function mergeBaseAndCustomColors(scheme, customColorRoles) {
+  const baseVars = toRecord(tokenNames, (tokenName) => {
+    const dynamicColor = MaterialDynamicColors2[tokenName];
+    const argb = dynamicColor.getArgb(scheme);
+    return [tokenName, argb];
   });
+  const customVars = {};
+  for (const roles of Object.values(customColorRoles)) {
+    for (const [tokenName, dynamicColor] of Object.entries(roles)) {
+      customVars[tokenName] = dynamicColor.getArgb(scheme);
+    }
+  }
   return { ...baseVars, ...customVars };
 }
 function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization) {
@@ -4305,7 +4253,17 @@ function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonizatio
   } else {
     targetChroma = baseScheme.primaryPalette.chroma;
   }
-  return TonalPalette2.fromHueAndChroma(hct.hue, targetChroma);
+  return TonalPalette.fromHueAndChroma(hct.hue, targetChroma);
+}
+function buildRefPalettes(allPalettes) {
+  const refPalettes = {};
+  for (const [name, palette] of Object.entries(allPalettes)) {
+    refPalettes[kebabCase4(name)] = STANDARD_TONES.map((tone) => ({
+      tone,
+      argb: palette.tone(tone)
+    }));
+  }
+  return refPalettes;
 }
 function buildTokenToPaletteMap(schemePalettes, scheme) {
   const result = {};
@@ -4334,7 +4292,7 @@ function builder(hexSource, {
   neutral,
   neutralVariant,
   error,
-  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
+  customColors: customColorInputs = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
   const cores = {
@@ -4345,9 +4303,12 @@ function builder(hexSource, {
     neutral: optionalHex(neutral),
     neutralVariant: optionalHex(neutralVariant)
   };
-  assertHexInputs(hexSource, cores, hexCustomColors);
+  assertHexInputs(hexSource, cores, customColorInputs);
+  const hexCustomColors = customColorInputs.map((c) => ({
+    ...c,
+    blend: c.blend ?? DEFAULT_BLEND
+  }));
   const sourceArgb = argbFromHex2(hexSource);
-  const sourceHct = Hct2.fromInt(sourceArgb);
   const effectiveSource = cores.primary || hexSource;
   const effectiveSourceArgb = argbFromHex2(effectiveSource);
   const effectiveSourceForHarmonization = cores.primary ? argbFromHex2(cores.primary) : sourceArgb;
@@ -4438,18 +4399,21 @@ function builder(hexSource, {
   };
   const customColors = definedColors.filter((c) => !c.core).map((c) => ({
     name: c.name,
-    blend: c.blend ?? DEFAULT_BLEND,
     value: argbFromHex2(c.hex)
   }));
+  const customColorRoles = Object.fromEntries(
+    customColors.map((color) => [
+      color.name,
+      buildCustomColorRoles(color.name, getPalette(colorPalettes, color.name))
+    ])
+  );
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
-    customColors,
-    colorPalettes
+    customColorRoles
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
-    customColors,
-    colorPalettes
+    customColorRoles
   );
   const schemePalettes = [
     ["primary", lightScheme.primaryPalette],
@@ -4460,6 +4424,7 @@ function builder(hexSource, {
     ["neutral-variant", lightScheme.neutralVariantPalette]
   ];
   const tokenToPalette = buildTokenToPaletteMap(schemePalettes, lightScheme);
+  const refPalettes = buildRefPalettes(allPalettes);
   const allPaletteNamesKebab = new Set(Object.keys(allPalettes).map(kebabCase4));
   const ctx = {
     hexSource,
@@ -4472,11 +4437,11 @@ function builder(hexSource, {
     neutralVariant,
     error,
     hexCustomColors,
-    sourceHct,
     effectiveSourceArgb,
     primaryHct,
     SchemeClass,
     allPalettes,
+    refPalettes,
     mergedColorsLight,
     mergedColorsDark,
     tokenToPalette,
@@ -4494,7 +4459,8 @@ function builder(hexSource, {
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
-    allPalettes
+    allPalettes,
+    customColorRoles
   };
 }
 

package/dist/tailwind-plugin.d.ts

@@ -38,8 +38,8 @@ declare function mtbColors({ customColors, prefix, }?: {
     prefix?: string;
 }): Record<string, string>;
 /**
- * Tailwind v4 plugin — the `@theme inline` block of
- * `material-theme-builder/tailwind.css`, minus the copy-paste.
+ * Tailwind v4 plugin — the whole M3 vocabulary as theme colors, from one line
+ * of CSS.
  *
  * ```css
  * @import "tailwindcss";
@@ -49,22 +49,22 @@ declare function mtbColors({ customColors, prefix, }?: {
  * ```
  *
  * Colors declared through a plugin's `theme` are inlined by Tailwind — the
- * utility resolves straight to `var(--md-sys-color-primary)` and no
- * `--color-*` indirection is emitted — which is what the stylesheet's
- * `@theme inline` was there to get. That indirection is not cosmetic: a
+ * utility resolves straight to `var(--md-sys-color-primary)`, with no
+ * `--color-*` in between. That indirection is not cosmetic: a
  * `--color-primary: var(--md-sys-color-primary)` declared on `:root` resolves
  * once, against `:root`, so a nested `<Mtb>` re-declaring the M3 properties
  * would not reach the utilities.
  *
- * Unlike the stylesheet, custom colors need no hand-written block: name them
- * in the options and their four scheme roles plus eleven shades come with them.
+ * Custom colors need no hand-written block either: name them in the options
+ * and their four scheme roles plus eleven shades come with them — which is
+ * what no shipped stylesheet, knowing nothing of your config, could do. That
+ * is why this replaced the `tailwind.css` the package used to ship.
  *
- * One thing the stylesheet does that this cannot: theme values a plugin
- * contributes are defaults, so an `@theme` block in the consumer's own CSS
- * wins over them whatever the order — where a later `@import` of the
- * stylesheet would have won. Only colliding names are affected, and against
- * shadcn there are exactly three (`background`, `primary`, `secondary`), which
- * a three-line `@theme inline` of one's own hands back. See the README.
+ * The one thing to know: theme values a plugin contributes are defaults, so an
+ * `@theme` block in the consumer's own CSS wins over them whatever the order.
+ * Only colliding names are affected, and against shadcn there are exactly
+ * three — `background`, `primary`, `secondary` — which `shadcn.css` points
+ * back at M3 anyway. See the README.
  *
  * @see https://tailwindcss.com/docs/functions-and-directives#plugin-directive
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-theme-builder",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "m3 color-system for JS/TS ecosystem",
   "keywords": [
     "react",
@@ -21,7 +21,6 @@
       "import": "./dist/tailwind-plugin.js",
       "default": "./dist/tailwind-plugin.js"
     },
-    "./tailwind.css": "./dist/tailwind.css",
     "./shadcn.css": "./dist/shadcn.css",
     "./registry-item.json": "./dist/registry-item.json"
   },

package/dist/tailwind.css

@@ -1,145 +0,0 @@
-/*
- * Generated by `scripts/generate.mjs` -- do not edit.
- *
- * Custom colors are not in here: they depend on your config, so they come from
- * the plugin instead.
- *
- *   @plugin "material-theme-builder/tailwind" {
- *     custom-colors: myCustomColor1, myCustomColor2;
- *   }
- */
-@theme inline {
-  --color-background: var(--md-sys-color-background);
-  --color-error: var(--md-sys-color-error);
-  --color-error-container: var(--md-sys-color-error-container);
-  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
-  --color-inverse-primary: var(--md-sys-color-inverse-primary);
-  --color-inverse-surface: var(--md-sys-color-inverse-surface);
-  --color-on-background: var(--md-sys-color-on-background);
-  --color-on-error: var(--md-sys-color-on-error);
-  --color-on-error-container: var(--md-sys-color-on-error-container);
-  --color-on-primary: var(--md-sys-color-on-primary);
-  --color-on-primary-container: var(--md-sys-color-on-primary-container);
-  --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
-  --color-on-primary-fixed-variant: var(
-    --md-sys-color-on-primary-fixed-variant
-  );
-  --color-on-secondary: var(--md-sys-color-on-secondary);
-  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
-  --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
-  --color-on-secondary-fixed-variant: var(
-    --md-sys-color-on-secondary-fixed-variant
-  );
-  --color-on-surface: var(--md-sys-color-on-surface);
-  --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
-  --color-on-tertiary: var(--md-sys-color-on-tertiary);
-  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
-  --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
-  --color-on-tertiary-fixed-variant: var(
-    --md-sys-color-on-tertiary-fixed-variant
-  );
-  --color-outline: var(--md-sys-color-outline);
-  --color-outline-variant: var(--md-sys-color-outline-variant);
-  --color-primary: var(--md-sys-color-primary);
-  --color-primary-container: var(--md-sys-color-primary-container);
-  --color-primary-fixed: var(--md-sys-color-primary-fixed);
-  --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
-  --color-scrim: var(--md-sys-color-scrim);
-  --color-secondary: var(--md-sys-color-secondary);
-  --color-secondary-container: var(--md-sys-color-secondary-container);
-  --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
-  --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
-  --color-shadow: var(--md-sys-color-shadow);
-  --color-surface: var(--md-sys-color-surface);
-  --color-surface-bright: var(--md-sys-color-surface-bright);
-  --color-surface-container: var(--md-sys-color-surface-container);
-  --color-surface-container-high: var(--md-sys-color-surface-container-high);
-  --color-surface-container-highest: var(
-    --md-sys-color-surface-container-highest
-  );
-  --color-surface-container-low: var(--md-sys-color-surface-container-low);
-  --color-surface-container-lowest: var(
-    --md-sys-color-surface-container-lowest
-  );
-  --color-surface-dim: var(--md-sys-color-surface-dim);
-  --color-surface-tint: var(--md-sys-color-surface-tint);
-  --color-surface-variant: var(--md-sys-color-surface-variant);
-  --color-tertiary: var(--md-sys-color-tertiary);
-  --color-tertiary-container: var(--md-sys-color-tertiary-container);
-  --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
-  --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
-
-  /* Shades */
-
-  --color-primary-50: var(--md-ref-palette-primary-95);
-  --color-primary-100: var(--md-ref-palette-primary-90);
-  --color-primary-200: var(--md-ref-palette-primary-80);
-  --color-primary-300: var(--md-ref-palette-primary-70);
-  --color-primary-400: var(--md-ref-palette-primary-60);
-  --color-primary-500: var(--md-ref-palette-primary-50);
-  --color-primary-600: var(--md-ref-palette-primary-40);
-  --color-primary-700: var(--md-ref-palette-primary-30);
-  --color-primary-800: var(--md-ref-palette-primary-20);
-  --color-primary-900: var(--md-ref-palette-primary-10);
-  --color-primary-950: var(--md-ref-palette-primary-5);
-
-  --color-secondary-50: var(--md-ref-palette-secondary-95);
-  --color-secondary-100: var(--md-ref-palette-secondary-90);
-  --color-secondary-200: var(--md-ref-palette-secondary-80);
-  --color-secondary-300: var(--md-ref-palette-secondary-70);
-  --color-secondary-400: var(--md-ref-palette-secondary-60);
-  --color-secondary-500: var(--md-ref-palette-secondary-50);
-  --color-secondary-600: var(--md-ref-palette-secondary-40);
-  --color-secondary-700: var(--md-ref-palette-secondary-30);
-  --color-secondary-800: var(--md-ref-palette-secondary-20);
-  --color-secondary-900: var(--md-ref-palette-secondary-10);
-  --color-secondary-950: var(--md-ref-palette-secondary-5);
-
-  --color-tertiary-50: var(--md-ref-palette-tertiary-95);
-  --color-tertiary-100: var(--md-ref-palette-tertiary-90);
-  --color-tertiary-200: var(--md-ref-palette-tertiary-80);
-  --color-tertiary-300: var(--md-ref-palette-tertiary-70);
-  --color-tertiary-400: var(--md-ref-palette-tertiary-60);
-  --color-tertiary-500: var(--md-ref-palette-tertiary-50);
-  --color-tertiary-600: var(--md-ref-palette-tertiary-40);
-  --color-tertiary-700: var(--md-ref-palette-tertiary-30);
-  --color-tertiary-800: var(--md-ref-palette-tertiary-20);
-  --color-tertiary-900: var(--md-ref-palette-tertiary-10);
-  --color-tertiary-950: var(--md-ref-palette-tertiary-5);
-
-  --color-error-50: var(--md-ref-palette-error-95);
-  --color-error-100: var(--md-ref-palette-error-90);
-  --color-error-200: var(--md-ref-palette-error-80);
-  --color-error-300: var(--md-ref-palette-error-70);
-  --color-error-400: var(--md-ref-palette-error-60);
-  --color-error-500: var(--md-ref-palette-error-50);
-  --color-error-600: var(--md-ref-palette-error-40);
-  --color-error-700: var(--md-ref-palette-error-30);
-  --color-error-800: var(--md-ref-palette-error-20);
-  --color-error-900: var(--md-ref-palette-error-10);
-  --color-error-950: var(--md-ref-palette-error-5);
-
-  --color-neutral-50: var(--md-ref-palette-neutral-95);
-  --color-neutral-100: var(--md-ref-palette-neutral-90);
-  --color-neutral-200: var(--md-ref-palette-neutral-80);
-  --color-neutral-300: var(--md-ref-palette-neutral-70);
-  --color-neutral-400: var(--md-ref-palette-neutral-60);
-  --color-neutral-500: var(--md-ref-palette-neutral-50);
-  --color-neutral-600: var(--md-ref-palette-neutral-40);
-  --color-neutral-700: var(--md-ref-palette-neutral-30);
-  --color-neutral-800: var(--md-ref-palette-neutral-20);
-  --color-neutral-900: var(--md-ref-palette-neutral-10);
-  --color-neutral-950: var(--md-ref-palette-neutral-5);
-
-  --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
-  --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
-  --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
-  --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
-  --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
-  --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
-  --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
-  --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
-  --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
-  --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
-  --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
-}