@adminiumjs/tokens 0.2.2-rc.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminiumjs/tokens",
-  "version": "0.2.2-rc.0",
+  "version": "0.2.3",
   "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",

package/src/accents.css

@@ -83,7 +83,9 @@
        --surface-3, both live in the axe sweep (active nav rows, sticky headers, chips).
      --accent-selection was 22% — an earlier note here claimed it "keeps --fg at >=9.9:1", which
        is true and beside the point: ::selection paints over WHATEVER text the user drags across,
-       including secondary and tertiary copy, which measured 4.36:1 and 3.33:1.
+       including secondary and tertiary copy, which measured 4.36:1 and 3.33:1. Lowering it to 12%
+       fixed that ON A PLAIN SURFACE and nowhere else — see THE SELECTION PAIR below, which is why
+       the token is no longer translucent at all.
      --accent-border was 25% — and the note here asserted it "has no consumer … so no WCAG
        obligation attaches". The first half is still literally true of the TOKEN (no `bg-`/
        `border-accent-border` utility and no var(--accent-border) read outside tailwind.css), but
@@ -100,8 +102,27 @@
 :root {
   --accent: var(--accent-light);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  /* The accent half of THE OPAQUE CHIP TINTS (tokens.css states the reasoning once, for all five
+     tones). Same 10% as the wash above, but mixed with --surface instead of `transparent`, so an
+     accent chip's contrast is a property of the token rather than of whatever it was re-parented
+     onto. --accent-soft itself is UNCHANGED and still translucent: active nav rows, selected table
+     rows and panel washes have to layer, and layering is exactly what a chip must not do. */
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 10%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* THE SELECTION PAIR — the same pre-composition as the chip tints, for the same reason, plus a
+     pinned foreground. tokens.css `::selection` sets BOTH halves; read the note there first.
+     A translucent selection tint is the worst case of "contrast depends on what it lands on",
+     because the user chooses the backdrop by dragging: 12% over --surface is the number this
+     comment used to quote, but the same wash over an ALREADY tinted row (a selected table row or
+     an active nav item, both --accent-soft) measured 3.474:1 for --fg-subtle and 3.892:1 for
+     --accent, and over a primary button's fill it put --fg at 1.080:1 (monochrome accent; 2.78:1 on
+     indigo). Freezing the backdrop into
+     the token, exactly as the chips do, makes the pair a property of the palette: --fg on it now
+     measures >=13.038:1 in every theme x accent x scope, on every surface AND on --accent itself.
+     The `selection` group in scripts/contrast-check.mjs measures all of it, including the
+     button-fill backdrop no other group covers. 12% is unchanged, and over a plain --surface the
+     colour is byte-identical to the translucent version — only the layered cases move. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --accent-glow: 0 2px 8px color-mix(in srgb, var(--accent) 36%, transparent);
 }
@@ -121,5 +142,7 @@
 [data-theme="dark"] {
   --accent: var(--accent-dark);
   --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* 12% here too, matching the dark wash — a chip on --surface is byte-identical to before. */
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
 }

package/src/exceptions.css

@@ -35,8 +35,12 @@
   --accent: var(--accent-dark);
   --accent-fg: #0f0f14;
   --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* Pre-composited against THIS scope's --surface, not the root's (accents.css, THE SELECTION
+     PAIR). A selection tint left to the root would arrive mixed with the page's surface and
+     paint a light pill inside a dark code block. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --pos: #3ecf8e;
   --pos-soft: rgba(62,207,142,.14);
@@ -46,6 +50,13 @@
   --danger-soft: rgba(255,107,107,.14);
   --info: #6ea8ff;
   --info-soft: rgba(110,168,255,.14);
+  /* The `-soft-solid` chip tints are PRE-COMPOSITED over --surface, so they must be re-declared
+     here for the same reason --accent-soft is: a value left to the root would arrive already
+     mixed with the ROOT's --surface — a near-white pill inside a #0f0f14 code block. */
+  --pos-soft-solid: color-mix(in srgb, var(--pos) 14%, var(--surface));
+  --warn-soft-solid: color-mix(in srgb, var(--warn) 14%, var(--surface));
+  --danger-soft-solid: color-mix(in srgb, var(--danger) 14%, var(--surface));
+  --info-soft-solid: color-mix(in srgb, var(--info) 14%, var(--surface));
   --shadow: 0 1px 2px rgba(0,0,0,.4);
   --shadow-md: 0 6px 20px rgba(0,0,0,.5);
   --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
