Stylecheat

Context is Stylecheat's opinions on color, typography, radius, shadow and spacing.

All color tokens, typography, radius, shadow, and spacing variables are declared on the [stylecheat] attribute. Everything in Stylecheat reads from these — swap a value and the whole UI updates.

theme.css

Palette

--unit and the named colors live in Stylecheat.css, on top of the tweakcn tokens. text-* and bg-* modifiers read them, and each has its own dark value.

stylecheat.css

Scrollbars

Scrollbars are context, not an element: every scroll container inside [stylecheat], the page included, is themed from the tokens above. The thumb is --muted-foreground (--foreground on hover) with --radius corners on a transparent track, and its width is calc(var(--unit) * 2), so it scales with sm and lg.

Firefox gets the thumb colour and a thin width through scrollbar-color and scrollbar-width, set only where ::-webkit-scrollbar isn't supported, because Chrome ignores ::-webkit-scrollbar wherever those two are set.

scrollbar.css

Context


Stylecheat Introduction Context CardCircleCrowGridSidebarStackSticky AccordionBadgeBreadcrumbCarouselCodeHrIconLinkTableTabsTooltipTypography ButtonSwitchCheckboxRadioRangeProgressSelectTextinputTextarea Modifiers LoginCarouselElementsContent flowIcons Download v1.0.0
Stylecheat