@utrecht/heading-4-css 2.0.2 → 3.0.1

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 (12) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/html/index.css +0 -1
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +0 -1
  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 +3 -5
  11. package/src/tokens.json +21 -42
  12. package/src/story-template.jsx +0 -47
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @utrecht/heading-4-css
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - ed56958: Remove dependency on `@utrecht/heading-css` SCSS, copy the CSS to each heading implementation.
8
+ - 0f759fc: Ensure package is published with provenance
9
+
10
+ ## 3.0.0
11
+
12
+ ### Major Changes
13
+
14
+ - eabbf23: Publish `tokens.json` in DTCG format: `$value` instead of `value`, standard `$type`, etcetera.
15
+
3
16
  ## 2.0.2
4
17
 
5
18
  ### Patch Changes
package/dist/html/index.css CHANGED
@@ -7,7 +7,6 @@ h4 {
7
7
  break-after: avoid;
8
8
  break-inside: avoid-column;
9
9
  break-inside: avoid;
10
- break-after: avoid-page;
11
10
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
12
11
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
13
12
  font-size: var(--utrecht-heading-4-font-size, revert);
package/dist/html/index.min.css CHANGED
@@ -1 +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}
1
+ h4{break-after:avoid;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-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}";
1
+ export default "h4{break-after:avoid;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
@@ -8,7 +8,6 @@
8
8
  break-after: avoid;
9
9
  break-inside: avoid-column;
10
10
  break-inside: avoid;
11
- break-after: avoid-page;
12
11
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
13
12
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
14
13
  font-size: var(--utrecht-heading-4-font-size, revert);
package/dist/index.min.css CHANGED
@@ -1 +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}
1
+ .utrecht-heading-4{break-after:avoid;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-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}";
1
+ export default ".utrecht-heading-4{break-after:avoid;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.2",
2
+ "version": "3.0.1",
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,14 +12,14 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "@utrecht/heading-css": "2.0.2",
16
15
  "@utrecht/build-utils-css": "0.0.4"
17
16
  },
18
17
  "keywords": [
19
18
  "nl-design-system"
20
19
  ],
21
20
  "publishConfig": {
22
- "access": "public"
21
+ "access": "public",
22
+ "provenance": true
23
23
  },
24
24
  "repository": {
25
25
  "type": "git+ssh",
package/src/_mixin.scss CHANGED
@@ -4,12 +4,10 @@
4
4
  * Copyright (c) 2021-2024 Gemeente Utrecht
5
5
  */
6
6
 
7
- @use "~@utrecht/heading-css/src/mixin" as *;
8
-
9
7
  @mixin utrecht-heading-4 {
10
- @include utrecht-heading;
11
-
12
- break-after: avoid-page;
8
+ break-after: avoid;
9
+ break-inside: avoid-column;
10
+ break-inside: avoid;
13
11
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
14
12
  font-family: var(
15
13
  --utrecht-heading-4-font-family,
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
  }
package/src/story-template.jsx DELETED
@@ -1,47 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2020-2024 Frameless B.V.
4
- * Copyright (c) 2021-2024 Gemeente Utrecht
5
- */
6
-
7
- import clsx from 'clsx';
8
- import React from 'react';
9
-
10
- export const argTypes = {
11
- textContent: {
12
- description: 'De content van de header',
13
- control: 'text',
14
- },
15
- distanced: {
16
- description: 'Zet afstand tussen de header en nabije content',
17
- control: 'boolean',
18
- },
19
- };
20
-
21
- export const defaultArgs = {
22
- textContent: '',
23
- distanced: false,
24
- };
25
-
26
- export const exampleArgs = {
27
- textContent: 'The Quick Brown Fox Jumps Over The Lazy Dog',
28
- };
29
-
30
- export const Heading4 = ({
31
- children,
32
- textContent = defaultArgs.textContent,
33
- distanced = defaultArgs.distanced,
34
- ...restProps
35
- }) => (
36
- <h4
37
- className={clsx('utrecht-heading-4', {
38
- 'utrecht-heading-4--distanced': distanced,
39
- })}
40
- {...restProps}
41
- >
42
- {children}
43
- {textContent}
44
- </h4>
45
- );
46
-
47
- export default Heading4;