react-mcu 1.0.10 → 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 +7 -6
  2. package/dist/index.js +44 -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,7 +2,8 @@
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
- [Material Design colors](https://m3.material.io/styles/color/system/overview) for React.
5
+ [Material Design colors](https://m3.material.io/styles/color/system/overview)
6
+ for React.
6
7
 
7
8
  It injects `--mcu-*` CSS variables into the page.
8
9
 
@@ -69,10 +70,9 @@ return (
69
70
 
70
71
  ## Tailwind
71
72
 
72
- Compatible through
73
- [theme variables](https://tailwindcss.com/docs/theme):
73
+ Compatible through [theme variables](https://tailwindcss.com/docs/theme):
74
74
 
75
- 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
76
76
 
77
77
  Or simply:
78
78
 
@@ -83,13 +83,14 @@ Or simply:
83
83
  > [!IMPORTANT]
84
84
  >
85
85
  > Do not forget to manually add your custom colors, as in:
86
- > 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
87
87
 
88
88
  ## shadcn
89
89
 
90
90
  Pre-requisites:
91
91
 
92
- - You should use [`tailwind.cssVariables`](https://ui.shadcn.com/docs/theming#css-variables)
92
+ - You should use
93
+ [`tailwind.cssVariables`](https://ui.shadcn.com/docs/theming#css-variables)
93
94
 
94
95
  Simply override/remap
95
96
  [shadcn's CSS variables](https://ui.shadcn.com/docs/theming#list-of-variables):
package/dist/index.js CHANGED
@@ -15,7 +15,8 @@ import {
15
15
  SchemeMonochrome,
16
16
  SchemeNeutral,
17
17
  SchemeTonalSpot,
18
- SchemeVibrant
18
+ SchemeVibrant,
19
+ TonalPalette
19
20
  } from "@material/material-color-utilities";
20
21
  import { kebabCase, upperFirst } from "lodash-es";
21
22
  import { useMemo as useMemo2 } from "react";
@@ -111,6 +112,26 @@ var DEFAULT_SCHEME = "tonalSpot";
111
112
  var DEFAULT_CONTRAST = 0;
112
113
  var DEFAULT_COLOR_MATCH = false;
113
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
+ ];
114
135
  var Variant = {
115
136
  MONOCHROME: 0,
116
137
  NEUTRAL: 1,
@@ -273,6 +294,12 @@ var cssVar = (colorName, colorValue) => {
273
294
  const value = hexFromArgb2(colorValue);
274
295
  return `${name}:${value};`;
275
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
+ };
276
303
  var toCssVars = (mergedColors) => {
277
304
  return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
278
305
  };
@@ -290,7 +317,6 @@ function generateCss({
290
317
  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
291
318
  }) {
292
319
  const hasCoreColors = primary ?? secondary ?? tertiary ?? neutral ?? neutralVariant ?? error;
293
- console.log("MCU generateCss", { hasCoreColors });
294
320
  const sourceArgb = argbFromHex(hexSource);
295
321
  const createSchemes = (baseConfig) => [
296
322
  new DynamicScheme({ ...baseConfig, isDark: false }),
@@ -298,6 +324,7 @@ function generateCss({
298
324
  ];
299
325
  let lightScheme;
300
326
  let darkScheme;
327
+ let corePalette;
301
328
  if (hasCoreColors) {
302
329
  const coreColorsArgb = {
303
330
  primary: primary ? argbFromHex(primary) : sourceArgb,
@@ -307,7 +334,7 @@ function generateCss({
307
334
  neutralVariant: neutralVariant ? argbFromHex(neutralVariant) : void 0,
308
335
  error: error ? argbFromHex(error) : void 0
309
336
  };
310
- const corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
337
+ corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
311
338
  const variant = schemeToVariant[scheme];
312
339
  [lightScheme, darkScheme] = createSchemes({
313
340
  sourceColorArgb: sourceArgb,
@@ -324,6 +351,7 @@ function generateCss({
324
351
  const hct = Hct.fromInt(sourceArgb);
325
352
  lightScheme = new SchemeClass(hct, false, contrast);
326
353
  darkScheme = new SchemeClass(hct, true, contrast);
354
+ corePalette = CorePalette.of(sourceArgb);
327
355
  }
328
356
  const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
329
357
  ...rest,
@@ -341,9 +369,21 @@ function generateCss({
341
369
  );
342
370
  const lightVars = toCssVars(mergedColorsLight);
343
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(" ");
344
384
  return {
345
385
  css: `
346
- :root { ${lightVars} }
386
+ :root { ${lightVars} ${coreColorsTonalVars} ${customColorTonalVars} }
347
387
  .dark { ${darkVars} }
348
388
  `,
349
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.10",
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
  }