@orianatech/pire 1.1.0 → 1.3.0

package/dist/tokens/colors.css

@@ -42,6 +42,11 @@
    both themes and always want light text, while the status fills invert (red-60 in light,
    red-30 in dark) and so want the opposite. Sharing one token put white on light pink at 1.94:1. */
 --text-on-status:var(--gray-0);
+/* Muted text on the permanently dark ground — the shell bar's company name, the rail's resting
+   glyphs. Separate from `--text-inverse` for the reason `--text-on-status` is separate: a second
+   weight on the shell cannot be derived from `--text-secondary`, which is tuned for light surfaces
+   and resolved to gray-70 there. Reaching for it here is how the shell got near-black on near-black. */
+--text-inverse-secondary:var(--gray-30);
 --text-link:var(--blue-60);--text-link-hover:var(--blue-70);--text-label:var(--gray-70);
 --text-numeric:var(--gray-90);
 
@@ -51,11 +56,23 @@
 --surface-selected:var(--blue-10);--surface-disabled:var(--gray-10);
 --surface-shell:var(--blue-90);--surface-shell-hover:var(--blue-80);
 --surface-nav:var(--gray-0);--surface-toolbar:var(--gray-05);--surface-overlay:rgba(13,19,25,.5);
+/* The application rail: a second permanently dark band, below the shell bar and beside the nav.
+   Aliased off the shell rather than merged into it — the two are separate landmarks and a product
+   may want the rail a shade apart — but they start identical so a default shell reads as one piece. */
+--surface-rail:var(--surface-shell);--surface-rail-hover:var(--surface-shell-hover);
+/* A selected rail tile carries a fill *and* a ring. The fill alone is 1.64:1 against the rail, which
+   is nowhere near the 3:1 WCAG 1.4.11 asks of a state indicator; `--border-rail-selected` is the part
+   that actually clears it (4.89:1 light, 3.92:1 dark). Do not drop the ring to "simplify" the tile. */
+--surface-rail-selected:var(--blue-70);
 
 /* --- Borders ---------------------------------------------------------- */
 --border-subtle:var(--gray-20);--border-default:var(--gray-30);--border-strong:var(--gray-50);
 --border-field:var(--gray-50);--border-focus:var(--blue-60);--border-accent:var(--blue-60);
 --border-inverse:rgba(255,255,255,.24);
+/* Rail furniture. `--border-rail` separates the rail's zones and is decorative, like the SideNav's
+   own group rule; `--border-rail-selected` is the selected tile's inset ring and is a state
+   indicator, so it owes 3:1 against `--surface-rail` and is asserted in tokens.contrast.test.ts. */
+--border-rail:var(--blue-70);--border-rail-selected:var(--blue-40);
 
 /* --- Interactive (accent) --------------------------------------------- */
 --accent-bg:var(--blue-60);--accent-bg-hover:var(--blue-70);--accent-bg-active:var(--blue-80);

package/dist/tokens/spacing.css

@@ -10,6 +10,9 @@
 
 /* Shell geometry (fixed chrome) */
 --shell-header-h:48px;--shell-subheader-h:40px;--sidenav-w:256px;--sidenav-w-collapsed:48px;
+/* The application rail, and the shell bar's launcher button that sits directly above it. One
+   token for both: the launcher stops looking like the rail's cap the moment they disagree. */
+--rail-w:56px;
 --page-pad-x:24px;--page-pad-y:20px;--section-gap:24px;
 
 /* 16-column layout grid */

package/dist/tokens/themes.css

@@ -15,6 +15,11 @@
 --surface-selected:var(--blue-90);--surface-disabled:var(--gray-80);
 --surface-shell:#04101f;--surface-shell-hover:var(--blue-90);
 --surface-nav:var(--gray-90);--surface-toolbar:var(--gray-90);--surface-overlay:rgba(4,16,31,.66);
+/* The rail follows the shell down, but its selected fill does not: `--blue-70` on the near-black
+   dark shell reads as a lit panel rather than a selection, so the fill steps back one and the ring
+   steps forward one to keep the pair legible. */
+--surface-rail-selected:var(--blue-80);
+--border-rail:var(--blue-80);--border-rail-selected:var(--blue-50);
 --border-subtle:#28333d;--border-default:var(--gray-70);--border-strong:var(--gray-50);
 --border-field:var(--gray-50);--border-focus:var(--blue-30);--border-accent:var(--blue-30);
 /* Hover and press deepen here rather than lighten, the same direction as the light theme. Going
@@ -38,7 +43,11 @@
 /* Accessibility scope: 3:1 non-text contrast on every control edge.
    Tertiary darkens alongside secondary here — it did not before, which left the
    scope's lightest text at the same value as the default theme's. */
-[data-contrast="high"]{--border-subtle:var(--gray-50);--border-default:var(--gray-70);--border-field:var(--gray-80);--text-secondary:var(--gray-80);--text-tertiary:var(--gray-70)}
+/* `--text-inverse-secondary` and the rail furniture move the opposite way to everything else in
+   this block: they sit on a ground that is dark in both themes, so "more contrast" means
+   lighter. Setting them here rather than in the two theme blocks is deliberate — this
+   selector has the same specificity and comes later, so it wins in dark as well as light. */
+[data-contrast="high"]{--border-subtle:var(--gray-50);--border-default:var(--gray-70);--border-field:var(--gray-80);--text-secondary:var(--gray-80);--text-tertiary:var(--gray-70);--text-inverse-secondary:var(--gray-10);--border-rail:var(--gray-50);--border-rail-selected:var(--gray-30)}
 
 /* The high-contrast scope above darkens text, which is only correct on a light ground. Combined
    with the dark theme it inverted the intent: `--text-secondary` resolved to gray-80, the same

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orianatech/pire",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Oriana Pire Design System — React components for ERP interfaces, built on React Aria.",
   "license": "Apache-2.0",
   "repository": {