Espalier exposes CSS custom properties at three different levels:
Theme outputs on <esp-root> such as --esp-color-text and --esp-size-padding.
Shared system hooks such as overlay and field tokens used across multiple components.
Component-level properties such as --esp-tooltip-max-width or --esp-progress-height.
This page is the canonical reference for those properties. For application-level guidance on when to use theme fields, component props, intent, or context, see Tokens, Intents & Contexts.
Tokens prefixed with --_esp- are private implementation details. They are intentionally excluded from this reference and should not be used by applications or treated as stable public API.
Properties are organized into three groups:
Theme-level — computed by <esp-root> and inherited by every component in the tree.
Shared hooks — optional cross-component properties used by field-like controls and overlays.
Component-level — scoped to individual components for targeted overrides.
To customize a property, set it in your own CSS. Theme-level properties cascade naturally; component-level properties can be set on the component's tag or any ancestor:
/* Override dialog overlay opacity for a specific dialog */
.my-dialog {
--esp-dialog-bg-opacity: 0.8;
}
When you want a system-wide change, prefer updating the light-theme or dark-theme passed to <esp-root> instead of overriding many emitted --esp-color-* or --esp-size-* outputs one by one.
General: Theme-Level Properties
These properties are computed and set by <esp-root> based on the active theme. They cascade to all descendant components and form the root styling contract for Espalier.
Scheme Indicator
Property
Description
--esp-scheme
The active color scheme — "light" or "dark".
--esp-seed-color
The OKLCH seed color string that drives the entire palette.
Variant Colors
Geometric color-theory variants derived from the seed color by rotating the hue angle. Every variant is gamut-mapped to sRGB.
Property
Description
--esp-color-primary
The seed color itself, gamut-mapped.
--esp-color-analogous-left
Analogous variant (seed hue minus the analogous angle).
--esp-color-analogous-right
Analogous variant (seed hue plus the analogous angle).
--esp-color-complementary
Complementary variant (seed hue plus 180°).
--esp-color-split-complementary-left
Split-complementary variant (complement minus offset).
--esp-color-split-complementary-right
Split-complementary variant (complement plus offset).
--esp-color-triadic-left
Triadic variant (seed hue plus 120°).
--esp-color-triadic-right
Triadic variant (seed hue plus 240°).
--esp-color-info
Info status family (fixed hue 244, blue; retunable via the theme's intents).
--esp-color-danger
Fixed semantic hue for errors and destructive actions (red-orange, hue 27).
--esp-color-success
Fixed semantic hue for success states (green, hue 150).
--esp-color-warning
Fixed semantic hue for warnings (yellow-green, hue 90).
Semantic Colors
Derived from variant colors and lightness ramp positions. Text colors are enforced against APCA contrast targets to guarantee legibility.
Surfaces & Layers
Property
Description
--esp-color-background
Main page background surface.
--esp-color-layer-1
First raised layer (slightly elevated surfaces).
--esp-color-layer-2
Second raised layer (form fields, input backgrounds).
Standard body text. APCA Lc ≥ 75 against background.
--esp-color-type-overline
Overline ink. APCA Lc ≥ 90 against the local background.
--esp-color-type-label
Label ink. APCA Lc ≥ 75 against the local background.
--esp-color-type-lead
Lead-paragraph ink. APCA Lc ≥ 75 against the local background.
--esp-color-type-caption
Caption ink. APCA Lc ≥ 90 against the local background.
--esp-color-headings
Heading text (muted contrast). APCA Lc ≥ 60 against background.
--esp-color-headings-hover
Heading text with emphasis (full contrast). APCA Lc ≥ 60 against background.
--esp-color-danger-text
Error and danger message text. APCA Lc ≥ 75 against background.
Links
Property
Description
--esp-color-link
Link text in normal state (accent color). APCA Lc ≥ 75 against background.
--esp-color-link-hover
Link text on hover (high contrast). APCA Lc ≥ 75 against background.
--esp-color-link-hover-bg
Link hover background highlight.
Actions & Inputs
Property
Description
--esp-color-action-background
Action button background (typically layer-3).
--esp-color-action-text
Action button text (high-contrast ink). APCA Lc ≥ 75 against action background.
--esp-color-input-caret
Text cursor / caret color. APCA Lc ≥ 60 against layer-2.
--esp-color-input-selection
Selected text color. APCA Lc ≥ 60 against selection background.
--esp-color-input-selection-bg
Selected text background color.
Borders & Shadows
Property
Description
--esp-color-border
Border lines and dividers.
--esp-color-shadow
Drop shadow color.
Data Colors
The categorical palette is independent of semantic UI colors. It defaults to
the eight-color Okabe–Ito palette and may be overridden by dataPalette in
each theme.
Property
Description
--esp-color-series-1
First categorical data-series color.
--esp-color-series-2
Second categorical data-series color.
--esp-color-series-3
Third categorical data-series color.
--esp-color-series-4
Fourth categorical data-series color.
--esp-color-series-5
Fifth categorical data-series color.
--esp-color-series-6
Sixth categorical data-series color.
--esp-color-series-7
Seventh categorical data-series color.
--esp-color-series-8
Eighth categorical data-series color.
--esp-color-series-1-wash
First series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-1-tint
First series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-1-ink
First series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-2-wash
Second series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-2-tint
Second series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-2-ink
Second series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-3-wash
Third series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-3-tint
Third series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-3-ink
Third series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-4-wash
Fourth series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-4-tint
Fourth series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-4-ink
Fourth series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-5-wash
Fifth series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-5-tint
Fifth series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-5-ink
Fifth series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-6-wash
Sixth series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-6-tint
Sixth series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-6-ink
Sixth series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-7-wash
Seventh series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-7-tint
Seventh series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-7-ink
Seventh series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
--esp-color-series-8-wash
Eighth series washed toward the local background (75% identity, OKLab) for large fills.
--esp-color-series-8-tint
Eighth series tinted over the local background (12% identity, OKLab) for grounds behind ordinary text.
--esp-color-series-8-ink
Eighth series pushed to the text contrast tier against the local background (the best-contrast pole when a mid-lightness surface makes the tier unreachable).
A named dataRamps declaration emits properties following
--esp-color-ramp-<name>-<step>, where the name is the declared lowercase slug and
the step is 1 through that ramp's configured length (maximum 11). See Data
Colors and Ramps for the theme schema and usage.
Lightness Ramp
Raw lightness values (as percentages) for each ramp position. These control the perceptual brightness of the semantic color tokens above.
Property
Description
--esp-l-surface
Lightness for the main background surface.
--esp-l-raised-1
Lightness for the first elevation level.
--esp-l-raised-2
Lightness for the second elevation level.
--esp-l-raised-3
Lightness for the third elevation level.
--esp-l-raised-4
Lightness for the fourth elevation level.
--esp-l-accent
Lightness for accent and link colors.
--esp-l-muted
Lightness for muted / heading text.
--esp-l-text
Lightness for body text.
--esp-l-border
Lightness for border lines.
--esp-l-ink
Lightness for high-contrast ink (action text).
--esp-l-shadow
Lightness for shadows.
Type Scale
Fluid clamp() values that interpolate between a minimum and maximum viewport width. Seven steps from tiny to huge, using a modular ratio (default: Major Third, 1.25).
Property
Description
--esp-type-tiny
Smallest text size (captions, subscripts).
--esp-type-small
Small text size.
--esp-type-normal
Body text size (base step, 1.125rem at 16px root).
--esp-type-medium
Medium text size.
--esp-type-big
Large text size.
--esp-type-large
Extra-large text size.
--esp-type-huge
Largest text size (hero headings).
Type Roles
Complete property recipes for recurring content voices. Apply every property
in a role's set; the color aliases re-resolve inside theme contexts.
Property
Description
--esp-type-overline-font-size
Fluid overline size (--esp-type-tiny).
--esp-type-overline-font-weight
Overline weight from the headings font.
--esp-type-overline-letter-spacing
Overline tracking (0.08em).
--esp-type-overline-text-transform
Overline transform (uppercase).
--esp-type-overline-color
Context-local, Lc 90 overline color.
--esp-type-label-font-size
Fluid label size (--esp-type-normal).
--esp-type-label-font-weight
Label weight from the headings font.
--esp-type-label-letter-spacing
Label tracking (0.01em).
--esp-type-label-color
Context-local, Lc 75 label color.
--esp-type-lead-font-size
Fluid lead size (--esp-type-medium).
--esp-type-lead-font-weight
Lead weight from the body font.
--esp-type-lead-letter-spacing
Lead tracking (normal).
--esp-type-lead-color
Context-local, Lc 75 lead color.
--esp-type-caption-font-size
Fluid caption size (--esp-type-small).
--esp-type-caption-font-weight
Caption weight from the body font.
--esp-type-caption-letter-spacing
Caption tracking (normal).
--esp-type-caption-color
Context-local, Lc 90 caption color.
--esp-type-display-font-family
Heading family for opt-in display text.
--esp-type-display-font-size
Cross-step fluid size: large's 320px floor through huge's 1200px ceiling.
--esp-type-display-font-weight
Display weight from the headings font.
--esp-type-display-line-height
Tight display leading (1.1).
--esp-type-display-letter-spacing
Display tracking (normal).
--esp-type-display-color
Context-local heading color for display text.
esp-form-item consumes the label recipe. In 3.6 this replaces the label's
previous inherited component size and literal bold weight, so a theme with
normal-weight headings now has normal-weight form labels. A compact region can
override --esp-type-label-font-size or --esp-type-label-font-weight on its
wrapper; --esp-form-item-label-color remains the component-specific color
override.
Spacing Scale
Fluid clamp() values for spacing. Seven individual steps plus six cross-step fluid pairs that interpolate between adjacent steps for more dramatic scaling.
Individual Steps
Property
Description
--esp-size-tiny
Smallest spacing unit.
--esp-size-small
Small spacing.
--esp-size-normal
Standard spacing unit.
--esp-size-medium
Medium spacing.
--esp-size-big
Large spacing.
--esp-size-large
Extra-large spacing.
--esp-size-huge
Largest spacing unit.
Cross-Step Fluid Pairs
These pair the minimum of a lower step with the maximum of the next higher step, producing a wider scaling range across viewport sizes.
Property
Description
--esp-size-tiny-to-small
Fluid between tiny (min) and small (max).
--esp-size-small-to-normal
Fluid between small (min) and normal (max).
--esp-size-normal-to-medium
Fluid between normal (min) and medium (max).
--esp-size-medium-to-big
Fluid between medium (min) and big (max).
--esp-size-big-to-large
Fluid between big (min) and large (max).
--esp-size-large-to-huge
Fluid between large (min) and huge (max).
Aliases
Property
Resolves To
Description
--esp-size-font
var(--esp-type-normal)
Standard font size.
--esp-size-padding
var(--esp-size-tiny-to-small)
Default component internal padding.
--esp-size-padding-page
var(--esp-size-small-to-normal)
Page-level section padding.
--esp-size-border-radius
Static rem value
Global border radius.
Layout Constants
The website-tier vocabulary (ESP0174) — values every marketing page was
reinventing:
Property
Resolves To
Description
--esp-measure
66ch
Prose reading measure. esp-page kind="narrow" constrains its children to it.
Fluid vertical rhythm between page sections; esp-section's default block padding.
--esp-shadow-1
1px 1px 4px var(--esp-color-shadow)
Elevation 1 — the card shadow esp-box paints.
--esp-shadow-2
0 2px 8px var(--esp-color-shadow)
Elevation 2 — raised panels, popovers.
--esp-shadow-3
0 6px 20px var(--esp-color-shadow)
Elevation 3 — floating overlays.
--esp-card-min
16rem
Minimum card width for the auto-fit card-grid recipe: grid-template-columns: repeat(auto-fit, minmax(var(--esp-card-min), 1fr)).
Font Families
Property
Default / availability
Description
--esp-font-body
Always emitted as system-ui, sans-serif unless configured
Font family for body and UI text.
--esp-font-headings
Emitted when configured; Espalier heading styles otherwise fall back to body
Font family for headings.
--esp-font-brand
Emitted when configured; Espalier brand styles otherwise fall back through headings to body
Font family for brand marks and product names.
--esp-font-menu
Emitted when configured; menu items otherwise fall back to body, never to headings
Font family for navigation menu items and group labels.
--esp-font-monospace
Always emitted as monospace unless configured
Font family for code and monospace text.
Font Weights
Property
Default
Description
--esp-font-weight-body
normal
Font weight for body and UI text.
--esp-font-weight-headings
bold
Font weight for headings.
--esp-font-weight-brand
bold
Font weight for brand marks and product names.
--esp-font-weight-menu
bold
Font weight for horizontal navigation menu items.
--esp-font-weight-monospace
normal
Font weight for code and monospace text.
Background Images
Optional decorative background images applied to page and box surfaces.
Property
Description
--esp-page-background-image
CSS background-image value for the page surface.
--esp-page-background-image-opacity
Opacity of the page background image (0–1).
--esp-box-background-image
CSS background-image value for esp-box surfaces.
--esp-box-background-image-opacity
Opacity of the box background image (0–1).
--esp-vellum-opacity
Default backdrop opacity for overlay components that opt into the shared vellum layer.
--esp-vellum-background-image
Shared backdrop background-image for overlays such as dialogs and lightboxes.
--esp-vellum-background-image-opacity
Opacity of the shared vellum background image layer.
Shared Hooks
These properties are not specific to a single component, but they are still part of the styling surface used across Espalier.
Field Hooks
Field-like controls that inherit EspalierElementBase use these properties internally for consistent input behavior.
Property
Description
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width applied to .esp-field wrappers.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Background color used for field hover state.
--esp-field-focus-bg
Background color used for field focus state.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).
Overlay Hooks
These properties provide shared defaults for overlay components. esp-dialog and esp-lightbox fall back to them before falling back to root semantic colors.
Property
Description
--esp-vellum-background
Shared overlay background color. Not emitted by <esp-root>, but consumed as a common override hook.
--esp-vellum-opacity
Shared overlay backdrop opacity. Also emitted from theme configuration when present.
--esp-vellum-background-image
Shared overlay background image. Also emitted from theme configuration when present.
--esp-vellum-background-image-opacity
Shared overlay background image opacity. Also emitted from theme configuration when present.
Component-Level Properties
These properties are scoped to individual components. Set them on the component element or any ancestor to override the default styling.
esp-action-menu
Property
Description
--esp-action-menu-background
Menu surface background. Defaults to var(--esp-color-layer-1).
--esp-action-menu-border
Menu border. Defaults to 1px solid var(--esp-color-border).
--esp-action-menu-min-width
Minimum menu width. Defaults to 12rem.
--esp-action-menu-shadow
Menu shadow. Defaults to 2px 2px 4px var(--esp-color-shadow).
--esp-action-menu-item-focus-shadow
Focus ring applied to keyboard-focused items. Defaults to 0 0 0 2px var(--esp-color-link).
--esp-action-menu-item-gap
Space between the optional icon and label. Defaults to var(--esp-size-tiny).
--esp-action-menu-item-hover-background
Background used when an enabled item is hovered or focused. Defaults to var(--esp-color-layer-2).
--esp-action-menu-item-icon-background
Background used behind right-positioned icons. Defaults to var(--esp-color-layer-2).
--esp-action-menu-item-icon-hover-background
Background used behind right-positioned icons when an enabled item is hovered or focused. Defaults to var(--esp-color-layer-3).
--esp-action-menu-item-icon-border-color
Divider color used before right-positioned icons. Defaults to var(--esp-color-border).
--esp-action-menu-item-padding
Padding inside each menu item. Defaults to var(--esp-size-tiny) var(--esp-size-small).
esp-avatar
Property
Description
--esp-avatar-border-radius
Border radius of the image and initials fallback. Defaults to 50%.
--esp-avatar-size
Width and height of the avatar. Automatically set by the size attribute.
esp-badge
Property
Description
--esp-badge-border-radius
Border radius of the badge shell. Defaults to 999px.
esp-profile-chip
Property
Description
--esp-avatar-border-radius
Border radius inherited by the internal avatar. Uses the same hook as esp-avatar and defaults to 50%.
esp-box
Property
Description
--esp-color-box-background
Background color of the box.
--esp-box-background
Background layer for images or gradients.
--esp-box-background-opacity
Opacity of the background layer.
--esp-size-box-padding
Padding inside the box.
--esp-box-shadow
The box's drop shadow. Defaults to var(--esp-shadow-1).
esp-button
Property
Description
--esp-button-padding
Padding inside the button label and icon areas.
--esp-button-incognito-padding
Padding for the incognito (borderless) button style.
esp-button-group
Property
Description
--esp-button-group-divider
Border style between grouped buttons. Defaults to 1px dotted var(--esp-color-border).
esp-page
Property
Description
--esp-page-background
Background color of the page. Defaults to var(--esp-color-background).
--esp-page-main-min-width
Minimum width of the main content well while preview or in-grid help competes for room. Defaults to 30rem.
--esp-page-main-max-width
Maximum width of the main content well. Defaults from kind: 1536px (wide), 768px (narrow), or unbounded (full). Ignored by site, whose main region is always unbounded.
--esp-page-well-max-width
The shared content column in kind="site": the header/footer alignment contract and every esp-section well default to it. Defaults to 72rem.
--esp-page-max-width
Legacy fallback for --esp-page-main-max-width.
--esp-page-background-image
Background image URL for the page. Defaults to none.
--esp-page-background-image-opacity
Opacity of the page background image. Defaults to 1.
--esp-page-canvas-background
Background color of the canvas gutters, revealed when the viewport exceeds the cap. Defaults to transparent (gutters match the page until styled).
--esp-page-canvas-background-image
Background image for the canvas gutters. Defaults to none.
--esp-page-canvas-background-image-opacity
Opacity of the canvas gutter image layer. Defaults to 1.
--esp-page-surface-shadow
Left/right edge shadow on the content surface, visible only above the cap. On by default; set to none to remove.
--esp-page-surface-border
Optional border on the inline edges of the surface, e.g. 1px solid var(--esp-color-border). Defaults to none. Pair with --esp-page-surface-shadow: none to swap the drop shadow for a hairline, or turn both off for no frame.
--esp-page-main-background
Background of the main content well. Defaults to transparent (the well shows the page background). Set a color for a distinct content card, or keep it transparent with --esp-page-surface-shadow: none for content that floats with no frame.
--esp-page-preview-background
Background of the persistent preview surface. Defaults to the main background, then the page background.
--esp-page-preview-border
Leading tear-off edge between main and preview. Defaults to 1px dotted var(--esp-color-border).
--esp-page-preview-shadow
Trailing preview edge shadow. Defaults to the page surface edge shadow; set to none for a flat additive surface.
--esp-page-preview-min-width
Minimum width of the persistent preview. Defaults to 22.5rem (360px).
--esp-page-preview-default-width
Initial automatic preview target, clamped between its minimum and maximum. A retained pointer/keyboard resize preference supersedes it. Unset by default, preserving preview-first flexible allocation.
--esp-page-preview-max-width
Maximum preview width. Defaults to 48rem; preview grows before help.
--esp-page-flyout-min-width
Minimum width of open in-grid help. Defaults to 20rem.
--esp-page-flyout-default-width
Initial automatic in-grid help target, clamped between its minimum and maximum. A retained pointer/keyboard resize preference supersedes it. Unset by default, preserving flexible allocation.
--esp-page-flyout-max-width
Maximum help width and overlay drawer cap before 85vw. Defaults to 30rem.
--esp-page-resize-step
Arrow-key workspace resize step. Defaults to 1rem.
--esp-page-resize-large-step
Shift+Arrow workspace resize step. Defaults to 4rem.
--esp-page-resize-handle-hit-size
Transparent inline hit-target width centered on a resizable page seam. Defaults to 2.75rem.
--esp-page-resize-focus-outline
Keyboard-focus line drawn along a focused workspace seam, spanning the visible dotted edge up to one viewport height. Defaults to 2px dashed var(--esp-color-link).
--esp-page-resize-focus-shadow
Glow cast by the focused seam line, in the line's color. Defaults to 0 0 0.75rem var(--esp-color-link).
--esp-page-preview-width
Legacy fixed-width alias that pins both preview bounds.
--esp-page-flyout-width
Legacy fixed-width alias that pins both help bounds.
--esp-page-preview-min-main-width
Legacy fallback for --esp-page-main-min-width.
--esp-page-fixed-header-offset
Offset reserved for fixed headers. Defaults to var(--esp-header-height).
--esp-page-sticky-header-top
Top inset for sticky headers. Defaults to 0.
--esp-page-header-z-index
Z-index for fixed/sticky header regions. Defaults to 20.
--esp-header-height is owned by esp-header but consumed
inside esp-page (and esp-header-button and esp-burger) via a
use-site fallback. Set it on esp-page, on any ancestor of esp-page,
or on esp-header itself — every consumer will pick it up.
esp-section
Property
Description
--esp-section-background
The band's background. Defaults to the local --esp-color-background — inside a context zone, the zone's canvas.
--esp-section-max-width
The content well's cap. Defaults to var(--esp-page-well-max-width, 72rem); none lets content span the band.
--esp-section-padding-block
Vertical rhythm above and below the well. Defaults to var(--esp-size-section).
--esp-section-padding-inline
Horizontal breathing room at narrow viewports. Defaults to var(--esp-size-medium).
--esp-section-decoration-image
Raster alpha mask painted behind the well. Defaults to none; accepts trusted stylesheet image values.
--esp-section-decoration-color
Tint painted through the mask. Defaults to the context-local --esp-color-headings.
--esp-section-decoration-position
Mask position, including responsive or bleeding values. Defaults to center.
--esp-section-decoration-size
Mask size. Defaults to contain.
--esp-section-decoration-opacity
Plane opacity from 0 through 1. Defaults to 1.
esp-stack
Property
Description
--esp-stack-gap
Overrides the gap between children. Defaults to the gap attribute's space step (normal when unset).
esp-row
Property
Description
--esp-row-gap
Overrides the gap between children. Defaults to the gap attribute's space step (normal when unset).
esp-flyout
Property
Description
--esp-flyout-background
Background color of the flyout panel. Defaults to var(--esp-color-background).
--esp-flyout-border
Border on the panel's leading edge. Defaults to the tear-off perforation, 1px dotted var(--esp-color-border).
--esp-flyout-radius
Radius of the panel's trailing corners. Defaults to var(--esp-size-border-radius); the overlay drawer squares them.
--esp-flyout-shadow
The panel's shadow. Defaults to none in the gutter/docked modes (the perforation does the separating) and to a drawer shadow in overlay mode.
--esp-flyout-padding
Padding inside the panel's header and content regions. Defaults to var(--esp-size-padding).
--esp-flyout-z-index
Stack order of the overlay-drawer mode. Defaults to 3000 — above page chrome, below the dialog drop zone. Set it on the esp-page (or an ancestor), not on the flyout itself: the page reads the same token to hoist the drawer's aside above its header.
The flyout's width range is set with
--esp-page-flyout-min-width and
--esp-page-flyout-max-width, while
--esp-page-flyout-default-width can seed its initial in-grid
allocation independently. The page owns this geometry so the same negotiated
width seats in-grid help, while the maximum caps the overlay drawer before its
85vw viewport limit.
esp-footer
Property
Description
--esp-footer-background
Base footer color. Defaults to var(--esp-color-layer-2).
--esp-footer-color
Body text color. Defaults to var(--esp-color-text).
--esp-footer-heading-color
Link-group heading and configured-brand color. Defaults to var(--esp-color-headings).
--esp-footer-link-color
Footer link color. Defaults to var(--esp-color-link).
--esp-footer-link-hover-color
Hovered link color. Defaults to var(--esp-color-link-hover).
--esp-footer-focus-outline
Focus-visible outline. Defaults to 2px solid var(--esp-color-link).
--esp-footer-border
Block-start border. Defaults to 1px solid var(--esp-color-border).
--esp-footer-padding-block
Footer content block padding. Defaults to var(--esp-size-padding-page).
--esp-footer-padding-inline
Footer content inline padding. Defaults to var(--esp-size-padding-page).
--esp-footer-section-gap
Gap between media, primary, and bottom regions. Defaults to var(--esp-size-big).
--esp-footer-column-gap
Gap between link columns and wide-layout regions. Defaults to var(--esp-size-padding-page).
--esp-footer-row-gap
Vertical gap between footer grid rows and link groups stacked in esp-footer-column. Defaults to var(--esp-size-big).
--esp-footer-link-group-min-width
Intrinsic minimum width of a link-group column. Defaults to 10rem.
--esp-footer-link-group-gap
Space between a link-group heading and links. Defaults to var(--esp-size-small).
--esp-footer-brand-logo-size
Configured logo block size. Defaults to 3rem.
--esp-footer-brand-logo-max-width
Configured logo maximum inline size. Defaults to 12rem.
--esp-footer-background-image
Decorative image, pattern, or gradient layer. Defaults to none.
--esp-footer-background-image-opacity
Decorative layer opacity. Defaults to 1; it does not fade the base color or content.
--esp-footer-background-repeat
Decorative layer repeat behavior, including repeat-x and no-repeat. Defaults to repeat.
--esp-footer-background-position
Decorative layer position. Defaults to 0 0.
--esp-footer-background-size
Decorative layer size, including cover. Defaults to auto.
--esp-footer-background-blend-mode
Decorative layer blend mode. Defaults to normal.
--esp-footer-content-max-width
Surface cap published by esp-page. Defaults to 100% when standalone.
--esp-footer-content-lead
Fraction of surplus placed before content (0, 0.5, or 1). Defaults to 0.
The base color and decorative image are separate layers. For a landscape band,
combine repeat-x with a top position and an explicit image height. For one
large image, use no-repeat, center, and cover. Meaningful images should
instead use the footer's media slot so they retain responsive sources and
alternative text; that region spans the surface-aligned content well rather
than the full bar. When choosing an arbitrary background, set compatible text
and link tokens and verify contrast in every scheme.
esp-image
Banner mode keeps its functional scrim separate from its optional style
texture. Start with the scrim, review contrast against the real photograph, and
then add a texture only when it supports the art direction. The banner-scheme
attribute sets the banner's polarity and defaults to the active scheme: a light
scheme lightens the image behind dark theme-derived ink, a dark scheme darkens
it behind light ink, and the scrim, texture, and overlay defaults below all
follow that polarity (a surrounding context re-tints them). See the full
image banner and focal-point guide for the locked
preset recipes and resilience behavior.
Property
Description
--esp-image-border
Image border. Defaults to 2px solid var(--esp-color-border) and to none in banner mode.
--esp-image-border-radius
Corner radius. Defaults to var(--esp-size-border-radius) and to 0 in banner mode.
--esp-image-object-position
Final object-position override; takes precedence over the normalized focal point.
--esp-image-compact-width
Component-width threshold for compact-ratio. Defaults to 40rem.
--esp-image-scrim-color
Scrim ink. Defaults to the theme background color when the banner polarity matches the scheme, else a polarity-pinned derivation of it.
--esp-image-scrim-opacity
Overrides the selected soft, medium, or strong opacity.
--esp-image-texture-color
Ink for dots, halftone, and scanlines. Defaults to a theme-derived color following banner-scheme.
--esp-image-texture-opacity
Overrides the selected procedural texture opacity.
--esp-image-texture-scale
Tile pitch for CSS-gradient textures; SVG textures use discrete filter variants.
--esp-image-texture-blend-mode
Blend-mode override shared by procedural and image-backed textures.
--esp-image-texture-image
Optional consumer or shipped tileable background-image.
--esp-image-texture-image-opacity
Image-backed texture opacity. Defaults to 1.
--esp-image-texture-repeat
Image-backed texture repeat. Defaults to repeat.
--esp-image-texture-position
Image-backed texture position. Defaults to 0 0.
--esp-image-texture-size
Image-backed texture size. Defaults to auto.
--esp-image-duotone-shadow-color
Duotone shadow stop. Defaults to a dark stop derived from the theme primary.
--esp-image-duotone-highlight-color
Duotone highlight stop. Defaults to a light stop derived from the theme complementary.
--esp-image-overlay-padding
Padding around overlay-slot content. Defaults to var(--esp-size-padding-page).
--esp-image-overlay-color
Overlay text color. Defaults to the theme heading color when the banner polarity matches the scheme, else a polarity-pinned derivation of it.
--esp-image-overlay-text-shadow
Overlay text shadow. Defaults to a soft polarity-matched halo that pushes the ink off the photo; set none to disable.
Optional asset-backed textures use the same tokens as procedural styles. Import
@taprootio/espalier/textures/banner-textures.css, then apply
.esp-texture-paper, .esp-texture-grain, or .esp-texture-grunge to an
esp-image banner. The stylesheet inlines its tiles as data URIs — no asset
paths to serve or configure — and the classes only set the public
texture-image tokens, so a consumer-supplied tile follows the identical
rendering path.
esp-focus-picker
The picker exposes its stage, marker, and live preview regions as CSS parts for
structural customization. The focus HTML attribute maps to the
.focusPoint JavaScript property so the component retains the platform's
callable HTMLElement.focus() method.
Property
Description
--esp-focus-picker-gap
Gap between the authoring stage and live previews. Defaults to var(--esp-size-big).
--esp-focus-picker-stage-background
Empty/loading stage color. Defaults to var(--esp-color-layer-2).
--esp-focus-picker-marker-size
Focal marker diameter. Defaults to var(--esp-size-medium).
--esp-focus-picker-marker-color
Marker fill. Defaults to var(--esp-color-action-background).
--esp-focus-picker-marker-border
Marker border. Defaults to 2px solid white.
--esp-focus-picker-marker-shadow
Marker shadow. Defaults to a dark five-pixel shadow.
--esp-focus-picker-focus-outline
Keyboard focus-visible outline. Defaults to 3px solid var(--esp-color-link).
esp-header
Property
Description
--esp-header-background
Background color of the header bar. Defaults to var(--esp-color-layer-2).
--esp-header-border-width
Border width of the header. Defaults to 0 0 1px 0.
--esp-header-border
Border style of the header. Defaults to solid var(--esp-color-border).
--esp-header-shadow
Box shadow of the header. Defaults to 0 0 2px var(--esp-color-shadow).
--esp-header-height
Height of the header bar. Defaults to calc(4.5 * var(--esp-size-small)).
--esp-header-color
Text/icon color inherited by header controls. Defaults to var(--esp-color-text).
--esp-header-z-index
Z-index of the header host. Defaults to 20.
--esp-header-content-max-width
Surface-alignment contract set by esp-page: the max width the bar content is constrained to while the bar background stays full-bleed. Defaults to 100% (no constraint).
--esp-header-content-lead
Surface-alignment contract set by esp-page: the fraction of leftover width placed before the content (0 = start, 0.5 = center, 1 = end). Defaults to 0.
--esp-header-compact-height
Height of compact scroll-reactive headers. Defaults to max(44px, calc(3.5 * var(--esp-size-small))).
--esp-header-extended-menu-height
Second-row menu height for extended layouts. Defaults to calc(3.5 * var(--esp-size-small)).
--esp-header-extended-menu-border
Border between the primary row and second-row menu in extended layouts. Defaults to 1px solid var(--esp-color-border).
--esp-header-topbar-height
Maximum height reserved for the optional topbar row. Defaults to 8rem.
--esp-header-brand-placement
CSS place-content value for the brand container. Defaults to center start.
--esp-header-brand-inline-placement
CSS justify-content value for the brand container. Defaults to start.
--esp-header-brand-padding-inline
Inline padding for the brand container. Defaults to var(--esp-size-small).
--esp-header-brand-color
Configured brand text/logo color. Defaults to var(--esp-color-headings).
--esp-header-brand-font-family
Configured brand font family. Defaults to var(--esp-font-brand, var(--esp-font-headings)).
--esp-header-brand-font-size
Configured brand text size. Defaults to var(--esp-type-medium).
--esp-header-brand-font-weight
Configured brand font weight. Defaults to var(--esp-font-weight-brand, var(--esp-font-weight-headings)).
--esp-header-brand-gap
Space between a configured logo and brand text. Defaults to var(--esp-size-tiny-to-small).
--esp-header-brand-logo-size
Configured logo block size. Defaults to calc(0.72 * var(--esp-header-height)).
--esp-header-brand-logo-max-width
Configured logo maximum inline size. Defaults to 12rem.
--esp-header-brand-max-width
Maximum inline size of configured brand content. Defaults to min(36ch, 45vw).
--esp-header-brand-hover-color
Configured brand hover color. Defaults to var(--esp-color-headings-hover).
--esp-header-brand-hover-background
Configured brand hover background. Defaults to transparent.
--esp-header-brand-hover-decoration
Configured brand hover text decoration. Defaults to none.
--esp-header-brand-hover-transform
Configured brand hover transform. Defaults to none; the built-in transition is disabled when reduced motion is requested.
--esp-header-transparent-background
Background used before scroll for transparent headers. Defaults to transparent.
--esp-header-transparent-color
Brand/action color used before scroll for transparent headers. Defaults to var(--esp-color-headings).
--esp-header-scrolled-shadow
Box shadow used by elevated scroll headers. Defaults to 0 2px 8px var(--esp-color-shadow).
--esp-header-progress-height
Height of the optional scroll progress bar. Defaults to 3px.
--esp-header-progress-background
Background color of the optional scroll progress bar. Defaults to var(--esp-color-link).
--esp-header-progress-track-background
Track background of the optional scroll progress bar. Defaults to transparent.
--esp-header-button-closed-color
Burger button color when menu is closed. Defaults to var(--esp-color-headings).
--esp-header-button-closed-hover-color
Burger button hover color when menu is closed. Defaults to var(--esp-color-headings-hover).
--esp-header-button-open-color
Burger button color when menu is open. Defaults to var(--esp-color-text).
--esp-header-button-open-hover-color
Burger button hover color when menu is open. Defaults to var(--esp-color-headings-hover).
--esp-header-button-stroke-width
Stroke width of the burger button lines. Defaults to 0.45rem.
esp-header-button
Property
Description
--esp-header-button-background
Background color of the button. Defaults to var(--esp-color-layer-3).
--esp-header-button-background-hover
Hover background color. Defaults to var(--esp-color-layer-4).
--esp-header-button-box-shadow
Box shadow. Defaults to 0px 0px 3px 0px var(--esp-color-shadow).
--esp-header-button-border-left
Left border. Defaults to 1px dotted var(--esp-color-border).
--esp-header-button-color
Text and icon color. Defaults to var(--esp-color-text).
esp-menu
Property
Description
--esp-menu-background
Background color of vertical and drawer menus. Defaults to var(--esp-color-layer-1).
--esp-menu-border-color
Border color of menu rails and drawers. Defaults to var(--esp-color-border).
--esp-menu-horizontal-justify-content
Main-axis alignment for horizontal menu items. Defaults to flex-start.
--esp-menu-scrim-color
Scrim color when the drawer is open. Defaults to a translucent shadow color.
--esp-menu-drawer-shadow
Box shadow for the drawer overlay. Defaults to 2px 0 8px var(--esp-color-shadow).
--esp-menu-drawer-width
Drawer width. Defaults to min(22rem, 86vw).
--esp-menu-drawer-item-font-size
Item label size in the full-screen drawer. Defaults to var(--esp-type-large).
--esp-menu-drawer-transition-duration
Duration of the full-screen drawer's transition. Defaults to 0.3s; reduced motion disables it.
--esp-menu-drawer-brand-logo-size
Logo height of the brand centered in the full-screen drawer. Defaults to calc(3 * var(--esp-size-medium)).
--esp-menu-drawer-brand-color
Text and logo color of the full-screen drawer's brand. Defaults to the mirrored brand color, then var(--esp-color-headings).
--esp-menu-top-offset
Top offset for drawers below fixed headers. Defaults to 0px.
esp-menu-group
Property
Description
--esp-menu-group-color
Text color of the group header. Defaults to var(--esp-color-headings).
--esp-menu-group-background
Background color of the group header. Defaults to var(--esp-color-layer-1).
--esp-menu-group-hover-background
Hover background color of the group header. Defaults to var(--esp-color-layer-2).
--esp-menu-group-indicator-color
Color of the expand/collapse indicator. Defaults to var(--esp-color-headings).
--esp-menu-group-border-color
Border color of the group. Defaults to var(--esp-color-border).
--esp-menu-group-panel-background
Background color of horizontal disclosure panels. Defaults to var(--esp-color-layer-1).
--esp-menu-group-panel-shadow
Box shadow of horizontal disclosure panels. Defaults to 0 4px 12px var(--esp-color-shadow).
--esp-menu-group-icon-min-width
Minimum width of the icon rail. Defaults to calc(1 * var(--esp-size-font)).
--esp-menu-group-icon-padding
Padding inside the icon rail. Defaults to var(--esp-size-padding).
--esp-menu-group-icon-background
Background color of the icon rail. Defaults to var(--esp-color-layer-2).
--esp-menu-group-icon-size
Size of generated and slotted group icons. Defaults to calc(1 * var(--esp-size-font)).
esp-menu-item
Property
Description
--esp-menu-item-color
Text color. Defaults to var(--esp-color-text).
--esp-menu-item-background
Background color. Defaults to transparent for horizontal items and var(--esp-color-layer-1) for vertical items.
--esp-menu-item-border-color
Border color. Defaults to var(--esp-color-border).
--esp-menu-item-hover-color
Hover text color. Defaults to var(--esp-color-headings-hover).
--esp-menu-item-hover-background
Hover background color. Defaults to var(--esp-color-layer-2).
--esp-menu-item-hover-decoration
Text decoration of a hovered link item. Defaults to none; set underline to restore the former underline.
--esp-menu-item-hover-indicator-color
Color of the bar under a hovered horizontal item. Defaults to --esp-menu-item-hover-color, then var(--esp-color-headings-hover).
--esp-menu-item-transition-duration
Duration for color, background, and indicator changes. Defaults to 0.2s; reduced motion disables the transition.
--esp-menu-item-icon-background
Icon area background color. Defaults to var(--esp-color-layer-2).
--esp-menu-item-active-color
Text color of the active item. Defaults to var(--esp-color-link).
--esp-menu-item-active-background
Background color of the active item. Defaults to var(--esp-color-layer-2).
--esp-menu-item-active-indicator-color
Color of the bar under the active horizontal item. Defaults to --esp-menu-item-active-color, then var(--esp-color-link).
--esp-menu-item-active-font-weight
Font weight of active menu items and group labels. Defaults to var(--esp-font-weight-headings).
--esp-menu-item-font-family
Font family of item and group labels. Defaults to the theme's --esp-font-menu, then --esp-font-body.
--esp-menu-item-font-weight
Font weight of horizontal item labels. Defaults to --esp-font-weight-menu, then 700.
--esp-menu-item-font-size
Font size of item labels. Defaults to inherit.
--esp-menu-item-padding
Padding around the item label. Defaults to var(--esp-size-small) var(--esp-size-padding).
--esp-menu-item-icon-min-width
Minimum width of the icon rail. Defaults to calc(1 * var(--esp-size-font)).
--esp-menu-item-icon-padding
Padding inside the icon rail. Defaults to var(--esp-size-padding).
--esp-menu-item-icon-size
Size of generated and slotted item icons. Defaults to calc(1 * var(--esp-size-font)).
esp-burger
Property
Description
--esp-color-burger
Line color when closed.
--esp-color-burger-hover
Hover line color when closed.
--esp-color-burger-opened
Line color when open.
--esp-color-burger-opened-hover
Hover line color when open.
--esp-size-burger-stroke
Stroke width of the burger lines.
esp-slider
Property
Description
--esp-slider-track-height
Height of the slider track. Defaults to 6px.
--esp-slider-track-color
Background color of the unfilled portion of the track. Defaults to var(--esp-color-border).
--esp-slider-track-fill-color
Background color of the filled portion of the track. Defaults to var(--esp-color-action-background).
--esp-slider-track-border-radius
Border radius of the track. Defaults to calc(var(--esp-slider-track-height) / 2).
--esp-slider-thumb-size
Diameter of the thumb. Defaults to var(--esp-size-normal-to-medium).
--esp-slider-thumb-color
Fill color of the thumb. Defaults to var(--esp-color-layer-1).
--esp-slider-thumb-border-color
Border color of the thumb. Defaults to var(--esp-color-border).
--esp-slider-thumb-shadow
Box shadow of the thumb. Defaults to 0 1px 3px oklch(0 0 0 / 0.2).
--esp-slider-focus-shadow
Color of the focus ring shadow. Defaults to var(--esp-color-shadow).
esp-switch
Property
Description
--esp-switch-width
Width of the switch track. Defaults to calc(var(--esp-size-normal-to-medium) * 1.75).
--esp-switch-height
Height of the switch track. Defaults to var(--esp-size-normal-to-medium).
--esp-switch-thumb-size
Diameter of the thumb. Defaults to calc(var(--esp-switch-height) - 4px).
--esp-switch-track-color
Track background color when off. Defaults to var(--esp-color-border).
--esp-switch-track-color-on
Track background color when on. Defaults to var(--esp-color-action-background).
--esp-switch-thumb-color
Thumb color. Defaults to var(--esp-color-layer-1).
--esp-switch-focus-shadow
Color of the focus ring shadow. Defaults to var(--esp-color-shadow).
--esp-switch-text-padding
Padding inside each text-mode label cell. Defaults to var(--esp-size-tiny) var(--esp-size-small).
--esp-switch-text-font-size
Font size for text-mode labels. Defaults to var(--esp-size-font).
--esp-switch-text-active-color
Text color of the active label in text mode. Defaults to var(--esp-color-action-text).
--esp-switch-text-inactive-color
Text color of the inactive label in text mode. Defaults to var(--esp-color-layer-1).
--esp-switch-text-highlight-color
Background color of the sliding highlight in text mode. Defaults to var(--esp-color-action-background).
esp-tab-group
Property
Description
--esp-tab-color-border
Border color of the tab group container.
--esp-tab-color-background
Background color of the tab group.
--esp-tab-color-strip-background
Background color of the active tab indicator strip.
--esp-tab-color-button-hover
Tab button hover color.
--esp-tab-color-button-active
Active tab button color.
--esp-tab-color-text
Text color for tab buttons.
--esp-tab-size-padding
Padding inside tab panels.
esp-toaster
Property
Description
--esp-toaster-z-index
Stack order of the toaster container. Defaults to 5000.
--esp-toaster-gap
Gap between stacked toasts. Defaults to var(--esp-size-tiny-to-small).
--esp-toaster-padding
Padding around the toaster container. Defaults to var(--esp-size-padding).
esp-tooltip
Property
Description
--esp-tooltip-background
Background color of the tooltip. Defaults to var(--esp-color-layer-1).
--esp-tooltip-border
Border of the tooltip. Defaults to 1px solid var(--esp-color-border).
--esp-tooltip-border-radius
Border radius of the tooltip. Defaults to var(--esp-size-border-radius).
--esp-tooltip-color
Text color inside the tooltip. Defaults to var(--esp-color-text).
--esp-tooltip-focus-outline
Outline used when the trigger receives keyboard focus. Defaults to 2px solid var(--esp-color-link).
--esp-tooltip-font-size
Font size of tooltip text. Defaults to var(--esp-type-small).
--esp-tooltip-max-width
Maximum width of the tooltip. Defaults to 40ch.
--esp-tooltip-padding
Padding inside the tooltip. Defaults to var(--esp-size-tiny) var(--esp-size-small).
--esp-tooltip-shadow
Box shadow for the tooltip. Defaults to 2px 2px 4px var(--esp-color-shadow).
esp-status-indicator
Property
Description
--esp-status-indicator-width
Width of the indicator chip. Defaults to var(--esp-size-normal-to-medium). Override on the host to render a non-square chip (for example, a file-type badge).
--esp-status-indicator-height
Height of the indicator chip. Defaults to var(--esp-status-indicator-width) so the chip stays square unless you set both hooks.
--esp-status-indicator-border-radius
Corner radius of the indicator chip. Defaults to 999px. Lower it to var(--esp-size-border-radius) for a rounded-rectangle chip.
--esp-status-indicator-popover-max-width
Maximum width of the popover body. Defaults to 32ch. Raise this when slotting structured content such as a <ul> of values.
esp-progress
Property
Description
--esp-progress-border-color
Border color of the track outline. Defaults to var(--esp-color-border).
--esp-progress-border-radius
Border radius of the track and fill. Defaults to var(--esp-size-border-radius).
--esp-progress-circle-size
Diameter of the circular progress ring in circle mode. Automatically set by the size attribute.
--esp-progress-fill-color
Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes.
--esp-progress-font-size
Font size for the value text. Defaults to var(--esp-type-small).
--esp-progress-height
Height of the progress bar track. Automatically set by the size attribute.
--esp-progress-text-color
Color of the progress value text. Defaults to var(--esp-color-text).
esp-checkbox
Property
Description
--esp-checkbox-size
Width and height of the checkbox.
--esp-checkbox-icon-color
Stroke color of the checkmark icon.
--esp-checkbox-focus-shadow
Color of the focus ring shadow.
esp-radio-button
Property
Description
--esp-radio-button-size
Width and height of the radio button.
--esp-radio-button-icon-color
Stroke color of the radio indicator.
--esp-radio-button-focus-shadow
Color of the focus ring shadow.
esp-dialog
Property
Description
--esp-color-dialog-bg
Background color of the dialog overlay.
--esp-dialog-bg-opacity
Opacity of the dialog overlay background.
esp-lightbox
Property
Description
--esp-lightbox-bg
Background color of the lightbox overlay. Falls through to --esp-vellum-background, then --esp-color-layer-3.
--esp-lightbox-bg-opacity
Opacity of the lightbox overlay. Falls through to --esp-vellum-opacity, then 0.85.
--esp-vellum-background-image
Optional background image used by the shared overlay layer.
--esp-vellum-background-image-opacity
Opacity of the shared overlay background image layer.
esp-form-item
Property
Description
--esp-form-item-label-color
Color of the label text.
--esp-form-item-hint-color
Color of the hint text. Defaults to a muted variant of the body text color.
--esp-form-item-hint-font-size
Font size of the hint text. Defaults to var(--esp-type-tiny).
--esp-form-item-error-color
Color of the visible error badge text.
--esp-form-item-error-background
Background color of the visible error badge.
--esp-form-item-error-field-background
Background color applied to slotted fields while an error is shown. Defaults to an error-tinted raised field surface.
--esp-form-item-error-field-border-color
Border color applied to slotted fields while an error is shown. Defaults to an error-tinted border color.
--esp-form-item-error-field-text-color
Text color applied to slotted fields while an error is shown. Defaults to var(--esp-form-item-error-color).
--esp-form-item-error-field-focus-shadow
Focus shadow color applied to slotted fields while an error is shown. Defaults to var(--esp-color-shadow).
--esp-form-item-warning-color
Color of the visible warning badge text.
--esp-form-item-warning-background
Background color of the visible warning badge.
--esp-form-item-warning-field-background
Background color applied to slotted fields while a warning is shown. Defaults to a warning-tinted raised field surface.
--esp-form-item-warning-field-border-color
Border color applied to slotted fields while a warning is shown. Defaults to a warning-tinted border color.
--esp-form-item-warning-field-text-color
Text color applied to slotted fields while a warning is shown. Defaults to var(--esp-color-text).
--esp-form-item-warning-field-focus-shadow
Focus shadow color applied to slotted fields while a warning is shown. Defaults to var(--esp-color-shadow).
--esp-form-item-font
Font family for the form item.
--esp-form-item-font-size
Font size for the form item.
esp-details
Property
Description
--esp-details-color-border
Border color.
--esp-details-color-background
Background color.
--esp-details-color-summary-background
Summary section background.
--esp-details-color-summary-hover-background
Summary section hover background.
--esp-details-color-summary-background-active
Summary section background when open.
--esp-details-color-indicator
Color of the expand / collapse indicator.
--esp-details-size-padding
Padding inside the details panel.
esp-details-group
Property
Description
--esp-details-group-color-border
Border color for the group container.
esp-info
Property
Description
--esp-info-color-border
Border color.
--esp-info-color-background
Background color.
--esp-info-color-text
Text color.
esp-breadcrumbs
Property
Description
--esp-breadcrumb-separator-color
Color of the separator between breadcrumbs.
esp-breadcrumb
Property
Description
--esp-breadcrumb-color
Link text color.
--esp-breadcrumb-hover-color
Link hover text color.
esp-image
Property
Description
--esp-image-border
Border property of the image.
esp-image-picker
Property
Description
--esp-image-picker-preview-height
Height of the large preview above the control. Defaults to 16rem.
--esp-image-picker-option-width
Width of dropdown images, capped at 40vw on narrow screens. Defaults to 12rem.
--esp-image-picker-option-height
Height of dropdown images. Images retain their aspect ratio. Defaults to 8rem.
esp-image-upload
Property
Description
--esp-image-upload-preview-background
Background color of the image preview area.
esp-image-preview
Property
Description
--esp-image-preview-border-color
Border color of the preview.
--esp-image-preview-remove-color
Text color of the remove button.
--esp-image-preview-overlay-text
Text color used by the upload and failure overlays.
esp-picker-menu
Property
Description
--esp-color-picker-bg
Background color of picker menu items.
--esp-color-picker-bg-alt
Alternate background color for picker menu items.
--esp-color-picker-bg-hover
Hover background color for regular picker menu items.
--esp-color-picker-bg-alt-hover
Hover background color for alternating picker menu items.
esp-color-picker
Property
Description
--esp-size-color-picker-border-width
Border width of the color picker.
esp-grid
Property
Description
--esp-grid-border-outer
Border style of the grid's outer edge. Defaults to 2px solid var(--esp-color-border).
--esp-grid-border-inner
Border style of the grid's internal section separators. Defaults to 2px solid var(--esp-color-border).
--esp-grid-background
Background color of the grid container. Defaults to var(--esp-color-layer-1).
--esp-grid-text-color
Text color used by the grid. Defaults to var(--esp-color-text).
--esp-grid-header-background
Background color of header rows and pinned header cells. Defaults to var(--esp-color-layer-4).
--esp-grid-header-active-background
Background color used for sorted headers and sortable-header hover state. Defaults to var(--esp-color-layer-3).
--esp-grid-row-background-odd
Background color of odd rows. Defaults to var(--esp-color-layer-1).
--esp-grid-row-background-even
Background color of even rows. Defaults to var(--esp-color-layer-2).
--esp-grid-row-hover-background
Background color of hovered rows. Defaults to var(--esp-color-layer-3).
--esp-grid-cell-border-color
Divider color used between grid cells. Defaults to var(--esp-color-layer-3).
--esp-grid-row-hover-border-color
Divider color used while rows are hovered. Defaults to var(--esp-color-layer-4).
--esp-grid-link-color
Link color used inside grid cells. Defaults to var(--esp-color-link).
--esp-grid-link-hover-color
Link hover decoration color used inside grid cells. Defaults to var(--esp-color-link-hover).
esp-tree
Property
Description
--esp-tree-action-bg
Background color of the expand/collapse action rail. Defaults to a derived layer color.
--esp-tree-action-hover-bg
Hover background color of the expand/collapse action rail. Defaults to var(--esp-color-layer-2).
--esp-tree-action-size
Hit target size for tree icon actions. Defaults to 1.75rem.
--esp-tree-guide-color
Color of the branch guide path. Defaults to var(--esp-color-border).
--esp-tree-hover-bg
Background color of a node row on hover. Defaults to var(--esp-color-layer-2).
--esp-tree-icon-color
Color of the expand/collapse action and node icons. Defaults to var(--esp-color-headings).
--esp-tree-indent-step
Horizontal indent added per nesting level. Defaults to 1.25rem.
--esp-tree-node-padding
Vertical padding of each node row. Defaults to var(--esp-size-small).
--esp-tree-row-bg
Background color of an unselected row. Defaults to var(--esp-color-layer-1).
--esp-tree-row-border-color
Border color of an unselected row. Defaults to var(--esp-color-border).
--esp-tree-selected-bg
Background color of the selected node row. Derived from var(--esp-color-primary).
esp-repeater
Property
Description
--esp-repeater-background
Background of the repeater container.
--esp-repeater-border
Border of the repeater container.
--esp-repeater-border-radius
Border radius of the repeater container.
--esp-repeater-gap
Space between repeated items.
--esp-repeater-padding
Padding used by repeater state panels and the loading or error footer.
--esp-repeater-content-padding
Padding inside the virtualized content region.
--esp-repeater-grid-columns
Grid column count when layout="grid".
--esp-repeater-grid-column-gap
Horizontal gap between grid columns.
--esp-repeater-grid-row-gap
Vertical gap between grid rows.
esp-search
Property
Description
--esp-search-max-width
Maximum width of the search panel. Defaults to 40rem.
--esp-search-max-height
Maximum height of the scrollable results list. Defaults to 60vh.
--esp-search-backdrop
Backdrop color behind the search panel. Defaults to oklch(0.15 0 0 / 0.6).
--esp-search-panel-background
Background color of the search panel. Defaults to var(--esp-color-layer-1).
--esp-search-panel-shadow
Box shadow of the search panel.
--esp-search-border-color
Divider and loading-track color used by the search panel. Defaults to var(--esp-color-border).
--esp-search-text-color
Main text color used by the search UI. Defaults to var(--esp-color-text).
--esp-search-muted-color
Muted text color for placeholders, excerpts, and empty states.
--esp-search-title-color
Title color for result rows. Defaults to var(--esp-color-headings).
--esp-search-active-background
Background color of the active result row. Defaults to var(--esp-color-layer-2).
--esp-search-highlight-background
Background color applied to excerpt highlights. Defaults to var(--esp-color-link-hover-bg).
--esp-search-loading-indicator-color
Accent color of the loading spinner. Defaults to var(--esp-color-primary).
--esp-search-loading-indicator-track-color
Track color of the loading spinner. Defaults to var(--esp-search-border-color).
VS Code Integration
Espalier ships a CSS Custom Data file that gives VS Code autocomplete and hover documentation for every --esp-* property.
Setup
Add the following to your project's .vscode/settings.json: