Color Variables# ColorTailwind CSS variableTailwind CSS classDescription

--color-primary (-light|-dark).text-primaryApplies the primary color, typically used for text.

--color-canvas (-light|-dark).bg-canvasApplies the canvas color, typically used for surfaces.
(formerly --color-base)

--color-surface (-light|-dark).bg-surfaceApplies the surface color, typically used for surfaces.

--color-shading (-light|-dark).bg-shadingApplies the shading color, typically used for backdrops.

--color-frosted (-light|-dark).bg-frostedApplies the frosted color, typically used as a background in combination with a blur effect.

--color-contrast-low (-light|-dark).border-contrast-lowApplies the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.

--color-contrast-medium (-light|-dark).text-contrast-mediumApplies the contrast-medium color, typically used for text.

--color-contrast-high (-light|-dark).text-contrast-highApplies the contrast-high color, typically used for text.

--color-success (-light|-dark).text-successApplies the success color, typically used for text.

--color-success-soft (-light|-dark).bg-success-softApplies the success-soft color, typically used as background.

--color-warning (-light|-dark).text-warningApplies the warning color, typically used for text.

--color-warning-soft (-light|-dark).bg-warning-softApplies the warning-soft color, typically used as background.

--color-error (-light|-dark).text-errorApplies the error color, typically used for text.

--color-error-soft (-light|-dark).bg-error-softApplies the error-soft color, typically used as background.

--color-info (-light|-dark).text-infoApplies the info color, typically used for text.

--color-info-soft (-light|-dark).bg-info-softApplies the info-soft color, typically used as background.

--color-hover (-light|-dark).text-hoverApplies the hover color.

--color-active (-light|-dark).text-activeApplies the active color.

--color-focus (-light|-dark).outline-focusApplies the focus color, typically used as the outline for :focus-visible states.

--color-disabled (-light|-dark).text-disabledApplies the disabled color.