Color SCSS Variables# Background ColorSCSS VariableDescriptionValue

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

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

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

$color-frosted-softHolds the light-dark() frosted-soft 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-strongHolds the light-dark() frosted color, typically used as a background in combination with blur().light-dark(hsl(236 6.5% 42% / 0.236),hsl(240 1.5% 61.8% / 0.302))

$color-backdropHolds the light-dark() 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 ColorSCSS VariableDescriptionValue

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

$color-contrast-higherHolds the light-dark() 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-highHolds the light-dark() 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-mediumHolds the light-dark() 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-lowHolds the light-dark() contrast-low color, intended only for decorative elements.light-dark(hsl(240 5.3% 14.9% / 0.5),hsl(240 12.5% 96.9% / 0.45))

$color-contrast-lowerHolds the light-dark() contrast-lower color, intended only for decorative elements.light-dark(hsl(234 6% 32.9% / 0.324),hsl(240 1.5% 61.8% / 0.302)) Semantic ColorSCSS VariableDescriptionValue

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

$color-info-mediumHolds the light-dark() info-medium 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-lowHolds the light-dark() info-low 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-frostedHolds the light-dark() info-frosted color, typically used as background with .backdrop-blur-frosted.light-dark(hsl(228 83.2% 51% / 0.18),hsl(210 100% 54.5% / 0.26))

$color-info-frosted-softHolds the light-dark() 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-successHolds the light-dark() success color, typically used for text.light-dark(hsl(115 77.5% 27.8%),hsl(157 84.9% 41.6%))

$color-success-mediumHolds the light-dark() success-medium 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-lowHolds the light-dark() success-low 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-frostedHolds the light-dark() success-frosted color, typically used as background with .backdrop-blur-frosted.light-dark(hsl(115 77.5% 27.8% / 0.18),hsl(157 84.9% 41.6% / 0.26))

$color-success-frosted-softHolds the light-dark() 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-warningHolds the light-dark() warning color, typically used for text.light-dark(hsl(28 97.7% 34.1%),hsl(28 90.2% 56.1%))

$color-warning-mediumHolds the light-dark() warning-medium 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-lowHolds the light-dark() warning-low 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-frostedHolds the light-dark() warning-frosted color, typically used as background with .backdrop-blur-frosted.light-dark(hsl(28 97.7% 34.1% / 0.18),hsl(28 90.2% 56.1% / 0.26))

$color-warning-frosted-softHolds the light-dark() 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-errorHolds the light-dark() error color, typically used for text.light-dark(hsl(357 78% 41%),hsl(0 96.9% 62%))

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

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

$color-error-frostedHolds the light-dark() error-frosted color, typically used as background with .backdrop-blur-frosted.light-dark(hsl(357 78% 41% / 0.18),hsl(0 96.9% 62% / 0.26))

$color-error-frosted-softHolds the light-dark() 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 ColorSCSS VariableDescriptionValue

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