variables-color-semantic.pcss.css

/*
 * @file
 * Semantic CSS color variables.
 */

.root,
[data-gin-accent] {
  /*
  * Accent colors.
  */
  --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);

  /*
   * Semantic tokens (tier 2).
   */
  /*
   * 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);

  /*
   * Surfaces.
   *
   *   -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.
   */
  --admin-color-bg: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), #1b1b1d);
  --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 lch, black 8%, transparent), color-mix(in lch, black 5%, transparent));
  --admin-color-border-loud: light-dark(color-mix(in lch, black 30%, transparent), color-mix(in lch, 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));
  --admin-color-bg-inverse: light-dark(var(--admin-color-gray-950), var(--admin-color-bg-raised));

  /*
   * Elevation shadows.
   */
  --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-color-button: light-dark(#0003, 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);

  /*
   * 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).
   */
  --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);

  /*
   * 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 lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));
  --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, 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);

  /*
   * Link / interactive blue. Used for links and blue focus/selected accents
   * (text, border, and bg).
   */
  --admin-color-link: var(--admin-color-primary);
  --admin-color-link-hover: light-dark(var(--admin-color-accent-600), var(--admin-color-accent-700));
  --admin-color-link-active: light-dark(var(--admin-color-accent-700), var(--admin-color-accent-900));
}

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

File

View on git.drupalcode.org

core/themes/default_admin/css/_variables/variables-color-semantic.pcss.css

