@utrecht/heading-4-css 2.0.1 → 3.0.0

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 (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/html/index.css +3 -3
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +3 -3
  6. package/dist/index.min.css +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/tokens.mjs +24 -45
  9. package/package.json +3 -3
  10. package/src/_mixin.scss +1 -1
  11. package/src/tokens.json +21 -42
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @utrecht/heading-4-css
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - eabbf23: Publish `tokens.json` in DTCG format: `$value` instead of `value`, standard `$type`, etcetera.
8
+
9
+ ## 2.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - 982448a: Switch from deprecated CSS properties to ones that are newly Baseline supported:
14
+
15
+ - `clip` now iw `clip-path`.
16
+ - `word-break` is now `overflow-wrap`
17
+ - `page-break-inside` now is `break-inside`.
18
+ - `page-break-after` now is `break-after`.
19
+
3
20
  ## 2.0.1
4
21
 
5
22
  ### Patch Changes
package/dist/html/index.css CHANGED
@@ -4,9 +4,10 @@
4
4
  * Copyright (c) 2021-2024 Gemeente Utrecht
5
5
  */
6
6
  h4 {
7
+ break-after: avoid;
7
8
  break-inside: avoid-column;
8
- page-break-after: avoid;
9
- page-break-inside: avoid;
9
+ break-inside: avoid;
10
+ break-after: avoid-page;
10
11
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
11
12
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
12
13
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -14,6 +15,5 @@ h4 {
14
15
  line-height: var(--utrecht-heading-4-line-height);
15
16
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
16
17
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
17
- page-break-after: avoid;
18
18
  --utrecht-space-around: 1;
19
19
  }
package/dist/html/index.min.css CHANGED
@@ -1 +1 @@
1
- h4{break-inside:avoid-column;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid;--utrecht-space-around:1}
1
+ h4{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));--utrecht-space-around:1}
package/dist/html/index.mjs CHANGED
@@ -1 +1 @@
1
- export default "h4{break-inside:avoid-column;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid;--utrecht-space-around:1}";
1
+ export default "h4{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));--utrecht-space-around:1}";
package/dist/index.css CHANGED
@@ -5,9 +5,10 @@
5
5
  */
6
6
 
7
7
  .utrecht-heading-4 {
8
+ break-after: avoid;
8
9
  break-inside: avoid-column;
9
- page-break-after: avoid;
10
- page-break-inside: avoid;
10
+ break-inside: avoid;
11
+ break-after: avoid-page;
11
12
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
12
13
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
13
14
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -15,7 +16,6 @@
15
16
  line-height: var(--utrecht-heading-4-line-height);
16
17
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
17
18
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
18
- page-break-after: avoid;
19
19
  }
20
20
 
21
21
  .utrecht-heading-4--distanced {
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .utrecht-heading-4{break-inside:avoid-column;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid}.utrecht-heading-4--distanced{--utrecht-space-around:1}
1
+ .utrecht-heading-4{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0))}.utrecht-heading-4--distanced{--utrecht-space-around:1}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".utrecht-heading-4{break-inside:avoid-column;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid}.utrecht-heading-4--distanced{--utrecht-space-around:1}";
1
+ export default ".utrecht-heading-4{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-4-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-4-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size,revert);font-weight:var(--utrecht-heading-4-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-4-margin-block-start, 0))}.utrecht-heading-4--distanced{--utrecht-space-around:1}";
package/dist/tokens.mjs CHANGED
@@ -3,87 +3,66 @@ export default {
3
3
  "heading-4": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
10
7
  "nl.nldesignsystem.fallback": [
11
8
  "utrecht.heading.color",
12
9
  "utrecht.document.color"
13
10
  ],
14
- "nl.nldesignsystem.figma.supports-token": true
11
+ "nl.nldesignsystem.figma-implementation": true
15
12
  },
16
- "type": "color"
13
+ "$type": "color"
17
14
  },
