@entur/chip 0.6.70 → 0.7.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 (12) hide show
  1. package/dist/ActionChip.d.ts +4 -0
  2. package/dist/ChoiceChip.d.ts +5 -1
  3. package/dist/FilterChip.d.ts +10 -2
  4. package/dist/TagChip.d.ts +4 -0
  5. package/dist/chip.cjs.development.js +21 -12
  6. package/dist/chip.cjs.development.js.map +1 -1
  7. package/dist/chip.cjs.production.min.js +1 -1
  8. package/dist/chip.cjs.production.min.js.map +1 -1
  9. package/dist/chip.esm.js +21 -12
  10. package/dist/chip.esm.js.map +1 -1
  11. package/dist/styles.css +399 -632
  12. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,36 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-chip {
4
- background: transparent;
5
- border: 0.0625rem solid var(--components-chip-standard-border);
6
- border-radius: 1rem;
7
- color: var(--components-chip-standard-text-unselected);
8
- font-family: inherit;
9
- font-size: 0.875rem;
10
- height: 2rem;
11
- min-width: 3rem;
12
- padding: 0 0.75rem;
13
- transition: background 0.1s ease-out, border 0.1s ease-out;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- }
18
- .eds-chip svg {
19
- font-size: 0.875rem;
20
- }
21
- .eds-contrast .eds-chip {
22
- background-color: transparent;
23
- color: var(--components-chip-contrast-text-unselected);
24
- border-color: var(--components-chip-contrast-border);
25
- }
26
- .eds-chip--leading-icon .eds-icon:first-of-type {
27
- margin-right: 0.5rem;
28
- }
29
- .eds-chip--trailing-icon .eds-icon:last-of-type {
30
- margin-left: 0.5rem;
31
- }
32
- /* DO NOT CHANGE!*/
33
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
34
3
  .eds-choice-chip {
35
4
  cursor: pointer;
36
5
  display: inline-block;
@@ -78,10 +47,12 @@
78
47
  .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip {
79
48
  border-color: var(--components-chip-standard-border);
80
49
  background-color: var(--components-chip-standard-hover);
50
+ color: var(--components-chip-standard-text-unselected);
81
51
  }
82
52
  .eds-contrast .eds-choice-chip__input:not(:disabled):hover ~ .eds-chip {
83
53
  border-color: transparent;
84
54
  background-color: var(--components-chip-contrast-hover);
55
+ color: var(--components-chip-contrast-text-unselected);
85
56
  }
86
57
  .eds-choice-chip__input:not(:disabled):active ~ .eds-chip {
87
58
  background-color: var(--components-chip-standard-active);
@@ -101,326 +72,241 @@
101
72
  border-color: var(--components-chip-contrast-border-disabled);
102
73
  color: var(--components-chip-contrast-text-disabled);
103
74
  }
104
- @import "~@entur/tokens/dist/primitive.css";
105
- @import "~@entur/tokens/dist/semantic.css";
75
+ /* DO NOT CHANGE!*/
76
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
77
+ .eds-chip {
78
+ background: transparent;
79
+ border: 0.0625rem solid var(--components-chip-standard-border);
80
+ border-radius: 1rem;
81
+ color: var(--components-chip-standard-text-unselected);
82
+ font-family: inherit;
83
+ transition: background 0.1s ease-out, border 0.1s ease-out;
84
+ display: flex;
85
+ justify-content: center;
86
+ align-items: center;
87
+ }
88
+ .eds-chip svg {
89
+ font-size: 0.875rem;
90
+ }
91
+ .eds-contrast .eds-chip {
92
+ background-color: transparent;
93
+ color: var(--components-chip-contrast-text-unselected);
94
+ border-color: var(--components-chip-contrast-border);
95
+ }
96
+ .eds-chip--leading-icon .eds-icon:first-of-type {
97
+ margin-right: 0.5rem;
98
+ }
99
+ .eds-chip--trailing-icon .eds-icon:last-of-type {
100
+ margin-left: 0.5rem;
101
+ }
102
+ .eds-chip--size-small {
103
+ height: 1.5rem;
104
+ min-width: 2.5rem;
105
+ padding: 0 0.5rem;
106
+ font-size: 0.75rem;
107
+ }
108
+ .eds-chip--size-small .eds-tag-chip__close-button svg {
109
+ width: 1rem;
110
+ height: 1rem;
111
+ }
112
+ .eds-chip--size-medium {
113
+ height: 2rem;
114
+ min-width: 3rem;
115
+ padding: 0 0.75rem;
116
+ font-size: 0.875rem;
117
+ }
118
+ /* DO NOT CHANGE!*/
119
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
106
120
  /* DO NOT CHANGE!*/
107
121
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
108
122
  /* DO NOT CHANGE!*/
109
123
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
110
- :root {
111
- --fill-background-contrast-dark: var(--ebony-90);
112
- --fill-background-contrast-light: var(--lavender-90);
113
- --fill-background-contrast-lightalt: var(--blue-90);
114
- --fill-background-contrast-lightalt-2: var(--blue-100);
115
- --fill-background-overlay-solid: var(--ebony-80);
116
- --fill-background-overlay-solidalt: var(--ebony-75);
117
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
118
- --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
119
- --fill-background-standard-colorless: var(--white-alpha-0);
120
- --fill-background-standard-dark: var(--ebony-100);
121
- --fill-background-standard-light: var(--white-alpha-100);
122
- --fill-background-subdued-dark: var(--ebony-85);
123
- --fill-background-subdued-light: var(--blue-30);
124
- --fill-background-tint-dark: var(--ebony-95);
125
- --fill-background-tint-light: var(--blue-10);
126
- --fill-background-tint-neutral: var(--grey-10);
127
- --fill-background-tint-transparent: var(--transparent-blue-alpha10);
128
- --fill-boolean-false-contrast: var(--blue-50);
129
- --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
130
- --fill-boolean-false-light: var(--grey-60);
131
- --fill-boolean-true-contrast: var(--mint-40);
132
- --fill-boolean-true-dark: var(--mint-40);
133
- --fill-boolean-true-light: var(--mint-60);
134
- --fill-disabled-light: var(--grey-40);
135
- --fill-disabled-transparent: var(--transparent-neutral-alpha15);
136
- --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
137
- --fill-information-contrast: var(--sky-30);
138
- --fill-information-deep: var(--sky-50);
139
- --fill-information-muted: var(--sky-10);
140
- --fill-information-tint: var(--sky-20);
141
- --fill-negative-contrast: var(--coral-40);
142
- --fill-negative-dark: var(--coral-90);
143
- --fill-negative-deep: var(--coral-60);
144
- --fill-negative-muted: var(--coral-20);
145
- --fill-negative-tint: var(--coral-30);
146
- --fill-negative-transparent: var(--transparent-coral-alpha20);
147
- --fill-primary-active-contrast: var(--lavender-50);
148
- --fill-primary-active-light: var(--lavender-100);
149
- --fill-primary-default-contrast: var(--lavender-40);
150
- --fill-primary-default-light: var(--lavender-90);
151
- --fill-primary-hover-contrast: var(--lavender-30);
152
- --fill-primary-hover-light: var(--blue-90);
153
- --fill-secondary-active-contrast: var(--lavender-50);
154
- --fill-secondary-active-light: var(--lavender-40);
155
- --fill-secondary-default-colorless: var(--white-alpha-0);
156
- --fill-secondary-hover-contrast: var(--blue-70);
157
- --fill-secondary-hover-light: var(--lavender-20);
158
- --fill-selected-default-contrast: var(--blue-90);
159
- --fill-selected-default-dark: var(--ebony-10);
160
- --fill-selected-default-darkalt: var(--ebony-50);
161
- --fill-selected-default-light: var(--blue-10);
162
- --fill-selected-default-neutral: var(--grey-30);
163
- --fill-selected-hover-contrast: var(--blue-80);
164
- --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
165
- --fill-selected-hover-light: var(--blue-20);
166
- --fill-selected-hover-neutral: var(--grey-20);
167
- --fill-success-contrast: var(--mint-40);
168
- --fill-success-deep: var(--mint-60);
169
- --fill-success-muted: var(--mint-20);
170
- --fill-success-subdued: var(--mint-50);
171
- --fill-success-tint: var(--mint-30);
172
- --fill-warning-contrast: var(--canary-40);
173
- --fill-warning-deep: var(--canary-60);
174
- --fill-warning-muted: var(--canary-20);
175
- --fill-warning-tint: var(--canary-30);
176
- --shape-accent: var(--lavender-90);
177
- --shape-contrast: var(--lavender-40);
178
- --shape-dark: var(--ebony-100);
179
- --shape-darkalt: var(--ebony-30);
180
- --shape-disabled: var(--grey-80);
181
- --shape-highlight: var(--coral-40);
182
- --shape-highlightalt: var(--coral-30);
183
- --shape-inactive: var(--blue-40);
184
- --shape-information: var(--sky-50);
185
- --shape-informationalt: var(--sky-30);
186
- --shape-light: var(--white-alpha-100);
187
- --shape-lightalt: var(--ebony-10);
188
- --shape-negative: var(--coral-60);
189
- --shape-negativealt: var(--coral-30);
190
- --shape-neutral: var(--grey-70);
191
- --shape-neutralalt: var(--grey-50);
192
- --shape-neutralalt2: var(--grey-60);
193
- --shape-subdued: var(--blue-70);
194
- --shape-subduedalt: var(--blue-30);
195
- --shape-success: var(--mint-60);
196
- --shape-successalt: var(--mint-40);
197
- --shape-warning: var(--canary-60);
198
- --shape-warningalt: var(--canary-40);
199
- --stroke-accent: var(--lavender-90);
200
- --stroke-colorless: var(--white-alpha-0);
201
- --stroke-contrast: var(--lavender-40);
202
- --stroke-contrastalt: var(--blue-80);
203
- --stroke-dark: var(--ebony-30);
204
- --stroke-darkalt: var(--ebony-50);
205
- --stroke-darkalt-2: var(--ebony-100);
206
- --stroke-highlight: var(--coral-40);
207
- --stroke-highlightalt: var(--coral-30);
208
- --stroke-information: var(--sky-50);
209
- --stroke-light: var(--white-alpha-100);
210
- --stroke-lightalt: var(--ebony-10);
211
- --stroke-negative: var(--coral-60);
212
- --stroke-negativealt: var(--coral-30);
213
- --stroke-neutral: var(--grey-30);
214
- --stroke-neutralalt: var(--grey-60);
215
- --stroke-subdued: var(--blue-60);
216
- --stroke-success: var(--mint-60);
217
- --stroke-successalt: var(--mint-40);
218
- --stroke-transparent: var(--transparent-blue-alpha40);
219
- --stroke-transparentalt: var(--transparent-lavender-alpha70);
220
- --stroke-warning: var(--canary-70);
221
- --text-accent: var(--lavender-90);
222
- --text-dark: var(--ebony-100);
223
- --text-darkalt: var(--ebony-30);
224
- --text-disabled: var(--grey-80);
225
- --text-highlight: var(--lavender-40);
226
- --text-highlightalt: var(--peach-40);
227
- --text-light: var(--white-alpha-100);
228
- --text-lightalt: var(--ebony-10);
229
- --text-negative: var(--coral-60);
230
- --text-negativealt: var(--coral-30);
231
- --text-neutral: var(--grey-70);
232
- --text-neutralalt: var(--grey-50);
233
- --text-neutralalt2: var(--grey-60);
234
- --text-subdued: var(--blue-70);
235
- --text-subduedalt: var(--blue-30);
236
- --text-success: var(--mint-60);
237
- --text-successalt: var(--mint-40);
238
- }
239
-
240
124
  /* DO NOT CHANGE!*/
241
125
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
242
126
  [data-color-mode=light],
243
127
  :root {
244
- --components-chip-contrast-active: var(--fill-secondary-active-contrast);
245
- --components-chip-contrast-border: var(--stroke-transparentalt);
246
- --components-chip-contrast-border-disabled: var(--stroke-neutralalt);
247
- --components-chip-contrast-default: var(--fill-background-standard-colorless);
248
- --components-chip-contrast-hover: var(--fill-secondary-hover-contrast);
249
- --components-chip-contrast-icon-disabled: var(--shape-neutralalt);
250
- --components-chip-contrast-icon-selected: var(--shape-accent);
251
- --components-chip-contrast-icon-unselected: var(--shape-light);
252
- --components-chip-contrast-text-disabled: var(--text-neutralalt);
253
- --components-chip-contrast-text-selected: var(--text-accent);
254
- --components-chip-contrast-text-unselected: var(--text-light);
255
- --components-chip-standard-active: var(--fill-secondary-active-light);
256
- --components-chip-standard-border: var(--stroke-transparent);
257
- --components-chip-standard-border-disabled: var(--stroke-neutralalt);
258
- --components-chip-standard-default: var(--fill-background-standard-colorless);
259
- --components-chip-standard-hover: var(--fill-secondary-hover-light);
260
- --components-chip-standard-icon-disabled: var(--shape-neutral);
261
- --components-chip-standard-icon-selected: var(--shape-accent);
262
- --components-chip-standard-icon-unselected: var(--shape-accent);
263
- --components-chip-standard-text-disabled: var(--text-neutral);
264
- --components-chip-standard-text-selected: var(--text-accent);
265
- --components-chip-standard-text-unselected: var(--text-accent);
128
+ --components-chip-contrast-active: #8794d4;
129
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
130
+ --components-chip-contrast-border-disabled: #949699;
131
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
132
+ --components-chip-contrast-hover: #626493;
133
+ --components-chip-contrast-icon-disabled: #b6b8ba;
134
+ --components-chip-contrast-icon-selected: #181c56;
135
+ --components-chip-contrast-icon-unselected: #ffffff;
136
+ --components-chip-contrast-text-disabled: #b6b8ba;
137
+ --components-chip-contrast-text-selected: #181c56;
138
+ --components-chip-contrast-text-unselected: #ffffff;
139
+ --components-chip-standard-active: #aeb7e2;
140
+ --components-chip-standard-border: rgba(84, 86, 140, 0.4);
141
+ --components-chip-standard-border-disabled: #949699;
142
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
143
+ --components-chip-standard-hover: #d9ddf2;
144
+ --components-chip-standard-icon-disabled: #6e6f73;
145
+ --components-chip-standard-icon-selected: #181c56;
146
+ --components-chip-standard-icon-unselected: #181c56;
147
+ --components-chip-standard-text-disabled: #6e6f73;
148
+ --components-chip-standard-text-selected: #181c56;
149
+ --components-chip-standard-text-unselected: #181c56;
266
150
  }
267
151
 
268
152
  [data-color-mode=dark] {
269
- --components-chip-contrast-active: var(--fill-secondary-active-contrast);
270
- --components-chip-contrast-border: var(--stroke-transparentalt);
271
- --components-chip-contrast-border-disabled: var(--stroke-neutralalt);
272
- --components-chip-contrast-default: var(--fill-background-standard-colorless);
273
- --components-chip-contrast-hover: var(--fill-secondary-hover-contrast);
274
- --components-chip-contrast-icon-disabled: var(--shape-neutralalt);
275
- --components-chip-contrast-icon-selected: var(--shape-dark);
276
- --components-chip-contrast-icon-unselected: var(--shape-lightalt);
277
- --components-chip-contrast-text-disabled: var(--text-neutralalt);
278
- --components-chip-contrast-text-selected: var(--text-dark);
279
- --components-chip-contrast-text-unselected: var(--text-lightalt);
280
- --components-chip-standard-active: var(--fill-secondary-active-contrast);
281
- --components-chip-standard-border: var(--stroke-transparentalt);
282
- --components-chip-standard-border-disabled: var(--stroke-neutralalt);
283
- --components-chip-standard-default: var(--fill-background-standard-colorless);
284
- --components-chip-standard-hover: var(--fill-secondary-hover-contrast);
285
- --components-chip-standard-icon-disabled: var(--shape-neutralalt);
286
- --components-chip-standard-icon-selected: var(--shape-dark);
287
- --components-chip-standard-icon-unselected: var(--shape-lightalt);
288
- --components-chip-standard-text-disabled: var(--text-neutralalt);
289
- --components-chip-standard-text-selected: var(--text-dark);
290
- --components-chip-standard-text-unselected: var(--text-lightalt);
153
+ --components-chip-contrast-active: #8794d4;
154
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
155
+ --components-chip-contrast-border-disabled: #949699;
156
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
157
+ --components-chip-contrast-hover: #626493;
158
+ --components-chip-contrast-icon-disabled: #b6b8ba;
159
+ --components-chip-contrast-icon-selected: #08091c;
160
+ --components-chip-contrast-icon-unselected: #e5e5e9;
161
+ --components-chip-contrast-text-disabled: #b6b8ba;
162
+ --components-chip-contrast-text-selected: #08091c;
163
+ --components-chip-contrast-text-unselected: #e5e5e9;
164
+ --components-chip-standard-active: #8794d4;
165
+ --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
166
+ --components-chip-standard-border-disabled: #949699;
167
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
168
+ --components-chip-standard-hover: #626493;
169
+ --components-chip-standard-icon-disabled: #b6b8ba;
170
+ --components-chip-standard-icon-selected: #08091c;
171
+ --components-chip-standard-icon-unselected: #e5e5e9;
172
+ --components-chip-standard-text-disabled: #b6b8ba;
173
+ --components-chip-standard-text-selected: #08091c;
174
+ --components-chip-standard-text-unselected: #e5e5e9;
291
175
  }
292
176
 
177
+ /* DO NOT CHANGE!*/
178
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
293
179
  /* DO NOT CHANGE!*/
294
180
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
295
181
  [data-color-mode=light],
296
182
  :root {
297
- --basecolors-frame-contrast: var(--fill-background-contrast-light);
298
- --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
299
- --basecolors-frame-default: var(--fill-background-standard-light);
300
- --basecolors-frame-elevated: var(--fill-background-standard-light);
301
- --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
302
- --basecolors-frame-subdued: var(--fill-background-subdued-light);
303
- --basecolors-frame-tint: var(--fill-background-tint-light);
304
- --basecolors-shape-accent: var(--shape-accent);
305
- --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
306
- --basecolors-shape-bicycle-default: var(--standard-bicycle);
307
- --basecolors-shape-bus-contrast: var(--contrast-bus);
308
- --basecolors-shape-bus-default: var(--standard-bus);
309
- --basecolors-shape-cableway-contrast: var(--contrast-cableway);
310
- --basecolors-shape-cableway-default: var(--standard-cableway);
311
- --basecolors-shape-disabled: var(--shape-neutral);
312
- --basecolors-shape-disabledalt: var(--shape-neutralalt);
313
- --basecolors-shape-ferry-contrast: var(--contrast-ferry);
314
- --basecolors-shape-ferry-default: var(--standard-ferry);
315
- --basecolors-shape-funicular-contrast: var(--contrast-funicular);
316
- --basecolors-shape-funicular-default: var(--standard-funicular);
317
- --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
318
- --basecolors-shape-helicopter-default: var(--standard-helicopter);
319
- --basecolors-shape-highlight: var(--stroke-highlight);
320
- --basecolors-shape-light: var(--shape-light);
321
- --basecolors-shape-mask: var(--shape-light);
322
- --basecolors-shape-maskalt: var(--shape-light);
323
- --basecolors-shape-metro-contrast: var(--contrast-metro);
324
- --basecolors-shape-metro-default: var(--standard-metro);
325
- --basecolors-shape-mobility-contrast: var(--contrast-mobility);
326
- --basecolors-shape-mobility-default: var(--standard-mobility);
327
- --basecolors-shape-plane-contrast: var(--contrast-plane);
328
- --basecolors-shape-plane-default: var(--standard-plane);
329
- --basecolors-shape-subdued: var(--shape-subdued);
330
- --basecolors-shape-subduedalt: var(--shape-subduedalt);
331
- --basecolors-shape-taxi-contrast: var(--contrast-taxi);
332
- --basecolors-shape-taxi-default: var(--standard-taxi);
333
- --basecolors-shape-train-contrast: var(--contrast-train);
334
- --basecolors-shape-train-default: var(--standard-train);
335
- --basecolors-shape-tram-contrast: var(--contrast-tram);
336
- --basecolors-shape-tram-default: var(--standard-tram);
337
- --basecolors-shape-walk-contrast: var(--contrast-walk);
338
- --basecolors-shape-walk-default: var(--standard-walk);
339
- --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
340
- --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
341
- --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
342
- --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
343
- --basecolors-stroke-contrast: var(--stroke-contrast);
344
- --basecolors-stroke-default: var(--stroke-accent);
345
- --basecolors-stroke-disabled: var(--stroke-neutralalt);
346
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
347
- --basecolors-stroke-focus-standard: var(--stroke-accent);
348
- --basecolors-stroke-highlight: var(--stroke-highlight);
349
- --basecolors-stroke-light: var(--stroke-light);
350
- --basecolors-stroke-subdued: var(--stroke-subdued);
351
- --basecolors-stroke-subduedalt: var(--stroke-neutral);
352
- --basecolors-text-accent: var(--text-accent);
353
- --basecolors-text-disabled: var(--text-neutral);
354
- --basecolors-text-disabledalt: var(--text-neutralalt);
355
- --basecolors-text-highlight: var(--stroke-highlight);
356
- --basecolors-text-light: var(--text-light);
357
- --basecolors-text-subdued: var(--text-subdued);
358
- --basecolors-text-subduedalt: var(--text-subduedalt);
183
+ --basecolors-frame-contrast: #181c56;
184
+ --basecolors-frame-contrastalt: #393d79;
185
+ --basecolors-frame-default: #ffffff;
186
+ --basecolors-frame-elevated: #ffffff;
187
+ --basecolors-frame-elevatedalt: #f6f6f9;
188
+ --basecolors-frame-subdued: #d9dae8;
189
+ --basecolors-frame-tint: #f6f6f9;
190
+ --basecolors-shape-accent: #181c56;
191
+ --basecolors-shape-bicycle-contrast: #00db9b;
192
+ --basecolors-shape-bicycle-default: #388f76;
193
+ --basecolors-shape-bus-contrast: #ff6392;
194
+ --basecolors-shape-bus-default: #c5044e;
195
+ --basecolors-shape-cableway-contrast: #b482fb;
196
+ --basecolors-shape-cableway-default: #78469a;
197
+ --basecolors-shape-disabled: #6e6f73;
198
+ --basecolors-shape-disabledalt: #b6b8ba;
199
+ --basecolors-shape-ferry-contrast: #6fdfff;
200
+ --basecolors-shape-ferry-default: #0c6693;
201
+ --basecolors-shape-funicular-contrast: #b482fb;
202
+ --basecolors-shape-funicular-default: #78469a;
203
+ --basecolors-shape-helicopter-contrast: #fbafea;
204
+ --basecolors-shape-helicopter-default: #800664;
205
+ --basecolors-shape-highlight: #ff5959;
206
+ --basecolors-shape-light: #ffffff;
207
+ --basecolors-shape-mask: #ffffff;
208
+ --basecolors-shape-maskalt: #ffffff;
209
+ --basecolors-shape-metro-contrast: #f08901;
210
+ --basecolors-shape-metro-default: #bf5826;
211
+ --basecolors-shape-mobility-contrast: #00db9b;
212
+ --basecolors-shape-mobility-default: #388f76;
213
+ --basecolors-shape-plane-contrast: #fbafea;
214
+ --basecolors-shape-plane-default: #800664;
215
+ --basecolors-shape-subdued: #626493;
216
+ --basecolors-shape-subduedalt: #d9dae8;
217
+ --basecolors-shape-taxi-contrast: #ffe082;
218
+ --basecolors-shape-taxi-default: #3d3e40;
219
+ --basecolors-shape-train-contrast: #42a5f5;
220
+ --basecolors-shape-train-default: #00367f;
221
+ --basecolors-shape-tram-contrast: #b482fb;
222
+ --basecolors-shape-tram-default: #78469a;
223
+ --basecolors-shape-walk-contrast: #8284ab;
224
+ --basecolors-shape-walk-default: #8d8e9c;
225
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
226
+ --basecolors-shape-airportlinkbus-default: #800664;
227
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
228
+ --basecolors-shape-airportlinkrail-default: #800664;
229
+ --basecolors-stroke-contrast: #aeb7e2;
230
+ --basecolors-stroke-default: #181c56;
231
+ --basecolors-stroke-disabled: #949699;
232
+ --basecolors-stroke-focus-contrast: #aeb7e2;
233
+ --basecolors-stroke-focus-standard: #181c56;
234
+ --basecolors-stroke-highlight: #ff5959;
235
+ --basecolors-stroke-light: #ffffff;
236
+ --basecolors-stroke-subdued: #8284ab;
237
+ --basecolors-stroke-subduedalt: #e3e6e8;
238
+ --basecolors-text-accent: #181c56;
239
+ --basecolors-text-disabled: #6e6f73;
240
+ --basecolors-text-disabledalt: #b6b8ba;
241
+ --basecolors-text-highlight: #ff5959;
242
+ --basecolors-text-light: #ffffff;
243
+ --basecolors-text-subdued: #626493;
244
+ --basecolors-text-subduedalt: #d9dae8;
359
245
  }
360
246
 
361
247
  [data-color-mode=dark] {
362
- --basecolors-frame-contrast: var(--fill-background-contrast-dark);
363
- --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
364
- --basecolors-frame-default: var(--fill-background-standard-dark);
365
- --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
366
- --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
367
- --basecolors-frame-subdued: var(--fill-background-subdued-dark);
368
- --basecolors-frame-tint: var(--fill-background-tint-dark);
369
- --basecolors-shape-accent: var(--shape-lightalt);
370
- --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
371
- --basecolors-shape-bicycle-default: var(--dark-bicycle);
372
- --basecolors-shape-bus-contrast: var(--dark-bus);
373
- --basecolors-shape-bus-default: var(--dark-bus);
374
- --basecolors-shape-cableway-contrast: var(--dark-cableway);
375
- --basecolors-shape-cableway-default: var(--dark-cableway);
376
- --basecolors-shape-disabled: var(--shape-neutralalt);
377
- --basecolors-shape-disabledalt: var(--shape-darkalt);
378
- --basecolors-shape-ferry-contrast: var(--dark-ferry);
379
- --basecolors-shape-ferry-default: var(--dark-ferry);
380
- --basecolors-shape-funicular-contrast: var(--dark-funicular);
381
- --basecolors-shape-funicular-default: var(--dark-funicular);
382
- --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
383
- --basecolors-shape-helicopter-default: var(--dark-helicopter);
384
- --basecolors-shape-highlight: var(--stroke-highlightalt);
385
- --basecolors-shape-light: var(--shape-lightalt);
386
- --basecolors-shape-mask: var(--fill-background-subdued-dark);
387
- --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
388
- --basecolors-shape-metro-contrast: var(--dark-metro);
389
- --basecolors-shape-metro-default: var(--dark-metro);
390
- --basecolors-shape-mobility-contrast: var(--dark-mobility);
391
- --basecolors-shape-mobility-default: var(--dark-mobility);
392
- --basecolors-shape-plane-contrast: var(--dark-plane);
393
- --basecolors-shape-plane-default: var(--dark-plane);
394
- --basecolors-shape-subdued: var(--shape-darkalt);
395
- --basecolors-shape-subduedalt: var(--shape-darkalt);
396
- --basecolors-shape-taxi-contrast: var(--dark-taxi);
397
- --basecolors-shape-taxi-default: var(--dark-taxi);
398
- --basecolors-shape-train-contrast: var(--dark-train);
399
- --basecolors-shape-train-default: var(--dark-train);
400
- --basecolors-shape-tram-contrast: var(--dark-tram);
401
- --basecolors-shape-tram-default: var(--dark-tram);
402
- --basecolors-shape-walk-contrast: var(--dark-walk);
403
- --basecolors-shape-walk-default: var(--dark-walk);
404
- --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
405
- --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
406
- --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
407
- --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
408
- --basecolors-stroke-contrast: var(--stroke-contrast);
409
- --basecolors-stroke-default: var(--stroke-dark);
410
- --basecolors-stroke-disabled: var(--stroke-neutral);
411
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
412
- --basecolors-stroke-focus-standard: var(--stroke-contrast);
413
- --basecolors-stroke-highlight: var(--stroke-highlightalt);
414
- --basecolors-stroke-light: var(--stroke-dark);
415
- --basecolors-stroke-subdued: var(--stroke-darkalt);
416
- --basecolors-stroke-subduedalt: var(--stroke-darkalt);
417
- --basecolors-text-accent: var(--text-lightalt);
418
- --basecolors-text-disabled: var(--text-neutralalt);
419
- --basecolors-text-disabledalt: var(--text-neutralalt);
420
- --basecolors-text-highlight: var(--stroke-highlightalt);
421
- --basecolors-text-light: var(--text-lightalt);
422
- --basecolors-text-subdued: var(--text-darkalt);
423
- --basecolors-text-subduedalt: var(--text-darkalt);
248
+ --basecolors-frame-contrast: #212233;
249
+ --basecolors-frame-contrastalt: #141527;
250
+ --basecolors-frame-default: #08091c;
251
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
252
+ --basecolors-frame-elevatedalt: #464755;
253
+ --basecolors-frame-subdued: #2d2e3e;
254
+ --basecolors-frame-tint: #141527;
255
+ --basecolors-shape-accent: #e5e5e9;
256
+ --basecolors-shape-bicycle-contrast: #4db295;
257
+ --basecolors-shape-bicycle-default: #4db295;
258
+ --basecolors-shape-bus-contrast: #e87a9b;
259
+ --basecolors-shape-bus-default: #e87a9b;
260
+ --basecolors-shape-cableway-contrast: #b898e5;
261
+ --basecolors-shape-cableway-default: #b898e5;
262
+ --basecolors-shape-disabled: #b6b8ba;
263
+ --basecolors-shape-disabledalt: #b3b4bd;
264
+ --basecolors-shape-ferry-contrast: #8ccfe2;
265
+ --basecolors-shape-ferry-default: #8ccfe2;
266
+ --basecolors-shape-funicular-contrast: #b898e5;
267
+ --basecolors-shape-funicular-default: #b898e5;
268
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
269
+ --basecolors-shape-helicopter-default: #f2b8e5;
270
+ --basecolors-shape-highlight: #ff9494;
271
+ --basecolors-shape-light: #e5e5e9;
272
+ --basecolors-shape-mask: #2d2e3e;
273
+ --basecolors-shape-maskalt: #393a49;
274
+ --basecolors-shape-metro-contrast: #dd973c;
275
+ --basecolors-shape-metro-default: #dd973c;
276
+ --basecolors-shape-mobility-contrast: #4db295;
277
+ --basecolors-shape-mobility-default: #4db295;
278
+ --basecolors-shape-plane-contrast: #f2b8e5;
279
+ --basecolors-shape-plane-default: #f2b8e5;
280
+ --basecolors-shape-subdued: #b3b4bd;
281
+ --basecolors-shape-subduedalt: #b3b4bd;
282
+ --basecolors-shape-taxi-contrast: #ffe082;
283
+ --basecolors-shape-taxi-default: #ffe082;
284
+ --basecolors-shape-train-contrast: #60a2d7;
285
+ --basecolors-shape-train-default: #60a2d7;
286
+ --basecolors-shape-tram-contrast: #b898e5;
287
+ --basecolors-shape-tram-default: #b898e5;
288
+ --basecolors-shape-walk-contrast: #8d8e9c;
289
+ --basecolors-shape-walk-default: #8d8e9c;
290
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
291
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
292
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
293
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
294
+ --basecolors-stroke-contrast: #aeb7e2;
295
+ --basecolors-stroke-default: #b3b4bd;
296
+ --basecolors-stroke-disabled: #e3e6e8;
297
+ --basecolors-stroke-focus-contrast: #aeb7e2;
298
+ --basecolors-stroke-focus-standard: #aeb7e2;
299
+ --basecolors-stroke-highlight: #ff9494;
300
+ --basecolors-stroke-light: #b3b4bd;
301
+ --basecolors-stroke-subdued: #81828f;
302
+ --basecolors-stroke-subduedalt: #81828f;
303
+ --basecolors-text-accent: #e5e5e9;
304
+ --basecolors-text-disabled: #b6b8ba;
305
+ --basecolors-text-disabledalt: #b6b8ba;
306
+ --basecolors-text-highlight: #ff9494;
307
+ --basecolors-text-light: #e5e5e9;
308
+ --basecolors-text-subdued: #b3b4bd;
309
+ --basecolors-text-subduedalt: #b3b4bd;
424
310
  }
425
311
 
426
312
  :root {
@@ -533,16 +419,25 @@
533
419
  }
534
420
  .eds-filter-chip__input:checked ~ .eds-chip {
535
421
  background-color: var(--components-chip-standard-active);
536
- color: var(--components-chip-standard-text-unselected);
422
+ color: var(--components-chip-standard-text-selected);
537
423
  border-color: transparent;
538
424
  gap: 0.25rem;
539
425
  }
540
426
  .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip {
541
427
  background-color: var(--components-chip-contrast-active);
542
428
  }
429
+ .eds-filter-chip__input:checked ~ .eds-chip:hover {
430
+ color: var(--components-chip-standard-text-unselected);
431
+ }
432
+ .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path {
433
+ stroke: var(--components-chip-standard-icon-unselected);
434
+ }
543
435
  .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover {
544
436
  color: var(--components-chip-contrast-text-unselected);
545
437
  }
438
+ .eds-contrast .eds-filter-chip__input:checked ~ .eds-chip:hover .eds-filter-chip-icon .eds-filter-chip-icon__path {
439
+ stroke: var(--components-chip-contrast-icon-unselected);
440
+ }
546
441
  .eds-filter-chip__input:checked ~ .eds-chip .eds-filter-chip__icon {
547
442
  display: inline-flex;
548
443
  }
@@ -602,324 +497,196 @@
602
497
  stroke-dashoffset: 0;
603
498
  }
