@utrecht/component-library-css 1.0.0-alpha.225 → 1.0.0-alpha.228

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 (3) hide show
  1. package/dist/html.css +56 -17
  2. package/dist/index.css +157 -145
  3. package/package.json +3 -3
package/dist/html.css CHANGED
@@ -377,13 +377,52 @@
377
377
  .utrecht-html input[type=reset i],
378
378
  .utrecht-html input[type=submit i],
379
379
  .utrecht-html button {
380
- background-color: var(--utrecht-button-background-color);
381
- border-color: var(--utrecht-button-border-color, transparent);
382
- border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
380
+ --_utrecht-button-background-color: var(--utrecht-button-background-color);
381
+ --_utrecht-button-color: var(--utrecht-button-color);
382
+ --_utrecht-button-border-color: var(--utrecht-button-border-color, transparent);
383
+ --_utrecht-button-border-bottom-color: var(
384
+ --utrecht-button-border-bottom-color,
385
+ var(--utrecht-button-border-color, transparent)
386
+ );
387
+ --_utrecht-button-disabled-background-color: var(
388
+ --utrecht-button-disabled-background-color,
389
+ var(--utrecht-button-background-color)
390
+ );
391
+ --_utrecht-button-disabled-border-color: var(
392
+ --utrecht-button-disabled-border-color,
393
+ var(--utrecht-button-border-color)
394
+ );
395
+ --_utrecht-button-disabled-color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
396
+ --_utrecht-button-focus-background-color: var(
397
+ --utrecht-button-focus-background-color,
398
+ var(--utrecht-button-background-color)
399
+ );
400
+ --_utrecht-button-focus-border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
401
+ --_utrecht-button-focus-color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
402
+ --_utrecht-button-hover-background-color: var(
403
+ --utrecht-button-hover-background-color,
404
+ var(--utrecht-button-background-color)
405
+ );
406
+ --_utrecht-button-hover-border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
407
+ --_utrecht-button-hover-color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
408
+ --_utrecht-button-active-background-color: var(
409
+ --utrecht-button-active-background-color,
410
+ var(--utrecht-button-background-color)
411
+ );
412
+ --_utrecht-button-active-border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
413
+ --_utrecht-button-active-color: var(--utrecht-button-active-color, var(--utrecht-button-color));
414
+ --_utrecht-button-border-width: var(--utrecht-button-border-width, 0);
415
+ --_utrecht-button-border-bottom-width: var(
416
+ --utrecht-button-border-bottom-width,
417
+ var(--utrecht-button-border-width, 0)
418
+ );
419
+ background-color: var(--_utrecht-button-background-color);
420
+ border-color: var(--_utrecht-button-border-color);
421
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
383
422
  border-radius: var(--utrecht-button-border-radius);
384
423
  border-style: solid;
385
- border-width: var(--utrecht-button-border-width, 0);
386
- border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
424
+ border-width: var(--_utrecht-button-border-width);
425
+ border-bottom-width: var(--_utrecht-button-border-bottom-width);
387
426
  color: var(--utrecht-button-color);
388
427
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
389
428
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
@@ -410,9 +449,9 @@
410
449
  }
411
450
  .utrecht-html button:disabled,
412
451
  .utrecht-html button[aria-disabled=true] {
413
- background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
414
- border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
415
- color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
452
+ background-color: var(--_utrecht-button-disabled-background-color);
453
+ border-color: var(--_utrecht-button-disabled-border-color);
454
+ color: var(--_utrecht-button-disabled-color);
416
455
  cursor: var(--utrecht-action-disabled-cursor);
417
456
  }
418
457
  .utrecht-html button[aria-busy=true],
@@ -421,20 +460,20 @@
421
460
  cursor: var(--utrecht-action-busy-cursor);
422
461
  }
423
462
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
424
- background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
425
- border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
426
- color: var(--utrecht-button-active-color, var(--utrecht-button-color));
463
+ background-color: var(--_utrecht-button-active-background-color);
464
+ border-color: var(--_utrecht-button-active-border-color);
465
+ color: var(--_utrecht-button-active-color);
427
466
  }
