@knime/kds-styles 2.2.0 → 2.4.0

package/dist/tokens/ts/dimension.d.ts

@@ -0,0 +1,196 @@
+/**
+ * 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 KdsDimensionTokens = {
+    readonly component: {
+        readonly height: {
+            /**
+             * Extra small component height (2px). Use for thin dividers and minimal height elements.
+             */
+            readonly "0.125x": KdsDimension;
+            /**
+             * Extra small component height (4px). Use for thin dividers and minimal height elements.
+             */
+            readonly "0.25x": KdsDimension;
+            /**
+             * Small component height (12px). Use for compact inline elements and badges.
+             */
+            readonly "0.75x": KdsDimension;
+            /**
+             * Small-medium component height (14px). Use for compact buttons and form elements.
+             */
+            readonly "0.88x": KdsDimension;
+            /**
+             * Base component height (16px). Standard height for icons and small interactive elements.
+             */
+            readonly "1x": KdsDimension;
+            /**
+             * Medium-small component height (20px). Use for small buttons and compact controls.
+             */
+            readonly "1.25x": KdsDimension;
+            /**
+             * Medium component height (24px). Use for standard icons and small form elements.
+             */
+            readonly "1.5x": KdsDimension;
+            /**
+             * Medium-large component height (28px). Use for small buttons and compact input fields.
+             */
+            readonly "1.75x": KdsDimension;
+            /**
+             * Large component height (36px). Use for standard buttons and form inputs.
+             */
+            readonly "2.25x": KdsDimension;
+            /**
+             * Component height (44px). Used for donut chart.
+             */
+            readonly "2.75x": KdsDimension;
+            /**
+             * Large-extra component height (40px). Use for prominent buttons and larger inputs.
+             */
+            readonly "2.5x": KdsDimension;
+            /**
+             * Extra large component height (64px). Use for large interactive elements and cards.
+             */
+            readonly "4x": KdsDimension;
+            /**
+             * Extra large component height (80px). Use for max height of table header
+             */
+            readonly "5x": KdsDimension;
+            /**
+             * Intended for max-height on elements
+             */
+            readonly "12x": KdsDimension;
+            /**
+             * Intended for donut charts
+             */
+            readonly "12.5x": KdsDimension;
+            /**
+             * Intended for max-height on elements
+             */
+            readonly "20x": KdsDimension;
+            /**
+             * Intended for max-height on elements
+             */
+            readonly "25x": KdsDimension;
+            /**
+             * Intended for max-height on elements
+             */
+            readonly "45x": KdsDimension;
+        };
+        readonly width: {
+            /**
+             * Extra small component width (2px). Use for thin dividers and minimal width elements.
+             */
+            readonly "0.125x": KdsDimension;
+            /**
+             * Extra small component width (4px). Use for thin dividers and minimal width elements.
+             */
+            readonly "0.25x": KdsDimension;
+            /**
+             * Small component width (12px). Use for compact inline elements.
+             */
+            readonly "0.75x": KdsDimension;
+            /**
+             * Small-medium component width (14px). Use for compact elements.
+             */
+            readonly "0.88x": KdsDimension;
+            /**
+             * Base component width (16px). Standard width for icons and small elements.
+             */
+            readonly "1x": KdsDimension;
+            /**
+             * Medium-small component width (20px). Use for small icons and compact controls.
+             */
+            readonly "1.25x": KdsDimension;
+            /**
+             * Medium component width (24px). Use for standard icons.
+             */
+            readonly "1.5x": KdsDimension;
+            /**
+             * Medium-large component width (28px). Use for larger icons and compact buttons.
+             */
+            readonly "1.75x": KdsDimension;
+            /**
+             * Base component width (32px). Standard width for small elements or the selected column in table.
+             */
+            readonly "2x": KdsDimension;
+            /**
+             * Large component width (36px). Use for square buttons and larger icons.
+             */
+            readonly "2.25x": KdsDimension;
+            /**
+             * Component width (44px). Use for donut charts.
+             */
+            readonly "2.75x": KdsDimension;
+            /**
+             * Extra large component width (64px). Use for large interactive elements.
+             */
+            readonly "4x": KdsDimension;
+            /**
+             * Container width (192px). Use for listContainer and menuContainer.
+             */
+            readonly "12x": KdsDimension;
+            /**
+             * Intended for donut charts
+             */
+            readonly "12.5x": KdsDimension;
+            /**
+             * Container width (256px). Use for narrow tooltips or popovers to prevent text stretching.
+             */
+            readonly "16x": KdsDimension;
+            /**
+             * Container width (280px). Use for default, max, min width of panels and containers
+             */
+            readonly "17.5x": KdsDimension;
+            /**
+             * Container width (320px). Use for default, max, min width of panels and containers
+             */
+            readonly "20x": KdsDimension;
+            /**
+             * Container width (400px). Use for narrow sidepanels and modal widths.
+             */
+            readonly "25x": KdsDimension;
+            /**
+             * Medium container width (512px). Use for standard sidepanels and dialogs.
+             */
+            readonly "32x": KdsDimension;
+            /**
+             * Medium container width (560px). Use for Editor panels and max width.
+             */
+            readonly "35x": KdsDimension;
+            /**
+             * Large container width (720px). Use for wide sidepanels and content areas.
+             */
+            readonly "45x": KdsDimension;
+            /**
+             * Large container width (840px). Use for wide sidepanels and content areas or max width.
+             */
+            readonly "52.5x": KdsDimension;
+            /**
+             * Extra large container width (976px). Use for full-width content panels.
+             */
+            readonly "61x": KdsDimension;
+        };
+    };
+    readonly icon: {
+        /**
+         * Extra small icon size (9px). Use for micro icons in compact contexts.
+         */
+        readonly "0.56x": KdsDimension;
+        /**
+         * Small icon size (12px). Use for small icons in tight spaces and inline text.
+         */
+        readonly "0.75x": KdsDimension;
+        /**
+         * Base icon size (16px). Standard icon size for most UI elements.
+         */
+        readonly "1x": KdsDimension;
+        /**
+         * Large icon size (20px). Use for prominent icons and larger interactive elements.
+         */
+        readonly "1.25x": KdsDimension;
+    };
+};
+export declare const dimension: KdsDimensionTokens;

