variables-spacing.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Spacing & layout-dimension custom properties.
 *
 * The canonical --admin-space-* scale, the density-aware --admin-space-density-*
 * scale ([data-gin-layout-density]), and layout dimensions/offsets (toolbar,
 * sidebar, sticky). Consolidated from the former --space-* / --gin-spacing-* /
 * --gin-spacing-density-* systems as part of
 * https://www.drupal.org/i/3582351. The theme is alpha; the old token
 * names are removed outright with no deprecation aliases.
 *
 * Values are authored in px; the build's px-to-rem step converts them.
 */

:root {
  /**
   * Spacing scale.
   */
  --admin-space-3xs: 2px;
  --admin-space-2xs: 0.25rem;
  --admin-space-xs: 0.5rem;
  --admin-space-s: 0.75rem;
  --admin-space-m: 1rem;
  --admin-space-l: 1.5rem;
  --admin-space-xl: 2rem;
  --admin-space-2xl: 3rem;
  --admin-space-3xl: 4rem;

  /*
   * Layout dimensions & offsets.
   *
   * Namespaced --admin-theme-* (not --admin-toolbar-*) on purpose: core's
   * navigation / admin_toolbar module already owns the --admin-toolbar-* token
   * family (--admin-toolbar-color-*, --admin-toolbar-sidebar-width, …). These
   * are *this theme's* layout-geometry tokens, so they get their own
   * --admin-theme-* namespace to keep ownership unambiguous in the public API.
   *
   * --admin-theme-sidebar-width is written by the theme's JS at runtime
   * (migration/js/init.js, sidebar.js); the toolbar offsets derive in CSS from
   * core's --drupal-displace-offset-* (see navigation.pcss.css). Values declared
   * here are only the initial/fallback.
   */
  --admin-theme-height-sticky: 3.75rem;
  --admin-theme-toolbar-height: 0px;
  --admin-theme-toolbar-secondary-height: 0px;
  --admin-theme-toolbar-y-offset: 0px;
  --admin-theme-toolbar-x-offset: 0px;
  --admin-theme-scroll-offset: 0px;
  --admin-theme-sticky-offset: 0px;
  --admin-theme-sidebar-small-width: 20rem;
  --admin-theme-sidebar-min-width: 15rem;
  --admin-theme-sidebar-width: 20rem;
  --admin-theme-sidebar-max-width: 35rem;
  --admin-theme-sidebar-offset: var(--admin-theme-sidebar-width);

  @media (min-width: 64em) {
    --admin-theme-sticky-offset: var(--admin-theme-height-sticky);
  }

  @media (min-width: 80em) {
    --admin-theme-sidebar-width: 22.5rem;
  }
}

/**
 * Density-aware spacing scale.
 *
 * The [data-gin-layout-density] attribute re-declares this scale; the static
 * --admin-space-* scale above is intentionally NOT density-aware.
 */

:root {
  --admin-space-density-2xs: 0.25rem;
  --admin-space-density-xs: 0.5rem;
  --admin-space-density-s: 0.75rem;
  --admin-space-density-m: 1rem;
  --admin-space-density-l: 1.5rem;
  --admin-space-density-xl: 2rem;
  --admin-space-density-2xl: 3rem;
  --admin-space-density-3xl: 4rem;

  &[data-gin-layout-density="small"] {
    --admin-space-density-2xs: 0.15625rem; /* 2.5px — authored in rem: below the build's 3px px-to-rem floor. */
    --admin-space-density-xs: 0.3125rem;
    --admin-space-density-s: 0.46875rem;
    --admin-space-density-m: 0.625rem;
    --admin-space-density-l: 0.9375rem;
    --admin-space-density-xl: 1.25rem;
    --admin-space-density-2xl: 1.875rem;
    --admin-space-density-3xl: 2.5rem;
  }

  &[data-gin-layout-density="medium"] {
    --admin-space-density-2xs: 0.1875rem;
    --admin-space-density-xs: 0.375rem;
    --admin-space-density-s: 0.5625rem;
    --admin-space-density-m: 0.75rem;
    --admin-space-density-l: 1.125rem;
    --admin-space-density-xl: 1.5rem;
    --admin-space-density-2xl: 2.25rem;
    --admin-space-density-3xl: 3rem;
  }
}