@entur/form 8.2.11 → 8.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/BaseFormControl.d.ts +4 -0
  2. package/dist/Checkbox.d.ts +16 -0
  3. package/dist/Radio.d.ts +4 -0
  4. package/dist/RadioGroup.d.ts +2 -0
  5. package/dist/RadioGroupContext.d.ts +1 -0
  6. package/dist/form.cjs.development.js +54 -17
  7. package/dist/form.cjs.development.js.map +1 -1
  8. package/dist/form.cjs.production.min.js +1 -1
  9. package/dist/form.cjs.production.min.js.map +1 -1
  10. package/dist/form.esm.js +54 -17
  11. package/dist/form.esm.js.map +1 -1
  12. package/dist/styles.css +572 -509
  13. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,3 +1,81 @@
1
+ .eds-fieldset {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ }
6
+ /* DO NOT CHANGE!*/
7
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
+ .eds-feedback-text {
9
+ display: flex;
10
+ align-items: center;
11
+ margin-top: 0.25rem;
12
+ }
13
+ .eds-feedback-text--info, .eds-feedback-text--information {
14
+ padding-left: calc(1rem + 0.125rem);
15
+ }
16
+ .eds-feedback-text__text {
17
+ color: var(--components-form-feedbacktext-information-standard-text);
18
+ }
19
+ .eds-contrast .eds-feedback-text__text {
20
+ color: var(--components-form-feedbacktext-information-contrast-text);
21
+ }
22
+
23
+ .eds-feedback-text__icon {
24
+ font-size: 1.5rem;
25
+ min-height: 1.5rem;
26
+ min-width: 1.5rem;
27
+ padding-right: 0.5rem;
28
+ position: relative;
29
+ top: -0.1rem;
30
+ }
31
+ .eds-feedback-text__icon--success {
32
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
33
+ }
34
+ .eds-feedback-text__icon--success circle {
35
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
36
+ }
37
+ .eds-contrast .eds-feedback-text__icon--success {
38
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
39
+ }
40
+ .eds-contrast .eds-feedback-text__icon--success circle {
41
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
42
+ }
43
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
44
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
45
+ }
46
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
47
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
48
+ }
49
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
50
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
51
+ }
52
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
53
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
54
+ }
55
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
56
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
57
+ }
58
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
59
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
60
+ }
61
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
62
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
63
+ }
64
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
65
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
66
+ }
67
+ .eds-feedback-text__icon--warning {
68
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
69
+ }
70
+ .eds-feedback-text__icon--warning .svg-exclamation {
71
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
72
+ }
73
+ .eds-contrast .eds-feedback-text__icon--warning {
74
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
75
+ }
76
+ .eds-contrast .eds-feedback-text__icon--warning circle {
77
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
78
+ }
1
79
  /* DO NOT CHANGE!*/
2
80
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
81
  .eds-checkbox__container {
@@ -38,6 +116,15 @@
38
116
  .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
39
117
  fill: var(--components-form-checkbox-standard-icon);
40
118
  }
119
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
120
+ color: var(--components-form-checkbox-contrast-fill-selected);
121
+ }
122
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
123
+ stroke: var(--components-form-checkbox-contrast-icon);
124
+ }
125
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
126
+ fill: var(--components-form-checkbox-contrast-icon);
127
+ }
41
128
  .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
129
  background-color: var(--components-form-checkbox-standard-icon-disabled);
43
130
  }
@@ -53,14 +140,20 @@
53
140
  .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
54
141
  background-color: var(--components-form-checkbox-standard-icon-disabled);
55
142
  }
56
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
57
- color: var(--components-form-checkbox-contrast-fill-selected);
143
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
144
+ background-color: var(--components-form-checkbox-standard-fill-disabled);
58
145
  }
59
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
60
- stroke: var(--components-form-checkbox-contrast-icon);
146
+ .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 {
147
+ stroke: var(--components-form-checkbox-standard-icon-readonly);
61
148
  }
62
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
63
- fill: var(--components-form-checkbox-contrast-icon);
149
+ .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 {
150
+ fill: var(--components-form-checkbox-standard-icon-readonly);
151
+ }
152
+ .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 {
153
+ stroke: var(--components-form-checkbox-contrast-icon-readonly);
154
+ }
155
+ .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 {
156
+ fill: var(--components-form-checkbox-contrast-icon-readonly);
64
157
  }
65
158
  .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
66
159
  border-color: var(--components-form-checkbox-standard-border);
@@ -110,6 +203,25 @@
110
203
  .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
111
204
  border-color: var(--components-form-checkbox-contrast-icon-disabled);
112
205
  }
206
+ .eds-checkbox--readonly {
207
+ cursor: default;
208
+ pointer-events: auto;
209
+ -webkit-user-select: text;
210
+ -moz-user-select: text;
211
+ user-select: text;
212
+ }
213
+ .eds-checkbox--readonly input {
214
+ pointer-events: auto;
215
+ -webkit-user-select: text;
216
+ -moz-user-select: text;
217
+ user-select: text;
218
+ }
219
+ .eds-checkbox--readonly .eds-checkbox__icon {
220
+ border-color: var(--components-form-checkbox-standard-border-readonly);
221
+ }
222
+ .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
223
+ border-color: var(--components-form-checkbox-contrast-border-readonly);
224
+ }
113
225
  .eds-checkbox__icon {
114
226
  box-sizing: border-box;
115
227
  display: inline-flex;
@@ -141,6 +253,15 @@
141
253
  stroke-dashoffset: 48;
142
254
  stroke-width: 0.375rem;
143
255
  }
256
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
257
+ animation: none !important;
258
+ transition: none !important;
259
+ stroke-dasharray: 48;
260
+ stroke-dashoffset: 0;
261
+ }
262
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
263
+ transition: none !important;
264
+ }
144
265
 
145
266
  @keyframes stroke {
146
267
  100% {
@@ -149,93 +270,215 @@
149
270
  }
150
271
  /* DO NOT CHANGE!*/
151
272
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
152
- .eds-input-group {
153
- color: inherit;
154
- display: block;
273
+ .eds-form-control__field-and-feedback-text {
274
+ display: flex;
275
+ flex-direction: column;
276
+ height: -moz-fit-content;
277
+ height: fit-content;
278
+ width: 100%;
279
+ }
280
+ .eds-form-control__field-and-feedback-text--has-tooltip {
281
+ padding-right: 2rem;
282
+ }
283
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
284
+ cursor: not-allowed;
285
+ }
286
+ .eds-form-control-wrapper {
287
+ display: flex;
288
+ align-items: center;
155
289
  position: relative;
290
+ flex: 1;
291
+ min-height: 3rem;
292
+ padding-left: 1rem;
293
+ padding-right: 1rem;
294
+ background-color: var(--components-form-baseform-standard-fill-default);
295
+ border-radius: 0.25rem;
296
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
297
+ box-shadow: 0 0 0 transparent;
298
+ color: var(--components-form-baseform-standard-text-content);
299
+ transition: border-color 0.1s ease-in-out;
156
300
  }
157
- .eds-input-group__label {
301
+ .eds-form-control-wrapper:hover {
302
+ border-color: var(--components-form-baseform-standard-border-interactive);
303
+ }
304
+ .eds-contrast .eds-form-control-wrapper:hover {
305
+ border-color: var(--components-form-baseform-contrast-border-interactive);
306
+ }
307
+ .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
308
+ border-color: var(--components-form-baseform-standard-border-interactive);
309
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
310
+ }
311
+ .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
312
+ border-color: var(--components-form-baseform-contrast-border-interactive);
313
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
314
+ }
315
+ .eds-form-control-wrapper ::-moz-placeholder {
158
316
  color: var(--components-form-baseform-standard-text-label);
159
- display: flex;
160
- font-size: 1rem;
161
- position: absolute;
162
- line-height: 1rem;
163
- height: 3rem;
164
- padding-left: 0;
165
- top: 1rem;
166
- 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;
167
- -webkit-user-select: none;
168
- -moz-user-select: none;
169
- user-select: none;
317
+ }
318
+ .eds-form-control-wrapper ::placeholder {
319
+ color: var(--components-form-baseform-standard-text-label);
320
+ }
321
+ .eds-form-control-wrapper--disabled {
322
+ border-color: transparent;
323
+ background-color: var(--components-form-baseform-standard-fill-disabled);
170
324
  pointer-events: none;
325
+ color: var(--components-form-baseform-standard-text-disabled);
171
326
  }
172
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
173
- top: 0.375rem;
174
- font-size: 0.75rem;
175
- line-height: 0.75rem;
176
- height: 10px;
177
- padding: 0;
327
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
328
+ color: var(--components-form-baseform-standard-text-disabled);
178
329
  }
179
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
180
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
181
- background: var(--textarea-label-background);
182
- width: calc(100% - 1rem - 1rem - 4px);
330
+ .eds-contrast .eds-form-control-wrapper--disabled {
331
+ border-color: transparent;
332
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
333
+ color: var(--components-form-baseform-contrast-text-disabled);
183
334
  }
184
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
185
- top: 0.5rem;
186
- font-size: 0.875rem;
187
- line-height: 1rem;
188
- padding: 0;
335
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
336
+ color: var(--components-form-baseform-contrast-text-disabled);
189
337
  }
190
- .eds-form-control-wrapper--size-large .eds-input-group__label {
191
- top: 0.75rem;
192
- font-size: 1.5rem;
193
- line-height: 2.25rem;
338
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
339
+ display: none;
194
340
  }
195
- .eds-input-group__label--filled {
196
- top: 0.375rem;
197
- font-size: 0.75rem;
198
- line-height: 0.75rem;
199
- height: 10px;
200
- padding: 0;
341
+ .eds-form-control-wrapper--disabled:focus-within {
342
+ border-color: transparent;
343
+ outline: none;
201
344
  }
202
- .eds-textarea__label .eds-input-group__label--filled {
203
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
204
- background: var(--textarea-label-background);
205
- width: calc(100% - 1rem - 1rem - 4px);
345
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
346
+ border-color: transparent;
347
+ outline: none;
206
348
  }
207
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
208
- top: 0.5rem;
209
- font-size: 0.875rem;
210
- line-height: 1rem;
211
- padding: 0;
349
+ .eds-form-control-wrapper--readonly {
350
+ border-color: transparent;
351
+ cursor: default;
352
+ background: var(--components-form-baseform-standard-fill-readonly);
353
+ border: var(--components-form-baseform-standard-fill-readonly);
212
354
  }
213
-
214
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
215
- top: 0.375rem;
216
- font-size: 0.75rem;
217
- line-height: 0.75rem;
218
- height: 10px;
219
- padding: 0;
355
+ .eds-form-control-wrapper--readonly:focus-visible {
356
+ outline: none;
220
357
  }
221
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
222
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
223
- background: var(--textarea-label-background);
224
- width: calc(100% - 1rem - 1rem - 4px);
358
+ .eds-contrast .eds-form-control-wrapper--readonly {
359
+ background: var(--components-form-baseform-contrast-fill-readonly);
360
+ border: var(--components-form-baseform-contrast-fill-readonly);
361
+ color: var(--components-form-baseform-contrast-text-description);
225
362
  }
226
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
227
- top: 0.5rem;
228
- font-size: 0.875rem;
229
- line-height: 1rem;
230
- padding: 0;
363
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
364
+ color: var(--components-form-baseform-contrast-text-description);
231
365
  }
232
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
233
- top: 1rem;
366
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
367
+ color: var(--components-form-baseform-contrast-text-description);
368
+ }
369
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
370
+ display: none;
371
+ }
372
+ .eds-form-control-wrapper--size-medium .eds-form-control,
373
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
374
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
234
375
  font-size: 1rem;
