@danxbot/ui 7.0.2 → 7.1.0

package/dist/confidence.css

@@ -0,0 +1,202 @@
+/* ============================================================================
+   THE COLOUR RAMPS — TIER 1 primitives, and nothing else.
+
+   Split out of tokens.css (SG-901) so a surface that is NOT a consumer of this
+   design system can still read the ONE confidence scale: `dist/confidence.css`
+   ships these ramps plus the confidence tokens as a self-contained file, and a
+   separate Vue package (the demand letter's verification overlay) imports it
+   rather than keeping its own copy of five colours. tokens.css imports this file
+   first, so nothing about how the library itself resolves a colour changes.
+
+   Never referenced by a component — see tokens.css for the tier rules.
+   ========================================================================= */
+
+:root {
+  /* --- Neutral: SLATE ----------------------------------------------------
+     Cool, faintly violet-tinted (hue 267). The tint is small but load-bearing:
+     it makes large dark fills read as deep atmosphere rather than flat grey,
+     and it harmonises with the aqua/iris accents instead of fighting them.
+
+     The dark end deliberately STOPS at L 0.17 rather than approaching black.
+     Near-black surfaces make every accent scream and leave nowhere to go for
+     a recessed state; a lifted floor is what makes the dark theme read as
+     soft rather than severe.                                                */
+  --slate-25:  oklch(0.986 0.003 267);
+  --slate-50:  oklch(0.970 0.005 267);
+  --slate-100: oklch(0.938 0.009 267);
+  --slate-200: oklch(0.882 0.013 267);
+  --slate-300: oklch(0.802 0.017 267);
+  --slate-400: oklch(0.694 0.020 267);
+  /* Two half-steps, added because the ramp's 500 lands almost exactly ON the
+     AA boundary (3.80:1 on the light canvas, 4.49:1 on the dark one) — which
+     is not a step you can build de-emphasised TEXT from in either theme. Both
+     were measured, not guessed: `node scripts/contrast.mjs`. */
+  --slate-450: oklch(0.620 0.022 267);
+  --slate-500: oklch(0.588 0.022 267);
+  --slate-550: oklch(0.545 0.022 267);
+  --slate-600: oklch(0.492 0.023 267);
+  --slate-700: oklch(0.402 0.023 268);
+  --slate-750: oklch(0.348 0.023 268);
+  --slate-800: oklch(0.302 0.022 268);
+  --slate-850: oklch(0.264 0.021 268);
+  --slate-900: oklch(0.242 0.020 269);
+  --slate-950: oklch(0.212 0.019 269);
+  --slate-975: oklch(0.186 0.018 269);
+
+  /* --- Primary: AQUA -----------------------------------------------------
+     Electric cyan-teal. Luminous and unmistakably technical, but off the
+     default blue (250-260) that every framework ships, so it reads as chosen
+     rather than inherited.                                                  */
+  --aqua-50:  oklch(0.974 0.022 196);
+  --aqua-100: oklch(0.944 0.046 196);
+  --aqua-200: oklch(0.896 0.078 196);
+  --aqua-300: oklch(0.846 0.100 197);
+  --aqua-400: oklch(0.802 0.116 198);
+  --aqua-500: oklch(0.748 0.126 199);
+  --aqua-600: oklch(0.664 0.118 201);
+  --aqua-700: oklch(0.554 0.098 203);
+  --aqua-800: oklch(0.448 0.078 205);
+  --aqua-900: oklch(0.352 0.058 207);
+  --aqua-950: oklch(0.262 0.042 209);
+
+  /* --- Signal: IRIS ------------------------------------------------------
+     The high-energy counterpart, rationed hard — hero moments, live states,
+     the one thing on screen that should pull the eye. Sitting at hue 302 it
+     is deliberately off the 277/292 violet-indigo that reads as generic.    */
+  --iris-50:  oklch(0.970 0.024 302);
+  --iris-100: oklch(0.938 0.050 302);
+  --iris-200: oklch(0.888 0.086 302);
+  --iris-300: oklch(0.824 0.120 302);
+  --iris-400: oklch(0.760 0.148 303);
+  --iris-500: oklch(0.700 0.166 303);
+  --iris-600: oklch(0.620 0.174 304);
+  /* A half-step, because iris-600 under WHITE text measures 3.91:1 — the
+     brand button's exact case, and a fail. This is the lightest, most
+     saturated violet that still clears AA with white on it (4.71:1), so the
+     brand keeps its punch instead of retreating to the much duller 700. */
+  --iris-650: oklch(0.575 0.165 304);
+  --iris-700: oklch(0.518 0.148 305);
+  --iris-800: oklch(0.422 0.118 306);
+  --iris-900: oklch(0.336 0.090 307);
+  --iris-950: oklch(0.250 0.066 308);
+
+  /* --- Status ramps ------------------------------------------------------
+     Hues spread widely (18 / 88 / 158 / 252) so status survives colour-vision
+     deficiency: lightness and hue-distance carry the signal, never red-vs-
+     green alone. Success sits at 158 — far enough from the 199 primary that
+     "succeeded" never reads as "selected".                                  */
+  --rose-50:  oklch(0.968 0.020 18);
+  --rose-100: oklch(0.932 0.042 18);
+  --rose-200: oklch(0.876 0.080 18);
+  --rose-300: oklch(0.794 0.130 20);
+  --rose-400: oklch(0.714 0.170 22);
+  --rose-500: oklch(0.646 0.200 24);
+  --rose-600: oklch(0.574 0.200 25);
+  --rose-700: oklch(0.480 0.170 26);
+  --rose-800: oklch(0.390 0.134 26);
+  --rose-900: oklch(0.310 0.100 26);
+  --rose-950: oklch(0.230 0.072 26);
+
+  --amber-50:  oklch(0.980 0.024 92);
+  --amber-100: oklch(0.954 0.054 92);
+  --amber-200: oklch(0.910 0.100 90);
+  --amber-300: oklch(0.862 0.134 88);
+  --amber-400: oklch(0.814 0.150 86);
+  --amber-500: oklch(0.762 0.146 84);
+  --amber-600: oklch(0.670 0.130 80);
+  /* A half-step, for the light-theme confidence scale (SG-896): the lightest amber that still
+     clears WCAG 1.4.11 3:1 on BOTH light grounds (3.07 on slate-50, 3.35 on white) — 600 is
+     2.79 on the canvas. Measured with scripts/contrast.mjs, pinned by confidence-contrast.test. */
+  --amber-650: oklch(0.645 0.124 78);
+  --amber-700: oklch(0.554 0.108 76);
+  --amber-800: oklch(0.450 0.086 74);
+  --amber-900: oklch(0.358 0.066 72);
+  --amber-950: oklch(0.264 0.050 70);
+
+  --mint-50:  oklch(0.972 0.026 158);
+  --mint-100: oklch(0.942 0.052 158);
+  --mint-200: oklch(0.892 0.084 158);
+  --mint-300: oklch(0.836 0.108 158);
+  --mint-400: oklch(0.780 0.122 159);
+  --mint-500: oklch(0.722 0.126 160);
+  --mint-600: oklch(0.636 0.114 161);
+  /* A half-step, for the same reason as amber-650: the lightest mint clearing 3:1 on both
+     light grounds (3.10 on slate-50, 3.39 on white) — 600 is 2.97 on the canvas. */
+  --mint-650: oklch(0.625 0.110 161);
+  --mint-700: oklch(0.528 0.094 162);
+  --mint-800: oklch(0.428 0.074 163);
+  --mint-900: oklch(0.338 0.056 164);
+  --mint-950: oklch(0.250 0.040 165);
+
+  --azure-50:  oklch(0.970 0.020 252);
+  --azure-100: oklch(0.938 0.040 252);
+  --azure-200: oklch(0.884 0.072 252);
+  --azure-300: oklch(0.810 0.104 252);
+  --azure-400: oklch(0.730 0.130 253);
+  --azure-500: oklch(0.656 0.146 254);
+  --azure-600: oklch(0.576 0.154 255);
+  --azure-700: oklch(0.482 0.130 256);
+  --azure-800: oklch(0.394 0.102 257);
+  --azure-900: oklch(0.314 0.076 258);
+  --azure-950: oklch(0.234 0.054 259);
+}
+
+/* ============================================================================
+   THE FIVE-STEP CONFIDENCE SCALE (SG-843 / SG-896 / SG-901).
+
+   One colour per level of a 1-5 self-rating, named by the operator: dark red,
+   light red, yellow, light green, dark green, plus a visible colour for "not
+   rated". Deliberately NOT the three status bands in tokens.css — a 4 and a 5
+   are both fine but must read as different, and three bands cannot say that.
+
+   ITS OWN FILE, SO IT CAN BE THE ONLY COPY. Every surface that draws a rating
+   reads these tokens: this library's `ConfidenceBar` (through tokens.css's
+   theme, via authored.css), and the demand letter's verification overlay — a
+   separate Vue package that is not a consumer of this design system, which
+   imports `dist/confidence.css` (this file plus palette.css, self-contained)
+   instead of keeping its own five colours. A second copy of five colours is how
+   a letter and the screen beside it came to disagree about what a 4 looks like.
+
+   EVERY STATE CLEARS WCAG 1.4.11 3:1 against its theme's surface and canvas —
+   an invisible level is the hidden state the bar exists to rule out. Pinned by
+   `src/__tests__/confidence-contrast.test.ts`, which reads this file.
+
+   Selectors mirror tokens.css exactly: dark is the default, an explicit
+   `[data-theme]` wins, and the OS preference applies only when nothing is set.
+   ========================================================================= */
+
+/* DARK (the default). "Dark" and "light" are relative to each other within a
+   hue; on the dark canvas the darker step is still lifted enough to read. */
+:root,
+[data-theme="dark"] {
+  --confidence-1: var(--rose-600);
+  --confidence-2: var(--rose-300);
+  --confidence-3: var(--amber-400);
+  --confidence-4: var(--mint-300);
+  --confidence-5: var(--mint-600);
+  --confidence-none: var(--slate-500);
+}
+
+/* LIGHT. Every step clears 3:1 on white (10.3, 3.6, 3.4, 3.4, 7.9) and on the
+   slate-50 canvas, which is why these stops sit darker than the dark theme's:
+   rose-400, amber-400 and mint-400 measure 2.7, 1.8 and 1.9 on white. */
+[data-theme="light"],
+html:has(> body > script[src$="_ds_bundle.js"]) {
+  --confidence-1: var(--rose-800);
+  --confidence-2: var(--rose-500);
+  --confidence-3: var(--amber-650);
+  --confidence-4: var(--mint-650);
+  --confidence-5: var(--mint-800);
+  --confidence-none: var(--slate-500);
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]):not([data-theme="light"]) {
+    --confidence-1: var(--rose-800);
+    --confidence-2: var(--rose-500);
+    --confidence-3: var(--amber-650);
+    --confidence-4: var(--mint-650);
+    --confidence-5: var(--mint-800);
+    --confidence-none: var(--slate-500);
+  }
+}

