@utrecht/component-library-css 1.0.0-alpha.134 → 1.0.0-alpha.138

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 (4) hide show
  1. package/dist/bem.css +4 -4
  2. package/dist/index.css +26 -9
  3. package/dist/root-theme.css +22 -5
  4. package/package.json +3 -3
package/dist/bem.css CHANGED
@@ -43,7 +43,7 @@
43
43
  display: inline-block;
44
44
  font-family: var(--utrecht-document-font-family, sans-serif);
45
45
  font-size: var(--utrecht-badge-font-size, inherit);
46
- font-style: normal;
46
+ font-style: var(--utrecht-badge-font-style, normal);
47
47
  /* no inheritance */
48
48
  font-weight: var(--utrecht-badge-font-weight, bold);
49
49
  /* no inheritance */
@@ -62,7 +62,7 @@
62
62
  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));
63
63
  display: inline-block;
64
64
  font-family: var(--utrecht-document-font-family, sans-serif);
65
- font-style: normal;
65
+ font-style: var(--utrecht-badge-counter-font-style, normal);
66
66
  /* no inheritance */
67
67
  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
68
68
  /* no inheritance */
@@ -89,7 +89,7 @@
89
89
  display: inline-block;
90
90
  font-family: var(--utrecht-document-font-family, sans-serif);
91
91
  font-size: var(--utrecht-badge-font-size, inherit);
92
- font-style: normal;
92
+ font-style: var(--utrecht-badge-font-style, normal);
93
93
  /* no inheritance */
94
94
  font-weight: var(--utrecht-badge-font-weight, bold);
95
95
  /* no inheritance */
@@ -122,7 +122,7 @@
122
122
  display: inline-block;
123
123
  font-family: var(--utrecht-document-font-family, sans-serif);
124
124
  font-size: var(--utrecht-badge-font-size, inherit);
125
- font-style: normal;
125
+ font-style: var(--utrecht-badge-font-style, normal);
126
126
  /* no inheritance */
127
127
  font-weight: var(--utrecht-badge-font-weight, bold);
128
128
  /* no inheritance */
package/dist/index.css CHANGED
@@ -52,7 +52,7 @@
52
52
  display: inline-block;
53
53
  font-family: var(--utrecht-document-font-family, sans-serif);
54
54
  font-size: var(--utrecht-badge-font-size, inherit);
55
- font-style: normal;
55
+ font-style: var(--utrecht-badge-font-style, normal);
56
56
  /* no inheritance */
57
57
  font-weight: var(--utrecht-badge-font-weight, bold);
58
58
  /* no inheritance */
@@ -71,7 +71,7 @@
71
71
  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));
72
72
  display: inline-block;
73
73
  font-family: var(--utrecht-document-font-family, sans-serif);
74
- font-style: normal;
74
+ font-style: var(--utrecht-badge-counter-font-style, normal);
75
75
  /* no inheritance */
76
76
  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
77
77
  /* no inheritance */
@@ -98,7 +98,7 @@
98
98
  display: inline-block;
99
99
  font-family: var(--utrecht-document-font-family, sans-serif);
100
100
  font-size: var(--utrecht-badge-font-size, inherit);
101
- font-style: normal;
101
+ font-style: var(--utrecht-badge-font-style, normal);
102
102
  /* no inheritance */
103
103
  font-weight: var(--utrecht-badge-font-weight, bold);
104
104
  /* no inheritance */
@@ -131,7 +131,7 @@
131
131
  display: inline-block;
132
132
  font-family: var(--utrecht-document-font-family, sans-serif);
133
133
  font-size: var(--utrecht-badge-font-size, inherit);
134
- font-style: normal;
134
+ font-style: var(--utrecht-badge-font-style, normal);
135
135
  /* no inheritance */
136
136
  font-weight: var(--utrecht-badge-font-weight, bold);
137
137
  /* no inheritance */
@@ -5285,7 +5285,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5285
5285
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
5286
5286
  /**
5287
5287
  * Do not edit directly
5288
- * Generated on Fri, 26 Nov 2021 15:39:22 GMT
5288
+ * Generated on Thu, 02 Dec 2021 16:06:39 GMT
5289
5289
  */
