@mirohq/design-system-themes 1.3.4 → 1.3.5

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import { Colors } from '@mirohq/design-tokens';
 /**
  * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
  */
-type AliasColors = 'background-alpha' | 'background-alpha-active' | 'background-alpha-hover' | 'background-alpha-neutrals-overlay' | 'background-alpha-neutrals-overlay-subtle' | 'background-alpha-subtle' | 'background-canvas' | 'background-disabled' | 'background-elevated' | 'background-inverted' | 'background-inverted-secondary' | 'background-layout' | 'background-overlay' | 'background-static-dark' | 'background-static-dark-subtle' | 'background-static-light' | 'background-surface' | 'background-surface-secondary' | 'background-transparent' | 'background-danger-prominent' | 'background-danger-prominent-active' | 'background-danger-prominent-hover' | 'background-danger-prominent-pressed' | 'background-danger-subtle' | 'background-danger-subtle-active' | 'background-danger-subtle-hover' | 'background-danger-subtle-pressed' | 'background-interactive-danger' | 'background-interactive-danger-hover' | 'background-interactive-danger-pressed' | 'background-interactive-primary' | 'background-interactive-primary-hover' | 'background-interactive-primary-pressed' | 'background-interactive-selected' | 'background-interactive-surface-hover' | 'background-interactive-surface-secondary-hover' | 'background-neutrals' | 'background-neutrals-active' | 'background-neutrals-container' | 'background-neutrals-control' | 'background-neutrals-control-hover' | 'background-neutrals-control-pressed' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inactive' | 'background-neutrals-inactive-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-layout' | 'background-neutrals-page' | 'background-neutrals-page-subtle' | 'background-neutrals-pressed' | 'background-neutrals-scrollbar' | 'background-neutrals-scrollbar-active' | 'background-neutrals-scrollbar-hover' | 'background-neutrals-subtle' | 'background-neutrals-subtle-active' | 'background-neutrals-subtle-hover' | 'background-neutrals-subtle-pressed' | 'background-neutrals-transparent' | 'background-primary-prominent' | 'background-primary-prominent-active' | 'background-primary-prominent-hover' | 'background-primary-prominent-pressed' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-active' | 'background-primary-subtle-hover' | 'background-primary-subtle-pressed' | 'background-primary-subtle-selected' | 'status-background-error' | 'status-background-info' | 'status-background-success' | 'status-background-warning' | 'background-success-prominent' | 'background-success-prominent-active' | 'background-success-prominent-hover' | 'background-success-prominent-pressed' | 'background-success-subtle' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-default' | 'border-disabled' | 'border-inverted' | 'border-inverted-subtle' | 'border-static-dark' | 'border-static-dark-subtle' | 'border-strong' | 'border-subtle' | 'border-transparent' | 'border-danger' | 'border-danger-active' | 'border-danger-hover' | 'border-danger-pressed' | 'border-danger-subtle' | 'border-focus-error-inner' | 'border-focus-error-middle' | 'border-focus-error-outer' | 'border-focus-inner' | 'border-focus-middle' | 'border-focus-outer' | 'border-focus-success-inner' | 'border-focus-success-middle' | 'border-focus-success-outer' | 'focus-keyboard' | 'border-interactive-danger' | 'border-interactive-danger-hover' | 'border-interactive-danger-pressed' | 'border-interactive-primary' | 'border-interactive-primary-hover' | 'border-interactive-primary-pressed' | 'border-interactive-secondary' | 'border-interactive-secondary-hover' | 'border-interactive-secondary-pressed' | 'border-interactive-selected' | 'border-neutrals' | 'border-neutrals-active' | 'border-neutrals-controls' | 'border-neutrals-controls-disabled' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-pressed' | 'border-neutrals-subtle' | 'border-neutrals-subtle-hover' | 'border-neutrals-subtle-pressed' | 'border-neutrals-text' | 'border-neutrals-text-active' | 'border-neutrals-text-hover' | 'border-neutrals-text-subtle' | 'border-neutrals-text-subtle-active' | 'border-neutrals-text-subtle-hover' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-primary-subtle' | 'status-border-error' | 'status-border-info' | 'status-border-success' | 'status-border-warning' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-success-pressed' | 'border-success-subtle' | 'border-warning' | 'border-warning-subtle' | 'button-background-danger' | 'button-background-danger-hover' | 'button-background-danger-pressed' | 'button-background-ghost' | 'button-background-ghost-hover' | 'button-background-ghost-pressed' | 'button-background-primary' | 'button-background-primary-hover' | 'button-background-primary-pressed' | 'button-background-secondary' | 'button-background-secondary-hover' | 'button-background-secondary-pressed' | 'button-background-tertiary' | 'button-background-tertiary-hover' | 'button-background-tertiary-pressed' | 'button-border-danger' | 'button-border-danger-hover' | 'button-border-danger-pressed' | 'button-border-ghost-hover' | 'button-border-ghost-pressed' | 'button-border-primary' | 'button-border-primary-hover' | 'button-border-primary-pressed' | 'button-border-secondary' | 'button-border-secondary-hover' | 'button-border-secondary-pressed' | 'button-border-tertiary' | 'button-border-tertiary-hover' | 'button-border-tertiary-pressed' | 'button-icon-on-danger' | 'button-icon-on-primary' | 'button-icon-on-secondary' | 'button-icon-on-tertiary' | 'button-text-on-danger' | 'button-text-on-primary' | 'button-text-on-secondary' | 'button-text-on-tertiary' | 'chip-background' | 'chip-background-hover' | 'chip-text' | 'format-icon-diagram' | 'format-icon-docs' | 'format-icon-external' | 'format-icon-kanban' | 'format-icon-prototype' | 'format-icon-slides' | 'format-icon-table' | 'format-icon-timeline' | 'input-background-active' | 'input-background-alt-active' | 'input-background-alt-default' | 'input-background-alt-hover' | 'input-background-default' | 'input-background-disabled' | 'input-background-hover' | 'input-border-active' | 'input-border-default' | 'input-border-disabled' | 'input-border-error' | 'input-border-hover' | 'input-border-selection-control' | 'input-border-success' | 'notification-background' | 'notification-border' | 'notification-border-subtle' | 'popover-background' | 'popover-border' | 'scrollbar-background' | 'scrollbar-background-hover' | 'slider-background' | 'slider-notch-background' | 'switch-background-default' | 'switch-background-hover' | 'switch-control-background' | 'tooltip-background' | 'tooltip-background-inset' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | 'icon-default' | 'icon-disabled' | 'icon-inverted' | 'icon-inverted-secondary' | 'icon-muted' | 'icon-on-disabled' | 'icon-on-static-dark' | 'icon-on-static-dark-subtle' | 'icon-placeholder' | 'icon-secondary' | 'icon-interactive-selected' | 'icon-link' | 'icon-link-hover' | 'icon-link-on-inverted' | 'icon-link-on-inverted-hover' | 'icon-link-on-inverted-pressed' | 'icon-link-on-inverted-secondary' | 'icon-link-on-inverted-secondary-hover' | 'icon-link-on-inverted-secondary-pressed' | 'icon-link-pressed' | 'icon-link-secondary' | 'icon-link-secondary-hover' | 'icon-link-secondary-pressed' | 'icon-on-interactive-danger' | 'icon-on-interactive-primary' | 'icon-on-interactive-secondary' | 'icon-on-interactive-selected' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-hover' | 'icon-neutrals-inactive' | 'icon-neutrals-inactive-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-inverted-hover' | 'icon-neutrals-inverted-subtle' | 'icon-neutrals-inverted-subtle-hover' | 'icon-neutrals-placeholder' | 'icon-neutrals-pressed' | 'icon-neutrals-search' | 'icon-neutrals-subtle' | 'icon-neutrals-subtle-hover' | 'icon-neutrals-subtle-pressed' | 'icon-neutrals-text' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | 'status-icon-error' | 'status-icon-on-error' | 'status-icon-on-info' | 'status-icon-on-success' | 'status-icon-on-warning' | 'status-icon-success' | 'status-icon-warning' | 'icon-success' | 'icon-success-active' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-success-pressed' | 'icon-warning' | 'icon-warning-prominent' | 'icon-warning-subtle' | 'text-danger' | 'text-danger-active' | 'text-danger-hover' | 'text-danger-inverted' | 'text-danger-pressed' | 'text-interactive-selected' | 'text-link' | 'text-link-hover' | 'text-link-on-inverted' | 'text-link-on-inverted-hover' | 'text-link-on-inverted-pressed' | 'text-link-on-inverted-secondary' | 'text-link-on-inverted-secondary-hover' | 'text-link-on-inverted-secondary-pressed' | 'text-link-pressed' | 'text-link-secondary' | 'text-link-secondary-hover' | 'text-link-secondary-pressed' | 'text-on-interactive-danger' | 'text-on-interactive-primary' | 'text-on-interactive-secondary' | 'text-on-interactive-selected' | 'text-neutrals' | 'text-neutrals-active' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-inverted-hover' | 'text-neutrals-inverted-subtle' | 'text-neutrals-inverted-subtle-hover' | 'text-neutrals-placeholder' | 'text-neutrals-placeholder-only' | 'text-neutrals-pressed' | 'text-neutrals-subtle' | 'text-neutrals-subtle-active' | 'text-neutrals-subtle-hover' | 'text-neutrals-subtle-pressed' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'status-text-error' | 'status-text-on-error' | 'status-text-on-info' | 'status-text-on-success' | 'status-text-on-warning' | 'status-text-success' | 'status-text-warning' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | 'text-default' | 'text-disabled' | 'text-inverted' | 'text-inverted-secondary' | 'text-muted' | 'text-on-disabled' | 'text-on-static-dark' | 'text-on-static-dark-subtle' | 'text-placeholder' | 'text-secondary' | 'text-warning' | 'text-warning-subtle' | 'coal-background' | 'coal-background-mild' | 'coal-background-prominent' | 'coal-background-subtle' | 'coral-background' | 'coral-background-mild' | 'coral-background-prominent' | 'coral-background-subtle' | 'cyan-background' | 'cyan-background-mild' | 'cyan-background-prominent' | 'cyan-background-subtle' | 'lilac-background' | 'lilac-background-mild' | 'lilac-background-prominent' | 'lilac-background-subtle' | 'lime-background' | 'lime-background-mild' | 'lime-background-prominent' | 'lime-background-subtle' | 'moss-background' | 'moss-background-mild' | 'moss-background-prominent' | 'moss-background-subtle' | 'ocean-background' | 'ocean-background-mild' | 'ocean-background-prominent' | 'ocean-background-subtle' | 'orange-background' | 'orange-background-mild' | 'orange-background-prominent' | 'orange-background-subtle' | 'pink-background' | 'pink-background-mild' | 'pink-background-prominent' | 'pink-background-subtle' | 'sunshine-background' | 'sunshine-background-mild' | 'sunshine-background-prominent' | 'sunshine-background-subtle' | 'teal-background' | 'teal-background-mild' | 'teal-background-prominent' | 'teal-background-subtle' | 'coal-border' | 'coal-border-prominent' | 'coal-border-subtle' | 'coral-border' | 'coral-border-prominent' | 'coral-border-subtle' | 'cyan-border' | 'cyan-border-prominent' | 'cyan-border-subtle' | 'lilac-border' | 'lilac-border-prominent' | 'lilac-border-subtle' | 'lime-border' | 'lime-border-prominent' | 'lime-border-subtle' | 'moss-border' | 'moss-border-prominent' | 'moss-border-subtle' | 'ocean-border' | 'ocean-border-prominent' | 'ocean-border-subtle' | 'orange-border' | 'orange-border-prominent' | 'orange-border-subtle' | 'pink-border' | 'pink-border-prominent' | 'pink-border-subtle' | 'sunshine-border' | 'sunshine-border-prominent' | 'sunshine-border-subtle' | 'teal-border' | 'teal-border-prominent' | 'teal-border-subtle' | 'coal-avatar-background' | 'coral-avatar-background' | 'cyan-avatar-background' | 'light-coal-avatar-background' | 'light-coral-avatar-background' | 'light-cyan-avatar-background' | 'light-lilac-avatar-background' | 'light-lime-avatar-background' | 'light-moss-avatar-background' | 'light-ocean-avatar-background' | 'light-orange-avatar-background' | 'light-pink-avatar-background' | 'light-sunshine-avatar-background' | 'light-teal-avatar-background' | 'lilac-avatar-background' | 'lime-avatar-background' | 'moss-avatar-background' | 'ocean-avatar-background' | 'orange-avatar-background' | 'pink-avatar-background' | 'sunshine-avatar-background' | 'teal-avatar-background' | 'coral-comment-background' | 'cyan-comment-background' | 'lime-comment-background' | 'coal-cursor-background' | 'coal-cursor-border' | 'coal-cursor-border-prominent' | 'coral-cursor-background' | 'coral-cursor-border' | 'coral-cursor-border-prominent' | 'cyan-cursor-background' | 'cyan-cursor-border' | 'cyan-cursor-border-prominent' | 'light-coal-cursor-background' | 'light-coral-cursor-background' | 'light-cursor-background' | 'light-cyan-cursor-background' | 'light-lilac-cursor-background' | 'light-lime-cursor-background' | 'light-moss-cursor-background' | 'light-orange-cursor-background' | 'light-pink-cursor-background' | 'light-sunshine-cursor-background' | 'light-teal-cursor-background' | 'lilac-cursor-background' | 'lilac-cursor-border' | 'lilac-cursor-border-prominent' | 'lime-cursor-background' | 'lime-cursor-border' | 'lime-cursor-border-prominent' | 'moss-cursor-background' | 'moss-cursor-border' | 'moss-cursor-border-prominent' | 'ocean-cursor-background' | 'ocean-cursor-border' | 'ocean-cursor-border-prominent' | 'orange-cursor-background' | 'orange-cursor-border' | 'orange-cursor-border-prominent' | 'pink-cursor-background' | 'pink-cursor-border-prominent' | 'pink-cursor-coal-border' | 'sunshine-cursor-background' | 'sunshine-cursor-border' | 'susnhine-cursor-border-prominent' | 'teal-cursor-background' | 'teal-cursor-border' | 'teal-cursor-border-prominent' | 'black-sticky-background' | 'coral-sticky-background' | 'cyan-sticky-background' | 'light-coal-sticky-background' | 'light-lime-sticky-background' | 'light-ocean-sticky-background' | 'light-pink-sticky-background' | 'light-sunshine-sticky-background' | 'lilac-sticky-background' | 'lime-sticky-background' | 'moss-sticky-background' | 'ocean-sticky-background' | 'orange-sticky-background' | 'pink-sticky-background' | 'sunshine-sticky-background' | 'teal-sticky-background' | 'coal-icon' | 'coal-icon-mild' | 'coal-icon-subtle' | 'coral-icon' | 'coral-icon-mild' | 'coral-icon-subtle' | 'cyan-icon' | 'cyan-icon-mild' | 'cyan-icon-subtle' | 'lilac-icon' | 'lilac-icon-mild' | 'lilac-icon-subtle' | 'lime-icon' | 'lime-icon-mild' | 'lime-icon-subtle' | 'moss-icon' | 'moss-icon-mild' | 'moss-icon-subtle' | 'ocean-icon' | 'ocean-icon-mild' | 'ocean-icon-subtle' | 'orange-icon' | 'orange-icon-mild' | 'orange-icon-subtle' | 'pink-icon' | 'pink-icon-mild' | 'pink-icon-subtle' | 'sunshine-icon' | 'sunshine-icon-mild' | 'sunshine-icon-subtle' | 'teal-icon' | 'teal-icon-mild' | 'teal-icon-subtle' | 'coal-text' | 'coal-text-mild' | 'coal-text-subtle' | 'coral-text' | 'coral-text-mild' | 'coral-text-subtle' | 'cyan-text' | 'cyan-text-mild' | 'cyan-text-subtle' | 'lilac-text' | 'lilac-text-mild' | 'lilac-text-subtle' | 'lime-text' | 'lime-text-mild' | 'lime-text-subtle' | 'moss-text' | 'moss-text-mild' | 'moss-text-subtle' | 'ocean-text' | 'ocean-text-mild' | 'ocean-text-subtle' | 'orange-text' | 'orange-text-mild' | 'orange-text-subtle' | 'pink-text' | 'pink-text-mild' | 'pink-text-subtle' | 'sunshine-text' | 'sunshine-text-mild' | 'sunshine-text-subtle' | 'teal-text' | 'teal-text-mild' | 'teal-text-subtle';
+type AliasColors = 'background-alpha' | 'background-alpha-active' | 'background-alpha-hover' | 'background-alpha-neutrals-overlay' | 'background-alpha-neutrals-overlay-subtle' | 'background-alpha-subtle' | 'background-canvas' | 'background-disabled' | 'background-elevated' | 'background-inverted' | 'background-inverted-secondary' | 'background-layout' | 'background-overlay' | 'background-static-dark' | 'background-static-dark-subtle' | 'background-static-light' | 'background-surface' | 'background-surface-secondary' | 'background-transparent' | 'background-danger-prominent' | 'background-danger-prominent-active' | 'background-danger-prominent-hover' | 'background-danger-prominent-pressed' | 'background-danger-subtle' | 'background-danger-subtle-active' | 'background-danger-subtle-hover' | 'background-danger-subtle-pressed' | 'background-interactive-danger' | 'background-interactive-danger-hover' | 'background-interactive-danger-pressed' | 'background-interactive-primary' | 'background-interactive-primary-hover' | 'background-interactive-primary-pressed' | 'background-interactive-selected' | 'background-interactive-surface-hover' | 'background-interactive-surface-secondary-hover' | 'background-neutrals' | 'background-neutrals-active' | 'background-neutrals-container' | 'background-neutrals-control' | 'background-neutrals-control-hover' | 'background-neutrals-control-pressed' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inactive' | 'background-neutrals-inactive-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-layout' | 'background-neutrals-page' | 'background-neutrals-page-subtle' | 'background-neutrals-pressed' | 'background-neutrals-scrollbar' | 'background-neutrals-scrollbar-active' | 'background-neutrals-scrollbar-hover' | 'background-neutrals-subtle' | 'background-neutrals-subtle-active' | 'background-neutrals-subtle-hover' | 'background-neutrals-subtle-pressed' | 'background-neutrals-transparent' | 'background-primary-prominent' | 'background-primary-prominent-active' | 'background-primary-prominent-hover' | 'background-primary-prominent-pressed' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-active' | 'background-primary-subtle-hover' | 'background-primary-subtle-pressed' | 'background-primary-subtle-selected' | 'status-background-error' | 'status-background-info' | 'status-background-success' | 'status-background-warning' | 'background-success-prominent' | 'background-success-prominent-active' | 'background-success-prominent-hover' | 'background-success-prominent-pressed' | 'background-success-subtle' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-default' | 'border-disabled' | 'border-inverted' | 'border-inverted-subtle' | 'border-option' | 'border-option-hover' | 'border-static-dark' | 'border-static-dark-subtle' | 'border-strong' | 'border-subtle' | 'border-transparent' | 'border-danger' | 'border-danger-active' | 'border-danger-hover' | 'border-danger-pressed' | 'border-danger-subtle' | 'border-focus-error-inner' | 'border-focus-error-middle' | 'border-focus-error-outer' | 'border-focus-inner' | 'border-focus-middle' | 'border-focus-outer' | 'border-focus-success-inner' | 'border-focus-success-middle' | 'border-focus-success-outer' | 'focus-keyboard' | 'border-interactive-danger' | 'border-interactive-danger-hover' | 'border-interactive-danger-pressed' | 'border-interactive-primary' | 'border-interactive-primary-hover' | 'border-interactive-primary-pressed' | 'border-interactive-secondary' | 'border-interactive-secondary-hover' | 'border-interactive-secondary-pressed' | 'border-interactive-selected' | 'border-neutrals' | 'border-neutrals-active' | 'border-neutrals-controls' | 'border-neutrals-controls-disabled' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-pressed' | 'border-neutrals-subtle' | 'border-neutrals-subtle-hover' | 'border-neutrals-subtle-pressed' | 'border-neutrals-text' | 'border-neutrals-text-active' | 'border-neutrals-text-hover' | 'border-neutrals-text-subtle' | 'border-neutrals-text-subtle-active' | 'border-neutrals-text-subtle-hover' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-primary-subtle' | 'status-border-error' | 'status-border-info' | 'status-border-success' | 'status-border-warning' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-success-pressed' | 'border-success-subtle' | 'border-warning' | 'border-warning-subtle' | 'button-background-danger' | 'button-background-danger-hover' | 'button-background-danger-pressed' | 'button-background-ghost' | 'button-background-ghost-hover' | 'button-background-ghost-pressed' | 'button-background-primary' | 'button-background-primary-hover' | 'button-background-primary-pressed' | 'button-background-secondary' | 'button-background-secondary-hover' | 'button-background-secondary-pressed' | 'button-background-tertiary' | 'button-background-tertiary-hover' | 'button-background-tertiary-pressed' | 'button-border-danger' | 'button-border-danger-hover' | 'button-border-danger-pressed' | 'button-border-ghost-hover' | 'button-border-ghost-pressed' | 'button-border-primary' | 'button-border-primary-hover' | 'button-border-primary-pressed' | 'button-border-secondary' | 'button-border-secondary-hover' | 'button-border-secondary-pressed' | 'button-border-tertiary' | 'button-border-tertiary-hover' | 'button-border-tertiary-pressed' | 'button-icon-on-danger' | 'button-icon-on-primary' | 'button-icon-on-secondary' | 'button-icon-on-tertiary' | 'button-text-on-danger' | 'button-text-on-primary' | 'button-text-on-secondary' | 'button-text-on-tertiary' | 'chip-background' | 'chip-background-hover' | 'chip-text' | 'format-icon-diagram' | 'format-icon-docs' | 'format-icon-external' | 'format-icon-kanban' | 'format-icon-prototype' | 'format-icon-slides' | 'format-icon-table' | 'format-icon-timeline' | 'input-background-active' | 'input-background-alt-active' | 'input-background-alt-default' | 'input-background-alt-hover' | 'input-background-default' | 'input-background-disabled' | 'input-background-hover' | 'input-border-default' | 'input-border-disabled' | 'input-border-error' | 'input-border-focused' | 'input-border-hover' | 'input-border-success' | 'notification-background' | 'notification-border' | 'notification-border-subtle' | 'popover-background' | 'popover-border' | 'scrollbar-background' | 'scrollbar-background-hover' | 'slider-background' | 'slider-control-background' | 'slider-notch-background' | 'switch-background-default' | 'switch-background-hover' | 'switch-control-background' | 'tooltip-background' | 'tooltip-background-inset' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | 'icon-default' | 'icon-disabled' | 'icon-inverted' | 'icon-inverted-secondary' | 'icon-muted' | 'icon-on-disabled' | 'icon-on-static-dark' | 'icon-on-static-dark-subtle' | 'icon-placeholder' | 'icon-secondary' | 'icon-interactive-on-inverted' | 'icon-interactive-on-inverted-hover' | 'icon-interactive-on-inverted-pressed' | 'icon-interactive-on-inverted-secondary' | 'icon-interactive-on-inverted-secondary-hover' | 'icon-interactive-on-inverted-secondary-pressed' | 'icon-interactive-primary' | 'icon-interactive-primary-hover' | 'icon-interactive-primary-pressed' | 'icon-interactive-secondary' | 'icon-interactive-secondary-hover' | 'icon-interactive-secondary-pressed' | 'icon-interactive-selected' | 'icon-on-interactive-danger' | 'icon-on-interactive-primary' | 'icon-on-interactive-secondary' | 'icon-on-interactive-selected' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-hover' | 'icon-neutrals-inactive' | 'icon-neutrals-inactive-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-inverted-hover' | 'icon-neutrals-inverted-subtle' | 'icon-neutrals-inverted-subtle-hover' | 'icon-neutrals-placeholder' | 'icon-neutrals-pressed' | 'icon-neutrals-search' | 'icon-neutrals-subtle' | 'icon-neutrals-subtle-hover' | 'icon-neutrals-subtle-pressed' | 'icon-neutrals-text' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | 'status-icon-error' | 'status-icon-on-error' | 'status-icon-on-info' | 'status-icon-on-success' | 'status-icon-on-warning' | 'status-icon-success' | 'status-icon-warning' | 'icon-success' | 'icon-success-active' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-success-pressed' | 'icon-warning' | 'icon-warning-prominent' | 'icon-warning-subtle' | 'text-danger' | 'text-danger-active' | 'text-danger-hover' | 'text-danger-inverted' | 'text-danger-pressed' | 'text-interactive-on-inverted' | 'text-interactive-on-inverted-hover' | 'text-interactive-on-inverted-pressed' | 'text-interactive-on-inverted-secondary' | 'text-interactive-on-inverted-secondary-hover' | 'text-interactive-on-inverted-secondary-pressed' | 'text-interactive-primary' | 'text-interactive-primary-hover' | 'text-interactive-primary-pressed' | 'text-interactive-secondary' | 'text-interactive-secondary-hover' | 'text-interactive-secondary-pressed' | 'text-interactive-selected' | 'text-on-interactive-danger' | 'text-on-interactive-primary' | 'text-on-interactive-secondary' | 'text-on-interactive-selected' | 'text-neutrals' | 'text-neutrals-active' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-inverted-hover' | 'text-neutrals-inverted-subtle' | 'text-neutrals-inverted-subtle-hover' | 'text-neutrals-placeholder' | 'text-neutrals-placeholder-only' | 'text-neutrals-pressed' | 'text-neutrals-subtle' | 'text-neutrals-subtle-active' | 'text-neutrals-subtle-hover' | 'text-neutrals-subtle-pressed' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'status-text-error' | 'status-text-on-error' | 'status-text-on-info' | 'status-text-on-success' | 'status-text-on-warning' | 'status-text-success' | 'status-text-warning' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | 'text-default' | 'text-disabled' | 'text-inverted' | 'text-inverted-secondary' | 'text-muted' | 'text-on-disabled' | 'text-on-static-dark' | 'text-on-static-dark-subtle' | 'text-placeholder' | 'text-secondary' | 'text-warning' | 'text-warning-subtle' | 'coal-background' | 'coal-background-mild' | 'coal-background-prominent' | 'coal-background-subtle' | 'coral-background' | 'coral-background-mild' | 'coral-background-prominent' | 'coral-background-subtle' | 'cyan-background' | 'cyan-background-mild' | 'cyan-background-prominent' | 'cyan-background-subtle' | 'lilac-background' | 'lilac-background-mild' | 'lilac-background-prominent' | 'lilac-background-subtle' | 'lime-background' | 'lime-background-mild' | 'lime-background-prominent' | 'lime-background-subtle' | 'moss-background' | 'moss-background-mild' | 'moss-background-prominent' | 'moss-background-subtle' | 'ocean-background' | 'ocean-background-mild' | 'ocean-background-prominent' | 'ocean-background-subtle' | 'orange-background' | 'orange-background-mild' | 'orange-background-prominent' | 'orange-background-subtle' | 'pink-background' | 'pink-background-mild' | 'pink-background-prominent' | 'pink-background-subtle' | 'sunshine-background' | 'sunshine-background-mild' | 'sunshine-background-prominent' | 'sunshine-background-subtle' | 'teal-background' | 'teal-background-mild' | 'teal-background-prominent' | 'teal-background-subtle' | 'coal-border' | 'coal-border-prominent' | 'coal-border-subtle' | 'coral-border' | 'coral-border-prominent' | 'coral-border-subtle' | 'cyan-border' | 'cyan-border-prominent' | 'cyan-border-subtle' | 'lilac-border' | 'lilac-border-prominent' | 'lilac-border-subtle' | 'lime-border' | 'lime-border-prominent' | 'lime-border-subtle' | 'moss-border' | 'moss-border-prominent' | 'moss-border-subtle' | 'ocean-border' | 'ocean-border-prominent' | 'ocean-border-subtle' | 'orange-border' | 'orange-border-prominent' | 'orange-border-subtle' | 'pink-border' | 'pink-border-prominent' | 'pink-border-subtle' | 'sunshine-border' | 'sunshine-border-prominent' | 'sunshine-border-subtle' | 'teal-border' | 'teal-border-prominent' | 'teal-border-subtle' | 'coal-avatar-background' | 'coral-avatar-background' | 'cyan-avatar-background' | 'light-coal-avatar-background' | 'light-coral-avatar-background' | 'light-cyan-avatar-background' | 'light-lilac-avatar-background' | 'light-lime-avatar-background' | 'light-moss-avatar-background' | 'light-ocean-avatar-background' | 'light-orange-avatar-background' | 'light-pink-avatar-background' | 'light-sunshine-avatar-background' | 'light-teal-avatar-background' | 'lilac-avatar-background' | 'lime-avatar-background' | 'moss-avatar-background' | 'ocean-avatar-background' | 'orange-avatar-background' | 'pink-avatar-background' | 'sunshine-avatar-background' | 'teal-avatar-background' | 'coral-comment-background' | 'cyan-comment-background' | 'lime-comment-background' | 'coal-cursor-background' | 'coal-cursor-border' | 'coal-cursor-border-prominent' | 'coral-cursor-background' | 'coral-cursor-border' | 'coral-cursor-border-prominent' | 'cyan-cursor-background' | 'cyan-cursor-border' | 'cyan-cursor-border-prominent' | 'light-coal-cursor-background' | 'light-coral-cursor-background' | 'light-cursor-background' | 'light-cyan-cursor-background' | 'light-lilac-cursor-background' | 'light-lime-cursor-background' | 'light-moss-cursor-background' | 'light-orange-cursor-background' | 'light-pink-cursor-background' | 'light-sunshine-cursor-background' | 'light-teal-cursor-background' | 'lilac-cursor-background' | 'lilac-cursor-border' | 'lilac-cursor-border-prominent' | 'lime-cursor-background' | 'lime-cursor-border' | 'lime-cursor-border-prominent' | 'moss-cursor-background' | 'moss-cursor-border' | 'moss-cursor-border-prominent' | 'ocean-cursor-background' | 'ocean-cursor-border' | 'ocean-cursor-border-prominent' | 'orange-cursor-background' | 'orange-cursor-border' | 'orange-cursor-border-prominent' | 'pink-cursor-background' | 'pink-cursor-border-prominent' | 'pink-cursor-coal-border' | 'sunshine-cursor-background' | 'sunshine-cursor-border' | 'susnhine-cursor-border-prominent' | 'teal-cursor-background' | 'teal-cursor-border' | 'teal-cursor-border-prominent' | 'black-sticky-background' | 'coral-sticky-background' | 'cyan-sticky-background' | 'light-coal-sticky-background' | 'light-lime-sticky-background' | 'light-ocean-sticky-background' | 'light-pink-sticky-background' | 'light-sunshine-sticky-background' | 'lilac-sticky-background' | 'lime-sticky-background' | 'moss-sticky-background' | 'ocean-sticky-background' | 'orange-sticky-background' | 'pink-sticky-background' | 'sunshine-sticky-background' | 'teal-sticky-background' | 'coal-icon' | 'coal-icon-mild' | 'coal-icon-subtle' | 'coral-icon' | 'coral-icon-mild' | 'coral-icon-subtle' | 'cyan-icon' | 'cyan-icon-mild' | 'cyan-icon-subtle' | 'lilac-icon' | 'lilac-icon-mild' | 'lilac-icon-subtle' | 'lime-icon' | 'lime-icon-mild' | 'lime-icon-subtle' | 'moss-icon' | 'moss-icon-mild' | 'moss-icon-subtle' | 'ocean-icon' | 'ocean-icon-mild' | 'ocean-icon-subtle' | 'orange-icon' | 'orange-icon-mild' | 'orange-icon-subtle' | 'pink-icon' | 'pink-icon-mild' | 'pink-icon-subtle' | 'sunshine-icon' | 'sunshine-icon-mild' | 'sunshine-icon-subtle' | 'teal-icon' | 'teal-icon-mild' | 'teal-icon-subtle' | 'coal-text' | 'coal-text-mild' | 'coal-text-subtle' | 'coral-text' | 'coral-text-mild' | 'coral-text-subtle' | 'cyan-text' | 'cyan-text-mild' | 'cyan-text-subtle' | 'lilac-text' | 'lilac-text-mild' | 'lilac-text-subtle' | 'lime-text' | 'lime-text-mild' | 'lime-text-subtle' | 'moss-text' | 'moss-text-mild' | 'moss-text-subtle' | 'ocean-text' | 'ocean-text-mild' | 'ocean-text-subtle' | 'orange-text' | 'orange-text-mild' | 'orange-text-subtle' | 'pink-text' | 'pink-text-mild' | 'pink-text-subtle' | 'sunshine-text' | 'sunshine-text-mild' | 'sunshine-text-subtle' | 'teal-text' | 'teal-text-mild' | 'teal-text-subtle';
 
 declare const aliasShadows: {
     readonly focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard";

package/light.css

@@ -92,6 +92,8 @@
   --colors-border-disabled: var(--colors-gray-150);
   --colors-border-inverted: var(--colors-white);
   --colors-border-inverted-subtle: var(--colors-gray-700);
+  --colors-border-option: var(--colors-gray-450);
+  --colors-border-option-hover: var(--colors-blue-550);
   --colors-border-static-dark: var(--colors-gray-450);
   --colors-border-static-dark-subtle: var(--colors-gray-750);
   --colors-border-strong: var(--colors-gray-400);
@@ -213,12 +215,11 @@
   --colors-input-background-default: var(--colors-white);
   --colors-input-background-disabled: var(--colors-gray-150);
   --colors-input-background-hover: var(--colors-white);
-  --colors-input-border-active: var(--colors-blue-550);
   --colors-input-border-default: var(--colors-gray-200);
   --colors-input-border-disabled: var(--colors-transparent);
   --colors-input-border-error: var(--colors-red-500);
+  --colors-input-border-focused: var(--colors-blue-550);
   --colors-input-border-hover: var(--colors-blue-550);
-  --colors-input-border-selection-control: var(--colors-gray-450);
   --colors-input-border-success: var(--colors-green-500);
   --colors-notification-background: var(--colors-gray-850);
   --colors-notification-border: var(--colors-gray-450);
@@ -228,6 +229,7 @@
   --colors-scrollbar-background: var(--colors-gray-300);
   --colors-scrollbar-background-hover: var(--colors-gray-350);
   --colors-slider-background: var(--colors-gray-300);
+  --colors-slider-control-background: var(--colors-white);
   --colors-slider-notch-background: var(--colors-gray-300);
   --colors-switch-background-default: var(--colors-gray-300);
   --colors-switch-background-hover: var(--colors-gray-350);
@@ -249,19 +251,21 @@
   --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
   --colors-icon-placeholder: var(--colors-gray-475);
   --colors-icon-secondary: var(--colors-gray-500);
+  --colors-icon-interactive-on-inverted: var(--colors-white);
+  --colors-icon-interactive-on-inverted-hover: var(--colors-gray-50);
+  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
+  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
+  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
+  --colors-icon-interactive-on-inverted-secondary-pressed: var(
+    --colors-gray-250
+  );
+  --colors-icon-interactive-primary: var(--colors-blue-500);
+  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
+  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
+  --colors-icon-interactive-secondary: var(--colors-gray-500);
+  --colors-icon-interactive-secondary-hover: var(--colors-gray-550);
+  --colors-icon-interactive-secondary-pressed: var(--colors-gray-600);
   --colors-icon-interactive-selected: var(--colors-blue-550);
-  --colors-icon-link: var(--colors-blue-500);
-  --colors-icon-link-hover: var(--colors-blue-550);
-  --colors-icon-link-on-inverted: var(--colors-white);
-  --colors-icon-link-on-inverted-hover: var(--colors-gray-50);
-  --colors-icon-link-on-inverted-pressed: var(--colors-gray-100);
-  --colors-icon-link-on-inverted-secondary: var(--colors-gray-150);
-  --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-200);
-  --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-250);
-  --colors-icon-link-pressed: var(--colors-blue-600);
-  --colors-icon-link-secondary: var(--colors-gray-500);
-  --colors-icon-link-secondary-hover: var(--colors-gray-550);
-  --colors-icon-link-secondary-pressed: var(--colors-gray-600);
   --colors-icon-on-interactive-danger: var(--colors-white);
   --colors-icon-on-interactive-primary: var(--colors-white);
   --colors-icon-on-interactive-secondary: var(--colors-gray-900);
