Verified Commit 066a1838 authored by Lee Rowlands's avatar Lee Rowlands
Browse files

task: #3606571 Round 2 of consolidating CSS Variables 

By: mherchel
By: bernardm28
By: larowlan
(cherry picked from commit 701c6cd1)
parent d63d1580

core/modules/navigation/css/components/toolbar-workspaces.css

+4 −4
Changes for core/modules/navigation/css/components/toolbar-workspaces.css: 4 added lines, 4 removed lines.
Original line number Diff line number Diff line
@@ -4,12 +4,11 @@ 
 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * Styling for the Workspaces navigation item.

 */



[data-drupal-admin-styles] {

  .toolbar-button--workspaces {

    --toolbar-button-bg: var(--admin-toolbar-color-orange-300);

    --toolbar-button-color: var(--admin-toolbar-color-gray-990);
@@ -20,6 +19,7 @@ 
  .toolbar-button--workspaces--live {

    --toolbar-button-bg: #87cc5f;

    --toolbar-button-color: var(--admin-toolbar-color-gray-990);

  --toolbar-button-hover-bg: #87cc5f;

  --toolbar-button-current-bg: #87cc5f;

    --toolbar-button-hover-bg: var(--toolbar-button-bg);

    --toolbar-button-current-bg: var(--toolbar-button-bg);

  }

}

core/modules/navigation/css/components/toolbar-workspaces.pcss.css

+4 −3
Changes for core/modules/navigation/css/components/toolbar-workspaces.pcss.css: 4 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
 * @file

 * Styling for the Workspaces navigation item.

 */



[data-drupal-admin-styles] {

  .toolbar-button--workspaces {

    --toolbar-button-bg: var(--admin-toolbar-color-orange-300);

    --toolbar-button-color: var(--admin-toolbar-color-gray-990);
@@ -13,6 +13,7 @@ 
  .toolbar-button--workspaces--live {

    --toolbar-button-bg: #87cc5f;

    --toolbar-button-color: var(--admin-toolbar-color-gray-990);

  --toolbar-button-hover-bg: #87cc5f;

  --toolbar-button-current-bg: #87cc5f;

    --toolbar-button-hover-bg: var(--toolbar-button-bg);

    --toolbar-button-current-bg: var(--toolbar-button-bg);

  }

}

core/themes/default_admin/css/_variables/variables-color-accent.css

deleted100644 → 0
+0 −90
Changes for core/themes/default_admin/css/_variables/variables-color-accent.css: 0 added lines, 90 removed lines.
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

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

 * @preserve

 */



/**

 * @file

 * Accent color tokens — the accent ramp and the semantic tokens derived from it.

 *

 * Scoped to [data-gin-accent] (set on <html>). Builds the --admin-color-accent-*

 * ramp from --accent-base (written at runtime by the accent picker JS) via

 * color-mix(in lch), and maps it onto the canonical semantic tokens

 * (--admin-color-primary*, --admin-color-bg, --admin-color-bg-item*). Each value

 * is a single light-dark() pair so the whole ramp recomputes per color-scheme

 * from one selector.

 *

 * This is distinct from theme/accent.css, which holds the per-variant overrides

 * ([data-gin-accent="blue"] …) plus the focus-ring and high-contrast tweaks.

 *

 * Loads FIRST in the _variables group: it shares specificity (0,1,0) with the

 * :root token files, so source order breaks ties — see default_admin.libraries.yml.

 */



[data-gin-accent] {

  /*

   * Default accent color.

   */

  --accent-base: #015efe;



  /*

   * Mix base.

   *

   * Each value is a single light-dark() pair, so the whole accent ramp below

   * (and everything derived from it) recomputes per color-scheme from ONE

   * selector — the former `.gin--dark-mode [data-gin-accent]` override block is

   * gone. light-dark() resolves correctly inside color-mix()/relative-color.

   */

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

  --accent-mix-base: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), color-mix(in lch, var(--accent-base), #000 80%));

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

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

  --layer-background: light-dark(#fff, #2a2a2d);



  /*

   * Base accent colors.

   */

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

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

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

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

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

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

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

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

  --admin-color-accent-400: color-mix(in lch, var(--accent-mix-base) 15%, 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-dark) 8%, var(--admin-color-accent-base));

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

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

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

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



  /*

   * Polyfill for Default Admin theme.

   */

  --admin-color-bg: var(--app-bg-color);

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

}



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

  [data-gin-accent] {

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

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

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

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

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

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

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

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

  }

}

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

deleted100644 → 0
+0 −83
Changes for core/themes/default_admin/css/_variables/variables-color-accent.pcss.css: 0 added lines, 83 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Accent color tokens — the accent ramp and the semantic tokens derived from it.

 *

 * Scoped to [data-gin-accent] (set on <html>). Builds the --admin-color-accent-*

 * ramp from --accent-base (written at runtime by the accent picker JS) via

 * color-mix(in lch), and maps it onto the canonical semantic tokens

 * (--admin-color-primary*, --admin-color-bg, --admin-color-bg-item*). Each value

 * is a single light-dark() pair so the whole ramp recomputes per color-scheme

 * from one selector.

 *

 * This is distinct from theme/accent.css, which holds the per-variant overrides

 * ([data-gin-accent="blue"] …) plus the focus-ring and high-contrast tweaks.

 *

 * Loads FIRST in the _variables group: it shares specificity (0,1,0) with the

 * :root token files, so source order breaks ties — see default_admin.libraries.yml.

 */



[data-gin-accent] {

  /*

   * Default accent color.

   */

  --accent-base: #015efe;



  /*

   * Mix base.

   *

   * Each value is a single light-dark() pair, so the whole accent ramp below

   * (and everything derived from it) recomputes per color-scheme from ONE

   * selector — the former `.gin--dark-mode [data-gin-accent]` override block is

   * gone. light-dark() resolves correctly inside color-mix()/relative-color.

   */

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

  --accent-mix-base: light-dark(color-mix(in lch, var(--accent-base), #fff 97%), color-mix(in lch, var(--accent-base), #000 80%));

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

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

  --layer-background: light-dark(#fff, #2a2a2d);



  /*

   * Base accent colors.

   */

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

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

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

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

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

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

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

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

  --admin-color-accent-400: color-mix(in lch, var(--accent-mix-base) 15%, 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-dark) 8%, var(--admin-color-accent-base));

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

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

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

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



  /*

   * Polyfill for Default Admin theme.

   */

  --admin-color-bg: var(--app-bg-color);

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

}



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

  [data-gin-accent] {

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

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

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

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

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

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

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

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

  }

}

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

0 → 100644
+58 −0
Changes for core/themes/default_admin/css/_variables/variables-color-primitive.css: 58 added lines, 0 removed lines.
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

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

 * @preserve

 */



/*

 * @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));

}