@orianatech/pire 0.10.0 → 0.12.0

package/dist/tokens/colors.css

@@ -17,9 +17,31 @@
 --red-10:#fdeaea;--red-30:#eda3a7;--red-50:#c0242e;--red-60:#991c25;
 --purple-10:#f0edfb;--purple-50:#5a3fc0;
 
-/* --- Text ------------------------------------------------------------- */
---text-primary:var(--gray-90);--text-secondary:var(--gray-60);--text-tertiary:var(--gray-50);
+/* --- Text ---------------------------------------------------------------
+   The scale sits one step darker than it used to. `--text-tertiary` was
+   gray-50, which held only 2.95:1 on the page surface and 3.22:1 on a card —
+   under the 4.5:1 that body text needs, in 21 rules of components.css.
+
+   Moving tertiary alone was not possible: the first value that clears 4.5:1 on
+   the page surface lands within 0.3 contrast points of secondary, so the two
+   would have read as one weight and the third level would have been decorative.
+   Both moved instead, which keeps three steps that are actually distinguishable.
+
+   `--text-secondary` and `--text-label` now resolve to the same gray-70. They
+   stay separate tokens because they mean different things — secondary is body
+   text, label names a field — and either may move again on its own. Do not
+   "simplify" one into the other.
+
+   `--text-disabled` deliberately stays at gray-40 and below 4.5:1: WCAG 1.4.3
+   exempts inactive components, and darkening it removes the signal that the
+   control is disabled. */
+--text-primary:var(--gray-90);--text-secondary:var(--gray-70);--text-tertiary:var(--gray-60);
 --text-disabled:var(--gray-40);--text-inverse:var(--gray-0);--text-on-accent:var(--gray-0);
+/* Text on a solid status fill — today only the IconButton count badge. Separate from
+   `--text-inverse` because the two flip in opposite directions: the shell and toasts are dark in
+   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);
 --text-link:var(--blue-60);--text-link-hover:var(--blue-70);--text-label:var(--gray-70);
 --text-numeric:var(--gray-90);
 
@@ -47,7 +69,40 @@
 --status-informative-fg:var(--blue-70);--status-informative-bg:var(--blue-10);--status-informative-border:var(--blue-30);
 --status-neutral-fg:var(--gray-70);--status-neutral-bg:var(--gray-10);--status-neutral-border:var(--gray-30);
 
-/* --- Data visualisation: ordered, colour-blind safe sequence ----------- */
---viz-1:var(--blue-60);--viz-2:var(--teal-50);--viz-3:var(--purple-50);--viz-4:var(--amber-50);
---viz-5:var(--blue-30);--viz-6:var(--gray-60);
+/* --- Data visualisation ------------------------------------------------
+   A ramp of its own, kept apart from the semantic ramps on purpose: a series
+   colour must never be mistakable for a status colour, and the status steps are
+   already spoken for by positive / critical / negative.
+
+   Two steps per hue. -50 is the light-surface step, -40 the lighter dark-surface
+   one, because the two surfaces do not accept the same lightness — light takes
+   L 0.43-0.77, dark takes L 0.48-0.67 — so no single value can serve both. That
+   is why --viz-1..6 are re-pointed per theme in themes.css rather than fixed
+   here, and it is the reason this ramp exists at all.
+
+   Every step is validated against the real surfaces (#ffffff and #19222b) on
+   lightness, chroma, colour-blind separation, normal-vision separation and
+   contrast. The previous sequence — blue-60, teal-50, purple-50, amber-50,
+   blue-30, gray-60 — failed both: teal-50, blue-30 and gray-60 sat below the
+   chroma floor and read as grey, blue-30 held only 1.99:1 against white, and
+   blue-60 and purple-50 dropped under 2.5:1 on the dark surface. */
+--viz-blue-50:#436cc8;--viz-blue-40:#5d83d4;
+--viz-rust-50:#b94739;--viz-rust-40:#c86556;
+--viz-cyan-50:#0083ad;--viz-cyan-40:#0097bc;
+--viz-gold-50:#936b00;--viz-gold-40:#a58100;
+--viz-violet-50:#9750a7;--viz-violet-40:#a86ab6;
+--viz-jade-50:#008c64;--viz-jade-40:#009f7a;
+
+/* Slot order is part of the result, not presentation: colour-blind separation is
+   measured between *adjacent* slots, and these six in a different order fall to
+   ΔE 1.6. Assign series in this order, and never cycle past --viz-6. */
+--viz-1:var(--viz-blue-50);--viz-2:var(--viz-rust-50);--viz-3:var(--viz-cyan-50);
+--viz-4:var(--viz-gold-50);--viz-5:var(--viz-violet-50);--viz-6:var(--viz-jade-50);
+
+/* Everything past the sixth series. Deliberately a neutral: a seventh hue would
+   imply an identity the eye cannot reliably recover, so the tail folds into one
+   "other" bucket instead. */
+--viz-other:var(--gray-40);
+/* Grid and axis rules — recessive by design, so the data sits in front of them. */
+--viz-grid:var(--gray-20);--viz-axis:var(--gray-30);
 }

package/dist/tokens/themes.css

@@ -1,8 +1,14 @@
 /* Theming contract: structure is hardcoded, colour is swappable.
    Consumers re-point the alias layer only — never the ramps, never geometry. */
 [data-theme="dark"]{
---text-primary:var(--gray-05);--text-secondary:var(--gray-40);--text-tertiary:var(--gray-50);
---text-disabled:var(--gray-60);--text-inverse:var(--gray-100);--text-label:var(--gray-30);
+/* Shifted one step lighter, mirroring the light scale's move a step darker and for the same
+   reason: tertiary at gray-50 held only 3.77:1 on `--surface-raised`, the darkest surface text
+   ever lands on. Menus and popovers use that surface, so it is not an edge case. */
+--text-primary:var(--gray-05);--text-secondary:var(--gray-30);--text-tertiary:var(--gray-40);
+/* --text-inverse stays light here. It names text on a permanently dark ground — the shell bar,
+   toasts, tooltips, avatars — not "the opposite of the current theme". Pointing it at gray-100
+   put near-black text on the near-black shell: 1.02:1, invisible, and shipped. */
+--text-disabled:var(--gray-60);--text-inverse:var(--gray-05);--text-on-status:var(--gray-100);--text-label:var(--gray-30);
 --text-link:var(--blue-30);--text-link-hover:var(--blue-20);--text-numeric:var(--gray-05);
 --surface-page:var(--gray-100);--surface-card:var(--gray-90);--surface-sunken:#111922;
 --surface-raised:var(--gray-80);--surface-hover:var(--gray-80);--surface-active:var(--gray-70);
@@ -11,13 +17,32 @@
 --surface-nav:var(--gray-90);--surface-toolbar:var(--gray-90);--surface-overlay:rgba(4,16,31,.66);
 --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);
---accent-bg:var(--blue-50);--accent-bg-hover:var(--blue-40);--accent-bg-active:var(--blue-30);
+/* Hover and press deepen here rather than lighten, the same direction as the light theme. Going
+   lighter is the usual dark-theme reflex and it broke the contrast: the fill lightened while
+   `--accent-fg` stayed white, so a hovered primary button was 3.19:1 and a pressed one 1.99:1.
+   Only CI caught it, because a local run leaves the pointer off the button. */
+--accent-bg:var(--blue-50);--accent-bg-hover:var(--blue-60);--accent-bg-active:var(--blue-70);
 --accent-subtle-bg:var(--blue-90);--accent-subtle-fg:var(--blue-20);
 --status-positive-fg:var(--green-30);--status-positive-bg:#0e2b1c;--status-positive-border:var(--green-50);
 --status-critical-fg:var(--amber-30);--status-critical-bg:#31210a;--status-critical-border:var(--amber-50);
 --status-negative-fg:var(--red-30);--status-negative-bg:#331416;--status-negative-border:var(--red-50);
 --status-informative-fg:var(--blue-30);--status-informative-bg:var(--blue-90);--status-informative-border:var(--blue-50);
 --status-neutral-fg:var(--gray-30);--status-neutral-bg:var(--gray-80);--status-neutral-border:var(--gray-70);
+/* Series colours are re-pointed, not inverted: the -40 steps are their own
+   validated values against #19222b. Keep the slots in the same hue order as
+   light, so a series that is rust in one theme is rust in the other. */
+--viz-1:var(--viz-blue-40);--viz-2:var(--viz-rust-40);--viz-3:var(--viz-cyan-40);
+--viz-4:var(--viz-gold-40);--viz-5:var(--viz-violet-40);--viz-6:var(--viz-jade-40);
+--viz-other:var(--gray-50);--viz-grid:#28333d;--viz-axis:var(--gray-70);
 }
-/* Accessibility scope: 3:1 non-text contrast on every control edge */
-[data-contrast="high"]{--border-subtle:var(--gray-50);--border-default:var(--gray-70);--border-field:var(--gray-80);--text-secondary:var(--gray-80)}
+/* 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)}
+
+/* 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
+   value as `--surface-raised`, giving 1.00:1 — text the exact colour of what it sits on. Neither
+   scope is gated alone, so nothing caught it; both are gated now.
+   Order matters — this must follow both blocks it corrects. */
+[data-theme="dark"][data-contrast="high"]{--text-secondary:var(--gray-05);--text-tertiary:var(--gray-20);--border-subtle:var(--gray-50);--border-default:var(--gray-40);--border-field:var(--gray-30)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orianatech/pire",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Oriana Pire Design System — React components for ERP interfaces, built on React Aria.",
   "license": "Apache-2.0",
   "repository": {
@@ -97,6 +97,9 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:storybook": "vitest run --project=storybook",
+    "test:a11y:dark": "STORYBOOK_THEME=dark vitest run --project=storybook",
+    "test:a11y:contrast": "STORYBOOK_CONTRAST=high vitest run --project=storybook",
+    "test:a11y:dark-contrast": "STORYBOOK_THEME=dark STORYBOOK_CONTRAST=high vitest run --project=storybook",
     "test:unit": "vitest run --project=unit",
     "pack:check": "publint --strict && attw --pack . --exclude-entrypoints ./styles.css ./tokens.css ./components.css",
     "fonts:vendor": "node scripts/vendor-fonts.mjs"