@entur/form 8.3.0 → 8.3.2-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/form.cjs.js +1121 -0
  2. package/dist/form.cjs.js.map +1 -0
  3. package/dist/form.esm.js +1061 -940
  4. package/dist/form.esm.js.map +1 -1
  5. package/dist/index.d.ts +636 -19
  6. package/dist/styles.css +1561 -1628
  7. package/package.json +34 -16
  8. package/dist/BaseFormControl.d.ts +0 -113
  9. package/dist/Checkbox.d.ts +0 -58
  10. package/dist/FeedbackText.d.ts +0 -20
  11. package/dist/Fieldset.d.ts +0 -12
  12. package/dist/InputGroupContext.d.ts +0 -10
  13. package/dist/InputGroupLabel.d.ts +0 -10
  14. package/dist/Radio.d.ts +0 -30
  15. package/dist/RadioGroup.d.ts +0 -17
  16. package/dist/RadioGroupContext.d.ts +0 -10
  17. package/dist/Switch.d.ts +0 -66
  18. package/dist/TextArea.d.ts +0 -57
  19. package/dist/TextField.d.ts +0 -91
  20. package/dist/VariantProvider.d.ts +0 -12
  21. package/dist/form.cjs.development.js +0 -1026
  22. package/dist/form.cjs.development.js.map +0 -1
  23. package/dist/form.cjs.production.min.js +0 -2
  24. package/dist/form.cjs.production.min.js.map +0 -1
  25. package/dist/index.js +0 -8
  26. package/dist/inputPanel/CheckboxPanel.d.ts +0 -30
  27. package/dist/inputPanel/InputPanelBase.d.ts +0 -33
  28. package/dist/inputPanel/RadioPanel.d.ts +0 -28
  29. package/dist/inputPanel/index.d.ts +0 -2
  30. package/dist/segmented-control/MultipleSegmentedControl.d.ts +0 -20
  31. package/dist/segmented-control/SegmentedChoice.d.ts +0 -13
  32. package/dist/segmented-control/SegmentedContext.d.ts +0 -33
  33. package/dist/segmented-control/SegmentedControl.d.ts +0 -21
  34. package/dist/utils.d.ts +0 -2
  35. package/dist/variants.d.ts +0 -7
package/dist/styles.css CHANGED
@@ -1,1612 +1,1499 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-form-control__field-and-feedback-text {
4
- display: flex;
5
- flex-direction: column;
6
- height: -moz-fit-content;
7
- height: fit-content;
8
- width: 100%;
9
- }
10
- .eds-form-control__field-and-feedback-text--has-tooltip {
11
- padding-right: 2rem;
12
- }
13
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
14
- cursor: not-allowed;
15
- }
16
- .eds-form-control-wrapper {
17
- display: flex;
18
- align-items: center;
19
- position: relative;
20
- flex: 1;
21
- min-height: 3rem;
22
- padding-left: 1rem;
23
- padding-right: 1rem;
24
- background-color: var(--components-form-baseform-standard-fill-default);
25
- border-radius: 0.25rem;
26
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
27
- box-shadow: 0 0 0 transparent;
28
- color: var(--components-form-baseform-standard-text-content);
29
- transition: border-color 0.1s ease-in-out;
30
- }
31
- .eds-form-control-wrapper:hover {
32
- border-color: var(--components-form-baseform-standard-border-interactive);
33
- }
34
- .eds-contrast .eds-form-control-wrapper:hover {
35
- border-color: var(--components-form-baseform-contrast-border-interactive);
36
- }
37
- .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
38
- border-color: var(--components-form-baseform-standard-border-interactive);
39
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
40
- }
41
- .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
42
- border-color: var(--components-form-baseform-contrast-border-interactive);
43
- outline-color: var(--components-form-baseform-contrast-border-interactive);
44
- }
45
- .eds-form-control-wrapper ::-moz-placeholder {
46
- color: var(--components-form-baseform-standard-text-label);
47
- }
48
- .eds-form-control-wrapper ::placeholder {
49
- color: var(--components-form-baseform-standard-text-label);
50
- }
51
- .eds-form-control-wrapper--disabled {
52
- border-color: transparent;
53
- background-color: var(--components-form-baseform-standard-fill-disabled);
54
- pointer-events: none;
55
- color: var(--components-form-baseform-standard-text-disabled);
56
- }
57
- .eds-form-control-wrapper--disabled .eds-input-group__label {
58
- color: var(--components-form-baseform-standard-text-disabled);
59
- }
60
- .eds-contrast .eds-form-control-wrapper--disabled {
61
- border-color: transparent;
62
- background-color: var(--components-form-baseform-contrast-fill-disabled);
63
- color: var(--components-form-baseform-contrast-text-disabled);
64
- }
65
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
66
- color: var(--components-form-baseform-contrast-text-disabled);
67
- }
68
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
69
- display: none;
70
- }
71
- .eds-form-control-wrapper--disabled:focus-within {
72
- border-color: transparent;
73
- outline: none;
74
- }
75
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
76
- border-color: transparent;
77
- outline: none;
78
- }
79
- .eds-form-control-wrapper--readonly {
80
- border-color: transparent;
81
- cursor: default;
82
- background: var(--components-form-baseform-standard-fill-readonly);
83
- border: var(--components-form-baseform-standard-fill-readonly);
84
- }
85
- .eds-form-control-wrapper--readonly:focus-visible {
86
- outline: none;
87
- }
88
- .eds-contrast .eds-form-control-wrapper--readonly {
89
- background: var(--components-form-baseform-contrast-fill-readonly);
90
- border: var(--components-form-baseform-contrast-fill-readonly);
91
- color: var(--components-form-baseform-contrast-text-description);
92
- }
93
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
94
- color: var(--components-form-baseform-contrast-text-description);
95
- }
96
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
97
- color: var(--components-form-baseform-contrast-text-description);
98
- }
99
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
100
- display: none;
101
- }
102
- .eds-form-control-wrapper--size-medium .eds-form-control,
103
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
104
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
105
- font-size: 1rem;
106
- line-height: 1rem;
107
- }
108
- .eds-form-control-wrapper--size-large {
109
- min-height: 4rem;
110
- }
111
- .eds-form-control-wrapper--size-large .eds-form-control,
112
- .eds-form-control-wrapper--size-large .eds-form-control__append,
113
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
114
- font-size: 1.5rem;
115
- }
116
- .eds-form-control-wrapper--success {
117
- border-color: var(--components-form-baseform-standard-border-success);
118
- }
119
- .eds-form-control-wrapper--success:focus-within {
120
- border-color: var(--components-form-baseform-standard-border-success);
121
- outline-color: var(--components-form-baseform-standard-border-success);
122
- }
123
- .eds-contrast .eds-form-control-wrapper--success {
124
- border-color: var(--components-form-baseform-standard-border-success);
125
- }
126
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
127
- border-color: var(--components-form-baseform-contrast-border-success);
128
- outline-color: var(--components-form-baseform-contrast-border-success);
129
- }
130
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
131
- border-color: var(--components-form-baseform-standard-border-negative);
132
- }
133
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
134
- border-color: var(--components-form-baseform-standard-border-negative);
135
- outline-color: var(--components-form-baseform-standard-border-negative);
136
- }
137
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
138
- border-color: var(--components-form-baseform-contrast-border-negative);
139
- }
140
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
141
- border-color: var(--components-form-baseform-contrast-border-negative);
142
- outline-color: var(--components-form-baseform-contrast-border-negative);
143
- }
144
- .eds-contrast .eds-form-control .eds-tooltip {
145
- background: var(--components-tooltip-tooltip-standard-fill);
146
- color: var(--components-tooltip-tooltip-standard-text);
147
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
148
- }
149
- .eds-form-control .eds-tooltip::after {
150
- background: var(--components-tooltip-tooltip-standard-fill);
151
- }
152
-
153
- .eds-form-control {
154
- display: block;
155
- -webkit-appearance: none;
156
- -moz-appearance: none;
157
- appearance: none;
158
- width: 100%;
159
- height: 100%;
160
- padding: 20px 0rem 0.25rem;
161
- font-family: inherit;
162
- font-size: 1rem;
163
- line-height: 1rem;
164
- border: 0;
165
- color: var(--components-form-baseform-standard-text-content);
166
- background-color: transparent;
167
- }
168
- .eds-form-control::-moz-placeholder {
169
- opacity: 0;
170
- -moz-transition: opacity 0.2s ease-in-out;
171
- transition: opacity 0.2s ease-in-out;
172
- }
173
- .eds-form-control::placeholder {
174
- opacity: 0;
175
- transition: opacity 0.2s ease-in-out;
176
- }
177
- .eds-form-control:focus {
178
- outline: none;
179
- }
180
- .eds-form-control:focus::-moz-placeholder {
181
- opacity: 1;
182
- }
183
- .eds-form-control:focus::placeholder {
184
- opacity: 1;
185
- }
186
- .eds-form-control__prepend, .eds-form-control__append {
187
- position: relative;
188
- line-height: inherit;
189
- }
190
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
191
- all: unset;
192
- position: absolute;
193
- display: flex;
194
- align-items: center;
195
- justify-content: center;
196
- height: 1.5rem;
197
- width: 1.5rem;
198
- right: -2rem;
199
- border-radius: 100%;
200
- color: var(--primary-text-color);
201
- cursor: pointer;
202
- }
203
- .eds-form-control__prepend {
204
- margin-right: 0.75rem;
205
- margin-left: 0;
206
- }
207
- .eds-form-control__append {
208
- margin-right: 0;
209
- margin-left: 0.75rem;
210
- }
211
- /* DO NOT CHANGE!*/
212
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
- .eds-checkbox__container {
214
- display: flex;
215
- align-items: center;
216
- position: relative;
217
- -webkit-appearance: none;
218
- -moz-appearance: none;
219
- appearance: none;
220
- cursor: pointer;
221
- -webkit-user-select: none;
222
- -moz-user-select: none;
223
- user-select: none;
224
- width: -moz-fit-content;
225
- width: fit-content;
226
- margin: 0.5rem 0;
227
- }
228
- .eds-checkbox__container--reduced-click-area {
229
- height: -moz-fit-content;
230
- height: fit-content;
231
- }
232
- .eds-checkbox__container input {
233
- position: absolute;
234
- opacity: 0;
235
- height: 0;
236
- width: 0;
237
- }
238
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
239
- background-color: var(--components-form-checkbox-standard-fill-selected);
240
- }
241
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
242
- visibility: visible;
243
- }
244
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
245
- stroke: var(--components-form-checkbox-standard-icon);
246
- animation: stroke ease-in-out 0.2s 0.1s forwards;
247
- }
248
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
249
- fill: var(--components-form-checkbox-standard-icon);
250
- }
251
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
252
- color: var(--components-form-checkbox-contrast-fill-selected);
253
- }
254
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
255
- stroke: var(--components-form-checkbox-contrast-icon);
256
- }
257
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
258
- fill: var(--components-form-checkbox-contrast-icon);
259
- }
260
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
261
- background-color: var(--components-form-checkbox-standard-icon-disabled);
262
- }
263
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
264
- background-color: var(--components-form-checkbox-standard-icon-disabled);
265
- }
266
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
267
- background-color: var(--components-form-checkbox-standard-icon-disabled);
268
- }
269
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
270
- background-color: var(--components-form-checkbox-standard-icon-disabled);
271
- }
272
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
273
- background-color: var(--components-form-checkbox-standard-icon-disabled);
274
- }
275
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
276
- background-color: var(--components-form-checkbox-standard-fill-disabled);
277
- }
278
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
279
- stroke: var(--components-form-checkbox-standard-icon-readonly);
280
- }
281
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
282
- fill: var(--components-form-checkbox-standard-icon-readonly);
283
- }
284
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
285
- stroke: var(--components-form-checkbox-contrast-icon-readonly);
286
- }
287
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
288
- fill: var(--components-form-checkbox-contrast-icon-readonly);
289
- }
290
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
291
- border-color: var(--components-form-checkbox-standard-border);
292
- background-color: var(--components-form-checkbox-standard-fill-hover);
293
- }
294
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
295
- border-color: var(--components-form-checkbox-contrast-border);
296
- background-color: var(--components-form-checkbox-contrast-fill-hover);
297
- }
298
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
299
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
300
- border-color: transparent;
301
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
302
- }
303
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
304
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
305
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
306
- }
307
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
308
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
309
- background-color: var(--components-form-checkbox-standard-fill-selected);
310
- }
311
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
312
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
313
- background-color: var(--components-form-checkbox-contrast-fill-selected);
314
- }
315
- .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
316
- outline: 2px solid #181c56;
317
- outline-color: var(--basecolors-stroke-focus-standard);
318
- outline-offset: 0.125rem;
319
- }
320
- .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
321
- outline-color: var(--basecolors-stroke-focus-contrast);
322
- }
323
- .eds-checkbox--disabled {
324
- cursor: not-allowed;
325
- }
326
- .eds-checkbox--disabled input {
327
- pointer-events: none;
328
- }
329
- .eds-checkbox--disabled .eds-checkbox__label {
330
- opacity: 0.5;
331
- }
332
- .eds-checkbox--disabled .eds-checkbox__icon {
333
- border-color: var(--components-form-checkbox-standard-icon-disabled);
334
- }
335
- .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
336
- border-color: var(--components-form-checkbox-contrast-icon-disabled);
337
- }
338
- .eds-checkbox--readonly {
339
- cursor: default;
340
- pointer-events: auto;
341
- -webkit-user-select: text;
342
- -moz-user-select: text;
343
- user-select: text;
344
- }
345
- .eds-checkbox--readonly input {
346
- pointer-events: auto;
347
- -webkit-user-select: text;
348
- -moz-user-select: text;
349
- user-select: text;
350
- }
351
- .eds-checkbox--readonly .eds-checkbox__icon {
352
- border-color: var(--components-form-checkbox-standard-border-readonly);
353
- }
354
- .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
355
- border-color: var(--components-form-checkbox-contrast-border-readonly);
356
- }
357
- .eds-checkbox__icon {
358
- box-sizing: border-box;
359
- display: inline-flex;
360
- justify-content: center;
361
- align-items: center;
362
- position: relative;
363
- margin-right: 1rem;
364
- height: 1.25rem;
365
- width: 1.25rem;
366
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
367
- border-radius: 0.125rem;
368
- background-color: transparent;
369
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
370
- }
371
- .eds-checkbox__icon--reduced-click-area {
372
- margin-right: 0;
373
- }
374
- .eds-contrast .eds-checkbox__icon {
375
- border-color: var(--components-form-checkbox-contrast-border);
376
- }
377
- .eds-checkbox__icon .eds-checkbox-icon {
378
- height: 1rem;
379
- width: 1rem;
380
- visibility: hidden;
381
- }
382
- .eds-checkbox__icon .eds-checkbox-icon path {
383
- transform-origin: 50% 50%;
384
- stroke-dasharray: 48;
385
- stroke-dashoffset: 48;
386
- stroke-width: 0.375rem;
387
- }
388
- .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
389
- animation: none !important;
390
- transition: none !important;
391
- stroke-dasharray: 48;
392
- stroke-dashoffset: 0;
393
- }
394
- .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
395
- transition: none !important;
396
- }
397
-
398
- @keyframes stroke {
399
- 100% {
400
- stroke-dashoffset: 0;
401
- }
402
- }
403
- /* DO NOT CHANGE!*/
404
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
405
- .eds-feedback-text {
406
- display: flex;
407
- align-items: center;
408
- margin-top: 0.25rem;
409
- }
410
- .eds-feedback-text--info, .eds-feedback-text--information {
411
- padding-left: calc(1rem + 0.125rem);
412
- }
413
- .eds-feedback-text__text {
414
- color: var(--components-form-feedbacktext-information-standard-text);
415
- }
416
- .eds-contrast .eds-feedback-text__text {
417
- color: var(--components-form-feedbacktext-information-contrast-text);
418
- }
419
-
420
- .eds-feedback-text__icon {
421
- font-size: 1.5rem;
422
- min-height: 1.5rem;
423
- min-width: 1.5rem;
424
- padding-right: 0.5rem;
425
- position: relative;
426
- top: -0.1rem;
427
- }
428
- .eds-feedback-text__icon--success {
429
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
430
- }
431
- .eds-feedback-text__icon--success circle {
432
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
433
- }
434
- .eds-contrast .eds-feedback-text__icon--success {
435
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
436
- }
437
- .eds-contrast .eds-feedback-text__icon--success circle {
438
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
439
- }
440
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
441
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
442
- }
443
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
444
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
445
- }
446
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
447
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
448
- }
449
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
450
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
451
- }
452
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
453
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
454
- }
455
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
456
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
457
- }
458
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
459
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
460
- }
461
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
462
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
463
- }
464
- .eds-feedback-text__icon--warning {
465
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
466
- }
467
- .eds-feedback-text__icon--warning .svg-exclamation {
468
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
469
- }
470
- .eds-contrast .eds-feedback-text__icon--warning {
471
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
472
- }
473
- .eds-contrast .eds-feedback-text__icon--warning circle {
474
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
475
- }
476
- .eds-fieldset {
477
- margin: 0;
478
- padding: 0;
479
- border: 0;
480
- }
481
- /* DO NOT CHANGE!*/
482
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-input-group {
484
- color: inherit;
485
- display: block;
486
- position: relative;
487
- }
488
- .eds-input-group__label {
489
- color: var(--components-form-baseform-standard-text-label);
490
- display: flex;
491
- font-size: 1rem;
492
- position: absolute;
493
- line-height: 1rem;
494
- height: 3rem;
495
- padding-left: 0;
496
- top: 1rem;
497
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
498
- -webkit-user-select: none;
499
- -moz-user-select: none;
500
- user-select: none;
501
- pointer-events: none;
502
- }
503
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
504
- top: 0.375rem;
505
- font-size: 0.75rem;
506
- line-height: 0.75rem;
507
- height: 10px;
508
- padding: 0;
509
- }
510
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
511
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
512
- background: var(--textarea-label-background);
513
- width: calc(100% - 1rem - 1rem - 4px);
514
- }
515
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
516
- top: 0.5rem;
517
- font-size: 0.875rem;
518
- line-height: 1rem;
519
- padding: 0;
520
- }
521
- .eds-form-control-wrapper--size-large .eds-input-group__label {
522
- top: 0.75rem;
523
- font-size: 1.5rem;
524
- line-height: 2.25rem;
525
- }
526
- .eds-input-group__label--filled {
527
- top: 0.375rem;
528
- font-size: 0.75rem;
529
- line-height: 0.75rem;
530
- height: 10px;
531
- padding: 0;
532
- }
533
- .eds-textarea__label .eds-input-group__label--filled {
534
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
535
- background: var(--textarea-label-background);
536
- width: calc(100% - 1rem - 1rem - 4px);
537
- }
538
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
539
- top: 0.5rem;
540
- font-size: 0.875rem;
541
- line-height: 1rem;
542
- padding: 0;
543
- }
544
-
545
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
546
- top: 0.375rem;
547
- font-size: 0.75rem;
548
- line-height: 0.75rem;
549
- height: 10px;
550
- padding: 0;
551
- }
552
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
553
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
554
- background: var(--textarea-label-background);
555
- width: calc(100% - 1rem - 1rem - 4px);
556
- }
557
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
558
- top: 0.5rem;
559
- font-size: 0.875rem;
560
- line-height: 1rem;
561
- padding: 0;
562
- }
563
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
564
- top: 1rem;
565
- font-size: 1rem;
566
- height: 3rem;
567
- line-height: 1rem;
568
- }
569
- /* DO NOT CHANGE!*/
570
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
571
- .eds-form-component--radio__container {
572
- display: flex;
573
- justify-content: center;
574
- align-items: center;
575
- position: relative;
576
- cursor: pointer;
577
- height: 2rem;
578
- width: -moz-fit-content;
579
- width: fit-content;
580
- -webkit-user-select: none;
581
- -moz-user-select: none;
582
- user-select: none;
583
- }
584
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
585
- background-color: var(--components-form-radio-standard-fill-hover);
586
- }
587
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
588
- background-color: var(--components-form-radio-contrast-fill-hover);
589
- }
590
- .eds-form-component--radio__container input {
591
- position: absolute;
592
- opacity: 0;
593
- cursor: pointer;
594
- height: 0;
595
- width: 0;
596
- }
597
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
598
- height: 0.625rem;
599
- width: 0.625rem;
600
- }
601
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
602
- outline: 2px solid #181c56;
603
- outline-color: var(--basecolors-stroke-focus-standard);
604
- outline-offset: 0.125rem;
605
- }
606
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
607
- outline-color: var(--basecolors-stroke-focus-contrast);
608
- }
609
- .eds-form-component--radio__container:has(input:disabled) {
610
- cursor: not-allowed;
611
- }
612
- .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
613
- cursor: default;
614
- -webkit-user-select: text;
615
- -moz-user-select: text;
616
- user-select: text;
617
- }
618
- .eds-form-component--radio__container .eds-form-component--radio__radio {
619
- position: relative;
620
- height: 1.25rem;
621
- width: 1.25rem;
622
- margin-right: 1rem;
623
- background-color: var(--components-form-radio-standard-fill-default);
624
- border: 0.125rem solid var(--components-form-radio-standard-border);
625
- border-radius: 50%;
626
- display: flex;
627
- align-items: center;
628
- justify-content: center;
629
- }
630
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
631
- background-color: var(--components-form-radio-contrast-fill-default);
632
- border-color: var(--components-form-radio-contrast-border);
633
- }
634
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
635
- background: var(--components-form-radio-contrast-fill-disabled);
636
- border-color: var(--components-form-radio-contrast-text-disabled);
637
- }
638
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
639
- border-color: var(--components-form-radio-contrast-text-disabled);
640
- }
641
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
642
- background: var(--components-form-radio-contrast-fill-disabled);
643
- border-color: var(--components-form-radio-contrast-text-disabled);
644
- }
645
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
646
- color: var(--components-form-radio-contrast-text-disabled);
647
- }
648
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
649
- background-color: var(--components-form-radio-standard-icon-disabled);
650
- border-color: var(--components-form-radio-contrast-text-disabled);
651
- }
652
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
653
- background-color: var(--components-form-radio-standard-icon-disabled);
654
- }
655
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
656
- background-color: var(--components-form-radio-contrast-icon-disabled);
657
- }
658
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
659
- background: var(--components-form-radio-standard-fill-disabled);
660
- border-color: var(--components-form-radio-standard-border-readonly);
661
- }
662
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
663
- background: var(--components-form-radio-contrast-fill-disabled);
664
- border-color: var(--components-form-radio-contrast-border-readonly);
665
- }
666
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
667
- background-color: var(--components-form-radio-standard-icon);
668
- border-color: var(--components-form-radio-standard-border-readonly);
669
- }
670
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
671
- display: block;
672
- width: 0;
673
- height: 0;
674
- border-radius: 50%;
675
- background-color: var(--components-form-radio-standard-fill-selected);
676
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
677
- }
678
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
679
- background-color: var(--components-form-radio-contrast-icon);
680
- }
681
- /* DO NOT CHANGE!*/
682
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
683
- .eds-switch {
684
- cursor: pointer;
685
- -webkit-user-select: none;
686
- -moz-user-select: none;
687
- user-select: none;
688
- padding: 0.5rem 0;
689
- width: -moz-fit-content;
690
- width: fit-content;
691
- }
692
- .eds-switch input {
693
- opacity: 0;
694
- pointer-events: none;
695
- position: absolute;
696
- }
697
- .eds-switch--right {
698
- display: flex;
699
- flex-direction: row;
700
- align-items: center;
701
- }
702
- .eds-switch--bottom {
703
- display: flex;
704
- flex-direction: column;
705
- align-items: center;
706
- }
707
- .eds-switch__circle {
708
- border-radius: 50%;
709
- height: 1.25rem;
710
- width: 1.25rem;
711
- content: "";
712
- display: flex;
713
- align-items: center;
714
- justify-content: center;
715
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
716
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
717
- background-color: var(--components-form-switch-standard-switch);
718
- top: 0.125rem;
719
- left: 0.125rem;
720
- position: relative;
721
- }
722
- .eds-switch__switch--large .eds-switch__circle {
723
- height: 1.75rem;
724
- width: 1.75rem;
725
- }
726
- .eds-contrast .eds-switch__circle {
727
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
728
- }
729
- .eds-switch__switch {
730
- position: relative;
731
- background-color: var(--components-form-switch-standard-fill-false);
732
- content: "";
733
- display: block;
734
- transition: background-color 0.1s ease-in-out;
735
- height: 1.5rem;
736
- width: 3rem;
737
- border-radius: 1.5rem;
738
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
739
- }
740
- .eds-contrast .eds-switch__switch {
741
- background-color: var(--components-form-switch-contrast-fill-false);
742
- }
743
- .eds-switch--right .eds-switch__switch {
744
- margin-right: 0.75rem;
745
- }
746
- .eds-switch__switch svg g,
747
- .eds-switch__switch path {
748
- fill: var(--components-form-switch-standard-icon-false);
749
- transition: fill ease-in-out 0.1s;
750
- }
751
- .eds-contrast .eds-switch__switch svg g,
752
- .eds-contrast .eds-switch__switch path {
753
- fill: var(--components-form-switch-contrast-icon-false);
754
- }
755
- :checked + .eds-switch__switch {
756
- background-color: var(--eds-switch-color);
757
- }
758
- :checked + .eds-switch__switch .eds-switch__circle {
759
- left: 1.625rem;
760
- }
761
- :checked + .eds-switch__switch .eds-switch__circle svg g,
762
- :checked + .eds-switch__switch .eds-switch__circle path {
763
- fill: var(--eds-switch-color);
764
- }
765
- .eds-contrast :checked + .eds-switch__switch {
766
- background-color: var(--eds-switch-contrast-color);
767
- }
768
- :focus-visible + .eds-switch__switch {
769
- outline: 2px solid #181c56;
770
- outline-color: var(--basecolors-stroke-focus-standard);
771
- outline-offset: 0.125rem;
772
- }
773
- .eds-contrast :focus-visible + .eds-switch__switch {
774
- outline-color: var(--basecolors-stroke-focus-contrast);
775
- }
776
- .eds-switch__switch--large {
777
- width: 3.75rem;
778
- height: 2rem;
779
- border-radius: 3.75rem;
780
- }
781
- :checked + .eds-switch__switch--large .eds-switch__circle {
782
- left: 1.875rem;
783
- }
784
- .eds-switch__switch--large svg {
785
- position: relative;
786
- right: 0.05rem;
787
- }
788
- .eds-switch__label--large--right {
789
- font-size: 1rem;
790
- }
791
- .eds-switch__label--large--bottom {
792
- font-size: 0.875rem;
793
- }
794
- .eds-switch__label--medium--right {
795
- font-size: 0.875rem;
796
- }
797
- .eds-switch__label--medium--bottom {
798
- font-size: 0.75rem;
799
- }
800
- /* DO NOT CHANGE!*/
801
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
- /* DO NOT CHANGE!*/
803
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
804
- /* DO NOT CHANGE!*/
805
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
806
3
  /* DO NOT CHANGE!*/
