@pisodev/ui-common 0.0.6 → 0.0.7

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 (13) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.esm.js +3 -0
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +3 -0
  6. package/dist/index.js.map +1 -1
  7. package/dist/theme/_colors.scss +718 -0
  8. package/dist/theme/_index.scss +2 -0
  9. package/dist/theme/colors.css +847 -0
  10. package/dist/typography/_index.scss +1 -0
  11. package/dist/typography/_typography.scss +606 -0
  12. package/dist/typography/typography.css +540 -0
  13. package/package.json +16 -1
package/dist/theme/colors.css ADDED
@@ -0,0 +1,847 @@
1
+ /* Auto-generated file. Do not edit manually. */
2
+ /* Generated by build-colors.ts */
3
+
4
+ /* Default (Light mode) */
5
+ :root {
6
+ color-scheme: light dark;
7
+ --gray-50: #F6F8FA;
8
+ --gray-100: #EEF0F2;
9
+ --gray-200: #E6E8EA;
10
+ --gray-300: #DADCDD;
11
+ --gray-400: #CED0D2;
12
+ --gray-500: #AAACAE;
13
+ --gray-600: #86888A;
14
+ --gray-700: #4C4E50;
15
+ --gray-800: #2C2E30;
16
+ --gray-900: #0C0E10;
17
+ --gray-00: #FFFFFF;
18
+ --blue1-50: #AFCFFF;
19
+ --blue1-100: #8EBCFF;
20
+ --blue1-200: #6DA8FF;
21
+ --blue1-300: #4C95FF;
22
+ --blue1-400: #1473FF;
23
+ --blue1-500: #1267E6;
24
+ --blue1-600: #0F57C2;
25
+ --blue1-700: #0C4599;
26
+ --blue1-800: #093370;
27
+ --blue1-900: #06234D;
28
+ --blue1-00: #C7DDFF;
29
+ --blue2-50: #A9C4FF;
30
+ --blue2-100: #85ACFF;
31
+ --blue2-200: #6194FF;
32
+ --blue2-300: #3E7CFF;
33
+ --blue2-400: #0152FF;
34
+ --blue2-500: #014AE6;
35
+ --blue2-600: #013EC2;
36
+ --blue2-700: #013199;
37
+ --blue2-800: #002470;
38
+ --blue2-900: #00194D;
39
+ --blue2-00: #C2D5FF;
40
+ --green-50: #B0ECDA;
41
+ --green-100: #90E4CB;
42
+ --green-200: #70DCBB;
43
+ --green-300: #4FD4AC;
44
+ --green-400: #18C792;
45
+ --green-500: #16B383;
46
+ --green-600: #12976F;
47
+ --green-700: #0E7758;
48
+ --green-800: #0B5840;
49
+ --green-900: #073C2C;
50
+ --green-00: #C8F2E5;
51
+ --purple-50: #C0CBFC;
52
+ --purple-100: #A7B6FA;
53
+ --purple-200: #8DA1F9;
54
+ --purple-300: #738BF7;
55
+ --purple-400: #4767F5;
56
+ --purple-500: #405DDC;
57
+ --purple-600: #364EBA;
58
+ --purple-700: #2B3E93;
59
+ --purple-800: #1F2D6C;
60
+ --purple-900: #151F4A;
61
+ --purple-00: #D3DAFD;
62
+ --yellow-50: #FAE7A8;
63
+ --yellow-100: #F8DD84;
64
+ --yellow-200: #F6D361;
65
+ --yellow-300: #F4C93D;
66
+ --yellow-400: #F0B800;
67
+ --yellow-500: #D8A600;
68
+ --yellow-600: #B68C00;
69
+ --yellow-700: #906E00;
70
+ --yellow-800: #6A5100;
71
+ --yellow-900: #483700;
72
+ --yellow-00: #FBEEC2;
73
+ --red-50: #F8BFBF;
74
+ --red-100: #F5A4A4;
75
+ --red-200: #F38A8A;
76
+ --red-300: #F06F6F;
77
+ --red-400: #EB4242;
78
+ --red-500: #D43B3B;
79
+ --red-600: #B33232;
80
+ --red-700: #8D2828;
81
+ --red-800: #681D1D;
82
+ --red-900: #471414;
83
+ --red-00: #FAD2D2;
84
+ --gray-alpha-30: #FFFFFF08;
85
+ --gray-alpha-50: #FFFFFF0D;
86
+ --gray-alpha-100: #FFFFFF1A;
87
+ --gray-alpha-200: #FFFFFF33;
88
+ --gray-alpha-500: #FFFFFF80;
89
+ --blue1-alpha-30: #1473FF0A;
90
+ --blue1-alpha-50: #1473FF14;
91
+ --blue1-alpha-100: #1473FF24;
92
+ --blue1-alpha-200: #1473FF33;
93
+ --blue1-alpha-500: #1473FF80;
94
+ --blue2-alpha-30: #0152FF0A;
95
+ --blue2-alpha-50: #0152FF14;
96
+ --blue2-alpha-100: #0152FF24;
97
+ --blue2-alpha-200: #0152FF33;
98
+ --blue2-alpha-500: #0152FF80;
99
+ --green-alpha-30: #18C7920A;
100
+ --green-alpha-50: #18C79214;
101
+ --green-alpha-100: #18C79224;
102
+ --green-alpha-200: #18C7924D;
103
+ --green-alpha-500: #18C79299;
104
+ --purple-alpha-30: #4767F50A;
105
+ --purple-alpha-50: #4767F514;
106
+ --purple-alpha-100: #4767F524;
107
+ --purple-alpha-200: #4767F533;
108
+ --purple-alpha-500: #4767F580;
109
+ --yellow-alpha-30: #F0B8000A;
110
+ --yellow-alpha-50: #F0B80014;
111
+ --yellow-alpha-100: #F0B80024;
112
+ --yellow-alpha-200: #F0B80033;
113
+ --yellow-alpha-500: #F0B80080;
114
+ --red-alpha-30: #EB42420A;
115
+ --red-alpha-50: #EB424214;
116
+ --red-alpha-100: #EB424224;
117
+ --red-alpha-200: #EB424233;
118
+ --red-alpha-500: #EB424280;
119
+ --white-alpha-30: #00000008;
120
+ --white-alpha-50: #0000000D;
121
+ --white-alpha-100: #0000001A;
122
+ --white-alpha-200: #00000033;
123
+ --white-alpha-500: #00000080;
124
+ --gray-semantic-50: #FFFFFF;
125
+ --gray-semantic-100: #F6F8FA;
126
+ --gray-semantic-00: #F6F8FA;
127
+ --semantic-paper-contents: var(--gray-50);
128
+ --semantic-paper-default: var(--gray-00);
129
+ --semantic-paper-dialog: var(--gray-semantic-50);
130
+ --semantic-paper-neutral: var(--gray-semantic-00);
131
+ --semantic-paper-sheet: var(--gray-semantic-50);
132
+ --semantic-divider-divider-1: var(--white-alpha-50);
133
+ --semantic-divider-divider-2: var(--gray-100);
134
+ --semantic-divider-divider-3: var(--white-alpha-100);
135
+ --semantic-divider-divider-4: var(--white-alpha-200);
136
+ --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
137
+ --semantic-overlay-overlay-low: var(--static-black-alpha-200);
138
+ --semantic-brand-credit-primary: var(--green-400);
139
+ --semantic-brand-credit-primary-hover: var(--green-600);
140
+ --semantic-brand-credit-primary-low: var(--green-alpha-50);
141
+ --semantic-brand-credit-primary-low-hover: var(--green-alpha-100);
142
+ --semantic-brand-credit-primary-low-pressed: var(--green-alpha-100);
143
+ --semantic-brand-credit-primary-pressed: var(--green-600);
144
+ --semantic-brand-gluwa-primary: var(--blue1-400);
145
+ --semantic-brand-gluwa-primary-hover: var(--blue1-600);
146
+ --semantic-brand-gluwa-primary-low: var(--blue1-alpha-50);
147
+ --semantic-brand-gluwa-primary-low-hover: var(--blue1-alpha-100);
148
+ --semantic-brand-gluwa-primary-low-pressed: var(--blue1-alpha-100);
149
+ --semantic-brand-gluwa-primary-pressed: var(--blue1-600);
150
+ --semantic-brand-space-primary: var(--purple-400);
151
+ --semantic-brand-space-primary-hover: var(--purple-600);
152
+ --semantic-brand-space-primary-low: var(--purple-alpha-50);
153
+ --semantic-brand-space-primary-low-hover: var(--purple-alpha-100);
154
+ --semantic-brand-space-primary-low-pressed: var(--purple-alpha-100);
155
+ --semantic-brand-space-primary-pressed: var(--purple-600);
156
+ --semantic-brand-trugi-primary: var(--blue2-400);
157
+ --semantic-brand-trugi-primary-hover: var(--blue2-600);
158
+ --semantic-brand-trugi-primary-legacy: #2848FEFF;
159
+ --semantic-brand-trugi-primary-low: var(--blue2-alpha-50);
160
+ --semantic-brand-trugi-primary-low-hover: var(--blue2-alpha-100);
161
+ --semantic-brand-trugi-primary-low-pressed: var(--blue2-alpha-100);
162
+ --semantic-brand-trugi-primary-pressed: var(--blue2-600);
163
+ --semantic-information-caution: var(--yellow-400);
164
+ --semantic-information-caution-low: var(--yellow-alpha-50);
165
+ --semantic-information-error: var(--red-400);
166
+ --semantic-information-error-low: var(--red-alpha-50);
167
+ --semantic-information-info: var(--blue1-400);
168
+ --semantic-information-info-low: var(--blue1-alpha-50);
169
+ --semantic-information-success: var(--green-400);
170
+ --semantic-information-success-low: var(--green-alpha-50);
171
+ --static-black-alpha-100: #0000001A;
172
+ --static-black-alpha-200: #00000033;
173
+ --static-black-alpha-30: #00000008;
174
+ --static-black-alpha-50: #0000000D;
175
+ --static-black-alpha-500: #00000080;
176
+ --static-black-alpha-800: #000000CC;
177
+ --static-black-main: #000000FF;
178
+ --static-white-alpha-100: #FFFFFF1A;
179
+ --static-white-alpha-200: #FFFFFF33;
180
+ --static-white-alpha-30: #FFFFFF08;
181
+ --static-white-alpha-50: #FFFFFF0D;
182
+ --static-white-alpha-500: #FFFFFF80;
183
+ --static-white-alpha-800: #FFFFFFCC;
184
+ --static-white-main: #FFFFFFFF;
185
+ --static-color-blue1-400: #1473FFFF;
186
+ --static-color-blue1-700: #ACD2FFFF;
187
+ --static-color-blue2-400: #0152FFFF;
188
+ --static-color-blue2-700: #85ACFFFF;
189
+ --static-color-gluwa-lightblue: #67CEFFFF;
190
+ --static-color-gluwa-navy: #292751FF;
191
+ --static-color-gray-00: #0C0E10FF;
192
+ --static-color-gray-200: #36383AFF;
193
+ --static-color-gray-alpha-100: #0C0E101A;
194
+ --static-color-gray-alpha-200: #0C0E1033;
195
+ --static-color-gray-alpha-500: #0C0E1080;
196
+ --static-color-gray-alpha-700: #0C0E10B2;
197
+ --static-color-green-400: #1EEEAFFF;
198
+ --static-color-green-700: #93F7D9FF;
199
+ --static-color-purple-400: #4A6BFFFF;
200
+ --static-color-purple-700: #A8B8FFFF;
201
+ --static-color-red-400: #FF4848FF;
202
+ --static-color-red-700: #FFA7A7FF;
203
+ --static-color-trugi-blue-200-legacy: #D9E8F9FF;
204
+ --static-color-trugi-blue-300-legacy: #C0DAF8FF;
205
+ --static-color-trugi-blue-700-legacy: #132DBBFF;
206
+ --static-color-trugi-blue-alpha: #2848FE24;
207
+ --static-color-trugi-green: #4EE28CFF;
208
+ --static-color-trugi-orange: #FF8A4BFF;
209
+ --static-color-trugi-pink: #FF6CBFFF;
210
+ --static-color-trugi-purple: #B5AAFFFF;
211
+ --static-color-yellow-400: #FFC400FF;
212
+ --static-color-yellow-700: #FFE384FF;
213
+ }
214
+
215
+ /* Dark mode (OS preference) */
216
+ @media (prefers-color-scheme: dark) {
217
+ :root:not(.light) {
218
+ --gray-50: #1A1C1E;
219
+ --gray-100: #282A2C;
220
+ --gray-200: #36383A;
221
+ --gray-300: #444648;
222
+ --gray-400: #525456;
223
+ --gray-500: #66686A;
224
+ --gray-600: #888A8C;
225
+ --gray-700: #AAACAE;
226
+ --gray-800: #CCCED0;
227
+ --gray-900: #FFFFFF;
228
+ --gray-00: #0C0E10;
229
+ --blue1-50: #0C4599;
230
+ --blue1-100: #0E51B3;
231
+ --blue1-200: #105CCC;
232
+ --blue1-300: #1267E6;
233
+ --blue1-400: #1473FF;
234
+ --blue1-500: #4C95FF;
235
+ --blue1-600: #6DA8FF;
236
+ --blue1-700: #8ECBFF;
237
+ --blue1-800: #AFCFFF;
238
+ --blue1-900: #C7DDFF;
239
+ --blue1-00: #0A3980;
240
+ --blue2-50: #1F4699;
241
+ --blue2-100: #2451B3;
242
+ --blue2-200: #295DCC;
243
+ --blue2-300: #2E68E6;
244
+ --blue2-400: #3374FF;
245
+ --blue2-500: #6495FF;
246
+ --blue2-600: #80A9FF;
247
+ --blue2-700: #9DBCFF;
248
+ --blue2-800: #BAD0FF;
249
+ --blue2-900: #CEDEFF;
250
+ --blue2-00: #1A3A80;
251
+ --green-50: #128F69;
252
+ --green-100: #15A77B;
253
+ --green-200: #18BE8C;
254
+ --green-300: #1BD69E;
255
+ --green-400: #1EEEAF;
256
+ --green-500: #54F2C2;
257
+ --green-600: #73F4CD;
258
+ --green-700: #93F7D9;
259
+ --green-800: #B2F9E4;
260
+ --green-900: #C9FBEC;
261
+ --green-00: #0F7758;
262
+ --purple-50: #2C4099;
263
+ --purple-100: #344BB3;
264
+ --purple-200: #3B56CC;
265
+ --purple-300: #4360E6;
266
+ --purple-400: #4A6BFF;
267
+ --purple-500: #758FFF;
268
+ --purple-600: #8FA3FF;
269
+ --purple-700: #A8B8FF;
270
+ --purple-800: #C1CDFF;
271
+ --purple-900: #D4DBFF;
272
+ --purple-00: #253580;
273
+ --yellow-50: #997600;
274
+ --yellow-100: #B38900;
275
+ --yellow-200: #CC9D00;
276
+ --yellow-300: #E6B000;
277
+ --yellow-400: #FFC400;
278
+ --yellow-500: #FFD23D;
279
+ --yellow-600: #FFDA61;
280
+ --yellow-700: #FFE384;
281
+ --yellow-800: #FFEBA8;
282
+ --yellow-900: #FFF1C2;
283
+ --yellow-00: #806200;
284
+ --red-50: #992B2B;
285
+ --red-100: #B33232;
286
+ --red-200: #CC3A3A;
287
+ --red-300: #E64141;
288
+ --red-400: #FF4848;
289
+ --red-500: #FF7474;
290
+ --red-600: #FF8E8E;
291
+ --red-700: #FFA7A7;
292
+ --red-800: #FFC1C1;
293
+ --red-900: #FFD3D3;
294
+ --red-00: #802424;
295
+ --gray-alpha-30: #00000008;
296
+ --gray-alpha-50: #0000000D;
297
+ --gray-alpha-100: #0000001A;
298
+ --gray-alpha-200: #00000033;
299
+ --gray-alpha-500: #00000080;
300
+ --blue1-alpha-30: #1473FF0A;
301
+ --blue1-alpha-50: #1473FF14;
302
+ --blue1-alpha-100: #1473FF24;
303
+ --blue1-alpha-200: #1473FF33;
304
+ --blue1-alpha-500: #1473FF80;
305
+ --blue2-alpha-30: #3374FF0A;
306
+ --blue2-alpha-50: #3374FF14;
307
+ --blue2-alpha-100: #3374FF24;
308
+ --blue2-alpha-200: #3374FF33;
309
+ --blue2-alpha-500: #3374FF80;
310
+ --green-alpha-30: #1EEEAF0A;
311
+ --green-alpha-50: #1EEEAF14;
312
+ --green-alpha-100: #1EEEAF24;
313
+ --green-alpha-200: #1EEEAF33;
314
+ --green-alpha-500: #1EEEAF80;
315
+ --purple-alpha-30: #4A6BFF0A;
316
+ --purple-alpha-50: #4A6BFF14;
317
+ --purple-alpha-100: #4A6BFF24;
318
+ --purple-alpha-200: #4A6BFF33;
319
+ --purple-alpha-500: #4A6BFF80;
320
+ --yellow-alpha-30: #FFC4000A;
321
+ --yellow-alpha-50: #FFC40014;
322
+ --yellow-alpha-100: #FFC40024;
323
+ --yellow-alpha-200: #FFC40033;
324
+ --yellow-alpha-500: #FFC40080;
325
+ --red-alpha-30: #FF48480A;
326
+ --red-alpha-50: #FF484814;
327
+ --red-alpha-100: #FF484824;
328
+ --red-alpha-200: #FF484833;
329
+ --red-alpha-500: #FF484880;
330
+ --white-alpha-30: #FFFFFF08;
331
+ --white-alpha-50: #FFFFFF0D;
332
+ --white-alpha-100: #FFFFFF1A;
333
+ --white-alpha-200: #FFFFFF33;
334
+ --white-alpha-500: #FFFFFF80;
335
+ --gray-semantic-50: #1A1C1E;
336
+ --gray-semantic-100: #282A2C;
337
+ --gray-semantic-00: #0C0E10;
338
+ --semantic-paper-contents: var(--gray-50);
339
+ --semantic-paper-default: var(--gray-00);
340
+ --semantic-paper-dialog: var(--gray-semantic-50);
341
+ --semantic-paper-neutral: var(--gray-semantic-00);
342
+ --semantic-paper-sheet: var(--gray-semantic-50);
343
+ --semantic-divider-divider-1: var(--white-alpha-50);
344
+ --semantic-divider-divider-2: var(--gray-100);
345
+ --semantic-divider-divider-3: var(--white-alpha-100);
346
+ --semantic-divider-divider-4: var(--white-alpha-200);
347
+ --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
348
+ --semantic-overlay-overlay-low: var(--static-black-alpha-200);
349
+ --semantic-brand-credit-primary: var(--green-400);
350
+ --semantic-brand-credit-primary-hover: var(--green-600);
351
+ --semantic-brand-credit-primary-low: var(--green-alpha-50);
352
+ --semantic-brand-credit-primary-low-hover: var(--green-alpha-100);
353
+ --semantic-brand-credit-primary-low-pressed: var(--green-alpha-100);
354
+ --semantic-brand-credit-primary-pressed: var(--green-600);
355
+ --semantic-brand-gluwa-primary: var(--blue1-400);
356
+ --semantic-brand-gluwa-primary-hover: var(--blue1-600);
357
+ --semantic-brand-gluwa-primary-low: var(--blue1-alpha-50);
358
+ --semantic-brand-gluwa-primary-low-hover: var(--blue1-alpha-100);
359
+ --semantic-brand-gluwa-primary-low-pressed: var(--blue1-alpha-100);
360
+ --semantic-brand-gluwa-primary-pressed: var(--blue1-600);
361
+ --semantic-brand-space-primary: var(--purple-400);
362
+ --semantic-brand-space-primary-hover: var(--purple-600);
363
+ --semantic-brand-space-primary-low: var(--purple-alpha-50);
364
+ --semantic-brand-space-primary-low-hover: var(--purple-alpha-100);
365
+ --semantic-brand-space-primary-low-pressed: var(--purple-alpha-100);
366
+ --semantic-brand-space-primary-pressed: var(--purple-600);
367
+ --semantic-brand-trugi-primary: var(--blue2-400);
368
+ --semantic-brand-trugi-primary-hover: var(--blue2-600);
369
+ --semantic-brand-trugi-primary-legacy: #2848FEFF;
370
+ --semantic-brand-trugi-primary-low: var(--blue2-alpha-50);
371
+ --semantic-brand-trugi-primary-low-hover: var(--blue2-alpha-100);
372
+ --semantic-brand-trugi-primary-low-pressed: var(--blue2-alpha-100);
373
+ --semantic-brand-trugi-primary-pressed: var(--blue2-600);
374
+ --semantic-information-caution: var(--yellow-400);
375
+ --semantic-information-caution-low: var(--yellow-alpha-50);
376
+ --semantic-information-error: var(--red-400);
377
+ --semantic-information-error-low: var(--red-alpha-50);
378
+ --semantic-information-info: var(--blue1-400);
379
+ --semantic-information-info-low: var(--blue1-alpha-50);
380
+ --semantic-information-success: var(--green-400);
381
+ --semantic-information-success-low: var(--green-alpha-50);
382
+ --static-black-alpha-100: #0000001A;
383
+ --static-black-alpha-200: #00000033;
384
+ --static-black-alpha-30: #00000008;
385
+ --static-black-alpha-50: #0000000D;
386
+ --static-black-alpha-500: #00000080;
387
+ --static-black-alpha-800: #000000CC;
388
+ --static-black-main: #000000FF;
389
+ --static-white-alpha-100: #FFFFFF1A;
390
+ --static-white-alpha-200: #FFFFFF33;
391
+ --static-white-alpha-30: #FFFFFF08;
392
+ --static-white-alpha-50: #FFFFFF0D;
393
+ --static-white-alpha-500: #FFFFFF80;
394
+ --static-white-alpha-800: #FFFFFFCC;
395
+ --static-white-main: #FFFFFFFF;
396
+ --static-color-blue1-400: #1473FFFF;
397
+ --static-color-blue1-700: #ACD2FFFF;
398
+ --static-color-blue2-400: #0152FFFF;
399
+ --static-color-blue2-700: #85ACFFFF;
400
+ --static-color-gluwa-lightblue: #67CEFFFF;
401
+ --static-color-gluwa-navy: #292751FF;
402
+ --static-color-gray-00: #0C0E10FF;
403
+ --static-color-gray-200: #36383AFF;
404
+ --static-color-gray-alpha-100: #0C0E101A;
405
+ --static-color-gray-alpha-200: #0C0E1033;
406
+ --static-color-gray-alpha-500: #0C0E1080;
407
+ --static-color-gray-alpha-700: #0C0E10B2;
408
+ --static-color-green-400: #1EEEAFFF;
409
+ --static-color-green-700: #93F7D9FF;
410
+ --static-color-purple-400: #4A6BFFFF;
411
+ --static-color-purple-700: #A8B8FFFF;
412
+ --static-color-red-400: #FF4848FF;
413
+ --static-color-red-700: #FFA7A7FF;
414
+ --static-color-trugi-blue-200-legacy: #D9E8F9FF;
415
+ --static-color-trugi-blue-300-legacy: #C0DAF8FF;
416
+ --static-color-trugi-blue-700-legacy: #132DBBFF;
417
+ --static-color-trugi-blue-alpha: #2848FE24;
418
+ --static-color-trugi-green: #4EE28CFF;
419
+ --static-color-trugi-orange: #FF8A4BFF;
420
+ --static-color-trugi-pink: #FF6CBFFF;
421
+ --static-color-trugi-purple: #B5AAFFFF;
422
+ --static-color-yellow-400: #FFC400FF;
423
+ --static-color-yellow-700: #FFE384FF;
424
+ }
425
+ }
426
+
427
+ /* Force light mode */
428
+ .light {
429
+ color-scheme: light;
430
+ --gray-50: #F6F8FA;
431
+ --gray-100: #EEF0F2;
432
+ --gray-200: #E6E8EA;
433
+ --gray-300: #DADCDD;
434
+ --gray-400: #CED0D2;
435
+ --gray-500: #AAACAE;
436
+ --gray-600: #86888A;
437
+ --gray-700: #4C4E50;
438
+ --gray-800: #2C2E30;
439
+ --gray-900: #0C0E10;
440
+ --gray-00: #FFFFFF;
441
+ --blue1-50: #AFCFFF;
442
+ --blue1-100: #8EBCFF;
443
+ --blue1-200: #6DA8FF;
444
+ --blue1-300: #4C95FF;
445
+ --blue1-400: #1473FF;
446
+ --blue1-500: #1267E6;
447
+ --blue1-600: #0F57C2;
448
+ --blue1-700: #0C4599;
449
+ --blue1-800: #093370;
450
+ --blue1-900: #06234D;
451
+ --blue1-00: #C7DDFF;
452
+ --blue2-50: #A9C4FF;
453
+ --blue2-100: #85ACFF;
454
+ --blue2-200: #6194FF;
455
+ --blue2-300: #3E7CFF;
456
+ --blue2-400: #0152FF;
457
+ --blue2-500: #014AE6;
458
+ --blue2-600: #013EC2;
459
+ --blue2-700: #013199;
460
+ --blue2-800: #002470;
461
+ --blue2-900: #00194D;
462
+ --blue2-00: #C2D5FF;
463
+ --green-50: #B0ECDA;
464
+ --green-100: #90E4CB;
465
+ --green-200: #70DCBB;
466
+ --green-300: #4FD4AC;
467
+ --green-400: #18C792;
468
+ --green-500: #16B383;
469
+ --green-600: #12976F;
470
+ --green-700: #0E7758;
471
+ --green-800: #0B5840;
472
+ --green-900: #073C2C;
473
+ --green-00: #C8F2E5;
474
+ --purple-50: #C0CBFC;
475
+ --purple-100: #A7B6FA;
476
+ --purple-200: #8DA1F9;
477
+ --purple-300: #738BF7;
478
+ --purple-400: #4767F5;
479
+ --purple-500: #405DDC;
480
+ --purple-600: #364EBA;
481
+ --purple-700: #2B3E93;
482
+ --purple-800: #1F2D6C;
483
+ --purple-900: #151F4A;
484
+ --purple-00: #D3DAFD;
485
+ --yellow-50: #FAE7A8;
486
+ --yellow-100: #F8DD84;
487
+ --yellow-200: #F6D361;
488
+ --yellow-300: #F4C93D;
489
+ --yellow-400: #F0B800;
490
+ --yellow-500: #D8A600;
491
+ --yellow-600: #B68C00;
492
+ --yellow-700: #906E00;
493
+ --yellow-800: #6A5100;
494
+ --yellow-900: #483700;
495
+ --yellow-00: #FBEEC2;
496
+ --red-50: #F8BFBF;
497
+ --red-100: #F5A4A4;
498
+ --red-200: #F38A8A;
499
+ --red-300: #F06F6F;
500
+ --red-400: #EB4242;
501
+ --red-500: #D43B3B;
502
+ --red-600: #B33232;
503
+ --red-700: #8D2828;
504
+ --red-800: #681D1D;
505
+ --red-900: #471414;
506
+ --red-00: #FAD2D2;
507
+ --gray-alpha-30: #FFFFFF08;
508
+ --gray-alpha-50: #FFFFFF0D;
509
+ --gray-alpha-100: #FFFFFF1A;
510
+ --gray-alpha-200: #FFFFFF33;
511
+ --gray-alpha-500: #FFFFFF80;
512
+ --blue1-alpha-30: #1473FF0A;
513
+ --blue1-alpha-50: #1473FF14;
514
+ --blue1-alpha-100: #1473FF24;
515
+ --blue1-alpha-200: #1473FF33;
516
+ --blue1-alpha-500: #1473FF80;
517
+ --blue2-alpha-30: #0152FF0A;
518
+ --blue2-alpha-50: #0152FF14;
519
+ --blue2-alpha-100: #0152FF24;
520
+ --blue2-alpha-200: #0152FF33;
521
+ --blue2-alpha-500: #0152FF80;
522
+ --green-alpha-30: #18C7920A;
523
+ --green-alpha-50: #18C79214;
524
+ --green-alpha-100: #18C79224;
525
+ --green-alpha-200: #18C7924D;
526
+ --green-alpha-500: #18C79299;
527
+ --purple-alpha-30: #4767F50A;
528
+ --purple-alpha-50: #4767F514;
529
+ --purple-alpha-100: #4767F524;
530
+ --purple-alpha-200: #4767F533;
531
+ --purple-alpha-500: #4767F580;
532
+ --yellow-alpha-30: #F0B8000A;
533
+ --yellow-alpha-50: #F0B80014;
534
+ --yellow-alpha-100: #F0B80024;
535
+ --yellow-alpha-200: #F0B80033;
536
+ --yellow-alpha-500: #F0B80080;
537
+ --red-alpha-30: #EB42420A;
538
+ --red-alpha-50: #EB424214;
539
+ --red-alpha-100: #EB424224;
540
+ --red-alpha-200: #EB424233;
541
+ --red-alpha-500: #EB424280;
542
+ --white-alpha-30: #00000008;
543
+ --white-alpha-50: #0000000D;
544
+ --white-alpha-100: #0000001A;
545
+ --white-alpha-200: #00000033;
546
+ --white-alpha-500: #00000080;
547
+ --gray-semantic-50: #FFFFFF;
548
+ --gray-semantic-100: #F6F8FA;
549
+ --gray-semantic-00: #F6F8FA;
550
+ --semantic-paper-contents: var(--gray-50);
551
+ --semantic-paper-default: var(--gray-00);
552
+ --semantic-paper-dialog: var(--gray-semantic-50);
553
+ --semantic-paper-neutral: var(--gray-semantic-00);
554
+ --semantic-paper-sheet: var(--gray-semantic-50);
555
+ --semantic-divider-divider-1: var(--white-alpha-50);
556
+ --semantic-divider-divider-2: var(--gray-100);
557
+ --semantic-divider-divider-3: var(--white-alpha-100);
558
+ --semantic-divider-divider-4: var(--white-alpha-200);
559
+ --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
560
+ --semantic-overlay-overlay-low: var(--static-black-alpha-200);
561
+ --semantic-brand-credit-primary: var(--green-400);
562
+ --semantic-brand-credit-primary-hover: var(--green-600);
563
+ --semantic-brand-credit-primary-low: var(--green-alpha-50);
564
+ --semantic-brand-credit-primary-low-hover: var(--green-alpha-100);
565
+ --semantic-brand-credit-primary-low-pressed: var(--green-alpha-100);
566
+ --semantic-brand-credit-primary-pressed: var(--green-600);
567
+ --semantic-brand-gluwa-primary: var(--blue1-400);
568
+ --semantic-brand-gluwa-primary-hover: var(--blue1-600);
569
+ --semantic-brand-gluwa-primary-low: var(--blue1-alpha-50);
570
+ --semantic-brand-gluwa-primary-low-hover: var(--blue1-alpha-100);
571
+ --semantic-brand-gluwa-primary-low-pressed: var(--blue1-alpha-100);
572
+ --semantic-brand-gluwa-primary-pressed: var(--blue1-600);
573
+ --semantic-brand-space-primary: var(--purple-400);
574
+ --semantic-brand-space-primary-hover: var(--purple-600);
575
+ --semantic-brand-space-primary-low: var(--purple-alpha-50);
576
+ --semantic-brand-space-primary-low-hover: var(--purple-alpha-100);
577
+ --semantic-brand-space-primary-low-pressed: var(--purple-alpha-100);
578
+ --semantic-brand-space-primary-pressed: var(--purple-600);
579
+ --semantic-brand-trugi-primary: var(--blue2-400);
580
+ --semantic-brand-trugi-primary-hover: var(--blue2-600);
581
+ --semantic-brand-trugi-primary-legacy: #2848FEFF;
582
+ --semantic-brand-trugi-primary-low: var(--blue2-alpha-50);
583
+ --semantic-brand-trugi-primary-low-hover: var(--blue2-alpha-100);
584
+ --semantic-brand-trugi-primary-low-pressed: var(--blue2-alpha-100);
585
+ --semantic-brand-trugi-primary-pressed: var(--blue2-600);
586
+ --semantic-information-caution: var(--yellow-400);
587
+ --semantic-information-caution-low: var(--yellow-alpha-50);
588
+ --semantic-information-error: var(--red-400);
589
+ --semantic-information-error-low: var(--red-alpha-50);
590
+ --semantic-information-info: var(--blue1-400);
591
+ --semantic-information-info-low: var(--blue1-alpha-50);
592
+ --semantic-information-success: var(--green-400);
593
+ --semantic-information-success-low: var(--green-alpha-50);
594
+ --static-black-alpha-100: #0000001A;
595
+ --static-black-alpha-200: #00000033;
596
+ --static-black-alpha-30: #00000008;
597
+ --static-black-alpha-50: #0000000D;
598
+ --static-black-alpha-500: #00000080;
599
+ --static-black-alpha-800: #000000CC;
600
+ --static-black-main: #000000FF;
601
+ --static-white-alpha-100: #FFFFFF1A;
602
+ --static-white-alpha-200: #FFFFFF33;
603
+ --static-white-alpha-30: #FFFFFF08;
604
+ --static-white-alpha-50: #FFFFFF0D;
605
+ --static-white-alpha-500: #FFFFFF80;
606
+ --static-white-alpha-800: #FFFFFFCC;
607
+ --static-white-main: #FFFFFFFF;
608
+ --static-color-blue1-400: #1473FFFF;
609
+ --static-color-blue1-700: #ACD2FFFF;
610
+ --static-color-blue2-400: #0152FFFF;
611
+ --static-color-blue2-700: #85ACFFFF;
612
+ --static-color-gluwa-lightblue: #67CEFFFF;
613
+ --static-color-gluwa-navy: #292751FF;
614
+ --static-color-gray-00: #0C0E10FF;
615
+ --static-color-gray-200: #36383AFF;
616
+ --static-color-gray-alpha-100: #0C0E101A;
617
+ --static-color-gray-alpha-200: #0C0E1033;
618
+ --static-color-gray-alpha-500: #0C0E1080;
619
+ --static-color-gray-alpha-700: #0C0E10B2;
620
+ --static-color-green-400: #1EEEAFFF;
621
+ --static-color-green-700: #93F7D9FF;
622
+ --static-color-purple-400: #4A6BFFFF;
623
+ --static-color-purple-700: #A8B8FFFF;
624
+ --static-color-red-400: #FF4848FF;
625
+ --static-color-red-700: #FFA7A7FF;
626
+ --static-color-trugi-blue-200-legacy: #D9E8F9FF;
627
+ --static-color-trugi-blue-300-legacy: #C0DAF8FF;
628
+ --static-color-trugi-blue-700-legacy: #132DBBFF;
629
+ --static-color-trugi-blue-alpha: #2848FE24;
630
+ --static-color-trugi-green: #4EE28CFF;
631
+ --static-color-trugi-orange: #FF8A4BFF;
632
+ --static-color-trugi-pink: #FF6CBFFF;
633
+ --static-color-trugi-purple: #B5AAFFFF;
634
+ --static-color-yellow-400: #FFC400FF;
635
+ --static-color-yellow-700: #FFE384FF;
636
+ }
637
+
638
+ /* Force dark mode */
639
+ .dark {
640
+ color-scheme: dark;
641
+ --gray-50: #1A1C1E;
642
+ --gray-100: #282A2C;
643
+ --gray-200: #36383A;
644
+ --gray-300: #444648;
645
+ --gray-400: #525456;
646
+ --gray-500: #66686A;
647
+ --gray-600: #888A8C;
648
+ --gray-700: #AAACAE;
649
+ --gray-800: #CCCED0;
650
+ --gray-900: #FFFFFF;
651
+ --gray-00: #0C0E10;
652
+ --blue1-50: #0C4599;
653
+ --blue1-100: #0E51B3;
654
+ --blue1-200: #105CCC;
655
+ --blue1-300: #1267E6;
656
+ --blue1-400: #1473FF;
657
+ --blue1-500: #4C95FF;
658
+ --blue1-600: #6DA8FF;
659
+ --blue1-700: #8ECBFF;
660
+ --blue1-800: #AFCFFF;
661
+ --blue1-900: #C7DDFF;
662
+ --blue1-00: #0A3980;
663
+ --blue2-50: #1F4699;
664
+ --blue2-100: #2451B3;
665
+ --blue2-200: #295DCC;
666
+ --blue2-300: #2E68E6;
667
+ --blue2-400: #3374FF;
668
+ --blue2-500: #6495FF;
669
+ --blue2-600: #80A9FF;
670
+ --blue2-700: #9DBCFF;
671
+ --blue2-800: #BAD0FF;
672
+ --blue2-900: #CEDEFF;
673
+ --blue2-00: #1A3A80;
674
+ --green-50: #128F69;
675
+ --green-100: #15A77B;
676
+ --green-200: #18BE8C;
677
+ --green-300: #1BD69E;
678
+ --green-400: #1EEEAF;
679
+ --green-500: #54F2C2;
680
+ --green-600: #73F4CD;
681
+ --green-700: #93F7D9;
682
+ --green-800: #B2F9E4;
683
+ --green-900: #C9FBEC;
684
+ --green-00: #0F7758;
685
+ --purple-50: #2C4099;
686
+ --purple-100: #344BB3;
687
+ --purple-200: #3B56CC;
688
+ --purple-300: #4360E6;
689
+ --purple-400: #4A6BFF;
690
+ --purple-500: #758FFF;
691
+ --purple-600: #8FA3FF;
692
+ --purple-700: #A8B8FF;
693
+ --purple-800: #C1CDFF;
694
+ --purple-900: #D4DBFF;
695
+ --purple-00: #253580;
696
+ --yellow-50: #997600;
697
+ --yellow-100: #B38900;
698
+ --yellow-200: #CC9D00;
699
+ --yellow-300: #E6B000;
700
+ --yellow-400: #FFC400;
701
+ --yellow-500: #FFD23D;
702
+ --yellow-600: #FFDA61;
703
+ --yellow-700: #FFE384;
704
+ --yellow-800: #FFEBA8;
705
+ --yellow-900: #FFF1C2;
706
+ --yellow-00: #806200;
707
+ --red-50: #992B2B;
708
+ --red-100: #B33232;
709
+ --red-200: #CC3A3A;
710
+ --red-300: #E64141;
711
+ --red-400: #FF4848;
712
+ --red-500: #FF7474;
713
+ --red-600: #FF8E8E;
714
+ --red-700: #FFA7A7;
715
+ --red-800: #FFC1C1;
716
+ --red-900: #FFD3D3;
717
+ --red-00: #802424;
718
+ --gray-alpha-30: #00000008;
719
+ --gray-alpha-50: #0000000D;
720
+ --gray-alpha-100: #0000001A;
721
+ --gray-alpha-200: #00000033;
722
+ --gray-alpha-500: #00000080;
723
+ --blue1-alpha-30: #1473FF0A;
724
+ --blue1-alpha-50: #1473FF14;
725
+ --blue1-alpha-100: #1473FF24;
726
+ --blue1-alpha-200: #1473FF33;
727
+ --blue1-alpha-500: #1473FF80;
728
+ --blue2-alpha-30: #3374FF0A;
729
+ --blue2-alpha-50: #3374FF14;
730
+ --blue2-alpha-100: #3374FF24;
731
+ --blue2-alpha-200: #3374FF33;
732
+ --blue2-alpha-500: #3374FF80;
733
+ --green-alpha-30: #1EEEAF0A;
734
+ --green-alpha-50: #1EEEAF14;
735
+ --green-alpha-100: #1EEEAF24;
736
+ --green-alpha-200: #1EEEAF33;
737
+ --green-alpha-500: #1EEEAF80;
738
+ --purple-alpha-30: #4A6BFF0A;
739
+ --purple-alpha-50: #4A6BFF14;
740
+ --purple-alpha-100: #4A6BFF24;
741
+ --purple-alpha-200: #4A6BFF33;
742
+ --purple-alpha-500: #4A6BFF80;
743
+ --yellow-alpha-30: #FFC4000A;
744
+ --yellow-alpha-50: #FFC40014;
745
+ --yellow-alpha-100: #FFC40024;
746
+ --yellow-alpha-200: #FFC40033;
747
+ --yellow-alpha-500: #FFC40080;
748
+ --red-alpha-30: #FF48480A;
749
+ --red-alpha-50: #FF484814;
750
+ --red-alpha-100: #FF484824;
751
+ --red-alpha-200: #FF484833;
752
+ --red-alpha-500: #FF484880;
753
+ --white-alpha-30: #FFFFFF08;
754
+ --white-alpha-50: #FFFFFF0D;
755
+ --white-alpha-100: #FFFFFF1A;
756
+ --white-alpha-200: #FFFFFF33;
757
+ --white-alpha-500: #FFFFFF80;
758
+ --gray-semantic-50: #1A1C1E;
759
+ --gray-semantic-100: #282A2C;
760
+ --gray-semantic-00: #0C0E10;
761
+ --semantic-paper-contents: var(--gray-50);
762
+ --semantic-paper-default: var(--gray-00);
763
+ --semantic-paper-dialog: var(--gray-semantic-50);
764
+ --semantic-paper-neutral: var(--gray-semantic-00);
765
+ --semantic-paper-sheet: var(--gray-semantic-50);
766
+ --semantic-divider-divider-1: var(--white-alpha-50);
767
+ --semantic-divider-divider-2: var(--gray-100);
768
+ --semantic-divider-divider-3: var(--white-alpha-100);
769
+ --semantic-divider-divider-4: var(--white-alpha-200);
770
+ --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
771
+ --semantic-overlay-overlay-low: var(--static-black-alpha-200);
772
+ --semantic-brand-credit-primary: var(--green-400);
773
+ --semantic-brand-credit-primary-hover: var(--green-600);
774
+ --semantic-brand-credit-primary-low: var(--green-alpha-50);
775
+ --semantic-brand-credit-primary-low-hover: var(--green-alpha-100);
776
+ --semantic-brand-credit-primary-low-pressed: var(--green-alpha-100);
777
+ --semantic-brand-credit-primary-pressed: var(--green-600);
778
+ --semantic-brand-gluwa-primary: var(--blue1-400);
779
+ --semantic-brand-gluwa-primary-hover: var(--blue1-600);
780
+ --semantic-brand-gluwa-primary-low: var(--blue1-alpha-50);
781
+ --semantic-brand-gluwa-primary-low-hover: var(--blue1-alpha-100);
782
+ --semantic-brand-gluwa-primary-low-pressed: var(--blue1-alpha-100);
783
+ --semantic-brand-gluwa-primary-pressed: var(--blue1-600);
784
+ --semantic-brand-space-primary: var(--purple-400);
785
+ --semantic-brand-space-primary-hover: var(--purple-600);
786
+ --semantic-brand-space-primary-low: var(--purple-alpha-50);
787
+ --semantic-brand-space-primary-low-hover: var(--purple-alpha-100);
788
+ --semantic-brand-space-primary-low-pressed: var(--purple-alpha-100);
789
+ --semantic-brand-space-primary-pressed: var(--purple-600);
790
+ --semantic-brand-trugi-primary: var(--blue2-400);
791
+ --semantic-brand-trugi-primary-hover: var(--blue2-600);
792
+ --semantic-brand-trugi-primary-legacy: #2848FEFF;
793
+ --semantic-brand-trugi-primary-low: var(--blue2-alpha-50);
794
+ --semantic-brand-trugi-primary-low-hover: var(--blue2-alpha-100);
795
+ --semantic-brand-trugi-primary-low-pressed: var(--blue2-alpha-100);
796
+ --semantic-brand-trugi-primary-pressed: var(--blue2-600);
797
+ --semantic-information-caution: var(--yellow-400);
798
+ --semantic-information-caution-low: var(--yellow-alpha-50);
799
+ --semantic-information-error: var(--red-400);
800
+ --semantic-information-error-low: var(--red-alpha-50);
801
+ --semantic-information-info: var(--blue1-400);
802
+ --semantic-information-info-low: var(--blue1-alpha-50);
803
+ --semantic-information-success: var(--green-400);
804
+ --semantic-information-success-low: var(--green-alpha-50);
805
+ --static-black-alpha-100: #0000001A;
806
+ --static-black-alpha-200: #00000033;
807
+ --static-black-alpha-30: #00000008;
808
+ --static-black-alpha-50: #0000000D;
809
+ --static-black-alpha-500: #00000080;
810
+ --static-black-alpha-800: #000000CC;
811
+ --static-black-main: #000000FF;
812
+ --static-white-alpha-100: #FFFFFF1A;
813
+ --static-white-alpha-200: #FFFFFF33;
814
+ --static-white-alpha-30: #FFFFFF08;
815
+ --static-white-alpha-50: #FFFFFF0D;
816
+ --static-white-alpha-500: #FFFFFF80;
817
+ --static-white-alpha-800: #FFFFFFCC;
818
+ --static-white-main: #FFFFFFFF;
819
+ --static-color-blue1-400: #1473FFFF;
820
+ --static-color-blue1-700: #ACD2FFFF;
821
+ --static-color-blue2-400: #0152FFFF;
822
+ --static-color-blue2-700: #85ACFFFF;
823
+ --static-color-gluwa-lightblue: #67CEFFFF;
824
+ --static-color-gluwa-navy: #292751FF;
825
+ --static-color-gray-00: #0C0E10FF;
826
+ --static-color-gray-200: #36383AFF;
827
+ --static-color-gray-alpha-100: #0C0E101A;
828
+ --static-color-gray-alpha-200: #0C0E1033;
829
+ --static-color-gray-alpha-500: #0C0E1080;
830
+ --static-color-gray-alpha-700: #0C0E10B2;
831
+ --static-color-green-400: #1EEEAFFF;
832
+ --static-color-green-700: #93F7D9FF;
833
+ --static-color-purple-400: #4A6BFFFF;
834
+ --static-color-purple-700: #A8B8FFFF;
835
+ --static-color-red-400: #FF4848FF;
836
+ --static-color-red-700: #FFA7A7FF;
837
+ --static-color-trugi-blue-200-legacy: #D9E8F9FF;
838
+ --static-color-trugi-blue-300-legacy: #C0DAF8FF;
839
+ --static-color-trugi-blue-700-legacy: #132DBBFF;
840
+ --static-color-trugi-blue-alpha: #2848FE24;
841
+ --static-color-trugi-green: #4EE28CFF;
842
+ --static-color-trugi-orange: #FF8A4BFF;
843
+ --static-color-trugi-pink: #FF6CBFFF;
844
+ --static-color-trugi-purple: #B5AAFFFF;
845
+ --static-color-yellow-400: #FFC400FF;
846
+ --static-color-yellow-700: #FFE384FF;
847
+ }