@react-x11/components 0.14.1 → 0.16.1

package/src/html/css/parse.ts

@@ -951,11 +951,13 @@ const PSEUDO_CLASSES = new Set([
 /**
  * Specificity, packed. Counted from the selector text rather than from a
  * parse: `#a` is an id, `.a`/`[a]`/`:a` is a class, a bare name is a type,
- * and a pseudo-*element* (`::before`) counts as a type. Functional
- * pseudo-classes are counted as one class each, which is right for
- * `:hover`/`:nth-child()` and approximate for `:is()`/`:not()` — whose
- * specificity is their argument's. The approximation costs an author who
- * writes `:is(#id)` and expects it to beat a class; nothing else.
+ * and a pseudo-*element* (`::before`) counts as a type. A pseudo-class
+ * that takes selectors counts as Selectors 4 (17) has it: `:is()`,
+ * `:not()` and `:has()` as the most specific selector in their list,
+ * `:where()` as nothing, and `:nth-child(An+B of S)` as a class and the
+ * most specific in S. Counted as a class each, `:where()` was not the
+ * zero a library writes it to be: a typography plugin's
+ * `.prose :where(p)` beat a page's own `.intro p`.
  */
 const LEGACY_PSEUDO_ELEMENTS = /^(?:before|after|first-line|first-letter)$/i;
 
@@ -966,6 +968,8 @@ export function specificityOf(selector: string): number {
   let ids = 0;
   let classes = 0;
   let types = 0;
+  /** What the selectors inside pseudo-classes come to, packed. */
+  let inner = 0;
   let i = 0;
   const n = selector.length;
   while (i < n) {
@@ -985,14 +989,29 @@ export function specificityOf(selector: string): number {
         i = identEnd(selector, i + 2);
       } else {
         const name = readIdent(selector, i + 1);
+        const lower = name.value.toLowerCase();
+        i = name.end;
+        let argument: string | null = null;
+        if (selector[i] === '(') {
+          const end = componentEnd(selector, i);
+          argument = selector.slice(i + 1, end - 1);
+          i = end;
+        }
         // CSS 2 spelled the four pseudo-elements it had with one colon
         if (LEGACY_PSEUDO_ELEMENTS.test(name.value)) {
           types += 1;
+        } else if (argument !== null && SELECTOR_LIST_PSEUDOS.has(lower)) {
+          inner += mostSpecific(argument);
+        } else if (argument !== null && lower === 'where') {
+          // nothing
         } else {
           classes += 1;
+          if (argument !== null && NTH_OF_PSEUDOS.has(lower)) {
+            const of = /\sof\s/i.exec(argument);
+            if (of)
+              inner += mostSpecific(argument.slice(of.index + of[0].length));
+          }
         }
-        i = name.end;
-        if (selector[i] === '(') i = componentEnd(selector, i);
       }
     } else if (c === '*' || c === '|') {
       // the universal selector, and a namespace's bar, count nothing
@@ -1004,7 +1023,40 @@ export function specificityOf(selector: string): number {
       i += 1;
     }
   }
-  return ids * 1_000_000 + classes * 1_000 + types;
+  return ids * 1_000_000 + classes * 1_000 + types + inner;
+}
+
+/** The pseudo-classes whose specificity is their argument's most specific
+ *  selector, the old names of `:is()` among them. */
+const SELECTOR_LIST_PSEUDOS = new Set([
+  'is',
+  'not',
+  'has',
+  'matches',
+  '-webkit-any',
+  '-moz-any',
+]);
+
+/** The pseudo-classes an `of S` may follow. */
+const NTH_OF_PSEUDOS = new Set(['nth-child', 'nth-last-child']);
+
+/** The specificity of the most specific selector in a list, packed. */
+function mostSpecific(list: string): number {
+  let most = 0;
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i <= list.length; i += 1) {
+    const c = list[i];
+    if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') depth -= 1;
+    else if (c === '"' || c === "'" || c === '\\') {
+      i = componentEnd(list, i) - 1;
+    } else if ((c === ',' && depth === 0) || i === list.length) {
+      most = Math.max(most, specificityOf(list.slice(start, i)));
+      start = i + 1;
+    }
+  }
+  return most;
 }
 
 // --- the little scanner -----------------------------------------------------

package/src/html/css/shapes.ts

@@ -13,7 +13,7 @@
 // (`svg.ts`). A `ComputedStyle` per `<path>` would be a few hundred
 // properties for the dozen a shape has, on a page of hundreds of icons.
 import type { Element } from 'domhandler';
-import { LIGHT_DARK, lightDark } from './color.js';
+import { LIGHT_DARK, SYSTEM_COLOR, lightDark, systemColors } from './color.js';
 import { inkColor, parseAlpha, parseColor, parseLength } from './values.js';
 import type { UnitContext } from './values.js';
 
@@ -25,10 +25,38 @@ export type ShapeStyle = Readonly<Record<string, string>>;
 /** What the rules give the elements of one drawing, and all of it as a
  *  string: what a drawing's tree was last made with (`SvgDrawing`). */
 export interface ShapeStyles {
+  /** Each element's, where it stands. */
   readonly of: ReadonlyMap<Element, ShapeStyle>;
+  /**
+   * What they give the copy a `<use>` draws, by the `<use>`, then by each
+   * element of the copy's original; null where they give none. A copy is
+   * styled in a tree of its own, which its original is the top of (SVG 2,
+   * 5.5.3, as Chrome has it): a rule finds no ancestor of that element's
+   * and none of the `<use>`'s, and no sibling of it, and what the top
+   * inherits is the `<use>`'s. So `symbol .line` reaches a sprite's line
+   * where `.sprite .line` does not, and an element a `<use>` draws may be
+   * styled otherwise than where it stands.
+   */
+  readonly used: ReadonlyMap<Element, ReadonlyMap<Element, ShapeStyle>> | null;
   readonly key: string;
 }
 
+/** The id a `<use>` names the element it draws by: a fragment of its
+ *  `href`. One in another document is none here, where nothing is fetched
+ *  for a drawing. */
+export function useHref(el: Element): string | null {
+  const href = el.attribs.href ?? el.attribs['xlink:href'] ?? '';
+  return href.length > 1 && href.startsWith('#') ? href.slice(1) : null;
+}
+
+/** Whether an element is a `<use>`, with a prefix or not. */
+export function isUse(el: Element): boolean {
+  const name = el.name;
+  if (name === 'use') return true;
+  const i = name.indexOf(':');
+  return i >= 0 && name.slice(i + 1).toLowerCase() === 'use';
+}
+
 /** Each property read, and whether it is inherited. */
 const PROPS: Record<string, boolean> = {
   fill: true,
@@ -143,6 +171,9 @@ const LINE_JOINS: Record<string, string> = {
   arcs: 'miter',
 };
 
+/** The properties of a shape that a colour is written in. */
+const SHAPE_COLORS = new Set(['fill', 'stroke', 'color', 'stop-color']);
+
 /**
  * One declaration's value as a drawing reads it, or null for a value the
  * property does not take, which leaves the declaration out of the cascade
@@ -165,6 +196,9 @@ export function shapeValue(
   if (wide === 'unset' || wide === 'revert' || wide === 'revert-layer') {
     return PROPS[prop] ? 'inherit' : INITIAL[prop];
   }
+  if (SHAPE_COLORS.has(prop) && SYSTEM_COLOR.test(value)) {
+    value = systemColors(value, ctx.units.systemColors);
+  }
   if (LIGHT_DARK.test(value)) {
     const picked = lightDark(value, ctx.scheme);
     if (picked === null) return null;

package/src/html/css/style.ts

@@ -32,7 +32,6 @@ import {
 import type { Len, Pct, UnitContext } from './values.js';
 import { parseUrl, readIdent, startsIdent } from './parse.js';
 import {
-  DEFAULT_QUOTES,
   parseContent,
   parseCounterList,
   parseListStyleType,
@@ -42,7 +41,13 @@ import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
 import type { TransformFunction } from './transform.js';
-import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
+import {
+  LIGHT_DARK,
+  SYSTEM_COLOR,
+  lightDark,
+  systemColors,
+  usedColorScheme,
+} from './color.js';
 import { svgPaint } from './shapes.js';
 
 export type Display =
@@ -457,7 +462,7 @@ export interface ComputedStyle {
    *  `text-align` on a `<table>` to behave. */
   tableTextAlignSet: boolean;
   /** The marks `open-quote` and `close-quote` write, pairs outermost first. */
-  quotes: readonly string[] | 'none';
+  quotes: readonly string[] | 'none' | 'auto';
   /** Custom properties, `--name`, with their `var()`s replaced (`vars.ts`);
    *  null where none is set. Inherited as the same map. */
   custom: CustomProps | null;
@@ -656,7 +661,8 @@ export interface ComputedStyle {
   /** Its shadows front to back, the ones that can be seen; null for none. */
   boxShadow: BoxShadow[] | null;
   /** Its outline (CSS 2.1 18.4, CSS UI 4): drawn around the border box,
-   *  grown by `outlineOffset`, taking no room; `auto` is drawn solid. */
+   *  grown by `outlineOffset`, taking no room; `auto` is the palette's
+   *  focus ring (`settleOutline`), drawn solid. */
   outlineStyle: BorderStyle | 'auto';
   outlineWidth: number;
   outlineColor: string;
@@ -761,16 +767,31 @@ export interface ComputedStyle {
     | 'space-between'
     | 'space-around'
     | 'space-evenly';
-  alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+  /** `normal` is `stretch` in a flex box, and is kept apart from it only
+   *  in a grid, where it does not stretch an item with a natural size or a
+   *  ratio (`settleAlign`). */
+  alignItems:
+    'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
   alignSelf:
-    'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    | 'auto'
+    | 'normal'
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'baseline';
+  /** `start` and `end` are kept: a flex box that wraps in reverse puts
+   *  them at the other ends of its lines from `flex-start` and `flex-end`. */
   alignContent:
     | 'flex-start'
     | 'flex-end'
+    | 'start'
+    | 'end'
     | 'center'
     | 'stretch'
     | 'space-between'
-    | 'space-around';
+    | 'space-around'
+    | 'space-evenly';
   flexGrow: number;
   flexShrink: number;
   flexBasis: Len | 'auto' | 'content';
@@ -913,6 +934,51 @@ export interface RootLook {
    * is in Chrome. Without it, `fontFamily`.
    */
   controlFontFamily?: string;
+  /**
+   * The ring the palette's widgets draw round the one that has the focus —
+   * `theme.focusRing`, `focusRingWidth` and `focusRingOffset` — which is
+   * what an `outline-style: auto` is, the platform's own (CSS UI 4, 5.3),
+   * and what `-webkit-focus-ring-color` names. Without them, core's own
+   * defaults.
+   */
+  focusRing?: string;
+  focusRingWidth?: number;
+  focusRingOffset?: number;
+}
+
+/** Core's focus ring, where a look names none (`DEFAULT_FOCUS_RING`). */
+const FOCUS_RING = { color: '#2980b9', width: 2, offset: 1 };
+
+/**
+ * An `outline-style: auto` as the platform's focus ring: the palette's
+ * width and, where the outline's colour is the text's or the keyword's,
+ * its colour, the palette's gap outside `outline-offset` — so a field the
+ * document draws is ringed as the window's own fields are. A browser
+ * draws `auto` in a style of its own the same way, whatever width it was
+ * given. `look` is the device one, as every length here is, and `scale`
+ * what makes core's defaults device lengths too.
+ */
+export function settleOutline(
+  style: ComputedStyle,
+  look: RootLook,
+  scale: number,
+): void {
+  if (style.outlineStyle !== 'auto') return;
+  style.outlineWidth = look.focusRingWidth ?? FOCUS_RING.width * scale;
+  style.outlineOffset += look.focusRingOffset ?? FOCUS_RING.offset * scale;
+  if (style.outlineColor === 'currentColor') {
+    style.outlineColor = look.focusRing ?? FOCUS_RING.color;
+  }
+}
+
+/** `-webkit-focus-ring-color`, a colour of an outline's. */
+function outlineColorOf(v: string, ctx: UnitContext): string | null {
+  const lower = v.trim().toLowerCase();
+  if (lower === 'invert') return 'currentColor';
+  if (lower === '-webkit-focus-ring-color') {
+    return ctx.focusRing ?? FOCUS_RING.color;
+  }
+  return parseColor(v);
 }
 
 export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
@@ -968,7 +1034,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     captionSide: 'top',
     emptyCells: 'show',
     tableTextAlignSet: false,
-    quotes: DEFAULT_QUOTES,
+    quotes: 'auto',
     custom: null,
 
     display: 'inline',
@@ -1114,7 +1180,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'normal',
-    alignItems: 'stretch',
+    alignItems: 'normal',
     alignSelf: 'auto',
     alignContent: 'stretch',
     flexGrow: 0,
@@ -1314,6 +1380,11 @@ export function firstLineParent(
 // --- applying a declaration -------------------------------------------------
 
 /** Longhands that take a colour and nothing else, by property name. */
+/** The properties a colour is written in, alone or in a shorthand, a
+ *  shadow, a gradient or an image's mask. */
+const TAKES_COLOR =
+  /^(?:color|background|border|outline|box-shadow|text-shadow|text-decoration|text-emphasis|column-rule|fill|stroke|stop-color|flood-color|lighting-color|caret-color|accent-color|scrollbar-color|filter|mask|list-style|-webkit-text-(?:fill|stroke))/;
+
 const COLOR_PROPS: Record<string, keyof ComputedStyle> = {
   color: 'color',
   'background-color': 'backgroundColor',
@@ -1438,6 +1509,11 @@ export function applyDeclaration(
   if (/!\s*important$/i.test(value)) {
     value = value.replace(/!\s*important$/i, '').trim();
   }
+  // a system colour is a `light-dark()` of its own, in a property that
+  // takes a colour: `Menu` is a font in `font`, and `Mark` a family's name
+  if (TAKES_COLOR.test(name) && SYSTEM_COLOR.test(value)) {
+    value = systemColors(value, ctx.systemColors);
+  }
   // the branch of each `light-dark()` this element's scheme picks, before
   // anything reads the value: it stands wherever a colour can, in a
   // shorthand, a shadow, a gradient or a mix, and most often arrives
@@ -2089,7 +2165,7 @@ export function applyDeclaration(
           width = w;
           continue;
         }
-        const c = v === 'invert' ? 'currentColor' : parseColor(part);
+        const c = outlineColorOf(part, ctx);
         if (c === null) return;
         color = c;
       }
@@ -2110,8 +2186,7 @@ export function applyDeclaration(
     }
     case 'outline-color': {
       // `invert` is the text's colour where a browser cannot invert
-      const v = value.trim().toLowerCase();
-      const c = v === 'invert' ? 'currentColor' : parseColor(value);
+      const c = outlineColorOf(value, ctx);
       if (c !== null) style.outlineColor = c;
       return;
     }
@@ -2906,13 +2981,17 @@ export function applyDeclaration(
       return;
     }
     case 'align-items': {
-      const v = alignKeyword(value);
+      const v =
+        value.trim().toLowerCase() === 'normal'
+          ? 'normal'
+          : alignKeyword(value);
       if (v) style.alignItems = v as ComputedStyle['alignItems'];
       return;
     }
     case 'align-self': {
-      if (value.toLowerCase() === 'auto') {
-        style.alignSelf = AUTO;
+      const keyword = value.trim().toLowerCase();
+      if (keyword === 'auto' || keyword === 'normal') {
+        style.alignSelf = keyword;
         return;
       }
       const v = alignKeyword(value);
@@ -2921,11 +3000,15 @@ export function applyDeclaration(
     }
     case 'align-content': {
       // `normal` is `stretch` in a flex and a grid container, the only
-      // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+      // boxes it moves anything in (CSS Box Alignment 3, 5.1); `start` and
+      // `end` are the box's own edges, and stay those
+      const plain = overflowAligned(value);
       const v =
         value.trim().toLowerCase() === 'normal'
           ? 'stretch'
-          : alignKeyword(value);
+          : plain === 'start' || plain === 'end'
+            ? plain
+            : alignKeyword(value);
       if (v) style.alignContent = v as ComputedStyle['alignContent'];
       return;
     }
@@ -3373,6 +3456,28 @@ export function settleContentVisibility(style: ComputedStyle): void {
   }
 }
 
+/**
+ * `align-items: normal` and `align-self: normal`, settled once the cascade
+ * knows what the box and its parent are. In a grid `normal` stretches an
+ * item only where it has neither a natural size nor a ratio, and `stretch`
+ * stretches every item (CSS Grid 1, 6.2; CSS Box Alignment 3, 6.1), so the
+ * grid keeps the two apart; everywhere else `normal` is `stretch`, and a
+ * flex box reads nothing new. Unread, `normal` was dropped, and a grid could
+ * not tell an unset `align-items` from `stretch`: an image under an explicit
+ * `stretch` kept the height its ratio gave it.
+ */
+export function settleAlign(
+  style: ComputedStyle,
+  parent: ComputedStyle | null,
+): void {
+  if (style.alignItems === 'normal' && !style.grid) {
+    style.alignItems = 'stretch';
+  }
+  if (style.alignSelf === 'normal' && !parent?.grid) {
+    style.alignSelf = 'stretch';
+  }
+}
+
 export function settleOverflow(style: ComputedStyle): void {
   const x = style.overflowX;
   const y = style.overflowY;

package/src/html/css/ua.ts

@@ -211,12 +211,16 @@ col { display: table-column; }
 /* The form controls are real widgets rather than drawn boxes, so what the
    UA sheet owes them is a *box* of about the right size in the flow — the
    widget is painted into it by the component above. 'inline-block' is what
-   makes a label and its input share a line. */
+   makes a label and its input share a line. Chrome's margins and alignment:
+   none round a field, a select, a button or a text area, each on its line's
+   baseline — a field's text on the text beside it (\`CONTROL_BASELINES\`) —
+   and a meter or a progress bar a fifth of an em under it. */
 input, button, select, textarea, meter, progress {
   display: inline-block;
-  vertical-align: middle;
-  margin: 3px 2px;
+  vertical-align: baseline;
+  margin: 0;
 }
+meter, progress { vertical-align: -0.2em; }
 /* A control's text is a system font's, not its parent's: Chrome gives these
    four \`font: -webkit-small-control\`, Arial at the default size less 2pt
    (13.33px) whatever the text around it is set in, and Gecko \`-moz-field\`
@@ -231,8 +235,6 @@ input, button, select, textarea {
   font-size: ${look.controlFontSize ?? look.fontSize}px;
 }
 textarea { font-family: ${mono}; }
-/* Chrome's own UA margins for the checkables, near enough: they are the
-   controls that sit hard against their label text otherwise. */
 /* HTML's rendering section (15.3.10): a control's text keeps none of the
    spacing, the line height, the case or the indent of the text around it.
    A button in a paragraph of 'line-height: 1.5' is its own font's line
@@ -247,8 +249,22 @@ input, select, button, textarea {
   text-indent: initial;
   text-shadow: initial;
 }
-input[type=checkbox] { margin: 3px 4px 3px 4px; }
-input[type=radio] { margin: 3px 4px 3px 5px; }
+/* Chrome's ring round a control that shows it has the focus, and \`auto\` is
+   the platform's own: the palette's ring here (\`settleOutline\`), round
+   the element's border box, which the document draws — the field's widget
+   draws none, so a page's \`outline: none\`, or a ring of its own, is what
+   shows. Only a text field's widget tells the document it has the focus:
+   the other controls are core's components, which draw their own ring and
+   keep their focus to themselves. */
+input:focus-visible, textarea:focus-visible {
+  outline: auto 1px -webkit-focus-ring-color;
+  outline-offset: 0;
+}
+/* Chrome's own margins for the checkables and a range, which sit on their
+   border box's bottom edge, the margin under the line */
+input[type=checkbox] { margin: 3px 3px 3px 4px; }
+input[type=radio] { margin: 3px 3px 0 5px; }
+input[type=range] { margin: 2px; }
 input[type=hidden] { display: none; }
 /* A <button> is drawn rather than mounted: its content is the document's —
    an icon, a label in spans, a pill of the page's own design, which is what
@@ -269,7 +285,6 @@ button {
   cursor: pointer;
 }
 button[disabled] { color: ${look.mutedColor}; cursor: default; }
-textarea { vertical-align: top; }
 fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.6em; border: 1px solid ${look.borderColor}; }
 legend { display: block; padding: 0 2px; }
 label { cursor: pointer; }
@@ -292,6 +307,9 @@ details[open] > summary:first-of-type { list-style-type: disclosure-open; }
  * and border longhand, radius included — along with the native look it
  * would lose in a browser. Nothing stays half the palette's and half the
  * page's.
+ *
+ * A field's frame is its widget's, but its corners are the element's too:
+ * the focus ring the document draws round it is rounded as the frame is.
  */
 function chromeText(look: RootLook): string {
   return `
@@ -300,5 +318,6 @@ button {
   border: ${look.controlBorder}px solid ${look.borderColor};
   border-radius: ${look.controlRadius}px;
 }
+input, textarea { border-radius: ${look.controlRadius}px; }
 `;
 }

package/src/html/css/values.ts

@@ -127,6 +127,11 @@ export interface UnitContext {
   rlh?: () => number;
   /** Every property at its initial value, which `initial` sets one to. */
   initial?: ComputedStyle;
+  /** The palette's focus ring, which `-webkit-focus-ring-color` is. */
+  focusRing?: string;
+  /** Each system colour as the `light-dark()` it is, the palette's in the
+   *  palette's scheme (`systemColorTable`); Chrome's where it is missing. */
+  systemColors?: Map<string, string>;
 }
 
 /** A CSS number (CSS Syntax 3 4.3.12): a sign, digits with at most one
@@ -348,9 +353,10 @@ export function fourSides<T>(parts: T[]): [T, T, T, T] {
  *  element's own ink, everything else passed through. */
 export function inkColor(color: string, current: string): string {
   if (color === 'currentColor') return current;
-  // a `color-mix()` with `currentColor` in it waits for the colour too;
-  // every other functional colour was read when it was parsed
-  if (color.charCodeAt(0) === 99 && color.startsWith('color-mix(')) {
+  // a `color-mix()` or a relative colour with `currentColor` in it waits
+  // for the colour too; every other functional colour was read when it was
+  // parsed, to `#rrggbb` or `rgba()` with no letters in it
+  if (color.charCodeAt(color.length - 1) === 41 && HAS_CURRENT.test(color)) {
     return functionalColor(color.replace(CURRENT, current)) ?? current;
   }
   return color;
@@ -358,6 +364,7 @@ export function inkColor(color: string, current: string): string {
 
 const CURRENT = /currentcolor/gi;
 const HAS_CURRENT = /currentcolor/i;
+const RELATIVE_COLOR = /^[a-z]+\(\s*from\s/i;
 
 /** Whether a colour paints anything at all. Two string tests rather than a
  *  parse, for the reason at the top of the file. */
@@ -410,12 +417,19 @@ export function parseColor(value: string): string | null {
   // five or seven, and a typo'd `#ff000` took the application down
   if (v.startsWith('#')) return HEX_COLOR.test(v) ? v : null;
   if (/^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(/i.test(v)) {
-    // a mix with `currentColor` in it is kept to be mixed where it is used
-    // (`inkColor`), once it is known to be one
-    if (HAS_CURRENT.test(v) && /^color-mix\(/i.test(v)) {
-      return functionalColor(v.replace(CURRENT, '#000')) === null
-        ? null
-        : `color-mix(${v.slice(v.indexOf('(') + 1)}`;
+    // a mix or a relative colour with `currentColor` in it is kept to be
+    // worked out where it is used (`inkColor`), once it is known to be one
+    if (HAS_CURRENT.test(v)) {
+      if (/^color-mix\(/i.test(v)) {
+        return functionalColor(v.replace(CURRENT, '#000')) === null
+          ? null
+          : `color-mix(${v.slice(v.indexOf('(') + 1)}`;
+      }
+      if (RELATIVE_COLOR.test(v)) {
+        return functionalColor(v.replace(CURRENT, '#000')) === null
+          ? null
+          : `${v.slice(0, v.indexOf('(')).toLowerCase()}${v.slice(v.indexOf('('))}`;
+      }
     }
     return functionalColor(v);
   }

package/src/html/index.ts

@@ -238,6 +238,13 @@ function deriveLook(
     // `medium` and the face it reads pages in
     controlFontSize: Number(theme.fontSize ?? 14),
     controlFontFamily: String(theme.fontFamily ?? 'sans-serif'),
+    ...(typeof theme.focusRing === 'string' && { focusRing: theme.focusRing }),
+    ...(typeof theme.focusRingWidth === 'number' && {
+      focusRingWidth: theme.focusRingWidth,
+    }),
+    ...(typeof theme.focusRingOffset === 'number' && {
+      focusRingOffset: theme.focusRingOffset,
+    }),
   };
 }