@kispace-io/gs-lib 1.0.36 → 1.0.37

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 (3) hide show
  1. package/dist/gs-lib.css +0 -3370
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/gs-lib.css CHANGED
@@ -1,3373 +1,3 @@
1
- @layer wa-utilities {
2
- :host([size='small']),
3
- .wa-size-s {
4
- font-size: var(--wa-font-size-s);
5
- }
6
-
7
- :host([size='medium']),
8
- .wa-size-m {
9
- font-size: var(--wa-font-size-m);
10
- }
11
-
12
- :host([size='large']),
13
- .wa-size-l {
14
- font-size: var(--wa-font-size-l);
15
- }
16
- }
17
- @layer wa-utilities {
18
- :where(:root),
19
- .wa-neutral,
20
- :host([variant='neutral']) {
21
- --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
22
- --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
23
- --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
24
- --wa-color-border-loud: var(--wa-color-neutral-border-loud);
25
- --wa-color-border-normal: var(--wa-color-neutral-border-normal);
26
- --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
27
- --wa-color-on-loud: var(--wa-color-neutral-on-loud);
28
- --wa-color-on-normal: var(--wa-color-neutral-on-normal);
29
- --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
30
- }
31
-
32
- .wa-brand,
33
- :host([variant='brand']) {
34
- --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
35
- --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
36
- --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
37
- --wa-color-border-loud: var(--wa-color-brand-border-loud);
38
- --wa-color-border-normal: var(--wa-color-brand-border-normal);
39
- --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
40
- --wa-color-on-loud: var(--wa-color-brand-on-loud);
41
- --wa-color-on-normal: var(--wa-color-brand-on-normal);
42
- --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
43
- }
44
-
45
- .wa-success,
46
- :host([variant='success']) {
47
- --wa-color-fill-loud: var(--wa-color-success-fill-loud);
48
- --wa-color-fill-normal: var(--wa-color-success-fill-normal);
49
- --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
50
- --wa-color-border-loud: var(--wa-color-success-border-loud);
51
- --wa-color-border-normal: var(--wa-color-success-border-normal);
52
- --wa-color-border-quiet: var(--wa-color-success-border-quiet);
53
- --wa-color-on-loud: var(--wa-color-success-on-loud);
54
- --wa-color-on-normal: var(--wa-color-success-on-normal);
55
- --wa-color-on-quiet: var(--wa-color-success-on-quiet);
56
- }
57
-
58
- .wa-warning,
59
- :host([variant='warning']) {
60
- --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
61
- --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
62
- --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
63
- --wa-color-border-loud: var(--wa-color-warning-border-loud);
64
- --wa-color-border-normal: var(--wa-color-warning-border-normal);
65
- --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
66
- --wa-color-on-loud: var(--wa-color-warning-on-loud);
67
- --wa-color-on-normal: var(--wa-color-warning-on-normal);
68
- --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
69
- }
70
-
71
- .wa-danger,
72
- :host([variant='danger']) {
73
- --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
74
- --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
75
- --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
76
- --wa-color-border-loud: var(--wa-color-danger-border-loud);
77
- --wa-color-border-normal: var(--wa-color-danger-border-normal);
78
- --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
79
- --wa-color-on-loud: var(--wa-color-danger-on-loud);
80
- --wa-color-on-normal: var(--wa-color-danger-on-normal);
81
- --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
82
- }
83
- }
84
- @layer wa-native {
85
- /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
86
- html {
87
- box-sizing: border-box;
88
- margin: 0;
89
- padding: 0;
90
-
91
- tab-size: 4;
92
-
93
- background-color: var(--wa-color-surface-default);
94
- }
95
-
96
- *,
97
- *::before,
98
- *::after {
99
- box-sizing: inherit;
100
- }
101
-
102
- body {
103
- min-height: 100vh;
104
- margin: 0;
105
- padding: 0;
106
-
107
- color: var(--wa-color-text-normal);
108
- font-family: var(--wa-font-family-body);
109
- font-size: var(--wa-font-size-m);
110
- font-weight: var(--wa-font-weight-body);
111
- line-height: var(--wa-line-height-normal);
112
- -moz-osx-font-smoothing: grayscale;
113
- -webkit-font-smoothing: antialiased;
114
- text-size-adjust: none;
115
- -moz-text-size-adjust: none;
116
- -webkit-text-size-adjust: none;
117
- }
118
- /* #endregion */
119
-
120
- /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
121
- address,
122
- audio,
123
- blockquote,
124
- dd,
125
- details,
126
- dl,
127
- fieldset,
128
- figure,
129
- h1,
130
- h2,
131
- h3,
132
- h4,
133
- h5,
134
- h6,
135
- hr,
136
- iframe,
137
- ol,
138
- p,
139
- pre,
140
- table,
141
- ul,
142
- video {
143
- margin: 0;
144
-
145
- &:has(+ *) {
146
- margin-block-end: var(--wa-content-spacing);
147
- }
148
- }
149
- /* #endregion */
150
-
151
- /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
152
- h1,
153
- h2,
154
- h3,
155
- h4,
156
- h5,
157
- h6 {
158
- font-family: var(--wa-font-family-heading);
159
- font-weight: var(--wa-font-weight-heading);
160
- line-height: var(--wa-line-height-condensed);
161
- text-wrap: balance;
162
- }
163
-
164
- h1 {
165
- font-size: var(--wa-font-size-3xl);
166
- }
167
-
168
- h2 {
169
- font-size: var(--wa-font-size-2xl);
170
- }
171
-
172
- h3 {
173
- font-size: var(--wa-font-size-xl);
174
- }
175
-
176
- h4 {
177
- font-size: var(--wa-font-size-l);
178
- }
179
-
180
- h5 {
181
- font-size: var(--wa-font-size-m);
182
- }
183
-
184
- h6 {
185
- font-size: var(--wa-font-size-s);
186
- }
187
-
188
- p {
189
- text-wrap: pretty;
190
- }
191
-
192
- blockquote {
193
- padding: var(--wa-space-xl);
194
-
195
- font-family: var(--wa-font-family-longform);
196
- font-size: var(--wa-font-size-l);
197
-
198
- border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
199
- }
200
-
201
- hr {
202
- margin: var(--wa-content-spacing) 0;
203
-
204
- border: none;
205
- border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
206
- }
207
- /* #endregion */
208
-
209
- /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
210
- ul,
211
- ol {
212
- padding: 0;
213
- }
214
-
215
- li > ul,
216
- li > ol {
217
- margin-inline-start: 0.25em;
218
- }
219
-
220
- ul {
221
- list-style: disc;
222
- }
223
-
224
- li {
225
- margin-inline-start: 1.125em;
226
- padding: 0;
227
- }
228
-
229
- dt {
230
- font-weight: var(--wa-font-weight-bold);
231
- }
232
- /* #endregion */
233
-
234
- /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
235
- strong,
236
- b {
237
- font-weight: var(--wa-font-weight-bold);
238
- }
239
-
240
- em,
241
- i {
242
- font-style: italic;
243
- }
244
-
245
- u {
246
- text-decoration-line: underline;
247
- text-decoration-thickness: 0.09375em;
248
- text-underline-offset: 0.125em;
249
- }
250
-
251
- s {
252
- text-decoration-line: line-through;
253
- text-decoration-thickness: 0.09375em;
254
- }
255
-
256
- ins {
257
- text-decoration-color: var(--wa-color-success-on-quiet);
258
- text-decoration-line: underline;
259
- text-decoration-thickness: 0.09375em;
260
- text-underline-offset: 0.125em;
261
- }
262
-
263
- del {
264
- color: color-mix(in oklab, currentColor, transparent 10%);
265
- text-decoration-color: var(--wa-color-danger-on-quiet);
266
- text-decoration-line: line-through;
267
- text-decoration-thickness: 0.09375em;
268
- }
269
-
270
- mark {
271
- padding: 0.125em 0.25em;
272
-
273
- color: var(--wa-color-warning-on-quiet);
274
-
275
- background-color: var(--wa-color-warning-fill-quiet);
276
- border-radius: var(--wa-border-radius-s);
277
- }
278
-
279
- small {
280
- font-size: var(--wa-font-size-smaller);
281
- }
282
-
283
- sub,
284
- sup {
285
- font-size: var(--wa-font-size-smaller);
286
- line-height: 0;
287
- }
288
-
289
- sub {
290
- vertical-align: sub;
291
- }
292
-
293
- sup {
294
- vertical-align: super;
295
- }
296
-
297
- abbr[title] {
298
- text-decoration-line: underline;
299
- text-decoration-style: dotted;
300
- text-decoration-thickness: 0.09375em;
301
- text-underline-offset: 0.125em;
302
-
303
- cursor: help;
304
- }
305
-
306
- kbd {
307
- padding: 0.125em 0.25em;
308
-
309
- font-family: var(--wa-font-family-code);
310
- font-size: var(--wa-font-size-smaller);
311
- font-weight: var(--wa-font-weight-code);
312
-
313
- border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
314
- border-radius: var(--wa-border-radius-s);
315
- box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);
316
-
317
- wa-icon {
318
- vertical-align: -2px;
319
- }
320
- }
321
- /* #endregion */
322
-
323
- /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
324
- a {
325
- color: var(--wa-color-text-link);
326
- text-decoration: var(--wa-link-decoration-default);
327
- -webkit-text-decoration: var(--wa-link-decoration-default);
328
- text-decoration-thickness: 0.09375em;
329
- text-underline-offset: 0.125em;
330
- }
331
-
332
- *:is([appearance~='accent'], .wa-accent) {
333
- a,
334
- a:hover {
335
- color: currentColor;
336
- }
337
- }
338
-
339
- a:hover {
340
- color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
341
- text-decoration: var(--wa-link-decoration-hover);
342
- -webkit-text-decoration: var(--wa-link-decoration-hover);
343
- }
344
-
345
- a:focus,
346
- button:focus {
347
- outline: none;
348
- }
349
-
350
- a:focus-visible,
351
- button:focus-visible {
352
- outline: var(--wa-focus-ring);
353
- outline-offset: var(--wa-focus-ring-offset);
354
- }
355
- /* #endregion */
356
-
357
- /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
358
- code,
359
- samp,
360
- var {
361
- padding: 0.125em 0.25em;
362
-
363
- font-family: var(--wa-font-family-code);
364
- font-size: var(--wa-font-size-smaller);
365
- font-weight: var(--wa-font-weight-code);
366
-
367
- background-color: var(--wa-color-overlay-inline);
368
- border-radius: var(--wa-border-radius-s);
369
- }
370
-
371
- pre {
372
- padding: var(--wa-space-m);
373
-
374
- font-family: var(--wa-font-family-code);
375
- font-size: var(--wa-font-size-smaller);
376
- font-weight: var(--wa-font-weight-code);
377
- white-space: pre;
378
-
379
- background-color: var(--wa-color-overlay-inline);
380
- border-radius: var(--wa-border-radius-m);
381
-
382
- /* Remove overlapping styles for child code elements */
383
- & code,
384
- & samp,
385
- & var {
386
- padding: 0;
387
-
388
- font-size: 1em;
389
-
390
- background-color: transparent;
391
- }
392
-
393
- /* Print styles */
394
- @media print {
395
- background: none;
396
- border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
397
- }
398
- }
399
- /* #endregion */
400
-
401
- /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
402
- img,
403
- svg,
404
- picture,
405
- video {
406
- max-width: 100%;
407
- height: auto;
408
-
409
- border-radius: var(--wa-border-radius-m);
410
- }
411
-
412
- embed,
413
- iframe,
414
- object {
415
- max-width: 100%;
416
- }
417
-
418
- iframe {
419
- border: none;
420
- }
421
- /* #endregion */
422
-
423
- /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
424
- table {
425
- width: 100%;
426
-
427
- border: none;
428
- border-collapse: collapse;
429
- }
430
-
431
- caption {
432
- color: var(--wa-color-text-quiet);
433
- font-size: var(--wa-font-size-smaller);
434
-
435
- &:has(+ *) {
436
- margin-block-end: 0.75em;
437
- }
438
- }
439
-
440
- tbody {
441
- tr {
442
- border-top: solid var(--wa-border-width-s) var(--wa-color-border-quiet);
443
-
444
- :where(table.wa-zebra-rows) &:nth-child(odd) {
445
- background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
446
- }
447
-
448
- :where(table.wa-hover-rows) & {
449
- @media (hover: hover) {
450
- &:hover {
451
- background-color: var(--wa-color-fill-quiet);
452
-
453
- &,
454
- + tr {
455
- border-top-color: var(--wa-color-border-normal);
456
- }
457
- }
458
- }
459
- }
460
- }
461
- }
462
-
463
- td,
464
- th {
465
- padding: 0.75em;
466
-
467
- text-align: start;
468
- vertical-align: top;
469
- }
470
-
471
- th {
472
- padding-block: 0.75em;
473
-
474
- font-size: var(--wa-font-size-smaller);
475
- font-weight: var(--wa-font-weight-bold);
476
- }
477
- /* #endregion */
478
-
479
- /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
480
- details {
481
- padding: 0;
482
-
483
- background-color: var(--wa-color-surface-default);
484
- border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
485
- border-radius: var(--wa-panel-border-radius);
486
-
487
- overflow-anchor: none;
488
-
489
- summary {
490
- display: flex;
491
- align-items: center;
492
- justify-content: space-between;
493
-
494
- padding: var(--wa-space-m);
495
-
496
- border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
497
-
498
- cursor: pointer;
499
- user-select: none;
500
- -webkit-user-select: none;
501
-
502
- > * {
503
- margin: 0;
504
- }
505
-
506
- &:focus {
507
- outline: none;
508
- }
509
-
510
- &:focus-visible {
511
- outline: var(--wa-focus-ring);
512
- outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
513
- }
514
- }
515
-
516
- &[open] {
517
- padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);
518
-
519
- summary {
520
- margin-inline: calc(-1 * var(--wa-space-m));
521
-
522
- border-end-start-radius: 0;
523
- border-end-end-radius: 0;
524
- }
525
- }
526
-
527
- /* Print styles */
528
- @media print {
529
- background: none;
530
- border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
531
-
532
- summary {
533
- list-style: none;
534
- }
535
- }
536
- }
537
-
538
- /* Replace the summary marker */
539
- details summary {
540
- &::marker,
541
- &::-webkit-details-marker {
542
- display: none;
543
- }
544
-
545
- &::after {
546
- content: '';
547
- background-color: var(--wa-color-text-quiet);
548
- mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
549
- center no-repeat;
550
- width: 1rem;
551
- height: 1rem;
552
- rotate: 0deg;
553
- }
554
-
555
- &:dir(rtl)::after {
556
- rotate: 180deg;
557
- }
558
- }
559
-
560
- details[open] summary::after {
561
- rotate: 90deg;
562
- }
563
- /* #endregion */
564
-
565
- /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
566
- dialog {
567
- flex-direction: column;
568
- align-items: start;
569
-
570
- width: 32rem;
571
- max-width: calc(100% - var(--wa-space-l));
572
- padding: var(--wa-space-l);
573
-
574
- background-color: var(--wa-color-surface-raised);
575
- border-radius: var(--wa-panel-border-radius);
576
- border: none;
577
- box-shadow: var(--wa-shadow-l);
578
-
579
- transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);
580
-
581
- /* Center the dialog */
582
- margin: auto;
583
- inset: 0;
584
-
585
- &[open] {
586
- display: flex;
587
- }
588
-
589
- &:focus {
590
- outline: none;
591
- }
592
- }
593
-
594
- dialog::backdrop {
595
- background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
596
- }
597
- /* #endregion */
598
-
599
- /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
600
- label {
601
- display: inline-block;
602
- position: relative;
603
-
604
- color: var(--wa-form-control-label-color);
605
- font-weight: var(--wa-form-control-label-font-weight);
606
- line-height: var(--wa-form-control-label-line-height);
607
-
608
- &:has(
609
- input:not(
610
- [type='button'],
611
- [type='checkbox'],
612
- [type='color'],
613
- [type='file'],
614
- [type='hidden'],
615
- [type='image'],
616
- [type='radio'],
617
- [type='reset'],
618
- [type='submit']
619
- ),
620
- textarea,
621
- select
622
- ) {
623
- width: 100%;
624
- }
625
-
626
- & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
627
- & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
628
- margin-block-start: 0.5em;
629
- }
630
- }
631
- /* #endregion */
632
-
633
- /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
634
- fieldset {
635
- padding: var(--wa-space-l);
636
- padding-block-start: calc(var(--wa-space-l) - 0.5em);
637
-
638
- border: solid 1px var(--wa-color-surface-border);
639
- border-radius: var(--wa-border-radius-m);
640
- }
641
-
642
- legend {
643
- padding: 0;
644
- padding-inline: var(--wa-space-xs);
645
-
646
- font-weight: var(--wa-form-control-label-font-weight);
647
- }
648
- /* #endregion */
649
-
650
- /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
651
- button,
652
- input[type='button'],
653
- input[type='reset'],
654
- input[type='submit'],
655
- input[type='file'] {
656
- /* We allow modifier classes on <input type="file">,
657
- * but these selectors ensure the styles only apply to
658
- * the file selector button in the user agent's shadow root */
659
- &:not(input[type='file']),
660
- &::file-selector-button {
661
- display: inline-flex;
662
- align-items: center;
663
- justify-content: center;
664
-
665
- height: var(--wa-form-control-height);
666
- padding: 0 var(--wa-form-control-padding-inline);
667
-
668
- font-family: inherit;
669
- font-size: var(--wa-form-control-value-font-size);
670
- font-weight: var(--wa-font-weight-action);
671
- line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
672
- text-decoration: none;
673
- vertical-align: middle;
674
- white-space: nowrap;
675
-
676
- border-style: var(--wa-border-style);
677
- border-width: max(1px, var(--wa-form-control-border-width));
678
- border-radius: var(--wa-form-control-border-radius);
679
-
680
- transition-property: background, border, box-shadow, color;
681
- transition-duration: var(--wa-transition-fast);
682
- transition-timing-function: var(--wa-transition-easing);
683
-
684
- cursor: pointer;
685
- user-select: none;
686
- -webkit-user-select: none;
687
- }
688
-
689
- /* Default styles for standard buttons */
690
- :where(&:not(input[type='file'])) {
691
- color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
692
- background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
693
- border-color: transparent;
694
-
695
- &:not(:disabled) {
696
- &:hover {
697
- background-color: color-mix(
698
- in oklab,
699
- var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
700
- var(--wa-color-mix-hover)
701
- );
702
- }
703
-
704
- &:active {
705
- background-color: color-mix(
706
- in oklab,
707
- var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
708
- var(--wa-color-mix-active)
709
- );
710
- }
711
- }
712
- }
713
-
714
- /* Default styles for file selector buttons */
715
- :where(&:is(input[type='file'])) {
716
- &::file-selector-button {
717
- color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
718
- background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
719
- border-color: transparent;
720
- }
721
-
722
- &:not(:disabled) {
723
- &::file-selector-button:hover {
724
- background-color: color-mix(
725
- in oklab,
726
- var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
727
- var(--wa-color-mix-hover)
728
- );
729
- }
730
-
731
- &::file-selector-button:active {
732
- background-color: color-mix(
733
- in oklab,
734
- var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
735
- var(--wa-color-mix-active)
736
- );
737
- }
738
- }
739
- }
740
-
741
- /* Modifier classes */
742
- &.wa-plain {
743
- &:not(input[type='file']),
744
- &::file-selector-button {
745
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
746
- background-color: transparent;
747
- border-color: transparent;
748
- }
749
-
750
- &:not(:disabled) {
751
- &:not(input[type='file']):hover,
752
- &::file-selector-button:hover {
753
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
754
- background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
755
- }
756
-
757
- &:not(input[type='file']):active,
758
- &::file-selector-button:active {
759
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
760
- background-color: color-mix(
761
- in oklab,
762
- var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
763
- var(--wa-color-mix-active)
764
- );
765
- }
766
- }
767
- }
768
-
769
- &.wa-outlined {
770
- &:not(input[type='file']),
771
- &::file-selector-button {
772
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
773
- background-color: transparent;
774
- border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
775
- }
776
-
777
- &:not(:disabled) {
778
- &:not(input[type='file']):hover,
779
- &::file-selector-button:hover {
780
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
781
- background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
782
- }
783
-
784
- &:not(input[type='file']):active,
785
- &::file-selector-button:active {
786
- color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
787
- background-color: color-mix(
788
- in oklab,
789
- var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
790
- var(--wa-color-mix-active)
791
- );
792
- }
793
- }
794
- }
795
-
796
- &.wa-filled {
797
- &:not(input[type='file']),
798
- &::file-selector-button {
799
- color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
800
- background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
801
- border-color: transparent;
802
- }
803
-
804
- &:not(:disabled) {
805
- &:not(input[type='file']):hover,
806
- &::file-selector-button:hover {
807
- color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
808
- background-color: color-mix(
809
- in oklab,
810
- var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
811
- var(--wa-color-mix-hover)
812
- );
813
- }
814
-
815
- &:not(input[type='file']):active,
816
- &::file-selector-button:active {
817
- color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
818
- background-color: color-mix(
819
- in oklab,
820
- var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
821
- var(--wa-color-mix-active)
822
- );
823
- }
824
- }
825
-
826
- &.wa-outlined {
827
- &:not(input[type='file']),
828
- &::file-selector-button {
829
- border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
830
- }
831
- }
832
- }
833
-
834
- &.wa-accent {
835
- &:not(input[type='file']),
836
- &::file-selector-button {
837
- color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
838
- background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
839
- border-color: transparent;
840
- }
841
-
842
- &:not(:disabled) {
843
- &:not(input[type='file']):hover,
844
- &::file-selector-button:hover {
845
- background-color: color-mix(
846
- in oklab,
847
- var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
848
- var(--wa-color-mix-hover)
849
- );
850
- }
851
-
852
- &:not(input[type='file']):active,
853
- &::file-selector-button:active {
854
- background-color: color-mix(
855
- in oklab,
856
- var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
857
- var(--wa-color-mix-active)
858
- );
859
- }
860
- }
861
- }
862
-
863
- &.wa-pill {
864
- &:not(input[type='file']),
865
- &::file-selector-button {
866
- border-radius: var(--wa-border-radius-pill);
867
- }
868
- }
869
-
870
- &:focus {
871
- outline: none;
872
- }
873
-
874
- &:focus-visible {
875
- outline: var(--wa-focus-ring);
876
- outline-offset: var(--wa-focus-ring-offset);
877
- }
878
-
879
- /* Wrap in :is() so that Safari doesn't stop parsing this block */
880
- &:is(::-moz-focus-inner) {
881
- border: 0;
882
- }
883
-
884
- &:disabled {
885
- opacity: 0.5;
886
- cursor: not-allowed;
887
-
888
- /* When disabled, prevent mouse events from bubbling up from children */
889
- * {
890
- pointer-events: none;
891
- }
892
- }
893
-
894
- /* Adds space between icons and adjacent elements
895
- * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
896
- & > wa-icon:has(+ *) {
897
- margin-inline-end: 0.75em;
898
- }
899
-
900
- & > * + wa-icon {
901
- margin-inline-start: 0.75em;
902
- }
903
- }
904
- /* #endregion */
905
-
906
- /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
907
- input[type='file'] {
908
- display: block;
909
-
910
- max-inline-size: 100%;
911
-
912
- color: var(--wa-form-control-value-color);
913
- font-family: inherit;
914
- font-size: var(--wa-form-control-value-font-size);
915
- font-weight: var(--wa-form-control-value-font-weight);
916
- line-height: var(--wa-form-control-value-line-height);
917
- vertical-align: middle;
918
-
919
- border-radius: var(--wa-border-radius-m);
920
-
921
- cursor: pointer;
922
- }
923
- /* #endregion */
924
-
925
- /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
926
- input[type='checkbox'],
927
- label:has(input[type='checkbox']),
928
- input[type='radio'],
929
- label:has(input[type='radio']) {
930
- display: inline-flex;
931
-
932
- width: fit-content;
933
-
934
- color: var(--wa-form-control-value-color);
935
- font-family: inherit;
936
- font-size: var(--wa-form-control-value-font-size);
937
- font-weight: var(--wa-form-control-value-font-weight);
938
- line-height: var(--wa-form-control-value-line-height);
939
-
940
- user-select: none;
941
- -webkit-user-select: none;
942
-
943
- &,
944
- + label {
945
- cursor: pointer;
946
- }
947
-
948
- &:disabled,
949
- &:has(:disabled) {
950
- opacity: 0.5;
951
-
952
- cursor: not-allowed;
953
- }
954
- }
955
-
956
- input[type='checkbox'],
957
- input[type='radio'] {
958
- appearance: none;
959
-
960
- flex: 0 0 auto;
961
- align-items: center;
962
- justify-content: center;
963
-
964
- width: var(--wa-form-control-toggle-size);
965
- height: var(--wa-form-control-toggle-size);
966
- margin: 0;
967
- margin-inline-end: 0.5em;
968
-
969
- background-color: var(--wa-form-control-background-color);
970
- border-color: var(--wa-form-control-border-color);
971
- border-style: var(--wa-border-style);
972
- border-width: var(--wa-form-control-border-width);
973
-
974
- transition:
975
- background var(--wa-transition-normal),
976
- border-color var(--wa-transition-fast),
977
- box-shadow var(--wa-transition-fast),
978
- color var(--wa-transition-fast);
979
- transition-timing-function: var(--wa-transition-easing);
980
-
981
- &:focus-visible {
982
- outline: var(--wa-focus-ring);
983
- outline-offset: var(--wa-focus-ring-offset);
984
- }
985
- }
986
-
987
- /* Checkbox */
988
- input[type='checkbox'] {
989
- --checked-icon-color: var(--wa-color-brand-on-loud);
990
- --checked-icon-scale: 0.8;
991
-
992
- border-radius: min(
993
- calc(var(--wa-form-control-toggle-size) * 0.375),
994
- var(--wa-border-radius-s)
995
- ); /* min prevents entirely circular checkbox */
996
-
997
- &:checked,
998
- &:indeterminate {
999
- color: var(--checked-icon-color);
1000
-
1001
- background-color: var(--wa-form-control-activated-color);
1002
- border-color: var(--wa-form-control-activated-color);
1003
- }
1004
-
1005
- &:checked::after,
1006
- &:indeterminate::after {
1007
- content: '';
1008
-
1009
- width: var(--wa-form-control-toggle-size);
1010
- height: var(--wa-form-control-toggle-size);
1011
- scale: var(--checked-icon-scale);
1012
-
1013
- background-color: currentColor;
1014
- }
1015
-
1016
- &:checked::after {
1017
- mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
1018
- center / 1em 1em no-repeat;
1019
- }
1020
-
1021
- &:indeterminate::after {
1022
- mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
1023
- center no-repeat;
1024
- }
1025
- }
1026
-
1027
- /* Radio */
1028
- input[type='radio'] {
1029
- --checked-icon-color: var(--wa-form-control-activated-color);
1030
- --checked-icon-scale: 0.7;
1031
-
1032
- color: transparent;
1033
-
1034
- border-radius: 50%;
1035
-
1036
- &:checked {
1037
- color: var(--checked-icon-color);
1038
-
1039
- border-color: var(--wa-form-control-activated-color);
1040
- }
1041
-
1042
- &:checked::after {
1043
- content: '';
1044
-
1045
- aspect-ratio: 1;
1046
- width: 100%;
1047
- scale: var(--checked-icon-scale);
1048
-
1049
- background-color: currentColor;
1050
- border-radius: 50%;
1051
- }
1052
- }
1053
- /* #endregion */
1054
-
1055
- /* #region Text Fields + Textareas + Selects */
1056
- input:not(
1057
- /* Exclude inputs that don't accept text */
1058
- [type='button'],
1059
- [type='checkbox'],
1060
- [type='color'],
1061
- [type='file'],
1062
- [type='hidden'],
1063
- [type='image'],
1064
- [type='radio'],
1065
- [type='range'],
1066
- [type='reset'],
1067
- [type='submit']
1068
- ), textarea, select {
1069
- width: 100%;
1070
- height: var(--wa-form-control-height);
1071
- padding: 0 var(--wa-form-control-padding-inline);
1072
-
1073
- color: var(--wa-form-control-value-color);
1074
- font-size: var(--wa-form-control-value-size);
1075
- font-family: inherit;
1076
- font-weight: var(--wa-form-control-value-font-weight);
1077
- line-height: var(--wa-form-control-value-line-height);
1078
- vertical-align: middle;
1079
-
1080
- background-color: var(--wa-form-control-background-color);
1081
- border-color: var(--wa-form-control-border-color);
1082
- border-style: var(--wa-form-control-border-style);
1083
- border-width: var(--wa-form-control-border-width);
1084
- border-radius: var(--wa-form-control-border-radius);
1085
-
1086
- transition:
1087
- background-color var(--wa-transition-normal),
1088
- border var(--wa-transition-normal),
1089
- outline var(--wa-transition-fast);
1090
- transition-timing-function: var(--wa-transition-easing);
1091
-
1092
- cursor: text;
1093
-
1094
- &::placeholder {
1095
- color: var(--wa-form-control-placeholder-color);
1096
-
1097
- user-select: none;
1098
- -webkit-user-select: none;
1099
- }
1100
-
1101
- &:focus {
1102
- outline: none;
1103
- }
1104
-
1105
- &:focus-visible {
1106
- outline: var(--wa-focus-ring);
1107
- outline-offset: var(--wa-focus-ring-offset);
1108
- }
1109
-
1110
- &:disabled {
1111
- opacity: 0.5;
1112
-
1113
- cursor: not-allowed;
1114
- }
1115
-
1116
- &.wa-outlined {
1117
- background-color: var(--wa-form-control-background-color);
1118
- border-color: var(--wa-form-control-border-color);
1119
- }
1120
-
1121
- &.wa-filled {
1122
- background-color: var(--wa-color-neutral-fill-quiet);
1123
- border-color: var(--wa-color-neutral-fill-quiet);
1124
-
1125
- &.wa-outlined {
1126
- border-color: var(--wa-form-control-border-color);
1127
- }
1128
- }
1129
-
1130
- &.wa-pill {
1131
- border-radius: var(--wa-border-radius-pill);
1132
- }
1133
- }
1134
-
1135
- /* Textarea */
1136
- textarea {
1137
- height: auto;
1138
- min-height: var(--wa-form-control-height);
1139
- padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
1140
-
1141
- line-height: var(--wa-line-height-normal);
1142
-
1143
- resize: vertical;
1144
- }
1145
-
1146
- /* Select */
1147
- select {
1148
- --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
1149
-
1150
- appearance: none;
1151
-
1152
- position: relative;
1153
-
1154
- min-width: 0;
1155
- overflow: hidden;
1156
-
1157
- background-image: var(--icon-caret), var(--icon-caret);
1158
- background-repeat: no-repeat;
1159
- background-position: center right var(--wa-form-control-padding-inline);
1160
- background-blend-mode: hue, difference;
1161
- background-size: 1rem 1rem;
1162
-
1163
- cursor: pointer;
1164
- }
1165
- /* #endregion */
1166
-
1167
- /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
1168
- input[type='color'] {
1169
- display: block;
1170
-
1171
- block-size: var(--wa-form-control-height);
1172
- inline-size: var(--wa-form-control-height);
1173
- padding: calc(var(--wa-form-control-border-width) * 2);
1174
-
1175
- font-size: 1em;
1176
-
1177
- background: transparent;
1178
- border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
1179
- border-radius: var(--wa-form-control-border-radius);
1180
-
1181
- cursor: pointer;
1182
- forced-color-adjust: none;
1183
-
1184
- &::-webkit-color-swatch-wrapper {
1185
- padding: 0;
1186
- border-radius: inherit;
1187
- }
1188
-
1189
- &::-webkit-color-swatch {
1190
- border: none;
1191
- border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
1192
- }
1193
-
1194
- &::-moz-color-swatch {
1195
- border: none;
1196
- border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
1197
- }
1198
-
1199
- &:focus-visible {
1200
- outline: var(--wa-focus-ring);
1201
- outline-offset: var(--wa-focus-ring-offset);
1202
- }
1203
- }
1204
- /* #endregion */
1205
-
1206
- /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
1207
- input[type='range'] {
1208
- --thumb-width: 1.4em;
1209
- --thumb-height: 1.4em;
1210
- --track-size: 0.5em;
1211
-
1212
- -webkit-appearance: none;
1213
-
1214
- display: flex;
1215
- flex-direction: column;
1216
- position: relative;
1217
-
1218
- width: 100%;
1219
- height: var(--track-size);
1220
- margin: 0;
1221
-
1222
- font-size: inherit;
1223
- line-height: var(--wa-form-control-height);
1224
- vertical-align: middle;
1225
-
1226
- background-color: var(--wa-color-neutral-fill-normal);
1227
- border-radius: calc(var(--track-size) / 2);
1228
-
1229
- &::-webkit-slider-runnable-track {
1230
- width: 100%;
1231
- height: var(--track-size);
1232
-
1233
- border: none;
1234
- border-radius: 999px;
1235
- }
1236
-
1237
- &::-webkit-slider-thumb {
1238
- -webkit-appearance: none;
1239
-
1240
- width: var(--thumb-width);
1241
- height: var(--thumb-height);
1242
- margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);
1243
-
1244
- background-color: var(--wa-form-control-activated-color);
1245
- border: solid 0.125em var(--wa-color-surface-default);
1246
- border-radius: 50%;
1247
-
1248
- transition-property: background-color, border-color, box-shadow, color;
1249
- transition-duration: var(--wa-transition-normal);
1250
- transition-timing-function: var(--wa-transition-easing);
1251
- }
1252
-
1253
- &:enabled {
1254
- &:focus-visible::-webkit-slider-thumb {
1255
- outline: var(--wa-focus-ring);
1256
- outline-offset: var(--wa-focus-ring-offset);
1257
- }
1258
-
1259
- &::-webkit-slider-thumb {
1260
- cursor: pointer;
1261
- }
1262
-
1263
- &::-webkit-slider-thumb:active {
1264
- cursor: grabbing;
1265
- }
1266
- }
1267
-
1268
- &::-moz-focus-outer {
1269
- border: 0;
1270
- }
1271
-
1272
- &::-moz-range-progress {
1273
- height: var(--track-size);
1274
-
1275
- background-color: var(--wa-color-neutral-fill-normal);
1276
- border-radius: 3px;
1277
- }
1278
-
1279
- &::-moz-range-track {
1280
- width: 100%;
1281
- height: var(--track-size);
1282
-
1283
- background-color: var(--wa-color-neutral-fill-normal);
1284
- border: none;
1285
- border-radius: 999px;
1286
- }
1287
-
1288
- &::-moz-range-thumb {
1289
- width: var(--thumb-width);
1290
- height: var(--thumb-height);
1291
-
1292
- background-color: var(--wa-form-control-activated-color);
1293
- border: solid 0.125em var(--wa-color-surface-default);
1294
- border-radius: 50%;
1295
-
1296
- transition-property: background-color, border-color, box-shadow, color;
1297
- transition-duration: var(--wa-transition-normal);
1298
- transition-timing-function: var(--wa-transition-easing);
1299
- }
1300
-
1301
- &:enabled {
1302
- &:focus-visible::-moz-range-thumb {
1303
- outline: var(--wa-focus-ring);
1304
- outline-offset: var(--wa-focus-ring-offset);
1305
- }
1306
-
1307
- &::-moz-range-thumb {
1308
- cursor: pointer;
1309
- }
1310
-
1311
- &::-moz-range-thumb:active {
1312
- cursor: grabbing;
1313
- }
1314
- }
1315
- }
1316
-
1317
- label > input[type='range'] {
1318
- margin-block-start: 1em;
1319
- }
1320
-
1321
- input[type='range']:focus {
1322
- outline: none;
1323
- }
1324
-
1325
- input[type='range']:disabled {
1326
- opacity: 0.5;
1327
-
1328
- cursor: not-allowed;
1329
-
1330
- &::-webkit-slider-thumb {
1331
- cursor: not-allowed;
1332
- }
1333
-
1334
- &::-moz-range-thumb {
1335
- cursor: not-allowed;
1336
- }
1337
- }
1338
- /* #endregion */
1339
-
1340
- /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
1341
- progress {
1342
- --indicator-color: var(--wa-color-brand-fill-loud);
1343
-
1344
- width: 100%;
1345
- height: 1rem;
1346
- overflow: hidden;
1347
-
1348
- color: var(--wa-color-brand-on-loud);
1349
-
1350
- background-color: var(--wa-color-neutral-fill-normal);
1351
- border-radius: var(--wa-border-radius-pill);
1352
-
1353
- &::-webkit-progress-bar {
1354
- background: transparent;
1355
- }
1356
-
1357
- &[value]::-webkit-progress-value {
1358
- background-color: var(--indicator-color);
1359
- }
1360
-
1361
- &::-moz-progress-bar {
1362
- background-color: var(--indicator-color);
1363
- }
1364
- }
1365
-
1366
- /* Indeterminate */
1367
- progress:not([value]) {
1368
- padding-left: var(--inset-inline-start);
1369
-
1370
- animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
1371
-
1372
- &::-webkit-progress-bar {
1373
- background-color: var(
1374
- --indicator-color
1375
- ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
1376
- }
1377
- }
1378
-
1379
- @keyframes wa-fade-in {
1380
- from {
1381
- opacity: 0;
1382
- }
1383
- }
1384
-
1385
- /* For some reason Chrome fiercely resists animations on this pseudo
1386
- so we had to do it with padding on <progress> */
1387
- @keyframes wa-progress-indeterminate {
1388
- 0% {
1389
- padding-inline-end: 100%;
1390
- }
1391
-
1392
- 25%,
1393
- 100% {
1394
- padding-inline-end: 0%;
1395
- }
1396
-
1397
- 75%,
1398
- 100% {
1399
- padding-inline-start: 100%;
1400
- }
1401
- }
1402
- /* #endregion */
1403
-
1404
- /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
1405
- .wa-invalid {
1406
- --wa-form-control-border-color: var(--wa-color-danger-border-loud);
1407
- --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
1408
- --wa-form-control-value-color: var(--wa-color-danger-on-quiet);
1409
-
1410
- /* Focus ring */
1411
- --wa-color-focus: var(--wa-color-danger-border-loud);
1412
-
1413
- /* Help text */
1414
- --wa-color-text-quiet: var(--wa-color-danger-on-quiet);
1415
- }
1416
-
1417
- .wa-valid {
1418
- --wa-form-control-border-color: var(--wa-color-success-border-loud);
1419
- --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
1420
- --wa-form-control-value-color: var(--wa-color-success-on-quiet);
1421
-
1422
- /* Focus ring */
1423
- --wa-color-focus: var(--wa-color-success-border-loud);
1424
-
1425
- /* Help text */
1426
- --wa-color-text-quiet: var(--wa-color-success-on-quiet);
1427
- }
1428
- /* #endregion */
1429
- }
1430
- @layer wa-utilities {
1431
- /*
1432
- * Utility to minimize FOUCE and show custom elements only after they're registered
1433
- */
1434
- .wa-cloak:has(:not(:defined)) {
1435
- animation: 2s step-end wa-fouce-cloak;
1436
- }
1437
-
1438
- @keyframes wa-fouce-cloak {
1439
- from {
1440
- opacity: 0;
1441
- }
1442
- to {
1443
- opacity: 1;
1444
- }
1445
- }
1446
- }
1447
- @layer wa-utilities {
1448
- .wa-visually-hidden:not(:focus-within),
1449
- .wa-visually-hidden-force,
1450
- .wa-visually-hidden-hint::part(hint),
1451
- .wa-visually-hidden-label::part(label) {
1452
- position: absolute !important;
1453
- width: 1px !important;
1454
- height: 1px !important;
1455
- clip: rect(0 0 0 0) !important;
1456
- clip-path: inset(50%) !important;
1457
- border: none !important;
1458
- overflow: hidden !important;
1459
- white-space: nowrap !important;
1460
- padding: 0 !important;
1461
- }
1462
- }
1463
- @layer wa-utilities {
1464
- /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
1465
- @supports (scrollbar-gutter: stable) {
1466
- .wa-scroll-lock {
1467
- scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
1468
- }
1469
-
1470
- .wa-scroll-lock body {
1471
- overflow: hidden !important;
1472
- }
1473
- }
1474
-
1475
- /** This can go away once Safari has scrollbar-gutter support. */
1476
- @supports not (scrollbar-gutter: stable) {
1477
- .wa-scroll-lock body {
1478
- padding-right: var(--wa-scroll-lock-size) !important;
1479
- overflow: hidden !important;
1480
- }
1481
- }
1482
- }
1483
- @layer wa-utilities {
1484
- .wa-placeholder {
1485
- align-self: stretch;
1486
- background-color: var(--wa-color-neutral-fill-quiet);
1487
- border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
1488
- border-radius: var(--wa-border-radius-l);
1489
- padding: var(--wa-space-3xl);
1490
- }
1491
- }
1492
- @layer wa-utilities {
1493
- .wa-align-items-start {
1494
- align-items: flex-start;
1495
- }
1496
- .wa-align-items-end {
1497
- align-items: flex-end;
1498
- }
1499
- .wa-align-items-center {
1500
- align-items: center;
1501
- }
1502
- .wa-align-items-stretch {
1503
- align-items: stretch;
1504
- }
1505
- .wa-align-items-baseline {
1506
- align-items: baseline;
1507
- }
1508
- }
1509
- @layer wa-utilities {
1510
- .wa-border-radius-s {
1511
- border-radius: var(--wa-border-radius-s);
1512
- }
1513
- .wa-border-radius-m {
1514
- border-radius: var(--wa-border-radius-m);
1515
- }
1516
- .wa-border-radius-l {
1517
- border-radius: var(--wa-border-radius-l);
1518
- }
1519
- .wa-border-radius-pill {
1520
- border-radius: var(--wa-border-radius-pill);
1521
- }
1522
- .wa-border-radius-circle {
1523
- border-radius: var(--wa-border-radius-circle);
1524
- }
1525
- .wa-border-radius-square {
1526
- border-radius: var(--wa-border-radius-square);
1527
- }
1528
- }
1529
- @layer wa-utilities {
1530
- /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
1531
- :where(
1532
- .wa-gap-0,
1533
- .wa-gap-3xs,
1534
- .wa-gap-2xs,
1535
- .wa-gap-xs,
1536
- .wa-gap-s,
1537
- .wa-gap-m,
1538
- .wa-gap-l,
1539
- .wa-gap-xl,
1540
- .wa-gap-2xl,
1541
- .wa-gap-3xl
1542
- ) {
1543
- display: flex;
1544
- }
1545
-
1546
- .wa-gap-0 {
1547
- gap: 0px;
1548
- }
1549
- .wa-gap-3xs {
1550
- gap: var(--wa-space-3xs);
1551
- }
1552
- .wa-gap-2xs {
1553
- gap: var(--wa-space-2xs);
1554
- }
1555
- .wa-gap-xs {
1556
- gap: var(--wa-space-xs);
1557
- }
1558
- .wa-gap-s {
1559
- gap: var(--wa-space-s);
1560
- }
1561
- .wa-gap-m {
1562
- gap: var(--wa-space-m);
1563
- }
1564
- .wa-gap-l {
1565
- gap: var(--wa-space-l);
1566
- }
1567
- .wa-gap-xl {
1568
- gap: var(--wa-space-xl);
1569
- }
1570
- .wa-gap-2xl {
1571
- gap: var(--wa-space-2xl);
1572
- }
1573
- .wa-gap-3xl {
1574
- gap: var(--wa-space-3xl);
1575
- }
1576
- }
1577
- @layer wa-utilities {
1578
- /* #region General ~~~~~ */
1579
- [class*='wa-body'] {
1580
- font-family: var(--wa-font-family-body);
1581
- font-weight: var(--wa-font-weight-body);
1582
- line-height: var(--wa-line-height-normal);
1583
- }
1584
-
1585
- [class*='wa-heading'] {
1586
- font-family: var(--wa-font-family-heading);
1587
- font-weight: var(--wa-font-weight-heading);
1588
- line-height: var(--wa-line-height-condensed);
1589
- text-wrap: balance;
1590
- }
1591
-
1592
- [class*='wa-caption'] {
1593
- color: var(--wa-color-text-quiet);
1594
- font-family: var(--wa-font-family-body);
1595
- font-weight: var(--wa-font-weight-body);
1596
- line-height: var(--wa-line-height-condensed);
1597
- }
1598
-
1599
- [class*='wa-longform'] {
1600
- font-family: var(--wa-font-family-longform);
1601
- font-weight: var(--wa-font-weight-longform);
1602
- line-height: var(--wa-line-height-normal);
1603
- }
1604
-
1605
- .wa-font-size-2xs,
1606
- .wa-body-2xs,
1607
- .wa-heading-2xs,
1608
- .wa-caption-2xs,
1609
- .wa-longform-2xs {
1610
- font-size: var(--wa-font-size-2xs);
1611
- }
1612
-
1613
- .wa-font-size-xs,
1614
- .wa-body-xs,
1615
- .wa-heading-xs,
1616
- .wa-caption-xs,
1617
- .wa-longform-xs {
1618
- font-size: var(--wa-font-size-xs);
1619
- }
1620
-
1621
- .wa-font-size-s,
1622
- .wa-body-s,
1623
- .wa-heading-s,
1624
- .wa-caption-s,
1625
- .wa-longform-s {
1626
- font-size: var(--wa-font-size-s);
1627
- }
1628
-
1629
- .wa-font-size-m,
1630
- .wa-body-m,
1631
- .wa-heading-m,
1632
- .wa-caption-m,
1633
- .wa-longform-m {
1634
- font-size: var(--wa-font-size-m);
1635
- }
1636
-
1637
- .wa-font-size-l,
1638
- .wa-body-l,
1639
- .wa-heading-l,
1640
- .wa-caption-l,
1641
- .wa-longform-l {
1642
- font-size: var(--wa-font-size-l);
1643
- }
1644
-
1645
- .wa-font-size-xl,
1646
- .wa-body-xl,
1647
- .wa-heading-xl,
1648
- .wa-caption-xl,
1649
- .wa-longform-xl {
1650
- font-size: var(--wa-font-size-xl);
1651
- }
1652
-
1653
- .wa-font-size-2xl,
1654
- .wa-body-2xl,
1655
- .wa-heading-2xl,
1656
- .wa-caption-2xl,
1657
- .wa-longform-2xl {
1658
- font-size: var(--wa-font-size-2xl);
1659
- }
1660
-
1661
- .wa-font-size-3xl,
1662
- .wa-body-3xl,
1663
- .wa-heading-3xl,
1664
- .wa-caption-3xl,
1665
- .wa-longform-3xl {
1666
- font-size: var(--wa-font-size-3xl);
1667
- }
1668
-
1669
- .wa-font-size-4xl,
1670
- .wa-body-4xl,
1671
- .wa-heading-4xl,
1672
- .wa-caption-4xl,
1673
- .wa-longform-4xl {
1674
- font-size: var(--wa-font-size-4xl);
1675
- }
1676
-
1677
- .wa-font-weight-light {
1678
- font-weight: var(--wa-font-weight-light);
1679
- }
1680
-
1681
- .wa-font-weight-normal {
1682
- font-weight: var(--wa-font-weight-normal);
1683
- }
1684
-
1685
- .wa-font-weight-semibold {
1686
- font-weight: var(--wa-font-weight-semibold);
1687
- }
1688
-
1689
- .wa-font-weight-bold {
1690
- font-weight: var(--wa-font-weight-bold);
1691
- }
1692
-
1693
- .wa-color-text-normal {
1694
- color: var(--wa-color-text-normal);
1695
- }
1696
-
1697
- .wa-color-text-quiet {
1698
- color: var(--wa-color-text-quiet);
1699
- }
1700
-
1701
- .wa-color-text-link {
1702
- color: var(--wa-color-text-link);
1703
- }
1704
-
1705
- .wa-text-truncate {
1706
- overflow: hidden;
1707
- text-overflow: ellipsis;
1708
- white-space: nowrap;
1709
- }
1710
- /* #endregion */
1711
-
1712
- /* #region Links ~~~~~~~ */
1713
- .wa-link {
1714
- color: var(--wa-color-text-link);
1715
- text-decoration: var(--wa-link-decoration-default);
1716
- -webkit-text-decoration: var(--wa-link-decoration-default);
1717
-
1718
- @media (hover: hover) {
1719
- &:hover {
1720
- color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
1721
- text-decoration: var(--wa-link-decoration-hover);
1722
- -webkit-text-decoration: var(--wa-link-decoration-hover);
1723
- }
1724
- }
1725
- }
1726
-
1727
- .wa-link-plain {
1728
- color: var(--wa-color-text-normal);
1729
- text-decoration: none;
1730
-
1731
- @media (hover: hover) {
1732
- &:hover {
1733
- color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
1734
- text-decoration: none;
1735
- }
1736
- }
1737
- }
1738
- /* #endregion */
1739
-
1740
- /* #region Lists ~~~~~~~ */
1741
- .wa-list-plain:is(ol, ul) {
1742
- list-style: none;
1743
- padding-inline-start: 0;
1744
-
1745
- > li {
1746
- margin-inline-start: 0;
1747
- }
1748
- }
1749
- /* #endregion */
1750
-
1751
- /* #region Form Controls */
1752
- .wa-form-control-label {
1753
- color: var(--wa-form-control-label-color);
1754
- font-weight: var(--wa-form-control-label-font-weight);
1755
- line-height: var(--wa-form-control-label-line-height);
1756
- }
1757
-
1758
- .wa-form-control-value {
1759
- color: var(--wa-form-control-value-color);
1760
- font-weight: var(--wa-form-control-value-font-weight);
1761
- line-height: var(--wa-form-control-value-line-height);
1762
- }
1763
-
1764
- .wa-form-control-placeholder {
1765
- color: var(--wa-form-control-placeholder-color);
1766
- font-weight: var(--wa-form-control-value-font-weight);
1767
- line-height: var(--wa-form-control-value-line-height);
1768
- }
1769
-
1770
- .wa-form-control-hint {
1771
- color: var(--wa-form-control-hint-color);
1772
- font-weight: var(--wa-form-control-hint-font-weight);
1773
- font-size: var(--wa-font-size-smaller);
1774
- line-height: var(--wa-form-control-hint-line-height);
1775
- }
1776
- /* #endregion */
1777
- }
1778
- @layer wa-utilities {
1779
- :is(
1780
- [class*='wa-cluster'],
1781
- [class*='wa-flank'],
1782
- [class*='wa-frame'],
1783
- [class*='wa-grid'],
1784
- [class*='wa-stack'],
1785
- [class*='wa-split']
1786
- )
1787
- > * {
1788
- margin-block: 0;
1789
- margin-inline: 0;
1790
- }
1791
-
1792
- :where(
1793
- [class*='wa-cluster'],
1794
- [class*='wa-flank'],
1795
- [class*='wa-frame'],
1796
- [class*='wa-grid'],
1797
- [class*='wa-stack'],
1798
- [class*='wa-split']
1799
- ) {
1800
- gap: var(--wa-space-m);
1801
- }
1802
-
1803
- /* #region Cluster */
1804
- [class*='wa-cluster'] {
1805
- display: flex;
1806
- flex-wrap: wrap;
1807
- justify-content: flex-start;
1808
- }
1809
-
1810
- :where([class*='wa-cluster']) {
1811
- align-items: center;
1812
- }
1813
- /* #endregion */
1814
-
1815
- /* #region Flank */
1816
- [class*='wa-flank'] {
1817
- display: flex;
1818
- flex-wrap: wrap;
1819
-
1820
- --content-percentage: initial;
1821
- --flank-size: initial;
1822
- }
1823
-
1824
- [class*='wa-flank']:not([class*='\:end']) > :first-child,
1825
- [class*='wa-flank'][class*='\:start'] > :first-child {
1826
- flex-basis: var(--flank-size, auto);
1827
- flex-grow: 1;
1828
- }
1829
- [class*='wa-flank']:not([class*='\:end']) > :last-child,
1830
- [class*='wa-flank'][class*='\:start'] > :last-child {
1831
- flex-basis: 0;
1832
- flex-grow: 999;
1833
- min-inline-size: var(--content-percentage, 50%);
1834
- }
1835
-
1836
- [class*='wa-flank'][class*='\:end'] > :last-child {
1837
- flex-basis: var(--flank-size, auto);
1838
- flex-grow: 1;
1839
- }
1840
- [class*='wa-flank'][class*='\:end'] > :first-child {
1841
- flex-basis: 0;
1842
- flex-grow: 999;
1843
- min-inline-size: var(--content-percentage, 50%);
1844
- }
1845
-
1846
- :where([class*='wa-flank']) {
1847
- align-items: center;
1848
- }
1849
- /* #endregion */
1850
-
1851
- /* #region Frame */
1852
- [class*='wa-frame'] {
1853
- display: flex;
1854
- aspect-ratio: 1 / 1;
1855
- justify-content: center;
1856
- overflow: hidden;
1857
- }
1858
-
1859
- [class*='wa-frame'] > img,
1860
- [class*='wa-frame'] > video {
1861
- block-size: 100%;
1862
- inline-size: 100%;
1863
- object-fit: cover;
1864
- }
1865
-
1866
- [class*='wa-frame'][class*='\:square'] {
1867
- aspect-ratio: 1 / 1;
1868
- }
1869
- [class*='wa-frame'][class*='\:landscape'] {
1870
- aspect-ratio: 16 / 9;
1871
- }
1872
- [class*='wa-frame'][class*='\:portrait'] {
1873
- aspect-ratio: 9 / 16;
1874
- }
1875
-
1876
- :where([class*='wa-frame']) {
1877
- align-items: center;
1878
- }
1879
- /* #endregion */
1880
-
1881
- /* #region Grid */
1882
- [class*='wa-grid'] {
1883
- display: grid;
1884
- grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
1885
-
1886
- --min-column-size: initial;
1887
- }
1888
-
1889
- .wa-span-grid {
1890
- grid-column: 1 / -1;
1891
- }
1892
- /* #endregion */
1893
-
1894
- /* #region Split */
1895
- [class*='wa-split'] {
1896
- display: flex;
1897
- flex-wrap: wrap;
1898
- justify-content: space-between;
1899
- }
1900
-
1901
- [class*='wa-split'],
1902
- [class*='wa-split'][class*='\:row'] {
1903
- flex-direction: row;
1904
- block-size: auto;
1905
- inline-size: 100%;
1906
- }
1907
-
1908
- [class*='wa-split']:not([class*='\:column']) > :first-child {
1909
- flex: 0 1 auto;
1910
- }
1911
-
1912
- [class*='wa-split'][class*='\:column'] {
1913
- flex-direction: column;
1914
- block-size: auto;
1915
- inline-size: auto;
1916
- align-self: stretch;
1917
- }
1918
-
1919
- :where([class*='wa-split']) {
1920
- align-items: center;
1921
- }
1922
-
1923
- /* #endregion */
1924
-
1925
- /* #region Stack */
1926
- [class*='wa-stack'] {
1927
- display: flex;
1928
- flex-direction: column;
1929
- justify-content: flex-start;
1930
- }
1931
-
1932
- :where([class*='wa-stack']) {
1933
- align-items: stretch;
1934
- }
1935
- /* #endregion */
1936
- }
1937
- @layer wa-utilities {
1938
- :host([size='small']),
1939
- .wa-size-s {
1940
- font-size: var(--wa-font-size-s);
1941
- }
1942
-
1943
- :host([size='medium']),
1944
- .wa-size-m {
1945
- font-size: var(--wa-font-size-m);
1946
- }
1947
-
1948
- :host([size='large']),
1949
- .wa-size-l {
1950
- font-size: var(--wa-font-size-l);
1951
- }
1952
- }
1953
- @layer wa-utilities {
1954
- :where(:root),
1955
- .wa-neutral,
1956
- :host([variant='neutral']) {
1957
- --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
1958
- --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
1959
- --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
1960
- --wa-color-border-loud: var(--wa-color-neutral-border-loud);
1961
- --wa-color-border-normal: var(--wa-color-neutral-border-normal);
1962
- --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
1963
- --wa-color-on-loud: var(--wa-color-neutral-on-loud);
1964
- --wa-color-on-normal: var(--wa-color-neutral-on-normal);
1965
- --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
1966
- }
1967
-
1968
- .wa-brand,
1969
- :host([variant='brand']) {
1970
- --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
1971
- --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
1972
- --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
1973
- --wa-color-border-loud: var(--wa-color-brand-border-loud);
1974
- --wa-color-border-normal: var(--wa-color-brand-border-normal);
1975
- --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
1976
- --wa-color-on-loud: var(--wa-color-brand-on-loud);
1977
- --wa-color-on-normal: var(--wa-color-brand-on-normal);
1978
- --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
1979
- }
1980
-
1981
- .wa-success,
1982
- :host([variant='success']) {
1983
- --wa-color-fill-loud: var(--wa-color-success-fill-loud);
1984
- --wa-color-fill-normal: var(--wa-color-success-fill-normal);
1985
- --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
1986
- --wa-color-border-loud: var(--wa-color-success-border-loud);
1987
- --wa-color-border-normal: var(--wa-color-success-border-normal);
1988
- --wa-color-border-quiet: var(--wa-color-success-border-quiet);
1989
- --wa-color-on-loud: var(--wa-color-success-on-loud);
1990
- --wa-color-on-normal: var(--wa-color-success-on-normal);
1991
- --wa-color-on-quiet: var(--wa-color-success-on-quiet);
1992
- }
1993
-
1994
- .wa-warning,
1995
- :host([variant='warning']) {
1996
- --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
1997
- --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
1998
- --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
1999
- --wa-color-border-loud: var(--wa-color-warning-border-loud);
2000
- --wa-color-border-normal: var(--wa-color-warning-border-normal);
2001
- --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
2002
- --wa-color-on-loud: var(--wa-color-warning-on-loud);
2003
- --wa-color-on-normal: var(--wa-color-warning-on-normal);
2004
- --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
2005
- }
2006
-
2007
- .wa-danger,
2008
- :host([variant='danger']) {
2009
- --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
2010
- --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
2011
- --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
2012
- --wa-color-border-loud: var(--wa-color-danger-border-loud);
2013
- --wa-color-border-normal: var(--wa-color-danger-border-normal);
2014
- --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
2015
- --wa-color-on-loud: var(--wa-color-danger-on-loud);
2016
- --wa-color-on-normal: var(--wa-color-danger-on-normal);
2017
- --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
2018
- }
2019
- }
2020
- /* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
2021
- :where(:root),
2022
- :host {
2023
- /**
2024
- * Conditional tokens to check if the key color is >= 60
2025
- * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
2026
- * The numeric value of the key is isolated as --wa-color-{hue}-key
2027
- * If key < 60, the result is 0%
2028
- * If key >= 60, the result is 100%
2029
- * Intended to be used in the color-mix() functions below
2030
- */
2031
-
2032
- --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
2033
- --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
2034
- --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
2035
- --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
2036
- --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
2037
- --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
2038
- --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
2039
- --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
2040
- --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
2041
- --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
2042
-
2043
- /**
2044
- * Tokens to set text color with appropriate WCAG 2.1 contrast
2045
- * If key < 60, the text color is white
2046
- * If key >= 60, the text color is {hue}-10
2047
- */
2048
-
2049
- --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
2050
- --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
2051
- --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
2052
- --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
2053
- --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
2054
- --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
2055
- --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
2056
- --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
2057
- --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
2058
- --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
2059
- }
2060
- @layer wa-color-variant {
2061
- :where(:root), /* default */
2062
- .wa-brand-blue {
2063
- --wa-color-brand-95: var(--wa-color-blue-95);
2064
- --wa-color-brand-90: var(--wa-color-blue-90);
2065
- --wa-color-brand-80: var(--wa-color-blue-80);
2066
- --wa-color-brand-70: var(--wa-color-blue-70);
2067
- --wa-color-brand-60: var(--wa-color-blue-60);
2068
- --wa-color-brand-50: var(--wa-color-blue-50);
2069
- --wa-color-brand-40: var(--wa-color-blue-40);
2070
- --wa-color-brand-30: var(--wa-color-blue-30);
2071
- --wa-color-brand-20: var(--wa-color-blue-20);
2072
- --wa-color-brand-10: var(--wa-color-blue-10);
2073
- --wa-color-brand-05: var(--wa-color-blue-05);
2074
- --wa-color-brand: var(--wa-color-blue);
2075
- --wa-color-brand-on: var(--wa-color-blue-on);
2076
- }
2077
-
2078
- .wa-brand-red {
2079
- --wa-color-brand-95: var(--wa-color-red-95);
2080
- --wa-color-brand-90: var(--wa-color-red-90);
2081
- --wa-color-brand-80: var(--wa-color-red-80);
2082
- --wa-color-brand-70: var(--wa-color-red-70);
2083
- --wa-color-brand-60: var(--wa-color-red-60);
2084
- --wa-color-brand-50: var(--wa-color-red-50);
2085
- --wa-color-brand-40: var(--wa-color-red-40);
2086
- --wa-color-brand-30: var(--wa-color-red-30);
2087
- --wa-color-brand-20: var(--wa-color-red-20);
2088
- --wa-color-brand-10: var(--wa-color-red-10);
2089
- --wa-color-brand-05: var(--wa-color-red-05);
2090
- --wa-color-brand: var(--wa-color-red);
2091
- --wa-color-brand-on: var(--wa-color-red-on);
2092
- }
2093
-
2094
- .wa-brand-orange {
2095
- --wa-color-brand-95: var(--wa-color-orange-95);
2096
- --wa-color-brand-90: var(--wa-color-orange-90);
2097
- --wa-color-brand-80: var(--wa-color-orange-80);
2098
- --wa-color-brand-70: var(--wa-color-orange-70);
2099
- --wa-color-brand-60: var(--wa-color-orange-60);
2100
- --wa-color-brand-50: var(--wa-color-orange-50);
2101
- --wa-color-brand-40: var(--wa-color-orange-40);
2102
- --wa-color-brand-30: var(--wa-color-orange-30);
2103
- --wa-color-brand-20: var(--wa-color-orange-20);
2104
- --wa-color-brand-10: var(--wa-color-orange-10);
2105
- --wa-color-brand-05: var(--wa-color-orange-05);
2106
- --wa-color-brand: var(--wa-color-orange);
2107
- --wa-color-brand-on: var(--wa-color-orange-on);
2108
- }
2109
-
2110
- .wa-brand-yellow {
2111
- --wa-color-brand-95: var(--wa-color-yellow-95);
2112
- --wa-color-brand-90: var(--wa-color-yellow-90);
2113
- --wa-color-brand-80: var(--wa-color-yellow-80);
2114
- --wa-color-brand-70: var(--wa-color-yellow-70);
2115
- --wa-color-brand-60: var(--wa-color-yellow-60);
2116
- --wa-color-brand-50: var(--wa-color-yellow-50);
2117
- --wa-color-brand-40: var(--wa-color-yellow-40);
2118
- --wa-color-brand-30: var(--wa-color-yellow-30);
2119
- --wa-color-brand-20: var(--wa-color-yellow-20);
2120
- --wa-color-brand-10: var(--wa-color-yellow-10);
2121
- --wa-color-brand-05: var(--wa-color-yellow-05);
2122
- --wa-color-brand: var(--wa-color-yellow);
2123
- --wa-color-brand-on: var(--wa-color-yellow-on);
2124
- }
2125
-
2126
- .wa-brand-green {
2127
- --wa-color-brand-95: var(--wa-color-green-95);
2128
- --wa-color-brand-90: var(--wa-color-green-90);
2129
- --wa-color-brand-80: var(--wa-color-green-80);
2130
- --wa-color-brand-70: var(--wa-color-green-70);
2131
- --wa-color-brand-60: var(--wa-color-green-60);
2132
- --wa-color-brand-50: var(--wa-color-green-50);
2133
- --wa-color-brand-40: var(--wa-color-green-40);
2134
- --wa-color-brand-30: var(--wa-color-green-30);
2135
- --wa-color-brand-20: var(--wa-color-green-20);
2136
- --wa-color-brand-10: var(--wa-color-green-10);
2137
- --wa-color-brand-05: var(--wa-color-green-05);
2138
- --wa-color-brand: var(--wa-color-green);
2139
- --wa-color-brand-on: var(--wa-color-green-on);
2140
- }
2141
-
2142
- .wa-brand-cyan {
2143
- --wa-color-brand-95: var(--wa-color-cyan-95);
2144
- --wa-color-brand-90: var(--wa-color-cyan-90);
2145
- --wa-color-brand-80: var(--wa-color-cyan-80);
2146
- --wa-color-brand-70: var(--wa-color-cyan-70);
2147
- --wa-color-brand-60: var(--wa-color-cyan-60);
2148
- --wa-color-brand-50: var(--wa-color-cyan-50);
2149
- --wa-color-brand-40: var(--wa-color-cyan-40);
2150
- --wa-color-brand-30: var(--wa-color-cyan-30);
2151
- --wa-color-brand-20: var(--wa-color-cyan-20);
2152
- --wa-color-brand-10: var(--wa-color-cyan-10);
2153
- --wa-color-brand-05: var(--wa-color-cyan-05);
2154
- --wa-color-brand: var(--wa-color-cyan);
2155
- --wa-color-brand-on: var(--wa-color-cyan-on);
2156
- }
2157
-
2158
- .wa-brand-indigo {
2159
- --wa-color-brand-95: var(--wa-color-indigo-95);
2160
- --wa-color-brand-90: var(--wa-color-indigo-90);
2161
- --wa-color-brand-80: var(--wa-color-indigo-80);
2162
- --wa-color-brand-70: var(--wa-color-indigo-70);
2163
- --wa-color-brand-60: var(--wa-color-indigo-60);
2164
- --wa-color-brand-50: var(--wa-color-indigo-50);
2165
- --wa-color-brand-40: var(--wa-color-indigo-40);
2166
- --wa-color-brand-30: var(--wa-color-indigo-30);
2167
- --wa-color-brand-20: var(--wa-color-indigo-20);
2168
- --wa-color-brand-10: var(--wa-color-indigo-10);
2169
- --wa-color-brand-05: var(--wa-color-indigo-05);
2170
- --wa-color-brand: var(--wa-color-indigo);
2171
- --wa-color-brand-on: var(--wa-color-indigo-on);
2172
- }
2173
-
2174
- .wa-brand-purple {
2175
- --wa-color-brand-95: var(--wa-color-purple-95);
2176
- --wa-color-brand-90: var(--wa-color-purple-90);
2177
- --wa-color-brand-80: var(--wa-color-purple-80);
2178
- --wa-color-brand-70: var(--wa-color-purple-70);
2179
- --wa-color-brand-60: var(--wa-color-purple-60);
2180
- --wa-color-brand-50: var(--wa-color-purple-50);
2181
- --wa-color-brand-40: var(--wa-color-purple-40);
2182
- --wa-color-brand-30: var(--wa-color-purple-30);
2183
- --wa-color-brand-20: var(--wa-color-purple-20);
2184
- --wa-color-brand-10: var(--wa-color-purple-10);
2185
- --wa-color-brand-05: var(--wa-color-purple-05);
2186
- --wa-color-brand: var(--wa-color-purple);
2187
- --wa-color-brand-on: var(--wa-color-purple-on);
2188
- }
2189
-
2190
- .wa-brand-pink {
2191
- --wa-color-brand-95: var(--wa-color-pink-95);
2192
- --wa-color-brand-90: var(--wa-color-pink-90);
2193
- --wa-color-brand-80: var(--wa-color-pink-80);
2194
- --wa-color-brand-70: var(--wa-color-pink-70);
2195
- --wa-color-brand-60: var(--wa-color-pink-60);
2196
- --wa-color-brand-50: var(--wa-color-pink-50);
2197
- --wa-color-brand-40: var(--wa-color-pink-40);
2198
- --wa-color-brand-30: var(--wa-color-pink-30);
2199
- --wa-color-brand-20: var(--wa-color-pink-20);
2200
- --wa-color-brand-10: var(--wa-color-pink-10);
2201
- --wa-color-brand-05: var(--wa-color-pink-05);
2202
- --wa-color-brand: var(--wa-color-pink);
2203
- --wa-color-brand-on: var(--wa-color-pink-on);
2204
- }
2205
-
2206
- .wa-brand-gray {
2207
- --wa-color-brand-95: var(--wa-color-gray-95);
2208
- --wa-color-brand-90: var(--wa-color-gray-90);
2209
- --wa-color-brand-80: var(--wa-color-gray-80);
2210
- --wa-color-brand-70: var(--wa-color-gray-70);
2211
- --wa-color-brand-60: var(--wa-color-gray-60);
2212
- --wa-color-brand-50: var(--wa-color-gray-50);
2213
- --wa-color-brand-40: var(--wa-color-gray-40);
2214
- --wa-color-brand-30: var(--wa-color-gray-30);
2215
- --wa-color-brand-20: var(--wa-color-gray-20);
2216
- --wa-color-brand-10: var(--wa-color-gray-10);
2217
- --wa-color-brand-05: var(--wa-color-gray-05);
2218
- --wa-color-brand: var(--wa-color-gray);
2219
- --wa-color-brand-on: var(--wa-color-gray-on);
2220
- }
2221
- }
2222
- @layer wa-color-variant {
2223
- :where(:root), /* default */
2224
- .wa-neutral-gray {
2225
- --wa-color-neutral-95: var(--wa-color-gray-95);
2226
- --wa-color-neutral-90: var(--wa-color-gray-90);
2227
- --wa-color-neutral-80: var(--wa-color-gray-80);
2228
- --wa-color-neutral-70: var(--wa-color-gray-70);
2229
- --wa-color-neutral-60: var(--wa-color-gray-60);
2230
- --wa-color-neutral-50: var(--wa-color-gray-50);
2231
- --wa-color-neutral-40: var(--wa-color-gray-40);
2232
- --wa-color-neutral-30: var(--wa-color-gray-30);
2233
- --wa-color-neutral-20: var(--wa-color-gray-20);
2234
- --wa-color-neutral-10: var(--wa-color-gray-10);
2235
- --wa-color-neutral-05: var(--wa-color-gray-05);
2236
- --wa-color-neutral: var(--wa-color-gray);
2237
- --wa-color-neutral-on: var(--wa-color-gray-on);
2238
- }
2239
-
2240
- .wa-neutral-red {
2241
- --wa-color-neutral-95: var(--wa-color-red-95);
2242
- --wa-color-neutral-90: var(--wa-color-red-90);
2243
- --wa-color-neutral-80: var(--wa-color-red-80);
2244
- --wa-color-neutral-70: var(--wa-color-red-70);
2245
- --wa-color-neutral-60: var(--wa-color-red-60);
2246
- --wa-color-neutral-50: var(--wa-color-red-50);
2247
- --wa-color-neutral-40: var(--wa-color-red-40);
2248
- --wa-color-neutral-30: var(--wa-color-red-30);
2249
- --wa-color-neutral-20: var(--wa-color-red-20);
2250
- --wa-color-neutral-10: var(--wa-color-red-10);
2251
- --wa-color-neutral-05: var(--wa-color-red-05);
2252
- --wa-color-neutral: var(--wa-color-red);
2253
- --wa-color-neutral-on: var(--wa-color-red-on);
2254
- }
2255
-
2256
- .wa-neutral-orange {
2257
- --wa-color-neutral-95: var(--wa-color-orange-95);
2258
- --wa-color-neutral-90: var(--wa-color-orange-90);
2259
- --wa-color-neutral-80: var(--wa-color-orange-80);
2260
- --wa-color-neutral-70: var(--wa-color-orange-70);
2261
- --wa-color-neutral-60: var(--wa-color-orange-60);
2262
- --wa-color-neutral-50: var(--wa-color-orange-50);
2263
- --wa-color-neutral-40: var(--wa-color-orange-40);
2264
- --wa-color-neutral-30: var(--wa-color-orange-30);
2265
- --wa-color-neutral-20: var(--wa-color-orange-20);
2266
- --wa-color-neutral-10: var(--wa-color-orange-10);
2267
- --wa-color-neutral-05: var(--wa-color-orange-05);
2268
- --wa-color-neutral: var(--wa-color-orange);
2269
- --wa-color-neutral-on: var(--wa-color-orange-on);
2270
- }
2271
-
2272
- .wa-neutral-yellow {
2273
- --wa-color-neutral-95: var(--wa-color-yellow-95);
2274
- --wa-color-neutral-90: var(--wa-color-yellow-90);
2275
- --wa-color-neutral-80: var(--wa-color-yellow-80);
2276
- --wa-color-neutral-70: var(--wa-color-yellow-70);
2277
- --wa-color-neutral-60: var(--wa-color-yellow-60);
2278
- --wa-color-neutral-50: var(--wa-color-yellow-50);
2279
- --wa-color-neutral-40: var(--wa-color-yellow-40);
2280
- --wa-color-neutral-30: var(--wa-color-yellow-30);
2281
- --wa-color-neutral-20: var(--wa-color-yellow-20);
2282
- --wa-color-neutral-10: var(--wa-color-yellow-10);
2283
- --wa-color-neutral-05: var(--wa-color-yellow-05);
2284
- --wa-color-neutral: var(--wa-color-yellow);
2285
- --wa-color-neutral-on: var(--wa-color-yellow-on);
2286
- }
2287
-
2288
- .wa-neutral-green {
2289
- --wa-color-neutral-95: var(--wa-color-green-95);
2290
- --wa-color-neutral-90: var(--wa-color-green-90);
2291
- --wa-color-neutral-80: var(--wa-color-green-80);
2292
- --wa-color-neutral-70: var(--wa-color-green-70);
2293
- --wa-color-neutral-60: var(--wa-color-green-60);
2294
- --wa-color-neutral-50: var(--wa-color-green-50);
2295
- --wa-color-neutral-40: var(--wa-color-green-40);
2296
- --wa-color-neutral-30: var(--wa-color-green-30);
2297
- --wa-color-neutral-20: var(--wa-color-green-20);
2298
- --wa-color-neutral-10: var(--wa-color-green-10);
2299
- --wa-color-neutral-05: var(--wa-color-green-05);
2300
- --wa-color-neutral: var(--wa-color-green);
2301
- --wa-color-neutral-on: var(--wa-color-green-on);
2302
- }
2303
-
2304
- .wa-neutral-cyan {
2305
- --wa-color-neutral-95: var(--wa-color-cyan-95);
2306
- --wa-color-neutral-90: var(--wa-color-cyan-90);
2307
- --wa-color-neutral-80: var(--wa-color-cyan-80);
2308
- --wa-color-neutral-70: var(--wa-color-cyan-70);
2309
- --wa-color-neutral-60: var(--wa-color-cyan-60);
2310
- --wa-color-neutral-50: var(--wa-color-cyan-50);
2311
- --wa-color-neutral-40: var(--wa-color-cyan-40);
2312
- --wa-color-neutral-30: var(--wa-color-cyan-30);
2313
- --wa-color-neutral-20: var(--wa-color-cyan-20);
2314
- --wa-color-neutral-10: var(--wa-color-cyan-10);
2315
- --wa-color-neutral-05: var(--wa-color-cyan-05);
2316
- --wa-color-neutral: var(--wa-color-cyan);
2317
- --wa-color-neutral-on: var(--wa-color-cyan-on);
2318
- }
2319
-
2320
- .wa-neutral-blue {
2321
- --wa-color-neutral-95: var(--wa-color-blue-95);
2322
- --wa-color-neutral-90: var(--wa-color-blue-90);
2323
- --wa-color-neutral-80: var(--wa-color-blue-80);
2324
- --wa-color-neutral-70: var(--wa-color-blue-70);
2325
- --wa-color-neutral-60: var(--wa-color-blue-60);
2326
- --wa-color-neutral-50: var(--wa-color-blue-50);
2327
- --wa-color-neutral-40: var(--wa-color-blue-40);
2328
- --wa-color-neutral-30: var(--wa-color-blue-30);
2329
- --wa-color-neutral-20: var(--wa-color-blue-20);
2330
- --wa-color-neutral-10: var(--wa-color-blue-10);
2331
- --wa-color-neutral-05: var(--wa-color-blue-05);
2332
- --wa-color-neutral: var(--wa-color-blue);
2333
- --wa-color-neutral-on: var(--wa-color-blue-on);
2334
- }
2335
-
2336
- .wa-neutral-indigo {
2337
- --wa-color-neutral-95: var(--wa-color-indigo-95);
2338
- --wa-color-neutral-90: var(--wa-color-indigo-90);
2339
- --wa-color-neutral-80: var(--wa-color-indigo-80);
2340
- --wa-color-neutral-70: var(--wa-color-indigo-70);
2341
- --wa-color-neutral-60: var(--wa-color-indigo-60);
2342
- --wa-color-neutral-50: var(--wa-color-indigo-50);
2343
- --wa-color-neutral-40: var(--wa-color-indigo-40);
2344
- --wa-color-neutral-30: var(--wa-color-indigo-30);
2345
- --wa-color-neutral-20: var(--wa-color-indigo-20);
2346
- --wa-color-neutral-10: var(--wa-color-indigo-10);
2347
- --wa-color-neutral-05: var(--wa-color-indigo-05);
2348
- --wa-color-neutral: var(--wa-color-indigo);
2349
- --wa-color-neutral-on: var(--wa-color-indigo-on);
2350
- }
2351
-
2352
- .wa-neutral-purple {
2353
- --wa-color-neutral-95: var(--wa-color-purple-95);
2354
- --wa-color-neutral-90: var(--wa-color-purple-90);
2355
- --wa-color-neutral-80: var(--wa-color-purple-80);
2356
- --wa-color-neutral-70: var(--wa-color-purple-70);
2357
- --wa-color-neutral-60: var(--wa-color-purple-60);
2358
- --wa-color-neutral-50: var(--wa-color-purple-50);
2359
- --wa-color-neutral-40: var(--wa-color-purple-40);
2360
- --wa-color-neutral-30: var(--wa-color-purple-30);
2361
- --wa-color-neutral-20: var(--wa-color-purple-20);
2362
- --wa-color-neutral-10: var(--wa-color-purple-10);
2363
- --wa-color-neutral-05: var(--wa-color-purple-05);
2364
- --wa-color-neutral: var(--wa-color-purple);
2365
- --wa-color-neutral-on: var(--wa-color-purple-on);
2366
- }
2367
-
2368
- .wa-neutral-pink {
2369
- --wa-color-neutral-95: var(--wa-color-pink-95);
2370
- --wa-color-neutral-90: var(--wa-color-pink-90);
2371
- --wa-color-neutral-80: var(--wa-color-pink-80);
2372
- --wa-color-neutral-70: var(--wa-color-pink-70);
2373
- --wa-color-neutral-60: var(--wa-color-pink-60);
2374
- --wa-color-neutral-50: var(--wa-color-pink-50);
2375
- --wa-color-neutral-40: var(--wa-color-pink-40);
2376
- --wa-color-neutral-30: var(--wa-color-pink-30);
2377
- --wa-color-neutral-20: var(--wa-color-pink-20);
2378
- --wa-color-neutral-10: var(--wa-color-pink-10);
2379
- --wa-color-neutral-05: var(--wa-color-pink-05);
2380
- --wa-color-neutral: var(--wa-color-pink);
2381
- --wa-color-neutral-on: var(--wa-color-pink-on);
2382
- }
2383
- }
2384
- @layer wa-color-variant {
2385
- :where(:root), /* default */
2386
- .wa-success-green {
2387
- --wa-color-success-95: var(--wa-color-green-95);
2388
- --wa-color-success-90: var(--wa-color-green-90);
2389
- --wa-color-success-80: var(--wa-color-green-80);
2390
- --wa-color-success-70: var(--wa-color-green-70);
2391
- --wa-color-success-60: var(--wa-color-green-60);
2392
- --wa-color-success-50: var(--wa-color-green-50);
2393
- --wa-color-success-40: var(--wa-color-green-40);
2394
- --wa-color-success-30: var(--wa-color-green-30);
2395
- --wa-color-success-20: var(--wa-color-green-20);
2396
- --wa-color-success-10: var(--wa-color-green-10);
2397
- --wa-color-success-05: var(--wa-color-green-05);
2398
- --wa-color-success: var(--wa-color-green);
2399
- --wa-color-success-on: var(--wa-color-green-on);
2400
- }
2401
-
2402
- .wa-success-red {
2403
- --wa-color-success-95: var(--wa-color-red-95);
2404
- --wa-color-success-90: var(--wa-color-red-90);
2405
- --wa-color-success-80: var(--wa-color-red-80);
2406
- --wa-color-success-70: var(--wa-color-red-70);
2407
- --wa-color-success-60: var(--wa-color-red-60);
2408
- --wa-color-success-50: var(--wa-color-red-50);
2409
- --wa-color-success-40: var(--wa-color-red-40);
2410
- --wa-color-success-30: var(--wa-color-red-30);
2411
- --wa-color-success-20: var(--wa-color-red-20);
2412
- --wa-color-success-10: var(--wa-color-red-10);
2413
- --wa-color-success-05: var(--wa-color-red-05);
2414
- --wa-color-success: var(--wa-color-red);
2415
- --wa-color-success-on: var(--wa-color-red-on);
2416
- }
2417
-
2418
- .wa-success-orange {
2419
- --wa-color-success-95: var(--wa-color-orange-95);
2420
- --wa-color-success-90: var(--wa-color-orange-90);
2421
- --wa-color-success-80: var(--wa-color-orange-80);
2422
- --wa-color-success-70: var(--wa-color-orange-70);
2423
- --wa-color-success-60: var(--wa-color-orange-60);
2424
- --wa-color-success-50: var(--wa-color-orange-50);
2425
- --wa-color-success-40: var(--wa-color-orange-40);
2426
- --wa-color-success-30: var(--wa-color-orange-30);
2427
- --wa-color-success-20: var(--wa-color-orange-20);
2428
- --wa-color-success-10: var(--wa-color-orange-10);
2429
- --wa-color-success-05: var(--wa-color-orange-05);
2430
- --wa-color-success: var(--wa-color-orange);
2431
- --wa-color-success-on: var(--wa-color-orange-on);
2432
- }
2433
-
2434
- .wa-success-yellow {
2435
- --wa-color-success-95: var(--wa-color-yellow-95);
2436
- --wa-color-success-90: var(--wa-color-yellow-90);
2437
- --wa-color-success-80: var(--wa-color-yellow-80);
2438
- --wa-color-success-70: var(--wa-color-yellow-70);
2439
- --wa-color-success-60: var(--wa-color-yellow-60);
2440
- --wa-color-success-50: var(--wa-color-yellow-50);
2441
- --wa-color-success-40: var(--wa-color-yellow-40);
2442
- --wa-color-success-30: var(--wa-color-yellow-30);
2443
- --wa-color-success-20: var(--wa-color-yellow-20);
2444
- --wa-color-success-10: var(--wa-color-yellow-10);
2445
- --wa-color-success-05: var(--wa-color-yellow-05);
2446
- --wa-color-success: var(--wa-color-yellow);
2447
- --wa-color-success-on: var(--wa-color-yellow-on);
2448
- }
2449
-
2450
- .wa-success-cyan {
2451
- --wa-color-success-95: var(--wa-color-cyan-95);
2452
- --wa-color-success-90: var(--wa-color-cyan-90);
2453
- --wa-color-success-80: var(--wa-color-cyan-80);
2454
- --wa-color-success-70: var(--wa-color-cyan-70);
2455
- --wa-color-success-60: var(--wa-color-cyan-60);
2456
- --wa-color-success-50: var(--wa-color-cyan-50);
2457
- --wa-color-success-40: var(--wa-color-cyan-40);
2458
- --wa-color-success-30: var(--wa-color-cyan-30);
2459
- --wa-color-success-20: var(--wa-color-cyan-20);
2460
- --wa-color-success-10: var(--wa-color-cyan-10);
2461
- --wa-color-success-05: var(--wa-color-cyan-05);
2462
- --wa-color-success: var(--wa-color-cyan);
2463
- --wa-color-success-on: var(--wa-color-cyan-on);
2464
- }
2465
-
2466
- .wa-success-blue {
2467
- --wa-color-success-95: var(--wa-color-blue-95);
2468
- --wa-color-success-90: var(--wa-color-blue-90);
2469
- --wa-color-success-80: var(--wa-color-blue-80);
2470
- --wa-color-success-70: var(--wa-color-blue-70);
2471
- --wa-color-success-60: var(--wa-color-blue-60);
2472
- --wa-color-success-50: var(--wa-color-blue-50);
2473
- --wa-color-success-40: var(--wa-color-blue-40);
2474
- --wa-color-success-30: var(--wa-color-blue-30);
2475
- --wa-color-success-20: var(--wa-color-blue-20);
2476
- --wa-color-success-10: var(--wa-color-blue-10);
2477
- --wa-color-success-05: var(--wa-color-blue-05);
2478
- --wa-color-success: var(--wa-color-blue);
2479
- --wa-color-success-on: var(--wa-color-blue-on);
2480
- }
2481
-
2482
- .wa-success-indigo {
2483
- --wa-color-success-95: var(--wa-color-indigo-95);
2484
- --wa-color-success-90: var(--wa-color-indigo-90);
2485
- --wa-color-success-80: var(--wa-color-indigo-80);
2486
- --wa-color-success-70: var(--wa-color-indigo-70);
2487
- --wa-color-success-60: var(--wa-color-indigo-60);
2488
- --wa-color-success-50: var(--wa-color-indigo-50);
2489
- --wa-color-success-40: var(--wa-color-indigo-40);
2490
- --wa-color-success-30: var(--wa-color-indigo-30);
2491
- --wa-color-success-20: var(--wa-color-indigo-20);
2492
- --wa-color-success-10: var(--wa-color-indigo-10);
2493
- --wa-color-success-05: var(--wa-color-indigo-05);
2494
- --wa-color-success: var(--wa-color-indigo);
2495
- --wa-color-success-on: var(--wa-color-indigo-on);
2496
- }
2497
-
2498
- .wa-success-purple {
2499
- --wa-color-success-95: var(--wa-color-purple-95);
2500
- --wa-color-success-90: var(--wa-color-purple-90);
2501
- --wa-color-success-80: var(--wa-color-purple-80);
2502
- --wa-color-success-70: var(--wa-color-purple-70);
2503
- --wa-color-success-60: var(--wa-color-purple-60);
2504
- --wa-color-success-50: var(--wa-color-purple-50);
2505
- --wa-color-success-40: var(--wa-color-purple-40);
2506
- --wa-color-success-30: var(--wa-color-purple-30);
2507
- --wa-color-success-20: var(--wa-color-purple-20);
2508
- --wa-color-success-10: var(--wa-color-purple-10);
2509
- --wa-color-success-05: var(--wa-color-purple-05);
2510
- --wa-color-success: var(--wa-color-purple);
2511
- --wa-color-success-on: var(--wa-color-purple-on);
2512
- }
2513
-
2514
- .wa-success-pink {
2515
- --wa-color-success-95: var(--wa-color-pink-95);
2516
- --wa-color-success-90: var(--wa-color-pink-90);
2517
- --wa-color-success-80: var(--wa-color-pink-80);
2518
- --wa-color-success-70: var(--wa-color-pink-70);
2519
- --wa-color-success-60: var(--wa-color-pink-60);
2520
- --wa-color-success-50: var(--wa-color-pink-50);
2521
- --wa-color-success-40: var(--wa-color-pink-40);
2522
- --wa-color-success-30: var(--wa-color-pink-30);
2523
- --wa-color-success-20: var(--wa-color-pink-20);
2524
- --wa-color-success-10: var(--wa-color-pink-10);
2525
- --wa-color-success-05: var(--wa-color-pink-05);
2526
- --wa-color-success: var(--wa-color-pink);
2527
- --wa-color-success-on: var(--wa-color-pink-on);
2528
- }
2529
-
2530
- .wa-success-gray {
2531
- --wa-color-success-95: var(--wa-color-gray-95);
2532
- --wa-color-success-90: var(--wa-color-gray-90);
2533
- --wa-color-success-80: var(--wa-color-gray-80);
2534
- --wa-color-success-70: var(--wa-color-gray-70);
2535
- --wa-color-success-60: var(--wa-color-gray-60);
2536
- --wa-color-success-50: var(--wa-color-gray-50);
2537
- --wa-color-success-40: var(--wa-color-gray-40);
2538
- --wa-color-success-30: var(--wa-color-gray-30);
2539
- --wa-color-success-20: var(--wa-color-gray-20);
2540
- --wa-color-success-10: var(--wa-color-gray-10);
2541
- --wa-color-success-05: var(--wa-color-gray-05);
2542
- --wa-color-success: var(--wa-color-gray);
2543
- --wa-color-success-on: var(--wa-color-gray-on);
2544
- }
2545
- }
2546
- @layer wa-color-variant {
2547
- :where(:root), /* default */
2548
- .wa-warning-yellow {
2549
- --wa-color-warning-95: var(--wa-color-yellow-95);
2550
- --wa-color-warning-90: var(--wa-color-yellow-90);
2551
- --wa-color-warning-80: var(--wa-color-yellow-80);
2552
- --wa-color-warning-70: var(--wa-color-yellow-70);
2553
- --wa-color-warning-60: var(--wa-color-yellow-60);
2554
- --wa-color-warning-50: var(--wa-color-yellow-50);
2555
- --wa-color-warning-40: var(--wa-color-yellow-40);
2556
- --wa-color-warning-30: var(--wa-color-yellow-30);
2557
- --wa-color-warning-20: var(--wa-color-yellow-20);
2558
- --wa-color-warning-10: var(--wa-color-yellow-10);
2559
- --wa-color-warning-05: var(--wa-color-yellow-05);
2560
- --wa-color-warning: var(--wa-color-yellow);
2561
- --wa-color-warning-on: var(--wa-color-yellow-on);
2562
- }
2563
-
2564
- .wa-warning-red {
2565
- --wa-color-warning-95: var(--wa-color-red-95);
2566
- --wa-color-warning-90: var(--wa-color-red-90);
2567
- --wa-color-warning-80: var(--wa-color-red-80);
2568
- --wa-color-warning-70: var(--wa-color-red-70);
2569
- --wa-color-warning-60: var(--wa-color-red-60);
2570
- --wa-color-warning-50: var(--wa-color-red-50);
2571
- --wa-color-warning-40: var(--wa-color-red-40);
2572
- --wa-color-warning-30: var(--wa-color-red-30);
2573
- --wa-color-warning-20: var(--wa-color-red-20);
2574
- --wa-color-warning-10: var(--wa-color-red-10);
2575
- --wa-color-warning-05: var(--wa-color-red-05);
2576
- --wa-color-warning: var(--wa-color-red);
2577
- --wa-color-warning-on: var(--wa-color-red-on);
2578
- }
2579
-
2580
- .wa-warning-orange {
2581
- --wa-color-warning-95: var(--wa-color-orange-95);
2582
- --wa-color-warning-90: var(--wa-color-orange-90);
2583
- --wa-color-warning-80: var(--wa-color-orange-80);
2584
- --wa-color-warning-70: var(--wa-color-orange-70);
2585
- --wa-color-warning-60: var(--wa-color-orange-60);
2586
- --wa-color-warning-50: var(--wa-color-orange-50);
2587
- --wa-color-warning-40: var(--wa-color-orange-40);
2588
- --wa-color-warning-30: var(--wa-color-orange-30);
2589
- --wa-color-warning-20: var(--wa-color-orange-20);
2590
- --wa-color-warning-10: var(--wa-color-orange-10);
2591
- --wa-color-warning-05: var(--wa-color-orange-05);
2592
- --wa-color-warning: var(--wa-color-orange);
2593
- --wa-color-warning-on: var(--wa-color-orange-on);
2594
- }
2595
-
2596
- .wa-warning-green {
2597
- --wa-color-warning-95: var(--wa-color-green-95);
2598
- --wa-color-warning-90: var(--wa-color-green-90);
2599
- --wa-color-warning-80: var(--wa-color-green-80);
2600
- --wa-color-warning-70: var(--wa-color-green-70);
2601
- --wa-color-warning-60: var(--wa-color-green-60);
2602
- --wa-color-warning-50: var(--wa-color-green-50);
2603
- --wa-color-warning-40: var(--wa-color-green-40);
2604
- --wa-color-warning-30: var(--wa-color-green-30);
2605
- --wa-color-warning-20: var(--wa-color-green-20);
2606
- --wa-color-warning-10: var(--wa-color-green-10);
2607
- --wa-color-warning-05: var(--wa-color-green-05);
2608
- --wa-color-warning: var(--wa-color-green);
2609
- --wa-color-warning-on: var(--wa-color-green-on);
2610
- }
2611
-
2612
- .wa-warning-cyan {
2613
- --wa-color-warning-95: var(--wa-color-cyan-95);
2614
- --wa-color-warning-90: var(--wa-color-cyan-90);
2615
- --wa-color-warning-80: var(--wa-color-cyan-80);
2616
- --wa-color-warning-70: var(--wa-color-cyan-70);
2617
- --wa-color-warning-60: var(--wa-color-cyan-60);
2618
- --wa-color-warning-50: var(--wa-color-cyan-50);
2619
- --wa-color-warning-40: var(--wa-color-cyan-40);
2620
- --wa-color-warning-30: var(--wa-color-cyan-30);
2621
- --wa-color-warning-20: var(--wa-color-cyan-20);
2622
- --wa-color-warning-10: var(--wa-color-cyan-10);
2623
- --wa-color-warning-05: var(--wa-color-cyan-05);
2624
- --wa-color-warning: var(--wa-color-cyan);
2625
- --wa-color-warning-on: var(--wa-color-cyan-on);
2626
- }
2627
-
2628
- .wa-warning-blue {
2629
- --wa-color-warning-95: var(--wa-color-blue-95);
2630
- --wa-color-warning-90: var(--wa-color-blue-90);
2631
- --wa-color-warning-80: var(--wa-color-blue-80);
2632
- --wa-color-warning-70: var(--wa-color-blue-70);
2633
- --wa-color-warning-60: var(--wa-color-blue-60);
2634
- --wa-color-warning-50: var(--wa-color-blue-50);
2635
- --wa-color-warning-40: var(--wa-color-blue-40);
2636
- --wa-color-warning-30: var(--wa-color-blue-30);
2637
- --wa-color-warning-20: var(--wa-color-blue-20);
2638
- --wa-color-warning-10: var(--wa-color-blue-10);
2639
- --wa-color-warning-05: var(--wa-color-blue-05);
2640
- --wa-color-warning: var(--wa-color-blue);
2641
- --wa-color-warning-on: var(--wa-color-blue-on);
2642
- }
2643
-
2644
- .wa-warning-indigo {
2645
- --wa-color-warning-95: var(--wa-color-indigo-95);
2646
- --wa-color-warning-90: var(--wa-color-indigo-90);
2647
- --wa-color-warning-80: var(--wa-color-indigo-80);
2648
- --wa-color-warning-70: var(--wa-color-indigo-70);
2649
- --wa-color-warning-60: var(--wa-color-indigo-60);
2650
- --wa-color-warning-50: var(--wa-color-indigo-50);
2651
- --wa-color-warning-40: var(--wa-color-indigo-40);
2652
- --wa-color-warning-30: var(--wa-color-indigo-30);
2653
- --wa-color-warning-20: var(--wa-color-indigo-20);
2654
- --wa-color-warning-10: var(--wa-color-indigo-10);
2655
- --wa-color-warning-05: var(--wa-color-indigo-05);
2656
- --wa-color-warning: var(--wa-color-indigo);
2657
- --wa-color-warning-on: var(--wa-color-indigo-on);
2658
- }
2659
-
2660
- .wa-warning-purple {
2661
- --wa-color-warning-95: var(--wa-color-purple-95);
2662
- --wa-color-warning-90: var(--wa-color-purple-90);
2663
- --wa-color-warning-80: var(--wa-color-purple-80);
2664
- --wa-color-warning-70: var(--wa-color-purple-70);
2665
- --wa-color-warning-60: var(--wa-color-purple-60);
2666
- --wa-color-warning-50: var(--wa-color-purple-50);
2667
- --wa-color-warning-40: var(--wa-color-purple-40);
2668
- --wa-color-warning-30: var(--wa-color-purple-30);
2669
- --wa-color-warning-20: var(--wa-color-purple-20);
2670
- --wa-color-warning-10: var(--wa-color-purple-10);
2671
- --wa-color-warning-05: var(--wa-color-purple-05);
2672
- --wa-color-warning: var(--wa-color-purple);
2673
- --wa-color-warning-on: var(--wa-color-purple-on);
2674
- }
2675
-
2676
- .wa-warning-pink {
2677
- --wa-color-warning-95: var(--wa-color-pink-95);
2678
- --wa-color-warning-90: var(--wa-color-pink-90);
2679
- --wa-color-warning-80: var(--wa-color-pink-80);
2680
- --wa-color-warning-70: var(--wa-color-pink-70);
2681
- --wa-color-warning-60: var(--wa-color-pink-60);
2682
- --wa-color-warning-50: var(--wa-color-pink-50);
2683
- --wa-color-warning-40: var(--wa-color-pink-40);
2684
- --wa-color-warning-30: var(--wa-color-pink-30);
2685
- --wa-color-warning-20: var(--wa-color-pink-20);
2686
- --wa-color-warning-10: var(--wa-color-pink-10);
2687
- --wa-color-warning-05: var(--wa-color-pink-05);
2688
- --wa-color-warning: var(--wa-color-pink);
2689
- --wa-color-warning-on: var(--wa-color-pink-on);
2690
- }
2691
-
2692
- .wa-warning-gray {
2693
- --wa-color-warning-95: var(--wa-color-gray-95);
2694
- --wa-color-warning-90: var(--wa-color-gray-90);
2695
- --wa-color-warning-80: var(--wa-color-gray-80);
2696
- --wa-color-warning-70: var(--wa-color-gray-70);
2697
- --wa-color-warning-60: var(--wa-color-gray-60);
2698
- --wa-color-warning-50: var(--wa-color-gray-50);
2699
- --wa-color-warning-40: var(--wa-color-gray-40);
2700
- --wa-color-warning-30: var(--wa-color-gray-30);
2701
- --wa-color-warning-20: var(--wa-color-gray-20);
2702
- --wa-color-warning-10: var(--wa-color-gray-10);
2703
- --wa-color-warning-05: var(--wa-color-gray-05);
2704
- --wa-color-warning: var(--wa-color-gray);
2705
- --wa-color-warning-on: var(--wa-color-gray-on);
2706
- }
2707
- }
2708
- @layer wa-color-variant {
2709
- :where(:root), /* default */
2710
- .wa-danger-red {
2711
- --wa-color-danger-95: var(--wa-color-red-95);
2712
- --wa-color-danger-90: var(--wa-color-red-90);
2713
- --wa-color-danger-80: var(--wa-color-red-80);
2714
- --wa-color-danger-70: var(--wa-color-red-70);
2715
- --wa-color-danger-60: var(--wa-color-red-60);
2716
- --wa-color-danger-50: var(--wa-color-red-50);
2717
- --wa-color-danger-40: var(--wa-color-red-40);
2718
- --wa-color-danger-30: var(--wa-color-red-30);
2719
- --wa-color-danger-20: var(--wa-color-red-20);
2720
- --wa-color-danger-10: var(--wa-color-red-10);
2721
- --wa-color-danger-05: var(--wa-color-red-05);
2722
- --wa-color-danger: var(--wa-color-red);
2723
- --wa-color-danger-on: var(--wa-color-red-on);
2724
- }
2725
-
2726
- .wa-danger-orange {
2727
- --wa-color-danger-95: var(--wa-color-orange-95);
2728
- --wa-color-danger-90: var(--wa-color-orange-90);
2729
- --wa-color-danger-80: var(--wa-color-orange-80);
2730
- --wa-color-danger-70: var(--wa-color-orange-70);
2731
- --wa-color-danger-60: var(--wa-color-orange-60);
2732
- --wa-color-danger-50: var(--wa-color-orange-50);
2733
- --wa-color-danger-40: var(--wa-color-orange-40);
2734
- --wa-color-danger-30: var(--wa-color-orange-30);
2735
- --wa-color-danger-20: var(--wa-color-orange-20);
2736
- --wa-color-danger-10: var(--wa-color-orange-10);
2737
- --wa-color-danger-05: var(--wa-color-orange-05);
2738
- --wa-color-danger: var(--wa-color-orange);
2739
- --wa-color-danger-on: var(--wa-color-orange-on);
2740
- }
2741
-
2742
- .wa-danger-yellow {
2743
- --wa-color-danger-95: var(--wa-color-yellow-95);
2744
- --wa-color-danger-90: var(--wa-color-yellow-90);
2745
- --wa-color-danger-80: var(--wa-color-yellow-80);
2746
- --wa-color-danger-70: var(--wa-color-yellow-70);
2747
- --wa-color-danger-60: var(--wa-color-yellow-60);
2748
- --wa-color-danger-50: var(--wa-color-yellow-50);
2749
- --wa-color-danger-40: var(--wa-color-yellow-40);
2750
- --wa-color-danger-30: var(--wa-color-yellow-30);
2751
- --wa-color-danger-20: var(--wa-color-yellow-20);
2752
- --wa-color-danger-10: var(--wa-color-yellow-10);
2753
- --wa-color-danger-05: var(--wa-color-yellow-05);
2754
- --wa-color-danger: var(--wa-color-yellow);
2755
- --wa-color-danger-on: var(--wa-color-yellow-on);
2756
- }
2757
-
2758
- .wa-danger-green {
2759
- --wa-color-danger-95: var(--wa-color-green-95);
2760
- --wa-color-danger-90: var(--wa-color-green-90);
2761
- --wa-color-danger-80: var(--wa-color-green-80);
2762
- --wa-color-danger-70: var(--wa-color-green-70);
2763
- --wa-color-danger-60: var(--wa-color-green-60);
2764
- --wa-color-danger-50: var(--wa-color-green-50);
2765
- --wa-color-danger-40: var(--wa-color-green-40);
2766
- --wa-color-danger-30: var(--wa-color-green-30);
2767
- --wa-color-danger-20: var(--wa-color-green-20);
2768
- --wa-color-danger-10: var(--wa-color-green-10);
2769
- --wa-color-danger-05: var(--wa-color-green-05);
2770
- --wa-color-danger: var(--wa-color-green);
2771
- --wa-color-danger-on: var(--wa-color-green-on);
2772
- }
2773
-
2774
- .wa-danger-cyan {
2775
- --wa-color-danger-95: var(--wa-color-cyan-95);
2776
- --wa-color-danger-90: var(--wa-color-cyan-90);
2777
- --wa-color-danger-80: var(--wa-color-cyan-80);
2778
- --wa-color-danger-70: var(--wa-color-cyan-70);
2779
- --wa-color-danger-60: var(--wa-color-cyan-60);
2780
- --wa-color-danger-50: var(--wa-color-cyan-50);
2781
- --wa-color-danger-40: var(--wa-color-cyan-40);
2782
- --wa-color-danger-30: var(--wa-color-cyan-30);
2783
- --wa-color-danger-20: var(--wa-color-cyan-20);
2784
- --wa-color-danger-10: var(--wa-color-cyan-10);
2785
- --wa-color-danger-05: var(--wa-color-cyan-05);
2786
- --wa-color-danger: var(--wa-color-cyan);
2787
- --wa-color-danger-on: var(--wa-color-cyan-on);
2788
- }
2789
-
2790
- .wa-danger-blue {
2791
- --wa-color-danger-95: var(--wa-color-blue-95);
2792
- --wa-color-danger-90: var(--wa-color-blue-90);
2793
- --wa-color-danger-80: var(--wa-color-blue-80);
2794
- --wa-color-danger-70: var(--wa-color-blue-70);
2795
- --wa-color-danger-60: var(--wa-color-blue-60);
2796
- --wa-color-danger-50: var(--wa-color-blue-50);
2797
- --wa-color-danger-40: var(--wa-color-blue-40);
2798
- --wa-color-danger-30: var(--wa-color-blue-30);
2799
- --wa-color-danger-20: var(--wa-color-blue-20);
2800
- --wa-color-danger-10: var(--wa-color-blue-10);
2801
- --wa-color-danger-05: var(--wa-color-blue-05);
2802
- --wa-color-danger: var(--wa-color-blue);
2803
- --wa-color-danger-on: var(--wa-color-blue-on);
2804
- }
2805
-
2806
- .wa-danger-indigo {
2807
- --wa-color-danger-95: var(--wa-color-indigo-95);
2808
- --wa-color-danger-90: var(--wa-color-indigo-90);
2809
- --wa-color-danger-80: var(--wa-color-indigo-80);
2810
- --wa-color-danger-70: var(--wa-color-indigo-70);
2811
- --wa-color-danger-60: var(--wa-color-indigo-60);
2812
- --wa-color-danger-50: var(--wa-color-indigo-50);
2813
- --wa-color-danger-40: var(--wa-color-indigo-40);
2814
- --wa-color-danger-30: var(--wa-color-indigo-30);
2815
- --wa-color-danger-20: var(--wa-color-indigo-20);
2816
- --wa-color-danger-10: var(--wa-color-indigo-10);
2817
- --wa-color-danger-05: var(--wa-color-indigo-05);
2818
- --wa-color-danger: var(--wa-color-indigo);
2819
- --wa-color-danger-on: var(--wa-color-indigo-on);
2820
- }
2821
-
2822
- .wa-danger-purple {
2823
- --wa-color-danger-95: var(--wa-color-purple-95);
2824
- --wa-color-danger-90: var(--wa-color-purple-90);
2825
- --wa-color-danger-80: var(--wa-color-purple-80);
2826
- --wa-color-danger-70: var(--wa-color-purple-70);
2827
- --wa-color-danger-60: var(--wa-color-purple-60);
2828
- --wa-color-danger-50: var(--wa-color-purple-50);
2829
- --wa-color-danger-40: var(--wa-color-purple-40);
2830
- --wa-color-danger-30: var(--wa-color-purple-30);
2831
- --wa-color-danger-20: var(--wa-color-purple-20);
2832
- --wa-color-danger-10: var(--wa-color-purple-10);
2833
- --wa-color-danger-05: var(--wa-color-purple-05);
2834
- --wa-color-danger: var(--wa-color-purple);
2835
- --wa-color-danger-on: var(--wa-color-purple-on);
2836
- }
2837
-
2838
- .wa-danger-pink {
2839
- --wa-color-danger-95: var(--wa-color-pink-95);
2840
- --wa-color-danger-90: var(--wa-color-pink-90);
2841
- --wa-color-danger-80: var(--wa-color-pink-80);
2842
- --wa-color-danger-70: var(--wa-color-pink-70);
2843
- --wa-color-danger-60: var(--wa-color-pink-60);
2844
- --wa-color-danger-50: var(--wa-color-pink-50);
2845
- --wa-color-danger-40: var(--wa-color-pink-40);
2846
- --wa-color-danger-30: var(--wa-color-pink-30);
2847
- --wa-color-danger-20: var(--wa-color-pink-20);
2848
- --wa-color-danger-10: var(--wa-color-pink-10);
2849
- --wa-color-danger-05: var(--wa-color-pink-05);
2850
- --wa-color-danger: var(--wa-color-pink);
2851
- --wa-color-danger-on: var(--wa-color-pink-on);
2852
- }
2853
-
2854
- .wa-danger-gray {
2855
- --wa-color-danger-95: var(--wa-color-gray-95);
2856
- --wa-color-danger-90: var(--wa-color-gray-90);
2857
- --wa-color-danger-80: var(--wa-color-gray-80);
2858
- --wa-color-danger-70: var(--wa-color-gray-70);
2859
- --wa-color-danger-60: var(--wa-color-gray-60);
2860
- --wa-color-danger-50: var(--wa-color-gray-50);
2861
- --wa-color-danger-40: var(--wa-color-gray-40);
2862
- --wa-color-danger-30: var(--wa-color-gray-30);
2863
- --wa-color-danger-20: var(--wa-color-gray-20);
2864
- --wa-color-danger-10: var(--wa-color-gray-10);
2865
- --wa-color-danger-05: var(--wa-color-gray-05);
2866
- --wa-color-danger: var(--wa-color-gray);
2867
- --wa-color-danger-on: var(--wa-color-gray-on);
2868
- }
2869
- }
2870
- @layer wa-color-palette {
2871
- :where(:root),
2872
- .wa-palette-default {
2873
- --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
2874
- --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
2875
- --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
2876
- --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
2877
- --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
2878
- --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
2879
- --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
2880
- --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
2881
- --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
2882
- --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
2883
- --wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
2884
- --wa-color-red: var(--wa-color-red-50);
2885
- --wa-color-red-key: 50;
2886
-
2887
- --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
2888
- --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
2889
- --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
2890
- --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
2891
- --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
2892
- --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
2893
- --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
2894
- --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
2895
- --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
2896
- --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
2897
- --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
2898
- --wa-color-orange: var(--wa-color-orange-60);
2899
- --wa-color-orange-key: 60;
2900
-
2901
- --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
2902
- --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
2903
- --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
2904
- --wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
2905
- --wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
2906
- --wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
2907
- --wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
2908
- --wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
2909
- --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
2910
- --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
2911
- --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
2912
- --wa-color-yellow: var(--wa-color-yellow-80);
2913
- --wa-color-yellow-key: 80;
2914
-
2915
- --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
2916
- --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
2917
- --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
2918
- --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
2919
- --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
2920
- --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
2921
- --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
2922
- --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
2923
- --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
2924
- --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
2925
- --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
2926
- --wa-color-green: var(--wa-color-green-60);
2927
- --wa-color-green-key: 60;
2928
-
2929
- --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
2930
- --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
2931
- --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
2932
- --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
2933
- --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
2934
- --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
2935
- --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
2936
- --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
2937
- --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
2938
- --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
2939
- --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
2940
- --wa-color-cyan: var(--wa-color-cyan-70);
2941
- --wa-color-cyan-key: 70;
2942
-
2943
- --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
2944
- --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
2945
- --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
2946
- --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
2947
- --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
2948
- --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
2949
- --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
2950
- --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
2951
- --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
2952
- --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
2953
- --wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
2954
- --wa-color-blue: var(--wa-color-blue-50);
2955
- --wa-color-blue-key: 50;
2956
-
2957
- --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
2958
- --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
2959
- --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
2960
- --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
2961
- --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
2962
- --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
2963
- --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
2964
- --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
2965
- --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
2966
- --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
2967
- --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
2968
- --wa-color-indigo: var(--wa-color-indigo-50);
2969
- --wa-color-indigo-key: 50;
2970
-
2971
- --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
2972
- --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
2973
- --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
2974
- --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
2975
- --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
2976
- --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
2977
- --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
2978
- --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
2979
- --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
2980
- --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
2981
- --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
2982
- --wa-color-purple: var(--wa-color-purple-50);
2983
- --wa-color-purple-key: 50;
2984
-
2985
- --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
2986
- --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
2987
- --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
2988
- --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
2989
- --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
2990
- --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
2991
- --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
2992
- --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
2993
- --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
2994
- --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
2995
- --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
2996
- --wa-color-pink: var(--wa-color-pink-50);
2997
- --wa-color-pink-key: 50;
2998
-
2999
- --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
3000
- --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
3001
- --wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
3002
- --wa-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
3003
- --wa-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
3004
- --wa-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
3005
- --wa-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
3006
- --wa-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
3007
- --wa-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
3008
- --wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
3009
- --wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
3010
- --wa-color-gray: var(--wa-color-gray-40);
3011
- --wa-color-gray-key: 40;
3012
- }
3013
- }
3014
- @layer wa-theme {
3015
- :where(:root),
3016
- .wa-theme-default,
3017
- .wa-light,
3018
- .wa-dark .wa-invert,
3019
- .wa-light .wa-theme-default,
3020
- .wa-dark .wa-theme-default.wa-invert,
3021
- .wa-dark .wa-theme-default .wa-invert {
3022
- /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
3023
- color-scheme: light;
3024
- color: var(--wa-color-text-normal);
3025
-
3026
- --wa-color-surface-raised: white;
3027
- --wa-color-surface-default: white;
3028
- --wa-color-surface-lowered: var(--wa-color-neutral-95);
3029
- --wa-color-surface-border: var(--wa-color-neutral-90);
3030
-
3031
- --wa-color-text-normal: var(--wa-color-neutral-10);
3032
- --wa-color-text-quiet: var(--wa-color-neutral-40);
3033
- --wa-color-text-link: var(--wa-color-brand-40);
3034
-
3035
- --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
3036
- --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
3037
-
3038
- --wa-color-shadow: color-mix(
3039
- in oklab,
3040
- var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
3041
- transparent
3042
- );
3043
-
3044
- --wa-color-focus: var(--wa-color-brand-60);
3045
-
3046
- --wa-color-mix-hover: black 10%;
3047
- --wa-color-mix-active: black 20%;
3048
-
3049
- --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
3050
- --wa-color-brand-fill-normal: var(--wa-color-brand-90);
3051
- --wa-color-brand-fill-loud: var(--wa-color-brand-50);
3052
- --wa-color-brand-border-quiet: var(--wa-color-brand-90);
3053
- --wa-color-brand-border-normal: var(--wa-color-brand-80);
3054
- --wa-color-brand-border-loud: var(--wa-color-brand-60);
3055
- --wa-color-brand-on-quiet: var(--wa-color-brand-40);
3056
- --wa-color-brand-on-normal: var(--wa-color-brand-30);
3057
- --wa-color-brand-on-loud: white;
3058
-
3059
- --wa-color-success-fill-quiet: var(--wa-color-success-95);
3060
- --wa-color-success-fill-normal: var(--wa-color-success-90);
3061
- --wa-color-success-fill-loud: var(--wa-color-success-50);
3062
- --wa-color-success-border-quiet: var(--wa-color-success-90);
3063
- --wa-color-success-border-normal: var(--wa-color-success-80);
3064
- --wa-color-success-border-loud: var(--wa-color-success-60);
3065
- --wa-color-success-on-quiet: var(--wa-color-success-40);
3066
- --wa-color-success-on-normal: var(--wa-color-success-30);
3067
- --wa-color-success-on-loud: white;
3068
-
3069
- --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
3070
- --wa-color-warning-fill-normal: var(--wa-color-warning-90);
3071
- --wa-color-warning-fill-loud: var(--wa-color-warning-50);
3072
- --wa-color-warning-border-quiet: var(--wa-color-warning-90);
3073
- --wa-color-warning-border-normal: var(--wa-color-warning-80);
3074
- --wa-color-warning-border-loud: var(--wa-color-warning-60);
3075
- --wa-color-warning-on-quiet: var(--wa-color-warning-40);
3076
- --wa-color-warning-on-normal: var(--wa-color-warning-30);
3077
- --wa-color-warning-on-loud: white;
3078
-
3079
- --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
3080
- --wa-color-danger-fill-normal: var(--wa-color-danger-90);
3081
- --wa-color-danger-fill-loud: var(--wa-color-danger-50);
3082
- --wa-color-danger-border-quiet: var(--wa-color-danger-90);
3083
- --wa-color-danger-border-normal: var(--wa-color-danger-80);
3084
- --wa-color-danger-border-loud: var(--wa-color-danger-60);
3085
- --wa-color-danger-on-quiet: var(--wa-color-danger-40);
3086
- --wa-color-danger-on-normal: var(--wa-color-danger-30);
3087
- --wa-color-danger-on-loud: white;
3088
-
3089
- --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
3090
- --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
3091
- --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
3092
- --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
3093
- --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
3094
- --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
3095
- --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
3096
- --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
3097
- --wa-color-neutral-on-loud: white;
3098
- /* #endregion */
3099
- }
3100
-
3101
- .wa-dark,
3102
- .wa-invert,
3103
- .wa-dark .wa-theme-default,
3104
- .wa-light .wa-theme-default.wa-invert,
3105
- .wa-light .wa-theme-default .wa-invert {
3106
- /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
3107
- color-scheme: dark;
3108
- color: var(--wa-color-text-normal);
3109
-
3110
- --wa-color-surface-raised: var(--wa-color-neutral-10);
3111
- --wa-color-surface-default: var(--wa-color-neutral-05);
3112
- --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
3113
- --wa-color-surface-border: var(--wa-color-neutral-20);
3114
-
3115
- --wa-color-text-normal: var(--wa-color-neutral-95);
3116
- --wa-color-text-quiet: var(--wa-color-neutral-60);
3117
- --wa-color-text-link: var(--wa-color-brand-70);
3118
-
3119
- --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
3120
- --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
3121
-
3122
- --wa-color-shadow: color-mix(
3123
- in oklab,
3124
- var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
3125
- transparent
3126
- );
3127
-
3128
- --wa-color-focus: var(--wa-color-brand-60);
3129
-
3130
- --wa-color-mix-hover: black 8%;
3131
- --wa-color-mix-active: black 16%;
3132
-
3133
- --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
3134
- --wa-color-brand-fill-normal: var(--wa-color-brand-20);
3135
- --wa-color-brand-fill-loud: var(--wa-color-brand-50);
3136
- --wa-color-brand-border-quiet: var(--wa-color-brand-20);
3137
- --wa-color-brand-border-normal: var(--wa-color-brand-30);
3138
- --wa-color-brand-border-loud: var(--wa-color-brand-40);
3139
- --wa-color-brand-on-quiet: var(--wa-color-brand-60);
3140
- --wa-color-brand-on-normal: var(--wa-color-brand-70);
3141
- --wa-color-brand-on-loud: white;
3142
-
3143
- --wa-color-success-fill-quiet: var(--wa-color-success-10);
3144
- --wa-color-success-fill-normal: var(--wa-color-success-20);
3145
- --wa-color-success-fill-loud: var(--wa-color-success-50);
3146
- --wa-color-success-border-quiet: var(--wa-color-success-20);
3147
- --wa-color-success-border-normal: var(--wa-color-success-30);
3148
- --wa-color-success-border-loud: var(--wa-color-success-40);
3149
- --wa-color-success-on-quiet: var(--wa-color-success-60);
3150
- --wa-color-success-on-normal: var(--wa-color-success-70);
3151
- --wa-color-success-on-loud: white;
3152
-
3153
- --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
3154
- --wa-color-warning-fill-normal: var(--wa-color-warning-20);
3155
- --wa-color-warning-fill-loud: var(--wa-color-warning-50);
3156
- --wa-color-warning-border-quiet: var(--wa-color-warning-20);
3157
- --wa-color-warning-border-normal: var(--wa-color-warning-30);
3158
- --wa-color-warning-border-loud: var(--wa-color-warning-40);
3159
- --wa-color-warning-on-quiet: var(--wa-color-warning-60);
3160
- --wa-color-warning-on-normal: var(--wa-color-warning-70);
3161
- --wa-color-warning-on-loud: white;
3162
-
3163
- --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
3164
- --wa-color-danger-fill-normal: var(--wa-color-danger-20);
3165
- --wa-color-danger-fill-loud: var(--wa-color-danger-50);
3166
- --wa-color-danger-border-quiet: var(--wa-color-danger-20);
3167
- --wa-color-danger-border-normal: var(--wa-color-danger-30);
3168
- --wa-color-danger-border-loud: var(--wa-color-danger-40);
3169
- --wa-color-danger-on-quiet: var(--wa-color-danger-60);
3170
- --wa-color-danger-on-normal: var(--wa-color-danger-70);
3171
- --wa-color-danger-on-loud: white;
3172
-
3173
- --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
3174
- --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
3175
- --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
3176
- --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
3177
- --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
3178
- --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
3179
- --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
3180
- --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
3181
- --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
3182
- /* #endregion */
3183
- }
3184
-
3185
- :where(:root),
3186
- .wa-theme-default,
3187
- .wa-light,
3188
- .wa-dark,
3189
- .wa-invert {
3190
- font-family: var(--wa-font-family-body);
3191
-
3192
- /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
3193
- --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
3194
- --wa-font-family-heading: var(--wa-font-family-body);
3195
- --wa-font-family-code: ui-monospace, monospace;
3196
- --wa-font-family-longform: ui-serif, serif;
3197
-
3198
- /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
3199
- * For larger font sizes, each size is twice 1.125x larger to maximize impact.
3200
- * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
3201
- --wa-font-size-scale: 1;
3202
- --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
3203
- --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
3204
- --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
3205
- --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
3206
- --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
3207
- --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
3208
- --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
3209
- --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
3210
- --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
3211
-
3212
- --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
3213
- --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
3214
-
3215
- --wa-font-weight-light: 300;
3216
- --wa-font-weight-normal: 400;
3217
- --wa-font-weight-semibold: 500;
3218
- --wa-font-weight-bold: 600;
3219
-
3220
- --wa-font-weight-body: var(--wa-font-weight-normal);
3221
- --wa-font-weight-heading: var(--wa-font-weight-bold);
3222
- --wa-font-weight-code: var(--wa-font-weight-normal);
3223
- --wa-font-weight-longform: var(--wa-font-weight-normal);
3224
- --wa-font-weight-action: var(--wa-font-weight-semibold);
3225
-
3226
- --wa-line-height-condensed: 1.2;
3227
- --wa-line-height-normal: 1.6;
3228
- --wa-line-height-expanded: 2;
3229
-
3230
- --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
3231
- --wa-link-decoration-hover: underline;
3232
- /* #endregion */
3233
-
3234
- /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
3235
- --wa-space-scale: 1;
3236
- --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
3237
- --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
3238
- --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
3239
- --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
3240
- --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
3241
- --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
3242
- --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
3243
- --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
3244
- --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
3245
- --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
3246
-
3247
- --wa-content-spacing: var(--wa-space-l);
3248
- /* #endregion */
3249
-
3250
- /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
3251
- --wa-border-style: solid;
3252
-
3253
- --wa-border-width-scale: 1;
3254
- --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
3255
- --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
3256
- --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
3257
- /* #endregion */
3258
-
3259
- /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
3260
- --wa-border-radius-scale: 1;
3261
- --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
3262
- --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
3263
- --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
3264
-
3265
- --wa-border-radius-pill: 9999px;
3266
- --wa-border-radius-circle: 50%;
3267
- --wa-border-radius-square: 0px;
3268
- /* #endregion */
3269
-
3270
- /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
3271
- --wa-focus-ring-style: solid;
3272
- --wa-focus-ring-width: 0.1875rem; /* 3px */
3273
- --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
3274
- --wa-focus-ring-offset: 0.0625rem; /* 1px */
3275
- /* #endregion */
3276
-
3277
- /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
3278
- --wa-shadow-offset-x-scale: 0;
3279
- --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
3280
- --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
3281
- --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
3282
-
3283
- --wa-shadow-offset-y-scale: 1;
3284
- --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
3285
- --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
3286
- --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
3287
-
3288
- --wa-shadow-blur-scale: 1;
3289
- --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
3290
- --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
3291
- --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
3292
-
3293
- --wa-shadow-spread-scale: -0.5;
3294
- --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
3295
- --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
3296
- --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
3297
-
3298
- --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
3299
- var(--wa-shadow-spread-s) var(--wa-color-shadow);
3300
- --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
3301
- var(--wa-shadow-spread-m) var(--wa-color-shadow);
3302
- --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
3303
- var(--wa-shadow-spread-l) var(--wa-color-shadow);
3304
- /* #endregion */
3305
-
3306
- /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
3307
- --wa-transition-easing: ease;
3308
- --wa-transition-slow: 300ms;
3309
- --wa-transition-normal: 150ms;
3310
- --wa-transition-fast: 75ms;
3311
- /* #endregion */
3312
-
3313
- /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
3314
- /* Form Controls */
3315
- --wa-form-control-background-color: var(--wa-color-surface-default);
3316
-
3317
- --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
3318
- --wa-form-control-border-style: var(--wa-border-style);
3319
- --wa-form-control-border-width: var(--wa-border-width-s);
3320
- --wa-form-control-border-radius: var(--wa-border-radius-m);
3321
-
3322
- --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
3323
-
3324
- --wa-form-control-label-color: var(--wa-color-text-normal);
3325
- --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
3326
- --wa-form-control-label-line-height: var(--wa-line-height-condensed);
3327
-
3328
- --wa-form-control-value-color: var(--wa-color-text-normal);
3329
- --wa-form-control-value-font-weight: var(--wa-font-weight-body);
3330
- --wa-form-control-value-line-height: var(--wa-line-height-condensed);
3331
-
3332
- --wa-form-control-hint-color: var(--wa-color-text-quiet);
3333
- --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
3334
- --wa-form-control-hint-line-height: var(--wa-line-height-normal);
3335
-
3336
- --wa-form-control-placeholder-color: var(--wa-color-gray-50);
3337
-
3338
- --wa-form-control-required-content: '*';
3339
- --wa-form-control-required-content-color: inherit;
3340
- --wa-form-control-required-content-offset: 0.1em;
3341
-
3342
- --wa-form-control-padding-block: 0.75em;
3343
- --wa-form-control-padding-inline: 1em;
3344
- --wa-form-control-height: round(
3345
- calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
3346
- 1px
3347
- );
3348
- --wa-form-control-toggle-size: round(1.25em, 1px);
3349
-
3350
- /* Panels */
3351
- --wa-panel-border-style: var(--wa-border-style);
3352
- --wa-panel-border-width: var(--wa-border-width-s);
3353
- --wa-panel-border-radius: var(--wa-border-radius-l);
3354
-
3355
- /* Tooltips */
3356
- --wa-tooltip-arrow-size: 0.375rem;
3357
-
3358
- --wa-tooltip-background-color: var(--wa-color-text-normal);
3359
-
3360
- --wa-tooltip-border-color: var(--wa-tooltip-background-color);
3361
- --wa-tooltip-border-style: var(--wa-border-style);
3362
- --wa-tooltip-border-width: var(--wa-border-width-s);
3363
- --wa-tooltip-border-radius: var(--wa-border-radius-s);
3364
-
3365
- --wa-tooltip-content-color: var(--wa-color-surface-default);
3366
- --wa-tooltip-font-size: var(--wa-font-size-s);
3367
- --wa-tooltip-line-height: var(--wa-line-height-normal);
3368
- /* #endregion */
3369
- }
3370
- }
3371
1
  :root,
3372
2
  :host {
3373
3
  --ol-background-color: white;