@entur/tooltip 2.6.48 → 2.6.50

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