@@ -79,8 +90,10 @@
   --accent: var(--accent-light);
   --accent-fg: #ffffff;
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 10%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* Pre-composited against THIS scope's --surface — see the .adm-always-dark note above. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --pos: #0b7d59;
   --pos-soft: #e6f5ee;
@@ -90,6 +103,13 @@
   --danger-soft: #fdecec;
   --info: #1c59e0;
   --info-soft: #e7edfd;
+  /* Opaque already (light's semantic softs are hexes), so these alias rather than re-derive —
+     but they still have to be DECLARED here, or the scope would inherit the root's, which under
+     a dark root are 14% mixes over #141419. */
+  --pos-soft-solid: var(--pos-soft);
+  --warn-soft-solid: var(--warn-soft);
+  --danger-soft-solid: var(--danger-soft);
+  --info-soft-solid: var(--info-soft);
   --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
   --shadow-md: 0 4px 14px rgba(20,20,35,.09);
   --shadow-lg: 0 12px 34px rgba(20,20,35,.13);

package/src/tailwind.css

@@ -22,12 +22,20 @@
   --color-accent: var(--accent);
   --color-accent-fg: var(--accent-fg);
   --color-accent-soft: var(--accent-soft);
+  --color-accent-soft-solid: var(--accent-soft-solid);
   --color-accent-hover: var(--accent-hover);
   --color-accent-border: var(--accent-border);
   --color-pos: var(--pos);         --color-pos-soft: var(--pos-soft);
   --color-warn: var(--warn);       --color-warn-soft: var(--warn-soft);
   --color-danger: var(--danger);   --color-danger-soft: var(--danger-soft);
   --color-info: var(--info);       --color-info-soft: var(--info-soft);
+  /* `bg-*-soft-solid` — the pre-composited chip tints (tokens.css, THE OPAQUE CHIP TINTS).
+     Mapped alongside the washes, not instead of them: `bg-*-soft` still paints the translucent
+     row/panel wash, and a chip that must clear 4.5:1 wherever it lands takes the solid one. */
+  --color-pos-soft-solid: var(--pos-soft-solid);
+  --color-warn-soft-solid: var(--warn-soft-solid);
+  --color-danger-soft-solid: var(--danger-soft-solid);
+  --color-info-soft-solid: var(--info-soft-solid);
   --color-viz-1: var(--viz-1); --color-viz-2: var(--viz-2); --color-viz-3: var(--viz-3);
   --color-viz-4: var(--viz-4); --color-viz-5: var(--viz-5); --color-viz-6: var(--viz-6);
   --color-viz-7: var(--viz-7); --color-viz-8: var(--viz-8);
@@ -65,10 +73,13 @@
   --spacing-sidebar: 256px;
   --container-form: 640px; --container-narrow: 720px; --container-page: 1080px;
   --container-marketing: 1160px; --container-wide: 1200px; --container-max: 1360px; --container-widest: 1800px;
-  /* The reading column for pages whose content is a short stack of controls
-     rather than a grid — import, settings, account. Wide enough for a two-up
-     field row, narrow enough that a lone label does not run the full monitor.
-     `--container-narrow` (720px) is a text measure and squeezes those rows. */
+  /* A reading column for a short stack of controls rather than a grid. Wide
+     enough for a two-up field row, narrow enough that a lone label does not run
+     the full monitor; `--container-narrow` (720px) is a text measure and
+     squeezes those rows. It used to be the default for import, settings and
+     account, which is what the comment here used to say — those are all on
+     `--container-page` now, so this is an option a page can choose rather than
+     any screen's default. */
   --container-content: 900px;
   /* Dashboard column. Deliberately NOT --container-page (1080px), which form and
      settings pages depend on staying narrow. */

package/src/tokens.css

@@ -60,6 +60,27 @@
   --danger-soft: #fdecec;
   --info: #1c59e0;
   --info-soft: #e7edfd;
+  /* THE OPAQUE CHIP TINTS. `-soft` is a WASH — row highlights, panel fills, callout backgrounds —
+     and stays translucent so it can layer. `-soft-solid` is that same tint PRE-COMPOSITED over
+     --surface, for the small tinted CHIPS whose own label has to clear 4.5:1 no matter where the
+     chip lands.
+     A translucent chip has no contrast of its own: it inherits whatever it was re-parented onto.
+     The same "Canceled" tag therefore measured one number on a plain table row and another on a
+     selected (already-tinted) one, and a nav count badge fell to 4.36:1 at the exact moment its
+     row went active — a tint over a tint. The pair matrix in scripts/contrast-check.mjs cannot
+     enumerate that case: it knows the four surfaces a tint can composite over, but not that a
+     component will be nested inside ANOTHER component's tint. Freezing the backdrop into the
+     token moves the chip's contrast out of the DOM and into a value, where the gate can prove it.
+     THE COST, accepted deliberately: a chip on a --surface-2 or --surface-3 card now paints a
+     --surface-based pill, so it reads a shade lighter than the card under it. That is the trade
+     for a number that cannot vary with nesting.
+     Light's semantic softs are ALREADY opaque hexes, so these alias them rather than deriving the
+     same colour a second way — two spellings of one colour is a drift bug waiting to happen. Only
+     dark has to composite; see the dark block. */
+  --pos-soft-solid: var(--pos-soft);
+  --warn-soft-solid: var(--warn-soft);
+  --danger-soft-solid: var(--danger-soft);
+  --info-soft-solid: var(--info-soft);
   --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
   --shadow-md: 0 4px 14px rgba(20,20,35,.09);
   --shadow-lg: 0 12px 34px rgba(20,20,35,.13);
@@ -101,11 +122,34 @@
   --danger-soft: rgba(255,107,107,.14);
   --info: #6ea8ff;
   --info-soft: rgba(110,168,255,.14);
+  /* The opaque chip tints (see the light block for why they exist). Dark's semantic softs are
+     translucent, so these composite the SAME 14% over --surface that the wash reaches there —
+     a chip already sitting on --surface is byte-identical before and after; only chips on the
+     deeper greys change, which is the appearance cost named above. */
+  --pos-soft-solid: color-mix(in srgb, var(--pos) 14%, var(--surface));
+  --warn-soft-solid: color-mix(in srgb, var(--warn) 14%, var(--surface));
+  --danger-soft-solid: color-mix(in srgb, var(--danger) 14%, var(--surface));
+  --info-soft-solid: color-mix(in srgb, var(--info) 14%, var(--surface));
   --shadow: 0 1px 2px rgba(0,0,0,.4);
   --shadow-md: 0 6px 20px rgba(0,0,0,.5);
   --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
 }
 
+/* ::selection SETS BOTH HALVES OF THE PAIR, and that is the whole point.
+   Left to the browser, only the background was ours and the foreground was "whatever text the
+   user happened to drag across" — so the selection pair was undefined by construction and no gate
+   could state it. Measured on the palette before this: --fg-subtle on the selection wash over a
+   selected table row 3.474:1, --accent on it over an active sidebar row 3.892:1, and --fg over a
+   primary button's accent fill 1.080:1 (monochrome accent; 2.78:1 on indigo — near-invisible either way). axe never sees any of that: it does not
+   evaluate ::selection, so none of it appeared in the sweep — a real low-vision failure with no
+   automated witness, which is exactly the kind this palette keeps having to find by measuring.
+   With --accent-selection pre-composited (accents.css, THE SELECTION PAIR) and the colour pinned
+   to the theme's own --fg, the pair is fixed at >=13.038:1 everywhere, including inside the
+   .adm-always-dark / .adm-always-light scopes, which re-declare both tokens together.
+   THE COST, accepted: selected text loses its own colour for as long as it is selected — an
+   accent link or a --pos status reads as body text under the highlight. That is what every
+   browser's default selection does, and it is the price of a pair that cannot be composed away. */
 ::selection {
   background: var(--accent-selection);
+  color: var(--fg);
 }