@fiestaboard/ui 5.3.0 → 5.4.0

package/dist/theme.css

@@ -361,6 +361,28 @@
   --border: color-mix(in oklch, var(--foreground) 11%, transparent);
   --input: color-mix(in oklch, var(--foreground) 50%, transparent);
   --ring: var(--primary); /* = --primary, see the invariant above */
+  /* ============================================================
+   * THE FOCUS RING, AS A VALUE (#228 item 5).
+   *
+   * The recipe itself is argued at `.focus-ring` near the bottom of this
+   * file; this is the same three stops written ONCE, so that the class and
+   * every other caller are the same value rather than two copies of it.
+   *
+   * `.focus-ring` is a class, and a class needs a call site. MDX prose
+   * anchors do not have one — a docs pipeline styles them from a stylesheet
+   * it owns — so the docs site hand-mirrored the three stops and the copy
+   * has already gone stale once. With the recipe published as a property, a
+   * CSS-only consumer writes
+   *
+   *   a:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; }
+   *
+   * and tracks a retune here by construction.
+   *
+   * Declared in :root only: both stops resolve through --ring and
+   * --ring-edge, which are already themed, so the value re-resolves per
+   * theme without a second declaration to keep in sync.
+   * ============================================================ */
+  --focus-ring-shadow: 0 0 0 1px var(--ring-edge), 0 0 0 3px var(--ring), 0 0 0 4px var(--ring-edge);
   /* ============================================================
    * THE RAIL FOLLOWS THE THEME (#231).
    *
@@ -406,6 +428,56 @@
      Alert enforces this — status color never touches a sentence. */
   --warning: oklch(0.62 0.131 104);
   --warning-foreground: oklch(0.205 0.008 73);
+  /* ============================================================
+   * TAG TINTS ARE A PAIR ACROSS AN UNKNOWN SURFACE (#231).
+   *
+   * badge.tsx paints the three tag variants as `bg-tag-x/15` with
+   * `text-tag-x-foreground` on top (and lifts the fill to 25% when the badge
+   * is an anchor being hovered). The fill is TRANSLUCENT, so the thing the
+   * text is actually measured against is not a token at all — it is the tint
+   * composited over whatever surface the badge landed on. Retuning either
+   * half without re-measuring the whole matrix is how this drifts.
+   *
+   * So the matrix is measured, and it is measured by CI rather than by
+   * comment: scripts/ci/tests/theme-contrast.test.mjs recomputes every
+   * variant x surface x theme x tint cell from this file and fails under
+   * 4.5:1. Worst cell in the palette today (SC 1.4.3, AA):
+   *
+   *                    --background   --card/--popover   worst surface
+   *   variable  light     7.09/6.11       7.68/6.59      6.35 (--secondary)
+   *   success   light     6.62/5.77       7.17/6.22      5.22 (--secondary)
+   *   formula   light     6.74/5.81       7.31/6.27      5.25 (--secondary)
+   *   variable  dark      9.95/7.92       8.83/7.02      5.98 (--secondary)
+   *   success   dark     10.39/8.11       9.20/7.18      6.11 (--secondary)
+   *   formula   dark     10.11/7.96       8.96/7.04      5.99 (--secondary)
+   *                       ^15% / ^25% (rest / anchor-hover fill)
+   *
+   * The pairs hold, and the ~1.5:1 in #231 IS NOT REPRODUCIBLE FROM THIS
+   * FILE. The issue's cell — dark `success` on `--card` — recomputes to
+   * 9.20:1 at the 15% fill and 7.18:1 at the 25% one, and the pre-4.0.0
+   * palette this replaced does not produce a sub-4.5:1 cell anywhere either,
+   * so it is not a number these tokens used to have. It is quoted here
+   * because #231 stays OPEN on it: the tokens are proven, the report is not
+   * explained, and inventing a cause for it would be the same mistake as
+   * inventing a ratio.
+   *
+   * In particular it is NOT the downstream override. fiestaboard.github.io
+   * pins the "New" badge to hexes with `!important`, which is a hex fork of
+   * a token pair and a real maintenance defect — a fork stops tracking a
+   * retune here — but it is theme-AWARE (`.newBadge` plus a
+   * `[data-theme="dark"] .newBadge`, and their build widens every compiled
+   * `.dark` selector to that attribute), so the light pigment never lands on
+   * a dark fill. Both halves clear AA on their own fills: 6.49:1 light,
+   * 7.52:1 dark. It is redundant, not broken. Dropping it downstream is a
+   * cleanup, not a fix, and it does not close #231.
+   *
+   * Opaque fills (mixing the tint into --background instead of compositing
+   * over the live surface) were prototyped and REJECTED: they make the pair
+   * surface-independent, but a fill baked from --background measures 1.01:1
+   * against --popover in dark, so the chip's field disappears on exactly the
+   * surface the variable picker uses. Alpha is what keeps the chip visible on
+   * every surface; the CI matrix is what keeps it legible.
+   * ============================================================ */
   --tag-variable: oklch(0.52 0.16 315);
   --tag-variable-foreground: oklch(0.4 0.1 315);
   --tag-success: oklch(0.52 0.147 133);
