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

Kelvin UI Components

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

body, [data-theme] {
  --button-height-regular: var(--size-4xl);
  --button-height-compact: var(--size-2xl);
  --button-padding-x-regular: var(--spacing-2xl);
  --button-padding-x-compact: var(--spacing-xl);
  --button-padding-y-regular: var(--spacing-lg);
  --button-padding-y-compact: var(--spacing-sm);
  --button-gap-regular: var(--spacing-md);
  --button-gap-compact: var(--spacing-md);
  --button-primary-background-disabled: var(--background-interactive-brand-disabled);
  --button-primary-background-pressed: var(--background-interactive-brand-pressed);
  --button-primary-background-hover: var(--background-interactive-brand-hover);
  --button-primary-background-default: var(--background-interactive-brand-default);
  --button-primary-label-disabled: var(--text-on-color-neutral-disabled);
  --button-primary-label-default: var(--text-on-color-neutral-primary);
  --button-primary-icon-size-compact: var(--size-default);
  --button-primary-icon-size-regular: var(--size-default);
  --button-primary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --button-primary-icon-color-default: var(--icon-on-color-neutral-primary);
  --button-secondary-background-hover: var(--background-interactive-neutral-hover);
  --button-secondary-background-pressed: var(--background-interactive-neutral-pressed);
  --button-secondary-background-disabled: var(--background-interactive-neutral-disabled);
  --button-secondary-label-default: var(--text-surface-neutral-primary);
  --button-secondary-label-disabled: var(--text-on-color-neutral-disabled);
  --button-secondary-label-subtle: var(--text-on-color-neutral-primary);
  --button-secondary-icon-size-regular: var(--size-default);
  --button-secondary-icon-size-compact: var(--size-default);
  --button-secondary-icon-color-default: var(--icon-surface-neutral-primary);
  --button-secondary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --button-secondary-icon-color-subtle: var(--icon-on-color-neutral-primary);
  --button-secondary-border-color-default: var(--border-interactive-neutral-default);
  --button-secondary-border-color-hover: var(--border-interactive-neutral-default);
  --button-secondary-border-color-pressed: var(--border-interactive-neutral-subtle);
  --button-secondary-border-thickness-default: var(--border-width-default);
  --button-tertiary-background-hover: var(--background-interactive-neutral-hover);
  --button-tertiary-background-pressed: var(--background-interactive-neutral-pressed);
  --button-tertiary-background-disabled: var(--background-interactive-neutral-disabled);
  --button-tertiary-label-default: var(--text-surface-neutral-primary);
  --button-tertiary-label-subtle: var(--text-on-color-neutral-primary);
  --button-tertiary-label-disabled: var(--text-on-color-neutral-disabled);
  --button-tertiary-icon-size-regular: var(--size-default);
  --button-tertiary-icon-size-compact: var(--size-default);
  --button-tertiary-icon-color-default: var(--icon-surface-neutral-primary);
  --button-tertiary-icon-color-subtle: var(--icon-on-color-neutral-primary);
  --button-tertiary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --button-text-label-default: var(--text-surface-neutral-secondary);
  --button-text-label-disabled: var(--text-on-color-neutral-disabled);
  --button-text-icon-size-regular: var(--size-default);
  --button-text-icon-color-default: var(--icon-surface-neutral-secondary);
  --button-text-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --button-radius-regular: var(--radius-md);
  --button-radius-compact: var(--radius-md);
  --button-danger-background-default: var(--background-interactive-danger-default);
  --button-danger-background-hover: var(--background-interactive-danger-hover);
  --button-danger-background-pressed: var(--background-interactive-danger-pressed);
  --button-danger-background-disabled: var(--background-interactive-danger-disabled);
  --button-danger-label-default: var(--text-on-color-neutral-primary);
  --button-danger-label-disabled: var(--text-on-color-neutral-disabled);
  --button-danger-icon-size-regular: var(--size-default);
  --button-danger-icon-size-compact: var(--size-default);
  --button-danger-icon-color-default: var(--icon-on-color-neutral-primary);
  --button-danger-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --icon-button-height-regular: var(--size-4xl);
  --icon-button-height-compact: var(--size-2xl);
  --icon-button-padding-x-regular: var(--spacing-md);
  --icon-button-padding-x-compact: var(--spacing-sm);
  --icon-button-padding-y-regular: var(--spacing-md);
  --icon-button-padding-y-compact: var(--spacing-sm);
  --icon-button-primary-background-default: var(--background-interactive-brand-default);
  --icon-button-primary-background-hover: var(--background-interactive-brand-hover);
  --icon-button-primary-background-pressed: var(--background-interactive-brand-pressed);
  --icon-button-primary-background-disabled: var(--background-interactive-brand-disabled);
  --icon-button-primary-icon-size-regular: var(--size-xl);
  --icon-button-primary-icon-size-compact: var(--size-lg);
  --icon-button-primary-icon-color-default: var(--icon-on-color-neutral-primary);
  --icon-button-primary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --icon-button-secondary-border-color-default: var(--border-interactive-neutral-default);
  --icon-button-secondary-border-color-hover: var(--border-interactive-neutral-default);
  --icon-button-secondary-border-color-pressed: var(--border-interactive-neutral-subtle);
  --icon-button-secondary-border-thickness-default: var(--border-width-default);
  --icon-button-secondary-background-hover: var(--background-interactive-neutral-hover);
  --icon-button-secondary-background-pressed: var(--background-interactive-neutral-pressed);
  --icon-button-secondary-background-disabled: var(--background-interactive-neutral-disabled);
  --icon-button-secondary-icon-size-regular: var(--size-xl);
  --icon-button-secondary-icon-size-compact: var(--size-lg);
  --icon-button-secondary-icon-color-default: var(--icon-surface-neutral-primary);
  --icon-button-secondary-icon-color-subtle: var(--icon-on-color-neutral-primary);
  --icon-button-secondary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --icon-button-tertiary-background-hover: var(--background-interactive-neutral-hover);
  --icon-button-tertiary-background-pressed: var(--background-interactive-neutral-pressed);
  --icon-button-tertiary-background-disabled: var(--background-interactive-neutral-disabled);
  --icon-button-tertiary-icon-size-regular: var(--size-xl);
  --icon-button-tertiary-icon-size-compact: var(--size-lg);
  --icon-button-tertiary-icon-color-default: var(--icon-surface-neutral-primary);
  --icon-button-tertiary-icon-color-subtle: var(--icon-on-color-neutral-primary);
  --icon-button-tertiary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --icon-button-danger-background-default: var(--background-interactive-danger-default);
  --icon-button-danger-background-hover: var(--background-interactive-danger-hover);
  --icon-button-danger-background-pressed: var(--background-interactive-danger-pressed);
  --icon-button-danger-background-disabled: var(--background-interactive-danger-disabled);
  --icon-button-danger-icon-size-regular: var(--size-xl);
  --icon-button-danger-icon-size-compact: var(--size-lg);
  --icon-button-danger-icon-color-default: var(--icon-on-color-neutral-primary);
  --icon-button-danger-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --icon-button-radius-regular: var(--radius-md);
  --icon-button-radius-compact: var(--radius-md);
  --link-label-default: var(--text-interactive-link-default);
  --link-label-hover: var(--text-interactive-link-hover);
  --link-label-visited: var(--text-interactive-link-visited);
  --link-label-disabled: var(--text-interactive-link-disabled);
  --link-decoration-color-hover: var(--text-interactive-decoration-hover);
  --link-decoration-thickness-default: var(--border-width-default);
  --link-icon-color-default: var(--icon-interactive-link-default);
  --link-icon-color-hover: var(--icon-interactive-link-hover);
  --link-icon-color-visited: var(--icon-interactive-link-visited);
  --link-icon-color-disabled: var(--icon-interactive-link-disabled);
  --link-icon-size-default: var(--size-default);
  --link-gap-default: var(--spacing-md);
  --tooltip-text-default: var(--text-container-elevated-tooltip-default);
  --tooltip-background-default: var(--background-container-elevated-tooltip);
  --tooltip-radius-default: var(--radius-sm);
  --tooltip-padding-x-default: var(--spacing-md);
  --tooltip-padding-y-default: var(--spacing-sm);
  --info-panel-padding-x-default: var(--spacing-md);
  --info-panel-padding-y-default: var(--spacing-md);
  --info-panel-radius-default: var(--radius-md);
  --info-panel-title-default: var(--text-container-elevated-info-panel-default);
  --info-panel-background-default: var(--background-container-elevated-info-panel);
  --info-panel-content-default: var(--text-container-elevated-info-panel-default);
  --info-panel-content-subtle: var(--text-container-elevated-info-panel-subtle);
  --info-panel-gap-default: var(--spacing-md);
  --info-panel-icon-color-default: var(--icon-container-elevated-info-panel-info-panel);
  --tab-primary-padding-x-default: var(--spacing-4xl);
  --tab-primary-label-default: var(--text-persistent-indicator-off);
  --tab-primary-label-selected: var(--text-persistent-indicator-on);
  --tab-primary-label-disabled: var(--text-persistent-indicator-disabled);
  --tab-primary-border-color-default: var(--border-persistent-indicator-off);
  --tab-primary-border-color-selected: var(--border-persistent-indicator-on);
  --tab-primary-border-color-disabled: var(--border-persistent-indicator-disabled);
  --tab-primary-border-thickness-default: var(--border-width-default);
  --tab-primary-border-thickness-strong: var(--border-width-strong);
  --tab-secondary-padding-x-default: var(--spacing-xl);
  --tab-secondary-padding-y-default: var(--spacing-sm);
  --tab-secondary-radius-default: var(--radius-md);
  --tab-secondary-label-default: var(--text-persistent-tab-default);
  --tab-secondary-label-selected: var(--text-persistent-tab-seleted);
  --tab-secondary-label-disabled: var(--text-persistent-tab-disabled);
  --tab-secondary-label-hover: var(--text-persistent-tab-hover);
  --tab-secondary-background-hover: var(--background-persistent-tab-hover);
  --tab-secondary-background-disabled: var(--background-persistent-tab-disabled);
  --tab-secondary-background-selected: var(--background-persistent-tab-selected);
  --tab-secondary-height-default: var(--size-2xl);
  --tab-secondary-border-color-default: var(--border-persistent-tab-seleted);
  --tab-secondary-border-color-disabled: var(--border-persistent-tab-disabled);
  --tab-secondary-border-thickness-default: var(--border-width-default);
  --tab-secondary-gap-default: var(--radius-xl);
  --tab-secondary-counter-background-default: var(--background-interactive-counter-default);
  --tab-secondary-counter-background-disabled: var(--background-interactive-counter-disabled);
  --tab-secondary-counter-background-hover: var(--background-interactive-counter-hover);
  --tab-secondary-counter-background-selected: var(--background-interactive-counter-selected);
  --tab-secondary-counter-number-hover: var(--text-interactive-counter-hover);
  --tab-secondary-counter-number-default: var(--text-interactive-counter-default);
  --tab-secondary-counter-number-selected: var(--text-interactive-counter-selected);
  --tab-secondary-counter-number-disabled: var(--text-interactive-counter-disabled);
  --input-text-text-input-default: var(--text-interactive-input-default);
  --input-text-text-input-selected: var(--text-interactive-input-selected);
  --input-text-text-input-filled: var(--text-interactive-input-filled);
  --input-text-text-input-disabled: var(--text-interactive-input-disabled);
  --input-text-label-default: var(--text-surface-neutral-tertiary);
  --input-text-helper-text-default: var(--text-surface-neutral-tertiary);
  --input-text-helper-text-error: var(--text-container-status-danger-default);
  --input-text-required-default: var(--text-surface-danger-default);
  --input-gap-horizontal-horizontal: var(--spacing-xs);
  --input-gap-vertical-default: var(--spacing-xs);
  --input-gap-vertical-small: var(--spacing-2xs);
  --input-height-regular: var(--size-4xl);
  --input-height-compact: var(--size-2xl);
  --input-padding-x-regular: var(--spacing-md);
  --input-padding-x-compact: var(--spacing-md);
  --input-radius-regular: var(--radius-md);
  --input-radius-compact: var(--radius-md);
  --input-background-default: var(--background-container-input-default);
  --input-background-disabled: var(--background-container-input-disabled);
  --input-icon-size-regular: var(--size-default);
  --input-icon-color-default: var(--icon-surface-neutral-tertiary);
  --input-border-color-default: var(--border-interactive-input-default);
  --input-border-color-selected: var(--border-interactive-input-selected);
  --input-border-color-filled: var(--border-interactive-input-filled);
  --input-border-color-error: var(--border-interactive-input-error);
  --input-border-color-disabled: var(--border-interactive-input-disabled);
  --input-border-thickness-default: var(--border-width-default);
  --search-height-regular: var(--size-4xl);
  --search-height-compact: var(--size-2xl);
  --search-padding-x-regular: var(--spacing-md);
  --search-padding-x-compact: var(--spacing-md);
  --search-radius-regular: var(--radius-md);
  --search-radius-compact: var(--radius-md);
  --search-gap-default: var(--spacing-xs);
  --search-background-default: var(--background-container-input-default);
  --search-background-disabled: var(--background-container-input-disabled);
  --search-icon-size-regular: var(--size-default);
  --search-icon-size-large: var(--size-lg);
  --search-icon-color-default: var(--icon-interactive-input-default);
  --search-icon-color-selected: var(--icon-interactive-input-selected);
  --search-icon-color-disabled: var(--icon-interactive-input-disabled);
  --search-icon-color-filled: var(--icon-interactive-input-filled);
  --search-text-default: var(--text-interactive-input-default);
  --search-text-selected: var(--text-interactive-input-selected);
  --search-text-filled: var(--text-interactive-input-filled);
  --search-text-disabled: var(--text-interactive-input-disabled);
  --search-border-thickness-default: var(--border-width-default);
  --search-border-color-default: var(--border-interactive-input-default);
  --search-border-color-selected: var(--border-interactive-input-selected);
  --search-border-color-filled: var(--border-interactive-input-filled);
  --search-border-color-disabled: var(--border-interactive-input-disabled);
  --toast-padding-x-default: var(--spacing-2xl);
  --toast-padding-y-default: var(--spacing-2xl);
  --toast-main-message-default: var(--text-container-elevated-toast-default);
  --toast-icon-color-success: var(--icon-container-status-success-default);
  --toast-icon-color-warning: var(--icon-container-status-warning-default);
  --toast-icon-color-error: var(--icon-container-status-danger-default);
  --toast-icon-color-info: var(--icon-container-status-info-default);
  --toast-icon-color-default: var(--icon-container-elevated-toast-default);
  --toast-icon-size-default: var(--size-default);
  --toast-icon-size-large: var(--size-lg);
  --toast-secondary-message-default: var(--text-container-elevated-toast-subtle);
  --toast-background-default: var(--background-container-elevated-toast);
  --toast-gap-horizontal: var(--spacing-xs);
  --toast-gap-vertical: var(--spacing-2xl);
  --toast-border-color-success: var(--border-container-status-success-default);
  --toast-border-color-warning: var(--border-container-status-warning-default);
  --toast-border-color-error: var(--border-container-status-danger-default);
  --toast-border-color-info: var(--border-container-status-info-default);
  --toast-border-thickness-default: var(--border-width-strong);
  --alert-background-primary-success: var(--background-container-status-success-strong);
  --alert-background-primary-warning: var(--background-container-status-warning-strong);
  --alert-background-primary-error: var(--background-container-status-danger-strong);
  --alert-background-primary-info: var(--background-container-status-info-strong);
  --alert-background-secondary-default: var(--background-container-alert-secondary-default);
  --alert-padding-x-default: var(--spacing-2xl);
  --alert-padding-x-small: var(--spacing-xl);
  --alert-padding-y-default: var(--spacing-2xl);
  --alert-padding-y-small: var(--spacing-xl);
  --alert-text-default: var(--text-on-color-alert-neutral-default);
  --alert-text-subtle: var(--text-on-color-alert-neutral-subtle);
  --alert-icon-color-primary-success: var(--icon-on-color-alert-success);
  --alert-icon-color-primary-warning: var(--icon-on-color-alert-warning);
  --alert-icon-color-primary-danger: var(--icon-on-color-alert-danger);
  --alert-icon-color-primary-info: var(--icon-on-color-alert-info);
  --alert-icon-color-secondary-success: var(--icon-container-status-success-default);
  --alert-icon-color-secondary-warning: var(--icon-container-status-warning-default);
  --alert-icon-color-secondary-danger: var(--icon-container-status-danger-default);
  --alert-icon-color-secondary-info: var(--icon-container-status-info-default);
  --alert-icon-size-large: var(--size-xl);
  --alert-icon-size-default: var(--size-default);
  --alert-gap-horizontal-default: var(--spacing-xs);
  --alert-gap-horizontal-large: var(--spacing-xl);
  --alert-gap-vertical-small: var(--spacing-xl);
  --alert-gap-vertical-default: var(--spacing-2xl);
  --alert-gap-vertical-extra-small: var(--spacing-md);
  --alert-radius-default: var(--radius-md);
  --alert-button-text-success-default: var(--text-on-color-alert-success-default);
  --alert-button-text-success-hover: var(--text-on-color-alert-success-inverse);
  --alert-button-text-success-pressed: var(--text-on-color-alert-success-inverse);
  --alert-button-text-warning-default: var(--text-on-color-alert-warning-default);
  --alert-button-text-warning-hover: var(--text-on-color-alert-warning-inverse);
  --alert-button-text-warning-pressed: var(--text-on-color-alert-warning-inverse);
  --alert-button-text-danger-default: var(--text-on-color-alert-danger-default);
  --alert-button-text-danger-hover: var(--text-on-color-alert-danger-inverse);
  --alert-button-text-danger-pressed: var(--text-on-color-alert-danger-inverse);
  --alert-button-text-info-default: var(--text-on-color-alert-info-default);
  --alert-button-text-info-hover: var(--text-on-color-alert-info-inverse);
  --alert-button-text-info-pressed: var(--text-on-color-alert-info-inverse);
  --alert-button-border-success: var(--border-on-color-button-alert-success);
  --alert-button-border-warning: var(--border-on-color-button-alert-warning);
  --alert-button-border-danger: var(--border-on-color-button-alert-danger);
  --alert-button-border-info: var(--border-on-color-button-alert-info);
  --alert-button-background-success: var(--background-container-button-alert-success);
  --alert-button-background-warning: var(--background-container-button-alert-warning);
  --alert-button-background-danger: var(--background-container-button-alert-danger);
  --alert-button-background-info: var(--background-container-button-alert-info);
  --alert-button-icon-success: var(--icon-on-color-alert-success);
  --alert-button-icon-warning: var(--icon-on-color-alert-warning);
  --alert-button-icon-danger: var(--icon-on-color-alert-danger);
  --alert-button-icon-info: var(--icon-on-color-alert-info);
  --alert-divider-default: var(--border-on-color-neutral-default);
  --switch-radius-default: var(--radius-sm);
  --switch-background-on: var(--background-persistent-control-on-defaullt);
  --switch-background-off: var(--background-persistent-control-off-neutral);
  --switch-background-disabled: var(--background-persistent-control-disabled-default);
  --switch-icon-size-regular: var(--size-lg);
  --switch-icon-size-compact: var(--size-default);
  --switch-icon-color-default: var(--icon-persistent-control-on);
  --switch-icon-color-disabled: var(--icon-persistent-control-disabled);
  --switch-height-regular: var(--size-lg);
  --switch-height-compact: var(--size-md);
  --switch-width-regular: var(--size-4xl);
  --switch-width-compact: var(--size-3xl);
  --toggle-height-regular: var(--size-4xl);
  --toggle-height-compact: var(--size-2xl);
  --toggle-radius-default: var(--radius-md);
  --toggle-background-on: var(--background-persistent-control-on-subtle);
  --toggle-background-disabled: var(--background-persistent-control-disabled-default);
  --toggle-icon-size-default: var(--size-default);
  --toggle-icon-color-on: var(--icon-persistent-toggle-on);
  --toggle-icon-color-disabled: var(--icon-persistent-toggle-disabled);
  --toggle-icon-color-off: var(--icon-persistent-toggle-off);
  --toggle-border-color-on: var(--border-persistent-control-on);
  --toggle-border-color-disabled: var(--border-persistent-control-disabled);
  --toggle-border-color-off: var(--border-persistent-control-off);
  --toggle-border-thickness-default: var(--border-width-default);
  --toggle-text-on: var(--text-persistent-control-on);
  --toggle-text-disabled: var(--text-persistent-control-disabled);
  --toggle-text-off: var(--text-persistent-control-off);
  --toggle-padding-x-default: var(--spacing-xl);
  --magic-button-height-regular: var(--size-4xl);
  --magic-button-height-compact: var(--size-2xl);
  --magic-button-padding-x-regular: var(--spacing-2xl);
  --magic-button-padding-x-compact: var(--spacing-xl);
  --magic-button-padding-y-regular: var(--spacing-lg);
  --magic-button-padding-y-compact: var(--spacing-sm);
  --magic-button-gap-regular: var(--spacing-md);
  --magic-button-gap-compact: var(--spacing-md);
  --magic-button-radius-regular: var(--radius-md);
  --magic-button-radius-compact: var(--radius-md);
  --magic-button-primary-background-default: var(--background-interactive-accent-primary-default);
  --magic-button-primary-background-hover: var(--background-interactive-accent-primary-hover);
  --magic-button-primary-background-pressed: var(--background-interactive-accent-primary-pressed);
  --magic-button-primary-background-disabled: var(--background-interactive-accent-primary-disabled);
  --magic-button-primary-label-default: var(--text-on-color-accent-default);
  --magic-button-primary-label-disabled: var(--text-on-color-accent-disabled);
  --magic-button-primary-icon-size-regular: var(--size-default);
  --magic-button-primary-icon-size-compact: var(--size-default);
  --magic-button-primary-icon-color-default: var(--icon-on-color-accent-default);
  --magic-button-primary-icon-color-disabled: var(--icon-on-color-accent-disabled);
  --magic-button-secondary-border-thickness-default: var(--border-width-default);
  --magic-button-secondary-border-color-default: var(--border-interactive-accent-default);
  --magic-button-secondary-border-color-hover: var(--border-interactive-accent-default);
  --magic-button-secondary-border-color-pressed: var(--border-interactive-accent-default);
  --magic-button-secondary-background-hover: var(--background-interactive-accent-secondary-hover);
  --magic-button-secondary-background-pressed: var(--background-interactive-accent-secondary-pressed);
  --magic-button-secondary-background-disabled: var(--background-interactive-accent-secondary-disabled);
  --magic-button-secondary-label-default: var(--text-surface-accent-default);
  --magic-button-secondary-label-subtle: var(--text-on-color-neutral-secondary);
  --magic-button-secondary-label-disabled: var(--text-on-color-neutral-disabled);
  --magic-button-secondary-icon-size-regular: var(--size-default);
  --magic-button-secondary-icon-size-compact: var(--size-default);
  --magic-button-secondary-icon-color-default: var(--icon-surface-accent-default);
  --magic-button-secondary-icon-color-subtle: var(--icon-on-color-neutral-primary);
  --magic-button-secondary-icon-color-disabled: var(--icon-on-color-neutral-disabled);
  --dropdown-height-regular: var(--size-4xl);
  --dropdown-height-compact: var(--size-2xl);
  --dropdown-padding-x-regular: var(--spacing-md);
  --dropdown-padding-x-compact: var(--spacing-md);
  --dropdown-radius-regular: var(--radius-md);
  --dropdown-radius-compact: var(--radius-md);
  --dropdown-gap-horizontal-horizontal: var(--spacing-xs);
  --dropdown-gap-vertical-default: var(--spacing-xs);
  --dropdown-gap-vertical-small: var(--spacing-2xs);
  --dropdown-background-default: var(--background-container-input-default);
  --dropdown-background-disabled: var(--background-container-input-disabled);
  --dropdown-text-text-default: var(--text-interactive-input-default);
  --dropdown-text-text-selected: var(--text-interactive-input-selected);
  --dropdown-text-text-filled: var(--text-interactive-input-filled);
  --dropdown-text-text-disabled: var(--text-interactive-input-disabled);
  --dropdown-text-helper-text-default: var(--text-surface-neutral-tertiary);
  --dropdown-text-helper-text-error: var(--text-container-status-danger-default);
  --dropdown-icon-size-regular: var(--size-lg);
  --dropdown-icon-color-input-default: var(--icon-interactive-input-default);
  --dropdown-icon-color-input-selected: var(--icon-interactive-input-selected);
  --dropdown-icon-color-input-filled: var(--icon-interactive-input-filled);
  --dropdown-icon-color-input-disabled: var(--icon-interactive-input-disabled);
  --dropdown-icon-color-helper-text-default: var(--icon-surface-neutral-tertiary);
  --dropdown-icon-color-helper-text-error: var(--icon-surface-status-danger-soft);
  --dropdown-border-color-default: var(--border-interactive-input-default);
  --dropdown-border-color-selected: var(--border-interactive-input-selected);
  --dropdown-border-color-filled: var(--border-interactive-input-filled);
  --dropdown-border-color-error: var(--border-container-status-danger-default);
  --dropdown-border-color-disabled: var(--border-interactive-input-disabled);
  --dropdown-border-thickness-default: var(--border-width-default);
  --inline-link-gap-default: var(--spacing-md);
  --inline-link-label-default: var(--text-interactive-link-default);
  --inline-link-label-hover: var(--text-interactive-link-hover);
  --inline-link-label-visited: var(--text-interactive-link-visited);
  --inline-link-label-disabled: var(--text-interactive-link-disabled);
  --inline-link-decoration-thickness-default: var(--border-width-default);
  --inline-link-decoration-color-hover: var(--text-interactive-decoration-hover);
  --inline-link-decoration-color-default: var(--text-interactive-decoration-default);
  --inline-link-decoration-color-visited: var(--text-interactive-decoration-visited);
  --inline-link-decoration-color-disabled: var(--text-interactive-decoration-disabled);
  --inline-link-icon-size-default: var(--size-default);
  --inline-link-icon-color-default: var(--icon-interactive-link-default);
  --inline-link-icon-color-hover: var(--icon-interactive-link-hover);
  --inline-link-icon-color-visited: var(--icon-interactive-link-visited);
  --inline-link-icon-color-disabled: var(--icon-interactive-link-disabled);
  --text-area-height-default: var(--size-4xl);
  --text-area-padding-x-default: var(--spacing-xl);
  --text-area-padding-y-default: var(--spacing-md);
  --text-area-radius-default: var(--radius-md);
  --text-area-gap-default: var(--spacing-md);
  --text-area-icon-size-default: var(--size-lg);
  --text-area-icon-color-default: var(--icon-surface-neutral-secondary);
  --text-area-text-default: var(--text-interactive-text-area-default);
  --text-area-text-hover: var(--text-interactive-text-area-hover);
  --text-area-text-selected: var(--text-interactive-text-area-selected);
  --text-area-text-filled: var(--text-interactive-text-area-filled);
  --text-area-border-color-default: var(--border-interactive-text-area-default);
  --text-area-border-color-hover: var(--border-interactive-text-area-hover);
  --text-area-border-color-selected: var(--border-interactive-text-area-selected);
  --text-area-border-color-filled: var(--border-interactive-text-area-filled);
  --text-area-border-thickness-default: var(--border-width-default);
  --text-area-helper-text-default: var(--text-surface-neutral-tertiary);
  --slider-radius-default: var(--radius-md);
  --slider-gap-default: var(--spacing-xl);
  --slider-border-color-default: var(--border-container-elevated-default);
  --slider-border-thickness-default: var(--border-width-default);
  --slider-padding-default: var(--spacing-xl);
  --slider-background-default: var(--background-container-elevated-slider);
  --table-padding-x-default: var(--spacing-2xl);
  --table-padding-x-small: var(--spacing-md);
  --table-padding-y-default: var(--spacing-md);
  --table-padding-y-spacious: var(--spacing-xl);
  --table-gap-default: var(--spacing-2xl);
  --table-gap-compact: var(--spacing-md);
  --table-border-cell-color-default: var(--border-container-neutral-subtle);
  --table-border-cell-thickness-default: var(--border-width-default);
  --table-border-container-color-default: var(--border-container-table-default);
  --table-border-container-color-inverse: var(--border-container-table-inverse);
  --table-border-container-thickness-default: var(--border-width-default);
  --table-background-state-default: var(--background-interactive-table-cell-state-default);
  --table-background-state-hover: var(--background-interactive-table-cell-state-hover);
  --table-background-state-selected: var(--background-interactive-table-cell-state-selected);
  --table-background-state-disabled: var(--background-interactive-table-cell-state-disabled);
  --table-background-level-subtle: var(--background-interactive-table-cell-level-subtle);
  --table-background-level-strong: var(--background-interactive-table-cell-level-strong);
  --table-text-main-default: var(--text-container-neutral-default);
  --table-text-main-subtle: var(--text-container-neutral-subtle);
  --table-text-main-disabled: var(--text-container-neutral-disabled);
  --table-text-secondary-default: var(--text-interactive-table-secondary-text-default);
  --table-text-secondary-hover: var(--text-interactive-table-secondary-text-hover);
  --table-text-secondary-disabled: var(--text-interactive-table-secondary-text-disabled);
  --table-height-default: var(--size-6xl);
  --table-height-spacious: var(--size-7xl);
  --table-height-small: var(--size-4xl);
  --table-divider-default: var(--border-container-neutral-default);
  --table-icon-main-default: var(--icon-container-neutral-default);
  --table-icon-main-subtle: var(--icon-container-neutral-subtle);
  --table-icon-main-disabled: var(--icon-container-neutral-disabled);
  --table-icon-secondary-hover: var(--icon-interactive-table-secondary-icon-hover);
  --table-icon-secondary-default: var(--icon-interactive-table-secondary-icon-default);
  --table-icon-secondary-disabled: var(--icon-interactive-table-secondary-icon-disabled);
  --editable-table-height-small: var(--size-4xl);
  --editable-table-height-default: var(--size-6xl);
  --editable-table-padding-x-default: var(--spacing-2xl);
  --editable-table-padding-y-default: var(--spacing-lg);
  --editable-table-gap-default: var(--spacing-md);
  --editable-table-gap-none: var(--spacing-none);
  --editable-table-border-color-default: var(--border-interactive-editable-cell-default);
  --editable-table-border-color-selected: var(--border-interactive-editable-cell-selected);
  --editable-table-border-color-error: var(--border-interactive-editable-cell-error);
  --editable-table-border-thickness-default: var(--border-width-default);
  --editable-table-background-state-default: var(--background-interactive-table-editable-cell-state-default);
  --editable-table-background-state-filled: var(--background-interactive-table-editable-cell-state-filled);
  --editable-table-background-state-selected: var(--background-interactive-table-editable-cell-state-selected);
  --editable-table-background-state-blocked: var(--background-interactive-table-editable-cell-state-blocked);
  --editable-table-background-level-subtle: var(--background-interactive-table-editable-cell-level-subtle);
  --editable-table-background-level-strong: var(--background-interactive-table-editable-cell-level-strong);
  --editable-table-text-default: var(--text-container-neutral-default);
  --editable-table-text-disabled: var(--text-container-neutral-disabled);
  --editable-table-text-subtle: var(--text-container-neutral-subtle);
  --editable-table-icon-default: var(--icon-container-neutral-default);
  --editable-table-icon-disabled: var(--icon-container-neutral-disabled);
  --editable-table-icon-error: var(--icon-container-status-danger-default);
  --editable-table-icon-info: var(--icon-container-status-info-default);
  --icon-tab-height-default: var(--size-2xl);
  --icon-tab-padding-x-default: var(--spacing-sm);
  --icon-tab-padding-y-default: var(--spacing-sm);
  --icon-tab-radius-default: var(--radius-md);
  --icon-tab-icon-color-default: var(--icon-persistent-tab-default);
  --icon-tab-icon-color-hover: var(--icon-persistent-tab-hover);
  --icon-tab-icon-color-selected: var(--icon-persistent-tab-seleted);
  --icon-tab-icon-color-disabled: var(--icon-persistent-tab-disabled);
  --icon-tab-icon-size-default: var(--size-lg);
  --icon-tab-background-hover: var(--background-persistent-tab-hover);
  --icon-tab-background-selected: var(--background-persistent-tab-selected);
  --icon-tab-background-disabled: var(--background-persistent-tab-disabled);
  --icon-tab-border-color-default: var(--border-persistent-tab-seleted);
  --icon-tab-border-color-disabled: var(--border-persistent-tab-disabled);
  --icon-tab-border-thickness-default: var(--border-width-default);
  --modal-padding-x-default: var(--spacing-2xl);
  --modal-padding-y-default: var(--spacing-2xl);
  --modal-radius-default: var(--radius-xl);
  --modal-background-default: var(--background-container-modal-default);
  --modal-background-subtle: var(--background-container-modal-subtle);
  --modal-gap-horizontal-default: var(--spacing-2xl);
  --modal-gap-vertical-default: var(--spacing-xl);
  --modal-title-default: var(--text-container-neutral-subtle);
  --modal-divider-default: var(--border-container-divider-default);
  --modal-divider-strong: var(--border-container-divider-strong);
  --modal-border-default: var(--border-container-modal-default);
  --sidepanel-padding-x-default: var(--spacing-2xl);
  --sidepanel-padding-y-default: var(--spacing-2xl);
  --sidepanel-gap-horizontal-default: var(--spacing-2xl);
  --sidepanel-gap-vertical-default: var(--spacing-xl);
  --sidepanel-background-default: var(--background-surface-sidebar-default);
  --sidepanel-border-default: var(--border-surface-sidepanel-default);
  --sidepanel-title-default: var(--text-container-neutral-subtle);
  --sidepanel-divider-default: var(--border-container-divider-default);
  --sidepanel-divider-strong: var(--border-container-divider-strong);
  --sidepanel-icon-default: var(--icon-container-neutral-subtle);
  --navigation-padding-x-default: var(--spacing-2xl);
  --navigation-padding-x-smaill: var(--spacing-xl);
  --navigation-padding-y-default: var(--spacing-2xl);
  --navigation-padding-y-smaill: var(--spacing-xl);
  --navigation-border-color-default: var(--border-surface-neutral-default);
  --navigation-border-thickness-default: var(--border-width-default);
  --navigation-background-default: var(--background-surface-sidebar-default);
  --navigation-background-strong: var(--background-surface-sidebar-strong);
  --navigation-logo-color-default: var(--icon-surface-logo-default);
  --navigation-logo-color-subtle: var(--icon-surface-logo-subtle);
  --navigation-logo-height-default: var(--size-2xl);
  --navigation-gap-default: var(--spacing-2xl);
}