@entur/tab 0.4.59 → 0.4.60

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 +352 -37
  2. package/package.json +3 -3
package/dist/styles.css CHANGED
@@ -1,5 +1,321 @@
1
+ @import "~@entur/tokens/dist/primitive.css";
2
+ @import "~@entur/tokens/dist/semantic.css";
1
3
  /* DO NOT CHANGE!*/
2
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
+ :root {
8
+ --fill-background-contrast-dark: var(--ebony-90);
9
+ --fill-background-contrast-light: var(--lavender-90);
10
+ --fill-background-contrast-lightalt: var(--blue-90);
11
+ --fill-background-contrast-lightalt-2: var(--blue-100);
12
+ --fill-background-overlay-solid: var(--ebony-80);
13
+ --fill-background-overlay-solidalt: var(--ebony-75);
14
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
15
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
16
+ --fill-background-standard-colorless: var(--white-alpha-0);
17
+ --fill-background-standard-dark: var(--ebony-100);
18
+ --fill-background-standard-light: var(--white-alpha-100);
19
+ --fill-background-subdued-dark: var(--ebony-85);
20
+ --fill-background-subdued-light: var(--blue-30);
21
+ --fill-background-tint-dark: var(--ebony-95);
22
+ --fill-background-tint-light: var(--blue-10);
23
+ --fill-background-tint-neutral: var(--grey-10);
24
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
25
+ --fill-boolean-false-contrast: var(--blue-50);
26
+ --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
27
+ --fill-boolean-false-light: var(--grey-60);
28
+ --fill-boolean-true-contrast: var(--mint-40);
29
+ --fill-boolean-true-dark: var(--mint-40);
30
+ --fill-boolean-true-light: var(--mint-60);
31
+ --fill-disabled-light: var(--grey-40);
32
+ --fill-disabled-transparent: var(--transparent-neutral-alpha15);
33
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
34
+ --fill-information-contrast: var(--sky-30);
35
+ --fill-information-deep: var(--sky-50);
36
+ --fill-information-muted: var(--sky-10);
37
+ --fill-information-tint: var(--sky-20);
38
+ --fill-negative-contrast: var(--coral-40);
39
+ --fill-negative-dark: var(--coral-90);
40
+ --fill-negative-deep: var(--coral-60);
41
+ --fill-negative-muted: var(--coral-20);
42
+ --fill-negative-tint: var(--coral-30);
43
+ --fill-negative-transparent: var(--transparent-coral-alpha20);
44
+ --fill-primary-active-contrast: var(--lavender-50);
45
+ --fill-primary-active-light: var(--lavender-100);
46
+ --fill-primary-default-contrast: var(--lavender-40);
47
+ --fill-primary-default-light: var(--lavender-90);
48
+ --fill-primary-hover-contrast: var(--lavender-30);
49
+ --fill-primary-hover-light: var(--blue-90);
50
+ --fill-secondary-active-contrast: var(--lavender-50);
51
+ --fill-secondary-active-light: var(--lavender-40);
52
+ --fill-secondary-default-colorless: var(--white-alpha-0);
53
+ --fill-secondary-hover-contrast: var(--blue-70);
54
+ --fill-secondary-hover-light: var(--lavender-20);
55
+ --fill-selected-default-contrast: var(--blue-90);
56
+ --fill-selected-default-dark: var(--ebony-10);
57
+ --fill-selected-default-darkalt: var(--ebony-50);
58
+ --fill-selected-default-light: var(--blue-10);
59
+ --fill-selected-default-neutral: var(--grey-30);
60
+ --fill-selected-hover-contrast: var(--blue-80);
61
+ --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
62
+ --fill-selected-hover-light: var(--blue-20);
63
+ --fill-selected-hover-neutral: var(--grey-20);
64
+ --fill-success-contrast: var(--mint-40);
65
+ --fill-success-deep: var(--mint-60);
66
+ --fill-success-muted: var(--mint-20);
67
+ --fill-success-subdued: var(--mint-50);
68
+ --fill-success-tint: var(--mint-30);
69
+ --fill-warning-contrast: var(--canary-40);
70
+ --fill-warning-deep: var(--canary-60);
71
+ --fill-warning-muted: var(--canary-20);
72
+ --fill-warning-tint: var(--canary-30);
73
+ --shape-accent: var(--lavender-90);
74
+ --shape-contrast: var(--lavender-40);
75
+ --shape-dark: var(--ebony-100);
76
+ --shape-darkalt: var(--ebony-30);
77
+ --shape-disabled: var(--grey-80);
78
+ --shape-highlight: var(--coral-40);
79
+ --shape-highlightalt: var(--coral-30);
80
+ --shape-inactive: var(--blue-40);
81
+ --shape-information: var(--sky-50);
82
+ --shape-informationalt: var(--sky-30);
83
+ --shape-light: var(--white-alpha-100);
84
+ --shape-lightalt: var(--ebony-10);
85
+ --shape-negative: var(--coral-60);
86
+ --shape-negativealt: var(--coral-30);
87
+ --shape-neutral: var(--grey-70);
88
+ --shape-neutralalt: var(--grey-50);
89
+ --shape-neutralalt2: var(--grey-60);
90
+ --shape-subdued: var(--blue-70);
91
+ --shape-subduedalt: var(--blue-30);
92
+ --shape-success: var(--mint-60);
93
+ --shape-successalt: var(--mint-40);
94
+ --shape-warning: var(--canary-60);
95
+ --shape-warningalt: var(--canary-40);
96
+ --stroke-accent: var(--lavender-90);
97
+ --stroke-colorless: var(--white-alpha-0);
98
+ --stroke-contrast: var(--lavender-40);
99
+ --stroke-contrastalt: var(--blue-80);
100
+ --stroke-dark: var(--ebony-30);
101
+ --stroke-darkalt: var(--ebony-50);
102
+ --stroke-darkalt-2: var(--ebony-100);
103
+ --stroke-highlight: var(--coral-40);
104
+ --stroke-highlightalt: var(--coral-30);
105
+ --stroke-information: var(--sky-50);
106
+ --stroke-light: var(--white-alpha-100);
107
+ --stroke-lightalt: var(--ebony-10);
108
+ --stroke-negative: var(--coral-60);
109
+ --stroke-negativealt: var(--coral-30);
110
+ --stroke-neutral: var(--grey-30);
111
+ --stroke-neutralalt: var(--grey-60);
112
+ --stroke-subdued: var(--blue-60);
113
+ --stroke-success: var(--mint-60);
114
+ --stroke-successalt: var(--mint-40);
115
+ --stroke-transparent: var(--transparent-blue-alpha40);
116
+ --stroke-transparentalt: var(--transparent-lavender-alpha70);
117
+ --stroke-warning: var(--canary-70);
118
+ --text-accent: var(--lavender-90);
119
+ --text-dark: var(--ebony-100);
120
+ --text-darkalt: var(--ebony-30);
121
+ --text-disabled: var(--grey-80);
122
+ --text-highlight: var(--lavender-40);
123
+ --text-highlightalt: var(--peach-40);
124
+ --text-light: var(--white-alpha-100);
125
+ --text-lightalt: var(--ebony-10);
126
+ --text-negative: var(--coral-60);
127
+ --text-negativealt: var(--coral-30);
128
+ --text-neutral: var(--grey-70);
129
+ --text-neutralalt: var(--grey-50);
130
+ --text-neutralalt2: var(--grey-60);
131
+ --text-subdued: var(--blue-70);
132
+ --text-subduedalt: var(--blue-30);
133
+ --text-success: var(--mint-60);
134
+ --text-successalt: var(--mint-40);
135
+ }
136
+
137
+ /* DO NOT CHANGE!*/
138
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
139
+ [data-color-mode=light],
140
+ :root {
141
+ --components-tab-contrast-border: var(--stroke-contrast);
142
+ --components-tab-contrast-fill-disabled: var(--stroke-transparent);
143
+ --components-tab-contrast-fill-hover: var(--fill-secondary-hover-contrast);
144
+ --components-tab-contrast-fill-selected: var(--fill-background-contrast-light);
145
+ --components-tab-contrast-fill-unselected: var(--fill-selected-default-contrast);
146
+ --components-tab-contrast-icon: var(--shape-light);
147
+ --components-tab-contrast-icon-disabled: var(--shape-neutralalt);
148
+ --components-tab-contrast-text: var(--text-light);
149
+ --components-tab-contrast-text-disabled: var(--text-neutralalt);
150
+ --components-tab-contrast-underline-selected: var(--stroke-highlight);
151
+ --components-tab-standard-border: var(--stroke-neutral);
152
+ --components-tab-standard-fill-disabled: var(--fill-disabled-light);
153
+ --components-tab-standard-fill-hover: var(--fill-selected-default-neutral);
154
+ --components-tab-standard-fill-selected: var(--fill-background-standard-light);
155
+ --components-tab-standard-fill-unselected: var(--fill-selected-hover-neutral);
156
+ --components-tab-standard-icon: var(--shape-accent);
157
+ --components-tab-standard-icon-disabled: var(--shape-disabled);
158
+ --components-tab-standard-text: var(--text-accent);
159
+ --components-tab-standard-text-disabled: var(--text-disabled);
160
+ --components-tab-standard-underline-selected: var(--stroke-highlight);
161
+ }
162
+
163
+ [data-color-mode=dark] {
164
+ --components-tab-contrast-border: var(--stroke-darkalt);
165
+ --components-tab-contrast-fill-disabled: var(--fill-disabled-transparentalt);
166
+ --components-tab-contrast-fill-hover: var(--fill-background-overlay-solid);
167
+ --components-tab-contrast-fill-selected: var(--fill-background-standard-dark);
168
+ --components-tab-contrast-fill-unselected: var(--fill-background-overlay-transparentalt);
169
+ --components-tab-contrast-icon: var(--shape-lightalt);
170
+ --components-tab-contrast-icon-disabled: var(--shape-neutralalt2);
171
+ --components-tab-contrast-text: var(--text-lightalt);
172
+ --components-tab-contrast-text-disabled: var(--text-neutralalt2);
173
+ --components-tab-contrast-underline-selected: var(--stroke-highlightalt);
174
+ --components-tab-standard-border: var(--stroke-darkalt);
175
+ --components-tab-standard-fill-disabled: var(--fill-disabled-transparentalt);
176
+ --components-tab-standard-fill-hover: var(--fill-background-overlay-solid);
177
+ --components-tab-standard-fill-selected: var(--fill-background-standard-dark);
178
+ --components-tab-standard-fill-unselected: var(--fill-background-overlay-transparentalt);
179
+ --components-tab-standard-icon: var(--shape-lightalt);
180
+ --components-tab-standard-icon-disabled: var(--shape-neutralalt2);
181
+ --components-tab-standard-text: var(--text-lightalt);
182
+ --components-tab-standard-text-disabled: var(--text-neutralalt2);
183
+ --components-tab-standard-underline-selected: var(--stroke-highlightalt);
184
+ }
185
+
186
+ /* DO NOT CHANGE!*/
187
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
188
+ [data-color-mode=light],
189
+ :root {
190
+ --basecolors-frame-contrast: var(--fill-background-contrast-light);
191
+ --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
192
+ --basecolors-frame-default: var(--fill-background-standard-light);
193
+ --basecolors-frame-elevated: var(--fill-background-standard-light);
194
+ --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
195
+ --basecolors-frame-subdued: var(--fill-background-subdued-light);
196
+ --basecolors-frame-tint: var(--fill-background-tint-light);
197
+ --basecolors-shape-accent: var(--shape-accent);
198
+ --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
199
+ --basecolors-shape-bicycle-default: var(--standard-bicycle);
200
+ --basecolors-shape-bus-contrast: var(--contrast-bus);
201
+ --basecolors-shape-bus-default: var(--standard-bus);
202
+ --basecolors-shape-cableway-contrast: var(--contrast-cableway);
203
+ --basecolors-shape-cableway-default: var(--standard-cableway);
204
+ --basecolors-shape-disabled: var(--shape-neutral);
205
+ --basecolors-shape-disabledalt: var(--shape-neutralalt);
206
+ --basecolors-shape-ferry-contrast: var(--contrast-ferry);
207
+ --basecolors-shape-ferry-default: var(--standard-ferry);
208
+ --basecolors-shape-funicular-contrast: var(--contrast-funicular);
209
+ --basecolors-shape-funicular-default: var(--standard-funicular);
210
+ --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
211
+ --basecolors-shape-helicopter-default: var(--standard-helicopter);
212
+ --basecolors-shape-highlight: var(--stroke-highlight);
213
+ --basecolors-shape-light: var(--shape-light);
214
+ --basecolors-shape-mask: var(--shape-light);
215
+ --basecolors-shape-maskalt: var(--shape-light);
216
+ --basecolors-shape-metro-contrast: var(--contrast-metro);
217
+ --basecolors-shape-metro-default: var(--standard-metro);
218
+ --basecolors-shape-mobility-contrast: var(--contrast-mobility);
219
+ --basecolors-shape-mobility-default: var(--standard-mobility);
220
+ --basecolors-shape-plane-contrast: var(--contrast-plane);
221
+ --basecolors-shape-plane-default: var(--standard-plane);
222
+ --basecolors-shape-subdued: var(--shape-subdued);
223
+ --basecolors-shape-subduedalt: var(--shape-subduedalt);
224
+ --basecolors-shape-taxi-contrast: var(--contrast-taxi);
225
+ --basecolors-shape-taxi-default: var(--standard-taxi);
226
+ --basecolors-shape-train-contrast: var(--contrast-train);
227
+ --basecolors-shape-train-default: var(--standard-train);
228
+ --basecolors-shape-tram-contrast: var(--contrast-tram);
229
+ --basecolors-shape-tram-default: var(--standard-tram);
230
+ --basecolors-shape-walk-contrast: var(--contrast-walk);
231
+ --basecolors-shape-walk-default: var(--standard-walk);
232
+ --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
233
+ --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
234
+ --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
235
+ --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
236
+ --basecolors-stroke-contrast: var(--stroke-contrast);
237
+ --basecolors-stroke-default: var(--stroke-accent);
238
+ --basecolors-stroke-disabled: var(--stroke-neutralalt);
239
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
240
+ --basecolors-stroke-focus-standard: var(--stroke-accent);
241
+ --basecolors-stroke-highlight: var(--stroke-highlight);
242
+ --basecolors-stroke-light: var(--stroke-light);
243
+ --basecolors-stroke-subdued: var(--stroke-subdued);
244
+ --basecolors-stroke-subduedalt: var(--stroke-neutral);
245
+ --basecolors-text-accent: var(--text-accent);
246
+ --basecolors-text-disabled: var(--text-neutral);
247
+ --basecolors-text-disabledalt: var(--text-neutralalt);
248
+ --basecolors-text-highlight: var(--stroke-highlight);
249
+ --basecolors-text-light: var(--text-light);
250
+ --basecolors-text-subdued: var(--text-subdued);
251
+ --basecolors-text-subduedalt: var(--text-subduedalt);
252
+ }
253
+
254
+ [data-color-mode=dark] {
255
+ --basecolors-frame-contrast: var(--fill-background-contrast-dark);
256
+ --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
257
+ --basecolors-frame-default: var(--fill-background-standard-dark);
258
+ --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
259
+ --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
260
+ --basecolors-frame-subdued: var(--fill-background-subdued-dark);
261
+ --basecolors-frame-tint: var(--fill-background-tint-dark);
262
+ --basecolors-shape-accent: var(--shape-lightalt);
263
+ --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
264
+ --basecolors-shape-bicycle-default: var(--dark-bicycle);
265
+ --basecolors-shape-bus-contrast: var(--dark-bus);
266
+ --basecolors-shape-bus-default: var(--dark-bus);
267
+ --basecolors-shape-cableway-contrast: var(--dark-cableway);
268
+ --basecolors-shape-cableway-default: var(--dark-cableway);
269
+ --basecolors-shape-disabled: var(--shape-neutralalt);
270
+ --basecolors-shape-disabledalt: var(--shape-darkalt);
271
+ --basecolors-shape-ferry-contrast: var(--dark-ferry);
272
+ --basecolors-shape-ferry-default: var(--dark-ferry);
273
+ --basecolors-shape-funicular-contrast: var(--dark-funicular);
274
+ --basecolors-shape-funicular-default: var(--dark-funicular);
275
+ --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
276
+ --basecolors-shape-helicopter-default: var(--dark-helicopter);
277
+ --basecolors-shape-highlight: var(--stroke-highlightalt);
278
+ --basecolors-shape-light: var(--shape-lightalt);
279
+ --basecolors-shape-mask: var(--fill-background-subdued-dark);
280
+ --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
281
+ --basecolors-shape-metro-contrast: var(--dark-metro);
282
+ --basecolors-shape-metro-default: var(--dark-metro);
283
+ --basecolors-shape-mobility-contrast: var(--dark-mobility);
284
+ --basecolors-shape-mobility-default: var(--dark-mobility);
285
+ --basecolors-shape-plane-contrast: var(--dark-plane);
286
+ --basecolors-shape-plane-default: var(--dark-plane);
287
+ --basecolors-shape-subdued: var(--shape-darkalt);
288
+ --basecolors-shape-subduedalt: var(--shape-darkalt);
289
+ --basecolors-shape-taxi-contrast: var(--dark-taxi);
290
+ --basecolors-shape-taxi-default: var(--dark-taxi);
291
+ --basecolors-shape-train-contrast: var(--dark-train);
292
+ --basecolors-shape-train-default: var(--dark-train);
293
+ --basecolors-shape-tram-contrast: var(--dark-tram);
294
+ --basecolors-shape-tram-default: var(--dark-tram);
295
+ --basecolors-shape-walk-contrast: var(--dark-walk);
296
+ --basecolors-shape-walk-default: var(--dark-walk);
297
+ --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
298
+ --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
299
+ --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
300
+ --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
301
+ --basecolors-stroke-contrast: var(--stroke-contrast);
302
+ --basecolors-stroke-default: var(--stroke-dark);
303
+ --basecolors-stroke-disabled: var(--stroke-neutral);
304
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
305
+ --basecolors-stroke-focus-standard: var(--stroke-contrast);
306
+ --basecolors-stroke-highlight: var(--stroke-highlightalt);
307
+ --basecolors-stroke-light: var(--stroke-dark);
308
+ --basecolors-stroke-subdued: var(--stroke-darkalt);
309
+ --basecolors-stroke-subduedalt: var(--stroke-darkalt);
310
+ --basecolors-text-accent: var(--text-lightalt);
311
+ --basecolors-text-disabled: var(--text-neutralalt);
312
+ --basecolors-text-disabledalt: var(--text-neutralalt);
313
+ --basecolors-text-highlight: var(--stroke-highlightalt);
314
+ --basecolors-text-light: var(--text-lightalt);
315
+ --basecolors-text-subdued: var(--text-darkalt);
316
+ --basecolors-text-subduedalt: var(--text-darkalt);
317
+ }
318
+
3
319
  :root {
4
320
  --reach-tabs: 1;
5
321
  --eds-tab: 1;
@@ -21,14 +337,14 @@
21
337
  bottom: 0;
22
338
  left: 0;
23
339
  right: 0;
24
- background-color: #d1d3d3;
340
+ background-color: var(--components-tab-standard-border);
25
341
  display: block;
26
342
  height: 0.125rem;
27
343
  width: inherit;
28
344
  z-index: -1;
29
345
  }
