@entur/form 7.0.42 → 7.0.43

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 (2) hide show
  1. package/dist/styles.css +729 -857
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,75 +1,192 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-feedback-text {
4
- display: flex;
3
+ .eds-form-control-wrapper {
5
4
  align-items: center;
6
- margin-top: 0.25rem;
5
+ background-color: var(--components-form-baseform-standard-fill-default);
6
+ border-radius: 0.25rem;
7
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
8
+ box-shadow: 0 0 0 transparent;
9
+ color: var(--components-form-baseform-standard-text-content);
10
+ display: flex;
11
+ position: relative;
12
+ width: 100%;
13
+ min-height: 3rem;
14
+ transition: border-color 0.1s ease-in-out;
7
15
  }
8
- .eds-feedback-text--info {
9
- padding-left: calc(1rem + 0.125rem);
16
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
17
+ border-color: var(--components-form-baseform-standard-border-interactive);
10
18
  }
11
- .eds-feedback-text__text {
12
- color: var(--components-form-feedbacktext-information-standard-text);
19
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
20
+ border-color: var(--components-form-baseform-standard-border-interactive);
13
21
  }
14
- .eds-contrast .eds-feedback-text__text {
15
- color: var(--components-form-feedbacktext-information-contrast-text);
22
+ .eds-contrast .eds-form-control-wrapper:hover {
23
+ border-color: var(--components-form-baseform-contrast-border-interactive);
16
24
  }
17
-
18
- .eds-feedback-text__icon {
25
+ .eds-form-control-wrapper[focus-within] {
26
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
27
+ }
28
+ .eds-form-control-wrapper:focus-within {
29
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
30
+ }
31
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
32
+ outline: var(--components-form-baseform-contrast-border-interactive);
33
+ }
34
+ .eds-contrast .eds-form-control-wrapper:focus-within {
35
+ outline: var(--components-form-baseform-contrast-border-interactive);
36
+ }
37
+ .eds-form-control-wrapper ::-moz-placeholder {
38
+ color: var(--components-form-baseform-standard-text-label);
39
+ }
40
+ .eds-form-control-wrapper ::placeholder {
41
+ color: var(--components-form-baseform-standard-text-label);
42
+ }
43
+ .eds-form-control-wrapper--disabled {
44
+ border-color: transparent;
45
+ background-color: var(--components-form-baseform-standard-fill-disabled);
46
+ pointer-events: none;
47
+ color: var(--components-form-baseform-standard-text-disabled);
48
+ }
49
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
50
+ color: var(--components-form-baseform-standard-text-disabled);
51
+ }
52
+ .eds-contrast .eds-form-control-wrapper--disabled {
53
+ border-color: transparent;
54
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
55
+ color: var(--components-form-baseform-contrast-text-disabled);
56
+ }
57
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
58
+ color: var(--components-form-baseform-contrast-text-disabled);
59
+ }
60
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
61
+ display: none;
62
+ }
63
+ .eds-form-control-wrapper--readonly {
64
+ border-color: transparent;
65
+ pointer-events: none;
66
+ cursor: default;
67
+ background: var(--components-form-baseform-standard-fill-readonly);
68
+ border: var(--components-form-baseform-standard-fill-readonly);
69
+ }
70
+ .eds-contrast .eds-form-control-wrapper--readonly {
71
+ background: var(--components-form-baseform-contrast-fill-readonly);
72
+ color: var(--components-form-baseform-contrast-text-description);
73
+ border: var(--components-form-baseform-contrast-fill-readonly);
74
+ }
75
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
76
+ color: var(--components-form-baseform-contrast-text-description);
77
+ }
78
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
79
+ display: none;
80
+ }
81
+ .eds-form-control-wrapper--size-medium .eds-form-control,
82
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
83
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
84
+ font-size: 1rem;
85
+ line-height: 1rem;
86
+ }
87
+ .eds-form-control-wrapper--size-large {
88
+ min-height: 4rem;
89
+ padding: 0 0.5rem;
90
+ }
91
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
92
+ border-width: 0.25rem;
93
+ }
94
+ .eds-form-control-wrapper--size-large .eds-form-control,
95
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
96
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
19
97
  font-size: 1.5rem;
20
- min-height: 1.5rem;
21
- min-width: 1.5rem;
22
- padding-right: 0.5rem;
23
- position: relative;
24
- top: -0.1rem;
98
+ line-height: 2.25rem;
25
99
  }
26
- .eds-feedback-text__icon--success {
27
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
100
+ .eds-form-control-wrapper--success {
101
+ border-color: var(--components-form-baseform-standard-border-success);
28
102
  }
29
- .eds-feedback-text__icon--success circle {
30
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
103
+ .eds-form-control-wrapper--success[focus-within] {
104
+ border-color: var(--components-form-baseform-standard-border-success);
31
105
  }
32
- .eds-contrast .eds-feedback-text__icon--success {
33
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
106
+ .eds-form-control-wrapper--success:focus-within {
107
+ border-color: var(--components-form-baseform-standard-border-success);
34
108
  }
35
- .eds-contrast .eds-feedback-text__icon--success circle {
36
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
109
+ .eds-contrast .eds-form-control-wrapper--success {
110
+ border-color: var(--components-form-baseform-standard-border-success);
37
111
  }
38
- .eds-feedback-text__icon--error {
39
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
112
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
113
+ border-color: var(--components-form-baseform-contrast-border-success);
40
114
  }
41
- .eds-feedback-text__icon--error circle {
42
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
115
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
116
+ border-color: var(--components-form-baseform-contrast-border-success);
43
117
  }
44
- .eds-contrast .eds-feedback-text__icon--error {
45
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
118
+ .eds-form-control-wrapper--error {
119
+ border-color: var(--components-form-baseform-standard-border-negative);
46
120
  }
47
- .eds-contrast .eds-feedback-text__icon--error circle {
48
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
121
+ .eds-form-control-wrapper--error[focus-within] {
122
+ border-color: var(--components-form-baseform-standard-border-negative);
49
123
  }
50
- .eds-feedback-text__icon--info {
51
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
124
+ .eds-form-control-wrapper--error:focus-within {
125
+ border-color: var(--components-form-baseform-standard-border-negative);
52
126
  }
53
- .eds-feedback-text__icon--info circle {
54
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
127
+ .eds-contrast .eds-form-control-wrapper--error {
128
+ border-color: var(--components-form-baseform-contrast-border-negative);
55
129
  }
56
- .eds-contrast .eds-feedback-text__icon--info {
57
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
130
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
131
+ border-color: var(--components-form-baseform-contrast-border-negative);
58
132
  }
59
- .eds-contrast .eds-feedback-text__icon--info circle {
60
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
133
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
134
+ border-color: var(--components-form-baseform-contrast-border-negative);
61
135
  }
62
- .eds-feedback-text__icon--warning {
63
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
136
+
137
+ .eds-form-control {
138
+ -webkit-appearance: none;
139
+ -moz-appearance: none;
140
+ appearance: none;
141
+ background-color: transparent;
142
+ border: 0;
143
+ color: var(--components-form-baseform-standard-text-content);
144
+ display: block;
145
+ font-family: inherit;
146
+ line-height: 1rem;
147
+ font-size: 1rem;
148
+ padding: 20px 1rem 0.25rem;
149
+ width: 100%;
64
150
  }
65
- .eds-feedback-text__icon--warning circle {
66
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
151
+ .eds-form-control::-moz-placeholder {
152
+ opacity: 0;
153
+ -moz-transition: opacity 0.2s ease-in-out;
154
+ transition: opacity 0.2s ease-in-out;
67
155
  }
68
- .eds-contrast .eds-feedback-text__icon--warning {
69
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
156
+ .eds-form-control::placeholder {
157
+ opacity: 0;
158
+ transition: opacity 0.2s ease-in-out;
70
159
  }
71
- .eds-contrast .eds-feedback-text__icon--warning circle {
72
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
160
+ .eds-form-control:focus {
161
+ outline: none;
162
+ }
163
+ .eds-form-control:focus::-moz-placeholder {
164
+ opacity: 1;
165
+ }
166
+ .eds-form-control:focus::placeholder {
167
+ opacity: 1;
168
+ }
169
+ .eds-form-control__prepend, .eds-form-control__append {
170
+ position: relative;
171
+ margin: 0 1rem;
172
+ line-height: inherit;
173
+ }
174
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
175
+ position: static;
176
+ }
177
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
178
+ top: 0.125rem;
179
+ }
180
+ .eds-form-control__prepend {
181
+ margin-right: 0;
182
+ }
183
+ .eds-form-control__append {
184
+ margin-left: 0;
185
+ }
186
+ .eds-fieldset {
187
+ margin: 0;
188
+ padding: 0;
189
+ border: 0;
73
190
  }
74
191
  /* DO NOT CHANGE!*/
75
192
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -226,11 +343,6 @@
226
343
  stroke-dashoffset: 0;
227
344
  }
228
345
  }
229
- .eds-fieldset {
230
- margin: 0;
231
- padding: 0;
232
- border: 0;
233
- }
234
346
  /* DO NOT CHANGE!*/
235
347
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
236
348
  .eds-form-component--radio__container {
@@ -315,122 +427,76 @@
315
427
  }
316
428
  /* DO NOT CHANGE!*/
317
429
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
- .eds-switch {
319
- cursor: pointer;
320
- -webkit-user-select: none;
321
- -moz-user-select: none;
322
- user-select: none;
323
- padding: 0.5rem 0;
324
- width: -moz-fit-content;
325
- width: fit-content;
326
- }
327
- .eds-switch input {
328
- opacity: 0;
329
- pointer-events: none;
330
- position: absolute;
331
- }
332
- .eds-switch--right {
333
- display: flex;
334
- flex-direction: row;
335
- align-items: center;
336
- }
337
- .eds-switch--bottom {
430
+ .eds-feedback-text {
338
431
  display: flex;
339
- flex-direction: column;
340
432
  align-items: center;
433
+ margin-top: 0.25rem;
341
434
  }
342
- .eds-switch__circle {
343
- border-radius: 50%;
344
- height: 1.25rem;
345
- width: 1.25rem;
346
- content: "";
347
- display: flex;
348
- align-items: center;
349
- justify-content: center;
350
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
351
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
352
- background-color: var(--components-form-switch-standard-switch);
353
- top: 0.125rem;
354
- left: 0.125rem;
355
- position: relative;
435
+ .eds-feedback-text--info {
436
+ padding-left: calc(1rem + 0.125rem);
356
437
  }
357
- .eds-switch__switch--large .eds-switch__circle {
358
- height: 1.75rem;
359
- width: 1.75rem;
438
+ .eds-feedback-text__text {
439
+ color: var(--components-form-feedbacktext-information-standard-text);
360
440
  }
361
- .eds-contrast .eds-switch__circle {
362
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
441
+ .eds-contrast .eds-feedback-text__text {
442
+ color: var(--components-form-feedbacktext-information-contrast-text);
363
443
  }
364
- .eds-switch__switch {
444
+
445
+ .eds-feedback-text__icon {
446
+ font-size: 1.5rem;
447
+ min-height: 1.5rem;
448
+ min-width: 1.5rem;
449
+ padding-right: 0.5rem;
365
450
  position: relative;
366
- background-color: var(--components-form-switch-standard-fill-false);
367
- content: "";
368
- display: block;
369
- transition: background-color 0.1s ease-in-out;
370
- height: 1.5rem;
371
- width: 3rem;
372
- border-radius: 1.5rem;
373
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
374
- }
375
- .eds-contrast .eds-switch__switch {
376
- background-color: var(--components-form-switch-contrast-fill-false);
377
- }
378
- .eds-switch--right .eds-switch__switch {
379
- margin-right: 0.75rem;
451
+ top: -0.1rem;
380
452
  }
381
- .eds-switch__switch svg g,
382
- .eds-switch__switch path {
383
- fill: var(--components-form-switch-standard-icon-false);
384
- transition: fill ease-in-out 0.1s;
453
+ .eds-feedback-text__icon--success {
454
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
385
455
  }
386
- .eds-contrast .eds-switch__switch svg g,
387
- .eds-contrast .eds-switch__switch path {
388
- fill: var(--components-form-switch-contrast-icon-false);
456
+ .eds-feedback-text__icon--success circle {
457
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
389
458
  }
390
- :checked + .eds-switch__switch {
391
- background-color: var(--eds-switch-color);
459
+ .eds-contrast .eds-feedback-text__icon--success {
460
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
392
461
  }
393
- :checked + .eds-switch__switch .eds-switch__circle {
394
- left: 1.625rem;
462
+ .eds-contrast .eds-feedback-text__icon--success circle {
463
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
395
464
  }
396
- :checked + .eds-switch__switch .eds-switch__circle svg g,
397
- :checked + .eds-switch__switch .eds-switch__circle path {
398
- fill: var(--eds-switch-color);
465
+ .eds-feedback-text__icon--error {
466
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
399
467
  }
400
- .eds-contrast :checked + .eds-switch__switch {
401
- background-color: var(--eds-switch-contrast-color);
468
+ .eds-feedback-text__icon--error circle {
469
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
402
470
  }
403
- :focus + .eds-switch__switch {
404
- outline: 2px solid #181c56;
405
- outline-color: var(--basecolors-stroke-focus-standard);
406
- outline-offset: 0.125rem;
471
+ .eds-contrast .eds-feedback-text__icon--error {
472
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
407
473
  }
408
- .eds-contrast :focus + .eds-switch__switch {
409
- outline-color: var(--basecolors-stroke-focus-contrast);
474
+ .eds-contrast .eds-feedback-text__icon--error circle {
475
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
410
476
  }
411
- .eds-switch__switch--large {
412
- width: 3.75rem;
413
- height: 2rem;
414
- border-radius: 3.75rem;
477
+ .eds-feedback-text__icon--info {
478
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
415
479
  }
416
- :checked + .eds-switch__switch--large .eds-switch__circle {
417
- left: 1.875rem;
480
+ .eds-feedback-text__icon--info circle {
481
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
418
482
  }
419
- .eds-switch__switch--large svg {
420
- position: relative;
421
- right: 0.05rem;
483
+ .eds-contrast .eds-feedback-text__icon--info {
484
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
422
485
  }
423
- .eds-switch__label--large--right {
424
- font-size: 1rem;
486
+ .eds-contrast .eds-feedback-text__icon--info circle {
487
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
425
488
  }
426
- .eds-switch__label--large--bottom {
427
- font-size: 0.875rem;
489
+ .eds-feedback-text__icon--warning {
490
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
428
491
  }
429
- .eds-switch__label--medium--right {
430
- font-size: 0.875rem;
492
+ .eds-feedback-text__icon--warning circle {
493
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
431
494
  }
432
- .eds-switch__label--medium--bottom {
433
- font-size: 0.75rem;
495
+ .eds-contrast .eds-feedback-text__icon--warning {
496
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
497
+ }
498
+ .eds-contrast .eds-feedback-text__icon--warning circle {
499
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
434
500
  }
435
501
  /* DO NOT CHANGE!*/
436
502
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -719,188 +785,122 @@ input:disabled + .eds-input-panel__container {
719
785
  }
720
786
  /* DO NOT CHANGE!*/
721
787
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
722
- .eds-form-control-wrapper {
723
- align-items: center;
724
- background-color: var(--components-form-baseform-standard-fill-default);
725
- border-radius: 0.25rem;
726
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
727
- box-shadow: 0 0 0 transparent;
728
- color: var(--components-form-baseform-standard-text-content);
729
- display: flex;
730
- position: relative;
731
- width: 100%;
732
- min-height: 3rem;
733
- transition: border-color 0.1s ease-in-out;
734
- }
735
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
736
- border-color: var(--components-form-baseform-standard-border-interactive);
737
- }
738
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
739
- border-color: var(--components-form-baseform-standard-border-interactive);
740
- }
741
- .eds-contrast .eds-form-control-wrapper:hover {
742
- border-color: var(--components-form-baseform-contrast-border-interactive);
743
- }
744
- .eds-form-control-wrapper[focus-within] {
745
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
746
- }
747
- .eds-form-control-wrapper:focus-within {
748
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
749
- }
750
- .eds-contrast .eds-form-control-wrapper[focus-within] {
751
- outline: var(--components-form-baseform-contrast-border-interactive);
752
- }
753
- .eds-contrast .eds-form-control-wrapper:focus-within {
754
- outline: var(--components-form-baseform-contrast-border-interactive);
755
- }
756
- .eds-form-control-wrapper ::-moz-placeholder {
757
- color: var(--components-form-baseform-standard-text-label);
758
- }
759
- .eds-form-control-wrapper ::placeholder {
760
- color: var(--components-form-baseform-standard-text-label);
761
- }
762
- .eds-form-control-wrapper--disabled {
763
- border-color: transparent;
764
- background-color: var(--components-form-baseform-standard-fill-disabled);
765
- pointer-events: none;
766
- color: var(--components-form-baseform-standard-text-disabled);
767
- }
768
- .eds-form-control-wrapper--disabled .eds-input-group__label {
769
- color: var(--components-form-baseform-standard-text-disabled);
770
- }
771
- .eds-contrast .eds-form-control-wrapper--disabled {
772
- border-color: transparent;
773
- background-color: var(--components-form-baseform-contrast-fill-disabled);
774
- color: var(--components-form-baseform-contrast-text-disabled);
775
- }
776
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
777
- color: var(--components-form-baseform-contrast-text-disabled);
778
- }
779
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
780
- display: none;
788
+ .eds-switch {
789
+ cursor: pointer;
790
+ -webkit-user-select: none;
791
+ -moz-user-select: none;
792
+ user-select: none;
793
+ padding: 0.5rem 0;
794
+ width: -moz-fit-content;
795
+ width: fit-content;
781
796
  }
782
- .eds-form-control-wrapper--readonly {
783
- border-color: transparent;
797
+ .eds-switch input {
798
+ opacity: 0;
784
799
  pointer-events: none;
785
- cursor: default;
786
- background: var(--components-form-baseform-standard-fill-readonly);
787
- border: var(--components-form-baseform-standard-fill-readonly);
788
- }
789
- .eds-contrast .eds-form-control-wrapper--readonly {
790
- background: var(--components-form-baseform-contrast-fill-readonly);
791
- color: var(--components-form-baseform-contrast-text-description);
792
- border: var(--components-form-baseform-contrast-fill-readonly);
793
- }
794
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
795
- color: var(--components-form-baseform-contrast-text-description);
796
- }
797
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
798
- display: none;
799
- }
800
- .eds-form-control-wrapper--size-medium .eds-form-control,
801
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
802
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
803
- font-size: 1rem;
804
- line-height: 1rem;
805
- }
806
- .eds-form-control-wrapper--size-large {
807
- min-height: 4rem;
808
- padding: 0 0.5rem;
809
- }
810
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
811
- border-width: 0.25rem;
812
- }
813
- .eds-form-control-wrapper--size-large .eds-form-control,
814
- .eds-form-control-wrapper--size-large .eds-form-control__append,
815
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
816
- font-size: 1.5rem;
817
- line-height: 2.25rem;
800
+ position: absolute;
818
801
  }
819
- .eds-form-control-wrapper--success {
820
- border-color: var(--components-form-baseform-standard-border-success);
802
+ .eds-switch--right {
803
+ display: flex;
804
+ flex-direction: row;
805
+ align-items: center;
821
806
  }
822
- .eds-form-control-wrapper--success[focus-within] {
823
- border-color: var(--components-form-baseform-standard-border-success);
807
+ .eds-switch--bottom {
808
+ display: flex;
809
+ flex-direction: column;
810
+ align-items: center;
824
811
  }
825
- .eds-form-control-wrapper--success:focus-within {
826
- border-color: var(--components-form-baseform-standard-border-success);
812
+ .eds-switch__circle {
813
+ border-radius: 50%;
814
+ height: 1.25rem;
815
+ width: 1.25rem;
816
+ content: "";
817
+ display: flex;
818
+ align-items: center;
819
+ justify-content: center;
820
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
821
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
822
+ background-color: var(--components-form-switch-standard-switch);
823
+ top: 0.125rem;
824
+ left: 0.125rem;
825
+ position: relative;
827
826
  }
828
- .eds-contrast .eds-form-control-wrapper--success {
829
- border-color: var(--components-form-baseform-standard-border-success);
827
+ .eds-switch__switch--large .eds-switch__circle {
828
+ height: 1.75rem;
829
+ width: 1.75rem;
830
830
  }
831
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
832
- border-color: var(--components-form-baseform-contrast-border-success);
831
+ .eds-contrast .eds-switch__circle {
832
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
833
833
  }
834
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
835
- border-color: var(--components-form-baseform-contrast-border-success);
834
+ .eds-switch__switch {
835
+ position: relative;
836
+ background-color: var(--components-form-switch-standard-fill-false);
837
+ content: "";
838
+ display: block;
839
+ transition: background-color 0.1s ease-in-out;
840
+ height: 1.5rem;
841
+ width: 3rem;
842
+ border-radius: 1.5rem;
843
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
836
844
  }
837
- .eds-form-control-wrapper--error {
838
- border-color: var(--components-form-baseform-standard-border-negative);
845
+ .eds-contrast .eds-switch__switch {
846
+ background-color: var(--components-form-switch-contrast-fill-false);
839
847
  }
840
- .eds-form-control-wrapper--error[focus-within] {
841
- border-color: var(--components-form-baseform-standard-border-negative);
848
+ .eds-switch--right .eds-switch__switch {
849
+ margin-right: 0.75rem;
842
850
  }
843
- .eds-form-control-wrapper--error:focus-within {
844
- border-color: var(--components-form-baseform-standard-border-negative);
851
+ .eds-switch__switch svg g,
852
+ .eds-switch__switch path {
853
+ fill: var(--components-form-switch-standard-icon-false);
854
+ transition: fill ease-in-out 0.1s;
845
855
  }
846
- .eds-contrast .eds-form-control-wrapper--error {
847
- border-color: var(--components-form-baseform-contrast-border-negative);
856
+ .eds-contrast .eds-switch__switch svg g,
857
+ .eds-contrast .eds-switch__switch path {
858
+ fill: var(--components-form-switch-contrast-icon-false);
848
859
  }
849
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
850
- border-color: var(--components-form-baseform-contrast-border-negative);
860
+ :checked + .eds-switch__switch {
861
+ background-color: var(--eds-switch-color);
851
862
  }
852
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
853
- border-color: var(--components-form-baseform-contrast-border-negative);
863
+ :checked + .eds-switch__switch .eds-switch__circle {
864
+ left: 1.625rem;
854
865
  }
855
-
856
- .eds-form-control {
857
- -webkit-appearance: none;
858
- -moz-appearance: none;
859
- appearance: none;
860
- background-color: transparent;
861
- border: 0;
862
- color: var(--components-form-baseform-standard-text-content);
863
- display: block;
864
- font-family: inherit;
865
- line-height: 1rem;
866
- font-size: 1rem;
867
- padding: 20px 1rem 0.25rem;
868
- width: 100%;
866
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
867
+ :checked + .eds-switch__switch .eds-switch__circle path {
868
+ fill: var(--eds-switch-color);
869
869
  }
870
- .eds-form-control::-moz-placeholder {
871
- opacity: 0;
872
- -moz-transition: opacity 0.2s ease-in-out;
873
- transition: opacity 0.2s ease-in-out;
870
+ .eds-contrast :checked + .eds-switch__switch {
871
+ background-color: var(--eds-switch-contrast-color);
874
872
  }
875
- .eds-form-control::placeholder {
876
- opacity: 0;
877
- transition: opacity 0.2s ease-in-out;
873
+ :focus + .eds-switch__switch {
874
+ outline: 2px solid #181c56;
875
+ outline-color: var(--basecolors-stroke-focus-standard);
876
+ outline-offset: 0.125rem;
878
877
  }
879
- .eds-form-control:focus {
880
- outline: none;
878
+ .eds-contrast :focus + .eds-switch__switch {
879
+ outline-color: var(--basecolors-stroke-focus-contrast);
881
880
  }
882
- .eds-form-control:focus::-moz-placeholder {
883
- opacity: 1;
881
+ .eds-switch__switch--large {
882
+ width: 3.75rem;
883
+ height: 2rem;
884
+ border-radius: 3.75rem;
884
885
  }
885
- .eds-form-control:focus::placeholder {
886
- opacity: 1;
886
+ :checked + .eds-switch__switch--large .eds-switch__circle {
887
+ left: 1.875rem;
887
888
  }
888
- .eds-form-control__prepend, .eds-form-control__append {
889
+ .eds-switch__switch--large svg {
889
890
  position: relative;
890
- margin: 0 1rem;
891
- line-height: inherit;
891
+ right: 0.05rem;
892
892
  }
893
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
894
- position: static;
893
+ .eds-switch__label--large--right {
894
+ font-size: 1rem;
895
895
  }
896
- .eds-form-control__prepend svg, .eds-form-control__append svg {
897
- top: 0.125rem;
896
+ .eds-switch__label--large--bottom {
897
+ font-size: 0.875rem;
898
898
  }
899
- .eds-form-control__prepend {
900
- margin-right: 0;
899
+ .eds-switch__label--medium--right {
900
+ font-size: 0.875rem;
901
901
  }
902
- .eds-form-control__append {
903
- margin-left: 0;
902
+ .eds-switch__label--medium--bottom {
903
+ font-size: 0.75rem;
904
904
  }
905
905
  /* DO NOT CHANGE!*/
906
906
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1040,578 +1040,450 @@ textarea.eds-form-control.eds-textarea {
1040
1040
  .eds-contrast .eds-segmented-control {
1041
1041
  background: var(--components-form-segmentedcontrol-contrast-background);
1042
1042
  }
1043
- @import "~@entur/tokens/dist/primitive.css";
1044
- @import "~@entur/tokens/dist/semantic.css";
1045
1043
  /* DO NOT CHANGE!*/
1046
1044
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1047
- :root {
1048
- --fill-background-contrast-dark: var(--ebony-90);
1049
- --fill-background-contrast-light: var(--lavender-90);
1050
- --fill-background-contrast-lightalt: var(--blue-90);
1051
- --fill-background-contrast-lightalt-2: var(--blue-100);
1052
- --fill-background-overlay-solid: var(--ebony-80);
1053
- --fill-background-overlay-solidalt: var(--ebony-75);
1054
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
1055
- --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
1056
- --fill-background-standard-colorless: var(--white-alpha-0);
1057
- --fill-background-standard-dark: var(--ebony-100);
1058
- --fill-background-standard-light: var(--white-alpha-100);
1059
- --fill-background-subdued-dark: var(--ebony-85);
1060
- --fill-background-subdued-light: var(--blue-30);
1061
- --fill-background-tint-dark: var(--ebony-95);
1062
- --fill-background-tint-light: var(--blue-10);
1063
- --fill-background-tint-neutral: var(--grey-10);
1064
- --fill-background-tint-transparent: var(--transparent-blue-alpha10);
1065
- --fill-boolean-false-contrast: var(--blue-50);
1066
- --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
1067
- --fill-boolean-false-light: var(--grey-60);
1068
- --fill-boolean-true-contrast: var(--mint-40);
1069
- --fill-boolean-true-dark: var(--mint-40);
1070
- --fill-boolean-true-light: var(--mint-60);
1071
- --fill-disabled-light: var(--grey-40);
1072
- --fill-disabled-transparent: var(--transparent-neutral-alpha15);
1073
- --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
1074
- --fill-information-contrast: var(--sky-30);
1075
- --fill-information-deep: var(--sky-50);
1076
- --fill-information-muted: var(--sky-10);
1077
- --fill-information-tint: var(--sky-20);
1078
- --fill-negative-contrast: var(--coral-40);
1079
- --fill-negative-dark: var(--coral-90);
1080
- --fill-negative-deep: var(--coral-60);
1081
- --fill-negative-muted: var(--coral-20);
1082
- --fill-negative-tint: var(--coral-30);
1083
- --fill-negative-transparent: var(--transparent-coral-alpha20);
1084
- --fill-primary-active-contrast: var(--lavender-50);
1085
- --fill-primary-active-light: var(--lavender-100);
1086
- --fill-primary-default-contrast: var(--lavender-40);
1087
- --fill-primary-default-light: var(--lavender-90);
1088
- --fill-primary-hover-contrast: var(--lavender-30);
1089
- --fill-primary-hover-light: var(--blue-90);
1090
- --fill-secondary-active-contrast: var(--lavender-50);
1091
- --fill-secondary-active-light: var(--lavender-40);
1092
- --fill-secondary-default-colorless: var(--white-alpha-0);
1093
- --fill-secondary-hover-contrast: var(--blue-70);
1094
- --fill-secondary-hover-light: var(--lavender-20);
1095
- --fill-selected-default-contrast: var(--blue-90);
1096
- --fill-selected-default-dark: var(--ebony-10);
1097
- --fill-selected-default-darkalt: var(--ebony-50);
1098
- --fill-selected-default-light: var(--blue-10);
1099
- --fill-selected-default-neutral: var(--grey-30);
1100
- --fill-selected-hover-contrast: var(--blue-80);
1101
- --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
1102
- --fill-selected-hover-light: var(--blue-20);
1103
- --fill-selected-hover-neutral: var(--grey-20);
1104
- --fill-success-contrast: var(--mint-40);
1105
- --fill-success-deep: var(--mint-60);
1106
- --fill-success-muted: var(--mint-20);
1107
- --fill-success-subdued: var(--mint-50);
1108
- --fill-success-tint: var(--mint-30);
1109
- --fill-warning-contrast: var(--canary-40);
1110
- --fill-warning-deep: var(--canary-60);
1111
- --fill-warning-muted: var(--canary-20);
1112
- --fill-warning-tint: var(--canary-30);
1113
- --shape-accent: var(--lavender-90);
1114
- --shape-contrast: var(--lavender-40);
1115
- --shape-dark: var(--ebony-100);
1116
- --shape-darkalt: var(--ebony-30);
1117
- --shape-disabled: var(--grey-80);
1118
- --shape-highlight: var(--coral-40);
1119
- --shape-highlightalt: var(--coral-30);
1120
- --shape-inactive: var(--blue-40);
1121
- --shape-information: var(--sky-50);
1122
- --shape-informationalt: var(--sky-30);
1123
- --shape-light: var(--white-alpha-100);
1124
- --shape-lightalt: var(--ebony-10);
1125
- --shape-negative: var(--coral-60);
1126
- --shape-negativealt: var(--coral-30);
1127
- --shape-neutral: var(--grey-70);
1128
- --shape-neutralalt: var(--grey-50);
1129
- --shape-neutralalt2: var(--grey-60);
1130
- --shape-subdued: var(--blue-70);
1131
- --shape-subduedalt: var(--blue-30);
1132
- --shape-success: var(--mint-60);
1133
- --shape-successalt: var(--mint-40);
1134
- --shape-warning: var(--canary-60);
1135
- --shape-warningalt: var(--canary-40);
1136
- --stroke-accent: var(--lavender-90);
1137
- --stroke-colorless: var(--white-alpha-0);
1138
- --stroke-contrast: var(--lavender-40);
1139
- --stroke-contrastalt: var(--blue-80);
1140
- --stroke-dark: var(--ebony-30);
1141
- --stroke-darkalt: var(--ebony-50);
1142
- --stroke-darkalt-2: var(--ebony-100);
1143
- --stroke-highlight: var(--coral-40);
1144
- --stroke-highlightalt: var(--coral-30);
1145
- --stroke-information: var(--sky-50);
1146
- --stroke-light: var(--white-alpha-100);
1147
- --stroke-lightalt: var(--ebony-10);
1148
- --stroke-negative: var(--coral-60);
1149
- --stroke-negativealt: var(--coral-30);
1150
- --stroke-neutral: var(--grey-30);
1151
- --stroke-neutralalt: var(--grey-60);
1152
- --stroke-subdued: var(--blue-60);
1153
- --stroke-success: var(--mint-60);
1154
- --stroke-successalt: var(--mint-40);
1155
- --stroke-transparent: var(--transparent-blue-alpha40);
1156
- --stroke-transparentalt: var(--transparent-lavender-alpha70);
1157
- --stroke-warning: var(--canary-70);
1158
- --text-accent: var(--lavender-90);
1159
- --text-dark: var(--ebony-100);
1160
- --text-darkalt: var(--ebony-30);
1161
- --text-disabled: var(--grey-80);
1162
- --text-highlight: var(--lavender-40);
1163
- --text-highlightalt: var(--peach-40);
1164
- --text-light: var(--white-alpha-100);
1165
- --text-lightalt: var(--ebony-10);
1166
- --text-negative: var(--coral-60);
1167
- --text-negativealt: var(--coral-30);
1168
- --text-neutral: var(--grey-70);
1169
- --text-neutralalt: var(--grey-50);
1170
- --text-neutralalt2: var(--grey-60);
1171
- --text-subdued: var(--blue-70);
1172
- --text-subduedalt: var(--blue-30);
1173
- --text-success: var(--mint-60);
1174
- --text-successalt: var(--mint-40);
1175
- }
1176
-
1045
+ /* DO NOT CHANGE!*/
1046
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1177
1047
  /* DO NOT CHANGE!*/
1178
1048
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1179
1049
  [data-color-mode=light],
1180
1050
  :root {
1181
- --components-form-baseform-contrast-border-default: var(--stroke-subdued);
1182
- --components-form-baseform-contrast-border-interactive: var(--stroke-contrast);
1183
- --components-form-baseform-contrast-border-negative: var(--stroke-negativealt);
1184
- --components-form-baseform-contrast-border-success: var(--stroke-successalt);
1185
- --components-form-baseform-contrast-fill-default: var(--fill-background-standard-light);
1186
- --components-form-baseform-contrast-fill-disabled: var(--fill-disabled-transparent);
1187
- --components-form-baseform-contrast-fill-readonly: var(--fill-background-standard-colorless);
1188
- --components-form-baseform-contrast-icon: var(--shape-accent);
1189
- --components-form-baseform-contrast-icon-disabled: var(--shape-neutral);
1190
- --components-form-baseform-contrast-text-content: var(--text-accent);
1191
- --components-form-baseform-contrast-text-description: var(--text-light);
1192
- --components-form-baseform-contrast-text-label: var(--text-subdued);
1193
- --components-form-baseform-contrast-text-disabled: var(--text-neutral);
1194
- --components-form-baseform-standard-border-default: var(--stroke-subdued);
1195
- --components-form-baseform-standard-border-interactive: var(--stroke-accent);
1196
- --components-form-baseform-standard-border-negative: var(--stroke-negative);
1197
- --components-form-baseform-standard-border-success: var(--stroke-success);
1198
- --components-form-baseform-standard-fill-default: var(--fill-background-standard-light);
1199
- --components-form-baseform-standard-fill-disabled: var(--fill-disabled-light);
1200
- --components-form-baseform-standard-fill-readonly: var(--fill-background-standard-colorless);
1201
- --components-form-baseform-standard-icon: var(--shape-accent);
1202
- --components-form-baseform-standard-icon-disabled: var(--shape-neutral);
1203
- --components-form-baseform-standard-text-content: var(--text-accent);
1204
- --components-form-baseform-standard-text-description: var(--text-accent);
1205
- --components-form-baseform-standard-text-label: var(--text-subdued);
1206
- --components-form-baseform-standard-text-disabled: var(--text-neutral);
1207
- --components-form-basemenu-border: var(--stroke-subdued);
1208
- --components-form-basemenu-fill-default: var(--fill-background-tint-neutral);
1209
- --components-form-basemenu-fill-hover: var(--fill-background-subdued-light);
1210
- --components-form-basemenu-icon: var(--shape-accent);
1211
- --components-form-basemenu-icon-disabled: var(--shape-neutral);
1212
- --components-form-basemenu-text: var(--text-accent);
1213
- --components-form-basemenu-text-disabled: var(--text-neutral);
1214
- --components-form-basepanel-contrast-border-default: var(--stroke-subdued);
1215
- --components-form-basepanel-contrast-border-disabled: var(--stroke-neutralalt);
1216
- --components-form-basepanel-contrast-border-selected: var(--stroke-contrast);
1217
- --components-form-basepanel-contrast-fill-default: var(--fill-background-standard-colorless);
1218
- --components-form-basepanel-contrast-fill-disabled: var(--fill-disabled-transparent);
1219
- --components-form-basepanel-contrast-fill-expired: var(--fill-negative-transparent);
1220
- --components-form-basepanel-contrast-fill-hover: var(--fill-selected-hover-contrast);
1221
- --components-form-basepanel-contrast-fill-selected: var(--fill-primary-hover-light);
1222
- --components-form-basepanel-contrast-text-accent: var(--text-light);
1223
- --components-form-basepanel-contrast-text-disabled: var(--text-neutralalt);
1224
- --components-form-basepanel-contrast-text-rebate: var(--text-successalt);
1225
- --components-form-basepanel-contrast-text-subdued: var(--text-subduedalt);
1226
- --components-form-basepanel-standard-border-default: var(--stroke-subdued);
1227
- --components-form-basepanel-standard-border-disabled: var(--stroke-neutralalt);
1228
- --components-form-basepanel-standard-border-selected: var(--stroke-accent);
1229
- --components-form-basepanel-standard-fill-default: var(--fill-background-standard-colorless);
1230
- --components-form-basepanel-standard-fill-disabled: var(--fill-disabled-light);
1231
- --components-form-basepanel-standard-fill-expired: var(--fill-negative-transparent);
1232
- --components-form-basepanel-standard-fill-hover: var(--fill-selected-hover-light);
1233
- --components-form-basepanel-standard-fill-selected: var(--fill-selected-default-light);
1234
- --components-form-basepanel-standard-text-accent: var(--text-accent);
1235
- --components-form-basepanel-standard-text-disabled: var(--text-neutral);
1236
- --components-form-basepanel-standard-text-rebate: var(--text-success);
1237
- --components-form-basepanel-standard-text-subdued: var(--text-subdued);
1238
- --components-form-checkbox-contrast-border: var(--stroke-contrast);
1239
- --components-form-checkbox-contrast-border-negative: var(--stroke-negativealt);
1240
- --components-form-checkbox-contrast-fill-default: var(--fill-background-standard-colorless);
1241
- --components-form-checkbox-contrast-fill-hover: var(--fill-secondary-hover-contrast);
1242
- --components-form-checkbox-contrast-fill-selected: var(--fill-primary-default-contrast);
1243
- --components-form-checkbox-contrast-fill-selectedhover: var(--fill-primary-hover-contrast);
1244
- --components-form-checkbox-contrast-icon: var(--shape-accent);
1245
- --components-form-checkbox-contrast-text: var(--text-light);
1246
- --components-form-checkbox-standard-border: var(--stroke-accent);
1247
- --components-form-checkbox-standard-border-negative: var(--stroke-negative);
1248
- --components-form-checkbox-standard-fill-default: var(--fill-background-standard-colorless);
1249
- --components-form-checkbox-standard-fill-hover: var(--fill-secondary-hover-light);
1250
- --components-form-checkbox-standard-fill-selected: var(--fill-primary-default-light);
1251
- --components-form-checkbox-standard-fill-selectedhover: var(--fill-primary-hover-light);
1252
- --components-form-checkbox-standard-icon: var(--shape-light);
1253
- --components-form-checkbox-standard-text: var(--text-accent);
1254
- --components-form-feedbacktext-information-contrast-icon-fill: var(--shape-informationalt);
1255
- --components-form-feedbacktext-information-contrast-icon-symbol: var(--shape-accent);
1256
- --components-form-feedbacktext-information-contrast-stroke: var(--stroke-accent);
1257
- --components-form-feedbacktext-information-contrast-text: var(--text-light);
1258
- --components-form-feedbacktext-information-standard-icon-fill: var(--shape-information);
1259
- --components-form-feedbacktext-information-standard-icon-symbol: var(--shape-light);
1260
- --components-form-feedbacktext-information-standard-stroke: var(--stroke-light);
1261
- --components-form-feedbacktext-information-standard-text: var(--text-accent);
1262
- --components-form-feedbacktext-negative-contrast-icon-fill: var(--shape-negativealt);
1263
- --components-form-feedbacktext-negative-contrast-icon-symbol: var(--shape-accent);
1264
- --components-form-feedbacktext-negative-contrast-stroke: var(--stroke-accent);
1265
- --components-form-feedbacktext-negative-contrast-text: var(--text-light);
1266
- --components-form-feedbacktext-negative-standard-icon-fill: var(--shape-negative);
1267
- --components-form-feedbacktext-negative-standard-stroke: var(--stroke-light);
1268
- --components-form-feedbacktext-negative-standard-symbol: var(--shape-light);
1269
- --components-form-feedbacktext-negative-standard-text: var(--text-accent);
1270
- --components-form-feedbacktext-success-contrast-icon-fill: var(--shape-successalt);
1271
- --components-form-feedbacktext-success-contrast-icon-stroke: var(--stroke-accent);
1272
- --components-form-feedbacktext-success-contrast-icon-symbol: var(--shape-accent);
1273
- --components-form-feedbacktext-success-contrast-text: var(--text-light);
1274
- --components-form-feedbacktext-success-standard-icon-fill: var(--shape-success);
1275
- --components-form-feedbacktext-success-standard-icon-stroke: var(--stroke-light);
1276
- --components-form-feedbacktext-success-standard-icon-symbol: var(--shape-light);
1277
- --components-form-feedbacktext-success-standard-text: var(--text-accent);
1278
- --components-form-feedbacktext-warning-contrast-icon: var(--shape-warningalt);
1279
- --components-form-feedbacktext-warning-contrast-icon-symbol: var(--shape-accent);
1280
- --components-form-feedbacktext-warning-contrast-stroke: var(--stroke-accent);
1281
- --components-form-feedbacktext-warning-contrast-text: var(--text-light);
1282
- --components-form-feedbacktext-warning-standard-icon-fill: var(--shape-warning);
1283
- --components-form-feedbacktext-warning-standard-icon-symbol: var(--shape-accent);
1284
- --components-form-feedbacktext-warning-standard-stroke: var(--stroke-light);
1285
- --components-form-feedbacktext-warning-standard-text: var(--text-accent);
1286
- --components-form-radio-contrast-border: var(--stroke-contrast);
1287
- --components-form-radio-contrast-border-negative: var(--stroke-negativealt);
1288
- --components-form-radio-contrast-fill-default: var(--fill-background-standard-colorless);
1289
- --components-form-radio-contrast-fill-hover: var(--fill-secondary-hover-contrast);
1290
- --components-form-radio-contrast-fill-selected: var(--fill-primary-default-contrast);
1291
- --components-form-radio-contrast-fill-selectedhover: var(--fill-primary-hover-contrast);
1292
- --components-form-radio-contrast-icon: var(--shape-light);
1293
- --components-form-radio-contrast-text: var(--text-light);
1294
- --components-form-radio-standard-border: var(--stroke-accent);
1295
- --components-form-radio-standard-border-negative: var(--stroke-negative);
1296
- --components-form-radio-standard-fill-default: var(--fill-background-standard-colorless);
1297
- --components-form-radio-standard-fill-hover: var(--fill-secondary-hover-light);
1298
- --components-form-radio-standard-fill-selected: var(--fill-primary-default-light);
1299
- --components-form-radio-standard-icon: var(--shape-accent);
1300
- --components-form-radio-standard-selectedhover: var(--fill-primary-hover-light);
1301
- --components-form-radio-standard-text: var(--text-accent);
1302
- --components-form-segmentedcontrol-contrast-background: var(--fill-background-contrast-lightalt);
1303
- --components-form-segmentedcontrol-contrast-fill-hover: var(--fill-secondary-hover-contrast);
1304
- --components-form-segmentedcontrol-contrast-fill-selected: var(--fill-background-standard-light);
1305
- --components-form-segmentedcontrol-contrast-fill-unselected: var(--fill-background-standard-colorless);
1306
- --components-form-segmentedcontrol-contrast-icon-selected: var(--shape-accent);
1307
- --components-form-segmentedcontrol-contrast-icon-unselected: var(--shape-light);
1308
- --components-form-segmentedcontrol-contrast-text-selected: var(--text-accent);
1309
- --components-form-segmentedcontrol-contrast-text-unselected: var(--text-light);
1310
- --components-form-segmentedcontrol-standard-background: var(--fill-background-subdued-light);
1311
- --components-form-segmentedcontrol-standard-fill-hover: var(--fill-selected-hover-light);
1312
- --components-form-segmentedcontrol-standard-fill-selected: var(--fill-background-standard-light);
1313
- --components-form-segmentedcontrol-standard-fill-unselected: var(--fill-background-standard-colorless);
1314
- --components-form-segmentedcontrol-standard-icon-selected: var(--shape-accent);
1315
- --components-form-segmentedcontrol-standard-icon-unselected: var(--shape-accent);
1316
- --components-form-segmentedcontrol-standard-text-selected: var(--text-accent);
1317
- --components-form-segmentedcontrol-standard-text-unselected: var(--text-accent);
1318
- --components-form-switch-contrast-fill-false: var(--fill-boolean-false-contrast);
1319
- --components-form-switch-contrast-fill-true: var(--fill-boolean-true-contrast);
1320
- --components-form-switch-contrast-icon-false: var(--shape-subdued);
1321
- --components-form-switch-contrast-icon-true: var(--shape-accent);
1322
- --components-form-switch-contrast-switch: var(--fill-background-standard-light);
1323
- --components-form-switch-contrast-text: var(--text-light);
1324
- --components-form-switch-standard-fill-false: var(--fill-boolean-false-light);
1325
- --components-form-switch-standard-fill-true: var(--fill-boolean-true-light);
1326
- --components-form-switch-standard-icon-false: var(--shape-neutral);
1327
- --components-form-switch-standard-icon-true: var(--shape-accent);
1328
- --components-form-switch-standard-switch: var(--fill-background-standard-light);
1329
- --components-form-switch-standard-text: var(--text-accent);
1051
+ --components-form-baseform-contrast-border-default: #8284ab;
1052
+ --components-form-baseform-contrast-border-interactive: #aeb7e2;
1053
+ --components-form-baseform-contrast-border-negative: #ff9494;
1054
+ --components-form-baseform-contrast-border-success: #5ac39a;
1055
+ --components-form-baseform-contrast-fill-default: #ffffff;
1056
+ --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1057
+ --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
1058
+ --components-form-baseform-contrast-icon: #181c56;
1059
+ --components-form-baseform-contrast-icon-disabled: #6e6f73;
1060
+ --components-form-baseform-contrast-text-content: #181c56;
1061
+ --components-form-baseform-contrast-text-description: #ffffff;
1062
+ --components-form-baseform-contrast-text-label: #626493;
1063
+ --components-form-baseform-contrast-text-disabled: #6e6f73;
1064
+ --components-form-baseform-standard-border-default: #8284ab;
1065
+ --components-form-baseform-standard-border-interactive: #181c56;
1066
+ --components-form-baseform-standard-border-negative: #d31b1b;
1067
+ --components-form-baseform-standard-border-success: #1a8e60;
1068
+ --components-form-baseform-standard-fill-default: #ffffff;
1069
+ --components-form-baseform-standard-fill-disabled: #cfd2d4;
1070
+ --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
1071
+ --components-form-baseform-standard-icon: #181c56;
1072
+ --components-form-baseform-standard-icon-disabled: #6e6f73;
1073
+ --components-form-baseform-standard-text-content: #181c56;
1074
+ --components-form-baseform-standard-text-description: #181c56;
1075
+ --components-form-baseform-standard-text-label: #626493;
1076
+ --components-form-baseform-standard-text-disabled: #6e6f73;
1077
+ --components-form-basemenu-border: #8284ab;
1078
+ --components-form-basemenu-fill-default: #f2f5f7;
1079
+ --components-form-basemenu-fill-hover: #d9dae8;
1080
+ --components-form-basemenu-icon: #181c56;
1081
+ --components-form-basemenu-icon-disabled: #6e6f73;
1082
+ --components-form-basemenu-text: #181c56;
1083
+ --components-form-basemenu-text-disabled: #6e6f73;
1084
+ --components-form-basepanel-contrast-border-default: #8284ab;
1085
+ --components-form-basepanel-contrast-border-disabled: #949699;
1086
+ --components-form-basepanel-contrast-border-selected: #aeb7e2;
1087
+ --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
1088
+ --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1089
+ --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
1090
+ --components-form-basepanel-contrast-fill-hover: #54568c;
1091
+ --components-form-basepanel-contrast-fill-selected: #393d79;
1092
+ --components-form-basepanel-contrast-text-accent: #ffffff;
1093
+ --components-form-basepanel-contrast-text-disabled: #b6b8ba;
1094
+ --components-form-basepanel-contrast-text-rebate: #5ac39a;
1095
+ --components-form-basepanel-contrast-text-subdued: #d9dae8;
1096
+ --components-form-basepanel-standard-border-default: #8284ab;
1097
+ --components-form-basepanel-standard-border-disabled: #949699;
1098
+ --components-form-basepanel-standard-border-selected: #181c56;
1099
+ --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
1100
+ --components-form-basepanel-standard-fill-disabled: #cfd2d4;
1101
+ --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
1102
+ --components-form-basepanel-standard-fill-hover: #eaeaf1;
1103
+ --components-form-basepanel-standard-fill-selected: #f6f6f9;
1104
+ --components-form-basepanel-standard-text-accent: #181c56;
1105
+ --components-form-basepanel-standard-text-disabled: #6e6f73;
1106
+ --components-form-basepanel-standard-text-rebate: #1a8e60;
1107
+ --components-form-basepanel-standard-text-subdued: #626493;
1108
+ --components-form-checkbox-contrast-border: #aeb7e2;
1109
+ --components-form-checkbox-contrast-border-negative: #ff9494;
1110
+ --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
1111
+ --components-form-checkbox-contrast-fill-hover: #626493;
1112
+ --components-form-checkbox-contrast-fill-selected: #aeb7e2;
1113
+ --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
1114
+ --components-form-checkbox-contrast-icon: #181c56;
1115
+ --components-form-checkbox-contrast-text: #ffffff;
1116
+ --components-form-checkbox-standard-border: #181c56;
1117
+ --components-form-checkbox-standard-border-negative: #d31b1b;
1118
+ --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
1119
+ --components-form-checkbox-standard-fill-hover: #d9ddf2;
1120
+ --components-form-checkbox-standard-fill-selected: #181c56;
1121
+ --components-form-checkbox-standard-fill-selectedhover: #393d79;
1122
+ --components-form-checkbox-standard-icon: #ffffff;
1123
+ --components-form-checkbox-standard-text: #181c56;
1124
+ --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
1125
+ --components-form-feedbacktext-information-contrast-icon-symbol: #181c56;
1126
+ --components-form-feedbacktext-information-contrast-stroke: #181c56;
1127
+ --components-form-feedbacktext-information-contrast-text: #ffffff;
1128
+ --components-form-feedbacktext-information-standard-icon-fill: #067eb2;
1129
+ --components-form-feedbacktext-information-standard-icon-symbol: #ffffff;
1130
+ --components-form-feedbacktext-information-standard-stroke: #ffffff;
1131
+ --components-form-feedbacktext-information-standard-text: #181c56;
1132
+ --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
1133
+ --components-form-feedbacktext-negative-contrast-icon-symbol: #181c56;
1134
+ --components-form-feedbacktext-negative-contrast-stroke: #181c56;
1135
+ --components-form-feedbacktext-negative-contrast-text: #ffffff;
1136
+ --components-form-feedbacktext-negative-standard-icon-fill: #d31b1b;
1137
+ --components-form-feedbacktext-negative-standard-stroke: #ffffff;
1138
+ --components-form-feedbacktext-negative-standard-symbol: #ffffff;
1139
+ --components-form-feedbacktext-negative-standard-text: #181c56;
1140
+ --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
1141
+ --components-form-feedbacktext-success-contrast-icon-stroke: #181c56;
1142
+ --components-form-feedbacktext-success-contrast-icon-symbol: #181c56;
1143
+ --components-form-feedbacktext-success-contrast-text: #ffffff;
1144
+ --components-form-feedbacktext-success-standard-icon-fill: #1a8e60;
1145
+ --components-form-feedbacktext-success-standard-icon-stroke: #ffffff;
1146
+ --components-form-feedbacktext-success-standard-icon-symbol: #ffffff;
1147
+ --components-form-feedbacktext-success-standard-text: #181c56;
1148
+ --components-form-feedbacktext-warning-contrast-icon: #ffe082;
1149
+ --components-form-feedbacktext-warning-contrast-icon-symbol: #181c56;
1150
+ --components-form-feedbacktext-warning-contrast-stroke: #181c56;
1151
+ --components-form-feedbacktext-warning-contrast-text: #ffffff;
1152
+ --components-form-feedbacktext-warning-standard-icon-fill: #ffca28;
1153
+ --components-form-feedbacktext-warning-standard-icon-symbol: #181c56;
1154
+ --components-form-feedbacktext-warning-standard-stroke: #ffffff;
1155
+ --components-form-feedbacktext-warning-standard-text: #181c56;
1156
+ --components-form-radio-contrast-border: #aeb7e2;
1157
+ --components-form-radio-contrast-border-negative: #ff9494;
1158
+ --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
1159
+ --components-form-radio-contrast-fill-hover: #626493;
1160
+ --components-form-radio-contrast-fill-selected: #aeb7e2;
1161
+ --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
1162
+ --components-form-radio-contrast-icon: #ffffff;
1163
+ --components-form-radio-contrast-text: #ffffff;
1164
+ --components-form-radio-standard-border: #181c56;
1165
+ --components-form-radio-standard-border-negative: #d31b1b;
1166
+ --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
1167
+ --components-form-radio-standard-fill-hover: #d9ddf2;
1168
+ --components-form-radio-standard-fill-selected: #181c56;
1169
+ --components-form-radio-standard-icon: #181c56;
1170
+ --components-form-radio-standard-selectedhover: #393d79;
1171
+ --components-form-radio-standard-text: #181c56;
1172
+ --components-form-segmentedcontrol-contrast-background: #393d79;
1173
+ --components-form-segmentedcontrol-contrast-fill-hover: #626493;
1174
+ --components-form-segmentedcontrol-contrast-fill-selected: #ffffff;
1175
+ --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
1176
+ --components-form-segmentedcontrol-contrast-icon-selected: #181c56;
1177
+ --components-form-segmentedcontrol-contrast-icon-unselected: #ffffff;
1178
+ --components-form-segmentedcontrol-contrast-text-selected: #181c56;
1179
+ --components-form-segmentedcontrol-contrast-text-unselected: #ffffff;
1180
+ --components-form-segmentedcontrol-standard-background: #d9dae8;
1181
+ --components-form-segmentedcontrol-standard-fill-hover: #eaeaf1;
1182
+ --components-form-segmentedcontrol-standard-fill-selected: #ffffff;
1183
+ --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
1184
+ --components-form-segmentedcontrol-standard-icon-selected: #181c56;
1185
+ --components-form-segmentedcontrol-standard-icon-unselected: #181c56;
1186
+ --components-form-segmentedcontrol-standard-text-selected: #181c56;
1187
+ --components-form-segmentedcontrol-standard-text-unselected: #181c56;
1188
+ --components-form-switch-contrast-fill-false: #9ea0bd;
1189
+ --components-form-switch-contrast-fill-true: #5ac39a;
1190
+ --components-form-switch-contrast-icon-false: #626493;
1191
+ --components-form-switch-contrast-icon-true: #181c56;
1192
+ --components-form-switch-contrast-switch: #ffffff;
1193
+ --components-form-switch-contrast-text: #ffffff;
1194
+ --components-form-switch-standard-fill-false: #949699;
1195
+ --components-form-switch-standard-fill-true: #1a8e60;
1196
+ --components-form-switch-standard-icon-false: #6e6f73;
1197
+ --components-form-switch-standard-icon-true: #181c56;
1198
+ --components-form-switch-standard-switch: #ffffff;
1199
+ --components-form-switch-standard-text: #181c56;
1330
1200
  }
1331
1201
 
1332
1202
  [data-color-mode=dark] {
1333
- --components-form-baseform-contrast-border-default: var(--stroke-subdued);
1334
- --components-form-baseform-contrast-border-interactive: var(--stroke-contrast);
1335
- --components-form-baseform-contrast-border-negative: var(--stroke-negativealt);
1336
- --components-form-baseform-contrast-border-success: var(--stroke-successalt);
1337
- --components-form-baseform-contrast-fill-default: var(--fill-background-standard-colorless);
1338
- --components-form-baseform-contrast-fill-disabled: var(--fill-disabled-transparent);
1339
- --components-form-baseform-contrast-fill-readonly: var(--fill-background-standard-colorless);
1340
- --components-form-baseform-contrast-icon: var(--shape-lightalt);
1341
- --components-form-baseform-contrast-icon-disabled: var(--shape-neutral);
1342
- --components-form-baseform-contrast-text-content: var(--text-lightalt);
1343
- --components-form-baseform-contrast-text-description: var(--text-lightalt);
1344
- --components-form-baseform-contrast-text-label: var(--text-darkalt);
1345
- --components-form-baseform-contrast-text-disabled: var(--text-neutral);
1346
- --components-form-baseform-standard-border-default: var(--stroke-subdued);
1347
- --components-form-baseform-standard-border-interactive: var(--stroke-contrast);
1348
- --components-form-baseform-standard-border-negative: var(--stroke-negativealt);
1349
- --components-form-baseform-standard-border-success: var(--stroke-successalt);
1350
- --components-form-baseform-standard-fill-default: var(--fill-background-standard-colorless);
1351
- --components-form-baseform-standard-fill-disabled: var(--fill-disabled-transparent);
1352
- --components-form-baseform-standard-fill-readonly: var(--fill-background-standard-colorless);
1353
- --components-form-baseform-standard-icon: var(--shape-lightalt);
1354
- --components-form-baseform-standard-icon-disabled: var(--shape-neutral);
1355
- --components-form-baseform-standard-text-content: var(--text-lightalt);
1356
- --components-form-baseform-standard-text-description: var(--text-lightalt);
1357
- --components-form-baseform-standard-text-label: var(--text-darkalt);
1358
- --components-form-baseform-standard-text-disabled: var(--text-neutral);
1359
- --components-form-basemenu-border: var(--stroke-colorless);
1360
- --components-form-basemenu-fill-default: var(--fill-background-overlay-solidalt);
1361
- --components-form-basemenu-fill-hover: var(--fill-secondary-hover-contrast);
1362
- --components-form-basemenu-icon: var(--shape-lightalt);
1363
- --components-form-basemenu-icon-disabled: var(--shape-neutralalt2);
1364
- --components-form-basemenu-text: var(--text-lightalt);
1365
- --components-form-basemenu-text-disabled: var(--text-neutralalt2);
1366
- --components-form-basepanel-contrast-border-default: var(--stroke-darkalt);
1367
- --components-form-basepanel-contrast-border-disabled: var(--stroke-neutralalt);
1368
- --components-form-basepanel-contrast-border-selected: var(--stroke-contrast);
1369
- --components-form-basepanel-contrast-fill-default: var(--fill-background-standard-colorless);
1370
- --components-form-basepanel-contrast-fill-disabled: var(--fill-disabled-transparent);
1371
- --components-form-basepanel-contrast-fill-expired: var(--fill-negative-transparent);
1372
- --components-form-basepanel-contrast-fill-hover: var(--fill-background-overlay-solid);
1373
- --components-form-basepanel-contrast-fill-selected: var(--fill-background-overlay-transparent);
1374
- --components-form-basepanel-contrast-text-accent: var(--text-lightalt);
1375
- --components-form-basepanel-contrast-text-disabled: var(--text-neutralalt);
1376
- --components-form-basepanel-contrast-text-rebate: var(--text-successalt);
1377
- --components-form-basepanel-contrast-text-subdued: var(--text-darkalt);
1378
- --components-form-basepanel-standard-border-default: var(--stroke-darkalt);
1379
- --components-form-basepanel-standard-border-disabled: var(--stroke-neutralalt);
1380
- --components-form-basepanel-standard-border-selected: var(--stroke-contrast);
1381
- --components-form-basepanel-standard-fill-default: var(--fill-background-standard-colorless);
1382
- --components-form-basepanel-standard-fill-disabled: var(--fill-disabled-transparent);
1383
- --components-form-basepanel-standard-fill-expired: var(--fill-negative-transparent);
1384
- --components-form-basepanel-standard-fill-hover: var(--fill-background-overlay-solid);
1385
- --components-form-basepanel-standard-fill-selected: var(--fill-background-overlay-transparent);
1386
- --components-form-basepanel-standard-text-accent: var(--text-lightalt);
1387
- --components-form-basepanel-standard-text-disabled: var(--text-neutralalt);
1388
- --components-form-basepanel-standard-text-rebate: var(--text-successalt);
1389
- --components-form-basepanel-standard-text-subdued: var(--text-darkalt);
1390
- --components-form-checkbox-contrast-border: var(--stroke-contrast);
1391
- --components-form-checkbox-contrast-border-negative: var(--stroke-negativealt);
1392
- --components-form-checkbox-contrast-fill-default: var(--fill-background-standard-colorless);
1393
- --components-form-checkbox-contrast-fill-hover: var(--fill-secondary-hover-contrast);
1394
- --components-form-checkbox-contrast-fill-selected: var(--fill-primary-default-contrast);
1395
- --components-form-checkbox-contrast-fill-selectedhover: var(--fill-primary-hover-contrast);
1396
- --components-form-checkbox-contrast-icon: var(--shape-accent);
1397
- --components-form-checkbox-contrast-text: var(--text-lightalt);
1398
- --components-form-checkbox-standard-border: var(--stroke-contrast);
1399
- --components-form-checkbox-standard-border-negative: var(--stroke-negativealt);
1400
- --components-form-checkbox-standard-fill-default: var(--fill-background-standard-colorless);
1401
- --components-form-checkbox-standard-fill-hover: var(--fill-secondary-hover-contrast);
1402
- --components-form-checkbox-standard-fill-selected: var(--fill-primary-default-contrast);
1403
- --components-form-checkbox-standard-fill-selectedhover: var(--fill-primary-hover-contrast);
1404
- --components-form-checkbox-standard-icon: var(--shape-accent);
1405
- --components-form-checkbox-standard-text: var(--text-lightalt);
1406
- --components-form-feedbacktext-information-contrast-icon-fill: var(--shape-informationalt);
1407
- --components-form-feedbacktext-information-contrast-icon-symbol: var(--shape-dark);
1408
- --components-form-feedbacktext-information-contrast-stroke: var(--stroke-darkalt-2);
1409
- --components-form-feedbacktext-information-contrast-text: var(--text-lightalt);
1410
- --components-form-feedbacktext-information-standard-icon-fill: var(--shape-informationalt);
1411
- --components-form-feedbacktext-information-standard-icon-symbol: var(--shape-dark);
1412
- --components-form-feedbacktext-information-standard-stroke: var(--stroke-darkalt-2);
1413
- --components-form-feedbacktext-information-standard-text: var(--text-lightalt);
1414
- --components-form-feedbacktext-negative-contrast-icon-fill: var(--shape-negativealt);
1415
- --components-form-feedbacktext-negative-contrast-icon-symbol: var(--shape-dark);
1416
- --components-form-feedbacktext-negative-contrast-stroke: var(--stroke-darkalt-2);
1417
- --components-form-feedbacktext-negative-contrast-text: var(--text-lightalt);
1418
- --components-form-feedbacktext-negative-standard-icon-fill: var(--shape-negativealt);
1419
- --components-form-feedbacktext-negative-standard-stroke: var(--stroke-darkalt-2);
1420
- --components-form-feedbacktext-negative-standard-symbol: var(--shape-dark);
1421
- --components-form-feedbacktext-negative-standard-text: var(--text-lightalt);
1422
- --components-form-feedbacktext-success-contrast-icon-fill: var(--shape-successalt);
1423
- --components-form-feedbacktext-success-contrast-icon-stroke: var(--stroke-darkalt-2);
1424
- --components-form-feedbacktext-success-contrast-icon-symbol: var(--shape-dark);
1425
- --components-form-feedbacktext-success-contrast-text: var(--text-lightalt);
1426
- --components-form-feedbacktext-success-standard-icon-fill: var(--shape-successalt);
1427
- --components-form-feedbacktext-success-standard-icon-stroke: var(--stroke-darkalt-2);
1428
- --components-form-feedbacktext-success-standard-icon-symbol: var(--shape-dark);
1429
- --components-form-feedbacktext-success-standard-text: var(--text-lightalt);
1430
- --components-form-feedbacktext-warning-contrast-icon: var(--shape-warningalt);
1431
- --components-form-feedbacktext-warning-contrast-icon-symbol: var(--shape-dark);
1432
- --components-form-feedbacktext-warning-contrast-stroke: var(--stroke-darkalt-2);
1433
- --components-form-feedbacktext-warning-contrast-text: var(--text-lightalt);
1434
- --components-form-feedbacktext-warning-standard-icon-fill: var(--shape-warningalt);
1435
- --components-form-feedbacktext-warning-standard-icon-symbol: var(--shape-dark);
1436
- --components-form-feedbacktext-warning-standard-stroke: var(--stroke-darkalt-2);
1437
- --components-form-feedbacktext-warning-standard-text: var(--text-lightalt);
1438
- --components-form-radio-contrast-border: var(--stroke-contrast);
1439
- --components-form-radio-contrast-border-negative: var(--stroke-negativealt);
1440
- --components-form-radio-contrast-fill-default: var(--fill-background-standard-colorless);
1441
- --components-form-radio-contrast-fill-hover: var(--fill-secondary-hover-contrast);
1442
- --components-form-radio-contrast-fill-selected: var(--fill-primary-default-contrast);
1443
- --components-form-radio-contrast-fill-selectedhover: var(--fill-primary-hover-contrast);
1444
- --components-form-radio-contrast-icon: var(--shape-lightalt);
1445
- --components-form-radio-contrast-text: var(--text-lightalt);
1446
- --components-form-radio-standard-border: var(--stroke-contrast);
1447
- --components-form-radio-standard-border-negative: var(--stroke-negativealt);
1448
- --components-form-radio-standard-fill-default: var(--fill-background-standard-colorless);
1449
- --components-form-radio-standard-fill-hover: var(--fill-secondary-hover-contrast);
1450
- --components-form-radio-standard-fill-selected: var(--fill-primary-default-contrast);
1451
- --components-form-radio-standard-icon: var(--shape-lightalt);
1452
- --components-form-radio-standard-selectedhover: var(--fill-primary-hover-contrast);
1453
- --components-form-radio-standard-text: var(--text-lightalt);
1454
- --components-form-segmentedcontrol-contrast-background: var(--fill-background-overlay-transparent);
1455
- --components-form-segmentedcontrol-contrast-fill-hover: var(--fill-background-overlay-transparent);
1456
- --components-form-segmentedcontrol-contrast-fill-selected: var(--fill-selected-default-dark);
1457
- --components-form-segmentedcontrol-contrast-fill-unselected: var(--fill-background-standard-colorless);
1458
- --components-form-segmentedcontrol-contrast-icon-selected: var(--shape-dark);
1459
- --components-form-segmentedcontrol-contrast-icon-unselected: var(--shape-lightalt);
1460
- --components-form-segmentedcontrol-contrast-text-selected: var(--text-dark);
1461
- --components-form-segmentedcontrol-contrast-text-unselected: var(--text-lightalt);
1462
- --components-form-segmentedcontrol-standard-background: var(--fill-background-overlay-transparent);
1463
- --components-form-segmentedcontrol-standard-fill-hover: var(--fill-background-overlay-transparent);
1464
- --components-form-segmentedcontrol-standard-fill-selected: var(--fill-selected-default-dark);
1465
- --components-form-segmentedcontrol-standard-fill-unselected: var(--fill-background-standard-colorless);
1466
- --components-form-segmentedcontrol-standard-icon-selected: var(--shape-dark);
1467
- --components-form-segmentedcontrol-standard-icon-unselected: var(--shape-lightalt);
1468
- --components-form-segmentedcontrol-standard-text-selected: var(--text-dark);
1469
- --components-form-segmentedcontrol-standard-text-unselected: var(--text-lightalt);
1470
- --components-form-switch-contrast-fill-false: var(--fill-boolean-false-dark);
1471
- --components-form-switch-contrast-fill-true: var(--fill-boolean-true-contrast);
1472
- --components-form-switch-contrast-icon-false: var(--shape-darkalt);
1473
- --components-form-switch-contrast-icon-true: var(--shape-lightalt);
1474
- --components-form-switch-contrast-switch: var(--fill-background-standard-dark);
1475
- --components-form-switch-contrast-text: var(--text-lightalt);
1476
- --components-form-switch-standard-fill-false: var(--fill-boolean-false-dark);
1477
- --components-form-switch-standard-fill-true: var(--fill-boolean-true-contrast);
1478
- --components-form-switch-standard-icon-false: var(--shape-darkalt);
1479
- --components-form-switch-standard-icon-true: var(--shape-lightalt);
1480
- --components-form-switch-standard-switch: var(--fill-background-standard-dark);
1481
- --components-form-switch-standard-text: var(--text-lightalt);
1203
+ --components-form-baseform-contrast-border-default: #8284ab;
1204
+ --components-form-baseform-contrast-border-interactive: #aeb7e2;
1205
+ --components-form-baseform-contrast-border-negative: #ff9494;
1206
+ --components-form-baseform-contrast-border-success: #5ac39a;
1207
+ --components-form-baseform-contrast-fill-default: rgba(255, 255, 255, 0);
1208
+ --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1209
+ --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
1210
+ --components-form-baseform-contrast-icon: #e5e5e9;
1211
+ --components-form-baseform-contrast-icon-disabled: #6e6f73;
1212
+ --components-form-baseform-contrast-text-content: #e5e5e9;
1213
+ --components-form-baseform-contrast-text-description: #e5e5e9;
1214
+ --components-form-baseform-contrast-text-label: #b3b4bd;
1215
+ --components-form-baseform-contrast-text-disabled: #6e6f73;
1216
+ --components-form-baseform-standard-border-default: #8284ab;
1217
+ --components-form-baseform-standard-border-interactive: #aeb7e2;
1218
+ --components-form-baseform-standard-border-negative: #ff9494;
1219
+ --components-form-baseform-standard-border-success: #5ac39a;
1220
+ --components-form-baseform-standard-fill-default: rgba(255, 255, 255, 0);
1221
+ --components-form-baseform-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1222
+ --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
1223
+ --components-form-baseform-standard-icon: #e5e5e9;
1224
+ --components-form-baseform-standard-icon-disabled: #6e6f73;
1225
+ --components-form-baseform-standard-text-content: #e5e5e9;
1226
+ --components-form-baseform-standard-text-description: #e5e5e9;
1227
+ --components-form-baseform-standard-text-label: #b3b4bd;
1228
+ --components-form-baseform-standard-text-disabled: #6e6f73;
1229
+ --components-form-basemenu-border: rgba(255, 255, 255, 0);
1230
+ --components-form-basemenu-fill-default: #464755;
1231
+ --components-form-basemenu-fill-hover: #626493;
1232
+ --components-form-basemenu-icon: #e5e5e9;
1233
+ --components-form-basemenu-icon-disabled: #949699;
1234
+ --components-form-basemenu-text: #e5e5e9;
1235
+ --components-form-basemenu-text-disabled: #949699;
1236
+ --components-form-basepanel-contrast-border-default: #81828f;
1237
+ --components-form-basepanel-contrast-border-disabled: #949699;
1238
+ --components-form-basepanel-contrast-border-selected: #aeb7e2;
1239
+ --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
1240
+ --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1241
+ --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
1242
+ --components-form-basepanel-contrast-fill-hover: #393a49;
1243
+ --components-form-basepanel-contrast-fill-selected: rgba(229, 229, 233, 0.1490196078);
1244
+ --components-form-basepanel-contrast-text-accent: #e5e5e9;
1245
+ --components-form-basepanel-contrast-text-disabled: #b6b8ba;
1246
+ --components-form-basepanel-contrast-text-rebate: #5ac39a;
1247
+ --components-form-basepanel-contrast-text-subdued: #b3b4bd;
1248
+ --components-form-basepanel-standard-border-default: #81828f;
1249
+ --components-form-basepanel-standard-border-disabled: #949699;
1250
+ --components-form-basepanel-standard-border-selected: #aeb7e2;
1251
+ --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
1252
+ --components-form-basepanel-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1253
+ --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
1254
+ --components-form-basepanel-standard-fill-hover: #393a49;
1255
+ --components-form-basepanel-standard-fill-selected: rgba(229, 229, 233, 0.1490196078);
1256
+ --components-form-basepanel-standard-text-accent: #e5e5e9;
1257
+ --components-form-basepanel-standard-text-disabled: #b6b8ba;
1258
+ --components-form-basepanel-standard-text-rebate: #5ac39a;
1259
+ --components-form-basepanel-standard-text-subdued: #b3b4bd;
1260
+ --components-form-checkbox-contrast-border: #aeb7e2;
1261
+ --components-form-checkbox-contrast-border-negative: #ff9494;
1262
+ --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
1263
+ --components-form-checkbox-contrast-fill-hover: #626493;
1264
+ --components-form-checkbox-contrast-fill-selected: #aeb7e2;
1265
+ --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
1266
+ --components-form-checkbox-contrast-icon: #181c56;
1267
+ --components-form-checkbox-contrast-text: #e5e5e9;
1268
+ --components-form-checkbox-standard-border: #aeb7e2;
1269
+ --components-form-checkbox-standard-border-negative: #ff9494;
1270
+ --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
1271
+ --components-form-checkbox-standard-fill-hover: #626493;
1272
+ --components-form-checkbox-standard-fill-selected: #aeb7e2;
1273
+ --components-form-checkbox-standard-fill-selectedhover: #c7cdeb;
1274
+ --components-form-checkbox-standard-icon: #181c56;
1275
+ --components-form-checkbox-standard-text: #e5e5e9;
1276
+ --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
1277
+ --components-form-feedbacktext-information-contrast-icon-symbol: #08091c;
1278
+ --components-form-feedbacktext-information-contrast-stroke: #08091c;
1279
+ --components-form-feedbacktext-information-contrast-text: #e5e5e9;
1280
+ --components-form-feedbacktext-information-standard-icon-fill: #64b3e7;
1281
+ --components-form-feedbacktext-information-standard-icon-symbol: #08091c;
1282
+ --components-form-feedbacktext-information-standard-stroke: #08091c;
1283
+ --components-form-feedbacktext-information-standard-text: #e5e5e9;
1284
+ --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
1285
+ --components-form-feedbacktext-negative-contrast-icon-symbol: #08091c;
1286
+ --components-form-feedbacktext-negative-contrast-stroke: #08091c;
1287
+ --components-form-feedbacktext-negative-contrast-text: #e5e5e9;
1288
+ --components-form-feedbacktext-negative-standard-icon-fill: #ff9494;
1289
+ --components-form-feedbacktext-negative-standard-stroke: #08091c;
1290
+ --components-form-feedbacktext-negative-standard-symbol: #08091c;
1291
+ --components-form-feedbacktext-negative-standard-text: #e5e5e9;
1292
+ --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
1293
+ --components-form-feedbacktext-success-contrast-icon-stroke: #08091c;
1294
+ --components-form-feedbacktext-success-contrast-icon-symbol: #08091c;
1295
+ --components-form-feedbacktext-success-contrast-text: #e5e5e9;
1296
+ --components-form-feedbacktext-success-standard-icon-fill: #5ac39a;
1297
+ --components-form-feedbacktext-success-standard-icon-stroke: #08091c;
1298
+ --components-form-feedbacktext-success-standard-icon-symbol: #08091c;
1299
+ --components-form-feedbacktext-success-standard-text: #e5e5e9;
1300
+ --components-form-feedbacktext-warning-contrast-icon: #ffe082;
1301
+ --components-form-feedbacktext-warning-contrast-icon-symbol: #08091c;
1302
+ --components-form-feedbacktext-warning-contrast-stroke: #08091c;
1303
+ --components-form-feedbacktext-warning-contrast-text: #e5e5e9;
1304
+ --components-form-feedbacktext-warning-standard-icon-fill: #ffe082;
1305
+ --components-form-feedbacktext-warning-standard-icon-symbol: #08091c;
1306
+ --components-form-feedbacktext-warning-standard-stroke: #08091c;
1307
+ --components-form-feedbacktext-warning-standard-text: #e5e5e9;
1308
+ --components-form-radio-contrast-border: #aeb7e2;
1309
+ --components-form-radio-contrast-border-negative: #ff9494;
1310
+ --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
1311
+ --components-form-radio-contrast-fill-hover: #626493;
1312
+ --components-form-radio-contrast-fill-selected: #aeb7e2;
1313
+ --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
1314
+ --components-form-radio-contrast-icon: #e5e5e9;
1315
+ --components-form-radio-contrast-text: #e5e5e9;
1316
+ --components-form-radio-standard-border: #aeb7e2;
1317
+ --components-form-radio-standard-border-negative: #ff9494;
1318
+ --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
1319
+ --components-form-radio-standard-fill-hover: #626493;
1320
+ --components-form-radio-standard-fill-selected: #aeb7e2;
1321
+ --components-form-radio-standard-icon: #e5e5e9;
1322
+ --components-form-radio-standard-selectedhover: #c7cdeb;
1323
+ --components-form-radio-standard-text: #e5e5e9;
1324
+ --components-form-segmentedcontrol-contrast-background: rgba(229, 229, 233, 0.1490196078);
1325
+ --components-form-segmentedcontrol-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
1326
+ --components-form-segmentedcontrol-contrast-fill-selected: #e5e5e9;
1327
+ --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
1328
+ --components-form-segmentedcontrol-contrast-icon-selected: #08091c;
1329
+ --components-form-segmentedcontrol-contrast-icon-unselected: #e5e5e9;
1330
+ --components-form-segmentedcontrol-contrast-text-selected: #08091c;
1331
+ --components-form-segmentedcontrol-contrast-text-unselected: #e5e5e9;
1332
+ --components-form-segmentedcontrol-standard-background: rgba(229, 229, 233, 0.1490196078);
1333
+ --components-form-segmentedcontrol-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
1334
+ --components-form-segmentedcontrol-standard-fill-selected: #e5e5e9;
1335
+ --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
1336
+ --components-form-segmentedcontrol-standard-icon-selected: #08091c;
1337
+ --components-form-segmentedcontrol-standard-icon-unselected: #e5e5e9;
1338
+ --components-form-segmentedcontrol-standard-text-selected: #08091c;
1339
+ --components-form-segmentedcontrol-standard-text-unselected: #e5e5e9;
1340
+ --components-form-switch-contrast-fill-false: rgba(229, 229, 233, 0.3490196078);
1341
+ --components-form-switch-contrast-fill-true: #5ac39a;
1342
+ --components-form-switch-contrast-icon-false: #b3b4bd;
1343
+ --components-form-switch-contrast-icon-true: #e5e5e9;
1344
+ --components-form-switch-contrast-switch: #08091c;
1345
+ --components-form-switch-contrast-text: #e5e5e9;
1346
+ --components-form-switch-standard-fill-false: rgba(229, 229, 233, 0.3490196078);
1347
+ --components-form-switch-standard-fill-true: #5ac39a;
1348
+ --components-form-switch-standard-icon-false: #b3b4bd;
1349
+ --components-form-switch-standard-icon-true: #e5e5e9;
1350
+ --components-form-switch-standard-switch: #08091c;
1351
+ --components-form-switch-standard-text: #e5e5e9;
1482
1352
  }
1483
1353
 
1354
+ /* DO NOT CHANGE!*/
1355
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1484
1356
  /* DO NOT CHANGE!*/
1485
1357
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1486
1358
  [data-color-mode=light],
1487
1359
  :root {
1488
- --basecolors-frame-contrast: var(--fill-background-contrast-light);
1489
- --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
1490
- --basecolors-frame-default: var(--fill-background-standard-light);
1491
- --basecolors-frame-elevated: var(--fill-background-standard-light);
1492
- --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
1493
- --basecolors-frame-subdued: var(--fill-background-subdued-light);
1494
- --basecolors-frame-tint: var(--fill-background-tint-light);
1495
- --basecolors-shape-accent: var(--shape-accent);
1496
- --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
1497
- --basecolors-shape-bicycle-default: var(--standard-bicycle);
1498
- --basecolors-shape-bus-contrast: var(--contrast-bus);
1499
- --basecolors-shape-bus-default: var(--standard-bus);
1500
- --basecolors-shape-cableway-contrast: var(--contrast-cableway);
1501
- --basecolors-shape-cableway-default: var(--standard-cableway);
1502
- --basecolors-shape-disabled: var(--shape-neutral);
1503
- --basecolors-shape-disabledalt: var(--shape-neutralalt);
1504
- --basecolors-shape-ferry-contrast: var(--contrast-ferry);
1505
- --basecolors-shape-ferry-default: var(--standard-ferry);
1506
- --basecolors-shape-funicular-contrast: var(--contrast-funicular);
1507
- --basecolors-shape-funicular-default: var(--standard-funicular);
1508
- --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
1509
- --basecolors-shape-helicopter-default: var(--standard-helicopter);
1510
- --basecolors-shape-highlight: var(--stroke-highlight);
1511
- --basecolors-shape-light: var(--shape-light);
1512
- --basecolors-shape-mask: var(--shape-light);
1513
- --basecolors-shape-maskalt: var(--shape-light);
1514
- --basecolors-shape-metro-contrast: var(--contrast-metro);
1515
- --basecolors-shape-metro-default: var(--standard-metro);
1516
- --basecolors-shape-mobility-contrast: var(--contrast-mobility);
1517
- --basecolors-shape-mobility-default: var(--standard-mobility);
1518
- --basecolors-shape-plane-contrast: var(--contrast-plane);
1519
- --basecolors-shape-plane-default: var(--standard-plane);
1520
- --basecolors-shape-subdued: var(--shape-subdued);
1521
- --basecolors-shape-subduedalt: var(--shape-subduedalt);
1522
- --basecolors-shape-taxi-contrast: var(--contrast-taxi);
1523
- --basecolors-shape-taxi-default: var(--standard-taxi);
1524
- --basecolors-shape-train-contrast: var(--contrast-train);
1525
- --basecolors-shape-train-default: var(--standard-train);
1526
- --basecolors-shape-tram-contrast: var(--contrast-tram);
1527
- --basecolors-shape-tram-default: var(--standard-tram);
1528
- --basecolors-shape-walk-contrast: var(--contrast-walk);
1529
- --basecolors-shape-walk-default: var(--standard-walk);
1530
- --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
1531
- --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
1532
- --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
1533
- --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
1534
- --basecolors-stroke-contrast: var(--stroke-contrast);
1535
- --basecolors-stroke-default: var(--stroke-accent);
1536
- --basecolors-stroke-disabled: var(--stroke-neutralalt);
1537
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
1538
- --basecolors-stroke-focus-standard: var(--stroke-accent);
1539
- --basecolors-stroke-highlight: var(--stroke-highlight);
1540
- --basecolors-stroke-light: var(--stroke-light);
1541
- --basecolors-stroke-subdued: var(--stroke-subdued);
1542
- --basecolors-stroke-subduedalt: var(--stroke-neutral);
1543
- --basecolors-text-accent: var(--text-accent);
1544
- --basecolors-text-disabled: var(--text-neutral);
1545
- --basecolors-text-disabledalt: var(--text-neutralalt);
1546
- --basecolors-text-highlight: var(--stroke-highlight);
1547
- --basecolors-text-light: var(--text-light);
1548
- --basecolors-text-subdued: var(--text-subdued);
1549
- --basecolors-text-subduedalt: var(--text-subduedalt);
1360
+ --basecolors-frame-contrast: #181c56;
1361
+ --basecolors-frame-contrastalt: #393d79;
1362
+ --basecolors-frame-default: #ffffff;
1363
+ --basecolors-frame-elevated: #ffffff;
1364
+ --basecolors-frame-elevatedalt: #f6f6f9;
1365
+ --basecolors-frame-subdued: #d9dae8;
1366
+ --basecolors-frame-tint: #f6f6f9;
1367
+ --basecolors-shape-accent: #181c56;
1368
+ --basecolors-shape-bicycle-contrast: #00db9b;
1369
+ --basecolors-shape-bicycle-default: #388f76;
1370
+ --basecolors-shape-bus-contrast: #ff6392;
1371
+ --basecolors-shape-bus-default: #c5044e;
1372
+ --basecolors-shape-cableway-contrast: #b482fb;
1373
+ --basecolors-shape-cableway-default: #78469a;
1374
+ --basecolors-shape-disabled: #6e6f73;
1375
+ --basecolors-shape-disabledalt: #b6b8ba;
1376
+ --basecolors-shape-ferry-contrast: #6fdfff;
1377
+ --basecolors-shape-ferry-default: #0c6693;
1378
+ --basecolors-shape-funicular-contrast: #b482fb;
1379
+ --basecolors-shape-funicular-default: #78469a;
1380
+ --basecolors-shape-helicopter-contrast: #fbafea;
1381
+ --basecolors-shape-helicopter-default: #800664;
1382
+ --basecolors-shape-highlight: #ff5959;
1383
+ --basecolors-shape-light: #ffffff;
1384
+ --basecolors-shape-mask: #ffffff;
1385
+ --basecolors-shape-maskalt: #ffffff;
1386
+ --basecolors-shape-metro-contrast: #f08901;
1387
+ --basecolors-shape-metro-default: #bf5826;
1388
+ --basecolors-shape-mobility-contrast: #00db9b;
1389
+ --basecolors-shape-mobility-default: #388f76;
1390
+ --basecolors-shape-plane-contrast: #fbafea;
1391
+ --basecolors-shape-plane-default: #800664;
1392
+ --basecolors-shape-subdued: #626493;
1393
+ --basecolors-shape-subduedalt: #d9dae8;
1394
+ --basecolors-shape-taxi-contrast: #ffe082;
1395
+ --basecolors-shape-taxi-default: #3d3e40;
1396
+ --basecolors-shape-train-contrast: #42a5f5;
1397
+ --basecolors-shape-train-default: #00367f;
1398
+ --basecolors-shape-tram-contrast: #b482fb;
1399
+ --basecolors-shape-tram-default: #78469a;
1400
+ --basecolors-shape-walk-contrast: #8284ab;
1401
+ --basecolors-shape-walk-default: #8d8e9c;
1402
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
1403
+ --basecolors-shape-airportlinkbus-default: #800664;
1404
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
1405
+ --basecolors-shape-airportlinkrail-default: #800664;
1406
+ --basecolors-stroke-contrast: #aeb7e2;
1407
+ --basecolors-stroke-default: #181c56;
1408
+ --basecolors-stroke-disabled: #949699;
1409
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1410
+ --basecolors-stroke-focus-standard: #181c56;
1411
+ --basecolors-stroke-highlight: #ff5959;
1412
+ --basecolors-stroke-light: #ffffff;
1413
+ --basecolors-stroke-subdued: #8284ab;
1414
+ --basecolors-stroke-subduedalt: #e3e6e8;
1415
+ --basecolors-text-accent: #181c56;
1416
+ --basecolors-text-disabled: #6e6f73;
1417
+ --basecolors-text-disabledalt: #b6b8ba;
1418
+ --basecolors-text-highlight: #ff5959;
1419
+ --basecolors-text-light: #ffffff;
1420
+ --basecolors-text-subdued: #626493;
1421
+ --basecolors-text-subduedalt: #d9dae8;
1550
1422
  }
1551
1423
 
1552
1424
  [data-color-mode=dark] {
1553
- --basecolors-frame-contrast: var(--fill-background-contrast-dark);
1554
- --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
1555
- --basecolors-frame-default: var(--fill-background-standard-dark);
1556
- --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
1557
- --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
1558
- --basecolors-frame-subdued: var(--fill-background-subdued-dark);
1559
- --basecolors-frame-tint: var(--fill-background-tint-dark);
1560
- --basecolors-shape-accent: var(--shape-lightalt);
1561
- --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
1562
- --basecolors-shape-bicycle-default: var(--dark-bicycle);
1563
- --basecolors-shape-bus-contrast: var(--dark-bus);
1564
- --basecolors-shape-bus-default: var(--dark-bus);
1565
- --basecolors-shape-cableway-contrast: var(--dark-cableway);
1566
- --basecolors-shape-cableway-default: var(--dark-cableway);
1567
- --basecolors-shape-disabled: var(--shape-neutralalt);
1568
- --basecolors-shape-disabledalt: var(--shape-darkalt);
1569
- --basecolors-shape-ferry-contrast: var(--dark-ferry);
1570
- --basecolors-shape-ferry-default: var(--dark-ferry);
1571
- --basecolors-shape-funicular-contrast: var(--dark-funicular);
1572
- --basecolors-shape-funicular-default: var(--dark-funicular);
1573
- --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
1574
- --basecolors-shape-helicopter-default: var(--dark-helicopter);
1575
- --basecolors-shape-highlight: var(--stroke-highlightalt);
1576
- --basecolors-shape-light: var(--shape-lightalt);
1577
- --basecolors-shape-mask: var(--fill-background-subdued-dark);
1578
- --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
1579
- --basecolors-shape-metro-contrast: var(--dark-metro);
1580
- --basecolors-shape-metro-default: var(--dark-metro);
1581
- --basecolors-shape-mobility-contrast: var(--dark-mobility);
1582
- --basecolors-shape-mobility-default: var(--dark-mobility);
1583
- --basecolors-shape-plane-contrast: var(--dark-plane);
1584
- --basecolors-shape-plane-default: var(--dark-plane);
1585
- --basecolors-shape-subdued: var(--shape-darkalt);
1586
- --basecolors-shape-subduedalt: var(--shape-darkalt);
1587
- --basecolors-shape-taxi-contrast: var(--dark-taxi);
1588
- --basecolors-shape-taxi-default: var(--dark-taxi);
1589
- --basecolors-shape-train-contrast: var(--dark-train);
1590
- --basecolors-shape-train-default: var(--dark-train);
1591
- --basecolors-shape-tram-contrast: var(--dark-tram);
1592
- --basecolors-shape-tram-default: var(--dark-tram);
1593
- --basecolors-shape-walk-contrast: var(--dark-walk);
1594
- --basecolors-shape-walk-default: var(--dark-walk);
1595
- --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
1596
- --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
1597
- --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
1598
- --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
1599
- --basecolors-stroke-contrast: var(--stroke-contrast);
1600
- --basecolors-stroke-default: var(--stroke-dark);
1601
- --basecolors-stroke-disabled: var(--stroke-neutral);
1602
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
1603
- --basecolors-stroke-focus-standard: var(--stroke-contrast);
1604
- --basecolors-stroke-highlight: var(--stroke-highlightalt);
1605
- --basecolors-stroke-light: var(--stroke-dark);
1606
- --basecolors-stroke-subdued: var(--stroke-darkalt);
1607
- --basecolors-stroke-subduedalt: var(--stroke-darkalt);
1608
- --basecolors-text-accent: var(--text-lightalt);
1609
- --basecolors-text-disabled: var(--text-neutralalt);
1610
- --basecolors-text-disabledalt: var(--text-neutralalt);
1611
- --basecolors-text-highlight: var(--stroke-highlightalt);
1612
- --basecolors-text-light: var(--text-lightalt);
1613
- --basecolors-text-subdued: var(--text-darkalt);
1614
- --basecolors-text-subduedalt: var(--text-darkalt);
1425
+ --basecolors-frame-contrast: #212233;
1426
+ --basecolors-frame-contrastalt: #141527;
1427
+ --basecolors-frame-default: #08091c;
1428
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1429
+ --basecolors-frame-elevatedalt: #464755;
1430
+ --basecolors-frame-subdued: #2d2e3e;
1431
+ --basecolors-frame-tint: #141527;
1432
+ --basecolors-shape-accent: #e5e5e9;
1433
+ --basecolors-shape-bicycle-contrast: #4db295;
1434
+ --basecolors-shape-bicycle-default: #4db295;
1435
+ --basecolors-shape-bus-contrast: #e87a9b;
1436
+ --basecolors-shape-bus-default: #e87a9b;
1437
+ --basecolors-shape-cableway-contrast: #b898e5;
1438
+ --basecolors-shape-cableway-default: #b898e5;
1439
+ --basecolors-shape-disabled: #b6b8ba;
1440
+ --basecolors-shape-disabledalt: #b3b4bd;
1441
+ --basecolors-shape-ferry-contrast: #8ccfe2;
1442
+ --basecolors-shape-ferry-default: #8ccfe2;
1443
+ --basecolors-shape-funicular-contrast: #b898e5;
1444
+ --basecolors-shape-funicular-default: #b898e5;
1445
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
1446
+ --basecolors-shape-helicopter-default: #f2b8e5;
1447
+ --basecolors-shape-highlight: #ff9494;
1448
+ --basecolors-shape-light: #e5e5e9;
1449
+ --basecolors-shape-mask: #2d2e3e;
1450
+ --basecolors-shape-maskalt: #393a49;
1451
+ --basecolors-shape-metro-contrast: #dd973c;
1452
+ --basecolors-shape-metro-default: #dd973c;
1453
+ --basecolors-shape-mobility-contrast: #4db295;
1454
+ --basecolors-shape-mobility-default: #4db295;
1455
+ --basecolors-shape-plane-contrast: #f2b8e5;
1456
+ --basecolors-shape-plane-default: #f2b8e5;
1457
+ --basecolors-shape-subdued: #b3b4bd;
1458
+ --basecolors-shape-subduedalt: #b3b4bd;
1459
+ --basecolors-shape-taxi-contrast: #ffe082;
1460
+ --basecolors-shape-taxi-default: #ffe082;
1461
+ --basecolors-shape-train-contrast: #60a2d7;
1462
+ --basecolors-shape-train-default: #60a2d7;
1463
+ --basecolors-shape-tram-contrast: #b898e5;
1464
+ --basecolors-shape-tram-default: #b898e5;
1465
+ --basecolors-shape-walk-contrast: #8d8e9c;
1466
+ --basecolors-shape-walk-default: #8d8e9c;
1467
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1468
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1469
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1470
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1471
+ --basecolors-stroke-contrast: #aeb7e2;
1472
+ --basecolors-stroke-default: #b3b4bd;
1473
+ --basecolors-stroke-disabled: #e3e6e8;
1474
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1475
+ --basecolors-stroke-focus-standard: #aeb7e2;
1476
+ --basecolors-stroke-highlight: #ff9494;
1477
+ --basecolors-stroke-light: #b3b4bd;
1478
+ --basecolors-stroke-subdued: #81828f;
1479
+ --basecolors-stroke-subduedalt: #81828f;
1480
+ --basecolors-text-accent: #e5e5e9;
1481
+ --basecolors-text-disabled: #b6b8ba;
1482
+ --basecolors-text-disabledalt: #b6b8ba;
1483
+ --basecolors-text-highlight: #ff9494;
1484
+ --basecolors-text-light: #e5e5e9;
1485
+ --basecolors-text-subdued: #b3b4bd;
1486
+ --basecolors-text-subduedalt: #b3b4bd;
1615
1487
  }
1616
1488
 
1617
1489
  /* DO NOT CHANGE!*/