@nim.zone/ui 0.6.0

package/src/theme/contract.css

@@ -0,0 +1,204 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nim — TOKEN CONTRACT
+
+   This file declares the vocabulary every nim component is allowed to speak.
+   Components reference these names and nothing else; a theme file is the only
+   place a literal colour, radius, shadow, or type value may appear.
+
+   The contract is split in two:
+
+     · Invariants (below) — scale, rhythm, motion, geometry of touch. These are
+       ergonomic facts rather than brand decisions, so they are identical in
+       every theme and are set here once.
+     · Personality (themes/*.css) — colour, shape, elevation, and type voice.
+       A theme MUST define every `--nim-*` name listed in the "required of a
+       theme" block at the bottom of this file, or components will fall back to
+       an unstyled value.
+
+   Naming: `--nim-<role>-<modifier>`. Roles are semantic (canvas, surface, ink,
+   line, accent), never literal (never `--nim-orange`, never `--nim-gray-300`).
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SCHEME
+
+   Every colour in a colourway is a `light-dark()` pair, and `color-scheme` is
+   what picks a side. Setting it here means a colourway is ONE block: no
+   duplicated dark rule, no `prefers-color-scheme` query per palette, and no
+   hand-maintained exclusion list to fall behind — which is exactly how a theme
+   ended up inheriting another one's dark palette before 0.2.
+
+   Unset follows the OS. `data-nim-scheme` pins it.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:where(:root),
+:where(.nim-root) {
+  color-scheme: light dark;
+}
+
+[data-nim-scheme='light'] {
+  color-scheme: light;
+}
+
+[data-nim-scheme='dark'] {
+  color-scheme: dark;
+}
+
+:root {
+  /* ─── Space ────────────────────────────────────────────────────────────
+     A 4px base. Components use steps, never raw pixels, so density can be
+     retuned globally by overriding this scale alone. */
+  --nim-space-0: 0px;
+  --nim-space-1: 4px;
+  --nim-space-2: 8px;
+  --nim-space-3: 12px;
+  --nim-space-4: 16px;
+  --nim-space-5: 20px;
+  --nim-space-6: 24px;
+  --nim-space-7: 32px;
+  --nim-space-8: 40px;
+  --nim-space-9: 48px;
+  --nim-space-10: 64px;
+  --nim-space-11: 80px;
+  --nim-space-12: 104px;
+
+  /* ─── Type scale ───────────────────────────────────────────────────────
+     Absolute sizes, named by their pixel value at the browser default. The
+     composite `--nim-type-*` roles in a theme are built from these. */
+  --nim-text-11: 0.6875rem;
+  --nim-text-12: 0.75rem;
+  --nim-text-13: 0.8125rem;
+  --nim-text-14: 0.875rem;
+  --nim-text-15: 0.9375rem;
+  --nim-text-16: 1rem;
+  --nim-text-18: 1.125rem;
+  --nim-text-20: 1.25rem;
+  --nim-text-24: 1.5rem;
+  --nim-text-28: 1.75rem;
+  --nim-text-32: 2rem;
+  --nim-text-40: 2.5rem;
+
+  --nim-weight-regular: 400;
+  --nim-weight-medium: 500;
+  --nim-weight-semibold: 600;
+  --nim-weight-bold: 700;
+
+  /* ─── Motion ───────────────────────────────────────────────────────────
+     Three durations and three curves is the whole budget. `spring` overshoots
+     and is reserved for elements that enter; `standard` is everything else. */
+  --nim-dur-fast: 140ms;
+  --nim-dur-base: 240ms;
+  --nim-dur-slow: 400ms;
+  --nim-ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --nim-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --nim-ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
+
+  /* ─── Density ──────────────────────────────────────────────────────────
+     One multiplier retunes the whole interface at once. It scales the control
+     heights below and the block padding of anything row-shaped (list rows,
+     table cells), so a data-dense screen and a mobile flow stay the same
+     system rather than the same components at hand-tuned sizes.
+
+     Set it on any subtree: `style="--nim-density: 0.82"`. It never scales
+     type, and it never scales `--nim-touch-min`, which is a floor.
+
+     The multiplication lives in `components.css`, at each place a height is
+     used — `calc(var(--nim-control-md) * var(--nim-density))` — and not in the
+     control tokens below. A custom property that references another custom
+     property is substituted where it is DECLARED, so folding density into
+     `--nim-control-md` here would freeze it at the root's value and a subtree
+     override would silently do nothing. */
+  --nim-density: 1;
+
+  /* ─── Control geometry ─────────────────────────────────────────────────
+     Heights are shared across every control so a button, an input, and a
+     select line up on the same row without per-component nudging. 44px is the
+     minimum touch target and is never reduced, only visually inset. */
+  --nim-control-sm: 36px;
+  --nim-control-md: 44px;
+  --nim-control-lg: 52px;
+  --nim-touch-min: 44px;
+  --nim-border-width: 1px;
+
+  /* ─── Fixed sizes ──────────────────────────────────────────────────────
+     Geometry that is neither a space step nor a control height: the diameter
+     of a dot, the side of an avatar, the thickness of a track. These lived as
+     literals inside `components.css` until 0.2, which put them outside the
+     contract — a theme could not answer them, so an icon set drawn at a
+     different optical weight had no way in. */
+  --nim-size-dot: 6px;
+  --nim-size-icon-xs: 14px;
+  --nim-size-icon-sm: 16px;
+  --nim-size-icon-md: 20px;
+  --nim-size-icon-lg: 24px;
+  --nim-size-icon-xl: 32px;
+  --nim-size-avatar-sm: 28px;
+  --nim-size-avatar-md: 40px;
+  --nim-size-avatar-lg: 56px;
+  --nim-size-track: 6px;
+  --nim-size-handle: 36px;
+  --nim-size-handle-thickness: 4px;
+  --nim-size-focus-ring: 2px;
+  --nim-size-focus-offset: 2px;
+
+  /* ─── Layout ───────────────────────────────────────────────────────────
+     `frame` is the mobile app frame on a desktop viewport; `content` is a
+     comfortable column; `measure` is the reading measure for prose. */
+  --nim-frame-max: 768px;
+  --nim-content-max: 680px;
+  --nim-measure: 34rem;
+  --nim-safe-top: env(safe-area-inset-top, 0px);
+  --nim-safe-bottom: env(safe-area-inset-bottom, 0px);
+
+  /* ─── Z layers ─────────────────────────────────────────────────────────
+     Named so no component invents its own number. */
+  --nim-z-sticky: 20;
+  --nim-z-nav: 40;
+  --nim-z-scrim: 60;
+  --nim-z-sheet: 70;
+  --nim-z-toast: 90;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   REQUIRED OF A STYLE · REQUIRED OF A COLOURWAY
+
+   nim has two independent axes, and each answers half of this list. A style
+   owns how the interface is SHAPED; a colourway owns how it is COLOURED. That
+   split is why `oxblood` is six declarations rather than a 220-line theme, and
+   why a new palette cannot accidentally change a radius.
+
+   Both are listed here as documentation — deliberately without values, so a
+   missing token fails loudly in review rather than silently inheriting a
+   neutral grey.
+
+   ── A STYLE must define (`styles/*.css`) ───────────────────────────────
+   Shape      --nim-radius-xs · -sm · -md · -lg · -xl · -pill
+   Elevation  --nim-shadow-sm · -md · -lg   (geometry; drawn in the
+              colourway's --nim-shadow-tint-*)
+              --nim-shadow-focus · --nim-shadow-focus-danger
+   Type       --nim-font-sans · --nim-font-mono · --nim-font-numeric
+              --nim-type-display-* · --nim-type-title-* · --nim-type-body-*
+              --nim-type-control-* · --nim-type-label-* · --nim-type-caption-*
+              --nim-tracking-tight · -normal · -wide
+              --nim-leading-base · -tight · -normal · -relaxed
+   Voice      --nim-label-transform · --nim-label-tracking
+              --nim-press-scale · --nim-press-translate
+
+   ── A COLOURWAY must define (`colorways/*.css`) ────────────────────────
+   Every value as a `light-dark()` pair.
+
+   Surfaces   --nim-canvas · --nim-canvas-sunken · --nim-surface
+              --nim-surface-raised · --nim-surface-muted · --nim-scrim
+   Ink        --nim-ink · --nim-ink-secondary · --nim-ink-tertiary
+              --nim-ink-inverse · --nim-on-accent
+   Lines      --nim-line · --nim-line-soft · --nim-line-strong
+   Accent     --nim-accent · --nim-accent-hover · --nim-accent-strong
+              --nim-accent-soft · --nim-accent-line
+   Status     --nim-success · --nim-success-soft · --nim-warning
+              --nim-warning-soft · --nim-danger · --nim-danger-hover
+              --nim-danger-soft · --nim-info · --nim-info-soft
+   Elevation  --nim-shadow-tint-sm · -md · -lg
+
+   Colourways that share a neutral half state it once under a grouped
+   selector — see `colorways/paper.css`.
+   ═══════════════════════════════════════════════════════════════════════════ */

package/src/theme/fonts.css

@@ -0,0 +1,67 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nim — VAZIRMATN (optional)
+
+   The Persian face used across this repo's Farsi products (vlora-app,
+   vlora-web, vlora-admin, iranianlawclub-web). It is NOT part of
+   `nim/styles.css`: a stylesheet that requests font files the host does not
+   serve produces four 404s and a flash of fallback, so loading the face is an
+   explicit decision.
+
+       import 'nim/fonts.css'
+
+   Then serve the three subsets at `/fonts/` — the convention every Farsi app
+   in this repo already follows:
+
+       public/fonts/vazirmatn-arabic.woff2
+       public/fonts/vazirmatn-latin-ext.woff2
+       public/fonts/vazirmatn-latin.woff2
+
+   An app that serves them elsewhere skips this file and declares its own
+   `@font-face`; nothing else in the kit depends on it. `--nim-font-sans` on
+   the `vlora` style already names 'Vazirmatn' first, so the face is picked up
+   as soon as it loads.
+
+   One variable file per subset, weight 100–900, so a single request covers
+   every weight the kit uses. Vazirmatn is licensed under the SIL Open Font
+   License 1.1.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Arabic subset — every Persian/Arabic character, all weights. */
+@font-face {
+  font-family: 'Vazirmatn';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
+    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC,
+    U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F,
+    U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42,
+    U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59,
+    U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72,
+    U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3,
+    U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+
+/* Latin-ext subset, all weights. */
+@font-face {
+  font-family: 'Vazirmatn';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/fonts/vazirmatn-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
+    U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Latin subset, all weights. */
+@font-face {
+  font-family: 'Vazirmatn';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/fonts/vazirmatn-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/theme/index.css

@@ -0,0 +1,33 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nim — stylesheet entry
+
+   Import order is load-bearing:
+     1. the contract   — invariants every component relies on, and the
+                         `color-scheme` switch that resolves `light-dark()`
+     2. styles         — shape, elevation geometry, type voice, press
+     3. colourways     — surfaces, ink, lines, accent, status, shadow tint
+     4. persian        — script corrections that must outrank a style
+     5. reset          — scoped to `.nim-root`, never global
+     6. components     — the only file that draws anything
+
+   Style and colourway are two independent axes. A product that wants one
+   pairing can import `contract.css`, its style, its colourway, `reset.css`
+   and `components.css` directly and skip the rest.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@import './contract.css';
+
+@import './styles/ledger.css';
+@import './styles/vlora.css';
+
+@import './colorways/paper.css';
+@import './colorways/vermilion.css';
+@import './colorways/oxblood.css';
+@import './colorways/coral.css';
+@import './colorways/teal.css';
+
+/* Script corrections come after the styles so they win on source order. */
+@import './persian.css';
+
+@import './reset.css';
+@import './components.css';

package/src/theme/persian.css

@@ -0,0 +1,47 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nim — PERSIAN / ARABIC SCRIPT CORRECTIONS
+
+   Two of nim's type tokens are actively harmful to Persian, and neither is a
+   style's fault — they are correct for Latin and wrong for a joined script:
+
+     · `--nim-label-tracking` (0.12em on the ledger style) pulls apart letters
+       that must stay connected. Tracking a Persian word does not space it out,
+       it breaks it.
+     · negative tracking on display and title sizes does the same thing more
+       subtly.
+
+   `text-transform: uppercase` is a no-op on Persian glyphs, but it still
+   shouts at any Latin mixed into the same label, so it goes too.
+
+   Scoped to the LANGUAGE, not the direction: `dir="rtl"` says which way the
+   line runs, `lang="fa"` says which script is being set, and only the second
+   one implies these corrections. An RTL page of Latin text wants none of them.
+
+   Unlayered and imported after the styles, so it wins on source order rather
+   than by inflating specificity — a style could otherwise re-break it.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:is(:lang(fa), :lang(ar), [lang='fa'], [lang='ar']) {
+  --nim-label-transform: none;
+  --nim-label-tracking: 0;
+  --nim-tracking-tight: 0;
+  --nim-tracking-normal: 0;
+  --nim-tracking-wide: 0;
+  --nim-type-display-tracking: 0;
+  --nim-type-control-tracking: 0;
+  --nim-type-control-transform: none;
+
+  /* `calt` and `kern` shape the joins; `ss01` is Vazirmatn's Persian-preferred
+     forms (the four-dot heh, the Persian kaf and yeh). */
+  font-feature-settings: 'calt' 1, 'kern' 1, 'ss01' 1;
+  word-spacing: normal;
+}
+
+/* Persian text is read at a looser rhythm than Latin at the same size. The
+   ledger style is set for Latin, so a Farsi page on it gets the room the
+   vlora style already builds in. */
+:is(:lang(fa), :lang(ar), [lang='fa'], [lang='ar']):is([data-nim-style='ledger'], :not([data-nim-style])) {
+  --nim-leading-base: 1.7;
+  --nim-leading-tight: 1.35;
+  --nim-leading-relaxed: 1.9;
+}

package/src/theme/reset.css

@@ -0,0 +1,118 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   nim — RESET
+   Only what the kit depends on. It is deliberately small: nim is meant to drop
+   into an existing app without repainting that app's own markup.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .nim-root,
+  .nim-root * {
+    margin: 0;
+  }
+
+  /* The scoped root. Applying it to <body> themes the whole app; applying it
+     to a subtree lets nim live beside another design system. */
+  .nim-root {
+    background: var(--nim-canvas);
+    color: var(--nim-ink);
+    font-family: var(--nim-font-sans);
+    font-size: var(--nim-type-body-size);
+    line-height: var(--nim-type-body-line);
+    letter-spacing: var(--nim-tracking-normal);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Portalled surfaces mount on <body>, outside `.nim-root` — so they inherit
+     the document's default serif rather than the kit's typography. Every
+     component that portals is listed here and given the same ground the root
+     establishes. Missing this is invisible in Latin at a glance and glaring in
+     Persian, where the fallback has no matching face at all. */
+  .nim-sheet__panel,
+  .nim-menu,
+  .nim-popover,
+  .nim-toast-stack {
+    color: var(--nim-ink);
+    font-family: var(--nim-font-sans);
+    font-size: var(--nim-type-body-size);
+    line-height: var(--nim-type-body-line);
+    letter-spacing: var(--nim-tracking-normal);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .nim-sheet__panel :is(input, button, textarea, select),
+  .nim-menu :is(input, button, textarea, select),
+  .nim-popover :is(input, button, textarea, select) {
+    font: inherit;
+    color: inherit;
+  }
+
+  .nim-root img,
+  .nim-root svg,
+  .nim-root video,
+  .nim-root canvas {
+    display: block;
+    max-inline-size: 100%;
+  }
+
+  .nim-root :is(input, button, textarea, select) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+
+  .nim-root :is(ul, ol):where([class*='nim-']) {
+    list-style: none;
+    padding: 0;
+  }
+
+  /* One focus treatment for the entire kit, drawn outside the box so it never
+     shifts layout and never gets clipped by an overflow container. */
+  .nim-root :focus-visible {
+    outline: none;
+    box-shadow: var(--nim-shadow-focus);
+  }
+
+  .nim-root ::selection {
+    background: var(--nim-accent);
+    color: var(--nim-on-accent);
+  }
+
+  /* Numerals are tabular wherever nim prints a figure, so columns of values
+     line up and a counting number never reflows its neighbours. */
+  .nim-root :is(.nim-stat__value, .nim-badge, time, [data-nim-numeric]) {
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nim-root *,
+    .nim-root *::before,
+    .nim-root *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer utilities {
+  .nim-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/theme/styles/ledger.css

@@ -0,0 +1,106 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   STYLE · LEDGER  —  the nim house style
+
+   A style owns SHAPE, ELEVATION GEOMETRY, TYPE VOICE and PRESS. It owns no
+   colour at all: every value below that looks coloured is a reference to a
+   token the active colourway answers. Swapping the colourway under this style
+   changes the palette and nothing else; swapping the style changes the
+   physics.
+
+   Ledger: square corners, hairline rules, hard offset shadows like a print
+   register mark, mono type for anything machine-shaped, and a press that
+   shifts into the shadow — a key being struck, not a surface being squeezed.
+
+   Selected with `data-nim-style="ledger"`, and used when no style is set.
+   `:where(:root)` contributes no specificity, so the bare-root default never
+   outranks an explicit style set further down the tree.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:where(:root),
+[data-nim-style='ledger'] {
+  /* ─── Shape ──────────────────────────────────────────────────────────
+     Square. Nothing rounds "a little bit"; only genuinely pill-shaped
+     affordances (the status dot, the toggle track) use `pill`. */
+  --nim-radius-xs: 0px;
+  --nim-radius-sm: 0px;
+  --nim-radius-md: 0px;
+  --nim-radius-lg: 0px;
+  --nim-radius-xl: 0px;
+  --nim-radius-pill: 999px;
+
+  /* ─── Elevation ──────────────────────────────────────────────────────
+     Paper does not float. Depth is a hard offset and a control presses into
+     it rather than lifting off it. The offsets are the style's; the colour
+     they are drawn in is the colourway's. */
+  --nim-shadow-sm: 0 1px 0 var(--nim-shadow-tint-sm);
+  --nim-shadow-md: 3px 3px 0 var(--nim-shadow-tint-md);
+  --nim-shadow-lg: 6px 6px 0 var(--nim-shadow-tint-lg);
+
+  /* A ring drawn outside the box, on the canvas, so it reads on any surface.
+     An invalid field focuses in danger, so the ring never contradicts the
+     message printed under it. */
+  --nim-shadow-focus: 0 0 0 2px var(--nim-canvas), 0 0 0 4px var(--nim-accent);
+  --nim-shadow-focus-danger: 0 0 0 2px var(--nim-canvas), 0 0 0 4px var(--nim-danger);
+
+  /* ─── Type ───────────────────────────────────────────────────────────
+     One sans for substance, one mono for anything machine-shaped. An app
+     with its own brand face overrides these two on its provider; the rest of
+     the scale is stated in relative terms and follows. */
+  --nim-font-sans: 'Geist', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --nim-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --nim-font-numeric: var(--nim-font-mono);
+
+  --nim-tracking-tight: -0.026em;
+  --nim-tracking-normal: -0.008em;
+  --nim-tracking-wide: 0.12em;
+
+  /* `base` is this style's resting leading; tight and relaxed are stated
+     against it, which is what keeps the three names ordered in every style
+     rather than only in this one. */
+  --nim-leading-base: 1.45;
+  --nim-leading-tight: 1.12;
+  --nim-leading-normal: var(--nim-leading-base);
+  --nim-leading-relaxed: 1.66;
+
+  --nim-type-display-size: clamp(2.25rem, 6vw, 3.25rem);
+  --nim-type-display-line: 1;
+  --nim-type-display-weight: var(--nim-weight-medium);
+  --nim-type-display-tracking: -0.036em;
+  --nim-type-display-family: var(--nim-font-sans);
+
+  --nim-type-title-lg-size: var(--nim-text-24);
+  --nim-type-title-lg-line: var(--nim-leading-tight);
+  --nim-type-title-lg-weight: var(--nim-weight-medium);
+  --nim-type-title-md-size: var(--nim-text-18);
+  --nim-type-title-md-line: 1.25;
+  --nim-type-title-md-weight: var(--nim-weight-medium);
+
+  --nim-type-body-size: var(--nim-text-16);
+  --nim-type-body-line: var(--nim-leading-relaxed);
+  --nim-type-body-weight: var(--nim-weight-regular);
+  --nim-type-body-sm-size: var(--nim-text-14);
+
+  /* Labels are set as rules: mono, uppercase, wide-tracked. This pair of
+     tokens is most of what makes the style sound like a ledger. */
+  --nim-type-label-size: var(--nim-text-12);
+  --nim-type-label-weight: var(--nim-weight-medium);
+  --nim-type-label-family: var(--nim-font-mono);
+  --nim-label-transform: uppercase;
+  --nim-label-tracking: var(--nim-tracking-wide);
+
+  /* A label is a legend printed beside a thing; a control is a thing you
+     press. Controls do not borrow the label voice. */
+  --nim-type-control-size: var(--nim-text-14);
+  --nim-type-control-family: var(--nim-font-sans);
+  --nim-type-control-weight: var(--nim-weight-medium);
+  --nim-type-control-tracking: var(--nim-tracking-normal);
+  --nim-type-control-transform: none;
+
+  --nim-type-caption-size: var(--nim-text-12);
+  --nim-type-caption-line: 1.5;
+
+  /* ─── Voice ──────────────────────────────────────────────────────────
+     How a control answers a press. */
+  --nim-press-scale: 1;
+  --nim-press-translate: 2px;
+}

package/src/theme/styles/vlora.css

@@ -0,0 +1,91 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   STYLE · VLORA  —  soft, rounded, Persian-first
+
+   Ledger's opposite on every axis a style owns: generous radii, soft ambient
+   shadows, sentence-case labels, looser leading, and a press that compresses
+   rather than strikes. Carried over from `vlora-app` so an app on this style
+   keeps its exact feel while moving onto nim's contract.
+
+   Like every style it owns no colour. Pair it with the `coral` colourway for
+   Vlora's palette or `teal` for Fatemifar's.
+
+   Selected with `data-nim-style="vlora"`.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+[data-nim-style='vlora'] {
+  /* ─── Shape ──────────────────────────────────────────────────────────
+     Rounded and soft. This block is most of what separates the two styles. */
+  --nim-radius-xs: 6px;
+  --nim-radius-sm: 8px;
+  --nim-radius-md: 12px;
+  --nim-radius-lg: 20px;
+  --nim-radius-xl: 24px;
+  --nim-radius-pill: 999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────────── */
+  --nim-shadow-sm: 0 1px 4px var(--nim-shadow-tint-sm);
+  --nim-shadow-md: 0 4px 14px var(--nim-shadow-tint-md);
+  --nim-shadow-lg: 0 8px 28px var(--nim-shadow-tint-lg);
+
+  /* A soft halo rather than a drawn ring, mixed from whatever accent the
+     colourway supplies. */
+  --nim-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--nim-accent) 24%, transparent);
+  --nim-shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--nim-danger) 24%, transparent);
+
+  /* ─── Type ───────────────────────────────────────────────────────────
+     Persian-first: Vazirmatn leads. An app with its own face — Fatemifar's
+     YekanBakh, say — overrides these two names on its provider. */
+  --nim-font-sans: 'Vazirmatn', system-ui, -apple-system, sans-serif;
+  --nim-font-mono: 'Vazirmatn', ui-monospace, SFMono-Regular, monospace;
+  --nim-font-numeric: var(--nim-font-sans);
+
+  --nim-tracking-tight: -0.018em;
+  --nim-tracking-normal: -0.012em;
+  --nim-tracking-wide: -0.004em;
+
+  /* Persian needs the room, so every rung sits higher than Ledger's — but the
+     three stay ordered, which they were not before 0.2. */
+  --nim-leading-base: 1.84;
+  --nim-leading-tight: 1.48;
+  --nim-leading-normal: var(--nim-leading-base);
+  --nim-leading-relaxed: 1.96;
+
+  --nim-type-display-size: clamp(2.25rem, 6vw, 3.5rem);
+  --nim-type-display-line: 1.48;
+  --nim-type-display-weight: var(--nim-weight-semibold);
+  --nim-type-display-tracking: -0.03em;
+  --nim-type-display-family: var(--nim-font-sans);
+
+  --nim-type-title-lg-size: var(--nim-text-24);
+  --nim-type-title-lg-line: 1.76;
+  --nim-type-title-lg-weight: var(--nim-weight-semibold);
+  --nim-type-title-md-size: var(--nim-text-20);
+  --nim-type-title-md-line: 1.84;
+  --nim-type-title-md-weight: var(--nim-weight-semibold);
+
+  --nim-type-body-size: var(--nim-text-16);
+  --nim-type-body-line: var(--nim-leading-relaxed);
+  --nim-type-body-weight: var(--nim-weight-regular);
+  --nim-type-body-sm-size: var(--nim-text-14);
+
+  /* Persian has no case, and letterspacing damages its joined forms, so this
+     style neither uppercases nor tracks its labels. */
+  --nim-type-label-size: var(--nim-text-12);
+  --nim-type-label-weight: var(--nim-weight-medium);
+  --nim-type-label-family: var(--nim-font-sans);
+  --nim-label-transform: none;
+  --nim-label-tracking: var(--nim-tracking-wide);
+
+  --nim-type-control-size: var(--nim-text-15);
+  --nim-type-control-family: var(--nim-font-sans);
+  --nim-type-control-weight: var(--nim-weight-medium);
+  --nim-type-control-tracking: var(--nim-tracking-normal);
+  --nim-type-control-transform: none;
+
+  --nim-type-caption-size: var(--nim-text-13);
+  --nim-type-caption-line: 1.76;
+
+  /* ─── Voice ────────────────────────────────────────────────────────── */
+  --nim-press-scale: 0.97;
+  --nim-press-translate: 0px;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />