@innovaccer/design-system 4.28.0-1 → 4.28.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 (29) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/css/Readme.md +2 -2
  3. package/css/dist/index.css +450 -491
  4. package/css/dist/index.css.map +1 -1
  5. package/css/dist/mds-scoped.css +450 -491
  6. package/css/src/components/chip.module.css +1 -1
  7. package/css/src/components/grid.module.css +12 -0
  8. package/css/src/components/input.module.css +1 -1
  9. package/css/src/components/metricInput.module.css +1 -1
  10. package/css/src/components/select.module.css +30 -4
  11. package/css/src/tokens/index.css +216 -295
  12. package/css/src/variables/index.css +189 -189
  13. package/dist/brotli/index.js +1 -1
  14. package/dist/brotli/index.js.br +0 -0
  15. package/dist/cjs/index.js +1 -1
  16. package/dist/core/ai-components/SaraSparkle/index.d.ts +1 -0
  17. package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts +2 -0
  18. package/dist/core/components/molecules/tabs/TabsWrapper.d.ts +1 -0
  19. package/dist/core/components/molecules/tooltip/Tooltip.d.ts +1 -0
  20. package/dist/core/components/organisms/select/SelectContext.d.ts +1 -0
  21. package/dist/esm/index.js +439 -252
  22. package/dist/gzip/index.js +1 -1
  23. package/dist/gzip/index.js.gz +0 -0
  24. package/dist/index.js +413 -262
  25. package/dist/index.js.map +1 -1
  26. package/dist/index.umd.css +450 -491
  27. package/dist/index.umd.js +1 -1
  28. package/dist/types/tsconfig.type.tsbuildinfo +25 -23
  29. package/package.json +1 -1
package/css/dist/index.css CHANGED
@@ -1,240 +1,240 @@
1
1
  /**** Color Primitives ****/
