feat: add fluid font-size scale to voorbeeld-theme

packages/storybook/config/preview.ts

@@ -45,6 +45,7 @@ import '@nl-design-system-unstable/tubbergen-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/tubbergen-design-tokens/src/font';
 import '@nl-design-system-unstable/venray-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/theme.css';
+import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/fluid.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/src/custom.scss';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font';
 import '@nl-design-system-unstable/vught-design-tokens/dist/index.css';

packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json

@@ -916,17 +916,54 @@
   "common": {
     "basis": {
       "typography": {
+        "min": {
+          "small": { "font-size": { "$value": "0.9643rem" } },
+          "medium": { "font-size": { "$value": "1.125rem" } },
+          "large": { "font-size": { "$value": "1.3125rem" } },
+          "x-large": { "font-size": { "$value": "1.5313rem" } },
+          "xx-large": { "font-size": { "$value": "1.7865rem" } },
+          "xxx-large": { "font-size": { "$value": "2.0842rem" } },
+          "xxxx-large": { "font-size": { "$value": "2.4316rem" } }
+        },
         "scale": {
-          "xx-small": { "font-size": { "$value": "8px", "comment": "8px" } },
-          "x-small": { "font-size": { "$value": "12px", "comment": "12px" } },
-          "small": { "font-size": { "$value": "14px", "comment": "14px" } },
-          "medium": { "font-size": { "$value": "16px", "comment": "16px" } },
-          "large": { "font-size": { "$value": "20px", "comment": "20px" } },
-          "x-large": { "font-size": { "$value": "24px", "comment": "24px" } },
-          "xx-large": { "font-size": { "$value": "32px", "comment": "32px" } },
-          "xxx-large": { "font-size": { "$value": "40px", "comment": "40px" } },
-          "xxxx-large": { "font-size": { "$value": "48px", "comment": "48px" } }
-        }
+          "small": {
+            "font-size": { "$value": "14px" },
+            "line-height": { "$value": "1.6" }
+          },
+          "medium": {
+            "font-size": { "$value": "16px" },
+            "line-height": { "$value": "1.6" }
+          },
+          "large": {
+            "font-size": { "$value": "20px" },
+            "line-height": { "$value": "1.5" }
+          },
+          "x-large": {
+            "font-size": { "$value": "24px" },
+            "line-height": { "$value": "1.3" }
+          },
+          "xx-large": {
+            "font-size": { "$value": "32px" },
+            "line-height": { "$value": "1.25" }
+          },
+          "xxx-large": {
+            "font-size": { "$value": "40px" },
+            "line-height": { "$value": "1.2" }
+          },
+          "xxxx-large": {
+            "font-size": { "$value": "48px" },
+            "line-height": { "$value": "1.15" }
+          }
+        },
+        "max": {
+          "small": { "font-size": { "$value": "1.2rem" } },
+          "medium": { "font-size": { "$value": "1.5rem" } },
+          "large": { "font-size": { "$value": "1.875rem" } },
+          "x-large": { "font-size": { "$value": "2.3438rem" } },
+          "xx-large": { "font-size": { "$value": "2.9297rem" } },
+          "xxx-large": { "font-size": { "$value": "3.6621rem" } },
+          "xxxx-large": { "font-size": { "$value": "4.5776rem" } }
+        },
       }
     },
     "utrecht": {

packages/voorbeeld-design-tokens/src/fluid.scss

@@ -0,0 +1,80 @@
+/*
+ * Prefer `vi` over `vw` when available.
+ * Like `inline-size` and other logical properties, `vi` is based on the `inline` axis,
+ * instead of making assumptions about the text direction.
+ * The `vi` unit is unfortunately not yet implemented by all evergreen browsers.
+ */
+
+@property --100vw {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: true;
+}
+
+@property --100vi {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: true;
+}
+
+.voorbeeld-theme {
+  --100vw: 100vw;
+  --100vi: 100vi;
+
+  --viewport-small-inline-size: 320;
+  --viewport-large-inline-size: 1600;
+  --viewport-size: tan(atan2(var(--100vi, var(--100vw)), 1px));
+  --font-size-scale: calc(
+    (
+        clamp(var(--viewport-small-inline-size), var(--viewport-size), var(--viewport-large-inline-size)) -
+          var(--viewport-small-inline-size)
+      ) / (var(--viewport-large-inline-size) - var(--viewport-small-inline-size))
+  );
+
+  /*
+  --basis-typography-min-xxxx-large-font-size: 2.4316rem;
+  --basis-typography-max-xxxx-large-font-size: 4.5776rem;
+  */
+
+  --basis-typography-scale-small-font-size: calc(
+    var(--basis-typography-min-small-font-size) +
+      (var(--basis-typography-max-small-font-size) - var(--basis-typography-min-small-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-medium-font-size: calc(
+    var(--basis-typography-min-medium-font-size) +
+      (var(--basis-typography-max-medium-font-size) - var(--basis-typography-min-medium-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-large-font-size: calc(
+    var(--basis-typography-min-large-font-size) +
+      (var(--basis-typography-max-large-font-size) - var(--basis-typography-min-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-x-large-font-size: calc(
+    var(--basis-typography-min-x-large-font-size) +
+      (var(--basis-typography-max-x-large-font-size) - var(--basis-typography-min-x-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xx-large-font-size: calc(
+    var(--basis-typography-min-xx-large-font-size) +
+      (var(--basis-typography-max-xx-large-font-size) - var(--basis-typography-min-xx-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xxx-large-font-size: calc(
+    var(--basis-typography-min-xxx-large-font-size) +
+      (var(--basis-typography-max-xxx-large-font-size) - var(--basis-typography-min-xxx-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xxxx-large-font-size: calc(
+    var(--basis-typography-min-xxxx-large-font-size) +
+      (var(--basis-typography-max-xxxx-large-font-size) - var(--basis-typography-min-xxxx-large-font-size)) *
+      var(--font-size-scale)
+  );
+}