@eocrm/design-system 0.6.23 → 0.7.0

package/src/components/Image/Image.tsx

@@ -1,342 +0,0 @@
-import {
-  forwardRef,
-  useState,
-  type CSSProperties,
-  type ImgHTMLAttributes,
-  type MouseEventHandler,
-  type ReactNode,
-} from 'react';
-import clsx from 'clsx';
-import { ImageOff } from 'lucide-react';
-import { Button } from '../Button';
-import { Skeleton } from '../Skeleton';
-import { useTranslation } from '../../i18n/useTranslation';
-import styles from './Image.module.scss';
-
-/** How the image fills its box. Maps to CSS `object-fit`. */
-export type ImageObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-
-/** Corner rounding. Maps to the radius token scale. */
-export type ImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-
-/** Fixed square size, aligned to the shared `--size-*` scale (xs 20 / sm 24 / md 32 / lg 40 px). */
-export type ImageSize = 'xs' | 'sm' | 'md' | 'lg';
-
-/** Backdrop behind a loaded image: the muted surface fill, or none. */
-export type ImageBackground = 'muted' | 'none';
-
-export interface ImageProps extends Omit<
-  ImgHTMLAttributes<HTMLImageElement>,
-  'alt' | 'children' | 'src' | 'loading' | 'onClick'
-> {
-  /** Image URL. Changing it resets the component to the loading state. */
-  src: string;
-  /**
-   * Alternative text (required). Describe the image's content or function.
-   * Pass an empty string (`alt=""`) for purely decorative images.
-   */
-  alt: string;
-  /**
-   * How the image fills its box. Defaults to `'cover'`.
-   * - `'cover'` — fill + crop (no distortion). Best for thumbnails / heroes.
-   * - `'contain'` — whole image, letterboxed; the bars show the surface, or the muted box with `background="muted"`.
-   * - `'fill'` — stretch to the box (may distort).
-   * - `'none'` / `'scale-down'` — native size / the smaller of none|contain.
-   */
-  objectFit?: ImageObjectFit;
-  /**
-   * Which part of the image stays in view when `objectFit` crops or letterboxes
-   * it. Any CSS `object-position` value. Defaults to `'center'`. Use `'top'` for
-   * document / screenshot thumbnails cropped square, so the header stays visible.
-   */
-  objectPosition?: string;
-  /**
-   * Reserve the box at a fixed ratio to prevent layout shift while loading.
-   * Number (`1.5`) or CSS string (`'16 / 9'`).
-   */
-  aspectRatio?: string | number;
-  /**
-   * Render a fixed **square** box of this size (from the shared `--size-*`
-   * scale: `'xs'` 20 / `'sm'` 24 / `'md'` 32 / `'lg'` 40 px) instead of filling
-   * the container's width. Use for dense thumbnails (e.g. a 40px image cell in a
-   * table row) so you don't need a consumer-owned fixed-width wrapper. Omit for
-   * the default responsive behavior. When set, `aspectRatio` is ignored (the box
-   * is already square); pair with `objectFit="cover"` to crop. Note that a
-   * sized image's error tile is icon-only and **not retryable** — see the
-   * component description.
-   */
-  size?: ImageSize;
-  /**
-   * Corner rounding. Defaults to `'md'`. Pass `'none'` for square corners; for
-   * circular profile images use `<Avatar>`.
-   */
-  radius?: ImageRadius;
-  /**
-   * Backdrop behind the loaded image. Defaults to `'none'`, so transparent
-   * assets (logos, PNG/SVG) show their surface. Pass `'muted'` for the muted
-   * fill (letterboxed `contain` images). The loading skeleton and the error
-   * tile keep their fill either way.
-   */
-  background?: ImageBackground;
-  /**
-   * Custom node rendered in place of the default broken-image placeholder when
-   * the image fails to load. Overrides the icon + message + retry entirely.
-   * This is also the only way to put a control on a failed fixed-`size` image,
-   * whose built-in error tile is icon-only. At a fixed `size` the node is
-   * rendered in a slot that fills the box (so it cannot flow outside the
-   * wrapper's clip); fitting your content into those 20-40px is still yours,
-   * and a labelled button does not fit any of them.
-   */
-  fallback?: ReactNode;
-  /**
-   * Native lazy-loading hint. Defaults to `'lazy'`. Pass `'eager'` for
-   * above-the-fold / LCP images.
-   */
-  loading?: 'eager' | 'lazy';
-  /**
-   * Make the image a flush, keyboard-accessible click target — renders the image
-   * inside a chromeless `<button>` (no padding/border/background; DS focus ring on
-   * `:focus-visible`). Implied when `onClick` is set. Use for a thumbnail that opens
-   * a preview/lightbox. The broken-image error state is non-interactive (the fluid
-   * tile's Retry takes over when its box has room; otherwise there is no control).
-   */
-  interactive?: boolean;
-  /**
-   * Click handler for the interactive trigger. Setting it implies `interactive`.
-   * Fires on click and on Enter/Space (native `<button>` keyboard behavior).
-   */
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * Accessible label for the interactive trigger — action-oriented, e.g.
-   * `"Preview report.png"`. Defaults to `alt` when omitted OR empty — an empty
-   * string is not an explicit name, so it takes the default too. Only used when
-   * interactive. Note:
-   * a native `aria-label` passed via `{...rest}` lands on the `<img>`, not the
-   * trigger button — use `ariaLabel` to name the trigger.
-   */
-  ariaLabel?: string;
-}
-
-type LoadState = 'loading' | 'loaded' | 'error';
-
-const RADIUS_CLASS: Record<ImageRadius, string> = {
-  none: styles.radiusNone,
-  sm: styles.radiusSm,
-  md: styles.radiusMd,
-  lg: styles.radiusLg,
-  full: styles.radiusFull,
-};
-
-const SIZE_CLASS: Record<ImageSize, string> = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-};
-
-/**
- * Displays a remote image with built-in loading and error states.
- * @see docs/components/Image.md
- */
-export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
-  {
-    src,
-    alt,
-    objectFit = 'cover',
-    objectPosition = 'center',
-    aspectRatio,
-    size,
-    radius = 'md',
-    background = 'none',
-    fallback,
-    loading = 'lazy',
-    interactive,
-    onClick,
-    ariaLabel,
-    className,
-    style,
-    ...rest
-  },
-  ref,
-) {
-  const t = useTranslation();
-  const [state, setState] = useState<LoadState>('loading');
-  const [reloadNonce, setReloadNonce] = useState(0);
-
-  // Reset to loading when the source changes — during render, not in an
-  // effect: a mount-time effect ran AFTER a cached image's `load` and put it
-  // back to 'loading' for good (#574).
-  const [prevSrc, setPrevSrc] = useState(src);
-  if (src !== prevSrc) {
-    setPrevSrc(src);
-    setState('loading');
-  }
-
-  const retry = () => {
-    setState('loading');
-    setReloadNonce((n) => n + 1); // re-key the <img> to force a re-fetch
-  };
-
-  const wrapperStyle = {
-    // A fixed `size` sets an explicit square box, so aspectRatio is moot.
-    aspectRatio:
-      size !== undefined || aspectRatio === undefined
-        ? undefined
-        : typeof aspectRatio === 'number'
-          ? String(aspectRatio)
-          : aspectRatio,
-    '--image-object-fit': objectFit,
-    '--image-object-position': objectPosition,
-    ...style,
-  } as CSSProperties;
-
-  const isInteractive = interactive || onClick != null;
-
-  const imgNode = (
-    // {...rest} FIRST (Pattern B): the state machine owns src/alt/onLoad/onError,
-    // so a careless spread can't break them. `key` stays before the spread (#707).
-    <img
-      key={`${src}|${reloadNonce}`}
-      {...rest}
-      ref={ref}
-      src={src}
-      alt={state === 'error' ? '' : alt}
-      aria-hidden={state === 'error' || undefined}
-      loading={loading}
-      className={styles.img}
-      onLoad={() => setState('loaded')}
-      onError={() => setState('error')}
-    />
-  );
-
-  const loadingOverlay =
-    state === 'loading' ? <Skeleton variant="rectangular" className={styles.overlay} /> : null;
-
-  return (
-    <span
-      className={clsx(
-        styles.wrapper,
-        RADIUS_CLASS[radius],
-        size && SIZE_CLASS[size],
-        // No box of its own: on error the image goes `display: none` and the
-        // tile is out of flow, so nothing is left to give the wrapper height
-        // (#542). `.unreserved` gives it an icon-high spacer, error state
-        // only. A boxless `fallback` is in flow and sizes the wrapper itself.
-        size === undefined && aspectRatio === undefined && fallback == null && styles.unreserved,
-        className,
-      )}
-      style={wrapperStyle}
-      data-state={state}
-      data-background={background}
-    >
-      {isInteractive ? (
-        <button
-          type="button"
-          className={styles.trigger}
-          onClick={onClick}
-          aria-label={ariaLabel || alt}
-          disabled={state === 'error'}
-        >
-          {imgNode}
-          {loadingOverlay}
-        </button>
-      ) : (
-        <>
-          {imgNode}
-          {loadingOverlay}
-        </>
-      )}
-
-      {state === 'error' &&
-        (fallback != null ? (
-          /* A fallback stands in for the built-in tile, so wherever the box is
-             the wrapper's own it gets the slot the built-in tile has. `.error`
-             is `inset: 0`; a bare child is in FLOW, and when the image is also
-             interactive it flows after `.trigger` (height: 100%) and lands
-             WHOLLY outside the clip — measured at `size="lg"` (box 40..80,
-             fallback 80..105) and again at `aspectRatio="16 / 9"` (fallback
-             starting exactly on the wrapper's bottom edge). That is #538
-             reproduced through the very prop documented as its remedy.
-
-             The slot bounds the fallback to the box. Fitting content INSIDE
-             the box is still the consumer's job — a labelled button is wider
-             than 40px and still clips — and the prop's JSDoc says so.
-
-             Not slotted when the wrapper has NEITHER `size` nor
-             `aspectRatio`: there the wrapper takes its height FROM this child
-             (measured: a 20px-tall fallback gives a 20px-tall wrapper), so
-             pulling it out of flow would collapse the box to zero. (The
-             built-in tile, which IS out of flow, gets `.unreserved`'s spacer
-             for the same reason — #542.) */
-          size !== undefined || aspectRatio !== undefined ? (
-            <span className={styles.fallback}>{fallback}</span>
-          ) : (
-            fallback
-          )
-        ) : size ? (
-          /* Fixed `size` is a 20/24/32/40px square, and the full tile below
-               is over 100px tall. At EVERY one of those sizes the Retry button
-               landed 23-42px past the wrapper's bottom edge: outside
-               `overflow: hidden`, never painted, and still focusable and in
-               the tab order (#538). There is no threshold to tune — the fluid
-               tile's 28px icon alone already overflows xs and sm — so a sized
-               error tile is the icon, scaled to its box by `.errorIcon`, and
-               contains nothing focusable at all. A consumer who needs a
-               control at this size passes `fallback`.
-
-               A11y: the "icon carries only `alt`" reasoning below is a
-               consequence of the visible text, not a rule about the icon, and
-               this branch has no visible text — so it inverts here. Nothing
-               else in the tile can carry the failure, so the icon does: `alt`
-               plus the phrase, the same fold `Lightbox` uses on its failed
-               stage. It names itself even when `alt=""`, because the fluid
-               tile renders its failure text regardless of `alt` too — a
-               decorative image that breaks is discoverable there, and the
-               sized branch must not be the one place a broken tile is
-               silent. */
-          <span className={styles.error}>
-            <ImageOff
-              className={styles.errorIcon}
-              role="img"
-              aria-label={alt ? `${alt}: ${t('image.loadError')}` : t('image.loadError')}
-            />
-          </span>
-        ) : (
-          <span className={styles.error}>
-            {/* `role="img"` moved off the container and onto the ICON.
-                  `img` is Children Presentational, so as a container it pruned
-                  its own descendants from the accessibility tree — the visible
-                  error text and, worse, the Retry button were not exposed at
-                  all: a focusable control with no role and no name (#496).
-                  Testing Library computes roles from the DOM rather than
-                  modelling children-presentational, which is why the existing
-                  `getByRole('button', { name: 'Retry' })` assertion passed
-                  throughout.
-
-                  On a leaf there is nothing to prune, so the name survives and
-                  the siblings stay reachable.
-
-                  The icon carries ONLY `alt`, never the failure phrase: the
-                  sibling below renders that phrase as visible text, so naming
-                  the icon with it too made a reader say "Failed to load" twice
-                  in a row. With no `alt` there is nothing left to name, so the
-                  icon goes decorative and the text carries the message alone.
-                  Both halves of that hold only while the text is there — see
-                  the sized branch above, which has none. */}
-            {alt ? (
-              <ImageOff size={28} role="img" aria-label={alt} />
-            ) : (
-              <ImageOff size={28} aria-hidden />
-            )}
-            <span className={styles.errorText}>{t('image.loadError')}</span>
-            {/* `.retry` exists only to carry the inset focus ring — see the
-                  rule in Image.module.scss for why an outset one cannot survive
-                  this wrapper. */}
-            <Button variant="secondary" size="sm" onClick={retry} className={styles.retry}>
-              {t('image.retry')}
-            </Button>
-          </span>
-        ))}
-    </span>
-  );
-});

