@entur/tooltip 5.2.13-beta.9 → 5.2.14

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