@@ -309,19 +313,21 @@
   --colors-text-danger-hover: var(--colors-red-550);
   --colors-text-danger-inverted: var(--colors-red-50);
   --colors-text-danger-pressed: var(--colors-red-600);
+  --colors-text-interactive-on-inverted: var(--colors-white);
+  --colors-text-interactive-on-inverted-hover: var(--colors-gray-50);
+  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
+  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
+  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
+  --colors-text-interactive-on-inverted-secondary-pressed: var(
+    --colors-gray-250
+  );
+  --colors-text-interactive-primary: var(--colors-blue-500);
+  --colors-text-interactive-primary-hover: var(--colors-blue-550);
+  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
+  --colors-text-interactive-secondary: var(--colors-gray-500);
+  --colors-text-interactive-secondary-hover: var(--colors-gray-550);
+  --colors-text-interactive-secondary-pressed: var(--colors-gray-600);
   --colors-text-interactive-selected: var(--colors-blue-550);
-  --colors-text-link: var(--colors-blue-500);
-  --colors-text-link-hover: var(--colors-blue-550);
-  --colors-text-link-on-inverted: var(--colors-white);
-  --colors-text-link-on-inverted-hover: var(--colors-gray-50);
-  --colors-text-link-on-inverted-pressed: var(--colors-gray-100);
-  --colors-text-link-on-inverted-secondary: var(--colors-gray-150);
-  --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-200);
-  --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-250);
-  --colors-text-link-pressed: var(--colors-blue-600);
-  --colors-text-link-secondary: var(--colors-gray-500);
-  --colors-text-link-secondary-hover: var(--colors-gray-550);
-  --colors-text-link-secondary-pressed: var(--colors-gray-600);
   --colors-text-on-interactive-danger: var(--colors-white);
   --colors-text-on-interactive-primary: var(--colors-white);
   --colors-text-on-interactive-secondary: var(--colors-gray-900);

package/metadata.json

@@ -254,6 +254,12 @@
   "borderInvertedSubtle": {
     "description": "A low-emphasis border for elements on dark or inverted backgrounds. Use when a subtle separator or edge is needed on an inverted surface. Do not use as the primary border on inverted surfaces; use `border-inverted`."
   },
+  "borderOption": {
+    "description": "The border color for selection control elements — checkboxes and radio inputs — at their default resting state. Use exclusively within Checkbox and Radio components. Do not use for text input borders; use `input-border-default` for those."
+  },
+  "borderOptionHover": {
+    "description": "The border color for selection control elements — checkboxes and radio inputs — in a hovered state. Use exclusively within Checkbox and Radio components. Do not use for text input borders; use `input-border-hover` for those."
+  },
   "borderStaticDark": {
     "description": "A border color for elements on always-dark static surfaces — borders that must remain visible on backgrounds that are permanently dark across all themes. Use for component edges within static-dark surfaces like code blocks or dark toolbars. Do not use on theme-responsive inverted surfaces; use `border-inverted` for those."
   },
@@ -617,9 +623,6 @@
   "inputBackgroundHover": {
     "description": "The component-specific hover-state background for input fields. Use within Input, Textarea, and Select components when a cursor is hovering over an unfocused field. Do not apply to focused or disabled states."
   },