package/src/components/Image/index.ts

@@ -1,2 +0,0 @@
-export { Image } from './Image';
-export type { ImageProps, ImageBackground, ImageObjectFit, ImageRadius, ImageSize } from './Image';

package/src/components/ImageCrop/ImageCrop.module.scss

@@ -1,274 +0,0 @@
-@use './ImageCrop.tokens';
-@use '../../styles/mixins' as *;
-
-.root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.viewport {
-  position: relative;
-  background: var(--image-crop-viewport-bg);
-  border-radius: var(--image-crop-viewport-radius);
-  overflow: hidden;
-
-  // Reserve canvas space before image loads so the layout doesn't shift.
-  // Consumer can override via className.
-  min-height: 320px;
-
-  // CSS keyword; prevents browser text selection during drag.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  user-select: none;
-}
-
-.viewport:focus-visible {
-  @include focus-ring(var(--image-crop-viewport-focus-color));
-}
-
-.image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform-origin: 0 0;
-
-  // The library's reset (src/styles/reset.scss) applies `max-width: 100%`
-  // to all <img> for general layout safety. We override here because the
-  // image inside ImageCrop must render at its natural pixel size — the
-  // crop math depends on `scale = boxW / value.width` driving the CSS
-  // transform, and that breaks if the image is also being width-capped by
-  // CSS to the parent viewport. Without this override, large source images
-  // (e.g. 4080×3072 phone photos) render visibly tiny in the cropper.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword override of the global img reset
-  max-width: none;
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  max-height: none;
-
-  // CSS keyword — the crop box owns all pointer interaction.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  pointer-events: none;
-}
-
-.cropBox {
-  position: absolute;
-  border: var(--border-width) solid var(--image-crop-cropbox-border-color);
-
-  // The box-shadow trick paints a dim overlay everywhere OUTSIDE the box
-  // without an extra DOM element. The 9999px spread covers the viewport.
-  // We use 50% black rather than --color-bg-overlay (35%) intentionally —
-  // the cropper scrim needs higher contrast than Modal's overlay.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- crop scrim needs higher contrast than --color-bg-overlay
-  box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%);
-
-  // CSS keyword.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: move;
-
-  // CSS keyword; box + handle gestures aren't browser scroll/zoom. The scrim and toolbar still scroll the page.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  touch-action: none;
-}
-
-.grid {
-  position: absolute;
-  inset: 0;
-  opacity: var(--image-crop-grid-opacity);
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- thirds lines are gradient stops with literal percentages
-  background:
-    linear-gradient(
-      to right,
-      transparent calc(33.333% - var(--border-width)),
-      var(--image-crop-grid-color) 0 33.333%,
-      transparent 0 calc(66.666% - var(--border-width)),
-      var(--image-crop-grid-color) 0 66.666%,
-      transparent 0
-    ),
-    linear-gradient(
-      to bottom,
-      transparent calc(33.333% - var(--border-width)),
-      var(--image-crop-grid-color) 0 33.333%,
-      transparent 0 calc(66.666% - var(--border-width)),
-      var(--image-crop-grid-color) 0 66.666%,
-      transparent 0
-    );
-
-  // CSS keyword — grid never intercepts the box's pointer events.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  pointer-events: none;
-}
-
-.cropBoxActive .grid {
-  opacity: var(--image-crop-grid-opacity-active);
-}
-
-.handle {
-  position: absolute;
-  width: var(--image-crop-handle-size);
-  height: var(--image-crop-handle-size);
-  box-sizing: border-box;
-}
-
-// Corner hit areas straddle the outline (half outside the box); the visible bracket hugs the box corner.
-.handle_nw,
-.handle_ne,
-.handle_sw,
-.handle_se {
-  &::before {
-    content: '';
-    position: absolute;
-    width: calc(var(--image-crop-handle-size) / 2 + var(--image-crop-handle-thickness));
-    height: calc(var(--image-crop-handle-size) / 2 + var(--image-crop-handle-thickness));
-    box-sizing: border-box;
-    border: 0 solid var(--image-crop-handle-color);
-  }
-}
-
-.handle_nw {
-  top: calc(-0.5 * var(--image-crop-handle-size));
-  left: calc(-0.5 * var(--image-crop-handle-size));
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: nwse-resize;
-
-  &::before {
-    top: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    left: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    border-top-width: var(--image-crop-handle-thickness);
-    border-left-width: var(--image-crop-handle-thickness);
-  }
-}
-
-.handle_ne {
-  top: calc(-0.5 * var(--image-crop-handle-size));
-  right: calc(-0.5 * var(--image-crop-handle-size));
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: nesw-resize;
-
-  &::before {
-    top: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    right: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    border-top-width: var(--image-crop-handle-thickness);
-    border-right-width: var(--image-crop-handle-thickness);
-  }
-}
-
-.handle_sw {
-  bottom: calc(-0.5 * var(--image-crop-handle-size));
-  left: calc(-0.5 * var(--image-crop-handle-size));
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: nesw-resize;
-
-  &::before {
-    bottom: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    left: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    border-bottom-width: var(--image-crop-handle-thickness);
-    border-left-width: var(--image-crop-handle-thickness);
-  }
-}
-
-.handle_se {
-  right: calc(-0.5 * var(--image-crop-handle-size));
-  bottom: calc(-0.5 * var(--image-crop-handle-size));
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: nwse-resize;
-
-  &::before {
-    bottom: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    right: calc(var(--image-crop-handle-size) / 2 - var(--image-crop-handle-thickness));
-    border-bottom-width: var(--image-crop-handle-thickness);
-    border-right-width: var(--image-crop-handle-thickness);
-  }
-}
-
-// Edge handles are invisible hit strips along the box edges.
-.handle_n,
-.handle_s {
-  left: var(--image-crop-handle-size);
-  right: var(--image-crop-handle-size);
-  width: auto;
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: ns-resize;
-}
-
-.handle_n {
-  top: calc(-0.5 * var(--image-crop-handle-size));
-}
-
-.handle_s {
-  bottom: calc(-0.5 * var(--image-crop-handle-size));
-}
-
-.handle_e,
-.handle_w {
-  top: var(--image-crop-handle-size);
-  bottom: var(--image-crop-handle-size);
-  height: auto;
-
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: ew-resize;
-}
-
-.handle_e {
-  right: calc(-0.5 * var(--image-crop-handle-size));
-}
-
-.handle_w {
-  left: calc(-0.5 * var(--image-crop-handle-size));
-}
-
-.skeleton {
-  position: absolute;
-  inset: 0;
-}
-
-.errorState {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--image-crop-error-gap);
-  padding: var(--image-crop-error-padding);
-  color: var(--image-crop-error-fg);
-  font-size: var(--image-crop-error-font-size);
-
-  // CSS keyword — text alignment.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  text-align: center;
-}
-
-.disabled .viewport {
-  opacity: var(--image-crop-opacity-disabled);
-}
-
-.disabled .cropBox,
-.disabled .handle {
-  // CSS keyword.
-  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
-  cursor: not-allowed;
-}
-
-.srOnly {
-  @include visually-hidden;
-}
-
-// Positioning wrapper over the canvas bottom; sits in the reserved TOOLBAR_RESERVE band.
-.toolbar {
-  position: absolute;
-  bottom: var(--image-crop-toolbar-offset);
-  left: 50%;
-  display: flex;
-  align-items: center;
-  gap: var(--image-crop-toolbar-gap);
-  padding: var(--image-crop-toolbar-padding);
-  max-width: 100%;
-  overflow-x: auto;
-  transform: translateX(-50%);
-}