604
499
  }
605
- @import "~@entur/tokens/dist/primitive.css";
606
- @import "~@entur/tokens/dist/semantic.css";
607
500
  /* DO NOT CHANGE!*/
608
501
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
609
- :root {
610
- --fill-background-contrast-dark: var(--ebony-90);
611
- --fill-background-contrast-light: var(--lavender-90);
612
- --fill-background-contrast-lightalt: var(--blue-90);
613
- --fill-background-contrast-lightalt-2: var(--blue-100);
614
- --fill-background-overlay-solid: var(--ebony-80);
615
- --fill-background-overlay-solidalt: var(--ebony-75);
616
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
617
- --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
618
- --fill-background-standard-colorless: var(--white-alpha-0);
619
- --fill-background-standard-dark: var(--ebony-100);
620
- --fill-background-standard-light: var(--white-alpha-100);
621
- --fill-background-subdued-dark: var(--ebony-85);
622
- --fill-background-subdued-light: var(--blue-30);
623
- --fill-background-tint-dark: var(--ebony-95);
624
- --fill-background-tint-light: var(--blue-10);
625
- --fill-background-tint-neutral: var(--grey-10);
626
- --fill-background-tint-transparent: var(--transparent-blue-alpha10);
627
- --fill-boolean-false-contrast: var(--blue-50);
628
- --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
629
- --fill-boolean-false-light: var(--grey-60);
630
- --fill-boolean-true-contrast: var(--mint-40);
631
- --fill-boolean-true-dark: var(--mint-40);
632
- --fill-boolean-true-light: var(--mint-60);
633
- --fill-disabled-light: var(--grey-40);
634
- --fill-disabled-transparent: var(--transparent-neutral-alpha15);
635
- --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
636
- --fill-information-contrast: var(--sky-30);
637
- --fill-information-deep: var(--sky-50);
638
- --fill-information-muted: var(--sky-10);
639
- --fill-information-tint: var(--sky-20);
640
- --fill-negative-contrast: var(--coral-40);
641
- --fill-negative-dark: var(--coral-90);
642
- --fill-negative-deep: var(--coral-60);
643
- --fill-negative-muted: var(--coral-20);
644
- --fill-negative-tint: var(--coral-30);
645
- --fill-negative-transparent: var(--transparent-coral-alpha20);
646
- --fill-primary-active-contrast: var(--lavender-50);
647
- --fill-primary-active-light: var(--lavender-100);
648
- --fill-primary-default-contrast: var(--lavender-40);
649
- --fill-primary-default-light: var(--lavender-90);
650
- --fill-primary-hover-contrast: var(--lavender-30);
651
- --fill-primary-hover-light: var(--blue-90);
652
- --fill-secondary-active-contrast: var(--lavender-50);
653
- --fill-secondary-active-light: var(--lavender-40);
654
- --fill-secondary-default-colorless: var(--white-alpha-0);
655
- --fill-secondary-hover-contrast: var(--blue-70);
656
- --fill-secondary-hover-light: var(--lavender-20);
657
- --fill-selected-default-contrast: var(--blue-90);
658
- --fill-selected-default-dark: var(--ebony-10);
659
- --fill-selected-default-darkalt: var(--ebony-50);
660
- --fill-selected-default-light: var(--blue-10);
661
- --fill-selected-default-neutral: var(--grey-30);
662
- --fill-selected-hover-contrast: var(--blue-80);
663
- --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
664
- --fill-selected-hover-light: var(--blue-20);
665
- --fill-selected-hover-neutral: var(--grey-20);
666
- --fill-success-contrast: var(--mint-40);
667
- --fill-success-deep: var(--mint-60);
668
- --fill-success-muted: var(--mint-20);
669
- --fill-success-subdued: var(--mint-50);
670
- --fill-success-tint: var(--mint-30);
671
- --fill-warning-contrast: var(--canary-40);
672
- --fill-warning-deep: var(--canary-60);
673
- --fill-warning-muted: var(--canary-20);
674
- --fill-warning-tint: var(--canary-30);
675
- --shape-accent: var(--lavender-90);
676
- --shape-contrast: var(--lavender-40);
677
- --shape-dark: var(--ebony-100);
678
- --shape-darkalt: var(--ebony-30);
679
- --shape-disabled: var(--grey-80);
680
- --shape-highlight: var(--coral-40);
681
- --shape-highlightalt: var(--coral-30);
682
- --shape-inactive: var(--blue-40);
683
- --shape-information: var(--sky-50);
684
- --shape-informationalt: var(--sky-30);
685
- --shape-light: var(--white-alpha-100);
686
- --shape-lightalt: var(--ebony-10);
687
- --shape-negative: var(--coral-60);
688
- --shape-negativealt: var(--coral-30);
689
- --shape-neutral: var(--grey-70);
690
- --shape-neutralalt: var(--grey-50);
691
- --shape-neutralalt2: var(--grey-60);
692
- --shape-subdued: var(--blue-70);
693
- --shape-subduedalt: var(--blue-30);
694
- --shape-success: var(--mint-60);
695
- --shape-successalt: var(--mint-40);
696
- --shape-warning: var(--canary-60);
697
- --shape-warningalt: var(--canary-40);
698
- --stroke-accent: var(--lavender-90);
699
- --stroke-colorless: var(--white-alpha-0);
700
- --stroke-contrast: var(--lavender-40);
701
- --stroke-contrastalt: var(--blue-80);
702
- --stroke-dark: var(--ebony-30);
703
- --stroke-darkalt: var(--ebony-50);
704
- --stroke-darkalt-2: var(--ebony-100);
705
- --stroke-highlight: var(--coral-40);
706
- --stroke-highlightalt: var(--coral-30);
707
- --stroke-information: var(--sky-50);
708
- --stroke-light: var(--white-alpha-100);
709
- --stroke-lightalt: var(--ebony-10);
710
- --stroke-negative: var(--coral-60);
711
- --stroke-negativealt: var(--coral-30);
712
- --stroke-neutral: var(--grey-30);
713
- --stroke-neutralalt: var(--grey-60);
714
- --stroke-subdued: var(--blue-60);
715
- --stroke-success: var(--mint-60);
716
- --stroke-successalt: var(--mint-40);
717
- --stroke-transparent: var(--transparent-blue-alpha40);
718
- --stroke-transparentalt: var(--transparent-lavender-alpha70);
719
- --stroke-warning: var(--canary-70);
720
- --text-accent: var(--lavender-90);
721
- --text-dark: var(--ebony-100);
722
- --text-darkalt: var(--ebony-30);
723
- --text-disabled: var(--grey-80);
724
- --text-highlight: var(--lavender-40);
725
- --text-highlightalt: var(--peach-40);
726
- --text-light: var(--white-alpha-100);
727
- --text-lightalt: var(--ebony-10);
728
- --text-negative: var(--coral-60);
729
- --text-negativealt: var(--coral-30);
730
- --text-neutral: var(--grey-70);
731
- --text-neutralalt: var(--grey-50);
732
- --text-neutralalt2: var(--grey-60);
733
- --text-subdued: var(--blue-70);
734
- --text-subduedalt: var(--blue-30);
735
- --text-success: var(--mint-60);
736
- --text-successalt: var(--mint-40);
737
- }
738
-
502
+ /* DO NOT CHANGE!*/
503
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
739
504
  /* DO NOT CHANGE!*/