package/dist/tokens/ts/dimension.js

@@ -0,0 +1,362 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const dimension = {
+    component: {
+        height: {
+            "0.125x": {
+                value: 2,
+                unit: "px",
+                css: {
+                    value: "2px",
+                    variable: "var(--kds-dimension-component-height-0-125x)",
+                },
+            },
+            "0.25x": {
+                value: 4,
+                unit: "px",
+                css: {
+                    value: "4px",
+                    variable: "var(--kds-dimension-component-height-0-25x)",
+                },
+            },
+            "0.75x": {
+                value: 12,
+                unit: "px",
+                css: {
+                    value: "12px",
+                    variable: "var(--kds-dimension-component-height-0-75x)",
+                },
+            },
+            "0.88x": {
+                value: 14,
+                unit: "px",
+                css: {
+                    value: "14px",
+                    variable: "var(--kds-dimension-component-height-0-88x)",
+                },
+            },
+            "1x": {
+                value: 16,
+                unit: "px",
+                css: {
+                    value: "16px",
+                    variable: "var(--kds-dimension-component-height-1x)",
+                },
+            },
+            "1.25x": {
+                value: 20,
+                unit: "px",
+                css: {
+                    value: "20px",
+                    variable: "var(--kds-dimension-component-height-1-25x)",
+                },
+            },
+            "1.5x": {
+                value: 24,
+                unit: "px",
+                css: {
+                    value: "24px",
+                    variable: "var(--kds-dimension-component-height-1-5x)",
+                },
+            },
+            "1.75x": {
+                value: 28,
+                unit: "px",
+                css: {
+                    value: "28px",
+                    variable: "var(--kds-dimension-component-height-1-75x)",
+                },
+            },
+            "2.25x": {
+                value: 36,
+                unit: "px",
+                css: {
+                    value: "36px",
+                    variable: "var(--kds-dimension-component-height-2-25x)",
+                },
+            },
+            "2.75x": {
+                value: 44,
+                unit: "px",
+                css: {
+                    value: "44px",
+                    variable: "var(--kds-dimension-component-height-2-75x)",
+                },
+            },
+            "2.5x": {
+                value: 40,
+                unit: "px",
+                css: {
+                    value: "40px",
+                    variable: "var(--kds-dimension-component-height-2-5x)",
+                },
+            },
+            "4x": {
+                value: 64,
+                unit: "px",
+                css: {
+                    value: "64px",
+                    variable: "var(--kds-dimension-component-height-4x)",
+                },
+            },
+            "5x": {
+                value: 80,
+                unit: "px",
+                css: {
+                    value: "80px",
+                    variable: "var(--kds-dimension-component-height-5x)",
+                },
+            },
+            "12x": {
+                value: 192,
+                unit: "px",
+                css: {
+                    value: "192px",
+                    variable: "var(--kds-dimension-component-height-12x)",
+                },
+            },
+            "12.5x": {
+                value: 200,
+                unit: "px",
+                css: {
+                    value: "200px",
+                    variable: "var(--kds-dimension-component-height-12-5x)",
+                },
+            },
+            "20x": {
+                value: 320,
+                unit: "px",
+                css: {
+                    value: "320px",
+                    variable: "var(--kds-dimension-component-height-20x)",
+                },
+            },
+            "25x": {
+                value: 400,
+                unit: "px",
+                css: {
+                    value: "400px",
+                    variable: "var(--kds-dimension-component-height-25x)",
+                },
+            },
+            "45x": {
+                value: 720,
+                unit: "px",
+                css: {
+                    value: "720px",
+                    variable: "var(--kds-dimension-component-height-45x)",
+                },
+            },
+        },
+        width: {
+            "0.125x": {
+                value: 2,
+                unit: "px",
+                css: {
+                    value: "2px",
+                    variable: "var(--kds-dimension-component-width-0-125x)",
+                },
+            },
+            "0.25x": {
+                value: 4,
+                unit: "px",
+                css: {
+                    value: "4px",
+                    variable: "var(--kds-dimension-component-width-0-25x)",
+                },
+            },
+            "0.75x": {
+                value: 12,
+                unit: "px",
+                css: {
+                    value: "12px",
+                    variable: "var(--kds-dimension-component-width-0-75x)",
+                },
+            },
+            "0.88x": {
+                value: 14,
+                unit: "px",
+                css: {
+                    value: "14px",
+                    variable: "var(--kds-dimension-component-width-0-88x)",
+                },
+            },
+            "1x": {
+                value: 16,
+                unit: "px",
+                css: {
+                    value: "16px",
+                    variable: "var(--kds-dimension-component-width-1x)",
+                },
+            },
+            "1.25x": {
+                value: 20,
+                unit: "px",
+                css: {
+                    value: "20px",
+                    variable: "var(--kds-dimension-component-width-1-25x)",
+                },
+            },
+            "1.5x": {
+                value: 24,
+                unit: "px",
+                css: {
+                    value: "24px",
+                    variable: "var(--kds-dimension-component-width-1-5x)",
+                },
+            },
+            "1.75x": {
+                value: 28,
+                unit: "px",
+                css: {
+                    value: "28px",
+                    variable: "var(--kds-dimension-component-width-1-75x)",
+                },
+            },
+            "2x": {
+                value: 32,
+                unit: "px",
+                css: {
+                    value: "32px",
+                    variable: "var(--kds-dimension-component-width-2x)",
+                },
+            },
+            "2.25x": {
+                value: 36,
+                unit: "px",
+                css: {
+                    value: "36px",
+                    variable: "var(--kds-dimension-component-width-2-25x)",
+                },
+            },
+            "2.75x": {
+                value: 44,
+                unit: "px",
+                css: {
+                    value: "44px",
+                    variable: "var(--kds-dimension-component-width-2-75x)",
+                },
+            },
+            "4x": {
+                value: 64,
+                unit: "px",
+                css: {
+                    value: "64px",
+                    variable: "var(--kds-dimension-component-width-4x)",
+                },
+            },
+            "12x": {
+                value: 192,
+                unit: "px",
+                css: {
+                    value: "192px",
+                    variable: "var(--kds-dimension-component-width-12x)",
+                },
+            },
+            "12.5x": {
+                value: 200,
+                unit: "px",
+                css: {
+                    value: "200px",
+                    variable: "var(--kds-dimension-component-width-12-5x)",
+                },
+            },
+            "16x": {
+                value: 256,
+                unit: "px",
+                css: {
+                    value: "256px",
+                    variable: "var(--kds-dimension-component-width-16x)",
+                },
+            },
+            "17.5x": {
+                value: 280,
+                unit: "px",
+                css: {
+                    value: "280px",
+                    variable: "var(--kds-dimension-component-width-17-5x)",
+                },
+            },
+            "20x": {
+                value: 320,
+                unit: "px",
+                css: {
+                    value: "320px",
+                    variable: "var(--kds-dimension-component-width-20x)",
+                },
+            },
+            "25x": {
+                value: 400,
+                unit: "px",
+                css: {
+                    value: "400px",
+                    variable: "var(--kds-dimension-component-width-25x)",
+                },
+            },
+            "32x": {
+                value: 512,
+                unit: "px",
+                css: {
+                    value: "512px",
+                    variable: "var(--kds-dimension-component-width-32x)",
+                },
+            },
+            "35x": {
+                value: 560,
+                unit: "px",
+                css: {
+                    value: "560px",
+                    variable: "var(--kds-dimension-component-width-35x)",
+                },
+            },
+            "45x": {
+                value: 720,
+                unit: "px",
+                css: {
+                    value: "720px",
+                    variable: "var(--kds-dimension-component-width-45x)",
+                },
+            },
+            "52.5x": {
+                value: 840,
+                unit: "px",
+                css: {
+                    value: "840px",
+                    variable: "var(--kds-dimension-component-width-52-5x)",
+                },
+            },
+            "61x": {
+                value: 976,
+                unit: "px",
+                css: {
+                    value: "976px",
+                    variable: "var(--kds-dimension-component-width-61x)",
+                },
+            },
+        },
+    },
+    icon: {
+        "0.56x": {
+            value: 9,
+            unit: "px",
+            css: { value: "9px", variable: "var(--kds-dimension-icon-0-56x)" },
+        },
+        "0.75x": {
+            value: 12,
+            unit: "px",
+            css: { value: "12px", variable: "var(--kds-dimension-icon-0-75x)" },
+        },
+        "1x": {
+            value: 16,
+            unit: "px",
+            css: { value: "16px", variable: "var(--kds-dimension-icon-1x)" },
+        },
+        "1.25x": {
+            value: 20,
+            unit: "px",
+            css: { value: "20px", variable: "var(--kds-dimension-icon-1-25x)" },
+        },
+    },
+};

