variables-color-primitive.pcss.css

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

.root,
[data-gin-accent] {
  /*
   * Tier 1 (primitive colors).
   */
  --admin-color-white: white;
  --admin-color-gray-950: #222330;
  --admin-color-gray-900: #393a3f;
  --admin-color-gray-800: #545560;
  --admin-color-gray-700: #767676;
  --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-blue-900: #000f33;
  --admin-color-blue-700: #002e9a;
  --admin-color-blue-650: #0036b1;
  --admin-color-blue-600: #003ecc;
  --admin-color-blue-050: #e5edff;

  /*
   * Default accent color. Will get overridden by inline style.
   */
  --accent-base: #015efe;

  /*
   * Mix base. These are only used as utilities to compose other colors.
   */
  --admin-color-accent-base: light-dark(var(--accent-base), color-mix(in lch, lch(from var(--accent-base) calc(l * 20) c h), black 12%));
  --accent-mix-base: light-dark(color-mix(in lch, var(--accent-base), white 97%), color-mix(in lch, var(--accent-base), black 80%));
  --accent-mix-base-scheme: light-dark(black, white);

  /*
   * Base accent colors.
   */
  --admin-color-accent-020: color-mix(in lch, var(--admin-color-accent-base) 10%, transparent);
  --admin-color-accent-030: color-mix(in lch, var(--admin-color-accent-base) 15%, transparent);
  --admin-color-accent-040: color-mix(in lch, var(--admin-color-accent-base) 20%, transparent);
  --admin-color-accent-100: color-mix(in lch, var(--accent-mix-base) 60%, 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-scheme) 8%, var(--admin-color-accent-base));
  --admin-color-accent-600: color-mix(in lch, var(--accent-mix-base-scheme) 15%, var(--admin-color-accent-base));
  --admin-color-accent-700: color-mix(in lch, var(--accent-mix-base-scheme) 30%, var(--admin-color-accent-base));
  --admin-color-accent-900: color-mix(in lch, var(--accent-mix-base-scheme) 60%, var(--admin-color-accent-base));
}

File

View on git.drupalcode.org

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

View source 
  1. /*

  2.  * @file

  3.  * Primitive CSS color variables.

  4.  */

  5. 

  6. .root,

  7. [data-gin-accent] {

  8.   /*

  9.    * Tier 1 (primitive colors).

  10.    */

  11.   --admin-color-white: white;

  12.   --admin-color-gray-950: #222330;

  13.   --admin-color-gray-900: #393a3f;

  14.   --admin-color-gray-800: #545560;

  15.   --admin-color-gray-700: #767676;

  16.   --admin-color-gray-500: #8e929c;

  17.   --admin-color-gray-400: #adaeb3;

  18.   --admin-color-gray-300: #c2c2c2;

  19.   --admin-color-gray-200: #d4d4d8;

  20.   --admin-color-gray-100: #dedfe4;

  21.   --admin-color-blue-900: #000f33;

  22.   --admin-color-blue-700: #002e9a;

  23.   --admin-color-blue-650: #0036b1;

  24.   --admin-color-blue-600: #003ecc;

  25.   --admin-color-blue-050: #e5edff;

  26. 

  27.   /*

  28.    * Default accent color. Will get overridden by inline style.

  29.    */

  30.   --accent-base: #015efe;

  31. 

  32.   /*

  33.    * Mix base. These are only used as utilities to compose other colors.

  34.    */

  35.   --admin-color-accent-base: light-dark(var(--accent-base), color-mix(in lch, lch(from var(--accent-base) calc(l * 20) c h), black 12%));

  36.   --accent-mix-base: light-dark(color-mix(in lch, var(--accent-base), white 97%), color-mix(in lch, var(--accent-base), black 80%));

  37.   --accent-mix-base-scheme: light-dark(black, white);

  38. 

  39.   /*

  40.    * Base accent colors.

  41.    */

  42.   --admin-color-accent-020: color-mix(in lch, var(--admin-color-accent-base) 10%, transparent);

  43.   --admin-color-accent-030: color-mix(in lch, var(--admin-color-accent-base) 15%, transparent);

  44.   --admin-color-accent-040: color-mix(in lch, var(--admin-color-accent-base) 20%, transparent);

  45.   --admin-color-accent-100: color-mix(in lch, var(--accent-mix-base) 60%, var(--admin-color-accent-base));

  46.   --admin-color-accent-500: var(--admin-color-accent-base);

  47.   --admin-color-accent-550: color-mix(in lch, var(--accent-mix-base-scheme) 8%, var(--admin-color-accent-base));

  48.   --admin-color-accent-600: color-mix(in lch, var(--accent-mix-base-scheme) 15%, var(--admin-color-accent-base));

  49.   --admin-color-accent-700: color-mix(in lch, var(--accent-mix-base-scheme) 30%, var(--admin-color-accent-base));

  50.   --admin-color-accent-900: color-mix(in lch, var(--accent-mix-base-scheme) 60%, var(--admin-color-accent-base));

  51. }

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