@entur/button 3.3.13-beta.9 → 3.3.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 (25) hide show
  1. package/dist/Button.d.ts +1 -2
  2. package/dist/ButtonGroup.d.ts +1 -2
  3. package/dist/FloatingButton.d.ts +1 -2
  4. package/dist/IconButton.d.ts +2 -3
  5. package/dist/NegativeButton.d.ts +2 -2
  6. package/dist/PrimaryButton.d.ts +2 -2
  7. package/dist/SecondaryButton.d.ts +2 -2
  8. package/dist/SecondarySquareButton.d.ts +2 -2
  9. package/dist/SquareButton.d.ts +1 -2
  10. package/dist/SuccessButton.d.ts +2 -2
  11. package/dist/SuccessSquareButton.d.ts +2 -2
  12. package/dist/TertiaryButton.d.ts +2 -2
  13. package/dist/TertiarySquareButton.d.ts +2 -2
  14. package/dist/button.cjs.js +268 -0
  15. package/dist/button.cjs.js.map +1 -0
  16. package/dist/button.esm.js +245 -269
  17. package/dist/button.esm.js.map +1 -1
  18. package/dist/index.d.ts +0 -1
  19. package/dist/styles.css +657 -675
  20. package/package.json +23 -13
  21. package/dist/button.cjs.development.js +0 -309
  22. package/dist/button.cjs.development.js.map +0 -1
  23. package/dist/button.cjs.production.min.js +0 -2
  24. package/dist/button.cjs.production.min.js.map +0 -1
  25. package/dist/index.js +0 -8
package/dist/styles.css CHANGED
@@ -1,161 +1,454 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-button-group .eds-button {
4
- margin-right: 0.75rem;
5
- margin-bottom: 0.75rem;
6
- }
7
- .eds-button-group .eds-button:only-child {
8
- margin: 0;
9
- }
10
3
  /* DO NOT CHANGE!*/
11
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
12
- .eds-floating-button {
13
- align-items: center;
14
- -webkit-appearance: none;
15
- -moz-appearance: none;
16
- appearance: none;
17
- background: var(--components-button-floating-standard-default);
18
- border: 0;
19
- border-radius: 1.5rem;
20
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
21
- color: var(--components-button-floating-standard-text);
22
- cursor: pointer;
23
- display: flex;
24
- font-family: inherit;
25
- font-size: 0.875rem;
26
- font-weight: 500;
27
- justify-content: center;
28
- min-height: 3rem;
29
- margin: 0;
30
- min-width: 3rem;
31
- padding: 0 1rem;
32
- position: relative;
33
- z-index: 10;
34
- }
35
- .eds-floating-button--extended {
36
- padding: 0 0.9375rem;
37
- }
38
- .eds-floating-button:hover {
39
- background-color: var(--components-button-floating-standard-hover);
40
- }
41
- .eds-floating-button:active {
42
- background-color: var(--components-button-floating-standard-active);
43
- }
44
- .eds-floating-button:focus-visible {
45
- outline: 2px solid #181c56;
46
- outline-color: var(--basecolors-stroke-focus-standard);
47
- outline-offset: 0.125rem;
48
- }
49
- .eds-contrast .eds-floating-button:focus-visible {
50
- outline-color: var(--basecolors-stroke-focus-contrast);
51
- }
52
- .eds-contrast .eds-floating-button {
53
- background: var(--components-button-floating-contrast-default);
54
- color: var(--components-button-floating-contrast-text);
55
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
56
- }
57
- .eds-contrast .eds-floating-button:hover {
58
- background-color: var(--components-button-floating-contrast-hover);
59
- }
60
- .eds-contrast .eds-floating-button:active {
61
- background-color: var(--components-button-floating-contrast-active);
62
- }
63
- .eds-floating-button--small {
64
- border-radius: 1rem;
65
- height: 2rem;
66
- padding: 0 0.5rem;
67
- min-width: 2rem;
68
- min-height: 2rem;
69
- flex: 0 1 auto;
70
- }
71
- .eds-floating-button--small.eds-floating-button--extended {
72
- padding: 0 0.6875rem;
73
- }
74
-
75
- .eds-floating-button--extended > * {
76
- margin: 0 0.5em;
77
- }
78
- .eds-floating-button--extended > *:first-child {
79
- margin-left: 0;
80
- }
81
- .eds-floating-button--extended > *:last-child {
82
- margin-right: 0;
83
- }
84
5
  /* DO NOT CHANGE!*/