18
15
  "font-family": {
19
16
  "$extensions": {
20
- "nl.nldesignsystem.css.property": {
21
- "syntax": "*",
22
- "inherits": true
23
- },
17
+ "nl.nldesignsystem.css-property-syntax": "*",
24
18
  "nl.nldesignsystem.fallback": [
25
19
  "utrecht.heading.font-family",
26
20
  "utrecht.document.font-family"
27
21
  ],
28
- "nl.nldesignsystem.figma.supports-token": true
22
+ "nl.nldesignsystem.figma-implementation": true
29
23
  },
30
- "type": "fontFamilies"
24
+ "$type": "fontFamily"
31
25
  },
32
26
  "font-size": {
33
27
  "$extensions": {
34
- "nl.nldesignsystem.css.property": {
35
- "syntax": "<length>",
36
- "inherits": true
37
- },
38
- "nl.nldesignsystem.figma.supports-token": true
28
+ "nl.nldesignsystem.css-property-syntax": "<length>",
29
+ "nl.nldesignsystem.figma-implementation": true
39
30
  },
40
- "type": "fontSizes"
31
+ "$type": "dimension"
41
32
  },
42
33
  "font-weight": {
43
34
  "$extensions": {
44
- "nl.nldesignsystem.css.property": {
45
- "syntax": "<number>",
46
- "inherits": true
47
- },
35
+ "nl.nldesignsystem.css-property-syntax": "<number>",
48
36
  "nl.nldesignsystem.fallback": [
49
37
  "utrecht.heading.font-weight"
50
38
  ],
51
- "nl.nldesignsystem.figma.supports-token": true
39
+ "nl.nldesignsystem.figma-implementation": true
52
40
  },
53
- "type": "fontWeights"
41
+ "$type": "fontWeight"
54
42
  },
55
43
  "line-height": {
56
44
  "$extensions": {
57
- "nl.nldesignsystem.css.property": {
58
- "syntax": [
59
- "<length>",
60
- "<number>"
61
- ],
62
- "inherits": true
63
- },
64
- "nl.nldesignsystem.figma.supports-token": true
45
+ "nl.nldesignsystem.css-property-syntax": [
46
+ "<length>",
47
+ "<number>"
48
+ ],
49
+ "nl.nldesignsystem.figma-implementation": true
65
50
  },
66
- "type": "lineHeights"
51
+ "$type": "dimension"
67
52
  },
68
53
  "margin-block-end": {
69
54
  "$extensions": {
70
- "nl.nldesignsystem.css.property": {
71
- "syntax": "<length>",
72
- "inherits": true
73
- },
74
- "nl.nldesignsystem.figma.supports-token": false
55
+ "nl.nldesignsystem.css-property-syntax": "<length>",
56
+ "nl.nldesignsystem.figma-implementation": false
75
57
  },
76
- "type": "spacing"
58
+ "$type": "dimension"
77
59
  },
78
60
  "margin-block-start": {
79
61
  "$extensions": {
80
- "nl.nldesignsystem.css.property": {
81
- "syntax": "<length>",
82
- "inherits": true
83
- },
84
- "nl.nldesignsystem.figma.supports-token": false
62
+ "nl.nldesignsystem.css-property-syntax": "<length>",
63
+ "nl.nldesignsystem.figma-implementation": false
85
64
  },
86
- "type": "spacing"
65
+ "$type": "dimension"
87
66
  }
88
67
  }
89
68
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1",
2
+ "version": "3.0.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Heading 4 component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -12,8 +12,8 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "@utrecht/build-utils-css": "0.0.4",
16
- "@utrecht/heading-css": "2.0.1"
15
+ "@utrecht/heading-css": "3.0.0",
16
+ "@utrecht/build-utils-css": "0.0.4"
17
17
  },
