landingBandTone
Paints a landing band's background.
import { landingBandTone } from "@sdxc/ui/styles";Usage
Paints a landing band's background: a quiet neutral tint (--ui-landing-band-tint,
-tint-dark, and --ui-landing-band-glow, none to drop it), a hairline grid, an
inverted solid, the brand solid, a page-supplied gradient, or nothing for "plain".
Inverse and brand bands re-point the neutral tokens at the fill's foreground; on a
dark page an inverse band renders as a raised surface with hairlines and the glow.
Signature
landingBandTone<Node extends Element = Element>(tone?: LandingBandTone): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>Returns a css() mixin ready for a band host's mix prop.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
tone | "plain" | "tinted" | "grid" | "inverse" | "brand" | "gradient" | No | Which fill to apply. Defaults to "plain". |
Examples
<section mix={[landingBandTone("tinted"), landingSectionSpace()]}>{children}</section>;<section mix={[landingBandTone("brand")]} style="--ui-landing-band-gradient: …">…</section>;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.
LandingSectionSpacing
How much block padding a landing band leaves around its content.
"hero" is the first viewport, "normal" the repeating mid-page rhythm,
"compact" a tighter strip such as a proof row, "cta" a closing band.
type LandingSectionSpacing = "hero" | "normal" | "compact" | "cta"LandingBandTone
What sits behind a landing band: nothing, a quiet tint, a faded grid, an
inverted solid, the brand solid, or a gradient the page supplies through
--ui-landing-band-gradient.
type LandingBandTone = "plain" | "tinted" | "grid" | "inverse" | "brand" | "gradient"LandingDisplayLevel
Outline depth displayHeading sizes for: 1 is the page H1,
2 a section chapter, 3 a quieter in-band title.
type LandingDisplayLevel = 1 | 2 | 3LandingLeadStep
Which lead landingLead sizes: a band's, or the larger hero step.
type LandingLeadStep = "band" | "hero"LandingEyebrowVariant
How an eyebrow reads: mono a quiet uppercase label for section headers,
quiet a hairline pill for hero announcements, soft a filled muted pill,
pill the brand pill, numbered a brand-ringed pill led by its index.
type LandingEyebrowVariant = "mono" | "quiet" | "soft" | "pill" | "numbered"