@utrecht/form-fieldset-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 +2 -3
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +2 -3
  6. package/dist/index.min.css +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/tokens.mjs +45 -90
  9. package/package.json +1 -1
  10. package/src/_mixin.scss +2 -3
  11. package/src/tokens.json +45 -90
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @utrecht/form-fieldset-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
@@ -23,14 +23,13 @@ fieldset[hidden] {
23
23
  }
24
24
 
25
25
  legend {
26
- break-inside: avoid;
26
+ break-after: avoid-page;
27
+ break-inside: avoid-page;
27
28
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
28
29
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
29
30
  font-size: var(--utrecht-form-fieldset-legend-font-size);
30
31
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
31
32
  line-height: var(--utrecht-form-fieldset-legend-line-height);
32
- page-break-after: avoid;
33
- page-break-inside: avoid;
34
33
  display: table;
35
34
  inline-size: 100%;
36
35
  padding-inline-end: 0;
package/dist/html/index.min.css CHANGED
@@ -1 +1 @@
1
- fieldset{all:revert;border:0;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0));margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0;--utrecht-space-around:1}fieldset[hidden]{display:none}legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0));padding-inline-end:0;padding-inline-start:0;page-break-after:avoid;page-break-inside:avoid}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}
1
+ fieldset{all:revert;border:0;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0));margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0;--utrecht-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}
package/dist/html/index.mjs CHANGED
@@ -1 +1 @@
1
- export default "fieldset{all:revert;border:0;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0));margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0;--utrecht-space-around:1}fieldset[hidden]{display:none}legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0));padding-inline-end:0;padding-inline-start:0;page-break-after:avoid;page-break-inside:avoid}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}";
1
+ export default "fieldset{all:revert;border:0;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0));margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0;--utrecht-space-around:1}fieldset[hidden]{display:none}legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));display:table;font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);inline-size:100%;line-height:var(--utrecht-form-fieldset-legend-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0));padding-inline-end:0;padding-inline-start:0}legend[hidden]{display:none}fieldset:disabled>legend{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}";
package/dist/index.css CHANGED
@@ -38,14 +38,13 @@
38
38
  }
39
39
 
40
40
  .utrecht-form-fieldset__legend {
41
- break-inside: avoid;
41
+ break-after: avoid-page;
42
+ break-inside: avoid-page;
42
43
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
43
44
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
44
45
  font-size: var(--utrecht-form-fieldset-legend-font-size);
45
46
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
46
47
  line-height: var(--utrecht-form-fieldset-legend-line-height);
47
- page-break-after: avoid;
48
- page-break-inside: avoid;
49
48
  }
50
49
 
51
50
  .utrecht-form-fieldset__legend--disabled {
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}
1
+ .utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height)}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-inside:avoid;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}";
1
+ export default ".utrecht-form-fieldset{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-margin-block-start, 0))}.utrecht-form-fieldset--html-fieldset,.utrecht-form-fieldset__fieldset--html-fieldset{all:revert;border:0;margin-inline-end:0;margin-inline-start:0;min-inline-size:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{display:table;inline-size:100%;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{--utrecht-space-around:1}.utrecht-form-fieldset--section{background-color:var(--utrecht-form-fieldset-section-background-color);color:var(--utrecht-form-fieldset-section-color)}.utrecht-form-fieldset__legend{break-after:avoid-page;break-inside:avoid-page;color:var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit));font-family:var(--utrecht-form-fieldset-legend-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height)}.utrecht-form-fieldset__legend--disabled{color:var(--utrecht-form-fieldset-legend-disabled-color,var(--utrecht-form-fieldset-legend-color,var(--utrecht-document-color,inherit)))}.utrecht-form-fieldset__legend--distanced{margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-fieldset-legend-margin-block-start, 0))}.utrecht-form-fieldset--invalid{border-inline-start-color:var(--utrecht-form-fieldset-invalid-border-inline-start-color,var(--utrecht-form-field-invalid-border-inline-start-color));border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-fieldset-invalid-border-inline-start-width,var(--utrecht-form-field-invalid-border-inline-start-width));padding-inline-start:var(--utrecht-form-fieldset-invalid-padding-inline-start,var(--utrecht-form-field-invalid-padding-inline-start))}";
package/dist/tokens.mjs CHANGED
@@ -3,161 +3,116 @@ export default {
3
3
  "form-fieldset": {
4
4
  "margin-block-end": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<length>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<length>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "spacing"
9
+ "$type": "dimension"
13
10
  },
14
11
  "margin-block-start": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<length>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<length>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "spacing"
16
+ "$type": "dimension"
23
17
  },
24
18
  "invalid": {
25
19
  "border-inline-start-color": {
26
20
  "color": {
27
21
  "$extensions": {
28
- "nl.nldesignsystem.css.property": {
29
- "syntax": "<color>",
30
- "inherits": true
31
- },
32
- "nl.nldesignsystem.figma.supports-token": false
22
+ "nl.nldesignsystem.css-property-syntax": "<color>",
23
+ "nl.nldesignsystem.figma-implementation": false
33
24
  },
34
- "type": "color"
25
+ "$type": "color"
35
26
  }
36
27
  },
37
28
  "border-inline-start-width": {
38
29
  "$extensions": {
39
- "nl.nldesignsystem.css.property": {
40
- "syntax": "<length>",
41
- "inherits": true
42
- },
43
- "nl.nldesignsystem.figma.supports-token": false
30
+ "nl.nldesignsystem.css-property-syntax": "<length>",
31
+ "nl.nldesignsystem.figma-implementation": false
44
32
  },
45
- "type": "borderWidth"
33
+ "$type": "dimension"
46
34
  },
47
35
  "padding-inline-start": {
48
36
  "$extensions": {
49
- "nl.nldesignsystem.css.property": {
50
- "syntax": "<length>",
51
- "inherits": true
52
- },
53
- "nl.nldesignsystem.figma.supports-token": false
37
+ "nl.nldesignsystem.css-property-syntax": "<length>",
38
+ "nl.nldesignsystem.figma-implementation": false
54
39
  },
55
- "type": "spacing"
40
+ "$type": "dimension"
56
41
  }
57
42
  },
58
43
  "section": {
59
44
  "background-color": {
60
45
  "$extensions": {
61
- "nl.nldesignsystem.css.property": {
62
- "syntax": "<color>",
63
- "inherits": true
64
- },
65
- "nl.nldesignsystem.figma.supports-token": false
46
+ "nl.nldesignsystem.css-property-syntax": "<color>",
47
+ "nl.nldesignsystem.figma-implementation": false
66
48
  },
67
- "type": "color"
49
+ "$type": "color"
68
50
  },
69
51
  "color": {
70
52
  "$extensions": {
71
- "nl.nldesignsystem.css.property": {
72
- "syntax": "<color>",
73
- "inherits": true
74
- },
75
- "nl.nldesignsystem.figma.supports-token": false
53
+ "nl.nldesignsystem.css-property-syntax": "<color>",
54
+ "nl.nldesignsystem.figma-implementation": false
76
55
  },
77
- "type": "color"
56
+ "$type": "color"
78
57
  }
79
58
  },
80
59
  "legend": {
81
60
  "color": {
82
61
  "$extensions": {
83
- "nl.nldesignsystem.css.property": {
84
- "syntax": "<color>",
85
- "inherits": true
86
- },
87
- "nl.nldesignsystem.figma.supports-token": false
62
+ "nl.nldesignsystem.css-property-syntax": "<color>",
63
+ "nl.nldesignsystem.figma-implementation": false
88
64
  },
89
- "type": "color"
65
+ "$type": "color"
90
66
  },
91
67
  "font-family": {
92
68
  "$extensions": {
93
- "nl.nldesignsystem.css.property": {
94
- "syntax": "*",
95
- "inherits": true
96
- },
97
- "nl.nldesignsystem.figma.supports-token": false
69
+ "nl.nldesignsystem.css-property-syntax": "*",
70
+ "nl.nldesignsystem.figma-implementation": false
98
71
  },
99
- "type": "fontFamilies"
72
+ "$type": "fontFamily"
100
73
  },
101
74
  "font-size": {
102
75
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<length>",
105
- "inherits": true
106
- },
107
- "nl.nldesignsystem.figma.supports-token": false
76
+ "nl.nldesignsystem.css-property-syntax": "<length>",
77
+ "nl.nldesignsystem.figma-implementation": false
108
78
  },
109
- "type": "fontSizes"
79
+ "$type": "dimension"
110
80
  },
111
81
  "font-weight": {
112
82
  "$extensions": {
113
- "nl.nldesignsystem.css.property": {
114
- "syntax": "<number>",
115
- "inherits": true
116
- },
117
- "nl.nldesignsystem.figma.supports-token": false
83
+ "nl.nldesignsystem.css-property-syntax": "<number>",
84
+ "nl.nldesignsystem.figma-implementation": false
118
85
  },
119
- "type": "fontWeights"
86
+ "$type": "fontWeight"
120
87
  },
121
88
  "line-height": {
122
89
  "$extensions": {
123
- "nl.nldesignsystem.css.property": {
124
- "syntax": "<length> | <number>",
125
- "inherits": true
126
- },
127
- "nl.nldesignsystem.figma.supports-token": false
90
+ "nl.nldesignsystem.css-property-syntax": "<length> | <number>",
91
+ "nl.nldesignsystem.figma-implementation": false
128
92
  },
129
- "type": "lineHeights"
93
+ "$type": "dimension"
130
94
  },