807
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
808
5
  /* DO NOT CHANGE!*/
809
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
810
7
  [data-color-mode=light],
811
8
  :root {
812
- --basecolors-frame-contrast: #181c56;
813
- --basecolors-frame-contrastalt: #393d79;
814
- --basecolors-frame-contrastalt-2: #292b6a;
815
- --basecolors-frame-default: #ffffff;
816
- --basecolors-frame-elevated: #ffffff;
817
- --basecolors-frame-elevatedalt: #f6f6f9;
818
- --basecolors-frame-subdued: #d9dae8;
819
- --basecolors-frame-tint: #f6f6f9;
820
- --basecolors-shape-accent: #181c56;
821
- --basecolors-shape-bicycle-contrast: #00db9b;
822
- --basecolors-shape-bicycle-default: #388f76;
823
- --basecolors-shape-bus-contrast: #ff6392;
824
- --basecolors-shape-bus-default: #c5044e;
825
- --basecolors-shape-cableway-contrast: #b482fb;
826
- --basecolors-shape-cableway-default: #78469a;
827
- --basecolors-shape-disabled: #6e6f73;
828
- --basecolors-shape-disabledalt: #b6b8ba;
829
- --basecolors-shape-ferry-contrast: #6fdfff;
830
- --basecolors-shape-ferry-default: #0c6693;
831
- --basecolors-shape-funicular-contrast: #b482fb;
832
- --basecolors-shape-funicular-default: #78469a;
833
- --basecolors-shape-helicopter-contrast: #fbafea;
834
- --basecolors-shape-helicopter-default: #800664;
835
- --basecolors-shape-highlight: #ff5959;
836
- --basecolors-shape-light: #ffffff;
837
- --basecolors-shape-mask: #ffffff;
838
- --basecolors-shape-maskalt: #ffffff;
839
- --basecolors-shape-metro-contrast: #f08901;
840
- --basecolors-shape-metro-default: #bf5826;
841
- --basecolors-shape-mobility-contrast: #00db9b;
842
- --basecolors-shape-mobility-default: #388f76;
843
- --basecolors-shape-plane-contrast: #fbafea;
844
- --basecolors-shape-plane-default: #800664;
845
- --basecolors-shape-subdued: #626493;
846
- --basecolors-shape-subduedalt: #d9dae8;
847
- --basecolors-shape-taxi-contrast: #ffe082;
848
- --basecolors-shape-taxi-default: #3d3e40;
849
- --basecolors-shape-train-contrast: #42a5f5;
850
- --basecolors-shape-train-default: #00367f;
851
- --basecolors-shape-tram-contrast: #b482fb;
852
- --basecolors-shape-tram-default: #78469a;
853
- --basecolors-shape-walk-contrast: #8284ab;
854
- --basecolors-shape-walk-default: #8d8e9c;
855
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
856
- --basecolors-shape-airportlinkbus-default: #800664;
857
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
858
- --basecolors-shape-airportlinkrail-default: #800664;
859
- --basecolors-stroke-contrast: #aeb7e2;
860
- --basecolors-stroke-default: #181c56;
861
- --basecolors-stroke-disabled: #949699;
862
- --basecolors-stroke-focus-contrast: #aeb7e2;
863
- --basecolors-stroke-focus-standard: #181c56;
864
- --basecolors-stroke-highlight: #ff5959;
865
- --basecolors-stroke-light: #ffffff;
866
- --basecolors-stroke-subdued: #8284ab;
867
- --basecolors-stroke-subduedalt: #e3e6e8;
868
- --basecolors-text-accent: #181c56;
869
- --basecolors-text-disabled: #6e6f73;
870
- --basecolors-text-disabledalt: #b6b8ba;
871
- --basecolors-text-highlight: #ff5959;
872
- --basecolors-text-light: #ffffff;
873
- --basecolors-text-subdued: #626493;
874
- --basecolors-text-subduedalt: #d9dae8;
9
+ --components-form-baseform-contrast-border-default: #8284ab;
10
+ --components-form-baseform-contrast-border-interactive: #aeb7e2;
11
+ --components-form-baseform-contrast-border-negative: #ff9494;
12
+ --components-form-baseform-contrast-border-success: #5ac39a;
13
+ --components-form-baseform-contrast-fill-default: #ffffff;
14
+ --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
15
+ --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
16
+ --components-form-baseform-contrast-icon: #181c56;
17
+ --components-form-baseform-contrast-icon-disabled: #6e6f73;
18
+ --components-form-baseform-contrast-text-content: #181c56;
19
+ --components-form-baseform-contrast-text-description: #ffffff;
20
+ --components-form-baseform-contrast-text-label: #626493;
21
+ --components-form-baseform-contrast-text-disabled: #6e6f73;
22
+ --components-form-baseform-standard-border-default: #8284ab;
23
+ --components-form-baseform-standard-border-interactive: #181c56;
24
+ --components-form-baseform-standard-border-negative: #d31b1b;
25
+ --components-form-baseform-standard-border-success: #1a8e60;
26
+ --components-form-baseform-standard-fill-default: #ffffff;
27
+ --components-form-baseform-standard-fill-disabled: #cfd2d4;
28
+ --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
29
+ --components-form-baseform-standard-icon: #181c56;
30
+ --components-form-baseform-standard-icon-disabled: #6e6f73;
31
+ --components-form-baseform-standard-text-content: #181c56;
32
+ --components-form-baseform-standard-text-description: #181c56;
33
+ --components-form-baseform-standard-text-label: #626493;
34
+ --components-form-baseform-standard-text-disabled: #6e6f73;
35
+ --components-form-basemenu-border: #8284ab;
36
+ --components-form-basemenu-fill-default: #f2f5f7;
37
+ --components-form-basemenu-fill-hover: #d9ddf2;
38
+ --components-form-basemenu-fill-selected: #aeb7e2;
39
+ --components-form-basemenu-icon: #181c56;
40
+ --components-form-basemenu-icon-disabled: #6e6f73;
41
+ --components-form-basemenu-text: #181c56;
42
+ --components-form-basemenu-text-disabled: #6e6f73;
43
+ --components-form-basepanel-contrast-border-default: #8284ab;
44
+ --components-form-basepanel-contrast-border-disabled: #949699;
45
+ --components-form-basepanel-contrast-border-selected: #aeb7e2;
46
+ --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
47
+ --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
48
+ --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
49
+ --components-form-basepanel-contrast-fill-hover: #54568c;
50
+ --components-form-basepanel-contrast-fill-selected: #393d79;
51
+ --components-form-basepanel-contrast-text-accent: #ffffff;
52
+ --components-form-basepanel-contrast-text-disabled: #b6b8ba;
53
+ --components-form-basepanel-contrast-text-rebate: #5ac39a;
54
+ --components-form-basepanel-contrast-text-subdued: #d9dae8;
55
+ --components-form-basepanel-standard-border-default: #8284ab;
56
+ --components-form-basepanel-standard-border-disabled: #949699;
57
+ --components-form-basepanel-standard-border-selected: #181c56;
58
+ --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
59
+ --components-form-basepanel-standard-fill-disabled: #cfd2d4;
60
+ --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
61
+ --components-form-basepanel-standard-fill-hover: #eaeaf1;
62
+ --components-form-basepanel-standard-fill-selected: #f6f6f9;
63
+ --components-form-basepanel-standard-text-accent: #181c56;
64
+ --components-form-basepanel-standard-text-disabled: #6e6f73;
65
+ --components-form-basepanel-standard-text-rebate: #1a8e60;
66
+ --components-form-basepanel-standard-text-subdued: #626493;
67
+ --components-form-checkbox-contrast-border: #aeb7e2;
68
+ --components-form-checkbox-contrast-border-disabled: #6e6f73;
69
+ --components-form-checkbox-contrast-border-negative: #ff9494;
70
+ --components-form-checkbox-contrast-border-readonly: #6e6f73;
71
+ --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
72
+ --components-form-checkbox-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
73
+ --components-form-checkbox-contrast-fill-hover: #626493;
74
+ --components-form-checkbox-contrast-fill-selected: #aeb7e2;
75
+ --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
76
+ --components-form-checkbox-contrast-icon: #181c56;
77
+ --components-form-checkbox-contrast-icon-disabled: #949699;
78
+ --components-form-checkbox-contrast-icon-readonly: #ffffff;
79
+ --components-form-checkbox-contrast-text: #ffffff;
80
+ --components-form-checkbox-contrast-text-disabled: #949699;
81
+ --components-form-checkbox-standard-border: #181c56;
82
+ --components-form-checkbox-standard-border-disabled: #e3e6e8;
83
+ --components-form-checkbox-standard-border-negative: #d31b1b;
84
+ --components-form-checkbox-standard-border-readonly: #e3e6e8;
85
+ --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
86
+ --components-form-checkbox-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
87
+ --components-form-checkbox-standard-fill-hover: #d9ddf2;
88
+ --components-form-checkbox-standard-fill-selected: #181c56;
89
+ --components-form-checkbox-standard-fill-selectedhover: #393d79;
90
+ --components-form-checkbox-standard-icon: #ffffff;
91
+ --components-form-checkbox-standard-icon-disabled: #b6b8ba;
92
+ --components-form-checkbox-standard-icon-readonly: #181c56;
93
+ --components-form-checkbox-standard-text: #181c56;
94
+ --components-form-checkbox-standard-text-disabled: #b6b8ba;
95
+ --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
96
+ --components-form-feedbacktext-information-contrast-icon-symbol: #181c56;
97
+ --components-form-feedbacktext-information-contrast-stroke: #181c56;
98
+ --components-form-feedbacktext-information-contrast-text: #ffffff;
99
+ --components-form-feedbacktext-information-standard-icon-fill: #067eb2;
100
+ --components-form-feedbacktext-information-standard-icon-symbol: #ffffff;
101
+ --components-form-feedbacktext-information-standard-stroke: #ffffff;
102
+ --components-form-feedbacktext-information-standard-text: #181c56;
103
+ --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
104
+ --components-form-feedbacktext-negative-contrast-icon-symbol: #181c56;
105
+ --components-form-feedbacktext-negative-contrast-stroke: #181c56;
106
+ --components-form-feedbacktext-negative-contrast-text: #ffffff;
107
+ --components-form-feedbacktext-negative-standard-icon-fill: #d31b1b;
108
+ --components-form-feedbacktext-negative-standard-stroke: #ffffff;
109
+ --components-form-feedbacktext-negative-standard-symbol: #ffffff;
110
+ --components-form-feedbacktext-negative-standard-text: #181c56;
111
+ --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
112
+ --components-form-feedbacktext-success-contrast-icon-stroke: #181c56;
113
+ --components-form-feedbacktext-success-contrast-icon-symbol: #181c56;
114
+ --components-form-feedbacktext-success-contrast-text: #ffffff;
115
+ --components-form-feedbacktext-success-standard-icon-fill: #1a8e60;
116
+ --components-form-feedbacktext-success-standard-icon-stroke: #ffffff;
117
+ --components-form-feedbacktext-success-standard-icon-symbol: #ffffff;
118
+ --components-form-feedbacktext-success-standard-text: #181c56;
119
+ --components-form-feedbacktext-warning-contrast-icon: #ffe082;
120
+ --components-form-feedbacktext-warning-contrast-icon-symbol: #181c56;
121
+ --components-form-feedbacktext-warning-contrast-stroke: #181c56;
122
+ --components-form-feedbacktext-warning-contrast-text: #ffffff;
123
+ --components-form-feedbacktext-warning-standard-icon-fill: #ffca28;
124
+ --components-form-feedbacktext-warning-standard-icon-symbol: #181c56;
125
+ --components-form-feedbacktext-warning-standard-stroke: #ffffff;
126
+ --components-form-feedbacktext-warning-standard-text: #181c56;
127
+ --components-form-radio-contrast-border: #aeb7e2;
128
+ --components-form-radio-contrast-border-disabled: #6e6f73;
129
+ --components-form-radio-contrast-border-negative: #ff9494;
130
+ --components-form-radio-contrast-border-readonly: #6e6f73;
131
+ --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
132
+ --components-form-radio-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
133
+ --components-form-radio-contrast-fill-hover: #626493;
134
+ --components-form-radio-contrast-fill-selected: #aeb7e2;
135
+ --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
136
+ --components-form-radio-contrast-icon: #ffffff;
137
+ --components-form-radio-contrast-icon-disabled: #949699;
138
+ --components-form-radio-contrast-icon-readonly: #ffffff;
139
+ --components-form-radio-contrast-text: #ffffff;
140
+ --components-form-radio-contrast-text-disabled: #949699;
141
+ --components-form-radio-standard-border: #181c56;
142
+ --components-form-radio-standard-border-disabled: #e3e6e8;
143
+ --components-form-radio-standard-border-negative: #d31b1b;
144
+ --components-form-radio-standard-border-readonly: #e3e6e8;
145
+ --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
146
+ --components-form-radio-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
147
+ --components-form-radio-standard-fill-hover: #d9ddf2;
148
+ --components-form-radio-standard-fill-selected: #181c56;
149
+ --components-form-radio-standard-icon: #181c56;
150
+ --components-form-radio-standard-icon-disabled: #b6b8ba;
151
+ --components-form-radio-standard-icon-readonly: #181c56;
152
+ --components-form-radio-standard-selectedhover: #393d79;
153
+ --components-form-radio-standard-text: #181c56;
154
+ --components-form-radio-standard-text-disabled: #b6b8ba;
155
+ --components-form-segmentedcontrol-contrast-background: #393d79;
156
+ --components-form-segmentedcontrol-contrast-fill-hover: #626493;
157
+ --components-form-segmentedcontrol-contrast-fill-selected: #ffffff;
158
+ --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
159
+ --components-form-segmentedcontrol-contrast-icon-selected: #181c56;
160
+ --components-form-segmentedcontrol-contrast-icon-unselected: #ffffff;
161
+ --components-form-segmentedcontrol-contrast-text-selected: #181c56;
162
+ --components-form-segmentedcontrol-contrast-text-unselected: #ffffff;
163
+ --components-form-segmentedcontrol-standard-background: #d9dae8;
164
+ --components-form-segmentedcontrol-standard-fill-hover: #eaeaf1;
165
+ --components-form-segmentedcontrol-standard-fill-selected: #ffffff;
166
+ --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
167
+ --components-form-segmentedcontrol-standard-icon-selected: #181c56;
168
+ --components-form-segmentedcontrol-standard-icon-unselected: #181c56;
169
+ --components-form-segmentedcontrol-standard-text-selected: #181c56;
170
+ --components-form-segmentedcontrol-standard-text-unselected: #181c56;
171
+ --components-form-switch-contrast-fill-false: #9ea0bd;
172
+ --components-form-switch-contrast-fill-true: #5ac39a;
173
+ --components-form-switch-contrast-icon-false: #626493;
174
+ --components-form-switch-contrast-icon-true: #181c56;
175
+ --components-form-switch-contrast-switch: #ffffff;
176
+ --components-form-switch-contrast-text: #ffffff;
177
+ --components-form-switch-standard-fill-false: #949699;
178
+ --components-form-switch-standard-fill-true: #1a8e60;
179
+ --components-form-switch-standard-icon-false: #6e6f73;
180
+ --components-form-switch-standard-icon-true: #181c56;
181
+ --components-form-switch-standard-switch: #ffffff;
182
+ --components-form-switch-standard-text: #181c56;
875
183
  }
