@entur/button 3.0.12 → 3.1.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 (2) hide show
  1. package/dist/styles.css +65 -51
  2. package/package.json +3 -3
package/dist/styles.css CHANGED
@@ -3,15 +3,6 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-button-group .eds-button {
7
- margin-right: 0.75rem;
8
- margin-bottom: 0.75rem;
9
- }
10
- .eds-button-group .eds-button:only-child {
11
- margin: 0;
12
- }
13
- /* DO NOT CHANGE!*/
14
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
15
6
  a.eds-button {
16
7
  padding: 0.5rem 1rem;
17
8
  }
@@ -99,18 +90,17 @@ a.eds-button--size-large {
99
90
  }
100
91
  .eds-button--variant-secondary {
101
92
  background-color: transparent;
102
- border: 0.125rem solid #aeb7e2;
93
+ border: 0.125rem solid #54568c;
103
94
  color: #181c56;
104
95
  }
105
96
  .eds-button--variant-secondary > .eds-button__loading-dots .eds-loading-dots__dot {
106
97
  background: #181c56;
107
98
  }
108
99
  .eds-button--variant-secondary:hover {
109
- background-color: #aeb7e2;
100
+ background-color: #ced4ee;
110
101
  }
111
102
  .eds-button--variant-secondary:active {
112
- background-color: #9da5cb;
113
- border-color: #9da5cb;
103
+ background-color: #aeb7e2;
114
104
  }
