@entur/chip 0.8.12 → 0.9.1-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 (18) hide show
  1. package/dist/chip.cjs.js +302 -0
  2. package/dist/chip.cjs.js.map +1 -0
  3. package/dist/chip.esm.js +292 -212
  4. package/dist/chip.esm.js.map +1 -1
  5. package/dist/index.d.ts +98 -6
  6. package/dist/styles.css +212 -231
  7. package/package.json +33 -15
  8. package/dist/ActionChip.d.ts +0 -18
  9. package/dist/ChoiceChip.d.ts +0 -20
  10. package/dist/ChoiceChipGroup.d.ts +0 -16
  11. package/dist/ChoiceChipGroupContext.d.ts +0 -9
  12. package/dist/FilterChip.d.ts +0 -27
  13. package/dist/TagChip.d.ts +0 -18
  14. package/dist/chip.cjs.development.js +0 -230
  15. package/dist/chip.cjs.development.js.map +0 -1
  16. package/dist/chip.cjs.production.min.js +0 -2
  17. package/dist/chip.cjs.production.min.js.map +0 -1
  18. package/dist/index.js +0 -8
package/dist/index.d.ts CHANGED
@@ -1,6 +1,98 @@
1
- import './index.scss';
2
- export * from './ChoiceChip';
3
- export * from './ActionChip';
4
- export * from './TagChip';
5
- export * from './FilterChip';
6
- export * from './ChoiceChipGroup';
1
+ import { default as default_2 } from 'react';
2
+
3
+ export declare const ActionChip: default_2.ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;
4
+
5
+ export declare type ActionChipProps = {
6
+ /** Teksten som vises i ActionChip */
7
+ children: default_2.ReactNode;
8
+ /** Ekstra klassenavn */
9
+ className?: string;
10
+ /** Om chip-en er opptatt, f.eks med å oppdatere informasjon
11
+ * @default false
12
+ */
13
+ loading?: boolean;
14
+ /** Størrelsen på chip
15
+ * @default 'medium'
16
+ */
17
+ size?: 'small' | 'medium';
18
+ } & default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
19
+
20
+ export declare const ChoiceChip: default_2.ForwardRefExoticComponent<Omit<ChoiceChipProps, "ref"> & default_2.RefAttributes<HTMLInputElement>>;
21
+
22
+ export declare const ChoiceChipGroup: default_2.FC<ChoiceChipGroupProps>;
23
+
24
+ export declare type ChoiceChipGroupProps = {
25
+ /** Navnet til ChoiceChipsGroup */
26
+ name: string;
27
+ /** Verdien til den valgte ChoiceChipen */
28
+ value: string | null;
29
+ /** ChoiceChip-komponentene sendes inn som children */
30
+ children: default_2.ReactNode;
31
+ /** En callback som blir kalles hver gang en ChoiceChip klikkes på */
32
+ onChange: (e: default_2.ChangeEvent<HTMLInputElement>) => void;
33
+ /** Labelen til ChoiceChip-gruppen. */
34
+ label?: default_2.ReactNode;
35
+ [key: string]: any;
36
+ };
37
+
38
+ export declare type ChoiceChipProps = {
39
+ /** Ekstra klassenavn */
40
+ className?: string;
41
+ /** Om Choicechip er deaktivert eller ikke
42
+ * @default false
43
+ */
44
+ disabled?: boolean;
45
+ /** Label til ChoiceChip */
46
+ children?: default_2.ReactNode;
47
+ /** Verdien til ChoiceChip */
48
+ value: string;
49
+ /** Størrelsen på chip
50
+ * @default 'medium'
51
+ */
52
+ size?: 'small' | 'medium';
53
+ } & Omit<default_2.DetailedHTMLProps<default_2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value' | 'size'>;
54
+
55
+ export declare const FilterChip: default_2.ForwardRefExoticComponent<{
56
+ /** Ekstra klassenavn */
57
+ className?: string;
58
+ /** Label til FilterChip */
59
+ children?: default_2.ReactNode;
60
+ /** Verdien til FilterChip */
61
+ value: string;
62
+ /** Størrelsen på chip
63
+ * @default 'medium'
64
+ */
65
+ size?: "small" | "medium";
66
+ } & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & default_2.RefAttributes<HTMLInputElement>>;
67
+
68
+ export declare type FilterChipProps = {
69
+ /** Ekstra klassenavn */
70
+ className?: string;
71
+ /** Label til FilterChip */
72
+ children?: default_2.ReactNode;
73
+ /** Verdien til FilterChip */
74
+ value: string;
75
+ /** Størrelsen på chip
76
+ * @default 'medium'
77
+ */
78
+ size?: 'small' | 'medium';
79
+ } & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'>;
80
+
81
+ export declare const TagChip: default_2.ForwardRefExoticComponent<TagChipProps & default_2.RefAttributes<HTMLButtonElement>>;
82
+
83
+ export declare type TagChipProps = {
84
+ /** Teksten som vises i TagChip */
85
+ children: default_2.ReactNode;
86
+ /** Ekstra klassenavn */
87
+ className?: string;
88
+ /** Callback for når man klikker på krysset */
89
+ onClose: () => void;
90
+ /** Skjermlesertekst for X-knappen */
91
+ closeButtonAriaLabel?: string;
92
+ /** Størrelsen på chip
93
+ * @default 'medium'
94
+ */
95
+ size?: 'small' | 'medium';
96
+ };
97
+
98
+ export { }
package/dist/styles.css CHANGED
@@ -1,5 +1,201 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ /* DO NOT CHANGE!*/
4
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ /* DO NOT CHANGE!*/
6
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
+ [data-color-mode=light],
8
+ :root {
9
+ --components-chip-contrast-active: #8794d4;
10
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
11
+ --components-chip-contrast-border-disabled: #949699;
12
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
13
+ --components-chip-contrast-hover: #626493;
14
+ --components-chip-contrast-icon-disabled: #b6b8ba;
15
+ --components-chip-contrast-icon-selected: #181c56;
16
+ --components-chip-contrast-icon-unselected: #ffffff;
17
+ --components-chip-contrast-text-disabled: #b6b8ba;
18
+ --components-chip-contrast-text-selected: #181c56;
19
+ --components-chip-contrast-text-unselected: #ffffff;
20
+ --components-chip-standard-active: #aeb7e2;
21
+ --components-chip-standard-border: rgba(84, 86, 140, 0.4);
22
+ --components-chip-standard-border-disabled: #949699;
23
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
24
+ --components-chip-standard-hover: #d9ddf2;
25
+ --components-chip-standard-icon-disabled: #6e6f73;
26
+ --components-chip-standard-icon-selected: #181c56;
27
+ --components-chip-standard-icon-unselected: #181c56;
28
+ --components-chip-standard-text-disabled: #6e6f73;
29
+ --components-chip-standard-text-selected: #181c56;
30
+ --components-chip-standard-text-unselected: #181c56;
31
+ }
32
+
33
+ [data-color-mode=dark] {
34
+ --components-chip-contrast-active: #8794d4;
35
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
36
+ --components-chip-contrast-border-disabled: #949699;
37
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
38
+ --components-chip-contrast-hover: #626493;
39
+ --components-chip-contrast-icon-disabled: #b6b8ba;
40
+ --components-chip-contrast-icon-selected: #08091c;
41
+ --components-chip-contrast-icon-unselected: #e5e5e9;
42
+ --components-chip-contrast-text-disabled: #b6b8ba;
43
+ --components-chip-contrast-text-selected: #08091c;
44
+ --components-chip-contrast-text-unselected: #e5e5e9;
45
+ --components-chip-standard-active: #8794d4;
46
+ --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
47
+ --components-chip-standard-border-disabled: #949699;
48
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
49
+ --components-chip-standard-hover: #626493;
50
+ --components-chip-standard-icon-disabled: #b6b8ba;
51
+ --components-chip-standard-icon-selected: #08091c;
52
+ --components-chip-standard-icon-unselected: #e5e5e9;
53
+ --components-chip-standard-text-disabled: #b6b8ba;
54
+ --components-chip-standard-text-selected: #08091c;
55
+ --components-chip-standard-text-unselected: #e5e5e9;
56
+ }
57
+
58
+ /* DO NOT CHANGE!*/
59
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
+ /* DO NOT CHANGE!*/
61
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
+ [data-color-mode=light],
63
+ :root {
64
+ --basecolors-frame-contrast: #181c56;
65
+ --basecolors-frame-contrastalt: #393d79;
66
+ --basecolors-frame-contrastalt-2: #292b6a;
67
+ --basecolors-frame-default: #ffffff;
68
+ --basecolors-frame-elevated: #ffffff;
69
+ --basecolors-frame-elevatedalt: #f6f6f9;
70
+ --basecolors-frame-subdued: #d9dae8;
71
+ --basecolors-frame-tint: #f6f6f9;
72
+ --basecolors-shape-accent: #181c56;
73
+ --basecolors-shape-bicycle-contrast: #00db9b;
74
+ --basecolors-shape-bicycle-default: #388f76;
75
+ --basecolors-shape-bus-contrast: #ff6392;
76
+ --basecolors-shape-bus-default: #c5044e;
77
+ --basecolors-shape-cableway-contrast: #b482fb;
78
+ --basecolors-shape-cableway-default: #78469a;
79
+ --basecolors-shape-disabled: #6e6f73;
80
+ --basecolors-shape-disabledalt: #b6b8ba;
81
+ --basecolors-shape-ferry-contrast: #6fdfff;
82
+ --basecolors-shape-ferry-default: #0c6693;
83
+ --basecolors-shape-funicular-contrast: #b482fb;
84
+ --basecolors-shape-funicular-default: #78469a;
85
+ --basecolors-shape-helicopter-contrast: #fbafea;
86
+ --basecolors-shape-helicopter-default: #800664;
87
+ --basecolors-shape-highlight: #ff5959;
88
+ --basecolors-shape-light: #ffffff;
89
+ --basecolors-shape-mask: #ffffff;
90
+ --basecolors-shape-maskalt: #ffffff;
91
+ --basecolors-shape-metro-contrast: #f08901;
92
+ --basecolors-shape-metro-default: #bf5826;
93
+ --basecolors-shape-mobility-contrast: #00db9b;
94
+ --basecolors-shape-mobility-default: #388f76;
95
+ --basecolors-shape-plane-contrast: #fbafea;
96
+ --basecolors-shape-plane-default: #800664;
97
+ --basecolors-shape-subdued: #626493;
98
+ --basecolors-shape-subduedalt: #d9dae8;
99
+ --basecolors-shape-taxi-contrast: #ffe082;
100
+ --basecolors-shape-taxi-default: #3d3e40;
101
+ --basecolors-shape-train-contrast: #42a5f5;
102
+ --basecolors-shape-train-default: #00367f;
103
+ --basecolors-shape-tram-contrast: #b482fb;
104
+ --basecolors-shape-tram-default: #78469a;
105
+ --basecolors-shape-walk-contrast: #8284ab;
106
+ --basecolors-shape-walk-default: #8d8e9c;
107
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
108
+ --basecolors-shape-airportlinkbus-default: #800664;
109
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
110
+ --basecolors-shape-airportlinkrail-default: #800664;
111
+ --basecolors-stroke-contrast: #aeb7e2;
112
+ --basecolors-stroke-default: #181c56;
113
+ --basecolors-stroke-disabled: #949699;
114
+ --basecolors-stroke-focus-contrast: #aeb7e2;
115
+ --basecolors-stroke-focus-standard: #181c56;
116
+ --basecolors-stroke-highlight: #ff5959;
117
+ --basecolors-stroke-light: #ffffff;
118
+ --basecolors-stroke-subdued: #8284ab;
119
+ --basecolors-stroke-subduedalt: #e3e6e8;
120
+ --basecolors-text-accent: #181c56;
121
+ --basecolors-text-disabled: #6e6f73;
122
+ --basecolors-text-disabledalt: #b6b8ba;
123
+ --basecolors-text-highlight: #ff5959;
124
+ --basecolors-text-light: #ffffff;
125
+ --basecolors-text-subdued: #626493;
126
+ --basecolors-text-subduedalt: #d9dae8;
127
+ }
128
+
129
+ [data-color-mode=dark] {
130
+ --basecolors-frame-contrast: #212233;
131
+ --basecolors-frame-contrastalt: #141527;
132
+ --basecolors-frame-contrastalt-2: #08091c;
133
+ --basecolors-frame-default: #08091c;
134
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
135
+ --basecolors-frame-elevatedalt: #464755;
136
+ --basecolors-frame-subdued: #2d2e3e;
137
+ --basecolors-frame-tint: #141527;
138
+ --basecolors-shape-accent: #e5e5e9;
139
+ --basecolors-shape-bicycle-contrast: #4db295;
140
+ --basecolors-shape-bicycle-default: #4db295;
141
+ --basecolors-shape-bus-contrast: #ef7398;
142
+ --basecolors-shape-bus-default: #ef7398;
143
+ --basecolors-shape-cableway-contrast: #b898e5;
144
+ --basecolors-shape-cableway-default: #b898e5;
145
+ --basecolors-shape-disabled: #b6b8ba;
146
+ --basecolors-shape-disabledalt: #b3b4bd;
147
+ --basecolors-shape-ferry-contrast: #8ccfe2;
148
+ --basecolors-shape-ferry-default: #8ccfe2;
149
+ --basecolors-shape-funicular-contrast: #b898e5;
150
+ --basecolors-shape-funicular-default: #b898e5;
151
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
152
+ --basecolors-shape-helicopter-default: #f2b8e5;
153
+ --basecolors-shape-highlight: #ff9494;
154
+ --basecolors-shape-light: #e5e5e9;
155
+ --basecolors-shape-mask: #2d2e3e;
156
+ --basecolors-shape-maskalt: #393a49;
157
+ --basecolors-shape-metro-contrast: #dd973c;
158
+ --basecolors-shape-metro-default: #dd973c;
159
+ --basecolors-shape-mobility-contrast: #4db295;
160
+ --basecolors-shape-mobility-default: #4db295;
161
+ --basecolors-shape-plane-contrast: #f2b8e5;
162
+ --basecolors-shape-plane-default: #f2b8e5;
163
+ --basecolors-shape-subdued: #b3b4bd;
164
+ --basecolors-shape-subduedalt: #b3b4bd;
165
+ --basecolors-shape-taxi-contrast: #ffe082;
166
+ --basecolors-shape-taxi-default: #ffe082;
167
+ --basecolors-shape-train-contrast: #60a2d7;
168
+ --basecolors-shape-train-default: #60a2d7;
169
+ --basecolors-shape-tram-contrast: #b898e5;
170
+ --basecolors-shape-tram-default: #b898e5;
171
+ --basecolors-shape-walk-contrast: #8d8e9c;
172
+ --basecolors-shape-walk-default: #8d8e9c;
173
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
174
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
175
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
176
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
177
+ --basecolors-stroke-contrast: #aeb7e2;
178
+ --basecolors-stroke-default: #b3b4bd;
179
+ --basecolors-stroke-disabled: #e3e6e8;
180
+ --basecolors-stroke-focus-contrast: #aeb7e2;
181
+ --basecolors-stroke-focus-standard: #aeb7e2;
182
+ --basecolors-stroke-highlight: #ff9494;
183
+ --basecolors-stroke-light: #b3b4bd;
184
+ --basecolors-stroke-subdued: #81828f;
185
+ --basecolors-stroke-subduedalt: #949699;
186
+ --basecolors-text-accent: #e5e5e9;
187
+ --basecolors-text-disabled: #b6b8ba;
188
+ --basecolors-text-disabledalt: #b6b8ba;
189
+ --basecolors-text-highlight: #ff9494;
190
+ --basecolors-text-light: #e5e5e9;
191
+ --basecolors-text-subdued: #b3b4bd;
192
+ --basecolors-text-subduedalt: #b3b4bd;
193
+ }
194
+
195
+ :root {
196
+ --eds-chip: 1;
197
+ }/* DO NOT CHANGE!*/
198
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
199
  .eds-chip {
4
200
  background: transparent;
5
201
  border: 0.0625rem solid var(--components-chip-standard-border);
@@ -10,6 +206,7 @@
10
206
  display: flex;
11
207
  justify-content: center;
12
208
  align-items: center;
209
+ white-space: nowrap;
13
210
  }
