@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Views/RecordList.tsx

@@ -0,0 +1,146 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactElement,
+} from "react";
+import { useFormat, useT } from "../lib/context.tsx";
+import { rovingIndex } from "../lib/hooks.ts";
+import { singleKeyShortcutsEnabled } from "../lib/preferences.ts";
+import { isMenuKey, useItemSelection, type ItemSelect } from "../lib/selection.ts";
+import { type RecordListProps } from "./Views.types.ts";
+
+/** A selectable list's selection, for its rows' checkboxes and selected state. */
+export const RecordListSelection = createContext<ItemSelect | null>(null);
+
+/**
+ * The list of RecordRows with the grid role and the list's name. Arrow Up and Down, J and K move
+ * between rows; Home and End jump. With `selection`, rows select as in DataTable: a row's checkbox,
+ * Cmd or Ctrl+click and Shift+click, X and Shift+X on the focused row, Cmd or Ctrl+A for every row
+ * and Esc to clear. Right-click, Shift+F10 or the Context Menu key on a row calls
+ * `onItemContextMenu` with the row's id.
+ */
+export function RecordList({
+  label,
+  children,
+  selection,
+  onItemContextMenu,
+}: RecordListProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const ref = useRef<HTMLDivElement>(null);
+  const [entered, setEntered] = useState(false);
+  const rowsOf = () => [...(ref.current?.querySelectorAll<HTMLElement>("[data-row]") ?? [])];
+  const select = useItemSelection(selection, () =>
+    rowsOf().flatMap((r) => (r.dataset["item"] ? [r.dataset["item"]] : [])),
+  );
+  /** The row an event happened in, with its id when it has one. */
+  const rowAt = (target: EventTarget) => {
+    const row = target instanceof Element ? target.closest<HTMLElement>("[data-row]") : null;
+    return row && ref.current?.contains(row) ? row : null;
+  };
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const rows = rowsOf();
+    const index = rows.findIndex((r) => r.contains(document.activeElement));
+    const focused = rows[index];
+    const id = focused?.dataset["item"];
+    // Selection and the menu act on the focused row itself, never on a control inside it.
+    if (id && focused === e.target && !e.defaultPrevented) {
+      if (onItemContextMenu && isMenuKey(e)) {
+        e.preventDefault();
+        onItemContextMenu(id, null, focused);
+        return;
+      }
+      if (select.onKey(e, id)) return;
+    }
+    const letters = singleKeyShortcutsEnabled();
+    const key =
+      letters && e.key === "j" ? "ArrowDown" : letters && e.key === "k" ? "ArrowUp" : e.key;
+    const next = rovingIndex(key, Math.max(0, index), rows.length, "vertical");
+    if (next === null || rows.length === 0) return;
+    if (index === -1 && key !== "Home" && key !== "End") return;
+    e.preventDefault();
+    rows[next]?.focus();
+  };
+  const onClick = (e: MouseEvent<HTMLDivElement>) => {
+    const id = rowAt(e.target)?.dataset["item"];
+    if (id) select.onClick(e, id);
+  };
+  const grid = (
+    <div
+      ref={ref}
+      role="grid"
+      aria-label={label}
+      aria-multiselectable={selection ? true : undefined}
+      tabIndex={entered ? -1 : 0}
+      onFocus={(e) => {
+        if (e.target === e.currentTarget) {
+          rowsOf()[0]?.focus();
+          setEntered(true);
+        }
+      }}
+      onKeyDown={onKeyDown}
+      {...(selection
+        ? {
+            onClick,
+            onMouseDown: (e: MouseEvent<HTMLDivElement>) => {
+              // Shift+click selects a range, not the text between.
+              if (e.shiftKey && rowAt(e.target)) e.preventDefault();
+            },
+          }
+        : {})}
+      {...(onItemContextMenu
+        ? {
+            onContextMenu: (e: MouseEvent<HTMLDivElement>) => {
+              const row = rowAt(e.target);
+              const id = row?.dataset["item"];
+              if (!row || !id) return;
+              e.preventDefault();
+              onItemContextMenu(id, { x: e.clientX, y: e.clientY }, e.target as HTMLElement);
+            },
+          }
+        : {})}
+      className="xos-rlist flex flex-col overflow-hidden rounded-card border border-border-subtle"
+    >
+      {/* The list stays headless on screen; screen readers moving across a row hear which value
+          each cell is (1.3.1, A23-012). */}
+      <div role="row" className="sr-only">
+        {[
+          ...(selection ? ["select"] : []),
+          "state",
+          "key",
+          "title",
+          "labels",
+          "next",
+          "owner",
+          "action",
+        ].map((c) => (
+          <span key={c} role="columnheader">
+            {t(`recordList.columns.${c}`)}
+          </span>
+        ))}
+      </div>
+      {children}
+    </div>
+  );
+  if (!selection) return grid;
+  // The rows of this list that are selected: lists on one page may share a selection.
+  const count = Children.toArray(children).filter(
+    (child) =>
+      isValidElement<{ id?: unknown }>(child) &&
+      typeof child.props.id === "string" &&
+      select.isSelected(child.props.id),
+  ).length;
+  return (
+    <RecordListSelection value={select}>
+      <span role="status" className="sr-only">
+        {count > 0 ? t("bulk.selected", { n: fmt.number(count) }) : ""}
+      </span>
+      {grid}
+    </RecordListSelection>
+  );
+}

