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