variables-color-semantic.css

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

/*
 * @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 0.1875rem 0.25rem var(--admin-shadow-color-2), 0 0.3125rem 0.5rem var(--admin-shadow-color-3);
  --admin-shadow-2: 0 1px 2px var(--admin-shadow-color-1), 0 0.1875rem 0.25rem var(--admin-shadow-color-2), 0 0.3125rem 0.5rem var(--admin-shadow-color-3), 0 1.25rem 1.5rem 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.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /*

  9.  * @file

  10.  * Semantic CSS color variables.

  11.  */

  12. 

  13. .root,

  14. [data-gin-accent] {

  15.   /*

  16.   * Accent colors.

  17.   */

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

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

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

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

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

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

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

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

  26. 

  27.   /*

  28.    * Semantic tokens (tier 2).

  29.    */

  30.   /*

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

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

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

  34.    *                            descriptions. Quieter; recedes.

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

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

  37.    */

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

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

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

  41. 

  42.   /*

  43.    * Surfaces.

  44.    *

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

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

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

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

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

  50.    *                    (lightest in dark mode).

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

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

  53.    *   -input           form-control background.

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

  55.    */

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

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

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

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

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

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

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

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

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

  65. 

  66.   /*

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

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

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

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

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

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

  73.    *                               edge in dark).

  74.    */

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

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

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

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

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

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

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

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

  83. 

  84.   /*

  85.    * Elevation shadows.

  86.    */

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

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

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

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

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

  92.   --admin-shadow-1: 0 1px 2px var(--admin-shadow-color-1), 0 0.1875rem 0.25rem var(--admin-shadow-color-2), 0 0.3125rem 0.5rem var(--admin-shadow-color-3);

  93.   --admin-shadow-2: 0 1px 2px var(--admin-shadow-color-1), 0 0.1875rem 0.25rem var(--admin-shadow-color-2), 0 0.3125rem 0.5rem var(--admin-shadow-color-3), 0 1.25rem 1.5rem var(--admin-shadow-color-4);

  94. 

  95.   /*

  96.    * Status — each family has three roles:

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

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

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

  100.    */

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

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

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

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

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

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

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

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

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

  110. 

  111.   /*

  112.    * Focus & disabled.

  113.    *   --admin-color-focus          focus-ring color.

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

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

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

  117.    */

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

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

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

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

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

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

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

  125. 

  126.   /*

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

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

  129.    */

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

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

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

  133. }

  134. 

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

  136.   :root {

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

  138.   }

  139. }

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