variables-misc.pcss.css

/**
 * @file
 * Miscellaneous global custom properties.
 *
 * Motion (easing/transition), radii & border widths, focus rings, icon sizes,
 * and other global tokens that are neither color, spacing, nor typography.
 * Split out of the former css/base/variables.pcss.css as part of
 * https://www.drupal.org/i/3582351 (relocation only — no value changes).
 */

@import "../base/media-queries.pcss.css";

:root {
  /*
   * Common.
   */
  --transition: all var(--admin-duration-fast) var(--admin-easing); /* Default Admin 'all' composite. */
  --outline-size: 4px;
  --outline-offset: 2px;
  --focus-outline: var(--outline-size) solid var(--admin-color-focus);

  /**
   * Shadows.
   */
  --shadow-z3: 0 14px 30px rgb(0, 0, 0, 0.1);

  /*
   * Pattern.
   */
  --admin-pattern-square: 0.5rem;

  /*
   * Icon sizes.
   */
  --admin-icon-size-close: 20px;
  --admin-icon-size-toolbar-secondary: 17px;
  --admin-icon-size-toolbar: 17px;
  --admin-icon-size-sidebar-toggle: 21px;

  /*
   * Corner radii use the canonical --admin-radius-* scale. Authored in px; the
   * build's px-to-rem step converts them.
   */
  --admin-radius-2xs: 2px;
  --admin-radius-xs: 4px;
  --admin-radius-s: 6px;
  --admin-radius-m: 8px;
  --admin-radius-l: 12px;
  --admin-radius-xl: 16px;
  --size-summary-border-radius: calc(var(--admin-radius-m) - 1px);

  /*
   * Motion durations are split from easing. The 0.3s duration is the slow
   * transition, while duplicate easing declarations use --admin-easing.
   */
  --admin-duration-fast: 0.15s;
  --admin-duration-slow: 0.3s;
  --admin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  --admin-transition: var(--admin-duration-fast) var(--admin-easing);
  --admin-transition-slow: var(--admin-duration-slow) var(--admin-easing);

  /*
   * Misc.
   */
  --admin-link-decoration-style: dotted;
  --admin-max-line-length: 80ch;

  @media (--admin-medium) {
    --admin-icon-size-toolbar: 20px;
  }
}