Customizing materials

Scope theme, material grade, backdrop volatility, contrast, and token overrides.

Treat material as an environment contract. Set broad defaults with providers, then use a component-level prop only when one surface has a different semantic role.

import {
  Backdrop,
  IncreaseContrast,
  LiquidTokenProvider,
  Material,
  Theme,
} from "@liquidify/glass"
import "@liquidify/glass/glass.css"

export function ProductEnvironment({ children }: { children: React.ReactNode }) {
  return (
    <Theme type="system">
      <Material default="regular">
        <Backdrop type="low">
          <IncreaseContrast level="auto">
            <LiquidTokenProvider tokens={{ "--lq-color-accent": "#5b5bd6" }}>
              {children}
            </LiquidTokenProvider>
          </IncreaseContrast>
        </Backdrop>
      </Material>
    </Theme>
  )
}

Choose material by backdrop

Use frosted when content behind the surface is busy or text needs stronger separation. Use regular for typical application chrome. Reserve clear for calm backdrops where preserving visual detail will not reduce legibility.

<Material default="regular">
  <GlassPrimitive as="nav">…</GlassPrimitive>
  <GlassPrimitive as="aside" material="frosted">…</GlassPrimitive>
</Material>

The local material prop wins over the provider default.

Describe backdrop activity

Backdrop does not draw a background. It tells the engine how often existing content behind the glass changes:

static for a backdrop that will not change.
low for ordinary application UI.
high around continuously changing content such as video or animation.

Keep high scoped to the smallest subtree that needs it.

Override public tokens

Use LiquidTokenProvider for a runtime scope and CSS for a selector-owned scope. Only pass --lq-* keys to the provider. Prefer semantic tokens such as --lq-color-accent; engine internals are not a substitute for choosing the appropriate material grade.

See Materials and Colors for the related token families.

import { Backdrop, IncreaseContrast, LiquidTokenProvider, Material, Theme, } from "@liquidify/glass" import "@liquidify/glass/glass.css" export function ProductEnvironment({ children }: { children: React.ReactNode }) { return ( <Theme type="system"> <Material default="regular"> <Backdrop type="low"> <IncreaseContrast level="auto"> <LiquidTokenProvider tokens={{ "--lq-color-accent": "#5b5bd6" }}> {children} </LiquidTokenProvider> </IncreaseContrast> </Backdrop> </Material> </Theme> ) }