30
346
  .eds-contrast .eds-tab-list::after {
31
- background-color: #aeb7e2;
347
+ background-color: var(--components-tab-contrast-border);
32
348
  }
33
349
  .eds-tab-list::-webkit-scrollbar {
34
350
  display: none;
@@ -38,10 +354,10 @@
38
354
  -webkit-appearance: none;
39
355
  -moz-appearance: none;
40
356
  appearance: none;
41
- background: #f3f3f3;
42
- border: 0.125rem solid #f3f3f3;
357
+ background: var(--components-tab-standard-fill-unselected);
358
+ border: 0.125rem solid transparent;
43
359
  border-radius: 0.25rem 0.25rem 0 0;
44
- color: #181c56;
360
+ color: var(--components-tab-standard-text);
45
361
  cursor: pointer;
46
362
  font-family: inherit;
47
363
  font-size: inherit;
@@ -57,18 +373,16 @@
57
373
  min-width: 0;
58
374
  }
59
375
  .eds-contrast .eds-tab {
60
- background-color: #54568c;
61
- border-color: #54568c;
62
- color: #ffffff;
376
+ background-color: var(--components-tab-contrast-fill-unselected);
377
+ color: var(--components-tab-contrast-text);
63
378
  }
64
379
  .eds-tab:hover {
65
- background-color: #d1d3d3;
66
- border-color: #d1d3d3;
380
+ background-color: var(--components-tab-standard-fill-hover);
381
+ color: var(--components-menu-tableofcontent-standard-text-selected);
67
382
  }
68
383
  .eds-contrast .eds-tab:hover {
69
- background-color: #aeb7e2;
70
- border-color: #aeb7e2;
71
- color: #181c56;
384
+ background-color: var(--components-tab-contrast-fill-hover);
385
+ color: var(--components-tab-contrast-text);
72
386
  }
73
387
  .eds-tab + .eds-tab {
74
388
  margin-left: 0.25rem;
@@ -79,31 +393,31 @@
79
393
  bottom: -0.125rem;
80
394
  left: -0.125rem;
81
395
  right: -0.125rem;
82
- background-color: #d1d3d3;
396
+ background-color: var(--components-tab-standard-border);
83
397
  display: block;
84
398
  height: 0.125rem;
85
399
  }
86
400
  .eds-contrast .eds-tab::after {
87
- background-color: #aeb7e2;
401
+ background-color: var(--components-tab-contrast-border);
88
402
  }
89
403
  .eds-tab[aria-selected=true] {
90
- background-color: #ffffff;
91
- border-color: #d1d3d3;
92
- color: #181c56;
404
+ background-color: var(--components-tab-standard-fill-selected);
405
+ border-color: var(--components-tab-standard-border);
406
+ color: var(--components-tab-standard-text);
93
407
  font-weight: 600;
94
408
  }
