Context is how you tell Stylecheat what your project looks like.
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.
The token format is 1-1 with tweakcn, so you can design your theme visually there and drop the output straight in.
Stylecheat-specific variables like --unit and the color palette sit on top as a separate
layer.
Scrollbars
Scrollbars are context, not a component — there is no element to reach for and no attribute to
set. Every scroll container inside [stylecheat] is themed from the tokens above, including
the page itself.
The thumb takes --muted-foreground, switches to --foreground on
hover, and rounds with --radius. The track stays transparent so the scrollbar
sits on whatever surface it is over — --card, --sidebar, or the page
background. Width is calc(var(--unit) * 2), so sm and lg scale it in step with everything else.
Firefox has no ::-webkit-scrollbar, so it reads the same two tokens through scrollbar-color and scrollbar-width instead. The @supports query keeps the two apart: Chrome drops ::-webkit-scrollbar styling entirely on any element that sets a non-initial scrollbar-width or scrollbar-color.
Scroll this card to see the thumb over --card.
The track is transparent, so the card surface shows straight through it.
Hover the thumb and it darkens to --foreground.
Nothing here is markup — no attribute, no class, no element.
The same styling applies to the sidebar and to the page scrollbar.
Swap --muted-foreground and every scrollbar follows.
Swap --radius and the thumb corners follow.
Set sm or lg and the width follows.
Stylecheat