variables-color.pcss.css

/**
 * @file
 * Color custom properties — the canonical `--admin-color-*` token API.
 */

:root {
  /*
  * Tier 1 (primitive colors).
  */
  --admin-color-white: white;
  --admin-color-gray-200-o-80: color-mix(in sRGB, rgb(212, 212, 218) 80%, transparent);
  /* Gray variations. */
  --admin-color-gray-950: #222330;
  --admin-color-gray-900: #393a3f;
  --admin-color-gray-800: #545560;
  --admin-color-gray-700: #767676;
  --admin-color-gray-600: #828388;
  --admin-color-gray-500: #8e929c;
  --admin-color-gray-400: #adaeb3;
  --admin-color-gray-300: #c2c2c2;
  --admin-color-gray-200: #d4d4d8;
  --admin-color-gray-100: #dedfe4;
  --admin-color-gray-050: #f3f4f9;
  --admin-color-gray-025: #f9faff;
  /* Blue variations. */
  --admin-color-blue-900: #000f33;
  --admin-color-blue-800: #001f66;
  --admin-color-blue-700: #002e9a;
  --admin-color-blue-650: #0036b1;
  --admin-color-blue-600: #003ecc;
  --admin-color-blue-500: #004eff;
  --admin-color-blue-400: #3371ff;
  --admin-color-blue-300: #6694ff;
  --admin-color-blue-200: #99b8ff;
  --admin-color-blue-100: #ccdbff;
  --admin-color-blue-070: #dbe6ff;
  --admin-color-blue-050: #e5edff;
  --admin-color-blue-020: #f5f8ff;
  /* Red variations. */
  --admin-color-red-900: #2c0707;
  --admin-color-red-800: #580e0e;
  --admin-color-red-700: #841515;
  --admin-color-red-600: #b01c1c;
  --admin-color-red-550: #c61f1f;
  --admin-color-red-500: #dc2323;
  --admin-color-red-400: #e34f4f;
  --admin-color-red-300: #ea7b7b;
  --admin-color-red-200: #f1a7a7;
  --admin-color-red-100: #f8d3d3;
  --admin-color-red-070: #fae0e0;
  --admin-color-red-050: #fce9e9;
  --admin-color-red-020: #fdf5f5;

  /*
   * Link / interactive blue. Used for links and blue focus/selected accents
   * (text, border, and bg).
   */

  /* @todo links don't use --admin-color-link. Need to refactor. */
  --admin-color-link: var(--admin-color-blue-600);
  --admin-color-link-hover: light-dark(var(--admin-color-blue-650), var(--admin-color-accent-700));
  --admin-color-link-active: var(--admin-color-blue-700);

  /*
   * Semantic tokens (tier 2). Mode-aware ones use light-dark().
   *
   * Composition: the LIGHT half references a primitive ramp step
   * wherever a step matches the in-use value — the ramp was reconciled TO these
   * semantics (primitives follow semantics), so this is value-preserving. The DARK
   * half stays a literal: the ramps are light-only, so there is no dark primitive
   * to point at. Tokens left fully literal are intentional —
   * either functional (color-mix() rings/hairlines), a bespoke value off the ramp
   * (the dark surfaces, status families, switch, icon), or a near-black distinct
   * from the ramp. Don't "fix" those into var() refs.
   */
  /*
   * Text. Contrast ladder is soft / (default) / loud.
   *   --admin-color-text       default body text.
   *   --admin-color-text-soft  lower-contrast / secondary text — labels, help,
   *                            descriptions. Quieter; recedes.
   *   --admin-color-text-loud  higher-contrast / emphasized text — headings, titles.
   * (--admin-color-text-on-primary, below, is text on a primary-colored fill.)
   */
  --admin-color-text: light-dark(var(--admin-color-gray-950), #d2d3d3);
  --admin-color-text-soft: light-dark(var(--admin-color-gray-800), #9e9fa0);
  --admin-color-text-loud: light-dark(var(--admin-color-gray-950), white);

  /*
   * Status — each family has three roles:
   *   --admin-color-{status}       solid — icons, borders, emphasis on a neutral bg.
   *   --admin-color-bg-{status}    the light tint behind highlighted rows / reports.
   *   --admin-color-text-{status}  text ON that tint (AA-verified pair).
   * Families: error · warning · success · info. (`danger` is retired.) Message
   * banners use their own dark-tinted palette, scoped in components/messages.pcss.css.
   */
  --admin-color-error: light-dark(#cc3d3d, #ce6060);
  --admin-color-bg-error: color-mix(in srgb, #de7560 15%, transparent);
  --admin-color-text-error: light-dark(#cc3d3d, #e69e9e);
  --admin-color-warning: light-dark(#d8b234, #dec15f);
  --admin-color-bg-warning: color-mix(in srgb, #e29700 15%, transparent);
  --admin-color-text-warning: light-dark(#826b1f, #e8d185);
  --admin-color-success: light-dark(#058260, #32cea4);
  --admin-color-bg-success: light-dark(#26a76930, #26a76940);
  --admin-color-text-success: light-dark(#1d6844, #8bd3b1);
  --admin-color-info: light-dark(#589ac5, #559bca);
  --admin-color-contextual: light-dark(var(--admin-color-text), var(--admin-color-bg-raised));

  /*
   * Surfaces — background ROLES, not an elevation ladder. In light mode several
   * resolve to the same white; "raising" or "sinking" a surface is expressed by
   * going lighter/darker relative to the canvas, and that direction inverts
   * between modes — hence light-dark(). Always pair a surface with
   * --admin-color-text (or -text-soft) and verify AA contrast in both modes.
   *
   *   -surface         default surface — cards, panes, tables, page chrome.
   *   -surface-nested  a surface recessed inside another surface (e.g. a panel
   *                    within a card; also the form-control fill in dark mode).
   *   -raised          floating ABOVE the page — dropdowns, tooltips, contextual
   *                    links, the sticky toolbar. The most "popped" surface
   *                    (lightest in dark mode).
   *   -sunken          an inset WELL — code blocks, recessed/embedded regions
   *                    (darker than the canvas in both modes).
   *   -input           form-control background.
   *   -header          table/section header tint and the sticky page header.
   *
   * The page canvas --admin-color-bg is defined in
   * css/_variables/variables-color-accent.pcss.css
   * (← --gin-bg-app): its light value is accent-derived (var(--app-bg-color)),
   * already mode-aware via that file's light-dark() bases.
   */
  --admin-color-bg-surface: light-dark(var(--admin-color-white), #2a2a2d);
  --admin-color-bg-surface-nested: light-dark(#edeff5, #3b3b3f);
  --admin-color-bg-raised: light-dark(var(--admin-color-white), #47474c);
  --admin-color-bg-sunken: light-dark(#e2e5ec, #19191b);
  --admin-color-bg-input: light-dark(var(--admin-color-white), #3b3b3f);
  --admin-color-bg-header: light-dark(#e1eafc, #1b1b1d);
  --admin-color-bg-unpublished: light-dark(var(--admin-color-bg-error), var(--admin-color-bg-warning));
  --admin-color-icon: light-dark(#414247, #888);

  /*
   * Borders. Contrast ladder soft / (default) / loud.
   *   --admin-color-border        default divider/edge — cards, panes, controls.
   *   --admin-color-border-soft   subtle/translucent hairline; also soft shadows.
   *   --admin-color-border-loud   strongest divider — table-header separators.
   *   --admin-color-border-input  form-control border.
   *   --admin-color-border-table  thin table row divider (soft in light, default
   *                               edge in dark).
   */
  --admin-color-border: light-dark(var(--admin-color-gray-200), #43454a);
  --admin-color-border-soft: light-dark(color-mix(in sRGB, black 8%, transparent), color-mix(in sRGB, black 5%, transparent));
  --admin-color-border-loud: light-dark(color-mix(in sRGB, black 30%, transparent), color-mix(in sRGB, white 40%, transparent));
  --admin-color-border-input: light-dark(var(--admin-color-gray-500), #76777b);
  --admin-color-border-table: light-dark(color-mix(in srgb, black 10%, transparent), #43454a);
  --admin-color-text-on-primary: light-dark(var(--admin-color-white), #111);
  --admin-color-switch: light-dark(#26a769, var(--admin-color-accent-100));
  /* @todo dark value was the invalid `rgba(#111, 0.9)` (no shadow rendered); kept
     as transparent to preserve behavior — fix to rgb(17 17 17 / 0.9) deliberately. */
  --admin-color-shadow-button: light-dark(#0003, transparent);
  --admin-color-bg-inverse: light-dark(var(--admin-color-gray-950), var(--admin-color-bg-raised));

  /*
   * Elevation shadows. The per-layer shadow colors are factored into
   * --admin-shadow-color-{1..4} utilities, numbered by elevation step (1 =
   * tightest/closest layer … 4 = deepest ambient). Each is a light/dark tint at
   * a fixed opacity (light is a blue-gray, dark is black). The --admin-shadow-*
   * composites below stack them.
   */
  --admin-shadow-color-1: light-dark(color-mix(in srgb, #142d52 2%, transparent), color-mix(in srgb, black 2%, transparent));
  --admin-shadow-color-2: light-dark(color-mix(in srgb, #142d52 3%, transparent), color-mix(in srgb, black 3%, transparent));
  --admin-shadow-color-3: light-dark(color-mix(in srgb, #142d52 4%, transparent), color-mix(in srgb, black 4%, transparent));
  --admin-shadow-color-4: light-dark(color-mix(in srgb, #142d52 12%, transparent), color-mix(in srgb, black 12%, transparent));
  --admin-shadow-1: 0 1px 2px var(--admin-shadow-color-1), 0 3px 4px var(--admin-shadow-color-2), 0 5px 8px var(--admin-shadow-color-3);
  --admin-shadow-2: 0 1px 2px var(--admin-shadow-color-1), 0 3px 4px var(--admin-shadow-color-2), 0 5px 8px var(--admin-shadow-color-3), 0 20px 24px var(--admin-shadow-color-4);

  /*
   * Focus & disabled.
   *   --admin-color-focus          focus-ring color.
   *   --admin-color-focus-border   inner focus-ring border.
   *   --admin-color-focus-neutral  neutral focus-ring variant ([data-gin-focus]).
   *   --admin-color-text-disabled / -bg-disabled / -border-disabled  disabled controls.
   */
  --admin-color-focus: light-dark(color-mix(in srgb, #007dfa 60%, transparent), #51a8ff);
  /* @todo this is used in box-shadow focus states, which will be phased out in favor of outline. */
  --admin-color-focus-border: light-dark(color-mix(in sRGB, black 20%, transparent), color-mix(in sRGB, black 80%, transparent));
  --admin-color-focus-neutral: light-dark(color-mix(in sRGB, black 40%, transparent), color-mix(in sRGB, white 80%, transparent));
  --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);
  --admin-color-bg-disabled: light-dark(#eaeaea, #47474c);
  --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #646464);
}

@media (forced-colors: active) {
  :root {
    --admin-color-icon: CanvasText;
  }
}