Material System

1import type * as React from "react";
2 
3/**
4 * The Sistine material system — the single source of the material → markup mapping.
5 *
6 * FOUR materials (glass, frosted, crystal, opaque), each a `[data-material]` token set in
7 * app/theme/materials.css, composed with orthogonal AXES (border, veil, size, gradient, glow, sheen)
8 * over the one structural `glass` utility. Components call `glassMaterial()` instead of hardcoding
9 * recipe class strings (check-theme bans the legacy `glass-bg`/`glass-surface`/… classes).
10 *
11 * Semantics:
12 * - `material` UNDEFINED = adaptive: no attribute is rendered; the surface follows the page's
13 *   [data-glass] style (the default everywhere).
14 * - An explicit material PINS the element under any page style, and — because the token set is
15 *   inherited custom properties — also acts as a scoped default for adaptive glass descendants
16 *   (a dialog set to frosted re-skins the controls inside it; pin a child back with its own material).
17 * - `"none"` = not a glass surface: the helper returns nothing and the component supplies its plain
18 *   (shadcn) classes.
19 */
20export type Material = "glass" | "frosted" | "crystal" | "opaque" | "none";
21 
22export interface MaterialProps {
23  /** undefined = adaptive (follows the page style); "none" = the component's plain fallback. */
24  material?: Material;
25  /** Material border. Three weights: `true`/"hairline" = the material's edge (1px; 0.5px under
26   *  frosted), "rim" = 2px, "frame" = 4px. */
27  border?: boolean | "hairline" | "rim" | "frame";
28  /** Element-composed legibility floor for read-through overlays (menus, tooltips, toasts). */
29  veil?: boolean;
30  /** Blur/elevation tier — INTERNAL: set by a component's ROLE (glass-sm/-lg), not a public prop
31   *  ("size" universally means a component's dimensions; the material tier must never shadow that). */
32  size?: "sm" | "lg" | "xl";
33  /** Readability blur FLOOR (>= --glass-diffuse, default 12px) for text-dense translucent surfaces;
34   *  inert under opaque. "stained" = the dyed mode: same floor, plus true stained-glass optics — the
35   *  backdrop renders as TONAL SHADES of the theme hue (grayscale luminance collapse — the tint supplies the color). */
36  diffuse?: boolean | "stained";
37  /** Brand-gradient accent layered over the material. */
38  gradient?: boolean;
39  /** Resting glow, or the intensified "lg" halo. */
40  glow?: boolean | "lg";
41  /** Opt-in hover shimmer (pseudo-element based — avoid on sticky/fixed surfaces). */
42// … truncated