876
184
 
877
185
  [data-color-mode=dark] {
878
- --basecolors-frame-contrast: #212233;
879
- --basecolors-frame-contrastalt: #141527;
880
- --basecolors-frame-contrastalt-2: #08091c;
881
- --basecolors-frame-default: #08091c;
882
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
883
- --basecolors-frame-elevatedalt: #464755;
884
- --basecolors-frame-subdued: #2d2e3e;
885
- --basecolors-frame-tint: #141527;
886
- --basecolors-shape-accent: #e5e5e9;
887
- --basecolors-shape-bicycle-contrast: #4db295;
888
- --basecolors-shape-bicycle-default: #4db295;
889
- --basecolors-shape-bus-contrast: #ef7398;
890
- --basecolors-shape-bus-default: #ef7398;
891
- --basecolors-shape-cableway-contrast: #b898e5;
892
- --basecolors-shape-cableway-default: #b898e5;
893
- --basecolors-shape-disabled: #b6b8ba;
894
- --basecolors-shape-disabledalt: #b3b4bd;
895
- --basecolors-shape-ferry-contrast: #8ccfe2;
896
- --basecolors-shape-ferry-default: #8ccfe2;
897
- --basecolors-shape-funicular-contrast: #b898e5;
898
- --basecolors-shape-funicular-default: #b898e5;
899
- --basecolors-shape-helicopter-contrast: #f2b8e5;
900
- --basecolors-shape-helicopter-default: #f2b8e5;
901
- --basecolors-shape-highlight: #ff9494;
902
- --basecolors-shape-light: #e5e5e9;
903
- --basecolors-shape-mask: #2d2e3e;
904
- --basecolors-shape-maskalt: #393a49;
905
- --basecolors-shape-metro-contrast: #dd973c;
906
- --basecolors-shape-metro-default: #dd973c;
907
- --basecolors-shape-mobility-contrast: #4db295;
908
- --basecolors-shape-mobility-default: #4db295;
909
- --basecolors-shape-plane-contrast: #f2b8e5;
910
- --basecolors-shape-plane-default: #f2b8e5;
911
- --basecolors-shape-subdued: #b3b4bd;
912
- --basecolors-shape-subduedalt: #b3b4bd;
913
- --basecolors-shape-taxi-contrast: #ffe082;
914
- --basecolors-shape-taxi-default: #ffe082;
915
- --basecolors-shape-train-contrast: #60a2d7;
916
- --basecolors-shape-train-default: #60a2d7;
917
- --basecolors-shape-tram-contrast: #b898e5;
918
- --basecolors-shape-tram-default: #b898e5;
919
- --basecolors-shape-walk-contrast: #8d8e9c;
920
- --basecolors-shape-walk-default: #8d8e9c;
921
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
922
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
923
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
924
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
925
- --basecolors-stroke-contrast: #aeb7e2;
926
- --basecolors-stroke-default: #b3b4bd;
927
- --basecolors-stroke-disabled: #e3e6e8;
928
- --basecolors-stroke-focus-contrast: #aeb7e2;
929
- --basecolors-stroke-focus-standard: #aeb7e2;
930
- --basecolors-stroke-highlight: #ff9494;
931
- --basecolors-stroke-light: #b3b4bd;
932
- --basecolors-stroke-subdued: #81828f;
933
- --basecolors-stroke-subduedalt: #949699;
934
- --basecolors-text-accent: #e5e5e9;
935
- --basecolors-text-disabled: #b6b8ba;
936
- --basecolors-text-disabledalt: #b6b8ba;
937
- --basecolors-text-highlight: #ff9494;
938
- --basecolors-text-light: #e5e5e9;
939
- --basecolors-text-subdued: #b3b4bd;
940
- --basecolors-text-subduedalt: #b3b4bd;
186
+ --components-form-baseform-contrast-border-default: #8284ab;
187
+ --components-form-baseform-contrast-border-interactive: #aeb7e2;
188
+ --components-form-baseform-contrast-border-negative: #ff9494;
189
+ --components-form-baseform-contrast-border-success: #5ac39a;
190
+ --components-form-baseform-contrast-fill-default: rgba(255, 255, 255, 0);
191
+ --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
192
+ --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
193
+ --components-form-baseform-contrast-icon: #e5e5e9;
194
+ --components-form-baseform-contrast-icon-disabled: #6e6f73;
195
+ --components-form-baseform-contrast-text-content: #e5e5e9;
196
+ --components-form-baseform-contrast-text-description: #e5e5e9;
197
+ --components-form-baseform-contrast-text-label: #b3b4bd;
198
+ --components-form-baseform-contrast-text-disabled: #6e6f73;
199
+ --components-form-baseform-standard-border-default: #8284ab;
200
+ --components-form-baseform-standard-border-interactive: #aeb7e2;
201
+ --components-form-baseform-standard-border-negative: #ff9494;
202
+ --components-form-baseform-standard-border-success: #5ac39a;
203
+ --components-form-baseform-standard-fill-default: rgba(255, 255, 255, 0);
204
+ --components-form-baseform-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
205
+ --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
206
+ --components-form-baseform-standard-icon: #e5e5e9;
207
+ --components-form-baseform-standard-icon-disabled: #6e6f73;
208
+ --components-form-baseform-standard-text-content: #e5e5e9;
209
+ --components-form-baseform-standard-text-description: #e5e5e9;
210
+ --components-form-baseform-standard-text-label: #b3b4bd;
211
+ --components-form-baseform-standard-text-disabled: #6e6f73;
212
+ --components-form-basemenu-border: rgba(255, 255, 255, 0);
213
+ --components-form-basemenu-fill-default: #464755;
214
+ --components-form-basemenu-fill-hover: #626493;
215
+ --components-form-basemenu-fill-selected: #8794d4;
216
+ --components-form-basemenu-icon: #e5e5e9;
217
+ --components-form-basemenu-icon-disabled: #949699;
218
+ --components-form-basemenu-text: #e5e5e9;
219
+ --components-form-basemenu-text-disabled: #949699;
220
+ --components-form-basepanel-contrast-border-default: #81828f;
221
+ --components-form-basepanel-contrast-border-disabled: #949699;
222
+ --components-form-basepanel-contrast-border-selected: #aeb7e2;
223
+ --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
224
+ --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
225
+ --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
226
+ --components-form-basepanel-contrast-fill-hover: #393a49;
227
+ --components-form-basepanel-contrast-fill-selected: rgba(229, 229, 233, 0.1490196078);
228
+ --components-form-basepanel-contrast-text-accent: #e5e5e9;
229
+ --components-form-basepanel-contrast-text-disabled: #b6b8ba;
230
+ --components-form-basepanel-contrast-text-rebate: #5ac39a;
231
+ --components-form-basepanel-contrast-text-subdued: #b3b4bd;
232
+ --components-form-basepanel-standard-border-default: #81828f;
233
+ --components-form-basepanel-standard-border-disabled: #949699;
234
+ --components-form-basepanel-standard-border-selected: #aeb7e2;
235
+ --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
236
+ --components-form-basepanel-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
237
+ --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
238
+ --components-form-basepanel-standard-fill-hover: #393a49;
239
+ --components-form-basepanel-standard-fill-selected: rgba(229, 229, 233, 0.1490196078);
240
+ --components-form-basepanel-standard-text-accent: #e5e5e9;
241
+ --components-form-basepanel-standard-text-disabled: #b6b8ba;
242
+ --components-form-basepanel-standard-text-rebate: #5ac39a;
243
+ --components-form-basepanel-standard-text-subdued: #b3b4bd;
244
+ --components-form-checkbox-contrast-border: #aeb7e2;
245
+ --components-form-checkbox-contrast-border-disabled: #6e6f73;
246
+ --components-form-checkbox-contrast-border-negative: #ff9494;
247
+ --components-form-checkbox-contrast-border-readonly: #6e6f73;
248
+ --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
249
+ --components-form-checkbox-contrast-fill-disabled: rgba(204, 205, 212, 0.3019607843);
250
+ --components-form-checkbox-contrast-fill-hover: #626493;
251
+ --components-form-checkbox-contrast-fill-selected: #aeb7e2;
252
+ --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
253
+ --components-form-checkbox-contrast-icon: #181c56;
254
+ --components-form-checkbox-contrast-icon-disabled: #6e6f73;
255
+ --components-form-checkbox-contrast-icon-readonly: #e5e5e9;
256
+ --components-form-checkbox-contrast-text: #e5e5e9;
257
+ --components-form-checkbox-contrast-text-disabled: #6e6f73;
258
+ --components-form-checkbox-standard-border: #aeb7e2;
259
+ --components-form-checkbox-standard-border-disabled: #6e6f73;
260
+ --components-form-checkbox-standard-border-negative: #ff9494;
261
+ --components-form-checkbox-standard-border-readonly: #6e6f73;
262
+ --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
263
+ --components-form-checkbox-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
264
+ --components-form-checkbox-standard-fill-hover: #626493;
265
+ --components-form-checkbox-standard-fill-selected: #aeb7e2;
266
+ --components-form-checkbox-standard-fill-selectedhover: #c7cdeb;
267
+ --components-form-checkbox-standard-icon: #181c56;
268
+ --components-form-checkbox-standard-icon-disabled: #6e6f73;
269
+ --components-form-checkbox-standard-icon-readonly: #e5e5e9;
270
+ --components-form-checkbox-standard-text: #e5e5e9;
271
+ --components-form-checkbox-standard-text-disabled: #6e6f73;
272
+ --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
273
+ --components-form-feedbacktext-information-contrast-icon-symbol: #08091c;
274
+ --components-form-feedbacktext-information-contrast-stroke: #08091c;
275
+ --components-form-feedbacktext-information-contrast-text: #e5e5e9;
276
+ --components-form-feedbacktext-information-standard-icon-fill: #64b3e7;
277
+ --components-form-feedbacktext-information-standard-icon-symbol: #08091c;
278
+ --components-form-feedbacktext-information-standard-stroke: #08091c;
279
+ --components-form-feedbacktext-information-standard-text: #e5e5e9;
280
+ --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
281
+ --components-form-feedbacktext-negative-contrast-icon-symbol: #08091c;
282
+ --components-form-feedbacktext-negative-contrast-stroke: #08091c;
283
+ --components-form-feedbacktext-negative-contrast-text: #e5e5e9;
284
+ --components-form-feedbacktext-negative-standard-icon-fill: #ff9494;
285
+ --components-form-feedbacktext-negative-standard-stroke: #08091c;
286
+ --components-form-feedbacktext-negative-standard-symbol: #08091c;
287
+ --components-form-feedbacktext-negative-standard-text: #e5e5e9;
288
+ --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
289
+ --components-form-feedbacktext-success-contrast-icon-stroke: #08091c;
290
+ --components-form-feedbacktext-success-contrast-icon-symbol: #08091c;
291
+ --components-form-feedbacktext-success-contrast-text: #e5e5e9;
292
+ --components-form-feedbacktext-success-standard-icon-fill: #5ac39a;
293
+ --components-form-feedbacktext-success-standard-icon-stroke: #08091c;
294
+ --components-form-feedbacktext-success-standard-icon-symbol: #08091c;
295
+ --components-form-feedbacktext-success-standard-text: #e5e5e9;
296
+ --components-form-feedbacktext-warning-contrast-icon: #ffe082;
297
+ --components-form-feedbacktext-warning-contrast-icon-symbol: #08091c;
298
+ --components-form-feedbacktext-warning-contrast-stroke: #08091c;
299
+ --components-form-feedbacktext-warning-contrast-text: #e5e5e9;
300
+ --components-form-feedbacktext-warning-standard-icon-fill: #ffe082;
301
+ --components-form-feedbacktext-warning-standard-icon-symbol: #08091c;
302
+ --components-form-feedbacktext-warning-standard-stroke: #08091c;
303
+ --components-form-feedbacktext-warning-standard-text: #e5e5e9;
304
+ --components-form-radio-contrast-border: #aeb7e2;
305
+ --components-form-radio-contrast-border-disabled: #6e6f73;
306
+ --components-form-radio-contrast-border-negative: #ff9494;
307
+ --components-form-radio-contrast-border-readonly: #6e6f73;
308
+ --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
309
+ --components-form-radio-contrast-fill-disabled: rgba(204, 205, 212, 0.3019607843);
310
+ --components-form-radio-contrast-fill-hover: #626493;
311
+ --components-form-radio-contrast-fill-selected: #aeb7e2;
312
+ --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
313
+ --components-form-radio-contrast-icon: #e5e5e9;
314
+ --components-form-radio-contrast-icon-disabled: #6e6f73;
315
+ --components-form-radio-contrast-icon-readonly: #e5e5e9;
316
+ --components-form-radio-contrast-text: #e5e5e9;
317
+ --components-form-radio-contrast-text-disabled: #6e6f73;
318
+ --components-form-radio-standard-border: #aeb7e2;
319
+ --components-form-radio-standard-border-disabled: #6e6f73;
320
+ --components-form-radio-standard-border-negative: #ff9494;
321
+ --components-form-radio-standard-border-readonly: #6e6f73;
322
+ --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
323
+ --components-form-radio-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
324
+ --components-form-radio-standard-fill-hover: #626493;
325
+ --components-form-radio-standard-fill-selected: #aeb7e2;
326
+ --components-form-radio-standard-icon: #e5e5e9;
327
+ --components-form-radio-standard-icon-disabled: #6e6f73;
328
+ --components-form-radio-standard-icon-readonly: #e5e5e9;
329
+ --components-form-radio-standard-selectedhover: #c7cdeb;
330
+ --components-form-radio-standard-text: #e5e5e9;
331
+ --components-form-radio-standard-text-disabled: #6e6f73;
332
+ --components-form-segmentedcontrol-contrast-background: rgba(229, 229, 233, 0.1490196078);
333
+ --components-form-segmentedcontrol-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
334
+ --components-form-segmentedcontrol-contrast-fill-selected: #e5e5e9;
335
+ --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
336
+ --components-form-segmentedcontrol-contrast-icon-selected: #08091c;
337
+ --components-form-segmentedcontrol-contrast-icon-unselected: #e5e5e9;
338
+ --components-form-segmentedcontrol-contrast-text-selected: #08091c;
339
+ --components-form-segmentedcontrol-contrast-text-unselected: #e5e5e9;
340
+ --components-form-segmentedcontrol-standard-background: rgba(229, 229, 233, 0.1490196078);
341
+ --components-form-segmentedcontrol-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
342
+ --components-form-segmentedcontrol-standard-fill-selected: #e5e5e9;
343
+ --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
344
+ --components-form-segmentedcontrol-standard-icon-selected: #08091c;
345
+ --components-form-segmentedcontrol-standard-icon-unselected: #e5e5e9;
346
+ --components-form-segmentedcontrol-standard-text-selected: #08091c;
347
+ --components-form-segmentedcontrol-standard-text-unselected: #e5e5e9;
348
+ --components-form-switch-contrast-fill-false: rgba(229, 229, 233, 0.3490196078);
349
+ --components-form-switch-contrast-fill-true: #5ac39a;
350
+ --components-form-switch-contrast-icon-false: #b3b4bd;
351
+ --components-form-switch-contrast-icon-true: #e5e5e9;
352
+ --components-form-switch-contrast-switch: #08091c;
353
+ --components-form-switch-contrast-text: #e5e5e9;
354
+ --components-form-switch-standard-fill-false: rgba(229, 229, 233, 0.3490196078);
355
+ --components-form-switch-standard-fill-true: #5ac39a;
356
+ --components-form-switch-standard-icon-false: #b3b4bd;
357
+ --components-form-switch-standard-icon-true: #e5e5e9;
358
+ --components-form-switch-standard-switch: #08091c;
359
+ --components-form-switch-standard-text: #e5e5e9;
941
360
  }
