@entur/tooltip 4.0.0-beta.0 → 4.0.0-beta.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/Popover.d.ts +3 -1
  2. package/dist/Tooltip.d.ts +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/styles.css +751 -754
  5. package/dist/tooltip.cjs.development.js +96 -119
  6. package/dist/tooltip.cjs.development.js.map +1 -1
  7. package/dist/tooltip.cjs.production.min.js +1 -1
  8. package/dist/tooltip.cjs.production.min.js.map +1 -1
  9. package/dist/tooltip.esm.js +97 -120
  10. package/dist/tooltip.esm.js.map +1 -1
  11. package/dist/utils.d.ts +3 -0
  12. package/package.json +6 -8
package/dist/styles.css CHANGED
@@ -1,92 +1,226 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- /* DO NOT CHANGE!*/
4
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-floating-button {
6
- align-items: center;
7
- -webkit-appearance: none;
8
- -moz-appearance: none;
9
- appearance: none;
10
- background: var(--components-button-floating-standard-default);
11
- border: 0;
12
- border-radius: 1.5rem;
3
+ .eds-popover {
4
+ background: var(--components-tooltip-popover-standard-fill);
13
5
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
14
- color: var(--components-button-floating-standard-text);
15
- cursor: pointer;
16
- display: flex;
6
+ border-radius: 0.25rem;
7
+ border: 0.0625rem solid var(--components-tooltip-popover-standard-border);
17
8
  font-family: inherit;
18
- font-size: 0.875rem;
19
- font-weight: 500;
20
- justify-content: center;
21
- min-height: 3rem;
22
- margin: 0;
23
- min-width: 3rem;
24
- padding: 0 1rem;
25
- position: relative;
26
- z-index: 10;
27
- }
28
-
29
- .eds-floating-button--extended {
30
- padding: 0 0.9375rem;
31
- }
32
-
33
- .eds-floating-button:hover {
34
- background-color: var(--components-button-floating-standard-hover);
9
+ z-index: 20;
35
10
  }
36
-
37
- .eds-floating-button:active {
38
- background-color: var(--components-button-floating-standard-active);
11
+ .eds-contrast .eds-popover {
12
+ background: var(--components-tooltip-popover-contrast-fill);
13
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
39
14
  }
40
-
41
- .eds-floating-button:focus {
15
+ .eds-popover:focus {
42
16
  outline: 2px solid #181c56;
43
17
  outline-color: var(--basecolors-stroke-focus-standard);
44
18
  outline-offset: 0.125rem;
45
19
  }
46
-
47
- .eds-contrast .eds-floating-button:focus {
20
+ .eds-contrast .eds-popover:focus {
48
21
  outline-color: var(--basecolors-stroke-focus-contrast);
49
22
  }
50
-
51
- .eds-contrast .eds-floating-button {
52
- background: var(--components-button-floating-contrast-default);
53
- color: var(--components-button-floating-contrast-text);
54
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
23
+ /* DO NOT CHANGE!*/
24
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
25
+ /* DO NOT CHANGE!*/
26
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
27
+ /* DO NOT CHANGE!*/
28
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
29
+ [data-color-mode=light],
30
+ :root {
31
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
32
+ --components-tooltip-popover-contrast-fill: #393d79;
33
+ --components-tooltip-popover-contrast-icon: #ffffff;
34
+ --components-tooltip-popover-contrast-text: #ffffff;
35
+ --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
36
+ --components-tooltip-popover-standard-fill: #f6f6f9;
37
+ --components-tooltip-popover-standard-icon: #181c56;
38
+ --components-tooltip-popover-standard-text: #181c56;
39
+ --components-tooltip-tooltip-contrast-fill: #ffffff;
40
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
41
+ --components-tooltip-tooltip-contrast-icon: #181c56;
42
+ --components-tooltip-tooltip-contrast-icon-negative: #181c56;
43
+ --components-tooltip-tooltip-contrast-text: #181c56;
44
+ --components-tooltip-tooltip-contrast-text-negative: #181c56;
45
+ --components-tooltip-tooltip-contrast-triangle: #ffffff;
46
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
47
+ --components-tooltip-tooltip-standard-fill: #181c56;
48
+ --components-tooltip-tooltip-standard-fill-negative: #ffcece;
49
+ --components-tooltip-tooltip-standard-icon: #ffffff;
50
+ --components-tooltip-tooltip-standard-icon-negative: #181c56;
51
+ --components-tooltip-tooltip-standard-text: #ffffff;
52
+ --components-tooltip-tooltip-standard-text-negative: #181c56;
53
+ --components-tooltip-tooltip-standard-triangle: #181c56;
54
+ --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
55
55
  }
56
56
 
57
- .eds-contrast .eds-floating-button:hover {
58
- background-color: var(--components-button-floating-contrast-hover);
57
+ [data-color-mode=dark] {
58
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
59
+ --components-tooltip-popover-contrast-fill: #393a49;
60
+ --components-tooltip-popover-contrast-icon: #e5e5e9;
61
+ --components-tooltip-popover-contrast-text: #e5e5e9;
62
+ --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
63
+ --components-tooltip-popover-standard-fill: #393a49;
64
+ --components-tooltip-popover-standard-icon: #e5e5e9;
65
+ --components-tooltip-popover-standard-text: #e5e5e9;
66
+ --components-tooltip-tooltip-contrast-fill: #393a49;
67
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
68
+ --components-tooltip-tooltip-contrast-icon: #e5e5e9;
69
+ --components-tooltip-tooltip-contrast-icon-negative: #08091c;
70
+ --components-tooltip-tooltip-contrast-text: #e5e5e9;
71
+ --components-tooltip-tooltip-contrast-text-negative: #08091c;
72
+ --components-tooltip-tooltip-contrast-triangle: #393a49;
73
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
74
+ --components-tooltip-tooltip-standard-fill: #393a49;
75
+ --components-tooltip-tooltip-standard-fill-negative: #ff9494;
76
+ --components-tooltip-tooltip-standard-icon: #e5e5e9;
77
+ --components-tooltip-tooltip-standard-icon-negative: #08091c;
78
+ --components-tooltip-tooltip-standard-text: #e5e5e9;
79
+ --components-tooltip-tooltip-standard-text-negative: #08091c;
80
+ --components-tooltip-tooltip-standard-triangle: #393a49;
81
+ --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
59
82
  }
60
83
 
61
- .eds-contrast .eds-floating-button:active {
62
- background-color: var(--components-button-floating-contrast-active);
84
+ /* DO NOT CHANGE!*/
85
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
86
+ /* DO NOT CHANGE!*/
87
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
88
+ [data-color-mode=light],
89
+ :root {
90
+ --basecolors-frame-contrast: #181c56;
91
+ --basecolors-frame-contrastalt: #393d79;
92
+ --basecolors-frame-default: #ffffff;
93
+ --basecolors-frame-elevated: #ffffff;
94
+ --basecolors-frame-elevatedalt: #f6f6f9;
95
+ --basecolors-frame-subdued: #d9dae8;
96
+ --basecolors-frame-tint: #f6f6f9;
97
+ --basecolors-shape-accent: #181c56;
98
+ --basecolors-shape-bicycle-contrast: #00db9b;
99
+ --basecolors-shape-bicycle-default: #388f76;
100
+ --basecolors-shape-bus-contrast: #ff6392;
101
+ --basecolors-shape-bus-default: #c5044e;
102
+ --basecolors-shape-cableway-contrast: #b482fb;
103
+ --basecolors-shape-cableway-default: #78469a;
104
+ --basecolors-shape-disabled: #6e6f73;
105
+ --basecolors-shape-disabledalt: #b6b8ba;
106
+ --basecolors-shape-ferry-contrast: #6fdfff;
107
+ --basecolors-shape-ferry-default: #0c6693;
108
+ --basecolors-shape-funicular-contrast: #b482fb;
109
+ --basecolors-shape-funicular-default: #78469a;
110
+ --basecolors-shape-helicopter-contrast: #fbafea;
111
+ --basecolors-shape-helicopter-default: #800664;
112
+ --basecolors-shape-highlight: #ff5959;
113
+ --basecolors-shape-light: #ffffff;
114
+ --basecolors-shape-mask: #ffffff;
115
+ --basecolors-shape-maskalt: #ffffff;
116
+ --basecolors-shape-metro-contrast: #f08901;
117
+ --basecolors-shape-metro-default: #bf5826;
118
+ --basecolors-shape-mobility-contrast: #00db9b;
119
+ --basecolors-shape-mobility-default: #388f76;
120
+ --basecolors-shape-plane-contrast: #fbafea;
121
+ --basecolors-shape-plane-default: #800664;
122
+ --basecolors-shape-subdued: #626493;
123
+ --basecolors-shape-subduedalt: #d9dae8;
124
+ --basecolors-shape-taxi-contrast: #ffe082;
125
+ --basecolors-shape-taxi-default: #3d3e40;
126
+ --basecolors-shape-train-contrast: #42a5f5;
127
+ --basecolors-shape-train-default: #00367f;
128
+ --basecolors-shape-tram-contrast: #b482fb;
129
+ --basecolors-shape-tram-default: #78469a;
130
+ --basecolors-shape-walk-contrast: #8284ab;
131
+ --basecolors-shape-walk-default: #8d8e9c;
132
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
133
+ --basecolors-shape-airportlinkbus-default: #800664;
134
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
135
+ --basecolors-shape-airportlinkrail-default: #800664;
136
+ --basecolors-stroke-contrast: #aeb7e2;
137
+ --basecolors-stroke-default: #181c56;
138
+ --basecolors-stroke-disabled: #949699;
139
+ --basecolors-stroke-focus-contrast: #aeb7e2;
140
+ --basecolors-stroke-focus-standard: #181c56;
141
+ --basecolors-stroke-highlight: #ff5959;
142
+ --basecolors-stroke-light: #ffffff;
143
+ --basecolors-stroke-subdued: #8284ab;
144
+ --basecolors-stroke-subduedalt: #e3e6e8;
145
+ --basecolors-text-accent: #181c56;
146
+ --basecolors-text-disabled: #6e6f73;
147
+ --basecolors-text-disabledalt: #b6b8ba;
148
+ --basecolors-text-highlight: #ff5959;
149
+ --basecolors-text-light: #ffffff;
150
+ --basecolors-text-subdued: #626493;
151
+ --basecolors-text-subduedalt: #d9dae8;
63
152
  }
64
153
 
65
- .eds-floating-button--small {
66
- border-radius: 1rem;
67
- height: 2rem;
68
- padding: 0 0.5rem;
69
- min-width: 2rem;
70
- min-height: 2rem;
71
- flex: 0 1 auto;
154
+ [data-color-mode=dark] {
155
+ --basecolors-frame-contrast: #212233;
156
+ --basecolors-frame-contrastalt: #141527;
157
+ --basecolors-frame-default: #08091c;
158
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
159
+ --basecolors-frame-elevatedalt: #464755;
160
+ --basecolors-frame-subdued: #2d2e3e;
161
+ --basecolors-frame-tint: #141527;
162
+ --basecolors-shape-accent: #e5e5e9;
163
+ --basecolors-shape-bicycle-contrast: #4db295;
164
+ --basecolors-shape-bicycle-default: #4db295;
165
+ --basecolors-shape-bus-contrast: #ef7398;
166
+ --basecolors-shape-bus-default: #ef7398;
167
+ --basecolors-shape-cableway-contrast: #b898e5;
168
+ --basecolors-shape-cableway-default: #b898e5;
169
+ --basecolors-shape-disabled: #b6b8ba;
170
+ --basecolors-shape-disabledalt: #b3b4bd;
171
+ --basecolors-shape-ferry-contrast: #8ccfe2;
172
+ --basecolors-shape-ferry-default: #8ccfe2;
173
+ --basecolors-shape-funicular-contrast: #b898e5;
174
+ --basecolors-shape-funicular-default: #b898e5;
175
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
176
+ --basecolors-shape-helicopter-default: #f2b8e5;
177
+ --basecolors-shape-highlight: #ff9494;
178
+ --basecolors-shape-light: #e5e5e9;
179
+ --basecolors-shape-mask: #2d2e3e;
180
+ --basecolors-shape-maskalt: #393a49;
181
+ --basecolors-shape-metro-contrast: #dd973c;
182
+ --basecolors-shape-metro-default: #dd973c;
183
+ --basecolors-shape-mobility-contrast: #4db295;
184
+ --basecolors-shape-mobility-default: #4db295;
185
+ --basecolors-shape-plane-contrast: #f2b8e5;
186
+ --basecolors-shape-plane-default: #f2b8e5;
187
+ --basecolors-shape-subdued: #b3b4bd;
188
+ --basecolors-shape-subduedalt: #b3b4bd;
189
+ --basecolors-shape-taxi-contrast: #ffe082;
190
+ --basecolors-shape-taxi-default: #ffe082;
191
+ --basecolors-shape-train-contrast: #60a2d7;
192
+ --basecolors-shape-train-default: #60a2d7;
193
+ --basecolors-shape-tram-contrast: #b898e5;
194
+ --basecolors-shape-tram-default: #b898e5;
195
+ --basecolors-shape-walk-contrast: #8d8e9c;
196
+ --basecolors-shape-walk-default: #8d8e9c;
197
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
198
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
199
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
200
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
201
+ --basecolors-stroke-contrast: #aeb7e2;
202
+ --basecolors-stroke-default: #b3b4bd;
203
+ --basecolors-stroke-disabled: #e3e6e8;
204
+ --basecolors-stroke-focus-contrast: #aeb7e2;
205
+ --basecolors-stroke-focus-standard: #aeb7e2;
206
+ --basecolors-stroke-highlight: #ff9494;
207
+ --basecolors-stroke-light: #b3b4bd;
208
+ --basecolors-stroke-subdued: #81828f;
209
+ --basecolors-stroke-subduedalt: #949699;
210
+ --basecolors-text-accent: #e5e5e9;
211
+ --basecolors-text-disabled: #b6b8ba;
212
+ --basecolors-text-disabledalt: #b6b8ba;
213
+ --basecolors-text-highlight: #ff9494;
214
+ --basecolors-text-light: #e5e5e9;
215
+ --basecolors-text-subdued: #b3b4bd;
216
+ --basecolors-text-subduedalt: #b3b4bd;
72
217
  }
73
218
 
74
- .eds-floating-button--small.eds-floating-button--extended {
75
- padding: 0 0.6875rem;
219
+ :root {
220
+ --eds-tooltip: 1;
76
221
  }
77
-
78
- .eds-floating-button--extended > * {
79
- margin: 0 0.5em;
80
- }
81
-
82
- .eds-floating-button--extended > *:first-child {
83
- margin-left: 0;
84
- }
85
-
86
- .eds-floating-button--extended > *:last-child {
87
- margin-right: 0;
88
- }
89
-
222
+ /* DO NOT CHANGE!*/
223
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
90
224
  /* DO NOT CHANGE!*/
91
225
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
92
226
  a.eds-button {
@@ -335,592 +469,100 @@ a.eds-button--size-large {
335
469
 
336
470
  /* DO NOT CHANGE!*/
337
471
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
338
- .eds-square-button {
472
+ .eds-button-group .eds-button {
473
+ margin-right: 0.75rem;
474
+ margin-bottom: 0.75rem;
475
+ }
476
+
477
+ .eds-button-group .eds-button:only-child {
478
+ margin: 0;
479
+ }
480
+
481
+ /* DO NOT CHANGE!*/
482
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
+ .eds-floating-button {
339
484
  align-items: center;
340
485
  -webkit-appearance: none;
341
486
  -moz-appearance: none;
342
487
  appearance: none;
343
- background: transparent;
488
+ background: var(--components-button-floating-standard-default);
344
489
  border: 0;
345
- border-radius: 0.25rem;
490
+ border-radius: 1.5rem;
491
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
492
+ color: var(--components-button-floating-standard-text);
346
493
  cursor: pointer;
347
- font-size: 1rem;
348
- display: inline-flex;
494
+ display: flex;
349
495
  font-family: inherit;
496
+ font-size: 0.875rem;
350
497
  font-weight: 500;
351
498
  justify-content: center;
352
- padding: 0;
353
- text-decoration: none;
354
- }
355
-
356
- .eds-square-button:focus {
357
- outline: none;
358
- }
359
-
360
- .eds-square-button:focus .eds-square-button__button {
361
- outline: 2px solid #181c56;
362
- outline-color: var(--basecolors-stroke-focus-standard);
363
- outline-offset: 0.125rem;
364
- }
365
-
366
- .eds-contrast .eds-square-button:focus .eds-square-button__button {
367
- outline-color: var(--basecolors-stroke-focus-contrast);
368
- }
369
-
370
- .eds-square-button[disabled]:not(.eds-square-button--loading) {
371
- cursor: not-allowed;
372
- }
373
-
374
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
375
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
376
- border-color: var(--basecolors-stroke-disabled);
377
- border-style: dashed;
378
- background-color: transparent;
379
- color: var(--basecolors-text-disabled);
380
- }
381
-
382
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
383
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
384
- color: var(--basecolors-text-disabled);
385
- }
386
-
387
- .eds-square-button.eds-square-button--loading {
388
- opacity: 1;
389
- }
390
-
391
- .eds-square-button__button {
392
- align-items: center;
393
- background-color: var(--button-background);
394
- border: 0.125rem solid var(--border-color);
395
- border-radius: 0.25rem;
396
- color: var(--icon-color);
397
- display: inline-flex;
398
- height: 3rem;
399
- justify-content: center;
400
- line-height: 1.5rem;
401
- padding: 0;
402
- text-align: center;
403
- text-decoration: none;
404
- vertical-align: top;
499
+ min-height: 3rem;
500
+ margin: 0;
501
+ min-width: 3rem;
502
+ padding: 0 1rem;
405
503
  position: relative;
406
- width: 3rem;
407
- }
408
-
409
- .eds-square-button__label {
410
- color: var(--label-color);
411
- }
412
-
413
- .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
414
- margin-left: 1rem;
415
- }
416
-
417
- .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
418
- background: var(--icon-color);
419
- }
420
-
421
- .eds-square-button--secondary {
422
- --button-background: var(--components-button-squaresecondary-standard-default);
423
- --border-color: var(--components-button-squaresecondary-standard-border);
424
- --icon-color: var(--components-button-squaresecondary-standard-icon);
425
- --label-color: var(--components-button-squaresecondary-standard-text);
426
- }
427
-
428
- .eds-square-button--secondary:hover {
429
- --button-background: var(--components-button-squaresecondary-standard-hover);
430
- }
431
-
432
- .eds-square-button--secondary:active {
433
- --button-background: var(--components-button-squaresecondary-standard-active);
434
- --border-color: var(--components-button-squaresecondary-standard-border-active);
435
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
436
- }
437
-
438
- .eds-contrast .eds-square-button--secondary {
439
- --button-background: var(--components-button-squaresecondary-contrast-default);
440
- --border-color: var(--components-button-squaresecondary-contrast-border);
441
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
442
- --label-color: var(--components-button-squaresecondary-contrast-label);
443
- }
444
-
445
- .eds-contrast .eds-square-button--secondary:hover {
446
- --button-background: var(--components-button-squaresecondary-contrast-hover);
447
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
448
- }
449
-
450
- .eds-contrast .eds-square-button--secondary:active {
451
- --button-background: var(--components-button-squaresecondary-contrast-active);
452
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
453
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
454
- }
455
-
456
- .eds-square-button--success {
457
- --button-background: var(--components-button-squaresuccess-standard-default);
458
- --border-color: var(--components-button-squaresuccess-standard-border);
459
- --icon-color: var(--components-button-squaresuccess-standard-icon);
460
- --label-color: var(--components-button-squaresuccess-standard-label);
461
- }
462
-
463
- .eds-square-button--success:hover {
464
- --button-background: var(--components-button-squaresuccess-standard-hover);
465
- }
466
-
467
- .eds-square-button--success:active {
468
- --button-background: var(--components-button-squaresuccess-standard-active);
469
- }
470
-
471
- .eds-contrast .eds-square-button--success {
472
- --button-background: var(--components-button-squaresuccess-contrast-default);
473
- --border-color: var(--components-button-squaresuccess-contrast-border);
474
- --icon-color: var(--components-button-squaresuccess-contrast-icon);
475
- --label-color: var(--components-button-squaresuccess-contrast-label);
476
- }
477
-
478
- .eds-contrast .eds-square-button--success:hover {
479
- --button-background: var(--components-button-squaresuccess-contrast-hover);
504
+ z-index: 10;
480
505
  }
481
506
 
482
- .eds-contrast .eds-square-button--success:active {
483
- --button-background: var(--components-button-squaresuccess-contrast-active);
507
+ .eds-floating-button--extended {
508
+ padding: 0 0.9375rem;
484
509
  }
485
510
 
486
- .eds-square-button--tertiary {
487
- --button-background: var(--components-button-squaresecondary-standard-default);
488
- --border-color: var(--components-button-squaresecondary-standard-border);
489
- --icon-color: var(--components-button-squaresecondary-standard-icon);
490
- --label-color: var(--components-button-squaresecondary-standard-text);
491
- font-size: 0.875rem;
511
+ .eds-floating-button:hover {
512
+ background-color: var(--components-button-floating-standard-hover);
492
513
  }
493
514
 
494
- .eds-square-button--tertiary:hover {
495
- --button-background: var(--components-button-squaresecondary-standard-hover);
515
+ .eds-floating-button:active {
516
+ background-color: var(--components-button-floating-standard-active);
496
517
  }
497
518
 
498
- .eds-square-button--tertiary:active {
499
- --button-background: var(--components-button-squaresecondary-standard-active);
500
- --border-color: var(--components-button-squaresecondary-standard-border-active);
501
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
519
+ .eds-floating-button:focus {
520
+ outline: 2px solid #181c56;
521
+ outline-color: var(--basecolors-stroke-focus-standard);
522
+ outline-offset: 0.125rem;
502
523
  }
503
524
 
504
- .eds-contrast .eds-square-button--tertiary {
505
- --button-background: var(--components-button-squaresecondary-contrast-default);
506
- --border-color: var(--components-button-squaresecondary-contrast-border);
507
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
508
- --label-color: var(--components-button-squaresecondary-contrast-label);
525
+ .eds-contrast .eds-floating-button:focus {
526
+ outline-color: var(--basecolors-stroke-focus-contrast);
509
527
  }
510
528
 
511
- .eds-contrast .eds-square-button--tertiary:hover {
512
- --button-background: var(--components-button-squaresecondary-contrast-hover);
513
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
529
+ .eds-contrast .eds-floating-button {
530
+ background: var(--components-button-floating-contrast-default);
531
+ color: var(--components-button-floating-contrast-text);
532
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
514
533
  }
515
534
 
516
- .eds-contrast .eds-square-button--tertiary:active {
517
- --button-background: var(--components-button-squaresecondary-contrast-active);
518
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
519
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
535
+ .eds-contrast .eds-floating-button:hover {
536
+ background-color: var(--components-button-floating-contrast-hover);
520
537
  }
521
538
 
522
- .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
523
- .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
524
- margin-left: 0.75rem;
539
+ .eds-contrast .eds-floating-button:active {
540
+ background-color: var(--components-button-floating-contrast-active);
525
541
  }
526
542
 
527
- .eds-square-button--tertiary .eds-square-button__button {
543
+ .eds-floating-button--small {
544
+ border-radius: 1rem;
528
545
  height: 2rem;
529
- width: 2rem;
530
- border-width: 0.0625rem;
531
- }
532
-
533
- /* DO NOT CHANGE!*/
534
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
535
- .eds-button-group .eds-button {
536
- margin-right: 0.75rem;
537
- margin-bottom: 0.75rem;
538
- }
539
-
540
- .eds-button-group .eds-button:only-child {
541
- margin: 0;
542
- }
543
-
544
- /* DO NOT CHANGE!*/
545
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
546
- /* DO NOT CHANGE!*/
547
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
548
- /* DO NOT CHANGE!*/
549
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
550
- [data-color-mode=light],
551
- :root {
552
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
553
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
554
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
555
- --components-button-disabled-standard-fill: #cfd2d4;
556
- --components-button-disabled-standard-icon-disabled: #515254;
557
- --components-button-disabled-standard-text-disabled: #515254;
558
- --components-button-floating-contrast-active: #d9dae8;
559
- --components-button-floating-contrast-default: #ffffff;
560
- --components-button-floating-contrast-hover: #f6f6f9;
561
- --components-button-floating-contrast-icon: #181c56;
562
- --components-button-floating-contrast-text: #181c56;
563
- --components-button-floating-standard-active: #11143c;
564
- --components-button-floating-standard-default: #181c56;
565
- --components-button-floating-standard-hover: #393d79;
566
- --components-button-floating-standard-icon: #ffffff;
567
- --components-button-floating-standard-text: #ffffff;
568
- --components-button-iconbutton-contrast-active: #8794d4;
569
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
570
- --components-button-iconbutton-contrast-hover: #626493;
571
- --components-button-iconbutton-contrast-icon: #ffffff;
572
- --components-button-iconbutton-contrast-icon-active: #181c56;
573
- --components-button-iconbutton-contrast-text: #ffffff;
574
- --components-button-iconbutton-contrast-text-active: #181c56;
575
- --components-button-iconbutton-standard-active: #aeb7e2;
576
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
577
- --components-button-iconbutton-standard-hover: #d9ddf2;
578
- --components-button-iconbutton-standard-icon: #181c56;
579
- --components-button-iconbutton-standard-icon-active: #181c56;
580
- --components-button-iconbutton-standard-text: #181c56;
581
- --components-button-iconbutton-standard-text-active: #181c56;
582
- --components-button-negative-contrast-active: #ff9494;
583
- --components-button-negative-contrast-border: #ff9494;
584
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
585
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
586
- --components-button-negative-contrast-icon: #ffffff;
587
- --components-button-negative-contrast-icon-active: #181c56;
588
- --components-button-negative-contrast-text: #ffffff;
589
- --components-button-negative-contrast-text-active: #181c56;
590
- --components-button-negative-standard-active: #d31b1b;
591
- --components-button-negative-standard-border: #d31b1b;
592
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
593
- --components-button-negative-standard-hover: #ffcece;
594
- --components-button-negative-standard-icon: #d31b1b;
595
- --components-button-negative-standard-icon-active: #ffffff;
596
- --components-button-negative-standard-text: #d31b1b;
597
- --components-button-negative-standard-text-active: #ffffff;
598
- --components-button-primary-contrast-active: #8794d4;
599
- --components-button-primary-contrast-default: #aeb7e2;
600
- --components-button-primary-contrast-hover: #c7cdeb;
601
- --components-button-primary-contrast-icon: #181c56;
602
- --components-button-primary-contrast-text: #181c56;
603
- --components-button-primary-standard-active: #11143c;
604
- --components-button-primary-standard-default: #181c56;
605
- --components-button-primary-standard-hover: #393d79;
606
- --components-button-primary-standard-icon: #ffffff;
607
- --components-button-primary-standard-text: #ffffff;
608
- --components-button-secondary-contrast-active: #8794d4;
609
- --components-button-secondary-contrast-border: #8284ab;
610
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
611
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
612
- --components-button-secondary-contrast-hover: #626493;
613
- --components-button-secondary-contrast-icon: #ffffff;
614
- --components-button-secondary-contrast-icon-active: #181c56;
615
- --components-button-secondary-contrast-text: #ffffff;
616
- --components-button-secondary-contrast-text-active: #181c56;
617
- --components-button-secondary-standard-active: #aeb7e2;
618
- --components-button-secondary-standard-border: #8284ab;
619
- --components-button-secondary-standard-border-active: #181c56;
620
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
621
- --components-button-secondary-standard-hover: #d9ddf2;
622
- --components-button-secondary-standard-icon: #181c56;
623
- --components-button-secondary-standard-icon-active: #181c56;
624
- --components-button-secondary-standard-text: #181c56;
625
- --components-button-secondary-standard-text-active: #181c56;
626
- --components-button-squaresecondary-contrast-active: #8794d4;
627
- --components-button-squaresecondary-contrast-border: #8284ab;
628
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
629
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
630
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
631
- --components-button-squaresecondary-contrast-icon-active: #181c56;
632
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
633
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
634
- --components-button-squaresecondary-contrast-label: #ffffff;
635
- --components-button-squaresecondary-standard-active: #aeb7e2;
636
- --components-button-squaresecondary-standard-border: #8284ab;
637
- --components-button-squaresecondary-standard-border-active: #181c56;
638
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
639
- --components-button-squaresecondary-standard-hover: #d9ddf2;
640
- --components-button-squaresecondary-standard-icon: #181c56;
641
- --components-button-squaresecondary-standard-icon-active: #181c56;
642
- --components-button-squaresecondary-standard-text: #181c56;
643
- --components-button-squaresuccess-contrast-active: #37ab83;
644
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
645
- --components-button-squaresuccess-contrast-default: #5ac39a;
646
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
647
- --components-button-squaresuccess-contrast-icon: #181c56;
648
- --components-button-squaresuccess-contrast-label: #ffffff;
649
- --components-button-squaresuccess-standard-active: #37ab83;
650
- --components-button-squaresuccess-standard-border: #181c56;
651
- --components-button-squaresuccess-standard-default: #5ac39a;
652
- --components-button-squaresuccess-standard-hover: #9cd9c2;
653
- --components-button-squaresuccess-standard-icon: #181c56;
654
- --components-button-squaresuccess-standard-label: #181c56;
655
- --components-button-success-contrast-active: #37ab83;
656
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
657
- --components-button-success-contrast-default: #5ac39a;
658
- --components-button-success-contrast-hover: #9cd9c2;
659
- --components-button-success-contrast-icon: #181c56;
660
- --components-button-success-contrast-text: #181c56;
661
- --components-button-success-standard-active: #37ab83;
662
- --components-button-success-standard-border: #181c56;
663
- --components-button-success-standard-default: #5ac39a;
664
- --components-button-success-standard-hover: #9cd9c2;
665
- --components-button-success-standard-icon: #181c56;
666
- --components-button-success-standard-text: #181c56;
546
+ padding: 0 0.5rem;
547
+ min-width: 2rem;
548
+ min-height: 2rem;
549
+ flex: 0 1 auto;
667
550
  }
668
551
 
669
- [data-color-mode=dark] {
670
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
671
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
672
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
673
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
674
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
675
- --components-button-disabled-standard-text-disabled: #b6b8ba;
676
- --components-button-floating-contrast-active: #8794d4;
677
- --components-button-floating-contrast-default: #aeb7e2;
678
- --components-button-floating-contrast-hover: #c7cdeb;
679
- --components-button-floating-contrast-icon: #08091c;
680
- --components-button-floating-contrast-text: #08091c;
681
- --components-button-floating-standard-active: #8794d4;
682
- --components-button-floating-standard-default: #aeb7e2;
683
- --components-button-floating-standard-hover: #c7cdeb;
684
- --components-button-floating-standard-icon: #08091c;
685
- --components-button-floating-standard-text: #08091c;
686
- --components-button-iconbutton-contrast-active: #8794d4;
687
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
688
- --components-button-iconbutton-contrast-hover: #626493;
689
- --components-button-iconbutton-contrast-icon: #e5e5e9;
690
- --components-button-iconbutton-contrast-icon-active: #08091c;
691
- --components-button-iconbutton-contrast-text: #e5e5e9;
692
- --components-button-iconbutton-contrast-text-active: #08091c;
693
- --components-button-iconbutton-standard-active: #8794d4;
694
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
695
- --components-button-iconbutton-standard-hover: #626493;
696
- --components-button-iconbutton-standard-icon: #e5e5e9;
697
- --components-button-iconbutton-standard-icon-active: #08091c;
698
- --components-button-iconbutton-standard-text: #e5e5e9;
699
- --components-button-iconbutton-standard-text-active: #08091c;
700
- --components-button-negative-contrast-active: #ff9494;
701
- --components-button-negative-contrast-border: #ff9494;
702
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
703
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
704
- --components-button-negative-contrast-icon: #e5e5e9;
705
- --components-button-negative-contrast-icon-active: #08091c;
706
- --components-button-negative-contrast-text: #e5e5e9;
707
- --components-button-negative-contrast-text-active: #08091c;
708
- --components-button-negative-standard-active: #ff9494;
709
- --components-button-negative-standard-border: #ff9494;
710
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
711
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
712
- --components-button-negative-standard-icon: #e5e5e9;
713
- --components-button-negative-standard-icon-active: #08091c;
714
- --components-button-negative-standard-text: #e5e5e9;
715
- --components-button-negative-standard-text-active: #08091c;
716
- --components-button-primary-contrast-active: #8794d4;
717
- --components-button-primary-contrast-default: #aeb7e2;
718
- --components-button-primary-contrast-hover: #c7cdeb;
719
- --components-button-primary-contrast-icon: #08091c;
720
- --components-button-primary-contrast-text: #08091c;
721
- --components-button-primary-standard-active: #8794d4;
722
- --components-button-primary-standard-default: #aeb7e2;
723
- --components-button-primary-standard-hover: #c7cdeb;
724
- --components-button-primary-standard-icon: #08091c;
725
- --components-button-primary-standard-text: #08091c;
726
- --components-button-secondary-contrast-active: #8794d4;
727
- --components-button-secondary-contrast-border: #8284ab;
728
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
729
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
730
- --components-button-secondary-contrast-hover: #626493;
731
- --components-button-secondary-contrast-icon: #e5e5e9;
732
- --components-button-secondary-contrast-icon-active: #08091c;
733
- --components-button-secondary-contrast-text: #e5e5e9;
734
- --components-button-secondary-contrast-text-active: #08091c;
735
- --components-button-secondary-standard-active: #8794d4;
736
- --components-button-secondary-standard-border: #8284ab;
737
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
738
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
739
- --components-button-secondary-standard-hover: #626493;
740
- --components-button-secondary-standard-icon: #e5e5e9;
741
- --components-button-secondary-standard-icon-active: #08091c;
742
- --components-button-secondary-standard-text: #e5e5e9;
743
- --components-button-secondary-standard-text-active: #08091c;
744
- --components-button-squaresecondary-contrast-active: #8794d4;
745
- --components-button-squaresecondary-contrast-border: #8284ab;
746
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
747
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
748
- --components-button-squaresecondary-contrast-hover: #626493;
749
- --components-button-squaresecondary-contrast-icon-active: #08091c;
750
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
751
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
752
- --components-button-squaresecondary-contrast-label: #e5e5e9;
753
- --components-button-squaresecondary-standard-active: #8794d4;
754
- --components-button-squaresecondary-standard-border: #8284ab;
755
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
756
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
757
- --components-button-squaresecondary-standard-hover: #626493;
758
- --components-button-squaresecondary-standard-icon: #e5e5e9;
759
- --components-button-squaresecondary-standard-icon-active: #08091c;
760
- --components-button-squaresecondary-standard-text: #e5e5e9;
761
- --components-button-squaresuccess-contrast-active: #5ac39a;
762
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
763
- --components-button-squaresuccess-contrast-default: #5ac39a;
764
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
765
- --components-button-squaresuccess-contrast-icon: #08091c;
766
- --components-button-squaresuccess-contrast-label: #e5e5e9;
767
- --components-button-squaresuccess-standard-active: #37ab83;
768
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
769
- --components-button-squaresuccess-standard-default: #5ac39a;
770
- --components-button-squaresuccess-standard-hover: #9cd9c2;
771
- --components-button-squaresuccess-standard-icon: #08091c;
772
- --components-button-squaresuccess-standard-label: #e5e5e9;
773
- --components-button-success-contrast-active: #37ab83;
774
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
775
- --components-button-success-contrast-default: #5ac39a;
776
- --components-button-success-contrast-hover: #9cd9c2;
777
- --components-button-success-contrast-icon: #08091c;
778
- --components-button-success-contrast-text: #08091c;
779
- --components-button-success-standard-active: #37ab83;
780
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
781
- --components-button-success-standard-default: #5ac39a;
782
- --components-button-success-standard-hover: #9cd9c2;
783
- --components-button-success-standard-icon: #08091c;
784
- --components-button-success-standard-text: #08091c;
552
+ .eds-floating-button--small.eds-floating-button--extended {
553
+ padding: 0 0.6875rem;
785
554
  }
786
555
 
787
- /* DO NOT CHANGE!*/
788
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
789
- /* DO NOT CHANGE!*/
790
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
791
- [data-color-mode=light],
792
- :root {
793
- --basecolors-frame-contrast: #181c56;
794
- --basecolors-frame-contrastalt: #393d79;
795
- --basecolors-frame-default: #ffffff;
796
- --basecolors-frame-elevated: #ffffff;
797
- --basecolors-frame-elevatedalt: #f6f6f9;
798
- --basecolors-frame-subdued: #d9dae8;
799
- --basecolors-frame-tint: #f6f6f9;
800
- --basecolors-shape-accent: #181c56;
801
- --basecolors-shape-bicycle-contrast: #00db9b;
802
- --basecolors-shape-bicycle-default: #388f76;
803
- --basecolors-shape-bus-contrast: #ff6392;
804
- --basecolors-shape-bus-default: #c5044e;
805
- --basecolors-shape-cableway-contrast: #b482fb;
806
- --basecolors-shape-cableway-default: #78469a;
807
- --basecolors-shape-disabled: #6e6f73;
808
- --basecolors-shape-disabledalt: #b6b8ba;
809
- --basecolors-shape-ferry-contrast: #6fdfff;
810
- --basecolors-shape-ferry-default: #0c6693;
811
- --basecolors-shape-funicular-contrast: #b482fb;
812
- --basecolors-shape-funicular-default: #78469a;
813
- --basecolors-shape-helicopter-contrast: #fbafea;
814
- --basecolors-shape-helicopter-default: #800664;
815
- --basecolors-shape-highlight: #ff5959;
816
- --basecolors-shape-light: #ffffff;
817
- --basecolors-shape-mask: #ffffff;
818
- --basecolors-shape-maskalt: #ffffff;
819
- --basecolors-shape-metro-contrast: #f08901;
820
- --basecolors-shape-metro-default: #bf5826;
821
- --basecolors-shape-mobility-contrast: #00db9b;
822
- --basecolors-shape-mobility-default: #388f76;
823
- --basecolors-shape-plane-contrast: #fbafea;
824
- --basecolors-shape-plane-default: #800664;
825
- --basecolors-shape-subdued: #626493;
826
- --basecolors-shape-subduedalt: #d9dae8;
827
- --basecolors-shape-taxi-contrast: #ffe082;
828
- --basecolors-shape-taxi-default: #3d3e40;
829
- --basecolors-shape-train-contrast: #42a5f5;
830
- --basecolors-shape-train-default: #00367f;
831
- --basecolors-shape-tram-contrast: #b482fb;
832
- --basecolors-shape-tram-default: #78469a;
833
- --basecolors-shape-walk-contrast: #8284ab;
834
- --basecolors-shape-walk-default: #8d8e9c;
835
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
836
- --basecolors-shape-airportlinkbus-default: #800664;
837
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
838
- --basecolors-shape-airportlinkrail-default: #800664;
839
- --basecolors-stroke-contrast: #aeb7e2;
840
- --basecolors-stroke-default: #181c56;
841
- --basecolors-stroke-disabled: #949699;
842
- --basecolors-stroke-focus-contrast: #aeb7e2;
843
- --basecolors-stroke-focus-standard: #181c56;
844
- --basecolors-stroke-highlight: #ff5959;
845
- --basecolors-stroke-light: #ffffff;
846
- --basecolors-stroke-subdued: #8284ab;
847
- --basecolors-stroke-subduedalt: #e3e6e8;
848
- --basecolors-text-accent: #181c56;
849
- --basecolors-text-disabled: #6e6f73;
850
- --basecolors-text-disabledalt: #b6b8ba;
851
- --basecolors-text-highlight: #ff5959;
852
- --basecolors-text-light: #ffffff;
853
- --basecolors-text-subdued: #626493;
854
- --basecolors-text-subduedalt: #d9dae8;
556
+ .eds-floating-button--extended > * {
557
+ margin: 0 0.5em;
855
558
  }
856
559
 
857
- [data-color-mode=dark] {
858
- --basecolors-frame-contrast: #212233;
859
- --basecolors-frame-contrastalt: #141527;
860
- --basecolors-frame-default: #08091c;
861
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
862
- --basecolors-frame-elevatedalt: #464755;
863
- --basecolors-frame-subdued: #2d2e3e;
864
- --basecolors-frame-tint: #141527;
865
- --basecolors-shape-accent: #e5e5e9;
866
- --basecolors-shape-bicycle-contrast: #4db295;
867
- --basecolors-shape-bicycle-default: #4db295;
868
- --basecolors-shape-bus-contrast: #ef7398;
869
- --basecolors-shape-bus-default: #ef7398;
870
- --basecolors-shape-cableway-contrast: #b898e5;
871
- --basecolors-shape-cableway-default: #b898e5;
872
- --basecolors-shape-disabled: #b6b8ba;
873
- --basecolors-shape-disabledalt: #b3b4bd;
874
- --basecolors-shape-ferry-contrast: #8ccfe2;
875
- --basecolors-shape-ferry-default: #8ccfe2;
876
- --basecolors-shape-funicular-contrast: #b898e5;
877
- --basecolors-shape-funicular-default: #b898e5;
878
- --basecolors-shape-helicopter-contrast: #f2b8e5;
879
- --basecolors-shape-helicopter-default: #f2b8e5;
880
- --basecolors-shape-highlight: #ff9494;
881
- --basecolors-shape-light: #e5e5e9;
882
- --basecolors-shape-mask: #2d2e3e;
883
- --basecolors-shape-maskalt: #393a49;
884
- --basecolors-shape-metro-contrast: #dd973c;
885
- --basecolors-shape-metro-default: #dd973c;
886
- --basecolors-shape-mobility-contrast: #4db295;
887
- --basecolors-shape-mobility-default: #4db295;
888
- --basecolors-shape-plane-contrast: #f2b8e5;
889
- --basecolors-shape-plane-default: #f2b8e5;
890
- --basecolors-shape-subdued: #b3b4bd;
891
- --basecolors-shape-subduedalt: #b3b4bd;
892
- --basecolors-shape-taxi-contrast: #ffe082;
893
- --basecolors-shape-taxi-default: #ffe082;
894
- --basecolors-shape-train-contrast: #60a2d7;
895
- --basecolors-shape-train-default: #60a2d7;
896
- --basecolors-shape-tram-contrast: #b898e5;
897
- --basecolors-shape-tram-default: #b898e5;
898
- --basecolors-shape-walk-contrast: #8d8e9c;
899
- --basecolors-shape-walk-default: #8d8e9c;
900
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
901
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
902
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
903
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
904
- --basecolors-stroke-contrast: #aeb7e2;
905
- --basecolors-stroke-default: #b3b4bd;
906
- --basecolors-stroke-disabled: #e3e6e8;
907
- --basecolors-stroke-focus-contrast: #aeb7e2;
908
- --basecolors-stroke-focus-standard: #aeb7e2;
909
- --basecolors-stroke-highlight: #ff9494;
910
- --basecolors-stroke-light: #b3b4bd;
911
- --basecolors-stroke-subdued: #81828f;
912
- --basecolors-stroke-subduedalt: #949699;
913
- --basecolors-text-accent: #e5e5e9;
914
- --basecolors-text-disabled: #b6b8ba;
915
- --basecolors-text-disabledalt: #b6b8ba;
916
- --basecolors-text-highlight: #ff9494;
917
- --basecolors-text-light: #e5e5e9;
918
- --basecolors-text-subdued: #b3b4bd;
919
- --basecolors-text-subduedalt: #b3b4bd;
560
+ .eds-floating-button--extended > *:first-child {
561
+ margin-left: 0;
920
562
  }
921
563
 
922
- :root {
923
- --eds-button: 1;
564
+ .eds-floating-button--extended > *:last-child {
565
+ margin-right: 0;
924
566
  }
925
567
 
926
568
  /* DO NOT CHANGE!*/
@@ -991,120 +633,203 @@ a.eds-button--size-large {
991
633
  width: fit-content;
992
634
  }
993
635
 
994
- .eds-tooltip-wrapper {
995
- display: inline-block;
996
- position: relative;
636
+ /* DO NOT CHANGE!*/
637
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
638
+ .eds-square-button {
639
+ align-items: center;
640
+ -webkit-appearance: none;
641
+ -moz-appearance: none;
642
+ appearance: none;
643
+ background: transparent;
644
+ border: 0;
645
+ border-radius: 0.25rem;
646
+ cursor: pointer;
647
+ font-size: 1rem;
648
+ display: inline-flex;
649
+ font-family: inherit;
650
+ font-weight: 500;
651
+ justify-content: center;
652
+ padding: 0;
653
+ text-decoration: none;
997
654
  }
998
655
 
999
- .eds-tooltip {
1000
- position: absolute;
1001
- display: flex;
656
+ .eds-square-button:focus {
657
+ outline: none;
658
+ }
659
+
660
+ .eds-square-button:focus .eds-square-button__button {
661
+ outline: 2px solid #181c56;
662
+ outline-color: var(--basecolors-stroke-focus-standard);
663
+ outline-offset: 0.125rem;
664
+ }
665
+
666
+ .eds-contrast .eds-square-button:focus .eds-square-button__button {
667
+ outline-color: var(--basecolors-stroke-focus-contrast);
668
+ }
669
+
670
+ .eds-square-button[disabled]:not(.eds-square-button--loading) {
671
+ cursor: not-allowed;
672
+ }
673
+
674
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
675
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
676
+ border-color: var(--basecolors-stroke-disabled);
677
+ border-style: dashed;
678
+ background-color: transparent;
679
+ color: var(--basecolors-text-disabled);
680
+ }
681
+
682
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
683
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
684
+ color: var(--basecolors-text-disabled);
685
+ }
686
+
687
+ .eds-square-button.eds-square-button--loading {
688
+ opacity: 1;
689
+ }
690
+
691
+ .eds-square-button__button {
1002
692
  align-items: center;
1003
- justify-content: space-between;
1004
- z-index: 20;
1005
- padding: 0.3125rem 0.625rem;
1006
- min-height: 1rem;
1007
- min-width: 2rem;
1008
- max-width: 32rem;
1009
- font-size: 0.875rem;
693
+ background-color: var(--button-background);
694
+ border: 0.125rem solid var(--border-color);
1010
695
  border-radius: 0.25rem;
1011
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1012
- background: var(--components-tooltip-tooltip-standard-fill);
1013
- color: var(--components-tooltip-tooltip-standard-text);
696
+ color: var(--icon-color);
697
+ display: inline-flex;
698
+ height: 3rem;
699
+ justify-content: center;
700
+ line-height: 1.5rem;
701
+ padding: 0;
702
+ text-align: center;
703
+ text-decoration: none;
704
+ vertical-align: top;
705
+ position: relative;
706
+ width: 3rem;
1014
707
  }
1015
- .eds-contrast .eds-tooltip {
1016
- color: var(--components-tooltip-tooltip-contrast-text);
1017
- background: var(--components-tooltip-tooltip-contrast-fill);
1018
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
708
+
709
+ .eds-square-button__label {
710
+ color: var(--label-color);
1019
711
  }
1020
- .eds-tooltip__arrow, .eds-tooltip__arrow--bottom, .eds-tooltip__arrow--top, .eds-tooltip__arrow--left, .eds-tooltip__arrow--right {
1021
- position: absolute;
1022
- background: inherit;
1023
- width: 0.5rem;
1024
- height: 0.5rem;
1025
- transform: rotate(45deg);
712
+
713
+ .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
714
+ margin-left: 1rem;
1026
715
  }
1027
- .eds-tooltip__arrow--right {
1028
- left: -0.2285533906rem;
716
+
717
+ .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
718
+ background: var(--icon-color);
719
+ }
720
+
721
+ .eds-square-button--secondary {
722
+ --button-background: var(--components-button-squaresecondary-standard-default);
723
+ --border-color: var(--components-button-squaresecondary-standard-border);
724
+ --icon-color: var(--components-button-squaresecondary-standard-icon);
725
+ --label-color: var(--components-button-squaresecondary-standard-text);
726
+ }
727
+
728
+ .eds-square-button--secondary:hover {
729
+ --button-background: var(--components-button-squaresecondary-standard-hover);
1029
730
  }
1030
- .eds-tooltip__arrow--left {
1031
- right: -0.2285533906rem;
731
+
732
+ .eds-square-button--secondary:active {
733
+ --button-background: var(--components-button-squaresecondary-standard-active);
734
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
735
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1032
736
  }
1033
- .eds-tooltip__arrow--top {
1034
- bottom: -0.2285533906rem;
737
+
738
+ .eds-contrast .eds-square-button--secondary {
739
+ --button-background: var(--components-button-squaresecondary-contrast-default);
740
+ --border-color: var(--components-button-squaresecondary-contrast-border);
741
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
742
+ --label-color: var(--components-button-squaresecondary-contrast-label);
1035
743
  }
1036
- .eds-tooltip__arrow--bottom {
1037
- top: -0.2285533906rem;
744
+
745
+ .eds-contrast .eds-square-button--secondary:hover {
746
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
747
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1038
748
  }
1039
- .eds-tooltip--error, .eds-tooltip--negative {
1040
- background: var(--components-tooltip-tooltip-standard-fill-negative);
1041
- border: solid var(--components-tooltip-tooltip-standard-fill-negative);
1042
- color: var(--components-tooltip-tooltip-standard-text-negative);
749
+
750
+ .eds-contrast .eds-square-button--secondary:active {
751
+ --button-background: var(--components-button-squaresecondary-contrast-active);
752
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
753
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1043
754
  }
1044
- .eds-contrast .eds-tooltip--error, .eds-contrast .eds-tooltip--negative {
1045
- background: var(--components-tooltip-tooltip-contrast-fill-negative);
1046
- color: var(--components-tooltip-tooltip-contrast-text-negative);
1047
- border: solid var(--components-tooltip-tooltip-contrast-fill-negative);
1048
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
755
+
756
+ .eds-square-button--success {
757
+ --button-background: var(--components-button-squaresuccess-standard-default);
758
+ --border-color: var(--components-button-squaresuccess-standard-border);
759
+ --icon-color: var(--components-button-squaresuccess-standard-icon);
760
+ --label-color: var(--components-button-squaresuccess-standard-label);
1049
761
  }
1050
- .eds-tooltip__close-button {
1051
- padding: 0.2rem;
1052
- height: 1.5rem;
1053
- width: 1.5rem;
1054
- margin: -0.3125rem;
1055
- margin-left: 0.25rem;
1056
- color: inherit;
762
+
763
+ .eds-square-button--success:hover {
764
+ --button-background: var(--components-button-squaresuccess-standard-hover);
1057
765
  }
1058
- .eds-tooltip__close-button:hover {
1059
- background-color: var(--components-button-iconbutton-contrast-hover);
766
+
767
+ .eds-square-button--success:active {
768
+ --button-background: var(--components-button-squaresuccess-standard-active);
1060
769
  }
1061
- .eds-tooltip__close-button:focus {
1062
- outline: 2px solid #181c56;
1063
- outline-color: var(--basecolors-stroke-focus-contrast);
1064
- outline-offset: 0.125rem;
770
+
771
+ .eds-contrast .eds-square-button--success {
772
+ --button-background: var(--components-button-squaresuccess-contrast-default);
773
+ --border-color: var(--components-button-squaresuccess-contrast-border);
774
+ --icon-color: var(--components-button-squaresuccess-contrast-icon);
775
+ --label-color: var(--components-button-squaresuccess-contrast-label);
1065
776
  }
1066
- .eds-tooltip__close-button:active {
1067
- background-color: var(--components-button-iconbutton-contrast-active);
777
+
778
+ .eds-contrast .eds-square-button--success:hover {
779
+ --button-background: var(--components-button-squaresuccess-contrast-hover);
1068
780
  }
1069
- .eds-contrast .eds-tooltip__close-button {
1070
- color: inherit;
781
+
782
+ .eds-contrast .eds-square-button--success:active {
783
+ --button-background: var(--components-button-squaresuccess-contrast-active);
1071
784
  }
1072
- .eds-contrast .eds-tooltip__close-button:hover {
1073
- background-color: var(--components-button-iconbutton-standard-hover);
785
+
786
+ .eds-square-button--tertiary {
787
+ --button-background: var(--components-button-squaresecondary-standard-default);
788
+ --border-color: var(--components-button-squaresecondary-standard-border);
789
+ --icon-color: var(--components-button-squaresecondary-standard-icon);
790
+ --label-color: var(--components-button-squaresecondary-standard-text);
791
+ font-size: 0.875rem;
1074
792
  }
1075
- .eds-contrast .eds-tooltip__close-button:focus {
1076
- outline: 2px solid #181c56;
1077
- outline-color: var(--basecolors-stroke-focus-standard);
1078
- outline-offset: 0.125rem;
793
+
794
+ .eds-square-button--tertiary:hover {
795
+ --button-background: var(--components-button-squaresecondary-standard-hover);
1079
796
  }
1080
- .eds-contrast .eds-tooltip__close-button:active {
1081
- background-color: var(--components-button-iconbutton-standard-active);
797
+
798
+ .eds-square-button--tertiary:active {
799
+ --button-background: var(--components-button-squaresecondary-standard-active);
800
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
801
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1082
802
  }
1083
- /* DO NOT CHANGE!*/
1084
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1085
- .eds-popover {
1086
- background: var(--components-tooltip-popover-standard-fill);
1087
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1088
- border-radius: 0.25rem;
1089
- border: 0.0625rem solid var(--components-tooltip-popover-standard-border);
1090
- font-family: inherit;
1091
- z-index: 20;
803
+
804
+ .eds-contrast .eds-square-button--tertiary {
805
+ --button-background: var(--components-button-squaresecondary-contrast-default);
806
+ --border-color: var(--components-button-squaresecondary-contrast-border);
807
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
808
+ --label-color: var(--components-button-squaresecondary-contrast-label);
1092
809
  }
1093
- .eds-contrast .eds-popover {
1094
- background: var(--components-tooltip-popover-contrast-fill);
1095
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
810
+
811
+ .eds-contrast .eds-square-button--tertiary:hover {
812
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
813
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1096
814
  }
1097
- .eds-popover--hidden {
1098
- display: none;
815
+
816
+ .eds-contrast .eds-square-button--tertiary:active {
817
+ --button-background: var(--components-button-squaresecondary-contrast-active);
818
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
819
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1099
820
  }
1100
- .eds-popover:focus {
1101
- outline: 2px solid #181c56;
1102
- outline-color: var(--basecolors-stroke-focus-standard);
1103
- outline-offset: 0.125rem;
821
+
822
+ .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
823
+ .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
824
+ margin-left: 0.75rem;
1104
825
  }
1105
- .eds-contrast .eds-popover:focus {
1106
- outline-color: var(--basecolors-stroke-focus-contrast);
826
+
827
+ .eds-square-button--tertiary .eds-square-button__button {
828
+ height: 2rem;
829
+ width: 2rem;
830
+ border-width: 0.0625rem;
1107
831
  }
832
+
1108
833
  /* DO NOT CHANGE!*/
1109
834
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1110
835
  /* DO NOT CHANGE!*/
@@ -1113,57 +838,239 @@ a.eds-button--size-large {
1113
838
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1114
839
  [data-color-mode=light],
1115
840
  :root {
1116
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1117
- --components-tooltip-popover-contrast-fill: #393d79;
1118
- --components-tooltip-popover-contrast-icon: #ffffff;
1119
- --components-tooltip-popover-contrast-text: #ffffff;
1120
- --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
1121
- --components-tooltip-popover-standard-fill: #f6f6f9;
1122
- --components-tooltip-popover-standard-icon: #181c56;
1123
- --components-tooltip-popover-standard-text: #181c56;
1124
- --components-tooltip-tooltip-contrast-fill: #ffffff;
1125
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1126
- --components-tooltip-tooltip-contrast-icon: #181c56;
1127
- --components-tooltip-tooltip-contrast-icon-negative: #181c56;
1128
- --components-tooltip-tooltip-contrast-text: #181c56;
1129
- --components-tooltip-tooltip-contrast-text-negative: #181c56;
1130
- --components-tooltip-tooltip-contrast-triangle: #ffffff;
1131
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1132
- --components-tooltip-tooltip-standard-fill: #181c56;
1133
- --components-tooltip-tooltip-standard-fill-negative: #ffcece;
1134
- --components-tooltip-tooltip-standard-icon: #ffffff;
1135
- --components-tooltip-tooltip-standard-icon-negative: #181c56;
1136
- --components-tooltip-tooltip-standard-text: #ffffff;
1137
- --components-tooltip-tooltip-standard-text-negative: #181c56;
1138
- --components-tooltip-tooltip-standard-triangle: #181c56;
1139
- --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
841
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
842
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
843
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
844
+ --components-button-disabled-standard-fill: #cfd2d4;
845
+ --components-button-disabled-standard-icon-disabled: #515254;
846
+ --components-button-disabled-standard-text-disabled: #515254;
847
+ --components-button-floating-contrast-active: #d9dae8;
848
+ --components-button-floating-contrast-default: #ffffff;
849
+ --components-button-floating-contrast-hover: #f6f6f9;
850
+ --components-button-floating-contrast-icon: #181c56;
851
+ --components-button-floating-contrast-text: #181c56;
852
+ --components-button-floating-standard-active: #11143c;
853
+ --components-button-floating-standard-default: #181c56;
854
+ --components-button-floating-standard-hover: #393d79;
855
+ --components-button-floating-standard-icon: #ffffff;
856
+ --components-button-floating-standard-text: #ffffff;
857
+ --components-button-iconbutton-contrast-active: #8794d4;
858
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
859
+ --components-button-iconbutton-contrast-hover: #626493;
860
+ --components-button-iconbutton-contrast-icon: #ffffff;
861
+ --components-button-iconbutton-contrast-icon-active: #181c56;
862
+ --components-button-iconbutton-contrast-text: #ffffff;
863
+ --components-button-iconbutton-contrast-text-active: #181c56;
864
+ --components-button-iconbutton-standard-active: #aeb7e2;
865
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
866
+ --components-button-iconbutton-standard-hover: #d9ddf2;
867
+ --components-button-iconbutton-standard-icon: #181c56;
868
+ --components-button-iconbutton-standard-icon-active: #181c56;
869
+ --components-button-iconbutton-standard-text: #181c56;
870
+ --components-button-iconbutton-standard-text-active: #181c56;
871
+ --components-button-negative-contrast-active: #ff9494;
872
+ --components-button-negative-contrast-border: #ff9494;
873
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
874
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
875
+ --components-button-negative-contrast-icon: #ffffff;
876
+ --components-button-negative-contrast-icon-active: #181c56;
877
+ --components-button-negative-contrast-text: #ffffff;
878
+ --components-button-negative-contrast-text-active: #181c56;
879
+ --components-button-negative-standard-active: #d31b1b;
880
+ --components-button-negative-standard-border: #d31b1b;
881
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
882
+ --components-button-negative-standard-hover: #ffcece;
883
+ --components-button-negative-standard-icon: #d31b1b;
884
+ --components-button-negative-standard-icon-active: #ffffff;
885
+ --components-button-negative-standard-text: #d31b1b;
886
+ --components-button-negative-standard-text-active: #ffffff;
887
+ --components-button-primary-contrast-active: #8794d4;
888
+ --components-button-primary-contrast-default: #aeb7e2;
889
+ --components-button-primary-contrast-hover: #c7cdeb;
890
+ --components-button-primary-contrast-icon: #181c56;
891
+ --components-button-primary-contrast-text: #181c56;
892
+ --components-button-primary-standard-active: #11143c;
893
+ --components-button-primary-standard-default: #181c56;
894
+ --components-button-primary-standard-hover: #393d79;
895
+ --components-button-primary-standard-icon: #ffffff;
896
+ --components-button-primary-standard-text: #ffffff;
897
+ --components-button-secondary-contrast-active: #8794d4;
898
+ --components-button-secondary-contrast-border: #8284ab;
899
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
900
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
901
+ --components-button-secondary-contrast-hover: #626493;
902
+ --components-button-secondary-contrast-icon: #ffffff;
903
+ --components-button-secondary-contrast-icon-active: #181c56;
904
+ --components-button-secondary-contrast-text: #ffffff;
905
+ --components-button-secondary-contrast-text-active: #181c56;
906
+ --components-button-secondary-standard-active: #aeb7e2;
907
+ --components-button-secondary-standard-border: #8284ab;
908
+ --components-button-secondary-standard-border-active: #181c56;
909
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
910
+ --components-button-secondary-standard-hover: #d9ddf2;
911
+ --components-button-secondary-standard-icon: #181c56;
912
+ --components-button-secondary-standard-icon-active: #181c56;
913
+ --components-button-secondary-standard-text: #181c56;
914
+ --components-button-secondary-standard-text-active: #181c56;
915
+ --components-button-squaresecondary-contrast-active: #8794d4;
916
+ --components-button-squaresecondary-contrast-border: #8284ab;
917
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
918
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
919
+ --components-button-squaresecondary-contrast-hover: #d9ddf2;
920
+ --components-button-squaresecondary-contrast-icon-active: #181c56;
921
+ --components-button-squaresecondary-contrast-icon-default: #ffffff;
922
+ --components-button-squaresecondary-contrast-icon-hover: #181c56;
923
+ --components-button-squaresecondary-contrast-label: #ffffff;
924
+ --components-button-squaresecondary-standard-active: #aeb7e2;
925
+ --components-button-squaresecondary-standard-border: #8284ab;
926
+ --components-button-squaresecondary-standard-border-active: #181c56;
927
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
928
+ --components-button-squaresecondary-standard-hover: #d9ddf2;
929
+ --components-button-squaresecondary-standard-icon: #181c56;
930
+ --components-button-squaresecondary-standard-icon-active: #181c56;
931
+ --components-button-squaresecondary-standard-text: #181c56;
932
+ --components-button-squaresuccess-contrast-active: #37ab83;
933
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
934
+ --components-button-squaresuccess-contrast-default: #5ac39a;
935
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
936
+ --components-button-squaresuccess-contrast-icon: #181c56;
937
+ --components-button-squaresuccess-contrast-label: #ffffff;
938
+ --components-button-squaresuccess-standard-active: #37ab83;
939
+ --components-button-squaresuccess-standard-border: #181c56;
940
+ --components-button-squaresuccess-standard-default: #5ac39a;
941
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
942
+ --components-button-squaresuccess-standard-icon: #181c56;
943
+ --components-button-squaresuccess-standard-label: #181c56;
944
+ --components-button-success-contrast-active: #37ab83;
945
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
946
+ --components-button-success-contrast-default: #5ac39a;
947
+ --components-button-success-contrast-hover: #9cd9c2;
948
+ --components-button-success-contrast-icon: #181c56;
949
+ --components-button-success-contrast-text: #181c56;
950
+ --components-button-success-standard-active: #37ab83;
951
+ --components-button-success-standard-border: #181c56;
952
+ --components-button-success-standard-default: #5ac39a;
953
+ --components-button-success-standard-hover: #9cd9c2;
954
+ --components-button-success-standard-icon: #181c56;
955
+ --components-button-success-standard-text: #181c56;
1140
956
  }
1141
957
 
1142
958
  [data-color-mode=dark] {
1143
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1144
- --components-tooltip-popover-contrast-fill: #393a49;
1145
- --components-tooltip-popover-contrast-icon: #e5e5e9;
1146
- --components-tooltip-popover-contrast-text: #e5e5e9;
1147
- --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
1148
- --components-tooltip-popover-standard-fill: #393a49;
1149
- --components-tooltip-popover-standard-icon: #e5e5e9;
1150
- --components-tooltip-popover-standard-text: #e5e5e9;
1151
- --components-tooltip-tooltip-contrast-fill: #393a49;
1152
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1153
- --components-tooltip-tooltip-contrast-icon: #e5e5e9;
1154
- --components-tooltip-tooltip-contrast-icon-negative: #08091c;
1155
- --components-tooltip-tooltip-contrast-text: #e5e5e9;
1156
- --components-tooltip-tooltip-contrast-text-negative: #08091c;
1157
- --components-tooltip-tooltip-contrast-triangle: #393a49;
1158
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1159
- --components-tooltip-tooltip-standard-fill: #393a49;
1160
- --components-tooltip-tooltip-standard-fill-negative: #ff9494;
1161
- --components-tooltip-tooltip-standard-icon: #e5e5e9;
1162
- --components-tooltip-tooltip-standard-icon-negative: #08091c;
1163
- --components-tooltip-tooltip-standard-text: #e5e5e9;
1164
- --components-tooltip-tooltip-standard-text-negative: #08091c;
1165
- --components-tooltip-tooltip-standard-triangle: #393a49;
1166
- --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
959
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
960
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
961
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
962
+ --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
963
+ --components-button-disabled-standard-icon-disabled: #b6b8ba;
964
+ --components-button-disabled-standard-text-disabled: #b6b8ba;
965
+ --components-button-floating-contrast-active: #8794d4;
966
+ --components-button-floating-contrast-default: #aeb7e2;
967
+ --components-button-floating-contrast-hover: #c7cdeb;
968
+ --components-button-floating-contrast-icon: #08091c;
969
+ --components-button-floating-contrast-text: #08091c;
970
+ --components-button-floating-standard-active: #8794d4;
971
+ --components-button-floating-standard-default: #aeb7e2;
972
+ --components-button-floating-standard-hover: #c7cdeb;
973
+ --components-button-floating-standard-icon: #08091c;
974
+ --components-button-floating-standard-text: #08091c;
975
+ --components-button-iconbutton-contrast-active: #8794d4;
976
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
977
+ --components-button-iconbutton-contrast-hover: #626493;
978
+ --components-button-iconbutton-contrast-icon: #e5e5e9;
979
+ --components-button-iconbutton-contrast-icon-active: #08091c;
980
+ --components-button-iconbutton-contrast-text: #e5e5e9;
981
+ --components-button-iconbutton-contrast-text-active: #08091c;
982
+ --components-button-iconbutton-standard-active: #8794d4;
983
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
984
+ --components-button-iconbutton-standard-hover: #626493;
985
+ --components-button-iconbutton-standard-icon: #e5e5e9;
986
+ --components-button-iconbutton-standard-icon-active: #08091c;
987
+ --components-button-iconbutton-standard-text: #e5e5e9;
988
+ --components-button-iconbutton-standard-text-active: #08091c;
989
+ --components-button-negative-contrast-active: #ff9494;
990
+ --components-button-negative-contrast-border: #ff9494;
991
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
992
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
993
+ --components-button-negative-contrast-icon: #e5e5e9;
994
+ --components-button-negative-contrast-icon-active: #08091c;
995
+ --components-button-negative-contrast-text: #e5e5e9;
996
+ --components-button-negative-contrast-text-active: #08091c;
997
+ --components-button-negative-standard-active: #ff9494;
998
+ --components-button-negative-standard-border: #ff9494;
999
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
1000
+ --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
1001
+ --components-button-negative-standard-icon: #e5e5e9;
1002
+ --components-button-negative-standard-icon-active: #08091c;
1003
+ --components-button-negative-standard-text: #e5e5e9;
1004
+ --components-button-negative-standard-text-active: #08091c;
1005
+ --components-button-primary-contrast-active: #8794d4;
1006
+ --components-button-primary-contrast-default: #aeb7e2;
1007
+ --components-button-primary-contrast-hover: #c7cdeb;
1008
+ --components-button-primary-contrast-icon: #08091c;
1009
+ --components-button-primary-contrast-text: #08091c;
1010
+ --components-button-primary-standard-active: #8794d4;
1011
+ --components-button-primary-standard-default: #aeb7e2;
1012
+ --components-button-primary-standard-hover: #c7cdeb;
1013
+ --components-button-primary-standard-icon: #08091c;
1014
+ --components-button-primary-standard-text: #08091c;
1015
+ --components-button-secondary-contrast-active: #8794d4;
1016
+ --components-button-secondary-contrast-border: #8284ab;
1017
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
1018
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
1019
+ --components-button-secondary-contrast-hover: #626493;
1020
+ --components-button-secondary-contrast-icon: #e5e5e9;
1021
+ --components-button-secondary-contrast-icon-active: #08091c;
1022
+ --components-button-secondary-contrast-text: #e5e5e9;
1023
+ --components-button-secondary-contrast-text-active: #08091c;
1024
+ --components-button-secondary-standard-active: #8794d4;
1025
+ --components-button-secondary-standard-border: #8284ab;
1026
+ --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
1027
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
1028
+ --components-button-secondary-standard-hover: #626493;
1029
+ --components-button-secondary-standard-icon: #e5e5e9;
1030
+ --components-button-secondary-standard-icon-active: #08091c;
1031
+ --components-button-secondary-standard-text: #e5e5e9;
1032
+ --components-button-secondary-standard-text-active: #08091c;
1033
+ --components-button-squaresecondary-contrast-active: #8794d4;
1034
+ --components-button-squaresecondary-contrast-border: #8284ab;
1035
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
1036
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
1037
+ --components-button-squaresecondary-contrast-hover: #626493;
1038
+ --components-button-squaresecondary-contrast-icon-active: #08091c;
1039
+ --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
1040
+ --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
1041
+ --components-button-squaresecondary-contrast-label: #e5e5e9;
1042
+ --components-button-squaresecondary-standard-active: #8794d4;
1043
+ --components-button-squaresecondary-standard-border: #8284ab;
1044
+ --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
1045
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
1046
+ --components-button-squaresecondary-standard-hover: #626493;
1047
+ --components-button-squaresecondary-standard-icon: #e5e5e9;
1048
+ --components-button-squaresecondary-standard-icon-active: #08091c;
1049
+ --components-button-squaresecondary-standard-text: #e5e5e9;
1050
+ --components-button-squaresuccess-contrast-active: #5ac39a;
1051
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
1052
+ --components-button-squaresuccess-contrast-default: #5ac39a;
1053
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
1054
+ --components-button-squaresuccess-contrast-icon: #08091c;
1055
+ --components-button-squaresuccess-contrast-label: #e5e5e9;
1056
+ --components-button-squaresuccess-standard-active: #37ab83;
1057
+ --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
1058
+ --components-button-squaresuccess-standard-default: #5ac39a;
1059
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
1060
+ --components-button-squaresuccess-standard-icon: #08091c;
1061
+ --components-button-squaresuccess-standard-label: #e5e5e9;
1062
+ --components-button-success-contrast-active: #37ab83;
1063
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
1064
+ --components-button-success-contrast-default: #5ac39a;
1065
+ --components-button-success-contrast-hover: #9cd9c2;
1066
+ --components-button-success-contrast-icon: #08091c;
1067
+ --components-button-success-contrast-text: #08091c;
1068
+ --components-button-success-standard-active: #37ab83;
1069
+ --components-button-success-standard-border: rgba(255, 255, 255, 0);
1070
+ --components-button-success-standard-default: #5ac39a;
1071
+ --components-button-success-standard-hover: #9cd9c2;
1072
+ --components-button-success-standard-icon: #08091c;
1073
+ --components-button-success-standard-text: #08091c;
1167
1074
  }
1168
1075
 
1169
1076
  /* DO NOT CHANGE!*/
@@ -1302,5 +1209,95 @@ a.eds-button--size-large {
1302
1209
  }
1303
1210
 
1304
1211
  :root {
1305
- --eds-tooltip: 1;
1212
+ --eds-button: 1;
1213
+ }
1214
+
1215
+ .eds-tooltip-wrapper {
1216
+ display: inline-block;
1217
+ position: relative;
1218
+ }
1219
+
1220
+ .eds-tooltip {
1221
+ position: absolute;
1222
+ display: flex;
1223
+ align-items: center;
1224
+ justify-content: space-between;
1225
+ z-index: 20;
1226
+ padding: 0.3125rem 0.625rem;
1227
+ min-height: 1rem;
1228
+ min-width: 2rem;
1229
+ max-width: 32rem;
1230
+ font-size: 0.875rem;
1231
+ border-radius: 0.25rem;
1232
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1233
+ background: var(--components-tooltip-tooltip-standard-fill);
1234
+ color: var(--components-tooltip-tooltip-standard-text);
1235
+ }
1236
+ .eds-contrast .eds-tooltip {
1237
+ color: var(--components-tooltip-tooltip-contrast-text);
1238
+ background: var(--components-tooltip-tooltip-contrast-fill);
1239
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1240
+ }
1241
+ .eds-tooltip__arrow, .eds-tooltip__arrow--bottom, .eds-tooltip__arrow--top, .eds-tooltip__arrow--left, .eds-tooltip__arrow--right {
1242
+ position: absolute;
1243
+ background: inherit;
1244
+ width: 0.5rem;
1245
+ height: 0.5rem;
1246
+ transform: rotate(45deg);
1247
+ }
1248
+ .eds-tooltip__arrow--right {
1249
+ left: -0.2285533906rem;
1250
+ }
1251
+ .eds-tooltip__arrow--left {
1252
+ right: -0.2285533906rem;
1253
+ }
1254
+ .eds-tooltip__arrow--top {
1255
+ bottom: -0.2285533906rem;
1256
+ }
1257
+ .eds-tooltip__arrow--bottom {
1258
+ top: -0.2285533906rem;
1259
+ }
1260
+ .eds-tooltip--error, .eds-tooltip--negative {
1261
+ background: var(--components-tooltip-tooltip-standard-fill-negative);
1262
+ border: solid var(--components-tooltip-tooltip-standard-fill-negative);
1263
+ color: var(--components-tooltip-tooltip-standard-text-negative);
1264
+ }
1265
+ .eds-contrast .eds-tooltip--error, .eds-contrast .eds-tooltip--negative {
1266
+ background: var(--components-tooltip-tooltip-contrast-fill-negative);
1267
+ color: var(--components-tooltip-tooltip-contrast-text-negative);
1268
+ border: solid var(--components-tooltip-tooltip-contrast-fill-negative);
1269
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1270
+ }
1271
+ .eds-tooltip__close-button {
1272
+ padding: 0.2rem;
1273
+ height: 1.5rem;
1274
+ width: 1.5rem;
1275
+ margin: -0.3125rem;
1276
+ margin-left: 0.25rem;
1277
+ color: inherit;
1278
+ }
1279
+ .eds-tooltip__close-button:hover {
1280
+ background-color: var(--components-button-iconbutton-contrast-hover);
1281
+ }
1282
+ .eds-tooltip__close-button:focus {
1283
+ outline: 2px solid #181c56;
1284
+ outline-color: var(--basecolors-stroke-focus-contrast);
1285
+ outline-offset: 0.125rem;
1286
+ }
1287
+ .eds-tooltip__close-button:active {
1288
+ background-color: var(--components-button-iconbutton-contrast-active);
1289
+ }
1290
+ .eds-contrast .eds-tooltip__close-button {
1291
+ color: inherit;
1292
+ }
1293
+ .eds-contrast .eds-tooltip__close-button:hover {
1294
+ background-color: var(--components-button-iconbutton-standard-hover);
1295
+ }
1296
+ .eds-contrast .eds-tooltip__close-button:focus {
1297
+ outline: 2px solid #181c56;
1298
+ outline-color: var(--basecolors-stroke-focus-standard);
1299
+ outline-offset: 0.125rem;
1300
+ }
1301
+ .eds-contrast .eds-tooltip__close-button:active {
1302
+ background-color: var(--components-button-iconbutton-standard-active);
1306
1303
  }