accents.css

Same filename and directory in other branches
  1. main core/themes/admin/css/base/accents.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

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

  /*
   * Mix base.
   */
  --accent-color-base: var(--accent-base);
  --accent-mix-base: color-mix(in lch, var(--accent-base), #fff 97%);
  --accent-mix-base-dark: black;
  --app-bg-color: color-mix(in lch, var(--accent-base), #fff 97%);
  --layer-background: #fff;

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

  /*
   * Polyfill for Admin theme.
   */
  --gin-bg-app: var(--app-bg-color);
  --gin-color-primary: var(--accent-color-500);
  --gin-color-primary-hover: var(--accent-color-550);
  --gin-color-primary-active: var(--accent-color-600);
  --gin-color-primary-light: var(--accent-color-030);
  --gin-color-primary-light-hover: var(--accent-color-040);
  --gin-color-primary-light-active: var(--accent-color-050);
  --gin-bg-item: var(--accent-color-020);
  --gin-bg-item-hover: var(--accent-color-030);
  --gin-shadow-primary-light: var(--accent-color-030);
  --gin-bg-header: color-mix(var(--layer-background), var(--accent-color-500) 87.5%);
}

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

.gin--dark-mode [data-gin-accent],
.gin--dark-mode[data-gin-accent] {
  --accent-color-base: color-mix(in lch, lch(from var(--accent-base) calc(l * 20) c h), #000 12%);
  --accent-mix-base: color-mix(in lch, var(--accent-base), #000 80%);
  --accent-mix-base-dark: white;
  --app-bg-color: #1b1b1d;
  --layer-background: #2a2a2d;
}

File

View on git.drupalcode.org

core/themes/admin/css/base/accents.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. [data-gin-accent] {

  9.   /*

  10.    * Default accent color.

  11.    */

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

  13. 

  14.   /*

  15.    * Mix base.

  16.    */

  17.   --accent-color-base: var(--accent-base);

  18.   --accent-mix-base: color-mix(in lch, var(--accent-base), #fff 97%);

  19.   --accent-mix-base-dark: black;

  20.   --app-bg-color: color-mix(in lch, var(--accent-base), #fff 97%);

  21.   --layer-background: #fff;

  22. 

  23.   /*

  24.    * Base accent colors.

  25.    */

  26.   --accent-color-010: color-mix(in lch, var(--accent-mix-base) 95%, var(--accent-color-base));

  27.   --accent-color-020: color-mix(in lch, var(--accent-mix-base) 90%, var(--accent-color-base));

  28.   --accent-color-030: color-mix(in lch, var(--accent-mix-base) 85%, var(--accent-color-base));

  29.   --accent-color-040: color-mix(in lch, var(--accent-mix-base) 80%, var(--accent-color-base));

  30.   --accent-color-050: color-mix(in lch, var(--accent-mix-base) 75%, var(--accent-color-base));

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

  32.   --accent-color-200: color-mix(in lch, var(--accent-mix-base) 45%, var(--accent-color-base));

  33.   --accent-color-300: color-mix(in lch, var(--accent-mix-base) 30%, var(--accent-color-base));

  34.   --accent-color-400: color-mix(in lch, var(--accent-mix-base) 15%, var(--accent-color-base));

  35.   --accent-color-500: var(--accent-color-base);

  36.   --accent-color-550: color-mix(in lch, var(--accent-mix-base-dark) 8%, var(--accent-color-base));

  37.   --accent-color-600: color-mix(in lch, var(--accent-mix-base-dark) 15%, var(--accent-color-base));

  38.   --accent-color-700: color-mix(in lch, var(--accent-mix-base-dark) 30%, var(--accent-color-base));

  39.   --accent-color-800: color-mix(in lch, var(--accent-mix-base-dark) 45%, var(--accent-color-base));

  40.   --accent-color-900: color-mix(in lch, var(--accent-mix-base-dark) 60%, var(--accent-color-base));

  41. 

  42.   /*

  43.    * Polyfill for Admin theme.

  44.    */

  45.   --gin-bg-app: var(--app-bg-color);

  46.   --gin-color-primary: var(--accent-color-500);

  47.   --gin-color-primary-hover: var(--accent-color-550);

  48.   --gin-color-primary-active: var(--accent-color-600);

  49.   --gin-color-primary-light: var(--accent-color-030);

  50.   --gin-color-primary-light-hover: var(--accent-color-040);

  51.   --gin-color-primary-light-active: var(--accent-color-050);

  52.   --gin-bg-item: var(--accent-color-020);

  53.   --gin-bg-item-hover: var(--accent-color-030);

  54.   --gin-shadow-primary-light: var(--accent-color-030);

  55.   --gin-bg-header: color-mix(var(--layer-background), var(--accent-color-500) 87.5%);

  56. }

  57. 

  58. @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {

  59.   [data-gin-accent] {

  60.     /* stylelint-disable-next-line color-function-notation */

  61.     --accent-color-010: rgb(from var(--accent-color-base) r g b / 0.05);

  62.     /* stylelint-disable-next-line color-function-notation */

  63.     --accent-color-020: rgb(from var(--accent-color-base) r g b / 0.1);

  64.     /* stylelint-disable-next-line color-function-notation */

  65.     --accent-color-030: rgb(from var(--accent-color-base) r g b / 0.15);

  66.     /* stylelint-disable-next-line color-function-notation */

  67.     --accent-color-040: rgb(from var(--accent-color-base) r g b / 0.2);

  68.   }

  69. }

  70. 

  71. .gin--dark-mode [data-gin-accent],

  72. .gin--dark-mode[data-gin-accent] {

  73.   --accent-color-base: color-mix(in lch, lch(from var(--accent-base) calc(l * 20) c h), #000 12%);

  74.   --accent-mix-base: color-mix(in lch, var(--accent-base), #000 80%);

  75.   --accent-mix-base-dark: white;

  76.   --app-bg-color: #1b1b1d;

  77.   --layer-background: #2a2a2d;

  78. }

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