942
361
 
943
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
944
- background: #ffffff;
945
- background: var(--basecolors-frame-default);
946
- width: -moz-fit-content;
947
- width: fit-content;
948
- height: -moz-fit-content;
949
- height: fit-content;
950
- padding: 0.15rem;
951
- margin: -0.15rem;
952
- }
953
- *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
954
- background-color: #181c56;
955
- background-color: var(--basecolors-frame-contrast);
956
- }
957
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
958
- min-height: 7.75rem;
959
- resize: vertical;
960
- line-height: 1.5rem;
961
- }
962
- .eds-textarea__wrapper .eds-form-control-wrapper {
963
- padding-right: 0;
964
- cursor: text;
965
- }
966
362
  /* DO NOT CHANGE!*/
967
363
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
968
- .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
969
- outline: 2px solid #181c56;
970
- outline-color: var(--basecolors-stroke-focus-standard);
971
- outline-offset: 0.125rem;
972
- }
973
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
974
- outline-color: var(--basecolors-stroke-focus-contrast);
975
- }
976
- .eds-input-panel > input {
977
- position: absolute;
978
- opacity: 0;
979
- cursor: pointer;
980
- height: 0;
981
- width: 0;
982
- }
983
- .eds-input-panel > input:checked + .eds-input-panel__container {
984
- border-color: var(--components-form-basepanel-standard-border-selected);
985
- background: var(--components-form-basepanel-standard-fill-selected);
986
- }
987
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
988
- border-color: var(--components-form-basepanel-contrast-border-selected);
989
- background: var(--components-form-basepanel-contrast-fill-selected);
990
- }
991
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
992
- width: 0.75rem;
993
- height: 0.75rem;
994
- }
995
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
996
- background-color: var(--components-form-radio-contrast-icon);
364
+ /* DO NOT CHANGE!*/
365
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
366
+ [data-color-mode=light],
367
+ :root {
368
+ --basecolors-frame-contrast: #181c56;
369
+ --basecolors-frame-contrastalt: #393d79;
370
+ --basecolors-frame-contrastalt-2: #292b6a;
371
+ --basecolors-frame-default: #ffffff;
372
+ --basecolors-frame-elevated: #ffffff;
373
+ --basecolors-frame-elevatedalt: #f6f6f9;
374
+ --basecolors-frame-subdued: #d9dae8;
375
+ --basecolors-frame-tint: #f6f6f9;
376
+ --basecolors-shape-accent: #181c56;
377
+ --basecolors-shape-bicycle-contrast: #00db9b;
378
+ --basecolors-shape-bicycle-default: #388f76;
379
+ --basecolors-shape-bus-contrast: #ff6392;
380
+ --basecolors-shape-bus-default: #c5044e;
381
+ --basecolors-shape-cableway-contrast: #b482fb;
382
+ --basecolors-shape-cableway-default: #78469a;
383
+ --basecolors-shape-disabled: #6e6f73;
384
+ --basecolors-shape-disabledalt: #b6b8ba;
385
+ --basecolors-shape-ferry-contrast: #6fdfff;
386
+ --basecolors-shape-ferry-default: #0c6693;
387
+ --basecolors-shape-funicular-contrast: #b482fb;
388
+ --basecolors-shape-funicular-default: #78469a;
389
+ --basecolors-shape-helicopter-contrast: #fbafea;
390
+ --basecolors-shape-helicopter-default: #800664;
391
+ --basecolors-shape-highlight: #ff5959;
392
+ --basecolors-shape-light: #ffffff;
393
+ --basecolors-shape-mask: #ffffff;
394
+ --basecolors-shape-maskalt: #ffffff;
395
+ --basecolors-shape-metro-contrast: #f08901;
396
+ --basecolors-shape-metro-default: #bf5826;
397
+ --basecolors-shape-mobility-contrast: #00db9b;
398
+ --basecolors-shape-mobility-default: #388f76;
399
+ --basecolors-shape-plane-contrast: #fbafea;
400
+ --basecolors-shape-plane-default: #800664;
401
+ --basecolors-shape-subdued: #626493;
402
+ --basecolors-shape-subduedalt: #d9dae8;
403
+ --basecolors-shape-taxi-contrast: #ffe082;
404
+ --basecolors-shape-taxi-default: #3d3e40;
405
+ --basecolors-shape-train-contrast: #42a5f5;
406
+ --basecolors-shape-train-default: #00367f;
407
+ --basecolors-shape-tram-contrast: #b482fb;
408
+ --basecolors-shape-tram-default: #78469a;
409
+ --basecolors-shape-walk-contrast: #8284ab;
410
+ --basecolors-shape-walk-default: #8d8e9c;
411
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
412
+ --basecolors-shape-airportlinkbus-default: #800664;
413
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
414
+ --basecolors-shape-airportlinkrail-default: #800664;
415
+ --basecolors-stroke-contrast: #aeb7e2;
416
+ --basecolors-stroke-default: #181c56;
417
+ --basecolors-stroke-disabled: #949699;
418
+ --basecolors-stroke-focus-contrast: #aeb7e2;
419
+ --basecolors-stroke-focus-standard: #181c56;
420
+ --basecolors-stroke-highlight: #ff5959;
421
+ --basecolors-stroke-light: #ffffff;
422
+ --basecolors-stroke-subdued: #8284ab;
423
+ --basecolors-stroke-subduedalt: #e3e6e8;
424
+ --basecolors-text-accent: #181c56;
425
+ --basecolors-text-disabled: #6e6f73;
426
+ --basecolors-text-disabledalt: #b6b8ba;
427
+ --basecolors-text-highlight: #ff5959;
428
+ --basecolors-text-light: #ffffff;
429
+ --basecolors-text-subdued: #626493;
430
+ --basecolors-text-subduedalt: #d9dae8;
997
431
  }
998
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
999
- background-color: var(--components-form-basepanel-standard-fill-hover);
1000
- /* The following styling is needed to sync the inner checkbox/radiobutton's
1001
- hover state styling with the inputPanel container */
432
+
433
+ [data-color-mode=dark] {
434
+ --basecolors-frame-contrast: #212233;
435
+ --basecolors-frame-contrastalt: #141527;
436
+ --basecolors-frame-contrastalt-2: #08091c;
437
+ --basecolors-frame-default: #08091c;
438
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
439
+ --basecolors-frame-elevatedalt: #464755;
440
+ --basecolors-frame-subdued: #2d2e3e;
441
+ --basecolors-frame-tint: #141527;
442
+ --basecolors-shape-accent: #e5e5e9;
443
+ --basecolors-shape-bicycle-contrast: #4db295;
444
+ --basecolors-shape-bicycle-default: #4db295;
445
+ --basecolors-shape-bus-contrast: #ef7398;
446
+ --basecolors-shape-bus-default: #ef7398;
447
+ --basecolors-shape-cableway-contrast: #b898e5;
448
+ --basecolors-shape-cableway-default: #b898e5;
449
+ --basecolors-shape-disabled: #b6b8ba;
450
+ --basecolors-shape-disabledalt: #b3b4bd;
451
+ --basecolors-shape-ferry-contrast: #8ccfe2;
452
+ --basecolors-shape-ferry-default: #8ccfe2;
453
+ --basecolors-shape-funicular-contrast: #b898e5;
454
+ --basecolors-shape-funicular-default: #b898e5;
455
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
456
+ --basecolors-shape-helicopter-default: #f2b8e5;
457
+ --basecolors-shape-highlight: #ff9494;
458
+ --basecolors-shape-light: #e5e5e9;
459
+ --basecolors-shape-mask: #2d2e3e;
460
+ --basecolors-shape-maskalt: #393a49;
461
+ --basecolors-shape-metro-contrast: #dd973c;
462
+ --basecolors-shape-metro-default: #dd973c;
463
+ --basecolors-shape-mobility-contrast: #4db295;
464
+ --basecolors-shape-mobility-default: #4db295;
465
+ --basecolors-shape-plane-contrast: #f2b8e5;
466
+ --basecolors-shape-plane-default: #f2b8e5;
467
+ --basecolors-shape-subdued: #b3b4bd;
468
+ --basecolors-shape-subduedalt: #b3b4bd;
469
+ --basecolors-shape-taxi-contrast: #ffe082;
470
+ --basecolors-shape-taxi-default: #ffe082;
471
+ --basecolors-shape-train-contrast: #60a2d7;
472
+ --basecolors-shape-train-default: #60a2d7;
473
+ --basecolors-shape-tram-contrast: #b898e5;
474
+ --basecolors-shape-tram-default: #b898e5;
475
+ --basecolors-shape-walk-contrast: #8d8e9c;
476
+ --basecolors-shape-walk-default: #8d8e9c;
477
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
478
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
479
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
480
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
481
+ --basecolors-stroke-contrast: #aeb7e2;
482
+ --basecolors-stroke-default: #b3b4bd;
483
+ --basecolors-stroke-disabled: #e3e6e8;
484
+ --basecolors-stroke-focus-contrast: #aeb7e2;
485
+ --basecolors-stroke-focus-standard: #aeb7e2;
486
+ --basecolors-stroke-highlight: #ff9494;
487
+ --basecolors-stroke-light: #b3b4bd;
488
+ --basecolors-stroke-subdued: #81828f;
489
+ --basecolors-stroke-subduedalt: #949699;
490
+ --basecolors-text-accent: #e5e5e9;
491
+ --basecolors-text-disabled: #b6b8ba;
492
+ --basecolors-text-disabledalt: #b6b8ba;
493
+ --basecolors-text-highlight: #ff9494;
494
+ --basecolors-text-light: #e5e5e9;
495
+ --basecolors-text-subdued: #b3b4bd;
496
+ --basecolors-text-subduedalt: #b3b4bd;
1002
497
  }
1003
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
1004
- background-color: var(--components-form-basepanel-contrast-fill-hover);
498
+
499
+ /* DO NOT CHANGE!*/
500
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
501
+ :root {
502
+ --contrast-bicycle: #00db9b;
503
+ --contrast-bus: #ff6392;
504
+ --contrast-bus-transparent: #ff639226;
505
+ --contrast-cableway: #b482fb;
506
+ --contrast-cableway-transparent: #b482fb26;
507
+ --contrast-carferry: #6fdfff;
508
+ --contrast-carferry-transparent: #6fdfff26;
509
+ --contrast-citybike: #00db9b;
510
+ --contrast-ferry: #6fdfff;
511
+ --contrast-ferry-transparent: #6fdfff26;
512
+ --contrast-funicular: #b482fb;
513
+ --contrast-funicular-transparent: #b482fb26;
514
+ --contrast-helicopter: #fbafea;
515
+ --contrast-helicopter-transparent: #fbafea26;
516
+ --contrast-metro: #f08901;
517
+ --contrast-metro-transparent: #f0890126;
518
+ --contrast-mobility: #00db9b;
519
+ --contrast-neutral: #ffffff;
520
+ --contrast-plane: #fbafea;
521
+ --contrast-plane-transparent: #fbafea26;
522
+ --contrast-taxi: #ffe082;
523
+ --contrast-taxi-transparent: #ffe08226;
524
+ --contrast-train: #42a5f5;
525
+ --contrast-train-transparent: #42a5f526;
526
+ --contrast-tram: #b482fb;
527
+ --contrast-tram-transparent: #b482fb26;
528
+ --contrast-walk: #8284ab;
529
+ --contrast-airportlinkbus: #fbafea;
530
+ --contrast-airportlinkbus-transparent: #fbafea26;
531
+ --contrast-airportlinkrail: #fbafea;
532
+ --contrast-airportlinkrail-transparent: #fbafea26;
533
+ --dark-bicycle: #4db295;
534
+ --dark-bus: #ef7398;
535
+ --dark-bus-transparent: #ef739826;
536
+ --dark-cableway: #b898e5;
537
+ --dark-cableway-transparent: #b898e526;
538
+ --dark-carferry: #8ccfe2;
539
+ --dark-carferry-transparent: #8ccfe226;
540
+ --dark-citybike: #4db295;
541
+ --dark-ferry: #8ccfe2;
542
+ --dark-ferry-transparent: #8ccfe226;
543
+ --dark-funicular: #b898e5;
544
+ --dark-funicular-transparent: #b898e526;
545
+ --dark-helicopter: #f2b8e5;
546
+ --dark-helicopter-transparent: #f2b8e526;
547
+ --dark-metro: #dd973c;
548
+ --dark-metro-transparent: #dd973c26;
549
+ --dark-mobility: #4db295;
550
+ --dark-neutral: #e5e5e9;
551
+ --dark-plane: #f2b8e5;
552
+ --dark-plane-transparent: #f2b8e526;
553
+ --dark-taxi: #ffe082;
554
+ --dark-taxi-transparent: #ffe08226;
555
+ --dark-train: #60a2d7;
556
+ --dark-train-transparent: #60a2d726;
557
+ --dark-tram: #b898e5;
558
+ --dark-tram-transparent: #b898e526;
559
+ --dark-walk: #8d8e9c;
560
+ --dark-airportlinkbus: #f2b8e5;
561
+ --dark-airportlinkbus-transparent: #f2b8e526;
562
+ --dark-airportlinkrail: #f2b8e5;
563
+ --dark-airportlinkrail-transparent: #f2b8e526;
564
+ --standard-bicycle: #388f76;
565
+ --standard-bus: #c5044e;
566
+ --standard-bus-transparent: #c5044e26;
567
+ --standard-cableway: #78469a;
568
+ --standard-cableway-transparent: #78469a26;
569
+ --standard-carferry: #0c6693;
570
+ --standard-carferry-transparent: #0c669326;
571
+ --standard-citybike: #388f76;
572
+ --standard-ferry: #0c6693;
573
+ --standard-ferry-transparent: #0c669326;
574
+ --standard-funicular: #78469a;
575
+ --standard-funicular-transparent: #78469a26;
576
+ --standard-helicopter: #800664;
577
+ --standard-helicopter-transparent: #80066426;
578
+ --standard-metro: #bf5826;
579
+ --standard-metro-transparent: #bf582626;
580
+ --standard-mobility: #388f76;
581
+ --standard-neutral: #181c56;
582
+ --standard-plane: #800664;
583
+ --standard-plane-transparent: #80066426;
584
+ --standard-taxi: #3d3e40;
585
+ --standard-taxi-transparent: #3d3e4026;
586
+ --standard-train: #00367f;
587
+ --standard-train-transparent: #00367f26;
588
+ --standard-tram: #78469a;
589
+ --standard-tram-transparent: #78469a26;
590
+ --standard-walk: #8d8e9c;
591
+ --standard-airportlinkbus: #800664;
592
+ --standard-airportlinkbus-transparent: #80066426;
593
+ --standard-airportlinkrail: #800664;
594
+ --standard-airportlinkrail-transparent: #80066426;
1005
595
  }
1006
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1007
- background-color: var(--components-form-basepanel-standard-fill-hover);
1008
- border-color: var(--components-form-basepanel-standard-border-selected);
596
+
597
+ :root {
598
+ --eds-form: 1;
599
+ }/* DO NOT CHANGE!*/
600
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
601
+ .eds-feedback-text {
602
+ display: flex;
603
+ align-items: center;
604
+ margin-top: 0.25rem;
1009
605
  }
1010
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1011
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1012
- border-color: var(--components-form-basepanel-contrast-border-selected);
606
+ .eds-feedback-text--info, .eds-feedback-text--information {
607
+ padding-left: calc(1rem + 0.125rem);
1013
608
  }
