@knime/kds-styles 0.6.7 → 0.8.0

package/dist/tokens/css/_properties-legacy.css

@@ -143,13 +143,13 @@ syntax: "<color>";
 @property --kds-color-background-danger-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(3 100% 86%);
+  initial-value: hsl(2 100% 92%);
 }
 
 @property --kds-color-background-danger-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(4 100% 80%);
+  initial-value: hsl(3 100% 86%);
 }
 
 @property --kds-color-background-danger-bold-initial {
@@ -1118,6 +1118,12 @@ syntax: "<string>";
   initial-value: 2px solid hsl(345 0% 10% / 0.74);
 }
 
+@property --kds-border-color-picker-handle-initial {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 2px solid hsl(0 0% 99%);
+}
+
 @property --kds-elevation-level-0 {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_properties.css

@@ -1149,12 +1149,6 @@ syntax: "<string>";
 }
 
 @property --kds-core-line-height-singleline {
-syntax: "<number> | <percentage>";
-  inherits: true;
-  initial-value: 1;
-}
-
-@property --kds-core-line-height-multiline-narrow {
 syntax: "<number> | <percentage>";
   inherits: true;
   initial-value: 1.3;
@@ -1343,13 +1337,13 @@ syntax: "<color>";
 @property --kds-color-background-danger-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
+  initial-value: light-dark(hsl(2 100% 92%), hsl(349 91% 35% / 0.72));
 }
 
 @property --kds-color-background-danger-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
+  initial-value: light-dark(hsl(3 100% 86%), hsl(353 75% 45% / 0.72));
 }
 
 @property --kds-color-background-danger-bold-initial {
@@ -2408,6 +2402,12 @@ syntax: "<string>";
   initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
 }
 
+@property --kds-border-color-picker-handle-initial {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 2px solid hsl(0 0% 99%);
+}
+
 @property --kds-sizing-viewport-breakpoints-576 {
 syntax: "<length>";
   inherits: false;
@@ -2558,6 +2558,12 @@ syntax: "<length>";
   initial-value: 4px;
 }
 
+@property --kds-dimension-component-height-0-125x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 2px;
+}
+
 @property --kds-dimension-component-height-0-25x {
 syntax: "<length>";
   inherits: false;
@@ -2618,6 +2624,30 @@ syntax: "<length>";
   initial-value: 64px;
 }
 
+@property --kds-dimension-component-height-12x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 192px;
+}
+
+@property --kds-dimension-component-height-20x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 320px;
+}
+
+@property --kds-dimension-component-height-45x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 720px;
+}
+
+@property --kds-dimension-component-width-0-125x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 2px;
+}
+
 @property --kds-dimension-component-width-0-25x {
 syntax: "<length>";
   inherits: false;
@@ -2672,16 +2702,16 @@ syntax: "<length>";
   initial-value: 64px;
 }
 
-@property --kds-dimension-component-width-25x {
+@property --kds-dimension-component-width-16x {
 syntax: "<length>";
   inherits: false;
-  initial-value: 400px;
+  initial-value: 256px;
 }
 
-@property --kds-dimension-component-width-16x {
+@property --kds-dimension-component-width-25x {
 syntax: "<length>";
   inherits: false;
-  initial-value: 256px;
+  initial-value: 400px;
 }
 
 @property --kds-dimension-component-width-32x {
@@ -2759,43 +2789,43 @@ syntax: "<string>";
 @property --kds-font-base-title-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 10px/1 Roboto, sans-serif;
+  initial-value: 500 10px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 12px/1 Roboto, sans-serif;
+  initial-value: 500 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 12px/1 Roboto, sans-serif;
+  initial-value: 700 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 14px/1 Roboto, sans-serif;
+  initial-value: 500 14px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-medium-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 14px/1 Roboto, sans-serif;
+  initial-value: 700 14px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 16px/1 Roboto, sans-serif;
+  initial-value: 500 16px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-large-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 16px/1 Roboto, sans-serif;
+  initial-value: 700 16px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-small {
@@ -2831,7 +2861,7 @@ syntax: "<string>";
 @property --kds-font-base-body-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 16px/1.3 Roboto, sans-serif;
+  initial-value: 400 16px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-xlarge {
@@ -2843,7 +2873,7 @@ syntax: "<string>";
 @property --kds-font-base-subtext-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 9px Roboto, sans-serif;
+  initial-value: 400 9px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-subtext-small {
@@ -2861,55 +2891,55 @@ syntax: "<string>";
 @property --kds-font-base-interactive-xsmall-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 11px/1 Roboto, sans-serif;
+  initial-value: 500 11px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 12px/1 Roboto, sans-serif;
+  initial-value: 400 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: italic 400 12px/1 Roboto, sans-serif;
+  initial-value: italic 400 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 12px/1 Roboto, sans-serif;
+  initial-value: 500 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 14px/1 Roboto, sans-serif;
+  initial-value: 400 14px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-medium-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 14px/1 Roboto, sans-serif;
+  initial-value: 500 14px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 16px/1 Roboto, sans-serif;
+  initial-value: 400 16px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-large-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 16px/1 Roboto, sans-serif;
+  initial-value: 500 16px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-code-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 10px/1 'Roboto Mono', monospace;
+  initial-value: 400 10px/1.3 'Roboto Mono', monospace;
 }
 
 @property --kds-font-base-code-small {

package/dist/tokens/css/_variables-legacy.css

@@ -26,8 +26,8 @@
   --kds-color-background-selected-bold-hover: hsl(0 0% 16%);
   --kds-color-background-selected-bold-active: hsl(0 0% 13%);
   --kds-color-background-danger-initial: hsl(0 100% 97%);
-  --kds-color-background-danger-hover: hsl(3 100% 86%);
-  --kds-color-background-danger-active: hsl(4 100% 80%);
+  --kds-color-background-danger-hover: hsl(2 100% 92%);
+  --kds-color-background-danger-active: hsl(3 100% 86%);
   --kds-color-background-danger-bold-initial: hsl(349 91% 35%);
   --kds-color-background-danger-bold-hover: hsl(348 97% 27%);
   --kds-color-background-danger-bold-active: hsl(348 94% 21%);
@@ -189,6 +189,7 @@
   --kds-border-resize-handle-initial: 2px solid hsl(345 0% 10% / 0.4);
   --kds-border-resize-handle-hover: 2px solid hsl(345 0% 10% / 0.64);
   --kds-border-resize-handle-active: 2px solid hsl(345 0% 10% / 0.74);
+  --kds-border-color-picker-handle-initial: 2px solid hsl(0 0% 99%);
   --kds-elevation-level-0: 0 0 0 0 hsl(330 0% 73% / 0.32);
   --kds-elevation-level-1: 0 1px 1px 0 hsl(330 0% 73% / 0.32), 0 0 1px 0 hsl(330 0% 32% / 0.14), 0 0 8px 0 hsl(330 0% 32% / 0.12);
   --kds-elevation-level-3: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);

package/dist/tokens/css/_variables.css

@@ -194,8 +194,7 @@
   --kds-core-font-weight-strong: 700;
   --kds-core-font-weight-strong-italic-weight: 700;
   --kds-core-font-weight-strong-italic-style: italic;
-  --kds-core-line-height-singleline: 1;
-  --kds-core-line-height-multiline-narrow: 1.3;
+  --kds-core-line-height-singleline: 1.3;
   --kds-core-line-height-multiline-wide: 1.5;
   --kds-core-size-scale: 16px;
   --kds-core-border-width-none: 0;
@@ -226,8 +225,8 @@
   --kds-color-background-selected-bold-hover: light-dark(hsl(176 67% 22%), hsl(174 48% 31%));
   --kds-color-background-selected-bold-active: light-dark(hsl(177 82% 18%), hsl(172 27% 48%));
   --kds-color-background-danger-initial: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
-  --kds-color-background-danger-hover: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
-  --kds-color-background-danger-active: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
+  --kds-color-background-danger-hover: light-dark(hsl(2 100% 92%), hsl(349 91% 35% / 0.72));
+  --kds-color-background-danger-active: light-dark(hsl(3 100% 86%), hsl(353 75% 45% / 0.72));
   --kds-color-background-danger-bold-initial: light-dark(hsl(349 91% 35%), hsl(348 97% 27%));
   --kds-color-background-danger-bold-hover: light-dark(hsl(348 97% 27%), hsl(353 75% 45% / 0.8));
   --kds-color-background-danger-bold-active: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
@@ -404,6 +403,7 @@
   --kds-border-resize-handle-initial: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
   --kds-border-resize-handle-hover: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
   --kds-border-resize-handle-active: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
+  --kds-border-color-picker-handle-initial: 2px solid hsl(0 0% 99%);
   --kds-sizing-viewport-breakpoints-576: 576px;
   --kds-sizing-viewport-breakpoints-768: 768px;
   --kds-sizing-viewport-breakpoints-1024: 1024px;
@@ -429,6 +429,7 @@
   --kds-spacing-offset-focus: 1px;
   --kds-spacing-input-label-spacing-bottom: 6px;
   --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-75x: 12px;
   --kds-dimension-component-height-0-88x: 14px;
@@ -439,6 +440,10 @@
   --kds-dimension-component-height-2-25x: 36px;
   --kds-dimension-component-height-2-5x: 40px;
   --kds-dimension-component-height-4x: 64px;
+  --kds-dimension-component-height-12x: 192px;
+  --kds-dimension-component-height-20x: 320px;
+  --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-75x: 12px;
   --kds-dimension-component-width-0-88x: 14px;
@@ -448,8 +453,8 @@
   --kds-dimension-component-width-1-75x: 28px;
   --kds-dimension-component-width-2-25x: 36px;
   --kds-dimension-component-width-4x: 64px;
-  --kds-dimension-component-width-25x: 400px;
   --kds-dimension-component-width-16x: 256px;
+  --kds-dimension-component-width-25x: 400px;
   --kds-dimension-component-width-32x: 512px;
   --kds-dimension-component-width-45x: 720px;
   --kds-dimension-component-width-61x: 976px;
@@ -462,32 +467,32 @@
   --kds-font-base-display-medium: 700 24px/1.3 Roboto, sans-serif;
   --kds-font-base-display-large: 700 32px/1.3 Roboto, sans-serif;
   --kds-font-base-display-xlarge: 700 40px/1.3 Roboto, sans-serif;
-  --kds-font-base-title-xsmall: 500 10px/1 Roboto, sans-serif;
-  --kds-font-base-title-small: 500 12px/1 Roboto, sans-serif;
-  --kds-font-base-title-small-strong: 700 12px/1 Roboto, sans-serif;
-  --kds-font-base-title-medium: 500 14px/1 Roboto, sans-serif;
-  --kds-font-base-title-medium-strong: 700 14px/1 Roboto, sans-serif;
-  --kds-font-base-title-large: 500 16px/1 Roboto, sans-serif;
-  --kds-font-base-title-large-strong: 700 16px/1 Roboto, sans-serif;
+  --kds-font-base-title-xsmall: 500 10px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-small: 500 12px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-small-strong: 700 12px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-medium: 500 14px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-medium-strong: 700 14px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-large: 500 16px/1.3 Roboto, sans-serif;
+  --kds-font-base-title-large-strong: 700 16px/1.3 Roboto, sans-serif;
   --kds-font-base-body-small: 400 12px/1.5 Roboto, sans-serif;
   --kds-font-base-body-small-italic: italic 400 12px/1.5 Roboto, sans-serif;
   --kds-font-base-body-small-strong: 700 12px/1.5 Roboto, sans-serif;
   --kds-font-base-body-small-strong-italic: italic 700 12px/1.5 Roboto, sans-serif;
   --kds-font-base-body-medium: 400 14px/1.5 Roboto, sans-serif;
-  --kds-font-base-body-large: 400 16px/1.3 Roboto, sans-serif;
+  --kds-font-base-body-large: 400 16px/1.5 Roboto, sans-serif;
   --kds-font-base-body-xlarge: 400 20px/1.5 Roboto, sans-serif;
-  --kds-font-base-subtext-xsmall: 400 9px Roboto, sans-serif;
+  --kds-font-base-subtext-xsmall: 400 9px/1.3 Roboto, sans-serif;
   --kds-font-base-subtext-small: 400 10px/1.3 Roboto, sans-serif;
   --kds-font-base-subtext-medium: 400 12px/1.3 Roboto, sans-serif;
-  --kds-font-base-interactive-xsmall-strong: 500 11px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-small: 400 12px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-small-italic: italic 400 12px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-small-strong: 500 12px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-medium: 400 14px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-medium-strong: 500 14px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-large: 400 16px/1 Roboto, sans-serif;
-  --kds-font-base-interactive-large-strong: 500 16px/1 Roboto, sans-serif;
-  --kds-font-base-code-xsmall: 400 10px/1 'Roboto Mono', monospace;
+  --kds-font-base-interactive-xsmall-strong: 500 11px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-small: 400 12px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-small-italic: italic 400 12px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-small-strong: 500 12px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-medium: 400 14px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-medium-strong: 500 14px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-large: 400 16px/1.3 Roboto, sans-serif;
+  --kds-font-base-interactive-large-strong: 500 16px/1.3 Roboto, sans-serif;
+  --kds-font-base-code-xsmall: 400 10px/1.3 'Roboto Mono', monospace;
   --kds-font-base-code-small: 400 11px/1.3 'Roboto Mono', monospace;
   --kds-font-workflow-annotation-headline-h1: 700 36px/1.5 'Roboto Condensed', sans-serif;
   --kds-font-workflow-annotation-headline-h2: 700 30px/1.5 'Roboto Condensed', sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.6.7",
+  "version": "0.8.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -17,11 +17,11 @@
     "modern-normalize": "3.0.1"
   },
   "devDependencies": {
-    "@tokens-studio/sd-transforms": "^2.0.1",
-    "@types/jsdom": "^21.1.7",
+    "@tokens-studio/sd-transforms": "^2.0.3",
+    "@types/jsdom": "^27.0.0",
     "@types/node": "^25.0.10",
     "consola": "^3.4.2",
-    "jsdom": "^27.0.0",
+    "jsdom": "^28.0.0",
     "style-dictionary": "^5.2.0",
     "svgo": "^4.0.0",
     "typescript": "^5.9.3"