14
211
  .eds-chip svg {
15
212
  font-size: 0.875rem;
@@ -19,12 +216,6 @@
19
216
  color: var(--components-chip-contrast-text-unselected);
20
217
  border-color: var(--components-chip-contrast-border);
21
218
  }
22
- .eds-chip--leading-icon .eds-icon:first-of-type {
23
- margin-right: 0.5rem;
24
- }
25
- .eds-chip--trailing-icon .eds-icon:last-of-type {
26
- margin-left: 0.5rem;
27
- }
28
219
  .eds-chip--size-small {
29
220
  height: 1.5rem;
30
221
  min-width: 2.5rem;
@@ -41,7 +232,12 @@
41
232
  padding: 0 0.75rem;
42
233
  font-size: 0.875rem;
43
234
  }
44
- /* DO NOT CHANGE!*/
235
+ .eds-chip--leading-icon > svg:first-of-type {
236
+ margin-right: 0.25rem;
237
+ }
238
+ .eds-chip--trailing-icon > svg:last-of-type {
239
+ margin-left: 0.25rem;
240
+ }/* DO NOT CHANGE!*/
45
241
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
46
242
  .eds-choice-chip {
47
243
  cursor: pointer;
@@ -51,8 +247,7 @@
51
247
  transition: all 0.1s ease-out;
52
248
  }
