@utrecht/component-library-css 1.0.0-alpha.190 → 1.0.0-alpha.193

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 (7) hide show
  1. package/README.md +1 -1
  2. package/dist/bem.css +10 -5
  3. package/dist/html.css +20 -10
  4. package/dist/index.css +34 -19
  5. package/dist/root-theme.css +4 -4
  6. package/html-component.md +1 -1
  7. package/package.json +4 -4
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  CSS components are developed using BEM class names and the stylesheets can be included in your page side-effect free. Apply the class names to your elements to make them stylable using design tokens.
6
6
 
7
7
  ```shell
8
- npm install --save-dev @utrecht/component-library-css
8
+ npm install --save-dev --save-exact @utrecht/component-library-css
9
9
 
10
10
  ```
11
11
 
package/dist/bem.css CHANGED
@@ -328,6 +328,7 @@ ol.utrecht-breadcrumb__list {
328
328
  /* stylelint-disable-next-line block-no-empty */
329
329
  .utrecht-button {
330
330
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
331
+ border-color: var(--utrecht-button-border-color, transparent);
331
332
  border-radius: var(--utrecht-button-border-radius);
332
333
  border-style: solid;
333
334
  border-width: var(--utrecht-button-border-width, 0);
@@ -366,6 +367,7 @@ ol.utrecht-breadcrumb__list {
366
367
  .utrecht-button:disabled,
367
368
  .utrecht-button--disabled {
368
369
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
370
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
369
371
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
370
372
  cursor: var(--utrecht-action-disabled-cursor);
371
373
  }
@@ -373,6 +375,7 @@ ol.utrecht-breadcrumb__list {
373
375
  .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
374
376
  .utrecht-button--active {
375
377
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
378
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
376
379
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
377
380
  }
378
381
 
@@ -387,6 +390,7 @@ ol.utrecht-breadcrumb__list {
387
390
 
388
391
  .utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
389
392
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
393
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
390
394
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
391
395
  }
392
396
 
@@ -401,6 +405,7 @@ ol.utrecht-breadcrumb__list {
401
405
  .utrecht-button--hover:not(:disabled),
402
406
  .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
403
407
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
408
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
404
409
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
405
410
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
406
411
  }
@@ -2342,11 +2347,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
2342
2347
  vertical-align: baseline;
2343
2348
  }
2344
2349
 
2345
- .utrecht-table__heading {
2346
- color: var(--utrecht-table-heading-color);
2347
- font-size: var(--utrecht-table-heading-font-size);
2348
- font-weight: var(--utrecht-table-heading-font-weight);
2349
- text-transform: var(--utrecht-table-heading-text-transform);
2350
+ .utrecht-table__header-cell {
2351
+ color: var(--utrecht-table-header-cell-color);
2352
+ font-size: var(--utrecht-table-header-cell-font-size);
2353
+ font-weight: var(--utrecht-table-header-cell-font-weight);
2354
+ text-transform: var(--utrecht-table-header-cell-text-transform);
2350
2355
  }
2351
2356
 
2352
2357
  .utrecht-table__cell {
package/dist/html.css CHANGED
@@ -78,6 +78,7 @@
78
78
  .utrecht-html input[type=submit i],
79
79
  .utrecht-html button {
80
80
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
81
+ border-color: var(--utrecht-button-border-color, transparent);
81
82
  border-radius: var(--utrecht-button-border-radius);
82
83
  border-style: solid;
83
84
  border-width: var(--utrecht-button-border-width, 0);
@@ -126,6 +127,7 @@
126
127
  .utrecht-button--disabled,
127
128
  .utrecht-html button[aria-disabled=true] {
128
129
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
130
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
129
131
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
130
132
  cursor: var(--utrecht-action-disabled-cursor);
131
133
  }
@@ -136,6 +138,7 @@
136
138
  .utrecht-button--active,
137
139
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
138
140
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
141
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
139
142
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
140
143
  }
141
144
 
@@ -156,6 +159,7 @@
156
159
  .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
157
160
  .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
158
161
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
162
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
159
163
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
160
164
  }
161
165
 
@@ -176,6 +180,7 @@
176
180
  .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
177
181
  .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
178
182
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
183
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
179
184
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
180
185
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
181
186
  }
@@ -590,6 +595,7 @@
590
595
  .utrecht-html input[type=submit i],
591
596
  .utrecht-html button {
592
597
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
598
+ border-color: var(--utrecht-button-border-color, transparent);
593
599
  border-radius: var(--utrecht-button-border-radius);
594
600
  border-style: solid;
595
601
  border-width: var(--utrecht-button-border-width, 0);
@@ -638,6 +644,7 @@
638
644
  .utrecht-button--disabled,
639
645
  .utrecht-html button[aria-disabled=true] {
640
646
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
647
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
641
648
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
642
649
  cursor: var(--utrecht-action-disabled-cursor);
643
650
  }
@@ -648,6 +655,7 @@
648
655
  .utrecht-button--active,
649
656
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
650
657
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
658
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
651
659
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
652
660
  }
653
661
 
@@ -668,6 +676,7 @@
668
676
  .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
669
677
  .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
670
678
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
679
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
671
680
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
672
681
  }
673
682
 
@@ -688,6 +697,7 @@
688
697
  .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
689
698
  .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
690
699
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
700
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
691
701
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
692
702
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
693
703
  }
@@ -1317,11 +1327,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
1317
1327
  vertical-align: baseline;
1318
1328
  }
1319
1329
 
1320
- .utrecht-table__heading, .utrecht-html th {
1321
- color: var(--utrecht-table-heading-color);
1322
- font-size: var(--utrecht-table-heading-font-size);
1323
- font-weight: var(--utrecht-table-heading-font-weight);
1324
- text-transform: var(--utrecht-table-heading-text-transform);
1330
+ .utrecht-table__header-cell, .utrecht-html th {
1331
+ color: var(--utrecht-table-header-cell-color);
1332
+ font-size: var(--utrecht-table-header-cell-font-size);
1333
+ font-weight: var(--utrecht-table-header-cell-font-weight);
1334
+ text-transform: var(--utrecht-table-header-cell-text-transform);
1325
1335
  }
1326
1336
 
1327
1337
  .utrecht-table__cell, .utrecht-html th,
@@ -2102,11 +2112,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
2102
2112
  vertical-align: baseline;
2103
2113
  }
2104
2114
 
2105
- .utrecht-table__heading, .utrecht-html th {
2106
- color: var(--utrecht-table-heading-color);
2107
- font-size: var(--utrecht-table-heading-font-size);
2108
- font-weight: var(--utrecht-table-heading-font-weight);
2109
- text-transform: var(--utrecht-table-heading-text-transform);
2115
+ .utrecht-table__header-cell, .utrecht-html th {
2116
+ color: var(--utrecht-table-header-cell-color);
2117
+ font-size: var(--utrecht-table-header-cell-font-size);
2118
+ font-weight: var(--utrecht-table-header-cell-font-weight);
2119
+ text-transform: var(--utrecht-table-header-cell-text-transform);
2110
2120
  }
2111
2121
 
2112
2122
  .utrecht-table__cell, .utrecht-html th,
package/dist/index.css CHANGED
@@ -340,6 +340,7 @@ ol.utrecht-breadcrumb__list {
340
340
  .utrecht-html input[type=submit i],
341
341
  .utrecht-html button {
342
342
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
343
+ border-color: var(--utrecht-button-border-color, transparent);
343
344
  border-radius: var(--utrecht-button-border-radius);
344
345
  border-style: solid;
345
346
  border-width: var(--utrecht-button-border-width, 0);
@@ -388,6 +389,7 @@ ol.utrecht-breadcrumb__list {
388
389
  .utrecht-button--disabled,
389
390
  .utrecht-html button[aria-disabled=true] {
390
391
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
392
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
391
393
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
392
394
  cursor: var(--utrecht-action-disabled-cursor);
393
395
  }
@@ -398,6 +400,7 @@ ol.utrecht-breadcrumb__list {
398
400
  .utrecht-button--active,
399
401
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
400
402
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
403
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
401
404
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
402
405
  }
403
406
 
@@ -418,6 +421,7 @@ ol.utrecht-breadcrumb__list {
418
421
  .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
419
422
  .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
420
423
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
424
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
421
425
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
422
426
  }
423
427
 
@@ -438,6 +442,7 @@ ol.utrecht-breadcrumb__list {
438
442
  .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
439
443
  .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
440
444
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
445
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
441
446
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
442
447
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
443
448
  }
@@ -2382,11 +2387,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
2382
2387
  vertical-align: baseline;
2383
2388
  }
2384
2389
 
2385
- .utrecht-table__heading, .utrecht-html th {
2386
- color: var(--utrecht-table-heading-color);
2387
- font-size: var(--utrecht-table-heading-font-size);
2388
- font-weight: var(--utrecht-table-heading-font-weight);
2389
- text-transform: var(--utrecht-table-heading-text-transform);
2390
+ .utrecht-table__header-cell, .utrecht-html th {
2391
+ color: var(--utrecht-table-header-cell-color);
2392
+ font-size: var(--utrecht-table-header-cell-font-size);
2393
+ font-weight: var(--utrecht-table-header-cell-font-weight);
2394
+ text-transform: var(--utrecht-table-header-cell-text-transform);
2390
2395
  }
2391
2396
 
2392
2397
  .utrecht-table__cell, .utrecht-html th,
@@ -2845,6 +2850,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2845
2850
  .utrecht-html input[type=submit i],
2846
2851
  .utrecht-html button {
2847
2852
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
2853
+ border-color: var(--utrecht-button-border-color, transparent);
2848
2854
  border-radius: var(--utrecht-button-border-radius);
2849
2855
  border-style: solid;
2850
2856
  border-width: var(--utrecht-button-border-width, 0);
@@ -2893,6 +2899,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2893
2899
  .utrecht-button--disabled,
2894
2900
  .utrecht-html button[aria-disabled=true] {
2895
2901
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
2902
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
2896
2903
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
2897
2904
  cursor: var(--utrecht-action-disabled-cursor);
2898
2905
  }
@@ -2903,6 +2910,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2903
2910
  .utrecht-button--active,
2904
2911
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
2905
2912
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
2913
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
2906
2914
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
2907
2915
  }
2908
2916
 
@@ -2923,6 +2931,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2923
2931
  .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
2924
2932
  .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
2925
2933
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
2934
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
2926
2935
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
2927
2936
  }
2928
2937
 
@@ -2943,6 +2952,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2943
2952
  .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
2944
2953
  .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
2945
2954
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
2955
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
2946
2956
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
2947
2957
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
2948
2958
  }
@@ -3357,6 +3367,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3357
3367
  .utrecht-html input[type=submit i],
3358
3368
  .utrecht-html button {
3359
3369
  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
3370
+ border-color: var(--utrecht-button-border-color, transparent);
3360
3371
  border-radius: var(--utrecht-button-border-radius);
3361
3372
  border-style: solid;
3362
3373
  border-width: var(--utrecht-button-border-width, 0);
@@ -3405,6 +3416,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3405
3416
  .utrecht-button--disabled,
3406
3417
  .utrecht-html button[aria-disabled=true] {
3407
3418
  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
3419
+ border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
3408
3420
  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
3409
3421
  cursor: var(--utrecht-action-disabled-cursor);
3410
3422
  }
@@ -3415,6 +3427,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3415
3427
  .utrecht-button--active,
3416
3428
  .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
3417
3429
  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
3430
+ border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
3418
3431
  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
3419
3432
  }
3420
3433
 
@@ -3435,6 +3448,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3435
3448
  .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
3436
3449
  .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
3437
3450
  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
3451
+ border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
3438
3452
  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
3439
3453
  }
3440
3454
 
@@ -3455,6 +3469,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3455
3469
  .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
3456
3470
  .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
3457
3471
  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
3472
+ border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
3458
3473
  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
3459
3474
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
3460
3475
  }
