@entur/form 8.2.0 → 8.2.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 (2) hide show
  1. package/dist/styles.css +336 -333
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -141,166 +141,6 @@
141
141
  stroke-dashoffset: 0;
142
142
  }
143
143
  }
144
- .eds-fieldset {
145
- margin: 0;
146
- padding: 0;
147
- border: 0;
148
- }
149
- /* DO NOT CHANGE!*/
150
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
151
- .eds-form-component--radio__container {
152
- display: flex;
153
- justify-content: center;
154
- align-items: center;
155
- position: relative;
156
- cursor: pointer;
157
- height: 2rem;
158
- width: -moz-fit-content;
159
- width: fit-content;
160
- -webkit-user-select: none;
161
- -moz-user-select: none;
162
- user-select: none;
163
- }
164
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
165
- background-color: var(--components-form-radio-standard-fill-hover);
166
- }
167
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
168
- background-color: var(--components-form-radio-contrast-fill-hover);
169
- }
170
- .eds-form-component--radio__container input {
171
- position: absolute;
172
- opacity: 0;
173
- cursor: pointer;
174
- height: 0;
175
- width: 0;
176
- }
177
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
178
- height: 0.625rem;
179
- width: 0.625rem;
180
- }
181
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
182
- outline: 2px solid #181c56;
183
- outline-color: var(--basecolors-stroke-focus-standard);
184
- outline-offset: 0.125rem;
185
- }
186
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
187
- outline-color: var(--basecolors-stroke-focus-contrast);
188
- }
189
- .eds-form-component--radio__container .eds-form-component--radio__radio {
190
- position: relative;
191
- height: 1.25rem;
192
- width: 1.25rem;
193
- margin-right: 1rem;
194
- background-color: var(--components-form-radio-standard-fill-default);
195
- border: 0.125rem solid var(--components-form-radio-standard-border);
196
- border-radius: 50%;
197
- display: flex;
198
- align-items: center;
199
- justify-content: center;
200
- }
201
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
202
- background-color: var(--components-form-radio-contrast-fill-default);
203
- border-color: var(--components-form-radio-contrast-border);
204
- }
205
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
206
- background: var(--components-form-baseform-contrast-fill-disabled);
207
- border-color: var(--components-form-baseform-contrast-text-disabled);
208
- cursor: not-allowed;
209
- }
210
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
211
- border-color: var(--components-form-baseform-contrast-text-disabled);
212
- }
213
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
214
- background: var(--components-form-baseform-contrast-fill-disabled);
215
- border-color: var(--components-form-baseform-contrast-text-disabled);
216
- }
217
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
218
- color: var(--components-form-baseform-contrast-text-disabled);
219
- }
220
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
221
- display: block;
222
- width: 0;
223
- height: 0;
224
- border-radius: 50%;
225
- background-color: var(--components-form-radio-standard-fill-selected);
226
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
227
- }
228
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
229
- background-color: var(--components-form-radio-contrast-icon);
230
- }
231
- /* DO NOT CHANGE!*/
232
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
233
- .eds-feedback-text {
234
- display: flex;
235
- align-items: center;
236
- margin-top: 0.25rem;
237
- }
238
- .eds-feedback-text--info, .eds-feedback-text--information {
239
- padding-left: calc(1rem + 0.125rem);
240
- }
241
- .eds-feedback-text__text {
242
- color: var(--components-form-feedbacktext-information-standard-text);
243
- }
244
- .eds-contrast .eds-feedback-text__text {
245
- color: var(--components-form-feedbacktext-information-contrast-text);
246
- }
247
-
248
- .eds-feedback-text__icon {
249
- font-size: 1.5rem;
250
- min-height: 1.5rem;
251
- min-width: 1.5rem;
252
- padding-right: 0.5rem;
253
- position: relative;
254
- top: -0.1rem;
255
- }
256
- .eds-feedback-text__icon--success {
257
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
258
- }
259
- .eds-feedback-text__icon--success circle {
260
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
261
- }
262
- .eds-contrast .eds-feedback-text__icon--success {
263
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
264
- }
265
- .eds-contrast .eds-feedback-text__icon--success circle {
266
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
267
- }
268
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
269
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
270
- }
271
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
272
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
273
- }
274
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
275
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
276
- }
277
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
278
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
279
- }
280
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
281
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
282
- }
283
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
284
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
285
- }
286
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
287
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
288
- }
289
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
290
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
291
- }
292
- .eds-feedback-text__icon--warning {
293
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
294
- }
295
- .eds-feedback-text__icon--warning .svg-exclamation {
296
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
297
- }
298
- .eds-contrast .eds-feedback-text__icon--warning {
299
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
300
- }
301
- .eds-contrast .eds-feedback-text__icon--warning circle {
302
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
303
- }
304
144
  /* DO NOT CHANGE!*/
