@knime/kds-styles 2.2.0 → 2.4.0

package/dist/tokens/ts/color.d.ts

@@ -0,0 +1,880 @@
+/**
+ * Do not edit directly, this file was auto-generated
+ * from the design token sources in src/tokens.
+ */
+import type { KdsColor } from "./types.js";
+export type KdsColorTokens = {
+    readonly surface: {
+        /**
+         * Main surface background, one layer above page. Serves as the primary container surface color.
+         */
+        readonly default: KdsColor;
+        /**
+         * Muted background, one layer above surface-default. Used for secondary sections or nested containers on main surface.
+         */
+        readonly muted: KdsColor;
+        /**
+         * Topmost background, one layer above surface-muted.
+         */
+        readonly subtle: KdsColor;
+    };
+    readonly page: {
+        /**
+         * The base background for the entire app, on which all other surfaces sit. The darkest background color in the light theme.
+         */
+        readonly default: KdsColor;
+    };
+    readonly background: {
+        readonly neutral: {
+            /**
+             * Transparent background for clickable or neutral elements.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Subtle neutral overlay on hover for clickable elements.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Stronger neutral overlay for active (pressed) state feedback.
+             */
+            readonly active: KdsColor;
+        };
+        readonly "neutral-bold": {
+            /**
+             * More prominent background for clickable or neutral elements.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker background on hover for more prominent clickable or neutral elements.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest background on pressed for more prominent clickable or neutral elements.
+             */
+            readonly active: KdsColor;
+        };
+        readonly primary: {
+            /**
+             * Light-teal background for primary actions or highlights.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker teal background on hover for primary actions.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest teal background on pressed for primary actions.
+             */
+            readonly active: KdsColor;
+        };
+        readonly "primary-bold": {
+            /**
+             * Deep Teal background for most prominent, primary actions or highlights.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker teal background on hover for most prominent, primary actions or highlights.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest teal background on pressed for most prominent, primary actions or highlights.
+             */
+            readonly active: KdsColor;
+        };
+        readonly selected: {
+            /**
+             * Light-teal highlight for selectable elements.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker teal on hover for backgrounds in selectable elements.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest teal on pressed for backgrounds in selectable elements.
+             */
+            readonly active: KdsColor;
+        };
+        readonly "selected-bold": {
+            /**
+             * Mid-teal background for most prominent, selectable elements.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker mid-teal background on hover for most prominent, selectable elements.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest mid-teal background on pressed for most prominent, selectable elements.
+             */
+            readonly active: KdsColor;
+        };
+        readonly danger: {
+            /**
+             * Very light red background for error or destructive states.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker red background on hover for error or destructive states.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest red background on pressed for error or destructive states.
+             */
+            readonly active: KdsColor;
+        };
+        readonly "danger-bold": {
+            /**
+             * More prominent red background for most prominent, error or destructive states.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker red background on hover for most prominent, error callouts or destructive buttons.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darker red background on pressed for most prominent, error callouts or destructive buttons.
+             */
+            readonly active: KdsColor;
+        };
+        readonly input: {
+            /**
+             * Neutral background for input elements.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker neutral background on hover for input elements.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darkest neutral background on pressed for input elements.
+             */
+            readonly active: KdsColor;
+        };
+        readonly disabled: {
+            /**
+             * Neutral overlay for component backgrounds in the disabled state.
+             */
+            readonly default: KdsColor;
+            /**
+             * Disabled background for primary backgrounds.
+             */
+            readonly primary: KdsColor;
+            /**
+             * Disabled background for bold danger backgrounds.
+             */
+            readonly danger: KdsColor;
+        };
+        readonly "success-bold": {
+            /**
+             * More prominent green background for most prominent, success states.
+             */
+            readonly initial: KdsColor;
+        };
+        readonly "info-bold": {
+            /**
+             * More prominent blue background for most prominent info actions in the table or workflow canvas.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Darker blue background on hover for most prominent info actions in the table or workflow canvas.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Darker blue background on pressed for most prominent info actions in the table or workflow canvas.
+             */
+            readonly active: KdsColor;
+        };
+    };
+    readonly "background-static": {
+        /**
+         * Blue background for informational messages.
+         */
+        readonly info: KdsColor;
+        /**
+         * Lighter blue background for muted informational messages.
+         */
+        readonly "info-muted": KdsColor;
+        /**
+         * Light orange background for warning states.
+         */
+        readonly warning: KdsColor;
+        /**
+         * Lighter orange background for muted warning states.
+         */
+        readonly "warning-muted": KdsColor;
+        /**
+         * Light red background for error or destructive states.
+         */
+        readonly danger: KdsColor;
+        /**
+         * Lighter red background for muted error or destructive states.
+         */
+        readonly "danger-muted": KdsColor;
+        /**
+         * Light green background for success states.
+         */
+        readonly success: KdsColor;
+        /**
+         * Lighter green background for muted success states.
+         */
+        readonly "success-muted": KdsColor;
+        /**
+         * Vibrant brand yellow background for branding elements.
+         */
+        readonly brand: KdsColor;
+        /**
+         * Background color for content overlay, like tooltip.
+         */
+        readonly overlay: KdsColor;
+        /**
+         * Color used for charts (Track color, Empty Value).
+         */
+        readonly "chart-0": KdsColor;
+        /**
+         * Color used for donut charts (Current Value).
+         */
+        readonly "chart-1": KdsColor;
+        /**
+         * Color used for donut charts (Added Value).
+         */
+        readonly "chart-2": KdsColor;
+    };
+    readonly "text-and-icon": {
+        /**
+         * Text and icon color for primary content on light surfaces.
+         */
+        readonly neutral: KdsColor;
+        /**
+         * Muted text and icon color for secondary content on light surfaces.
+         */
+        readonly muted: KdsColor;
+        /**
+         * Subtle text and icon color for e.g. helper text inside input fields.
+         */
+        readonly subtle: KdsColor;
+        /**
+         * Text and icon color for primary content on dark surfaces.
+         */
+        readonly "neutral-inverted": KdsColor;
+        /**
+         * Teal accent color for text and icons on light surfaces.
+         */
+        readonly primary: KdsColor;
+        /**
+         * Light teal color for text and icons on dark surfaces.
+         */
+        readonly "primary-inverted": KdsColor;
+        /**
+         * Teal color for selected text and icons on light surfaces.
+         */
+        readonly selected: KdsColor;
+        /**
+         * Very light teal color for selected text and icons on dark surfaces.
+         */
+        readonly "selected-inverted": KdsColor;
+        /**
+         * Orange color for warning text and icons on light surfaces.
+         */
+        readonly warning: KdsColor;
+        /**
+         * Light orange color for warning text and icons on dark surfaces.
+         */
+        readonly "warning-inverted": KdsColor;
+        /**
+         * Red color for danger text and icons on light surfaces.
+         */
+        readonly danger: KdsColor;
+        /**
+         * Light red color for danger text and icons on dark surfaces.
+         */
+        readonly "danger-inverted": KdsColor;
+        /**
+         * Green color for success text and icons on light surfaces.
+         */
+        readonly success: KdsColor;
+        /**
+         * Light green color for success text and icons on dark surfaces.
+         */
+        readonly "success-inverted": KdsColor;
+        /**
+         * Dimmed neutral color for text and icons in the disabled state.
+         */
+        readonly disabled: KdsColor;
+        /**
+         * Color for text and icons in the disabled state on primary-disabled backgrounds.
+         */
+        readonly "disabled-inverted": KdsColor;
+        /**
+         * Blue color for informational text and icons on light surfaces.
+         */
+        readonly info: KdsColor;
+        /**
+         * Text and icon color for editor content.
+         */
+        readonly editor: KdsColor;
+    };
+    readonly border: {
+        /**
+         * Neutral border for components. [Used as reference token only for the Border composite tokens]
+         */
+        readonly neutral: KdsColor;
+        /**
+         * Muted neutral border for less emphasis. [Used as reference token only for the Border composite tokens]
+         */
+        readonly muted: KdsColor;
+        /**
+         * Subtle neutral border for faint components. [Used as reference token only for the Border composite tokens]
+         */
+        readonly subtle: KdsColor;
+        /**
+         * Dark teal border accent for most prominent emphasis. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "primary-bold": KdsColor;
+        /**
+         * Light teal border accent for emphasis. [Used as reference token only for the Border composite tokens]
+         */
+        readonly primary: KdsColor;
+        /**
+         * Teal border indicating the selected state (most prominent). [Used as reference token only for the Border composite tokens]
+         */
+        readonly "selected-bold": KdsColor;
+        /**
+         * Faint teal border indicating the selected state. [Used as reference token only for the Border composite tokens]
+         */
+        readonly selected: KdsColor;
+        /**
+         * Accent border indicating the accented selected state. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "selected-accent": KdsColor;
+        /**
+         * Orange border for most prominent warnings. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "warning-bold": KdsColor;
+        /**
+         * Orange border for warnings. [Used as reference token only for the Border composite tokens]
+         */
+        readonly warning: KdsColor;
+        /**
+         * Red border for most prominent error elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "danger-bold": KdsColor;
+        /**
+         * Red border for error elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly danger: KdsColor;
+        /**
+         * Green border for most prominent success elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "success-bold": KdsColor;
+        /**
+         * Green border for success elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly success: KdsColor;
+        /**
+         * Blue border for most prominent info elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly "info-bold": KdsColor;
+        /**
+         * Blue border for info elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly info: KdsColor;
+        /**
+         * Fully transparent border for components with invisible borders. [Used as reference token only for the Border composite tokens]
+         */
+        readonly transparent: KdsColor;
+        /**
+         * Neutral border for components in the disabled state. [Used as reference token only for the Border composite tokens]
+         */
+        readonly disabled: KdsColor;
+        /**
+         * Yellow border accent for brand highlights. [Used as reference token only for the Border composite tokens]
+         */
+        readonly brand: KdsColor;
+        /**
+         * Neutral border for ResizeHandler. [Used as reference token only for the ResizeHandler composite tokens]
+         */
+        readonly "neutral-bold-initial": KdsColor;
+        /**
+         * Neutral border for ResizeHandler on hover. [Used as reference token only for the ResizeHandler composite tokens]
+         */
+        readonly "neutral-bold-hover": KdsColor;
+        /**
+         * Neutral border for ResizeHandler on active. [Used as reference token only for the ResizeHandler composite tokens]
+         */
+        readonly "neutral-bold-active": KdsColor;
+    };
+    readonly focus: {
+        /**
+         * Blue outline highlight for focused elements. [Used as reference token only for the Border composite tokens]
+         */
+        readonly outline: KdsColor;
+        /**
+         * Blue background highlight for focused elements. [Used with elements that are using 1px Border focus color through Border composite tokens]
+         */
+        readonly background: KdsColor;
+    };
+    readonly blanket: {
+        /**
+         * Dimmed overlay background for modals and dialogs.
+         */
+        readonly default: KdsColor;
+    };
+    readonly "nodes-and-variables": {
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly "flow-variable": KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly loop: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly manipulator: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly predictor: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly source: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly visualizer: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly scope: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly learner: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly sink: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly container: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly unknown: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly other: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly metanode: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly metanodeBorder: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly component: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly specialState: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly forbiddenBorder: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly forbidden: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly warningBorder: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly warning: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly errorBorder: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly error: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly loadingBorder: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly loading: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly configuration: KdsColor;
+        /**
+         * Specific color for Nodes and Variables.
+         */
+        readonly quickform: KdsColor;
+    };
+    readonly port: {
+        /**
+         * Specific color for Ports.
+         */
+        readonly data: KdsColor;
+        /**
+         * Specific color for Ports.
+         */
+        readonly "flow-variable": KdsColor;
+        /**
+         * Specific color for Ports.
+         */
+        readonly "neutral-inverted": KdsColor;
+    };
+    readonly annotations: {
+        /**
+         * Specific color for Annotations.
+         */
+        readonly specialNodes: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly specialNodesBold: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly visualizer: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly loadingBold: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly manipulator: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly source: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly sink: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly learner: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly predictor: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly container: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly "flow-variable": KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly tealDark: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly other: KdsColor;
+        /**
+         * Specific color for Annotations.
+         */
+        readonly loop: KdsColor;
+    };
+    readonly state: {
+        /**
+         * State-based color for Nodes.
+         */
+        readonly error: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly "error-border": KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly warning: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly "warning-border": KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly success: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly "success-border": KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly loading: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly inactive: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly "inactive-border": KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly disabled: KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly "disabled-border": KdsColor;
+        /**
+         * State-based color for Nodes.
+         */
+        readonly background: KdsColor;
+    };
+    readonly connector: {
+        /**
+         * Specific color for Connectors.
+         */
+        readonly data: KdsColor;
+        /**
+         * Specific color for Connectors.
+         */
+        readonly "flow-variable": KdsColor;
+    };
+    readonly elevation: {
+        /**
+         * Light shadow layer color for the top elevation.
+         */
+        readonly top: KdsColor;
+        /**
+         * Medium shadow layer color for mid-level elevation.
+         */
+        readonly middle: KdsColor;
+        /**
+         * Dark shadow layer color for bottom elevation.
+         */
+        readonly bottom: KdsColor;
+        /**
+         * Dark shadow layer color for knob elevation. Used in ToggleSwitch.
+         */
+        readonly knob: KdsColor;
+    };
+    readonly DesktopHeader: {
+        readonly background: {
+            /**
+             * Default background color for the DesktopHeader component.
+             */
+            readonly default: KdsColor;
+            /**
+             * Muted background color for the DesktopHeader component.
+             */
+            readonly muted: KdsColor;
+            /**
+             * Accent background color for the DesktopHeader component.
+             */
+            readonly accent: KdsColor;
+        };
+        readonly "text-and-icon": {
+            /**
+             * Neutral text and icon color for the DesktopHeader component.
+             */
+            readonly neutral: KdsColor;
+            /**
+             * Muted text and icon color for the DesktopHeader component.
+             */
+            readonly muted: KdsColor;
+        };
+        readonly border: {
+            /**
+             * Default border color for the DesktopHeader component.
+             */
+            readonly default: KdsColor;
+        };
+    };
+    readonly TableHeader: {
+        readonly background: {
+            /**
+             * Default background color for the TableHeader component.
+             */
+            readonly default: KdsColor;
+        };
+    };
+    readonly ToggleSwitch: {
+        readonly knob: {
+            /**
+             * Initial knob color for the ToggleSwitch component.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Disabled knob color for the ToggleSwitch component.
+             */
+            readonly disabled: KdsColor;
+        };
+        readonly icon: {
+            /**
+             * Icon color when the ToggleSwitch is on.
+             */
+            readonly on: KdsColor;
+            /**
+             * Icon color when the ToggleSwitch is off.
+             */
+            readonly off: KdsColor;
+            /**
+             * Icon color when the ToggleSwitch is disabled.
+             */
+            readonly disabled: KdsColor;
+        };
+    };
+    readonly LoadingSpinner: {
+        readonly progress: {
+            /**
+             * Progress indicator color for LoadingSpinner on primary backgrounds.
+             */
+            readonly onPrimary: KdsColor;
+            /**
+             * Progress indicator color for LoadingSpinner on surface backgrounds.
+             */
+            readonly onSurface: KdsColor;
+        };
+        readonly track: {
+            /**
+             * Track color for LoadingSpinner on primary backgrounds.
+             */
+            readonly onPrimary: KdsColor;
+            /**
+             * Track color for LoadingSpinner on surface backgrounds.
+             */
+            readonly onSurface: KdsColor;
+        };
+    };
+    readonly Tooltip: {
+        readonly background: {
+            /**
+             * Default background color for the Tooltip component.
+             */
+            readonly default: KdsColor;
+        };
+        readonly "text-and-icon": {
+            /**
+             * Neutral text and icon color for the Tooltip component.
+             */
+            readonly neutral: KdsColor;
+        };
+    };
+    readonly TextHighlight: {
+        readonly background: {
+            /**
+             * Text background color for mark text or highlighting searchterms
+             */
+            readonly default: KdsColor;
+        };
+    };
+    readonly Avatar: {
+        readonly background: {
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly red: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly orange: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly yellow: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly green: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly teal: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly blue: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly purple: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly aquamarine: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly grassgreen: KdsColor;
+            /**
+             * Themed background color for the Avatar component.
+             */
+            readonly brown: KdsColor;
+            /**
+             * Empty background color for the Avatar component.
+             */
+            readonly empty: KdsColor;
+        };
+        readonly "text-and-icon": {
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly red: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly orange: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly yellow: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly green: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly teal: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly blue: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly purple: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly aquamarine: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly grassgreen: KdsColor;
+            /**
+             * Themed text and icon color for the Avatar component.
+             */
+            readonly brown: KdsColor;
+        };
+    };
+};
+export declare const color: KdsColorTokens;