115
105
  .eds-contrast .eds-button--variant-secondary {
116
106
  background-color: transparent;
@@ -121,7 +111,7 @@ a.eds-button--size-large {
121
111
  background: #ffffff;
122
112
  }
123
113
  .eds-contrast .eds-button--variant-secondary:hover {
124
- background-color: rgba(255, 255, 255, 0.2);
114
+ background-color: rgba(174, 183, 226, 0.2);
125
115
  }
126
116
  .eds-contrast .eds-button--variant-secondary:active {
127
117
  background: #aeb7e2;
@@ -133,15 +123,26 @@ a.eds-button--size-large {
133
123
  .eds-button--variant-success {
134
124
  background-color: #5ac39a;
135
125
  color: #181c56;
126
+ border: 0.125rem solid #54568c;
127
+ border-radius: 0.25rem;
136
128
  }
137
129
  .eds-button--variant-success > .eds-button__loading-dots .eds-loading-dots__dot {
138
130
  background: #181c56;
139
131
  }
140
132
  .eds-button--variant-success:hover {
141
- background-color: #6bc9a4;
133
+ background: rgba(107, 201, 164, 0.4);
142
134
  }
143
135
  .eds-button--variant-success:active {
144
- background-color: #56b992;
136
+ background-color: #51b08b;
137
+ }
138
+ .eds-contrast .eds-button--variant-success {
139
+ border: none;
140
+ }
141
+ .eds-contrast .eds-button--variant-success:hover {
142
+ background: #6bc9a4;
143
+ }
144
+ .eds-contrast .eds-button--variant-success:active {
145
+ background-color: #51b08b;
145
146
  }
146
147
  .eds-button--variant-negative {
147
148
  background: transparent;
@@ -152,7 +153,7 @@ a.eds-button--size-large {
152
153
  background: #d31b1b;
153
154
  }
154
155
  .eds-button--variant-negative:hover {
155
- background-color: rgba(255, 206, 206, 0.6);
156
+ background-color: rgba(211, 27, 27, 0.2);
156
157
  }
157
158
  .eds-button--variant-negative:active {
158
159
  background-color: #d31b1b;
@@ -169,7 +170,7 @@ a.eds-button--size-large {
169
170
  background: #ffffff;
170
171
  }
171
172
  .eds-contrast .eds-button--variant-negative:hover {
172
- background-color: #4d5086;
173
+ background-color: rgba(255, 148, 148, 0.2);
173
174
  }
174
175
  .eds-contrast .eds-button--variant-negative:active {
175
176
  background-color: #ff9494;
@@ -177,20 +178,19 @@ a.eds-button--size-large {
177
178
  }
178
179
  .eds-button--variant-tertiary {
179
180
  font-size: 0.875rem;
180
- border: 0.0625rem solid #181c56;
181
+ border: 0.0625rem solid #54568c;
181
182
  border-radius: 0.25rem;
182
- background: transparent;
183
+ background-color: transparent;
183
184
  color: #181c56;
184
185
  height: 2rem;
185
186
  padding: 0 0.75rem;
186
187
  min-width: 6rem;
187
188
  }
188
189
  .eds-button--variant-tertiary:hover {
189
- background-color: #d1d4e3;
190
+ background-color: #ced4ee;
190
191
  }
191
192
  .eds-button--variant-tertiary:active {
192
- color: #ffffff;
193
- background-color: #181c56;
193
+ background-color: #aeb7e2;
194
194
  }
195
195
  .eds-button--variant-tertiary.eds-button--leading-icon .eds-icon {
196
196
  margin-right: 0.5rem;
@@ -199,19 +199,23 @@ a.eds-button--size-large {
199
199
  margin-left: 0.5rem;
200
200
  }
201
201
  .eds-contrast .eds-button--variant-tertiary {
202
+ background-color: transparent;
202
203
  color: #ffffff;
203
- border-color: #ffffff;
204
+ border-color: #aeb7e2;
204
205
  }
205
206
  .eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot {
206
207
  background: #ffffff;
207
208
  }
208
209
  .eds-contrast .eds-button--variant-tertiary:hover {
209
- background-color: #393d79;
210
+ background-color: rgba(174, 183, 226, 0.2);
210
211
  }
211
212
  .eds-contrast .eds-button--variant-tertiary:active {
212
- background-color: #ffffff;
213
+ background: #aeb7e2;
213
214
  color: #181c56;
214
215
  }
216
+ .eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot {
217
+ background: #181c56;
218
+ }
215
219
  .eds-button[disabled].eds-button--loading {
216
220
  pointer-events: none;
217
221
  }
@@ -228,6 +232,15 @@ a.eds-button--size-large {
228
232
  }
229
233
  /* DO NOT CHANGE!*/
230
234
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
235
+ .eds-button-group .eds-button {
236
+ margin-right: 0.75rem;
237
+ margin-bottom: 0.75rem;
238
+ }
239
+ .eds-button-group .eds-button:only-child {
240
+ margin: 0;
241
+ }
242
+ /* DO NOT CHANGE!*/
243
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
244
  .eds-floating-button {
232
245
  align-items: center;
233
246
  -webkit-appearance: none;
@@ -358,7 +371,7 @@ a.eds-button--size-large {
358
371
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
372
  .eds-square-button {
360
373
  --icon-color: var(--primary-text-color);
361
- --icon-background: transparent;
374
+ --button-background: transparent;
362
375
  --border-color: transparent;
363
376
  align-items: center;
364
377
  -webkit-appearance: none;
@@ -397,7 +410,7 @@ a.eds-button--size-large {
397
410
 
398
411
  .eds-square-button__icon {
399
412
  align-items: center;
400
- background-color: var(--icon-background);
413
+ background-color: var(--button-background);
401
414
  border: 0.125rem solid var(--border-color);
402
415
  border-radius: 0.25rem;
403
416
  color: var(--icon-color);
@@ -414,21 +427,23 @@ a.eds-button--size-large {
414
427
  }
415
428
 
416
429
  .eds-square-button--secondary {
417
- --icon-background: transparent;
418
- --border-color: #aeb7e2;
430
+ --button-background: transparent;
431
+ --border-color: #54568c;
419
432
  }
420
433
  .eds-square-button--secondary:hover {
421
- --icon-background: #aeb7e2;
434
+ --button-background: rgba(174, 183, 226, 0.4);
422
435
  }
423
436
  .eds-square-button--secondary:active {
424
- --icon-background: #9da5cb;
425
- --border-color: #9da5cb;
437
+ --button-background: #aeb7e2;
438
+ }
439
+ .eds-contrast .eds-square-button--secondary {
440
+ --border-color: #aeb7e2;
426
441
  }
427
442
  .eds-contrast .eds-square-button--secondary:hover {
428
- --icon-background: rgba(255, 255, 255, 0.2);
443
+ --button-background: rgba(174, 183, 226, 0.2);
429
444
  }
430
445
  .eds-contrast .eds-square-button--secondary:active {
431
- --icon-background: #aeb7e2;
446
+ --button-background: #aeb7e2;
432
447
  --icon-color: #181c56;
433
448
  }
434
449
  .eds-contrast .eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
@@ -439,17 +454,22 @@ a.eds-button--size-large {
439
454
  }
440
455
 
441
456
  .eds-square-button--success {
442
- --icon-background: #5ac39a;
457
+ --button-background: #5ac39a;
458
+ --border-color: #54568c;
443
459
  }
444
460
  .eds-square-button--success:hover {
445
- --icon-background: #6bc9a4;
461
+ --button-background: #6bc9a4;
446
462
  }
447
463
  .eds-square-button--success:active {
448
- --icon-background: #56b992;
464
+ --button-background: #51b08b;
449
465
  }
450
466
  .eds-square-button--success .eds-square-button__loading-dots .eds-loading-dots__dot {
451
467
  background: #181c56;
452
468
  }
469
+ .eds-contrast .eds-square-button--success {
470
+ --border-color: transparent;
471
+ --icon-color: #181c56;
472
+ }
453
473
 
454
474
  .eds-square-button__label {
455
475
  color: var(--primary-text-color);
@@ -461,33 +481,27 @@ a.eds-button--size-large {
461
481
  }
462
482
 
463
483
  .eds-square-button--tertiary {
464
- --icon-background: transparent;
465
- --border-color: #181c56;
484
+ --button-background: transparent;
485
+ --border-color: #54568c;
466
486
  font-size: 0.875rem;
467
487
  }
468
488
  .eds-square-button--tertiary:hover {
469
- --icon-background: #d1d4e3;
489
+ --button-background: rgba(174, 183, 226, 0.4);
470
490
  }
471
491
  .eds-square-button--tertiary:active {
472
- --icon-background: #181c56;
473
- --icon-color: #ffffff;
474
- }
475
- .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
476
- background: #ffffff;
492
+ --button-background: #aeb7e2;
477
493
  }
478
494
  .eds-contrast .eds-square-button--tertiary {
479
495
  --border-color: #ffffff;
496
+ --border-color: #aeb7e2;
480
497
  }
481
498
  .eds-contrast .eds-square-button--tertiary:hover {
482
- --icon-background: rgba(255, 255, 255, 0.2);
499
+ --button-background: rgba(174, 183, 226, 0.2);
483
500
  }
484
501
  .eds-contrast .eds-square-button--tertiary:active {
485
- --icon-background: #ffffff;
502
+ --button-background: #aeb7e2;
486
503
  --icon-color: #181c56;
487
504
  }
488
- .eds-contrast .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
489
- background: #181c56;
490
- }
491
505
  .eds-contrast .eds-square-button--tertiary .eds-square-button__loading-dots .eds-loading-dots__dot {
492
506
  background: #ffffff;
493
507
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/button",
3
- "version": "3.0.12",
3
+ "version": "3.1.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/button.esm.js",
@@ -27,10 +27,10 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/loader": "^0.4.35",
30
+ "@entur/loader": "^0.4.37",
31
31
  "@entur/tokens": "^3.10.0",
32
32
  "@entur/utils": "^0.9.3",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
- "gitHead": "6e84c896e30f146cfc15284218f55ab9f1766d46"
35
+ "gitHead": "5fcad4b449082b80b796ab52e68f178977f2eba7"
36
36
  }