package/dist/tokens/ts/elevation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 KdsElevationTokens = {
+    readonly level: {
+        /**
+         * No elevation (flat, no shadow). Animate between 0 and higher levels to highlight elements.
+         *
+         * Animate elevation changes from level 0 to a higher level when an element is highlighted to indicate emphasis and interactivity.
+         */
+        readonly "0": KdsShadow;
+        /**
+         * Low elevation shadow for slightly raised elements (e.g. cards, tiles).
+         *
+         * For containers that slightly stand out from the background but are not interactive by default. The elements that are placed inside this are extending the current surrounded context and group them inside the container.
+         *
+         * Examples are: Cards, tiles, arrays.
+         *
+         * If you use the elevation level 1 on a container, you have to change the surface to be one level higher.
+         *
+         */
+        readonly "1": KdsShadow;
+        /**
+         * High elevation shadow for elements floating above content (e.g. tooltips, toasts).
+         *
+         * Used for elements that float above content and who are sitting on top of the ui; but don’t obscure the full context.
+         *
+         * Examples are: tooltips, menus or toasts.
+         *
+         * If you use the elevation level 3, you have to reset the surface level to page.
+         */
+        readonly "3": KdsShadow;
+    };
+};
+export declare const elevation: KdsElevationTokens;

package/dist/tokens/ts/elevation.js