235
- height: 3rem;
236
376
  line-height: 1rem;
237
377
  }
238
- /* DO NOT CHANGE!*/
378
+ .eds-form-control-wrapper--size-large {
379
+ min-height: 4rem;
380
+ }
381
+ .eds-form-control-wrapper--size-large .eds-form-control,
382
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
383
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
384
+ font-size: 1.5rem;
385
+ }
386
+ .eds-form-control-wrapper--success {
387
+ border-color: var(--components-form-baseform-standard-border-success);
388
+ }
389
+ .eds-form-control-wrapper--success:focus-within {
390
+ border-color: var(--components-form-baseform-standard-border-success);
391
+ outline-color: var(--components-form-baseform-standard-border-success);
392
+ }
393
+ .eds-contrast .eds-form-control-wrapper--success {
394
+ border-color: var(--components-form-baseform-standard-border-success);
395
+ }
396
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
397
+ border-color: var(--components-form-baseform-contrast-border-success);
398
+ outline-color: var(--components-form-baseform-contrast-border-success);
399
+ }
400
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
401
+ border-color: var(--components-form-baseform-standard-border-negative);
402
+ }
403
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
404
+ border-color: var(--components-form-baseform-standard-border-negative);
405
+ outline-color: var(--components-form-baseform-standard-border-negative);
406
+ }
407
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
408
+ border-color: var(--components-form-baseform-contrast-border-negative);
409
+ }
410
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
411
+ border-color: var(--components-form-baseform-contrast-border-negative);
412
+ outline-color: var(--components-form-baseform-contrast-border-negative);
413
+ }
414
+ .eds-contrast .eds-form-control .eds-tooltip {
415
+ background: var(--components-tooltip-tooltip-standard-fill);
416
+ color: var(--components-tooltip-tooltip-standard-text);
417
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
418
+ }
419
+ .eds-form-control .eds-tooltip::after {
420
+ background: var(--components-tooltip-tooltip-standard-fill);
421
+ }
422
+
423
+ .eds-form-control {
424
+ display: block;
425
+ -webkit-appearance: none;
426
+ -moz-appearance: none;
427
+ appearance: none;
428
+ width: 100%;
429
+ height: 100%;
430
+ padding: 20px 0rem 0.25rem;
431
+ font-family: inherit;
432
+ font-size: 1rem;
433
+ line-height: 1rem;
434
+ border: 0;
435
+ color: var(--components-form-baseform-standard-text-content);
436
+ background-color: transparent;
437
+ }
438
+ .eds-form-control::-moz-placeholder {
439
+ opacity: 0;
440
+ -moz-transition: opacity 0.2s ease-in-out;
441
+ transition: opacity 0.2s ease-in-out;
442
+ }
443
+ .eds-form-control::placeholder {
444
+ opacity: 0;
445
+ transition: opacity 0.2s ease-in-out;
446
+ }
447
+ .eds-form-control:focus {
448
+ outline: none;
449
+ }
450
+ .eds-form-control:focus::-moz-placeholder {
451
+ opacity: 1;
452
+ }
453
+ .eds-form-control:focus::placeholder {
454
+ opacity: 1;
455
+ }
456
+ .eds-form-control__prepend, .eds-form-control__append {
457
+ position: relative;
458
+ line-height: inherit;
459
+ }
460
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
461
+ all: unset;
462
+ position: absolute;
463
+ display: flex;
464
+ align-items: center;
465
+ justify-content: center;
466
+ height: 1.5rem;
467
+ width: 1.5rem;
468
+ right: -2rem;
469
+ border-radius: 100%;
470
+ color: var(--primary-text-color);
471
+ cursor: pointer;
472
+ }
473
+ .eds-form-control__prepend {
474
+ margin-right: 0.75rem;
475
+ margin-left: 0;
476
+ }
477
+ .eds-form-control__append {
478
+ margin-right: 0;
479
+ margin-left: 0.75rem;
480
+ }
481
+ /* DO NOT CHANGE!*/
239
482
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
240
483
  .eds-form-component--radio__container {
241
484
  display: flex;
@@ -278,6 +521,12 @@
278
521
  .eds-form-component--radio__container:has(input:disabled) {
279
522
  cursor: not-allowed;
280
523
  }
524
+ .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
525
+ cursor: default;
526
+ -webkit-user-select: text;
527
+ -moz-user-select: text;
528
+ user-select: text;
529
+ }
281
530
  .eds-form-component--radio__container .eds-form-component--radio__radio {
282
531
  position: relative;
283
532
  height: 1.25rem;
@@ -318,6 +567,18 @@
318
567
  .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
319
568
  background-color: var(--components-form-radio-contrast-icon-disabled);
320
569
  }
570
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
571
+ background: var(--components-form-radio-standard-fill-disabled);
572
+ border-color: var(--components-form-radio-standard-border-readonly);
573
+ }
574
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
575
+ background: var(--components-form-radio-contrast-fill-disabled);
576
+ border-color: var(--components-form-radio-contrast-border-readonly);
577
+ }
578
+ .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 {
579
+ background-color: var(--components-form-radio-standard-icon);
580
+ border-color: var(--components-form-radio-standard-border-readonly);
581
+ }
321
582
  .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
322
583
  display: block;
323
584
  width: 0;
@@ -450,247 +711,91 @@
450
711
  }
451
712
  /* DO NOT CHANGE!*/
