@entur/button 2.10.13 → 2.10.15

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.
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  This package contains the button component
4
4
 
5
- > 💡 Looking for the [documentation](https://design.entur.org/komponenter/knapper/standardknapper)?
5
+ > 💡 Looking for the [documentation](https://design.entur.org/komponenter/knapper/button)?
6
6
 
7
7
  ## Installation
8
8
 
@@ -14,4 +14,4 @@ yarn add @entur/button
14
14
 
15
15
  ## Usage
16
16
 
17
- Please refer to the [documentation](https://design.entur.org/komponenter/knapper/standardknapper) for further usage information.
17
+ Please refer to the [documentation](https://design.entur.org/komponenter/knapper/button) for further usage information.
package/dist/styles.css CHANGED
@@ -1,14 +1,7 @@
1
1
  :root {
2
2
  --eds-button: 1;
3
- }/* DO NOT CHANGE!*/
4
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-button-group .eds-button {
6
- margin-right: 0.75rem;
7
- margin-bottom: 0.75rem;
8
3
  }
9
- .eds-button-group .eds-button:only-child {
10
- margin: 0;
11
- }/* DO NOT CHANGE!*/
4
+ /* DO NOT CHANGE!*/
12
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
13
6
  a.eds-button {
14
7
  padding: 0.5rem 1rem;
@@ -223,7 +216,71 @@ a.eds-button--size-large {
223
216
  background-color: #393d79;
224
217
  border-color: #393d79;
225
218
  color: #aeb7e2;
226
- }/* DO NOT CHANGE!*/
219
+ }
220
+ /* DO NOT CHANGE!*/
221
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
222
+ .eds-button-group .eds-button {
223
+ margin-right: 0.75rem;
224
+ margin-bottom: 0.75rem;
225
+ }
226
+ .eds-button-group .eds-button:only-child {
227
+ margin: 0;
228
+ }
229
+ /* DO NOT CHANGE!*/
230
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
+ .eds-icon-button {
232
+ border: 0.0625rem solid transparent;
233
+ border-radius: 0.25rem;
234
+ background: none;
235
+ color: inherit;
236
+ cursor: pointer;
237
+ display: flex;
238
+ justify-content: center;
239
+ align-items: center;
240
+ font-size: 1rem;
241
+ padding: 0.5rem;
242
+ }
243
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
244
+ background-color: #ffffff;
245
+ }
246
+ .eds-icon-button--size-small {
247
+ height: 1.5rem;
248
+ width: 1.5rem;
249
+ padding: 0;
250
+ }
251
+ .eds-icon-button--size-medium {
252
+ height: 2rem;
253
+ width: 2rem;
254
+ }
255
+ .eds-icon-button:hover {
256
+ background-color: #d1d4e3;
257
+ }
258
+ .eds-contrast .eds-icon-button:hover {
259
+ background-color: #393d79;
260
+ }
261
+ .eds-icon-button:active {
262
+ background: #babbcf;
263
+ }
264
+ .eds-contrast .eds-icon-button:active {
265
+ background: #292b6a;
266
+ }
267
+ .eds-icon-button:focus {
268
+ border: 0.0625rem solid #181c56;
269
+ outline: none;
270
+ }
271
+ .eds-contrast .eds-icon-button:focus {
272
+ border: 0.0625rem solid #ffffff;
273
+ }
274
+ .eds-icon-button--disabled {
275
+ opacity: 0.5;
276
+ pointer-events: none;
277
+ }
278
+ .eds-icon-button--disabled__wrapper {
279
+ cursor: not-allowed;
280
+ width: -moz-fit-content;
281
+ width: fit-content;
282
+ }
283
+ /* DO NOT CHANGE!*/
227
284
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
228
285
  .eds-floating-button {
229
286
  align-items: center;
@@ -296,60 +353,8 @@ a.eds-button--size-large {
296
353
  }
297
354
  .eds-floating-button--extended > *:last-child {
298
355
  margin-right: 0;
299
- }/* DO NOT CHANGE!*/
300
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
301
- .eds-icon-button {
302
- border: 0.0625rem solid transparent;
303
- border-radius: 0.25rem;
304
- background: none;
305
- color: inherit;
306
- cursor: pointer;
307
- display: flex;
308
- justify-content: center;
309
- align-items: center;
310
- font-size: 1rem;
311
- padding: 0.5rem;
312
- }
313
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
314
- background-color: #ffffff;
315
- }
316
- .eds-icon-button--size-small {
317
- height: 1.5rem;
318
- width: 1.5rem;
319
- padding: 0;
320
- }
321
- .eds-icon-button--size-medium {
322
- height: 2rem;
323
- width: 2rem;
324
- }
325
- .eds-icon-button:hover {
326
- background-color: #d1d4e3;
327
- }
328
- .eds-contrast .eds-icon-button:hover {
329
- background-color: #393d79;
330
- }
331
- .eds-icon-button:active {
332
- background: #babbcf;
333
- }
334
- .eds-contrast .eds-icon-button:active {
335
- background: #292b6a;
336
- }
337
- .eds-icon-button:focus {
338
- border: 0.0625rem solid #181c56;
339
- outline: none;
340
- }
341
- .eds-contrast .eds-icon-button:focus {
342
- border: 0.0625rem solid #ffffff;
343
356
  }
344
- .eds-icon-button--disabled {
345
- opacity: 0.5;
346
- pointer-events: none;
347
- }
348
- .eds-icon-button--disabled__wrapper {
349
- cursor: not-allowed;
350
- width: -moz-fit-content;
351
- width: fit-content;
352
- }/* DO NOT CHANGE!*/
357
+ /* DO NOT CHANGE!*/
353
358
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
354
359
  .eds-square-button {
355
360
  --icon-color: var(--primary-text-color);
@@ -410,40 +415,40 @@ a.eds-button--size-large {
410
415
 
411
416
  .eds-square-button--secondary {
412
417
  --icon-background: transparent;
413
- --border-color: $colors-brand-lavender;
418
+ --border-color: #aeb7e2;
414
419
  }
415
420
  .eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
416
421
  background: #181c56;
417
422
  }
418
423
  .eds-square-button--secondary:hover {
419
- --icon-background: $colors-brand-lavender;
424
+ --icon-background: #aeb7e2;
420
425
  }
421
426
  .eds-square-button--secondary:active {
422
- --icon-background: shade($colors-brand-lavender, 10%);
423
- --border-color: shade($colors-brand-lavender, 10%);
427
+ --icon-background: #9da5cb;
428
+ --border-color: #9da5cb;
424
429
  }
425
430
  .eds-contrast .eds-square-button--secondary:hover {
426
- --icon-background: rgba($color: $colors-brand-white, $alpha: 0.2);
431
+ --icon-background: rgba(255, 255, 255, 0.2);
427
432
  }
428
433
  .eds-contrast .eds-square-button--secondary:active {
429
- --icon-background: $colors-brand-lavender;
430
- --icon-color: $colors-brand-blue;
434
+ --icon-background: #aeb7e2;
435
+ --icon-color: #181c56;
431
436
  }
432
437
  .eds-contrast .eds-square-button--secondary .eds-square-button__loading-dots .eds-loading-dots__dot {
433
438
  background: #ffffff;
434
439
  }
435
440
 
436
441
  .eds-square-button--success {
437
- --icon-background: $colors-validation-mint-contrast;
442
+ --icon-background: #5ac39a;
438
443
  }
439
444
  .eds-square-button--success .eds-square-button__loading-dots .eds-loading-dots__dot {
440
445
  background: #181c56;
441
446
  }
442
447
  .eds-square-button--success:hover {
443
- --icon-background: tint($colors-validation-mint-contrast, 10%);
448
+ --icon-background: #6bc9a4;
444
449
  }
445
450
  .eds-square-button--success:active {
446
- --icon-background: shade($colors-validation-mint-contrast, 5%);
451
+ --icon-background: #56b992;
447
452
  }
448
453
 
449
454
  .eds-square-button__label {
@@ -457,7 +462,7 @@ a.eds-button--size-large {
457
462
 
458
463
  .eds-square-button--tertiary {
459
464
  --icon-background: transparent;
460
- --border-color: $colors-brand-blue;
465
+ --border-color: #181c56;
461
466
  font-size: 0.875rem;
462
467
  }
463
468
  .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__icon,
@@ -473,28 +478,28 @@ a.eds-button--size-large {
473
478
  background: #181c56;
474
479
  }
475
480
  .eds-square-button--tertiary:hover {
476
- --icon-background: $colors-blues-blue70;
481
+ --icon-background: #d1d4e3;
477
482
  }
478
483
  .eds-square-button--tertiary:active {
479
- --icon-background: $colors-brand-blue;
480
- --icon-color: $colors-brand-white;
484
+ --icon-background: #181c56;
485
+ --icon-color: #ffffff;
481
486
  }
482
487
  .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
483
488
  background: #ffffff;
484
489
  }
485
490
  .eds-contrast .eds-square-button--tertiary {
486
- --border-color: $colors-brand-white;
491
+ --border-color: #ffffff;
487
492
  }
488
493
  .eds-contrast .eds-square-button--tertiary:hover {
489
- --icon-background: rgba($color: $colors-brand-white, $alpha: 0.2);
494
+ --icon-background: rgba(255, 255, 255, 0.2);
490
495
  }
491
496
  .eds-contrast .eds-square-button--tertiary:active {
492
- --icon-background: $colors-brand-white;
493
- --icon-color: $colors-brand-blue;
497
+ --icon-background: #ffffff;
498
+ --icon-color: #181c56;
494
499
  }
495
500
  .eds-contrast .eds-square-button--tertiary:active .eds-square-button__loading-dots .eds-loading-dots__dot {
496
501
  background: #181c56;
497
502
  }
498
503
  .eds-contrast .eds-square-button--tertiary .eds-square-button__loading-dots .eds-loading-dots__dot {
499
504
  background: #ffffff;
500
- }
505
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/button",
3
- "version": "2.10.13",
3
+ "version": "2.10.15",
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.21",
31
- "@entur/tokens": "^3.7.0",
32
- "@entur/utils": "^0.5.4",
30
+ "@entur/loader": "^0.4.23",
31
+ "@entur/tokens": "^3.8.0",
32
+ "@entur/utils": "^0.5.5",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
- "gitHead": "0488198c40c8c610f981c97c8a755a9a435044dd"
35
+ "gitHead": "8019b1b3a39b30bf1052ae34ed1c06b6caf1aa34"
36
36
  }