@knime/kds-styles 2.9.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-styles
 
+## 4.0.0
+
+## 3.0.0
+
+### Major Changes
+
+- 356af93: Remove the KDS legacy theme.
+
+  BREAKING CHANGES:
+
+  - Removed the `kds-legacy-theme.css` export (`@import "@knime/kds-styles/kds-legacy-theme.css"`) and the generated legacy token files. Remove the import.
+
+### Patch Changes
+
+- 13cbb42: `kds.font.base.code.small` and `kds.font.base.code.xsmall` now use the light (300) weight of Roboto Mono. Adds a `kds.core.font-weight.light` (300) primitive token.
+
 ## 2.9.0
 
 ## 2.8.2

package/README.md

@@ -35,7 +35,6 @@ The design system uses the Roboto, Roboto Condensed and Roboto Mono fonts for ty
 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
 

package/dist/css/fonts.css

@@ -17,4 +17,4 @@
 @import "@fontsource/roboto-condensed/700-italic.css";
 
 /* roboto-mono */
-@import "@fontsource/roboto-mono/400.css";
+@import "@fontsource/roboto-mono/300.css";

package/dist/tokens/css/_properties.css

@@ -1106,6 +1106,12 @@ syntax: "<string>#";
   initial-value: 'Roboto Mono', monospace;
 }
 
+@property --kds-core-font-weight-light {
+syntax: "<number>";
+  inherits: true;
+  initial-value: 300;
+}
+
 @property --kds-core-font-weight-regular {
 syntax: "<number>";
   inherits: true;
@@ -2822,6 +2828,18 @@ syntax: "<length>";
   initial-value: -4px;
 }
 
+@property --kds-spacing-container-negative-0-375x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: -6px;
+}
+
+@property --kds-spacing-container-negative-0-5x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: -8px;
+}
+
 @property --kds-spacing-container-none {
 syntax: "<length>";
   inherits: false;
@@ -3401,13 +3419,13 @@ syntax: "<string>";
 @property --kds-font-base-code-xsmall {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 10px/normal 'Roboto Mono', monospace;
+  initial-value: 300 10px/normal 'Roboto Mono', monospace;
 }
 
 @property --kds-font-base-code-small {
 syntax: "<string>";
   inherits: true;
-  initial-value: 400 11px/normal 'Roboto Mono', monospace;
+  initial-value: 300 12px/normal 'Roboto Mono', monospace;
 }
 
 @property --kds-font-workflow-annotation-headline-h1 {

package/dist/tokens/css/_variables.css

@@ -187,6 +187,7 @@
   --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-light: 300;
   --kds-core-font-weight-regular: 400;
   --kds-core-font-weight-regular-italic-weight: 400;
   --kds-core-font-weight-regular-italic-style: italic;
@@ -473,6 +474,8 @@
   --kds-sizing-viewport-breakpoints-1400: 1400px;
   --kds-sizing-viewport-breakpoints-1728: 1728px;
   --kds-spacing-container-negative-0-25x: -4px;
+  --kds-spacing-container-negative-0-375x: -6px;
+  --kds-spacing-container-negative-0-5x: -8px;
   --kds-spacing-container-none: 0;
   --kds-spacing-container-0-10x: 1px;
   --kds-spacing-container-0-12x: 2px;
@@ -569,8 +572,8 @@
   --kds-font-base-interactive-medium-strong: 500 14px/normal Roboto, sans-serif;
   --kds-font-base-interactive-large: 400 16px/normal Roboto, sans-serif;
   --kds-font-base-interactive-large-strong: 500 16px/normal Roboto, sans-serif;
-  --kds-font-base-code-xsmall: 400 10px/normal 'Roboto Mono', monospace;
-  --kds-font-base-code-small: 400 11px/normal 'Roboto Mono', monospace;
+  --kds-font-base-code-xsmall: 300 10px/normal 'Roboto Mono', monospace;
+  --kds-font-base-code-small: 300 12px/normal '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;

package/dist/tokens/ts/font.js

@@ -340,21 +340,21 @@ export const font = {
         code: {
             xsmall: {
                 fontFamily: "Roboto Mono",
-                fontWeight: 400,
+                fontWeight: 300,
                 fontSize: { value: 10, unit: "px" },
                 lineHeight: "normal",
                 css: {
-                    value: "400 10px/normal 'Roboto Mono', monospace",
+                    value: "300 10px/normal 'Roboto Mono', monospace",
                     variable: "var(--kds-font-base-code-xsmall)",
                 },
             },
             small: {
                 fontFamily: "Roboto Mono",
-                fontWeight: 400,
-                fontSize: { value: 11, unit: "px" },
+                fontWeight: 300,
+                fontSize: { value: 12, unit: "px" },
                 lineHeight: "normal",
                 css: {
-                    value: "400 11px/normal 'Roboto Mono', monospace",
+                    value: "300 12px/normal 'Roboto Mono', monospace",
                     variable: "var(--kds-font-base-code-small)",
                 },
             },

package/dist/tokens/ts/spacing.d.ts

@@ -10,6 +10,14 @@ export type KdsSpacingTokens = {
              * Negative spacing (-4px). Used for overlapping elements like the KdsAvatarGroup component.
              */
             readonly "0.25x": KdsDimension;
+            /**
+             * Negative spacing (-6px). Used for overlapping elements like the KdsPromptInput component.
+             */
+            readonly "0.375x": KdsDimension;
+            /**
+             * Negative spacing (-8px). Used for overlapping elements like the KdsPromptInput component.
+             */
+            readonly "0.5x": KdsDimension;
         };
         /**
          * No spacing (0px). Use when no gap or padding is needed.

package/dist/tokens/ts/spacing.js

@@ -13,6 +13,22 @@ export const spacing = {
                     variable: "var(--kds-spacing-container-negative-0-25x)",
                 },
             },
+            "0.375x": {
+                value: -6,
+                unit: "px",
+                css: {
+                    value: "-6px",
+                    variable: "var(--kds-spacing-container-negative-0-375x)",
+                },
+            },
+            "0.5x": {
+                value: -8,
+                unit: "px",
+                css: {
+                    value: "-8px",
+                    variable: "var(--kds-spacing-container-negative-0-5x)",
+                },
+            },
         },
         none: {
             value: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "2.9.0",
+  "version": "4.0.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -35,7 +35,6 @@
     "./fonts.css": "./dist/css/fonts.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",
     "./img/*": "./dist/img/*.svg",
     "./img/*/def": "./dist/img/*/def.ts",
     "./tokens": {