@knime/kds-styles 2.3.0 → 2.4.0

package/dist/tokens/ts/sizing.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsDimension } from "./types.js";
+export type KdsSizingTokens = {
+    readonly "viewport-breakpoints": {
+        /**
+         * Extra small breakpoint (576px). For small mobile devices and narrow viewports.
+         */
+        readonly "576": KdsDimension;
+        /**
+         * Small breakpoint (768px). For tablets and larger mobile devices in landscape.
+         */
+        readonly "768": KdsDimension;
+        /**
+         * Medium breakpoint (1024px). For small laptops and tablets in landscape.
+         */
+        readonly "1024": KdsDimension;
+        /**
+         * Large breakpoint (1200px). For standard desktop displays.
+         */
+        readonly "1200": KdsDimension;
+        /**
+         * Extra large breakpoint (1400px). For larger desktop displays.
+         */
+        readonly "1400": KdsDimension;
+        /**
+         * Extra extra large breakpoint (1728px). For wide desktop displays and high-resolution monitors.
+         */
+        readonly "1728": KdsDimension;
+    };
+};
+export declare const sizing: KdsSizingTokens;

package/dist/tokens/ts/sizing.js

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const sizing = {
+    "viewport-breakpoints": {
+        "576": {
+            value: 576,
+            unit: "px",
+            css: {
+                value: "576px",
+                variable: "var(--kds-sizing-viewport-breakpoints-576)",
+            },
+        },
+        "768": {
+            value: 768,
+            unit: "px",
+            css: {
+                value: "768px",
+                variable: "var(--kds-sizing-viewport-breakpoints-768)",
+            },
+        },
+        "1024": {
+            value: 1024,
+            unit: "px",
+            css: {
+                value: "1024px",
+                variable: "var(--kds-sizing-viewport-breakpoints-1024)",
+            },
+        },
+        "1200": {
+            value: 1200,
+            unit: "px",
+            css: {
+                value: "1200px",
+                variable: "var(--kds-sizing-viewport-breakpoints-1200)",
+            },
+        },
+        "1400": {
+            value: 1400,
+            unit: "px",
+            css: {
+                value: "1400px",
+                variable: "var(--kds-sizing-viewport-breakpoints-1400)",
+            },
+        },
+        "1728": {
+            value: 1728,
+            unit: "px",
+            css: {
+                value: "1728px",
+                variable: "var(--kds-sizing-viewport-breakpoints-1728)",
+            },
+        },
+    },
+};

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

@@ -0,0 +1,90 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsDimension } from "./types.js";
+export type KdsSpacingTokens = {
+    readonly container: {
+        readonly negative: {
+            /**
+             * Negative spacing (-4px). Used for overlapping elements like the KdsAvatarGroup component.
+             */
+            readonly "0.25x": KdsDimension;
+        };
+        /**
+         * No spacing (0px). Use when no gap or padding is needed.
+         */
+        readonly none: KdsDimension;
+        /**
+         * Micro spacing (1px). Use for minimal separation between tightly grouped elements.
+         */
+        readonly "0.10x": KdsDimension;
+        /**
+         * Extra extra small spacing (2px). Use for very tight gaps between related elements.
+         */
+        readonly "0.12x": KdsDimension;
+        /**
+         * Extra small spacing (4px). Use for tight gaps between closely related elements.
+         */
+        readonly "0.25x": KdsDimension;
+        /**
+         * Small spacing (6px). Use for compact component internal padding.
+         */
+        readonly "0.37x": KdsDimension;
+        /**
+         * Small-medium spacing (8px). Use for standard tight gaps and small component padding.
+         */
+        readonly "0.5x": KdsDimension;
+        /**
+         * Medium-small spacing (12px). Use for moderate gaps between related elements.
+         */
+        readonly "0.75x": KdsDimension;
+        /**
+         * Base spacing (16px). The standard spacing unit for most component padding and gaps.
+         */
+        readonly "1x": KdsDimension;
+        /**
+         * Medium spacing (20px). Use for comfortable gaps between content sections.
+         */
+        readonly "1.25x": KdsDimension;
+        /**
+         * Medium-large spacing (24px). Use for section padding and larger content gaps.
+         */
+        readonly "1.5x": KdsDimension;
+        /**
+         * Large spacing (32px). Use for major section separation and container padding.
+         */
+        readonly "2x": KdsDimension;
+        /**
+         * Extra large spacing (48px). Use for prominent section separation.
+         */
+        readonly "3x": KdsDimension;
+        /**
+         * Extra extra large spacing (64px). Use for major layout divisions.
+         */
+        readonly "4x": KdsDimension;
+        /**
+         * Maximum spacing (80px). Use for large layout gaps and page-level separation.
+         */
+        readonly "5x": KdsDimension;
+    };
+    readonly offset: {
+        /**
+         * Focus ring offset (1px). Used by developers to set offset for focus border. Figma does not support offset.
+         */
+        readonly focus: KdsDimension;
+    };
+    readonly inputLabel: {
+        /**
+         * Bottom spacing between an input label and its input field.
+         */
+        readonly "spacing-bottom": KdsDimension;
+    };
+    readonly SubText: {
+        /**
+         * Top spacing between SubText and its associated element.
+         */
+        readonly "spacing-top": KdsDimension;
+    };
+};
+export declare const spacing: KdsSpacingTokens;

package/dist/tokens/ts/spacing.js

@@ -0,0 +1,115 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const spacing = {
+    container: {
+        negative: {
+            "0.25x": {
+                value: -4,
+                unit: "px",
+                css: {
+                    value: "-4px",
+                    variable: "var(--kds-spacing-container-negative-0-25x)",
+                },
+            },
+        },
+        none: {
+            value: 0,
+            unit: "px",
+            css: { value: "0", variable: "var(--kds-spacing-container-none)" },
+        },
+        "0.10x": {
+            value: 1,
+            unit: "px",
+            css: { value: "1px", variable: "var(--kds-spacing-container-0-10x)" },
+        },
+        "0.12x": {
+            value: 2,
+            unit: "px",
+            css: { value: "2px", variable: "var(--kds-spacing-container-0-12x)" },
+        },
+        "0.25x": {
+            value: 4,
+            unit: "px",
+            css: { value: "4px", variable: "var(--kds-spacing-container-0-25x)" },
+        },
+        "0.37x": {
+            value: 6,
+            unit: "px",
+            css: { value: "6px", variable: "var(--kds-spacing-container-0-37x)" },
+        },
+        "0.5x": {
+            value: 8,
+            unit: "px",
+            css: { value: "8px", variable: "var(--kds-spacing-container-0-5x)" },
+        },
+        "0.75x": {
+            value: 12,
+            unit: "px",
+            css: { value: "12px", variable: "var(--kds-spacing-container-0-75x)" },
+        },
+        "1x": {
+            value: 16,
+            unit: "px",
+            css: { value: "16px", variable: "var(--kds-spacing-container-1x)" },
+        },
+        "1.25x": {
+            value: 20,
+            unit: "px",
+            css: { value: "20px", variable: "var(--kds-spacing-container-1-25x)" },
+        },
+        "1.5x": {
+            value: 24,
+            unit: "px",
+            css: { value: "24px", variable: "var(--kds-spacing-container-1-5x)" },
+        },
+        "2x": {
+            value: 32,
+            unit: "px",
+            css: { value: "32px", variable: "var(--kds-spacing-container-2x)" },
+        },
+        "3x": {
+            value: 48,
+            unit: "px",
+            css: { value: "48px", variable: "var(--kds-spacing-container-3x)" },
+        },
+        "4x": {
+            value: 64,
+            unit: "px",
+            css: { value: "64px", variable: "var(--kds-spacing-container-4x)" },
+        },
+        "5x": {
+            value: 80,
+            unit: "px",
+            css: { value: "80px", variable: "var(--kds-spacing-container-5x)" },
+        },
+    },
+    offset: {
+        focus: {
+            value: 1,
+            unit: "px",
+            css: { value: "1px", variable: "var(--kds-spacing-offset-focus)" },
+        },
+    },
+    inputLabel: {
+        "spacing-bottom": {
+            value: 4,
+            unit: "px",
+            css: {
+                value: "4px",
+                variable: "var(--kds-spacing-input-label-spacing-bottom)",
+            },
+        },
+    },
+    SubText: {
+        "spacing-top": {
+            value: 4,
+            unit: "px",
+            css: {
+                value: "4px",
+                variable: "var(--kds-spacing-sub-text-spacing-top)",
+            },
+        },
+    },
+};

package/dist/tokens/ts/types.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+/** Color scheme the color token values are keyed by. */
+export type KdsMode = "light" | "dark";
+/** CSS representation of a token. */
+export type KdsCss = {
+    /**
+     * The token's exact value from the emitted CSS custom properties
+     * (`_variables.css`) — e.g. `light-dark(hsl(...), hsl(...))` for colors
+     * or the complete font shorthand for typography tokens.
+     */
+    readonly value: string;
+    /**
+     * The token's CSS custom property reference, e.g.
+     * `var(--kds-color-surface-default)`.
+     */
+    readonly variable: `var(--kds-${string})`;
+};
+/** Every token carries its CSS representation in `css`. */
+export type KdsCssValue = {
+    readonly css: KdsCss;
+};
+/**
+ * Resolved color value for a single mode, as separate HSL components:
+ * `h` in degrees (0-360), `s` and `l` in percent (0-100) and
+ * `alpha` as fraction (0-1). Equivalent to the CSS color
+ * `hsl(<h> <s>% <l>% / <alpha>)`.
+ */
+export type KdsColorValue = {
+    readonly h: number;
+    readonly s: number;
+    readonly l: number;
+    readonly alpha: number;
+};
+/**
+ * Light/dark pair of color values, as used inside composite tokens. Colors
+ * are the only mode-dependent token values and are always emitted as a pair
+ * (even if both modes share the same value). Pick the value for the active
+ * mode via `token[mode]`.
+ */
+export type KdsColorValues = {
+    readonly light: KdsColorValue;
+    readonly dark: KdsColorValue;
+};
+/** Color token. */
+export type KdsColor = KdsColorValues & KdsCssValue;
+/** Dimensional value, e.g. `{ value: 16, unit: "px" }`. */
+export type KdsDimensionValue = {
+    readonly value: number;
+    readonly unit: "px";
+};
+/** Dimensional token (sizes, spacings, radii, border widths, ...). */
+export type KdsDimension = KdsDimensionValue & KdsCssValue;
+/** A single font family name (e.g. `"Roboto Mono"`), without CSS fallbacks. */
+export type KdsFontFamily = string;
+export type KdsFontWeight = number;
+export type KdsFontStyle = "italic";
+export type KdsLineHeight = number | "normal";
+/** Typography token; `css` contains the complete CSS font shorthand. */
+export type KdsTypography = {
+    readonly fontFamily: KdsFontFamily;
+    readonly fontWeight: KdsFontWeight;
+    readonly fontSize: KdsDimensionValue;
+    readonly lineHeight?: KdsLineHeight;
+    readonly fontStyle?: KdsFontStyle;
+} & KdsCssValue;
+export type KdsBorderStyle = "solid" | "dashed";
+/** Border token; `css` contains the complete CSS border shorthand. */
+export type KdsBorder = {
+    readonly color: KdsColorValues;
+    readonly width: KdsDimensionValue;
+    readonly style: KdsBorderStyle;
+} & KdsCssValue;
+/** A single layer of a shadow token. */
+export type KdsShadowLayer = {
+    readonly offsetX: KdsDimensionValue;
+    readonly offsetY: KdsDimensionValue;
+    readonly blur: KdsDimensionValue;
+    readonly spread: KdsDimensionValue;
+    readonly color: KdsColorValues;
+};
+/** Shadow token; `css` contains the complete CSS box-shadow value. */
+export type KdsShadow = {
+    readonly layers: readonly KdsShadowLayer[];
+} & KdsCssValue;

package/dist/tokens/ts/types.js

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export {};

package/dist/tokens/ts/width.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsDimension } from "./types.js";
+export type KdsWidthTokens = {
+    readonly SideDrawer: {
+        /**
+         * Default width for SideDrawer and SidePanels
+         */
+        readonly default: KdsDimension;
+    };
+};
+export declare const width: KdsWidthTokens;

package/dist/tokens/ts/width.js

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const width = {
+    SideDrawer: {
+        default: {
+            value: 420,
+            unit: "px",
+            css: {
+                value: "420px",
+                variable: "var(--kds-width-side-drawer-default)",
+            },
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -38,7 +38,10 @@
     "./kds-legacy-theme.css": "./dist/tokens/css/_variables-legacy.css",
     "./img/*": "./dist/img/*.svg",
     "./img/*/def": "./dist/img/*/def.ts",
-    "./tokens": "./dist/tokens/ts/_tokens.ts"
+    "./tokens": {
+      "types": "./dist/tokens/ts/index.d.ts",
+      "import": "./dist/tokens/ts/index.js"
+    }
   },
   "engines": {
     "node": "24.10.0",

package/dist/tokens/ts/_tokens.ts

@@ -1,125 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- *
- * Numeric px-valued design tokens for use in JavaScript/TypeScript.
- * These values are extracted at build time from the CSS token definitions.
- */
-
-export const kdsBorderRadiusContainer0p12x = 2;
-export const kdsBorderRadiusContainer0p25x = 4;
-export const kdsBorderRadiusContainer0p31x = 5;
-export const kdsBorderRadiusContainer0p37x = 6;
-export const kdsBorderRadiusContainer0p44x = 7;
-export const kdsBorderRadiusContainer0p50x = 8;
-export const kdsBorderRadiusContainer0p56x = 9;
-export const kdsBorderRadiusContainer1x = 16;
-export const kdsBorderRadiusContainerPill = 1000;
-export const kdsBorderWidthIconStrokeL = 1.5;
-export const kdsBorderWidthIconStrokeM = 1.2496;
-export const kdsBorderWidthIconStrokeS = 1;
-export const kdsCoreBorderWidthL = 2;
-export const kdsCoreBorderWidthM = 1.5;
-export const kdsCoreBorderWidthS = 1.2496;
-export const kdsCoreBorderWidthXs = 1;
-export const kdsCoreFontSize0p56x = 9;
-export const kdsCoreFontSize0p5x = 8;
-export const kdsCoreFontSize0p62x = 10;
-export const kdsCoreFontSize0p68x = 11;
-export const kdsCoreFontSize0p75x = 12;
-export const kdsCoreFontSize0p81x = 13;
-export const kdsCoreFontSize0p87x = 14;
-export const kdsCoreFontSize1p13x = 18;
-export const kdsCoreFontSize1p25x = 20;
-export const kdsCoreFontSize1p375x = 22;
-export const kdsCoreFontSize1p5x = 24;
-export const kdsCoreFontSize1p625x = 26;
-export const kdsCoreFontSize1p75x = 28;
-export const kdsCoreFontSize1p875x = 30;
-export const kdsCoreFontSize1x = 16;
-export const kdsCoreFontSize2p25x = 36;
-export const kdsCoreFontSize2p5x = 40;
-export const kdsCoreFontSize2p75x = 44;
-export const kdsCoreFontSize2x = 32;
-export const kdsCoreFontSize3p25x = 52;
-export const kdsCoreFontSize3p5x = 56;
-export const kdsCoreFontSize3p75x = 60;
-export const kdsCoreFontSize3x = 48;
-export const kdsCoreFontSize4p5x = 72;
-export const kdsCoreFontSize4x = 64;
-export const kdsCoreFontSize5p5x = 88;
-export const kdsCoreFontSize5x = 80;
-export const kdsCoreFontSize6x = 96;
-export const kdsCoreParagraphSpacingExtraLarge = 1;
-export const kdsCoreParagraphSpacingLarge = 0.75;
-export const kdsCoreParagraphSpacingMedium = 0.5;
-export const kdsCoreParagraphSpacingSmall = 0.25;
-export const kdsCoreSizeScale = 16;
-export const kdsDimensionComponentHeight0p125x = 2;
-export const kdsDimensionComponentHeight0p25x = 4;
-export const kdsDimensionComponentHeight0p75x = 12;
-export const kdsDimensionComponentHeight0p88x = 14;
-export const kdsDimensionComponentHeight12p5x = 200;
-export const kdsDimensionComponentHeight12x = 192;
-export const kdsDimensionComponentHeight1p25x = 20;
-export const kdsDimensionComponentHeight1p5x = 24;
-export const kdsDimensionComponentHeight1p75x = 28;
-export const kdsDimensionComponentHeight1x = 16;
-export const kdsDimensionComponentHeight20x = 320;
-export const kdsDimensionComponentHeight25x = 400;
-export const kdsDimensionComponentHeight2p25x = 36;
-export const kdsDimensionComponentHeight2p5x = 40;
-export const kdsDimensionComponentHeight2p75x = 44;
-export const kdsDimensionComponentHeight45x = 720;
-export const kdsDimensionComponentHeight4x = 64;
-export const kdsDimensionComponentHeight5x = 80;
-export const kdsDimensionComponentWidth0p125x = 2;
-export const kdsDimensionComponentWidth0p25x = 4;
-export const kdsDimensionComponentWidth0p75x = 12;
-export const kdsDimensionComponentWidth0p88x = 14;
-export const kdsDimensionComponentWidth12p5x = 200;
-export const kdsDimensionComponentWidth12x = 192;
-export const kdsDimensionComponentWidth16x = 256;
-export const kdsDimensionComponentWidth17p5x = 280;
-export const kdsDimensionComponentWidth1p25x = 20;
-export const kdsDimensionComponentWidth1p5x = 24;
-export const kdsDimensionComponentWidth1p75x = 28;
-export const kdsDimensionComponentWidth1x = 16;
-export const kdsDimensionComponentWidth20x = 320;
-export const kdsDimensionComponentWidth25x = 400;
-export const kdsDimensionComponentWidth2p25x = 36;
-export const kdsDimensionComponentWidth2p75x = 44;
-export const kdsDimensionComponentWidth2x = 32;
-export const kdsDimensionComponentWidth32x = 512;
-export const kdsDimensionComponentWidth35x = 560;
-export const kdsDimensionComponentWidth45x = 720;
-export const kdsDimensionComponentWidth4x = 64;
-export const kdsDimensionComponentWidth52p5x = 840;
-export const kdsDimensionComponentWidth61x = 976;
-export const kdsDimensionIcon0p56x = 9;
-export const kdsDimensionIcon0p75x = 12;
-export const kdsDimensionIcon1p25x = 20;
-export const kdsDimensionIcon1x = 16;
-export const kdsSizingViewportBreakpoints1024 = 1024;
-export const kdsSizingViewportBreakpoints1200 = 1200;
-export const kdsSizingViewportBreakpoints1400 = 1400;
-export const kdsSizingViewportBreakpoints1728 = 1728;
-export const kdsSizingViewportBreakpoints576 = 576;
-export const kdsSizingViewportBreakpoints768 = 768;
-export const kdsSpacingContainer0p10x = 1;
-export const kdsSpacingContainer0p12x = 2;
-export const kdsSpacingContainer0p25x = 4;
-export const kdsSpacingContainer0p37x = 6;
-export const kdsSpacingContainer0p5x = 8;
-export const kdsSpacingContainer0p75x = 12;
-export const kdsSpacingContainer1p25x = 20;
-export const kdsSpacingContainer1p5x = 24;
-export const kdsSpacingContainer1x = 16;
-export const kdsSpacingContainer2x = 32;
-export const kdsSpacingContainer3x = 48;
-export const kdsSpacingContainer4x = 64;
-export const kdsSpacingContainer5x = 80;
-export const kdsSpacingContainerNegative0p25x = -4;
-export const kdsSpacingInputLabelSpacingBottom = 4;
-export const kdsSpacingOffsetFocus = 1;
-export const kdsSpacingSubTextSpacingTop = 4;
-export const kdsWidthSideDrawerDefault = 420;