Semantic foundation
Design tokens
Use semantic names so Light, Dark and density modes can change without consumer rewrites.
Colour roles
Application background
--kar-bg-appSurface
--kar-bg-surfaceElevated surface
--kar-bg-elevatedPrimary text
--kar-text-primaryMuted text
--kar-text-mutedBorder
--kar-borderFocus
--kar-focusPrimary
--kar-primarySuccess
--kar-successWarning
--kar-warningDanger
--kar-dangerInformation
--kar-infoSpacing and typography
space-1space-2space-3space-4space-5
Small supporting text
Default operational text
Large section text
Controls, focus and elevation
Restrained elevated surfaceSurface radius:
--kar-radius-surface = squareTouch minimum: --kar-touch-target-min