Mixins / API

foldkit-mixins/theme

foldkit-mixins/theme: the root export's Theme plus the page-level pieces. root and scoped turn tokens into unlayered :root and selector rules for Style.stylesheet; tokens is the shipped set of non-color scales; oklch derives a whole palette from a few knobs; schemeScript and chooseScheme keep a reader's light or dark choice.

Namespaces

Functions

breakpointWidthsEach breakpoint query's min-width in pixels (rem at 16), so CSS and the Model agree on what md means. A query that is not a plain min-width is refused: it…
chooseSchemeApplies scheme to the root element and keeps it under key for the next visit, as a Command's effect. 'system' removes both. Storage that throws still…
composeThemes merged at definition time, later tokens winning within a group.
currentSchemeThe scheme the root element shows now: what schemeScript or chooseScheme applied.
define
inContainerThe same breakpoints measured on a named container rather than the window: Theme.inContainer('page', Theme.tokens.breakpoint) gives md as '@container page…
ladderA control's dimension on the size ladder: name's default end blended toward its compact one by the step knob, and spacing multiplied by density. The blend…
lightDarkA token that follows the user's color scheme with CSS light-dark(): no JavaScript and no Model field. A theme the user chooses is the other case, and…
nestedThe radius of a rounded surface inset in another, so their corners are concentric: the outer radius less the inset between them and the outer surface's…
oklch
raiseAn element offset levels above the raised element holding it, or the page: popovers and menus are 2, dialogs 4. Paint it with raisedSurface.
raisedSurfaceThe background of a raised element at its level, from Theme.oklch's base surface. In a light scheme the first two steps go toward white and the rest stay…
refThe theme's tokens as references: Theme.ref(theme).surface.overt is var(--fk-surface-overt), and a group or name the theme lacks is a type error. Only the…
roleText in role: its size and leading on the size ladder, read on the element like ladder, so a compact region's text steps down with its controls.
root
schemeScriptThe text of a <script> for the document's head, before any stylesheet draws: it applies the scheme kept under key, so a reader who chose dark never sees one…
scopedToken overrides under selector: a named theme the Model selects with a root attribute (:root[data-theme="ocean"]), a scheme the user chose…
variables

Values

SCHEME_KEYThe storage key a chosen scheme is kept under, unless one is given.
tokens
VAR_PREFIX

Interfaces

Types

OklchTheme
OverridesSome of a theme's tokens, by the theme's own group and token names.
Refsvar(--fk-group-name) for every token, by the theme's own group and token names.
RoleA role of the type scale.
RungA dimension on the size ladder, by its default end's name.
SchemeWhat a reader may choose: a scheme, or the operating system's.
ThemeTokens
Tokens