@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/TopBar/TopBarSearchPanel.tsx

@@ -0,0 +1,268 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type MouseEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { autoUpdate, flip, offset, shift, size, useFloating } from '@floating-ui/react-dom';
+import clsx from 'clsx';
+import { useTranslation } from '../../i18n';
+import { LiveRegion } from '../LiveRegion';
+import { mergeRefs } from '../_internal/refs';
+import { isTourHeld, overlayStack, useFloatingSurface } from '../_internal/overlay';
+import type { TopBarSearchFooterAction, TopBarSearchItem } from './TopBarSearch';
+import styles from './TopBar.module.scss';
+
+/** A row in the ↑/↓ cycle: a result item or the trailing footer action. */
+export type SearchOption =
+  | { kind: 'item'; item: TopBarSearchItem; groupIndex: number }
+  | { kind: 'footer'; action: TopBarSearchFooterAction };
+
+/** A non-empty group with the flat index of its first option. */
+export interface PanelGroup {
+  /** Group heading text. */
+  label: string;
+  /** Index of the group in the consumer's `results`. */
+  groupIndex: number;
+  /** Flat option index of the group's first item. */
+  start: number;
+  /** The group's rows. */
+  items: TopBarSearchItem[];
+}
+
+export interface TopBarSearchPanelProps {
+  /** listbox id (input's `aria-controls`); option ids derive from it. */
+  id: string;
+  /** Render the portalled listbox. The component itself stays mounted in combobox mode. */
+  shown: boolean;
+  /** The listbox's accessible name (the input's name). */
+  label: string;
+  /** Non-empty groups to render. */
+  groups: PanelGroup[];
+  /** Flat ↑/↓ cycle: items, then the footer. */
+  options: SearchOption[];
+  /** Index of the highlighted option, or -1. */
+  activeIndex: number;
+  /** Called when hover moves the highlight. */
+  onActivate: (index: number) => void;
+  /** Called when an option is clicked. */
+  onChoose: (option: SearchOption) => void;
+  /** The search pill — Floating UI reference. */
+  anchorRef: RefObject<HTMLDivElement | null>;
+  /** The pill sits inside a Modal/Drawer, so the panel elevates above it. Probed by the parent (a child's layout effect runs before the parent's ref attaches). */
+  inOverlay: boolean;
+  /** Close request (Escape). */
+  onClose: () => void;
+  /** Loading row + `aria-busy`. */
+  loading: boolean;
+  /** Empty row content, or `null` for no empty row. */
+  emptyMessage: ReactNode | null;
+  /** Live-region text ('' when the panel is hidden). */
+  announcement: string;
+  /** Identifies the result set; a change re-announces even when the text is identical. */
+  announceKey: string;
+}
+
+export const optionId = (listboxId: string, index: number) => `${listboxId}-opt-${index}`;
+
+/** Internal: the combobox results panel of `<TopBar.Search>`. */
+export function TopBarSearchPanel({
+  id,
+  shown,
+  label,
+  groups,
+  options,
+  activeIndex,
+  onActivate,
+  onChoose,
+  anchorRef,
+  inOverlay,
+  onClose,
+  loading,
+  emptyMessage,
+  announcement,
+  announceKey,
+}: TopBarSearchPanelProps) {
+  const t = useTranslation();
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  // #274/#280: hosts (Modal/Drawer) yield Escape while the panel is shown, and
+  // a deeper surface gets the press before us.
+  const floatingId = useFloatingSurface(shown);
+
+  // Latest onClose without resubscribing the document listener on every render.
+  const onCloseRef = useRef(onClose);
+  useLayoutEffect(() => {
+    onCloseRef.current = onClose;
+  });
+
+  useEffect(() => {
+    if (!shown) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || !overlayStack.isTopFloating(floatingId)) return;
+      e.preventDefault(); // also stops the native <input type="search"> clear
+      overlayStack.consumeEscape(e);
+      onCloseRef.current();
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [shown, floatingId]);
+
+  // Outside press closes — but only once focus is already outside the field.
+  // While the input has focus, blur owns the decision (and a press that keeps
+  // focus, mousedown-prevented, keeps the panel open as before). This covers a
+  // tour holding the panel (#684): the hold swallowed the blur, so without
+  // this a later outside press would leave it stuck open.
+  useEffect(() => {
+    if (!shown) return;
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      const panel = panelRef.current;
+      const anchor = anchorRef.current;
+      if (panel?.contains(target) || anchor?.contains(target)) return;
+      if (anchor?.contains(document.activeElement)) return;
+      if (isTourHeld(target, panel, anchor)) return;
+      onCloseRef.current();
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [shown, anchorRef]);
+
+  const { refs, floatingStyles, isPositioned } = useFloating({
+    open: shown,
+    placement: 'bottom-start',
+    // fixed + portal: escapes the sticky bar and any overflow/transform ancestor.
+    strategy: 'fixed',
+    transform: false,
+    middleware: [
+      offset(4),
+      flip(),
+      shift({ padding: 8 }),
+      // Publish geometry as CSS vars; `.results` turns them into min width
+      // (never narrower than the pill) and viewport-bounded max width/height.
+      size({
+        padding: 8,
+        apply({ rects, availableWidth, availableHeight, elements }) {
+          const s = elements.floating.style;
+          s.setProperty('--topbar-results-min-width', `${rects.reference.width}px`);
+          s.setProperty('--topbar-results-available-width', `${Math.max(0, availableWidth)}px`);
+          s.setProperty('--topbar-results-available-height', `${Math.max(0, availableHeight)}px`);
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+  const { setReference } = refs;
+  // Passive, not layout: a child's layout effect runs before the parent <div>'s ref is attached.
+  useEffect(() => {
+    if (shown) setReference(anchorRef.current);
+  }, [shown, setReference, anchorRef]);
+
+  // Focus stays in the input, so keep the keyboard-active row visible by hand.
+  useEffect(() => {
+    if (!shown || !isPositioned) return;
+    panelRef.current?.querySelector('[data-active]')?.scrollIntoView?.({ block: 'nearest' });
+  }, [shown, isPositioned, activeIndex]);
+
+  const row = (
+    key: string,
+    index: number,
+    item: { label: ReactNode; meta?: ReactNode; icon?: ReactNode; href?: string },
+    className?: string,
+  ) => {
+    const option = options[index]!;
+    const active = index === activeIndex;
+    const Tag = item.href ? 'a' : 'div';
+    return (
+      <Tag
+        key={key}
+        id={optionId(id, index)}
+        role="option"
+        aria-selected={active}
+        href={item.href}
+        // Rows are never tab stops: focus stays in the input (activedescendant).
+        tabIndex={item.href ? -1 : undefined}
+        data-active={active ? '' : undefined}
+        className={clsx(styles.option, active && styles.optionActive, className)}
+        // mousemove, not mouseenter: rows scrolling under a resting pointer must not steal the highlight.
+        onMouseMove={() => {
+          if (!active) onActivate(index);
+        }}
+        onClick={(e: MouseEvent) => {
+          // Cmd/Ctrl/Shift-click on a link opens it the browser's way.
+          if (item.href && (e.metaKey || e.ctrlKey || e.shiftKey)) return;
+          e.preventDefault();
+          onChoose(option);
+        }}
+      >
+        {item.icon != null && (
+          <span aria-hidden="true" className={styles.optionIcon}>
+            {item.icon}
+          </span>
+        )}
+        <span className={styles.optionLabel}>{item.label}</span>
+        {item.meta != null && <span className={styles.optionMeta}>{item.meta}</span>}
+      </Tag>
+    );
+  };
+
+  const footerIndex = options.findIndex((o) => o.kind === 'footer');
+  const footer =
+    footerIndex >= 0 ? (options[footerIndex] as Extract<SearchOption, { kind: 'footer' }>) : null;
+
+  return (
+    <>
+      <LiveRegion announceKey={announceKey}>{announcement}</LiveRegion>
+      {shown &&
+        createPortal(
+          <div
+            ref={mergeRefs<HTMLDivElement>(panelRef, refs.setFloating)}
+            style={floatingStyles}
+            data-in-overlay={inOverlay ? '' : undefined}
+            id={id}
+            role="listbox"
+            aria-label={label}
+            className={styles.results}
+            // Keep focus (and the caret) in the input on any press inside the panel.
+            onMouseDown={(e) => e.preventDefault()}
+            aria-busy={loading || undefined}
+          >
+            {groups.map((g) => (
+              <div
+                key={g.groupIndex}
+                role="group"
+                aria-labelledby={`${id}-g${g.groupIndex}`}
+                className={styles.group}
+              >
+                <div
+                  id={`${id}-g${g.groupIndex}`}
+                  role="presentation"
+                  className={styles.groupLabel}
+                >
+                  {g.label}
+                </div>
+                {g.items.map((item, i) => row(item.id, g.start + i, item))}
+              </div>
+            ))}
+            {loading && (
+              <div role="presentation" className={styles.status}>
+                {/* aria-hidden: the live region announces this same text. */}
+                <span aria-hidden="true">{t('topBar.searchLoading')}</span>
+              </div>
+            )}
+            {emptyMessage != null && (
+              <div role="presentation" className={styles.status}>
+                <span aria-hidden="true">{emptyMessage}</span>
+              </div>
+            )}
+            {footer && row('footer', footerIndex, footer.action, styles.footer)}
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/components/TopBar/TopBarStart.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './TopBar.module.scss';
+
+/**
+ * Props for `<TopBar.Start>`. Inherits the full `<div>` HTML attribute set;
+ * use the standard `className` / `style` / event-handler props as usual.
+ */
+export type TopBarStartProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Left-side cluster of a `<TopBar>` that takes the remaining bar width.
+ * @see docs/components/TopBar.md
+ */
+export const TopBarStart = forwardRef<HTMLDivElement, TopBarStartProps>(function TopBarStart(
+  { className, ...props },
+  ref,
+) {
+  return <div ref={ref} className={clsx(styles.start, className)} {...props} />;
+});

package/src/components/TopBar/index.ts

@@ -0,0 +1,11 @@
+export { TopBar } from './TopBar';
+export type { TopBarProps, TopBarElement } from './TopBar';
+export type { TopBarStartProps } from './TopBarStart';
+export type { TopBarEndProps } from './TopBarEnd';
+export type {
+  TopBarSearchProps,
+  TopBarSearchGroup,
+  TopBarSearchItem,
+  TopBarSearchFooterAction,
+} from './TopBarSearch';
+export type { TopBarIconButtonProps, TopBarIndicatorTone } from './TopBarIconButton';

package/src/components/Tour/Spotlight.tsx

@@ -0,0 +1,121 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
+import { autoUpdate } from '@floating-ui/react-dom';
+import styles from './Tour.module.scss';
+
+export interface Hole {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+/** Padded target rect, or a zero-size hole at the viewport center (centered / waiting steps). */
+export function holeFor(rect: DOMRect | null, padding: number, vw: number, vh: number): Hole {
+  if (!rect) return { top: vh / 2, left: vw / 2, width: 0, height: 0 };
+  return {
+    top: rect.top - padding,
+    left: rect.left - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2,
+  };
+}
+
+function sameHole(a: Hole, b: Hole): boolean {
+  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
+
+function measure(target: HTMLElement | null, padding: number): Hole {
+  return holeFor(
+    target?.getBoundingClientRect() ?? null,
+    padding,
+    window.innerWidth,
+    window.innerHeight,
+  );
+}
+
+export interface SpotlightProps {
+  /** Resolved target; `null` collapses the cutout to the viewport center. */
+  target: HTMLElement | null;
+  /** Px of cutout around the target. */
+  padding: number;
+  /** Let pointer events through the cutout to the target. */
+  interactive: boolean;
+  state: 'open' | 'closed';
+  /** Enable geometry transitions (off until the first placement). */
+  glide: boolean;
+}
+
+/**
+ * Modal-mode scrim for `<Tour>` (internal, not exported from the package).
+ * A cutout div whose huge box-shadow dims the page, plus four transparent
+ * blockers framing it that swallow clicks — box-shadow isn't hit-testable,
+ * so the blockers are what actually makes the page non-interactive. The
+ * cutout blocks too unless the step is `interactive`.
+ */
+export function Spotlight({ target, padding, interactive, state, glide }: SpotlightProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [hole, setHole] = useState<Hole>(() => measure(target, padding));
+
+  useLayoutEffect(() => {
+    const update = () => {
+      const next = measure(target, padding);
+      setHole((prev) => (sameHole(prev, next) ? prev : next));
+    };
+    update();
+    if (!target || !ref.current) {
+      window.addEventListener('resize', update);
+      return () => window.removeEventListener('resize', update);
+    }
+    // Enter animations/transitions (e.g. a menu sliding in) move the target
+    // without any scroll/resize, so re-measure when one ends (#685).
+    document.addEventListener('animationend', update, true);
+    document.addEventListener('transitionend', update, true);
+    // Tracks scroll (any ancestor), resize and layout shift of the target.
+    const stop = autoUpdate(target, ref.current, update);
+    return () => {
+      stop();
+      document.removeEventListener('animationend', update, true);
+      document.removeEventListener('transitionend', update, true);
+    };
+  }, [target, padding]);
+
+  const right = hole.left + hole.width;
+  const bottom = hole.top + hole.height;
+  const blockers: CSSProperties[] = [
+    { top: 0, left: 0, right: 0, height: Math.max(0, hole.top) },
+    { top: bottom, left: 0, right: 0, bottom: 0 },
+    { top: hole.top, left: 0, width: Math.max(0, hole.left), height: hole.height },
+    { top: hole.top, left: right, right: 0, height: hole.height },
+  ];
+
+  return (
+    <>
+      <div
+        ref={ref}
+        aria-hidden="true"
+        data-tour-spotlight=""
+        data-state={state}
+        data-interactive={interactive ? '' : undefined}
+        data-glide={glide ? '' : undefined}
+        className={styles.spotlight}
+        style={{
+          position: 'fixed',
+          top: hole.top,
+          left: hole.left,
+          width: hole.width,
+          height: hole.height,
+        }}
+      />
+      {blockers.map((b, i) => (
+        <div
+          key={i}
+          aria-hidden="true"
+          data-tour-blocker=""
+          data-state={state}
+          className={styles.blocker}
+          style={{ position: 'fixed', ...b }}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/Tour/Tour.module.scss

@@ -0,0 +1,210 @@
+@use '../../styles/mixins' as *;
+@use './Tour.tokens';
+
+// Geometry (position / top / left / width / height / translate) of the
+// spotlight, blockers and card is set INLINE from Spotlight.tsx / Tour.tsx:
+// they are viewport overlays positioned against another element, like
+// Popover's Floating UI styles. This file owns visuals and motion only.
+
+// ---------- Spotlight + blockers (modal mode) ----------
+
+.spotlight {
+  z-index: var(--tour-z);
+  border-radius: var(--tour-spotlight-radius);
+  box-shadow: 0 0 0 var(--tour-scrim-spread) var(--tour-scrim);
+  pointer-events: auto;
+  opacity: var(--tour-opacity-visible);
+  transition: opacity var(--tour-fade);
+
+  @starting-style {
+    opacity: var(--tour-opacity-hidden);
+  }
+}
+
+// Glide only after the first placement (Tour sets data-glide), so the cutout
+// doesn't sweep in from the viewport center on open.
+.spotlight[data-glide] {
+  transition:
+    opacity var(--tour-fade),
+    top var(--tour-glide),
+    left var(--tour-glide),
+    width var(--tour-glide),
+    height var(--tour-glide);
+}
+
+// Interactive step: clicks pass through the cutout to the target, and waves
+// grow outward from the cutout edge to say "you can click this" (#683). The spotlight is position: fixed inline, so the
+// mixin's pseudo-elements anchor to it.
+.spotlight[data-interactive] {
+  pointer-events: none;
+
+  @include attention-waves(
+    var(--tour-wave-color),
+    var(--tour-wave-duration),
+    var(--tour-wave-delay),
+    var(--tour-wave-reach),
+    var(--tour-wave-edge),
+    var(--tour-wave-glow),
+    var(--tour-spotlight-radius)
+  );
+}
+
+.blocker {
+  z-index: var(--tour-z);
+  pointer-events: auto;
+}
+
+.spotlight[data-state='closed'],
+.blocker[data-state='closed'] {
+  opacity: var(--tour-opacity-hidden);
+  pointer-events: none;
+}
+
+// A non-interactive modal step lights its target but blocks the pointer on it
+// and everything inside (Tour.tsx sets the marker). Global: the target is
+// consumer DOM. The chained attribute raises both selectors to (0,4,0)
+// so library `pointer-events: auto` rules (e.g. MediaTile reveal, (0,3,0)) lose
+// without !important. Not `inert`, which would hide the panel from assistive tech.
+// stylelint-disable selector-pseudo-class-no-unknown -- CSS Modules :global() escape hatch
+:global([data-tour-inert][data-tour-inert][data-tour-inert][data-tour-inert]),
+:global([data-tour-inert][data-tour-inert][data-tour-inert][data-tour-inert] *) {
+  pointer-events: none;
+}
+// stylelint-enable selector-pseudo-class-no-unknown
+
+// ---------- Card ----------
+
+.card {
+  z-index: var(--tour-z);
+  box-sizing: border-box;
+  width: max-content; // intrinsic: independent of the in-flight `left` (#698)
+  min-width: var(--tour-card-min-width);
+  max-width: min(var(--tour-card-max-width), calc(100vw - 2 * var(--tour-card-viewport-gap)));
+  padding: var(--tour-card-padding);
+  background: var(--tour-card-bg);
+  color: var(--tour-card-fg);
+  border: var(--border-width) solid var(--tour-card-border-color);
+  border-radius: var(--tour-card-radius);
+  box-shadow: var(--tour-card-shadow);
+  outline: none;
+  opacity: var(--tour-opacity-visible);
+  transform: none;
+  transform-origin: center;
+  transition:
+    opacity var(--tour-fade),
+    transform var(--tour-fade);
+
+  @starting-style {
+    opacity: var(--tour-opacity-hidden);
+    transform: scale(0.95);
+  }
+}
+
+.card[data-glide] {
+  transition:
+    opacity var(--tour-fade),
+    transform var(--tour-fade),
+    top var(--tour-glide),
+    left var(--tour-glide),
+    translate var(--tour-glide);
+}
+
+.card[data-side='top'] {
+  transform-origin: bottom center;
+}
+
+.card[data-side='bottom'] {
+  transform-origin: top center;
+}
+
+.card[data-side='left'] {
+  transform-origin: right center;
+}
+
+.card[data-side='right'] {
+  transform-origin: left center;
+}
+
+.card[data-state='closed'] {
+  opacity: var(--tour-opacity-hidden);
+  transform: scale(0.95);
+  pointer-events: none;
+}
+
+// Step content is keyed by index → remounts → cross-fades in.
+.content {
+  transition: opacity var(--tour-fade);
+
+  @starting-style {
+    opacity: var(--tour-opacity-hidden);
+  }
+}
+
+.progress,
+.hint,
+.waiting {
+  font-size: var(--tour-progress-size);
+  color: var(--tour-card-muted-fg);
+}
+
+.title {
+  font-size: var(--tour-title-size);
+  font-weight: var(--tour-title-weight);
+}
+
+.body {
+  font-size: var(--tour-body-size);
+}
+
+.arrow {
+  position: absolute;
+  width: var(--tour-arrow-size);
+  height: var(--tour-arrow-size);
+  background: var(--tour-card-bg);
+  border-right: var(--border-width) solid var(--tour-card-border-color);
+  border-bottom: var(--border-width) solid var(--tour-card-border-color);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+.card[data-side='bottom'] .arrow {
+  border-top: var(--border-width) solid var(--tour-card-border-color);
+  border-left: var(--border-width) solid var(--tour-card-border-color);
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.card[data-side='left'] .arrow {
+  border-top: var(--border-width) solid var(--tour-card-border-color);
+  border-right: var(--border-width) solid var(--tour-card-border-color);
+  border-bottom: 0;
+  border-left: 0;
+}
+
+.card[data-side='right'] .arrow {
+  border-bottom: var(--border-width) solid var(--tour-card-border-color);
+  border-left: var(--border-width) solid var(--tour-card-border-color);
+  border-top: 0;
+  border-right: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spotlight,
+  .spotlight[data-glide],
+  .card,
+  .card[data-glide],
+  .content {
+    transition: none;
+  }
+
+  // The waves are hidden (mixin); a static ring keeps the cue.
+  .spotlight[data-interactive] {
+    outline: var(--tour-wave-edge) solid var(--tour-wave-color);
+  }
+}
+
+// Live-region text for the "waiting on the next target" state (Hard rule 10) —
+// same recipe as Switch's .srOnly.
+.srOnly {
+  @include visually-hidden;
+}

package/src/components/Tour/Tour.tokens.scss

@@ -0,0 +1,58 @@
+// Tour.tokens.scss — Component-scoped tokens for <Tour>. Each defaults to a
+// shared token, except a few raw values with no shared-token equivalent —
+// each is Tour-local geometry/motion, not a reusable spacing/duration:
+// --tour-scrim-spread (200vmax) is the cutout's box-shadow spread, sized to
+// cover the viewport from any cutout position — inherently viewport-relative,
+// not a --space-* token. --tour-wave-duration (2200ms) / --tour-wave-delay
+// (1100ms, half the duration so two waves alternate evenly) are the
+// interactive-step wave cue's timing — Tour-specific motion, not one of the
+// shared --transition-* durations (same reasoning as --modal-content-width-full).
+// --tour-wave-glow (22px) is the waves' inner-glow blur — a shadow blur, not
+// a --space-* step.
+:root {
+  --tour-z: var(--z-tour);
+
+  // Motion: fades are quick, geometry glides are slow enough to follow.
+  --tour-fade: var(--transition-base);
+  --tour-glide: var(--transition-slow);
+  --tour-opacity-hidden: var(--opacity-hidden);
+  --tour-opacity-visible: var(--opacity-visible);
+
+  // Scrim + spotlight
+  --tour-scrim: var(--color-bg-overlay);
+
+  // Spread of the cutout's box-shadow. Must cover the viewport from any
+  // cutout position, so it is viewport-relative.
+  --tour-scrim-spread: 200vmax;
+  --tour-spotlight-radius: var(--radius-md);
+
+  // Interactive-step wave cue (attention-waves mixin). White on the scrim in
+  // both themes.
+  --tour-wave-color: var(--ring-on-scrim);
+  --tour-wave-duration: 2200ms;
+  --tour-wave-delay: 1100ms;
+  --tour-wave-reach: var(--space-5);
+  --tour-wave-edge: var(--border-width-emphasis);
+  --tour-wave-glow: 22px;
+
+  // Card
+  --tour-card-bg: var(--color-bg);
+  --tour-card-fg: var(--color-fg);
+  --tour-card-muted-fg: var(--color-fg-muted);
+  --tour-card-border-color: var(--color-border);
+  --tour-card-radius: var(--radius-md);
+  --tour-card-shadow: var(--shadow-lg);
+  --tour-card-padding: var(--space-4);
+  --tour-card-min-width: var(--size-popover-min-width);
+  --tour-card-max-width: var(--size-popover-max-width);
+
+  // Keep in sync with CARD_VIEWPORT_PADDING in Tour.tsx (8px = --space-2).
+  --tour-card-viewport-gap: var(--space-2);
+  --tour-title-size: var(--font-size-md);
+  --tour-title-weight: var(--font-weight-semibold);
+  --tour-body-size: var(--font-size-sm);
+  --tour-progress-size: var(--font-size-xs);
+
+  // Arrow
+  --tour-arrow-size: var(--space-3);
+}