react-mcu 1.3.2 → 2.0.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 (7) hide show
  1. package/README.md +38 -38
  2. package/dist/cli.js +230 -131
  3. package/dist/index.d.ts +94 -67
  4. package/dist/index.js +229 -129
  5. package/dist/tailwind.css +157 -143
  6. package/package.json +3 -3
  7. package/src/tailwind.css +157 -143
package/dist/tailwind.css CHANGED
@@ -1,167 +1,181 @@
1
1
  @import "tailwindcss";
2
2
 
3
3
  @theme inline {
4
- --color-background: var(--mcu-background);
5
- --color-on-background: var(--mcu-on-background);
6
- --color-surface: var(--mcu-surface);
7
- --color-surface-dim: var(--mcu-surface-dim);
8
- --color-surface-bright: var(--mcu-surface-bright);
9
- --color-surface-container-lowest: var(--mcu-surface-container-lowest);
10
- --color-surface-container-low: var(--mcu-surface-container-low);
11
- --color-surface-container: var(--mcu-surface-container);
12
- --color-surface-container-high: var(--mcu-surface-container-high);
13
- --color-surface-container-highest: var(--mcu-surface-container-highest);
14
- --color-on-surface: var(--mcu-on-surface);
15
- --color-on-surface-variant: var(--mcu-on-surface-variant);
16
- --color-outline: var(--mcu-outline);
17
- --color-outline-variant: var(--mcu-outline-variant);
18
- --color-inverse-surface: var(--mcu-inverse-surface);
19
- --color-inverse-on-surface: var(--mcu-inverse-on-surface);
20
- --color-primary: var(--mcu-primary);
21
- --color-on-primary: var(--mcu-on-primary);
22
- --color-primary-container: var(--mcu-primary-container);
23
- --color-on-primary-container: var(--mcu-on-primary-container);
24
- --color-primary-fixed: var(--mcu-primary-fixed);
25
- --color-primary-fixed-dim: var(--mcu-primary-fixed-dim);
26
- --color-on-primary-fixed: var(--mcu-on-primary-fixed);
27
- --color-on-primary-fixed-variant: var(--mcu-on-primary-fixed-variant);
28
- --color-inverse-primary: var(--mcu-inverse-primary);
29
- --color-secondary: var(--mcu-secondary);
30
- --color-on-secondary: var(--mcu-on-secondary);
31
- --color-secondary-container: var(--mcu-secondary-container);
32
- --color-on-secondary-container: var(--mcu-on-secondary-container);
33
- --color-secondary-fixed: var(--mcu-secondary-fixed);
34
- --color-secondary-fixed-dim: var(--mcu-secondary-fixed-dim);
35
- --color-on-secondary-fixed: var(--mcu-on-secondary-fixed);
36
- --color-on-secondary-fixed-variant: var(--mcu-on-secondary-fixed-variant);
37
- --color-tertiary: var(--mcu-tertiary);
38
- --color-on-tertiary: var(--mcu-on-tertiary);
39
- --color-tertiary-container: var(--mcu-tertiary-container);
40
- --color-on-tertiary-container: var(--mcu-on-tertiary-container);
41
- --color-tertiary-fixed: var(--mcu-tertiary-fixed);
42
- --color-tertiary-fixed-dim: var(--mcu-tertiary-fixed-dim);
43
- --color-on-tertiary-fixed: var(--mcu-on-tertiary-fixed);
44
- --color-on-tertiary-fixed-variant: var(--mcu-on-tertiary-fixed-variant);
45
- --color-error: var(--mcu-error);
46
- --color-on-error: var(--mcu-on-error);
47
- --color-error-container: var(--mcu-error-container);
48
- --color-on-error-container: var(--mcu-on-error-container);
49
- --color-scrim: var(--mcu-scrim);
50
- --color-shadow: var(--mcu-shadow);
4
+ --color-background: var(--md-sys-color-background);
5
+ --color-on-background: var(--md-sys-color-on-background);
6
+ --color-surface: var(--md-sys-color-surface);
7
+ --color-surface-dim: var(--md-sys-color-surface-dim);
8
+ --color-surface-bright: var(--md-sys-color-surface-bright);
9
+ --color-surface-container-lowest: var(
10
+ --md-sys-color-surface-container-lowest
11
+ );
12
+ --color-surface-container-low: var(--md-sys-color-surface-container-low);
13
+ --color-surface-container: var(--md-sys-color-surface-container);
14
+ --color-surface-container-high: var(--md-sys-color-surface-container-high);
15
+ --color-surface-container-highest: var(
16
+ --md-sys-color-surface-container-highest
17
+ );
18
+ --color-on-surface: var(--md-sys-color-on-surface);
19
+ --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
20
+ --color-outline: var(--md-sys-color-outline);
21
+ --color-outline-variant: var(--md-sys-color-outline-variant);
22
+ --color-inverse-surface: var(--md-sys-color-inverse-surface);
23
+ --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
24
+ --color-primary: var(--md-sys-color-primary);
25
+ --color-on-primary: var(--md-sys-color-on-primary);
26
+ --color-primary-container: var(--md-sys-color-primary-container);
27
+ --color-on-primary-container: var(--md-sys-color-on-primary-container);
28
+ --color-primary-fixed: var(--md-sys-color-primary-fixed);
29
+ --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
30
+ --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
31
+ --color-on-primary-fixed-variant: var(
32
+ --md-sys-color-on-primary-fixed-variant
33
+ );
34
+ --color-inverse-primary: var(--md-sys-color-inverse-primary);
35
+ --color-secondary: var(--md-sys-color-secondary);
36
+ --color-on-secondary: var(--md-sys-color-on-secondary);
37
+ --color-secondary-container: var(--md-sys-color-secondary-container);
38
+ --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
39
+ --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
40
+ --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
41
+ --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
42
+ --color-on-secondary-fixed-variant: var(
43
+ --md-sys-color-on-secondary-fixed-variant
44
+ );
45
+ --color-tertiary: var(--md-sys-color-tertiary);
46
+ --color-on-tertiary: var(--md-sys-color-on-tertiary);
47
+ --color-tertiary-container: var(--md-sys-color-tertiary-container);
48
+ --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
49
+ --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
50
+ --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
51
+ --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
52
+ --color-on-tertiary-fixed-variant: var(
53
+ --md-sys-color-on-tertiary-fixed-variant
54
+ );
55
+ --color-error: var(--md-sys-color-error);
56
+ --color-on-error: var(--md-sys-color-on-error);
57
+ --color-error-container: var(--md-sys-color-error-container);
58
+ --color-on-error-container: var(--md-sys-color-on-error-container);
59
+ --color-scrim: var(--md-sys-color-scrim);
60
+ --color-shadow: var(--md-sys-color-shadow);
51
61
 
52
62
  /* Shades */
53
63
 
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);
64
+ --color-primary-50: var(--md-ref-palette-primary-95);
65
+ --color-primary-100: var(--md-ref-palette-primary-90);
66
+ --color-primary-200: var(--md-ref-palette-primary-80);
67
+ --color-primary-300: var(--md-ref-palette-primary-70);
68
+ --color-primary-400: var(--md-ref-palette-primary-60);
69
+ --color-primary-500: var(--md-ref-palette-primary-50);
70
+ --color-primary-600: var(--md-ref-palette-primary-40);
71
+ --color-primary-700: var(--md-ref-palette-primary-30);
72
+ --color-primary-800: var(--md-ref-palette-primary-20);
73
+ --color-primary-900: var(--md-ref-palette-primary-10);
74
+ --color-primary-950: var(--md-ref-palette-primary-5);
65
75
 
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);
76
+ --color-secondary-50: var(--md-ref-palette-secondary-95);
77
+ --color-secondary-100: var(--md-ref-palette-secondary-90);
78
+ --color-secondary-200: var(--md-ref-palette-secondary-80);
79
+ --color-secondary-300: var(--md-ref-palette-secondary-70);
80
+ --color-secondary-400: var(--md-ref-palette-secondary-60);
81
+ --color-secondary-500: var(--md-ref-palette-secondary-50);
82
+ --color-secondary-600: var(--md-ref-palette-secondary-40);
83
+ --color-secondary-700: var(--md-ref-palette-secondary-30);
84
+ --color-secondary-800: var(--md-ref-palette-secondary-20);
85
+ --color-secondary-900: var(--md-ref-palette-secondary-10);
86
+ --color-secondary-950: var(--md-ref-palette-secondary-5);
77
87
 
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);
88
+ --color-tertiary-50: var(--md-ref-palette-tertiary-95);
89
+ --color-tertiary-100: var(--md-ref-palette-tertiary-90);
90
+ --color-tertiary-200: var(--md-ref-palette-tertiary-80);
91
+ --color-tertiary-300: var(--md-ref-palette-tertiary-70);
92
+ --color-tertiary-400: var(--md-ref-palette-tertiary-60);
93
+ --color-tertiary-500: var(--md-ref-palette-tertiary-50);
94
+ --color-tertiary-600: var(--md-ref-palette-tertiary-40);
95
+ --color-tertiary-700: var(--md-ref-palette-tertiary-30);
96
+ --color-tertiary-800: var(--md-ref-palette-tertiary-20);
97
+ --color-tertiary-900: var(--md-ref-palette-tertiary-10);
98
+ --color-tertiary-950: var(--md-ref-palette-tertiary-5);
89
99
 
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);
100
+ --color-error-50: var(--md-ref-palette-error-95);
101
+ --color-error-100: var(--md-ref-palette-error-90);
102
+ --color-error-200: var(--md-ref-palette-error-80);
103
+ --color-error-300: var(--md-ref-palette-error-70);
104
+ --color-error-400: var(--md-ref-palette-error-60);
105
+ --color-error-500: var(--md-ref-palette-error-50);
106
+ --color-error-600: var(--md-ref-palette-error-40);
107
+ --color-error-700: var(--md-ref-palette-error-30);
108
+ --color-error-800: var(--md-ref-palette-error-20);
109
+ --color-error-900: var(--md-ref-palette-error-10);
110
+ --color-error-950: var(--md-ref-palette-error-5);
101
111
 
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);
112
+ --color-neutral-50: var(--md-ref-palette-neutral-95);
113
+ --color-neutral-100: var(--md-ref-palette-neutral-90);
114
+ --color-neutral-200: var(--md-ref-palette-neutral-80);
115
+ --color-neutral-300: var(--md-ref-palette-neutral-70);
116
+ --color-neutral-400: var(--md-ref-palette-neutral-60);
117
+ --color-neutral-500: var(--md-ref-palette-neutral-50);
118
+ --color-neutral-600: var(--md-ref-palette-neutral-40);
119
+ --color-neutral-700: var(--md-ref-palette-neutral-30);
120
+ --color-neutral-800: var(--md-ref-palette-neutral-20);
121
+ --color-neutral-900: var(--md-ref-palette-neutral-10);
122
+ --color-neutral-950: var(--md-ref-palette-neutral-5);
113
123
 
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);
124
+ --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
125
+ --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
126
+ --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
127
+ --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
128
+ --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
129
+ --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
130
+ --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
131
+ --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
132
+ --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
133
+ --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
134
+ --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
125
135
 
