@utrecht/component-library-css 1.0.0-alpha.346 → 1.0.0-alpha.348

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 +8 -1
  2. package/dist/index.css +35 -9
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -382,12 +382,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
382
382
  max-inline-size: var(--utrecht-article-max-inline-size);
383
383
  }
384
384
  .utrecht-html blockquote {
385
+ background-color: var(--utrecht-blockquote-background-color);
386
+ color: var(--utrecht-blockquote-color);
385
387
  font-family: var(--utrecht-document-font-family);
386
388
  font-size: var(--utrecht-blockquote-font-size);
389
+ font-style: var(--utrecht-blockquote-font-style);
387
390
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
388
391
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
389
392
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
390
393
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
394
+ padding-block-end: var(--utrecht-blockquote-padding-block-end);
395
+ padding-block-start: var(--utrecht-blockquote-padding-block-start);
396
+ padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
397
+ padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
391
398
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
392
399
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
393
400
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -578,7 +585,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
578
585
  display: inline-flex;
579
586
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
580
587
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
581
- font-weight: var(--utrecht-button-font-weight);
588
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
582
589
  gap: var(--utrecht-button-icon-gap);
583
590
  inline-size: var(--utrecht-button-inline-size, auto);
584
591
  justify-content: center;
package/dist/index.css CHANGED
@@ -208,12 +208,19 @@
208
208
  * Copyright (c) 2021 Robbert Broersma
209
209
  */
210
210
  .utrecht-blockquote {
211
+ background-color: var(--utrecht-blockquote-background-color);
212
+ color: var(--utrecht-blockquote-color);
211
213
  font-family: var(--utrecht-document-font-family);
212
214
  font-size: var(--utrecht-blockquote-font-size);
215
+ font-style: var(--utrecht-blockquote-font-style);
213
216
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
214
217
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
215
218
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
216
219
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
220
+ padding-block-end: var(--utrecht-blockquote-padding-block-end);
221
+ padding-block-start: var(--utrecht-blockquote-padding-block-start);
222
+ padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
223
+ padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
217
224
  }
218
225
 
219
226
  .utrecht-blockquote__attribution {
@@ -589,7 +596,7 @@ ol.utrecht-breadcrumb__list {
589
596
  display: inline-flex;
590
597
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
591
598
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
592
- font-weight: var(--utrecht-button-font-weight);
599
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
593
600
  gap: var(--utrecht-button-icon-gap);
594
601
  inline-size: var(--utrecht-button-inline-size, auto);
595
602
  justify-content: center;
@@ -687,6 +694,7 @@ ol.utrecht-breadcrumb__list {
687
694
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
688
695
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
689
696
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
697
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
690
698
  --_utrecht-button-appearance-disabled-background-color: var(
691
699
  --utrecht-button-primary-action-disabled-background-color
692
700
  );
@@ -708,6 +716,7 @@ ol.utrecht-breadcrumb__list {
708
716
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
709
717
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
710
718
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
719
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
711
720
  --_utrecht-button-appearance-disabled-background-color: var(
712
721
  --utrecht-button-secondary-action-disabled-background-color
713
722
  );
@@ -729,6 +738,7 @@ ol.utrecht-breadcrumb__list {
729
738
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
730
739
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
731
740
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
741
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
732
742
  --_utrecht-button-appearance-disabled-background-color: var(
733
743
  --utrecht-button-subtle-disabled-background-color
734
744
  );
@@ -1312,7 +1322,7 @@ ol.utrecht-breadcrumb__list {
1312
1322
  display: inline-flex;
1313
1323
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1314
1324
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
1315
- font-weight: var(--utrecht-button-font-weight);
1325
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1316
1326
  gap: var(--utrecht-button-icon-gap);
1317
1327
  inline-size: var(--utrecht-button-inline-size, auto);
1318
1328
  justify-content: center;
@@ -1352,12 +1362,13 @@ ol.utrecht-breadcrumb__list {
1352
1362
  outline-width: var(--utrecht-focus-outline-width, 0);
1353
1363
  }
1354
1364
 
1355
- .utrecht-button-link--html-a:hover {
1356
- background-color: var(--_utrecht-button-hover-background-color);
1357
- border-color: var(--_utrecht-button-hover-border-color);
1358
- color: var(--_utrecht-button-hover-color);
1359
- transform: scale(var(--utrecht-button-focus-transform-scale, 1));
1365
+ .utrecht-button-link--placeholder {
1366
+ background-color: var(--_utrecht-button-disabled-background-color);
1367
+ border-color: var(--_utrecht-button-disabled-border-color);
1368
+ color: var(--_utrecht-button-disabled-color);
1369
+ cursor: var(--utrecht-action-disabled-cursor);
1360
1370
  }
1371
+
1361
1372
  .utrecht-button-link--html-a:focus {
1362
1373
  background-color: var(--_utrecht-button-focus-background-color);
1363
1374
  border-color: var(--_utrecht-button-focus-border-color);
@@ -1371,6 +1382,12 @@ ol.utrecht-breadcrumb__list {
1371
1382
  outline-style: var(--utrecht-focus-outline-style, solid);
1372
1383
  outline-width: var(--utrecht-focus-outline-width, 0);
1373
1384
  }
1385
+ .utrecht-button-link--html-a:link:hover {
1386
+ background-color: var(--_utrecht-button-hover-background-color);
1387
+ border-color: var(--_utrecht-button-hover-border-color);
1388
+ color: var(--_utrecht-button-hover-color);
1389
+ transform: scale(var(--utrecht-button-focus-transform-scale, 1));
1390
+ }
1374
1391
 
1375
1392
  .utrecht-button-link--primary-action {
1376
1393
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
@@ -1380,6 +1397,7 @@ ol.utrecht-breadcrumb__list {
1380
1397
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
1381
1398
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
1382
1399
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
1400
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
1383
1401
  --_utrecht-button-appearance-disabled-background-color: var(
1384
1402
  --utrecht-button-primary-action-disabled-background-color
1385
1403
  );
@@ -1401,6 +1419,7 @@ ol.utrecht-breadcrumb__list {
1401
1419
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
1402
1420
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
1403
1421
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
1422
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
1404
1423
  --_utrecht-button-appearance-disabled-background-color: var(
1405
1424
  --utrecht-button-secondary-action-disabled-background-color
1406
1425
  );
@@ -1422,6 +1441,7 @@ ol.utrecht-breadcrumb__list {
1422
1441
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
1423
1442
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
1424
1443
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
1444
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
1425
1445
  --_utrecht-button-appearance-disabled-background-color: var(
1426
1446
  --utrecht-button-subtle-disabled-background-color
1427
1447
  );
@@ -2907,7 +2927,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2907
2927
  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
2908
2928
  }
2909
2929
 
2910
- .utrecht-link:hover,
2930
+ .utrecht-link:link:hover,
2911
2931
  .utrecht-link--hover {
2912
2932
  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
2913
2933
  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -2916,7 +2936,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2916
2936
  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
2917
2937
  }
2918
2938
 
2919
- .utrecht-link:active,
2939
+ .utrecht-link:link:active,
2920
2940
  .utrecht-link--active {
2921
2941
  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
2922
2942
  }
@@ -2971,6 +2991,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
2971
2991
  text-underline-offset: unset;
2972
2992
  }
2973
2993
 
2994
+ .utrecht-link--placeholder {
2995
+ color: var(--utrecht-link-placeholder-color, var(--utrecht-link-color));
2996
+ cursor: var(--utrecht-action-disabled-cursor);
2997
+ text-decoration: none;
2998
+ }
2999
+
2974
3000
  /**
2975
3001
  * @license EUPL-1.2
2976
3002
  * Copyright (c) 2021 Robbert Broersma
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.346",
2
+ "version": "1.0.0-alpha.348",
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",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "eefef66129a595d2a749ef29413e41bbab5be527"
29
+ "gitHead": "0c4529c125c43307432bdd65df9048f644ba0bd4"
30
30
  }