Every module at a glance
Everything @pleat/core and @pleat/foldkit export. Each function’s TSDoc has the details and examples.
Style
Declarations under conditions. An idempotent monoid compiled to atomic classes.
Style.make(declarations)A style from a declaration block. Later keys win, including a shorthand after its longhands.Style.emptyThe style with no declarations; the identity of merge.Style.merge(self, that)Applies that after self. Dual: Style.merge(that) in a pipe. Memoized.Style.mergeAll(styles)Merges left to right.Style.when(condition, input)Adds declarations or a style under a condition. Use in a pipe.Style.under(self, condition)Moves every declaration of a style under a condition.Style.evolve(transforms)Maps values per property where the style is defined.Style.mapDeclarations(self, f)Maps or drops every declaration.Style.mark(marker)Puts a marker’s class on an element for relational conditions.Style.get(style, property, condition?)The value declared under exactly that condition, as an Option.Style.resolve(style, isActive)The declarations that take effect when the given atoms hold.Style.declarations(style)Every declaration, with readable conditions, in emission order.Style.use(style)The class attribute value; in a browser, also inserts the rules.Style.Reducer, Style.CombinerMerge as an Effect Reducer and Combiner.When
Conditions, with a total precedence order.
When.always, When.all(...conditions)The top of the semilattice, and the meet.When.hover, focus, focusVisible, focusWithin, activeInteraction, weakest to strongest.When.open, selected, checked, indeterminate, current, highlightedElement state, including @foldkit/ui’s data-* attributes.When.closed, entering, leaving, transitioning@foldkit/ui transition states.When.disabled, invalid, readonlyDisabled and invalid outrank interaction.When.data(name, value?), When.aria(name, value)Any data or ARIA attribute.When.dark, light, reducedMotion, motionSafe, moreContrast, canHover, printMedia features.When.minWidth(width), maxWidth(width), media(query)Breakpoints order themselves so mobile-first works.When.container(query, name?), supports(query)Container and feature queries.When.marker(name)A named element for relational conditions.When.within(marker, condition?), precededBy(...), has(...)Ancestor, earlier sibling, and descendant conditions.When.not(condition), pseudo(selector)Negation and other pseudo-classes.When.before, after, placeholder, selection, backdropPseudo-elements.When.compare(a, b), When.label(condition)The precedence order, and a readable description.Recipe
Finite variant families typed by Schema.
Recipe.make({ name, base, variants, defaults, compounds, descriptions })Creates a recipe. Options named true and false make a boolean dimension.recipe(props)The style for those props; the same object for equal props.recipe.schemaAn Effect Schema for the props. Defaulted dimensions are optional.recipe.dimensions, recipe.defaultsThe options of each dimension, and the defaults.Recipe.combinations(recipe)Every combination with its style.Recipe.jsonSchema(recipe)A JSON Schema document for the props.Var
Typed custom properties for continuous values.
Var.make(name, schema, { fallback })A custom property --name whose values the schema describes.Var.number(name), Var.string(name)Shorthands for common schemas.Var.bind(variable, value)A binding for one render. Rejects values that could end the declaration.Token and Theme
Design tokens and the values that fill them.
Token.make(spec, { prefix })Tokens from a tree of kinds; color.onAccent becomes --color-on-accent.Token.color, length, duration, fontFamily, number, valueKinds, each with a Schema that validates values.Theme.make(tokens, values)A theme. Throws when a value does not match its kind.Theme.extend(theme, tokens, partialValues)Overrides part of a theme.Theme.schema(tokens), Theme.decode(tokens, input)Validate generated or stored themes with typed errors.Theme.css(theme, selector)The rule that applies a theme.Global
Rules outside the atomic layer.
Global.theme(theme, { selector, when })Applies a theme, optionally under an environment condition.Global.rule(selector, declarations, { when })An element rule such as body.Global.keyframes(name, frames)Defines an animation and returns its unique name.Global.fontFace(declarations)An @font-face rule.Calc and Color
Value helpers that compile to CSS functions.
Calc.add, subtract, multiply, divide, negate, clamp, min, maxcalc() and friends. Numbers are pixels.Color.mix(base, other, amount, space?)color-mix().Color.alpha, lighten, darken, saturate, rotateRelative OKLCH colors.Sheet
The stylesheet.
Sheet.render({ classNames })The whole sheet, or only some atoms.Sheet.renderFor(html), Sheet.styleTag(html?)A page’s critical CSS, and a <style data-pleat> for it.Sheet.mount(document), Sheet.insert(atoms)The browser side. css() calls these for you.@pleat/foldkit
Foldkit views and rendering.
css(...parts)Attributes for an element: one Class with every style merged, one Style with every binding.className(value)Class names Pleat does not own, passed through css().renderDocument(options) from @pleat/foldkit/serverFoldkit’s renderDocument with the page’s CSS in the head.