/** * 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; }; 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 chart: { readonly data: { /** * Categorical series 1 — Okabe–Ito bluish green, brand anchor. Contrast ≥3:1 on chart-surface. */ readonly "series-1": KdsColor; /** * Categorical series 2 — Okabe–Ito sky blue. Contrast ≥3:1 on chart-surface. */ readonly "series-2": KdsColor; /** * Categorical series 3 — Okabe–Ito vermillion. Contrast ≥3:1 on chart-surface. */ readonly "series-3": KdsColor; /** * Categorical series 4 — Okabe–Ito black, separator between vivid hues. Contrast ≥3:1 on chart-surface. */ readonly "series-4": KdsColor; /** * Categorical series 5 — Okabe–Ito amber as tan. Contrast ≥3:1 on chart-surface. */ readonly "series-5": KdsColor; /** * Categorical series 6 — Okabe–Ito blue. Contrast ≥3:1 on chart-surface. */ readonly "series-6": KdsColor; /** * Categorical series 7 — Okabe–Ito yellow as yellow-leaning green. Contrast ≥3:1 on chart-surface. */ readonly "series-7": KdsColor; /** * Categorical series 8 — Okabe–Ito reddish purple. Contrast ≥3:1 on chart-surface. */ readonly "series-8": KdsColor; /** * Categorical series 9 — Okabe–Ito cyan, extension. Contrast ≥3:1 on chart-surface. */ readonly "series-9": KdsColor; /** * Remaining / empty / context fill behind highlighted data (was background-static.chart-0, values unchanged). */ readonly track: KdsColor; }; readonly status: { /** * Directional up / gain. Same family as text-and-icon.success, fill weight class. */ readonly positive: KdsColor; /** * Directional down / loss. Deliberately offset from chart.error so a falling value doesn't read as a breach. */ readonly negative: KdsColor; /** * Approaching-limit line, marker, label on data. Pure alias. */ readonly warning: KdsColor; /** * Breach bracket, dot, overage figure on data. Pure alias. */ readonly error: KdsColor; }; readonly scaffolding: { /** * Axis lines, ticks, axis pointer, mark lines. Pure alias. */ readonly axis: KdsColor; /** * Gridlines, gauge track. Pure alias. */ readonly grid: KdsColor; /** * Item borders (scatter, boxplot, graph). Pure alias. */ readonly border: KdsColor; /** * Separator stroke between touching segments (pie, donut, stacked bar, nightingale, theme river). Alias to border.transparent to disable. Width: dimension.chart.segment-gap. */ readonly segment: KdsColor; /** * Chart background and contrast reference for the series ramp. Pure alias. */ readonly surface: KdsColor; /** * Tooltip background. Pure alias — overlay is the designated content-overlay color. */ readonly "tooltip-surface": KdsColor; }; readonly control: { /** * Chart control at rest — toolbox icon stroke, dataZoom handle, timeline control. Pure alias. */ readonly default: KdsColor; /** * Chart control on hover / emphasis, legend pager. Pure alias. */ readonly hover: KdsColor; /** * Active toolbox feature (magic type, brush, data view). Pure alias. */ readonly selected: KdsColor; /** * Inactive control — legend pager at range end. Pure alias. */ readonly disabled: KdsColor; }; readonly text: { /** * Chart title. Pure alias. */ readonly title: KdsColor; /** * Chart subtitle. Pure alias. */ readonly subtitle: KdsColor; /** * Axis name. Pure alias. */ readonly "axis-name": KdsColor; /** * Axis tick labels. Pure alias. */ readonly "axis-label": KdsColor; /** * Legend labels. Pure alias. */ readonly legend: KdsColor; /** * Tooltip text. Direct core: the overlay surface stays dark in BOTH modes (neutral.725 light / neutral.475 dark), so tooltip text must be light in both — neutral-inverted would flip the wrong way in the dark set. */ readonly tooltip: KdsColor; /** * Data labels rendered on the chart surface. Pure alias. */ readonly label: KdsColor; /** * Dark ink for labels on light fills. Mode-independent; renderer picks per segment whichever on-fill ink has higher contrast on the resolved fill. */ readonly "on-fill-dark": KdsColor; /** * Light ink for labels on dark fills. Mode-independent counterpart of on-fill-dark. */ readonly "on-fill-light": 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 widget: 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; /** * Specific color for Connectors that are selected. */ readonly selected: KdsColor; /** * Specific color for highlighted in and outgoing Connectors of a selected node. */ readonly highlighted: KdsColor; /** * Specific color for Connector below a dragged node to indicate possible insert. */ readonly insertable: 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;