peter
7ed2ac4e95
`npm run knip` now runs a second, --production pass, which asks whether the code that ships uses an export, not just whether anything does. Of the 47 exports only tests reached: - 34 are exported for their test and say so with @internal, naming the test. - 11 were module-private names with a stray `export`. Two of them were not used at all and are deleted. - The unused alreadyReported re-export is gone. Test kits, the e2e suite and the two build-tooling modules are excluded from the production project, each named in knip.jsonc. noUncheckedIndexedAccess is now on for the node and e2e tsconfigs too (0 errors), matching the app project. tsconfig.node.json listed a tailwind.config.js that has not existed since Tailwind 4. That entry is now playwright.config.ts, which the typed lint finds through this project.
31 lines
1.8 KiB
TypeScript
31 lines
1.8 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",
|
||
/** The same, from the START edge (a side panel on touch, C2): r16 on its open side. */
|
||
drawerStart: "glass rounded-none sm:rounded-r-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;
|