@utrecht/form-field-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 (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.css +0 -1
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/tokens.mjs +18 -36
  6. package/package.json +1 -1
  7. package/src/_mixin.scss +1 -2
  8. package/src/tokens.json +18 -36
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @utrecht/form-field-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/index.css CHANGED
@@ -8,7 +8,6 @@
8
8
  font-family: var(--utrecht-document-font-family, inherit);
9
9
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
10
10
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
11
- page-break-inside: avoid;
12
11
  }
13
12
 
14
13
  .utrecht-form-field--distanced {
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--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-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}
1
+ .utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0))}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--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-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--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-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}";
1
+ export default ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0))}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--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-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}";
package/dist/tokens.mjs CHANGED
@@ -3,66 +3,48 @@ export default {
3
3
  "form-field": {
4
4
  "margin-block-start": {
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-end": {
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
  "$extensions": {
27
- "nl.nldesignsystem.css.property": {
28
- "syntax": "<color>",
29
- "inherits": true
30
- },
31
- "nl.nldesignsystem.figma.supports-token": true
21
+ "nl.nldesignsystem.css-property-syntax": "<color>",
22
+ "nl.nldesignsystem.figma-implementation": true
32
23
  },
33
- "type": "color"
24
+ "$type": "color"
34
25
  },
35
26
  "border-inline-start-width": {
36
27
  "$extensions": {
37
- "nl.nldesignsystem.css.property": {
38
- "syntax": "<length>",
39
- "inherits": true
40
- },
41
- "nl.nldesignsystem.figma.supports-token": true
28
+ "nl.nldesignsystem.css-property-syntax": "<length>",
29
+ "nl.nldesignsystem.figma-implementation": true
42
30
  },
43
- "type": "borderWidth"
31
+ "$type": "dimension"
44
32
  },
45
33
  "padding-inline-start": {
46
34
  "$extensions": {
47
- "nl.nldesignsystem.css.property": {
48
- "syntax": "<length>",
49
- "inherits": true
50
- },
51
- "nl.nldesignsystem.figma.supports-token": true
35
+ "nl.nldesignsystem.css-property-syntax": "<length>",
36
+ "nl.nldesignsystem.figma-implementation": true
52
37
  },
53
- "type": "spacing"
38
+ "$type": "dimension"
54
39
  }
55
40
  },
56
41
  "label": {
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
  }
68
50
  }
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 field component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
package/src/_mixin.scss CHANGED
@@ -14,7 +14,6 @@
14
14
  font-family: var(--utrecht-document-font-family, inherit);
15
15
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
16
16
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
17
- page-break-inside: avoid;
18
17
  }
19
18
 
20
19
  @mixin utrecht-form-field--distanced {
@@ -40,6 +39,7 @@
40
39
  }
41
40
 
42
41
  @mixin utrecht-form-field--option {
42
+ break-inside: avoid-page;
43
43
  display: grid;
44
44
  font-family: var(--utrecht-document-font-family, inherit);
45
45
  gap: 0 var(--utrecht-space-inline-sm);
@@ -49,7 +49,6 @@
49
49
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
50
50
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
51
51
  max-inline-size: var(--utrecht-form-field-max-inline-size);
52
- page-break-inside: avoid;
53
52
  }
54
53
 
55
54
  @mixin utrecht-form-field--invalid {
package/src/tokens.json CHANGED
@@ -3,66 +3,48 @@
3
3
  "form-field": {
4
4
  "margin-block-start": {
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-end": {
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
  "$extensions": {
27
- "nl.nldesignsystem.css.property": {
28
- "syntax": "<color>",
29
- "inherits": true
30
- },
31
- "nl.nldesignsystem.figma.supports-token": true
21
+ "nl.nldesignsystem.css-property-syntax": "<color>",
22
+ "nl.nldesignsystem.figma-implementation": true
32
23
  },
33
- "type": "color"
24
+ "$type": "color"
34
25
  },
35
26
  "border-inline-start-width": {
36
27
  "$extensions": {
37
- "nl.nldesignsystem.css.property": {
38
- "syntax": "<length>",
39
- "inherits": true
40
- },
41
- "nl.nldesignsystem.figma.supports-token": true
28
+ "nl.nldesignsystem.css-property-syntax": "<length>",
29
+ "nl.nldesignsystem.figma-implementation": true
42
30
  },
43
- "type": "borderWidth"
31
+ "$type": "dimension"
44
32
  },
45
33
  "padding-inline-start": {
46
34
  "$extensions": {
47
- "nl.nldesignsystem.css.property": {
48
- "syntax": "<length>",
49
- "inherits": true
50
- },
51
- "nl.nldesignsystem.figma.supports-token": true
35
+ "nl.nldesignsystem.css-property-syntax": "<length>",
36
+ "nl.nldesignsystem.figma-implementation": true
52
37
  },
53
- "type": "spacing"
38
+ "$type": "dimension"
54
39
  }
55
40
  },
56
41
  "label": {
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
  }
68
50
  }