53
249
  .eds-choice-chip__input {
54
- -moz-appearance: none;
55
- appearance: none;
250
+ appearance: none;
56
251
  height: 0;
57
252
  position: absolute;
58
253
  width: 0;
@@ -114,8 +309,7 @@
114
309
  opacity: 1;
115
310
  border-color: var(--components-chip-contrast-border-disabled);
116
311
  color: var(--components-chip-contrast-text-disabled);
117
- }
118
- /* DO NOT CHANGE!*/
312
+ }/* DO NOT CHANGE!*/
119
313
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
120
314
  /* DO NOT CHANGE!*/
121
315
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -320,34 +514,26 @@
320
514
  }
321
515
  .eds-action-chip:focus-visible {
322
516
  outline: 2px solid #181c56;
323
- outline-color: #181c56;
324
517
  outline-color: var(--basecolors-stroke-focus-standard);
325
518
  outline-offset: 0.125rem;
326
519
  }
327
520
  .eds-contrast .eds-action-chip:focus-visible {
328
- outline-color: #aeb7e2;
329
521
  outline-color: var(--basecolors-stroke-focus-contrast);
330
522
  }
331
523
  .eds-action-chip:hover {
332
- border-color: rgba(84, 86, 140, 0.4);
333
524
  border-color: var(--components-chip-standard-border);
334
- background-color: #d9ddf2;
335
525
  background-color: var(--components-chip-standard-hover);
336
526
  }
