@eocrm/design-system 0.6.24 → 0.7.0

package/src/components/TopBar/TopBarSearchPanel.tsx

@@ -1,268 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,210 +0,0 @@
-@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

@@ -1,58 +0,0 @@
-// 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);
-}