package/src/Views/RecordRow.tsx

@@ -0,0 +1,132 @@
+import { use, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { singleKeyShortcutsEnabled } from "../lib/preferences.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { RecordKindGlyph } from "../Glyphs/Glyphs.tsx";
+import { StateIcon } from "../StateIcon/StateIcon.tsx";
+import { RecordListSelection } from "./RecordList.tsx";
+import { type RecordRowProps } from "./Views.types.ts";
+
+/**
+ * One list row that answers what now: state, key, title, chips, next date, owner and the next action.
+ * In a selectable list a row with an `id` leads with its checkbox. The key, title and owner cells
+ * carry `data-column`, and the row its `data-item` id, so a page can preview them (hover cards).
+ */
+export function RecordRow({
+  id,
+  state,
+  stateLabel,
+  recordKey,
+  kind,
+  title,
+  chips,
+  next,
+  owner,
+  actionLabel,
+  actionKey,
+  selected,
+  onAction,
+  onSelect,
+  onOpen,
+}: RecordRowProps): ReactElement {
+  const t = useT();
+  const list = use(RecordListSelection);
+  const select = list && id !== undefined ? list : null;
+  const isSelected = selected ?? (select && id !== undefined ? select.isSelected(id) : undefined);
+  return (
+    <div
+      role="row"
+      aria-selected={isSelected ?? undefined}
+      tabIndex={-1}
+      data-row
+      data-item={id}
+      data-selectable={select ? "" : undefined}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key.toLowerCase() === "x" && onSelect && singleKeyShortcutsEnabled()) {
+          e.preventDefault();
+          onSelect();
+        } else if (e.key === "Enter" && onOpen) {
+          e.preventDefault();
+          onOpen();
+        }
+      }}
+      className={cx(
+        "xos-rrow border-b border-border-subtle last:border-b-0 outline-none",
+        "hover:bg-bg-hover focus-visible:bg-bg-hover aria-selected:bg-bg-hover",
+        "focus-visible:ring-(length:--stroke-width-focus) focus-visible:ring-inset focus-visible:ring-focus-ring",
+      )}
+    >
+      {select && id !== undefined ? (
+        <span role="gridcell" className="xos-rrow-select inline-flex">
+          <input
+            type="checkbox"
+            tabIndex={-1}
+            className="xos-check-input"
+            aria-label={t("table.selectRow", { row: title })}
+            checked={isSelected === true}
+            onClick={(e) => {
+              e.stopPropagation();
+              select.toggle(id, e.shiftKey);
+            }}
+            onChange={() => undefined}
+          />
+        </span>
+      ) : null}
+      <span role="gridcell" className="xos-rrow-state inline-flex">
+        <StateIcon state={state} />
+        <span className="sr-only">{stateLabel}</span>
+      </span>
+      <span
+        role="gridcell"
+        data-column="key"
+        className="xos-rrow-key font-mono text-text-12 text-text-secondary"
+      >
+        {recordKey}
+      </span>
+      <span
+        role="gridcell"
+        data-column="title"
+        className="xos-rrow-title flex items-center gap-6 min-w-0"
+      >
+        {kind ? (
+          <RecordKindGlyph kind={kind} size={14} color="var(--color-text-secondary)" />
+        ) : null}
+        <span className="truncate" title={title}>
+          {title}
+        </span>
+      </span>
+      <span role="gridcell" className="xos-rrow-chips flex gap-4">
+        {chips}
+      </span>
+      {/* The next date has a column wide enough for a date and time; a longer translation ellipsizes
+          with the full text as its title instead of running under the owner (A59-008). */}
+      <span
+        role="gridcell"
+        className="xos-rrow-next flex items-center gap-4 min-w-0 text-text-12 text-text-secondary tabular-nums whitespace-nowrap"
+      >
+        {next ? (
+          <>
+            <Icon name="Calendar" size={14} />
+            <span className="truncate" title={next}>
+              {next}
+            </span>
+          </>
+        ) : null}
+      </span>
+      <span role="gridcell" data-column="owner" className="xos-rrow-owner">
+        {owner ? <Avatar name={owner} /> : null}
+      </span>
+      <span role="gridcell" className="xos-rrow-action flex justify-end">
+        {actionLabel ? (
+          <Button size="sm" onClick={onAction} {...(actionKey ? { shortcut: actionKey } : {})}>
+            {actionLabel}
+          </Button>
+        ) : null}
+      </span>
+    </div>
+  );
+}

package/src/Views/StatTile.tsx

@@ -0,0 +1,88 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useFormat, useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Money } from "../Forms/Forms.tsx";
+import { Sparkline } from "../Charts/Sparkline.tsx";
+import { type StatTileProps } from "./Views.types.ts";
+
+/**
+ * One headline number with its change and whether the change is good. Direction is an icon and a
+ * signed number as well as color; a blank value reads No value, never 0.
+ */
+export function StatTile({
+  label,
+  value,
+  format = "number",
+  delta,
+  deltaUnit,
+  deltaLabel,
+  goodWhen,
+  caption,
+  onDrill,
+  trend,
+}: StatTileProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const direction =
+    delta === undefined || delta === null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
+  const good =
+    goodWhen !== undefined &&
+    direction !== null &&
+    direction !== "flat" &&
+    (goodWhen === "up") === (direction === "up");
+  const bad = goodWhen !== undefined && direction !== null && direction !== "flat" && !good;
+  const figure =
+    format === "money" ? (
+      <Money amount={value} />
+    ) : value === null ? (
+      <span className="text-text-secondary">{t("chart.noValue")}</span>
+    ) : (
+      fmt.number(value)
+    );
+  return (
+    <section
+      aria-label={label}
+      className="flex flex-col gap-4 min-w-(--ui-stat-min) p-16 rounded-card border border-border-subtle bg-bg-raised"
+    >
+      <span className="text-text-12 font-medium text-text-secondary">{label}</span>
+      <strong className="text-heading-32 font-semibold tabular-nums">
+        {onDrill ? (
+          <button
+            type="button"
+            onClick={onDrill}
+            className="p-0 border-0 bg-transparent cursor-pointer text-inherit hover:underline"
+          >
+            {figure}
+          </button>
+        ) : (
+          figure
+        )}
+      </strong>
+      {direction !== null && delta !== null && delta !== undefined ? (
+        <span
+          className={cx(
+            "flex items-center gap-4 text-text-12 text-text-secondary",
+            good && "text-success-text",
+            bad && "text-danger-text",
+          )}
+        >
+          <Icon
+            name={direction === "up" ? "ArrowUp" : direction === "down" ? "ArrowDown" : "Minus"}
+            size={14}
+          />
+          <span className="tabular-nums">
+            {delta > 0 ? "+" : ""}
+            {fmt.number(delta)}
+            {deltaUnit ?? ""}
+          </span>
+          {deltaLabel ? <span className="text-text-secondary">{deltaLabel}</span> : null}
+        </span>
+      ) : null}
+      {trend && trend.length > 1 ? (
+        <Sparkline values={trend} label={t("stat.trend", { label })} />
+      ) : null}
+      {caption ? <span className="text-text-secondary">{caption}</span> : null}
+    </section>
+  );
+}

