From df443c2b456f5c9fb2ac984680f63accf5f5c071 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Sat, 12 Oct 2024 14:33:55 +0200
Subject: [PATCH] feat: support explicit column count tokens for print

---
 .changeset/eleven-comics-fail.md         |  8 ++++++++
 components/column-layout/src/_mixin.scss |  6 ++++++
 components/column-layout/src/index.scss  |  4 ++++
 components/column-layout/src/tokens.json | 22 ++++++++++++++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 .changeset/eleven-comics-fail.md

diff --git a/.changeset/eleven-comics-fail.md b/.changeset/eleven-comics-fail.md
new file mode 100644
index 00000000000..6d006f67d62
--- /dev/null
+++ 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
index 4750d9ff945..b06b3617c1c 100644
--- 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
index 0828a838d56..db48c63098f 100644
--- 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
index c1195ba14b4..1547f6b7e54 100644
--- 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"
+        }
       }
     }
   }