1014
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1015
- border-color: transparent;
609
+ .eds-feedback-text__text {
610
+ color: var(--components-form-feedbacktext-information-standard-text);
1016
611
  }
1017
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1018
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
612
+ .eds-contrast .eds-feedback-text__text {
613
+ color: var(--components-form-feedbacktext-information-contrast-text);
1019
614
  }
1020
- .eds-input-panel__container {
1021
- background: var(--components-form-basepanel-standard-fill-default);
1022
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
1023
- color: var(--components-form-basepanel-standard-text-accent);
1024
- border-radius: 0.25rem;
1025
- display: flex;
1026
- flex-direction: column;
1027
- justify-content: flex-start;
1028
- min-width: 20rem;
615
+
616
+ .eds-feedback-text__icon {
617
+ font-size: 1.5rem;
618
+ min-height: 1.5rem;
619
+ min-width: 1.5rem;
620
+ padding-right: 0.5rem;
1029
621
  position: relative;
1030
- padding: 1rem;
1031
- -webkit-user-select: none;
1032
- -moz-user-select: none;
1033
- user-select: none;
1034
- width: -moz-fit-content;
1035
- width: fit-content;
1036
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
622
+ top: -0.1rem;
1037
623
  }
1038
- .eds-contrast .eds-input-panel__container {
1039
- background-color: var(--components-form-basepanel-contrast-fill-default);
1040
- border-color: var(--components-form-basepanel-contrast-border-default);
1041
- color: var(--components-form-basepanel-contrast-text-accent);
624
+ .eds-feedback-text__icon--success {
625
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
1042
626
  }
1043
- .eds-input-panel__container:hover {
1044
- background-color: var(--components-form-basepanel-standard-fill-hover);
1045
- /* The following styling is needed to sync the inner checkbox/radiobutton's
1046
- hover state styling with the inputPanel container */
627
+ .eds-feedback-text__icon--success circle {
628
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
1047
629
  }
1048
- .eds-contrast .eds-input-panel__container:hover {
1049
- background-color: var(--components-form-basepanel-contrast-fill-hover);
630
+ .eds-contrast .eds-feedback-text__icon--success {
631
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
1050
632
  }
1051
- .eds-input-panel__container:hover .eds-checkbox__icon,
1052
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
1053
- background-color: var(--components-form-basepanel-standard-fill-hover);
1054
- border-color: var(--components-form-basepanel-standard-border-selected);
1055
- }
1056
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
1057
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
1058
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1059
- border-color: var(--components-form-basepanel-contrast-border-selected);
633
+ .eds-contrast .eds-feedback-text__icon--success circle {
634
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
1060
635
  }
1061
- input:disabled + .eds-input-panel__container {
1062
- background: var(--components-form-basepanel-standard-fill-disabled);
1063
- border-color: var(--components-form-basepanel-standard-border-disabled);
1064
- color: var(--components-form-basepanel-standard-text-disabled);
1065
- cursor: not-allowed;
636
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
637
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
1066
638
  }
1067
- .eds-contrast input:disabled + .eds-input-panel__container {
1068
- background: var(--components-form-basepanel-contrast-fill-disabled);
1069
- border-style: dashed;
1070
- border-color: var(--components-form-basepanel-contrast-border-disabled);
1071
- color: var(--components-form-basepanel-contrast-text-disabled);
639
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
640
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
1072
641
  }
1073
- .eds-input-panel__container .eds-checkbox__icon,
1074
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
1075
- .eds-input-panel__container .eds-form-component--radio__radio {
1076
- width: 1.5rem;
1077
- height: 1.5rem;
1078
- margin-right: 0;
642
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
643
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
1079
644
  }
1080
- .eds-input-panel--medium .eds-input-panel__title {
1081
- font-size: 1rem;
1082
- font-weight: 500;
645
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
646
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
1083
647
  }
1084
- .eds-input-panel--medium.eds-input-panel__container {
1085
- padding-bottom: 1rem;
1086
- min-height: 3.75rem;
648
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
649
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
1087
650
  }
1088
- .eds-input-panel--large.eds-input-panel__container {
1089
- min-height: 6rem;
651
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
652
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
1090
653
  }
1091
- .eds-input-panel--large .eds-input-panel__title {
1092
- font-size: 1.25rem;
1093
- font-weight: 500;
1094
- line-height: 1.875rem;
654
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
655
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
1095
656
  }
1096
- .eds-input-panel__title-wrapper {
1097
- display: flex;
1098
- justify-content: space-between;
1099
- align-items: center;
657
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
658
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
1100
659
  }
1101
- .eds-input-panel__secondary-label-and-icon-wrapper {
1102
- display: flex;
1103
- justify-content: center;
1104
- align-items: center;
1105
- gap: 0.75rem;
660
+ .eds-feedback-text__icon--warning {
661
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
1106
662
  }
1107
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1108
- margin: 0;
663
+ .eds-feedback-text__icon--warning .svg-exclamation {
664
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
1109
665
  }
1110
- .eds-input-panel__additional-content {
1111
- margin-top: 0.25rem;
1112
- word-wrap: break-word;
666
+ .eds-contrast .eds-feedback-text__icon--warning {
667
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
1113
668
  }
1114
- /* DO NOT CHANGE!*/
669
+ .eds-contrast .eds-feedback-text__icon--warning circle {
670
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
671
+ }/* DO NOT CHANGE!*/
1115
672
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1116
- .eds-textfield__clear-button {
1117
- background: none;
1118
- border: none;
1119
- border-radius: 50%;
673
+ .eds-input-group {
1120
674
  color: inherit;
1121
- cursor: pointer;
675
+ display: block;
676
+ position: relative;
677
+ }
678
+ .eds-input-group__label {
679
+ color: var(--components-form-baseform-standard-text-label);
1122
680
  display: flex;
1123
- font: inherit;
1124
681
  font-size: 1rem;
682
+ position: absolute;
1125
683
  line-height: 1rem;
1126
- padding: 0.5rem;
1127
- margin-right: -0.75rem;
684
+ height: 3rem;
685
+ padding-left: 0;
686
+ top: 1rem;
687
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
688
+ user-select: none;
689
+ pointer-events: none;
1128
690
  }
1129
- .eds-textfield__clear-button:hover {
1130
- background: var(--components-form-basepanel-standard-fill-hover);
691
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
692
+ top: 0.375rem;
693
+ font-size: 0.75rem;
694
+ line-height: 0.75rem;
695
+ height: 10px;
696
+ padding: 0;
1131
697
  }
1132
- .eds-textfield__clear-button:focus-visible {
1133
- outline: 2px solid #181c56;
1134
- outline-color: var(--basecolors-stroke-focus-standard);
1135
- outline-offset: 0.125rem;
698
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
699
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
700
+ background: var(--textarea-label-background);
701
+ width: calc(100% - 1rem - 1rem - 4px);
1136
702
  }
1137
- .eds-textfield__clear-button-wrapper {
1138
- display: flex;
1139
- align-items: center;
703
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
704
+ top: 0.5rem;
705
+ font-size: 0.875rem;
706
+ line-height: 1rem;
707
+ padding: 0;
1140
708
  }
1141
-
1142
- .eds-textfield__divider {
1143
- content: "";
1144
- display: block;
1145
- background-color: var(--components-form-baseform-standard-icon);
1146
- height: 1.5rem;
1147
- width: 1px;
709
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
710
+ top: 0.75rem;
711
+ font-size: 1.5rem;
712
+ line-height: 2.25rem;
1148
713
  }
1149
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
1150
- background-color: var(--components-form-baseform-contrast-icon);
714
+ .eds-input-group__label--filled {
715
+ top: 0.375rem;
716
+ font-size: 0.75rem;
717
+ line-height: 0.75rem;
718
+ height: 10px;
719
+ padding: 0;
720
+ }
721
+ .eds-textarea__label .eds-input-group__label--filled {
722
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
723
+ background: var(--textarea-label-background);
724
+ width: calc(100% - 1rem - 1rem - 4px);
725
+ }
726
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
727
+ top: 0.5rem;
728
+ font-size: 0.875rem;
729
+ line-height: 1rem;
730
+ padding: 0;
1151
731
  }
1152
732
 
1153
- .eds-textfield__wrapper {
1154
- cursor: text;
733
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
734
+ top: 0.375rem;
735
+ font-size: 0.75rem;
736
+ line-height: 0.75rem;
737
+ height: 10px;
738
+ padding: 0;
1155
739
  }
1156
- /* DO NOT CHANGE!*/
1157
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1158
- .eds-segmented-choice {
1159
- display: block;
1160
- flex: 1 1 0px;
740
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
741
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
742
+ background: var(--textarea-label-background);
743
+ width: calc(100% - 1rem - 1rem - 4px);
1161
744
  }
1162
- .eds-segmented-choice .eds-base-segmented {
1163
- --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1164
- background-color: var(--background-color);
1165
- border-radius: 0.25rem;
1166
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1167
- cursor: pointer;
745
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
746
+ top: 0.5rem;
1168
747
  font-size: 0.875rem;
1169
- height: 1.5rem;
1170
- line-height: 1.25rem;
1171
- margin: 0.25rem;
1172
- outline-color: transparent;
1173
- padding: calc(0.25rem / 2) 0.75rem;
1174
- text-align: center;
1175
- -webkit-user-select: none;
1176
- -moz-user-select: none;
1177
- user-select: none;
748
+ line-height: 1rem;
749
+ padding: 0;
1178
750
  }
1179
- .eds-segmented-choice .eds-base-segmented--large {
751
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
752
+ top: 1rem;
1180
753
  font-size: 1rem;
1181
- height: 2.5rem;
1182
- line-height: 1.5rem;
1183
- padding: 0.5rem 0.75rem;
754
+ height: 3rem;
755
+ line-height: 1rem;
756
+ }/* DO NOT CHANGE!*/
757
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
758
+ .eds-form-control__field-and-feedback-text {
759
+ display: flex;
760
+ flex-direction: column;
761
+ height: fit-content;
762
+ width: 100%;
1184
763
  }
1185
- .eds-contrast .eds-segmented-choice .eds-base-segmented {
1186
- --background-color: var(--components-form-segmentedcontrol-contrast-background);
1187
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
764
+ .eds-form-control__field-and-feedback-text--has-tooltip {
765
+ padding-right: 2rem;
1188
766
  }
1189
- .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1190
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
767
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
768
+ cursor: not-allowed;
1191
769
  }
1192
- .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1193
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
770
+ .eds-form-control-wrapper {
771
+ display: flex;
772
+ align-items: center;
773
+ position: relative;
774
+ flex: 1;
775
+ min-height: 3rem;
776
+ padding-inline: 1rem;
777
+ background-color: var(--components-form-baseform-standard-fill-default);
778
+ border-radius: 0.25rem;
779
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
780
+ box-shadow: 0 0 0 transparent;
781
+ color: var(--components-form-baseform-standard-text-content);
782
+ transition: border-color 0.1s ease-in-out;
1194
783
  }
1195
- .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1196
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1197
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
784
+ .eds-form-control-wrapper:hover {
785
+ border-color: var(--components-form-baseform-standard-border-interactive);
1198
786
  }
1199
- .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1200
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1201
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
787
+ .eds-contrast .eds-form-control-wrapper:hover {
788
+ border-color: var(--components-form-baseform-contrast-border-interactive);
1202
789
  }
1203
- .eds-segmented-choice input {
1204
- -webkit-appearance: none;
1205
- -moz-appearance: none;
1206
- appearance: none;
1207
- position: absolute;
1208
- opacity: 0;
1209
- height: 0;
1210
- width: 0;
790
+ .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
791
+ border-color: var(--components-form-baseform-standard-border-interactive);
792
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
1211
793
  }
1212
- .eds-segmented-choice input:checked + .eds-base-segmented {
1213
- --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1214
- color: var(--components-form-segmentedcontrol-standard-text-selected);
1215
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
794
+ .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
795
+ border-color: var(--components-form-baseform-contrast-border-interactive);
796
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
1216
797
  }
1217
- .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1218
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1219
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1220
- color: var(--components-form-segmentedcontrol-contrast-text-selected);
798
+ .eds-form-control-wrapper ::placeholder {
799
+ color: var(--components-form-baseform-standard-text-label);
1221
800
  }
1222
- .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1223
- outline: 2px solid #181c56;
1224
- outline-color: var(--basecolors-stroke-focus-standard);
1225
- outline-offset: 0.125rem;
801
+ .eds-form-control-wrapper--disabled {
802
+ border-color: transparent;
803
+ background-color: var(--components-form-baseform-standard-fill-disabled);
804
+ pointer-events: none;
805
+ color: var(--components-form-baseform-standard-text-disabled);
1226
806
  }
1227
- .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1228
- outline-color: var(--basecolors-stroke-focus-contrast);
807
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
808
+ color: var(--components-form-baseform-standard-text-disabled);
1229
809
  }
1230
- .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
810
+ .eds-contrast .eds-form-control-wrapper--disabled {
811
+ border-color: transparent;
812
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
813
+ color: var(--components-form-baseform-contrast-text-disabled);
814
+ }
815
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
816
+ color: var(--components-form-baseform-contrast-text-disabled);
817
+ }
818
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
819
+ display: none;
820
+ }
821
+ .eds-form-control-wrapper--disabled:focus-within {
822
+ border-color: transparent;
823
+ outline: none;
824
+ }
825
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
826
+ border-color: transparent;
827
+ outline: none;
828
+ }
829
+ .eds-form-control-wrapper--readonly {
830
+ border-color: transparent;
831
+ cursor: default;
832
+ background: var(--components-form-baseform-standard-fill-readonly);
833
+ border: var(--components-form-baseform-standard-fill-readonly);
834
+ }
835
+ .eds-form-control-wrapper--readonly:focus-visible {
836
+ outline: none;
837
+ }
838
+ .eds-contrast .eds-form-control-wrapper--readonly {
839
+ background: var(--components-form-baseform-contrast-fill-readonly);
840
+ border: var(--components-form-baseform-contrast-fill-readonly);
841
+ color: var(--components-form-baseform-contrast-text-description);
842
+ }
843
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
844
+ color: var(--components-form-baseform-contrast-text-description);
845
+ }
846
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
847
+ color: var(--components-form-baseform-contrast-text-description);
848
+ }
849
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
850
+ display: none;
851
+ }
852
+ .eds-form-control-wrapper--size-medium .eds-form-control,
853
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
854
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
855
+ font-size: 1rem;
856
+ line-height: 1rem;
857
+ }
858
+ .eds-form-control-wrapper--size-large {
859
+ min-height: 4rem;
860
+ }
861
+ .eds-form-control-wrapper--size-large .eds-form-control,
862
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
863
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
864
+ font-size: 1.5rem;
865
+ }
866
+ .eds-form-control-wrapper--success {
867
+ border-color: var(--components-form-baseform-standard-border-success);
868
+ }
869
+ .eds-form-control-wrapper--success:focus-within {
870
+ border-color: var(--components-form-baseform-standard-border-success);
871
+ outline-color: var(--components-form-baseform-standard-border-success);
872
+ }
873
+ .eds-contrast .eds-form-control-wrapper--success {
874
+ border-color: var(--components-form-baseform-standard-border-success);
875
+ }
876
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
877
+ border-color: var(--components-form-baseform-contrast-border-success);
878
+ outline-color: var(--components-form-baseform-contrast-border-success);
879
+ }
880
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
881
+ border-color: var(--components-form-baseform-standard-border-negative);
882
+ }
883
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
884
+ border-color: var(--components-form-baseform-standard-border-negative);
885
+ outline-color: var(--components-form-baseform-standard-border-negative);
886
+ }
887
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
888
+ border-color: var(--components-form-baseform-contrast-border-negative);
889
+ }
890
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
891
+ border-color: var(--components-form-baseform-contrast-border-negative);
892
+ outline-color: var(--components-form-baseform-contrast-border-negative);
893
+ }
894
+ .eds-contrast .eds-form-control .eds-tooltip {
895
+ background: var(--components-tooltip-tooltip-standard-fill);
896
+ color: var(--components-tooltip-tooltip-standard-text);
897
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
898
+ }
899
+ .eds-form-control .eds-tooltip::after {
900
+ background: var(--components-tooltip-tooltip-standard-fill);
901
+ }
902
+
903
+ .eds-form-control {
904
+ display: block;
905
+ appearance: none;
906
+ width: 100%;
907
+ height: 100%;
908
+ padding: 20px 0rem 0.25rem;
909
+ font-family: inherit;
910
+ font-size: 1rem;
911
+ line-height: 1rem;
912
+ border: 0;
913
+ color: var(--components-form-baseform-standard-text-content);
914
+ background-color: transparent;
915
+ }
916
+ .eds-form-control::placeholder {
917
+ opacity: 0;
918
+ transition: opacity 0.2s ease-in-out;
919
+ }
920
+ .eds-form-control:focus {
921
+ outline: none;
922
+ }
923
+ .eds-form-control:focus::placeholder {
924
+ opacity: 1;
925
+ }
926
+ .eds-form-control__prepend, .eds-form-control__append {
927
+ position: relative;
928
+ line-height: inherit;
929
+ }
930
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
931
+ all: unset;
932
+ position: absolute;
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ height: 1.5rem;
937
+ width: 1.5rem;
938
+ right: -2rem;
939
+ border-radius: 100%;
940
+ color: var(--primary-text-color);
941
+ cursor: pointer;
942
+ }
943
+ .eds-form-control__prepend {
944
+ margin-right: 0.75rem;
945
+ margin-left: 0;
946
+ }
947
+ .eds-form-control__append {
948
+ margin-right: 0;
949
+ margin-left: 0.75rem;
950
+ }/* DO NOT CHANGE!*/
951
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
952
+ .eds-checkbox__container {
953
+ display: flex;
954
+ align-items: center;
955
+ position: relative;
956
+ appearance: none;
957
+ cursor: pointer;
958
+ user-select: none;
959
+ width: fit-content;
960
+ margin: 0.5rem 0;
961
+ }
962
+ .eds-checkbox__container--reduced-click-area {
963
+ height: fit-content;
964
+ }
965
+ .eds-checkbox__container input {
966
+ position: absolute;
967
+ opacity: 0;
968
+ height: 0;
969
+ width: 0;
970
+ }
971
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
972
+ background-color: var(--components-form-checkbox-standard-fill-selected);
973
+ }
974
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
975
+ visibility: visible;
976
+ }
977
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
978
+ stroke: var(--components-form-checkbox-standard-icon);
979
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
980
+ }
981
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
982
+ fill: var(--components-form-checkbox-standard-icon);
983
+ }
984
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
985
+ color: var(--components-form-checkbox-contrast-fill-selected);
986
+ }
987
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
988
+ stroke: var(--components-form-checkbox-contrast-icon);
989
+ }
990
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
991
+ fill: var(--components-form-checkbox-contrast-icon);
992
+ }
993
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
994
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
995
+ }
996
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled :is(path, rect), .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled :is(path, rect) {
997
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
998
+ }
999
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
1000
+ background-color: var(--components-form-checkbox-standard-fill-disabled);
1001
+ }
1002
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
1003
+ stroke: var(--components-form-checkbox-standard-icon-readonly);
1004
+ }
1005
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
1006
+ fill: var(--components-form-checkbox-standard-icon-readonly);
1007
+ }
1008
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
1009
+ stroke: var(--components-form-checkbox-contrast-icon-readonly);
1010
+ }
1011
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
1012
+ fill: var(--components-form-checkbox-contrast-icon-readonly);
1013
+ }
1014
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
1015
+ border-color: var(--components-form-checkbox-standard-border);
1016
+ background-color: var(--components-form-checkbox-standard-fill-hover);
1017
+ }
1018
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
1019
+ border-color: var(--components-form-checkbox-contrast-border);
1020
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
1021
+ }
1022
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
1023
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
1024
+ border-color: transparent;
1025
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
1026
+ }
1027
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
1028
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
1029
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
1030
+ }
1031
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
1032
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
1033
+ background-color: var(--components-form-checkbox-standard-fill-selected);
1034
+ }
1035
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
1036
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
1037
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
1038
+ }
1039
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
1231
1040
  outline: 2px solid #181c56;
