@knime/kds-styles 6.4.0 → 6.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-styles
 
+## 6.6.0
+
+### Patch Changes
+
+- 19c91aa: KDS-992: Add width tokens for content optimization e.g. of multi column layouts inside containers
+
+## 6.5.0
+
 ## 6.4.0
 
 ## 6.3.1

package/dist/tokens/css/_properties.css

@@ -3122,6 +3122,18 @@ syntax: "<length>";
   initial-value: 64px;
 }
 
+@property --kds-dimension-component-width-6x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 96px;
+}
+
+@property --kds-dimension-component-width-8x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 128px;
+}
+
 @property --kds-dimension-component-width-12x {
 syntax: "<length>";
   inherits: false;

package/dist/tokens/css/_variables.css

@@ -523,6 +523,8 @@
   --kds-dimension-component-width-2-25x: 36px;
   --kds-dimension-component-width-2-75x: 44px;
   --kds-dimension-component-width-4x: 64px;
+  --kds-dimension-component-width-6x: 96px;
+  --kds-dimension-component-width-8x: 128px;
   --kds-dimension-component-width-12x: 192px;
   --kds-dimension-component-width-12-5x: 200px;
   --kds-dimension-component-width-16x: 256px;

package/dist/tokens/ts/dimension.d.ts

@@ -128,6 +128,14 @@ export type KdsDimensionTokens = {
              * Extra large component width (64px). Use for large interactive elements.
              */
             readonly "4x": KdsDimension;
+            /**
+             * Extra large component width (96px). Use for width and max-width sizing of multi-column content or components that must align with surrounding layout.
+             */
+            readonly "6x": KdsDimension;
+            /**
+             * Extra large component width (128px). Use for width and max-width sizing of components that must align with a wider layout unit.
+             */
+            readonly "8x": KdsDimension;
             /**
              * Container width (192px). Use for listContainer and menuContainer.
              */

package/dist/tokens/ts/dimension.js

@@ -247,6 +247,22 @@ export const dimension = {
                     variable: "var(--kds-dimension-component-width-4x)",
                 },
             },
+            "6x": {
+                value: 96,
+                unit: "px",
+                css: {
+                    value: "96px",
+                    variable: "var(--kds-dimension-component-width-6x)",
+                },
+            },
+            "8x": {
+                value: 128,
+                unit: "px",
+                css: {
+                    value: "128px",
+                    variable: "var(--kds-dimension-component-width-8x)",
+                },
+            },
             "12x": {
                 value: 192,
                 unit: "px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "6.4.0",
+  "version": "6.6.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",