react-mcu 1.0.10 → 1.1.1

package/README.md

@@ -2,7 +2,8 @@
 [![](https://img.shields.io/badge/chromatic-171c23.svg?logo=chromatic)](https://www.chromatic.com/library?appId=695eb517cb602e59b4cc045c&branch=main)
 [![](https://img.shields.io/badge/storybook-171c23.svg?logo=storybook)](https://main--695eb517cb602e59b4cc045c.chromatic.com)
 
-[Material Design colors](https://m3.material.io/styles/color/system/overview) for React.
+[Material Design colors](https://m3.material.io/styles/color/system/overview)
+for React.
 
 It injects `--mcu-*` CSS variables into the page.
 
@@ -69,10 +70,9 @@ return (
 
 ## Tailwind
 
-Compatible through
-[theme variables](https://tailwindcss.com/docs/theme):
+Compatible through [theme variables](https://tailwindcss.com/docs/theme):
 
-https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L3-L76
+https://github.com/abernier/react-mcu/blob/688c789e322ed3858b51389b33eb7ea342bba81e/src/tailwind.css#L3-L186
 
 Or simply:
 
@@ -83,13 +83,14 @@ Or simply:
 > [!IMPORTANT]
 >
 > Do not forget to manually add your custom colors, as in:
-> https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L52-L75
+> https://github.com/abernier/react-mcu/blob/688c789e322ed3858b51389b33eb7ea342bba81e/src/tailwind.css#L126-L185
 
 ## shadcn
 
 Pre-requisites:
 
-- You should use [`tailwind.cssVariables`](https://ui.shadcn.com/docs/theming#css-variables)
+- You should use
+  [`tailwind.cssVariables`](https://ui.shadcn.com/docs/theming#css-variables)
 
 Simply override/remap
 [shadcn's CSS variables](https://ui.shadcn.com/docs/theming#list-of-variables):

package/dist/index.d.ts

@@ -28,9 +28,22 @@ type McuConfig = {
      * When true, stays true to input colors without harmonization.
      * When false (default), colors may be adjusted for better harmonization.
      * Corresponds to "Color match - Stay true to my color inputs" in Material Theme Builder.
+     *
+     * @default false
+     * @deprecated Not yet implemented. This prop is currently ignored.
      */
     colorMatch?: boolean;
-    /** Array of custom colors to include in the generated palette */
+    /**
+     * Array of custom colors to include in the generated palette.
+     *
+     * @example
+     * ```ts
+     * customColors={[
+     *   { name: "brand", hex: "#FF5733", blend: true },
+     *   { name: "success", hex: "#28A745", blend: false }
+     * ]}
+     * ```
+     */
     customColors?: HexCustomColor[];
 };
 declare const schemesMap: {

package/dist/index.js

@@ -3,8 +3,8 @@
 // src/Mcu.tsx
 import {
   argbFromHex,
-  CorePalette,
-  customColor,
+  Blend,
+  DynamicColor,
   DynamicScheme,
   Hct,
   hexFromArgb as hexFromArgb2,
@@ -15,7 +15,8 @@ import {
   SchemeMonochrome,
   SchemeNeutral,
   SchemeTonalSpot,
-  SchemeVibrant
+  SchemeVibrant,
+  TonalPalette
 } from "@material/material-color-utilities";
 import { kebabCase, upperFirst } from "lodash-es";
 import { useMemo as useMemo2 } from "react";
@@ -111,6 +112,26 @@ var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
 var DEFAULT_COLOR_MATCH = false;
 var DEFAULT_CUSTOM_COLORS = [];
+var STANDARD_TONES = [
+  0,
+  5,
+  10,
+  15,
+  20,
+  25,
+  30,
+  35,
+  40,
+  50,
+  60,
+  70,
+  80,
+  90,
+  95,
+  98,
+  99,
+  100
+];
 var Variant = {
   MONOCHROME: 0,
   NEUTRAL: 1,
@@ -249,22 +270,56 @@ function toRecord(arr, getEntry) {
     {}
   );
 }
-function mergeBaseAndCustomColors(scheme, customColors, sourceArgb) {
+function getPalette(palettes, colorName) {
+  const palette = palettes[colorName];
+  if (!palette) {
+    throw new Error(
+      `Custom color palette not found for '${colorName}'. This is likely a bug in the implementation.`
+    );
+  }
+  return palette;
+}
+function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
     const dynamicColor = MaterialDynamicColors[tokenName];
     const argb = dynamicColor.getArgb(scheme);
     return [tokenName, argb];
   });
   const customVars = {};
-  const isDark = scheme.isDark;
   customColors.forEach((color) => {
-    const customColorGroup = customColor(sourceArgb, color);
-    const colorGroup = isDark ? customColorGroup.dark : customColorGroup.light;
     const colorname = color.name;
-    customVars[colorname] = colorGroup.color;
-    customVars[`on${upperFirst(colorname)}`] = colorGroup.onColor;
-    customVars[`${colorname}Container`] = colorGroup.colorContainer;
-    customVars[`on${upperFirst(colorname)}Container`] = colorGroup.onColorContainer;
+    const colorDynamicColor = new DynamicColor(
+      colorname,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 80 : 40,
+      // Same as primary
+      false
+    );
+    const onColorDynamicColor = new DynamicColor(
+      `on${upperFirst(colorname)}`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 20 : 100,
+      // Same as onPrimary
+      false
+    );
+    const containerDynamicColor = new DynamicColor(
+      `${colorname}Container`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 30 : 90,
+      // Same as primaryContainer
+      false
+    );
+    const onContainerDynamicColor = new DynamicColor(
+      `on${upperFirst(colorname)}Container`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 90 : 30,
+      // Same as onPrimaryContainer
+      false
+    );
+    customVars[colorname] = colorDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst(colorname)}`] = onColorDynamicColor.getArgb(scheme);
+    customVars[`${colorname}Container`] = containerDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
   });
   return { ...baseVars, ...customVars };
 }
@@ -273,6 +328,30 @@ var cssVar = (colorName, colorValue) => {
   const value = hexFromArgb2(colorValue);
   return `${name}:${value};`;
 };
+var generateTonalPaletteVars = (paletteName, palette) => {
+  return STANDARD_TONES.map((tone) => {
+    const color = palette.tone(tone);
+    return cssVar(`${paletteName}-${tone}`, color);
+  }).join(" ");
+};
+function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization) {
+  const colorArgb = argbFromHex(colorDef.hex);
+  const harmonizedArgb = colorDef.blend ? Blend.harmonize(colorArgb, effectiveSourceForHarmonization) : colorArgb;
+  const hct = Hct.fromInt(harmonizedArgb);
+  let targetChroma;
+  if (colorDef.core && colorDef.chromaSource) {
+    if (colorDef.chromaSource === "neutral") {
+      targetChroma = baseScheme.neutralPalette.chroma;
+    } else if (colorDef.chromaSource === "neutralVariant") {
+      targetChroma = baseScheme.neutralVariantPalette.chroma;
+    } else {
+      targetChroma = baseScheme.primaryPalette.chroma;
+    }
+  } else {
+    targetChroma = baseScheme.primaryPalette.chroma;
+  }
+  return TonalPalette.fromHueAndChroma(hct.hue, targetChroma);
+}
 var toCssVars = (mergedColors) => {
   return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
 };
@@ -289,61 +368,122 @@ function generateCss({
   colorMatch = DEFAULT_COLOR_MATCH,
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
 }) {
-  const hasCoreColors = primary ?? secondary ?? tertiary ?? neutral ?? neutralVariant ?? error;
-  console.log("MCU generateCss", { hasCoreColors });
   const sourceArgb = argbFromHex(hexSource);
+  const effectiveSource = primary || hexSource;
+  const effectiveSourceArgb = argbFromHex(effectiveSource);
+  const effectiveSourceForHarmonization = primary ? argbFromHex(primary) : sourceArgb;
+  const SchemeClass = schemesMap[scheme];
+  const primaryHct = Hct.fromInt(effectiveSourceArgb);
+  const baseScheme = new SchemeClass(primaryHct, false, contrast);
+  const allColors = [
+    // Core colors (hex may be undefined)
+    {
+      name: "primary",
+      hex: primary,
+      core: true,
+      chromaSource: "primary"
+    },
+    {
+      name: "secondary",
+      hex: secondary,
+      core: true,
+      chromaSource: "primary"
+    },
+    {
+      name: "tertiary",
+      hex: tertiary,
+      core: true,
+      chromaSource: "primary"
+    },
+    { name: "error", hex: error, core: true, chromaSource: "primary" },
+    {
+      name: "neutral",
+      hex: neutral,
+      core: true,
+      chromaSource: "neutral"
+    },
+    {
+      name: "neutralVariant",
+      hex: neutralVariant,
+      core: true,
+      chromaSource: "neutralVariant"
+    },
+    //
+    // Custom colors
+    //
+    ...hexCustomColors.map((c) => ({
+      name: c.name,
+      hex: c.hex,
+      blend: c.blend,
+      core: false
+    }))
+  ];
+  const definedColors = allColors.filter(
+    (c) => c.hex !== void 0
+  );
+  const colorPalettes = Object.fromEntries(
+    definedColors.map((colorDef) => [
+      colorDef.name,
+      createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization)
+    ])
+  );
   const createSchemes = (baseConfig) => [
     new DynamicScheme({ ...baseConfig, isDark: false }),
     new DynamicScheme({ ...baseConfig, isDark: true })
   ];
-  let lightScheme;
-  let darkScheme;
-  if (hasCoreColors) {
-    const coreColorsArgb = {
-      primary: primary ? argbFromHex(primary) : sourceArgb,
-      secondary: secondary ? argbFromHex(secondary) : void 0,
-      tertiary: tertiary ? argbFromHex(tertiary) : void 0,
-      neutral: neutral ? argbFromHex(neutral) : void 0,
-      neutralVariant: neutralVariant ? argbFromHex(neutralVariant) : void 0,
-      error: error ? argbFromHex(error) : void 0
-    };
-    const corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
-    const variant = schemeToVariant[scheme];
-    [lightScheme, darkScheme] = createSchemes({
-      sourceColorArgb: sourceArgb,
-      variant,
-      contrastLevel: contrast,
-      primaryPalette: corePalette.a1,
-      secondaryPalette: corePalette.a2,
-      tertiaryPalette: corePalette.a3,
-      neutralPalette: corePalette.n1,
-      neutralVariantPalette: corePalette.n2
-    });
-  } else {
-    const SchemeClass = schemesMap[scheme];
-    const hct = Hct.fromInt(sourceArgb);
-    lightScheme = new SchemeClass(hct, false, contrast);
-    darkScheme = new SchemeClass(hct, true, contrast);
+  const variant = schemeToVariant[scheme];
+  const [lightScheme, darkScheme] = createSchemes({
+    sourceColorArgb: effectiveSourceArgb,
+    variant,
+    contrastLevel: contrast,
+    primaryPalette: colorPalettes["primary"] || baseScheme.primaryPalette,
+    secondaryPalette: colorPalettes["secondary"] || baseScheme.secondaryPalette,
+    tertiaryPalette: colorPalettes["tertiary"] || baseScheme.tertiaryPalette,
+    neutralPalette: colorPalettes["neutral"] || baseScheme.neutralPalette,
+    neutralVariantPalette: colorPalettes["neutralVariant"] || baseScheme.neutralVariantPalette
+  });
+  const errorPalette = colorPalettes["error"];
+  if (errorPalette) {
+    lightScheme.errorPalette = errorPalette;
+    darkScheme.errorPalette = errorPalette;
   }
-  const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
-    ...rest,
-    value: argbFromHex(hex)
+  const customColors = definedColors.filter((c) => !c.core).map((c) => ({
+    name: c.name,
+    blend: c.blend ?? false,
+    value: argbFromHex(c.hex)
   }));
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
     customColors,
-    sourceArgb
+    colorPalettes
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
     customColors,
-    sourceArgb
+    colorPalettes
   );
   const lightVars = toCssVars(mergedColorsLight);
   const darkVars = toCssVars(mergedColorsDark);
+  const allTonalVars = [
+    // Core colors from the scheme
+    generateTonalPaletteVars("primary", lightScheme.primaryPalette),
+    generateTonalPaletteVars("secondary", lightScheme.secondaryPalette),
+    generateTonalPaletteVars("tertiary", lightScheme.tertiaryPalette),
+    generateTonalPaletteVars("error", lightScheme.errorPalette),
+    generateTonalPaletteVars("neutral", lightScheme.neutralPalette),
+    generateTonalPaletteVars(
+      "neutral-variant",
+      lightScheme.neutralVariantPalette
+    ),
+    // Custom colors from our unified palette map
+    ...customColors.map((customColorObj) => {
+      const palette = getPalette(colorPalettes, customColorObj.name);
+      return generateTonalPaletteVars(kebabCase(customColorObj.name), palette);
+    })
+  ].join(" ");
   return {
     css: `
-:root { ${lightVars} }
+:root { ${lightVars} ${allTonalVars} }
 .dark { ${darkVars} }
 `,
     mergedColorsLight,

package/dist/tailwind.css

@@ -49,6 +49,80 @@
   --color-scrim: var(--mcu-scrim);
   --color-shadow: var(--mcu-shadow);
 
+  /* Shades */
+
+  --color-primary-50: var(--mcu-primary-95);
+  --color-primary-100: var(--mcu-primary-90);
+  --color-primary-200: var(--mcu-primary-80);
+  --color-primary-300: var(--mcu-primary-70);
+  --color-primary-400: var(--mcu-primary-60);
+  --color-primary-500: var(--mcu-primary-50);
+  --color-primary-600: var(--mcu-primary-40);
+  --color-primary-700: var(--mcu-primary-30);
+  --color-primary-800: var(--mcu-primary-20);
+  --color-primary-900: var(--mcu-primary-10);
+  --color-primary-950: var(--mcu-primary-5);
+
+  --color-secondary-50: var(--mcu-secondary-95);
+  --color-secondary-100: var(--mcu-secondary-90);
+  --color-secondary-200: var(--mcu-secondary-80);
+  --color-secondary-300: var(--mcu-secondary-70);
+  --color-secondary-400: var(--mcu-secondary-60);
+  --color-secondary-500: var(--mcu-secondary-50);
+  --color-secondary-600: var(--mcu-secondary-40);
+  --color-secondary-700: var(--mcu-secondary-30);
+  --color-secondary-800: var(--mcu-secondary-20);
+  --color-secondary-900: var(--mcu-secondary-10);
+  --color-secondary-950: var(--mcu-secondary-5);
+
+  --color-tertiary-50: var(--mcu-tertiary-95);
+  --color-tertiary-100: var(--mcu-tertiary-90);
+  --color-tertiary-200: var(--mcu-tertiary-80);
+  --color-tertiary-300: var(--mcu-tertiary-70);
+  --color-tertiary-400: var(--mcu-tertiary-60);
+  --color-tertiary-500: var(--mcu-tertiary-50);
+  --color-tertiary-600: var(--mcu-tertiary-40);
+  --color-tertiary-700: var(--mcu-tertiary-30);
+  --color-tertiary-800: var(--mcu-tertiary-20);
+  --color-tertiary-900: var(--mcu-tertiary-10);
+  --color-tertiary-950: var(--mcu-tertiary-5);
+
+  --color-error-50: var(--mcu-error-95);
+  --color-error-100: var(--mcu-error-90);
+  --color-error-200: var(--mcu-error-80);
+  --color-error-300: var(--mcu-error-70);
+  --color-error-400: var(--mcu-error-60);
+  --color-error-500: var(--mcu-error-50);
+  --color-error-600: var(--mcu-error-40);
+  --color-error-700: var(--mcu-error-30);
+  --color-error-800: var(--mcu-error-20);
+  --color-error-900: var(--mcu-error-10);
+  --color-error-950: var(--mcu-error-5);
+
+  --color-neutral-50: var(--mcu-neutral-95);
+  --color-neutral-100: var(--mcu-neutral-90);
+  --color-neutral-200: var(--mcu-neutral-80);
+  --color-neutral-300: var(--mcu-neutral-70);
+  --color-neutral-400: var(--mcu-neutral-60);
+  --color-neutral-500: var(--mcu-neutral-50);
+  --color-neutral-600: var(--mcu-neutral-40);
+  --color-neutral-700: var(--mcu-neutral-30);
+  --color-neutral-800: var(--mcu-neutral-20);
+  --color-neutral-900: var(--mcu-neutral-10);
+  --color-neutral-950: var(--mcu-neutral-5);
+
+  --color-neutral-variant-50: var(--mcu-neutral-variant-95);
+  --color-neutral-variant-100: var(--mcu-neutral-variant-90);
+  --color-neutral-variant-200: var(--mcu-neutral-variant-80);
+  --color-neutral-variant-300: var(--mcu-neutral-variant-70);
+  --color-neutral-variant-400: var(--mcu-neutral-variant-60);
+  --color-neutral-variant-500: var(--mcu-neutral-variant-50);
+  --color-neutral-variant-600: var(--mcu-neutral-variant-40);
+  --color-neutral-variant-700: var(--mcu-neutral-variant-30);
+  --color-neutral-variant-800: var(--mcu-neutral-variant-20);
+  --color-neutral-variant-900: var(--mcu-neutral-variant-10);
+  --color-neutral-variant-950: var(--mcu-neutral-variant-5);
+
   /*
    * Custom colors
    */
@@ -59,6 +133,18 @@
   --color-on-myCustomColor1-container: var(
     --mcu-on-my-custom-color-1-container
   );
+  /* Shades */
+  --color-myCustomColor1-50: var(--mcu-my-custom-color-1-95);
+  --color-myCustomColor1-100: var(--mcu-my-custom-color-1-90);
+  --color-myCustomColor1-200: var(--mcu-my-custom-color-1-80);
+  --color-myCustomColor1-300: var(--mcu-my-custom-color-1-70);
+  --color-myCustomColor1-400: var(--mcu-my-custom-color-1-60);
+  --color-myCustomColor1-500: var(--mcu-my-custom-color-1-50);
+  --color-myCustomColor1-600: var(--mcu-my-custom-color-1-40);
+  --color-myCustomColor1-700: var(--mcu-my-custom-color-1-30);
+  --color-myCustomColor1-800: var(--mcu-my-custom-color-1-20);
+  --color-myCustomColor1-900: var(--mcu-my-custom-color-1-10);
+  --color-myCustomColor1-950: var(--mcu-my-custom-color-1-5);
 
   --color-myCustomColor2: var(--mcu-my-custom-color-2);
   --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
@@ -66,11 +152,16 @@
   --color-on-myCustomColor2-container: var(
     --mcu-on-my-custom-color-2-container
   );
-
-  --color-myCustomColor3: var(--mcu-my-custom-color-3);
-  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
-  --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
-  --color-on-myCustomColor3-container: var(
-    --mcu-on-my-custom-color-3-container
-  );
+  /* Shades */
+  --color-myCustomColor2-50: var(--mcu-my-custom-color-2-95);
+  --color-myCustomColor2-100: var(--mcu-my-custom-color-2-90);
+  --color-myCustomColor2-200: var(--mcu-my-custom-color-2-80);
+  --color-myCustomColor2-300: var(--mcu-my-custom-color-2-70);
+  --color-myCustomColor2-400: var(--mcu-my-custom-color-2-60);
+  --color-myCustomColor2-500: var(--mcu-my-custom-color-2-50);
+  --color-myCustomColor2-600: var(--mcu-my-custom-color-2-40);
+  --color-myCustomColor2-700: var(--mcu-my-custom-color-2-30);
+  --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
+  --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
+  --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "description": "A React component library",
   "keywords": [
     "react",
@@ -66,14 +66,14 @@
   },
   "scripts": {
     "build": "tsup",
-    "ci": "pnpm run build && pnpm run check-format && pnpm run check-exports && pnpm run lint && pnpm run test",
-    "lint": "tsc",
+    "lgtm": "pnpm run build && pnpm run check-format && pnpm run check-exports && pnpm run typecheck && pnpm run test",
+    "typecheck": "tsc",
     "test": "vitest run",
     "format": "prettier --write .",
     "check-format": "prettier --check .",
     "check-exports": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution",
     "release": "pnpm run build && changeset publish",
-    "local-release": "pnpm run ci && changeset version && changeset publish",
+    "local-release": "pnpm run lgtm && changeset version && changeset publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",

package/src/tailwind.css

@@ -49,6 +49,80 @@
   --color-scrim: var(--mcu-scrim);
   --color-shadow: var(--mcu-shadow);
 
+  /* Shades */
+
+  --color-primary-50: var(--mcu-primary-95);
+  --color-primary-100: var(--mcu-primary-90);
+  --color-primary-200: var(--mcu-primary-80);
+  --color-primary-300: var(--mcu-primary-70);
+  --color-primary-400: var(--mcu-primary-60);
+  --color-primary-500: var(--mcu-primary-50);
+  --color-primary-600: var(--mcu-primary-40);
+  --color-primary-700: var(--mcu-primary-30);
+  --color-primary-800: var(--mcu-primary-20);
+  --color-primary-900: var(--mcu-primary-10);
+  --color-primary-950: var(--mcu-primary-5);
+
+  --color-secondary-50: var(--mcu-secondary-95);
+  --color-secondary-100: var(--mcu-secondary-90);
+  --color-secondary-200: var(--mcu-secondary-80);
+  --color-secondary-300: var(--mcu-secondary-70);
+  --color-secondary-400: var(--mcu-secondary-60);
+  --color-secondary-500: var(--mcu-secondary-50);
+  --color-secondary-600: var(--mcu-secondary-40);
+  --color-secondary-700: var(--mcu-secondary-30);
+  --color-secondary-800: var(--mcu-secondary-20);
+  --color-secondary-900: var(--mcu-secondary-10);
+  --color-secondary-950: var(--mcu-secondary-5);
+
+  --color-tertiary-50: var(--mcu-tertiary-95);
+  --color-tertiary-100: var(--mcu-tertiary-90);
+  --color-tertiary-200: var(--mcu-tertiary-80);
+  --color-tertiary-300: var(--mcu-tertiary-70);
+  --color-tertiary-400: var(--mcu-tertiary-60);
+  --color-tertiary-500: var(--mcu-tertiary-50);
+  --color-tertiary-600: var(--mcu-tertiary-40);
+  --color-tertiary-700: var(--mcu-tertiary-30);
+  --color-tertiary-800: var(--mcu-tertiary-20);
+  --color-tertiary-900: var(--mcu-tertiary-10);
+  --color-tertiary-950: var(--mcu-tertiary-5);
+
+  --color-error-50: var(--mcu-error-95);
+  --color-error-100: var(--mcu-error-90);
+  --color-error-200: var(--mcu-error-80);
+  --color-error-300: var(--mcu-error-70);
+  --color-error-400: var(--mcu-error-60);
+  --color-error-500: var(--mcu-error-50);
+  --color-error-600: var(--mcu-error-40);
+  --color-error-700: var(--mcu-error-30);
+  --color-error-800: var(--mcu-error-20);
+  --color-error-900: var(--mcu-error-10);
+  --color-error-950: var(--mcu-error-5);
+
+  --color-neutral-50: var(--mcu-neutral-95);
+  --color-neutral-100: var(--mcu-neutral-90);
+  --color-neutral-200: var(--mcu-neutral-80);
+  --color-neutral-300: var(--mcu-neutral-70);
+  --color-neutral-400: var(--mcu-neutral-60);
+  --color-neutral-500: var(--mcu-neutral-50);
+  --color-neutral-600: var(--mcu-neutral-40);
+  --color-neutral-700: var(--mcu-neutral-30);
+  --color-neutral-800: var(--mcu-neutral-20);
+  --color-neutral-900: var(--mcu-neutral-10);
+  --color-neutral-950: var(--mcu-neutral-5);
+
+  --color-neutral-variant-50: var(--mcu-neutral-variant-95);
+  --color-neutral-variant-100: var(--mcu-neutral-variant-90);
+  --color-neutral-variant-200: var(--mcu-neutral-variant-80);
+  --color-neutral-variant-300: var(--mcu-neutral-variant-70);
+  --color-neutral-variant-400: var(--mcu-neutral-variant-60);
+  --color-neutral-variant-500: var(--mcu-neutral-variant-50);
+  --color-neutral-variant-600: var(--mcu-neutral-variant-40);
+  --color-neutral-variant-700: var(--mcu-neutral-variant-30);
+  --color-neutral-variant-800: var(--mcu-neutral-variant-20);
+  --color-neutral-variant-900: var(--mcu-neutral-variant-10);
+  --color-neutral-variant-950: var(--mcu-neutral-variant-5);
+
   /*
    * Custom colors
    */
@@ -59,6 +133,18 @@
   --color-on-myCustomColor1-container: var(
     --mcu-on-my-custom-color-1-container
   );
+  /* Shades */
+  --color-myCustomColor1-50: var(--mcu-my-custom-color-1-95);
+  --color-myCustomColor1-100: var(--mcu-my-custom-color-1-90);
+  --color-myCustomColor1-200: var(--mcu-my-custom-color-1-80);
+  --color-myCustomColor1-300: var(--mcu-my-custom-color-1-70);
+  --color-myCustomColor1-400: var(--mcu-my-custom-color-1-60);
+  --color-myCustomColor1-500: var(--mcu-my-custom-color-1-50);
+  --color-myCustomColor1-600: var(--mcu-my-custom-color-1-40);
+  --color-myCustomColor1-700: var(--mcu-my-custom-color-1-30);
+  --color-myCustomColor1-800: var(--mcu-my-custom-color-1-20);
+  --color-myCustomColor1-900: var(--mcu-my-custom-color-1-10);
+  --color-myCustomColor1-950: var(--mcu-my-custom-color-1-5);
 
   --color-myCustomColor2: var(--mcu-my-custom-color-2);
   --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
@@ -66,11 +152,16 @@
   --color-on-myCustomColor2-container: var(
     --mcu-on-my-custom-color-2-container
   );
-
-  --color-myCustomColor3: var(--mcu-my-custom-color-3);
-  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
-  --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
-  --color-on-myCustomColor3-container: var(
-    --mcu-on-my-custom-color-3-container
-  );
+  /* Shades */
+  --color-myCustomColor2-50: var(--mcu-my-custom-color-2-95);
+  --color-myCustomColor2-100: var(--mcu-my-custom-color-2-90);
+  --color-myCustomColor2-200: var(--mcu-my-custom-color-2-80);
+  --color-myCustomColor2-300: var(--mcu-my-custom-color-2-70);
+  --color-myCustomColor2-400: var(--mcu-my-custom-color-2-60);
+  --color-myCustomColor2-500: var(--mcu-my-custom-color-2-50);
+  --color-myCustomColor2-600: var(--mcu-my-custom-color-2-40);
+  --color-myCustomColor2-700: var(--mcu-my-custom-color-2-30);
+  --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
+  --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
+  --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
 }