Styling API

Stable CSS variables, selectors, data attributes, and styling-related props.

CSS Variables

Use this table when building a theme. Tilery reads visual tokens from CSS custom properties on the .tilery root element. Variables can also be inherited from ancestors in the same document.

For native popout windows, prefer variables that match .tilery or .tilery__popout directly. Wrapper-scoped variables are not available in the popup unless the copied stylesheet can still match the popup root.

Stable Selectors

Use these selectors when variables are not enough, such as pill-shaped tabs or app-specific menu spacing. Keep overrides scoped to your own wrapper so they do not affect every Tilery instance.

Data Attributes

Use data attributes for component state that is not always expressible through pseudo-classes: active tabs, disabled resize handles, floating panels, and drop zones.

Hover and keyboard focus are normal browser interaction states, so style them with :hover and :focus-visible.

Resize State Styling

Resize dividers and T-junction controls expose active, disabled, and min/max clamp states.

.tilery {
  --tilery-resize-handle-active-bg: color-mix(
    in srgb,
    var(--tilery-accent),
    transparent 38%
  );
}

.tilery__divider[data-resize-disabled],
.tilery__junction[data-resize-disabled] {
  cursor: default;
  opacity: 0.45;
}

.tilery__divider[data-resize-at-min]::before,
.tilery__divider[data-resize-at-max]::before {
  background: color-mix(in srgb, var(--tilery-accent), transparent 58%);
  opacity: 1;
}

.tilery__divider:hover::before,
.tilery__junction:hover::before,
.tilery__junction:hover::after {
  opacity: 1;
}

.tilery__divider:focus-visible {
  outline: 2px solid var(--tilery-accent);
  outline-offset: -2px;
}

Styling Props

Use these props when styling needs a runtime decision rather than a static CSS rule. For example, resizeHandleHitSize changes pointer hit targets, while action props decide whether built-in action controls render.

Popout Styling Contract

Native popout panels render into a same-origin browser window through a React portal. React context is preserved, but the popup has its own document.

Tilery copies style tags and stylesheet links from the main document head, then creates a .tilery.tilery__popout root in the popup document.

The popup does not copy html or body classes, wrapper elements, inline styles, or CSS variables inherited from page ancestors.

For popout-safe themes, place variables in copied stylesheets that match .tilery or .tilery__popout directly.