1232
1041
  outline-color: var(--basecolors-stroke-focus-standard);
1233
1042
  outline-offset: 0.125rem;
1234
1043
  }
1235
- .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1044
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
1236
1045
  outline-color: var(--basecolors-stroke-focus-contrast);
1237
1046
  }
1238
- /* DO NOT CHANGE!*/
1239
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1240
- .eds-segmented-control {
1241
- margin-top: 0.25rem;
1242
- display: flex;
1243
- background: var(--components-form-segmentedcontrol-standard-background);
1244
- border-radius: 0.5rem;
1047
+ .eds-checkbox--disabled {
1048
+ cursor: not-allowed;
1245
1049
  }
1246
- .eds-contrast .eds-segmented-control {
1247
- background: var(--components-form-segmentedcontrol-contrast-background);
1050
+ .eds-checkbox--disabled input {
1051
+ pointer-events: none;
1248
1052
  }
1249
- /* DO NOT CHANGE!*/
1250
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1251
- /* DO NOT CHANGE!*/
1252
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1253
- /* DO NOT CHANGE!*/
1254
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1255
- [data-color-mode=light],
1256
- :root {
1257
- --components-form-baseform-contrast-border-default: #8284ab;
1258
- --components-form-baseform-contrast-border-interactive: #aeb7e2;
1259
- --components-form-baseform-contrast-border-negative: #ff9494;
1260
- --components-form-baseform-contrast-border-success: #5ac39a;
1261
- --components-form-baseform-contrast-fill-default: #ffffff;
1262
- --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1263
- --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
1264
- --components-form-baseform-contrast-icon: #181c56;
1265
- --components-form-baseform-contrast-icon-disabled: #6e6f73;
1266
- --components-form-baseform-contrast-text-content: #181c56;
1267
- --components-form-baseform-contrast-text-description: #ffffff;
1268
- --components-form-baseform-contrast-text-label: #626493;
1269
- --components-form-baseform-contrast-text-disabled: #6e6f73;
1270
- --components-form-baseform-standard-border-default: #8284ab;
1271
- --components-form-baseform-standard-border-interactive: #181c56;
1272
- --components-form-baseform-standard-border-negative: #d31b1b;
1273
- --components-form-baseform-standard-border-success: #1a8e60;
1274
- --components-form-baseform-standard-fill-default: #ffffff;
1275
- --components-form-baseform-standard-fill-disabled: #cfd2d4;
1276
- --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
1277
- --components-form-baseform-standard-icon: #181c56;
1278
- --components-form-baseform-standard-icon-disabled: #6e6f73;
1279
- --components-form-baseform-standard-text-content: #181c56;
1280
- --components-form-baseform-standard-text-description: #181c56;
1281
- --components-form-baseform-standard-text-label: #626493;
1282
- --components-form-baseform-standard-text-disabled: #6e6f73;
1283
- --components-form-basemenu-border: #8284ab;
1284
- --components-form-basemenu-fill-default: #f2f5f7;
1285
- --components-form-basemenu-fill-hover: #d9ddf2;
1286
- --components-form-basemenu-fill-selected: #aeb7e2;
1287
- --components-form-basemenu-icon: #181c56;
1288
- --components-form-basemenu-icon-disabled: #6e6f73;
1289
- --components-form-basemenu-text: #181c56;
1290
- --components-form-basemenu-text-disabled: #6e6f73;
1291
- --components-form-basepanel-contrast-border-default: #8284ab;
1292
- --components-form-basepanel-contrast-border-disabled: #949699;
1293
- --components-form-basepanel-contrast-border-selected: #aeb7e2;
1294
- --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
1295
- --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1296
- --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
1297
- --components-form-basepanel-contrast-fill-hover: #54568c;
1298
- --components-form-basepanel-contrast-fill-selected: #393d79;
1299
- --components-form-basepanel-contrast-text-accent: #ffffff;
1300
- --components-form-basepanel-contrast-text-disabled: #b6b8ba;
1301
- --components-form-basepanel-contrast-text-rebate: #5ac39a;
1302
- --components-form-basepanel-contrast-text-subdued: #d9dae8;
1303
- --components-form-basepanel-standard-border-default: #8284ab;
1304
- --components-form-basepanel-standard-border-disabled: #949699;
1305
- --components-form-basepanel-standard-border-selected: #181c56;
1306
- --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
1307
- --components-form-basepanel-standard-fill-disabled: #cfd2d4;
1308
- --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
1309
- --components-form-basepanel-standard-fill-hover: #eaeaf1;
1310
- --components-form-basepanel-standard-fill-selected: #f6f6f9;
1311
- --components-form-basepanel-standard-text-accent: #181c56;
1312
- --components-form-basepanel-standard-text-disabled: #6e6f73;
1313
- --components-form-basepanel-standard-text-rebate: #1a8e60;
1314
- --components-form-basepanel-standard-text-subdued: #626493;
1315
- --components-form-checkbox-contrast-border: #aeb7e2;
1316
- --components-form-checkbox-contrast-border-disabled: #6e6f73;
1317
- --components-form-checkbox-contrast-border-negative: #ff9494;
1318
- --components-form-checkbox-contrast-border-readonly: #6e6f73;
1319
- --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
1320
- --components-form-checkbox-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1321
- --components-form-checkbox-contrast-fill-hover: #626493;
1322
- --components-form-checkbox-contrast-fill-selected: #aeb7e2;
1323
- --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
1324
- --components-form-checkbox-contrast-icon: #181c56;
1325
- --components-form-checkbox-contrast-icon-disabled: #949699;
1326
- --components-form-checkbox-contrast-icon-readonly: #ffffff;
1327
- --components-form-checkbox-contrast-text: #ffffff;
1328
- --components-form-checkbox-contrast-text-disabled: #949699;
1329
- --components-form-checkbox-standard-border: #181c56;
1330
- --components-form-checkbox-standard-border-disabled: #e3e6e8;
1331
- --components-form-checkbox-standard-border-negative: #d31b1b;
1332
- --components-form-checkbox-standard-border-readonly: #e3e6e8;
1333
- --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
1334
- --components-form-checkbox-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1335
- --components-form-checkbox-standard-fill-hover: #d9ddf2;
1336
- --components-form-checkbox-standard-fill-selected: #181c56;
1337
- --components-form-checkbox-standard-fill-selectedhover: #393d79;
1338
- --components-form-checkbox-standard-icon: #ffffff;
1339
- --components-form-checkbox-standard-icon-disabled: #b6b8ba;
1340
- --components-form-checkbox-standard-icon-readonly: #181c56;
1341
- --components-form-checkbox-standard-text: #181c56;
1342
- --components-form-checkbox-standard-text-disabled: #b6b8ba;
1343
- --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
1344
- --components-form-feedbacktext-information-contrast-icon-symbol: #181c56;
1345
- --components-form-feedbacktext-information-contrast-stroke: #181c56;
1346
- --components-form-feedbacktext-information-contrast-text: #ffffff;
1347
- --components-form-feedbacktext-information-standard-icon-fill: #067eb2;
1348
- --components-form-feedbacktext-information-standard-icon-symbol: #ffffff;
1349
- --components-form-feedbacktext-information-standard-stroke: #ffffff;
1350
- --components-form-feedbacktext-information-standard-text: #181c56;
1351
- --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
1352
- --components-form-feedbacktext-negative-contrast-icon-symbol: #181c56;
1353
- --components-form-feedbacktext-negative-contrast-stroke: #181c56;
1354
- --components-form-feedbacktext-negative-contrast-text: #ffffff;
1355
- --components-form-feedbacktext-negative-standard-icon-fill: #d31b1b;
1356
- --components-form-feedbacktext-negative-standard-stroke: #ffffff;
1357
- --components-form-feedbacktext-negative-standard-symbol: #ffffff;
1358
- --components-form-feedbacktext-negative-standard-text: #181c56;
1359
- --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
1360
- --components-form-feedbacktext-success-contrast-icon-stroke: #181c56;
1361
- --components-form-feedbacktext-success-contrast-icon-symbol: #181c56;
1362
- --components-form-feedbacktext-success-contrast-text: #ffffff;
1363
- --components-form-feedbacktext-success-standard-icon-fill: #1a8e60;
1364
- --components-form-feedbacktext-success-standard-icon-stroke: #ffffff;
1365
- --components-form-feedbacktext-success-standard-icon-symbol: #ffffff;
1366
- --components-form-feedbacktext-success-standard-text: #181c56;
1367
- --components-form-feedbacktext-warning-contrast-icon: #ffe082;
1368
- --components-form-feedbacktext-warning-contrast-icon-symbol: #181c56;
1369
- --components-form-feedbacktext-warning-contrast-stroke: #181c56;
1370
- --components-form-feedbacktext-warning-contrast-text: #ffffff;
1371
- --components-form-feedbacktext-warning-standard-icon-fill: #ffca28;
1372
- --components-form-feedbacktext-warning-standard-icon-symbol: #181c56;
1373
- --components-form-feedbacktext-warning-standard-stroke: #ffffff;
1374
- --components-form-feedbacktext-warning-standard-text: #181c56;
1375
- --components-form-radio-contrast-border: #aeb7e2;
1376
- --components-form-radio-contrast-border-disabled: #6e6f73;
1377
- --components-form-radio-contrast-border-negative: #ff9494;
1378
- --components-form-radio-contrast-border-readonly: #6e6f73;
1379
- --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
1380
- --components-form-radio-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1381
- --components-form-radio-contrast-fill-hover: #626493;
1382
- --components-form-radio-contrast-fill-selected: #aeb7e2;
1383
- --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
1384
- --components-form-radio-contrast-icon: #ffffff;
1385
- --components-form-radio-contrast-icon-disabled: #949699;
1386
- --components-form-radio-contrast-icon-readonly: #ffffff;
1387
- --components-form-radio-contrast-text: #ffffff;
1388
- --components-form-radio-contrast-text-disabled: #949699;
1389
- --components-form-radio-standard-border: #181c56;
1390
- --components-form-radio-standard-border-disabled: #e3e6e8;
1391
- --components-form-radio-standard-border-negative: #d31b1b;
1392
- --components-form-radio-standard-border-readonly: #e3e6e8;
1393
- --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
1394
- --components-form-radio-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1395
- --components-form-radio-standard-fill-hover: #d9ddf2;
1396
- --components-form-radio-standard-fill-selected: #181c56;
1397
- --components-form-radio-standard-icon: #181c56;
1398
- --components-form-radio-standard-icon-disabled: #b6b8ba;
1399
- --components-form-radio-standard-icon-readonly: #181c56;
1400
- --components-form-radio-standard-selectedhover: #393d79;
1401
- --components-form-radio-standard-text: #181c56;
1402
- --components-form-radio-standard-text-disabled: #b6b8ba;
1403
- --components-form-segmentedcontrol-contrast-background: #393d79;
1404
- --components-form-segmentedcontrol-contrast-fill-hover: #626493;
1405
- --components-form-segmentedcontrol-contrast-fill-selected: #ffffff;
1406
- --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
1407
- --components-form-segmentedcontrol-contrast-icon-selected: #181c56;
1408
- --components-form-segmentedcontrol-contrast-icon-unselected: #ffffff;
1409
- --components-form-segmentedcontrol-contrast-text-selected: #181c56;
1410
- --components-form-segmentedcontrol-contrast-text-unselected: #ffffff;
1411
- --components-form-segmentedcontrol-standard-background: #d9dae8;
1412
- --components-form-segmentedcontrol-standard-fill-hover: #eaeaf1;
1413
- --components-form-segmentedcontrol-standard-fill-selected: #ffffff;
1414
- --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
1415
- --components-form-segmentedcontrol-standard-icon-selected: #181c56;
1416
- --components-form-segmentedcontrol-standard-icon-unselected: #181c56;
1417
- --components-form-segmentedcontrol-standard-text-selected: #181c56;
1418
- --components-form-segmentedcontrol-standard-text-unselected: #181c56;
1419
- --components-form-switch-contrast-fill-false: #9ea0bd;
1420
- --components-form-switch-contrast-fill-true: #5ac39a;
1421
- --components-form-switch-contrast-icon-false: #626493;
1422
- --components-form-switch-contrast-icon-true: #181c56;
1423
- --components-form-switch-contrast-switch: #ffffff;
1424
- --components-form-switch-contrast-text: #ffffff;
1425
- --components-form-switch-standard-fill-false: #949699;
1426
- --components-form-switch-standard-fill-true: #1a8e60;
1427
- --components-form-switch-standard-icon-false: #6e6f73;
1428
- --components-form-switch-standard-icon-true: #181c56;
1429
- --components-form-switch-standard-switch: #ffffff;
1430
- --components-form-switch-standard-text: #181c56;
1053
+ .eds-checkbox--disabled .eds-checkbox__label {
1054
+ opacity: 0.5;
1055
+ }
1056
+ .eds-checkbox--disabled .eds-checkbox__icon {
1057
+ border-color: var(--components-form-checkbox-standard-icon-disabled);
1058
+ }
1059
+ .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
1060
+ border-color: var(--components-form-checkbox-contrast-icon-disabled);
1061
+ }
1062
+ .eds-checkbox--readonly {
1063
+ cursor: default;
1064
+ pointer-events: auto;
1065
+ user-select: text;
1066
+ }
1067
+ .eds-checkbox--readonly input {
1068
+ pointer-events: auto;
1069
+ user-select: text;
1070
+ }
1071
+ .eds-checkbox--readonly .eds-checkbox__icon {
1072
+ border-color: var(--components-form-checkbox-standard-border-readonly);
1073
+ }
1074
+ .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
1075
+ border-color: var(--components-form-checkbox-contrast-border-readonly);
1076
+ }
1077
+ .eds-checkbox__icon {
1078
+ box-sizing: border-box;
1079
+ display: inline-flex;
1080
+ justify-content: center;
1081
+ align-items: center;
1082
+ position: relative;
1083
+ margin-right: 1rem;
1084
+ height: 1.25rem;
1085
+ width: 1.25rem;
1086
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
1087
+ border-radius: 0.125rem;
1088
+ background-color: transparent;
1089
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
1090
+ }
1091
+ .eds-checkbox__icon--reduced-click-area {
1092
+ margin-right: 0;
1093
+ }
1094
+ .eds-contrast .eds-checkbox__icon {
1095
+ border-color: var(--components-form-checkbox-contrast-border);
1096
+ }
1097
+ .eds-checkbox__icon .eds-checkbox-icon {
1098
+ height: 1rem;
1099
+ width: 1rem;
1100
+ visibility: hidden;
1101
+ }
1102
+ .eds-checkbox__icon .eds-checkbox-icon path {
1103
+ transform-origin: 50% 50%;
1104
+ stroke-dasharray: 48;
1105
+ stroke-dashoffset: 48;
1106
+ stroke-width: 0.375rem;
1107
+ }
1108
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
1109
+ animation: none !important;
1110
+ transition: none !important;
1111
+ stroke-dasharray: 48;
1112
+ stroke-dashoffset: 0;
1113
+ }
1114
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
1115
+ transition: none !important;
1431
1116
  }
1432
1117
 
