@proyecto-viviana/ui 0.6.2 → 0.6.3

package/src/style/glasselated-ramps.ts

@@ -17,18 +17,13 @@
  * monotonicity and was still the wrong palette, because nothing had checked the anchors
  * against the island. The island is the source of truth.
  *
- * ACCESSIBILITY. Components fill semantic backgrounds via lightDark("<ramp>-900",
- * "<ramp>-700") with white ink (calendar/RangeCalendar.tsx:373, radio/index.tsx:284,
- * menu/s2-menu-styles.ts:257). Those two stops per ramp are pinned to >= 4.5:1 against
- * white — EXCEPT blue, where 900 is re-pinned to the brand `--accent-primary` #2e90fa
- * in BOTH columns (see the blue ramp note: the darkened #1474e4/#338cfe stops of an
- * earlier revision put the entire accent-coloured population one rung off register).
- * White ink on the light accent fill is therefore ~3.2:1, the 3:1 large-text/graphical
- * floor only — which is exactly how the island spends it (primary button, white 13px/600,
- * glasselated.css:1361-1370; white icon masks, :808-810). It never sets body-size white
- * text on the light accent fill; a component needing readable text on a selected surface
- * takes the raised-pill idiom instead (TabSwitch, switch/index.tsx) or the soft accent
- * pill (`--accent-primary-soft` + blue ink, `.glx-btn-soft` glasselated.css:1382-1392).
+ * ACCESSIBILITY. Semantic fills with white text are pinned to >= 4.5:1. Blue is the
+ * exception at the ramp level: accent-900 remains the brand `--accent-primary` #2e90fa
+ * in both columns for decorative marks, where it only needs the 3:1 non-text floor.
+ * Text-bearing accent surfaces use the standalone `interactive-fill` token below
+ * (#135fc0 / #3670ae), matching `--interactive-fill` in viviana-tokens.css. Keeping
+ * decoration and readable fill as separate semantic roles prevents a contrast repair
+ * from moving every focus ring, indicator, and glow off the published brand accent.
  *
  * Two invariants to hold when editing:
  *   - Emit EVERY stop of a ramp. A missing stop silently keeps the Adobe value.
@@ -77,18 +72,21 @@ const RAMPS: Record<string, Ramp> = {
    *   the island has no token beyond it in either direction.
    *
    *   500 IS THE SECONDARY INK STOP, by the same logic one rung quieter: it is pinned to
-   *   `--text-secondary`, `--slate-500` #64748b in light (:34,43) and the hardcoded neutral
-   *   #9aa0a8 in dark (:171). Note dark `--text-secondary` is NOT dark `--slate-500` (#97a1ab,
-   *   :218) — the island de-tints its dark ink away from the slate ramp exactly as it does at
-   *   800, so following slate here would miss by the same small margin it missed by at 800.
+   *   `--text-secondary` in viviana-tokens.css, in NEITHER column to `--slate-500`. Dark never
+   *   was — the island de-tints its dark ink away from the slate ramp (#97a1ab) exactly as it
+   *   does at 800 — and light no longer is either: `--slate-500` #64748b reads 3.67-4.38:1 on
+   *   our light surfaces, so both `--text-secondary` and this stop step one notch darker to
+   *   #556478 (4.65:1 at worst) and dark lifts #9aa0a8 -> #a0a6ae (4.36 -> 4.68:1 on
+   *   `--surface-raised`, the binding surface in dark). The palette rungs themselves are
+   *   untouched; what moved is an ink role, and the two files must move together.
    *   `neutral-subdued-content-color-default` is repointed onto this stop in spectrum-theme.ts;
    *   Adobe resolves it to gray-700, which paints field labels, unselected tab and segment
    *   labels, slider labels and breadcrumbs two rungs too heavy (61 elements, both schemes).
    *
-   *   Light 300/400/500 were #c5d0de/#93a3b8/#63748b — each exactly one off the island's
-   *   #c4d0de/#94a3b8/#64748b in the red channel. That is a round-trip through OKLCh, not a
-   *   transcription; the values are now copied from the declarations. Read these off the CSS,
-   *   never recompute them: a one-digit drift still fails an equality check against the token.
+   *   Light 300/400 were #c5d0de/#93a3b8 — each exactly one off the island's #c4d0de/#94a3b8
+   *   in the red channel. That is a round-trip through OKLCh, not a transcription; the values
+   *   are now copied from the declarations. Read every anchored stop off the CSS, never
+   *   recompute it: a one-digit drift still fails an equality check against the token.
    *
    *   The dark 800->900->1000 gaps are ~0.018 OKLCh L, just under the >= 0.02 this file asks
    *   for below. That is a ceiling, not a choice: the dark ink is already at L 0.964 and 1000
@@ -111,7 +109,7 @@ const RAMPS: Record<string, Ramp> = {
     200: ["#dbe3ed", "#555c64"],
     300: ["#c4d0de", "#67717d"],
     400: ["#94a3b8", "#7c8794"],
-    500: ["#64748b", "#9aa0a8"],
+    500: ["#556478", "#a0a6ae"],
     600: ["#465569", "#a8b2c0"],
     700: ["#33455c", "#b9c4d6"],
     800: ["#17212e", "#f2f3f5"],
@@ -132,13 +130,18 @@ const RAMPS: Record<string, Ramp> = {
    *   single largest off-register cluster in both schemes was accent-coloured (24 light
    *   elements, 15 dark).
    *
-   *   700's DARK column is the interactive FILL, which is the one accent value the island
-   *   does split by scheme: `--interactive-fill` is `var(--accent-primary)` in light (:83)
-   *   but the quieter #407fc1 in dark (:200). That split is exactly what Adobe's
-   *   `lightDark("accent-900", "accent-700")` idiom expresses — light takes the accent,
-   *   dark steps down — so the idiom stays and only the value it lands on moves. A filled
-   *   accent button in dark is a large area of colour; the island damps it and leaves the
-   *   small accent marks at full strength.
+   *   700's DARK column remains #3670ae because it was the historical landing point for
+   *   interactive fills. The actual semantic fill is now explicit below rather than
+   *   encoded as a cross-scheme ramp pair: #135fc0 in light and #3670ae in dark. A filled
+   *   accent button is a large area of colour; the island damps it and leaves the small
+   *   accent marks at full strength.
+   *
+   *   The damped fill carries white label text, so it answers to 4.5:1 with white. The
+   *   island's #407fc1 gave 4.18:1; this column is #3670ae (5.14:1), and viviana-tokens.css
+   *   moves `--interactive-fill` to the same hex — the two are one value in two files.
+   *   That also repairs a gap this ramp's own rule forbade: #407fc1 sat 0.009 OKLCh L below
+   *   800, so `nextColorStop`'s hover step off the dark fill was invisible; #3670ae restores
+   *   it to 0.051/0.058 either side.
    *
    *   Nothing else here is pinned. The island publishes no accent hover, so 800 (dark
    *   hover, one step brighter than the damped fill) and 1000 (light hover, one step
@@ -151,7 +154,7 @@ const RAMPS: Record<string, Ramp> = {
     400: ["#bfd9fe", "#2d415d"],
     500: ["#9cc4fc", "#2f507f"],
     600: ["#7bb0fa", "#2e5fa1"],
-    700: ["#5c9ff9", "#407fc1"],
+    700: ["#5c9ff9", "#3670ae"],
     800: ["#398dfa", "#267ce7"],
     900: ["#2e90fa", "#2e90fa"],
     1000: ["#0e64c8", "#569eff"],
@@ -294,15 +297,16 @@ const SEMANTIC_OVERRIDES: Record<string, Ramp> = {
   notice: RAMPS.amber,
 };
 
-/* The create-yellow CTA (`--accent-create-*`). Deliberately NOT a ramp: the island declares
- * exactly three values per scheme and they do not sit on the amber trajectory — this is a
- * pale wash with dark ink, where amber-900 is a saturated fill with white ink. Modelling it
- * as a 16-stop ramp would invent thirteen colours nobody asked for.
+/* Standalone semantic colours with no honest ramp. The create-yellow CTA
+ * (`--accent-create-*`) declares exactly three values per scheme and does not sit on the
+ * amber trajectory. `interactive-fill` is likewise a role rather than a blue stop: it is
+ * the AA-safe fill under white text, while accent-900 remains the decorative brand blue.
  *
  * Spread into `baseColors` alongside the ramps, so `backgroundColor: "create-bg"` resolves
  * like any other token. Hover/press cannot use `nextColorStop` here (no adjacent stop
  * exists), so the button styles name the border colour explicitly for those states. */
 export const glasselatedCreateColors: Record<string, ColorToken> = {
+  "interactive-fill": { type: "color", light: "#135fc0", dark: "#3670ae" },
   "create-bg": { type: "color", light: "#ffedb0", dark: "#ffde81" },
   "create-border": { type: "color", light: "#f5d88a", dark: "#ffde81" },
   "create-ink": { type: "color", light: "#7a5600", dark: "#3a2e00" },

package/src/style/spectrum-theme.ts

@@ -104,7 +104,12 @@ type ColorScale =
   | "amber"
   | "violet";
 /** Brand colours with no Spectrum equivalent and no ramp — see glasselatedCreateColors. */
-type VivianaColor = "create-bg" | "create-bg-deep" | "create-border" | "create-ink";
+type VivianaColor =
+  | "interactive-fill"
+  | "create-bg"
+  | "create-bg-deep"
+  | "create-border"
+  | "create-ink";
 type TransparentScale = "transparent-white" | "transparent-black" | "transparent-overlay";
 type HighContrastColor =
   | "Background"
@@ -877,29 +882,29 @@ export const style = createTheme({
     }),
     backgroundColor: new SpectrumColorProperty("backgroundColor", {
       ...baseColors,
-      /* Viviana UI v2 (Glasselated): the filled accent SURFACE, which the island names
-       * `--interactive-fill` — and it is the one accent value the register splits by
-       * scheme: `var(--accent-primary)` #2e90fa in light (design-handoff-v2.css:83) but
-       * the damped #407fc1 in dark (:200). A filled accent area is large; the island
-       * quiets it in dark and leaves the small accent marks (slider fills, checkmarks,
-       * tab indicators, links) at full strength on accent-900.
-       *
-       * That split is exactly the `lightDark("accent-900", "accent-700")` pair that
-       * Button, ActionButton and Tag already declare for their emphasized-selected
-       * fills. Repointed here so the components that reach for the SEMANTIC instead of
-       * the pair — Badge's bold fill, chiefly — land on the same value rather than on
-       * Adobe's accent-800 (5 elements adrift in dark). Adobe's own resolution stepped
-       * light and dark independently down its inverted ramp; ours doesn't invert. */
-      accent: { type: "ref", light: "accent-900", dark: "accent-700" },
+      /* Viviana UI v2 (Glasselated): text-bearing accent surfaces use the explicit
+       * `interactive-fill` semantic (#135fc0 / #3670ae), which clears 4.5:1 under white
+       * in both schemes. `accent-900` remains #2e90fa for decorative marks, rings, and
+       * indicators that answer to the 3:1 non-text floor. Keeping the roles separate
+       * also puts Badge's semantic bold fill on the same contract as Button, Calendar,
+       * and Tag rather than encoding the role as a cross-scheme ramp pair. */
+      accent: baseColors["interactive-fill"],
       "accent-subtle": weirdColorToken("accent-subtle-background-color-default"),
       neutral: colorToken("neutral-background-color-default"),
       "neutral-subdued": weirdColorToken("neutral-subdued-background-color-default"),
       "neutral-subtle": weirdColorToken("neutral-subtle-background-color-default"),
-      negative: weirdColorToken("negative-background-color-default"),
+      /* Same repoint as `accent` above, for the same reason and by the same pair. Adobe
+       * resolves these two semantics onto the -800 stop of their ramp, which in our
+       * register is #e0332a / #208e4d in dark — 4.49:1 and 4.17:1 under the white ink
+       * Badge, Toast and InlineAlert paint on their bold fills, i.e. a hair and a wide
+       * margin under AA respectively. The `lightDark(-900, -700)` pair clears it in both
+       * schemes (negative 4.74/5.52, positive 4.80/5.17) and keeps the three components
+       * on one value. */
+      negative: { type: "ref", light: "negative-900", dark: "negative-700" },
       "negative-subtle": weirdColorToken("negative-subtle-background-color-default"),
       informative: weirdColorToken("informative-background-color-default"),
       "informative-subtle": weirdColorToken("informative-subtle-background-color-default"),
-      positive: weirdColorToken("positive-background-color-default"),
+      positive: { type: "ref", light: "positive-900", dark: "positive-700" },
       "positive-subtle": weirdColorToken("positive-subtle-background-color-default"),
       notice: weirdColorToken("notice-background-color-default"),
       "notice-subtle": weirdColorToken("notice-subtle-background-color-default"),

package/src/table/index.tsx

@@ -1964,9 +1964,7 @@ export function TableSelectionCheckbox(props: {
                 isDisabled: !!props.isDisabled,
               })}
             >
-              {props.isSelected ? (
-                <Checkmark size="XS" class={selectionCheckboxIcon} />
-              ) : null}
+              {props.isSelected ? <Checkmark size="XS" class={selectionCheckboxIcon} /> : null}
             </span>
           </span>
           {renderProps.isFocusVisible ? <CellFocusRing /> : null}

package/src/tag-group/index.tsx

@@ -231,10 +231,10 @@ const tagStyle = style<TagGroupStyleProps>({
     isSelected: {
       default: baseColor("neutral"),
       isEmphasized: {
-        default: lightDark("accent-900", "accent-700"),
-        isHovered: lightDark("accent-1000", "accent-800"),
-        isPressed: lightDark("accent-1000", "accent-800"),
-        isFocusVisible: lightDark("accent-1000", "accent-800"),
+        default: "interactive-fill",
+        isHovered: lightDark("accent-1000", "accent-600"),
+        isPressed: lightDark("accent-1000", "accent-600"),
+        isFocusVisible: lightDark("accent-1000", "accent-600"),
       },
     },
     isDisabled: "disabled",
@@ -298,10 +298,10 @@ const tagStyle = style<TagGroupStyleProps>({
     isSelected: {
       default: baseColor("gray-800"),
       isEmphasized: {
-        default: lightDark("accent-900", "accent-700"),
-        isHovered: lightDark("accent-1000", "accent-800"),
-        isPressed: lightDark("accent-1000", "accent-800"),
-        isFocusVisible: lightDark("accent-1000", "accent-800"),
+        default: "interactive-fill",
+        isHovered: lightDark("accent-1000", "accent-600"),
+        isPressed: lightDark("accent-1000", "accent-600"),
+        isFocusVisible: lightDark("accent-1000", "accent-600"),
       },
     },
     isDisabled: "disabled",

package/src/toolbar/index.tsx

@@ -51,7 +51,10 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
 
   const mergedClass = (rp: ToolbarRenderProps): string => {
     const cls = local.class;
-    return [toolbarStyles({ orientation: rp.orientation }), typeof cls === "function" ? cls(rp) : cls]
+    return [
+      toolbarStyles({ orientation: rp.orientation }),
+      typeof cls === "function" ? cls(rp) : cls,
+    ]
       .filter(Boolean)
       .join(" ");
   };

package/src/tree/index.tsx

@@ -1179,10 +1179,7 @@ export function TreeExpandButton(
           return typeof rawChildren === "function"
             ? rawChildren(renderState())
             : (rawChildren ?? (
-                <Chevron
-                  size="S"
-                  class={treeExpandIcon({ ...renderState(), isExpanded: false })}
-                />
+                <Chevron size="S" class={treeExpandIcon({ ...renderState(), isExpanded: false })} />
               ));
         })()}
       </button>
@@ -1198,10 +1195,7 @@ export function TreeExpandButton(
     >
       {local.children ??
         (({ isExpanded }: { isExpanded: boolean }) => (
-          <Chevron
-            size="S"
-            class={treeExpandIcon({ ...renderState(), isExpanded })}
-          />
+          <Chevron size="S" class={treeExpandIcon({ ...renderState(), isExpanded })} />
         ))}
     </HeadlessTreeExpandButton>
   );
@@ -1243,9 +1237,7 @@ export function TreeSelectionCheckbox(props: {
         aria-label={props["aria-label"] ?? "Select"}
       />
       <span class={treeCheckboxBox(renderProps())}>
-        {renderProps().isSelected ? (
-          <Checkmark size="XS" class={treeCheckboxIcon} />
-        ) : null}
+        {renderProps().isSelected ? <Checkmark size="XS" class={treeCheckboxIcon} /> : null}
       </span>
     </span>
   );

package/src/viviana-tokens.css

@@ -228,7 +228,8 @@
    * Keep both in step with the `edgeGlassShadow` / `edgeGlassSurfaceShadow`
    * fallbacks in style/spectrum-theme.ts. */
   --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
-  --edge-glass-surface: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
+  --edge-glass-surface:
+    inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
 
   /* ── Shadow + glow family (glow follows the accent, never the chrome) ── */
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -270,11 +271,15 @@
   --slate-100: rgba(255, 255, 255, 0.06);
   --white: #ffffff;
 
-  /* Text */
+  /* Text — see the light block for why the two ink roles below are pinned to
+     WCAG AA rather than to a ramp rung. Dark's binding surface is the opaque
+     `--surface-raised` #333a44, not the near-black app background: #9aa0a8 read
+     7.4:1 on the app and 4.36:1 there, and #55a6f6 4.47:1. Both now clear 4.5:1
+     on the raised panel and sit comfortably above 6:1 everywhere else. */
   --text-primary: #f2f3f5;
-  --text-secondary: #9aa0a8;
+  --text-secondary: #a0a6ae;
   --text-tertiary: #6e747c;
-  --text-link: #55a6f6;
+  --text-link: #5faaf7;
   --text-on-accent: #ffffff;
 
   /* Terminal wells — matte / opaque, NEVER glass */
@@ -293,9 +298,15 @@
   --well-tutor-ink: #eaf2fb;
   --btn-secondary-bg: var(--surface-raised);
 
-  /* Accents (app) — live pulse · create CTA · interactive fill */
+  /* Accents (app) — live pulse · create CTA · interactive fill
+     The fill is damped in dark (a filled accent button is a large area of
+     colour) but it still carries white label text: #407fc1 gave 4.18:1, just
+     under AA, so it steps down to #3670ae for 5.14:1 while staying above the
+     3:1 non-text floor against the app, panel and card surfaces it sits on.
+     Kept in lockstep with blue-700's dark column in style/glasselated-ramps.ts,
+     which is the same fill for macro-styled components. */
   --accent-live: #ff6b35;
-  --interactive-fill: #407fc1;
+  --interactive-fill: #3670ae;
   --accent-create-bg: rgb(255 222 129);
   --accent-create-border: rgb(255 222 129);
   --accent-create-ink: #3a2e00;
@@ -530,7 +541,8 @@
    * declared anyway so a surface never inherits the night value across a scheme
    * boundary. */
   --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
-  --edge-glass-surface: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  --edge-glass-surface:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
   --shadow-card: 0 2px 8px rgba(99, 115, 139, 0.08), 0 8px 24px rgba(99, 115, 139, 0.1);
   --shadow-panel: 0 12px 40px rgba(99, 115, 139, 0.14);
   --shadow-float: 0 16px 48px rgba(99, 115, 139, 0.22);
@@ -570,11 +582,22 @@
   --slate-100: #eaeff6;
   --white: #ffffff;
 
-  /* Text */
+  /* Text
+     `--text-secondary` and `--text-link` are pinned to WCAG AA (4.5:1), not to
+     the nearest ramp rung, and that is why neither is an alias any more:
+       - `--slate-500` #64748b reads 3.67-4.38:1 across our light surfaces, so
+         the secondary ink steps one notch darker than the slate ramp. The rung
+         itself is unchanged — it is a palette entry, this is an ink role.
+       - `--text-link` was `var(--blue-500)`, i.e. the same #2e90fa as
+         `--accent-primary` (2.50-3.24:1). Accent-as-ink and accent-as-decoration
+         cannot share one value at AA, so the ink takes `--blue-700` and
+         `--accent-primary` keeps #2e90fa for glows, rings, borders and dots.
+     Worst case measured over every surface a docs page composites: secondary
+     4.65:1 on the accent-tinted chip, link 4.73:1 on the same. */
   --text-primary: var(--slate-900);
-  --text-secondary: var(--slate-500);
+  --text-secondary: #556478;
   --text-tertiary: var(--slate-400);
-  --text-link: var(--blue-500);
+  --text-link: var(--blue-700);
   --text-on-accent: var(--white);
 
   /* Terminal wells — matte, darker channel ink for daylight legibility */
@@ -593,9 +616,13 @@
   --well-tutor-ink: var(--text-primary);
   --btn-secondary-bg: #e9eff6;
 
-  /* Accents (app) */
+  /* Accents (app)
+     `--interactive-fill` is the accent used as a FILL under `--text-on-accent`,
+     so it answers to 4.5:1 with white the way `--accent-primary` never has to.
+     It was `var(--accent-primary)`; white on #2e90fa is 3.24:1, the graphical
+     floor only, which is fine for an icon mask and wrong for a button label. */
   --accent-live: #ff6b35;
-  --interactive-fill: var(--accent-primary);
+  --interactive-fill: var(--blue-700);
   --accent-create-bg: #ffedb0;
   --accent-create-border: #f5d88a;
   --accent-create-ink: #7a5600;