@knime/kds-styles 0.3.1 → 0.4.0

package/dist/css/fonts.css

@@ -1,13 +1,20 @@
 /**
-* 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";
+ * Auto-generated font imports based on design tokens in _variables.css
+ * DO NOT EDIT MANUALLY - Run `pnpm build:fonts` to regenerate this file
+ */
+
+/* roboto */
+@import "@fontsource/roboto/400.css";
+@import "@fontsource/roboto/400-italic.css";
+@import "@fontsource/roboto/500.css";
+@import "@fontsource/roboto/700.css";
+@import "@fontsource/roboto/700-italic.css";
+
+/* roboto-condensed */
+@import "@fontsource/roboto-condensed/400.css";
+@import "@fontsource/roboto-condensed/400-italic.css";
+@import "@fontsource/roboto-condensed/700.css";
+@import "@fontsource/roboto-condensed/700-italic.css";
+
+/* roboto-mono */
+@import "@fontsource/roboto-mono/400.css";

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

@@ -1101,25 +1101,25 @@ syntax: "<string>";
 }
 
 @property --kds-elevation-level-0 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 0 0 0 0 hsl(330 0% 73% / 0.32);
 }
 
 @property --kds-elevation-level-1 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 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);
 }
 
 @property --kds-elevation-level-3 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 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);
 }
 
 @property --kds-box-shadow-knob {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 0 1px 2px 0 hsl(330 0% 32% / 0.5);
 }

package/dist/tokens/css/_properties.css

@@ -938,6 +938,12 @@ syntax: "<length>";
   initial-value: 16px;
 }
 
+@property --kds-core-font-size-1-13x {
+syntax: "<length>";
+  inherits: true;
+  initial-value: 18px;
+}
+
 @property --kds-core-font-size-1-25x {
 syntax: "<length>";
   inherits: true;
@@ -1085,19 +1091,19 @@ syntax: "<length>";
 @property --kds-core-font-family-roboto {
 syntax: "<string>#";
   inherits: true;
-  initial-value: Roboto;
+  initial-value: Roboto, sans-serif;
 }
 
 @property --kds-core-font-family-roboto-condensed {
 syntax: "<string>#";
   inherits: true;
-  initial-value: 'Roboto Condensed';
+  initial-value: 'Roboto Condensed', sans-serif;
 }
 
 @property --kds-core-font-family-roboto-mono {
 syntax: "<string>#";
   inherits: true;
-  initial-value: 'Roboto Mono';
+  initial-value: 'Roboto Mono', monospace;
 }
 
 @property --kds-core-font-weight-regular {
@@ -1113,8 +1119,8 @@ syntax: "<number>";
 }
 
 @property --kds-core-font-weight-regular-italic-style {
-syntax: "*";
-  inherits: false;
+syntax: "<string>";
+  inherits: true;
   initial-value: italic;
 }
 
@@ -1130,6 +1136,18 @@ syntax: "<number>";
   initial-value: 700;
 }
 
+@property --kds-core-font-weight-strong-italic-weight {
+syntax: "<number>";
+  inherits: true;
+  initial-value: 700;
+}
+
+@property --kds-core-font-weight-strong-italic-style {
+syntax: "<string>";
+  inherits: true;
+  initial-value: italic;
+}
+
 @property --kds-core-line-height-singleline {
 syntax: "<number> | <percentage>";
   inherits: true;
@@ -1427,7 +1445,7 @@ syntax: "<color>";
 @property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 100% 97%);
+  initial-value: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
 }
 
 @property --kds-color-background-static-success {
@@ -2684,320 +2702,380 @@ syntax: "<length>";
   initial-value: 20px;
 }
 
+@property --kds-font-base-display-xsmall {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 18px/1.3 Roboto, sans-serif;
+}
+
 @property --kds-font-base-display-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 20px/1.3 Roboto;
+  initial-value: 700 20px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-display-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 24px/1.3 Roboto;
+  initial-value: 700 24px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-display-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 32px/1.3 Roboto;
+  initial-value: 700 32px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-display-xlarge {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 40px/1.3 Roboto;
+  initial-value: 700 40px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 10px/1 Roboto;
+  initial-value: 500 10px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 12px/1 Roboto;
+  initial-value: 500 12px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 12px/1 Roboto;
+  initial-value: 700 12px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 14px/1 Roboto;
+  initial-value: 500 14px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-medium-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 14px/1 Roboto;
+  initial-value: 700 14px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 16px/1 Roboto;
+  initial-value: 500 16px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-title-large-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 16px/1 Roboto;
+  initial-value: 700 16px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 12px/1.5 Roboto;
+  initial-value: 400 12px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-small-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: italic 400 12px/1.5 Roboto;
+  initial-value: italic 400 12px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 12px/1.5 Roboto;
+  initial-value: 700 12px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-base-body-small-strong-italic {
+syntax: "<string>";
+  inherits: true;
+  initial-value: italic 700 12px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 14px/1.5 Roboto;
+  initial-value: 400 14px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 16px/1.3 Roboto;
+  initial-value: 400 16px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-body-xlarge {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 20px/1.5 Roboto;
+  initial-value: 400 20px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-font-base-subtext-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 9px Roboto;
+  initial-value: 400 9px Roboto, sans-serif;
 }
 
 @property --kds-font-base-subtext-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 10px/1.3 Roboto;
+  initial-value: 400 10px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-subtext-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 12px/1.3 Roboto;
+  initial-value: 400 12px/1.3 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-xsmall-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 11px/1 Roboto;
+  initial-value: 500 11px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 12px/1 Roboto;
+  initial-value: 400 12px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: italic 400 12px/1 Roboto;
+  initial-value: italic 400 12px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 12px/1 Roboto;
+  initial-value: 500 12px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-medium {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 14px/1 Roboto;
+  initial-value: 400 14px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-medium-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 14px/1 Roboto;
+  initial-value: 500 14px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-large {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 16px/1 Roboto;
+  initial-value: 400 16px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-interactive-large-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 500 16px/1 Roboto;
+  initial-value: 500 16px/1 Roboto, sans-serif;
 }
 
 @property --kds-font-base-code-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 10px/1 'Roboto Mono';
+  initial-value: 400 10px/1 'Roboto Mono', monospace;
 }
 
 @property --kds-font-base-code-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 11px/1.3 'Roboto Mono';
+  initial-value: 400 11px/1.3 'Roboto Mono', monospace;
 }
 
-@property --kds-font-workflows-annotations-h1 {
+@property --kds-font-workflow-annotation-headline-h1 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 36px/1.5 'Roboto Condensed';
+  initial-value: 700 36px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-h2 {
+@property --kds-font-workflow-annotation-headline-h2 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 30px/1.5 'Roboto Condensed';
+  initial-value: 700 30px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-h3 {
+@property --kds-font-workflow-annotation-headline-h3 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 26px/1.5 'Roboto Condensed';
+  initial-value: 700 26px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-h4 {
+@property --kds-font-workflow-annotation-headline-h4 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 22px/1.5 'Roboto Condensed';
+  initial-value: 700 22px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-h5 {
+@property --kds-font-workflow-annotation-headline-h5 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 16px/1.5 'Roboto Condensed';
+  initial-value: 700 16px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-h6 {
+@property --kds-font-workflow-annotation-headline-h1-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 13px/1.5 'Roboto Condensed';
+  initial-value: 700 36px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-annotations-body {
+@property --kds-font-workflow-annotation-headline-h2-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 13px/1.5 'Roboto Condensed';
+  initial-value: 700 30px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-node-name {
+@property --kds-font-workflow-annotation-headline-h3-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 13px 'Roboto Condensed';
+  initial-value: 700 26px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-node-label {
+@property --kds-font-workflow-annotation-headline-h4-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 12px 'Roboto Condensed';
+  initial-value: 700 22px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-workflows-node-status {
+@property --kds-font-workflow-annotation-headline-h5-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 8px 'Roboto Condensed';
+  initial-value: 700 16px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h1 {
+@property --kds-font-workflow-annotation-headline-h6 {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 36px/1.5 Roboto;
+  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h2 {
+@property --kds-font-workflow-annotation-headline-h6-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 30px/1.5 Roboto;
+  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h3 {
+@property --kds-font-workflow-annotation-body-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 26px/1.5 Roboto;
+  initial-value: 400 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h4 {
+@property --kds-font-workflow-annotation-body-small-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 22px/1.5 Roboto;
+  initial-value: italic 400 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h5 {
+@property --kds-font-workflow-annotation-body-small-strong {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 16px/1.5 Roboto;
+  initial-value: 700 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-h6 {
+@property --kds-font-workflow-annotation-body-small-strong-italic {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 13px/1.5 Roboto;
+  initial-value: italic 700 13px/1.5 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-body {
+@property --kds-font-workflow-node-name {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 13px/1.5 Roboto;
+  initial-value: 700 13px 'Roboto Condensed', sans-serif;
 }
 
-@property --kds-font-dataapps-body-small {
+@property --kds-font-workflow-node-label {
 syntax: "<string>";
   inherits: true;
-  initial-value: 700 10px/1.5 Roboto;
+  initial-value: 400 12px 'Roboto Condensed', sans-serif;
+}
+
+@property --kds-font-workflow-node-status {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 8px 'Roboto Condensed', sans-serif;
+}
+
+@property --kds-font-dataapp-h1 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 36px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-h2 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 30px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-h3 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 26px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-h4 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 22px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-h5 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 16px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-h6 {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 13px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-body {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 13px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-dataapp-body-small {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 10px/1.5 Roboto, sans-serif;
 }
 
 @property --kds-elevation-level-0 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 0 0 0 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
 }
 
 @property --kds-elevation-level-1 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 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));
 }
 
 @property --kds-elevation-level-3 {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
   initial-value: 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));
 }
 
 @property --kds-box-shadow-knob {
-syntax: "*";
+syntax: "<string>";
   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.css

@@ -159,6 +159,7 @@
   --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-13x: 18px;
   --kds-core-font-size-1-25x: 20px;
   --kds-core-font-size-1-375x: 22px;
   --kds-core-font-size-1-625x: 26px;
@@ -183,14 +184,16 @@
   --kds-core-paragraph-spacing-medium: 0.5px;
   --kds-core-paragraph-spacing-large: 0.75px;
   --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-family-roboto: Roboto, sans-serif;
+  --kds-core-font-family-roboto-condensed: 'Roboto Condensed', sans-serif;
+  --kds-core-font-family-roboto-mono: 'Roboto Mono', monospace;
   --kds-core-font-weight-regular: 400;
   --kds-core-font-weight-regular-italic-weight: 400;
   --kds-core-font-weight-regular-italic-style: italic;
   --kds-core-font-weight-medium: 500;
   --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-multiline-wide: 1.5;
@@ -240,7 +243,7 @@
   --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-danger-muted: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
   --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%);
@@ -450,57 +453,67 @@
   --kds-dimension-icon-0-75x: 12px;
   --kds-dimension-icon-1x: 16px;
   --kds-dimension-icon-1-25x: 20px;
-  --kds-font-base-display-small: 700 20px/1.3 Roboto;
-  --kds-font-base-display-medium: 700 24px/1.3 Roboto;
-  --kds-font-base-display-large: 700 32px/1.3 Roboto;
-  --kds-font-base-display-xlarge: 700 40px/1.3 Roboto;
-  --kds-font-base-title-xsmall: 500 10px/1 Roboto;
-  --kds-font-base-title-small: 500 12px/1 Roboto;
-  --kds-font-base-title-small-strong: 700 12px/1 Roboto;
-  --kds-font-base-title-medium: 500 14px/1 Roboto;
-  --kds-font-base-title-medium-strong: 700 14px/1 Roboto;
-  --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;
-  --kds-font-base-subtext-xsmall: 400 9px Roboto;
-  --kds-font-base-subtext-small: 400 10px/1.3 Roboto;
-  --kds-font-base-subtext-medium: 400 12px/1.3 Roboto;
-  --kds-font-base-interactive-xsmall-strong: 500 11px/1 Roboto;
-  --kds-font-base-interactive-small: 400 12px/1 Roboto;
-  --kds-font-base-interactive-small-italic: italic 400 12px/1 Roboto;
-  --kds-font-base-interactive-small-strong: 500 12px/1 Roboto;
-  --kds-font-base-interactive-medium: 400 14px/1 Roboto;
-  --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';
-  --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;
-  --kds-font-dataapps-h4: 700 22px/1.5 Roboto;
-  --kds-font-dataapps-h5: 700 16px/1.5 Roboto;
-  --kds-font-dataapps-h6: 700 13px/1.5 Roboto;
-  --kds-font-dataapps-body: 700 13px/1.5 Roboto;
-  --kds-font-dataapps-body-small: 700 10px/1.5 Roboto;
+  --kds-font-base-display-xsmall: 700 18px/1.3 Roboto, sans-serif;
+  --kds-font-base-display-small: 700 20px/1.3 Roboto, sans-serif;
+  --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-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-xlarge: 400 20px/1.5 Roboto, sans-serif;
+  --kds-font-base-subtext-xsmall: 400 9px 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-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;
+  --kds-font-workflow-annotation-headline-h3: 700 26px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h4: 700 22px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h5: 700 16px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h1-italic: 700 36px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h2-italic: 700 30px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h3-italic: 700 26px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h4-italic: 700 22px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h5-italic: 700 16px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h6: 700 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-headline-h6-italic: 700 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-body-small: 400 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-body-small-italic: italic 400 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-body-small-strong: 700 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-annotation-body-small-strong-italic: italic 700 13px/1.5 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-node-name: 700 13px 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-node-label: 400 12px 'Roboto Condensed', sans-serif;
+  --kds-font-workflow-node-status: 400 8px 'Roboto Condensed', sans-serif;
+  --kds-font-dataapp-h1: 700 36px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-h2: 700 30px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-h3: 700 26px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-h4: 700 22px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-h5: 700 16px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-h6: 700 13px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-body: 700 13px/1.5 Roboto, sans-serif;
+  --kds-font-dataapp-body-small: 700 10px/1.5 Roboto, sans-serif;
   --kds-elevation-level-0: 0 0 0 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
   --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.3.1",
+  "version": "0.4.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -45,9 +45,11 @@
     "npm": "please-use-pnpm"
   },
   "scripts": {
-    "build": "pnpm run --parallel --aggregate-output /^build:.*/",
+    "build": "pnpm run build:parallel && pnpm run build:fonts",
+    "build:parallel": "pnpm run --parallel --aggregate-output \"/^build:(css|icons|tokens)$/\"",
     "build:icons": "node src/processSVGs.js",
     "build:tokens": "node src/buildTokens.js",
+    "build:fonts": "node src/processFonts.js",
     "build:css": "node src/copyCss.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   }

package/dist/css/fonts-workflows.css

@@ -1,10 +0,0 @@
-/**
-* 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";