95
409
  .eds-contrast .eds-tab[aria-selected=true] {
96
- background-color: #181c56;
97
- color: #ffffff;
98
- border-color: #aeb7e2;
410
+ background-color: var(--components-tab-contrast-fill-selected);
411
+ color: var(--components-tab-contrast-text);
412
+ border-color: var(--components-tab-contrast-border);
99
413
  }
100
414
  .eds-tab[aria-selected=true]::after {
101
- background-color: #ffffff;
415
+ background-color: var(--components-tab-standard-fill-selected);
102
416
  left: 0;
103
417
  right: 0;
104
418
  }
105
419
  .eds-contrast .eds-tab[aria-selected=true]::after {
106
- background-color: #181c56;
420
+ background-color: var(--components-tab-contrast-fill-selected);
107
421
  }
108
422
  .eds-tab[aria-selected=true]::before {
109
423
  content: "";
@@ -111,7 +425,7 @@
111
425
  margin: 0 auto;
112
426
  width: 2rem;
113
427
  height: 3px;
114
- background: #ff5959;
428
+ background: var(--components-tab-standard-underline-selected);
115
429
  position: absolute;
116
430
  bottom: 0.25rem;
117
431
  left: 0;
@@ -121,22 +435,23 @@
121
435
  background: transparent;
122
436
  }