85
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
86
- a.eds-button {
87
- display: flex;
88
- align-items: center;
89
- justify-content: center;
90
- }
91
- a.eds-button .eds-icon {
92
- position: static;
93
- position: initial;
7
+ [data-color-mode=light],
8
+ :root {
9
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
10
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
11
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
12
+ --components-button-disabled-standard-fill: #cfd2d4;
13
+ --components-button-disabled-standard-icon-disabled: #515254;
14
+ --components-button-disabled-standard-text-disabled: #515254;
15
+ --components-button-floating-contrast-active: #d9dae8;
16
+ --components-button-floating-contrast-default: #ffffff;
17
+ --components-button-floating-contrast-hover: #f6f6f9;
18
+ --components-button-floating-contrast-icon: #181c56;
19
+ --components-button-floating-contrast-text: #181c56;
20
+ --components-button-floating-standard-active: #11143c;
21
+ --components-button-floating-standard-default: #181c56;
22
+ --components-button-floating-standard-hover: #393d79;
23
+ --components-button-floating-standard-icon: #ffffff;
24
+ --components-button-floating-standard-text: #ffffff;
25
+ --components-button-iconbutton-contrast-active: #8794d4;
26
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
27
+ --components-button-iconbutton-contrast-hover: #626493;
28
+ --components-button-iconbutton-contrast-icon: #ffffff;
29
+ --components-button-iconbutton-contrast-icon-active: #181c56;
30
+ --components-button-iconbutton-contrast-text: #ffffff;
31
+ --components-button-iconbutton-contrast-text-active: #181c56;
32
+ --components-button-iconbutton-standard-active: #aeb7e2;
33
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
34
+ --components-button-iconbutton-standard-hover: #d9ddf2;
35
+ --components-button-iconbutton-standard-icon: #181c56;
36
+ --components-button-iconbutton-standard-icon-active: #181c56;
37
+ --components-button-iconbutton-standard-text: #181c56;
38
+ --components-button-iconbutton-standard-text-active: #181c56;
39
+ --components-button-negative-contrast-active: #ff9494;
40
+ --components-button-negative-contrast-border: #ff9494;
41
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
42
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
43
+ --components-button-negative-contrast-icon: #ffffff;
44
+ --components-button-negative-contrast-icon-active: #181c56;
45
+ --components-button-negative-contrast-text: #ffffff;
46
+ --components-button-negative-contrast-text-active: #181c56;
47
+ --components-button-negative-standard-active: #d31b1b;
48
+ --components-button-negative-standard-border: #d31b1b;
49
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
50
+ --components-button-negative-standard-hover: #ffcece;
51
+ --components-button-negative-standard-icon: #d31b1b;
52
+ --components-button-negative-standard-icon-active: #ffffff;
53
+ --components-button-negative-standard-text: #d31b1b;
54
+ --components-button-negative-standard-text-active: #ffffff;
55
+ --components-button-primary-contrast-active: #8794d4;
56
+ --components-button-primary-contrast-default: #aeb7e2;
57
+ --components-button-primary-contrast-hover: #c7cdeb;
58
+ --components-button-primary-contrast-icon: #181c56;
59
+ --components-button-primary-contrast-text: #181c56;
60
+ --components-button-primary-standard-active: #11143c;
61
+ --components-button-primary-standard-default: #181c56;
62
+ --components-button-primary-standard-hover: #393d79;
63
+ --components-button-primary-standard-icon: #ffffff;
64
+ --components-button-primary-standard-text: #ffffff;
65
+ --components-button-secondary-contrast-active: #8794d4;
66
+ --components-button-secondary-contrast-border: #8284ab;
67
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
68
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
69
+ --components-button-secondary-contrast-hover: #626493;
70
+ --components-button-secondary-contrast-icon: #ffffff;
71
+ --components-button-secondary-contrast-icon-active: #181c56;
72
+ --components-button-secondary-contrast-text: #ffffff;
73
+ --components-button-secondary-contrast-text-active: #181c56;
74
+ --components-button-secondary-standard-active: #aeb7e2;
75
+ --components-button-secondary-standard-border: #8284ab;
76
+ --components-button-secondary-standard-border-active: #181c56;
77
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
78
+ --components-button-secondary-standard-hover: #d9ddf2;
79
+ --components-button-secondary-standard-icon: #181c56;
80
+ --components-button-secondary-standard-icon-active: #181c56;
81
+ --components-button-secondary-standard-text: #181c56;
82
+ --components-button-secondary-standard-text-active: #181c56;
83
+ --components-button-squaresecondary-contrast-active: #8794d4;
84
+ --components-button-squaresecondary-contrast-border: #8284ab;
85
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
86
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
87
+ --components-button-squaresecondary-contrast-hover: #d9ddf2;
88
+ --components-button-squaresecondary-contrast-icon-active: #181c56;
89
+ --components-button-squaresecondary-contrast-icon-default: #ffffff;
90
+ --components-button-squaresecondary-contrast-icon-hover: #181c56;
91
+ --components-button-squaresecondary-contrast-label: #ffffff;
92
+ --components-button-squaresecondary-standard-active: #aeb7e2;
93
+ --components-button-squaresecondary-standard-border: #8284ab;
94
+ --components-button-squaresecondary-standard-border-active: #181c56;
95
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
96
+ --components-button-squaresecondary-standard-hover: #d9ddf2;
97
+ --components-button-squaresecondary-standard-icon: #181c56;
98
+ --components-button-squaresecondary-standard-icon-active: #181c56;
99
+ --components-button-squaresecondary-standard-text: #181c56;
100
+ --components-button-squaresuccess-contrast-active: #37ab83;
101
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
102
+ --components-button-squaresuccess-contrast-default: #5ac39a;
103
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
104
+ --components-button-squaresuccess-contrast-icon: #181c56;
105
+ --components-button-squaresuccess-contrast-label: #ffffff;
106
+ --components-button-squaresuccess-standard-active: #37ab83;
107
+ --components-button-squaresuccess-standard-border: #181c56;
108
+ --components-button-squaresuccess-standard-default: #5ac39a;
109
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
110
+ --components-button-squaresuccess-standard-icon: #181c56;
111
+ --components-button-squaresuccess-standard-label: #181c56;
112
+ --components-button-success-contrast-active: #37ab83;
113
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
114
+ --components-button-success-contrast-default: #5ac39a;
115
+ --components-button-success-contrast-hover: #9cd9c2;
116
+ --components-button-success-contrast-icon: #181c56;
117
+ --components-button-success-contrast-text: #181c56;
118
+ --components-button-success-standard-active: #37ab83;
119
+ --components-button-success-standard-border: #181c56;
120
+ --components-button-success-standard-default: #5ac39a;
121
+ --components-button-success-standard-hover: #9cd9c2;
122
+ --components-button-success-standard-icon: #181c56;
123
+ --components-button-success-standard-text: #181c56;
94
124
  }
95
125
 
96
- .eds-button {
97
- min-width: 9.5rem;
98
- width: -moz-max-content;
99
- width: max-content;
100
- min-height: 3rem;
101
- height: -moz-fit-content;
102
- height: fit-content;
103
- border-radius: 0.25rem;
104
- font-size: inherit;
105
- cursor: pointer;
106
- display: inline-block;
107
- -webkit-appearance: none;
108
- -moz-appearance: none;
109
- appearance: none;
110
- -webkit-text-decoration: none;
111
- text-decoration: none;
112
- padding: 0 1rem;
113
- font-size: 1rem;
114
- line-height: 1.5rem;
115
- font-weight: 500;
116
- text-align: center;
117
- font-family: inherit;
118
- position: relative;
119
- vertical-align: top;
120
- background-color: var(--eds-button-background);
121
- border: 0.125rem solid var(--eds-button-border);
122
- color: var(--eds-button-text);
123
- }
124
- .eds-button:hover {
125
- background-color: var(--eds-button-background-hover);
126
- }
127
- .eds-button:active {
128
- background-color: var(--eds-button-background-active);
129
- border-color: var(--eds-button-border-active);
130
- color: var(--eds-button-text-active);
131
- }
132
- .eds-button:focus-visible {
133
- outline: 2px solid #181c56;
134
- outline-color: var(--basecolors-stroke-focus-standard);
135
- outline-offset: 0.125rem;
136
- }
137
- .eds-contrast .eds-button:focus-visible {
138
- outline-color: var(--basecolors-stroke-focus-contrast);
139
- }
140
- .eds-button > .eds-button__loading-dots {
141
- width: 100%;
142
- }
143
- .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
144
- background: var(--eds-button-text);
145
- }
146
- .eds-button .eds-icon {
147
- position: relative;
148
- top: 0.2em;
149
- }
150
- .eds-button--leading-icon .eds-icon {
151
- margin-right: 0.75rem;
152
- }
153
- .eds-button--trailing-icon .eds-icon {
154
- margin-left: 0.75rem;
155
- }
156
- .eds-button--size-small {
157
- min-width: 5.75rem;
158
- min-height: 2rem;
126
+ [data-color-mode=dark] {
127
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
128
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
129
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
130
+ --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
131
+ --components-button-disabled-standard-icon-disabled: #b6b8ba;
132
+ --components-button-disabled-standard-text-disabled: #b6b8ba;
133
+ --components-button-floating-contrast-active: #8794d4;
134
+ --components-button-floating-contrast-default: #aeb7e2;
135
+ --components-button-floating-contrast-hover: #c7cdeb;
136
+ --components-button-floating-contrast-icon: #08091c;
137
+ --components-button-floating-contrast-text: #08091c;
138
+ --components-button-floating-standard-active: #8794d4;
139
+ --components-button-floating-standard-default: #aeb7e2;
140
+ --components-button-floating-standard-hover: #c7cdeb;
141
+ --components-button-floating-standard-icon: #08091c;
142
+ --components-button-floating-standard-text: #08091c;
143
+ --components-button-iconbutton-contrast-active: #8794d4;
144
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
145
+ --components-button-iconbutton-contrast-hover: #626493;
146
+ --components-button-iconbutton-contrast-icon: #e5e5e9;
147
+ --components-button-iconbutton-contrast-icon-active: #08091c;
148
+ --components-button-iconbutton-contrast-text: #e5e5e9;
149
+ --components-button-iconbutton-contrast-text-active: #08091c;
150
+ --components-button-iconbutton-standard-active: #8794d4;
151
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
152
+ --components-button-iconbutton-standard-hover: #626493;
153
+ --components-button-iconbutton-standard-icon: #e5e5e9;
154
+ --components-button-iconbutton-standard-icon-active: #08091c;
155
+ --components-button-iconbutton-standard-text: #e5e5e9;
156
+ --components-button-iconbutton-standard-text-active: #08091c;
157
+ --components-button-negative-contrast-active: #ff9494;
158
+ --components-button-negative-contrast-border: #ff9494;
159
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
160
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
161
+ --components-button-negative-contrast-icon: #e5e5e9;
162
+ --components-button-negative-contrast-icon-active: #08091c;
163
+ --components-button-negative-contrast-text: #e5e5e9;
164
+ --components-button-negative-contrast-text-active: #08091c;
165
+ --components-button-negative-standard-active: #ff9494;
166
+ --components-button-negative-standard-border: #ff9494;
167
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
168
+ --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
169
+ --components-button-negative-standard-icon: #e5e5e9;
170
+ --components-button-negative-standard-icon-active: #08091c;
171
+ --components-button-negative-standard-text: #e5e5e9;
172
+ --components-button-negative-standard-text-active: #08091c;
173
+ --components-button-primary-contrast-active: #8794d4;
174
+ --components-button-primary-contrast-default: #aeb7e2;
175
+ --components-button-primary-contrast-hover: #c7cdeb;
176
+ --components-button-primary-contrast-icon: #08091c;
177
+ --components-button-primary-contrast-text: #08091c;
178
+ --components-button-primary-standard-active: #8794d4;
179
+ --components-button-primary-standard-default: #aeb7e2;
180
+ --components-button-primary-standard-hover: #c7cdeb;
181
+ --components-button-primary-standard-icon: #08091c;
182
+ --components-button-primary-standard-text: #08091c;
183
+ --components-button-secondary-contrast-active: #8794d4;
184
+ --components-button-secondary-contrast-border: #8284ab;
185
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
186
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
187
+ --components-button-secondary-contrast-hover: #626493;
188
+ --components-button-secondary-contrast-icon: #e5e5e9;
189
+ --components-button-secondary-contrast-icon-active: #08091c;
190
+ --components-button-secondary-contrast-text: #e5e5e9;
191
+ --components-button-secondary-contrast-text-active: #08091c;
192
+ --components-button-secondary-standard-active: #8794d4;
193
+ --components-button-secondary-standard-border: #8284ab;
194
+ --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
195
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
196
+ --components-button-secondary-standard-hover: #626493;
197
+ --components-button-secondary-standard-icon: #e5e5e9;
198
+ --components-button-secondary-standard-icon-active: #08091c;
199
+ --components-button-secondary-standard-text: #e5e5e9;
200
+ --components-button-secondary-standard-text-active: #08091c;
201
+ --components-button-squaresecondary-contrast-active: #8794d4;
202
+ --components-button-squaresecondary-contrast-border: #8284ab;
203
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
204
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
205
+ --components-button-squaresecondary-contrast-hover: #626493;
206
+ --components-button-squaresecondary-contrast-icon-active: #08091c;
207
+ --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
208
+ --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
209
+ --components-button-squaresecondary-contrast-label: #e5e5e9;
210
+ --components-button-squaresecondary-standard-active: #8794d4;
211
+ --components-button-squaresecondary-standard-border: #8284ab;
212
+ --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
213
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
214
+ --components-button-squaresecondary-standard-hover: #626493;
215
+ --components-button-squaresecondary-standard-icon: #e5e5e9;
216
+ --components-button-squaresecondary-standard-icon-active: #08091c;
217
+ --components-button-squaresecondary-standard-text: #e5e5e9;
218
+ --components-button-squaresuccess-contrast-active: #5ac39a;
219
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
220
+ --components-button-squaresuccess-contrast-default: #5ac39a;
221
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
222
+ --components-button-squaresuccess-contrast-icon: #08091c;
223
+ --components-button-squaresuccess-contrast-label: #e5e5e9;
224
+ --components-button-squaresuccess-standard-active: #37ab83;
225
+ --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
226
+ --components-button-squaresuccess-standard-default: #5ac39a;
227
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
228
+ --components-button-squaresuccess-standard-icon: #08091c;
229
+ --components-button-squaresuccess-standard-label: #e5e5e9;
230
+ --components-button-success-contrast-active: #37ab83;
231
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
232
+ --components-button-success-contrast-default: #5ac39a;
233
+ --components-button-success-contrast-hover: #9cd9c2;
234
+ --components-button-success-contrast-icon: #08091c;
235
+ --components-button-success-contrast-text: #08091c;
236
+ --components-button-success-standard-active: #37ab83;
237
+ --components-button-success-standard-border: rgba(255, 255, 255, 0);
238
+ --components-button-success-standard-default: #5ac39a;
239
+ --components-button-success-standard-hover: #9cd9c2;
240
+ --components-button-success-standard-icon: #08091c;
241
+ --components-button-success-standard-text: #08091c;
242
+ }
243
+
244
+ /* DO NOT CHANGE!*/
245
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
246
+ /* DO NOT CHANGE!*/
247
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
+ [data-color-mode=light],
249
+ :root {
250
+ --basecolors-frame-contrast: #181c56;
251
+ --basecolors-frame-contrastalt: #393d79;
252
+ --basecolors-frame-contrastalt-2: #292b6a;
253
+ --basecolors-frame-default: #ffffff;
254
+ --basecolors-frame-elevated: #ffffff;
255
+ --basecolors-frame-elevatedalt: #f6f6f9;
256
+ --basecolors-frame-subdued: #d9dae8;
257
+ --basecolors-frame-tint: #f6f6f9;
258
+ --basecolors-shape-accent: #181c56;
259
+ --basecolors-shape-bicycle-contrast: #00db9b;
260
+ --basecolors-shape-bicycle-default: #388f76;
261
+ --basecolors-shape-bus-contrast: #ff6392;
262
+ --basecolors-shape-bus-default: #c5044e;
263
+ --basecolors-shape-cableway-contrast: #b482fb;
264
+ --basecolors-shape-cableway-default: #78469a;
265
+ --basecolors-shape-disabled: #6e6f73;
266
+ --basecolors-shape-disabledalt: #b6b8ba;
267
+ --basecolors-shape-ferry-contrast: #6fdfff;
268
+ --basecolors-shape-ferry-default: #0c6693;
269
+ --basecolors-shape-funicular-contrast: #b482fb;
270
+ --basecolors-shape-funicular-default: #78469a;
271
+ --basecolors-shape-helicopter-contrast: #fbafea;
272
+ --basecolors-shape-helicopter-default: #800664;
273
+ --basecolors-shape-highlight: #ff5959;
274
+ --basecolors-shape-light: #ffffff;
275
+ --basecolors-shape-mask: #ffffff;
276
+ --basecolors-shape-maskalt: #ffffff;
277
+ --basecolors-shape-metro-contrast: #f08901;
278
+ --basecolors-shape-metro-default: #bf5826;
279
+ --basecolors-shape-mobility-contrast: #00db9b;
280
+ --basecolors-shape-mobility-default: #388f76;
281
+ --basecolors-shape-plane-contrast: #fbafea;
282
+ --basecolors-shape-plane-default: #800664;
283
+ --basecolors-shape-subdued: #626493;
284
+ --basecolors-shape-subduedalt: #d9dae8;
285
+ --basecolors-shape-taxi-contrast: #ffe082;
286
+ --basecolors-shape-taxi-default: #3d3e40;
287
+ --basecolors-shape-train-contrast: #42a5f5;
288
+ --basecolors-shape-train-default: #00367f;
289
+ --basecolors-shape-tram-contrast: #b482fb;
290
+ --basecolors-shape-tram-default: #78469a;
291
+ --basecolors-shape-walk-contrast: #8284ab;
292
+ --basecolors-shape-walk-default: #8d8e9c;
293
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
294
+ --basecolors-shape-airportlinkbus-default: #800664;
295
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
296
+ --basecolors-shape-airportlinkrail-default: #800664;
297
+ --basecolors-stroke-contrast: #aeb7e2;
298
+ --basecolors-stroke-default: #181c56;
299
+ --basecolors-stroke-disabled: #949699;
300
+ --basecolors-stroke-focus-contrast: #aeb7e2;
301
+ --basecolors-stroke-focus-standard: #181c56;
302
+ --basecolors-stroke-highlight: #ff5959;
303
+ --basecolors-stroke-light: #ffffff;
304
+ --basecolors-stroke-subdued: #8284ab;
305
+ --basecolors-stroke-subduedalt: #e3e6e8;
306
+ --basecolors-text-accent: #181c56;
307
+ --basecolors-text-disabled: #6e6f73;
308
+ --basecolors-text-disabledalt: #b6b8ba;
309
+ --basecolors-text-highlight: #ff5959;
310
+ --basecolors-text-light: #ffffff;
311
+ --basecolors-text-subdued: #626493;
312
+ --basecolors-text-subduedalt: #d9dae8;
313
+ }
314
+
315
+ [data-color-mode=dark] {
316
+ --basecolors-frame-contrast: #212233;
317
+ --basecolors-frame-contrastalt: #141527;
318
+ --basecolors-frame-contrastalt-2: #08091c;
319
+ --basecolors-frame-default: #08091c;
320
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
321
+ --basecolors-frame-elevatedalt: #464755;
322
+ --basecolors-frame-subdued: #2d2e3e;
323
+ --basecolors-frame-tint: #141527;
324
+ --basecolors-shape-accent: #e5e5e9;
325
+ --basecolors-shape-bicycle-contrast: #4db295;
326
+ --basecolors-shape-bicycle-default: #4db295;
327
+ --basecolors-shape-bus-contrast: #ef7398;
328
+ --basecolors-shape-bus-default: #ef7398;
329
+ --basecolors-shape-cableway-contrast: #b898e5;
330
+ --basecolors-shape-cableway-default: #b898e5;
331
+ --basecolors-shape-disabled: #b6b8ba;
332
+ --basecolors-shape-disabledalt: #b3b4bd;
333
+ --basecolors-shape-ferry-contrast: #8ccfe2;
334
+ --basecolors-shape-ferry-default: #8ccfe2;
335
+ --basecolors-shape-funicular-contrast: #b898e5;
336
+ --basecolors-shape-funicular-default: #b898e5;
337
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
338
+ --basecolors-shape-helicopter-default: #f2b8e5;
339
+ --basecolors-shape-highlight: #ff9494;
340
+ --basecolors-shape-light: #e5e5e9;
341
+ --basecolors-shape-mask: #2d2e3e;
342
+ --basecolors-shape-maskalt: #393a49;
343
+ --basecolors-shape-metro-contrast: #dd973c;
344
+ --basecolors-shape-metro-default: #dd973c;
345
+ --basecolors-shape-mobility-contrast: #4db295;
346
+ --basecolors-shape-mobility-default: #4db295;
347
+ --basecolors-shape-plane-contrast: #f2b8e5;
348
+ --basecolors-shape-plane-default: #f2b8e5;
349
+ --basecolors-shape-subdued: #b3b4bd;
350
+ --basecolors-shape-subduedalt: #b3b4bd;
351
+ --basecolors-shape-taxi-contrast: #ffe082;
352
+ --basecolors-shape-taxi-default: #ffe082;
353
+ --basecolors-shape-train-contrast: #60a2d7;
354
+ --basecolors-shape-train-default: #60a2d7;
355
+ --basecolors-shape-tram-contrast: #b898e5;
356
+ --basecolors-shape-tram-default: #b898e5;
357
+ --basecolors-shape-walk-contrast: #8d8e9c;
358
+ --basecolors-shape-walk-default: #8d8e9c;
359
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
360
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
361
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
362
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
363
+ --basecolors-stroke-contrast: #aeb7e2;
364
+ --basecolors-stroke-default: #b3b4bd;
365
+ --basecolors-stroke-disabled: #e3e6e8;
366
+ --basecolors-stroke-focus-contrast: #aeb7e2;
367
+ --basecolors-stroke-focus-standard: #aeb7e2;
368
+ --basecolors-stroke-highlight: #ff9494;
369
+ --basecolors-stroke-light: #b3b4bd;
370
+ --basecolors-stroke-subdued: #81828f;
371
+ --basecolors-stroke-subduedalt: #949699;
372
+ --basecolors-text-accent: #e5e5e9;
373
+ --basecolors-text-disabled: #b6b8ba;
374
+ --basecolors-text-disabledalt: #b6b8ba;
375
+ --basecolors-text-highlight: #ff9494;
376
+ --basecolors-text-light: #e5e5e9;
377
+ --basecolors-text-subdued: #b3b4bd;
378
+ --basecolors-text-subduedalt: #b3b4bd;
379
+ }
380
+
381
+ :root {
382
+ --eds-button: 1;
383
+ }/* DO NOT CHANGE!*/
384
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
385
+ a.eds-button {
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: center;
389
+ }
390
+ a.eds-button .eds-icon {
391
+ position: unset;
392
+ }
393
+
394
+ .eds-button {
395
+ min-width: 9.5rem;
396
+ width: max-content;
397
+ min-height: 3rem;
398
+ height: fit-content;
399
+ border-radius: 0.25rem;
400
+ font-size: inherit;
401
+ cursor: pointer;
402
+ display: inline-block;
403
+ appearance: none;
404
+ text-decoration: none;
405
+ padding: 0 1rem;
406
+ font-size: 1rem;
407
+ line-height: 1.5rem;
408
+ font-weight: 500;
409
+ text-align: center;
410
+ font-family: inherit;
411
+ position: relative;
412
+ vertical-align: top;
413
+ background-color: var(--eds-button-background);
414
+ border: 0.125rem solid var(--eds-button-border);
415
+ color: var(--eds-button-text);
416
+ }
417
+ .eds-button:hover {
418
+ background-color: var(--eds-button-background-hover);
419
+ }
420
+ .eds-button:active {
421
+ background-color: var(--eds-button-background-active);
422
+ border-color: var(--eds-button-border-active);
423
+ color: var(--eds-button-text-active);
424
+ }
425
+ .eds-button:focus-visible {
426
+ outline: 2px solid #181c56;
427
+ outline-color: var(--basecolors-stroke-focus-standard);
428
+ outline-offset: 0.125rem;
429
+ }
430
+ .eds-contrast .eds-button:focus-visible {
431
+ outline-color: var(--basecolors-stroke-focus-contrast);
432
+ }
433
+ .eds-button > .eds-button__loading-dots {
434
+ width: 100%;
435
+ }
436
+ .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
437
+ background: var(--eds-button-text);
438
+ }
439
+ .eds-button .eds-icon {
440
+ position: relative;
441
+ top: 0.2em;
442
+ }
443
+ .eds-button--leading-icon .eds-icon {
444
+ margin-right: 0.75rem;
445
+ }
446
+ .eds-button--trailing-icon .eds-icon {
447
+ margin-left: 0.75rem;
448
+ }
449
+ .eds-button--size-small {
450
+ min-width: 5.75rem;
451
+ min-height: 2rem;
159
452
  font-size: 0.875rem;
160
453
  line-height: 1.375rem;
161
454
  }
