@orianatech/pire 0.11.0 → 0.13.0

package/dist/tokens/base.css

@@ -11,11 +11,13 @@ a:hover{color:var(--text-link-hover)}
 a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
 code,kbd,samp{font:var(--type-code)}
 table{border-collapse:collapse}
-@keyframes pire-toast-in{from{opacity:0;transform:translate(var(--pire-toast-tx,-50%),8px)}to{opacity:1}}
-@keyframes pire-dialog-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
-@keyframes pire-fade-in{from{opacity:0}to{opacity:1}}
-.pire-numeric{font:var(--type-numeric);letter-spacing:var(--ls-numeric);font-variant-numeric:tabular-nums}
-.pire-eyebrow{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
-/* Announced but not drawn. Clip rather than display:none or visibility:hidden, both of which
-   remove the node from the accessibility tree along with the pixels. */
-.pire-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
+/* Element resets only — no classes, no keyframes.
+
+   This is the one part of the stylesheet a consumer can legitimately skip: the element-level
+   rules above collide with Tailwind Preflight, so a product migrating gradually has to leave it
+   out while the two coexist. Anything the component code or components.css references must
+   therefore live in components.css, or skipping the resets silently breaks a component.
+
+   That is not hypothetical. Through 0.11.0 this file also held `.pire-sr-only`, `.pire-numeric`,
+   `.pire-eyebrow` and the toast/dialog/fade keyframes, so skipping it dropped a class ChartFrame
+   needs — and every chart rendered its screen-reader data table in full view. */

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);
 

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,7 +17,11 @@
 --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);
@@ -25,5 +35,14 @@
 --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.11.0",
+  "version": "0.13.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"