428
467
  .utrecht-html button:hover:not([aria-disabled=true]):not(:disabled) {
429
- background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
430
- border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
431
- color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
468
+ background-color: var(--_utrecht-button-hover-background-color);
469
+ border-color: var(--_utrecht-button-hover-border-color);
470
+ color: var(--_utrecht-button-hover-color);
432
471
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
433
472
  }
434
473
  .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
435
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
436
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
437
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
474
+ background-color: var(--_utrecht-button-focus-background-color);
475
+ border-color: var(--_utrecht-button-focus-border-color);
476
+ color: var(--_utrecht-button-focus-color);
438
477
  }
439
478
  .utrecht-html button:focus-visible {
440
479
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
package/dist/index.css CHANGED
@@ -393,13 +393,52 @@ ol.utrecht-breadcrumb__list {
393
393
  */
394
394
  /* stylelint-disable-next-line block-no-empty */
395
395
  .utrecht-button {
396
- background-color: var(--utrecht-button-background-color);
397
- border-color: var(--utrecht-button-border-color, transparent);
398
- border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
396
+ --_utrecht-button-background-color: var(--utrecht-button-background-color);
397
+ --_utrecht-button-color: var(--utrecht-button-color);
398
+ --_utrecht-button-border-color: var(--utrecht-button-border-color, transparent);
399
+ --_utrecht-button-border-bottom-color: var(
400
+ --utrecht-button-border-bottom-color,
401
+ var(--utrecht-button-border-color, transparent)
402
+ );
403
+ --_utrecht-button-disabled-background-color: var(
404
+ --utrecht-button-disabled-background-color,
405
+ var(--utrecht-button-background-color)
406
+ );
407
+ --_utrecht-button-disabled-border-color: var(
408
+ --utrecht-button-disabled-border-color,
409
+ var(--utrecht-button-border-color)
410
+ );
411
+ --_utrecht-button-disabled-color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
412
+ --_utrecht-button-focus-background-color: var(
413
+ --utrecht-button-focus-background-color,
414
+ var(--utrecht-button-background-color)
415
+ );
416
+ --_utrecht-button-focus-border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
417
+ --_utrecht-button-focus-color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
418
+ --_utrecht-button-hover-background-color: var(
419
+ --utrecht-button-hover-background-color,
420
+ var(--utrecht-button-background-color)
421
+ );
422
+ --_utrecht-button-hover-border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
423
+ --_utrecht-button-hover-color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
424
+ --_utrecht-button-active-background-color: var(
425
+ --utrecht-button-active-background-color,
426
+ var(--utrecht-button-background-color)
427
+ );
428
+ --_utrecht-button-active-border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
429
+ --_utrecht-button-active-color: var(--utrecht-button-active-color, var(--utrecht-button-color));
430
+ --_utrecht-button-border-width: var(--utrecht-button-border-width, 0);
431
+ --_utrecht-button-border-bottom-width: var(
432
+ --utrecht-button-border-bottom-width,
433
+ var(--utrecht-button-border-width, 0)
434
+ );
435
+ background-color: var(--_utrecht-button-background-color);
436
+ border-color: var(--_utrecht-button-border-color);
437
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
399
438
  border-radius: var(--utrecht-button-border-radius);
400
439
  border-style: solid;
401
- border-width: var(--utrecht-button-border-width, 0);
402
- border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
440
+ border-width: var(--_utrecht-button-border-width);
441
+ border-bottom-width: var(--_utrecht-button-border-bottom-width);
403
442
  color: var(--utrecht-button-color);
404
443
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
405
444
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
@@ -435,17 +474,17 @@ ol.utrecht-breadcrumb__list {
435
474
 
436
475
  .utrecht-button:disabled,
437
476
  .utrecht-button--disabled {
438
- background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
439
- border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
440
- color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
477
+ background-color: var(--_utrecht-button-disabled-background-color);
478
+ border-color: var(--_utrecht-button-disabled-border-color);
479
+ color: var(--_utrecht-button-disabled-color);
441
480
  cursor: var(--utrecht-action-disabled-cursor);
442
481
  }
443
482
 
444
483
  .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
445
484
  .utrecht-button--active {
446
- background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
447
- border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
448
- color: var(--utrecht-button-active-color, var(--utrecht-button-color));
485
+ background-color: var(--_utrecht-button-active-background-color);
486
+ border-color: var(--_utrecht-button-active-border-color);
487
+ color: var(--_utrecht-button-active-color);
449
488
  }
450
489
 
451
490
  .utrecht-button--focus-visible {
@@ -458,15 +497,15 @@ ol.utrecht-breadcrumb__list {
458
497
  }
459
498
 
460
499
  .utrecht-button--focus {
461
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
462
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
463
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
500
+ background-color: var(--_utrecht-button-focus-background-color);
501
+ border-color: var(--_utrecht-button-focus-border-color);
502
+ color: var(--_utrecht-button-focus-color);
464
503
  }
465
504
 
466
505
  .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
467
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
468
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
469
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
506
+ background-color: var(--_utrecht-button-focus-background-color);
507
+ border-color: var(--_utrecht-button-focus-border-color);
508
+ color: var(--_utrecht-button-focus-color);
470
509
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
471
510
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
472
511
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -485,133 +524,67 @@ ol.utrecht-breadcrumb__list {
485
524
 
486
525
  .utrecht-button--hover:not(:disabled),
487
526
  .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
488
- background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
489
- border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
490
- color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
527
+ background-color: var(--_utrecht-button-hover-background-color);
528
+ border-color: var(--_utrecht-button-hover-border-color);
529
+ color: var(--_utrecht-button-hover-color);
491
530
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
492
531
  }
493
532
 
494
533
  .utrecht-button--primary-action {
495
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
496
- border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
497
- border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
498
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
499
- }
500
-
501
- .utrecht-button--primary-action.utrecht-button--hover:not(:disabled),
502
- .utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
503
- background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
504
- border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
505
- color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
506
- }
507
-
508
- .utrecht-button--primary-action.utrecht-button:disabled,
509
- .utrecht-button--primary-action.utrecht-button--disabled {
510
- background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
511
- border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
512
- color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
513
- }
514
-
515
- .utrecht-button--primary-action:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
516
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
517
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
518
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
519
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
520
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
521
- outline-color: var(--utrecht-focus-outline-color, transparent);
522
- outline-offset: var(--utrecht-focus-outline-offset, 0);
523
- outline-style: var(--utrecht-focus-outline-style, solid);
524
- outline-width: var(--utrecht-focus-outline-width, 0);
525
- }
526
-
527
- /* override the `:focus` selector above */
528
- /* stylelint-disable-next-line no-descending-specificity */
529
- .utrecht-button--primary-action:focus:not(:focus-visible) {
530
- /* undo focus ring */
531
- box-shadow: none;
532
- outline-style: none;
534
+ --utrecht-button-active-background-color: var(--utrecht-button-primary-action-active-background-color);
535
+ --utrecht-button-active-border-color: var(--utrecht-button-primary-action-active-border-color);
536
+ --utrecht-button-active-color: var(--utrecht-button-primary-action-active-color);
537
+ --utrecht-button-background-color: var(--utrecht-button-primary-action-background-color);
538
+ --utrecht-button-border-color: var(--utrecht-button-primary-action-border-color);
539
+ --utrecht-button-border-width: var(--utrecht-button-primary-action-border-width);
540
+ --utrecht-button-color: var(--utrecht-button-primary-action-color);
541
+ --utrecht-button-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
542
+ --utrecht-button-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
543
+ --utrecht-button-disabled-color: var(--utrecht-button-primary-action-disabled-color);
544
+ --utrecht-button-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
545
+ --utrecht-button-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
546
+ --utrecht-button-focus-color: var(--utrecht-button-primary-action-focus-color);
547
+ --utrecht-button-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
548
+ --utrecht-button-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
549
+ --utrecht-button-hover-color: var(--utrecht-button-primary-action-hover-color);
533
550
  }
534
551
 
535
552
  .utrecht-button--secondary-action {
536
- background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
537
- border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
538
- border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
539
- color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
540
- }
541
-
542
- .utrecht-button--secondary-action.utrecht-button--hover:not(:disabled),
543
- .utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
544
- background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
545
- border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
546
- color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
547
- }
548
-
549
- .utrecht-button--secondary-action.utrecht-button:disabled,
550
- .utrecht-button--secondary-action.utrecht-button--disabled {
551
- background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
552
- border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
553
- color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
554
- }
555
-
556
- .utrecht-button--secondary-action:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
557
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
558
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
559
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
560
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
561
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
562
- outline-color: var(--utrecht-focus-outline-color, transparent);
563
- outline-offset: var(--utrecht-focus-outline-offset, 0);
564
- outline-style: var(--utrecht-focus-outline-style, solid);
565
- outline-width: var(--utrecht-focus-outline-width, 0);
566
- }
567
-
568
- /* override the `:focus` selector above */
569
- /* stylelint-disable-next-line no-descending-specificity */
570
- .utrecht-button--secondary-action:focus:not(:focus-visible) {
571
- /* undo focus ring */
572
- box-shadow: none;
573
- outline-style: none;
553
+ --utrecht-button-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
554
+ --utrecht-button-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
555
+ --utrecht-button-active-color: var(--utrecht-button-secondary-action-active-color);
556
+ --utrecht-button-background-color: var(--utrecht-button-secondary-action-background-color);
557
+ --utrecht-button-border-color: var(--utrecht-button-secondary-action-border-color);
558
+ --utrecht-button-border-width: var(--utrecht-button-secondary-action-border-width);
559
+ --utrecht-button-color: var(--utrecht-button-secondary-action-color);
560
+ --utrecht-button-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
561
+ --utrecht-button-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
562
+ --utrecht-button-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
563
+ --utrecht-button-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
564
+ --utrecht-button-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
565
+ --utrecht-button-focus-color: var(--utrecht-button-secondary-action-focus-color);
566
+ --utrecht-button-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
567
+ --utrecht-button-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
568
+ --utrecht-button-hover-color: var(--utrecht-button-secondary-action-hover-color);
574
569
  }
575
570
 
576
571
  .utrecht-button--subtle {
577
- background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
578
- border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
579
- border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
580
- color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
581
- }
582
-
583
- .utrecht-button--subtle.utrecht-button--hover:not(:disabled),
584
- .utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
585
- background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
586
- border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
587
- color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
588
- }
589
-
590
- .utrecht-button--subtle.utrecht-button:disabled,
591
- .utrecht-button--subtle.utrecht-button--disabled {
592
- background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
593
- border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
594
- color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
595
- }
596
-
597
- .utrecht-button--subtle:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
598
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
599
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
600
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
601
- /* the pseudo-class for `:focus-visible` is implemented via the mixin */
602
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
603
- outline-color: var(--utrecht-focus-outline-color, transparent);
604
- outline-offset: var(--utrecht-focus-outline-offset, 0);
605
- outline-style: var(--utrecht-focus-outline-style, solid);
606
- outline-width: var(--utrecht-focus-outline-width, 0);
607
- }
608
-
609
- /* override the `:focus` selector above */
610
- /* stylelint-disable-next-line no-descending-specificity */
611
- .utrecht-button--subtle:focus:not(:focus-visible) {
612
- /* undo focus ring */
613
- box-shadow: none;
614
- outline-style: none;
572
+ --utrecht-button-active-background-color: var(--utrecht-button-subtle-active-background-color);
573
+ --utrecht-button-active-border-color: var(--utrecht-button-subtle-active-border-color);
574
+ --utrecht-button-active-color: var(--utrecht-button-subtle-active-color);
575
+ --utrecht-button-background-color: var(--utrecht-button-subtle-background-color);
576
+ --utrecht-button-border-color: var(--utrecht-button-subtle-border-color);
577
+ --utrecht-button-border-width: var(--utrecht-button-subtle-border-width);
578
+ --utrecht-button-color: var(--utrecht-button-subtle-color);
579
+ --utrecht-button-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
580
+ --utrecht-button-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
581
+ --utrecht-button-disabled-color: var(--utrecht-button-subtle-disabled-color);
582
+ --utrecht-button-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
583
+ --utrecht-button-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
584
+ --utrecht-button-focus-color: var(--utrecht-button-subtle-focus-color);
585
+ --utrecht-button-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
586
+ --utrecht-button-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
587
+ --utrecht-button-hover-color: var(--utrecht-button-subtle-hover-color);
615
588
  }