@@ -800,6 +872,10 @@
      13.05:1 on --background; board-ink label 11.81:1. */
   --warning: oklch(0.86 0.17 104);
   --warning-foreground: oklch(0.205 0.008 73);
+  /* The dark half of the #231 matrix — see the table in :root. These measure
+     7.90-10.39:1 at the 15% fill on every surface a Badge can land on, which
+     includes the dark `--card` cell #231 reports as ~1.5:1 (9.20:1 here). The
+     reported figure is unexplained, not reproduced; #231 stays open on it. */
   --tag-variable: oklch(0.78 0.164 315);
   --tag-variable-foreground: oklch(0.86 0.1 315);
   --tag-success: oklch(0.78 0.17 133);
@@ -1435,16 +1511,21 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
  * merges into the page (1.11:1) and the orange band — 9.77:1 there — carries
  * the indicator directly, which is why the recipe is safe in both themes for
  * different reasons.
+ *
+ * The three stops themselves live in :root as --focus-ring-shadow (#228
+ * item 5). This class is now one CALLER of that value rather than the place
+ * it is defined, which is what lets a CSS-only consumer — MDX prose anchors
+ * have no call site to add a class to — say `box-shadow:
+ * var(--focus-ring-shadow)` and stay in sync instead of hand-mirroring the
+ * geometry. The rendered output is byte-identical to the inline recipe it
+ * replaces; if it were not, every VRT baseline in the repo would move.
  * ============================================================ */
 .focus-ring {
   outline: none;
 }
 .focus-ring:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ring-edge),
-    0 0 0 3px var(--ring),
-    0 0 0 4px var(--ring-edge);
+  box-shadow: var(--focus-ring-shadow);
 }
 
 /* ============================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiestaboard/ui",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "FiestaUI — the FiestaBoard design system. React components on Base UI with Tailwind v4 design tokens.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,8 @@
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && cp src/styles/theme.css dist/theme.css && cp src/styles/fonts.css dist/fonts.css && cp src/styles/editor.css dist/editor.css",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "format": "prettier --write .",
@@ -89,6 +91,10 @@
     "@storybook/react-vite": "^10.5.5",
     "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/vite": "^4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
     "@tiptap/core": "^3.29.2",
     "@tiptap/pm": "^3.29.2",
     "@tiptap/react": "^3.29.2",
@@ -118,7 +124,8 @@
     "tailwindcss": "^4",
     "typescript": "6.0.3",
     "typescript-eslint": "^8.65.0",
-    "vite": "^8.1.5"
+    "vite": "^8.1.5",
+    "vitest": "^4.1.11"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",