Color Variables# Background ColorTailwind CSS variableTailwind CSS classDescriptionValue

--color-canvas.bg-canvasApplies the canvas color, typically used for surfaces.light-dark(#fff,hsl(225 66.7% 1.2%))

--color-surface.bg-surfaceApplies the surface color, typically used for surfaces.light-dark(hsl(240 10% 95%),hsl(240 2% 10%))

--color-frosted.bg-frostedApplies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(240 5% 70% / 0.148),hsl(240 2% 43% / 0.228))

--color-frosted-soft.bg-frosted-softApplies the frosted color, typically used as a background :hover.light-dark(hsl(234 9.8% 60% / 0.06),hsl(240 3.7% 26.5% / 0.154))

--color-frosted-strong.bg-frosted-strongApplies the frosted color, typically used as a background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(236 6.5% 42% / 0.236),hsl(240 1.5% 61.8% / 0.302))

--color-backdrop.bg-backdropApplies the backdrop color, typically used for backdrops.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 5.3% 14.9% / 0.5)) Foreground ColorTailwind CSS variableTailwind CSS classDescriptionValue

--color-primary.text-primaryApplies the primary color, typically used for text.light-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%))

--color-contrast-higher.text-contrast-higherApplies the contrast-higher color, typically used for text.light-dark(hsl(240 8.7% 9% / 0.8),hsl(240 12.5% 96.9% / 0.78))

--color-contrast-high.text-contrast-highApplies the contrast-high color, typically used for text.light-dark(hsl(240 7.1% 11% / 0.7),hsl(240 12.5% 96.9% / 0.67))

--color-contrast-medium.text-contrast-mediumApplies the contrast-medium color, typically used for text.light-dark(hsl(240 6.1% 7% / 0.6),hsl(240 12.5% 96.9% / 0.56))

--color-contrast-low.border-contrast-lowApplies the contrast-low color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45))

--color-contrast-lower.border-contrast-lowerApplies the contrast-lower color, intended only for decorative elements, as it is not accessibility-compliant.light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302)) Semantic ColorTailwind CSS variableTailwind CSS classDescriptionValue

--color-info.text-infoApplies the info color, typically used for text.light-dark(hsl(228 83.2% 51%),hsl(210 100% 54.5%))

--color-info-medium.text-info .border-infoApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.6),hsl(210 100% 54.5% / 0.6))

--color-info-low.text-info .border-infoApplies the info color, typically used for text or border.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.18))

--color-info-frosted.bg-info-frostedApplies the info-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.26))

--color-info-frosted-soft.bg-info-frosted-softApplies the info-frosted-soft color, typically used as background :hover.light-dark(hsl(228 83.2% 51% / 0.1),hsl(210 100% 54.5% / 0.1))

--color-success.text-successApplies the success color, typically used for text.light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%))

--color-success-medium.text-success .border-successApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.6),hsl(157 84.9% 41.6% / 0.6))

--color-success-low.text-success .border-successApplies the success color, typically used for text or border.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.18))

--color-success-frosted.bg-success-frostedApplies the success-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.26))

--color-success-frosted-soft.bg-success-frosted-softApplies the success-frosted-soft color, typically used as background :hover.light-dark(hsl(115 77.5% 27.8% / 0.1),hsl(157 84.9% 41.6% / 0.1))

--color-warning.text-warningApplies the warning color, typically used for text.light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%))

--color-warning-medium.text-warning .border-warningApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.6),hsl(28 90.2% 56.1% / 0.6))

--color-warning-low.text-warning .border-warningApplies the warning color, typically used for text or border.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.18))

--color-warning-frosted.bg-warning-frostedApplies the warning-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.26))

--color-warning-frosted-soft.bg-warning-frosted-softApplies the warning-frosted-soft color, typically used as background :hover.light-dark(hsl(28 97.7% 34.1% / 0.1),hsl(28 90.2% 56.1% / 0.1))

--color-error.text-errorApplies the error color, typically used for text.light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%))

--color-error-medium.text-error .border-errorApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.6),hsl(0 96.9% 62% / 0.6))

--color-error-low.text-error .border-errorApplies the error color, typically used for text or border.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.18))

--color-error-frosted.bg-error-frostedApplies the error-frosted color, typically used as background in combination with a blur effect .backdrop-blur-frosted.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.26))

--color-error-frosted-soft.bg-error-frosted-softApplies the error-frosted-soft color, typically used as background :hover.light-dark(hsl(357 78% 41% / 0.1),hsl(0 96.9% 62% / 0.1)) A11y ColorTailwind CSS variableTailwind CSS classDescriptionValue

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