@entur/button 3.3.11 → 3.3.13-beta.0

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