337
527
  .eds-contrast .eds-action-chip:hover {
338
528
  border-color: transparent;
339
- background-color: #626493;
340
529
  background-color: var(--components-chip-contrast-hover);
341
530
  }
342
531
  .eds-action-chip:active {
343
- background-color: #aeb7e2;
344
532
  background-color: var(--components-chip-standard-active);
345
533
  border-color: transparent;
346
534
  }
347
535
  .eds-contrast .eds-action-chip:active {
348
- background-color: #8794d4;
349
536
  background-color: var(--components-chip-contrast-active);
350
- color: #181c56;
351
537
  color: var(--components-chip-contrast-text-selected);
352
538
  }
353
539
  .eds-action-chip--disabled {
@@ -356,24 +542,19 @@
356
542
  }
357
543
  .eds-action-chip--disabled__wrapper {
358
544
  cursor: not-allowed;
359
- width: -moz-fit-content;
360
545
  width: fit-content;
361
546
  }
362
547
  .eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
363
548
  background-color: var(--colors-brand-white);
364
- }
365
- /* DO NOT CHANGE!*/
549
+ }/* DO NOT CHANGE!*/
366
550
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
367
551
  .eds-tag-chip {
368
552
  cursor: default;
369
- padding-right: 0.25rem;
370
- width: -moz-fit-content;
553
+ padding-right: 0.125rem;
371
554
  width: fit-content;
372
555
  }