package/src/Views/TreeView.tsx

@@ -0,0 +1,161 @@
+import { useId, useRef, useState, type KeyboardEvent, type ReactElement } from "react";
+import { Direction } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { rovingIndex } from "../lib/hooks.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type FlatNode, type TreeNode, type TreeViewProps } from "./Views.types.ts";
+
+function flatten(
+  nodes: TreeNode[],
+  expanded: Set<string>,
+  depth = 0,
+  parent: string | null = null,
+  prefix = "",
+): FlatNode[] {
+  return nodes.flatMap((node, i) => {
+    const id = node.id ?? `${prefix}${i}`;
+    const hasChildren = (node.children?.length ?? 0) > 0;
+    const self: FlatNode = { node, id, depth, parent, hasChildren };
+    return hasChildren && expanded.has(id)
+      ? [self, ...flatten(node.children ?? [], expanded, depth + 1, id, `${id}.`)]
+      : [self];
+  });
+}
+
+function initialExpanded(nodes: TreeNode[], prefix = ""): string[] {
+  return nodes.flatMap((node, i) => {
+    const id = node.id ?? `${prefix}${i}`;
+    const kids = node.children ?? [];
+    return kids.length && node.expanded !== false ? [id, ...initialExpanded(kids, `${id}.`)] : [];
+  });
+}
+
+/**
+ * The scope tree. Arrow Up and Down move, Arrow Right expands or enters, Arrow Left collapses or
+ * returns to the parent, Home and End jump, Enter or Space selects.
+ */
+export function TreeView({ label, nodes, onSelect }: TreeViewProps): ReactElement {
+  const dir = Direction.useDirection();
+  const [expanded, setExpanded] = useState(() => new Set(initialExpanded(nodes)));
+  const visible = flatten(nodes, expanded);
+  const initialSelected = visible.find((f) => f.node.selected)?.id ?? null;
+  const [selected, setSelected] = useState<string | null>(initialSelected);
+  const [focused, setFocused] = useState<string>(initialSelected ?? visible[0]?.id ?? "");
+  const refs = useRef(new Map<string, HTMLElement>());
+  const base = useId().replace(/:/g, "");
+
+  const focus = (id: string) => {
+    setFocused(id);
+    refs.current.get(id)?.focus();
+  };
+  const toggle = (id: string, open: boolean) =>
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (open) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  const select = (item: FlatNode) => {
+    setSelected(item.id);
+    onSelect?.(item.node);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>, item: FlatNode, index: number) => {
+    if (e.target !== e.currentTarget) return;
+    const enter = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const leave = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const move = rovingIndex(e.key, index, visible.length, "vertical");
+    if (move !== null && e.key !== "ArrowLeft" && e.key !== "ArrowRight") {
+      e.preventDefault();
+      const target = visible[move];
+      if (target) focus(target.id);
+    } else if (e.key === enter) {
+      e.preventDefault();
+      if (item.hasChildren && !expanded.has(item.id)) toggle(item.id, true);
+      else if (item.hasChildren) {
+        const child = visible[index + 1];
+        if (child) focus(child.id);
+      }
+    } else if (e.key === leave) {
+      e.preventDefault();
+      if (item.hasChildren && expanded.has(item.id)) toggle(item.id, false);
+      else if (item.parent !== null) focus(item.parent);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      select(item);
+    }
+  };
+
+  const renderLevel = (parent: string | null) =>
+    visible
+      .map((item, index) => ({ item, index }))
+      .filter(({ item }) => item.parent === parent)
+      .map(({ item, index }) => {
+        const open = expanded.has(item.id);
+        return (
+          <li
+            key={item.id}
+            ref={(el) => {
+              if (el) refs.current.set(item.id, el);
+              else refs.current.delete(item.id);
+            }}
+            role="treeitem"
+            aria-labelledby={`${base}-${item.id}`}
+            aria-level={item.depth + 1}
+            aria-expanded={item.hasChildren ? open : undefined}
+            aria-selected={selected === item.id}
+            tabIndex={focused === item.id ? 0 : -1}
+            onKeyDown={(e) => onKeyDown(e, item, index)}
+            onFocus={(e) => {
+              if (e.target === e.currentTarget) setFocused(item.id);
+            }}
+            className="outline-none focus-visible:[&>div]:ring-(length:--stroke-width-focus) focus-visible:[&>div]:ring-focus-ring"
+          >
+            <div
+              onClick={() => {
+                setFocused(item.id);
+                select(item);
+                if (item.hasChildren) toggle(item.id, !open);
+              }}
+              className={cx(
+                "flex items-center gap-6 h-control-md pe-8 rounded-control cursor-pointer hover:bg-bg-hover",
+                selected === item.id && "bg-bg-hover",
+              )}
+              style={{
+                paddingInlineStart: `calc(var(--space-8) + ${item.depth} * var(--space-16))`,
+              }}
+            >
+              {item.hasChildren ? (
+                <span className="text-text-tertiary">
+                  <Icon name={open ? "ChevronDown" : "ChevronRight"} size={14} />
+                </span>
+              ) : (
+                <span className="inline-block w-(--icon-size-14)" />
+              )}
+              {item.node.icon ? (
+                <Icon name={item.node.icon} size={14} color="var(--color-text-secondary)" />
+              ) : null}
+              <span id={`${base}-${item.id}`}>{item.node.label}</span>
+              {item.node.meta ? (
+                <span className="ms-auto text-text-secondary">{item.node.meta}</span>
+              ) : null}
+            </div>
+            {item.hasChildren && open ? (
+              <ul role="group" className="m-0 p-0 list-none">
+                {renderLevel(item.id)}
+              </ul>
+            ) : null}
+          </li>
+        );
+      });
+
+  return (
+    <ul
+      role="tree"
+      aria-label={label}
+      className="w-(--ui-tree) max-w-full m-0 p-0 list-none box-border"
+    >
+      {renderLevel(null)}
+    </ul>
+  );
+}