package/src/components/ImageCrop/ImageCrop.tokens.scss

@@ -1,33 +0,0 @@
-// ImageCrop.tokens.scss — component-scoped tokens for <ImageCrop>. Covers viewport surface, crop-box border, error state, and disabled mute. Cursor keywords and the scrim's literal 50% black stay raw in .module.scss.
-:root {
-  // Viewport surface
-  --image-crop-viewport-bg: var(--color-bg-muted);
-  --image-crop-viewport-radius: var(--radius-md);
-  --image-crop-viewport-focus-color: var(--color-accent);
-
-  // Crop box outline
-  --image-crop-cropbox-border-color: var(--color-accent);
-
-  // Crop box handles + thirds grid
-  --image-crop-handle-size: var(--space-6);
-  --image-crop-handle-thickness: var(--border-width-strong);
-  --image-crop-handle-color: var(--color-fg-on-overlay);
-  --image-crop-grid-color: var(--color-fg-on-overlay);
-  --image-crop-grid-opacity: 0;
-  --image-crop-grid-opacity-active: 1;
-
-  // Toolbar positioning
-  // Room so overflow-x clipping doesn't cut button focus rings.
-  --image-crop-toolbar-padding: var(--space-1);
-  --image-crop-toolbar-gap: var(--space-2);
-  --image-crop-toolbar-offset: var(--space-3);
-
-  // Error state
-  --image-crop-error-gap: var(--space-2);
-  --image-crop-error-padding: var(--space-4);
-  --image-crop-error-fg: var(--color-danger);
-  --image-crop-error-font-size: var(--font-size-sm);
-
-  // Disabled mute
-  --image-crop-opacity-disabled: var(--opacity-disabled);
-}