@utrecht/heading-3-css 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @utrecht/heading-3-css
 
+## 3.0.0
+
+### Major Changes
+
+- eabbf23: Publish `tokens.json` in DTCG format: `$value` instead of `value`, standard `$type`, etcetera.
+
+## 2.0.2
+
+### Patch Changes
+
+- 982448a: Switch from deprecated CSS properties to ones that are newly Baseline supported:
+
+  - `clip` now iw `clip-path`.
+  - `word-break` is now `overflow-wrap`
+  - `page-break-inside` now is `break-inside`.
+  - `page-break-after` now is `break-after`.
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/html/index.css

@@ -4,9 +4,10 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 h3 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -14,6 +15,5 @@ h3 {
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }

package/dist/html/index.min.css

@@ -1 +1 @@
-h3{break-inside:avoid-column;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid;--utrecht-space-around:1}
+h3{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));--utrecht-space-around:1}

package/dist/html/index.mjs

@@ -1 +1 @@
-export default "h3{break-inside:avoid-column;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid;--utrecht-space-around:1}";
+export default "h3{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));--utrecht-space-around:1}";

package/dist/index.css

@@ -5,9 +5,10 @@
  */
 
 .utrecht-heading-3 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -15,7 +16,6 @@
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-3--distanced {

package/dist/index.min.css

@@ -1 +1 @@
-.utrecht-heading-3{break-inside:avoid-column;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid}.utrecht-heading-3--distanced{--utrecht-space-around:1}
+.utrecht-heading-3{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0))}.utrecht-heading-3--distanced{--utrecht-space-around:1}

package/dist/index.mjs

@@ -1 +1 @@
-export default ".utrecht-heading-3{break-inside:avoid-column;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;page-break-inside:avoid}.utrecht-heading-3--distanced{--utrecht-space-around:1}";
+export default ".utrecht-heading-3{break-after:avoid;break-after:avoid-page;break-inside:avoid-column;break-inside:avoid;color:var(--utrecht-heading-3-color,var(--utrecht-heading-color,var(--utrecht-document-color,inherit)));font-family:var(--utrecht-heading-3-font-family,var(--utrecht-heading-font-family,var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size,revert);font-weight:var(--utrecht-heading-3-font-weight,var(--utrecht-heading-font-weight,bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-heading-3-margin-block-start, 0))}.utrecht-heading-3--distanced{--utrecht-space-around:1}";

package/dist/tokens.mjs

@@ -3,87 +3,66 @@ export default {
     "heading-3": {
       "color": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<color>",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "<color>",
           "nl.nldesignsystem.fallback": [
             "utrecht.heading.color",
             "utrecht.document.color"
           ],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "color"
+        "$type": "color"
       },
       "font-family": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "*",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "*",
           "nl.nldesignsystem.fallback": [
             "utrecht.heading.font-family",
             "utrecht.document.font-family"
           ],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontFamilies"
+        "$type": "fontFamily"
       },
       "font-size": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontSizes"
+        "$type": "dimension"
       },
       "font-weight": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<number>",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "<number>",
           "nl.nldesignsystem.fallback": [
             "utrecht.heading.font-weight"
           ],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontWeights"
+        "$type": "fontWeight"
       },
       "line-height": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": [
-              "<length>",
-              "<number>"
-            ],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.css-property-syntax": [
+            "<length>",
+            "<number>"
+          ],
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "lineHeights"
+        "$type": "dimension"
       },
       "margin-block-end": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false
         },
-        "type": "spacing"
+        "$type": "dimension"
       },
       "margin-block-start": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false
         },
-        "type": "spacing"
+        "$type": "dimension"
       }
     }
   }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.1",
+  "version": "3.0.0",
   "author": "Community for NL Design System",
   "description": "Heading 3 component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -12,8 +12,8 @@
   ],
   "main": "dist/index.css",
   "devDependencies": {
-    "@utrecht/build-utils-css": "0.0.4",
-    "@utrecht/heading-css": "2.0.1"
+    "@utrecht/heading-css": "3.0.0",
+    "@utrecht/build-utils-css": "0.0.4"
   },
   "keywords": [
     "nl-design-system"

package/src/_mixin.scss

@@ -9,6 +9,7 @@
 @mixin utrecht-heading-3 {
   @include utrecht-heading;
 
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(
     --utrecht-heading-3-font-family,
@@ -19,7 +20,6 @@
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 @mixin utrecht-heading-3--distanced {

package/src/tokens.json

@@ -3,76 +3,55 @@
     "heading-3": {
       "color": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<color>",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "<color>",
           "nl.nldesignsystem.fallback": ["utrecht.heading.color", "utrecht.document.color"],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "color"
+        "$type": "color"
       },
       "font-family": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "*",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "*",
           "nl.nldesignsystem.fallback": ["utrecht.heading.font-family", "utrecht.document.font-family"],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontFamilies"
+        "$type": "fontFamily"
       },
       "font-size": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontSizes"
+        "$type": "dimension"
       },
       "font-weight": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<number>",
-            "inherits": true
-          },
+          "nl.nldesignsystem.css-property-syntax": "<number>",
           "nl.nldesignsystem.fallback": ["utrecht.heading.font-weight"],
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "fontWeights"
+        "$type": "fontWeight"
       },
       "line-height": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": ["<length>", "<number>"],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.css-property-syntax": ["<length>", "<number>"],
+          "nl.nldesignsystem.figma-implementation": true
         },
-        "type": "lineHeights"
+        "$type": "dimension"
       },
       "margin-block-end": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false
         },
-        "type": "spacing"
+        "$type": "dimension"
       },
       "margin-block-start": {
         "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false
         },
-        "type": "spacing"
+        "$type": "dimension"
       }
     }
   }