@@ -291,14 +584,90 @@ a.eds-button .eds-icon {
291
584
  background-color: var(--components-button-disabled-contrast-fill);
292
585
  color: var(--components-button-disabled-contrast-text-disabled);
293
586
  border-color: transparent;
587
+ }/* DO NOT CHANGE!*/
588
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
589
+ .eds-button-group .eds-button {
590
+ margin-right: 0.75rem;
591
+ margin-bottom: 0.75rem;
294
592
  }
295
- /* DO NOT CHANGE!*/
593
+ .eds-button-group .eds-button:only-child {
594
+ margin: 0;
595
+ }/* DO NOT CHANGE!*/
596
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
597
+ .eds-floating-button {
598
+ align-items: center;
599
+ appearance: none;
600
+ background: var(--components-button-floating-standard-default);
601
+ border: 0;
602
+ border-radius: 1.5rem;
603
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
604
+ color: var(--components-button-floating-standard-text);
605
+ cursor: pointer;
606
+ display: flex;
607
+ font-family: inherit;
608
+ font-size: 0.875rem;
609
+ font-weight: 500;
610
+ justify-content: center;
611
+ min-height: 3rem;
612
+ margin: 0;
613
+ min-width: 3rem;
614
+ padding: 0 1rem;
615
+ position: relative;
616
+ z-index: 10;
617
+ }
618
+ .eds-floating-button--extended {
619
+ padding: 0 0.9375rem;
620
+ }
621
+ .eds-floating-button:hover {
622
+ background-color: var(--components-button-floating-standard-hover);
623
+ }
624
+ .eds-floating-button:active {
625
+ background-color: var(--components-button-floating-standard-active);
626
+ }
627
+ .eds-floating-button:focus-visible {
628
+ outline: 2px solid #181c56;
629
+ outline-color: var(--basecolors-stroke-focus-standard);
630
+ outline-offset: 0.125rem;
631
+ }
632
+ .eds-contrast .eds-floating-button:focus-visible {
633
+ outline-color: var(--basecolors-stroke-focus-contrast);
634
+ }
635
+ .eds-contrast .eds-floating-button {
636
+ background: var(--components-button-floating-contrast-default);
637
+ color: var(--components-button-floating-contrast-text);
638
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
639
+ }
640
+ .eds-contrast .eds-floating-button:hover {
641
+ background-color: var(--components-button-floating-contrast-hover);
642
+ }
643
+ .eds-contrast .eds-floating-button:active {
644
+ background-color: var(--components-button-floating-contrast-active);
645
+ }
646
+ .eds-floating-button--small {
647
+ border-radius: 1rem;
648
+ height: 2rem;
649
+ padding: 0 0.5rem;
650
+ min-width: 2rem;
651
+ min-height: 2rem;
652
+ flex: 0 1 auto;
653
+ }
654
+ .eds-floating-button--small.eds-floating-button--extended {
655
+ padding: 0 0.6875rem;
656
+ }
657
+
658
+ .eds-floating-button--extended > * {
659
+ margin: 0 0.5em;
660
+ }
661
+ .eds-floating-button--extended > *:first-child {
662
+ margin-left: 0;
663
+ }
664
+ .eds-floating-button--extended > *:last-child {
665
+ margin-right: 0;
666
+ }/* DO NOT CHANGE!*/
296
667
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
668
  .eds-square-button {
298
669
  align-items: center;
299
- -webkit-appearance: none;
300
- -moz-appearance: none;
301
- appearance: none;
670
+ appearance: none;
302
671
  background: transparent;
303
672
  border: 0;
304
673
  border-radius: 0.25rem;
@@ -309,7 +678,6 @@ a.eds-button .eds-icon {
309
678
  font-weight: 500;
310
679
  justify-content: center;
311
680
  padding: 0;
312
- -webkit-text-decoration: none;
313
681
  text-decoration: none;
314
682
  }
315
683
  .eds-square-button:focus-visible {
@@ -352,7 +720,6 @@ a.eds-button .eds-icon {
352
720
  line-height: 1.5rem;
353
721
  padding: 0;
354
722
  text-align: center;
355
- -webkit-text-decoration: none;
356
723
  text-decoration: none;
357
724
  vertical-align: top;
358
725
  position: relative;
@@ -371,530 +738,145 @@ a.eds-button .eds-icon {
371
738
  --button-background: var(--components-button-squaresecondary-standard-default);
372
739
  --border-color: var(--components-button-squaresecondary-standard-border);
373
740
  --icon-color: var(--components-button-squaresecondary-standard-icon);
374
- --label-color: var(--components-button-squaresecondary-standard-text);
375
- }
376
- .eds-square-button--secondary:hover {
377
- --button-background: var(--components-button-squaresecondary-standard-hover);
378
- }
379
- .eds-square-button--secondary:active {
380
- --button-background: var(--components-button-squaresecondary-standard-active);
381
- --border-color: var(--components-button-squaresecondary-standard-border-active);
382
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
383
- }
384
- .eds-contrast .eds-square-button--secondary {
385
- --button-background: var(--components-button-squaresecondary-contrast-default);
386
- --border-color: var(--components-button-squaresecondary-contrast-border);
387
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
388
- --label-color: var(--components-button-squaresecondary-contrast-label);
389
- }
390
- .eds-contrast .eds-square-button--secondary:hover {
391
- --button-background: var(--components-button-squaresecondary-contrast-hover);
392
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
393
- }
394
- .eds-contrast .eds-square-button--secondary:active {
395
- --button-background: var(--components-button-squaresecondary-contrast-active);
396
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
397
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
398
- }
399
- .eds-square-button--success {
400
- --button-background: var(--components-button-squaresuccess-standard-default);
401
- --border-color: var(--components-button-squaresuccess-standard-border);
402
- --icon-color: var(--components-button-squaresuccess-standard-icon);
403
- --label-color: var(--components-button-squaresuccess-standard-label);
404
- }
405
- .eds-square-button--success:hover {
406
- --button-background: var(--components-button-squaresuccess-standard-hover);
407
- }
408
- .eds-square-button--success:active {
409
- --button-background: var(--components-button-squaresuccess-standard-active);
410
- }
411
- .eds-contrast .eds-square-button--success {
412
- --button-background: var(--components-button-squaresuccess-contrast-default);
413
- --border-color: var(--components-button-squaresuccess-contrast-border);
414
- --icon-color: var(--components-button-squaresuccess-contrast-icon);
415
- --label-color: var(--components-button-squaresuccess-contrast-label);
416
- }
417
- .eds-contrast .eds-square-button--success:hover {
418
- --button-background: var(--components-button-squaresuccess-contrast-hover);
419
- }
420
- .eds-contrast .eds-square-button--success:active {
421
- --button-background: var(--components-button-squaresuccess-contrast-active);
422
- }
423
- .eds-square-button--tertiary {
424
- --button-background: var(--components-button-squaresecondary-standard-default);
425
- --border-color: var(--components-button-squaresecondary-standard-border);
426
- --icon-color: var(--components-button-squaresecondary-standard-icon);
427
- --label-color: var(--components-button-squaresecondary-standard-text);
428
- font-size: 0.875rem;
429
- }
430
- .eds-square-button--tertiary:hover {
431
- --button-background: var(--components-button-squaresecondary-standard-hover);
432
- }
433
- .eds-square-button--tertiary:active {
434
- --button-background: var(--components-button-squaresecondary-standard-active);
435
- --border-color: var(--components-button-squaresecondary-standard-border-active);
436
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
437
- }
438
- .eds-contrast .eds-square-button--tertiary {
439
- --button-background: var(--components-button-squaresecondary-contrast-default);
440
- --border-color: var(--components-button-squaresecondary-contrast-border);
441
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
442
- --label-color: var(--components-button-squaresecondary-contrast-label);
443
- }
444
- .eds-contrast .eds-square-button--tertiary:hover {
445
- --button-background: var(--components-button-squaresecondary-contrast-hover);
446
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
447
- }
448
- .eds-contrast .eds-square-button--tertiary:active {
449
- --button-background: var(--components-button-squaresecondary-contrast-active);
450
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
451
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
452
- }
453
- .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
454
- .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
455
- margin-left: 0.75rem;
456
- }
457
- .eds-square-button--tertiary .eds-square-button__button {
458
- height: 2rem;
459
- width: 2rem;
460
- border-width: 0.0625rem;
461
- }
462
- /* DO NOT CHANGE!*/
463
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
- .eds-icon-button {
465
- border: 0.125rem solid transparent;
466
- border-radius: 0.25rem;
467
- background: none;
468
- color: var(--components-button-iconbutton-standard-text);
469
- cursor: pointer;
470
- display: flex;
471
- justify-content: center;
472
- align-items: center;
473
- font-size: 1rem;
474
- padding: 0.5rem;
475
- }
476
- .eds-contrast .eds-icon-button {
477
- color: var(--components-button-iconbutton-contrast-text);
478
- }
479
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
480
- background-color: var(--components-button-iconbutton-contrast-icon);
481
- }
482
- .eds-icon-button--size-small {
483
- height: 1.5rem;
484
- width: 1.5rem;
485
- padding: 0;
486
- }
487
- .eds-icon-button:hover {
488
- background-color: var(--components-button-iconbutton-standard-hover);
489
- }
490
- .eds-contrast .eds-icon-button:hover {
491
- background-color: var(--components-button-iconbutton-contrast-hover);
492
- }
493
- .eds-icon-button:active {
494
- background: var(--components-button-iconbutton-standard-active);
495
- color: var(--components-button-iconbutton-standard-text-active);
496
- }
497
- .eds-contrast .eds-icon-button:active {
498
- background: var(--components-button-iconbutton-contrast-active);
499
- color: var(--components-button-iconbutton-contrast-text-active);
500
- }
501
- .eds-icon-button:focus-visible {
502
- outline: 2px solid #181c56;
503
- outline-color: var(--basecolors-stroke-focus-standard);
504
- outline-offset: 0.125rem;
505
- }
506
- .eds-contrast .eds-icon-button:focus-visible {
507
- outline-color: var(--basecolors-stroke-focus-contrast);
508
- }
509
- .eds-icon-button--disabled {
510
- opacity: 0.5;
511
- pointer-events: none;
741
+ --label-color: var(--components-button-squaresecondary-standard-text);
512
742
  }
513
- .eds-icon-button--disabled__wrapper {
514
- cursor: not-allowed;
515
- width: -moz-fit-content;
516
- width: fit-content;
743
+ .eds-square-button--secondary:hover {
744
+ --button-background: var(--components-button-squaresecondary-standard-hover);
517
745
  }
518
- /* DO NOT CHANGE!*/
519
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
520
- /* DO NOT CHANGE!*/
521
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
522
- /* DO NOT CHANGE!*/
523
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
524
- [data-color-mode=light],
525
- :root {
526
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
527
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
528
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
529
- --components-button-disabled-standard-fill: #cfd2d4;
530
- --components-button-disabled-standard-icon-disabled: #515254;
531
- --components-button-disabled-standard-text-disabled: #515254;
532
- --components-button-floating-contrast-active: #d9dae8;
533
- --components-button-floating-contrast-default: #ffffff;
534
- --components-button-floating-contrast-hover: #f6f6f9;
535
- --components-button-floating-contrast-icon: #181c56;
536
- --components-button-floating-contrast-text: #181c56;
537
- --components-button-floating-standard-active: #11143c;
538
- --components-button-floating-standard-default: #181c56;
539
- --components-button-floating-standard-hover: #393d79;
540
- --components-button-floating-standard-icon: #ffffff;
541
- --components-button-floating-standard-text: #ffffff;
542
- --components-button-iconbutton-contrast-active: #8794d4;
543
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
544
- --components-button-iconbutton-contrast-hover: #626493;
545
- --components-button-iconbutton-contrast-icon: #ffffff;
546
- --components-button-iconbutton-contrast-icon-active: #181c56;
547
- --components-button-iconbutton-contrast-text: #ffffff;
548
- --components-button-iconbutton-contrast-text-active: #181c56;
549
- --components-button-iconbutton-standard-active: #aeb7e2;
550
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
551
- --components-button-iconbutton-standard-hover: #d9ddf2;
552
- --components-button-iconbutton-standard-icon: #181c56;
553
- --components-button-iconbutton-standard-icon-active: #181c56;
554
- --components-button-iconbutton-standard-text: #181c56;
555
- --components-button-iconbutton-standard-text-active: #181c56;
556
- --components-button-negative-contrast-active: #ff9494;
557
- --components-button-negative-contrast-border: #ff9494;
558
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
559
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
560
- --components-button-negative-contrast-icon: #ffffff;
561
- --components-button-negative-contrast-icon-active: #181c56;
562
- --components-button-negative-contrast-text: #ffffff;
563
- --components-button-negative-contrast-text-active: #181c56;
564
- --components-button-negative-standard-active: #d31b1b;
565
- --components-button-negative-standard-border: #d31b1b;
566
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
567
- --components-button-negative-standard-hover: #ffcece;
568
- --components-button-negative-standard-icon: #d31b1b;
569
- --components-button-negative-standard-icon-active: #ffffff;
570
- --components-button-negative-standard-text: #d31b1b;
571
- --components-button-negative-standard-text-active: #ffffff;
572
- --components-button-primary-contrast-active: #8794d4;
573
- --components-button-primary-contrast-default: #aeb7e2;
574
- --components-button-primary-contrast-hover: #c7cdeb;
575
- --components-button-primary-contrast-icon: #181c56;
576
- --components-button-primary-contrast-text: #181c56;
577
- --components-button-primary-standard-active: #11143c;
578
- --components-button-primary-standard-default: #181c56;
579
- --components-button-primary-standard-hover: #393d79;
580
- --components-button-primary-standard-icon: #ffffff;
581
- --components-button-primary-standard-text: #ffffff;
582
- --components-button-secondary-contrast-active: #8794d4;
583
- --components-button-secondary-contrast-border: #8284ab;
584
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
585
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
586
- --components-button-secondary-contrast-hover: #626493;
587
- --components-button-secondary-contrast-icon: #ffffff;
588
- --components-button-secondary-contrast-icon-active: #181c56;
589
- --components-button-secondary-contrast-text: #ffffff;
590
- --components-button-secondary-contrast-text-active: #181c56;
591
- --components-button-secondary-standard-active: #aeb7e2;
592
- --components-button-secondary-standard-border: #8284ab;
593
- --components-button-secondary-standard-border-active: #181c56;
594
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
595
- --components-button-secondary-standard-hover: #d9ddf2;
596
- --components-button-secondary-standard-icon: #181c56;
597
- --components-button-secondary-standard-icon-active: #181c56;
598
- --components-button-secondary-standard-text: #181c56;
599
- --components-button-secondary-standard-text-active: #181c56;
600
- --components-button-squaresecondary-contrast-active: #8794d4;
601
- --components-button-squaresecondary-contrast-border: #8284ab;
602
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
603
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
604
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
605
- --components-button-squaresecondary-contrast-icon-active: #181c56;
606
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
607
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
608
- --components-button-squaresecondary-contrast-label: #ffffff;
609
- --components-button-squaresecondary-standard-active: #aeb7e2;
610
- --components-button-squaresecondary-standard-border: #8284ab;
611
- --components-button-squaresecondary-standard-border-active: #181c56;
612
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
613
- --components-button-squaresecondary-standard-hover: #d9ddf2;
614
- --components-button-squaresecondary-standard-icon: #181c56;
615
- --components-button-squaresecondary-standard-icon-active: #181c56;
616
- --components-button-squaresecondary-standard-text: #181c56;
617
- --components-button-squaresuccess-contrast-active: #37ab83;
618
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
619
- --components-button-squaresuccess-contrast-default: #5ac39a;
620
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
621
- --components-button-squaresuccess-contrast-icon: #181c56;
622
- --components-button-squaresuccess-contrast-label: #ffffff;
623
- --components-button-squaresuccess-standard-active: #37ab83;
624
- --components-button-squaresuccess-standard-border: #181c56;
625
- --components-button-squaresuccess-standard-default: #5ac39a;
626
- --components-button-squaresuccess-standard-hover: #9cd9c2;
627
- --components-button-squaresuccess-standard-icon: #181c56;
628
- --components-button-squaresuccess-standard-label: #181c56;
629
- --components-button-success-contrast-active: #37ab83;
630
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
631
- --components-button-success-contrast-default: #5ac39a;
632
- --components-button-success-contrast-hover: #9cd9c2;
633
- --components-button-success-contrast-icon: #181c56;
634
- --components-button-success-contrast-text: #181c56;
635
- --components-button-success-standard-active: #37ab83;
636
- --components-button-success-standard-border: #181c56;
637
- --components-button-success-standard-default: #5ac39a;
638
- --components-button-success-standard-hover: #9cd9c2;
639
- --components-button-success-standard-icon: #181c56;
640
- --components-button-success-standard-text: #181c56;
746
+ .eds-square-button--secondary:active {
747
+ --button-background: var(--components-button-squaresecondary-standard-active);
748
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
749
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
641
750
  }
642
-
643
- [data-color-mode=dark] {
644
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
645
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
646
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
647
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
648
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
649
- --components-button-disabled-standard-text-disabled: #b6b8ba;
650
- --components-button-floating-contrast-active: #8794d4;
651
- --components-button-floating-contrast-default: #aeb7e2;
652
- --components-button-floating-contrast-hover: #c7cdeb;
653
- --components-button-floating-contrast-icon: #08091c;
654
- --components-button-floating-contrast-text: #08091c;
655
- --components-button-floating-standard-active: #8794d4;
656
- --components-button-floating-standard-default: #aeb7e2;
657
- --components-button-floating-standard-hover: #c7cdeb;
658
- --components-button-floating-standard-icon: #08091c;
659
- --components-button-floating-standard-text: #08091c;
660
- --components-button-iconbutton-contrast-active: #8794d4;
661
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
662
- --components-button-iconbutton-contrast-hover: #626493;
663
- --components-button-iconbutton-contrast-icon: #e5e5e9;
664
- --components-button-iconbutton-contrast-icon-active: #08091c;
665
- --components-button-iconbutton-contrast-text: #e5e5e9;
666
- --components-button-iconbutton-contrast-text-active: #08091c;
667
- --components-button-iconbutton-standard-active: #8794d4;
668
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
669
- --components-button-iconbutton-standard-hover: #626493;
670
- --components-button-iconbutton-standard-icon: #e5e5e9;
671
- --components-button-iconbutton-standard-icon-active: #08091c;
672
- --components-button-iconbutton-standard-text: #e5e5e9;
673
- --components-button-iconbutton-standard-text-active: #08091c;
674
- --components-button-negative-contrast-active: #ff9494;
675
- --components-button-negative-contrast-border: #ff9494;
676
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
677
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
678
- --components-button-negative-contrast-icon: #e5e5e9;
679
- --components-button-negative-contrast-icon-active: #08091c;
680
- --components-button-negative-contrast-text: #e5e5e9;
681
- --components-button-negative-contrast-text-active: #08091c;
682
- --components-button-negative-standard-active: #ff9494;
683
- --components-button-negative-standard-border: #ff9494;
684
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
685
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
686
- --components-button-negative-standard-icon: #e5e5e9;
687
- --components-button-negative-standard-icon-active: #08091c;
688
- --components-button-negative-standard-text: #e5e5e9;
689
- --components-button-negative-standard-text-active: #08091c;
690
- --components-button-primary-contrast-active: #8794d4;
691
- --components-button-primary-contrast-default: #aeb7e2;
692
- --components-button-primary-contrast-hover: #c7cdeb;
693
- --components-button-primary-contrast-icon: #08091c;
694
- --components-button-primary-contrast-text: #08091c;
695
- --components-button-primary-standard-active: #8794d4;
696
- --components-button-primary-standard-default: #aeb7e2;
697
- --components-button-primary-standard-hover: #c7cdeb;
698
- --components-button-primary-standard-icon: #08091c;
699
- --components-button-primary-standard-text: #08091c;
700
- --components-button-secondary-contrast-active: #8794d4;
701
- --components-button-secondary-contrast-border: #8284ab;
702
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
703
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
704
- --components-button-secondary-contrast-hover: #626493;
705
- --components-button-secondary-contrast-icon: #e5e5e9;
706
- --components-button-secondary-contrast-icon-active: #08091c;
707
- --components-button-secondary-contrast-text: #e5e5e9;
708
- --components-button-secondary-contrast-text-active: #08091c;
709
- --components-button-secondary-standard-active: #8794d4;
710
- --components-button-secondary-standard-border: #8284ab;
711
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
712
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
713
- --components-button-secondary-standard-hover: #626493;
714
- --components-button-secondary-standard-icon: #e5e5e9;
715
- --components-button-secondary-standard-icon-active: #08091c;
716
- --components-button-secondary-standard-text: #e5e5e9;
717
- --components-button-secondary-standard-text-active: #08091c;
718
- --components-button-squaresecondary-contrast-active: #8794d4;
719
- --components-button-squaresecondary-contrast-border: #8284ab;
720
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
721
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
722
- --components-button-squaresecondary-contrast-hover: #626493;
723
- --components-button-squaresecondary-contrast-icon-active: #08091c;
724
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
725
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
726
- --components-button-squaresecondary-contrast-label: #e5e5e9;
727
- --components-button-squaresecondary-standard-active: #8794d4;
728
- --components-button-squaresecondary-standard-border: #8284ab;
729
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
730
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
731
- --components-button-squaresecondary-standard-hover: #626493;
732
- --components-button-squaresecondary-standard-icon: #e5e5e9;
733
- --components-button-squaresecondary-standard-icon-active: #08091c;
734
- --components-button-squaresecondary-standard-text: #e5e5e9;
735
- --components-button-squaresuccess-contrast-active: #5ac39a;
736
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
737
- --components-button-squaresuccess-contrast-default: #5ac39a;
738
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
739
- --components-button-squaresuccess-contrast-icon: #08091c;
740
- --components-button-squaresuccess-contrast-label: #e5e5e9;
741
- --components-button-squaresuccess-standard-active: #37ab83;
742
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
743
- --components-button-squaresuccess-standard-default: #5ac39a;
744
- --components-button-squaresuccess-standard-hover: #9cd9c2;
745
- --components-button-squaresuccess-standard-icon: #08091c;
746
- --components-button-squaresuccess-standard-label: #e5e5e9;
747
- --components-button-success-contrast-active: #37ab83;
748
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
749
- --components-button-success-contrast-default: #5ac39a;
750
- --components-button-success-contrast-hover: #9cd9c2;
751
- --components-button-success-contrast-icon: #08091c;
752
- --components-button-success-contrast-text: #08091c;
753
- --components-button-success-standard-active: #37ab83;
754
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
755
- --components-button-success-standard-default: #5ac39a;
756
- --components-button-success-standard-hover: #9cd9c2;
757
- --components-button-success-standard-icon: #08091c;
758
- --components-button-success-standard-text: #08091c;
751
+ .eds-contrast .eds-square-button--secondary {
752
+ --button-background: var(--components-button-squaresecondary-contrast-default);
753
+ --border-color: var(--components-button-squaresecondary-contrast-border);
754
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
755
+ --label-color: var(--components-button-squaresecondary-contrast-label);
756
+ }
757
+ .eds-contrast .eds-square-button--secondary:hover {
758
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
759
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
759
760
  }
760
-
761
- /* DO NOT CHANGE!*/
762
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
763
- /* DO NOT CHANGE!*/
761
+ .eds-contrast .eds-square-button--secondary:active {
762
+ --button-background: var(--components-button-squaresecondary-contrast-active);
763
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
764
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
765
+ }
766
+ .eds-square-button--success {
767
+ --button-background: var(--components-button-squaresuccess-standard-default);
768
+ --border-color: var(--components-button-squaresuccess-standard-border);
769
+ --icon-color: var(--components-button-squaresuccess-standard-icon);
770
+ --label-color: var(--components-button-squaresuccess-standard-label);
771
+ }
772
+ .eds-square-button--success:hover {
773
+ --button-background: var(--components-button-squaresuccess-standard-hover);
774
+ }
775
+ .eds-square-button--success:active {
776
+ --button-background: var(--components-button-squaresuccess-standard-active);
777
+ }
778
+ .eds-contrast .eds-square-button--success {
779
+ --button-background: var(--components-button-squaresuccess-contrast-default);
780
+ --border-color: var(--components-button-squaresuccess-contrast-border);
781
+ --icon-color: var(--components-button-squaresuccess-contrast-icon);
782
+ --label-color: var(--components-button-squaresuccess-contrast-label);
783
+ }
784
+ .eds-contrast .eds-square-button--success:hover {
785
+ --button-background: var(--components-button-squaresuccess-contrast-hover);
786
+ }
787
+ .eds-contrast .eds-square-button--success:active {
788
+ --button-background: var(--components-button-squaresuccess-contrast-active);
789
+ }
790
+ .eds-square-button--tertiary {
791
+ --button-background: var(--components-button-squaresecondary-standard-default);
792
+ --border-color: var(--components-button-squaresecondary-standard-border);
793
+ --icon-color: var(--components-button-squaresecondary-standard-icon);
794
+ --label-color: var(--components-button-squaresecondary-standard-text);
795
+ font-size: 0.875rem;
796
+ }
797
+ .eds-square-button--tertiary:hover {
798
+ --button-background: var(--components-button-squaresecondary-standard-hover);
799
+ }
800
+ .eds-square-button--tertiary:active {
801
+ --button-background: var(--components-button-squaresecondary-standard-active);
802
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
803
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
804
+ }
805
+ .eds-contrast .eds-square-button--tertiary {
806
+ --button-background: var(--components-button-squaresecondary-contrast-default);
807
+ --border-color: var(--components-button-squaresecondary-contrast-border);
808
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
809
+ --label-color: var(--components-button-squaresecondary-contrast-label);
810
+ }
811
+ .eds-contrast .eds-square-button--tertiary:hover {
812
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
813
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
814
+ }
815
+ .eds-contrast .eds-square-button--tertiary:active {
816
+ --button-background: var(--components-button-squaresecondary-contrast-active);
817
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
818
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
819
+ }
820
+ .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
821
+ .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
822
+ margin-left: 0.75rem;
823
+ }
824
+ .eds-square-button--tertiary .eds-square-button__button {
825
+ height: 2rem;
826
+ width: 2rem;
827
+ border-width: 0.0625rem;
828
+ }/* DO NOT CHANGE!*/
764
829
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
765
- [data-color-mode=light],
766
- :root {
767
- --basecolors-frame-contrast: #181c56;
768
- --basecolors-frame-contrastalt: #393d79;
769
- --basecolors-frame-contrastalt-2: #292b6a;
770
- --basecolors-frame-default: #ffffff;
771
- --basecolors-frame-elevated: #ffffff;
772
- --basecolors-frame-elevatedalt: #f6f6f9;
773
- --basecolors-frame-subdued: #d9dae8;
774
- --basecolors-frame-tint: #f6f6f9;
775
- --basecolors-shape-accent: #181c56;
776
- --basecolors-shape-bicycle-contrast: #00db9b;
777
- --basecolors-shape-bicycle-default: #388f76;
778
- --basecolors-shape-bus-contrast: #ff6392;
779
- --basecolors-shape-bus-default: #c5044e;
780
- --basecolors-shape-cableway-contrast: #b482fb;
781
- --basecolors-shape-cableway-default: #78469a;
782
- --basecolors-shape-disabled: #6e6f73;
783
- --basecolors-shape-disabledalt: #b6b8ba;
784
- --basecolors-shape-ferry-contrast: #6fdfff;
785
- --basecolors-shape-ferry-default: #0c6693;
786
- --basecolors-shape-funicular-contrast: #b482fb;
787
- --basecolors-shape-funicular-default: #78469a;
788
- --basecolors-shape-helicopter-contrast: #fbafea;
789
- --basecolors-shape-helicopter-default: #800664;
790
- --basecolors-shape-highlight: #ff5959;
791
- --basecolors-shape-light: #ffffff;
792
- --basecolors-shape-mask: #ffffff;
793
- --basecolors-shape-maskalt: #ffffff;
794
- --basecolors-shape-metro-contrast: #f08901;
795
- --basecolors-shape-metro-default: #bf5826;
796
- --basecolors-shape-mobility-contrast: #00db9b;
797
- --basecolors-shape-mobility-default: #388f76;
798
- --basecolors-shape-plane-contrast: #fbafea;
799
- --basecolors-shape-plane-default: #800664;
800
- --basecolors-shape-subdued: #626493;
801
- --basecolors-shape-subduedalt: #d9dae8;
802
- --basecolors-shape-taxi-contrast: #ffe082;
803
- --basecolors-shape-taxi-default: #3d3e40;
804
- --basecolors-shape-train-contrast: #42a5f5;
805
- --basecolors-shape-train-default: #00367f;
806
- --basecolors-shape-tram-contrast: #b482fb;
807
- --basecolors-shape-tram-default: #78469a;
808
- --basecolors-shape-walk-contrast: #8284ab;
809
- --basecolors-shape-walk-default: #8d8e9c;
810
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
811
- --basecolors-shape-airportlinkbus-default: #800664;
812
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
813
- --basecolors-shape-airportlinkrail-default: #800664;
814
- --basecolors-stroke-contrast: #aeb7e2;
815
- --basecolors-stroke-default: #181c56;
816
- --basecolors-stroke-disabled: #949699;
817
- --basecolors-stroke-focus-contrast: #aeb7e2;
818
- --basecolors-stroke-focus-standard: #181c56;
819
- --basecolors-stroke-highlight: #ff5959;
820
- --basecolors-stroke-light: #ffffff;
821
- --basecolors-stroke-subdued: #8284ab;
822
- --basecolors-stroke-subduedalt: #e3e6e8;
823
- --basecolors-text-accent: #181c56;
824
- --basecolors-text-disabled: #6e6f73;
825
- --basecolors-text-disabledalt: #b6b8ba;
826
- --basecolors-text-highlight: #ff5959;
827
- --basecolors-text-light: #ffffff;
828
- --basecolors-text-subdued: #626493;
829
- --basecolors-text-subduedalt: #d9dae8;
830
+ .eds-icon-button {
831
+ border: 0.125rem solid transparent;
832
+ border-radius: 0.25rem;
833
+ background: none;
834
+ color: var(--components-button-iconbutton-standard-text);
835
+ cursor: pointer;
836
+ display: flex;
837
+ justify-content: center;
838
+ align-items: center;
839
+ font-size: 1rem;
840
+ padding: 0.5rem;
830
841
  }
831
-
832
- [data-color-mode=dark] {
833
- --basecolors-frame-contrast: #212233;
834
- --basecolors-frame-contrastalt: #141527;
835
- --basecolors-frame-contrastalt-2: #08091c;
836
- --basecolors-frame-default: #08091c;
837
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
838
- --basecolors-frame-elevatedalt: #464755;
839
- --basecolors-frame-subdued: #2d2e3e;
840
- --basecolors-frame-tint: #141527;
841
- --basecolors-shape-accent: #e5e5e9;
842
- --basecolors-shape-bicycle-contrast: #4db295;
843
- --basecolors-shape-bicycle-default: #4db295;
844
- --basecolors-shape-bus-contrast: #ef7398;
845
- --basecolors-shape-bus-default: #ef7398;
846
- --basecolors-shape-cableway-contrast: #b898e5;
847
- --basecolors-shape-cableway-default: #b898e5;
848
- --basecolors-shape-disabled: #b6b8ba;
849
- --basecolors-shape-disabledalt: #b3b4bd;
850
- --basecolors-shape-ferry-contrast: #8ccfe2;
851
- --basecolors-shape-ferry-default: #8ccfe2;
852
- --basecolors-shape-funicular-contrast: #b898e5;
853
- --basecolors-shape-funicular-default: #b898e5;
854
- --basecolors-shape-helicopter-contrast: #f2b8e5;
855
- --basecolors-shape-helicopter-default: #f2b8e5;
856
- --basecolors-shape-highlight: #ff9494;
857
- --basecolors-shape-light: #e5e5e9;
858
- --basecolors-shape-mask: #2d2e3e;
859
- --basecolors-shape-maskalt: #393a49;
860
- --basecolors-shape-metro-contrast: #dd973c;
861
- --basecolors-shape-metro-default: #dd973c;
862
- --basecolors-shape-mobility-contrast: #4db295;
863
- --basecolors-shape-mobility-default: #4db295;
864
- --basecolors-shape-plane-contrast: #f2b8e5;
865
- --basecolors-shape-plane-default: #f2b8e5;
866
- --basecolors-shape-subdued: #b3b4bd;
867
- --basecolors-shape-subduedalt: #b3b4bd;
868
- --basecolors-shape-taxi-contrast: #ffe082;
869
- --basecolors-shape-taxi-default: #ffe082;
870
- --basecolors-shape-train-contrast: #60a2d7;
871
- --basecolors-shape-train-default: #60a2d7;
872
- --basecolors-shape-tram-contrast: #b898e5;
873
- --basecolors-shape-tram-default: #b898e5;
874
- --basecolors-shape-walk-contrast: #8d8e9c;
875
- --basecolors-shape-walk-default: #8d8e9c;
876
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
877
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
878
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
879
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
880
- --basecolors-stroke-contrast: #aeb7e2;
881
- --basecolors-stroke-default: #b3b4bd;
882
- --basecolors-stroke-disabled: #e3e6e8;
883
- --basecolors-stroke-focus-contrast: #aeb7e2;
884
- --basecolors-stroke-focus-standard: #aeb7e2;
885
- --basecolors-stroke-highlight: #ff9494;
886
- --basecolors-stroke-light: #b3b4bd;
887
- --basecolors-stroke-subdued: #81828f;
888
- --basecolors-stroke-subduedalt: #949699;
889
- --basecolors-text-accent: #e5e5e9;
890
- --basecolors-text-disabled: #b6b8ba;
891
- --basecolors-text-disabledalt: #b6b8ba;
892
- --basecolors-text-highlight: #ff9494;
893
- --basecolors-text-light: #e5e5e9;
894
- --basecolors-text-subdued: #b3b4bd;
895
- --basecolors-text-subduedalt: #b3b4bd;
842
+ .eds-contrast .eds-icon-button {
843
+ color: var(--components-button-iconbutton-contrast-text);
896
844
  }
897
-
898
- :root {
899
- --eds-button: 1;
845
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
846
+ background-color: var(--components-button-iconbutton-contrast-icon);
847
+ }
848
+ .eds-icon-button--size-small {
849
+ height: 1.5rem;
850
+ width: 1.5rem;
851
+ padding: 0;
852
+ }
853
+ .eds-icon-button:hover {
854
+ background-color: var(--components-button-iconbutton-standard-hover);
855
+ }
856
+ .eds-contrast .eds-icon-button:hover {
857
+ background-color: var(--components-button-iconbutton-contrast-hover);
858
+ }
859
+ .eds-icon-button:active {
860
+ background: var(--components-button-iconbutton-standard-active);
861
+ color: var(--components-button-iconbutton-standard-text-active);
862
+ }
863
+ .eds-contrast .eds-icon-button:active {
864
+ background: var(--components-button-iconbutton-contrast-active);
865
+ color: var(--components-button-iconbutton-contrast-text-active);
866
+ }
867
+ .eds-icon-button:focus-visible {
868
+ outline: 2px solid #181c56;
869
+ outline-color: var(--basecolors-stroke-focus-standard);
870
+ outline-offset: 0.125rem;
871
+ }
872
+ .eds-contrast .eds-icon-button:focus-visible {
873
+ outline-color: var(--basecolors-stroke-focus-contrast);
874
+ }
875
+ .eds-icon-button--disabled {
876
+ opacity: 0.5;
877
+ pointer-events: none;
900
878
  }
879
+ .eds-icon-button--disabled__wrapper {
880
+ cursor: not-allowed;
881
+ width: fit-content;
882
+ }