fix(ui): table links read as links

Tables sit on `--table-frame-background` (`--surface-tint`), which
is darker than the page, and nothing here accounted for that. The
link blue measures 4.96:1 on the page but 4.39:1 on the frame, and
its dark counterpart 3.68:1 -- both under AA. They now take a ramp
step either side: 5.66:1 light, 6.76:1 dark.

Links also had no cue but hue. A link and a code span in a cell
were both Menlo 400 with no decoration, so in the Type column
`Attribute[]` and `string` differed only in colour -- WCAG 1.4.1.
Table links carry an underline.

`--table-name-color` is inherited rather than the label pink. The
frame specifies that colour for the first-column names, but the
selector reaches every code span in a cell, none of which are
links; magenta, and on dark an outright #FF4C4C, read as dead
links beside the live ones, at 3.00:1 and 3.71:1. Inheriting also
handles `<code><a>` correctly, since the nested link keeps its own
colour.

Hover moves from the cell to the link. The cell rule washed 30%
black over the whole `td`, dropping the link it advertised to
2.72:1 and putting a pointer over prose that wasn't clickable. The
link's own hover steps one further in each theme's direction, so
it is always the stronger state, and thickens the underline rather
than adding one.

Author: julioest

docs/ui/src/css/doc.css

@@ -437,6 +437,37 @@ html {
   background: none;
 }
 
+/* Table links carry an underline and their own blue.
+
+   Underline, because nothing else marked them: links and inline code in a
+   cell are both Menlo at 400 with no decoration, so in the Type column
+   `Attribute[]` (a link) and `string` (not one) differed by hue alone --
+   WCAG 1.4.1. The mock draws no underline, but it also doesn't put the two
+   side by side in a column.
+
+   Their own blue, because the cell ground is `--table-frame-background`
+   (`--surface-tint`), darker than the page. `--link` measures 4.96:1 on the
+   page but 4.39:1 here, and its dark counterpart 3.68:1 -- both under the
+   4.5 AA wants. `--table-link-color` is the ramp step either side: 5.66:1
+   light, 6.80:1 dark. */
+.doc table.tableblock a {
+  color: var(--table-link-color);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+/* Hover belongs to the link, not the cell. The cell-wide rule this replaces
+   washed 30% black over the whole `td` -- which dropped the link it was
+   advertising from 5.66:1 to 2.72:1, and put a pointer cursor over prose that
+   wasn't clickable. Here the colour steps one further in each theme's own
+   direction, so the hover state is always the stronger of the two, and the
+   rule thickens rather than appears, since the underline is already on. */
+.doc table.tableblock a:hover,
+.doc table.tableblock a:focus-visible {
+  color: var(--table-link-hover-color);
+  text-decoration-thickness: 2px;
+}
+
 .doc table.tableblock thead ~ tbody tr:first-child {
   background-color: transparent;
 }
@@ -449,8 +480,11 @@ html {
   font-size: calc(14 / var(--rem-base) * 1rem);
 }
 
-/* Figma: names are Menlo 14 in the label pink -- .doc code's 0.95em would
-   render them at 13.3. */
+/* Menlo 14 -- `.doc code`'s 0.95em would render these at 13.3. The colour is
+   inherited rather than the frame's label pink: this selector catches every
+   code span in a cell, none of which are links, and the pink read as a broken
+   one next to the real links in the same column. A link nested inside a code
+   span still takes `--table-link-color` from the rule above. */
 .doc table.tableblock td code {
   color: var(--table-name-color);
   background: none;
@@ -1360,11 +1394,6 @@ html {
   height: 20px !important;
 }
 
-.doc table.tableblock td:has(a):hover {
-  background-color: rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-
 .doc table.tableblock td:has(a) p {
   margin: 0;
   padding: 0;

docs/ui/src/css/vars.css

@@ -34,6 +34,13 @@
   --mr-blue-300: #93c5fd;
   --mr-blue-450: #1e78ff; /* Figma exact: theme-toggle fill, note blocks */
   --mr-blue-600: #2563eb;
+  /* One step past 600, for links on the tinted table ground where 600
+     measures 4.39:1. */
+  --mr-blue-700: #1d4fd7;
+  /* Hover steps for table links -- one further in each theme's direction, so
+     the state is never dimmer than the rest state. */
+  --mr-blue-800: #1e40af;
+  --mr-blue-200: #bfdbfe;
   --mr-yellow: #facc15;
   --mr-yellow-300: #f1d874;
   --mr-amber-700: #b45309;
@@ -343,14 +350,24 @@
      1.00:1, i.e. no visible grid and no visible header at all.
      The framed variant's ground is the brand blue at 10% over the page
      (#E7EDF6 light / #263552 dark), which is exactly --surface-tint.
-     Names in the first column are Menlo in the label colour (#EC4899 light /
-     #FF4C4C dark) -- --ds-color-label already carries both. */
+     The frame draws the first-column names in the label colour (#EC4899
+     light / #FF4C4C dark), but that rule reaches every code span in a cell,
+     not just the names -- and those spans are not links. Magenta and, on
+     dark, outright red read as a visited or dead link sitting beside the
+     live blue ones, and they measure 3.00:1 and 3.71:1 on the frame ground.
+     They take the cell's own colour instead. */
   --table-border-color: var(--ds-color-code-body);
   --table-frame-color: var(--outline);
   --table-frame-background: var(--surface-tint);
+  /* Links sit on that tinted frame, not the page. `--link` (#2563EB) is
+     4.96:1 on the page but 4.39:1 here, and the dark blue 3.68:1 -- both
+     under AA. One step darker clears it at 5.66:1; dark goes the other way,
+     to the 300, at 6.80:1. */
+  --table-link-color: var(--mr-blue-700);
+  --table-link-hover-color: var(--mr-blue-800);
   --table-header-background: var(--ds-color-code-body);
   --table-header-color: var(--mr-white);
-  --table-name-color: var(--ds-color-label);
+  --table-name-color: inherit;
   --table-stripe-background: var(--surface-2);
   --table-footer-background:
     linear-gradient(
@@ -435,6 +452,9 @@
   --border-strong: rgba(148, 163, 184, 0.32);
   /* DERIVED -- see the note in the prefers-color-scheme block below. */
   --outline: #000;
+  /* Dark inverts the direction: the 300 clears the tinted frame at 6.80:1. */
+  --table-link-color: var(--mr-blue-300);
+  --table-link-hover-color: var(--mr-blue-200);
   --navbar-surface: var(--mr-navy-750);
   --nav-title-background: var(--mr-red);
   --gold-surface: var(--mr-yellow);
@@ -514,6 +534,8 @@
     --border-strong: rgba(148, 163, 184, 0.32);
     /* DERIVED -- the frame is light only. Revisit with a dark frame. */
     --outline: #000;
+    --table-link-color: var(--mr-blue-300);
+    --table-link-hover-color: var(--mr-blue-200);
     --navbar-surface: var(--mr-navy-750);
     --nav-title-background: var(--mr-red);
     --gold-surface: var(--mr-yellow);