react-mcu 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +11 -12
  2. package/dist/index.js +46 -4
  3. package/dist/tailwind.css +110 -0
  4. package/package.json +1 -1
  5. package/src/tailwind.css +110 -0
package/README.md CHANGED
@@ -2,8 +2,10 @@
2
2
  [![](https://img.shields.io/badge/chromatic-171c23.svg?logo=chromatic)](https://www.chromatic.com/library?appId=695eb517cb602e59b4cc045c&branch=main)
3
3
  [![](https://img.shields.io/badge/storybook-171c23.svg?logo=storybook)](https://main--695eb517cb602e59b4cc045c.chromatic.com)
4
4
 
5
- It injects `--mcu-*` CSS variables into the page, based on
6
- [m3 color system](https://m3.material.io/styles/color/system/overview).
5
+ [Material Design colors](https://m3.material.io/styles/color/system/overview)
6
+ for React.
7
+
8
+ It injects `--mcu-*` CSS variables into the page.
7
9
 
8
10
  https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
9
11
 
@@ -68,10 +70,9 @@ return (
68
70
 
69
71
  ## Tailwind
70
72
 
71
- Compatible with Tailwind through
72
- [theme variables](https://tailwindcss.com/docs/theme):
73
+ Compatible through [theme variables](https://tailwindcss.com/docs/theme):
73
74
 
74
- https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L3-L76
75
+ https://github.com/abernier/react-mcu/blob/688c789e322ed3858b51389b33eb7ea342bba81e/src/tailwind.css#L3-L186
75
76
 
76
77
  Or simply:
77
78
 
@@ -82,19 +83,17 @@ Or simply:
82
83
  > [!IMPORTANT]
83
84
  >
84
85
  > Do not forget to manually add your custom colors, as in:
85
- > https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L52-L75
86
+ > https://github.com/abernier/react-mcu/blob/688c789e322ed3858b51389b33eb7ea342bba81e/src/tailwind.css#L126-L185
86
87
 
87
88
  ## shadcn
88
89
 
89
90
  Pre-requisites:
90
91
 
91
- - [Tailwind setup](#tailwind)
92
- - You should use `tailwind.cssVariables` in your
93
- [`components.json`](https://ui.shadcn.com/docs/theming#css-variables)
92
+ - You should use
93
+ [`tailwind.cssVariables`](https://ui.shadcn.com/docs/theming#css-variables)
94
94
 
95
- Simply override
96
- [shadcn's CSS variables](https://ui.shadcn.com/docs/theming#list-of-variables)
97
- with MCU ones:
95
+ Simply override/remap
96
+ [shadcn's CSS variables](https://ui.shadcn.com/docs/theming#list-of-variables):
98
97
 
99
98
  ```css
100
99
  :root {
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  // src/Mcu.tsx
2
4
  import {
3
5
  argbFromHex,
@@ -13,7 +15,8 @@ import {
13
15
  SchemeMonochrome,
14
16
  SchemeNeutral,
15
17
  SchemeTonalSpot,
16
- SchemeVibrant
18
+ SchemeVibrant,
19
+ TonalPalette
17
20
  } from "@material/material-color-utilities";
18
21
  import { kebabCase, upperFirst } from "lodash-es";
19
22
  import { useMemo as useMemo2 } from "react";
@@ -109,6 +112,26 @@ var DEFAULT_SCHEME = "tonalSpot";
109
112
  var DEFAULT_CONTRAST = 0;
110
113
  var DEFAULT_COLOR_MATCH = false;
111
114
  var DEFAULT_CUSTOM_COLORS = [];
115
+ var STANDARD_TONES = [
116
+ 0,
117
+ 5,
118
+ 10,
119
+ 15,
120
+ 20,
121
+ 25,
122
+ 30,
123
+ 35,
124
+ 40,
125
+ 50,
126
+ 60,
127
+ 70,
128
+ 80,
129
+ 90,
130
+ 95,
131
+ 98,
132
+ 99,
133
+ 100
134
+ ];
112
135
  var Variant = {
113
136
  MONOCHROME: 0,
114
137
  NEUTRAL: 1,
@@ -271,6 +294,12 @@ var cssVar = (colorName, colorValue) => {
271
294
  const value = hexFromArgb2(colorValue);
272
295
  return `${name}:${value};`;
273
296
  };
297
+ var generateTonalPaletteVars = (paletteName, palette) => {
298
+ return STANDARD_TONES.map((tone) => {
299
+ const color = palette.tone(tone);
300
+ return cssVar(`${paletteName}-${tone}`, color);
301
+ }).join(" ");
302
+ };
274
303
  var toCssVars = (mergedColors) => {
275
304
  return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
276
305
  };
@@ -288,7 +317,6 @@ function generateCss({
288
317
  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
289
318
  }) {
290
319
  const hasCoreColors = primary ?? secondary ?? tertiary ?? neutral ?? neutralVariant ?? error;
291
- console.log("MCU generateCss", { hasCoreColors });
292
320
  const sourceArgb = argbFromHex(hexSource);
293
321
  const createSchemes = (baseConfig) => [
294
322
  new DynamicScheme({ ...baseConfig, isDark: false }),
@@ -296,6 +324,7 @@ function generateCss({
296
324
  ];
297
325
  let lightScheme;
298
326
  let darkScheme;
327
+ let corePalette;
299
328
  if (hasCoreColors) {
300
329
  const coreColorsArgb = {
301
330
  primary: primary ? argbFromHex(primary) : sourceArgb,
@@ -305,7 +334,7 @@ function generateCss({
305
334
  neutralVariant: neutralVariant ? argbFromHex(neutralVariant) : void 0,
306
335
  error: error ? argbFromHex(error) : void 0
307
336
  };
308
- const corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
337
+ corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
309
338
  const variant = schemeToVariant[scheme];
310
339
  [lightScheme, darkScheme] = createSchemes({
311
340
  sourceColorArgb: sourceArgb,
@@ -322,6 +351,7 @@ function generateCss({
322
351
  const hct = Hct.fromInt(sourceArgb);
323
352
  lightScheme = new SchemeClass(hct, false, contrast);
324
353
  darkScheme = new SchemeClass(hct, true, contrast);
354
+ corePalette = CorePalette.of(sourceArgb);
325
355
  }
326
356
  const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
327
357
  ...rest,
@@ -339,9 +369,21 @@ function generateCss({
339
369
  );
340
370
  const lightVars = toCssVars(mergedColorsLight);
341
371
  const darkVars = toCssVars(mergedColorsDark);
372
+ const coreColorsTonalVars = [
373
+ generateTonalPaletteVars("primary", corePalette.a1),
374
+ generateTonalPaletteVars("secondary", corePalette.a2),
375
+ generateTonalPaletteVars("tertiary", corePalette.a3),
376
+ generateTonalPaletteVars("neutral", corePalette.n1),
377
+ generateTonalPaletteVars("neutral-variant", corePalette.n2),
378
+ generateTonalPaletteVars("error", corePalette.error)
379
+ ].join(" ");
380
+ const customColorTonalVars = customColors.map((customColorObj) => {
381
+ const palette = TonalPalette.fromInt(customColorObj.value);
382
+ return generateTonalPaletteVars(kebabCase(customColorObj.name), palette);
383
+ }).join(" ");
342
384
  return {
343
385
  css: `
344
- :root { ${lightVars} }
386
+ :root { ${lightVars} ${coreColorsTonalVars} ${customColorTonalVars} }
345
387
  .dark { ${darkVars} }
346
388
  `,
347
389
  mergedColorsLight,
package/dist/tailwind.css CHANGED
@@ -49,6 +49,80 @@
49
49
  --color-scrim: var(--mcu-scrim);
50
50
  --color-shadow: var(--mcu-shadow);
51
51
 
52
+ /* Shades */
53
+
54
+ --color-primary-50: var(--mcu-primary-95);
55
+ --color-primary-100: var(--mcu-primary-90);
56
+ --color-primary-200: var(--mcu-primary-80);
57
+ --color-primary-300: var(--mcu-primary-70);
58
+ --color-primary-400: var(--mcu-primary-60);
59
+ --color-primary-500: var(--mcu-primary-50);
60
+ --color-primary-600: var(--mcu-primary-40);
61
+ --color-primary-700: var(--mcu-primary-30);
62
+ --color-primary-800: var(--mcu-primary-20);
63
+ --color-primary-900: var(--mcu-primary-10);
64
+ --color-primary-950: var(--mcu-primary-5);
65
+
66
+ --color-secondary-50: var(--mcu-secondary-95);
67
+ --color-secondary-100: var(--mcu-secondary-90);
68
+ --color-secondary-200: var(--mcu-secondary-80);
69
+ --color-secondary-300: var(--mcu-secondary-70);
70
+ --color-secondary-400: var(--mcu-secondary-60);
71
+ --color-secondary-500: var(--mcu-secondary-50);
72
+ --color-secondary-600: var(--mcu-secondary-40);
73
+ --color-secondary-700: var(--mcu-secondary-30);
74
+ --color-secondary-800: var(--mcu-secondary-20);
75
+ --color-secondary-900: var(--mcu-secondary-10);
76
+ --color-secondary-950: var(--mcu-secondary-5);
77
+
78
+ --color-tertiary-50: var(--mcu-tertiary-95);
79
+ --color-tertiary-100: var(--mcu-tertiary-90);
80
+ --color-tertiary-200: var(--mcu-tertiary-80);
81
+ --color-tertiary-300: var(--mcu-tertiary-70);
82
+ --color-tertiary-400: var(--mcu-tertiary-60);
83
+ --color-tertiary-500: var(--mcu-tertiary-50);
84
+ --color-tertiary-600: var(--mcu-tertiary-40);
85
+ --color-tertiary-700: var(--mcu-tertiary-30);
86
+ --color-tertiary-800: var(--mcu-tertiary-20);
87
+ --color-tertiary-900: var(--mcu-tertiary-10);
88
+ --color-tertiary-950: var(--mcu-tertiary-5);
89
+
90
+ --color-error-50: var(--mcu-error-95);
91
+ --color-error-100: var(--mcu-error-90);
92
+ --color-error-200: var(--mcu-error-80);
93
+ --color-error-300: var(--mcu-error-70);
94
+ --color-error-400: var(--mcu-error-60);
95
+ --color-error-500: var(--mcu-error-50);
96
+ --color-error-600: var(--mcu-error-40);
97
+ --color-error-700: var(--mcu-error-30);
98
+ --color-error-800: var(--mcu-error-20);
99
+ --color-error-900: var(--mcu-error-10);
100
+ --color-error-950: var(--mcu-error-5);
101
+
102
+ --color-neutral-50: var(--mcu-neutral-95);
103
+ --color-neutral-100: var(--mcu-neutral-90);
104
+ --color-neutral-200: var(--mcu-neutral-80);
105
+ --color-neutral-300: var(--mcu-neutral-70);
106
+ --color-neutral-400: var(--mcu-neutral-60);
107
+ --color-neutral-500: var(--mcu-neutral-50);
108
+ --color-neutral-600: var(--mcu-neutral-40);
109
+ --color-neutral-700: var(--mcu-neutral-30);
110
+ --color-neutral-800: var(--mcu-neutral-20);
111
+ --color-neutral-900: var(--mcu-neutral-10);
112
+ --color-neutral-950: var(--mcu-neutral-5);
113
+
114
+ --color-neutral-variant-50: var(--mcu-neutral-variant-95);
115
+ --color-neutral-variant-100: var(--mcu-neutral-variant-90);
116
+ --color-neutral-variant-200: var(--mcu-neutral-variant-80);
117
+ --color-neutral-variant-300: var(--mcu-neutral-variant-70);
118
+ --color-neutral-variant-400: var(--mcu-neutral-variant-60);
119
+ --color-neutral-variant-500: var(--mcu-neutral-variant-50);
120
+ --color-neutral-variant-600: var(--mcu-neutral-variant-40);
121
+ --color-neutral-variant-700: var(--mcu-neutral-variant-30);
122
+ --color-neutral-variant-800: var(--mcu-neutral-variant-20);
123
+ --color-neutral-variant-900: var(--mcu-neutral-variant-10);
124
+ --color-neutral-variant-950: var(--mcu-neutral-variant-5);
125
+
52
126
  /*
53
127
  * Custom colors
54
128
  */
@@ -59,6 +133,18 @@
59
133
  --color-on-myCustomColor1-container: var(
60
134
  --mcu-on-my-custom-color-1-container
61
135
  );
136
+ /* Shades */
137
+ --color-myCustomColor1-50: var(--mcu-my-custom-color-1-95);
138
+ --color-myCustomColor1-100: var(--mcu-my-custom-color-1-90);
139
+ --color-myCustomColor1-200: var(--mcu-my-custom-color-1-80);
140
+ --color-myCustomColor1-300: var(--mcu-my-custom-color-1-70);
141
+ --color-myCustomColor1-400: var(--mcu-my-custom-color-1-60);
142
+ --color-myCustomColor1-500: var(--mcu-my-custom-color-1-50);
143
+ --color-myCustomColor1-600: var(--mcu-my-custom-color-1-40);
144
+ --color-myCustomColor1-700: var(--mcu-my-custom-color-1-30);
145
+ --color-myCustomColor1-800: var(--mcu-my-custom-color-1-20);
146
+ --color-myCustomColor1-900: var(--mcu-my-custom-color-1-10);
147
+ --color-myCustomColor1-950: var(--mcu-my-custom-color-1-5);
62
148
 
63
149
  --color-myCustomColor2: var(--mcu-my-custom-color-2);
64
150
  --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
@@ -66,6 +152,18 @@
66
152
  --color-on-myCustomColor2-container: var(
67
153
  --mcu-on-my-custom-color-2-container
68
154
  );
155
+ /* Shades */
156
+ --color-myCustomColor2-50: var(--mcu-my-custom-color-2-95);
157
+ --color-myCustomColor2-100: var(--mcu-my-custom-color-2-90);
158
+ --color-myCustomColor2-200: var(--mcu-my-custom-color-2-80);
159
+ --color-myCustomColor2-300: var(--mcu-my-custom-color-2-70);
160
+ --color-myCustomColor2-400: var(--mcu-my-custom-color-2-60);
161
+ --color-myCustomColor2-500: var(--mcu-my-custom-color-2-50);
162
+ --color-myCustomColor2-600: var(--mcu-my-custom-color-2-40);
163
+ --color-myCustomColor2-700: var(--mcu-my-custom-color-2-30);
164
+ --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
165
+ --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
166
+ --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
69
167
 
70
168
  --color-myCustomColor3: var(--mcu-my-custom-color-3);
71
169
  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
@@ -73,4 +171,16 @@
73
171
  --color-on-myCustomColor3-container: var(
74
172
  --mcu-on-my-custom-color-3-container
75
173
  );
174
+ /* Shades */
175
+ --color-myCustomColor3-50: var(--mcu-my-custom-color-3-95);
176
+ --color-myCustomColor3-100: var(--mcu-my-custom-color-3-90);
177
+ --color-myCustomColor3-200: var(--mcu-my-custom-color-3-80);
178
+ --color-myCustomColor3-300: var(--mcu-my-custom-color-3-70);
179
+ --color-myCustomColor3-400: var(--mcu-my-custom-color-3-60);
180
+ --color-myCustomColor3-500: var(--mcu-my-custom-color-3-50);
181
+ --color-myCustomColor3-600: var(--mcu-my-custom-color-3-40);
182
+ --color-myCustomColor3-700: var(--mcu-my-custom-color-3-30);
183
+ --color-myCustomColor3-800: var(--mcu-my-custom-color-3-20);
184
+ --color-myCustomColor3-900: var(--mcu-my-custom-color-3-10);
185
+ --color-myCustomColor3-950: var(--mcu-my-custom-color-3-5);
76
186
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mcu",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "description": "A React component library",
5
5
  "keywords": [
6
6
  "react",
package/src/tailwind.css CHANGED
@@ -49,6 +49,80 @@
49
49
  --color-scrim: var(--mcu-scrim);
50
50
  --color-shadow: var(--mcu-shadow);
51
51
 
52
+ /* Shades */
53
+
54
+ --color-primary-50: var(--mcu-primary-95);
55
+ --color-primary-100: var(--mcu-primary-90);
56
+ --color-primary-200: var(--mcu-primary-80);
57
+ --color-primary-300: var(--mcu-primary-70);
58
+ --color-primary-400: var(--mcu-primary-60);
59
+ --color-primary-500: var(--mcu-primary-50);
60
+ --color-primary-600: var(--mcu-primary-40);
61
+ --color-primary-700: var(--mcu-primary-30);
62
+ --color-primary-800: var(--mcu-primary-20);
63
+ --color-primary-900: var(--mcu-primary-10);
64
+ --color-primary-950: var(--mcu-primary-5);
65
+
66
+ --color-secondary-50: var(--mcu-secondary-95);
67
+ --color-secondary-100: var(--mcu-secondary-90);
68
+ --color-secondary-200: var(--mcu-secondary-80);
69
+ --color-secondary-300: var(--mcu-secondary-70);
70
+ --color-secondary-400: var(--mcu-secondary-60);
71
+ --color-secondary-500: var(--mcu-secondary-50);
72
+ --color-secondary-600: var(--mcu-secondary-40);
73
+ --color-secondary-700: var(--mcu-secondary-30);
74
+ --color-secondary-800: var(--mcu-secondary-20);
75
+ --color-secondary-900: var(--mcu-secondary-10);
76
+ --color-secondary-950: var(--mcu-secondary-5);
77
+
78
+ --color-tertiary-50: var(--mcu-tertiary-95);
79
+ --color-tertiary-100: var(--mcu-tertiary-90);
80
+ --color-tertiary-200: var(--mcu-tertiary-80);
81
+ --color-tertiary-300: var(--mcu-tertiary-70);
82
+ --color-tertiary-400: var(--mcu-tertiary-60);
83
+ --color-tertiary-500: var(--mcu-tertiary-50);
84
+ --color-tertiary-600: var(--mcu-tertiary-40);
85
+ --color-tertiary-700: var(--mcu-tertiary-30);
86
+ --color-tertiary-800: var(--mcu-tertiary-20);
87
+ --color-tertiary-900: var(--mcu-tertiary-10);
88
+ --color-tertiary-950: var(--mcu-tertiary-5);
89
+
90
+ --color-error-50: var(--mcu-error-95);
91
+ --color-error-100: var(--mcu-error-90);
92
+ --color-error-200: var(--mcu-error-80);
93
+ --color-error-300: var(--mcu-error-70);
94
+ --color-error-400: var(--mcu-error-60);
95
+ --color-error-500: var(--mcu-error-50);
96
+ --color-error-600: var(--mcu-error-40);
97
+ --color-error-700: var(--mcu-error-30);
98
+ --color-error-800: var(--mcu-error-20);
99
+ --color-error-900: var(--mcu-error-10);
100
+ --color-error-950: var(--mcu-error-5);
101
+
102
+ --color-neutral-50: var(--mcu-neutral-95);
103
+ --color-neutral-100: var(--mcu-neutral-90);
104
+ --color-neutral-200: var(--mcu-neutral-80);
105
+ --color-neutral-300: var(--mcu-neutral-70);
106
+ --color-neutral-400: var(--mcu-neutral-60);
107
+ --color-neutral-500: var(--mcu-neutral-50);
108
+ --color-neutral-600: var(--mcu-neutral-40);
109
+ --color-neutral-700: var(--mcu-neutral-30);
110
+ --color-neutral-800: var(--mcu-neutral-20);
111
+ --color-neutral-900: var(--mcu-neutral-10);
112
+ --color-neutral-950: var(--mcu-neutral-5);
113
+
114
+ --color-neutral-variant-50: var(--mcu-neutral-variant-95);
115
+ --color-neutral-variant-100: var(--mcu-neutral-variant-90);
116
+ --color-neutral-variant-200: var(--mcu-neutral-variant-80);
117
+ --color-neutral-variant-300: var(--mcu-neutral-variant-70);
118
+ --color-neutral-variant-400: var(--mcu-neutral-variant-60);
119
+ --color-neutral-variant-500: var(--mcu-neutral-variant-50);
120
+ --color-neutral-variant-600: var(--mcu-neutral-variant-40);
121
+ --color-neutral-variant-700: var(--mcu-neutral-variant-30);
122
+ --color-neutral-variant-800: var(--mcu-neutral-variant-20);
123
+ --color-neutral-variant-900: var(--mcu-neutral-variant-10);
124
+ --color-neutral-variant-950: var(--mcu-neutral-variant-5);
125
+
52
126
  /*
53
127
  * Custom colors
54
128
  */
@@ -59,6 +133,18 @@
59
133
  --color-on-myCustomColor1-container: var(
60
134
  --mcu-on-my-custom-color-1-container
61
135
  );
136
+ /* Shades */
137
+ --color-myCustomColor1-50: var(--mcu-my-custom-color-1-95);
138
+ --color-myCustomColor1-100: var(--mcu-my-custom-color-1-90);
139
+ --color-myCustomColor1-200: var(--mcu-my-custom-color-1-80);
140
+ --color-myCustomColor1-300: var(--mcu-my-custom-color-1-70);
141
+ --color-myCustomColor1-400: var(--mcu-my-custom-color-1-60);
142
+ --color-myCustomColor1-500: var(--mcu-my-custom-color-1-50);
143
+ --color-myCustomColor1-600: var(--mcu-my-custom-color-1-40);
144
+ --color-myCustomColor1-700: var(--mcu-my-custom-color-1-30);
145
+ --color-myCustomColor1-800: var(--mcu-my-custom-color-1-20);
146
+ --color-myCustomColor1-900: var(--mcu-my-custom-color-1-10);
147
+ --color-myCustomColor1-950: var(--mcu-my-custom-color-1-5);
62
148
 
63
149
  --color-myCustomColor2: var(--mcu-my-custom-color-2);
64
150
  --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
@@ -66,6 +152,18 @@
66
152
  --color-on-myCustomColor2-container: var(
67
153
  --mcu-on-my-custom-color-2-container
68
154
  );
155
+ /* Shades */
156
+ --color-myCustomColor2-50: var(--mcu-my-custom-color-2-95);
157
+ --color-myCustomColor2-100: var(--mcu-my-custom-color-2-90);
158
+ --color-myCustomColor2-200: var(--mcu-my-custom-color-2-80);
159
+ --color-myCustomColor2-300: var(--mcu-my-custom-color-2-70);
160
+ --color-myCustomColor2-400: var(--mcu-my-custom-color-2-60);
161
+ --color-myCustomColor2-500: var(--mcu-my-custom-color-2-50);
162
+ --color-myCustomColor2-600: var(--mcu-my-custom-color-2-40);
163
+ --color-myCustomColor2-700: var(--mcu-my-custom-color-2-30);
164
+ --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
165
+ --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
166
+ --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
69
167
 
70
168
  --color-myCustomColor3: var(--mcu-my-custom-color-3);
71
169
  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
@@ -73,4 +171,16 @@
73
171
  --color-on-myCustomColor3-container: var(
74
172
  --mcu-on-my-custom-color-3-container
75
173
  );
174
+ /* Shades */
175
+ --color-myCustomColor3-50: var(--mcu-my-custom-color-3-95);
176
+ --color-myCustomColor3-100: var(--mcu-my-custom-color-3-90);
177
+ --color-myCustomColor3-200: var(--mcu-my-custom-color-3-80);
178
+ --color-myCustomColor3-300: var(--mcu-my-custom-color-3-70);
179
+ --color-myCustomColor3-400: var(--mcu-my-custom-color-3-60);
180
+ --color-myCustomColor3-500: var(--mcu-my-custom-color-3-50);
181
+ --color-myCustomColor3-600: var(--mcu-my-custom-color-3-40);
182
+ --color-myCustomColor3-700: var(--mcu-my-custom-color-3-30);
183
+ --color-myCustomColor3-800: var(--mcu-my-custom-color-3-20);
184
+ --color-myCustomColor3-900: var(--mcu-my-custom-color-3-10);
185
+ --color-myCustomColor3-950: var(--mcu-my-custom-color-3-5);
76
186
  }