@50arms/ui 0.0.0-stage → 35.1.0

package/dist/confidence.css

@@ -0,0 +1,222 @@
+/* ============================================================================
+   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.
+     DX-3927: this is the DEFAULT light `--brand` (tokens.css), not an opt-in. */
+  --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);
+
+  /* --- Card-type ramp: ORCHID --------------------------------------------
+     A magenta at hue 336, the one gap on the wheel between rose (18-26) and
+     iris (302-308): 40 degrees from rose and 30 from iris, so a chip of each
+     still reads as three different colours side by side. Added for the
+     Design card type (DX-4677), which had no free hue of its own. Same
+     lightness spine as rose, chroma eased down at the pale end so the 50-200
+     tints stay pink-lilac instead of going salmon.                          */
+  --orchid-50:  oklch(0.970 0.022 336);
+  --orchid-100: oklch(0.938 0.046 336);
+  --orchid-200: oklch(0.884 0.084 336);
+  --orchid-300: oklch(0.806 0.136 337);
+  --orchid-400: oklch(0.726 0.178 338);
+  --orchid-500: oklch(0.650 0.202 339);
+  --orchid-600: oklch(0.572 0.200 340);
+  --orchid-700: oklch(0.480 0.170 341);
+  --orchid-800: oklch(0.390 0.134 341);
+  --orchid-900: oklch(0.310 0.100 341);
+  --orchid-950: oklch(0.230 0.072 341);
+}
+
+/* ============================================================================
+   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/fonts.css

@@ -0,0 +1,187 @@
+/* GENERATED by scripts/fetch-fonts.mjs — do not edit by hand.
+   Self-hosted so the compiled bundle is self-contained: no CDN dependency, no
+   third-party request, no silent fallback to system fonts. Re-run the script
+   to refresh.
+
+   font-display: swap is preserved from the source CSS — text paints
+   immediately in a fallback and swaps, rather than blocking on the font. */
+
+/* ---- Bricolage Grotesque ---- */
+/* vietnamese */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-0.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-1.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-2.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ---- Figtree ---- */
+/* latin-ext */
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-0.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-1.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-2.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-3.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ---- JetBrains Mono ---- */
+/* cyrillic-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-0.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-1.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-2.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-3.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-4.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-5.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-6.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-7.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-8.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-9.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-10.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-11.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}