18
18
  "keywords": [
19
19
  "nl-design-system"
package/src/_mixin.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  @mixin utrecht-heading-4 {
10
10
  @include utrecht-heading;
11
11
 
12
+ break-after: avoid-page;
12
13
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
13
14
  font-family: var(
14
15
  --utrecht-heading-4-font-family,
@@ -19,7 +20,6 @@
19
20
  line-height: var(--utrecht-heading-4-line-height);
20
21
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
21
22
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
22
- page-break-after: avoid;
23
23
  }
24
24
 
25
25
  @mixin utrecht-heading-4--distanced {
package/src/tokens.json CHANGED
@@ -3,76 +3,55 @@
3
3
  "heading-4": {
4
4
  "color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
10
7
  "nl.nldesignsystem.fallback": ["utrecht.heading.color", "utrecht.document.color"],
11
- "nl.nldesignsystem.figma.supports-token": true
8
+ "nl.nldesignsystem.figma-implementation": true
12
9
  },
13
- "type": "color"
10
+ "$type": "color"
14
11
  },
15
12
  "font-family": {
16
13
  "$extensions": {
17
- "nl.nldesignsystem.css.property": {
18
- "syntax": "*",
19
- "inherits": true
20
- },
14
+ "nl.nldesignsystem.css-property-syntax": "*",
21
15
  "nl.nldesignsystem.fallback": ["utrecht.heading.font-family", "utrecht.document.font-family"],
22
- "nl.nldesignsystem.figma.supports-token": true
16
+ "nl.nldesignsystem.figma-implementation": true
23
17
  },
24
- "type": "fontFamilies"
18
+ "$type": "fontFamily"
25
19
  },
26
20
  "font-size": {
27
21
  "$extensions": {
28
- "nl.nldesignsystem.css.property": {
29
- "syntax": "<length>",
30
- "inherits": true
31
- },
32
- "nl.nldesignsystem.figma.supports-token": true
22
+ "nl.nldesignsystem.css-property-syntax": "<length>",
23
+ "nl.nldesignsystem.figma-implementation": true
33
24
  },
34
- "type": "fontSizes"
25
+ "$type": "dimension"
35
26
  },
36
27
  "font-weight": {
37
28
  "$extensions": {
38
- "nl.nldesignsystem.css.property": {
39
- "syntax": "<number>",
40
- "inherits": true
41
- },
29
+ "nl.nldesignsystem.css-property-syntax": "<number>",
42
30
  "nl.nldesignsystem.fallback": ["utrecht.heading.font-weight"],
43
- "nl.nldesignsystem.figma.supports-token": true
31
+ "nl.nldesignsystem.figma-implementation": true
44
32
  },
45
- "type": "fontWeights"
33
+ "$type": "fontWeight"
46
34
  },
47
35
  "line-height": {
48
36
  "$extensions": {
49
- "nl.nldesignsystem.css.property": {
50
- "syntax": ["<length>", "<number>"],
51
- "inherits": true
52
- },
53
- "nl.nldesignsystem.figma.supports-token": true
37
+ "nl.nldesignsystem.css-property-syntax": ["<length>", "<number>"],
38
+ "nl.nldesignsystem.figma-implementation": true
54
39
  },
55
- "type": "lineHeights"
40
+ "$type": "dimension"
56
41
  },
57
42
  "margin-block-end": {
58
43
  "$extensions": {
59
- "nl.nldesignsystem.css.property": {
60
- "syntax": "<length>",
61
- "inherits": true
62
- },
63
- "nl.nldesignsystem.figma.supports-token": false
44
+ "nl.nldesignsystem.css-property-syntax": "<length>",
45
+ "nl.nldesignsystem.figma-implementation": false
64
46
  },
65
- "type": "spacing"
47
+ "$type": "dimension"
66
48
  },
67
49
  "margin-block-start": {
68
50
  "$extensions": {
69
- "nl.nldesignsystem.css.property": {
70
- "syntax": "<length>",
71
- "inherits": true
72
- },
73
- "nl.nldesignsystem.figma.supports-token": false
51
+ "nl.nldesignsystem.css-property-syntax": "<length>",
52
+ "nl.nldesignsystem.figma-implementation": false
74
53
  },
75
- "type": "spacing"
54
+ "$type": "dimension"
76
55
  }
77
56
  }
78
57
  }