@leta-io/design-tokens 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# @leta-io/design-tokens
+
+Generated design tokens for the LETA design system.
+
+## ⚠️ Do not hand-edit `dist/`
+
+Files in `dist/` are generated by `@leta/cli` from the LETA Figma Library. To change a token, update it in Figma and run:
+
+```bash
+pnpm tokens:sync
+```
+
+Hand-edits will be flagged by the token-drift CI check and overwritten on the next sync.
+
+## Source collections (Figma)
+
+- **Brand** → primitives (raw colors, fonts, sizes)
+- **Alias** → semantic tokens (themed: Neutral / Caution / Warning × moded: Product / Marketing)
+- **Mapped Colors** → component-level color tokens
+- **Mapped Type** → text styles
+- **Mapped Sizes** → icon sizes
+
+## Outputs
+
+| File | Purpose |
+|---|---|
+| `dist/tokens.css` | CSS custom properties (with `[data-mode]` switching) |
+| `dist/tokens.ts` | TypeScript constants |
+| `dist/tailwind.preset.cjs` | Tailwind preset extending theme from CSS vars |
+| `dist/text-styles.css` | Text style utility classes |

package/dist/dark-elevation.css

@@ -0,0 +1,90 @@
+/**
+ * Dark Elevation — LETA Design System
+ * @leta-io/design-tokens/dark-elevation.css
+ *
+ * ─── Why this exists ───────────────────────────────────────────────────────
+ *
+ * A shadow communicates elevation by CONTRASTING with what sits behind it. Every
+ * Figma shadow — Neutral Drop Shadow 1/2/3 — is a soft, low-opacity BLACK tuned
+ * against the app's near-white light surfaces. On a dark surface a low-opacity
+ * black shadow is invisible, so in dark mode every overlay (dropdowns, toasts,
+ * tooltips, modals, cards, the zoom control) reads flat — pasted onto the page
+ * rather than floating above it.
+ *
+ * The generated `tokens.css` has no `--shadow-*` overrides in its
+ * `[data-theme="dark"]` block (its dark palette is colour only), so dark mode
+ * inherits the light shadows verbatim. This file supplies the missing dark
+ * elevation ramp. It overrides ONLY the shared `--shadow-neutral-*` (and the two
+ * colour glows) under `[data-theme="dark"]`, so **every** consumer of
+ * `box-shadow: var(--shadow-neutral-N)` gets correct depth with no component
+ * changes.
+ *
+ * ─── The model (chosen 2026-08-23): hairline + deeper shadow ────────────────
+ *
+ * The same recipe map overlays already use (`map-elevation.css`), because the
+ * problem is the same — a shadow alone can't promise contrast against the
+ * substrate:
+ *
+ *   1. a **light hairline ring** — `0 0 0 1px rgb(255 255 255 / …)` — a bright
+ *      edge that crisply lifts the surface off the dark background no matter how
+ *      dark the shadow reads; the primary depth cue in dark UIs (Linear/Vercel/
+ *      Figma). Scales with level (0.05 → 0.10).
+ *   2. a **deeper drop shadow** — pure black at much higher opacity than light
+ *      mode (0.40 → 0.70) with a tight contact layer + a wider ambient layer,
+ *      giving the actual sense of lift.
+ *
+ * The ring sits OUTSIDE the element's box, so it is never clipped by an overlay's
+ * own `overflow: hidden`, and it layers cleanly with a component's own
+ * (dark-token) border — a faint light halo just outside a dark edge.
+ *
+ * ─── Deliberately NOT overridden ───────────────────────────────────────────
+ *
+ * `--shadow-map-overlay` is unchanged: map tiles stay light in both themes, so an
+ * overlay floating on the map still needs a shadow tuned for a LIGHT substrate.
+ *
+ * ─── This is an addition to the system ─────────────────────────────────────
+ *
+ * It should be added to the Figma library as dark-mode effect styles so design
+ * and code stay in sync. Until then, Figma dark frames will show overlays a step
+ * flatter than the build.
+ *
+ * ─── Usage ─────────────────────────────────────────────────────────────────
+ *
+ *   import '@leta-io/design-tokens/dark-elevation.css';   // AFTER '@leta-io/design-tokens/css'
+ *
+ * Load order matters: `[data-theme="dark"]` here and `:root` in tokens.css have
+ * equal specificity, so this file must come last for its dark shadows to win.
+ */
+
+/**
+ * Overlay backdrop scrim — the dim behind a modal/drawer that makes the page
+ * recede. In LIGHT mode a 40% black works. In DARK mode dimming an already-dark
+ * page by 40% barely changes it, so the page never recedes and the overlay reads
+ * unseparated (the reported bug). Dark uses a much heavier black so the page
+ * clearly drops behind the overlay. Consumers reference
+ * `var(--leta-overlay-scrim, rgb(16 16 16 / 0.40))` (the fallback keeps it working
+ * anywhere this file isn't loaded, e.g. Storybook).
+ */
+:root {
+  --leta-overlay-scrim: rgb(16 16 16 / 0.40);
+}
+
+[data-theme="dark"] {
+  --shadow-neutral-1:
+    0 0 0 1px rgb(255 255 255 / 0.05),
+    0 4px 12px -4px rgb(0 0 0 / 0.40),
+    0 1px 4px -2px rgb(0 0 0 / 0.30);
+  --shadow-neutral-2:
+    0 0 0 1px rgb(255 255 255 / 0.08),
+    0 8px 20px -6px rgb(0 0 0 / 0.55),
+    0 2px 8px -4px rgb(0 0 0 / 0.40);
+  --shadow-neutral-3:
+    0 0 0 1px rgb(255 255 255 / 0.10),
+    0 14px 32px -8px rgb(0 0 0 / 0.70),
+    0 4px 12px -6px rgb(0 0 0 / 0.50);
+  /* Colour glows (focus rings / FAB accents) — bumped so they still read on dark. */
+  --shadow-red: 0 4px 16px 0 rgb(255 57 65 / 0.35);
+  --shadow-blue: 0 4px 16px 0 rgb(72 160 255 / 0.35);
+  /* Heavier so the page recedes behind modals/drawers (see note above). */
+  --leta-overlay-scrim: rgb(0 0 0 / 0.65);
+}

package/dist/fonts.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/fonts.js

@@ -0,0 +1,2 @@
+// src/fonts.ts
+import "@fontsource-variable/inter";