elevated

1import type * as React from "react";
2
3import { cn } from "@/lib/utils";
4
5export type SurfaceLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
6
7export const SURFACE_BG: Record<SurfaceLevel, string> = {
8  1: "bg-surface-1",
9  2: "bg-surface-2",
10  3: "bg-surface-3",
11  4: "bg-surface-4",
12  5: "bg-surface-5",
13  6: "bg-surface-6",
14  7: "bg-surface-7",
15  8: "bg-surface-8",
16};
17
18export const SURFACE_SHADOW: Record<SurfaceLevel, string> = {
19  1: "shadow-surface-1",
20  2: "shadow-surface-2",
21  3: "shadow-surface-3",
22  4: "shadow-surface-4",
23  5: "shadow-surface-5",
24  6: "shadow-surface-6",
25  7: "shadow-surface-7",
26  8: "shadow-surface-8",
27};
28
29export const SURFACE_RIM: Record<SurfaceLevel, string> = {
30  1: "after:shadow-surface-rim-1",
31  2: "after:shadow-surface-rim-2",
32  3: "after:shadow-surface-rim-3",
33  4: "after:shadow-surface-rim-4",
34  5: "after:shadow-surface-rim-5",
35  6: "after:shadow-surface-rim-6",
36  7: "after:shadow-surface-rim-7",
37  8: "after:shadow-surface-rim-8",
38};
39
40/**
41 * Exposes the surface level to descendants as `--popup-surface` so children
42 * (arrow fills, sticky labels, fade gradients) can track the popup's level
43 * via `bg-(--popup-surface,var(--popover))`.
44 */
45export const SURFACE_VAR: Record<SurfaceLevel, string> = {
46  1: "[--popup-surface:var(--surface-1)]",
47  2: "[--popup-surface:var(--surface-2)]",
48  3: "[--popup-surface:var(--surface-3)]",
49  4: "[--popup-surface:var(--surface-4)]",
50  5: "[--popup-surface:var(--surface-5)]",
51  6: "[--popup-surface:var(--surface-6)]",
52  7: "[--popup-surface:var(--surface-7)]",
53  8: "[--popup-surface:var(--surface-8)]",
54};
55
56/**
57 * Drops + rim insets in a single `box-shadow` (no `::after`). Used by `solidSurface()`.
58 * Literal Tailwind classes so the scanner picks them up.
59 */
60export const SURFACE_SHADOW_COMBINED: Record<SurfaceLevel, string> = {
61  1: "shadow-[var(--surface-shadow-1),var(--surface-rim-1)]",
62  2: "shadow-[var(--surface-shadow-2),var(--surface-rim-2)]",
63  3: "shadow-[var(--surface-shadow-3),var(--surface-rim-3)]",
64  4: "shadow-[var(--surface-shadow-4),var(--surface-rim-4)]",
65  5: "shadow-[var(--surface-shadow-5),var(--surface-rim-5)]",
66  6: "shadow-[var(--surface-shadow-6),var(--surface-rim-6)]",
67  7: "shadow-[var(--surface-shadow-7),var(--surface-rim-7)]",
68  8: "shadow-[var(--surface-shadow-8),var(--surface-rim-8)]",
69};
70
71export function surfaceClasses(
72  level: SurfaceLevel,
73  shadowLevel: SurfaceLevel = level,
74): string {
75// … truncated