5290
5290
  :root {
5291
5291
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -5305,6 +5305,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
5305
5305
  --utrecht-border-style-solid: solid;
5306
5306
  --utrecht-border-width-md: 2px;
5307
5307
  --utrecht-border-width-sm: 1px;
5308
+ --utrecht-typography-line-height-xl: 1.5;
5309
+ --utrecht-typography-line-height-lg: 1.4;
5310
+ --utrecht-typography-line-height-md: 1.2;
5311
+ --utrecht-typography-line-height-sm: 1;
5312
+ --utrecht-typography-letter-spacing-lg: 3px;
5313
+ --utrecht-typography-letter-spacing-md: 1px;
5314
+ --utrecht-typography-letter-spacing-sm: 0.8px;
5315
+ --utrecht-typography-letter-spacing-normal: normal;
5316
+ --utrecht-typography-font-style-inherit: inherit;
5317
+ --utrecht-typography-font-style-normal: normal;
5308
5318
  --utrecht-typography-weight-scale-normal-font-weight: normal;
5309
5319
  --utrecht-typography-weight-scale-bold-font-weight: bold;
5310
5320
  --utrecht-typography-scale-4xl-font-size: 2rem;
@@ -5355,9 +5365,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
5355
5365
  /* basis grijs #727272 */
5356
5366
  --utrecht-color-grey-30: hsl(0 0% 30%);
5357
5367
  /* border grijs #888 */
5368
+ --utrecht-color-grey-20: hsl(0 0% 20%);
5369
+ /* experimenteel / beperkt gebruiken */
5358
5370
  --utrecht-color-grey-15: hsl(0 0% 15%);
5359
5371
  /* experimenteel / beperkt gebruiken */
5360
- --utrecht-color-grey-10: hsl(0 0% 11%);
5372
+ --utrecht-color-grey-10: hsl(0 0% 10%);
5361
5373
  /* experimenteel / beperkt gebruiken */
5362
5374
  --utrecht-color-blue-90: hsl(211 60% 90%);
5363
5375
  /* ijsblauw variant achtergrond, spotlight en uitgelicht */
@@ -5373,6 +5385,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
5373
5385
  /* Deze kleur gebruiken we niet */
5374
5386
  --utrecht-color-blue-20: hsl(211 60% 20%);
5375
5387
  /* basis donkerblauw (OS focus) */
5388
+ --utrecht-color-red-95: hsl(0 100% 95%);
5389
+ /* Achtergrond rode kleur */
5376
5390
  --utrecht-color-red-40: hsl(0 100% 40%);
5377
5391
  /* basis rood #cc0000 */
5378
5392
  --utrecht-color-red-30: hsl(0 100% 30%);
@@ -5680,6 +5694,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5680
5694
  --utrecht-search-bar-textbox-border-color: var(--utrecht-color-red-40);
5681
5695
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
5682
5696
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
5697
+ --utrecht-badge-counter-font-style: var(--utrecht-typography-font-style-normal);
5683
5698
  --utrecht-badge-counter-color: var(--utrecht-color-white);
5684
5699
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40);
5685
5700
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
@@ -5743,7 +5758,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5743
5758
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
5744
5759
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
5745
5760
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
5746
- --utrecht-link-color: var(--utrecht-color-blue-30);
5761
+ --utrecht-link-color: var(--utrecht-color-blue-35);
5747
5762
  --utrecht-link-list-item-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
5748
5763
  --utrecht-link-list-item-margin-block-start: var(--utrecht-space-block-xs);
5749
5764
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -5752,7 +5767,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5752
5767
  --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
5753
5768
  --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
5754
5769
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
5755
- --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-30);
5770
+ --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
5756
5771
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
5757
5772
  --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
5758
5773
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
@@ -5762,6 +5777,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5762
5777
  --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
5763
5778
  --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
5764
5779
  --utrecht-form-input-focus-border-color: var(--utrecht-color-grey-80);
5780
+ --utrecht-form-input-placeholder-font-style: var(--utrecht-typography-font-style-normal);
5765
5781
  --utrecht-form-input-placeholder-color: var(--utrecht-color-grey-40);
5766
5782
  --utrecht-form-input-font-size: var(--utrecht-typography-scale-md-font-size);
5767
5783
  --utrecht-form-input-color: var(--utrecht-color-black);
@@ -5778,7 +5794,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5778
5794
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
5779
5795
  --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
5780
5796
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
5781
- --utrecht-document-color: var(--utrecht-color-black);
5797
+ --utrecht-document-color: var(--utrecht-color-grey-10);
5782
5798
  --utrecht-document-background-color: var(--utrecht-color-white);
5783
5799
  --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
5784
5800
  --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
@@ -5848,6 +5864,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5848
5864
  --utrecht-breadcrumb-item-padding-block-start: var(--utrecht-space-block-xs);
5849
5865
  --utrecht-breadcrumb-font-size: var(--utrecht-typography-scale-sm-font-size);
5850
5866
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
5867
+ --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
5851
5868
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm);
5852
5869
  /* Default inline padding color for badge components */
5853
5870
  --utrecht-badge-padding-block: var(--utrecht-space-block-xs);
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 Fri, 26 Nov 2021 15:39:22 GMT
8
+ * Generated on Thu, 02 Dec 2021 16:06:39 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -25,6 +25,16 @@
25
25
  --utrecht-border-style-solid: solid;
26
26
  --utrecht-border-width-md: 2px;
27
27
  --utrecht-border-width-sm: 1px;