@@ -0,0 +1,102 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+export const elevation = {
+    level: {
+        "0": {
+            layers: [
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 0, unit: "px" },
+                    blur: { value: 0, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 210, s: 0, l: 72.5, alpha: 0.32 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.9 },
+                    },
+                },
+            ],
+            css: {
+                value: "0 0 0 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
+                variable: "var(--kds-elevation-level-0)",
+            },
+        },
+        "1": {
+            layers: [
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 1, unit: "px" },
+                    blur: { value: 1, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 210, s: 0, l: 72.5, alpha: 0.32 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.9 },
+                    },
+                },
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 0, unit: "px" },
+                    blur: { value: 1, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 180, s: 0, l: 32.2, alpha: 0.14 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.94 },
+                    },
+                },
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 0, unit: "px" },
+                    blur: { value: 8, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 180, s: 0, l: 32.2, alpha: 0.12 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.98 },
+                    },
+                },
+            ],
+            css: {
+                value: "0 1px 1px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
+                variable: "var(--kds-elevation-level-1)",
+            },
+        },
+        "3": {
+            layers: [
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 2, unit: "px" },
+                    blur: { value: 4, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 210, s: 0, l: 72.5, alpha: 0.32 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.9 },
+                    },
+                },
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 4, unit: "px" },
+                    blur: { value: 8, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 180, s: 0, l: 32.2, alpha: 0.14 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.94 },
+                    },
+                },
+                {
+                    offsetX: { value: 0, unit: "px" },
+                    offsetY: { value: 0, unit: "px" },
+                    blur: { value: 20, unit: "px" },
+                    spread: { value: 0, unit: "px" },
+                    color: {
+                        light: { h: 180, s: 0, l: 32.2, alpha: 0.12 },
+                        dark: { h: 330, s: 0, l: 10.2, alpha: 0.98 },
+                    },
+                },
+            ],
+            css: {
+                value: "0 2px 4px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
+                variable: "var(--kds-elevation-level-3)",
+            },
+        },
+    },
+};