1433
- [data-color-mode=dark] {
1434
- --components-form-baseform-contrast-border-default: #8284ab;
1435
- --components-form-baseform-contrast-border-interactive: #aeb7e2;
1436
- --components-form-baseform-contrast-border-negative: #ff9494;
1437
- --components-form-baseform-contrast-border-success: #5ac39a;
1438
- --components-form-baseform-contrast-fill-default: rgba(255, 255, 255, 0);
1439
- --components-form-baseform-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1440
- --components-form-baseform-contrast-fill-readonly: rgba(255, 255, 255, 0);
1441
- --components-form-baseform-contrast-icon: #e5e5e9;
1442
- --components-form-baseform-contrast-icon-disabled: #6e6f73;
1443
- --components-form-baseform-contrast-text-content: #e5e5e9;
1444
- --components-form-baseform-contrast-text-description: #e5e5e9;
1445
- --components-form-baseform-contrast-text-label: #b3b4bd;
1446
- --components-form-baseform-contrast-text-disabled: #6e6f73;
1447
- --components-form-baseform-standard-border-default: #8284ab;
1448
- --components-form-baseform-standard-border-interactive: #aeb7e2;
1449
- --components-form-baseform-standard-border-negative: #ff9494;
1450
- --components-form-baseform-standard-border-success: #5ac39a;
1451
- --components-form-baseform-standard-fill-default: rgba(255, 255, 255, 0);
1452
- --components-form-baseform-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1453
- --components-form-baseform-standard-fill-readonly: rgba(255, 255, 255, 0);
1454
- --components-form-baseform-standard-icon: #e5e5e9;
1455
- --components-form-baseform-standard-icon-disabled: #6e6f73;
1456
- --components-form-baseform-standard-text-content: #e5e5e9;
1457
- --components-form-baseform-standard-text-description: #e5e5e9;
1458
- --components-form-baseform-standard-text-label: #b3b4bd;
1459
- --components-form-baseform-standard-text-disabled: #6e6f73;
1460
- --components-form-basemenu-border: rgba(255, 255, 255, 0);
1461
- --components-form-basemenu-fill-default: #464755;
1462
- --components-form-basemenu-fill-hover: #626493;
1463
- --components-form-basemenu-fill-selected: #8794d4;
1464
- --components-form-basemenu-icon: #e5e5e9;
1465
- --components-form-basemenu-icon-disabled: #949699;
1466
- --components-form-basemenu-text: #e5e5e9;
1467
- --components-form-basemenu-text-disabled: #949699;
1468
- --components-form-basepanel-contrast-border-default: #81828f;
1469
- --components-form-basepanel-contrast-border-disabled: #949699;
1470
- --components-form-basepanel-contrast-border-selected: #aeb7e2;
1471
- --components-form-basepanel-contrast-fill-default: rgba(255, 255, 255, 0);
1472
- --components-form-basepanel-contrast-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1473
- --components-form-basepanel-contrast-fill-expired: rgba(255, 148, 148, 0.2);
1474
- --components-form-basepanel-contrast-fill-hover: #393a49;
1475
- --components-form-basepanel-contrast-fill-selected: rgba(229, 229, 233, 0.1490196078);
1476
- --components-form-basepanel-contrast-text-accent: #e5e5e9;
1477
- --components-form-basepanel-contrast-text-disabled: #b6b8ba;
1478
- --components-form-basepanel-contrast-text-rebate: #5ac39a;
1479
- --components-form-basepanel-contrast-text-subdued: #b3b4bd;
1480
- --components-form-basepanel-standard-border-default: #81828f;
1481
- --components-form-basepanel-standard-border-disabled: #949699;
1482
- --components-form-basepanel-standard-border-selected: #aeb7e2;
1483
- --components-form-basepanel-standard-fill-default: rgba(255, 255, 255, 0);
1484
- --components-form-basepanel-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1485
- --components-form-basepanel-standard-fill-expired: rgba(255, 148, 148, 0.2);
1486
- --components-form-basepanel-standard-fill-hover: #393a49;
1487
- --components-form-basepanel-standard-fill-selected: rgba(229, 229, 233, 0.1490196078);
1488
- --components-form-basepanel-standard-text-accent: #e5e5e9;
1489
- --components-form-basepanel-standard-text-disabled: #b6b8ba;
1490
- --components-form-basepanel-standard-text-rebate: #5ac39a;
1491
- --components-form-basepanel-standard-text-subdued: #b3b4bd;
1492
- --components-form-checkbox-contrast-border: #aeb7e2;
1493
- --components-form-checkbox-contrast-border-disabled: #6e6f73;
1494
- --components-form-checkbox-contrast-border-negative: #ff9494;
1495
- --components-form-checkbox-contrast-border-readonly: #6e6f73;
1496
- --components-form-checkbox-contrast-fill-default: rgba(255, 255, 255, 0);
1497
- --components-form-checkbox-contrast-fill-disabled: rgba(204, 205, 212, 0.3019607843);
1498
- --components-form-checkbox-contrast-fill-hover: #626493;
1499
- --components-form-checkbox-contrast-fill-selected: #aeb7e2;
1500
- --components-form-checkbox-contrast-fill-selectedhover: #c7cdeb;
1501
- --components-form-checkbox-contrast-icon: #181c56;
1502
- --components-form-checkbox-contrast-icon-disabled: #6e6f73;
1503
- --components-form-checkbox-contrast-icon-readonly: #e5e5e9;
1504
- --components-form-checkbox-contrast-text: #e5e5e9;
1505
- --components-form-checkbox-contrast-text-disabled: #6e6f73;
1506
- --components-form-checkbox-standard-border: #aeb7e2;
1507
- --components-form-checkbox-standard-border-disabled: #6e6f73;
1508
- --components-form-checkbox-standard-border-negative: #ff9494;
1509
- --components-form-checkbox-standard-border-readonly: #6e6f73;
1510
- --components-form-checkbox-standard-fill-default: rgba(255, 255, 255, 0);
1511
- --components-form-checkbox-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1512
- --components-form-checkbox-standard-fill-hover: #626493;
1513
- --components-form-checkbox-standard-fill-selected: #aeb7e2;
1514
- --components-form-checkbox-standard-fill-selectedhover: #c7cdeb;
1515
- --components-form-checkbox-standard-icon: #181c56;
1516
- --components-form-checkbox-standard-icon-disabled: #6e6f73;
1517
- --components-form-checkbox-standard-icon-readonly: #e5e5e9;
1518
- --components-form-checkbox-standard-text: #e5e5e9;
1519
- --components-form-checkbox-standard-text-disabled: #6e6f73;
1520
- --components-form-feedbacktext-information-contrast-icon-fill: #64b3e7;
1521
- --components-form-feedbacktext-information-contrast-icon-symbol: #08091c;
1522
- --components-form-feedbacktext-information-contrast-stroke: #08091c;
1523
- --components-form-feedbacktext-information-contrast-text: #e5e5e9;
1524
- --components-form-feedbacktext-information-standard-icon-fill: #64b3e7;
1525
- --components-form-feedbacktext-information-standard-icon-symbol: #08091c;
1526
- --components-form-feedbacktext-information-standard-stroke: #08091c;
1527
- --components-form-feedbacktext-information-standard-text: #e5e5e9;
1528
- --components-form-feedbacktext-negative-contrast-icon-fill: #ff9494;
1529
- --components-form-feedbacktext-negative-contrast-icon-symbol: #08091c;
1530
- --components-form-feedbacktext-negative-contrast-stroke: #08091c;
1531
- --components-form-feedbacktext-negative-contrast-text: #e5e5e9;
1532
- --components-form-feedbacktext-negative-standard-icon-fill: #ff9494;
1533
- --components-form-feedbacktext-negative-standard-stroke: #08091c;
1534
- --components-form-feedbacktext-negative-standard-symbol: #08091c;
1535
- --components-form-feedbacktext-negative-standard-text: #e5e5e9;
1536
- --components-form-feedbacktext-success-contrast-icon-fill: #5ac39a;
1537
- --components-form-feedbacktext-success-contrast-icon-stroke: #08091c;
1538
- --components-form-feedbacktext-success-contrast-icon-symbol: #08091c;
1539
- --components-form-feedbacktext-success-contrast-text: #e5e5e9;
1540
- --components-form-feedbacktext-success-standard-icon-fill: #5ac39a;
1541
- --components-form-feedbacktext-success-standard-icon-stroke: #08091c;
1542
- --components-form-feedbacktext-success-standard-icon-symbol: #08091c;
1543
- --components-form-feedbacktext-success-standard-text: #e5e5e9;
1544
- --components-form-feedbacktext-warning-contrast-icon: #ffe082;
1545
- --components-form-feedbacktext-warning-contrast-icon-symbol: #08091c;
1546
- --components-form-feedbacktext-warning-contrast-stroke: #08091c;
1547
- --components-form-feedbacktext-warning-contrast-text: #e5e5e9;
1548
- --components-form-feedbacktext-warning-standard-icon-fill: #ffe082;
1549
- --components-form-feedbacktext-warning-standard-icon-symbol: #08091c;
1550
- --components-form-feedbacktext-warning-standard-stroke: #08091c;
1551
- --components-form-feedbacktext-warning-standard-text: #e5e5e9;
1552
- --components-form-radio-contrast-border: #aeb7e2;
1553
- --components-form-radio-contrast-border-disabled: #6e6f73;
1554
- --components-form-radio-contrast-border-negative: #ff9494;
1555
- --components-form-radio-contrast-border-readonly: #6e6f73;
1556
- --components-form-radio-contrast-fill-default: rgba(255, 255, 255, 0);
1557
- --components-form-radio-contrast-fill-disabled: rgba(204, 205, 212, 0.3019607843);
1558
- --components-form-radio-contrast-fill-hover: #626493;
1559
- --components-form-radio-contrast-fill-selected: #aeb7e2;
1560
- --components-form-radio-contrast-fill-selectedhover: #c7cdeb;
1561
- --components-form-radio-contrast-icon: #e5e5e9;
1562
- --components-form-radio-contrast-icon-disabled: #6e6f73;
1563
- --components-form-radio-contrast-icon-readonly: #e5e5e9;
1564
- --components-form-radio-contrast-text: #e5e5e9;
1565
- --components-form-radio-contrast-text-disabled: #6e6f73;
1566
- --components-form-radio-standard-border: #aeb7e2;
1567
- --components-form-radio-standard-border-disabled: #6e6f73;
1568
- --components-form-radio-standard-border-negative: #ff9494;
1569
- --components-form-radio-standard-border-readonly: #6e6f73;
1570
- --components-form-radio-standard-fill-default: rgba(255, 255, 255, 0);
1571
- --components-form-radio-standard-fill-disabled: rgba(207, 210, 212, 0.1490196078);
1572
- --components-form-radio-standard-fill-hover: #626493;
1573
- --components-form-radio-standard-fill-selected: #aeb7e2;
1574
- --components-form-radio-standard-icon: #e5e5e9;
1575
- --components-form-radio-standard-icon-disabled: #6e6f73;
1576
- --components-form-radio-standard-icon-readonly: #e5e5e9;
1577
- --components-form-radio-standard-selectedhover: #c7cdeb;
1578
- --components-form-radio-standard-text: #e5e5e9;
1579
- --components-form-radio-standard-text-disabled: #6e6f73;
1580
- --components-form-segmentedcontrol-contrast-background: rgba(229, 229, 233, 0.1490196078);
1581
- --components-form-segmentedcontrol-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
1582
- --components-form-segmentedcontrol-contrast-fill-selected: #e5e5e9;
1583
- --components-form-segmentedcontrol-contrast-fill-unselected: rgba(255, 255, 255, 0);
1584
- --components-form-segmentedcontrol-contrast-icon-selected: #08091c;
1585
- --components-form-segmentedcontrol-contrast-icon-unselected: #e5e5e9;
1586
- --components-form-segmentedcontrol-contrast-text-selected: #08091c;
1587
- --components-form-segmentedcontrol-contrast-text-unselected: #e5e5e9;
1588
- --components-form-segmentedcontrol-standard-background: rgba(229, 229, 233, 0.1490196078);
1589
- --components-form-segmentedcontrol-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
1590
- --components-form-segmentedcontrol-standard-fill-selected: #e5e5e9;
1591
- --components-form-segmentedcontrol-standard-fill-unselected: rgba(255, 255, 255, 0);
1592
- --components-form-segmentedcontrol-standard-icon-selected: #08091c;
1593
- --components-form-segmentedcontrol-standard-icon-unselected: #e5e5e9;
1594
- --components-form-segmentedcontrol-standard-text-selected: #08091c;
1595
- --components-form-segmentedcontrol-standard-text-unselected: #e5e5e9;
1596
- --components-form-switch-contrast-fill-false: rgba(229, 229, 233, 0.3490196078);
1597
- --components-form-switch-contrast-fill-true: #5ac39a;
1598
- --components-form-switch-contrast-icon-false: #b3b4bd;
1599
- --components-form-switch-contrast-icon-true: #e5e5e9;
1600
- --components-form-switch-contrast-switch: #08091c;
1601
- --components-form-switch-contrast-text: #e5e5e9;
1602
- --components-form-switch-standard-fill-false: rgba(229, 229, 233, 0.3490196078);
1603
- --components-form-switch-standard-fill-true: #5ac39a;
1604
- --components-form-switch-standard-icon-false: #b3b4bd;
1605
- --components-form-switch-standard-icon-true: #e5e5e9;
1606
- --components-form-switch-standard-switch: #08091c;
1607
- --components-form-switch-standard-text: #e5e5e9;
1118
+ @keyframes stroke {
1119
+ 100% {
1120
+ stroke-dashoffset: 0;
1121
+ }
1122
+ }.eds-fieldset {
1123
+ margin: 0;
1124
+ padding: 0;
1125
+ border: 0;
1126
+ }/* DO NOT CHANGE!*/
1127
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1128
+ .eds-form-component--radio__container {
1129
+ display: flex;
1130
+ justify-content: center;
1131
+ align-items: center;
1132
+ position: relative;
1133
+ cursor: pointer;
1134
+ height: 2rem;
1135
+ width: fit-content;
1136
+ user-select: none;
1137
+ }
1138
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
1139
+ background-color: var(--components-form-radio-standard-fill-hover);
1140
+ }
1141
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
1142
+ background-color: var(--components-form-radio-contrast-fill-hover);
1143
+ }
1144
+ .eds-form-component--radio__container input {
1145
+ position: absolute;
1146
+ opacity: 0;
1147
+ cursor: pointer;
1148
+ height: 0;
1149
+ width: 0;
1150
+ }
1151
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
1152
+ height: 0.625rem;
1153
+ width: 0.625rem;
1154
+ }
1155
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
1156
+ outline: 2px solid #181c56;
1157
+ outline-color: var(--basecolors-stroke-focus-standard);
1158
+ outline-offset: 0.125rem;
1159
+ }
1160
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
1161
+ outline-color: var(--basecolors-stroke-focus-contrast);
1162
+ }
1163
+ .eds-form-component--radio__container:has(input:disabled) {
1164
+ cursor: not-allowed;
1165
+ }
1166
+ .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
1167
+ cursor: default;
1168
+ user-select: text;
1169
+ }
1170
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
1171
+ position: relative;
1172
+ height: 1.25rem;
1173
+ width: 1.25rem;
1174
+ margin-right: 1rem;
1175
+ background-color: var(--components-form-radio-standard-fill-default);
1176
+ border: 0.125rem solid var(--components-form-radio-standard-border);
1177
+ border-radius: 50%;
1178
+ display: flex;
1179
+ align-items: center;
1180
+ justify-content: center;
1181
+ }
1182
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
1183
+ background-color: var(--components-form-radio-contrast-fill-default);
1184
+ border-color: var(--components-form-radio-contrast-border);
1185
+ }
1186
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
1187
+ background: var(--components-form-radio-contrast-fill-disabled);
1188
+ border-color: var(--components-form-radio-contrast-text-disabled);
1189
+ }
1190
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
1191
+ border-color: var(--components-form-radio-contrast-text-disabled);
1192
+ }
1193
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
1194
+ background: var(--components-form-radio-contrast-fill-disabled);
1195
+ border-color: var(--components-form-radio-contrast-text-disabled);
1196
+ }
1197
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
1198
+ color: var(--components-form-radio-contrast-text-disabled);
1199
+ }
1200
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
1201
+ background-color: var(--components-form-radio-standard-icon-disabled);
1202
+ border-color: var(--components-form-radio-contrast-text-disabled);
1203
+ }
1204
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
1205
+ background-color: var(--components-form-radio-standard-icon-disabled);
1206
+ }
1207
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
1208
+ background-color: var(--components-form-radio-contrast-icon-disabled);
1209
+ }
1210
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
1211
+ background: var(--components-form-radio-standard-fill-disabled);
1212
+ border-color: var(--components-form-radio-standard-border-readonly);
1213
+ }
1214
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
1215
+ background: var(--components-form-radio-contrast-fill-disabled);
1216
+ border-color: var(--components-form-radio-contrast-border-readonly);
1217
+ }
1218
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
1219
+ background-color: var(--components-form-radio-standard-icon);
1220
+ border-color: var(--components-form-radio-standard-border-readonly);
1221
+ }
1222
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
1223
+ display: block;
1224
+ width: 0;
1225
+ height: 0;
1226
+ border-radius: 50%;
1227
+ background-color: var(--components-form-radio-standard-fill-selected);
1228
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
1229
+ }
1230
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
1231
+ background-color: var(--components-form-radio-contrast-icon);
1232
+ }/* DO NOT CHANGE!*/
1233
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1234
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
1235
+ outline: 2px solid #181c56;
1236
+ outline-color: var(--basecolors-stroke-focus-standard);
1237
+ outline-offset: 0.125rem;
1238
+ }
1239
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
1240
+ outline-color: var(--basecolors-stroke-focus-contrast);
1241
+ }
1242
+ .eds-input-panel > input {
1243
+ position: absolute;
1244
+ opacity: 0;
1245
+ cursor: pointer;
1246
+ height: 0;
1247
+ width: 0;
1248
+ }
1249
+ .eds-input-panel > input:checked + .eds-input-panel__container {
1250
+ border-color: var(--components-form-basepanel-standard-border-selected);
1251
+ background: var(--components-form-basepanel-standard-fill-selected);
1252
+ }
1253
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
1254
+ border-color: var(--components-form-basepanel-contrast-border-selected);
1255
+ background: var(--components-form-basepanel-contrast-fill-selected);
1256
+ }
1257
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
1258
+ width: 0.75rem;
1259
+ height: 0.75rem;
1260
+ }
1261
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
1262
+ background-color: var(--components-form-radio-contrast-icon);
1263
+ }
1264
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
1265
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1266
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
1267
+ hover state styling with the inputPanel container */
1268
+ }
1269
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
1270
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1271
+ }
1272
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1273
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1274
+ border-color: var(--components-form-basepanel-standard-border-selected);
1275
+ }
1276
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1277
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1278
+ border-color: var(--components-form-basepanel-contrast-border-selected);
1279
+ }
1280
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1281
+ border-color: transparent;
1282
+ }
1283
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1284
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
1285
+ }
1286
+ .eds-input-panel__container {
1287
+ background: var(--components-form-basepanel-standard-fill-default);
1288
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
1289
+ color: var(--components-form-basepanel-standard-text-accent);
1290
+ border-radius: 0.25rem;
1291
+ display: flex;
1292
+ flex-direction: column;
1293
+ justify-content: flex-start;
1294
+ min-width: 20rem;
1295
+ position: relative;
1296
+ padding: 1rem;
1297
+ user-select: none;
1298
+ width: fit-content;
1299
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
1300
+ }
1301
+ .eds-contrast .eds-input-panel__container {
1302
+ background-color: var(--components-form-basepanel-contrast-fill-default);
1303
+ border-color: var(--components-form-basepanel-contrast-border-default);
1304
+ color: var(--components-form-basepanel-contrast-text-accent);
1305
+ }
1306
+ .eds-input-panel__container:hover {
1307
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1308
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
1309
+ hover state styling with the inputPanel container */
1310
+ }
1311
+ .eds-contrast .eds-input-panel__container:hover {
1312
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1313
+ }
1314
+ .eds-input-panel__container:hover .eds-checkbox__icon,
1315
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
1316
+ background-color: var(--components-form-basepanel-standard-fill-hover);
1317
+ border-color: var(--components-form-basepanel-standard-border-selected);
1318
+ }
1319
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
1320
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
1321
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
1322
+ border-color: var(--components-form-basepanel-contrast-border-selected);
1323
+ }
1324
+ input:disabled + .eds-input-panel__container {
1325
+ background: var(--components-form-basepanel-standard-fill-disabled);
1326
+ border-color: var(--components-form-basepanel-standard-border-disabled);
1327
+ color: var(--components-form-basepanel-standard-text-disabled);
1328
+ cursor: not-allowed;
1329
+ }
1330
+ .eds-contrast input:disabled + .eds-input-panel__container {
1331
+ background: var(--components-form-basepanel-contrast-fill-disabled);
1332
+ border-style: dashed;
1333
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
1334
+ color: var(--components-form-basepanel-contrast-text-disabled);
1335
+ }
1336
+ .eds-input-panel__container .eds-checkbox__icon,
1337
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
1338
+ .eds-input-panel__container .eds-form-component--radio__radio {
1339
+ width: 1.5rem;
1340
+ height: 1.5rem;
1341
+ margin-right: 0;
1342
+ }
1343
+ .eds-input-panel--medium .eds-input-panel__title {
1344
+ font-size: 1rem;
1345
+ font-weight: 500;
1346
+ }
1347
+ .eds-input-panel--medium.eds-input-panel__container {
1348
+ padding-bottom: 1rem;
1349
+ min-height: 3.75rem;
1350
+ }
1351
+ .eds-input-panel--large.eds-input-panel__container {
1352
+ min-height: 6rem;
1353
+ }
1354
+ .eds-input-panel--large .eds-input-panel__title {
1355
+ font-size: 1.25rem;
1356
+ font-weight: 500;
1357
+ line-height: 1.875rem;
1358
+ }
1359
+ .eds-input-panel__title-wrapper {
1360
+ display: flex;
1361
+ justify-content: space-between;
1362
+ align-items: center;
1363
+ }
1364
+ .eds-input-panel__secondary-label-and-icon-wrapper {
1365
+ display: flex;
1366
+ justify-content: center;
1367
+ align-items: center;
1368
+ gap: 0.75rem;
1369
+ }
1370
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1371
+ margin: 0;
1372
+ }
1373
+ .eds-input-panel__additional-content {
1374
+ margin-top: 0.25rem;
1375
+ word-wrap: break-word;
1376
+ }/* DO NOT CHANGE!*/
1377
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1378
+ .eds-switch {
1379
+ cursor: pointer;
1380
+ user-select: none;
1381
+ padding: 0.5rem 0;
1382
+ width: fit-content;
1383
+ }
1384
+ .eds-switch input {
1385
+ opacity: 0;
1386
+ pointer-events: none;
1387
+ position: absolute;
1388
+ }
1389
+ .eds-switch--right {
1390
+ display: flex;
1391
+ flex-direction: row;
1392
+ align-items: center;
1393
+ }
1394
+ .eds-switch--bottom {
1395
+ display: flex;
1396
+ flex-direction: column;
1397
+ align-items: center;
1398
+ }
1399
+ .eds-switch__circle {
1400
+ border-radius: 50%;
1401
+ height: 1.25rem;
1402
+ width: 1.25rem;
1403
+ content: "";
1404
+ display: flex;
1405
+ align-items: center;
1406
+ justify-content: center;
1407
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
1408
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1409
+ background-color: var(--components-form-switch-standard-switch);
1410
+ top: 0.125rem;
1411
+ left: 0.125rem;
1412
+ position: relative;
1413
+ }
1414
+ .eds-switch__switch--large .eds-switch__circle {
1415
+ height: 1.75rem;
1416
+ width: 1.75rem;
1417
+ }
1418
+ .eds-contrast .eds-switch__circle {
1419
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
1420
+ }
1421
+ .eds-switch__switch {
1422
+ position: relative;
1423
+ background-color: var(--components-form-switch-standard-fill-false);
1424
+ content: "";
1425
+ display: block;
1426
+ transition: background-color 0.1s ease-in-out;
1427
+ height: 1.5rem;
1428
+ width: 3rem;
1429
+ border-radius: 1.5rem;
1430
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
1431
+ }
1432
+ .eds-contrast .eds-switch__switch {
1433
+ background-color: var(--components-form-switch-contrast-fill-false);
1608
1434
  }
1609
-
1435
+ .eds-switch--right .eds-switch__switch {
1436
+ margin-right: 0.75rem;
1437
+ }
1438
+ .eds-switch__switch svg g,
1439
+ .eds-switch__switch path {
1440
+ fill: var(--components-form-switch-standard-icon-false);
1441
+ transition: fill ease-in-out 0.1s;
1442
+ }
1443
+ .eds-contrast .eds-switch__switch svg g,
1444
+ .eds-contrast .eds-switch__switch path {
1445
+ fill: var(--components-form-switch-contrast-icon-false);
1446
+ }
1447
+ :checked + .eds-switch__switch {
1448
+ background-color: var(--eds-switch-color);
1449
+ }
1450
+ :checked + .eds-switch__switch .eds-switch__circle {
1451
+ left: 1.625rem;
1452
+ }
1453
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
1454
+ :checked + .eds-switch__switch .eds-switch__circle path {
1455
+ fill: var(--eds-switch-color);
1456
+ }
1457
+ .eds-contrast :checked + .eds-switch__switch {
1458
+ background-color: var(--eds-switch-contrast-color);
1459
+ }
1460
+ :focus-visible + .eds-switch__switch {
1461
+ outline: 2px solid #181c56;
1462
+ outline-color: var(--basecolors-stroke-focus-standard);
1463
+ outline-offset: 0.125rem;
1464
+ }
1465
+ .eds-contrast :focus-visible + .eds-switch__switch {
1466
+ outline-color: var(--basecolors-stroke-focus-contrast);
1467
+ }
1468
+ .eds-switch__switch--large {
1469
+ width: 3.75rem;
1470
+ height: 2rem;
1471
+ border-radius: 3.75rem;
1472
+ }
1473
+ :checked + .eds-switch__switch--large .eds-switch__circle {
1474
+ left: 1.875rem;
1475
+ }
1476
+ .eds-switch__switch--large svg {
1477
+ position: relative;
1478
+ right: 0.05rem;
1479
+ }
1480
+ .eds-switch__label--large--right {
1481
+ font-size: 1rem;
1482
+ }
1483
+ .eds-switch__label--large--bottom {
1484
+ font-size: 0.875rem;
1485
+ }
1486
+ .eds-switch__label--medium--right {
1487
+ font-size: 0.875rem;
1488
+ }
1489
+ .eds-switch__label--medium--bottom {
1490
+ font-size: 0.75rem;
1491
+ }/* DO NOT CHANGE!*/
1492
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1493
+ /* DO NOT CHANGE!*/
1494
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1495
+ /* DO NOT CHANGE!*/
1496
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1610
1497
  /* DO NOT CHANGE!*/
1611
1498
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1612
1499
  /* DO NOT CHANGE!*/
@@ -1744,104 +1631,150 @@ input:disabled + .eds-input-panel__container {
1744
1631
  --basecolors-text-subduedalt: #b3b4bd;
1745
1632
  }
1746
1633
 
1747
- /* DO NOT CHANGE!*/
1634
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled, .eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
1635
+ background: var(--basecolors-frame-default);
1636
+ width: fit-content;
1637
+ height: fit-content;
1638
+ padding: 0.15rem;
1639
+ margin: -0.15rem;
1640
+ }
1641
+ *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled, .eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
1642
+ background-color: var(--basecolors-frame-contrast);
1643
+ }
1644
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
1645
+ min-height: 7.75rem;
1646
+ resize: vertical;
1647
+ line-height: 1.5rem;
1648
+ }
1649
+ .eds-textarea__wrapper .eds-form-control-wrapper {
1650
+ padding-right: 0;
1651
+ cursor: text;
1652
+ }/* DO NOT CHANGE!*/
1748
1653
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1749
- :root {
1750
- --contrast-bicycle: #00db9b;
1751
- --contrast-bus: #ff6392;
1752
- --contrast-bus-transparent: rgba(255,99,146,0.14902);
1753
- --contrast-cableway: #b482fb;
1754
- --contrast-cableway-transparent: rgba(180,130,251,0.14902);
1755
- --contrast-carferry: #6fdfff;
1756
- --contrast-carferry-transparent: rgba(111,223,255,0.14902);
1757
- --contrast-citybike: #00db9b;
1758
- --contrast-ferry: #6fdfff;
1759
- --contrast-ferry-transparent: rgba(111,223,255,0.14902);
1760
- --contrast-funicular: #b482fb;
1761
- --contrast-funicular-transparent: rgba(180,130,251,0.14902);
1762
- --contrast-helicopter: #fbafea;
1763
- --contrast-helicopter-transparent: rgba(251,175,234,0.14902);
1764
- --contrast-metro: #f08901;
1765
- --contrast-metro-transparent: rgba(240,137,1,0.14902);
1766
- --contrast-mobility: #00db9b;
1767
- --contrast-neutral: #ffffff;
1768
- --contrast-plane: #fbafea;
1769
- --contrast-plane-transparent: rgba(251,175,234,0.14902);
1770
- --contrast-taxi: #ffe082;
1771
- --contrast-taxi-transparent: rgba(255,224,130,0.14902);
1772
- --contrast-train: #42a5f5;
1773
- --contrast-train-transparent: rgba(66,165,245,0.14902);
1774
- --contrast-tram: #b482fb;
1775
- --contrast-tram-transparent: rgba(180,130,251,0.14902);
1776
- --contrast-walk: #8284ab;
1777
- --contrast-airportlinkbus: #fbafea;
1778
- --contrast-airportlinkbus-transparent: rgba(251,175,234,0.14902);
1779
- --contrast-airportlinkrail: #fbafea;
1780
- --contrast-airportlinkrail-transparent: rgba(251,175,234,0.14902);
1781
- --dark-bicycle: #4db295;
1782
- --dark-bus: #ef7398;
1783
- --dark-bus-transparent: rgba(239,115,152,0.14902);
1784
- --dark-cableway: #b898e5;
1785
- --dark-cableway-transparent: rgba(184,152,229,0.14902);
1786
- --dark-carferry: #8ccfe2;
1787
- --dark-carferry-transparent: rgba(140,207,226,0.14902);
1788
- --dark-citybike: #4db295;
1789
- --dark-ferry: #8ccfe2;
1790
- --dark-ferry-transparent: rgba(140,207,226,0.14902);
1791
- --dark-funicular: #b898e5;
1792
- --dark-funicular-transparent: rgba(184,152,229,0.14902);
1793
- --dark-helicopter: #f2b8e5;
1794
- --dark-helicopter-transparent: rgba(242,184,229,0.14902);
1795
- --dark-metro: #dd973c;
1796
- --dark-metro-transparent: rgba(221,151,60,0.14902);
1797
- --dark-mobility: #4db295;
1798
- --dark-neutral: #e5e5e9;
1799
- --dark-plane: #f2b8e5;
1800
- --dark-plane-transparent: rgba(242,184,229,0.14902);
1801
- --dark-taxi: #ffe082;
1802
- --dark-taxi-transparent: rgba(255,224,130,0.14902);
1803
- --dark-train: #60a2d7;
1804
- --dark-train-transparent: rgba(96,162,215,0.14902);
1805
- --dark-tram: #b898e5;
1806
- --dark-tram-transparent: rgba(184,152,229,0.14902);
1807
- --dark-walk: #8d8e9c;
1808
- --dark-airportlinkbus: #f2b8e5;
1809
- --dark-airportlinkbus-transparent: rgba(242,184,229,0.14902);
1810
- --dark-airportlinkrail: #f2b8e5;
1811
- --dark-airportlinkrail-transparent: rgba(242,184,229,0.14902);
1812
- --standard-bicycle: #388f76;
1813
- --standard-bus: #c5044e;
1814
- --standard-bus-transparent: rgba(197,4,78,0.14902);
1815
- --standard-cableway: #78469a;
1816
- --standard-cableway-transparent: rgba(120,70,154,0.14902);
1817
- --standard-carferry: #0c6693;
1818
- --standard-carferry-transparent: rgba(12,102,147,0.14902);
1819
- --standard-citybike: #388f76;
1820
- --standard-ferry: #0c6693;
1821
- --standard-ferry-transparent: rgba(12,102,147,0.14902);
1822
- --standard-funicular: #78469a;
1823
- --standard-funicular-transparent: rgba(120,70,154,0.14902);
1824
- --standard-helicopter: #800664;
1825
- --standard-helicopter-transparent: rgba(128,6,100,0.14902);
1826
- --standard-metro: #bf5826;
1827
- --standard-metro-transparent: rgba(191,88,38,0.14902);
1828
- --standard-mobility: #388f76;
1829
- --standard-neutral: #181c56;
1830
- --standard-plane: #800664;
1831
- --standard-plane-transparent: rgba(128,6,100,0.14902);
1832
- --standard-taxi: #3d3e40;
1833
- --standard-taxi-transparent: rgba(61,62,64,0.14902);
1834
- --standard-train: #00367f;
1835
- --standard-train-transparent: rgba(0,54,127,0.14902);
1836
- --standard-tram: #78469a;
1837
- --standard-tram-transparent: rgba(120,70,154,0.14902);
1838
- --standard-walk: #8d8e9c;
1839
- --standard-airportlinkbus: #800664;
1840
- --standard-airportlinkbus-transparent: rgba(128,6,100,0.14902);
1841
- --standard-airportlinkrail: #800664;
1842
- --standard-airportlinkrail-transparent: rgba(128,6,100,0.14902);
1654
+ .eds-textfield__clear-button {
1655
+ background: none;
1656
+ border: none;
1657
+ border-radius: 50%;
1658
+ color: inherit;
1659
+ cursor: pointer;
1660
+ display: flex;
1661
+ font: inherit;
1662
+ font-size: 1rem;
1663
+ line-height: 1rem;
1664
+ padding: 0.5rem;
1665
+ margin-right: -0.75rem;
1666
+ }
1667
+ .eds-textfield__clear-button:hover {
1668
+ background: var(--components-form-basepanel-standard-fill-hover);
1669
+ }
1670
+ .eds-textfield__clear-button:focus-visible {
1671
+ outline: 2px solid #181c56;
1672
+ outline-color: var(--basecolors-stroke-focus-standard);
1673
+ outline-offset: 0.125rem;
1674
+ }
1675
+ .eds-textfield__clear-button-wrapper {
1676
+ display: flex;
1677
+ align-items: center;
1843
1678
  }
1844
1679
 
1845
- :root {
1846
- --eds-form: 1;
1680
+ .eds-textfield__divider {
1681
+ content: "";
1682
+ display: block;
1683
+ background-color: var(--components-form-baseform-standard-icon);
1684
+ height: 1.5rem;
1685
+ width: 1px;
1686
+ }
1687
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
1688
+ background-color: var(--components-form-baseform-contrast-icon);
1689
+ }
1690
+
1691
+ .eds-textfield__wrapper {
1692
+ cursor: text;
1693
+ }/* DO NOT CHANGE!*/
1694
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1695
+ .eds-segmented-choice {
1696
+ display: block;
1697
+ flex: 1 1 0px;
1698
+ }
1699
+ .eds-segmented-choice .eds-base-segmented {
1700
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1701
+ background-color: var(--background-color);
1702
+ border-radius: 0.25rem;
1703
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1704
+ cursor: pointer;
1705
+ font-size: 0.875rem;
1706
+ height: 1.5rem;
1707
+ line-height: 1.25rem;
1708
+ margin: 0.25rem;
1709
+ outline-color: transparent;
1710
+ padding: calc(0.25rem / 2) 0.75rem;
1711
+ text-align: center;
1712
+ user-select: none;
1847
1713
  }
1714
+ .eds-segmented-choice .eds-base-segmented--large {
1715
+ font-size: 1rem;
1716
+ height: 2.5rem;
1717
+ line-height: 1.5rem;
1718
+ padding: 0.5rem 0.75rem;
1719
+ }
1720
+ .eds-contrast .eds-segmented-choice .eds-base-segmented {
1721
+ --background-color: var(--components-form-segmentedcontrol-contrast-background);
1722
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1723
+ }
1724
+ .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1725
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1726
+ }
1727
+ .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1728
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1729
+ }
1730
+ .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1731
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1732
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1733
+ }
1734
+ .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1735
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1736
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1737
+ }
1738
+ .eds-segmented-choice input {
1739
+ appearance: none;
1740
+ position: absolute;
1741
+ opacity: 0;
1742
+ height: 0;
1743
+ width: 0;
1744
+ }
1745
+ .eds-segmented-choice input:checked + .eds-base-segmented {
1746
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1747
+ color: var(--components-form-segmentedcontrol-standard-text-selected);
1748
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1749
+ }
1750
+ .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1751
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1752
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1753
+ color: var(--components-form-segmentedcontrol-contrast-text-selected);
1754
+ }
1755
+ .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1756
+ outline: 2px solid #181c56;
1757
+ outline-color: var(--basecolors-stroke-focus-standard);
1758
+ outline-offset: 0.125rem;
1759
+ }
1760
+ .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1761
+ outline-color: var(--basecolors-stroke-focus-contrast);
1762
+ }
1763
+ .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1764
+ outline: 2px solid #181c56;
1765
+ outline-color: var(--basecolors-stroke-focus-standard);
1766
+ outline-offset: 0.125rem;
1767
+ }
1768
+ .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1769
+ outline-color: var(--basecolors-stroke-focus-contrast);
1770
+ }/* DO NOT CHANGE!*/
1771
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1772
+ .eds-segmented-control {
1773
+ margin-top: 0.25rem;
1774
+ display: flex;
1775
+ background: var(--components-form-segmentedcontrol-standard-background);
1776
+ border-radius: 0.5rem;
1777
+ }
1778
+ .eds-contrast .eds-segmented-control {
1779
+ background: var(--components-form-segmentedcontrol-contrast-background);
1780
+ }