616
589
 
617
590
  /**
@@ -685,13 +658,52 @@ ol.utrecht-breadcrumb__list {
685
658
  */
686
659
  /* stylelint-disable-next-line block-no-empty */
687
660
  .utrecht-button-link {
688
- background-color: var(--utrecht-button-background-color);
689
- border-color: var(--utrecht-button-border-color, transparent);
690
- border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
661
+ --_utrecht-button-background-color: var(--utrecht-button-background-color);
662
+ --_utrecht-button-color: var(--utrecht-button-color);
663
+ --_utrecht-button-border-color: var(--utrecht-button-border-color, transparent);
664
+ --_utrecht-button-border-bottom-color: var(
665
+ --utrecht-button-border-bottom-color,
666
+ var(--utrecht-button-border-color, transparent)
667
+ );
668
+ --_utrecht-button-disabled-background-color: var(
669
+ --utrecht-button-disabled-background-color,
670
+ var(--utrecht-button-background-color)
671
+ );
672
+ --_utrecht-button-disabled-border-color: var(
673
+ --utrecht-button-disabled-border-color,
674
+ var(--utrecht-button-border-color)
675
+ );
676
+ --_utrecht-button-disabled-color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
677
+ --_utrecht-button-focus-background-color: var(
678
+ --utrecht-button-focus-background-color,
679
+ var(--utrecht-button-background-color)
680
+ );
681
+ --_utrecht-button-focus-border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
682
+ --_utrecht-button-focus-color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
683
+ --_utrecht-button-hover-background-color: var(
684
+ --utrecht-button-hover-background-color,
685
+ var(--utrecht-button-background-color)
686
+ );
687
+ --_utrecht-button-hover-border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
688
+ --_utrecht-button-hover-color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
689
+ --_utrecht-button-active-background-color: var(
690
+ --utrecht-button-active-background-color,
691
+ var(--utrecht-button-background-color)
692
+ );
693
+ --_utrecht-button-active-border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
694
+ --_utrecht-button-active-color: var(--utrecht-button-active-color, var(--utrecht-button-color));
695
+ --_utrecht-button-border-width: var(--utrecht-button-border-width, 0);
696
+ --_utrecht-button-border-bottom-width: var(
697
+ --utrecht-button-border-bottom-width,
698
+ var(--utrecht-button-border-width, 0)
699
+ );
700
+ background-color: var(--_utrecht-button-background-color);
701
+ border-color: var(--_utrecht-button-border-color);
702
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
691
703
  border-radius: var(--utrecht-button-border-radius);
692
704
  border-style: solid;
693
- border-width: var(--utrecht-button-border-width, 0);
694
- border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
705
+ border-width: var(--_utrecht-button-border-width);
706
+ border-bottom-width: var(--_utrecht-button-border-bottom-width);
695
707
  color: var(--utrecht-button-color);
696
708
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
697
709
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
@@ -712,16 +724,16 @@ ol.utrecht-breadcrumb__list {
712
724
  }
713
725
 
714
726
  .utrecht-button-link--hover {
715
- background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
716
- border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
717
- color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
727
+ background-color: var(--_utrecht-button-hover-background-color);
728
+ border-color: var(--_utrecht-button-hover-border-color);
729
+ color: var(--_utrecht-button-hover-color);
718
730
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
719
731
  }
720
732
 
721
733
  .utrecht-button-link--focus {
722
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
723
- border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
724
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
734
+ background-color: var(--_utrecht-button-focus-background-color);
735
+ border-color: var(--_utrecht-button-focus-border-color);
736
+ color: var(--_utrecht-button-focus-color);
725
737
  }
726
738
 
727
739
  .utrecht-button-link--focus-visible {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.225",
2
+ "version": "1.0.0-alpha.228",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.218",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.221",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.51.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "c30a4199b53d30ab54d3cf847bd228a09f46d4a9"
30
+ "gitHead": "de4a0762a38bf0682a9a30bb84e8da86686b3cc3"
31
31
  }