740
505
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
741
506
  [data-color-mode=light],
742
507
  :root {
743
- --components-chip-contrast-active: var(--fill-secondary-active-contrast);
744
- --components-chip-contrast-border: var(--stroke-transparentalt);
745
- --components-chip-contrast-border-disabled: var(--stroke-neutralalt);
746
- --components-chip-contrast-default: var(--fill-background-standard-colorless);
747
- --components-chip-contrast-hover: var(--fill-secondary-hover-contrast);
748
- --components-chip-contrast-icon-disabled: var(--shape-neutralalt);
749
- --components-chip-contrast-icon-selected: var(--shape-accent);
750
- --components-chip-contrast-icon-unselected: var(--shape-light);
751
- --components-chip-contrast-text-disabled: var(--text-neutralalt);
752
- --components-chip-contrast-text-selected: var(--text-accent);
753
- --components-chip-contrast-text-unselected: var(--text-light);
754
- --components-chip-standard-active: var(--fill-secondary-active-light);
755
- --components-chip-standard-border: var(--stroke-transparent);
756
- --components-chip-standard-border-disabled: var(--stroke-neutralalt);
757
- --components-chip-standard-default: var(--fill-background-standard-colorless);
758
- --components-chip-standard-hover: var(--fill-secondary-hover-light);
759
- --components-chip-standard-icon-disabled: var(--shape-neutral);
760
- --components-chip-standard-icon-selected: var(--shape-accent);
761
- --components-chip-standard-icon-unselected: var(--shape-accent);
762
- --components-chip-standard-text-disabled: var(--text-neutral);
763
- --components-chip-standard-text-selected: var(--text-accent);
764
- --components-chip-standard-text-unselected: var(--text-accent);
508
+ --components-chip-contrast-active: #8794d4;
509
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
510
+ --components-chip-contrast-border-disabled: #949699;
511
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
512
+ --components-chip-contrast-hover: #626493;
513
+ --components-chip-contrast-icon-disabled: #b6b8ba;
514
+ --components-chip-contrast-icon-selected: #181c56;
515
+ --components-chip-contrast-icon-unselected: #ffffff;
516
+ --components-chip-contrast-text-disabled: #b6b8ba;
517
+ --components-chip-contrast-text-selected: #181c56;
518
+ --components-chip-contrast-text-unselected: #ffffff;
519
+ --components-chip-standard-active: #aeb7e2;
520
+ --components-chip-standard-border: rgba(84, 86, 140, 0.4);
521
+ --components-chip-standard-border-disabled: #949699;
522
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
523
+ --components-chip-standard-hover: #d9ddf2;
524
+ --components-chip-standard-icon-disabled: #6e6f73;
525
+ --components-chip-standard-icon-selected: #181c56;
526
+ --components-chip-standard-icon-unselected: #181c56;
527
+ --components-chip-standard-text-disabled: #6e6f73;
528
+ --components-chip-standard-text-selected: #181c56;
529
+ --components-chip-standard-text-unselected: #181c56;
765
530
  }