305
145
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
306
146
  .eds-input-group {
@@ -459,8 +299,11 @@
459
299
  }
460
300
  .eds-contrast .eds-form-control-wrapper--readonly {
461
301
  background: var(--components-form-baseform-contrast-fill-readonly);
462
- color: var(--components-form-baseform-contrast-text-description);
463
302
  border: var(--components-form-baseform-contrast-fill-readonly);
303
+ color: var(--components-form-baseform-contrast-text-description);
304
+ }
305
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
306
+ color: var(--components-form-baseform-contrast-text-description);
464
307
  }
465
308
  .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
466
309
  color: var(--components-form-baseform-contrast-text-description);
@@ -579,178 +422,14 @@
579
422
  }
580
423
  /* DO NOT CHANGE!*/
581
424
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
582
- /* DO NOT CHANGE!*/
583
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
584
- /* DO NOT CHANGE!*/
585
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
586
- /* DO NOT CHANGE!*/
587
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
588
- /* DO NOT CHANGE!*/
589
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
590
- [data-color-mode=light],
591
- :root {
592
- --basecolors-frame-contrast: #181c56;
593
- --basecolors-frame-contrastalt: #393d79;
594
- --basecolors-frame-default: #ffffff;
595
- --basecolors-frame-elevated: #ffffff;
596
- --basecolors-frame-elevatedalt: #f6f6f9;
597
- --basecolors-frame-subdued: #d9dae8;
598
- --basecolors-frame-tint: #f6f6f9;
599
- --basecolors-shape-accent: #181c56;
600
- --basecolors-shape-bicycle-contrast: #00db9b;
601
- --basecolors-shape-bicycle-default: #388f76;
602
- --basecolors-shape-bus-contrast: #ff6392;
603
- --basecolors-shape-bus-default: #c5044e;
604
- --basecolors-shape-cableway-contrast: #b482fb;
605
- --basecolors-shape-cableway-default: #78469a;
606
- --basecolors-shape-disabled: #6e6f73;
607
- --basecolors-shape-disabledalt: #b6b8ba;
608
- --basecolors-shape-ferry-contrast: #6fdfff;
609
- --basecolors-shape-ferry-default: #0c6693;
610
- --basecolors-shape-funicular-contrast: #b482fb;
611
- --basecolors-shape-funicular-default: #78469a;
612
- --basecolors-shape-helicopter-contrast: #fbafea;
613
- --basecolors-shape-helicopter-default: #800664;
614
- --basecolors-shape-highlight: #ff5959;
615
- --basecolors-shape-light: #ffffff;
616
- --basecolors-shape-mask: #ffffff;
617
- --basecolors-shape-maskalt: #ffffff;
618
- --basecolors-shape-metro-contrast: #f08901;
619
- --basecolors-shape-metro-default: #bf5826;
620
- --basecolors-shape-mobility-contrast: #00db9b;
621
- --basecolors-shape-mobility-default: #388f76;
622
- --basecolors-shape-plane-contrast: #fbafea;
623
- --basecolors-shape-plane-default: #800664;
624
- --basecolors-shape-subdued: #626493;
625
- --basecolors-shape-subduedalt: #d9dae8;
626
- --basecolors-shape-taxi-contrast: #ffe082;
627
- --basecolors-shape-taxi-default: #3d3e40;
628
- --basecolors-shape-train-contrast: #42a5f5;
629
- --basecolors-shape-train-default: #00367f;
630
- --basecolors-shape-tram-contrast: #b482fb;
631
- --basecolors-shape-tram-default: #78469a;
632
- --basecolors-shape-walk-contrast: #8284ab;
633
- --basecolors-shape-walk-default: #8d8e9c;
634
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
635
- --basecolors-shape-airportlinkbus-default: #800664;
636
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
637
- --basecolors-shape-airportlinkrail-default: #800664;
638
- --basecolors-stroke-contrast: #aeb7e2;
639
- --basecolors-stroke-default: #181c56;
640
- --basecolors-stroke-disabled: #949699;
641
- --basecolors-stroke-focus-contrast: #aeb7e2;
642
- --basecolors-stroke-focus-standard: #181c56;
643
- --basecolors-stroke-highlight: #ff5959;
644
- --basecolors-stroke-light: #ffffff;
645
- --basecolors-stroke-subdued: #8284ab;
646
- --basecolors-stroke-subduedalt: #e3e6e8;
647
- --basecolors-text-accent: #181c56;
648
- --basecolors-text-disabled: #6e6f73;
649
- --basecolors-text-disabledalt: #b6b8ba;
650
- --basecolors-text-highlight: #ff5959;
651
- --basecolors-text-light: #ffffff;
652
- --basecolors-text-subdued: #626493;
653
- --basecolors-text-subduedalt: #d9dae8;
654
- }
655
-
656
- [data-color-mode=dark] {
657
- --basecolors-frame-contrast: #212233;
658
- --basecolors-frame-contrastalt: #141527;
659
- --basecolors-frame-default: #08091c;
660
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
661
- --basecolors-frame-elevatedalt: #464755;
662
- --basecolors-frame-subdued: #2d2e3e;
663
- --basecolors-frame-tint: #141527;
664
- --basecolors-shape-accent: #e5e5e9;
665
- --basecolors-shape-bicycle-contrast: #4db295;
666
- --basecolors-shape-bicycle-default: #4db295;
667
- --basecolors-shape-bus-contrast: #ef7398;
668
- --basecolors-shape-bus-default: #ef7398;
669
- --basecolors-shape-cableway-contrast: #b898e5;
670
- --basecolors-shape-cableway-default: #b898e5;
671
- --basecolors-shape-disabled: #b6b8ba;
672
- --basecolors-shape-disabledalt: #b3b4bd;
673
- --basecolors-shape-ferry-contrast: #8ccfe2;
674
- --basecolors-shape-ferry-default: #8ccfe2;
675
- --basecolors-shape-funicular-contrast: #b898e5;
676
- --basecolors-shape-funicular-default: #b898e5;
677
- --basecolors-shape-helicopter-contrast: #f2b8e5;
678
- --basecolors-shape-helicopter-default: #f2b8e5;
679
- --basecolors-shape-highlight: #ff9494;
680
- --basecolors-shape-light: #e5e5e9;
681
- --basecolors-shape-mask: #2d2e3e;
682
- --basecolors-shape-maskalt: #393a49;
683
- --basecolors-shape-metro-contrast: #dd973c;
684
- --basecolors-shape-metro-default: #dd973c;
685
- --basecolors-shape-mobility-contrast: #4db295;
686
- --basecolors-shape-mobility-default: #4db295;
687
- --basecolors-shape-plane-contrast: #f2b8e5;
688
- --basecolors-shape-plane-default: #f2b8e5;
689
- --basecolors-shape-subdued: #b3b4bd;
690
- --basecolors-shape-subduedalt: #b3b4bd;
691
- --basecolors-shape-taxi-contrast: #ffe082;
692
- --basecolors-shape-taxi-default: #ffe082;
693
- --basecolors-shape-train-contrast: #60a2d7;
694
- --basecolors-shape-train-default: #60a2d7;
695
- --basecolors-shape-tram-contrast: #b898e5;
696
- --basecolors-shape-tram-default: #b898e5;
697
- --basecolors-shape-walk-contrast: #8d8e9c;
698
- --basecolors-shape-walk-default: #8d8e9c;
699
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
700
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
701
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
702
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
703
- --basecolors-stroke-contrast: #aeb7e2;
704
- --basecolors-stroke-default: #b3b4bd;
705
- --basecolors-stroke-disabled: #e3e6e8;
706
- --basecolors-stroke-focus-contrast: #aeb7e2;
707
- --basecolors-stroke-focus-standard: #aeb7e2;
708
- --basecolors-stroke-highlight: #ff9494;
709
- --basecolors-stroke-light: #b3b4bd;
710
- --basecolors-stroke-subdued: #81828f;
711
- --basecolors-stroke-subduedalt: #949699;
712
- --basecolors-text-accent: #e5e5e9;
713
- --basecolors-text-disabled: #b6b8ba;
714
- --basecolors-text-disabledalt: #b6b8ba;
715
- --basecolors-text-highlight: #ff9494;
716
- --basecolors-text-light: #e5e5e9;
717
- --basecolors-text-subdued: #b3b4bd;
718
- --basecolors-text-subduedalt: #b3b4bd;
719
- }
720
-
721
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
722
- background: #ffffff;
723
- background: var(--basecolors-frame-default);
724
- width: -moz-fit-content;
725
- width: fit-content;
726
- height: -moz-fit-content;
727
- height: fit-content;
728
- padding: 0.15rem;
729
- margin: -0.15rem;
730
- }
731
- *[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 {
732
- background-color: #181c56;
733
- background-color: var(--basecolors-frame-contrast);
734
- }
735
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
736
- min-height: 7.75rem;
737
- resize: vertical;
738
- line-height: 1.5rem;
739
- }
740
- .eds-textarea__wrapper .eds-form-control-wrapper {
741
- padding-right: 0;
742
- cursor: text;
743
- }
744
- /* DO NOT CHANGE!*/
745
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
746
- .eds-switch {
747
- cursor: pointer;
748
- -webkit-user-select: none;
749
- -moz-user-select: none;
750
- user-select: none;
751
- padding: 0.5rem 0;
752
- width: -moz-fit-content;
753
- width: fit-content;
425
+ .eds-switch {
426
+ cursor: pointer;
427
+ -webkit-user-select: none;
428
+ -moz-user-select: none;
429
+ user-select: none;
430
+ padding: 0.5rem 0;
431
+ width: -moz-fit-content;
432
+ width: fit-content;
754
433
  }
755
434
  .eds-switch input {
756
435
  opacity: 0;
@@ -862,6 +541,330 @@
862
541
  }
863
542
  /* DO NOT CHANGE!*/
864
543
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
544
+ .eds-form-component--radio__container {
545
+ display: flex;
546
+ justify-content: center;
547
+ align-items: center;
548
+ position: relative;
549
+ cursor: pointer;
550
+ height: 2rem;
551
+ width: -moz-fit-content;
552
+ width: fit-content;
553
+ -webkit-user-select: none;
554
+ -moz-user-select: none;
555
+ user-select: none;
556
+ }
557
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
558
+ background-color: var(--components-form-radio-standard-fill-hover);
559
+ }
560
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
561
+ background-color: var(--components-form-radio-contrast-fill-hover);
562
+ }
563
+ .eds-form-component--radio__container input {
564
+ position: absolute;
565
+ opacity: 0;
566
+ cursor: pointer;
567
+ height: 0;
568
+ width: 0;
569
+ }
570
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
571
+ height: 0.625rem;
572
+ width: 0.625rem;
573
+ }
574
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
575
+ outline: 2px solid #181c56;
576
+ outline-color: var(--basecolors-stroke-focus-standard);
577
+ outline-offset: 0.125rem;
578
+ }
579
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
580
+ outline-color: var(--basecolors-stroke-focus-contrast);
581
+ }
582
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
583
+ position: relative;
584
+ height: 1.25rem;
585
+ width: 1.25rem;
586
+ margin-right: 1rem;
587
+ background-color: var(--components-form-radio-standard-fill-default);
588
+ border: 0.125rem solid var(--components-form-radio-standard-border);
589
+ border-radius: 50%;
590
+ display: flex;
591
+ align-items: center;
592
+ justify-content: center;
593
+ }
594
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
595
+ background-color: var(--components-form-radio-contrast-fill-default);
596
+ border-color: var(--components-form-radio-contrast-border);
597
+ }
598
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
599
+ background: var(--components-form-baseform-contrast-fill-disabled);
600
+ border-color: var(--components-form-baseform-contrast-text-disabled);
601
+ cursor: not-allowed;
602
+ }
603
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
604
+ border-color: var(--components-form-baseform-contrast-text-disabled);
605
+ }
606
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
607
+ background: var(--components-form-baseform-contrast-fill-disabled);
608
+ border-color: var(--components-form-baseform-contrast-text-disabled);
609
+ }
610
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
611
+ color: var(--components-form-baseform-contrast-text-disabled);
612
+ }
613
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
614
+ display: block;
615
+ width: 0;
616
+ height: 0;
617
+ border-radius: 50%;
618
+ background-color: var(--components-form-radio-standard-fill-selected);
619
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
620
+ }
621
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
622
+ background-color: var(--components-form-radio-contrast-icon);
623
+ }
624
+ /* DO NOT CHANGE!*/
625
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
626
+ .eds-feedback-text {
627
+ display: flex;
628
+ align-items: center;
629
+ margin-top: 0.25rem;
630
+ }
631
+ .eds-feedback-text--info, .eds-feedback-text--information {
632
+ padding-left: calc(1rem + 0.125rem);
633
+ }
634
+ .eds-feedback-text__text {
635
+ color: var(--components-form-feedbacktext-information-standard-text);
636
+ }
637
+ .eds-contrast .eds-feedback-text__text {
638
+ color: var(--components-form-feedbacktext-information-contrast-text);
639
+ }
640
+
641
+ .eds-feedback-text__icon {
642
+ font-size: 1.5rem;
643
+ min-height: 1.5rem;
644
+ min-width: 1.5rem;
645
+ padding-right: 0.5rem;
646
+ position: relative;
647
+ top: -0.1rem;
648
+ }
649
+ .eds-feedback-text__icon--success {
650
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
651
+ }
652
+ .eds-feedback-text__icon--success circle {
653
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
654
+ }
655
+ .eds-contrast .eds-feedback-text__icon--success {
656
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
657
+ }
658
+ .eds-contrast .eds-feedback-text__icon--success circle {
659
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
660
+ }
661
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
662
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
663
+ }
664
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
665
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
666
+ }
667
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
668
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
669
+ }
670
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
671
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
672
+ }
673
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
674
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
675
+ }
676
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
677
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
678
+ }
679
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
680
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
681
+ }
682
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
683
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
684
+ }
685
+ .eds-feedback-text__icon--warning {
686
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
687
+ }
688
+ .eds-feedback-text__icon--warning .svg-exclamation {
689
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
690
+ }
691
+ .eds-contrast .eds-feedback-text__icon--warning {
692
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
693
+ }
694
+ .eds-contrast .eds-feedback-text__icon--warning circle {
695
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
696
+ }
697
+ .eds-fieldset {
698
+ margin: 0;
699
+ padding: 0;
700
+ border: 0;
701
+ }
702
+ /* DO NOT CHANGE!*/
703
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
704
+ /* DO NOT CHANGE!*/
705
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
706
+ /* DO NOT CHANGE!*/
707
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
708
+ /* DO NOT CHANGE!*/
709
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
710
+ /* DO NOT CHANGE!*/
711
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
712
+ [data-color-mode=light],
713
+ :root {
714
+ --basecolors-frame-contrast: #181c56;
715
+ --basecolors-frame-contrastalt: #393d79;
716
+ --basecolors-frame-default: #ffffff;
717
+ --basecolors-frame-elevated: #ffffff;
718
+ --basecolors-frame-elevatedalt: #f6f6f9;
719
+ --basecolors-frame-subdued: #d9dae8;
720
+ --basecolors-frame-tint: #f6f6f9;
721
+ --basecolors-shape-accent: #181c56;
722
+ --basecolors-shape-bicycle-contrast: #00db9b;
723
+ --basecolors-shape-bicycle-default: #388f76;
724
+ --basecolors-shape-bus-contrast: #ff6392;
725
+ --basecolors-shape-bus-default: #c5044e;
726
+ --basecolors-shape-cableway-contrast: #b482fb;
727
+ --basecolors-shape-cableway-default: #78469a;
728
+ --basecolors-shape-disabled: #6e6f73;
729
+ --basecolors-shape-disabledalt: #b6b8ba;
730
+ --basecolors-shape-ferry-contrast: #6fdfff;
731
+ --basecolors-shape-ferry-default: #0c6693;
732
+ --basecolors-shape-funicular-contrast: #b482fb;
733
+ --basecolors-shape-funicular-default: #78469a;
734
+ --basecolors-shape-helicopter-contrast: #fbafea;
735
+ --basecolors-shape-helicopter-default: #800664;
736
+ --basecolors-shape-highlight: #ff5959;
737
+ --basecolors-shape-light: #ffffff;
738
+ --basecolors-shape-mask: #ffffff;
739
+ --basecolors-shape-maskalt: #ffffff;
740
+ --basecolors-shape-metro-contrast: #f08901;
741
+ --basecolors-shape-metro-default: #bf5826;
742
+ --basecolors-shape-mobility-contrast: #00db9b;
743
+ --basecolors-shape-mobility-default: #388f76;
744
+ --basecolors-shape-plane-contrast: #fbafea;
745
+ --basecolors-shape-plane-default: #800664;
746
+ --basecolors-shape-subdued: #626493;
747
+ --basecolors-shape-subduedalt: #d9dae8;
748
+ --basecolors-shape-taxi-contrast: #ffe082;
749
+ --basecolors-shape-taxi-default: #3d3e40;
750
+ --basecolors-shape-train-contrast: #42a5f5;
751
+ --basecolors-shape-train-default: #00367f;
752
+ --basecolors-shape-tram-contrast: #b482fb;
753
+ --basecolors-shape-tram-default: #78469a;
754
+ --basecolors-shape-walk-contrast: #8284ab;
755
+ --basecolors-shape-walk-default: #8d8e9c;
756
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
757
+ --basecolors-shape-airportlinkbus-default: #800664;
758
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
759
+ --basecolors-shape-airportlinkrail-default: #800664;
760
+ --basecolors-stroke-contrast: #aeb7e2;
761
+ --basecolors-stroke-default: #181c56;
762
+ --basecolors-stroke-disabled: #949699;
763
+ --basecolors-stroke-focus-contrast: #aeb7e2;
764
+ --basecolors-stroke-focus-standard: #181c56;
765
+ --basecolors-stroke-highlight: #ff5959;
766
+ --basecolors-stroke-light: #ffffff;
767
+ --basecolors-stroke-subdued: #8284ab;
768
+ --basecolors-stroke-subduedalt: #e3e6e8;
769
+ --basecolors-text-accent: #181c56;
770
+ --basecolors-text-disabled: #6e6f73;
771
+ --basecolors-text-disabledalt: #b6b8ba;
772
+ --basecolors-text-highlight: #ff5959;
773
+ --basecolors-text-light: #ffffff;
774
+ --basecolors-text-subdued: #626493;
775
+ --basecolors-text-subduedalt: #d9dae8;
776
+ }
777
+
778
+ [data-color-mode=dark] {
779
+ --basecolors-frame-contrast: #212233;
780
+ --basecolors-frame-contrastalt: #141527;
781
+ --basecolors-frame-default: #08091c;
782
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
783
+ --basecolors-frame-elevatedalt: #464755;
784
+ --basecolors-frame-subdued: #2d2e3e;
785
+ --basecolors-frame-tint: #141527;
786
+ --basecolors-shape-accent: #e5e5e9;
787
+ --basecolors-shape-bicycle-contrast: #4db295;
788
+ --basecolors-shape-bicycle-default: #4db295;
789
+ --basecolors-shape-bus-contrast: #ef7398;
790
+ --basecolors-shape-bus-default: #ef7398;
791
+ --basecolors-shape-cableway-contrast: #b898e5;
792
+ --basecolors-shape-cableway-default: #b898e5;
793
+ --basecolors-shape-disabled: #b6b8ba;
794
+ --basecolors-shape-disabledalt: #b3b4bd;
795
+ --basecolors-shape-ferry-contrast: #8ccfe2;
796
+ --basecolors-shape-ferry-default: #8ccfe2;
797
+ --basecolors-shape-funicular-contrast: #b898e5;
798
+ --basecolors-shape-funicular-default: #b898e5;
799
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
800
+ --basecolors-shape-helicopter-default: #f2b8e5;
801
+ --basecolors-shape-highlight: #ff9494;
802
+ --basecolors-shape-light: #e5e5e9;
803
+ --basecolors-shape-mask: #2d2e3e;
804
+ --basecolors-shape-maskalt: #393a49;
805
+ --basecolors-shape-metro-contrast: #dd973c;
806
+ --basecolors-shape-metro-default: #dd973c;
807
+ --basecolors-shape-mobility-contrast: #4db295;
808
+ --basecolors-shape-mobility-default: #4db295;
809
+ --basecolors-shape-plane-contrast: #f2b8e5;
810
+ --basecolors-shape-plane-default: #f2b8e5;
811
+ --basecolors-shape-subdued: #b3b4bd;
812
+ --basecolors-shape-subduedalt: #b3b4bd;
813
+ --basecolors-shape-taxi-contrast: #ffe082;
814
+ --basecolors-shape-taxi-default: #ffe082;
815
+ --basecolors-shape-train-contrast: #60a2d7;
816
+ --basecolors-shape-train-default: #60a2d7;
817
+ --basecolors-shape-tram-contrast: #b898e5;
818
+ --basecolors-shape-tram-default: #b898e5;
819
+ --basecolors-shape-walk-contrast: #8d8e9c;
820
+ --basecolors-shape-walk-default: #8d8e9c;
821
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
822
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
823
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
824
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
825
+ --basecolors-stroke-contrast: #aeb7e2;
826
+ --basecolors-stroke-default: #b3b4bd;
827
+ --basecolors-stroke-disabled: #e3e6e8;
828
+ --basecolors-stroke-focus-contrast: #aeb7e2;
829
+ --basecolors-stroke-focus-standard: #aeb7e2;
830
+ --basecolors-stroke-highlight: #ff9494;
831
+ --basecolors-stroke-light: #b3b4bd;
832
+ --basecolors-stroke-subdued: #81828f;
833
+ --basecolors-stroke-subduedalt: #949699;
834
+ --basecolors-text-accent: #e5e5e9;
835
+ --basecolors-text-disabled: #b6b8ba;
836
+ --basecolors-text-disabledalt: #b6b8ba;
837
+ --basecolors-text-highlight: #ff9494;
838
+ --basecolors-text-light: #e5e5e9;
839
+ --basecolors-text-subdued: #b3b4bd;
840
+ --basecolors-text-subduedalt: #b3b4bd;
841
+ }
842
+
843
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
844
+ background: #ffffff;
845
+ background: var(--basecolors-frame-default);
846
+ width: -moz-fit-content;
847
+ width: fit-content;
848
+ height: -moz-fit-content;
849
+ height: fit-content;
850
+ padding: 0.15rem;
851
+ margin: -0.15rem;
852
+ }
853
+ *[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 {
854
+ background-color: #181c56;
855
+ background-color: var(--basecolors-frame-contrast);
856
+ }
857
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
858
+ min-height: 7.75rem;
859
+ resize: vertical;
860
+ line-height: 1.5rem;
861
+ }
862
+ .eds-textarea__wrapper .eds-form-control-wrapper {
863
+ padding-right: 0;
864
+ cursor: text;
865
+ }
866
+ /* DO NOT CHANGE!*/
867
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
865
868
  .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
866
869
  outline: 2px solid #181c56;
867
870
  outline-color: var(--basecolors-stroke-focus-standard);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.2.0",
3
+ "version": "8.2.1",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.0",
31
- "@entur/icons": "^7.6.0",
32
- "@entur/tokens": "^3.17.5",
33
- "@entur/tooltip": "^5.2.0",
34
- "@entur/typography": "^1.9.0",
30
+ "@entur/button": "^3.3.1",
31
+ "@entur/icons": "^7.6.1",
32
+ "@entur/tokens": "^3.17.6",
33
+ "@entur/tooltip": "^5.2.1",
34
+ "@entur/typography": "^1.9.1",
35
35
  "@entur/utils": "^0.12.2",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "2a0e12f4ccbc65c2c8a115690b4895ff01ee7f06"
41
+ "gitHead": "d7798b768ab73d677162cebcf3edd58680dc626f"
42
42
  }