31 lines
1.7 KiB
TypeScript
31 lines
1.7 KiB
TypeScript
// B5 (docs/DESIGN.md): one glass class and one radius per surface ROLE, so corners nest and no site
|
||
// drifts its own alpha. A call site names the role and adds only its layout (padding, width, flex);
|
||
// the radius comes from here, never beside it (no tailwind-merge: two `rounded-*` is a coin flip). A
|
||
// raw `glass` / `glass-card` / `glass-menu` class anywhere else is a lint error (`local/surface-role`).
|
||
//
|
||
// What floats over undimmed content (a menu, a popover, a tooltip, a toast) is `.glass-menu`, the
|
||
// near-opaque tier, so it stays readable over any thumbnail; what sits in the page is `.glass-card`;
|
||
// a dialog, a drawer, a docked or side panel and a page section is `.glass`.
|
||
export const SURFACE = {
|
||
/** A dialog, a side panel, a dock, a page section: r16. */
|
||
panel: "glass rounded-2xl",
|
||
/** A dialog that slides in from the edge: square on a phone, r16 on its open side. */
|
||
drawer: "glass rounded-none sm:rounded-l-2xl",
|
||
/** A card or a row card in the page (a video, a user, a download): r12. */
|
||
card: "glass-card rounded-xl",
|
||
/** A menu or a listbox: r12, 4px padding, so its r8 rows nest (12 − 4). */
|
||
menu: "glass-menu rounded-xl p-1",
|
||
/** Floating content that is not a list of choices (a hover card, a status popover, a toast): r12. */
|
||
popover: "glass-menu rounded-xl",
|
||
/** A tooltip: r8. */
|
||
tooltip: "glass-menu rounded-lg",
|
||
/** A control bar floating over the page (the debug recorder's bar): a pill (A2: round floats). */
|
||
floating: "glass-menu rounded-full",
|
||
/** The pull tab on a side panel's edge: square on the wall side, r12 on the open side. */
|
||
edgeTab: "glass rounded-r-xl",
|
||
/** A full-width sticky band (the design lab's header): square. */
|
||
band: "glass",
|
||
} as const;
|
||
|
||
export type SurfaceRole = keyof typeof SURFACE;
|