766
531
 
767
532
  [data-color-mode=dark] {
768
- --components-chip-contrast-active: var(--fill-secondary-active-contrast);
769
- --components-chip-contrast-border: var(--stroke-transparentalt);
770
- --components-chip-contrast-border-disabled: var(--stroke-neutralalt);
771
- --components-chip-contrast-default: var(--fill-background-standard-colorless);
772
- --components-chip-contrast-hover: var(--fill-secondary-hover-contrast);
773
- --components-chip-contrast-icon-disabled: var(--shape-neutralalt);
774
- --components-chip-contrast-icon-selected: var(--shape-dark);
775
- --components-chip-contrast-icon-unselected: var(--shape-lightalt);
776
- --components-chip-contrast-text-disabled: var(--text-neutralalt);
777
- --components-chip-contrast-text-selected: var(--text-dark);
778
- --components-chip-contrast-text-unselected: var(--text-lightalt);
779
- --components-chip-standard-active: var(--fill-secondary-active-contrast);
780
- --components-chip-standard-border: var(--stroke-transparentalt);
781
- --components-chip-standard-border-disabled: var(--stroke-neutralalt);
782
- --components-chip-standard-default: var(--fill-background-standard-colorless);
783
- --components-chip-standard-hover: var(--fill-secondary-hover-contrast);
784
- --components-chip-standard-icon-disabled: var(--shape-neutralalt);
785
- --components-chip-standard-icon-selected: var(--shape-dark);
786
- --components-chip-standard-icon-unselected: var(--shape-lightalt);
787
- --components-chip-standard-text-disabled: var(--text-neutralalt);
788
- --components-chip-standard-text-selected: var(--text-dark);
789
- --components-chip-standard-text-unselected: var(--text-lightalt);
533
+ --components-chip-contrast-active: #8794d4;
534
+ --components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
535
+ --components-chip-contrast-border-disabled: #949699;
536
+ --components-chip-contrast-default: rgba(255, 255, 255, 0);
537
+ --components-chip-contrast-hover: #626493;
538
+ --components-chip-contrast-icon-disabled: #b6b8ba;
539
+ --components-chip-contrast-icon-selected: #08091c;
540
+ --components-chip-contrast-icon-unselected: #e5e5e9;
541
+ --components-chip-contrast-text-disabled: #b6b8ba;
542
+ --components-chip-contrast-text-selected: #08091c;
543
+ --components-chip-contrast-text-unselected: #e5e5e9;
544
+ --components-chip-standard-active: #8794d4;
545
+ --components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
546
+ --components-chip-standard-border-disabled: #949699;
547
+ --components-chip-standard-default: rgba(255, 255, 255, 0);
548
+ --components-chip-standard-hover: #626493;
549
+ --components-chip-standard-icon-disabled: #b6b8ba;
550
+ --components-chip-standard-icon-selected: #08091c;
551
+ --components-chip-standard-icon-unselected: #e5e5e9;
552
+ --components-chip-standard-text-disabled: #b6b8ba;
553
+ --components-chip-standard-text-selected: #08091c;
554
+ --components-chip-standard-text-unselected: #e5e5e9;
790
555
  }
791
556
 
557
+ /* DO NOT CHANGE!*/
558
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
792
559
  /* DO NOT CHANGE!*/
793
560
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
794
561
  [data-color-mode=light],
795
562
  :root {
796
- --basecolors-frame-contrast: var(--fill-background-contrast-light);
797
- --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
798
- --basecolors-frame-default: var(--fill-background-standard-light);
799
- --basecolors-frame-elevated: var(--fill-background-standard-light);
800
- --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
801
- --basecolors-frame-subdued: var(--fill-background-subdued-light);
802
- --basecolors-frame-tint: var(--fill-background-tint-light);
803
- --basecolors-shape-accent: var(--shape-accent);
804
- --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
805
- --basecolors-shape-bicycle-default: var(--standard-bicycle);
806
- --basecolors-shape-bus-contrast: var(--contrast-bus);
807
- --basecolors-shape-bus-default: var(--standard-bus);
808
- --basecolors-shape-cableway-contrast: var(--contrast-cableway);
809
- --basecolors-shape-cableway-default: var(--standard-cableway);
810
- --basecolors-shape-disabled: var(--shape-neutral);
811
- --basecolors-shape-disabledalt: var(--shape-neutralalt);
812
- --basecolors-shape-ferry-contrast: var(--contrast-ferry);
813
- --basecolors-shape-ferry-default: var(--standard-ferry);
814
- --basecolors-shape-funicular-contrast: var(--contrast-funicular);
815
- --basecolors-shape-funicular-default: var(--standard-funicular);
816
- --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
817
- --basecolors-shape-helicopter-default: var(--standard-helicopter);
818
- --basecolors-shape-highlight: var(--stroke-highlight);
819
- --basecolors-shape-light: var(--shape-light);
820
- --basecolors-shape-mask: var(--shape-light);
821
- --basecolors-shape-maskalt: var(--shape-light);
822
- --basecolors-shape-metro-contrast: var(--contrast-metro);
823
- --basecolors-shape-metro-default: var(--standard-metro);
824
- --basecolors-shape-mobility-contrast: var(--contrast-mobility);
825
- --basecolors-shape-mobility-default: var(--standard-mobility);
826
- --basecolors-shape-plane-contrast: var(--contrast-plane);
827
- --basecolors-shape-plane-default: var(--standard-plane);
828
- --basecolors-shape-subdued: var(--shape-subdued);
829
- --basecolors-shape-subduedalt: var(--shape-subduedalt);
830
- --basecolors-shape-taxi-contrast: var(--contrast-taxi);
831
- --basecolors-shape-taxi-default: var(--standard-taxi);
832
- --basecolors-shape-train-contrast: var(--contrast-train);
833
- --basecolors-shape-train-default: var(--standard-train);
834
- --basecolors-shape-tram-contrast: var(--contrast-tram);
835
- --basecolors-shape-tram-default: var(--standard-tram);
836
- --basecolors-shape-walk-contrast: var(--contrast-walk);
837
- --basecolors-shape-walk-default: var(--standard-walk);
838
- --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
839
- --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
840
- --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
841
- --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
842
- --basecolors-stroke-contrast: var(--stroke-contrast);
843
- --basecolors-stroke-default: var(--stroke-accent);
844
- --basecolors-stroke-disabled: var(--stroke-neutralalt);
845
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
846
- --basecolors-stroke-focus-standard: var(--stroke-accent);
847
- --basecolors-stroke-highlight: var(--stroke-highlight);
848
- --basecolors-stroke-light: var(--stroke-light);
849
- --basecolors-stroke-subdued: var(--stroke-subdued);
850
- --basecolors-stroke-subduedalt: var(--stroke-neutral);
851
- --basecolors-text-accent: var(--text-accent);
852
- --basecolors-text-disabled: var(--text-neutral);
853
- --basecolors-text-disabledalt: var(--text-neutralalt);
854
- --basecolors-text-highlight: var(--stroke-highlight);
855
- --basecolors-text-light: var(--text-light);
856
- --basecolors-text-subdued: var(--text-subdued);
857
- --basecolors-text-subduedalt: var(--text-subduedalt);
563
+ --basecolors-frame-contrast: #181c56;
564
+ --basecolors-frame-contrastalt: #393d79;
565
+ --basecolors-frame-default: #ffffff;
566
+ --basecolors-frame-elevated: #ffffff;
567
+ --basecolors-frame-elevatedalt: #f6f6f9;
568
+ --basecolors-frame-subdued: #d9dae8;
569
+ --basecolors-frame-tint: #f6f6f9;
570
+ --basecolors-shape-accent: #181c56;
571
+ --basecolors-shape-bicycle-contrast: #00db9b;
572
+ --basecolors-shape-bicycle-default: #388f76;
573
+ --basecolors-shape-bus-contrast: #ff6392;
574
+ --basecolors-shape-bus-default: #c5044e;
575
+ --basecolors-shape-cableway-contrast: #b482fb;
576
+ --basecolors-shape-cableway-default: #78469a;
577
+ --basecolors-shape-disabled: #6e6f73;
578
+ --basecolors-shape-disabledalt: #b6b8ba;
579
+ --basecolors-shape-ferry-contrast: #6fdfff;
580
+ --basecolors-shape-ferry-default: #0c6693;
581
+ --basecolors-shape-funicular-contrast: #b482fb;
582
+ --basecolors-shape-funicular-default: #78469a;
583
+ --basecolors-shape-helicopter-contrast: #fbafea;
584
+ --basecolors-shape-helicopter-default: #800664;
585
+ --basecolors-shape-highlight: #ff5959;
586
+ --basecolors-shape-light: #ffffff;
587
+ --basecolors-shape-mask: #ffffff;
588
+ --basecolors-shape-maskalt: #ffffff;
589
+ --basecolors-shape-metro-contrast: #f08901;
590
+ --basecolors-shape-metro-default: #bf5826;
591
+ --basecolors-shape-mobility-contrast: #00db9b;
592
+ --basecolors-shape-mobility-default: #388f76;
593
+ --basecolors-shape-plane-contrast: #fbafea;
594
+ --basecolors-shape-plane-default: #800664;
595
+ --basecolors-shape-subdued: #626493;
596
+ --basecolors-shape-subduedalt: #d9dae8;
597
+ --basecolors-shape-taxi-contrast: #ffe082;
598
+ --basecolors-shape-taxi-default: #3d3e40;
599
+ --basecolors-shape-train-contrast: #42a5f5;
600
+ --basecolors-shape-train-default: #00367f;
601
+ --basecolors-shape-tram-contrast: #b482fb;
602
+ --basecolors-shape-tram-default: #78469a;
603
+ --basecolors-shape-walk-contrast: #8284ab;
604
+ --basecolors-shape-walk-default: #8d8e9c;
605
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
606
+ --basecolors-shape-airportlinkbus-default: #800664;
607
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
608
+ --basecolors-shape-airportlinkrail-default: #800664;
609
+ --basecolors-stroke-contrast: #aeb7e2;
610
+ --basecolors-stroke-default: #181c56;
611
+ --basecolors-stroke-disabled: #949699;
612
+ --basecolors-stroke-focus-contrast: #aeb7e2;
613
+ --basecolors-stroke-focus-standard: #181c56;
614
+ --basecolors-stroke-highlight: #ff5959;
615
+ --basecolors-stroke-light: #ffffff;
616
+ --basecolors-stroke-subdued: #8284ab;
617
+ --basecolors-stroke-subduedalt: #e3e6e8;
618
+ --basecolors-text-accent: #181c56;
619
+ --basecolors-text-disabled: #6e6f73;
620
+ --basecolors-text-disabledalt: #b6b8ba;
621
+ --basecolors-text-highlight: #ff5959;
622
+ --basecolors-text-light: #ffffff;
623
+ --basecolors-text-subdued: #626493;
624
+ --basecolors-text-subduedalt: #d9dae8;
858
625
  }