452
713
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
453
- /* DO NOT CHANGE!*/
454
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
455
- /* DO NOT CHANGE!*/
456
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
457
- /* DO NOT CHANGE!*/
458
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
459
- /* DO NOT CHANGE!*/
460
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
461
- [data-color-mode=light],
462
- :root {
463
- --basecolors-frame-contrast: #181c56;
464
- --basecolors-frame-contrastalt: #393d79;
465
- --basecolors-frame-contrastalt-2: #292b6a;
466
- --basecolors-frame-default: #ffffff;
467
- --basecolors-frame-elevated: #ffffff;
468
- --basecolors-frame-elevatedalt: #f6f6f9;
469
- --basecolors-frame-subdued: #d9dae8;
470
- --basecolors-frame-tint: #f6f6f9;
471
- --basecolors-shape-accent: #181c56;
472
- --basecolors-shape-bicycle-contrast: #00db9b;
473
- --basecolors-shape-bicycle-default: #388f76;
474
- --basecolors-shape-bus-contrast: #ff6392;
475
- --basecolors-shape-bus-default: #c5044e;
476
- --basecolors-shape-cableway-contrast: #b482fb;
477
- --basecolors-shape-cableway-default: #78469a;
478
- --basecolors-shape-disabled: #6e6f73;
479
- --basecolors-shape-disabledalt: #b6b8ba;
480
- --basecolors-shape-ferry-contrast: #6fdfff;
481
- --basecolors-shape-ferry-default: #0c6693;
482
- --basecolors-shape-funicular-contrast: #b482fb;
483
- --basecolors-shape-funicular-default: #78469a;
484
- --basecolors-shape-helicopter-contrast: #fbafea;
485
- --basecolors-shape-helicopter-default: #800664;
486
- --basecolors-shape-highlight: #ff5959;
487
- --basecolors-shape-light: #ffffff;
488
- --basecolors-shape-mask: #ffffff;
489
- --basecolors-shape-maskalt: #ffffff;
490
- --basecolors-shape-metro-contrast: #f08901;
491
- --basecolors-shape-metro-default: #bf5826;
492
- --basecolors-shape-mobility-contrast: #00db9b;
493
- --basecolors-shape-mobility-default: #388f76;
494
- --basecolors-shape-plane-contrast: #fbafea;
495
- --basecolors-shape-plane-default: #800664;
496
- --basecolors-shape-subdued: #626493;
497
- --basecolors-shape-subduedalt: #d9dae8;
498
- --basecolors-shape-taxi-contrast: #ffe082;
499
- --basecolors-shape-taxi-default: #3d3e40;
500
- --basecolors-shape-train-contrast: #42a5f5;
501
- --basecolors-shape-train-default: #00367f;
502
- --basecolors-shape-tram-contrast: #b482fb;
503
- --basecolors-shape-tram-default: #78469a;
504
- --basecolors-shape-walk-contrast: #8284ab;
505
- --basecolors-shape-walk-default: #8d8e9c;
506
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
507
- --basecolors-shape-airportlinkbus-default: #800664;
508
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
509
- --basecolors-shape-airportlinkrail-default: #800664;
510
- --basecolors-stroke-contrast: #aeb7e2;
511
- --basecolors-stroke-default: #181c56;
512
- --basecolors-stroke-disabled: #949699;
513
- --basecolors-stroke-focus-contrast: #aeb7e2;
514
- --basecolors-stroke-focus-standard: #181c56;
515
- --basecolors-stroke-highlight: #ff5959;
516
- --basecolors-stroke-light: #ffffff;
517
- --basecolors-stroke-subdued: #8284ab;
518
- --basecolors-stroke-subduedalt: #e3e6e8;
519
- --basecolors-text-accent: #181c56;
520
- --basecolors-text-disabled: #6e6f73;
521
- --basecolors-text-disabledalt: #b6b8ba;
522
- --basecolors-text-highlight: #ff5959;
523
- --basecolors-text-light: #ffffff;
524
- --basecolors-text-subdued: #626493;
525
- --basecolors-text-subduedalt: #d9dae8;
714
+ .eds-input-group {
715
+ color: inherit;
716
+ display: block;
717
+ position: relative;
718
+ }
719
+ .eds-input-group__label {
720
+ color: var(--components-form-baseform-standard-text-label);
721
+ display: flex;
722
+ font-size: 1rem;
723
+ position: absolute;
724
+ line-height: 1rem;
725
+ height: 3rem;
726
+ padding-left: 0;
727
+ top: 1rem;
728
+ 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;
729
+ -webkit-user-select: none;
730
+ -moz-user-select: none;
731
+ user-select: none;
732
+ pointer-events: none;
733
+ }
734
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
735
+ top: 0.375rem;
736
+ font-size: 0.75rem;
737
+ line-height: 0.75rem;
738
+ height: 10px;
739
+ padding: 0;
740
+ }
741
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
742
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
743
+ background: var(--textarea-label-background);
744
+ width: calc(100% - 1rem - 1rem - 4px);
745
+ }
746
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
747
+ top: 0.5rem;
748
+ font-size: 0.875rem;
749
+ line-height: 1rem;
750
+ padding: 0;
751
+ }
752
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
753
+ top: 0.75rem;
754
+ font-size: 1.5rem;
755
+ line-height: 2.25rem;
756
+ }
757
+ .eds-input-group__label--filled {
758
+ top: 0.375rem;
759
+ font-size: 0.75rem;
760
+ line-height: 0.75rem;
761
+ height: 10px;
762
+ padding: 0;
763
+ }
764
+ .eds-textarea__label .eds-input-group__label--filled {
765
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
766
+ background: var(--textarea-label-background);
767
+ width: calc(100% - 1rem - 1rem - 4px);
768
+ }
769
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
770
+ top: 0.5rem;
771
+ font-size: 0.875rem;
772
+ line-height: 1rem;
773
+ padding: 0;
526
774
  }
527
775
 