28
+ --utrecht-typography-line-height-xl: 1.5;
29
+ --utrecht-typography-line-height-lg: 1.4;
30
+ --utrecht-typography-line-height-md: 1.2;
31
+ --utrecht-typography-line-height-sm: 1;
32
+ --utrecht-typography-letter-spacing-lg: 3px;
33
+ --utrecht-typography-letter-spacing-md: 1px;
34
+ --utrecht-typography-letter-spacing-sm: 0.8px;
35
+ --utrecht-typography-letter-spacing-normal: normal;
36
+ --utrecht-typography-font-style-inherit: inherit;
37
+ --utrecht-typography-font-style-normal: normal;
28
38
  --utrecht-typography-weight-scale-normal-font-weight: normal;
29
39
  --utrecht-typography-weight-scale-bold-font-weight: bold;
30
40
  --utrecht-typography-scale-4xl-font-size: 2rem;
@@ -75,9 +85,11 @@
75
85
  /* basis grijs #727272 */
76
86
  --utrecht-color-grey-30: hsl(0 0% 30%);
77
87
  /* border grijs #888 */
88
+ --utrecht-color-grey-20: hsl(0 0% 20%);
89
+ /* experimenteel / beperkt gebruiken */
78
90
  --utrecht-color-grey-15: hsl(0 0% 15%);
79
91
  /* experimenteel / beperkt gebruiken */
80
- --utrecht-color-grey-10: hsl(0 0% 11%);
92
+ --utrecht-color-grey-10: hsl(0 0% 10%);
81
93
  /* experimenteel / beperkt gebruiken */
82
94
  --utrecht-color-blue-90: hsl(211 60% 90%);
83
95
  /* ijsblauw variant achtergrond, spotlight en uitgelicht */
@@ -93,6 +105,8 @@
93
105
  /* Deze kleur gebruiken we niet */
94
106
  --utrecht-color-blue-20: hsl(211 60% 20%);
95
107
  /* basis donkerblauw (OS focus) */
108
+ --utrecht-color-red-95: hsl(0 100% 95%);
109
+ /* Achtergrond rode kleur */
96
110
  --utrecht-color-red-40: hsl(0 100% 40%);
97
111
  /* basis rood #cc0000 */
98
112
  --utrecht-color-red-30: hsl(0 100% 30%);
@@ -400,6 +414,7 @@
400
414
  --utrecht-search-bar-textbox-border-color: var(--utrecht-color-red-40);
401
415
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
402
416
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
417
+ --utrecht-badge-counter-font-style: var(--utrecht-typography-font-style-normal);
403
418
  --utrecht-badge-counter-color: var(--utrecht-color-white);
404
419
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40);
405
420
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
@@ -463,7 +478,7 @@
463
478
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
464
479
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
465
480
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
466
- --utrecht-link-color: var(--utrecht-color-blue-30);
481
+ --utrecht-link-color: var(--utrecht-color-blue-35);
467
482
  --utrecht-link-list-item-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
468
483
  --utrecht-link-list-item-margin-block-start: var(--utrecht-space-block-xs);
469
484
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -472,7 +487,7 @@
472
487
  --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
473
488
  --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
474
489
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
475
- --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-30);
490
+ --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
476
491
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
477
492
  --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
478
493
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
@@ -482,6 +497,7 @@
482
497
  --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
483
498
  --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
484
499
  --utrecht-form-input-focus-border-color: var(--utrecht-color-grey-80);
500
+ --utrecht-form-input-placeholder-font-style: var(--utrecht-typography-font-style-normal);
485
501
  --utrecht-form-input-placeholder-color: var(--utrecht-color-grey-40);
486
502
  --utrecht-form-input-font-size: var(--utrecht-typography-scale-md-font-size);
487
503
  --utrecht-form-input-color: var(--utrecht-color-black);
@@ -498,7 +514,7 @@
498
514
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
499
515
  --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
500
516
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
501
- --utrecht-document-color: var(--utrecht-color-black);
517
+ --utrecht-document-color: var(--utrecht-color-grey-10);
502
518
  --utrecht-document-background-color: var(--utrecht-color-white);
503
519
  --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
504
520
  --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
@@ -568,6 +584,7 @@
568
584
  --utrecht-breadcrumb-item-padding-block-start: var(--utrecht-space-block-xs);
569
585
  --utrecht-breadcrumb-font-size: var(--utrecht-typography-scale-sm-font-size);
570
586
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
587
+ --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
571
588
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm);
572
589
  /* Default inline padding color for badge components */
573
590
  --utrecht-badge-padding-block: var(--utrecht-space-block-xs);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.134",
2
+ "version": "1.0.0-alpha.138",
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.127",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.131",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.43.4"
@@ -26,5 +26,5 @@
26
26
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
27
27
  "clean": "rimraf dist/"
28
28
  },
29
- "gitHead": "3ce486f1ebde7dacebec98d4063f38b1275b4822"
29
+ "gitHead": "fe8f22541f997451ec71ae0bb403d2a373965c2b"
30
30
  }