131
95
  "margin-block-end": {
132
96
  "$extensions": {
133
- "nl.nldesignsystem.css.property": {
134
- "syntax": "<length>",
135
- "inherits": true
136
- },
137
- "nl.nldesignsystem.figma.supports-token": false
97
+ "nl.nldesignsystem.css-property-syntax": "<length>",
98
+ "nl.nldesignsystem.figma-implementation": false
138
99
  },
139
- "type": "spacing"
100
+ "$type": "dimension"
140
101
  },
141
102
  "margin-block-start": {
142
103
  "$extensions": {
143
- "nl.nldesignsystem.css.property": {
144
- "syntax": "<length>",
145
- "inherits": true
146
- },
147
- "nl.nldesignsystem.figma.supports-token": false
104
+ "nl.nldesignsystem.css-property-syntax": "<length>",
105
+ "nl.nldesignsystem.figma-implementation": false
148
106
  },
149
- "type": "spacing"
107
+ "$type": "dimension"
150
108
  },
151
109
  "disabled": {
152
110
  "color": {
153
111
  "$extensions": {
154
- "nl.nldesignsystem.css.property": {
155
- "syntax": "<color>",
156
- "inherits": true
157
- },
158
- "nl.nldesignsystem.figma.supports-token": false
112
+ "nl.nldesignsystem.css-property-syntax": "<color>",
113
+ "nl.nldesignsystem.figma-implementation": false
159
114
  },
160
- "type": "color"
115
+ "$type": "color"
161
116
  }
162
117
  }
163
118
  }
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": "Form fieldset component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
package/src/_mixin.scss CHANGED
@@ -45,14 +45,13 @@
45
45
  }
46
46
 
47
47
  @mixin utrecht-form-fieldset__legend {
48
- break-inside: avoid;
48
+ break-after: avoid-page;
49
+ break-inside: avoid-page;
49
50
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
50
51
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
51
52
  font-size: var(--utrecht-form-fieldset-legend-font-size);
52
53
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
53
54
  line-height: var(--utrecht-form-fieldset-legend-line-height);
54
- page-break-after: avoid;
55
- page-break-inside: avoid;
56
55
  }
57
56
 
58
57
  @mixin utrecht-form-fieldset__legend--disabled {
package/src/tokens.json CHANGED
@@ -3,161 +3,116 @@
3
3
  "form-fieldset": {
4
4
  "margin-block-end": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<length>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<length>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "spacing"
9
+ "$type": "dimension"
13
10
  },
14
11
  "margin-block-start": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<length>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<length>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "spacing"
16
+ "$type": "dimension"
23
17
  },
24
18
  "invalid": {
25
19
  "border-inline-start-color": {
26
20
  "color": {
27
21
  "$extensions": {
28
- "nl.nldesignsystem.css.property": {
29
- "syntax": "<color>",
30
- "inherits": true
31
- },
32
- "nl.nldesignsystem.figma.supports-token": false
22
+ "nl.nldesignsystem.css-property-syntax": "<color>",
23
+ "nl.nldesignsystem.figma-implementation": false
33
24
  },
34
- "type": "color"
25
+ "$type": "color"
35
26
  }
36
27
  },
37
28
  "border-inline-start-width": {
38
29
  "$extensions": {
39
- "nl.nldesignsystem.css.property": {
40
- "syntax": "<length>",
41
- "inherits": true
42
- },
43
- "nl.nldesignsystem.figma.supports-token": false
30
+ "nl.nldesignsystem.css-property-syntax": "<length>",
31
+ "nl.nldesignsystem.figma-implementation": false
44
32
  },
45
- "type": "borderWidth"
33
+ "$type": "dimension"
46
34
  },
47
35
  "padding-inline-start": {
48
36
  "$extensions": {
49
- "nl.nldesignsystem.css.property": {
50
- "syntax": "<length>",
51
- "inherits": true
52
- },
53
- "nl.nldesignsystem.figma.supports-token": false
37
+ "nl.nldesignsystem.css-property-syntax": "<length>",
38
+ "nl.nldesignsystem.figma-implementation": false
54
39
  },
55
- "type": "spacing"
40
+ "$type": "dimension"
56
41
  }
57
42
  },
