@knime/kds-styles 0.0.5 → 0.0.6

package/dist/tokens/css/_variables.css

@@ -25,6 +25,7 @@
   --kds-core-color-red-250: hsl(4 100% 80%);
   --kds-core-color-red-325: hsl(3 100% 72%);
   --kds-core-color-red-400: hsl(0 100% 66%);
+  --kds-core-color-red-435: hsl(360 84% 63%);
   --kds-core-color-red-475: hsl(356 77% 54%);
   --kds-core-color-red-550: hsl(353 75% 45%);
   --kds-core-color-red-650: hsl(349 91% 35%);
@@ -37,6 +38,7 @@
   --kds-core-color-orange-175: hsl(31 79% 74%);
   --kds-core-color-orange-250: hsl(31 83% 66%);
   --kds-core-color-orange-325: hsl(30 80% 60%);
+  --kds-core-color-orange-375: hsl(29 88% 60%);
   --kds-core-color-orange-400: hsl(27 68% 55%);
   --kds-core-color-orange-475: hsl(25 59% 51%);
   --kds-core-color-orange-550: hsl(22 60% 45%);
@@ -96,6 +98,58 @@
   --kds-core-color-blue-725: hsl(210 50% 28%);
   --kds-core-color-blue-800: hsl(209 50% 20%);
   --kds-core-color-blue-875: hsl(209 59% 14%);
+  --kds-core-color-purple-25: hsl(314 39% 94%);
+  --kds-core-color-purple-50: hsl(315 42% 91%);
+  --kds-core-color-purple-100: hsl(318 43% 88%);
+  --kds-core-color-purple-175: hsl(319 44% 85%);
+  --kds-core-color-purple-250: hsl(320 45% 82%);
+  --kds-core-color-purple-325: hsl(316 41% 73%);
+  --kds-core-color-purple-400: hsl(312 36% 64%);
+  --kds-core-color-purple-475: hsl(308 32% 55%);
+  --kds-core-color-purple-550: hsl(305 27% 47%);
+  --kds-core-color-purple-650: hsl(302 29% 39%);
+  --kds-core-color-purple-725: hsl(299 32% 31%);
+  --kds-core-color-purple-800: hsl(296 34% 23%);
+  --kds-core-color-purple-875: hsl(294 36% 15%);
+  --kds-core-color-aquamarine-25: hsl(186 44% 95%);
+  --kds-core-color-aquamarine-50: hsl(188 47% 93%);
+  --kds-core-color-aquamarine-100: hsl(186 46% 91%);
+  --kds-core-color-aquamarine-175: hsl(185 48% 89%);
+  --kds-core-color-aquamarine-250: hsl(186 49% 88%);
+  --kds-core-color-aquamarine-325: hsl(188 52% 77%);
+  --kds-core-color-aquamarine-400: hsl(189 55% 66%);
+  --kds-core-color-aquamarine-475: hsl(191 57% 54%);
+  --kds-core-color-aquamarine-550: hsl(193 60% 43%);
+  --kds-core-color-aquamarine-650: hsl(196 62% 38%);
+  --kds-core-color-aquamarine-725: hsl(198 62% 32%);
+  --kds-core-color-aquamarine-800: hsl(201 63% 27%);
+  --kds-core-color-aquamarine-875: hsl(204 65% 21%);
+  --kds-core-color-grassgreen-25: hsl(76 52% 96%);
+  --kds-core-color-grassgreen-50: hsl(73 57% 91%);
+  --kds-core-color-grassgreen-100: hsl(70 60% 86%);
+  --kds-core-color-grassgreen-175: hsl(67 64% 80%);
+  --kds-core-color-grassgreen-250: hsl(63 69% 75%);
+  --kds-core-color-grassgreen-325: hsl(65 69% 70%);
+  --kds-core-color-grassgreen-400: hsl(65 69% 65%);
+  --kds-core-color-grassgreen-475: hsl(66 68% 60%);
+  --kds-core-color-grassgreen-550: hsl(67 68% 55%);
+  --kds-core-color-grassgreen-650: hsl(69 61% 47%);
+  --kds-core-color-grassgreen-725: hsl(69 54% 40%);
+  --kds-core-color-grassgreen-800: hsl(71 46% 32%);
+  --kds-core-color-grassgreen-875: hsl(72 39% 25%);
+  --kds-core-color-brown-25: hsl(35 60% 95%);
+  --kds-core-color-brown-50: hsl(33 55% 89%);
+  --kds-core-color-brown-100: hsl(32 50% 82%);
+  --kds-core-color-brown-175: hsl(31 48% 74%);
+  --kds-core-color-brown-250: hsl(30 47% 68%);
+  --kds-core-color-brown-325: hsl(29 43% 58%);
+  --kds-core-color-brown-400: hsl(28 39% 50%);
+  --kds-core-color-brown-475: hsl(27 35% 44%);
+  --kds-core-color-brown-550: hsl(26 32% 39%);
+  --kds-core-color-brown-650: hsl(25 30% 35%);
+  --kds-core-color-brown-725: hsl(24 28% 30%);
+  --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;
@@ -230,6 +284,8 @@
   --kds-color-background-input-hover: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
   --kds-color-background-input-active: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
   --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
+  --kds-color-background-disabled-primary: hsl(173.77 18.031% 40.307%);
+  --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
   --kds-color-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
   --kds-color-text-and-icon-subtle: light-dark(hsl(0 0% 43%), hsl(0 0% 73%));
@@ -245,7 +301,9 @@
   --kds-color-text-and-icon-success: light-dark(hsl(116 47% 26%), hsl(109 47% 61%));
   --kds-color-text-and-icon-success-inverted: hsl(120 95% 92%);
   --kds-color-text-and-icon-disabled: light-dark(hsl(0 0% 64%), hsl(0 0% 48%));
+  --kds-color-text-and-icon-disabled-inverted: hsl(0 0% 73%);
   --kds-color-text-and-icon-info: light-dark(hsl(208 61% 34%), hsl(214 92% 77%));
+  --kds-color-text-and-icon-editor: light-dark(hsl(0 0% 11%), hsl(0 0% 94%));
   --kds-color-border-neutral: light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
   --kds-color-border-muted: light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
   --kds-color-border-subtle: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
@@ -271,11 +329,68 @@
   --kds-color-focus-outline: light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
   --kds-color-focus-background: light-dark(hsl(217 100% 97%), hsl(211.86 41.035% 17.864%));
   --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
-  --kds-color-nodes-and-variables-flow-variable: hsl(0 100% 65%);
+  --kds-color-nodes-and-variables-flow-variable: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
+  --kds-color-nodes-and-variables-loop: hsl(188 52% 77%);
+  --kds-color-nodes-and-variables-manipulator: hsl(51 100% 50%);
+  --kds-color-nodes-and-variables-predictor: light-dark(hsl(107 43% 55%), hsl(109 47% 61%));
+  --kds-color-nodes-and-variables-source: hsl(30 80% 60%);
+  --kds-color-nodes-and-variables-visualizer: light-dark(hsl(193 60% 43%), hsl(191 57% 54%));
+  --kds-color-nodes-and-variables-scope: light-dark(hsl(305 27% 47%), hsl(308 32% 55%));
+  --kds-color-nodes-and-variables-learner: light-dark(hsl(67 68% 55%), hsl(65 69% 65%));
+  --kds-color-nodes-and-variables-sink: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
+  --kds-color-nodes-and-variables-container: hsl(69 54% 40%);
+  --kds-color-nodes-and-variables-unknown: light-dark(hsl(353 75% 45%), hsl(356 77% 54%));
+  --kds-color-nodes-and-variables-other: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
+  --kds-color-nodes-and-variables-special-nodes-bold: light-dark(hsl(0 0% 32%), hsl(0 0% 94%));
+  --kds-color-nodes-and-variables-special-nodes: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  --kds-color-nodes-and-variables-special-nodes-muted: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
+  --kds-color-nodes-and-variables-special-nodes-border: light-dark(hsl(0 0% 19%), hsl(0 0% 90%));
+  --kds-color-nodes-and-variables-special-nodes-background: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-nodes-and-variables-warning-bold: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
+  --kds-color-nodes-and-variables-warning: light-dark(hsl(31 100% 83%), hsl(0 0% 22%));
+  --kds-color-nodes-and-variables-error-bold: light-dark(hsl(349 91% 35%), hsl(0 100% 66%));
+  --kds-color-nodes-and-variables-error: light-dark(hsl(2 100% 92%), hsl(0 0% 22%));
+  --kds-color-nodes-and-variables-loading-bold: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+  --kds-color-nodes-and-variables-loading: light-dark(hsl(216 100% 92%), hsl(209 50% 20%));
+  --kds-color-nodes-and-variables-configuration: light-dark(hsl(65 69% 70%), hsl(70 60% 86%));
+  --kds-color-port-data: light-dark(hsl(0 0% 11%), hsl(0 0% 94%));
+  --kds-color-port-flow-variable: hsl(360 84% 63%);
+  --kds-color-port-neutral-inverted: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-annotations-special-nodes: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  --kds-color-annotations-special-nodes-bold: light-dark(hsl(0 0% 32%), hsl(0 0% 90%));
+  --kds-color-annotations-visualizer: light-dark(hsl(193 60% 43%), hsl(191 57% 54%));
+  --kds-color-annotations-loading-bold: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+  --kds-color-annotations-manipulator: hsl(51 100% 50%);
+  --kds-color-annotations-source: hsl(30 80% 60%);
+  --kds-color-annotations-sink: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
+  --kds-color-annotations-learner: light-dark(hsl(67 68% 55%), hsl(65 69% 65%));
+  --kds-color-annotations-predictor: light-dark(hsl(107 43% 55%), hsl(109 47% 61%));
+  --kds-color-annotations-container: light-dark(hsl(67 64% 80%), hsl(70 60% 86%));
+  --kds-color-annotations-flow-variable: light-dark(hsl(173 37% 39%), hsl(172 27% 48%));
+  --kds-color-annotations-teal-dark: light-dark(hsl(177 82% 18%), hsl(176 67% 22%));
+  --kds-color-annotations-other: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
+  --kds-color-annotations-loop: light-dark(hsl(25 30% 35%), hsl(27 35% 44%));
+  --kds-color-node-state-error: light-dark(hsl(353 75% 45%), hsl(348 94% 21%));
+  --kds-color-node-state-error-border: light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
+  --kds-color-node-state-warning: light-dark(hsl(51 100% 50%), hsl(43 100% 19%));
+  --kds-color-node-state-warning-border: light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
+  --kds-color-node-state-executed: light-dark(hsl(107 43% 55%), hsl(116 47% 26%));
+  --kds-color-node-state-executed-border: light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
+  --kds-color-node-state-executing: light-dark(hsl(208 63% 41%), hsl(211 67% 59%));
+  --kds-color-node-state-inactive: light-dark(hsl(0 0% 99%), hsl(0 0% 11%));
+  --kds-color-node-state-inactive-border: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  --kds-color-connector-data: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+  --kds-color-connector-flow-variable: hsl(360 84% 63%);
   --kds-color-skeleton-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
   --kds-color-elevation-top: light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
   --kds-color-elevation-middle: light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94));
   --kds-color-elevation-bottom: light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+  --kds-color-elevation-knob: light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+  --kds-color-loading-spinner-progress-on-filled: hsl(166 68% 93%);
+  --kds-color-loading-spinner-progress-on-transparent: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+  --kds-color-loading-spinner-track-on-filled: hsl(166 68% 93% / 0.24);
+  --kds-color-loading-spinner-track-on-transparent: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
+  --kds-color-skeleton-bar-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
   --kds-color-desktop-header-background-default: hsl(0 0% 10%);
   --kds-color-desktop-header-background-muted: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
   --kds-color-desktop-header-background-accent: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
@@ -283,11 +398,6 @@
   --kds-color-desktop-header-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
   --kds-color-desktop-header-border-default: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
   --kds-color-table-header-background-default: hsl(0 0% 99%);
-  --kds-color-loading-spinner-progress-on-filled: hsl(166 68% 93%);
-  --kds-color-loading-spinner-progress-on-transparent: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
-  --kds-color-loading-spinner-track-on-filled: hsl(166 68% 93% / 0.24);
-  --kds-color-loading-spinner-track-on-transparent: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
-  --kds-color-skeleton-bar-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
   --kds-border-radius-container-none: 0;
   --kds-border-radius-container-0-12x: 2px;
   --kds-border-radius-container-0-25x: 4px;
@@ -321,6 +431,13 @@
   --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-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-sizing-viewport-breakpoints-576: 576px;
   --kds-sizing-viewport-breakpoints-768: 768px;
   --kds-sizing-viewport-breakpoints-1024: 1024px;
@@ -344,6 +461,7 @@
   --kds-spacing-container-auto: AUTO;
   --kds-spacing-input-label-spacing-bottom: 6px;
   --kds-spacing-input-sub-text-spacing-top: 4px;
+  --kds-dimension-component-height-0-25x: 4px;
   --kds-dimension-component-height-0-75x: 12px;
   --kds-dimension-component-height-0-88x: 14px;
   --kds-dimension-component-height-1x: 16px;
@@ -352,6 +470,8 @@
   --kds-dimension-component-height-1-75x: 28px;
   --kds-dimension-component-height-2-25x: 36px;
   --kds-dimension-component-height-2-5x: 40px;
+  --kds-dimension-component-height-4x: 64px;
+  --kds-dimension-component-width-0-25x: 4px;
   --kds-dimension-component-width-0-75x: 12px;
   --kds-dimension-component-width-0-88x: 14px;
   --kds-dimension-component-width-1x: 16px;
@@ -359,6 +479,7 @@
   --kds-dimension-component-width-1-5x: 24px;
   --kds-dimension-component-width-1-75x: 28px;
   --kds-dimension-component-width-2-25x: 36px;
+  --kds-dimension-component-width-4x: 64px;
   --kds-dimension-icon-0-56x: 9px;
   --kds-dimension-icon-0-75x: 12px;
   --kds-dimension-icon-1x: 16px;
@@ -389,13 +510,16 @@
   --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-annotations-h1: 700 36px/1.5 'Roboto Condensed';
-  --kds-font-annotations-h2: 700 30px/1.5 'Roboto Condensed';
-  --kds-font-annotations-h3: 700 26px/1.5 'Roboto Condensed';
-  --kds-font-annotations-h4: 700 22px/1.5 'Roboto Condensed';
-  --kds-font-annotations-h5: 700 16px/1.5 'Roboto Condensed';
-  --kds-font-annotations-h6: 700 13px/1.5 'Roboto Condensed';
-  --kds-font-annotations-body: 700 13px/1.5 'Roboto Condensed';
+  --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';
+  --kds-font-workflows-annotations-h4: 700 22px/1.5 'Roboto Condensed';
+  --kds-font-workflows-annotations-h5: 700 16px/1.5 'Roboto Condensed';
+  --kds-font-workflows-annotations-h6: 700 13px/1.5 'Roboto Condensed';
+  --kds-font-workflows-annotations-body: 700 13px/1.5 'Roboto Condensed';
+  --kds-font-workflows-node-name: 700 13px 'Roboto Condensed';
+  --kds-font-workflows-node-label: 400 12px 'Roboto Condensed';
+  --kds-font-workflows-node-status: 400 8px 'Roboto Condensed';
   --kds-font-dataapps-h1: 700 36px/1.5 Roboto;
   --kds-font-dataapps-h2: 700 30px/1.5 Roboto;
   --kds-font-dataapps-h3: 700 26px/1.5 Roboto;
@@ -407,4 +531,10 @@
   --elevation-level-0: 0 0 0 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
   --elevation-level-1: 0 1px 1px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 0 1px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 8px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
   --elevation-level-3: 0 2px 4px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 4px 8px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 20px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+  --knob-initial: hsl(0 0% 99%);
+  --knob-disabled: hsl(0 0% 90%);
+  --knob: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+  --icon-on: hsl(176 67% 22%);
+  --icon-off: hsl(0 0% 43%);
+  --icon-disabled: hsl(0 0% 64%);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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",
@@ -12,9 +12,9 @@
     "@types/node": "^24.2.0",
     "chalk": "^5.5.0",
     "consola": "^3.4.2",
-    "jsdom": "^26.0.0",
+    "jsdom": "^27.0.0",
     "rimraf": "^6.0.1",
-    "style-dictionary": "^5.0.1",
+    "style-dictionary": "^5.0.4",
     "svgo": "^4.0.0",
     "typescript": "^5.9.2"
   },