Token | Value | Description | |
|---|---|---|---|
--vortex-color-text-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-hover | var(--vortex-color-neutral-200) | — | |
--vortex-color-text-subtle-default | var(--vortex-color-neutral-200) | — | |
--vortex-color-text-subtlest-default | var(--vortex-color-neutral-300) | — | |
--vortex-color-text-subtlest-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-subtlest-selected | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-inverse | var(--vortex-color-neutral-950) | — | |
--vortex-color-text-primary-default | var(--vortex-color-brand-primary-500) | — | |
--vortex-color-text-primary-hover | var(--vortex-color-brand-primary-600) | — | |
--vortex-color-text-primary-bold-default | var(--vortex-color-brand-primary-700) | — | |
--vortex-color-text-error-default | var(--vortex-color-accent-red-500) | — | |
--vortex-color-text-error-hover | var(--vortex-color-accent-red-600) | — | |
--vortex-color-text-error-bold-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-text-warning-default | var(--vortex-color-accent-orange-500) | — | |
--vortex-color-text-warning-hover | var(--vortex-color-accent-orange-600) | — | |
--vortex-color-text-warning-bold-default | var(--vortex-color-accent-orange-300) | — | |
--vortex-color-text-success-default | var(--vortex-color-accent-green-500) | — | |
--vortex-color-text-success-hover | var(--vortex-color-accent-green-600) | — | |
--vortex-color-text-success-bold-default | var(--vortex-color-accent-green-400) | — | |
--vortex-color-text-button-primary-default | var(--vortex-color-neutral-950) | — | |
--vortex-color-text-button-primary-hover | var(--vortex-color-neutral-950) | — | |
--vortex-color-text-button-primary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-text-button-primary-destructive-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-primary-destructive-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-primary-destructive-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-text-button-secondary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-secondary-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-secondary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-text-button-secondary-destructive-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-text-button-secondary-destructive-hover | var(--vortex-color-accent-red-300) | — | |
--vortex-color-text-button-secondary-destructive-disabled | var(--vortex-color-neutral-300) | — | |
--vortex-color-text-button-tertiary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-tertiary-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-button-tertiary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-text-button-tertiary-destructive-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-text-button-tertiary-destructive-hover | var(--vortex-color-accent-red-300) | — | |
--vortex-color-text-button-tertiary-destructive-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-text-input-default | var(--vortex-color-neutral-300) | — | |
--vortex-color-text-input-hover | var(--vortex-color-neutral-300) | — | |
--vortex-color-text-input-filled | var(--vortex-color-neutral-0) | — | |
--vortex-color-text-input-selected | var(--vortex-color-neutral-0) | — | |
--vortex-color-link-default | var(--vortex-color-neutral-200) | — | |
--vortex-color-link-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-link-selected | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-subtle-default | var(--vortex-color-neutral-200) | — | |
--vortex-color-icon-subtlest-default | var(--vortex-color-neutral-300) | — | |
--vortex-color-icon-subtlest-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-inverse | var(--vortex-color-neutral-950) | — | |
--vortex-color-icon-primary-default | var(--vortex-color-brand-primary-500) | — | |
--vortex-color-icon-primary-bold-default | var(--vortex-color-brand-primary-700) | — | |
--vortex-color-icon-error-default | var(--vortex-color-accent-red-500) | — | |
--vortex-color-icon-error-bold-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-icon-warning-default | var(--vortex-color-accent-orange-300) | — | |
--vortex-color-icon-warning-bold-default | var(--vortex-color-accent-orange-300) | — | |
--vortex-color-icon-success-default | var(--vortex-color-accent-green-500) | — | |
--vortex-color-icon-success-bold-default | var(--vortex-color-accent-green-400) | — | |
--vortex-color-icon-button-primary-default | var(--vortex-color-neutral-950) | — | |
--vortex-color-icon-button-primary-hover | var(--vortex-color-neutral-950) | — | |
--vortex-color-icon-button-primary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-icon-button-primary-destructive-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-primary-destructive-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-primary-destructive-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-icon-button-secondary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-secondary-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-secondary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-icon-button-secondary-destructive-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-icon-button-secondary-destructive-hover | var(--vortex-color-accent-red-300) | — | |
--vortex-color-icon-button-secondary-destructive-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-icon-button-tertiary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-tertiary-hover | var(--vortex-color-neutral-0) | — | |
--vortex-color-icon-button-tertiary-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-icon-button-tertiary-destructive-default | var(--vortex-color-accent-red-300) | — | |
--vortex-color-icon-button-tertiary-destructive-hover | var(--vortex-color-accent-red-300) | — | |
--vortex-color-icon-button-tertiary-destructive-disabled | var(--vortex-color-neutral-400) | — | |
--vortex-color-border-default | var(--vortex-color-white-alpha-500) | — | |
--vortex-color-border-hover | var(--vortex-color-white-alpha-600) | — | |
--vortex-color-border-primary-default | var(--vortex-color-brand-primary-500) | — | |
--vortex-color-border-error-default | var(--vortex-color-accent-red-800) | — | |
--vortex-color-border-warning-default | var(--vortex-color-accent-orange-800) | — | |
--vortex-color-border-success-default | var(--vortex-color-accent-green-800) | — | |
--vortex-color-border-divider | var(--vortex-color-neutral-900) | — | |
--vortex-color-border-input-default | var(--vortex-color-white-alpha-400) | — | |
--vortex-color-border-input-hover | var(--vortex-color-white-alpha-400) | — | |
--vortex-color-border-input-focused | var(--vortex-color-brand-primary-500) | — | |
--vortex-color-border-input-filled | var(--vortex-color-white-alpha-400) | — | |
--vortex-color-border-input-selected | var(--vortex-color-neutral-0) | — | |
--vortex-color-border-button-primary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-border-button-primary-hover | var(--vortex-color-neutral-100) | — | |
--vortex-color-border-button-primary-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-primary-destructive-default | var(--vortex-color-accent-red-700) | — | |
--vortex-color-border-button-primary-destructive-hover | var(--vortex-color-accent-red-800) | — | |
--vortex-color-border-button-primary-destructive-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-secondary-default | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-secondary-hover | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-secondary-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-secondary-destructive-default | var(--vortex-color-accent-red-950) | — | |
--vortex-color-border-button-secondary-destructive-hover | var(--vortex-color-accent-red-950) | — | |
--vortex-color-border-button-secondary-destructive-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-border-button-tertiary-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-border-button-tertiary-hover | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-border-button-tertiary-disabled | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-border-button-tertiary-destructive-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-border-button-tertiary-destructive-hover | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-border-button-tertiary-destructive-disabled | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-default | var(--vortex-color-neutral-1000) | — | |
--vortex-color-bg-inverse | var(--vortex-color-neutral-0) | — | |
--vortex-color-bg-surface-default | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-surface-hover | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-surface-subtlest-default | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-surface-subtlest-hover | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-error-default | var(--vortex-color-accent-red-500) | — | |
--vortex-color-bg-error-subtle-default | var(--vortex-color-accent-red-950) | — | |
--vortex-color-bg-warning-default | var(--vortex-color-accent-orange-500) | — | |
--vortex-color-bg-warning-subtle-default | var(--vortex-color-accent-orange-950) | — | |
--vortex-color-bg-success-default | var(--vortex-color-accent-green-500) | — | |
--vortex-color-bg-success-subtle-default | var(--vortex-color-accent-green-950) | — | |
--vortex-color-bg-primary-default | var(--vortex-color-brand-primary-500) | — | |
--vortex-color-bg-primary-subtle-default | var(--vortex-color-brand-primary-200) | — | |
--vortex-color-bg-input-default | var(--vortex-color-white-alpha-100) | — | |
--vortex-color-bg-input-hover | var(--vortex-color-white-alpha-100) | — | |
--vortex-color-bg-input-focused | var(--vortex-color-white-alpha-100) | — | |
--vortex-color-bg-input-filled | var(--vortex-color-white-alpha-100) | — | |
--vortex-color-bg-input-selected | var(--vortex-color-neutral-0) | — | |
--vortex-color-bg-fill-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-fill-selected | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-fill-hover | var(--vortex-color-white-alpha-50) | — | |
--vortex-color-bg-fill-inverse | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-fill-transparent-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-fill-transparent-hover | var(--vortex-color-white-alpha-50) | — | |
--vortex-color-bg-button-primary-default | var(--vortex-color-neutral-0) | — | |
--vortex-color-bg-button-primary-hover | var(--vortex-color-neutral-100) | — | |
--vortex-color-bg-button-primary-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-bg-button-primary-destructive-default | var(--vortex-color-accent-red-700) | — | |
--vortex-color-bg-button-primary-destructive-hover | var(--vortex-color-accent-red-800) | — | |
--vortex-color-bg-button-primary-destructive-disabled | var(--vortex-color-neutral-800) | — | |
--vortex-color-bg-button-secondary-default | var(--vortex-color-neutral-900) | — | |
--vortex-color-bg-button-secondary-hover | var(--vortex-color-neutral-800) | — | |
--vortex-color-bg-button-secondary-disabled | var(--vortex-color-neutral-900) | — | |
--vortex-color-bg-button-secondary-destructive-default | var(--vortex-color-neutral-900) | — | |
--vortex-color-bg-button-secondary-destructive-hover | var(--vortex-color-neutral-800) | — | |
--vortex-color-bg-button-secondary-destructive-disabled | var(--vortex-color-neutral-900) | — | |
--vortex-color-bg-button-tertiary-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-button-tertiary-hover | var(--vortex-color-neutral-950) | — | |
--vortex-color-bg-button-tertiary-disabled | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-button-tertiary-destructive-default | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-bg-button-tertiary-destructive-hover | var(--vortex-color-neutral-900) | — | |
--vortex-color-bg-button-tertiary-destructive-disabled | var(--vortex-color-white-alpha-0) | — | |
--vortex-color-skeleton-default | var(--vortex-color-neutral-800) | — |
Color
Color tokens are used for styling elements.