58
43
  "section": {
59
44
  "background-color": {
60
45
  "$extensions": {
61
- "nl.nldesignsystem.css.property": {
62
- "syntax": "<color>",
63
- "inherits": true
64
- },
65
- "nl.nldesignsystem.figma.supports-token": false
46
+ "nl.nldesignsystem.css-property-syntax": "<color>",
47
+ "nl.nldesignsystem.figma-implementation": false
66
48
  },
67
- "type": "color"
49
+ "$type": "color"
68
50
  },
69
51
  "color": {
70
52
  "$extensions": {
71
- "nl.nldesignsystem.css.property": {
72
- "syntax": "<color>",
73
- "inherits": true
74
- },
75
- "nl.nldesignsystem.figma.supports-token": false
53
+ "nl.nldesignsystem.css-property-syntax": "<color>",
54
+ "nl.nldesignsystem.figma-implementation": false
76
55
  },
77
- "type": "color"
56
+ "$type": "color"
78
57
  }
79
58
  },
80
59
  "legend": {
81
60
  "color": {
82
61
  "$extensions": {
83
- "nl.nldesignsystem.css.property": {
84
- "syntax": "<color>",
85
- "inherits": true
86
- },
87
- "nl.nldesignsystem.figma.supports-token": false
62
+ "nl.nldesignsystem.css-property-syntax": "<color>",
63
+ "nl.nldesignsystem.figma-implementation": false
88
64
  },
89
- "type": "color"
65
+ "$type": "color"
90
66
  },
91
67
  "font-family": {
92
68
  "$extensions": {
93
- "nl.nldesignsystem.css.property": {
94
- "syntax": "*",
95
- "inherits": true
96
- },
97
- "nl.nldesignsystem.figma.supports-token": false
69
+ "nl.nldesignsystem.css-property-syntax": "*",
70
+ "nl.nldesignsystem.figma-implementation": false
98
71
  },
99
- "type": "fontFamilies"
72
+ "$type": "fontFamily"
100
73
  },
101
74
  "font-size": {
102
75
  "$extensions": {
103
- "nl.nldesignsystem.css.property": {
104
- "syntax": "<length>",
105
- "inherits": true
106
- },
107
- "nl.nldesignsystem.figma.supports-token": false
76
+ "nl.nldesignsystem.css-property-syntax": "<length>",
77
+ "nl.nldesignsystem.figma-implementation": false
108
78
  },
109
- "type": "fontSizes"
79
+ "$type": "dimension"
110
80
  },
111
81
  "font-weight": {
112
82
  "$extensions": {
113
- "nl.nldesignsystem.css.property": {
114
- "syntax": "<number>",
115
- "inherits": true
116
- },
117
- "nl.nldesignsystem.figma.supports-token": false
83
+ "nl.nldesignsystem.css-property-syntax": "<number>",
84
+ "nl.nldesignsystem.figma-implementation": false
118
85
  },
119
- "type": "fontWeights"
86
+ "$type": "fontWeight"
120
87
  },
121
88
  "line-height": {
122
89
  "$extensions": {
123
- "nl.nldesignsystem.css.property": {
124
- "syntax": "<length> | <number>",
125
- "inherits": true
126
- },
127
- "nl.nldesignsystem.figma.supports-token": false
90
+ "nl.nldesignsystem.css-property-syntax": "<length> | <number>",
91
+ "nl.nldesignsystem.figma-implementation": false
128
92
  },
129
- "type": "lineHeights"
93
+ "$type": "dimension"
130
94
  },
131
95
  "margin-block-end": {
132
96
  "$extensions": {
133
- "nl.nldesignsystem.css.property": {
134
- "syntax": "<length>",
135
- "inherits": true
136
- },
137
- "nl.nldesignsystem.figma.supports-token": false
97
+ "nl.nldesignsystem.css-property-syntax": "<length>",
98
+ "nl.nldesignsystem.figma-implementation": false
138
99
  },
139
- "type": "spacing"
100
+ "$type": "dimension"
140
101
  },
141
102
  "margin-block-start": {
142
103
  "$extensions": {
143
- "nl.nldesignsystem.css.property": {
144
- "syntax": "<length>",
145
- "inherits": true
146
- },
147
- "nl.nldesignsystem.figma.supports-token": false
104
+ "nl.nldesignsystem.css-property-syntax": "<length>",
105
+ "nl.nldesignsystem.figma-implementation": false
148
106
  },
149
- "type": "spacing"
107
+ "$type": "dimension"
150
108
  },
151
109
  "disabled": {
152
110
  "color": {
153
111
  "$extensions": {
154
- "nl.nldesignsystem.css.property": {
155
- "syntax": "<color>",
156
- "inherits": true
157
- },
158
- "nl.nldesignsystem.figma.supports-token": false
112
+ "nl.nldesignsystem.css-property-syntax": "<color>",
113
+ "nl.nldesignsystem.figma-implementation": false
159
114
  },
160
- "type": "color"
115
+ "$type": "color"
161
116
  }
162
117
  }
163
118
  }