Color
Color tokens are used for styling elements.
Token | Value | Description | |
|---|---|---|---|
--vortex-color-foreground-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-hover | var(--vortex-color-neutral-100) | - | |
--vortex-color-foreground-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-subtle-default | var(--vortex-color-neutral-200) | - | |
--vortex-color-foreground-subtlest-default | var(--vortex-color-neutral-300) | - | |
--vortex-color-foreground-subtlest-selected | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-inverse | var(--vortex-color-neutral-950) | - | |
--vortex-color-foreground-white-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-primary-default | var(--vortex-color-brand-primary-400) | - | |
--vortex-color-foreground-primary-hover | var(--vortex-color-brand-primary-500) | - | |
--vortex-color-foreground-primary-bold-default | var(--vortex-color-brand-primary-300) | - | |
--vortex-color-foreground-critical-default | var(--vortex-color-accent-red-500) | - | |
--vortex-color-foreground-critical-hover | var(--vortex-color-accent-red-600) | - | |
--vortex-color-foreground-critical-bold-default | var(--vortex-color-accent-red-300) | - | |
--vortex-color-foreground-warning-default | var(--vortex-color-accent-orange-500) | - | |
--vortex-color-foreground-warning-hover | var(--vortex-color-accent-orange-600) | - | |
--vortex-color-foreground-warning-bold-default | var(--vortex-color-accent-orange-300) | - | |
--vortex-color-foreground-success-default | var(--vortex-color-accent-green-500) | - | |
--vortex-color-foreground-success-hover | var(--vortex-color-accent-green-600) | - | |
--vortex-color-foreground-success-bold-default | var(--vortex-color-accent-green-300) | - | |
--vortex-color-foreground-info-default | var(--vortex-color-accent-blue-500) | - | |
--vortex-color-foreground-info-hover | var(--vortex-color-accent-blue-600) | - | |
--vortex-color-foreground-info-bold-default | var(--vortex-color-accent-blue-300) | - | |
--vortex-color-foreground-button-primary-default | var(--vortex-color-neutral-950) | - | |
--vortex-color-foreground-button-primary-hover | var(--vortex-color-neutral-950) | - | |
--vortex-color-foreground-button-primary-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-button-primary-critical-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-primary-critical-hover | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-primary-critical-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-button-secondary-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-secondary-hover | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-secondary-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-button-secondary-critical-default | var(--vortex-color-accent-red-300) | - | |
--vortex-color-foreground-button-secondary-critical-hover | var(--vortex-color-accent-red-300) | - | |
--vortex-color-foreground-button-secondary-critical-disabled | var(--vortex-color-neutral-300) | - | |
--vortex-color-foreground-button-tertiary-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-tertiary-hover | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-button-tertiary-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-button-tertiary-critical-default | var(--vortex-color-accent-red-300) | - | |
--vortex-color-foreground-button-tertiary-critical-hover | var(--vortex-color-accent-red-300) | - | |
--vortex-color-foreground-button-tertiary-critical-disabled | var(--vortex-color-neutral-400) | - | |
--vortex-color-foreground-input-default | var(--vortex-color-neutral-300) | - | |
--vortex-color-foreground-input-hover | var(--vortex-color-neutral-300) | - | |
--vortex-color-foreground-input-filled | var(--vortex-color-neutral-0) | - | |
--vortex-color-foreground-input-selected | var(--vortex-color-neutral-0) | - | |
--vortex-color-border-bold-default | var(--vortex-color-neutral-600) | - | |
--vortex-color-border-default | var(--vortex-color-white-alpha-500) | - | |
--vortex-color-border-hover | var(--vortex-color-white-alpha-600) | - | |
--vortex-color-border-inverse | var(--vortex-color-neutral-1000) | - | |
--vortex-color-border-primary-default | var(--vortex-color-brand-primary-500) | - | |
--vortex-color-border-critical-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-info-default | var(--vortex-color-accent-blue-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-critical-default | var(--vortex-color-accent-red-700) | - | |
--vortex-color-border-button-primary-critical-hover | var(--vortex-color-accent-red-800) | - | |
--vortex-color-border-button-primary-critical-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-critical-default | var(--vortex-color-accent-red-950) | - | |
--vortex-color-border-button-secondary-critical-hover | var(--vortex-color-accent-red-950) | - | |
--vortex-color-border-button-secondary-critical-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-critical-default | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-border-button-tertiary-critical-hover | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-border-button-tertiary-critical-disabled | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-default | var(--vortex-color-neutral-1000) | - | |
--vortex-color-background-inverse | var(--vortex-color-neutral-0) | - | |
--vortex-color-background-surface-default | var(--vortex-color-neutral-950) | - | |
--vortex-color-background-surface-hover | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-surface-disabled | var(--vortex-color-neutral-800) | - | |
--vortex-color-background-surface-subtlest-default | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-surface-bold-default | var(--vortex-color-neutral-400) | - | |
--vortex-color-background-critical-default | var(--vortex-color-accent-red-500) | - | |
--vortex-color-background-critical-subtlest-default | var(--vortex-color-accent-red-950) | - | |
--vortex-color-background-warning-default | var(--vortex-color-accent-orange-500) | - | |
--vortex-color-background-warning-subtlest-default | var(--vortex-color-accent-orange-950) | - | |
--vortex-color-background-success-default | var(--vortex-color-accent-green-500) | - | |
--vortex-color-background-success-subtlest-default | var(--vortex-color-accent-green-950) | - | |
--vortex-color-background-info-default | var(--vortex-color-accent-blue-500) | - | |
--vortex-color-background-info-subtlest-default | var(--vortex-color-accent-blue-950) | - | |
--vortex-color-background-primary-default | var(--vortex-color-brand-primary-500) | - | |
--vortex-color-background-primary-subtlest-default | var(--vortex-color-brand-primary-900) | - | |
--vortex-color-background-input-default | var(--vortex-color-white-alpha-100) | - | |
--vortex-color-background-input-hover | var(--vortex-color-white-alpha-100) | - | |
--vortex-color-background-input-focused | var(--vortex-color-white-alpha-100) | - | |
--vortex-color-background-input-filled | var(--vortex-color-white-alpha-100) | - | |
--vortex-color-background-input-selected | var(--vortex-color-neutral-0) | - | |
--vortex-color-background-fill-default | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-fill-selected | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-fill-hover | var(--vortex-color-white-alpha-50) | - | |
--vortex-color-background-fill-inverse | var(--vortex-color-neutral-950) | - | |
--vortex-color-background-fill-transparent-default | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-fill-transparent-hover | var(--vortex-color-white-alpha-100) | - | |
--vortex-color-background-button-primary-default | var(--vortex-color-neutral-0) | - | |
--vortex-color-background-button-primary-hover | var(--vortex-color-neutral-100) | - | |
--vortex-color-background-button-primary-disabled | var(--vortex-color-neutral-800) | - | |
--vortex-color-background-button-primary-critical-default | var(--vortex-color-accent-red-700) | - | |
--vortex-color-background-button-primary-critical-hover | var(--vortex-color-accent-red-800) | - | |
--vortex-color-background-button-primary-critical-disabled | var(--vortex-color-neutral-800) | - | |
--vortex-color-background-button-secondary-default | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-button-secondary-hover | var(--vortex-color-neutral-800) | - | |
--vortex-color-background-button-secondary-disabled | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-button-secondary-critical-default | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-button-secondary-critical-hover | var(--vortex-color-neutral-800) | - | |
--vortex-color-background-button-secondary-critical-disabled | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-button-tertiary-default | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-button-tertiary-hover | var(--vortex-color-neutral-950) | - | |
--vortex-color-background-button-tertiary-disabled | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-button-tertiary-critical-default | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-background-button-tertiary-critical-hover | var(--vortex-color-neutral-900) | - | |
--vortex-color-background-button-tertiary-critical-disabled | var(--vortex-color-white-alpha-0) | - | |
--vortex-color-skeleton-default | var(--vortex-color-neutral-800) | - |