feat: support explicit column count tokens for print

nl-design-system · Oct 12, 2024 · df443c2 · df443c2
1 parent 17d9813
commit df443c2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/.changeset/eleven-comics-fail.md b/.changeset/eleven-comics-fail.md
@@ -0,0 +1,8 @@
+---
+"@utrecht/column-layout-css": minor
+---
+
+Add two design tokens to support explicit column count for print, or a special `column-width` for print:
+
+- `utrecht.column-layout.print.column-count`
+- `utrecht.column-layout.print.column-width`
diff --git a/components/column-layout/src/_mixin.scss b/components/column-layout/src/_mixin.scss
@@ -17,6 +17,12 @@ $utrecht-support-prince-xml: false !default;
   }
 }
 
+@mixin utrecht-column-layout--print {
+  /* render two columns by default */
+  column-count: var(--utrecht-column-layout-print-column-count, 2);
+  column-width: var(--utrecht-column-layout-print-column-width, auto);
+}
+
 @mixin utrecht-column-layout--rule {
   column-rule-color: var(--utrecht-column-layout-column-rule-color);
   column-rule-style: solid;

diff --git a/components/column-layout/src/index.scss b/components/column-layout/src/index.scss
@@ -8,6 +8,10 @@
 
 .utrecht-column-layout {
   @include utrecht-column-layout;
+
+  @media print {
+    @include utrecht-column-layout--print;
+  }
 }
 
 .utrecht-column-layout--rule {

diff --git a/components/column-layout/src/tokens.json b/components/column-layout/src/tokens.json
@@ -40,6 +40,28 @@
           "nl.nldesignsystem.figma.supports-token": false
         },
         "type": "spacing"
+      },
+      "print": {
+        "column-count": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<number>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        },
+        "column-width": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "sizing"
+        }
       }
     }
   }