2
2
  :root {
3
3
  /* Blue */
4
- --color-blue-100: #f0f9ff;
5
- --color-blue-200: #d6eeff;
6
- --color-blue-300: #c2e4ff;
7
- --color-blue-400: #a8d8ff;
8
- --color-blue-500: #8bcafe;
9
- --color-blue-600: #6fb7fb;
10
- --color-blue-700: #4fa3f8;
11
- --color-blue-800: #2e8ef5;
12
- --color-blue-900: #0a74f5;
13
- --color-blue-1000: #0060d6;
14
- --color-blue-1100: #0051ad;
15
- --color-blue-1200: #003e85;
16
- --color-blue-1300: #003066;
17
- --color-blue-1400: #002147;
18
- --color-blue-1000-4a: rgba(0, 96, 214, 0.04);
19
- --color-blue-1000-12a: rgba(0, 96, 214, 0.12);
20
- --color-blue-1000-16a: rgba(0, 96, 214, 0.16);
21
- --color-blue-200-48a: rgba(214, 238, 255, 0.48);
22
- --color-blue-500-48a: rgba(139, 202, 254, 0.48);
23
- --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
4
+ --color-blue-50: #f0f9ff;
5
+ --color-blue-100: #d6eeff;
6
+ --color-blue-200: #c2e4ff;
7
+ --color-blue-300: #a8d8ff;
8
+ --color-blue-400: #8bcafe;
9
+ --color-blue-500: #6fb7fb;
10
+ --color-blue-600: #4fa3f8;
11
+ --color-blue-700: #2e8ef5;
12
+ --color-blue-800: #0a74f5;
13
+ --color-blue-900: #0060d6;
14
+ --color-blue-950: #0051ad;
15
+ --color-blue-1000: #003e85;
16
+ --color-blue-1100: #003066;
17
+ --color-blue-1200: #002147;
18
+ --color-blue-900-4a: rgba(0, 96, 214, 0.04);
19
+ --color-blue-900-12a: rgba(0, 96, 214, 0.12);
20
+ --color-blue-900-16a: rgba(0, 96, 214, 0.16);
21
+ --color-blue-100-48a: rgba(214, 238, 255, 0.48);
22
+ --color-blue-400-48a: rgba(139, 202, 254, 0.48);
23
+ --color-blue-1000-16a: rgba(0, 62, 133, 0.16);
24
24
 
25
25
  /* Red */
26
- --color-red-100: #fff7f5;
27
- --color-red-200: #ffe1db;
28
- --color-red-300: #ffd4cc;
29
- --color-red-400: #fec0b4;
30
- --color-red-500: #fcac9c;
31
- --color-red-600: #f49480;
32
- --color-red-700: #ed765e;
33
- --color-red-800: #e45b3f;
34
- --color-red-900: #df3011;
35
- --color-red-1000: #bd1c00;
36
- --color-red-1100: #9e200a;
37
- --color-red-1200: #791a06;
38
- --color-red-1300: #5c1305;
39
- --color-red-1400: #3f0e03;
40
- --color-red-1000-4a: rgba(189, 28, 0, 0.04);
41
- --color-red-1000-16a: rgba(189, 28, 0, 0.16);
42
- --color-red-1200-16a: rgba(121, 26, 6, 0.16);
26
+ --color-red-50: #fff7f5;
27
+ --color-red-100: #ffe1db;
28
+ --color-red-200: #ffd4cc;
29
+ --color-red-300: #fec0b4;
30
+ --color-red-400: #fcac9c;
31
+ --color-red-500: #f49480;
32
+ --color-red-600: #ed765e;
33
+ --color-red-700: #e45b3f;
34
+ --color-red-800: #df3011;
35
+ --color-red-900: #bd1c00;
36
+ --color-red-950: #9e200a;
37
+ --color-red-1000: #791a06;
38
+ --color-red-1100: #5c1305;
39
+ --color-red-1200: #3f0e03;
40
+ --color-red-900-4a: rgba(189, 28, 0, 0.04);
41
+ --color-red-900-16a: rgba(189, 28, 0, 0.16);
42
+ --color-red-1000-16a: rgba(121, 26, 6, 0.16);
43
43
 
44
44
  /* Green */
45
- --color-green-100: #f1f9f0;
46
- --color-green-200: #dcf0db;
47
- --color-green-300: #cbe8c9;
48
- --color-green-400: #b6dfb3;
49
- --color-green-500: #9dd49b;
50
- --color-green-600: #7ec57d;
51
- --color-green-700: #5eb55e;
52
- --color-green-800: #3aa63c;
53
- --color-green-900: #009900;
54
- --color-green-1000: #008000;
55
- --color-green-1100: #006b00;
56
- --color-green-1200: #005200;
57
- --color-green-1300: #003d04;
58
- --color-green-1400: #002904;
59
- --color-green-1000-4a: rgba(0, 128, 0, 0.04);
60
- --color-green-1000-16a: rgba(0, 128, 0, 0.16);
61
- --color-green-1200-16a: rgba(0, 82, 0, 0.16);
45
+ --color-green-50: #f1f9f0;
46
+ --color-green-100: #dcf0db;
47
+ --color-green-200: #cbe8c9;
48
+ --color-green-300: #b6dfb3;
49
+ --color-green-400: #9dd49b;
50
+ --color-green-500: #7ec57d;
51
+ --color-green-600: #5eb55e;
52
+ --color-green-700: #3aa63c;
53
+ --color-green-800: #009900;
54
+ --color-green-900: #008000;
55
+ --color-green-950: #006b00;
56
+ --color-green-1000: #005200;
57
+ --color-green-1100: #003d04;
58
+ --color-green-1200: #002904;
59
+ --color-green-900-4a: rgba(0, 128, 0, 0.04);
60
+ --color-green-900-16a: rgba(0, 128, 0, 0.16);
61
+ --color-green-1000-16a: rgba(0, 82, 0, 0.16);
62
62
 
63
63
  /* Yellow */
64
- --color-yellow-100: #fff9e5;
65
- --color-yellow-200: #fff5d6;
66
- --color-yellow-300: #fff0c2;
67
- --color-yellow-400: #ffe9a8;
68
- --color-yellow-500: #fee18b;
69
- --color-yellow-600: #fbd86f;
70
- --color-yellow-700: #f8cd4f;
71
- --color-yellow-800: #f5c32e;
72
- --color-yellow-900: #f5ba0a;
73
- --color-yellow-1000: #d6a100;
74
- --color-yellow-1100: #ad8200;
75
- --color-yellow-1200: #856300;
76
- --color-yellow-1300: #664d00;
77
- --color-yellow-1400: #473600;
78
- --color-yellow-900-4a: rgba(245, 186, 10, 0.04);
79
- --color-yellow-900-16a: rgba(245, 186, 10, 0.16);
80
- --color-yellow-1000-16a: rgba(214, 161, 0, 0.16);
81
- --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
64
+ --color-yellow-50: #fff9e5;
65
+ --color-yellow-100: #fff5d6;
66
+ --color-yellow-200: #fff0c2;
67
+ --color-yellow-300: #ffe9a8;
68
+ --color-yellow-400: #fee18b;
69
+ --color-yellow-500: #fbd86f;
70
+ --color-yellow-600: #f8cd4f;
71
+ --color-yellow-700: #f5c32e;
72
+ --color-yellow-800: #f5ba0a;
73
+ --color-yellow-900: #d6a100;
74
+ --color-yellow-950: #ad8200;
75
+ --color-yellow-1000: #856300;
76
+ --color-yellow-1100: #664d00;
77
+ --color-yellow-1200: #473600;
78
+ --color-yellow-800-4a: rgba(245, 186, 10, 0.04);
79
+ --color-yellow-800-16a: rgba(245, 186, 10, 0.16);
80
+ --color-yellow-900-16a: rgba(214, 161, 0, 0.16);
81
+ --color-yellow-950-16a: rgba(173, 130, 0, 0.16);
82
82
 
83
83
  /* Orange */
84
- --color-orange-100: #ffeed1;
85
- --color-orange-200: #ffe8c2;
86
- --color-orange-300: #ffdca3;
87
- --color-orange-400: #ffca7a;
88
- --color-orange-500: #ffb657;
89
- --color-orange-600: #ffa333;
90
- --color-orange-700: #ff9114;
91
- --color-orange-800: #eb7900;
92
- --color-orange-900: #d66c00;
93
- --color-orange-1000: #bd5b00;
94
- --color-orange-1100: #a34c00;
95
- --color-orange-1200: #8a3b00;
96
- --color-orange-1300: #6b2900;
97
- --color-orange-1400: #4d1c00;
98
- --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
99
- --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
84
+ --color-orange-50: #ffeed1;
85
+ --color-orange-100: #ffe8c2;
86
+ --color-orange-200: #ffdca3;
87
+ --color-orange-300: #ffca7a;
88
+ --color-orange-400: #ffb657;
89
+ --color-orange-500: #ffa333;
90
+ --color-orange-600: #ff9114;
91
+ --color-orange-700: #eb7900;
92
+ --color-orange-800: #d66c00;
93
+ --color-orange-900: #bd5b00;
94
+ --color-orange-950: #a34c00;
95
+ --color-orange-1000: #8a3b00;
96
+ --color-orange-1100: #6b2900;
97
+ --color-orange-1200: #4d1c00;
98
+ --color-orange-900-4a: rgba(189, 91, 0, 0.04);
99
+ --color-orange-900-16a: rgba(189, 91, 0, 0.16);
100
100
 
101
101
  /* Violet */
102
- --color-violet-100: #faf6fe;
103
- --color-violet-200: #f0e7fd;
104
- --color-violet-300: #e4d5fb;
105
- --color-violet-400: #dcc7fa;
106
- --color-violet-500: #cfb4f8;
107
- --color-violet-600: #c0a0f3;
108
- --color-violet-700: #ac87ee;
109
- --color-violet-800: #9e72e9;
110
- --color-violet-900: #8854e8;
111
- --color-violet-1000: #6f47cd;
112
- --color-violet-1100: #5b3ba5;
113
- --color-violet-1200: #462d80;
114
- --color-violet-1300: #322361;
115
- --color-violet-1400: #211844;
116
- --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
102
+ --color-violet-50: #faf6fe;
103
+ --color-violet-100: #f0e7fd;
104
+ --color-violet-200: #e4d5fb;
105
+ --color-violet-300: #dcc7fa;
106
+ --color-violet-400: #cfb4f8;
107
+ --color-violet-500: #c0a0f3;
108
+ --color-violet-600: #ac87ee;
109
+ --color-violet-700: #9e72e9;
110
+ --color-violet-800: #8854e8;
111
+ --color-violet-900: #6f47cd;
112
+ --color-violet-950: #5b3ba5;
113
+ --color-violet-1000: #462d80;
114
+ --color-violet-1100: #322361;
115
+ --color-violet-1200: #211844;
116
+ --color-violet-900-16a: rgba(111, 71, 205, 0.16);
117
117
 
118
118
  /* Indigo */
119
- --color-indigo-100: #f5f6ff;
120
- --color-indigo-200: #e5e8ff;
121
- --color-indigo-300: #d6daff;
122
- --color-indigo-400: #c7ccff;
123
- --color-indigo-500: #b3baff;
124
- --color-indigo-600: #9faafe;
125
- --color-indigo-700: #8993fa;
126
- --color-indigo-800: #7380f7;
127
- --color-indigo-900: #5a67f6;
128
- --color-indigo-1000: #4256d7;
129
- --color-indigo-1100: #2f4aac;
130
- --color-indigo-1200: #223987;
131
- --color-indigo-1300: #192b66;
132
- --color-indigo-1400: #101c46;
133
- --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
119
+ --color-indigo-50: #f5f6ff;
120
+ --color-indigo-100: #e5e8ff;
121
+ --color-indigo-200: #d6daff;
122
+ --color-indigo-300: #c7ccff;
123
+ --color-indigo-400: #b3baff;
124
+ --color-indigo-500: #9faafe;
125
+ --color-indigo-600: #8993fa;
126
+ --color-indigo-700: #7380f7;
127
+ --color-indigo-800: #5a67f6;
128
+ --color-indigo-900: #4256d7;
129
+ --color-indigo-950: #2f4aac;
130
+ --color-indigo-1000: #223987;
131
+ --color-indigo-1100: #192b66;
132
+ --color-indigo-1200: #101c46;
133
+ --color-indigo-900-16a: rgba(66, 86, 215, 0.16);
134
134
 
135
135
  /* Lime */
136
- --color-lime-100: #f5faed;
137
- --color-lime-200: #e4efd3;
138
- --color-lime-300: #d5e6bb;
139
- --color-lime-400: #c5dc9e;
140
- --color-lime-500: #b2d07d;
141
- --color-lime-600: #9dc057;
142
- --color-lime-700: #87b018;
143
- --color-lime-800: #779d00;
144
- --color-lime-900: #688900;
145
- --color-lime-1000: #577400;
146
- --color-lime-1100: #476000;
147
- --color-lime-1200: #364900;
148
- --color-lime-1300: #283800;
149
- --color-lime-1400: #1a2700;
150
- --color-lime-900-16a: rgba(104, 137, 0, 0.16);
151
- --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
136
+ --color-lime-50: #f5faed;
137
+ --color-lime-100: #e4efd3;
138
+ --color-lime-200: #d5e6bb;
139
+ --color-lime-300: #c5dc9e;
140
+ --color-lime-400: #b2d07d;
141
+ --color-lime-500: #9dc057;
142
+ --color-lime-600: #87b018;
143
+ --color-lime-700: #779d00;
144
+ --color-lime-800: #688900;
145
+ --color-lime-900: #577400;
146
+ --color-lime-950: #476000;
147
+ --color-lime-1000: #364900;
148
+ --color-lime-1100: #283800;
149
+ --color-lime-1200: #1a2700;
150
+ --color-lime-800-16a: rgba(104, 137, 0, 0.16);
151
+ --color-lime-900-16a: rgba(87, 116, 0, 0.16);
152
152
 
153
153
  /* Cyan */
154
- --color-cyan-100: #eefafc;
155
- --color-cyan-200: #cff1f7;
156
- --color-cyan-300: #b6e8f2;
157
- --color-cyan-400: #96dfee;
158
- --color-cyan-500: #6ed3e7;
159
- --color-cyan-600: #33c4e1;
160
- --color-cyan-700: #00b2d6;
161
- --color-cyan-800: #009fc7;
162
- --color-cyan-900: #008cb3;
163
- --color-cyan-1000: #007599;
164
- --color-cyan-1100: #006080;
165
- --color-cyan-1200: #004766;
166
- --color-cyan-1300: #003952;
167
- --color-cyan-1400: #002738;
168
-
169
- /* Sea */
170
- --color-sea-100: #effaf9;
171
- --color-sea-200: #cff2ef;
172
- --color-sea-300: #b8eae5;
173
- --color-sea-400: #98e2dc;
174
- --color-sea-500: #6fd8d2;
175
- --color-sea-600: #2fcac0;
176
- --color-sea-700: #00b8ae;
177
- --color-sea-800: #00a89d;
178
- --color-sea-900: #008f88;
179
- --color-sea-1000: #007a74;
180
- --color-sea-1100: #00665f;
181
- --color-sea-1200: #004d47;
182
- --color-sea-1300: #003d3a;
183
- --color-sea-1400: #002926;
184
-
185
- /* Magenta */
186
- --color-magenta-100: #fff5f9;
187
- --color-magenta-200: #fee1eb;
188
- --color-magenta-300: #fccfdf;
189
- --color-magenta-400: #fabdd2;
190
- --color-magenta-500: #f6a7c4;
191
- --color-magenta-600: #ef8fb2;
192
- --color-magenta-700: #e7739e;
193
- --color-magenta-800: #de5487;
194
- --color-magenta-900: #d62974;
195
- --color-magenta-1000: #bb165b;
196
- --color-magenta-1100: #991a44;
197
- --color-magenta-1200: #751538;
198
- --color-magenta-1300: #5a112d;
199
- --color-magenta-1400: #3d0b20;
154
+ --color-cyan-50: #eefafc;
155
+ --color-cyan-100: #cff1f7;
156
+ --color-cyan-200: #b6e8f2;
157
+ --color-cyan-300: #96dfee;
158
+ --color-cyan-400: #6ed3e7;
159
+ --color-cyan-500: #33c4e1;
160
+ --color-cyan-600: #00b2d6;
161
+ --color-cyan-700: #009fc7;
162
+ --color-cyan-800: #008cb3;
163
+ --color-cyan-900: #007599;
164
+ --color-cyan-950: #006080;
165
+ --color-cyan-1000: #004766;
166
+ --color-cyan-1100: #003952;
167
+ --color-cyan-1200: #002738;
168
+
169
+ /* Teal */
170
+ --color-teal-50: #effaf9;
171
+ --color-teal-100: #cff2ef;
172
+ --color-teal-200: #b8eae5;
173
+ --color-teal-300: #98e2dc;
174
+ --color-teal-400: #6fd8d2;
175
+ --color-teal-500: #2fcac0;
176
+ --color-teal-600: #00b8ae;
177
+ --color-teal-700: #00a89d;
178
+ --color-teal-800: #008f88;
179
+ --color-teal-900: #007a74;
180
+ --color-teal-950: #00665f;
181
+ --color-teal-1000: #004d47;
182
+ --color-teal-1100: #003d3a;
183
+ --color-teal-1200: #002926;
200
184
 
201
185
  /* Pink */
202
- --color-pink-100: #fdf6fc;
203
- --color-pink-200: #f8e2f5;
204
- --color-pink-300: #f3d3ef;
205
- --color-pink-400: #efc2e9;
206
- --color-pink-500: #e7ace1;
207
- --color-pink-600: #dd92d5;
208
- --color-pink-700: #d17acd;
209
- --color-pink-800: #c55ec1;
210
- --color-pink-900: #b83db8;
211
- --color-pink-1000: #9d2d9f;
212
- --color-pink-1100: #842a82;
213
- --color-pink-1200: #651f64;
214
- --color-pink-1300: #4e184d;
215
- --color-pink-1400: #371036;
216
-
217
- /* Gray */
218
- --color-gray-100: #f7f7f7;
219
- --color-gray-200: #ebebeb;
220
- --color-gray-300: #e0e0e0;
221
- --color-gray-400: #d4d4d4;
222
- --color-gray-500: #c4c4c4;
223
- --color-gray-600: #b5b5b5;
224
- --color-gray-700: #a3a3a3;
225
- --color-gray-800: #858585;
226
- --color-gray-900: #636363;
227
- --color-gray-1000: #575757;
228
- --color-gray-1100: #424242;
229
- --color-gray-1200: #333333;
230
- --color-gray-1300: #242424;
231
- --color-gray-1400: #1a1a1a;
232
- --color-gray-100-40a: rgba(247, 247, 247, 0.4);
233
- --color-gray-400-16a: rgba(212, 212, 212, 0.16);
234
- --color-gray-1400-16a: rgba(26, 26, 26, 0.16);
235
- --color-gray-1400-48a: rgba(26, 26, 26, 0.48);
236
- --color-gray-1400-64a: rgba(26, 26, 26, 0.64);
237
- --color-gray-1400-80a: rgba(26, 26, 26, 0.8);
186
+ --color-pink-50: #fff5f9;
187
+ --color-pink-100: #fee1eb;
188
+ --color-pink-200: #fccfdf;
189
+ --color-pink-300: #fabdd2;
190
+ --color-pink-400: #f6a7c4;
191
+ --color-pink-500: #ef8fb2;
192
+ --color-pink-600: #e7739e;
193
+ --color-pink-700: #de5487;
194
+ --color-pink-800: #d62974;
195
+ --color-pink-900: #bb165b;
196
+ --color-pink-950: #991a44;
197
+ --color-pink-1000: #751538;
198
+ --color-pink-1100: #5a112d;
199
+ --color-pink-1200: #3d0b20;
200
+
201
+ /* Fuchsia */
202
+ --color-fuchsia-50: #fdf6fc;
203
+ --color-fuchsia-100: #f8e2f5;
204
+ --color-fuchsia-200: #f3d3ef;
205
+ --color-fuchsia-300: #efc2e9;
206
+ --color-fuchsia-400: #e7ace1;
207
+ --color-fuchsia-500: #dd92d5;
208
+ --color-fuchsia-600: #d17acd;
209
+ --color-fuchsia-700: #c55ec1;
210
+ --color-fuchsia-800: #b83db8;
211
+ --color-fuchsia-900: #9d2d9f;
212
+ --color-fuchsia-950: #842a82;
213
+ --color-fuchsia-1000: #651f64;
214
+ --color-fuchsia-1100: #4e184d;
215
+ --color-fuchsia-1200: #371036;
216
+
217
+ /* Neutral */
218
+ --color-neutral-50: #f7f7f7;
219
+ --color-neutral-100: #ebebeb;
220
+ --color-neutral-200: #e0e0e0;
221
+ --color-neutral-300: #d4d4d4;
222
+ --color-neutral-400: #c4c4c4;
223
+ --color-neutral-500: #b5b5b5;
224
+ --color-neutral-600: #a3a3a3;
225
+ --color-neutral-700: #858585;
226
+ --color-neutral-800: #636363;
227
+ --color-neutral-900: #575757;
228
+ --color-neutral-950: #424242;
229
+ --color-neutral-1000: #333333;
230
+ --color-neutral-1100: #242424;
231
+ --color-neutral-1200: #1a1a1a;
232
+ --color-neutral-50-40a: rgba(247, 247, 247, 0.4);
233
+ --color-neutral-300-16a: rgba(212, 212, 212, 0.16);
234
+ --color-neutral-1200-16a: rgba(26, 26, 26, 0.16);
235
+ --color-neutral-1200-48a: rgba(26, 26, 26, 0.48);
236
+ --color-neutral-1200-64a: rgba(26, 26, 26, 0.64);
237
+ --color-neutral-1200-80a: rgba(26, 26, 26, 0.8);
238
238
 
239
239
  /* Defaults */
240
240
  --color-white: #ffffff;
@@ -242,91 +242,12 @@
242
242
  --color-white-48a: rgba(255, 255, 255, 0.48);
243
243
  --color-white-80a: rgba(255, 255, 255, 0.8);
244
244
 
245
- /**** Semantic Colors (mapped to primitives) ****/
246
-
247
- /* Warning (Yellow) */
248
- --haldi: var(--color-yellow-900);
249
- --haldi-dark: var(--color-yellow-1100);
250
- --haldi-darker: var(--color-yellow-1300);
251
- --haldi-light: var(--color-yellow-700);
252
- --haldi-lighter: var(--color-yellow-500);
253
- --haldi-lightest: var(--color-yellow-200);
254
-
255
- /* Primary (Blue) */
256
- --jal: var(--color-blue-1000);
257
- --jal-dark: var(--color-blue-1200);
258
- --jal-darker: var(--color-blue-1300);
259
- --jal-light: var(--color-blue-700);
260
- --jal-lighter: var(--color-blue-500);
261
- --jal-lightest: var(--color-blue-200);
262
-
263
- /* Accent 2 (Violet) */
264
- --jamun: var(--color-violet-1000);
265
- --jamun-dark: var(--color-violet-1200);
266
- --jamun-darker: var(--color-violet-1300);
267
- --jamun-light: var(--color-violet-700);
268
- --jamun-lighter: var(--color-violet-500);
269
- --jamun-lightest: var(--color-violet-200);
270
-
271
- /* Alert (Red) */
272
- --mirch: var(--color-red-1000);
273
- --mirch-dark: var(--color-red-1200);
274
- --mirch-darker: var(--color-red-1300);
275
- --mirch-light: var(--color-red-700);
276
- --mirch-lighter: var(--color-red-500);
277
- --mirch-lightest: var(--color-red-200);
278
-
279
- /* Accent 3 (Indigo) */
280
- --neel: var(--color-indigo-1000);
281
- --neel-dark: var(--color-indigo-1200);
282
- --neel-darker: var(--color-indigo-1300);
283
- --neel-light: var(--color-indigo-700);
284
- --neel-lighter: var(--color-indigo-500);
285
- --neel-lightest: var(--color-indigo-200);
286
-
287
- /* Success (Green) */
288
- --neem: var(--color-green-1000);
289
- --neem-dark: var(--color-green-1200);
290
- --neem-darker: var(--color-green-1300);
291
- --neem-light: var(--color-green-700);
292
- --neem-lighter: var(--color-green-500);
293
- --neem-lightest: var(--color-green-200);
294
-
295
- /* Neutral (Gray) */
296
- --night: var(--color-gray-1400);
297
- --night-light: var(--color-gray-1100);
298
- --night-lighter: var(--color-gray-900);
299
- --night-lightest: var(--color-gray-700);
300
-
301
- /* Accent 4 (Lime) */
302
- --nimbu: var(--color-lime-1000);
303
- --nimbu-dark: var(--color-lime-1200);
304
- --nimbu-darker: var(--color-lime-1300);
305
- --nimbu-light: var(--color-lime-700);
306
- --nimbu-lighter: var(--color-lime-500);
307
- --nimbu-lightest: var(--color-lime-200);
308
-
309
245
  /* Shadows */
310
246
  --shadow-0: #ffffff;
311
247
  --shadow-10: #ffffff;
312
248
  --shadow-20: #ffffff;
313
249
  --shadow-30: #ffffff;
314
250
 
315
- /* Secondary (Gray) */
316
- --stone: var(--color-gray-400);
317
- --stone-dark: var(--color-gray-500);
318
- --stone-light: var(--color-gray-300);
319
- --stone-lighter: var(--color-gray-200);
320
- --stone-lightest: var(--color-gray-100);
321
-
322
- /* Accent 1 (Orange) */
323
- --tawak: var(--color-orange-1000);
324
- --tawak-dark: var(--color-orange-1200);
325
- --tawak-darker: var(--color-orange-1300);
326
- --tawak-light: var(--color-orange-700);
327
- --tawak-lighter: var(--color-orange-500);
328
- --tawak-lightest: var(--color-orange-200);
329
-
330
251
  --white: var(--color-white);
331
252
 
332
253
  /**** Fonts ****/
@@ -336,208 +257,208 @@
336
257
  /* Colors */
337
258
 
338
259
  /* default */
339
- --primary: var(--jal);
340
- --secondary: var(--stone);
341
- --success: var(--neem);
342
- --alert: var(--mirch);
343
- --warning: var(--haldi);
344
- --accent1: var(--tawak);
345
- --accent2: var(--jamun);
346
- --accent3: var(--neel);
347
- --accent4: var(--nimbu);
348
- --accent5: var(--color-cyan-1000);
349
- --accent6: var(--color-magenta-1000);
350
- --accent7: var(--color-sea-1000);
351
- --accent8: var(--color-pink-1000);
352
- --inverse: var(--night);
260
+ --primary: var(--color-blue-900);
261
+ --secondary: var(--color-neutral-300);
262
+ --success: var(--color-green-900);
263
+ --alert: var(--color-red-900);
264
+ --warning: var(--color-yellow-800);
265
+ --accent1: var(--color-orange-900);
266
+ --accent2: var(--color-violet-900);
267
+ --accent3: var(--color-indigo-900);
268
+ --accent4: var(--color-lime-900);
269
+ --accent5: var(--color-cyan-900);
270
+ --accent6: var(--color-pink-900);
271
+ --accent7: var(--color-teal-900);
272
+ --accent8: var(--color-fuchsia-900);
273
+ --inverse: var(--color-neutral-1200);
353
274
 
354
275
  /* dark */
355
- --primary-dark: var(--jal-dark);
356
- --secondary-dark: var(--stone-dark);
357
- --success-dark: var(--neem-dark);
358
- --alert-dark: var(--mirch-dark);
359
- --warning-dark: var(--haldi-dark);
360
- --accent1-dark: var(--tawak-dark);
361
- --accent2-dark: var(--jamun-dark);
362
- --accent3-dark: var(--neel-dark);
363
- --accent4-dark: var(--nimbu-dark);
364
- --accent5-dark: var(--color-cyan-1200);
365
- --accent6-dark: var(--color-magenta-1200);
366
- --accent7-dark: var(--color-sea-1200);
367
- --accent8-dark: var(--color-pink-1200);
276
+ --primary-dark: var(--color-blue-1000);
277
+ --secondary-dark: var(--color-neutral-400);
278
+ --success-dark: var(--color-green-1000);
279
+ --alert-dark: var(--color-red-1000);
280
+ --warning-dark: var(--color-yellow-950);
281
+ --accent1-dark: var(--color-orange-1000);
282
+ --accent2-dark: var(--color-violet-1000);
283
+ --accent3-dark: var(--color-indigo-1000);
284
+ --accent4-dark: var(--color-lime-1000);
285
+ --accent5-dark: var(--color-cyan-1000);
286
+ --accent6-dark: var(--color-pink-1000);
287
+ --accent7-dark: var(--color-teal-1000);
288
+ --accent8-dark: var(--color-fuchsia-1000);
368
289
 
369
290
  /* darker */
370
- --primary-darker: var(--jal-darker);
371
- --success-darker: var(--neem-darker);
372
- --alert-darker: var(--mirch-darker);
373
- --warning-darker: var(--haldi-darker);
374
- --accent1-darker: var(--tawak-darker);
375
- --accent2-darker: var(--jamun-darker);
376
- --accent3-darker: var(--neel-darker);
377
- --accent4-darker: var(--nimbu-darker);
378
- --accent5-darker: var(--color-cyan-1300);
379
- --accent6-darker: var(--color-magenta-1300);
380
- --accent7-darker: var(--color-sea-1300);
381
- --accent8-darker: var(--color-pink-1300);
291
+ --primary-darker: var(--color-blue-1100);
292
+ --success-darker: var(--color-green-1100);
293
+ --alert-darker: var(--color-red-1100);
294
+ --warning-darker: var(--color-yellow-1100);
295
+ --accent1-darker: var(--color-orange-1100);
296
+ --accent2-darker: var(--color-violet-1100);
297
+ --accent3-darker: var(--color-indigo-1100);
298
+ --accent4-darker: var(--color-lime-1100);
299
+ --accent5-darker: var(--color-cyan-1100);
300
+ --accent6-darker: var(--color-pink-1100);
301
+ --accent7-darker: var(--color-teal-1100);
302
+ --accent8-darker: var(--color-fuchsia-1100);
382
303
 
383
304
  /* light */
384
- --primary-light: var(--jal-light);
385
- --secondary-light: var(--stone-light);
386
- --success-light: var(--neem-light);
387
- --alert-light: var(--mirch-light);
388
- --warning-light: var(--haldi-light);
389
- --accent1-light: var(--tawak-light);
390
- --accent2-light: var(--jamun-light);
391
- --accent3-light: var(--neel-light);
392
- --accent4-light: var(--nimbu-light);
393
- --accent5-light: var(--color-cyan-700);
394
- --accent6-light: var(--color-magenta-700);
395
- --accent7-light: var(--color-sea-700);
396
- --accent8-light: var(--color-pink-700);
397
- --inverse-light: var(--night-light);
305
+ --primary-light: var(--color-blue-600);
306
+ --secondary-light: var(--color-neutral-200);
307
+ --success-light: var(--color-green-600);
308
+ --alert-light: var(--color-red-600);
309
+ --warning-light: var(--color-yellow-600);
310
+ --accent1-light: var(--color-orange-600);
311
+ --accent2-light: var(--color-violet-600);
312
+ --accent3-light: var(--color-indigo-600);
313
+ --accent4-light: var(--color-lime-600);
314
+ --accent5-light: var(--color-cyan-600);
315
+ --accent6-light: var(--color-pink-600);
316
+ --accent7-light: var(--color-teal-600);
317
+ --accent8-light: var(--color-fuchsia-600);
318
+ --inverse-light: var(--color-neutral-950);
398
319
 
399
320
  /* lighter */
400
- --primary-lighter: var(--jal-lighter);
401
- --secondary-lighter: var(--stone-lighter);
402
- --success-lighter: var(--neem-lighter);
403
- --alert-lighter: var(--mirch-lighter);
404
- --warning-lighter: var(--haldi-lighter);
405
- --accent1-lighter: var(--tawak-lighter);
406
- --accent2-lighter: var(--jamun-lighter);
407
- --accent3-lighter: var(--neel-lighter);
408
- --accent4-lighter: var(--nimbu-lighter);
409
- --accent5-lighter: var(--color-cyan-500);
410
- --accent6-lighter: var(--color-magenta-500);
411
- --accent7-lighter: var(--color-sea-500);
412
- --accent8-lighter: var(--color-pink-500);
413
- --inverse-lighter: var(--night-lighter);
321
+ --primary-lighter: var(--color-blue-400);
322
+ --secondary-lighter: var(--color-neutral-100);
323
+ --success-lighter: var(--color-green-400);
324
+ --alert-lighter: var(--color-red-400);
325
+ --warning-lighter: var(--color-yellow-400);
326
+ --accent1-lighter: var(--color-orange-400);
327
+ --accent2-lighter: var(--color-violet-400);
328
+ --accent3-lighter: var(--color-indigo-400);
329
+ --accent4-lighter: var(--color-lime-400);
330
+ --accent5-lighter: var(--color-cyan-400);
331
+ --accent6-lighter: var(--color-pink-400);
332
+ --accent7-lighter: var(--color-teal-400);
333
+ --accent8-lighter: var(--color-fuchsia-400);
334
+ --inverse-lighter: var(--color-neutral-800);
414
335
 
415
336
  /* lightest */
416
- --primary-lightest: var(--jal-lightest);
417
- --secondary-lightest: var(--stone-lightest);
418
- --success-lightest: var(--neem-lightest);
419
- --alert-lightest: var(--mirch-lightest);
420
- --warning-lightest: var(--haldi-lightest);
421
- --accent1-lightest: var(--tawak-lightest);
422
- --accent2-lightest: var(--jamun-lightest);
423
- --accent3-lightest: var(--neel-lightest);
424
- --accent4-lightest: var(--nimbu-lightest);
425
- --accent5-lightest: var(--color-cyan-200);
426
- --accent6-lightest: var(--color-magenta-200);
427
- --accent7-lightest: var(--color-sea-200);
428
- --accent8-lightest: var(--color-pink-200);
429
- --inverse-lightest: var(--night-lightest);
337
+ --primary-lightest: var(--color-blue-100);
338
+ --secondary-lightest: var(--color-neutral-50);
339
+ --success-lightest: var(--color-green-100);
340
+ --alert-lightest: var(--color-red-100);
341
+ --warning-lightest: var(--color-yellow-100);
342
+ --accent1-lightest: var(--color-orange-100);
343
+ --accent2-lightest: var(--color-violet-100);
344
+ --accent3-lightest: var(--color-indigo-100);
345
+ --accent4-lightest: var(--color-lime-100);
346
+ --accent5-lightest: var(--color-cyan-100);
347
+ --accent6-lightest: var(--color-pink-100);
348
+ --accent7-lightest: var(--color-teal-100);
349
+ --accent8-lightest: var(--color-fuchsia-100);
350
+ --inverse-lightest: var(--color-neutral-600);
430
351
 
431
352
  /* Focus */
432
353
  --primary-focus: var(--primary-dark);
433
- --inverse-focus: var(--night);
354
+ --inverse-focus: var(--color-neutral-1200);
434
355
 
435
356
  /* Ultra Light */
436
- --primary-ultra-light: var(--color-blue-100);
437
- --success-ultra-light: var(--color-green-100);
438
- --alert-ultra-light: var(--color-red-100);
439
- --warning-ultra-light: var(--color-yellow-100);
440
- --accent1-ultra-light: var(--color-orange-100);
441
- --accent2-ultra-light: var(--color-violet-100);
442
- --accent3-ultra-light: var(--color-indigo-100);
443
- --accent4-ultra-light: var(--color-lime-100);
444
- --accent5-ultra-light: var(--color-cyan-100);
445
- --accent6-ultra-light: var(--color-magenta-100);
446
- --accent7-ultra-light: var(--color-sea-100);
447
- --accent8-ultra-light: var(--color-pink-100);
357
+ --primary-ultra-light: var(--color-blue-50);
358
+ --success-ultra-light: var(--color-green-50);
359
+ --alert-ultra-light: var(--color-red-50);
360
+ --warning-ultra-light: var(--color-yellow-50);
361
+ --accent1-ultra-light: var(--color-orange-50);
362
+ --accent2-ultra-light: var(--color-violet-50);
363
+ --accent3-ultra-light: var(--color-indigo-50);
364
+ --accent4-ultra-light: var(--color-lime-50);
365
+ --accent5-ultra-light: var(--color-cyan-50);
366
+ --accent6-ultra-light: var(--color-pink-50);
367
+ --accent7-ultra-light: var(--color-teal-50);
368
+ --accent8-ultra-light: var(--color-fuchsia-50);
448
369
 
449
370
  /* Numeric semantic steps */
450
- --primary-300: var(--color-blue-300);
451
- --primary-400: var(--color-blue-400);
452
- --primary-600: var(--color-blue-600);
453
- --primary-800: var(--color-blue-800);
454
- --primary-900: var(--color-blue-900);
455
- --primary-1100: var(--color-blue-1100);
456
- --primary-1400: var(--color-blue-1400);
457
- --success-300: var(--color-green-300);
458
- --success-400: var(--color-green-400);
459
- --success-600: var(--color-green-600);
460
- --success-800: var(--color-green-800);
461
- --success-900: var(--color-green-900);
462
- --success-1100: var(--color-green-1100);
463
- --success-1400: var(--color-green-1400);
464
- --alert-300: var(--color-red-300);
465
- --alert-400: var(--color-red-400);
466
- --alert-600: var(--color-red-600);
467
- --alert-800: var(--color-red-800);
468
- --alert-900: var(--color-red-900);
469
- --alert-1100: var(--color-red-1100);
470
- --alert-1400: var(--color-red-1400);
471
- --warning-300: var(--color-yellow-300);
472
- --warning-400: var(--color-yellow-400);
473
- --warning-600: var(--color-yellow-600);
474
- --warning-800: var(--color-yellow-800);
475
- --warning-1000: var(--color-yellow-1000);
476
- --warning-1200: var(--color-yellow-1200);
477
- --warning-1400: var(--color-yellow-1400);
478
- --accent1-300: var(--color-orange-300);
479
- --accent1-400: var(--color-orange-400);
480
- --accent1-600: var(--color-orange-600);
481
- --accent1-800: var(--color-orange-800);
482
- --accent1-900: var(--color-orange-900);
483
- --accent1-1100: var(--color-orange-1100);
484
- --accent1-1400: var(--color-orange-1400);
485
- --accent2-300: var(--color-violet-300);
486
- --accent2-400: var(--color-violet-400);
487
- --accent2-600: var(--color-violet-600);
488
- --accent2-800: var(--color-violet-800);
489
- --accent2-900: var(--color-violet-900);
490
- --accent2-1100: var(--color-violet-1100);
491
- --accent2-1400: var(--color-violet-1400);
492
- --accent3-300: var(--color-indigo-300);
493
- --accent3-400: var(--color-indigo-400);
494
- --accent3-600: var(--color-indigo-600);
495
- --accent3-800: var(--color-indigo-800);
496
- --accent3-900: var(--color-indigo-900);
497
- --accent3-1100: var(--color-indigo-1100);
498
- --accent3-1400: var(--color-indigo-1400);
499
- --accent4-300: var(--color-lime-300);
500
- --accent4-400: var(--color-lime-400);
501
- --accent4-600: var(--color-lime-600);
502
- --accent4-800: var(--color-lime-800);
503
- --accent4-900: var(--color-lime-900);
504
- --accent4-1100: var(--color-lime-1100);
505
- --accent4-1400: var(--color-lime-1400);
506
- --accent5-300: var(--color-cyan-300);
507
- --accent5-400: var(--color-cyan-400);
508
- --accent5-600: var(--color-cyan-600);
509
- --accent5-800: var(--color-cyan-800);
510
- --accent5-900: var(--color-cyan-900);
511
- --accent5-1100: var(--color-cyan-1100);
512
- --accent5-1400: var(--color-cyan-1400);
513
- --accent6-300: var(--color-magenta-300);
514
- --accent6-400: var(--color-magenta-400);
515
- --accent6-600: var(--color-magenta-600);
516
- --accent6-800: var(--color-magenta-800);
517
- --accent6-900: var(--color-magenta-900);
518
- --accent6-1100: var(--color-magenta-1100);
519
- --accent6-1400: var(--color-magenta-1400);
520
- --accent7-300: var(--color-sea-300);
521
- --accent7-400: var(--color-sea-400);
522
- --accent7-600: var(--color-sea-600);
523
- --accent7-800: var(--color-sea-800);
524
- --accent7-900: var(--color-sea-900);
525
- --accent7-1100: var(--color-sea-1100);
526
- --accent7-1400: var(--color-sea-1400);
527
- --accent8-300: var(--color-pink-300);
528
- --accent8-400: var(--color-pink-400);
529
- --accent8-600: var(--color-pink-600);
530
- --accent8-800: var(--color-pink-800);
531
- --accent8-900: var(--color-pink-900);
532
- --accent8-1100: var(--color-pink-1100);
533
- --accent8-1400: var(--color-pink-1400);
371
+ --primary-300: var(--color-blue-200);
372
+ --primary-400: var(--color-blue-300);
373
+ --primary-600: var(--color-blue-500);
374
+ --primary-800: var(--color-blue-700);
375
+ --primary-900: var(--color-blue-800);
376
+ --primary-1100: var(--color-blue-950);
377
+ --primary-1400: var(--color-blue-1200);
378
+ --success-300: var(--color-green-200);
379
+ --success-400: var(--color-green-300);
380
+ --success-600: var(--color-green-500);
381
+ --success-800: var(--color-green-700);
382
+ --success-900: var(--color-green-800);
383
+ --success-1100: var(--color-green-950);
384
+ --success-1400: var(--color-green-1200);
385
+ --alert-300: var(--color-red-200);
386
+ --alert-400: var(--color-red-300);
387
+ --alert-600: var(--color-red-500);
388
+ --alert-800: var(--color-red-700);
389
+ --alert-900: var(--color-red-800);
390
+ --alert-1100: var(--color-red-950);
391
+ --alert-1400: var(--color-red-1200);
392
+ --warning-300: var(--color-yellow-200);
393
+ --warning-400: var(--color-yellow-300);
394
+ --warning-600: var(--color-yellow-500);
395
+ --warning-800: var(--color-yellow-700);
396
+ --warning-1000: var(--color-yellow-900);
397
+ --warning-1200: var(--color-yellow-1000);
398
+ --warning-1400: var(--color-yellow-1200);
399
+ --accent1-300: var(--color-orange-200);
400
+ --accent1-400: var(--color-orange-300);
401
+ --accent1-600: var(--color-orange-500);
402
+ --accent1-800: var(--color-orange-700);
403
+ --accent1-900: var(--color-orange-800);
404
+ --accent1-1100: var(--color-orange-950);
405
+ --accent1-1400: var(--color-orange-1200);
406
+ --accent2-300: var(--color-violet-200);
407
+ --accent2-400: var(--color-violet-300);
408
+ --accent2-600: var(--color-violet-500);
409
+ --accent2-800: var(--color-violet-700);
410
+ --accent2-900: var(--color-violet-800);
411
+ --accent2-1100: var(--color-violet-950);
412
+ --accent2-1400: var(--color-violet-1200);
413
+ --accent3-300: var(--color-indigo-200);
414
+ --accent3-400: var(--color-indigo-300);
415
+ --accent3-600: var(--color-indigo-500);
416
+ --accent3-800: var(--color-indigo-700);
417
+ --accent3-900: var(--color-indigo-800);
418
+ --accent3-1100: var(--color-indigo-950);
419
+ --accent3-1400: var(--color-indigo-1200);
420
+ --accent4-300: var(--color-lime-200);
421
+ --accent4-400: var(--color-lime-300);
422
+ --accent4-600: var(--color-lime-500);
423
+ --accent4-800: var(--color-lime-700);
424
+ --accent4-900: var(--color-lime-800);
425
+ --accent4-1100: var(--color-lime-950);
426
+ --accent4-1400: var(--color-lime-1200);
427
+ --accent5-300: var(--color-cyan-200);
428
+ --accent5-400: var(--color-cyan-300);
429
+ --accent5-600: var(--color-cyan-500);
430
+ --accent5-800: var(--color-cyan-700);
431
+ --accent5-900: var(--color-cyan-800);
432
+ --accent5-1100: var(--color-cyan-950);
433
+ --accent5-1400: var(--color-cyan-1200);
434
+ --accent6-300: var(--color-pink-200);
435
+ --accent6-400: var(--color-pink-300);
436
+ --accent6-600: var(--color-pink-500);
437
+ --accent6-800: var(--color-pink-700);
438
+ --accent6-900: var(--color-pink-800);
439
+ --accent6-1100: var(--color-pink-950);
440
+ --accent6-1400: var(--color-pink-1200);
441
+ --accent7-300: var(--color-teal-200);
442
+ --accent7-400: var(--color-teal-300);
443
+ --accent7-600: var(--color-teal-500);
444
+ --accent7-800: var(--color-teal-700);
445
+ --accent7-900: var(--color-teal-800);
446
+ --accent7-1100: var(--color-teal-950);
447
+ --accent7-1400: var(--color-teal-1200);
448
+ --accent8-300: var(--color-fuchsia-200);
449
+ --accent8-400: var(--color-fuchsia-300);
450
+ --accent8-600: var(--color-fuchsia-500);
451
+ --accent8-800: var(--color-fuchsia-700);
452
+ --accent8-900: var(--color-fuchsia-800);
453
+ --accent8-1100: var(--color-fuchsia-950);
454
+ --accent8-1400: var(--color-fuchsia-1200);
534
455
 
535
456
  /* Neutral semantic steps */
536
- --secondary-600: var(--color-gray-600);
537
- --inverse-800: var(--color-gray-800);
538
- --inverse-1000: var(--color-gray-1000);
539
- --inverse-1200: var(--color-gray-1200);
540
- --inverse-1300: var(--color-gray-1300);
457
+ --secondary-600: var(--color-neutral-500);
458
+ --inverse-800: var(--color-neutral-700);
459
+ --inverse-1000: var(--color-neutral-900);
460
+ --inverse-1200: var(--color-neutral-1000);
461
+ --inverse-1300: var(--color-neutral-1100);
541
462
 
542
463
  /* shadow */
543
464
  --primary-shadow: rgba(0, 96, 214, 0.16);
@@ -556,8 +477,8 @@
556
477
  --inverse-shadow: rgba(26, 26, 26, 0.16);
557
478
 
558
479
  /* Text colors */
559
- --text: var(--night);
560
- --text-subtle: var(--night-lighter);
480
+ --text: var(--inverse);
481
+ --text-subtle: var(--inverse-lighter);
561
482
  --text-link: var(--primary);
562
483
  --text-disabled: var(--inverse-lightest);
563
484
  --text-destructive: var(--alert);
@@ -636,10 +557,10 @@
636
557
  --shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
637
558
  --shadow-spread: 0 0 0 3px;
638
559
 
639
- /*
560
+ /*
640
561
  Grid breakpoints
641
562
  Define the minimum dimensions at which your layout will change,
642
- adapting to different screen sizes, for use in media queries.
563
+ adapting to different screen sizes, for use in media queries.
643
564
  */
644
565
 
645
566
  --grid-s-breakpoint: 576px;
@@ -647,9 +568,9 @@
647
568
  --grid-l-breakpoint: 992px;
648
569
  --grid-xl-breakpoint: 1200px;
649
570
 
650
- /*
571
+ /*
651
572
  Grid columns
652
- Set the number of columns and specify the width of the gutters.
573
+ Set the number of columns and specify the width of the gutters.
653
574
  */
654
575
 
655
576
  --grid-columns: 12;
@@ -3556,7 +3477,7 @@ body {
3556
3477
 
3557
3478
  .Chip--selection {
3558
3479
  background: var(--shadow-0);
3559
- border-color: var(--stone);
3480
+ border-color: var(--secondary);
3560
3481
  cursor: pointer;
3561
3482
  }
3562
3483
 
@@ -6208,6 +6129,18 @@ body {
6208
6129
  1 100%;
6209
6130
  }
6210
6131
 
6132
+ .Grid-srOnly {
6133
+ position: absolute;
6134
+ width: var(--spacing-2-5);
6135
+ height: var(--spacing-2-5);
6136
+ padding: 0;
6137
+ margin: calc(-1 * var(--spacing-2-5));
6138
+ overflow: hidden;
6139
+ clip: rect(0, 0, 0, 0);
6140
+ white-space: nowrap;
6141
+ border: 0;
6142
+ }
6143
+
6211
6144
  .HorizontalNav {
6212
6145
  display: flex;
6213
6146
  }
@@ -6647,7 +6580,7 @@ body {
6647
6580
  font-weight: var(--font-weight-normal);
6648
6581
  font-size: var(--font-size);
6649
6582
  line-height: var(--font-height-s);
6650
- color: var(--night);
6583
+ color: var(--inverse);
6651
6584
  padding: 0;
6652
6585
  border: none;
6653
6586
  background: transparent;
@@ -8053,7 +7986,7 @@ body {
8053
7986
  font-weight: var(--font-weight-normal);
8054
7987
  font-size: var(--font-size);
8055
7988
  line-height: var(--font-height-s);
8056
- color: var(--night);
7989
+ color: var(--inverse);
8057
7990
  padding: 0;
8058
7991
  border: none;
8059
7992
  background: transparent;
@@ -9503,15 +9436,41 @@ body {
9503
9436
  transition: var(--duration--fast-01) var(--standard-productive-curve);
9504
9437
  }
9505
9438
 
9439
+ .Select-trigger:has(.Select-trigger-control:focus-visible) {
9440
+ outline: var(--border-width-05) solid var(--primary-focus);
9441
+ outline-offset: var(--spacing-05);
9442
+ }
9443
+
9444
+ .Select-trigger--disabled {
9445
+ pointer-events: none;
9446
+ }
9447
+
9448
+ .Select-trigger-control {
9449
+ display: flex;
9450
+ align-items: center;
9451
+ flex: 1;
9452
+ min-width: 0;
9453
+ height: 100%;
9454
+ background: transparent;
9455
+ border: 0;
9456
+ padding: 0;
9457
+ cursor: pointer;
9458
+ color: inherit;
9459
+ font: inherit;
9460
+ }
9461
+
9462
+ .Select-trigger-control:focus-visible {
9463
+ outline: none;
9464
+ }
9465
+
9506
9466
  .Select-trigger--filled {
9507
9467
  background: var(--secondary-light);
9508
9468
  color: var(--text);
9509
9469
  }
9510
9470
 
9511
- .Select-trigger--filled:disabled {
9471
+ .Select-trigger--filled.Select-trigger--disabled {
9512
9472
  background: var(--secondary-lighter);
9513
9473
  color: var(--text-disabled);
9514
- pointer-events: none;
9515
9474
  }
9516
9475
 
9517
9476
  .Select-trigger--filled:active,
@@ -9527,7 +9486,7 @@ body {
9527
9486
  color: var(--text);
9528
9487
  }
9529
9488
 
9530
- .Select-trigger--filled:focus-visible {
9489
+ .Select-trigger--filled:has(.Select-trigger-control:focus-visible) {
9531
9490
  background-color: var(--secondary-light);
9532
9491
  }
9533
9492
 
@@ -9554,7 +9513,7 @@ body {
9554
9513
  animation-duration: var(--duration--fast-02);
9555
9514
  }
9556
9515
 
9557
- .Select-trigger--outlined:disabled {
9516
+ .Select-trigger--outlined.Select-trigger--disabled {
9558
9517
  color: var(--inverse-lightest) !important;
9559
9518
  background: var(--secondary-lightest) !important;
9560
9519
  border: var(--border-width-2-5) solid var(--secondary-lighter) !important;