View source 
  1. /*

  2.  * @file

  3.  * Semantic CSS color variables.

  4.  */

  5. 

  6. .root,

  7. [data-gin-accent] {

  8.   /*

  9.   * Accent colors.

  10.   */

  11.   --admin-color-primary: var(--admin-color-accent-500);

  12.   --admin-color-primary-hover: var(--admin-color-accent-550);

  13.   --admin-color-primary-active: var(--admin-color-accent-600);

  14.   --admin-color-primary-soft: var(--admin-color-accent-030);

  15.   --admin-color-primary-soft-hover: var(--admin-color-accent-040);

  16.   --admin-color-primary-soft-active: var(--admin-color-accent-050);

  17.   --admin-color-bg-item: var(--admin-color-accent-020);

  18.   --admin-color-bg-item-hover: var(--admin-color-accent-030);

  19. 

  20.   /*

  21.    * Semantic tokens (tier 2).

  22.    */

  23.   /*

  24.    * Text. Contrast ladder is soft / (default) / loud.

  25.    *   --admin-color-text       default body text.

  26.    *   --admin-color-text-soft  lower-contrast / secondary text — labels, help,

  27.    *                            descriptions. Quieter; recedes.

  28.    *   --admin-color-text-loud  higher-contrast / emphasized text — headings, titles.

  29.    * (--admin-color-text-on-primary, below, is text on a primary-colored fill.)

  30.    */

  31.   --admin-color-text: light-dark(var(--admin-color-gray-950), #d2d3d3);

  32.   --admin-color-text-soft: light-dark(var(--admin-color-gray-800), #9e9fa0);

  33.   --admin-color-text-loud: light-dark(var(--admin-color-gray-950), white);

  34. 

  35.   /*

  36.    * Surfaces.

  37.    *

  38.    *   -surface         default surface — cards, panes, tables, page chrome.

  39.    *   -surface-nested  a surface recessed inside another surface (e.g. a panel

  40.    *                    within a card; also the form-control fill in dark mode).

  41.    *   -raised          floating ABOVE the page — dropdowns, tooltips, contextual

  42.    *                    links, the sticky toolbar. The most "popped" surface

  43.    *                    (lightest in dark mode).

  44.    *   -sunken          an inset WELL — code blocks, recessed/embedded regions

  45.    *                    (darker than the canvas in both modes).

  46.    *   -input           form-control background.

  47.    *   -header          table/section header tint and the sticky page header.

  48.    */

  49.   --admin-color-bg: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), #1b1b1d);

  50.   --admin-color-bg-surface: light-dark(var(--admin-color-white), #2a2a2d);

  51.   --admin-color-bg-surface-nested: light-dark(#edeff5, #3b3b3f);

  52.   --admin-color-bg-raised: light-dark(var(--admin-color-white), #47474c);

  53.   --admin-color-bg-sunken: light-dark(#e2e5ec, #19191b);

  54.   --admin-color-bg-input: light-dark(var(--admin-color-white), #3b3b3f);

  55.   --admin-color-bg-header: light-dark(#e1eafc, #1b1b1d);

  56.   --admin-color-bg-unpublished: light-dark(var(--admin-color-bg-error), var(--admin-color-bg-warning));

  57.   --admin-color-icon: light-dark(#414247, #888);

  58. 

  59.   /*

  60.    * Borders. Contrast ladder soft / (default) / loud.

  61.    *   --admin-color-border        default divider/edge — cards, panes, controls.

  62.    *   --admin-color-border-soft   subtle/translucent hairline; also soft shadows.

  63.    *   --admin-color-border-loud   strongest divider — table-header separators.

  64.    *   --admin-color-border-input  form-control border.

  65.    *   --admin-color-border-table  thin table row divider (soft in light, default

  66.    *                               edge in dark).

  67.    */

  68.   --admin-color-border: light-dark(var(--admin-color-gray-200), #43454a);

  69.   --admin-color-border-soft: light-dark(color-mix(in lch, black 8%, transparent), color-mix(in lch, black 5%, transparent));

  70.   --admin-color-border-loud: light-dark(color-mix(in lch, black 30%, transparent), color-mix(in lch, white 40%, transparent));

  71.   --admin-color-border-input: light-dark(var(--admin-color-gray-500), #76777b);

  72.   --admin-color-border-table: light-dark(color-mix(in srgb, black 10%, transparent), #43454a);

  73.   --admin-color-text-on-primary: light-dark(var(--admin-color-white), #111);

  74.   --admin-color-switch: light-dark(#26a769, var(--admin-color-accent-100));

  75.   --admin-color-bg-inverse: light-dark(var(--admin-color-gray-950), var(--admin-color-bg-raised));

  76. 

  77.   /*

  78.    * Elevation shadows.

  79.    */

  80.   --admin-shadow-color-1: light-dark(color-mix(in srgb, #142d52 2%, transparent), color-mix(in srgb, black 2%, transparent));

  81.   --admin-shadow-color-2: light-dark(color-mix(in srgb, #142d52 3%, transparent), color-mix(in srgb, black 3%, transparent));

  82.   --admin-shadow-color-3: light-dark(color-mix(in srgb, #142d52 4%, transparent), color-mix(in srgb, black 4%, transparent));

  83.   --admin-shadow-color-4: light-dark(color-mix(in srgb, #142d52 12%, transparent), color-mix(in srgb, black 12%, transparent));

  84.   --admin-shadow-color-button: light-dark(#0003, transparent);

  85.   --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);

  86.   --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);

  87. 

  88.   /*

  89.    * Status — each family has three roles:

  90.    *   --admin-color-{status}       solid — icons, borders, emphasis on a neutral bg.

  91.    *   --admin-color-bg-{status}    the light tint behind highlighted rows / reports.

  92.    *   --admin-color-text-{status}  text ON that tint (AA-verified pair).

  93.    */

  94.   --admin-color-error: light-dark(#cc3d3d, #ce6060);

  95.   --admin-color-bg-error: color-mix(in srgb, #de7560 15%, transparent);

  96.   --admin-color-text-error: light-dark(#cc3d3d, #e69e9e);

  97.   --admin-color-warning: light-dark(#d8b234, #dec15f);

  98.   --admin-color-bg-warning: color-mix(in srgb, #e29700 15%, transparent);

  99.   --admin-color-text-warning: light-dark(#826b1f, #e8d185);

  100.   --admin-color-success: light-dark(#058260, #32cea4);

  101.   --admin-color-bg-success: light-dark(#26a76930, #26a76940);

  102.   --admin-color-text-success: light-dark(#1d6844, #8bd3b1);

  103. 

  104.   /*

  105.    * Focus & disabled.

  106.    *   --admin-color-focus          focus-ring color.

  107.    *   --admin-color-focus-border   inner focus-ring border.

  108.    *   --admin-color-focus-neutral  neutral focus-ring variant ([data-gin-focus]).

  109.    *   --admin-color-text-disabled / -bg-disabled / -border-disabled  disabled controls.

  110.    */

  111.   --admin-color-focus: light-dark(color-mix(in srgb, #007dfa 60%, transparent), #51a8ff);

  112.   /* @todo this is used in box-shadow focus states, which will be phased out in favor of outline. */

  113.   --admin-color-focus-border: light-dark(color-mix(in lch, black 20%, transparent), color-mix(in lch, black 80%, transparent));

  114.   --admin-color-focus-neutral: light-dark(color-mix(in lch, black 40%, transparent), color-mix(in lch, white 80%, transparent));

  115.   --admin-color-text-disabled: light-dark(var(--admin-color-gray-700), #919191);

  116.   --admin-color-bg-disabled: light-dark(#eaeaea, #47474c);

  117.   --admin-color-border-disabled: light-dark(var(--admin-color-gray-300), #646464);

  118. 

  119.   /*

  120.    * Link / interactive blue. Used for links and blue focus/selected accents

  121.    * (text, border, and bg).

  122.    */

  123.   --admin-color-link: var(--admin-color-primary);

  124.   --admin-color-link-hover: light-dark(var(--admin-color-accent-600), var(--admin-color-accent-700));

  125.   --admin-color-link-active: light-dark(var(--admin-color-accent-700), var(--admin-color-accent-900));

  126. }

  127. 

  128. @media (forced-colors: active) {

  129.   :root {

  130.     --admin-color-icon: CanvasText;

  131.   }

  132. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.