variables-color-accent.pcss.css

/**
 * @file
 * Accent color tokens — the accent ramp and the semantic tokens derived from it.
 *
 * Scoped to [data-gin-accent] (set on ). Builds the --admin-color-accent-*
 * ramp from --accent-base (written at runtime by the accent picker JS) via
 * color-mix(in lch), and maps it onto the canonical semantic tokens
 * (--admin-color-primary*, --admin-color-bg, --admin-color-bg-item*). Each value
 * is a single light-dark() pair so the whole ramp recomputes per color-scheme
 * from one selector.
 *
 * This is distinct from theme/accent.css, which holds the per-variant overrides
 * ([data-gin-accent="blue"] …) plus the focus-ring and high-contrast tweaks.
 *
 * Loads FIRST in the _variables group: it shares specificity (0,1,0) with the
 * :root token files, so source order breaks ties — see default_admin.libraries.yml.
 */

[data-gin-accent] {
  /*
   * Default accent color.
   */
  --accent-base: #015efe;

  /*
   * Mix base.
   *
   * Each value is a single light-dark() pair, so the whole accent ramp below
   * (and everything derived from it) recomputes per color-scheme from ONE
   * selector — the former `.gin--dark-mode [data-gin-accent]` override block is
   * gone. light-dark() resolves correctly inside color-mix()/relative-color.
   */
  --admin-color-accent-base: light-dark(var(--accent-base), color-mix(in lch, lch(from var(--accent-base) calc(l * 20) c h), #000 12%));
  --accent-mix-base: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), color-mix(in lch, var(--accent-base), #000 80%));
  --accent-mix-base-dark: light-dark(black, white);
  --app-bg-color: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), #1b1b1d);
  --layer-background: light-dark(#fff, #2a2a2d);

  /*
   * Base accent colors.
   */
  --admin-color-accent-010: color-mix(in lch, var(--accent-mix-base) 95%, var(--admin-color-accent-base));
  --admin-color-accent-020: color-mix(in lch, var(--accent-mix-base) 90%, var(--admin-color-accent-base));
  --admin-color-accent-030: color-mix(in lch, var(--accent-mix-base) 85%, var(--admin-color-accent-base));
  --admin-color-accent-040: color-mix(in lch, var(--accent-mix-base) 80%, var(--admin-color-accent-base));
  --admin-color-accent-050: color-mix(in lch, var(--accent-mix-base) 75%, var(--admin-color-accent-base));
  --admin-color-accent-100: color-mix(in lch, var(--accent-mix-base) 60%, var(--admin-color-accent-base));
  --admin-color-accent-200: color-mix(in lch, var(--accent-mix-base) 45%, var(--admin-color-accent-base));
  --admin-color-accent-300: color-mix(in lch, var(--accent-mix-base) 30%, var(--admin-color-accent-base));
  --admin-color-accent-400: color-mix(in lch, var(--accent-mix-base) 15%, var(--admin-color-accent-base));
  --admin-color-accent-500: var(--admin-color-accent-base);
  --admin-color-accent-550: color-mix(in lch, var(--accent-mix-base-dark) 8%, var(--admin-color-accent-base));
  --admin-color-accent-600: color-mix(in lch, var(--accent-mix-base-dark) 15%, var(--admin-color-accent-base));
  --admin-color-accent-700: color-mix(in lch, var(--accent-mix-base-dark) 30%, var(--admin-color-accent-base));
  --admin-color-accent-800: color-mix(in lch, var(--accent-mix-base-dark) 45%, var(--admin-color-accent-base));
  --admin-color-accent-900: color-mix(in lch, var(--accent-mix-base-dark) 60%, var(--admin-color-accent-base));

  /*
   * Polyfill for Default Admin theme.
   */
  --admin-color-bg: var(--app-bg-color);
  --admin-color-primary: var(--admin-color-accent-500);
  --admin-color-primary-hover: var(--admin-color-accent-550);
  --admin-color-primary-active: var(--admin-color-accent-600);
  --admin-color-primary-soft: var(--admin-color-accent-030);
  --admin-color-primary-soft-hover: var(--admin-color-accent-040);
  --admin-color-primary-soft-active: var(--admin-color-accent-050);
  --admin-color-bg-item: var(--admin-color-accent-020);
  --admin-color-bg-item-hover: var(--admin-color-accent-030);
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
  [data-gin-accent] {
    /* stylelint-disable-next-line color-function-notation */
    --admin-color-accent-010: rgb(from var(--admin-color-accent-base) r g b / 0.05);
    /* stylelint-disable-next-line color-function-notation */
    --admin-color-accent-020: rgb(from var(--admin-color-accent-base) r g b / 0.1);
    /* stylelint-disable-next-line color-function-notation */
    --admin-color-accent-030: rgb(from var(--admin-color-accent-base) r g b / 0.15);
    /* stylelint-disable-next-line color-function-notation */
    --admin-color-accent-040: rgb(from var(--admin-color-accent-base) r g b / 0.2);
  }
}