@@ -4084,11 +4099,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
4084
4099
  vertical-align: baseline;
4085
4100
  }
4086
4101
 
4087
- .utrecht-table__heading, .utrecht-html th {
4088
- color: var(--utrecht-table-heading-color);
4089
- font-size: var(--utrecht-table-heading-font-size);
4090
- font-weight: var(--utrecht-table-heading-font-weight);
4091
- text-transform: var(--utrecht-table-heading-text-transform);
4102
+ .utrecht-table__header-cell, .utrecht-html th {
4103
+ color: var(--utrecht-table-header-cell-color);
4104
+ font-size: var(--utrecht-table-header-cell-font-size);
4105
+ font-weight: var(--utrecht-table-header-cell-font-weight);
4106
+ text-transform: var(--utrecht-table-header-cell-text-transform);
4092
4107
  }
4093
4108
 
4094
4109
  .utrecht-table__cell, .utrecht-html th,
@@ -4869,11 +4884,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
4869
4884
  vertical-align: baseline;
4870
4885
  }
4871
4886
 
4872
- .utrecht-table__heading, .utrecht-html th {
4873
- color: var(--utrecht-table-heading-color);
4874
- font-size: var(--utrecht-table-heading-font-size);
4875
- font-weight: var(--utrecht-table-heading-font-weight);
4876
- text-transform: var(--utrecht-table-heading-text-transform);
4887
+ .utrecht-table__header-cell, .utrecht-html th {
4888
+ color: var(--utrecht-table-header-cell-color);
4889
+ font-size: var(--utrecht-table-header-cell-font-size);
4890
+ font-weight: var(--utrecht-table-header-cell-font-weight);
4891
+ text-transform: var(--utrecht-table-header-cell-text-transform);
4877
4892
  }
4878
4893
 
4879
4894
  .utrecht-table__cell, .utrecht-html th,
@@ -5264,7 +5279,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5264
5279
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
5265
5280
  /**
5266
5281
  * Do not edit directly
5267
- * Generated on Thu, 07 Apr 2022 16:34:57 GMT
5282
+ * Generated on Thu, 21 Apr 2022 15:33:00 GMT
5268
5283
  */
5269
5284
  :root {
5270
5285
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -5607,11 +5622,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
5607
5622
  --utrecht-action-submit-cursor: pointer;
5608
5623
  --utrecht-action-disabled-cursor: not-allowed;
5609
5624
  --utrecht-action-busy-cursor: wait;
5610
- --utrecht-button-border-radius: 0;
5611
5625
  --utrecht-button-focus-transform-scale: 1.02;
5612
5626
  --utrecht-button-margin-inline-end: 0;
5613
5627
  --utrecht-button-margin-inline-start: 0;
5614
5628
  --utrecht-button-border-width: 0;
5629
+ --utrecht-button-border-radius: 0;
5615
5630
  --utrecht-breadcrumb-divider-inline-size: 1px;
5616
5631
  --utrecht-breadcrumb-block-size: 34px;
5617
5632
  --utrecht-blockquote-content-font-size: 1.125rem;
@@ -5829,15 +5844,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
5829
5844
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
5830
5845
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
5831
5846
  --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
5832
- --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
5833
5847
  --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
5834
5848
  --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
5835
5849
  --utrecht-button-primary-action-color: var(--utrecht-color-white);
5836
5850
  --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
5837
5851
  --utrecht-button-focus-border-width: var(--utrecht-border-width-md);
5838
5852
  --utrecht-button-focus-border-color: var(--utrecht-color-blue-40);
5839
- --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
5840
5853
  --utrecht-button-disabled-color: var(--utrecht-color-white);
5854
+ --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
5841
5855
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
5842
5856
  --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
5843
5857
  --utrecht-button-padding-block-end: var(--utrecht-space-block-sm);
@@ -5845,6 +5859,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5845
5859
  --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
5846
5860
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
5847
5861
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
5862
+ --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
5848
5863
  --utrecht-button-color: var(--utrecht-color-white);
5849
5864
  --utrecht-button-background-color: var(--utrecht-color-blue-35);
5850
5865
  --utrecht-breadcrumb-link-focus-color: var(--utrecht-color-black);
package/dist/root-theme.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Thu, 07 Apr 2022 16:34:57 GMT
8
+ * Generated on Thu, 21 Apr 2022 15:33:00 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -348,11 +348,11 @@
348
348
  --utrecht-action-submit-cursor: pointer;
349
349
  --utrecht-action-disabled-cursor: not-allowed;
350
350
  --utrecht-action-busy-cursor: wait;
351
- --utrecht-button-border-radius: 0;
352
351
  --utrecht-button-focus-transform-scale: 1.02;
353
352
  --utrecht-button-margin-inline-end: 0;
354
353
  --utrecht-button-margin-inline-start: 0;
355
354
  --utrecht-button-border-width: 0;
355
+ --utrecht-button-border-radius: 0;
356
356
  --utrecht-breadcrumb-divider-inline-size: 1px;
357
357
  --utrecht-breadcrumb-block-size: 34px;
358
358
  --utrecht-blockquote-content-font-size: 1.125rem;
@@ -570,15 +570,14 @@
570
570
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
571
571
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
572
572
  --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
573
- --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
574
573
  --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
575
574
  --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
576
575
  --utrecht-button-primary-action-color: var(--utrecht-color-white);
577
576
  --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
578
577
  --utrecht-button-focus-border-width: var(--utrecht-border-width-md);
579
578
  --utrecht-button-focus-border-color: var(--utrecht-color-blue-40);
580
- --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
581
579
  --utrecht-button-disabled-color: var(--utrecht-color-white);
580
+ --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
582
581
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
583
582
  --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
584
583
  --utrecht-button-padding-block-end: var(--utrecht-space-block-sm);
@@ -586,6 +585,7 @@
586
585
  --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
587
586
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
588
587
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
588
+ --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
589
589
  --utrecht-button-color: var(--utrecht-color-white);
590
590
  --utrecht-button-background-color: var(--utrecht-color-blue-35);
591
591
  --utrecht-breadcrumb-link-focus-color: var(--utrecht-color-black);
package/html-component.md CHANGED
@@ -5,7 +5,7 @@
5
5
  HTML components contain a small subset of the CSS components, for components that occur in regular HTML pages with semantic HTML. You can apply the `utrecht-html-content` class name to your page, and any semantic HTML will be styled automatically. This can be helpful to style HTML content from a CMS, for example.
6
6
 
7
7
  ```shell
8
- npm install --save-dev @utrecht/component-library-css
8
+ npm install --save-dev --save-exact @utrecht/component-library-css
9
9
  ```
10
10
 
11
11
  Include the CSS in your HTML page like so:
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.190",
2
+ "version": "1.0.0-alpha.193",
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,15 +16,15 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.183",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.186",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
- "sass": "1.50.0"
22
+ "sass": "1.50.1"
23
23
  },
24
24
  "scripts": {
25
25
  "prebuild": "npm run clean",
26
26
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
27
27
  "clean": "rimraf dist/"
28
28
  },
29
- "gitHead": "547979f9308b4144dab0cec889ec5ff4d13e724b"
29
+ "gitHead": "021f12f8d2a74a327bcb2e4c946321367faf3c07"
30
30
  }