@knime/kds-styles 0.0.7 → 0.0.8

package/dist/css/basics.css

@@ -0,0 +1,21 @@
+body {
+  font: var(--kds-font-base-body-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+
+a {
+  color: inherit;
+}
+
+svg {
+  shape-rendering: geometricPrecision;
+}
+
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="email"],
+input[type="number"] {
+  appearance: none;
+  border-radius: 0;
+}

package/dist/css/index.css

@@ -0,0 +1,3 @@
+@import "modern-normalize/modern-normalize.css";
+@import "./variables";
+@import "./basics";

package/dist/css/legacy/legacy-theme.css

@@ -0,0 +1,20 @@
+:root.kds-legacy {
+  --primary-initial: var(--kds-core-color-neutral-650);
+  --primary-bold: var(--kds-core-color-neutral-650);
+  --selected-initial: var(--kds-core-color-neutral-175);
+  --selected-hover: var(--kds-core-color-neutral-250);
+  --selected-active: var(--kds-core-color-neutral-275);
+  --selected-bold-initial: var(--kds-core-color-neutral-550);
+  --selected-bold-hover: var(--kds-core-color-neutral-650);
+  --selected-bold-active: var(--kds-core-color-neutral-725);
+  --disabled-primary-input: var(--kds-core-color-neutral-650);
+  --text-an-icon-primary: var(--kds-core-color-neutral-650);
+  --text-an-icon-primary-inverted: var(--kds-core-color-neutral-100);
+  --text-an-icon-selected: var(--kds-core-color-neutral-650);
+  --text-an-icon-selected-inverted: var(--kds-core-color-neutral-100);
+  --text-an-icon-disabled-inverted: var(--kds-core-color-neutral-275);
+  --border-primary-bold: var(--kds-core-color-neutral-725);
+  --border-primary: var(--kds-core-color-neutral-250);
+  --border-selected-bold: var(--kds-core-color-neutral-550);
+  --border-selected: var(--kds-core-color-neutral-400);
+}

package/dist/css/variables/index.css

@@ -0,0 +1,5 @@
+@import "@knime/kds-styles/kds-variables.css";
+
+:root {
+  --kds-focus-outline-offset: 1px;
+}

package/dist/tokens/css/_properties.css

@@ -890,396 +890,168 @@ syntax: "<color>";
   initial-value: hsl(330 0% 11% / 0);
 }
 
-@property --kds-core-dimension-0 {
+@property --kds-core-font-size-0-5x {
 syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --kds-core-dimension-6 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 1px;
-}
-
-@property --kds-core-dimension-12 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 2px;
-}
-
-@property --kds-core-dimension-25 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 4px;
-}
-
-@property --kds-core-dimension-31 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 5px;
-}
-
-@property --kds-core-dimension-37 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 6px;
-}
-
-@property --kds-core-dimension-44 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 7px;
-}
-
-@property --kds-core-dimension-50 {
-syntax: "<length>";
-  inherits: false;
+  inherits: true;
   initial-value: 8px;
 }
 
-@property --kds-core-dimension-56 {
+@property --kds-core-font-size-0-56x {
 syntax: "<length>";
-  inherits: false;
+  inherits: true;
   initial-value: 9px;
 }
 
-@property --kds-core-dimension-75 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 12px;
-}
-
-@property --kds-core-dimension-88 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 14px;
-}
-
-@property --kds-core-dimension-100 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 16px;
-}
-
-@property --kds-core-dimension-125 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 20px;
-}
-
-@property --kds-core-dimension-150 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 24px;
-}
-
-@property --kds-core-dimension-175 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 28px;
-}
-
-@property --kds-core-dimension-200 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 32px;
-}
-
-@property --kds-core-dimension-225 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 36px;
-}
-
-@property --kds-core-dimension-250 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 40px;
-}
-
-@property --kds-core-dimension-275 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 44px;
-}
-
-@property --kds-core-dimension-300 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 48px;
-}
-
-@property --kds-core-dimension-350 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 56px;
-}
-
-@property --kds-core-dimension-400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 64px;
-}
-
-@property --kds-core-dimension-450 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 72px;
-}
-
-@property --kds-core-dimension-500 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 80px;
-}
-
-@property --kds-core-dimension-600 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 96px;
-}
-
-@property --kds-core-dimension-700 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 112px;
-}
-
-@property --kds-core-dimension-800 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 128px;
-}
-
-@property --kds-core-dimension-900 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 144px;
-}
-
-@property --kds-core-dimension-1000 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 160px;
-}
-
-@property --kds-core-dimension-1100 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 176px;
-}
-
-@property --kds-core-dimension-1200 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 192px;
-}
-
-@property --kds-core-dimension-1300 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 208px;
-}
-
-@property --kds-core-dimension-1400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 224px;
-}
-
-@property --kds-core-dimension-1500 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 240px;
-}
-
-@property --kds-core-dimension-1600 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 256px;
-}
-
-@property --kds-core-dimension-2000 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 320px;
-}
-
-@property --kds-core-dimension-2400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 384px;
-}
-
-@property --kds-core-dimension-base {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 0.16px;
-}
-
-@property --kds-core-size-scale {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 16px;
-}
-
-@property --kds-core-font-size-rem {
+@property --kds-core-font-size-0-62x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 10px;
 }
 
-@property --kds-core-font-size-scaled-0-5x {
+@property --kds-core-font-size-0-68x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 8px;
+  initial-value: 11px;
 }
 
-@property --kds-core-font-size-scaled-0-56x {
+@property --kds-core-font-size-0-75x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 9px;
+  initial-value: 12px;
 }
 
-@property --kds-core-font-size-scaled-0-62x {
+@property --kds-core-font-size-0-81x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 10px;
+  initial-value: 13px;
 }
 
-@property --kds-core-font-size-scaled-0-68x {
+@property --kds-core-font-size-0-87x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 11px;
+  initial-value: 14px;
 }
 
-@property --kds-core-font-size-scaled-0-75x {
+@property --kds-core-font-size-1x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 12px;
+  initial-value: 16px;
 }
 
-@property --kds-core-font-size-scaled-0-81x {
+@property --kds-core-font-size-1-25x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 13px;
+  initial-value: 20px;
 }
 
-@property --kds-core-font-size-scaled-0-87x {
+@property --kds-core-font-size-1-375x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 14px;
+  initial-value: 22px;
 }
 
-@property --kds-core-font-size-scaled-1x {
+@property --kds-core-font-size-1-625x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 26px;
 }
 
-@property --kds-core-font-size-scaled-1-25x {
+@property --kds-core-font-size-1-5x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 20px;
+  initial-value: 24px;
 }
 
-@property --kds-core-font-size-scaled-1-5x {
+@property --kds-core-font-size-1-75x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 24px;
+  initial-value: 28px;
 }
 
-@property --kds-core-font-size-scaled-1-75x {
+@property --kds-core-font-size-1-875x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 28px;
+  initial-value: 30px;
 }
 
-@property --kds-core-font-size-scaled-2x {
+@property --kds-core-font-size-2x {
 syntax: "<length>";
   inherits: true;
   initial-value: 32px;
 }
 
-@property --kds-core-font-size-scaled-2-25x {
+@property --kds-core-font-size-2-25x {
 syntax: "<length>";
   inherits: true;
   initial-value: 36px;
 }
 
-@property --kds-core-font-size-scaled-2-5x {
+@property --kds-core-font-size-2-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 40px;
 }
 
-@property --kds-core-font-size-scaled-2-75x {
+@property --kds-core-font-size-2-75x {
 syntax: "<length>";
   inherits: true;
   initial-value: 44px;
 }
 
-@property --kds-core-font-size-scaled-3x {
+@property --kds-core-font-size-3x {
 syntax: "<length>";
   inherits: true;
   initial-value: 48px;
 }
 
-@property --kds-core-font-size-scaled-3-25x {
+@property --kds-core-font-size-3-25x {
 syntax: "<length>";
   inherits: true;
   initial-value: 52px;
 }
 
-@property --kds-core-font-size-scaled-3-5x {
+@property --kds-core-font-size-3-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 56px;
 }
 
-@property --kds-core-font-size-scaled-3-75x {
+@property --kds-core-font-size-3-75x {
 syntax: "<length>";
   inherits: true;
   initial-value: 60px;
 }
 
-@property --kds-core-font-size-scaled-4x {
+@property --kds-core-font-size-4x {
 syntax: "<length>";
   inherits: true;
   initial-value: 64px;
 }
 
-@property --kds-core-font-size-scaled-4-5x {
+@property --kds-core-font-size-4-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 72px;
 }
 
-@property --kds-core-font-size-scaled-5x {
+@property --kds-core-font-size-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 80px;
 }
 
-@property --kds-core-font-size-scaled-5-5x {
+@property --kds-core-font-size-5-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 88px;
 }
 
-@property --kds-core-font-size-scaled-6x {
+@property --kds-core-font-size-6x {
 syntax: "<length>";
   inherits: true;
   initial-value: 96px;
 }
 
-@property --kds-core-font-size-scaled-base {
-syntax: "<length>";
-  inherits: true;
-  initial-value: 0.16px;
-}
-
 @property --kds-core-paragraph-spacing-none {
 syntax: "<length>";
   inherits: false;
@@ -1322,6 +1094,12 @@ syntax: "<string>#";
   initial-value: 'Roboto Condensed';
 }
 
+@property --kds-core-font-family-roboto-mono {
+syntax: "<string>#";
+  inherits: true;
+  initial-value: 'Roboto Mono';
+}
+
 @property --kds-core-font-weight-regular {
 syntax: "<number>";
   inherits: true;
@@ -1370,6 +1148,42 @@ syntax: "<number> | <percentage>";
   initial-value: 1.5;
 }
 
+@property --kds-core-size-scale {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 16px;
+}
+
+@property --kds-core-border-width-none {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --kds-core-border-width-xs {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
+@property --kds-core-border-width-s {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1.2496px;
+}
+
+@property --kds-core-border-width-m {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1.5px;
+}
+
+@property --kds-core-border-width-l {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 2px;
+}
+
 @property --kds-color-surface-default {
 syntax: "<color>";
   inherits: true;
@@ -2432,24 +2246,6 @@ syntax: "<length>";
   initial-value: 1000px;
 }
 
-@property --kds-border-width-base-none {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --kds-border-width-base-s {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 1px;
-}
-
-@property --kds-border-width-base-m {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 2px;
-}
-
 @property --kds-border-width-icon-stroke-s {
 syntax: "<length>";
   inherits: false;
@@ -2459,7 +2255,7 @@ syntax: "<length>";
 @property --kds-border-width-icon-stroke-m {
 syntax: "<length>";
   inherits: false;
-  initial-value: 1.25px;
+  initial-value: 1.2496px;
 }
 
 @property --kds-border-width-icon-stroke-l {
@@ -2471,7 +2267,7 @@ syntax: "<length>";
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(330 0% 11% / 0);
+  initial-value: 0 solid hsl(330 0% 11% / 0);
 }
 
 @property --kds-border-action-default {
@@ -2543,31 +2339,31 @@ syntax: "<string>";
 @property --kds-border-base-brand {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild hsl(51 100% 50%);
+  initial-value: 1px solid hsl(51 100% 50%);
 }
 
 @property --kds-border-base-danger {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
+  initial-value: 1px solid light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
 }
 
 @property --kds-border-base-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
+  initial-value: 1px solid light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
 }
 
 @property --kds-border-base-success {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
+  initial-value: 1px solid light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
 }
 
 @property --kds-border-base-info {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
+  initial-value: 1px solid light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
 }
 
 @property --kds-border-node-status-empty {
@@ -2595,21 +2391,21 @@ syntax: "<string>";
 }
 
 @property --kds-border-resize-handle-initial {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
 }
 
 @property --kds-border-resize-handle-hover {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
 }
 
 @property --kds-border-resize-handle-active {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
 }
 
 @property --kds-sizing-viewport-breakpoints-576 {
@@ -2960,6 +2756,18 @@ syntax: "<string>";
   initial-value: 400 12px/1.5 Roboto;
 }
 
+@property --kds-font-base-body-small-italic {
+syntax: "<string>";
+  inherits: true;
+  initial-value: italic 400 12px/1.5 Roboto;
+}
+
+@property --kds-font-base-body-small-strong {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 12px/1.5 Roboto;
+}
+
 @property --kds-font-base-body-medium {
 syntax: "<string>";
   inherits: true;
@@ -3044,6 +2852,18 @@ syntax: "<string>";
   initial-value: 500 16px/1 Roboto;
 }
 
+@property --kds-font-base-code-xsmall {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 10px/1 'Roboto Mono';
+}
+
+@property --kds-font-base-code-small {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 11px/1.3 'Roboto Mono';
+}
+
 @property --kds-font-workflows-annotations-h1 {
 syntax: "<string>";
   inherits: true;

package/dist/tokens/css/_variables.css

@@ -151,71 +151,33 @@
   --kds-core-color-brown-800: hsl(23 27% 24%);
   --kds-core-color-brown-875: hsl(22 25% 18%);
   --kds-core-color-transparent: hsl(330 0% 11% / 0);
-  --kds-core-dimension-0: 0;
-  --kds-core-dimension-6: 1px;
-  --kds-core-dimension-12: 2px;
-  --kds-core-dimension-25: 4px;
-  --kds-core-dimension-31: 5px;
-  --kds-core-dimension-37: 6px;
-  --kds-core-dimension-44: 7px;
-  --kds-core-dimension-50: 8px;
-  --kds-core-dimension-56: 9px;
-  --kds-core-dimension-75: 12px;
-  --kds-core-dimension-88: 14px;
-  --kds-core-dimension-100: 16px;
-  --kds-core-dimension-125: 20px;
-  --kds-core-dimension-150: 24px;
-  --kds-core-dimension-175: 28px;
-  --kds-core-dimension-200: 32px;
-  --kds-core-dimension-225: 36px;
-  --kds-core-dimension-250: 40px;
-  --kds-core-dimension-275: 44px;
-  --kds-core-dimension-300: 48px;
-  --kds-core-dimension-350: 56px;
-  --kds-core-dimension-400: 64px;
-  --kds-core-dimension-450: 72px;
-  --kds-core-dimension-500: 80px;
-  --kds-core-dimension-600: 96px;
-  --kds-core-dimension-700: 112px;
-  --kds-core-dimension-800: 128px;
-  --kds-core-dimension-900: 144px;
-  --kds-core-dimension-1000: 160px;
-  --kds-core-dimension-1100: 176px;
-  --kds-core-dimension-1200: 192px;
-  --kds-core-dimension-1300: 208px;
-  --kds-core-dimension-1400: 224px;
-  --kds-core-dimension-1500: 240px;
-  --kds-core-dimension-1600: 256px;
-  --kds-core-dimension-2000: 320px;
-  --kds-core-dimension-2400: 384px;
-  --kds-core-dimension-base: 0.16px;
-  --kds-core-size-scale: 16px;
-  --kds-core-font-size-rem: 16px;
-  --kds-core-font-size-scaled-0-5x: 8px;
-  --kds-core-font-size-scaled-0-56x: 9px;
-  --kds-core-font-size-scaled-0-62x: 10px;
-  --kds-core-font-size-scaled-0-68x: 11px;
-  --kds-core-font-size-scaled-0-75x: 12px;
-  --kds-core-font-size-scaled-0-81x: 13px;
-  --kds-core-font-size-scaled-0-87x: 14px;
-  --kds-core-font-size-scaled-1x: 16px;
-  --kds-core-font-size-scaled-1-25x: 20px;
-  --kds-core-font-size-scaled-1-5x: 24px;
-  --kds-core-font-size-scaled-1-75x: 28px;
-  --kds-core-font-size-scaled-2x: 32px;
-  --kds-core-font-size-scaled-2-25x: 36px;
-  --kds-core-font-size-scaled-2-5x: 40px;
-  --kds-core-font-size-scaled-2-75x: 44px;
-  --kds-core-font-size-scaled-3x: 48px;
-  --kds-core-font-size-scaled-3-25x: 52px;
-  --kds-core-font-size-scaled-3-5x: 56px;
-  --kds-core-font-size-scaled-3-75x: 60px;
-  --kds-core-font-size-scaled-4x: 64px;
-  --kds-core-font-size-scaled-4-5x: 72px;
-  --kds-core-font-size-scaled-5x: 80px;
-  --kds-core-font-size-scaled-5-5x: 88px;
-  --kds-core-font-size-scaled-6x: 96px;
-  --kds-core-font-size-scaled-base: 0.16px;
+  --kds-core-font-size-0-5x: 8px;
+  --kds-core-font-size-0-56x: 9px;
+  --kds-core-font-size-0-62x: 10px;
+  --kds-core-font-size-0-68x: 11px;
+  --kds-core-font-size-0-75x: 12px;
+  --kds-core-font-size-0-81x: 13px;
+  --kds-core-font-size-0-87x: 14px;
+  --kds-core-font-size-1x: 16px;
+  --kds-core-font-size-1-25x: 20px;
+  --kds-core-font-size-1-375x: 22px;
+  --kds-core-font-size-1-625x: 26px;
+  --kds-core-font-size-1-5x: 24px;
+  --kds-core-font-size-1-75x: 28px;
+  --kds-core-font-size-1-875x: 30px;
+  --kds-core-font-size-2x: 32px;
+  --kds-core-font-size-2-25x: 36px;
+  --kds-core-font-size-2-5x: 40px;
+  --kds-core-font-size-2-75x: 44px;
+  --kds-core-font-size-3x: 48px;
+  --kds-core-font-size-3-25x: 52px;
+  --kds-core-font-size-3-5x: 56px;
+  --kds-core-font-size-3-75x: 60px;
+  --kds-core-font-size-4x: 64px;
+  --kds-core-font-size-4-5x: 72px;
+  --kds-core-font-size-5x: 80px;
+  --kds-core-font-size-5-5x: 88px;
+  --kds-core-font-size-6x: 96px;
   --kds-core-paragraph-spacing-none: 0;
   --kds-core-paragraph-spacing-small: 0.25px;
   --kds-core-paragraph-spacing-medium: 0.5px;
@@ -223,6 +185,7 @@
   --kds-core-paragraph-spacing-extra-large: 1px;
   --kds-core-font-family-roboto: Roboto;
   --kds-core-font-family-roboto-condensed: 'Roboto Condensed';
+  --kds-core-font-family-roboto-mono: 'Roboto Mono';
   --kds-core-font-weight-regular: 400;
   --kds-core-font-weight-regular-italic-weight: 400;
   --kds-core-font-weight-regular-italic-style: italic;
@@ -231,6 +194,12 @@
   --kds-core-line-height-singleline: 1;
   --kds-core-line-height-multiline-narrow: 1.3;
   --kds-core-line-height-multiline-wide: 1.5;
+  --kds-core-size-scale: 16px;
+  --kds-core-border-width-none: 0;
+  --kds-core-border-width-xs: 1px;
+  --kds-core-border-width-s: 1.2496px;
+  --kds-core-border-width-m: 1.5px;
+  --kds-core-border-width-l: 2px;
   --kds-color-surface-default: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
   --kds-color-surface-muted: light-dark(hsl(0 0% 94%), hsl(0 0% 19%));
   --kds-color-surface-subtle: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
@@ -408,13 +377,10 @@
   --kds-border-radius-container-0-56x: 9px;
   --kds-border-radius-container-1x: 16px;
   --kds-border-radius-container-pill: 1000px;
-  --kds-border-width-base-none: 0;
-  --kds-border-width-base-s: 1px;
-  --kds-border-width-base-m: 2px;
   --kds-border-width-icon-stroke-s: 1px;
-  --kds-border-width-icon-stroke-m: 1.25px;
+  --kds-border-width-icon-stroke-m: 1.2496px;
   --kds-border-width-icon-stroke-l: 1.5px;
-  --kds-border-action-transparent: 1px solid hsl(330 0% 11% / 0);
+  --kds-border-action-transparent: 0 solid hsl(330 0% 11% / 0);
   --kds-border-action-default: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
   --kds-border-action-disabled: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 48%));
   --kds-border-action-focused: 2px solid light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
@@ -426,18 +392,18 @@
   --kds-border-base-default: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
   --kds-border-base-muted: 1px solid light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
   --kds-border-base-subtle: 1px solid light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
-  --kds-border-base-brand: 1px soild hsl(51 100% 50%);
-  --kds-border-base-danger: 1px soild light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
-  --kds-border-base-warning: 1px soild light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
-  --kds-border-base-success: 1px soild light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
-  --kds-border-base-info: 1px soild light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
+  --kds-border-base-brand: 1px solid hsl(51 100% 50%);
+  --kds-border-base-danger: 1px solid light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
+  --kds-border-base-warning: 1px solid light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
+  --kds-border-base-success: 1px solid light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
+  --kds-border-base-info: 1px solid light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
   --kds-border-node-status-empty: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
   --kds-border-node-status-idle: 1px solid light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
   --kds-border-node-status-warning: 1px solid light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
   --kds-border-node-status-executed: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
-  --kds-border-resize-handle-initial: [object Object];
-  --kds-border-resize-handle-hover: [object Object];
-  --kds-border-resize-handle-active: [object Object];
+  --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-sizing-viewport-breakpoints-576: 576px;
   --kds-sizing-viewport-breakpoints-768: 768px;
   --kds-sizing-viewport-breakpoints-1024: 1024px;
@@ -496,6 +462,8 @@
   --kds-font-base-title-large: 500 16px/1 Roboto;
   --kds-font-base-title-large-strong: 700 16px/1 Roboto;
   --kds-font-base-body-small: 400 12px/1.5 Roboto;
+  --kds-font-base-body-small-italic: italic 400 12px/1.5 Roboto;
+  --kds-font-base-body-small-strong: 700 12px/1.5 Roboto;
   --kds-font-base-body-medium: 400 14px/1.5 Roboto;
   --kds-font-base-body-large: 400 16px/1.3 Roboto;
   --kds-font-base-body-xlarge: 400 20px/1.5 Roboto;
@@ -510,6 +478,8 @@
   --kds-font-base-interactive-medium-strong: 500 14px/1 Roboto;
   --kds-font-base-interactive-large: 400 16px/1 Roboto;
   --kds-font-base-interactive-large-strong: 500 16px/1 Roboto;
+  --kds-font-base-code-xsmall: 400 10px/1 'Roboto Mono';
+  --kds-font-base-code-small: 400 11px/1.3 'Roboto Mono';
   --kds-font-workflows-annotations-h1: 700 36px/1.5 'Roboto Condensed';
   --kds-font-workflows-annotations-h2: 700 30px/1.5 'Roboto Condensed';
   --kds-font-workflows-annotations-h3: 700 26px/1.5 'Roboto Condensed';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
   "author": "KNIME AG, Zurich, Switzerland",
@@ -13,10 +13,8 @@
     "@tokens-studio/sd-transforms": "^2.0.1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.2.0",
-    "chalk": "^5.5.0",
     "consola": "^3.4.2",
     "jsdom": "^27.0.0",
-    "rimraf": "^6.0.1",
     "style-dictionary": "^5.0.4",
     "svgo": "^4.0.0",
     "typescript": "^5.9.2"
@@ -28,11 +26,12 @@
     "./index.css": "./dist/css/index.css",
     "./kds-variables.css": "./dist/tokens/css/_variables.css",
     "./kds-properties.css": "./dist/tokens/css/_properties.css",
+    "./kds-legacy-theme.css": "./dist/css/legacy/legacy-theme.css",
     "./img/*": "./dist/img/*.svg",
     "./img/*/def": "./dist/img/*/def.ts"
   },
   "engines": {
-    "node": "24.5.0",
+    "node": "24.10.0",
     "npm": "please-use-pnpm"
   },
   "scripts": {