-  "inputBorderActive": {
-    "description": "The component-specific focused/active-state border for input fields. Use within Input, Textarea, and Select components when the field is focused. Do not confuse with hover state. Do not use when the field is in an error or success validation state; use those specific tokens instead."
-  },
   "inputBorderDefault": {
     "description": "The component-specific default resting-state border for input fields. Use within Input, Textarea, and Select components at rest. Do not use for hover, focused, error, or success states — each has its own border token."
   },
@@ -629,12 +632,12 @@
   "inputBorderError": {
     "description": "The component-specific border for input fields in a validation error state. Use within Input, Textarea, and Select components when the submitted or entered value fails validation. Do not use for general error status containers; use `status-border-error` for those. Always accompany with an error message using `status-text-error`."
   },
+  "inputBorderFocused": {
+    "description": "The component-specific focused/active-state border for input fields. Use within Input, Textarea, and Select components when the field is focused. Do not confuse with hover state. Do not use when the field is in an error or success validation state; use those specific tokens instead."
+  },
   "inputBorderHover": {
     "description": "The component-specific hover-state border for input fields. Use within Input, Textarea, and Select components when a cursor hovers over an unfocused field. Do not apply to focused or default states."
   },
-  "inputBorderSelectionControl": {
-    "description": "The border color for selection control elements — checkboxes and radio inputs — at their default resting state. Use exclusively within Checkbox and Radio components. Do not use for text input borders; use `input-border-default` for those."
-  },
   "inputBorderSuccess": {
     "description": "The component-specific border for input fields in a validation success state. Use within Input, Textarea, and Select components when the entered value passes validation. Do not use for general success containers; use `status-border-success` for those."
   },
@@ -662,6 +665,9 @@
   "sliderBackground": {
     "description": "The background for the Slider track — the rail along which the thumb travels. Use exclusively within the Slider component track element. Do not use for the notch markers; use `slider-notch-background` for those."
   },
+  "sliderControlBackground": {
+    "description": "The background for the Slider thumb — the circular element that slides within the track. Use exclusively for the thumb element of the Slider component. Do not use for the track; use `slider-background` for the track."
+  },
   "sliderNotchBackground": {
     "description": "The background for step notch markers along the Slider track. Use exclusively for the discrete step indicators within the Slider component. Do not use for the main track; use `slider-background` for that."
   },
@@ -725,45 +731,45 @@
   "iconSecondary": {
     "description": "A reduced-emphasis icon color for supplementary or supporting icons that accompany primary content. Use for icons that provide context but should not draw primary visual attention. Do not use as the default icon color; use `icon-default`. Do not use for disabled, placeholder, or interactive icons."
   },
-  "iconInteractiveSelected": {
-    "description": "The icon color for icons belonging to an element in a selected or toggled-on state — such as active nav items, selected toolbar buttons, or toggled controls. Use when the parent element is in a persistent selected state (not transient hover or press). Pairs with `background-interactive-selected`. Do not use for hover or pressed states; each has its own token."
-  },
-  "iconLink": {
-    "description": "The default resting-state color for icons paired with text links or anchor elements. Use for icons that visually support or accompany inline link text. Do not use for icons on buttons; use `icon-on-interactive-primary`, `icon-on-interactive-secondary`, or `button-icon-on-tertiary`. Do not use for icons on inverted surfaces; use `icon-link-on-inverted`."
-  },
-  "iconLinkHover": {
-    "description": "The hover-state color for icons paired with text links. Use when the parent link element is in a hover state. Do not apply to resting or pressed icon states."
-  },
-  "iconLinkOnInverted": {
+  "iconInteractiveOnInverted": {
     "description": "The default resting-state color for icons paired with text links on dark or inverted backgrounds. Use for link icons that need contrast against inverted surfaces. Do not use on standard light backgrounds."
   },
-  "iconLinkOnInvertedHover": {
+  "iconInteractiveOnInvertedHover": {
     "description": "The hover-state color for icons paired with links on inverted backgrounds. Use when a link on an inverted surface is in a hover state."
   },
-  "iconLinkOnInvertedPressed": {
+  "iconInteractiveOnInvertedPressed": {
     "description": "The pressed/active-state color for icons paired with links on inverted backgrounds. Use when a link on an inverted surface is being actively activated."
   },
-  "iconLinkOnInvertedSecondary": {
+  "iconInteractiveOnInvertedSecondary": {
     "description": "The default resting-state color for secondary-priority icons paired with text links on dark or inverted backgrounds. Use for lower-emphasis link icons on inverted surfaces where the icon should be present but not compete with the primary link. Do not use for primary link icons on inverted surfaces; use `icon-link-on-inverted`. Do not use on standard light backgrounds; use `icon-link-secondary`."
   },
-  "iconLinkOnInvertedSecondaryHover": {
+  "iconInteractiveOnInvertedSecondaryHover": {
     "description": "The hover-state color for secondary-priority icons paired with links on dark or inverted backgrounds. Use exclusively when hovering over a secondary link on an inverted surface."
   },
-  "iconLinkOnInvertedSecondaryPressed": {
+  "iconInteractiveOnInvertedSecondaryPressed": {
     "description": "The pressed/active-state color for secondary-priority icons paired with links on dark or inverted backgrounds. Use when a secondary link on an inverted surface is being actively activated."
   },
-  "iconLinkPressed": {
+  "iconInteractivePrimary": {
+    "description": "The default resting-state color for icons paired with text links or anchor elements. Use for icons that visually support or accompany inline link text. Do not use for icons on buttons; use `icon-on-interactive-primary`, `icon-on-interactive-secondary`, or `button-icon-on-tertiary`. Do not use for icons on inverted surfaces; use `icon-link-on-inverted`."
+  },
+  "iconInteractivePrimaryHover": {
+    "description": "The hover-state color for icons paired with text links. Use when the parent link element is in a hover state. Do not apply to resting or pressed icon states."
+  },
+  "iconInteractivePrimaryPressed": {
     "description": "The pressed/active-state color for icons paired with text links. Use when the parent link is being actively activated. Do not use for hover or resting states."
   },
-  "iconLinkSecondary": {
+  "iconInteractiveSecondary": {
     "description": "Icon color for icons paired with secondary-priority links — lower-emphasis links that share the same color as secondary text. Use when the parent link is less prominent than the primary link on a surface. Do not use for icons on primary links; use `icon-link`."
   },
-  "iconLinkSecondaryHover": {
+  "iconInteractiveSecondaryHover": {
     "description": "The hover-state color for icons paired with secondary-priority links. Use when the parent secondary link is in a hover state."
   },
-  "iconLinkSecondaryPressed": {
+  "iconInteractiveSecondaryPressed": {
     "description": "The pressed/active-state color for icons paired with secondary-priority links. Use when the parent secondary link is being actively activated."
   },
+  "iconInteractiveSelected": {
+    "description": "The icon color for icons belonging to an element in a selected or toggled-on state — such as active nav items, selected toolbar buttons, or toggled controls. Use when the parent element is in a persistent selected state (not transient hover or press). Pairs with `background-interactive-selected`. Do not use for hover or pressed states; each has its own token."
+  },
   "iconOnInteractiveDanger": {
     "description": "The icon color for icons inside destructive interactive elements that are not Button components. Do not use on Button components; use `button-icon-on-danger` for those. Do not use for standalone danger icons; use `status-icon-error`."
   },
@@ -905,45 +911,45 @@
   "textDangerPressed": {
     "description": "⚠️ Deprecated. Use `status-text-error` instead."
   },
-  "textInteractiveSelected": {
-    "description": "The text color for a selected or active element — the text belonging to a nav item, tab, or option that is currently chosen. Use when the element itself is in a selected state. Do not use for text placed on top of a selected background fill; use `text-on-interactive-selected` for that."
-  },
-  "textLink": {
-    "description": "The default resting-state color for inline text links and anchor elements. Use for hyperlinks embedded within prose, navigation items, and any clickable text on a standard background. Do not use for buttons; use interactive background tokens. Do not use for links on inverted surfaces; use `text-link-on-inverted`."
-  },
-  "textLinkHover": {
-    "description": "The hover-state color for inline text links. Use exclusively when a cursor is hovering over a link. Do not apply to resting or pressed states. Do not apply manually; drive from hover interaction state."
-  },
-  "textLinkOnInverted": {
+  "textInteractiveOnInverted": {
     "description": "The default resting-state color for text links displayed on dark or inverted backgrounds. Use for links that must remain legible and visually identifiable on inverted surfaces. Do not use on standard light backgrounds; use `text-link` instead."
   },
-  "textLinkOnInvertedHover": {
+  "textInteractiveOnInvertedHover": {
     "description": "The hover-state color for text links on inverted backgrounds. Use exclusively when hovering over a link displayed on a dark or inverted surface."
   },
-  "textLinkOnInvertedPressed": {
+  "textInteractiveOnInvertedPressed": {
     "description": "The pressed/active-state color for text links on inverted backgrounds. Use when a link on a dark or inverted surface is being actively activated."
   },
-  "textLinkOnInvertedSecondary": {
+  "textInteractiveOnInvertedSecondary": {
     "description": "The default resting-state color for secondary-priority text links on dark or inverted backgrounds. Use for lower-emphasis links on inverted surfaces where the link should be present but not compete with the primary link. Do not use for primary links on inverted surfaces; use `text-link-on-inverted`. Do not use on standard light backgrounds; use `text-link-secondary`."
   },
-  "textLinkOnInvertedSecondaryHover": {
+  "textInteractiveOnInvertedSecondaryHover": {
     "description": "The hover-state color for secondary-priority text links on dark or inverted backgrounds. Use exclusively when hovering over a secondary link on an inverted surface."
   },
-  "textLinkOnInvertedSecondaryPressed": {
+  "textInteractiveOnInvertedSecondaryPressed": {
     "description": "The pressed/active-state color for secondary-priority text links on dark or inverted backgrounds. Use when a secondary link on an inverted surface is being actively activated."
   },
-  "textLinkPressed": {
+  "textInteractivePrimary": {
+    "description": "The default resting-state color for inline text links and anchor elements. Use for hyperlinks embedded within prose, navigation items, and any clickable text on a standard background. Do not use for buttons; use interactive background tokens. Do not use for links on inverted surfaces; use `text-link-on-inverted`."
+  },
+  "textInteractivePrimaryHover": {
+    "description": "The hover-state color for inline text links. Use exclusively when a cursor is hovering over a link. Do not apply to resting or pressed states. Do not apply manually; drive from hover interaction state."
+  },
+  "textInteractivePrimaryPressed": {
     "description": "The pressed/active-state color for inline text links. Use when a link is being actively clicked or tapped. Do not use for hover or resting states."
   },
-  "textLinkSecondary": {
+  "textInteractiveSecondary": {
     "description": "The color for secondary-priority links — lower-emphasis links that share the same color as secondary text. Use when a link is less prominent than the primary link on a surface. Do not use as the default link color; use `text-link` for primary links."
   },
-  "textLinkSecondaryHover": {
+  "textInteractiveSecondaryHover": {
     "description": "The hover-state color for secondary-priority links. Use exclusively when hovering over a secondary link. Do not use for primary link hover; use `text-link-hover`."
   },
-  "textLinkSecondaryPressed": {
+  "textInteractiveSecondaryPressed": {
     "description": "The pressed/active-state color for secondary-priority links. Use when a secondary link is being actively activated. Do not use for primary link pressed state."
   },
+  "textInteractiveSelected": {
+    "description": "The text color for a selected or active element — the text belonging to a nav item, tab, or option that is currently chosen. Use when the element itself is in a selected state. Do not use for text placed on top of a selected background fill; use `text-on-interactive-selected` for that."
+  },
   "textOnInteractiveDanger": {
     "description": "The text color for labels on destructive interactive elements that are not Button components. Do not use on Button components; use `button-text-on-danger` for those. Do not use for danger text on non-interactive surfaces; use `status-text-error`."
   },

package/new-dark.css

@@ -92,6 +92,8 @@
   --colors-border-disabled: var(--colors-cloud-750);
   --colors-border-inverted: var(--colors-cloud-100);
   --colors-border-inverted-subtle: var(--colors-cloud-500);
+  --colors-border-option: var(--colors-cloud-450);
+  --colors-border-option-hover: var(--colors-blue-450);
   --colors-border-static-dark: var(--colors-cloud-450);
   --colors-border-static-dark-subtle: var(--colors-cloud-750);
   --colors-border-strong: var(--colors-cloud-450);
@@ -213,12 +215,11 @@
   --colors-input-background-default: var(--colors-cloud-850);
   --colors-input-background-disabled: var(--colors-cloud-850);
   --colors-input-background-hover: var(--colors-cloud-850);
-  --colors-input-border-active: var(--colors-transparent);
   --colors-input-border-default: var(--colors-transparent);
   --colors-input-border-disabled: var(--colors-transparent);
   --colors-input-border-error: var(--colors-red-400);
+  --colors-input-border-focused: var(--colors-transparent);
   --colors-input-border-hover: var(--colors-transparent);
-  --colors-input-border-selection-control: var(--colors-cloud-450);
   --colors-input-border-success: var(--colors-green-400);
   --colors-notification-background: var(--colors-cloud-150);
   --colors-notification-border: var(--colors-cloud-450);
@@ -228,6 +229,7 @@
   --colors-scrollbar-background: var(--colors-gray-700);
   --colors-scrollbar-background-hover: var(--colors-gray-650);
   --colors-slider-background: var(--colors-gray-700);
+  --colors-slider-control-background: var(--colors-cloud-900);
   --colors-slider-notch-background: var(--colors-gray-700);
   --colors-switch-background-default: var(--colors-gray-700);
   --colors-switch-background-hover: var(--colors-gray-650);
@@ -249,19 +251,23 @@
   --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
   --colors-icon-placeholder: var(--colors-cloud-400);
   --colors-icon-secondary: var(--colors-cloud-300);
+  --colors-icon-interactive-on-inverted: var(--colors-cloud-900);
+  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-850);
+  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-800);
+  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-700);
+  --colors-icon-interactive-on-inverted-secondary-hover: var(
+    --colors-cloud-650
+  );
+  --colors-icon-interactive-on-inverted-secondary-pressed: var(
+    --colors-cloud-600
+  );
+  --colors-icon-interactive-primary: var(--colors-blue-500);
+  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
+  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
+  --colors-icon-interactive-secondary: var(--colors-cloud-300);
+  --colors-icon-interactive-secondary-hover: var(--colors-cloud-250);
+  --colors-icon-interactive-secondary-pressed: var(--colors-cloud-200);
   --colors-icon-interactive-selected: var(--colors-blue-400);
-  --colors-icon-link: var(--colors-blue-500);
-  --colors-icon-link-hover: var(--colors-blue-450);
-  --colors-icon-link-on-inverted: var(--colors-cloud-900);
-  --colors-icon-link-on-inverted-hover: var(--colors-cloud-850);
-  --colors-icon-link-on-inverted-pressed: var(--colors-cloud-800);
-  --colors-icon-link-on-inverted-secondary: var(--colors-cloud-700);
-  --colors-icon-link-on-inverted-secondary-hover: var(--colors-cloud-650);
-  --colors-icon-link-on-inverted-secondary-pressed: var(--colors-cloud-600);
-  --colors-icon-link-pressed: var(--colors-blue-400);
-  --colors-icon-link-secondary: var(--colors-cloud-300);
-  --colors-icon-link-secondary-hover: var(--colors-cloud-250);
-  --colors-icon-link-secondary-pressed: var(--colors-cloud-200);
   --colors-icon-on-interactive-danger: var(--colors-white);
   --colors-icon-on-interactive-primary: var(--colors-white);
   --colors-icon-on-interactive-secondary: var(--colors-white);
@@ -309,19 +315,23 @@
   --colors-text-danger-hover: var(--colors-red-350);
   --colors-text-danger-inverted: var(--colors-red-900);
   --colors-text-danger-pressed: var(--colors-red-300);
+  --colors-text-interactive-on-inverted: var(--colors-cloud-900);
+  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-850);
+  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-800);
+  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-700);
+  --colors-text-interactive-on-inverted-secondary-hover: var(
+    --colors-cloud-650
+  );
+  --colors-text-interactive-on-inverted-secondary-pressed: var(
+    --colors-cloud-600
+  );
+  --colors-text-interactive-primary: var(--colors-blue-500);
+  --colors-text-interactive-primary-hover: var(--colors-blue-450);
+  --colors-text-interactive-primary-pressed: var(--colors-blue-400);
+  --colors-text-interactive-secondary: var(--colors-cloud-300);
+  --colors-text-interactive-secondary-hover: var(--colors-cloud-250);
+  --colors-text-interactive-secondary-pressed: var(--colors-cloud-200);
   --colors-text-interactive-selected: var(--colors-blue-400);
-  --colors-text-link: var(--colors-blue-500);
-  --colors-text-link-hover: var(--colors-blue-450);
-  --colors-text-link-on-inverted: var(--colors-cloud-900);
-  --colors-text-link-on-inverted-hover: var(--colors-cloud-850);
-  --colors-text-link-on-inverted-pressed: var(--colors-cloud-800);
-  --colors-text-link-on-inverted-secondary: var(--colors-cloud-700);
-  --colors-text-link-on-inverted-secondary-hover: var(--colors-cloud-650);
-  --colors-text-link-on-inverted-secondary-pressed: var(--colors-cloud-600);
-  --colors-text-link-pressed: var(--colors-blue-400);
-  --colors-text-link-secondary: var(--colors-cloud-300);
-  --colors-text-link-secondary-hover: var(--colors-cloud-250);
-  --colors-text-link-secondary-pressed: var(--colors-cloud-200);
   --colors-text-on-interactive-danger: var(--colors-white);
   --colors-text-on-interactive-primary: var(--colors-white);
   --colors-text-on-interactive-secondary: var(--colors-white);

package/new-light.css

@@ -92,6 +92,8 @@
   --colors-border-disabled: var(--colors-cloud-150);
   --colors-border-inverted: var(--colors-cloud-900);
   --colors-border-inverted-subtle: var(--colors-cloud-700);
+  --colors-border-option: var(--colors-cloud-450);
+  --colors-border-option-hover: var(--colors-blue-550);
   --colors-border-static-dark: var(--colors-cloud-450);
   --colors-border-static-dark-subtle: var(--colors-cloud-750);
   --colors-border-strong: var(--colors-cloud-300);
@@ -213,12 +215,11 @@
   --colors-input-background-default: var(--colors-cloud-100);
   --colors-input-background-disabled: var(--colors-cloud-150);
   --colors-input-background-hover: var(--colors-cloud-100);
-  --colors-input-border-active: var(--colors-transparent);
   --colors-input-border-default: var(--colors-transparent);
   --colors-input-border-disabled: var(--colors-transparent);
   --colors-input-border-error: var(--colors-red-500);
+  --colors-input-border-focused: var(--colors-transparent);
   --colors-input-border-hover: var(--colors-transparent);
-  --colors-input-border-selection-control: var(--colors-cloud-450);
   --colors-input-border-success: var(--colors-green-500);
   --colors-notification-background: var(--colors-cloud-850);
   --colors-notification-border: var(--colors-cloud-450);
@@ -228,6 +229,7 @@
   --colors-scrollbar-background: var(--colors-cloud-300);
   --colors-scrollbar-background-hover: var(--colors-cloud-350);
   --colors-slider-background: var(--colors-cloud-300);
+  --colors-slider-control-background: var(--colors-white);
   --colors-slider-notch-background: var(--colors-cloud-300);
   --colors-switch-background-default: var(--colors-cloud-300);
   --colors-switch-background-hover: var(--colors-cloud-350);
@@ -249,19 +251,23 @@
   --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
   --colors-icon-placeholder: var(--colors-cloud-400);
   --colors-icon-secondary: var(--colors-cloud-700);
+  --colors-icon-interactive-on-inverted: var(--colors-white);
+  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
+  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
+  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
+  --colors-icon-interactive-on-inverted-secondary-hover: var(
+    --colors-cloud-350
+  );
+  --colors-icon-interactive-on-inverted-secondary-pressed: var(
+    --colors-cloud-400
+  );
+  --colors-icon-interactive-primary: var(--colors-blue-500);
+  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
+  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
+  --colors-icon-interactive-secondary: var(--colors-cloud-700);
+  --colors-icon-interactive-secondary-hover: var(--colors-cloud-750);
+  --colors-icon-interactive-secondary-pressed: var(--colors-cloud-800);
   --colors-icon-interactive-selected: var(--colors-blue-550);
-  --colors-icon-link: var(--colors-blue-500);
-  --colors-icon-link-hover: var(--colors-blue-550);
-  --colors-icon-link-on-inverted: var(--colors-white);
-  --colors-icon-link-on-inverted-hover: var(--colors-cloud-50);
-  --colors-icon-link-on-inverted-pressed: var(--colors-cloud-100);
-  --colors-icon-link-on-inverted-secondary: var(--colors-cloud-300);
-  --colors-icon-link-on-inverted-secondary-hover: var(--colors-cloud-350);
-  --colors-icon-link-on-inverted-secondary-pressed: var(--colors-cloud-400);
-  --colors-icon-link-pressed: var(--colors-blue-600);
-  --colors-icon-link-secondary: var(--colors-cloud-700);
-  --colors-icon-link-secondary-hover: var(--colors-cloud-750);
-  --colors-icon-link-secondary-pressed: var(--colors-cloud-800);
   --colors-icon-on-interactive-danger: var(--colors-white);
   --colors-icon-on-interactive-primary: var(--colors-white);
   --colors-icon-on-interactive-secondary: var(--colors-cloud-900);
@@ -309,19 +315,23 @@
   --colors-text-danger-hover: var(--colors-red-550);
   --colors-text-danger-inverted: var(--colors-red-50);
   --colors-text-danger-pressed: var(--colors-red-600);
+  --colors-text-interactive-on-inverted: var(--colors-white);
+  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
+  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
+  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
+  --colors-text-interactive-on-inverted-secondary-hover: var(
+    --colors-cloud-350
+  );
+  --colors-text-interactive-on-inverted-secondary-pressed: var(
+    --colors-cloud-400
+  );
+  --colors-text-interactive-primary: var(--colors-blue-500);
+  --colors-text-interactive-primary-hover: var(--colors-blue-550);
+  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
+  --colors-text-interactive-secondary: var(--colors-cloud-700);
+  --colors-text-interactive-secondary-hover: var(--colors-cloud-750);
+  --colors-text-interactive-secondary-pressed: var(--colors-cloud-800);
   --colors-text-interactive-selected: var(--colors-blue-550);
-  --colors-text-link: var(--colors-blue-500);
-  --colors-text-link-hover: var(--colors-blue-550);
-  --colors-text-link-on-inverted: var(--colors-white);
-  --colors-text-link-on-inverted-hover: var(--colors-cloud-50);
-  --colors-text-link-on-inverted-pressed: var(--colors-cloud-100);
-  --colors-text-link-on-inverted-secondary: var(--colors-cloud-300);
-  --colors-text-link-on-inverted-secondary-hover: var(--colors-cloud-350);
-  --colors-text-link-on-inverted-secondary-pressed: var(--colors-cloud-400);
-  --colors-text-link-pressed: var(--colors-blue-600);
-  --colors-text-link-secondary: var(--colors-cloud-700);
-  --colors-text-link-secondary-hover: var(--colors-cloud-750);
-  --colors-text-link-secondary-pressed: var(--colors-cloud-800);
   --colors-text-on-interactive-danger: var(--colors-white);
   --colors-text-on-interactive-primary: var(--colors-white);
   --colors-text-on-interactive-secondary: var(--colors-cloud-900);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-themes",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@mirohq/design-tokens": "^8.0.1"
+    "@mirohq/design-tokens": "^9.0.0"
   },
   "devDependencies": {
     "@types/lodash.kebabcase": "4.1.7",