528
- [data-color-mode=dark] {
529
- --basecolors-frame-contrast: #212233;
530
- --basecolors-frame-contrastalt: #141527;
531
- --basecolors-frame-contrastalt-2: #08091c;
532
- --basecolors-frame-default: #08091c;
533
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
534
- --basecolors-frame-elevatedalt: #464755;
535
- --basecolors-frame-subdued: #2d2e3e;
536
- --basecolors-frame-tint: #141527;
537
- --basecolors-shape-accent: #e5e5e9;
538
- --basecolors-shape-bicycle-contrast: #4db295;
539
- --basecolors-shape-bicycle-default: #4db295;
540
- --basecolors-shape-bus-contrast: #ef7398;
541
- --basecolors-shape-bus-default: #ef7398;
542
- --basecolors-shape-cableway-contrast: #b898e5;
543
- --basecolors-shape-cableway-default: #b898e5;
544
- --basecolors-shape-disabled: #b6b8ba;
545
- --basecolors-shape-disabledalt: #b3b4bd;
546
- --basecolors-shape-ferry-contrast: #8ccfe2;
547
- --basecolors-shape-ferry-default: #8ccfe2;
548
- --basecolors-shape-funicular-contrast: #b898e5;
549
- --basecolors-shape-funicular-default: #b898e5;
550
- --basecolors-shape-helicopter-contrast: #f2b8e5;
551
- --basecolors-shape-helicopter-default: #f2b8e5;
552
- --basecolors-shape-highlight: #ff9494;
553
- --basecolors-shape-light: #e5e5e9;
554
- --basecolors-shape-mask: #2d2e3e;
555
- --basecolors-shape-maskalt: #393a49;
556
- --basecolors-shape-metro-contrast: #dd973c;
557
- --basecolors-shape-metro-default: #dd973c;
558
- --basecolors-shape-mobility-contrast: #4db295;
559
- --basecolors-shape-mobility-default: #4db295;
560
- --basecolors-shape-plane-contrast: #f2b8e5;
561
- --basecolors-shape-plane-default: #f2b8e5;
562
- --basecolors-shape-subdued: #b3b4bd;
563
- --basecolors-shape-subduedalt: #b3b4bd;
564
- --basecolors-shape-taxi-contrast: #ffe082;
565
- --basecolors-shape-taxi-default: #ffe082;
566
- --basecolors-shape-train-contrast: #60a2d7;
567
- --basecolors-shape-train-default: #60a2d7;
568
- --basecolors-shape-tram-contrast: #b898e5;
569
- --basecolors-shape-tram-default: #b898e5;
570
- --basecolors-shape-walk-contrast: #8d8e9c;
571
- --basecolors-shape-walk-default: #8d8e9c;
572
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
573
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
574
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
575
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
576
- --basecolors-stroke-contrast: #aeb7e2;
577
- --basecolors-stroke-default: #b3b4bd;
578
- --basecolors-stroke-disabled: #e3e6e8;
579
- --basecolors-stroke-focus-contrast: #aeb7e2;
580
- --basecolors-stroke-focus-standard: #aeb7e2;
581
- --basecolors-stroke-highlight: #ff9494;
582
- --basecolors-stroke-light: #b3b4bd;
583
- --basecolors-stroke-subdued: #81828f;
584
- --basecolors-stroke-subduedalt: #949699;
585
- --basecolors-text-accent: #e5e5e9;
586
- --basecolors-text-disabled: #b6b8ba;
587
- --basecolors-text-disabledalt: #b6b8ba;
588
- --basecolors-text-highlight: #ff9494;
589
- --basecolors-text-light: #e5e5e9;
590
- --basecolors-text-subdued: #b3b4bd;
591
- --basecolors-text-subduedalt: #b3b4bd;
592
- }
593
-
594
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
595
- background: #ffffff;
596
- background: var(--basecolors-frame-default);
597
- width: -moz-fit-content;
598
- width: fit-content;
599
- height: -moz-fit-content;
600
- height: fit-content;
601
- padding: 0.15rem;
602
- margin: -0.15rem;
603
- }
604
- *[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 {
605
- background-color: #181c56;
606
- background-color: var(--basecolors-frame-contrast);
607
- }
608
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
609
- min-height: 7.75rem;
610
- resize: vertical;
611
- line-height: 1.5rem;
612
- }
613
- .eds-textarea__wrapper .eds-form-control-wrapper {
614
- padding-right: 0;
615
- cursor: text;
616
- }
617
- .eds-fieldset {
618
- margin: 0;
776
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
777
+ top: 0.375rem;
778
+ font-size: 0.75rem;
779
+ line-height: 0.75rem;
780
+ height: 10px;
619
781
  padding: 0;
620
- border: 0;
621
- }
622
- /* DO NOT CHANGE!*/
623
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
624
- .eds-feedback-text {
625
- display: flex;
626
- align-items: center;
627
- margin-top: 0.25rem;
628
- }
629
- .eds-feedback-text--info, .eds-feedback-text--information {
630
- padding-left: calc(1rem + 0.125rem);
631
- }
632
- .eds-feedback-text__text {
633
- color: var(--components-form-feedbacktext-information-standard-text);
634
- }
635
- .eds-contrast .eds-feedback-text__text {
636
- color: var(--components-form-feedbacktext-information-contrast-text);
637
- }
638
-
639
- .eds-feedback-text__icon {
640
- font-size: 1.5rem;
641
- min-height: 1.5rem;
642
- min-width: 1.5rem;
643
- padding-right: 0.5rem;
644
- position: relative;
645
- top: -0.1rem;
646
- }
647
- .eds-feedback-text__icon--success {
648
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
649
- }
650
- .eds-feedback-text__icon--success circle {
651
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
652
- }
653
- .eds-contrast .eds-feedback-text__icon--success {
654
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
655
- }
656
- .eds-contrast .eds-feedback-text__icon--success circle {
657
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
658
- }
659
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
660
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
661
- }
662
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
663
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
664
- }
665
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
666
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
667
- }
668
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
669
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
670
- }
671
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
672
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
673
- }
674
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
675
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
676
- }
677
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
678
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
679
- }
680
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
681
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
682
- }
683
- .eds-feedback-text__icon--warning {
684
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
685
782
  }