126
136
  /*
127
137
  * Custom colors
128
138
  */
129
139
 
130
- --color-myCustomColor1: var(--mcu-my-custom-color-1);
131
- --color-on-myCustomColor1: var(--mcu-on-my-custom-color-1);
132
- --color-myCustomColor1-container: var(--mcu-my-custom-color-1-container);
140
+ --color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
141
+ --color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
142
+ --color-myCustomColor1-container: var(
143
+ --md-sys-color-my-custom-color-1-container
144
+ );
133
145
  --color-on-myCustomColor1-container: var(
134
- --mcu-on-my-custom-color-1-container
146
+ --md-sys-color-on-my-custom-color-1-container
135
147
  );
136
148
  /* 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);
149
+ --color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
150
+ --color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
151
+ --color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
152
+ --color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
153
+ --color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
154
+ --color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
155
+ --color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
156
+ --color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
157
+ --color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
158
+ --color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
159
+ --color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
148
160
 
149
- --color-myCustomColor2: var(--mcu-my-custom-color-2);
150
- --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
151
- --color-myCustomColor2-container: var(--mcu-my-custom-color-2-container);
161
+ --color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
162
+ --color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
163
+ --color-myCustomColor2-container: var(
164
+ --md-sys-color-my-custom-color-2-container
165
+ );
152
166
  --color-on-myCustomColor2-container: var(
153
- --mcu-on-my-custom-color-2-container
167
+ --md-sys-color-on-my-custom-color-2-container
154
168
  );
155
169
  /* 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);
170
+ --color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
171
+ --color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
172
+ --color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
173
+ --color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
174
+ --color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
175
+ --color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
176
+ --color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
177
+ --color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
178
+ --color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
179
+ --color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
180
+ --color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
167
181
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mcu",
3
- "version": "1.3.2",
3
+ "version": "2.0.0",
4
4
  "description": "A React component library",
5
5
  "keywords": [
6
6
  "react",
@@ -50,7 +50,7 @@
50
50
  "@vitejs/plugin-react": "^5.1.2",
51
51
  "ajv": "^8.18.0",
52
52
  "ajv-formats": "^3.0.1",
53
- "chromatic": "^13.3.5",
53
+ "chromatic": "^15.1.1",
54
54
  "class-variance-authority": "^0.7.1",
55
55
  "clsx": "^2.1.1",
56
56
  "culori": "^4.0.2",
@@ -59,7 +59,7 @@
59
59
  "eslint-plugin-sonarjs": "^3.0.7",
60
60
  "globals": "^17.3.0",
61
61
  "husky": "^9.1.7",
62
- "jsdom": "^27.4.0",
62
+ "jsdom": "^28.1.0",
63
63
  "lint-staged": "^16.2.7",
64
64
  "postcss": "^8.5.6",
65
65
  "prettier": "^3.3.3",