@knime/kds-styles 0.0.16 → 0.1.1

package/README.md

@@ -24,9 +24,20 @@ All token values are fully calculated, ensuring that no variable references rema
 
 Two sets of files are generated for light and dark mode. Subsequently, the CSS files are merged to contain all variables only once. For variables that use different color values in light and dark mode, the `light-dark()` function is employed.
 
+## Fonts
+
+The design system uses the Roboto, Roboto Condensed and Roboto Mono fonts for typography. When using `@knime/kds-styles` as a dependency the fonts will automatically be installed, no separate dependency is needed.
+
 ## Usage
 
-_This section will be filled in later once the output and possible changes are clear._
+To use the design tokens and basic CSS you can simply import the following into a central CSS of your project:
+
+- `@import "@knime/kds-styles/kds-variables.css";`: Imports all built design tokens as CSS variables, including the colors in light and dark mode
+- `@import "@knime/kds-styles/kds-legacy-theme.css";`: Imports a legacy theme, which should be used to roll out design system components and tokens into an existing project, styles are adopted so old webapps-common components and new components can be used side by side
+- `@import "@knime/kds-styles/fonts.css"`: Import CSS font definitions for Roboto and Roboto Mono
+- `@import "@knime/kds-styles/fonts-workflows.css"`: Import CSS font definitions for Roboto Condensed which is only used in the context of workflow editing
+
+- `@import "@knime/kds-styles/index.css"`: Bundles all previous imports and adds basic core style rules, e.g. uses modern-normalize for browser reset. **Important:** Use only for new projects, or if conversion is already at a point where core styles can be replaced.
 
 ## Important Scripts
 

package/dist/css/basics.css

@@ -1,3 +1,7 @@
+:root {
+  font-family: var(--kds-core-font-family-roboto), sans-serif;
+}
+
 body {
   font: var(--kds-font-base-body-medium);
   color: var(--kds-color-text-and-icon-neutral);
@@ -7,6 +11,13 @@ a {
   color: inherit;
 }
 
+pre,
+code,
+tt,
+samp {
+  font-family: var(--kds-core-font-family-roboto-mono), monospace;
+}
+
 svg {
   shape-rendering: geometricPrecision;
 }

package/dist/css/fonts-workflows.css

@@ -0,0 +1,10 @@
+/**
+* Fonts for workflows.
+*
+* Import only the weights and styles that are required:
+* Sync with dist/tokens/css/_variables.css
+* Search for --kds-font- to find all font related CSS variables.
+*/
+@import "./fonts.css";
+@import "@fontsource/roboto-condensed/400";
+@import "@fontsource/roboto-condensed/700";

package/dist/css/fonts.css

@@ -0,0 +1,13 @@
+/**
+* Import only the weights and styles that are required:
+* Sync with dist/tokens/css/_variables.css
+* Search for --kds-font- to find all font related CSS variables.
+*
+* Roboto Condensed is not imported here as it's only rarely used,
+* it's imported in fonts-workflows.css instead.
+*/
+@import "@fontsource/roboto";
+@import "@fontsource/roboto/400-italic";
+@import "@fontsource/roboto/500";
+@import "@fontsource/roboto/700";
+@import "@fontsource/roboto-mono/300";

package/dist/css/index.css

@@ -1,3 +1,4 @@
+@import "./fonts";
 @import "modern-normalize/modern-normalize.css";
 @import "@knime/kds-styles/kds-variables.css";
 @import "./basics";

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

@@ -20,7 +20,7 @@ syntax: "<color>";
   initial-value: hsl(0 0% 90%);
 }
 
-@property --kds-color-background-page-default {
+@property --kds-color-page-default {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 99%);
@@ -137,7 +137,7 @@ syntax: "<color>";
 @property --kds-color-background-danger-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(2.4731 100% 96.876%);
+  initial-value: hsl(0 100% 97%);
 }
 
 @property --kds-color-background-danger-hover {
@@ -170,58 +170,40 @@ syntax: "<color>";
   initial-value: hsl(348 94% 21%);
 }
 
-@property --kds-color-background-warning-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.514 98.554% 96.838%);
-}
-
-@property --kds-color-background-warning-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.512 39.352% 92.463%);
-}
-
-@property --kds-color-background-warning-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.51 23.726% 88.128%);
-}
-
-@property --kds-color-background-warning-bold-initial {
+@property --kds-color-background-input-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(22 60% 45%);
+  initial-value: hsl(0 0% 99%);
 }
 
-@property --kds-color-background-warning-bold-hover {
+@property --kds-color-background-input-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(21.929 58.367% 37.68%);
+  initial-value: hsl(330 0% 94.521%);
 }
 
-@property --kds-color-background-warning-bold-active {
+@property --kds-color-background-input-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(21.825 55.638% 28.836%);
+  initial-value: hsl(330 0% 85.683%);
 }
 
-@property --kds-color-background-success-initial {
+@property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.68 97.025% 96.828%);
+  initial-value: hsl(180 0% 48% / 0.48);
 }
 
-@property --kds-color-background-success-hover {
+@property --kds-color-background-disabled-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.68 38.813% 92.454%);
+  initial-value: hsl(0 0% 48%);
 }
 
-@property --kds-color-background-success-active {
+@property --kds-color-background-disabled-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.67 23.411% 88.119%);
+  initial-value: hsl(1.5788 43.542% 37.998%);
 }
 
 @property --kds-color-background-success-bold-initial {
@@ -230,108 +212,60 @@ syntax: "<color>";
   initial-value: hsl(111 48% 31%);
 }
 
-@property --kds-color-background-success-bold-hover {
+@property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(110.47 45.877% 26.246%);
+  initial-value: hsl(217 100% 97%);
 }
 
-@property --kds-color-background-success-bold-active {
+@property --kds-color-background-static-info-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(109.63 42.516% 20.454%);
+  initial-value: hsl(217.11 100.13% 97.725%);
 }
 
-@property --kds-color-background-info-initial {
+@property --kds-color-background-static-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.77 100% 96.851%);
+  initial-value: hsl(30 95% 92%);
 }
 
-@property --kds-color-background-info-hover {
+@property --kds-color-background-static-warning-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.77 39.826% 92.476%);
+  initial-value: hsl(29.611 97.821% 95.88%);
 }
 
-@property --kds-color-background-info-active {
+@property --kds-color-background-static-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.78 23.993% 88.14%);
+  initial-value: hsl(2 100% 92%);
 }
 
-@property --kds-color-background-info-bold-initial {
+@property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 63% 41%);
+  initial-value: hsl(0 100% 97%);
 }
 
-@property --kds-color-background-info-bold-hover {
+@property --kds-color-background-static-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208.92 58.259% 34.934%);
+  initial-value: hsl(119.44 95.797% 93.942%);
 }
 
-@property --kds-color-background-info-bold-active {
+@property --kds-color-background-static-success-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(210.19 52% 27.273%);
+  initial-value: hsl(124.89 65.088% 97.723%);
 }
 
-@property --kds-color-background-brand-initial {
+@property --kds-color-background-static-brand {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(51 100% 50%);
 }
 
-@property --kds-color-background-brand-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.165 84.159% 44.695%);
-}
-
-@property --kds-color-background-brand-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(49.385 73.102% 35.333%);
-}
-
-@property --kds-color-background-input-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0 0% 99%);
-}
-
-@property --kds-color-background-input-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 94.521%);
-}
-
-@property --kds-color-background-input-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 85.683%);
-}
-
-@property --kds-color-background-disabled-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(180 0% 48% / 0.48);
-}
-
-@property --kds-color-background-disabled-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0 0% 48%);
-}
-
-@property --kds-color-background-disabled-danger {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(1.5788 43.542% 37.998%);
-}
-
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_properties.css

@@ -1202,7 +1202,7 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
 }
 
-@property --kds-color-background-page-default {
+@property --kds-color-page-default {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
@@ -1319,7 +1319,7 @@ syntax: "<color>";
 @property --kds-color-background-danger-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(2.4731 100% 96.876%), hsl(356.66 65.093% 15.235%));
+  initial-value: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
 }
 
 @property --kds-color-background-danger-hover {
@@ -1352,168 +1352,102 @@ syntax: "<color>";
   initial-value: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
 }
 
-@property --kds-color-background-warning-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.514 98.554% 96.838%), hsl(14.626 60.206% 14.715%));
-}
-
-@property --kds-color-background-warning-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.512 39.352% 92.463%), hsl(14.171 48.783% 17.797%));
-}
-
-@property --kds-color-background-warning-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.51 23.726% 88.128%), hsl(14.532 35.821% 23.829%));
-}
-
-@property --kds-color-background-warning-bold-initial {
+@property --kds-color-background-input-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(22 60% 45%), hsl(19 63% 38%));
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
 }
 
-@property --kds-color-background-warning-bold-hover {
+@property --kds-color-background-input-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(21.929 58.367% 37.68%), hsl(19.04 44.421% 47.984%));
+  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
 }
 
-@property --kds-color-background-warning-bold-active {
+@property --kds-color-background-input-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(21.825 55.638% 28.836%), hsl(19.038 42.206% 52.935%));
+  initial-value: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
 }
 
-@property --kds-color-background-success-initial {
+@property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.68 97.025% 96.828%), hsl(128.09 38.652% 10.529%));
+  initial-value: hsl(180 0% 48% / 0.48);
 }
 
-@property --kds-color-background-success-hover {
+@property --kds-color-background-disabled-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.68 38.813% 92.454%), hsl(126.93 29.012% 13.533%));
+  initial-value: hsl(173.77 18.031% 40.307%);
 }
 
-@property --kds-color-background-success-active {
+@property --kds-color-background-disabled-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.67 23.411% 88.119%), hsl(125.21 18.669% 19.69%));
+  initial-value: hsl(1.5788 43.542% 37.998%);
 }
 
 @property --kds-color-background-success-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(111 48% 31%), hsl(116 47% 26%));
+  initial-value: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
 }
 
-@property --kds-color-background-success-bold-hover {
+@property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(110.47 45.877% 26.246%), hsl(112.26 28.404% 37.07%));
+  initial-value: light-dark(hsl(217 100% 97%), hsl(210 50% 28%));
 }
 
-@property --kds-color-background-success-bold-active {
+@property --kds-color-background-static-info-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(109.63 42.516% 20.454%), hsl(111.19 22.717% 42.67%));
+  initial-value: light-dark(hsl(217.11 100.13% 97.725%), hsl(211.86 41.035% 17.864%));
 }
 
-@property --kds-color-background-info-initial {
+@property --kds-color-background-static-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.77 100% 96.851%), hsl(211.86 41.035% 17.864%));
+  initial-value: light-dark(hsl(30 95% 92%), hsl(13 66% 23%));
 }
 
-@property --kds-color-background-info-hover {
+@property --kds-color-background-static-warning-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.77 39.826% 92.476%), hsl(212.68 33.733% 20.806%));
+  initial-value: light-dark(hsl(29.611 97.821% 95.88%), hsl(14.626 60.206% 14.715%));
 }
 
-@property --kds-color-background-info-active {
+@property --kds-color-background-static-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.78 23.993% 88.14%), hsl(213.81 24.237% 26.721%));
+  initial-value: light-dark(hsl(2 100% 92%), hsl(348 97% 27%));
 }
 
-@property --kds-color-background-info-bold-initial {
+@property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(208 63% 41%), hsl(208 61% 34%));
+  initial-value: hsl(0 100% 97%);
 }
 
-@property --kds-color-background-info-bold-hover {
+@property --kds-color-background-static-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(208.92 58.259% 34.934%), hsl(211.76 34.965% 45.77%));
+  initial-value: light-dark(hsl(119.44 95.797% 93.942%), hsl(124 47% 21%));
 }
 
-@property --kds-color-background-info-bold-active {
+@property --kds-color-background-static-success-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(210.19 52% 27.273%), hsl(212.8 29.174% 51.036%));
+  initial-value: light-dark(hsl(124.89 65.088% 97.723%), hsl(128.09 38.652% 10.529%));
 }
 
-@property --kds-color-background-brand-initial {
+@property --kds-color-background-static-brand {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(51 100% 50%);
 }
 
-@property --kds-color-background-brand-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(50.165 84.159% 44.695%), hsl(48.411 100% 65.242%));
-}
-
-@property --kds-color-background-brand-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(49.385 73.102% 35.333%), hsl(47.704 100% 69.488%));
-}
-
-@property --kds-color-background-input-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
-}
-
-@property --kds-color-background-input-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
-}
-
-@property --kds-color-background-input-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
-}
-
-@property --kds-color-background-disabled-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(180 0% 48% / 0.48);
-}
-
-@property --kds-color-background-disabled-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(173.77 18.031% 40.307%);
-}
-
-@property --kds-color-background-disabled-danger {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(1.5788 43.542% 37.998%);
-}
-
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -1769,7 +1703,7 @@ syntax: "<color>";
 @property --kds-color-blanket-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 11% / 0.8), hsl(240 0% 13% / 0.6));
+  initial-value: hsl(330 0% 11% / 0.8);
 }
 
 @property --kds-color-nodes-and-variables-flow-variable {
@@ -2714,6 +2648,12 @@ syntax: "<length>";
   initial-value: 720px;
 }
 
+@property --kds-dimension-component-width-61x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 976px;
+}
+
 @property --kds-dimension-icon-0-56x {
 syntax: "<length>";
   inherits: false;
@@ -3048,4 +2988,10 @@ syntax: "*";
 syntax: "*";
   inherits: false;
   initial-value: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+}
+
+@property --kds-color-background-static-danger-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(356.66 65.093% 15.235%);
 }

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

@@ -6,7 +6,7 @@
   --kds-color-surface-default: hsl(0 0% 98%);
   --kds-color-surface-muted: hsl(0 0% 94%);
   --kds-color-surface-subtle: hsl(0 0% 90%);
-  --kds-color-background-page-default: hsl(0 0% 99%);
+  --kds-color-page-default: hsl(0 0% 99%);
   --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
   --kds-color-background-neutral-hover: hsl(180 0% 48% / 0.16);
   --kds-color-background-neutral-active: hsl(180 0% 48% / 0.32);
@@ -25,39 +25,28 @@
   --kds-color-background-selected-bold-initial: hsl(0 0% 19%);
   --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(2.4731 100% 96.876%);
+  --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-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%);
-  --kds-color-background-warning-initial: hsl(29.514 98.554% 96.838%);
-  --kds-color-background-warning-hover: hsl(29.512 39.352% 92.463%);
-  --kds-color-background-warning-active: hsl(29.51 23.726% 88.128%);
-  --kds-color-background-warning-bold-initial: hsl(22 60% 45%);
-  --kds-color-background-warning-bold-hover: hsl(21.929 58.367% 37.68%);
-  --kds-color-background-warning-bold-active: hsl(21.825 55.638% 28.836%);
-  --kds-color-background-success-initial: hsl(118.68 97.025% 96.828%);
-  --kds-color-background-success-hover: hsl(118.68 38.813% 92.454%);
-  --kds-color-background-success-active: hsl(118.67 23.411% 88.119%);
-  --kds-color-background-success-bold-initial: hsl(111 48% 31%);
-  --kds-color-background-success-bold-hover: hsl(110.47 45.877% 26.246%);
-  --kds-color-background-success-bold-active: hsl(109.63 42.516% 20.454%);
-  --kds-color-background-info-initial: hsl(216.77 100% 96.851%);
-  --kds-color-background-info-hover: hsl(216.77 39.826% 92.476%);
-  --kds-color-background-info-active: hsl(216.78 23.993% 88.14%);
-  --kds-color-background-info-bold-initial: hsl(208 63% 41%);
-  --kds-color-background-info-bold-hover: hsl(208.92 58.259% 34.934%);
-  --kds-color-background-info-bold-active: hsl(210.19 52% 27.273%);
-  --kds-color-background-brand-initial: hsl(51 100% 50%);
-  --kds-color-background-brand-hover: hsl(50.165 84.159% 44.695%);
-  --kds-color-background-brand-active: hsl(49.385 73.102% 35.333%);
   --kds-color-background-input-initial: hsl(0 0% 99%);
   --kds-color-background-input-hover: hsl(330 0% 94.521%);
   --kds-color-background-input-active: hsl(330 0% 85.683%);
   --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
   --kds-color-background-disabled-primary: hsl(0 0% 48%);
   --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
+  --kds-color-background-success-bold-initial: hsl(111 48% 31%);
+  --kds-color-background-static-info: hsl(217 100% 97%);
+  --kds-color-background-static-info-muted: hsl(217.11 100.13% 97.725%);
+  --kds-color-background-static-warning: hsl(30 95% 92%);
+  --kds-color-background-static-warning-muted: hsl(29.611 97.821% 95.88%);
+  --kds-color-background-static-danger: hsl(2 100% 92%);
+  --kds-color-background-static-danger-muted: hsl(0 100% 97%);
+  --kds-color-background-static-success: hsl(119.44 95.797% 93.942%);
+  --kds-color-background-static-success-muted: hsl(124.89 65.088% 97.723%);
+  --kds-color-background-static-brand: hsl(51 100% 50%);
   --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
   --kds-color-text-and-icon-muted: hsl(0 0% 32%);
   --kds-color-text-and-icon-subtle: hsl(0 0% 43%);

package/dist/tokens/css/_variables.css

@@ -203,7 +203,7 @@
   --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%));
-  --kds-color-background-page-default: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-page-default: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
   --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
   --kds-color-background-neutral-hover: light-dark(hsl(180 0% 48% / 0.16), hsl(300 0% 90% / 0.16));
   --kds-color-background-neutral-active: light-dark(hsl(180 0% 48% / 0.32), hsl(180 0% 48% / 0.56));
@@ -222,39 +222,28 @@
   --kds-color-background-selected-bold-initial: light-dark(hsl(174 48% 31%), hsl(176 67% 22%));
   --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(2.4731 100% 96.876%), hsl(356.66 65.093% 15.235%));
+  --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-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));
-  --kds-color-background-warning-initial: light-dark(hsl(29.514 98.554% 96.838%), hsl(14.626 60.206% 14.715%));
-  --kds-color-background-warning-hover: light-dark(hsl(29.512 39.352% 92.463%), hsl(14.171 48.783% 17.797%));
-  --kds-color-background-warning-active: light-dark(hsl(29.51 23.726% 88.128%), hsl(14.532 35.821% 23.829%));
-  --kds-color-background-warning-bold-initial: light-dark(hsl(22 60% 45%), hsl(19 63% 38%));
-  --kds-color-background-warning-bold-hover: light-dark(hsl(21.929 58.367% 37.68%), hsl(19.04 44.421% 47.984%));
-  --kds-color-background-warning-bold-active: light-dark(hsl(21.825 55.638% 28.836%), hsl(19.038 42.206% 52.935%));
-  --kds-color-background-success-initial: light-dark(hsl(118.68 97.025% 96.828%), hsl(128.09 38.652% 10.529%));
-  --kds-color-background-success-hover: light-dark(hsl(118.68 38.813% 92.454%), hsl(126.93 29.012% 13.533%));
-  --kds-color-background-success-active: light-dark(hsl(118.67 23.411% 88.119%), hsl(125.21 18.669% 19.69%));
-  --kds-color-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(116 47% 26%));
-  --kds-color-background-success-bold-hover: light-dark(hsl(110.47 45.877% 26.246%), hsl(112.26 28.404% 37.07%));
-  --kds-color-background-success-bold-active: light-dark(hsl(109.63 42.516% 20.454%), hsl(111.19 22.717% 42.67%));
-  --kds-color-background-info-initial: light-dark(hsl(216.77 100% 96.851%), hsl(211.86 41.035% 17.864%));
-  --kds-color-background-info-hover: light-dark(hsl(216.77 39.826% 92.476%), hsl(212.68 33.733% 20.806%));
-  --kds-color-background-info-active: light-dark(hsl(216.78 23.993% 88.14%), hsl(213.81 24.237% 26.721%));
-  --kds-color-background-info-bold-initial: light-dark(hsl(208 63% 41%), hsl(208 61% 34%));
-  --kds-color-background-info-bold-hover: light-dark(hsl(208.92 58.259% 34.934%), hsl(211.76 34.965% 45.77%));
-  --kds-color-background-info-bold-active: light-dark(hsl(210.19 52% 27.273%), hsl(212.8 29.174% 51.036%));
-  --kds-color-background-brand-initial: hsl(51 100% 50%);
-  --kds-color-background-brand-hover: light-dark(hsl(50.165 84.159% 44.695%), hsl(48.411 100% 65.242%));
-  --kds-color-background-brand-active: light-dark(hsl(49.385 73.102% 35.333%), hsl(47.704 100% 69.488%));
   --kds-color-background-input-initial: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
   --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-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
+  --kds-color-background-static-info: light-dark(hsl(217 100% 97%), hsl(210 50% 28%));
+  --kds-color-background-static-info-muted: light-dark(hsl(217.11 100.13% 97.725%), hsl(211.86 41.035% 17.864%));
+  --kds-color-background-static-warning: light-dark(hsl(30 95% 92%), hsl(13 66% 23%));
+  --kds-color-background-static-warning-muted: light-dark(hsl(29.611 97.821% 95.88%), hsl(14.626 60.206% 14.715%));
+  --kds-color-background-static-danger: light-dark(hsl(2 100% 92%), hsl(348 97% 27%));
+  --kds-color-background-static-danger-muted: hsl(0 100% 97%);
+  --kds-color-background-static-success: light-dark(hsl(119.44 95.797% 93.942%), hsl(124 47% 21%));
+  --kds-color-background-static-success-muted: light-dark(hsl(124.89 65.088% 97.723%), hsl(128.09 38.652% 10.529%));
+  --kds-color-background-static-brand: hsl(51 100% 50%);
   --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%));
@@ -297,7 +286,7 @@
   --kds-color-border-neutral-bold-active: light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.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: light-dark(hsl(330 0% 11% / 0.8), hsl(240 0% 13% / 0.6));
+  --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
   --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%);
@@ -455,6 +444,7 @@
   --kds-dimension-component-width-25x: 400px;
   --kds-dimension-component-width-32x: 512px;
   --kds-dimension-component-width-45x: 720px;
+  --kds-dimension-component-width-61x: 976px;
   --kds-dimension-icon-0-56x: 9px;
   --kds-dimension-icon-0-75x: 12px;
   --kds-dimension-icon-1x: 16px;
@@ -511,4 +501,5 @@
   --kds-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));
   --kds-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));
   --kds-box-shadow-knob: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+  --kds-color-background-static-danger-bold: hsl(356.66 65.093% 15.235%);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.0.16",
+  "version": "0.1.1",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -11,6 +11,9 @@
   "author": "KNIME AG, Zurich, Switzerland",
   "type": "module",
   "dependencies": {
+    "@fontsource/roboto": "5.2.8",
+    "@fontsource/roboto-condensed": "5.2.8",
+    "@fontsource/roboto-mono": "5.2.8",
     "modern-normalize": "3.0.1"
   },
   "devDependencies": {
@@ -29,6 +32,8 @@
   ],
   "exports": {
     "./index.css": "./dist/css/index.css",
+    "./fonts.css": "./dist/css/fonts.css",
+    "./fonts-workflows.css": "./dist/css/fonts-workflows.css",
     "./kds-variables.css": "./dist/tokens/css/_variables.css",
     "./kds-properties.css": "./dist/tokens/css/_properties.css",
     "./kds-legacy-theme.css": "./dist/tokens/css/_variables-legacy.css",