859
626
 
860
627
  [data-color-mode=dark] {
861
- --basecolors-frame-contrast: var(--fill-background-contrast-dark);
862
- --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
863
- --basecolors-frame-default: var(--fill-background-standard-dark);
864
- --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
865
- --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
866
- --basecolors-frame-subdued: var(--fill-background-subdued-dark);
867
- --basecolors-frame-tint: var(--fill-background-tint-dark);
868
- --basecolors-shape-accent: var(--shape-lightalt);
869
- --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
870
- --basecolors-shape-bicycle-default: var(--dark-bicycle);
871
- --basecolors-shape-bus-contrast: var(--dark-bus);
872
- --basecolors-shape-bus-default: var(--dark-bus);
873
- --basecolors-shape-cableway-contrast: var(--dark-cableway);
874
- --basecolors-shape-cableway-default: var(--dark-cableway);
875
- --basecolors-shape-disabled: var(--shape-neutralalt);
876
- --basecolors-shape-disabledalt: var(--shape-darkalt);
877
- --basecolors-shape-ferry-contrast: var(--dark-ferry);
878
- --basecolors-shape-ferry-default: var(--dark-ferry);
879
- --basecolors-shape-funicular-contrast: var(--dark-funicular);
880
- --basecolors-shape-funicular-default: var(--dark-funicular);
881
- --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
882
- --basecolors-shape-helicopter-default: var(--dark-helicopter);
883
- --basecolors-shape-highlight: var(--stroke-highlightalt);
884
- --basecolors-shape-light: var(--shape-lightalt);
885
- --basecolors-shape-mask: var(--fill-background-subdued-dark);
886
- --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
887
- --basecolors-shape-metro-contrast: var(--dark-metro);
888
- --basecolors-shape-metro-default: var(--dark-metro);
889
- --basecolors-shape-mobility-contrast: var(--dark-mobility);
890
- --basecolors-shape-mobility-default: var(--dark-mobility);
891
- --basecolors-shape-plane-contrast: var(--dark-plane);
892
- --basecolors-shape-plane-default: var(--dark-plane);
893
- --basecolors-shape-subdued: var(--shape-darkalt);
894
- --basecolors-shape-subduedalt: var(--shape-darkalt);
895
- --basecolors-shape-taxi-contrast: var(--dark-taxi);
896
- --basecolors-shape-taxi-default: var(--dark-taxi);
897
- --basecolors-shape-train-contrast: var(--dark-train);
898
- --basecolors-shape-train-default: var(--dark-train);
899
- --basecolors-shape-tram-contrast: var(--dark-tram);
900
- --basecolors-shape-tram-default: var(--dark-tram);
901
- --basecolors-shape-walk-contrast: var(--dark-walk);
902
- --basecolors-shape-walk-default: var(--dark-walk);
903
- --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
904
- --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
905
- --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
906
- --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
907
- --basecolors-stroke-contrast: var(--stroke-contrast);
908
- --basecolors-stroke-default: var(--stroke-dark);
909
- --basecolors-stroke-disabled: var(--stroke-neutral);
910
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
911
- --basecolors-stroke-focus-standard: var(--stroke-contrast);
912
- --basecolors-stroke-highlight: var(--stroke-highlightalt);
913
- --basecolors-stroke-light: var(--stroke-dark);
914
- --basecolors-stroke-subdued: var(--stroke-darkalt);
915
- --basecolors-stroke-subduedalt: var(--stroke-darkalt);
916
- --basecolors-text-accent: var(--text-lightalt);
917
- --basecolors-text-disabled: var(--text-neutralalt);
918
- --basecolors-text-disabledalt: var(--text-neutralalt);
919
- --basecolors-text-highlight: var(--stroke-highlightalt);
920
- --basecolors-text-light: var(--text-lightalt);
921
- --basecolors-text-subdued: var(--text-darkalt);
922
- --basecolors-text-subduedalt: var(--text-darkalt);
628
+ --basecolors-frame-contrast: #212233;
629
+ --basecolors-frame-contrastalt: #141527;
630
+ --basecolors-frame-default: #08091c;
631
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
632
+ --basecolors-frame-elevatedalt: #464755;
633
+ --basecolors-frame-subdued: #2d2e3e;
634
+ --basecolors-frame-tint: #141527;
635
+ --basecolors-shape-accent: #e5e5e9;
636
+ --basecolors-shape-bicycle-contrast: #4db295;
637
+ --basecolors-shape-bicycle-default: #4db295;
638
+ --basecolors-shape-bus-contrast: #e87a9b;
639
+ --basecolors-shape-bus-default: #e87a9b;
640
+ --basecolors-shape-cableway-contrast: #b898e5;
641
+ --basecolors-shape-cableway-default: #b898e5;
642
+ --basecolors-shape-disabled: #b6b8ba;
643
+ --basecolors-shape-disabledalt: #b3b4bd;
644
+ --basecolors-shape-ferry-contrast: #8ccfe2;
645
+ --basecolors-shape-ferry-default: #8ccfe2;
646
+ --basecolors-shape-funicular-contrast: #b898e5;
647
+ --basecolors-shape-funicular-default: #b898e5;
648
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
649
+ --basecolors-shape-helicopter-default: #f2b8e5;
650
+ --basecolors-shape-highlight: #ff9494;
651
+ --basecolors-shape-light: #e5e5e9;
652
+ --basecolors-shape-mask: #2d2e3e;
653
+ --basecolors-shape-maskalt: #393a49;
654
+ --basecolors-shape-metro-contrast: #dd973c;
655
+ --basecolors-shape-metro-default: #dd973c;
656
+ --basecolors-shape-mobility-contrast: #4db295;
657
+ --basecolors-shape-mobility-default: #4db295;
658
+ --basecolors-shape-plane-contrast: #f2b8e5;
659
+ --basecolors-shape-plane-default: #f2b8e5;
660
+ --basecolors-shape-subdued: #b3b4bd;
661
+ --basecolors-shape-subduedalt: #b3b4bd;
662
+ --basecolors-shape-taxi-contrast: #ffe082;
663
+ --basecolors-shape-taxi-default: #ffe082;
664
+ --basecolors-shape-train-contrast: #60a2d7;
665
+ --basecolors-shape-train-default: #60a2d7;
666
+ --basecolors-shape-tram-contrast: #b898e5;
667
+ --basecolors-shape-tram-default: #b898e5;
668
+ --basecolors-shape-walk-contrast: #8d8e9c;
669
+ --basecolors-shape-walk-default: #8d8e9c;
670
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
671
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
672
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
673
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
674
+ --basecolors-stroke-contrast: #aeb7e2;
675
+ --basecolors-stroke-default: #b3b4bd;
676
+ --basecolors-stroke-disabled: #e3e6e8;
677
+ --basecolors-stroke-focus-contrast: #aeb7e2;
678
+ --basecolors-stroke-focus-standard: #aeb7e2;
679
+ --basecolors-stroke-highlight: #ff9494;
680
+ --basecolors-stroke-light: #b3b4bd;
681
+ --basecolors-stroke-subdued: #81828f;
682
+ --basecolors-stroke-subduedalt: #81828f;
683
+ --basecolors-text-accent: #e5e5e9;
684
+ --basecolors-text-disabled: #b6b8ba;
685
+ --basecolors-text-disabledalt: #b6b8ba;
686
+ --basecolors-text-highlight: #ff9494;
687
+ --basecolors-text-light: #e5e5e9;
688
+ --basecolors-text-subdued: #b3b4bd;
689
+ --basecolors-text-subduedalt: #b3b4bd;
923
690
  }
924
691
 
925
692
  :root {