123
437
  .eds-tab[disabled] {
124
- background: #f8f8f8;
125
- border-color: #f8f8f8;
126
- color: #d1d3d3;
127
- pointer-events: none;
438
+ background: var(--components-tab-standard-fill-disabled);
439
+ border-color: none;
440
+ color: var(--components-tab-standard-text-disabled);
441
+ cursor: not-allowed;
128
442
  }
129
443
  .eds-contrast .eds-tab[disabled] {
130
- background: #292b6a;
131
- border-color: #292b6a;
132
- color: #babbcf;
444
+ background: var(--components-tab-contrast-fill-disabled);
445
+ border-color: none;
446
+ color: var(--components-tab-contrast-text-disabled);
133
447
  }
134
448
  .eds-tab:focus {
135
- outline: none;
136
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
449
+ outline: 2px solid #181c56;
450
+ outline-color: var(--basecolors-stroke-focus-standard);
451
+ outline-offset: 0.125rem;
137
452
  }
138
453
  .eds-contrast .eds-tab:focus {
139
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
454
+ outline-color: var(--basecolors-stroke-focus-contrast);
140
455
  }
141
456
 
142
457
  .eds-tab-panels {
@@ -144,10 +459,10 @@
144
459
  }
145
460
 
146
461
  .eds-tab-panel:focus {
147
- outline: none;
148
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
462
+ outline: 2px solid #181c56;
463
+ outline-color: var(--basecolors-stroke-focus-standard);
149
464
  outline-offset: 0.125rem;
150
465
  }
151
466
  .eds-contrast .eds-tab-panel:focus {
152
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
467
+ outline-color: var(--basecolors-stroke-focus-contrast);
153
468
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/tab",
3
- "version": "0.4.59",
3
+ "version": "0.4.60",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/tab.esm.js",
@@ -26,10 +26,10 @@
26
26
  "react-dom": ">=16.8.0"
27
27
  },
28
28
  "dependencies": {
29
- "@entur/tokens": "^3.13.0",
29
+ "@entur/tokens": "^3.13.1",
30
30
  "@entur/utils": "^0.10.0",
31
31
  "@reach/tabs": "^0.15.0",
32
32
  "classnames": "^2.3.1"
33
33
  },
34
- "gitHead": "907373a47cc81ae12be266bac1d10522033f8b49"
34
+ "gitHead": "d0a435264ccaf7ed8e6b7798c81e876176ce3d4d"
35
35
  }