@kelvininc/ui-components/dist/assets/styles/style-dictionary/tokens/themes/light.css

Kelvin UI Components

/**
 * Design Tokens - Auto-generated by Style Dictionary
 * Do not edit manually - run `pnpm tokens:build` to regenerate
 */

body[mode="light"], [data-theme="light"] {
  --background-surface-neutral-subtlest: var(--color-gray-100);
  --background-surface-neutral-default: var(--color-gray-50);
  --background-surface-neutral-subtle: var(--color-gray-200);
  --background-surface-neutral-inverse: rgba(13, 13, 13, 0);
  --background-surface-neutral-strong: var(--color-gray-200);
  --background-surface-sidebar-default: var(--color-gray-50);
  --background-surface-sidebar-strong: var(--color-gray-100);
  --background-surface-skeleton-highlight: var(--color-gray-200);
  --background-surface-skeleton-base: var(--color-gray-300);
  --background-surface-brand-default: var(--color-brand-500);
  --background-surface-progress-bar-default: var(--color-purple-500);
  --background-surface-progress-bar-subtle: var(--color-gray-50);
  --background-container-status-success-default: var(--color-green-100);
  --background-container-status-success-subtle: var(--color-green-200);
  --background-container-status-success-soft: var(--color-green-100);
  --background-container-status-success-strong: var(--color-green-100);
  --background-container-status-warning-default: var(--color-yellow-100);
  --background-container-status-warning-subtle: var(--color-yellow-200);
  --background-container-status-warning-soft: var(--color-yellow-100);
  --background-container-status-warning-strong: var(--color-yellow-100);
  --background-container-status-danger-default: var(--color-red-100);
  --background-container-status-danger-subtle: var(--color-red-200);
  --background-container-status-danger-soft: var(--color-red-100);
  --background-container-status-danger-strong: var(--color-red-100);
  --background-container-status-info-default: var(--color-blue-100);
  --background-container-status-info-subtle: var(--color-blue-200);
  --background-container-status-info-soft: var(--color-blue-100);
  --background-container-status-info-strong: var(--color-blue-100);
  --background-container-brand-default: var(--color-brand-100);
  --background-container-brand-subtle: var(--color-brand-200);
  --background-container-neutral-subtle: var(--color-gray-300);
  --background-container-neutral-default: var(--color-gray-50);
  --background-container-neutral-subtlest: var(--color-gray-200);
  --background-container-accent-purple-default: var(--color-purple-100);
  --background-container-accent-purple-disabled: var(--color-gray-300);
  --background-container-accent-purple-subtle: var(--color-purple-200);
  --background-container-accent-purple-strong: var(--color-purple-500);
  --background-container-accent-teal-default: var(--color-teal-500);
  --background-container-accent-teal-subtle: var(--color-teal-600);
  --background-container-elevated-tooltip: var(--color-gray-300);
  --background-container-elevated-info-panel: var(--color-gray-300);
  --background-container-elevated-toast: var(--color-gray-200);
  --background-container-elevated-slider: var(--color-gray-50);
  --background-container-input-default: var(--color-gray-50);
  --background-container-input-disabled: var(--color-gray-200);
  --background-container-button-alert-success: var(--color-green-600);
  --background-container-button-alert-warning: var(--color-yellow-600);
  --background-container-button-alert-danger: var(--color-red-600);
  --background-container-button-alert-info: var(--color-blue-600);
  --background-container-navigation-row-hover: var(--color-brand-100);
  --background-container-navigation-row-selected: var(--color-brand-100);
  --background-container-account-brand: var(--color-brand-500);
  --background-container-account-accent: var(--color-purple-500);
  --background-container-card-recommendation-default: var(--color-gray-50);
  --background-container-card-recommendation-subtle: var(--color-gray-100);
  --background-container-alert-secondary-default: var(--color-gray-200);
  --background-container-radio-selector-default: var(--color-gray-50);
  --background-container-modal-default: var(--color-gray-50);
  --background-container-modal-subtle: var(--color-gray-100);
  --background-container-tag-success-default: var(--color-green-100);
  --background-container-tag-success-subtle: var(--color-green-300);
  --background-container-tag-warning-default: var(--color-yellow-100);
  --background-container-tag-warning-subtle: var(--color-yellow-200);
  --background-container-tag-danger-default: var(--color-red-100);
  --background-container-tag-danger-subtle: var(--color-red-200);
  --background-container-tag-info-default: var(--color-blue-100);
  --background-container-tag-info-subtle: var(--color-blue-200);
  --background-container-tag-brand-default: var(--color-brand-100);
  --background-container-tag-brand-subtle: var(--color-brand-200);
  --background-container-tag-neutral-default: var(--color-gray-300);
  --background-container-tag-neutral-subtle: var(--color-gray-400);
  --background-container-tag-accent-default: var(--color-purple-100);
  --background-container-tag-accent-subtle: var(--color-purple-200);
  --background-interactive-neutral-hover: var(--color-gray-500);
  --background-interactive-neutral-pressed: var(--color-gray-600);
  --background-interactive-neutral-disabled: var(--color-gray-300);
  --background-interactive-brand-default: var(--color-brand-500);
  --background-interactive-brand-hover: var(--color-brand-600);
  --background-interactive-brand-pressed: var(--color-brand-700);
  --background-interactive-brand-disabled: var(--color-gray-300);
  --background-interactive-danger-default: var(--color-red-500);
  --background-interactive-danger-hover: var(--color-red-600);
  --background-interactive-danger-pressed: var(--color-red-700);
  --background-interactive-danger-disabled: var(--color-gray-300);
  --background-interactive-accent-primary-default: var(--color-teal-500);
  --background-interactive-accent-primary-hover: var(--color-teal-600);
  --background-interactive-accent-primary-pressed: var(--color-teal-700);
  --background-interactive-accent-primary-disabled: var(--color-gray-300);
  --background-interactive-accent-secondary-hover: var(--color-teal-600);
  --background-interactive-accent-secondary-pressed: var(--color-teal-700);
  --background-interactive-accent-secondary-disabled: var(--color-gray-300);
  --background-interactive-counter-default: var(--color-gray-300);
  --background-interactive-counter-disabled: var(--color-gray-400);
  --background-interactive-counter-hover: var(--color-brand-200);
  --background-interactive-counter-selected: var(--color-brand-200);
  --background-interactive-slider-list-hover: var(--color-gray-200);
  --background-interactive-slider-list-selected: var(--color-brand-100);
  --background-interactive-slider-list-default: var(--color-gray-50);
  --background-interactive-table-cell-state-hover: var(--color-gray-200);
  --background-interactive-table-cell-state-selected: var(--color-brand-100);
  --background-interactive-table-cell-state-default: var(--color-gray-50);
  --background-interactive-table-cell-state-filled: var(--color-gray-50);
  --background-interactive-table-cell-state-blocked: var(--color-gray-200);
  --background-interactive-table-cell-state-disabled: var(--color-gray-50);
  --background-interactive-table-cell-level-subtle: var(--color-gray-200);
  --background-interactive-table-cell-level-strong: var(--color-brand-100);
  --background-interactive-table-editable-cell-state-default: var(--color-gray-50);
  --background-interactive-table-editable-cell-state-selected: var(--color-gray-50);
  --background-interactive-table-editable-cell-state-filled: var(--color-gray-50);
  --background-interactive-table-editable-cell-state-blocked: var(--color-gray-200);
  --background-interactive-table-editable-cell-level-subtle: var(--color-gray-200);
  --background-interactive-table-editable-cell-level-strong: var(--color-brand-100);
  --background-interactive-table-icon-hover: var(--color-gray-200);
  --background-interactive-table-icon-pressed: var(--color-brand-100);
  --background-interactive-table-pin-hover: var(--color-gray-200);
  --background-interactive-table-pin-pressed: var(--color-brand-100);
  --background-interactive-card-hover: var(--color-gray-200);
  --background-interactive-card-selected: var(--color-brand-100);
  --background-interactive-card-default: var(--color-gray-50);
  --background-interactive-card-application-default: var(--color-gray-50);
  --background-interactive-card-application-hover: var(--color-gray-200);
  --background-interactive-column-bar-active: var(--color-gray-50);
  --background-interactive-column-bar-hidden: var(--color-gray-200);
  --background-interactive-column-bar-hover: var(--color-gray-50);
  --background-interactive-column-bar-drag: var(--color-brand-100);
  --background-interactive-column-bar-locked: var(--color-gray-200);
  --background-interactive-column-bar-empty: var(--color-gray-200);
  --background-interactive-calendar-hover: var(--color-gray-200);
  --background-interactive-calendar-selected: var(--color-brand-100);
  --background-interactive-calendar-selected-middle: var(--color-gray-200);
  --background-persistent-control-on-defaullt: var(--color-brand-500);
  --background-persistent-control-on-subtle: var(--color-brand-100);
  --background-persistent-control-off-neutral: var(--color-gray-600);
  --background-persistent-control-disabled-default: var(--color-gray-300);
  --background-persistent-indicator-on: var(--color-brand-500);
  --background-persistent-indicator-off: var(--color-gray-400);
  --background-persistent-tab-hover: var(--color-brand-100);
  --background-persistent-tab-selected: var(--color-brand-100);
  --background-persistent-tab-disabled: var(--color-gray-300);
  --background-canvas-neutral-default: var(--color-gray-100);
  --text-surface-neutral-primary: var(--color-gray-950);
  --text-surface-neutral-secondary: var(--color-gray-950);
  --text-surface-neutral-disabled: var(--color-gray-400);
  --text-surface-neutral-tertiary: var(--color-gray-500);
  --text-surface-accent-default: var(--color-teal-500);
  --text-surface-danger-default: var(--color-red-500);
  --text-interactive-link-default: var(--color-gray-950);
  --text-interactive-link-hover: var(--color-brand-600);
  --text-interactive-link-visited: var(--color-brand-700);
  --text-interactive-link-disabled: var(--color-gray-400);
  --text-interactive-decoration-default: var(--color-gray-950);
  --text-interactive-decoration-hover: var(--color-brand-600);
  --text-interactive-decoration-visited: var(--color-brand-700);
  --text-interactive-decoration-disabled: var(--color-gray-400);
  --text-interactive-input-default: var(--color-gray-500);
  --text-interactive-input-selected: var(--color-gray-950);
  --text-interactive-input-filled: var(--color-gray-950);
  --text-interactive-input-disabled: var(--color-gray-400);
  --text-interactive-text-area-default: var(--color-gray-500);
  --text-interactive-text-area-hover: var(--color-gray-950);
  --text-interactive-text-area-selected: var(--color-gray-950);
  --text-interactive-text-area-filled: var(--color-gray-950);
  --text-interactive-counter-default: var(--color-gray-500);
  --text-interactive-counter-selected: var(--color-brand-500);
  --text-interactive-counter-hover: var(--color-brand-500);
  --text-interactive-counter-disabled: var(--color-gray-300);
  --text-interactive-slider-list-default: var(--color-gray-500);
  --text-interactive-slider-list-hover: var(--color-gray-950);
  --text-interactive-slider-list-selected: var(--color-brand-500);
  --text-interactive-slider-list-disabled: var(--color-gray-400);
  --text-interactive-accordion-default: var(--color-gray-500);
  --text-interactive-accordion-disabled: var(--color-gray-400);
  --text-interactive-table-secondary-text-hover: var(--color-gray-950);
  --text-interactive-table-secondary-text-default: var(--color-gray-500);
  --text-interactive-table-secondary-text-disabled: var(--color-gray-400);
  --text-interactive-card-default: var(--color-gray-500);
  --text-interactive-card-hover: var(--color-gray-950);
  --text-interactive-card-selected: var(--color-brand-500);
  --text-interactive-card-disabled: var(--color-gray-400);
  --text-interactive-card-radio-selector-default: var(--color-gray-950);
  --text-interactive-card-radio-selector-hover: var(--color-brand-500);
  --text-interactive-card-radio-selector-selected: var(--color-brand-500);
  --text-on-color-neutral-primary: var(--color-gray-50);
  --text-on-color-neutral-secondary: var(--color-gray-50);
  --text-on-color-neutral-disabled: var(--color-gray-400);
  --text-on-color-neutral-tertiary: var(--color-gray-500);
  --text-on-color-neutral-muted: var(--color-gray-300);
  --text-on-color-accent-default: var(--color-gray-50);
  --text-on-color-accent-disabled: var(--color-gray-400);
  --text-on-color-alert-neutral-default: var(--color-gray-950);
  --text-on-color-alert-neutral-subtle: var(--color-gray-500);
  --text-on-color-alert-success-default: var(--color-green-600);
  --text-on-color-alert-success-inverse: var(--color-gray-50);
  --text-on-color-alert-warning-default: var(--color-yellow-600);
  --text-on-color-alert-warning-inverse: var(--color-gray-50);
  --text-on-color-alert-danger-default: var(--color-red-600);
  --text-on-color-alert-danger-inverse: var(--color-gray-50);
  --text-on-color-alert-info-default: var(--color-blue-600);
  --text-on-color-alert-info-inverse: var(--color-gray-50);
  --text-on-color-metric-list-primary: var(--color-gray-950);
  --text-on-color-metric-list-secondary: var(--color-gray-500);
  --text-persistent-indicator-on: var(--color-brand-500);
  --text-persistent-indicator-off: var(--color-gray-950);
  --text-persistent-indicator-disabled: var(--color-gray-400);
  --text-persistent-control-on: var(--color-brand-500);
  --text-persistent-control-off: var(--color-gray-500);
  --text-persistent-control-disabled: var(--color-gray-400);
  --text-persistent-tab-hover: var(--color-brand-500);
  --text-persistent-tab-default: var(--color-gray-500);
  --text-persistent-tab-seleted: var(--color-brand-500);
  --text-persistent-tab-disabled: var(--color-gray-400);
  --text-persistent-radio-selector-default: var(--color-gray-950);
  --text-persistent-radio-selector-hover: var(--color-gray-950);
  --text-persistent-radio-selector-seleted: var(--color-brand-500);
  --text-container-neutral-default: var(--color-gray-950);
  --text-container-neutral-inverse: var(--color-gray-950);
  --text-container-neutral-disabled: var(--color-gray-400);
  --text-container-neutral-muted: var(--color-gray-700);
  --text-container-neutral-subtle: var(--color-gray-500);
  --text-container-brand-default: var(--color-brand-500);
  --text-container-accent-purple-default: var(--color-purple-500);
  --text-container-accent-teal-default: var(--color-gray-50);
  --text-container-status-success-default: var(--color-green-500);
  --text-container-status-success-strong: var(--color-green-500);
  --text-container-status-warning-default: var(--color-yellow-500);
  --text-container-status-warning-strong: var(--color-yellow-500);
  --text-container-status-danger-default: var(--color-red-500);
  --text-container-status-info-default: var(--color-blue-500);
  --text-container-elevated-info-panel-default: var(--color-gray-950);
  --text-container-elevated-info-panel-subtle: var(--color-gray-500);
  --text-container-elevated-tooltip-default: var(--color-gray-950);
  --text-container-elevated-toast-default: var(--color-gray-950);
  --text-container-elevated-toast-subtle: var(--color-gray-500);
  --text-container-navigation-row-default: var(--color-gray-950);
  --text-container-navigation-row-hover: var(--color-brand-500);
  --text-container-navigation-row-selected: var(--color-brand-500);
  --text-container-tag-success-default: var(--color-green-500);
  --text-container-tag-warning-default: var(--color-yellow-500);
  --text-container-tag-danger-default: var(--color-red-500);
  --text-container-tag-info-default: var(--color-blue-500);
  --text-container-tag-neutral-default: var(--color-gray-500);
  --text-container-tag-brand-default: var(--color-brand-500);
  --text-container-tag-accent-default: var(--color-purple-500);
  --border-surface-neutral-default: var(--color-gray-400);
  --border-surface-neutral-subtle: var(--color-gray-300);
  --border-surface-neutral-inverse: var(--color-gray-950);
  --border-surface-neutral-subtlest: var(--color-gray-200);
  --border-surface-brand-default: var(--color-brand-500);
  --border-surface-sidepanel-default: var(--color-gray-300);
  --border-surface-card-default: var(--color-gray-400);
  --border-surface-slider-value-default: var(--color-brand-200);
  --border-surface-code-default: var(--color-gray-400);
  --border-interactive-neutral-default: var(--color-gray-800);
  --border-interactive-neutral-subtle: var(--color-gray-700);
  --border-interactive-accent-default: var(--color-teal-500);
  --border-interactive-input-selected: var(--color-gray-950);
  --border-interactive-input-filled: var(--color-gray-400);
  --border-interactive-input-default: var(--color-gray-400);
  --border-interactive-input-disabled: var(--color-gray-300);
  --border-interactive-input-error: var(--color-red-500);
  --border-interactive-text-area-hover: var(--color-gray-950);
  --border-interactive-text-area-selected: var(--color-gray-950);
  --border-interactive-text-area-default: var(--color-gray-400);
  --border-interactive-text-area-filled: var(--color-gray-400);
  --border-interactive-underline-default: var(--color-gray-400);
  --border-interactive-underline-hover: var(--color-gray-950);
  --border-interactive-editable-cell-default: var(--color-gray-400);
  --border-interactive-editable-cell-selected: var(--color-gray-950);
  --border-interactive-editable-cell-error: var(--color-red-500);
  --border-interactive-accordion-default: var(--color-gray-400);
  --border-interactive-accordion-disabled: var(--color-gray-400);
  --border-container-status-success-default: var(--color-green-500);
  --border-container-status-success-subtle: var(--color-green-400);
  --border-container-status-warning-default: var(--color-yellow-500);
  --border-container-status-warning-subtle: var(--color-yellow-200);
  --border-container-status-danger-default: var(--color-red-500);
  --border-container-status-danger-subtle: var(--color-red-200);
  --border-container-status-info-default: var(--color-blue-500);
  --border-container-status-info-subtle: var(--color-blue-200);
  --border-container-elevated-default: var(--color-gray-400);
  --border-container-neutral-default: var(--color-gray-400);
  --border-container-neutral-selected: var(--color-gray-950);
  --border-container-neutral-subtle: var(--color-gray-300);
  --border-container-neutral-subtlest: var(--color-gray-400);
  --border-container-divider-default: var(--color-gray-300);
  --border-container-divider-strong: var(--color-gray-400);
  --border-container-modal-default: var(--color-gray-300);
  --border-container-navigation-row-hover: var(--color-brand-200);
  --border-container-navigation-row-selected: var(--color-brand-200);
  --border-container-accent-teal-default: var(--color-teal-500);
  --border-container-accent-purple-default: var(--color-purple-500);
  --border-container-accent-purple-subtle: var(--color-purple-200);
  --border-container-table-default: var(--color-gray-400);
  --border-container-table-inverse: rgba(191, 191, 191, 0);
  --border-container-card-default: var(--color-gray-400);
  --border-container-card-applied: var(--color-green-500);
  --border-container-card-pending: var(--color-yellow-500);
  --border-container-card-failed: var(--color-red-500);
  --border-container-card-divider: var(--color-gray-400);
  --border-container-graphic-recommendation-default: var(--color-gray-300);
  --border-container-radio-selected-hover: var(--color-gray-950);
  --border-container-radio-selected-selected: var(--color-gray-950);
  --border-container-tag-neutral-subtle: var(--color-gray-400);
  --border-container-tag-brand-subtle: var(--color-brand-200);
  --border-container-tag-accent-subtle: var(--color-purple-200);
  --border-container-tag-success-default: var(--color-green-400);
  --border-container-tag-warning-default: var(--color-yellow-200);
  --border-container-tag-danger-default: var(--color-red-200);
  --border-container-tag-info-default: var(--color-blue-200);
  --border-container-column-bar-default: var(--color-gray-300);
  --border-container-card-widgets-default: var(--color-gray-300);
  --border-container-card-widgets-hover: var(--color-brand-500);
  --border-persistent-control-off: var(--color-gray-300);
  --border-persistent-control-on: var(--color-brand-200);
  --border-persistent-control-disabled: var(--color-gray-300);
  --border-persistent-indicator-on: var(--color-brand-500);
  --border-persistent-indicator-off: var(--color-gray-400);
  --border-persistent-indicator-disabled: var(--color-gray-400);
  --border-persistent-tab-seleted: var(--color-brand-200);
  --border-persistent-tab-disabled: rgba(178, 212, 255, 0);
  --border-persistent-wizard-selected: var(--color-green-500);
  --border-persistent-wizard-default: var(--color-gray-300);
  --border-persistent-radio-selector-seleted: var(--color-brand-200);
  --border-persistent-radio-selector-hover: var(--color-gray-400);
  --border-persistent-radio-selector-default: var(--color-gray-400);
  --border-persistent-card-radio-selector-default: var(--color-gray-400);
  --border-persistent-card-radio-selector-hover: var(--color-brand-500);
  --border-persistent-card-radio-selector-seleted: var(--color-brand-500);
  --border-on-color-neutral-default: var(--color-gray-400);
  --border-on-color-button-alert-success: var(--color-green-600);
  --border-on-color-button-alert-warning: var(--color-yellow-600);
  --border-on-color-button-alert-danger: var(--color-red-600);
  --border-on-color-button-alert-info: var(--color-blue-600);
  --overlay-interactive-opacity-10: rgba(191, 191, 191, 0.1);
  --overlay-interactive-opacity-16: rgba(191, 191, 191, 0.16);
  --overlay-surface-opacity-80: rgba(89, 89, 89, 0.8);
  --overlay-surface-opacity-60: rgba(250, 250, 250, 0.6);
  --overlay-card-recommendation-opacity-100: var(--color-gray-200);
  --overlay-card-recommendation-opacity-80: rgba(242, 242, 242, 0.8);
  --overlay-card-recommendation-opacity-0: rgba(242, 242, 242, 0);
  --icon-surface-neutral-primary: var(--color-gray-950);
  --icon-surface-neutral-secondary: var(--color-gray-500);
  --icon-surface-neutral-tertiary: var(--color-gray-500);
  --icon-surface-neutral-disabled: var(--color-gray-400);
  --icon-surface-accent-default: var(--color-teal-500);
  --icon-surface-status-success-default: var(--color-green-500);
  --icon-surface-status-warning-default: var(--color-yellow-500);
  --icon-surface-status-danger-default: var(--color-red-500);
  --icon-surface-status-danger-soft: var(--color-red-500);
  --icon-surface-status-info-default: var(--color-blue-500);
  --icon-surface-status-inactive-default: var(--color-gray-400);
  --icon-surface-brand-primary: var(--color-brand-500);
  --icon-surface-logo-default: var(--color-brand-500);
  --icon-surface-logo-subtle: var(--color-purple-500);
  --icon-on-color-neutral-primary: var(--color-gray-50);
  --icon-on-color-neutral-disabled: var(--color-gray-400);
  --icon-on-color-neutral-secondary: var(--color-gray-300);
  --icon-on-color-neutral-tertiary: var(--color-gray-400);
  --icon-on-color-accent-default: var(--color-gray-50);
  --icon-on-color-accent-disabled: var(--color-gray-400);
  --icon-on-color-alert-success: var(--color-green-600);
  --icon-on-color-alert-warning: var(--color-yellow-600);
  --icon-on-color-alert-danger: var(--color-red-600);
  --icon-on-color-alert-info: var(--color-blue-600);
  --icon-interactive-link-default: var(--color-gray-950);
  --icon-interactive-link-hover: var(--color-brand-600);
  --icon-interactive-link-visited: var(--color-brand-700);
  --icon-interactive-link-disabled: var(--color-gray-400);
  --icon-interactive-input-default: var(--color-gray-500);
  --icon-interactive-input-disabled: var(--color-gray-400);
  --icon-interactive-input-selected: var(--color-gray-950);
  --icon-interactive-input-filled: var(--color-gray-950);
  --icon-interactive-slider-list-default: var(--color-brand-500);
  --icon-interactive-slider-list-hover: var(--color-brand-500);
  --icon-interactive-slider-list-selected: var(--color-brand-500);
  --icon-interactive-slider-list-disabled: var(--color-gray-400);
  --icon-interactive-accordion-default: var(--color-gray-500);
  --icon-interactive-accordion-disabled: var(--color-gray-400);
  --icon-interactive-table-secondary-icon-default: var(--color-gray-500);
  --icon-interactive-table-secondary-icon-hover: var(--color-gray-950);
  --icon-interactive-table-secondary-icon-disabled: var(--color-gray-400);
  --icon-container-neutral-default: var(--color-gray-950);
  --icon-container-neutral-subtle: var(--color-gray-600);
  --icon-container-neutral-inverse: var(--color-gray-50);
  --icon-container-neutral-disabled: var(--color-gray-400);
  --icon-container-neutral-muted: var(--color-gray-300);
  --icon-container-brand-soft: var(--color-brand-500);
  --icon-container-brand-default: var(--color-brand-500);
  --icon-container-accent-soft: var(--color-purple-500);
  --icon-container-accent-default: var(--color-purple-500);
  --icon-container-status-success-soft: var(--color-green-500);
  --icon-container-status-success-default: var(--color-green-500);
  --icon-container-status-success-strong: var(--color-green-600);
  --icon-container-status-warning-soft: var(--color-yellow-500);
  --icon-container-status-warning-default: var(--color-yellow-500);
  --icon-container-status-warning-strong: var(--color-yellow-600);
  --icon-container-status-danger-soft: var(--color-red-500);
  --icon-container-status-danger-default: var(--color-red-500);
  --icon-container-status-danger-strong: var(--color-red-600);
  --icon-container-status-info-soft: var(--color-blue-500);
  --icon-container-status-info-default: var(--color-blue-500);
  --icon-container-status-info-strong: var(--color-blue-600);
  --icon-container-elevated-info-panel-info-panel: var(--color-gray-300);
  --icon-container-elevated-toast-default: var(--color-gray-950);
  --icon-container-navigation-row-default: var(--color-gray-950);
  --icon-container-navigation-row-hover: var(--color-brand-500);
  --icon-container-navigation-row-selected: var(--color-brand-500);
  --icon-container-navigation-row-disabled: var(--color-gray-400);
  --icon-container-metrics-default: var(--color-brand-500);
  --icon-container-table-icon-default: var(--color-gray-950);
  --icon-container-table-icon-hover: var(--color-brand-500);
  --icon-container-table-icon-pressed: var(--color-brand-500);
  --icon-container-table-icon-disabled: var(--color-gray-400);
  --icon-container-table-pin-default: var(--color-gray-500);
  --icon-container-table-pin-hover: var(--color-gray-500);
  --icon-container-table-pin-pressed: var(--color-gray-500);
  --icon-container-table-pin-disabled: var(--color-gray-400);
  --icon-container-table-pin-selected: var(--color-brand-500);
  --icon-container-column-bar-default: var(--color-gray-600);
  --icon-container-column-bar-hover: var(--color-brand-500);
  --icon-container-column-bar-disabled: var(--color-gray-400);
  --icon-container-tag-success-soft: var(--color-green-500);
  --icon-container-tag-warning-soft: var(--color-yellow-500);
  --icon-container-tag-danger-soft: var(--color-red-500);
  --icon-container-tag-info-soft: var(--color-blue-500);
  --icon-container-tag-neutral-soft: var(--color-gray-500);
  --icon-container-tag-brand-soft: var(--color-brand-500);
  --icon-container-tag-accent-soft: var(--color-purple-500);
  --icon-container-map-neutral-dark: var(--color-gray-500);
  --icon-container-map-blue-light: var(--color-blue-500);
  --icon-container-map-neutral-light: var(--color-gray-50);
  --icon-container-map-green-light: var(--color-green-500);
  --icon-container-map-blue-dark: var(--color-blue-600);
  --icon-container-map-green-dark: var(--color-green-600);
  --icon-persistent-control-on: var(--color-gray-50);
  --icon-persistent-control-off: var(--color-gray-500);
  --icon-persistent-control-disabled: var(--color-gray-400);
  --icon-persistent-indicator-on: var(--color-brand-500);
  --icon-persistent-indicator-off: var(--color-gray-500);
  --icon-persistent-indicator-disabled: var(--color-gray-300);
  --icon-persistent-toggle-on: var(--color-brand-500);
  --icon-persistent-toggle-off: var(--color-gray-500);
  --icon-persistent-toggle-disabled: var(--color-gray-400);
  --icon-persistent-tab-default: var(--color-gray-500);
  --icon-persistent-tab-hover: var(--color-brand-500);
  --icon-persistent-tab-seleted: var(--color-brand-500);
  --icon-persistent-tab-disabled: var(--color-gray-400);
  --icon-persistent-wizard-selected: var(--color-green-500);
  --icon-persistent-wizard-default: var(--color-gray-300);
  --icon-persistent-wizard-inverse: var(--color-gray-50);
  --scrollbar-thumb-default: var(--color-gray-400);
  --raw-text-primary: var(--color-gray-950);
  --raw-text-secondary: var(--color-gray-400);
  --raw-text-disabled: var(--color-gray-300);
  --raw-text-active: var(--color-brand-500);
  --raw-text-accent: var(--color-purple-500);
  --raw-text-success: var(--color-green-500);
  --raw-text-warning: var(--color-yellow-500);
  --raw-text-danger: var(--color-red-500);
  --raw-text-info: var(--color-blue-500);
  --raw-icon-default: var(--color-gray-950);
  --raw-icon-subtle: var(--color-gray-400);
  --raw-icon-disabled: var(--color-gray-300);
  --raw-icon-active: var(--color-brand-500);
  --raw-icon-accent: var(--color-purple-500);
  --raw-icon-success: var(--color-green-500);
  --raw-icon-warning: var(--color-yellow-500);
  --raw-icon-danger: var(--color-red-500);
  --raw-icon-info: var(--color-blue-500);
  --raw-border-default: var(--color-gray-400);
  --raw-border-disabled: var(--color-gray-300);
  --raw-border-active: var(--color-brand-200);
  --raw-border-accent: var(--color-purple-500);
  --raw-border-success: var(--color-green-500);
  --raw-border-warning: var(--color-yellow-500);
  --raw-border-danger: var(--color-red-500);
  --raw-border-info: var(--color-blue-500);
  --raw-border-strong: var(--color-gray-400);
  --raw-border-brand: var(--color-brand-500);
  --raw-background-strong: var(--color-gray-400);
  --raw-background-default: var(--color-gray-50);
  --raw-background-disabled: var(--color-gray-300);
  --raw-background-active: var(--color-brand-100);
  --raw-background-subtle-1: var(--color-gray-200);
  --raw-background-subtlest: var(--color-gray-100);
  --raw-background-elevated: var(--color-gray-500);
  --raw-background-subtle-2: var(--color-gray-50);
  --raw-background-brand: var(--color-brand-500);
  --raw-background-accent: var(--color-purple-500);
  --illustrations-background: var(--color-gray-200);
  --illustrations-shape-primary: var(--color-gray-400);
  --illustrations-shape-secondary: var(--color-gray-300);
  --illustrations-shape-tertiary: var(--color-gray-100);
  --illustrations-accent-primary: var(--color-purple-500);
  --illustrations-accent-secondary: var(--color-purple-300);
  --illustrations-icon-secondary: var(--color-gray-400);
  --illustrations-icon-primary: var(--color-gray-200);
  --illustrations-accent-tertiary: var(--color-purple-300);
  --illustrations-shape-strongest: var(--color-gray-50);
  --illustrations-shape-strong: var(--color-gray-300);
}