@knime/kds-styles 10.1.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-styles
 
+## 11.0.0
+
+## 10.2.0
+
+### Minor Changes
+
+- 6e81ee9: Add the `--kds-dimension-component-height-0-5x` and `--kds-dimension-component-width-0-5x` tokens (8px).
+
 ## 10.1.0
 
 ## 10.0.0

package/README.md

@@ -60,7 +60,7 @@ An app that cannot import `index.css` yet — e.g. it still needs the `@knime/st
 
 Do so deliberately if the app is only partially migrated: legacy `--knime-*` properties are hard-coded light and ignore `light-dark()`, so those parts stay light, and `color-scheme` also switches browser chrome (scrollbars, form controls, canvas background).
 
-For an explicit user override, call `useKdsDarkMode()` from `@knime/kds-components`. It writes `color-scheme` inline on `<html>`, winning over the rule above. It needs a DOM, so in a server-rendered app call it from client-only code and leave the `system` default to CSS.
+For an explicit user override, call `useKdsDarkModeController()` from `@knime/kds-components`. It writes `color-scheme` inline on `<html>`, winning over the rule above. It needs a DOM, so in a server-rendered app call it from client-only code and leave the `system` default to CSS.
 
 ### Design Tokens in JavaScript/TypeScript
 

package/dist/css/basics.css

@@ -4,8 +4,8 @@
   /*
    * Follow the device preference. The color tokens resolve via `light-dark()`,
    * so this needs no JavaScript and applies on the first paint.
-   * `useKdsDarkMode()` overrides it with an inline style for an explicit
-   * light/dark preference.
+   * `useKdsDarkModeController()` overrides it with an inline style for an
+   * explicit light/dark preference.
    */
   color-scheme: light dark;
 }

package/dist/tokens/css/_properties.css

@@ -2972,6 +2972,12 @@ syntax: "<length>";
   initial-value: 4px;
 }
 
+@property --kds-dimension-component-height-0-5x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 8px;
+}
+
 @property --kds-dimension-component-height-0-75x {
 syntax: "<length>";
   inherits: false;
@@ -3080,6 +3086,12 @@ syntax: "<length>";
   initial-value: 4px;
 }
 
+@property --kds-dimension-component-width-0-5x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 8px;
+}
+
 @property --kds-dimension-component-width-0-75x {
 syntax: "<length>";
   inherits: false;

package/dist/tokens/css/_variables.css

@@ -498,6 +498,7 @@
   --kds-spacing-sub-text-spacing-top: 4px;
   --kds-dimension-component-height-0-125x: 2px;
   --kds-dimension-component-height-0-25x: 4px;
+  --kds-dimension-component-height-0-5x: 8px;
   --kds-dimension-component-height-0-75x: 12px;
   --kds-dimension-component-height-0-88x: 14px;
   --kds-dimension-component-height-1x: 16px;
@@ -516,6 +517,7 @@
   --kds-dimension-component-height-45x: 720px;
   --kds-dimension-component-width-0-125x: 2px;
   --kds-dimension-component-width-0-25x: 4px;
+  --kds-dimension-component-width-0-5x: 8px;
   --kds-dimension-component-width-0-75x: 12px;
   --kds-dimension-component-width-0-88x: 14px;
   --kds-dimension-component-width-1x: 16px;

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

@@ -14,6 +14,10 @@ export type KdsDimensionTokens = {
              * Extra small component height (4px). Use for thin dividers and minimal height elements.
              */
             readonly "0.25x": KdsDimension;
+            /**
+             * Extra small component height (8px). Use for tiny elements.
+             */
+            readonly "0.5x": KdsDimension;
             /**
              * Small component height (12px). Use for compact inline elements and badges.
              */
@@ -88,6 +92,10 @@ export type KdsDimensionTokens = {
              * Extra small component width (4px). Use for thin dividers and minimal width elements.
              */
             readonly "0.25x": KdsDimension;
+            /**
+             * Extra small component width (8px). Use for tiny elements like the xsmall KdsToggleSwitch knob.
+             */
+            readonly "0.5x": KdsDimension;
             /**
              * Small component width (12px). Use for compact inline elements.
              */

package/dist/tokens/ts/dimension.js

@@ -21,6 +21,14 @@ export const dimension = {
                     variable: "var(--kds-dimension-component-height-0-25x)",
                 },
             },
+            "0.5x": {
+                value: 8,
+                unit: "px",
+                css: {
+                    value: "8px",
+                    variable: "var(--kds-dimension-component-height-0-5x)",
+                },
+            },
             "0.75x": {
                 value: 12,
                 unit: "px",
@@ -167,6 +175,14 @@ export const dimension = {
                     variable: "var(--kds-dimension-component-width-0-25x)",
                 },
             },
+            "0.5x": {
+                value: 8,
+                unit: "px",
+                css: {
+                    value: "8px",
+                    variable: "var(--kds-dimension-component-width-0-5x)",
+                },
+            },
             "0.75x": {
                 value: 12,
                 unit: "px",

package/package.json

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