@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,341 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type FocusEvent as ReactFocusEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  type Placement,
+} from '@floating-ui/react-dom';
+import { chain, mergeAriaDescribedby, mergeRefs, sanitizeId } from '../_internal/refs';
+import { overlayStack, useFloatingSurface } from '../_internal/overlay';
+import styles from './Tooltip.module.scss';
+
+/** Which side of the trigger the tooltip prefers. Floating UI auto-flips if it doesn't fit. */
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+
+/** Which edge of the tooltip aligns to the corresponding trigger edge. */
+export type TooltipAlign = 'start' | 'center' | 'end';
+
+export interface TooltipProps {
+  /**
+   * Tooltip body. ReactNode so you can include inline `<kbd>` or icons.
+   * If `null`, `undefined`, or `""`, the trigger renders as-is with no
+   * listeners and no `aria-describedby` — useful for conditional UIs.
+   */
+  content: ReactNode;
+
+  /**
+   * Exactly one React element that accepts a ref. Cloned to inject the
+   * tooltip's ref + listeners + aria. `<Button>` and raw `<button>` both
+   * qualify; a custom component without `forwardRef` does not.
+   */
+  children: ReactElement;
+
+  /** Preferred side. Default `'top'`. Auto-flips on collision via Floating UI. */
+  side?: TooltipSide;
+
+  /** Edge alignment. Default `'center'`. */
+  align?: TooltipAlign;
+
+  /** Gap in px between trigger and tooltip. Default `6` (room for the arrow). */
+  sideOffset?: number;
+
+  /**
+   * Delay in ms before hover opens the tooltip. Default `400`. Keyboard
+   * focus is always immediate (a11y). Close is always immediate.
+   */
+  delay?: number;
+
+  /**
+   * Controlled open state. Provide alongside `onOpenChange` to drive open
+   * externally. Omit both to let Tooltip own its state (the common case).
+   */
+  open?: boolean;
+
+  /** Fired whenever Tooltip wants to change open state. Required when `open` is provided. */
+  onOpenChange?: (open: boolean) => void;
+
+  /** Default open state for uncontrolled usage. Defaults to `false`. */
+  defaultOpen?: boolean;
+}
+
+// A tap on (or inside) one of these performs an action, so it must never be
+// hijacked to toggle a tooltip (#567). Ancestors count too: a Badge inside a
+// row link navigates.
+const INTERACTIVE =
+  'a[href], button, input, select, textarea, summary, label, audio[controls], video[controls], [contenteditable="true"], [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="combobox"], [role="slider"], [role="spinbutton"], [role="treeitem"], [role="gridcell"]';
+
+/**
+ * A finger. Pens are left on the hover path: most hover, and a contact-only
+ * pen fires pointerleave right after pointerup, which would snap a
+ * tap-opened tooltip shut.
+ */
+function isTap(e: { pointerType: string }): boolean {
+  return e.pointerType === 'touch';
+}
+
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest(INTERACTIVE) !== null;
+}
+
+/** Default hover/focus open delay (ms). Exported for tests only; not public API. */
+export const TOOLTIP_DEFAULT_DELAY = 400;
+
+/**
+ * Small floating label anchored to a single trigger, opening on hover or keyboard focus with a directional arrow.
+ * @see docs/components/Tooltip.md
+ */
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  sideOffset = 6,
+  delay = TOOLTIP_DEFAULT_DELAY,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+}: TooltipProps) {
+  if (!isValidElement(children)) {
+    throw new Error('<Tooltip> requires exactly one React element child.');
+  }
+
+  const isControlled = controlledOpen !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = isControlled ? (controlledOpen as boolean) : uncontrolled;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      onOpenChange?.(next);
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const arrowRef = useRef<HTMLSpanElement | null>(null);
+  const reactId = useId();
+  const tooltipId = `tooltip-${sanitizeId(reactId)}`;
+  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const placement: Placement = (align === 'center' ? side : `${side}-${align}`) as Placement;
+
+  const {
+    refs,
+    floatingStyles,
+    placement: resolvedPlacement,
+    middlewareData,
+  } = useFloating({
+    open,
+    placement,
+    transform: false,
+    middleware: [offset(sideOffset), flip(), shift({ padding: 8 }), arrow({ element: arrowRef })],
+    whileElementsMounted: autoUpdate,
+    elements: { reference: triggerRef.current },
+  });
+
+  const resolvedSide = resolvedPlacement.split('-')[0] as TooltipSide;
+  const staticSide = ({ top: 'bottom', bottom: 'top', left: 'right', right: 'left' } as const)[
+    resolvedSide
+  ];
+
+  const cancelPendingOpen = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => cancelPendingOpen, [cancelPendingOpen]);
+
+  const handlePointerEnter = useCallback(
+    (e: ReactPointerEvent) => {
+      // Touch fires enter/leave around every tap; that is not hover. Taps are
+      // handled in handlePointerUp.
+      if (e.pointerType === 'touch') return;
+      cancelPendingOpen();
+      if (delay <= 0) {
+        setOpen(true);
+        return;
+      }
+      openTimerRef.current = setTimeout(() => {
+        openTimerRef.current = null;
+        setOpen(true);
+      }, delay);
+    },
+    [cancelPendingOpen, delay, setOpen],
+  );
+
+  const handlePointerLeave = useCallback(
+    (e: ReactPointerEvent) => {
+      if (e.pointerType === 'touch') return;
+      cancelPendingOpen();
+      setOpen(false);
+    },
+    [cancelPendingOpen, setOpen],
+  );
+
+  const handleFocus = useCallback(
+    (e: ReactFocusEvent<HTMLElement>) => {
+      // `:focus-visible` gate: only open on keyboard focus, not mouse focus
+      // following a click. Falls open if matches() is unavailable or throws
+      // (jsdom selector parsing has historically been spotty).
+      const node = e.currentTarget;
+      let focusVisible = true;
+      try {
+        if (typeof node.matches === 'function') {
+          focusVisible = node.matches(':focus-visible');
+        }
+      } catch {
+        focusVisible = true;
+      }
+      if (!focusVisible) return;
+      cancelPendingOpen();
+      setOpen(true);
+    },
+    [cancelPendingOpen, setOpen],
+  );
+
+  // Tap to toggle on NON-interactive triggers only (#567): touch users have no
+  // hover, so without this a RelativeTime / IconTile tooltip is unreachable.
+  const handlePointerUp = useCallback(
+    (e: ReactPointerEvent) => {
+      if (!isTap(e) || isInteractiveTarget(e.target)) return;
+      cancelPendingOpen();
+      setOpen(!open);
+    },
+    [open, cancelPendingOpen, setOpen],
+  );
+
+  const handleBlur = useCallback(
+    (_e: ReactFocusEvent<HTMLElement>) => {
+      cancelPendingOpen();
+      setOpen(false);
+    },
+    [cancelPendingOpen, setOpen],
+  );
+
+  // Document-level pointerdown: close any open tooltip on click anywhere.
+  // Capture phase so a click on a button-like element that also unmounts the
+  // tooltip's host (e.g., navigating away) still fires.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      // A tap on a tap-toggling trigger is handled by its own pointerup —
+      // closing here would make the second tap re-open instead of close.
+      if (
+        isTap(e) &&
+        e.target instanceof Node &&
+        triggerRef.current?.contains(e.target) &&
+        !isInteractiveTarget(e.target)
+      ) {
+        return;
+      }
+      cancelPendingOpen();
+      setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [open, cancelPendingOpen, setOpen]);
+
+  // Register as an open floating surface so a host Modal/Drawer yields the
+  // Escape that dismisses this tooltip (#281). The host's capture Escape
+  // listener runs first (it opened first), so `hasOpenFloating()` — not
+  // `consumeEscape` alone — is what actually saves the host on this press.
+  useFloatingSurface(open);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        // WCAG 1.4.13: Escape dismisses the tooltip. preventDefault + consume
+        // (contract symmetry with the other floating surfaces) so a host that
+        // already ran its listener still yields the press (the reverse-order
+        // fallback; the registration above covers the common order).
+        e.preventDefault();
+        overlayStack.consumeEscape(e);
+        cancelPendingOpen();
+        setOpen(false);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [open, cancelPendingOpen, setOpen]);
+
+  const isEmpty = content == null || content === '';
+  const childProps = children.props as {
+    ref?: Ref<HTMLElement>;
+    onPointerEnter?: (e: ReactPointerEvent) => void;
+    onPointerLeave?: (e: ReactPointerEvent) => void;
+    onPointerUp?: (e: ReactPointerEvent) => void;
+    onFocus?: (e: ReactFocusEvent<HTMLElement>) => void;
+    onBlur?: (e: ReactFocusEvent<HTMLElement>) => void;
+    'aria-describedby'?: string;
+  };
+
+  if (isEmpty) {
+    return cloneElement(children, {
+      ref: mergeRefs(triggerRef, childProps.ref),
+    } as object);
+  }
+
+  const trigger = cloneElement(children, {
+    ref: mergeRefs(triggerRef, childProps.ref),
+    'aria-describedby': open
+      ? mergeAriaDescribedby(childProps['aria-describedby'], tooltipId)
+      : childProps['aria-describedby'],
+    onPointerEnter: chain(childProps.onPointerEnter, handlePointerEnter),
+    onPointerLeave: chain(childProps.onPointerLeave, handlePointerLeave),
+    onPointerUp: chain(childProps.onPointerUp, handlePointerUp),
+    onFocus: chain(childProps.onFocus, handleFocus),
+    onBlur: chain(childProps.onBlur, handleBlur),
+  } as object);
+
+  const arrowXY = middlewareData.arrow;
+
+  return (
+    <>
+      {trigger}
+      {open &&
+        createPortal(
+          <div
+            ref={refs.setFloating}
+            id={tooltipId}
+            role="tooltip"
+            data-side={resolvedSide}
+            style={floatingStyles}
+            className={styles.content}
+          >
+            {content}
+            <span
+              ref={arrowRef}
+              aria-hidden="true"
+              className={styles.arrow}
+              style={{
+                left: typeof arrowXY?.x === 'number' ? `${arrowXY.x}px` : undefined,
+                top: typeof arrowXY?.y === 'number' ? `${arrowXY.y}px` : undefined,
+                [staticSide]: '-4px',
+              }}
+            />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip';

package/src/components/TopBar/TopBar.module.scss

@@ -0,0 +1,235 @@
+@use '../../styles/mixins' as *;
+@use './TopBar.tokens';
+
+// ─── Root ───────────────────────────────────────────────────────────────
+// stylelint-disable property-disallowed-list -- TopBar is a layout-owning
+// primitive (Hard rule 4 exception). Like <Modal>, <Drawer>, <Page>, <Rail>,
+// the top bar owns its OWN height + padding + sticky positioning because
+// that IS its job as a top-bar chrome. The consumer chooses WHERE the bar
+// lives (typically a CSS-grid app shell) by styling its parent; the bar
+// itself fills the available inline space.
+.topBar {
+  position: sticky;
+  top: 0;
+  z-index: var(--topbar-z-index);
+  height: var(--topbar-height);
+  padding: 0 var(--topbar-padding-x);
+  background: var(--topbar-bg);
+  border-bottom: var(--topbar-border-width) solid var(--topbar-border-color);
+  display: flex;
+  align-items: center;
+  gap: var(--topbar-gap);
+}
+// stylelint-enable property-disallowed-list
+
+// ─── Start / End clusters ───────────────────────────────────────────────
+// stylelint-disable property-disallowed-list -- Start/End are TopBar's
+// internal layout regions: Start flex-grows so End is pushed to the right
+// edge with no spacer. Same rule-4 exception as the bar itself.
+.start {
+  display: flex;
+  align-items: center;
+  gap: var(--topbar-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.end {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+// stylelint-enable property-disallowed-list
+
+// ─── Search ─────────────────────────────────────────────────────────────
+// stylelint-disable property-disallowed-list -- search field needs a max
+// width so it doesn't stretch across an entire wide viewport, and a
+// min-width: 0 so it can shrink inside the Start cluster's flex row.
+.search {
+  --kbd-bg: var(--topbar-search-kbd-bg);
+
+  display: flex;
+  align-items: center;
+  gap: var(--topbar-search-gap);
+  height: var(--topbar-search-height);
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- intrinsic 100% of the available column
+  width: 100%;
+  max-width: var(--topbar-search-max-width);
+  min-width: 0;
+  padding: 0 var(--topbar-search-padding-x);
+  background: var(--topbar-search-bg);
+  border-radius: var(--topbar-search-radius);
+}
+// stylelint-enable property-disallowed-list
+
+// Offset pulls the ring inward by 1px so it sits ON the surface edge instead
+// of outside it.
+.search:focus-within {
+  @include focus-ring(var(--topbar-search-ring-focus), $offset: -1px);
+}
+
+.searchIcon {
+  width: var(--topbar-search-icon-size);
+  height: var(--topbar-search-icon-size);
+  color: var(--topbar-search-icon-fg);
+  flex-shrink: 0;
+}
+
+// stylelint-disable property-disallowed-list -- the input needs flex:1 so it
+// fills the remaining width inside the .search wrapper between the icon and
+// the kbd hint. It is NOT a layout-owning region — it is the inner content
+// of the search pill.
+.searchInput {
+  flex: 1 1 auto;
+  min-width: 0;
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- transparent so the wrapper's bg shows through
+  background: transparent;
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- native input border reset; the wrapper provides chrome
+  border: 0;
+  color: var(--topbar-search-fg);
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- inherit page font sizing
+  font: inherit;
+}
+// stylelint-enable property-disallowed-list
+
+.searchInput:focus {
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- the wrapper handles the visible focus ring (focus-within)
+  outline: none;
+}
+
+.searchInput::placeholder {
+  color: var(--topbar-search-placeholder-fg);
+}
+
+// ─── Search results panel (combobox mode) ──────────────────────────────
+// stylelint-disable property-disallowed-list -- portalled floating surface:
+// Floating UI positions it; z-index and viewport-bounded geometry are its
+// job, exactly like Select's `.listbox`. The geometry vars are written by
+// TopBarSearchPanel's size middleware; fallbacks cover the first frame.
+.results {
+  z-index: var(--topbar-results-z);
+  box-sizing: border-box;
+  min-width: min(
+    var(--topbar-results-min-width, 0px),
+    var(--topbar-results-available-width, 100vw)
+  );
+  max-width: min(var(--topbar-results-max-width), var(--topbar-results-available-width, 100vw));
+  max-height: min(var(--topbar-results-max-height), var(--topbar-results-available-height, 100vh));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--topbar-results-padding);
+  background: var(--topbar-results-bg);
+  border: var(--border-width) solid var(--topbar-results-border-color);
+  border-radius: var(--topbar-results-radius);
+  box-shadow: var(--topbar-results-shadow);
+}
+// stylelint-enable property-disallowed-list
+
+.results[data-in-overlay] {
+  z-index: var(--z-overlay-floating);
+}
+
+// #685: the tour's current target is INSIDE this surface — drop just under the
+// scrim (--z-tour) so only the target is lit, not the whole panel.
+.results[data-in-overlay]:has([data-tour-current-target]) {
+  z-index: calc(var(--z-tour) - 1);
+}
+
+.groupLabel {
+  padding: var(--topbar-results-group-label-padding);
+  color: var(--topbar-results-group-label-fg);
+  font-size: var(--topbar-results-group-label-font-size);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--topbar-results-option-gap);
+  padding: var(--topbar-results-option-padding);
+  border-radius: var(--topbar-results-option-radius);
+  color: var(--topbar-results-option-fg);
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- link rows look like the div rows
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.optionActive {
+  background: var(--topbar-results-option-bg-active);
+}
+
+// stylelint-disable property-disallowed-list -- row internals: the label
+// takes the remaining width so it truncates; icon and meta keep their size.
+.optionIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--topbar-results-icon-fg);
+}
+
+.optionLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.optionMeta {
+  flex-shrink: 0;
+  color: var(--topbar-results-meta-fg);
+  font-size: var(--topbar-results-meta-font-size);
+}
+// stylelint-enable property-disallowed-list
+
+.footer {
+  border-top: var(--border-width) solid var(--topbar-results-footer-border-color);
+}
+
+.status {
+  padding: var(--topbar-results-option-padding);
+  color: var(--topbar-results-status-fg);
+  font-size: var(--topbar-results-status-font-size);
+}
+
+// ─── IconButton + notification indicator ────────────────────────────────
+// stylelint-disable property-disallowed-list -- icon button needs an
+// explicit width + position:relative so the indicator dot (absolute-
+// positioned in its upper-right) has an anchor. The dot itself is
+// absolutely positioned, which Rule 4 normally bans on components — but
+// it's a topbar-scoped visual marker, not a layout container, so the
+// exception is justified inline.
+.iconButton {
+  width: var(--topbar-icon-button-size);
+  height: var(--topbar-icon-button-size);
+  border-radius: var(--topbar-icon-button-radius);
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  top: var(--topbar-indicator-offset-top);
+  right: var(--topbar-indicator-offset-right);
+  width: var(--topbar-indicator-size);
+  height: var(--topbar-indicator-size);
+  border-radius: var(--radius-full);
+  border: var(--topbar-indicator-border-width) solid var(--topbar-indicator-border-color);
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- the dot is decorative; clicks pass through to the button beneath
+  pointer-events: none;
+}
+// stylelint-enable property-disallowed-list
+
+.indicatorDanger {
+  background: var(--topbar-indicator-bg-danger);
+}
+
+.indicatorWarning {
+  background: var(--topbar-indicator-bg-warning);
+}
+
+.indicatorInfo {
+  background: var(--topbar-indicator-bg-info);
+}
+
+.indicatorAccent {
+  background: var(--topbar-indicator-bg-accent);
+}

package/src/components/TopBar/TopBar.tokens.scss

@@ -0,0 +1,79 @@
+// TopBar.tokens.scss — Component-scoped tokens for <TopBar>. Each token
+// defaults to the primitive that the SCSS would otherwise use directly.
+// Consumers can rebind any of these at a higher level
+// (`.theme-foo :root { --topbar-bg: … }`) to retheme the bar without
+// forking its module.scss.
+:root {
+  // ─── Bar chrome ───────────────────────────────────────────────────────
+  --topbar-height: 56px;
+  --topbar-bg: var(--color-bg);
+  --topbar-border-color: var(--color-border);
+  --topbar-border-width: var(--border-width);
+  --topbar-padding-x: var(--space-4);
+  --topbar-gap: var(--space-3);
+  --topbar-z-index: 5;
+
+  // ─── Search ───────────────────────────────────────────────────────────
+  --topbar-search-max-width: 420px;
+  --topbar-search-height: 32px;
+  --topbar-search-bg: var(--color-bg-muted);
+
+  // Kbd's default fill is bg-muted, the same as the field; lift the hint chip
+  // back off it.
+  --topbar-search-kbd-bg: var(--color-bg);
+  --topbar-search-fg: var(--color-fg);
+  --topbar-search-placeholder-fg: var(--color-fg-muted);
+  --topbar-search-radius: var(--radius-md);
+  --topbar-search-padding-x: var(--space-3);
+  --topbar-search-gap: var(--space-2);
+  --topbar-search-icon-fg: var(--color-fg-muted);
+  --topbar-search-icon-size: 14px;
+  --topbar-search-ring-focus: var(--ring-accent);
+
+  // ─── Search results panel (combobox mode) ─────────────────────────────
+  --topbar-results-max-width: 460px;
+  --topbar-results-max-height: 360px;
+  --topbar-results-bg: var(--color-bg);
+  --topbar-results-border-color: var(--color-border);
+  --topbar-results-radius: var(--radius-md);
+  --topbar-results-shadow: var(--shadow-lg);
+  --topbar-results-padding: var(--space-1);
+  --topbar-results-z: var(--z-popover);
+  --topbar-results-group-label-padding: var(--space-2);
+  --topbar-results-group-label-font-size: var(--font-size-xs);
+  --topbar-results-group-label-fg: var(--color-fg-muted);
+  --topbar-results-option-gap: var(--space-2);
+  --topbar-results-option-padding: var(--space-2);
+  --topbar-results-option-radius: var(--radius-sm);
+  --topbar-results-option-fg: var(--color-fg);
+  --topbar-results-option-bg-active: var(--color-bg-muted);
+  --topbar-results-icon-fg: var(--color-fg-muted);
+  --topbar-results-meta-fg: var(--color-fg-muted);
+  --topbar-results-meta-font-size: var(--font-size-xs);
+  --topbar-results-status-fg: var(--color-fg-muted);
+  --topbar-results-status-font-size: var(--font-size-sm);
+  --topbar-results-footer-border-color: var(--color-border);
+
+  // ─── Icon button ──────────────────────────────────────────────────────
+  --topbar-icon-button-size: 32px;
+  --topbar-icon-button-radius: var(--radius-md);
+
+  // ─── Notification dot ─────────────────────────────────────────────────
+  --topbar-indicator-size: 8px;
+  --topbar-indicator-offset-top: 6px;
+  --topbar-indicator-offset-right: 6px;
+  --topbar-indicator-bg-danger: var(--color-danger);
+
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // warning uses --color-warning-strong; the bare --color-warning measures 2.14:1 here, below
+  // WCAG AA for text and below 1.4.11's 3:1 for a graphical object. See #481.
+  --topbar-indicator-bg-warning: var(--color-warning-strong);
+  --topbar-indicator-bg-info: var(--color-info);
+  --topbar-indicator-bg-accent: var(--color-accent);
+
+  // Same as bar bg so the ring around the dot reads as a tiny halo
+  // separating it from the icon underneath.
+  --topbar-indicator-border-color: var(--topbar-bg);
+  --topbar-indicator-border-width: 1.5px;
+}