package/dist/index.js

@@ -46542,25 +46542,31 @@ function Q4({
   ) });
 }
 const J4 = pt({
-  base: "block shrink-0 rounded-full",
+  slots: {
+    slot: "flex shrink-0 overflow-hidden rounded-full",
+    fill: "h-full rounded-full"
+  },
   variants: {
     size: {
       /* The dense form: under a glyph, in a strip of them. */
-      xs: "h-[3px] w-[19px]",
+      xs: { slot: "h-[3px] w-[19px]" },
       /* The stated form: on a surface someone opened to read one value. */
-      sm: "h-[5px] w-10"
+      sm: { slot: "h-[5px] w-10" }
     },
+    /* Each level's fill written out whole, never assembled from a template string —
+       Tailwind finds classes by scanning source text, and a class built at runtime is
+       simply absent from the stylesheet. */
     level: {
-      1: "bg-confidence-1",
-      2: "bg-confidence-2",
-      3: "bg-confidence-3",
-      4: "bg-confidence-4",
-      5: "bg-confidence-5",
-      /* Not rated — hollow and dashed, so it cannot be mistaken for any earned level. Its
-         own token, not a general border one: every general border token measures under
-         WCAG 1.4.11's 3:1 on this library's surfaces, and an empty bar nobody can see is
-         the hidden state this component exists to rule out. */
-      none: "border border-dashed border-confidence-none bg-transparent"
+      1: { fill: "w-1/5 bg-confidence-1" },
+      2: { fill: "w-2/5 bg-confidence-2" },
+      3: { fill: "w-3/5 bg-confidence-3" },
+      4: { fill: "w-4/5 bg-confidence-4" },
+      5: { fill: "w-full bg-confidence-5" },
+      /* Not rated — a dotted outline of the whole slot, so it cannot be mistaken for any
+         earned level. Its own token, not a general border one: every general border token
+         measures under WCAG 1.4.11's 3:1 on this library's surfaces, and an empty bar
+         nobody can see is the hidden state this component exists to rule out. */
+      none: { slot: "border border-dotted border-confidence-none" }
     }
   },
   defaultVariants: { size: "sm", level: "none" }
@@ -46572,14 +46578,15 @@ function eH({
   size: r,
   className: o
 }) {
-  const s = e === null ? null : Y4(e, t), i = s === null || e === null ? `${n} — not rated` : `${n} ${String(Math.round(e))} of ${String(Math.round(t))}`;
+  const s = e === null ? null : Y4(e, t), i = s === null || e === null ? `${n} — not rated` : `${n} ${String(Math.round(e))} of ${String(Math.round(t))}`, a = J4({ size: r, level: s ?? "none" });
   return /* @__PURE__ */ f(ln, { content: i, children: /* @__PURE__ */ f(
     "span",
     {
       role: "img",
       "aria-label": i,
       "data-level": s ?? "none",
-      className: W(J4({ size: r, level: s ?? "none" }), o)
+      className: W(a.slot(), o),
+      children: s === null ? null : /* @__PURE__ */ f("span", { "aria-hidden": "true", className: a.fill() })
     }
   ) });
 }