From c89d3921473a344cd72b10a836aa374021d20b8e Mon Sep 17 00:00:00 2001 From: Wawa Date: Sun, 10 May 2026 00:21:02 +0000 Subject: [PATCH] Add shared styles/elevation.css used by apps/editor globals apps/editor/app/globals.css imports '../../../styles/elevation.css', a shared elevation/shadow utility set used across both private-editor's apps and the public editor-v2 apps/editor. Was missing from this repo because the swap covered packages/{core,viewer,editor,mcp} and apps/editor but not the top-level styles/ directory. Copied verbatim from private-editor. --- styles/elevation.css | 162 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 styles/elevation.css diff --git a/styles/elevation.css b/styles/elevation.css new file mode 100644 index 00000000..c8290914 --- /dev/null +++ b/styles/elevation.css @@ -0,0 +1,162 @@ +/* + * Shared Elevation System & Corner Smoothing + * + * Natural shadow stacking with light/dark mode adaptation. + * Import from any app: @import "../../../styles/elevation.css"; + * + * Shadows: + * shadow-elevation-0 Flat — ambient ring only + * shadow-elevation-1 Subtle lift — inner cards, inset panels + * shadow-elevation-2 Card / surface + * shadow-elevation-3 Popover / dropdown + * shadow-elevation-4 Sticky / floating bar + * shadow-elevation-5 Modal / dialog + * shadow-elevation-6 Full overlay — maximum depth + * + * Corner smoothing: + * corner-smooth Composable — pair with any rounded-* class + */ + +/* ── Register tokens so Tailwind generates shadow-elevation-* utilities ── */ +@theme inline { + --shadow-elevation-0: var(--shadow-elevation-0); + --shadow-elevation-1: var(--shadow-elevation-1); + --shadow-elevation-2: var(--shadow-elevation-2); + --shadow-elevation-3: var(--shadow-elevation-3); + --shadow-elevation-4: var(--shadow-elevation-4); + --shadow-elevation-5: var(--shadow-elevation-5); + --shadow-elevation-6: var(--shadow-elevation-6); +} + +/* ════════════════════════════════════════ + Light mode — Stacked Elevation + Base ambient ring + diffusion layers using the + 1 → 3 → 6 → 12 → 24 → 48 doubling sequence. + Spread = -(blur / 2) keeps each layer tight. + ════════════════════════════════════════ */ +:root { + --shadow-color: rgb(0 0 0 / 0.06); + + --shadow-elevation-0: 0 0 0 1px var(--shadow-color); + + --shadow-elevation-1: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color); + + --shadow-elevation-2: + 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color); + + --shadow-elevation-3: + 0 0 0 1px var(--shadow-color), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color); + + --shadow-elevation-4: + 0 0 0 1px var(--shadow-color), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color); + + --shadow-elevation-5: + 0 0 0 1px var(--shadow-color), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color); + + --shadow-elevation-6: + 0 0 0 1px var(--shadow-color), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color), + 0 48px 48px -24px var(--shadow-color); +} + +/* ════════════════════════════════════════ + Dark mode — Inset Light Illusion + Simulates elevation by painting light on raised surfaces. + Top-edge highlight + perimeter ring (both inset) increase + in intensity as the card "lifts" toward the light source. + Drop shadow stack grounds the elevation. + ════════════════════════════════════════ */ +.dark { + --shadow-color: rgba(0, 0, 0, 0.18); + + /* Highlight intensity (inset top edge) */ + --dm-hi-base: rgba(255, 255, 255, 0.02); + --dm-hi-mid: rgba(255, 255, 255, 0.05); + --dm-hi-high: rgba(255, 255, 255, 0.08); + --dm-hi-peak: rgba(255, 255, 255, 0.11); + + /* Ring intensity (inset perimeter) */ + --dm-ring-base: rgba(255, 255, 255, 0.02); + --dm-ring-mid: rgba(255, 255, 255, 0.04); + --dm-ring-high: rgba(255, 255, 255, 0.06); + + --shadow-elevation-0: inset 0 0 0 1px var(--dm-ring-base); + + --shadow-elevation-1: + inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), + 0 1px 1px -0.5px var(--shadow-color); + + --shadow-elevation-2: + inset 0 1px 0 0 var(--dm-hi-mid), + inset 0 0 0 1px var(--dm-ring-base), + 0 0 0 1px rgba(0, 0, 0, 0.12), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color); + + --shadow-elevation-3: + inset 0 1px 0 0 var(--dm-hi-mid), + inset 0 0 0 1px var(--dm-ring-mid), + 0 0 0 1px rgba(0, 0, 0, 0.14), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color); + + --shadow-elevation-4: + inset 0 1px 0 0 var(--dm-hi-high), + inset 0 0 0 1px var(--dm-ring-mid), + 0 0 0 1px rgba(0, 0, 0, 0.16), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color); + + --shadow-elevation-5: + inset 0 1px 0 0 var(--dm-hi-high), + inset 0 0 0 1px var(--dm-ring-high), + 0 0 0 1px rgba(0, 0, 0, 0.18), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color); + + --shadow-elevation-6: + inset 0 1px 0 0 var(--dm-hi-peak), + inset 0 0 0 1px var(--dm-ring-high), + 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 1px 1px -0.5px var(--shadow-color), + 0 3px 3px -1.5px var(--shadow-color), + 0 6px 6px -3px var(--shadow-color), + 0 12px 12px -6px var(--shadow-color), + 0 24px 24px -12px var(--shadow-color), + 0 48px 48px -24px var(--shadow-color); +} + +/* ════════════════════════════════════════ + Corner Smoothing — Progressive Enhancement + Composable: pair with any rounded-* class. + Usage: class="rounded-2xl corner-smooth" + ════════════════════════════════════════ */ +@layer utilities { + .corner-smooth { + corner-shape: squircle; + } +}