373
556
  .eds-tag-chip__close-button {
374
- -webkit-appearance: none;
375
- -moz-appearance: none;
376
- appearance: none;
557
+ appearance: none;
377
558
  background: none;
378
559
  border: none;
379
560
  border-radius: 50%;
@@ -412,12 +593,10 @@
412
593
  .eds-contrast .eds-tag-chip__close-button:active {
413
594
  background-color: var(--components-chip-contrast-active);
414
595
  color: var(--components-chip-contrast-text-selected);
415
- }
416
- /* DO NOT CHANGE!*/
596
+ }/* DO NOT CHANGE!*/
417
597
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
418
598
  .eds-filter-chip {
419
599
  cursor: pointer;
420
- width: -moz-fit-content;
421
600
  width: fit-content;
422
601
  display: flex;
423
602
  }
@@ -431,7 +610,6 @@
431
610
  background-color: var(--components-chip-standard-active);
432
611
  color: var(--components-chip-standard-text-selected);
433
612
  border-color: transparent;
434
- gap: 0.25rem;
435
613
  }
436
614
  .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip {
437
615
  background-color: var(--components-chip-contrast-active);
@@ -450,6 +628,7 @@
450
628
  }
451
629
  .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon {
452
630
  display: inline-flex;
631
+ margin-right: 0.25rem;
453
632
  }
454
633
  .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon .eds-filter-chip-icon__path {
455
634
  stroke: var(--components-chip-contrast-icon-selected);
@@ -506,208 +685,10 @@
506
685
  100% {
507
686
  stroke-dashoffset: 0;
508
687
  }
509
- }
510
- /* DO NOT CHANGE!*/
511
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
512
- /* DO NOT CHANGE!*/
513
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
514
- /* DO NOT CHANGE!*/
515
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
516
- [data-color-mode=light],
517
- :root {
518
- --components-chip-contrast-active: #8794d4;
519
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
520
- --components-chip-contrast-border-disabled: #949699;
521
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
522
- --components-chip-contrast-hover: #626493;
523
- --components-chip-contrast-icon-disabled: #b6b8ba;
524
- --components-chip-contrast-icon-selected: #181c56;
525
- --components-chip-contrast-icon-unselected: #ffffff;
526
- --components-chip-contrast-text-disabled: #b6b8ba;
527
- --components-chip-contrast-text-selected: #181c56;
528
- --components-chip-contrast-text-unselected: #ffffff;
529
- --components-chip-standard-active: #aeb7e2;
530
- --components-chip-standard-border: rgba(84, 86, 140, 0.4);
531
- --components-chip-standard-border-disabled: #949699;
532
- --components-chip-standard-default: rgba(255, 255, 255, 0);
533
- --components-chip-standard-hover: #d9ddf2;
534
- --components-chip-standard-icon-disabled: #6e6f73;
535
- --components-chip-standard-icon-selected: #181c56;
536
- --components-chip-standard-icon-unselected: #181c56;
537
- --components-chip-standard-text-disabled: #6e6f73;
538
- --components-chip-standard-text-selected: #181c56;
539
- --components-chip-standard-text-unselected: #181c56;
540
- }
541
-
542
- [data-color-mode=dark] {
543
- --components-chip-contrast-active: #8794d4;
544
- --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
545
- --components-chip-contrast-border-disabled: #949699;
546
- --components-chip-contrast-default: rgba(255, 255, 255, 0);
547
- --components-chip-contrast-hover: #626493;
548
- --components-chip-contrast-icon-disabled: #b6b8ba;
549
- --components-chip-contrast-icon-selected: #08091c;
550
- --components-chip-contrast-icon-unselected: #e5e5e9;
551
- --components-chip-contrast-text-disabled: #b6b8ba;
552
- --components-chip-contrast-text-selected: #08091c;
553
- --components-chip-contrast-text-unselected: #e5e5e9;
554
- --components-chip-standard-active: #8794d4;
555
- --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
556
- --components-chip-standard-border-disabled: #949699;
557
- --components-chip-standard-default: rgba(255, 255, 255, 0);
558
- --components-chip-standard-hover: #626493;
559
- --components-chip-standard-icon-disabled: #b6b8ba;
560
- --components-chip-standard-icon-selected: #08091c;
561
- --components-chip-standard-icon-unselected: #e5e5e9;
562
- --components-chip-standard-text-disabled: #b6b8ba;
563
- --components-chip-standard-text-selected: #08091c;
564
- --components-chip-standard-text-unselected: #e5e5e9;
565
- }
566
-
567
- /* DO NOT CHANGE!*/
568
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
569
- /* DO NOT CHANGE!*/
570
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
571
- [data-color-mode=light],
572
- :root {
573
- --basecolors-frame-contrast: #181c56;
574
- --basecolors-frame-contrastalt: #393d79;
575
- --basecolors-frame-contrastalt-2: #292b6a;
576
- --basecolors-frame-default: #ffffff;
577
- --basecolors-frame-elevated: #ffffff;
578
- --basecolors-frame-elevatedalt: #f6f6f9;
579
- --basecolors-frame-subdued: #d9dae8;
580
- --basecolors-frame-tint: #f6f6f9;
581
- --basecolors-shape-accent: #181c56;
582
- --basecolors-shape-bicycle-contrast: #00db9b;
583
- --basecolors-shape-bicycle-default: #388f76;
584
- --basecolors-shape-bus-contrast: #ff6392;
585
- --basecolors-shape-bus-default: #c5044e;
586
- --basecolors-shape-cableway-contrast: #b482fb;
587
- --basecolors-shape-cableway-default: #78469a;
588
- --basecolors-shape-disabled: #6e6f73;
589
- --basecolors-shape-disabledalt: #b6b8ba;
590
- --basecolors-shape-ferry-contrast: #6fdfff;
591
- --basecolors-shape-ferry-default: #0c6693;
592
- --basecolors-shape-funicular-contrast: #b482fb;
593
- --basecolors-shape-funicular-default: #78469a;
594
- --basecolors-shape-helicopter-contrast: #fbafea;
595
- --basecolors-shape-helicopter-default: #800664;
596
- --basecolors-shape-highlight: #ff5959;
597
- --basecolors-shape-light: #ffffff;
598
- --basecolors-shape-mask: #ffffff;
599
- --basecolors-shape-maskalt: #ffffff;
600
- --basecolors-shape-metro-contrast: #f08901;
601
- --basecolors-shape-metro-default: #bf5826;
602
- --basecolors-shape-mobility-contrast: #00db9b;
603
- --basecolors-shape-mobility-default: #388f76;
604
- --basecolors-shape-plane-contrast: #fbafea;
605
- --basecolors-shape-plane-default: #800664;
606
- --basecolors-shape-subdued: #626493;
607
- --basecolors-shape-subduedalt: #d9dae8;
608
- --basecolors-shape-taxi-contrast: #ffe082;
609
- --basecolors-shape-taxi-default: #3d3e40;
610
- --basecolors-shape-train-contrast: #42a5f5;
611
- --basecolors-shape-train-default: #00367f;
612
- --basecolors-shape-tram-contrast: #b482fb;
613
- --basecolors-shape-tram-default: #78469a;
614
- --basecolors-shape-walk-contrast: #8284ab;
615
- --basecolors-shape-walk-default: #8d8e9c;
616
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
617
- --basecolors-shape-airportlinkbus-default: #800664;
618
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
619
- --basecolors-shape-airportlinkrail-default: #800664;
620
- --basecolors-stroke-contrast: #aeb7e2;
621
- --basecolors-stroke-default: #181c56;
622
- --basecolors-stroke-disabled: #949699;
623
- --basecolors-stroke-focus-contrast: #aeb7e2;
624
- --basecolors-stroke-focus-standard: #181c56;
625
- --basecolors-stroke-highlight: #ff5959;
626
- --basecolors-stroke-light: #ffffff;
627
- --basecolors-stroke-subdued: #8284ab;
628
- --basecolors-stroke-subduedalt: #e3e6e8;
629
- --basecolors-text-accent: #181c56;
630
- --basecolors-text-disabled: #6e6f73;
631
- --basecolors-text-disabledalt: #b6b8ba;
632
- --basecolors-text-highlight: #ff5959;
633
- --basecolors-text-light: #ffffff;
634
- --basecolors-text-subdued: #626493;
635
- --basecolors-text-subduedalt: #d9dae8;
636
- }
637
-
638
- [data-color-mode=dark] {
639
- --basecolors-frame-contrast: #212233;
640
- --basecolors-frame-contrastalt: #141527;
641
- --basecolors-frame-contrastalt-2: #08091c;
642
- --basecolors-frame-default: #08091c;
643
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
644
- --basecolors-frame-elevatedalt: #464755;
645
- --basecolors-frame-subdued: #2d2e3e;
646
- --basecolors-frame-tint: #141527;
647
- --basecolors-shape-accent: #e5e5e9;
648
- --basecolors-shape-bicycle-contrast: #4db295;
649
- --basecolors-shape-bicycle-default: #4db295;
650
- --basecolors-shape-bus-contrast: #ef7398;
651
- --basecolors-shape-bus-default: #ef7398;
652
- --basecolors-shape-cableway-contrast: #b898e5;
653
- --basecolors-shape-cableway-default: #b898e5;
654
- --basecolors-shape-disabled: #b6b8ba;
655
- --basecolors-shape-disabledalt: #b3b4bd;
656
- --basecolors-shape-ferry-contrast: #8ccfe2;
657
- --basecolors-shape-ferry-default: #8ccfe2;
658
- --basecolors-shape-funicular-contrast: #b898e5;
659
- --basecolors-shape-funicular-default: #b898e5;
660
- --basecolors-shape-helicopter-contrast: #f2b8e5;
661
- --basecolors-shape-helicopter-default: #f2b8e5;
662
- --basecolors-shape-highlight: #ff9494;
663
- --basecolors-shape-light: #e5e5e9;
664
- --basecolors-shape-mask: #2d2e3e;
665
- --basecolors-shape-maskalt: #393a49;
666
- --basecolors-shape-metro-contrast: #dd973c;
667
- --basecolors-shape-metro-default: #dd973c;
668
- --basecolors-shape-mobility-contrast: #4db295;
669
- --basecolors-shape-mobility-default: #4db295;
670
- --basecolors-shape-plane-contrast: #f2b8e5;
671
- --basecolors-shape-plane-default: #f2b8e5;
672
- --basecolors-shape-subdued: #b3b4bd;
673
- --basecolors-shape-subduedalt: #b3b4bd;
674
- --basecolors-shape-taxi-contrast: #ffe082;
675
- --basecolors-shape-taxi-default: #ffe082;
676
- --basecolors-shape-train-contrast: #60a2d7;
677
- --basecolors-shape-train-default: #60a2d7;
678
- --basecolors-shape-tram-contrast: #b898e5;
679
- --basecolors-shape-tram-default: #b898e5;
680
- --basecolors-shape-walk-contrast: #8d8e9c;
681
- --basecolors-shape-walk-default: #8d8e9c;
682
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
683
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
684
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
685
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
686
- --basecolors-stroke-contrast: #aeb7e2;
687
- --basecolors-stroke-default: #b3b4bd;
688
- --basecolors-stroke-disabled: #e3e6e8;
689
- --basecolors-stroke-focus-contrast: #aeb7e2;
690
- --basecolors-stroke-focus-standard: #aeb7e2;
691
- --basecolors-stroke-highlight: #ff9494;
692
- --basecolors-stroke-light: #b3b4bd;
693
- --basecolors-stroke-subdued: #81828f;
694
- --basecolors-stroke-subduedalt: #949699;
695
- --basecolors-text-accent: #e5e5e9;
696
- --basecolors-text-disabled: #b6b8ba;
697
- --basecolors-text-disabledalt: #b6b8ba;
698
- --basecolors-text-highlight: #ff9494;
699
- --basecolors-text-light: #e5e5e9;
700
- --basecolors-text-subdued: #b3b4bd;
701
- --basecolors-text-subduedalt: #b3b4bd;
702
- }
703
-
704
- :root {
705
- --eds-chip: 1;
706
- }
707
- /* DO NOT CHANGE!*/
688
+ }/* DO NOT CHANGE!*/
708
689
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
709
690
  :where(.eds-choice-chips-group) {
710
691
  display: flex;
711
692
  row-gap: 0.5rem;
712
693
  flex-wrap: wrap;
713
- }
694
+ }