CSS Utilities

Shared classes shipped with phoundry-ui styles: import phoundry-ui/styles or the split theme.css + components.css + utils.css bundle so overlays, focus rings, and decorative utilities resolve.

import 'phoundry-ui/styles/theme.css';
import 'phoundry-ui/styles/components.css';
import 'phoundry-ui/styles/utils.css';

Specular card

.phi-specular-card adds a soft corner glow and edge highlight. Layer content above the pseudo-elements (relative z-10 on children) if you need crisp text atop the effect.

Specular effect

Specular Effect

Soft glow top-left plus a thin specular rim.

Show code

<div class="phi-specular-card relative rounded-xl border border-border-muted bg-surface-base p-6">
  <div class="relative z-10">
    <h3>Title</h3>
    <p>Body copy stays readable above the gloss.</p>
  </div>
</div>

Focus rings

.focus-ring and .focus-ring-inset pair with --focus-ring from the theme. Inputs such as Checkbox already include them.

Focus ring

Show code

<button type="button" class="focus-ring rounded-md px-2 py-1 text-xs">Keyboard focus me</button>

Z-index tokens

components.css defines --z-dropdown through --z-tooltip. Overlay components (context menu, command bar, modals) reference these — override in your theme if you stack third-party widgets.

Panel shells such as .ctx-menu-panel, .cmd-bar-panel, .modal-panel, and .tour-panel style built-in overlays. Custom modals opened through the modal manager should keep the modal-panel class on the inner card for consistent depth.