package/src/Views/Views.tsx

@@ -0,0 +1,18 @@
+export {
+  type RecordRowProps,
+  type RecordListProps,
+  type ItemContextMenu,
+  type BoardProps,
+  type TreeNode,
+  type TreeViewProps,
+  type BulkActionBarProps,
+  type ActivityFeedItemProps,
+  type StatTileProps,
+} from "./Views.types.ts";
+export { RecordRow } from "./RecordRow.tsx";
+export { RecordList } from "./RecordList.tsx";
+export { Board } from "./Board.tsx";
+export { TreeView } from "./TreeView.tsx";
+export { BulkActionBar } from "./BulkActionBar.tsx";
+export { ActivityFeedItem } from "./ActivityFeedItem.tsx";
+export { StatTile } from "./StatTile.tsx";

package/src/Views/Views.types.ts

@@ -0,0 +1,99 @@
+import type {
+  ActivityFeedItemProps as ReferenceActivityFeedItemProps,
+  BoardProps as ReferenceBoardProps,
+  BulkActionBarProps as ReferenceBulkActionBarProps,
+  RecordListProps as ReferenceRecordListProps,
+  RecordRowProps as ReferenceRecordRowProps,
+  RecordState,
+  StatTileProps as ReferenceStatTileProps,
+  TreeNode as ReferenceTreeNode,
+  TreeViewProps as ReferenceTreeViewProps,
+} from "../types/reference";
+import type { ItemSelection } from "../lib/selection.ts";
+
+/**
+ * Right-click, Shift+F10 or the Context Menu key on an item (Section 11.7): its id, the pointer's
+ * point (null from the keyboard, when the menu opens at the item) and the element it opened on.
+ */
+export type ItemContextMenu = (
+  id: string,
+  at: { x: number; y: number } | null,
+  element: HTMLElement,
+) => void;
+
+export type RecordRowProps = ReferenceRecordRowProps & {
+  /**
+   * The row's id: its list selects it and opens its menu by this id, and hover cards find it
+   * (`data-item`). Rows of a selectable list need one.
+   */
+  id?: string;
+  /** X toggles selection of the focused row, when its list has no selection of its own. */
+  onSelect?: () => void;
+  /** Enter opens the record. */
+  onOpen?: () => void;
+};
+
+export type RecordListProps = ReferenceRecordListProps & {
+  /** Rows can be selected by id; each row needs an `id`. See useItemSelection. */
+  selection?: ItemSelection;
+  onItemContextMenu?: ItemContextMenu;
+};
+
+type ReferenceColumn = ReferenceBoardProps["columns"][number];
+
+export type BoardProps = Omit<ReferenceBoardProps, "columns"> & {
+  columns: (Omit<ReferenceColumn, "cards"> & {
+    /** A card's `id` is how the selection and menus name it; its key by default. */
+    cards: (ReferenceColumn["cards"][number] & { id?: string })[];
+  })[];
+  /** Cards can be selected by id. See useItemSelection. */
+  selection?: ItemSelection;
+  onItemContextMenu?: ItemContextMenu;
+  /** Called after a card moves to another column by drag or keyboard. */
+  onMove?: (cardKey: string, from: RecordState, to: RecordState) => void;
+  onAdd?: (state: RecordState) => void;
+  onOpen?: (cardKey: string) => void;
+};
+
+export interface TreeNode extends ReferenceTreeNode {
+  children?: TreeNode[];
+  /** Stable id; the label path by default. */
+  id?: string;
+}
+
+export type TreeViewProps = Omit<ReferenceTreeViewProps, "nodes"> & {
+  nodes: TreeNode[];
+  onSelect?: (node: TreeNode) => void;
+};
+
+export type BulkActionBarProps = Omit<ReferenceBulkActionBarProps, "actions"> & {
+  actions: { label: string; icon?: string; shortcut?: string; onSelect?: () => void }[];
+  onClear?: () => void;
+  /** Shows the overflow button, which calls it; without it the button is left out. */
+  onMore?: () => void;
+  /**
+   * Announces the count as it changes; true by default. Pass false when the selection already
+   * announces it (a selectable DataTable does), so screen readers hear it once.
+   */
+  announce?: boolean;
+};
+
+export type ActivityFeedItemProps = ReferenceActivityFeedItemProps & {
+  onReact?: (label: string) => void;
+};
+
+export type StatTileProps = ReferenceStatTileProps & {
+  onDrill?: () => void;
+  /** Recent values drawn as a sparkline; blanks are gaps. */
+  trend?: (number | null)[];
+};
+
+export type Card = BoardProps["columns"][number]["cards"][number];
+
+export interface FlatNode {
+  node: TreeNode;
+  id: string;
+  depth: number;
+  parent: string | null;
+  hasChildren: boolean;
+}

package/src/WhatsNew/README.md

@@ -0,0 +1,3 @@
+# WhatsNew
+
+WhatsNew reads from the published changelog inside the Help panel.

package/src/WhiteLabelPreview/README.md

@@ -0,0 +1,8 @@
+# WhiteLabelPreview
+
+WhiteLabelPreview renders the same screen under two tenant brands to prove theming is token-only.
+
+- `sample` is the screen rendered under every brand.
+- Each brand passes token overrides (`accent-default`, optional neutral tint, `radius-*`) and a theme; nothing else changes.
+- Every override must pass the ColorPicker contrast checks before it can be saved.
+- Both tenants in the preview are fictional.