686
- .eds-feedback-text__icon--warning .svg-exclamation {
687
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
783
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
784
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
785
+ background: var(--textarea-label-background);
786
+ width: calc(100% - 1rem - 1rem - 4px);
688
787
  }
689
- .eds-contrast .eds-feedback-text__icon--warning {
690
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
788
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
789
+ top: 0.5rem;
790
+ font-size: 0.875rem;
791
+ line-height: 1rem;
792
+ padding: 0;
691
793
  }
692
- .eds-contrast .eds-feedback-text__icon--warning circle {
693
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
794
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
795
+ top: 1rem;
796
+ font-size: 1rem;
797
+ height: 3rem;
798
+ line-height: 1rem;
694
799
  }
695
800
  /* DO NOT CHANGE!*/
696
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -842,211 +947,169 @@ input:disabled + .eds-input-panel__container {
842
947
  }
843
948
  /* DO NOT CHANGE!*/
844
949
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
845
- .eds-form-control__field-and-feedback-text {
846
- display: flex;
847
- flex-direction: column;
848
- height: -moz-fit-content;
849
- height: fit-content;
850
- width: 100%;
851
- }
852
- .eds-form-control__field-and-feedback-text--has-tooltip {
853
- padding-right: 2rem;
854
- }
855
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
856
- cursor: not-allowed;
857
- }
858
- .eds-form-control-wrapper {
859
- display: flex;
860
- align-items: center;
861
- position: relative;
862
- flex: 1;
863
- min-height: 3rem;
864
- padding-left: 1rem;
865
- padding-right: 1rem;
866
- background-color: var(--components-form-baseform-standard-fill-default);
867
- border-radius: 0.25rem;
868
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
869
- box-shadow: 0 0 0 transparent;
870
- color: var(--components-form-baseform-standard-text-content);
871
- transition: border-color 0.1s ease-in-out;
872
- }
873
- .eds-form-control-wrapper:hover {
874
- border-color: var(--components-form-baseform-standard-border-interactive);
875
- }
876
- .eds-contrast .eds-form-control-wrapper:hover {
877
- border-color: var(--components-form-baseform-contrast-border-interactive);
878
- }
879
- .eds-form-control-wrapper:focus-within {
880
- border-color: var(--components-form-baseform-standard-border-interactive);
881
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
882
- }
883
- .eds-contrast .eds-form-control-wrapper:focus-within {
884
- border-color: var(--components-form-baseform-contrast-border-interactive);
885
- outline-color: var(--components-form-baseform-contrast-border-interactive);
886
- }
887
- .eds-form-control-wrapper ::-moz-placeholder {
888
- color: var(--components-form-baseform-standard-text-label);
889
- }
890
- .eds-form-control-wrapper ::placeholder {
891
- color: var(--components-form-baseform-standard-text-label);
892
- }
893
- .eds-form-control-wrapper--disabled {
894
- border-color: transparent;
895
- background-color: var(--components-form-baseform-standard-fill-disabled);
896
- pointer-events: none;
897
- color: var(--components-form-baseform-standard-text-disabled);
898
- }
899
- .eds-form-control-wrapper--disabled .eds-input-group__label {
900
- color: var(--components-form-baseform-standard-text-disabled);
901
- }
902
- .eds-contrast .eds-form-control-wrapper--disabled {
903
- border-color: transparent;
904
- background-color: var(--components-form-baseform-contrast-fill-disabled);
905
- color: var(--components-form-baseform-contrast-text-disabled);
906
- }
907
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
908
- color: var(--components-form-baseform-contrast-text-disabled);
909
- }
910
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
911
- display: none;
912
- }
913
- .eds-form-control-wrapper--disabled:focus-within {
914
- border-color: transparent;
915
- outline: none;
916
- }
917
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
918
- border-color: transparent;
919
- outline: none;
920
- }
921
- .eds-form-control-wrapper--readonly {
922
- border-color: transparent;
923
- pointer-events: none;
924
- cursor: default;
925
- background: var(--components-form-baseform-standard-fill-readonly);
926
- border: var(--components-form-baseform-standard-fill-readonly);
927
- }
928
- .eds-contrast .eds-form-control-wrapper--readonly {
929
- background: var(--components-form-baseform-contrast-fill-readonly);
930
- border: var(--components-form-baseform-contrast-fill-readonly);
931
- color: var(--components-form-baseform-contrast-text-description);
932
- }
933
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
934
- color: var(--components-form-baseform-contrast-text-description);
935
- }
936
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
937
- color: var(--components-form-baseform-contrast-text-description);
938
- }
939
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
940
- display: none;
941
- }
942
- .eds-form-control-wrapper--size-medium .eds-form-control,
943
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
944
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
945
- font-size: 1rem;
946
- line-height: 1rem;
947
- }
948
- .eds-form-control-wrapper--size-large {
949
- min-height: 4rem;
950
- }
951
- .eds-form-control-wrapper--size-large .eds-form-control,
952
- .eds-form-control-wrapper--size-large .eds-form-control__append,
953
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
954
- font-size: 1.5rem;
955
- }
956
- .eds-form-control-wrapper--success {
957
- border-color: var(--components-form-baseform-standard-border-success);
958
- }
959
- .eds-form-control-wrapper--success:focus-within {
960
- border-color: var(--components-form-baseform-standard-border-success);
961
- outline-color: var(--components-form-baseform-standard-border-success);
962
- }
963
- .eds-contrast .eds-form-control-wrapper--success {
964
- border-color: var(--components-form-baseform-standard-border-success);
965
- }
966
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
967
- border-color: var(--components-form-baseform-contrast-border-success);
968
- outline-color: var(--components-form-baseform-contrast-border-success);
969
- }
970
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
971
- border-color: var(--components-form-baseform-standard-border-negative);
972
- }
973
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
974
- border-color: var(--components-form-baseform-standard-border-negative);
975
- outline-color: var(--components-form-baseform-standard-border-negative);
976
- }
977
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
978
- border-color: var(--components-form-baseform-contrast-border-negative);
979
- }
980
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
981
- border-color: var(--components-form-baseform-contrast-border-negative);
982
- outline-color: var(--components-form-baseform-contrast-border-negative);
983
- }
984
- .eds-contrast .eds-form-control .eds-tooltip {
985
- background: var(--components-tooltip-tooltip-standard-fill);
986
- color: var(--components-tooltip-tooltip-standard-text);
987
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
988
- }
989
- .eds-form-control .eds-tooltip::after {
990
- background: var(--components-tooltip-tooltip-standard-fill);
950
+ /* DO NOT CHANGE!*/
951
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
952
+ /* DO NOT CHANGE!*/
953
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
954
+ /* DO NOT CHANGE!*/
955
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
956
+ /* DO NOT CHANGE!*/
957
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
958
+ [data-color-mode=light],
959
+ :root {
960
+ --basecolors-frame-contrast: #181c56;
961
+ --basecolors-frame-contrastalt: #393d79;
962
+ --basecolors-frame-contrastalt-2: #292b6a;
963
+ --basecolors-frame-default: #ffffff;
964
+ --basecolors-frame-elevated: #ffffff;
965
+ --basecolors-frame-elevatedalt: #f6f6f9;
966
+ --basecolors-frame-subdued: #d9dae8;
967
+ --basecolors-frame-tint: #f6f6f9;
968
+ --basecolors-shape-accent: #181c56;
969
+ --basecolors-shape-bicycle-contrast: #00db9b;
970
+ --basecolors-shape-bicycle-default: #388f76;
971
+ --basecolors-shape-bus-contrast: #ff6392;
972
+ --basecolors-shape-bus-default: #c5044e;
973
+ --basecolors-shape-cableway-contrast: #b482fb;
974
+ --basecolors-shape-cableway-default: #78469a;
975
+ --basecolors-shape-disabled: #6e6f73;
976
+ --basecolors-shape-disabledalt: #b6b8ba;
977
+ --basecolors-shape-ferry-contrast: #6fdfff;
978
+ --basecolors-shape-ferry-default: #0c6693;
979
+ --basecolors-shape-funicular-contrast: #b482fb;
980
+ --basecolors-shape-funicular-default: #78469a;
981
+ --basecolors-shape-helicopter-contrast: #fbafea;
982
+ --basecolors-shape-helicopter-default: #800664;
983
+ --basecolors-shape-highlight: #ff5959;
984
+ --basecolors-shape-light: #ffffff;
985
+ --basecolors-shape-mask: #ffffff;
986
+ --basecolors-shape-maskalt: #ffffff;
987
+ --basecolors-shape-metro-contrast: #f08901;
988
+ --basecolors-shape-metro-default: #bf5826;
989
+ --basecolors-shape-mobility-contrast: #00db9b;
990
+ --basecolors-shape-mobility-default: #388f76;
991
+ --basecolors-shape-plane-contrast: #fbafea;
992
+ --basecolors-shape-plane-default: #800664;
993
+ --basecolors-shape-subdued: #626493;
994
+ --basecolors-shape-subduedalt: #d9dae8;
995
+ --basecolors-shape-taxi-contrast: #ffe082;
996
+ --basecolors-shape-taxi-default: #3d3e40;
997
+ --basecolors-shape-train-contrast: #42a5f5;
998
+ --basecolors-shape-train-default: #00367f;
999
+ --basecolors-shape-tram-contrast: #b482fb;
1000
+ --basecolors-shape-tram-default: #78469a;
1001
+ --basecolors-shape-walk-contrast: #8284ab;
1002
+ --basecolors-shape-walk-default: #8d8e9c;
1003
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
1004
+ --basecolors-shape-airportlinkbus-default: #800664;
1005
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
1006
+ --basecolors-shape-airportlinkrail-default: #800664;
1007
+ --basecolors-stroke-contrast: #aeb7e2;
1008
+ --basecolors-stroke-default: #181c56;
1009
+ --basecolors-stroke-disabled: #949699;
1010
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1011
+ --basecolors-stroke-focus-standard: #181c56;
1012
+ --basecolors-stroke-highlight: #ff5959;
1013
+ --basecolors-stroke-light: #ffffff;
1014
+ --basecolors-stroke-subdued: #8284ab;
1015
+ --basecolors-stroke-subduedalt: #e3e6e8;
1016
+ --basecolors-text-accent: #181c56;
1017
+ --basecolors-text-disabled: #6e6f73;
1018
+ --basecolors-text-disabledalt: #b6b8ba;
1019
+ --basecolors-text-highlight: #ff5959;
1020
+ --basecolors-text-light: #ffffff;
1021
+ --basecolors-text-subdued: #626493;
1022
+ --basecolors-text-subduedalt: #d9dae8;
991
1023
  }
992
1024
 
993
- .eds-form-control {
994
- display: block;
995
- -webkit-appearance: none;
996
- -moz-appearance: none;
997
- appearance: none;
998
- width: 100%;
999
- height: 100%;
1000
- padding: 20px 0rem 0.25rem;
1001
- font-family: inherit;
1002
- font-size: 1rem;
1003
- line-height: 1rem;
1004
- border: 0;
1005
- color: var(--components-form-baseform-standard-text-content);
1006
- background-color: transparent;
1007
- }
1008
- .eds-form-control::-moz-placeholder {
1009
- opacity: 0;
1010
- -moz-transition: opacity 0.2s ease-in-out;
1011
- transition: opacity 0.2s ease-in-out;
1012
- }
1013
- .eds-form-control::placeholder {
1014
- opacity: 0;
1015
- transition: opacity 0.2s ease-in-out;
1016
- }
1017
- .eds-form-control:focus {
1018
- outline: none;
1019
- }
1020
- .eds-form-control:focus::-moz-placeholder {
1021
- opacity: 1;
1022
- }
1023
- .eds-form-control:focus::placeholder {
1024
- opacity: 1;
1025
+ [data-color-mode=dark] {
1026
+ --basecolors-frame-contrast: #212233;
1027
+ --basecolors-frame-contrastalt: #141527;
1028
+ --basecolors-frame-contrastalt-2: #08091c;
1029
+ --basecolors-frame-default: #08091c;
1030
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1031
+ --basecolors-frame-elevatedalt: #464755;
1032
+ --basecolors-frame-subdued: #2d2e3e;
1033
+ --basecolors-frame-tint: #141527;
1034
+ --basecolors-shape-accent: #e5e5e9;
1035
+ --basecolors-shape-bicycle-contrast: #4db295;
1036
+ --basecolors-shape-bicycle-default: #4db295;
1037
+ --basecolors-shape-bus-contrast: #ef7398;
1038
+ --basecolors-shape-bus-default: #ef7398;
1039
+ --basecolors-shape-cableway-contrast: #b898e5;
1040
+ --basecolors-shape-cableway-default: #b898e5;
1041
+ --basecolors-shape-disabled: #b6b8ba;
1042
+ --basecolors-shape-disabledalt: #b3b4bd;
1043
+ --basecolors-shape-ferry-contrast: #8ccfe2;
1044
+ --basecolors-shape-ferry-default: #8ccfe2;
1045
+ --basecolors-shape-funicular-contrast: #b898e5;
1046
+ --basecolors-shape-funicular-default: #b898e5;
1047
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
1048
+ --basecolors-shape-helicopter-default: #f2b8e5;
1049
+ --basecolors-shape-highlight: #ff9494;
1050
+ --basecolors-shape-light: #e5e5e9;
1051
+ --basecolors-shape-mask: #2d2e3e;
1052
+ --basecolors-shape-maskalt: #393a49;
1053
+ --basecolors-shape-metro-contrast: #dd973c;
1054
+ --basecolors-shape-metro-default: #dd973c;
1055
+ --basecolors-shape-mobility-contrast: #4db295;
1056
+ --basecolors-shape-mobility-default: #4db295;
1057
+ --basecolors-shape-plane-contrast: #f2b8e5;
1058
+ --basecolors-shape-plane-default: #f2b8e5;
1059
+ --basecolors-shape-subdued: #b3b4bd;
1060
+ --basecolors-shape-subduedalt: #b3b4bd;
1061
+ --basecolors-shape-taxi-contrast: #ffe082;
1062
+ --basecolors-shape-taxi-default: #ffe082;
1063
+ --basecolors-shape-train-contrast: #60a2d7;
1064
+ --basecolors-shape-train-default: #60a2d7;
1065
+ --basecolors-shape-tram-contrast: #b898e5;
1066
+ --basecolors-shape-tram-default: #b898e5;
1067
+ --basecolors-shape-walk-contrast: #8d8e9c;
1068
+ --basecolors-shape-walk-default: #8d8e9c;
1069
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1070
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1071
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1072
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1073
+ --basecolors-stroke-contrast: #aeb7e2;
1074
+ --basecolors-stroke-default: #b3b4bd;
1075
+ --basecolors-stroke-disabled: #e3e6e8;
1076
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1077
+ --basecolors-stroke-focus-standard: #aeb7e2;
1078
+ --basecolors-stroke-highlight: #ff9494;
1079
+ --basecolors-stroke-light: #b3b4bd;
1080
+ --basecolors-stroke-subdued: #81828f;
1081
+ --basecolors-stroke-subduedalt: #949699;
1082
+ --basecolors-text-accent: #e5e5e9;
1083
+ --basecolors-text-disabled: #b6b8ba;
1084
+ --basecolors-text-disabledalt: #b6b8ba;
1085
+ --basecolors-text-highlight: #ff9494;
1086
+ --basecolors-text-light: #e5e5e9;
1087
+ --basecolors-text-subdued: #b3b4bd;
1088
+ --basecolors-text-subduedalt: #b3b4bd;
1025
1089
  }
1026
- .eds-form-control__prepend, .eds-form-control__append {
1027
- position: relative;
1028
- line-height: inherit;
1090
+
1091
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
1092
+ background: #ffffff;
1093
+ background: var(--basecolors-frame-default);
1094
+ width: -moz-fit-content;
1095
+ width: fit-content;
1096
+ height: -moz-fit-content;
1097
+ height: fit-content;
1098
+ padding: 0.15rem;
1099
+ margin: -0.15rem;
1029
1100
  }
1030
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
1031
- all: unset;
1032
- position: absolute;
1033
- display: flex;
1034
- align-items: center;
1035
- justify-content: center;
1036
- height: 1.5rem;
1037
- width: 1.5rem;
1038
- right: -2rem;
1039
- border-radius: 100%;
1040
- color: var(--primary-text-color);
1041
- cursor: pointer;
1101
+ *[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 {
1102
+ background-color: #181c56;
1103
+ background-color: var(--basecolors-frame-contrast);
1042
1104
  }
1043
- .eds-form-control__prepend {
1044
- margin-right: 0.75rem;
1045
- margin-left: 0;
1105
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
1106
+ min-height: 7.75rem;
1107
+ resize: vertical;
1108
+ line-height: 1.5rem;
1046
1109
  }
1047
- .eds-form-control__append {
1048
- margin-right: 0;
1049
- margin-left: 0.75rem;
1110
+ .eds-textarea__wrapper .eds-form-control-wrapper {
1111
+ padding-right: 0;
1112
+ cursor: text;
1050
1113
  }
1051
1114
  /* DO NOT CHANGE!*/
1052
1115
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */