@knime/kds-styles 2.3.0 → 2.4.0

package/dist/tokens/ts/border-radius.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 KdsBorderRadiusTokens = {
+    readonly container: {
+        /**
+         * Perfectly sharp corners. Use when elements demands no rounding. USED IN: ListContainer, TabBar-Item
+         */
+        readonly none: KdsDimension;
+        /**
+         * Softens crisp elements while keeping a sharp feel.
+         */
+        readonly "0.12x": KdsDimension;
+        /**
+         * Radius on small UI pieces and compact elements. USED IN: Xsmall buttons, checkboxes.
+         */
+        readonly "0.25x": KdsDimension;
+        /**
+         * A touch rounder than previous radius. Use for elements that need a gentler feel. USED IN: Focus outlines on Xsmall buttons.
+         */
+        readonly "0.31x": KdsDimension;
+        /**
+         * Balanced rounding for small to medium components. USED IN: small and medium buttons and input fields.
+         */
+        readonly "0.37x": KdsDimension;
+        /**
+         * A touch rounder than previous radius. Use for elements that need a gentler feel. USED IN: Focus outlines on small and medium buttons.
+         */
+        readonly "0.44x": KdsDimension;
+        /**
+         * Soft rounding for larger components. USED IN: large buttons.
+         */
+        readonly "0.50x": KdsDimension;
+        /**
+         * A touch rounder than previous radius. Use for elements that need a gentler feel. USED IN: Focus outlines on large buttons.
+         */
+        readonly "0.56x": KdsDimension;
+        /**
+         * Used on rounder corner for larger elements.
+         */
+        readonly "1x": KdsDimension;
+        /**
+         * Makes circles or capsules. USED IN: radiobuttons and Badge.
+         */
+        readonly pill: KdsDimension;
+    };
+};
+export declare const borderRadius: KdsBorderRadiusTokens;

package/dist/tokens/ts/border-radius.js

@@ -0,0 +1,88 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const borderRadius = {
+    container: {
+        none: {
+            value: 0,
+            unit: "px",
+            css: {
+                value: "0",
+                variable: "var(--kds-border-radius-container-none)",
+            },
+        },
+        "0.12x": {
+            value: 2,
+            unit: "px",
+            css: {
+                value: "2px",
+                variable: "var(--kds-border-radius-container-0-12x)",
+            },
+        },
+        "0.25x": {
+            value: 4,
+            unit: "px",
+            css: {
+                value: "4px",
+                variable: "var(--kds-border-radius-container-0-25x)",
+            },
+        },
+        "0.31x": {
+            value: 5,
+            unit: "px",
+            css: {
+                value: "5px",
+                variable: "var(--kds-border-radius-container-0-31x)",
+            },
+        },
+        "0.37x": {
+            value: 6,
+            unit: "px",
+            css: {
+                value: "6px",
+                variable: "var(--kds-border-radius-container-0-37x)",
+            },
+        },
+        "0.44x": {
+            value: 7,
+            unit: "px",
+            css: {
+                value: "7px",
+                variable: "var(--kds-border-radius-container-0-44x)",
+            },
+        },
+        "0.50x": {
+            value: 8,
+            unit: "px",
+            css: {
+                value: "8px",
+                variable: "var(--kds-border-radius-container-0-50x)",
+            },
+        },
+        "0.56x": {
+            value: 9,
+            unit: "px",
+            css: {
+                value: "9px",
+                variable: "var(--kds-border-radius-container-0-56x)",
+            },
+        },
+        "1x": {
+            value: 16,
+            unit: "px",
+            css: {
+                value: "16px",
+                variable: "var(--kds-border-radius-container-1x)",
+            },
+        },
+        pill: {
+            value: 1000,
+            unit: "px",
+            css: {
+                value: "1000px",
+                variable: "var(--kds-border-radius-container-pill)",
+            },
+        },
+    },
+};

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

@@ -0,0 +1,22 @@
+/**
+ * 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 KdsBorderWidthTokens = {
+    readonly "icon-stroke": {
+        /**
+         * 1px vector stroke - default for XSmall and Small icons.
+         */
+        readonly s: KdsDimension;
+        /**
+         * 1.25px - use when scaling icons to Medium size.
+         */
+        readonly m: KdsDimension;
+        /**
+         * 1.5px - thick stroke, use when scaling icons to Large size.
+         */
+        readonly l: KdsDimension;
+    };
+};
+export declare const borderWidth: KdsBorderWidthTokens;

package/dist/tokens/ts/border-width.js

@@ -0,0 +1,32 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const borderWidth = {
+    "icon-stroke": {
+        s: {
+            value: 1,
+            unit: "px",
+            css: {
+                value: "1px",
+                variable: "var(--kds-border-width-icon-stroke-s)",
+            },
+        },
+        m: {
+            value: 1.2496,
+            unit: "px",
+            css: {
+                value: "1.2496px",
+                variable: "var(--kds-border-width-icon-stroke-m)",
+            },
+        },
+        l: {
+            value: 1.5,
+            unit: "px",
+            css: {
+                value: "1.5px",
+                variable: "var(--kds-border-width-icon-stroke-l)",
+            },
+        },
+    },
+};

package/dist/tokens/ts/border.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsBorder } from "./types.js";
+export type KdsBorderTokens = {
+    readonly action: {
+        /**
+         * Invisible outline that still occupies stroke space. Use to avoid layout-shift when a border appears on other states/variants of the same component. Themable composite token referencing border tokens from the mode set.
+         */
+        readonly transparent: KdsBorder;
+        /**
+         * Default 1px neutral outline for interactive controls (e.g outline buttons). Themable composite token referencing border tokens from the mode set.
+         */
+        readonly default: KdsBorder;
+        /**
+         * Dimmed 1px outline (color.border.disabled). Indicates the component cant be interacted with. Themable composite token referencing border tokens from the mode set.
+         */
+        readonly disabled: KdsBorder;
+        /**
+         * 2px focus ring (color.focus.outline) - appears on keyboard or programmatic focus. Meets accessibility contrast. Themable composite token referencing border tokens from the mode set.
+         */
+        readonly focused: KdsBorder;
+        /**
+         * 1px teal outline (color.border.selected) - shows current selection (e.g. radio, checkbox, TabBar-Item). Themable composite token referencing border tokens from the mode set.
+         */
+        readonly selected: KdsBorder;
+        /**
+         * 1px outline (color.border.selected) - shows current selection (e.g. table cell, node instance). Themable composite token referencing border tokens from the mode set.
+         */
+        readonly "selected-accent": KdsBorder;
+        /**
+         * 1px strong red outline for invalid inputs or destructive elements. Themable composite token referencing border tokens from the mode set.
+         */
+        readonly error: KdsBorder;
+        /**
+         * 1px bold-teal outline for elements using primary color. Themable composite token referencing border tokens from the mode set.
+         */
+        readonly primary: KdsBorder;
+        /**
+         * Neutral 1px outline specifically tuned for input elements (e.g text-field and textarea, radio and checkbox components). Themable composite token referencing border tokens from the mode set.
+         */
+        readonly input: KdsBorder;
+    };
+    readonly base: {
+        /**
+         * 1px neutral divider for most containers and separators.
+         */
+        readonly default: KdsBorder;
+        /**
+         * 1px subtler neutral stroke for low-contrast sections and containers.
+         */
+        readonly muted: KdsBorder;
+        /**
+         * 1px hairline neutral stroke (10% opacity). Use for the faintest elements (e.g dividers).
+         */
+        readonly subtle: KdsBorder;
+        /**
+         * 1px brand-yellow bar - decorative accent to be used on branded elements e.g Desktop header.
+         */
+        readonly brand: KdsBorder;
+        /**
+         * 1px red outline for critical inline messages and containers.
+         */
+        readonly danger: KdsBorder;
+        /**
+         * 1px orange outline for warning inline messages and containers.
+         */
+        readonly warning: KdsBorder;
+        /**
+         * 1px green outline for success inline messages and containers.
+         */
+        readonly success: KdsBorder;
+        /**
+         * 1px blue outline for info inline messages and containers.
+         */
+        readonly info: KdsBorder;
+    };
+    readonly "node-status": {
+        /**
+         * Border around node status.
+         */
+        readonly empty: KdsBorder;
+        /**
+         * Border around node status.
+         */
+        readonly error: KdsBorder;
+        /**
+         * Border around node status.
+         */
+        readonly warning: KdsBorder;
+        /**
+         * Border around node status.
+         */
+        readonly success: KdsBorder;
+    };
+    readonly ResizeHandle: {
+        /**
+         * Default border style for the ResizeHandle component.
+         */
+        readonly initial: KdsBorder;
+        /**
+         * Border style for the ResizeHandle component on hover.
+         */
+        readonly hover: KdsBorder;
+        /**
+         * Border style for the ResizeHandle component when active.
+         */
+        readonly active: KdsBorder;
+    };
+    readonly ColorPickerHandle: {
+        /**
+         * Default border style for the ColorPickerHandle in colorspace.
+         */
+        readonly initial: KdsBorder;
+    };
+};
+export declare const border: KdsBorderTokens;

package/dist/tokens/ts/border.js

@@ -0,0 +1,316 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const border = {
+    action: {
+        transparent: {
+            color: {
+                light: { h: 345, s: 0, l: 11.4, alpha: 0 },
+                dark: { h: 345, s: 0, l: 11.4, alpha: 0 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid hsl(345 0% 11.4% / 0)",
+                variable: "var(--kds-border-action-transparent)",
+            },
+        },
+        default: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                variable: "var(--kds-border-action-default)",
+            },
+        },
+        disabled: {
+            color: {
+                light: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
+                variable: "var(--kds-border-action-disabled)",
+            },
+        },
+        focused: {
+            color: {
+                light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
+                dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
+            },
+            width: { value: 2, unit: "px" },
+            style: "solid",
+            css: {
+                value: "2px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+                variable: "var(--kds-border-action-focused)",
+            },
+        },
+        selected: {
+            color: {
+                light: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
+                dark: { h: 168, s: 46.7, l: 85.3, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
+                variable: "var(--kds-border-action-selected)",
+            },
+        },
+        "selected-accent": {
+            color: {
+                light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
+                dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+                variable: "var(--kds-border-action-selected-accent)",
+            },
+        },
+        error: {
+            color: {
+                light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
+                dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
+                variable: "var(--kds-border-action-error)",
+            },
+        },
+        primary: {
+            color: {
+                light: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
+                dark: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid hsl(176.7, 82%, 17.5%)",
+                variable: "var(--kds-border-action-primary)",
+            },
+        },
+        input: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                variable: "var(--kds-border-action-input)",
+            },
+        },
+    },
+    base: {
+        default: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                variable: "var(--kds-border-base-default)",
+            },
+        },
+        muted: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.2 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.2 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+                variable: "var(--kds-border-base-muted)",
+            },
+        },
+        subtle: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                variable: "var(--kds-border-base-subtle)",
+            },
+        },
+        brand: {
+            color: {
+                light: { h: 50.8, s: 100, l: 50, alpha: 1 },
+                dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid hsl(50.8, 100%, 50%)",
+                variable: "var(--kds-border-base-brand)",
+            },
+        },
+        danger: {
+            color: {
+                light: { h: 3.4, s: 100, l: 86.1, alpha: 1 },
+                dark: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
+                variable: "var(--kds-border-base-danger)",
+            },
+        },
+        warning: {
+            color: {
+                light: { h: 30.8, s: 79.3, l: 73.5, alpha: 1 },
+                dark: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
+                variable: "var(--kds-border-base-warning)",
+            },
+        },
+        success: {
+            color: {
+                light: { h: 112, s: 56.5, l: 71.2, alpha: 1 },
+                dark: { h: 123.7, s: 46.7, l: 20.6, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
+                variable: "var(--kds-border-base-success)",
+            },
+        },
+        info: {
+            color: {
+                light: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
+                dark: { h: 210, s: 50, l: 27.5, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
+                variable: "var(--kds-border-base-info)",
+            },
+        },
+    },
+    "node-status": {
+        empty: {
+            color: {
+                light: { h: 0, s: 0, l: 90.2, alpha: 1 },
+                dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
+                variable: "var(--kds-border-node-status-empty)",
+            },
+        },
+        error: {
+            color: {
+                light: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
+                dark: { h: 2.6, s: 100, l: 72.4, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
+                variable: "var(--kds-border-node-status-error)",
+            },
+        },
+        warning: {
+            color: {
+                light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
+                dark: { h: 49.1, s: 99.1, l: 43.7, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
+                variable: "var(--kds-border-node-status-warning)",
+            },
+        },
+        success: {
+            color: {
+                light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
+                dark: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
+            },
+            width: { value: 1, unit: "px" },
+            style: "solid",
+            css: {
+                value: "1px solid light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
+                variable: "var(--kds-border-node-status-success)",
+            },
+        },
+    },
+    ResizeHandle: {
+        initial: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.4 },
+            },
+            width: { value: 2, unit: "px" },
+            style: "solid",
+            css: {
+                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+                variable: "var(--kds-border-resize-handle-initial)",
+            },
+        },
+        hover: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.64 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.58 },
+            },
+            width: { value: 2, unit: "px" },
+            style: "solid",
+            css: {
+                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+                variable: "var(--kds-border-resize-handle-hover)",
+            },
+        },
+        active: {
+            color: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.74 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.68 },
+            },
+            width: { value: 2, unit: "px" },
+            style: "solid",
+            css: {
+                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+                variable: "var(--kds-border-resize-handle-active)",
+            },
+        },
+    },
+    ColorPickerHandle: {
+        initial: {
+            color: {
+                light: { h: 0, s: 0, l: 99, alpha: 1 },
+                dark: { h: 0, s: 0, l: 99, alpha: 1 },
+            },
+            width: { value: 2, unit: "px" },
+            style: "solid",
+            css: {
+                value: "2px solid hsl(0, 0%, 99%)",
+                variable: "var(--kds-border-color-picker-handle-initial)",
+            },
+        },
+    },
+};

package/dist/tokens/ts/box-shadow.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsShadow } from "./types.js";
+export type KdsBoxShadowTokens = {
+    /**
+     * Drop shadow for knob elements like the ToggleSwitch handle.
+     */
+    readonly knob: KdsShadow;
+};
+export declare const boxShadow: KdsBoxShadowTokens;

package/dist/tokens/ts/box-shadow.js

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const boxShadow = {
+    knob: {
+        layers: [
+            {
+                offsetX: { value: 0, unit: "px" },
+                offsetY: { value: 1, unit: "px" },
+                blur: { value: 2, unit: "px" },
+                spread: { value: 0, unit: "px" },
+                color: {
+                    light: { h: 180, s: 0, l: 32.2, alpha: 0.5 },
+                    dark: { h: 330, s: 0, l: 10.2, alpha: 0.6 },
+                },
+            },
+        ],
+        css: {
+            value: "0 1px 2px 0 light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
+            variable: "var(--kds-box-shadow-knob)",
+        },
+    },
+};