variables.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/base/variables.css
  2. 11.x core/modules/navigation/css/base/variables.css
Same filename in other branches
  1. 9 core/themes/olivero/css/base/variables.css
  2. 9 core/themes/claro/css/base/variables.css
  3. 8.9.x core/themes/claro/css/base/variables.css
  4. 10 core/themes/olivero/css/base/variables.css
  5. 10 core/themes/claro/css/base/variables.css
  6. 10 core/modules/navigation/css/base/variables.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
:root {
  /*
   * Color Palette.
   */
  --color-absolutezero: var(--color-blue-600);
  --color-white: #fff;
  --color-text: var(--color-gray);
  --color-text-light: var(--color-gray-500);
  --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
  /* Secondary. */
  --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
  --color-maximumred: var(--color-red-500);
  --color-sunglow: #ffd23f;
  --color-sunglow-shaded: #977405;
  --color-lightninggreen: #26a769;
  --color-focus: var(--color-lightninggreen);
  /* Variations. */
  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
  --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
  --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
  --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
  --color-bgred-active: var(--color-red-050); /* 10% darker than base. */
  /* Gray variations. */
  --color-gray: #232429;
  --color-gray-900: #393a3f;
  --color-gray-800: #55565b;
  --color-gray-700: #75767b;
  --color-gray-600: #828388;
  --color-gray-500: #919297;
  --color-gray-400: #adaeb3;
  --color-gray-300: #c1c2c7;
  --color-gray-200: #d3d4d9;
  --color-gray-100: #dedfe4;
  --color-gray-050: #f3f4f9;
  --color-gray-025: #f9faff;
  /* Blue variations. */
  --color-blue: var(--color-blue-600);
  --color-blue-900: #000f33;
  --color-blue-800: #001f66;
  --color-blue-700: #002e9a;
  --color-blue-650: #0036b1;
  --color-blue-600: #003ecc;
  --color-blue-500: #004eff;
  --color-blue-400: #3371ff;
  --color-blue-300: #6694ff;
  --color-blue-200: #99b8ff;
  --color-blue-100: #ccdbff;
  --color-blue-070: #dbe6ff;
  --color-blue-050: #e5edff;
  --color-blue-020: #f5f8ff;
  /* Red variations. */
  --color-red: var(--color-red-500);
  --color-red-900: #2c0707;
  --color-red-800: #580e0e;
  --color-red-700: #841515;
  --color-red-600: #b01c1c;
  --color-red-550: #c61f1f;
  --color-red-500: #dc2323;
  --color-red-400: #e34f4f;
  --color-red-300: #ea7b7b;
  --color-red-200: #f1a7a7;
  --color-red-100: #f8d3d3;
  --color-red-070: #fae0e0;
  --color-red-050: #fce9e9;
  --color-red-020: #fdf5f5;
  /*
   * Base.
   */
  --color-fg: var(--color-text);
  --color-bg: var(--color-white);
  --color-link: var(--color-absolutezero);
  --color-link-hover: var(--color-absolutezero-hover);
  --color-link-active: var(--color-absolutezero-active);
  --color-divider: rgba(142, 146, 156, 0.5);
  /*
   * Typography.
   */
  --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-serif: "Times New Roman", times, serif;
  --line-height: 1.5;
  --line-height-heading: 1.3;
  --line-height-form-label: calc(18rem / 16); /* 18px */
  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  --font-size-xl: 2.25rem; /* ~36px */
  --font-size-h1: 2.027rem; /* ~32px */
  --font-size-h2: 1.802rem; /* ~29px */
  --font-size-h3: 1.602rem; /* ~26px */
  --font-size-h4: 1.424rem; /* ~23px */
  --font-size-h5: 1.266rem; /* ~20px */
  --font-size-h6: 1.125rem; /* 18px */
  --font-size-s: 0.889rem; /* ~14px */
  --font-size-xs: 0.79rem; /* ~13px */
  --font-size-xxs: 0.702rem; /* ~11px */
  --font-size-label: var(--font-size-s);
  --font-size-description: var(--font-size-xs);
  /**
   * Spaces.
   */
  --space-xl: 3rem; /* 3 * 16px = 48px */
  --space-l: 1.5rem; /* 1.5 * 16px = 24px */
  --space-m: 1rem; /* 1 * 16px = 16px */
  --space-s: 0.75rem; /* 0.75 * 16px = 12px */
  --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
  /*
   * Common.
   */
  --speed-transition: 0.2s;
  --transition: all var(--speed-transition) ease-out;
  --base-border-radius: 2px;
  --focus-border-size: 0.1875rem;
  --focus-border-offset-size: 2px;
  --outline-size: 2px;
  --focus-outline: var(--outline-size) dotted transparent;
  --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
  /**
   * Shadows.
   */
  --shadow-z3: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.1);
  /*
   * Inputs.
   */
  --input-fg-color: var(--color-fg);
  --input-bg-color: var(--color-bg);
  --input-fg-color--description: var(--color-gray-800);
  --input-fg-color--placeholder: var(--color-gray-700);
  --input-border-color: var(--color-gray-500);
  --input--hover-border-color: var(--color-text);
  --input--focus-border-color: var(--color-absolutezero);
  --input--error-color: var(--color-maximumred);
  --input--error-border-color: var(--color-maximumred);
  --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
  --input--disabled-fg-color: var(--color-gray-800);
  --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
  --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
  --input--disabled-border-opacity: 0.5;
  --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
  --input-border-size: 1px; /* (1/16)em ~ 1px */
  --input--error-border-size: 2px;
  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
  --input-font-size: var(--font-size-base);
  --input-line-height: var(--space-l);
  --input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
  --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
  --input-font-size--small: var(--font-size-xs);
  --input-line-height--small: 1.3125rem;
  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
  --input--extrasmall-font-size: var(--font-size-s);
  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
  --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
  --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  --details-border-color: var(--color-gray-100);
  --details-summary-shadow-color: var(--color-focus);
  --details-summary-focus-border-size: var(--focus-border-size);
  --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  --details-box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
  --details-border-size: 1px;
  --details-border-size-radius: 2px;
  --details-accordion-border-size-radius: var(--base-border-radius);
  --details-spread-box-shadow-radius: 2px;
  --details-bg-color-transition-duration: 0.12s;
  --details-box-shadow-transition-duration: 0.2s;
  --details-transform-transition-duration: 0.12s;
  --details-line-height: 1.295rem;
  /**
   * Buttons.
   */
  --button--focus-border-color: var(--color-blue-300);
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-text);
  --button-bg-color: var(--color-gray-200);
  --button--hover-bg-color: var(--color-gray-300);
  --button--active-bg-color: var(--color-gray-400);
  --button--disabled-bg-color: #ebebed;
  --button--disabled-fg-color: var(--color-gray-500);
  --button-fg-color--primary: var(--color-white);
  --button-bg-color--primary: var(--color-absolutezero);
  --button--hover-bg-color--primary: var(--color-absolutezero-hover);
  --button--active-bg-color--primary: var(--color-absolutezero-active);
  --button--focus-bg-color--primary: var(--button-bg-color--primary);
  --button--disabled-bg-color--primary: var(--color-gray-200);
  --button--disabled-fg-color--primary: var(--color-gray-600);
  --button-fg-color--danger: var(--color-white);
  --button-bg-color--danger: var(--color-maximumred);
  --button--hover-bg-color--danger: var(--color-maximumred-hover);
  --button--active-bg-color--danger: var(--color-maximumred-active);
  --dropbutton-widget-z-index: 100;
  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--color-gray-800);
  --jui-dropdown-bg-color: var(--color-white);
  --jui-dropdown--active-fg-color: var(--color-white);
  --jui-dropdown--active-bg-color: var(--color-absolutezero);
  --jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
  --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
  /**
   * jQuery.UI dialog.
   */
  --jui-dialog-title-color: var(--color-white);
  --jui-dialog-title-bg-color: var(--color-text);
  --jui-dialog-title-font-size: var(--font-size-h4);
  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
  --jui-dialog-close-button-border-radius: 50%;
  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
  --jui-dialog-border-radius: 0.25rem;
  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
  --jui-dialog--focus-outline: 2px dotted transparent;
  --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
  --jui-dialog-z-index: 1260;
  --jui-dialog-off-canvas-z-index: 501;
  /**
   * Progress bar.
   */
  --progress-bar-border-size: 1px;
  --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
  --progress-bar-small-size-radius: var(--space-xs);
  --progress-bar-spacing-size: var(--space-xs);
  --progress-bar-transition: width 0.5s ease-out;
  --progress-bar-label-color: var(--color-text);
  --progress-bar-description-color: var(--color-gray-800);
  --progress-bar-description-font-size: var(--font-size-xs);
  --progress-track-border-color: var(--color-gray-500);
  --progress-track-bg-color: var(--color-gray-200);
  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--space-s);
  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;
  /**
   * Layout.
   */
  --layout-region-edit-width: min(60rem, 100%);
  --layout-region-edit-extended-width: min(68rem, 100%);
  /**
   * Vertical Tabs.
   *
   * These are shared between the vertical tabs and media library.
   * @see ../components/vertical-tabs.pcss.css
   * @see ../theme/media-library.pcss.css
   */
  --vertical-tabs-margin-vertical: var(--space-s);
  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
  --vertical-tabs-shadow: var(--details-box-shadow);
  --vertical-tabs-border-color: var(--details-border-color);
  --vertical-tabs-border-size: 1px;
  --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
  --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
  --vertical-tabs-menu-separator-color: var(--color-gray-200);
  --vertical-tabs-menu-separator-size: 1px;
  --vertical-tabs-menu-width: 20em;
  --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
  --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
  --vertical-tabs-menu-link--active-border-size: 0.25rem;
  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
  --vertical-tabs-menu--z-index: 0;
}

File

core/themes/claro/css/base/variables.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. :root {

  8.   /*

  9.    * Color Palette.

  10.    */

  11.   --color-absolutezero: var(--color-blue-600);

  12.   --color-white: #fff;

  13.   --color-text: var(--color-gray);

  14.   --color-text-light: var(--color-gray-500);

  15.   --color-gray-050-o-40: rgba(243, 244, 249, 0.4);

  16.   /* Secondary. */

  17.   --color-gray-200-o-80: rgba(212, 212, 218, 0.8);

  18.   --color-maximumred: var(--color-red-500);

  19.   --color-sunglow: #ffd23f;

  20.   --color-sunglow-shaded: #977405;

  21.   --color-lightninggreen: #26a769;

  22.   --color-focus: var(--color-lightninggreen);

  23.   /* Variations. */

  24.   --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */

  25.   --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */

  26.   --color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */

  27.   --color-maximumred-active: var(--color-red-600); /* 10% darker than base. */

  28.   --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */

  29.   --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */

  30.   --color-bgred-hover: var(--color-red-020); /* 5% darker than base. */

  31.   --color-bgred-active: var(--color-red-050); /* 10% darker than base. */

  32.   /* Gray variations. */

  33.   --color-gray: #232429;

  34.   --color-gray-900: #393a3f;

  35.   --color-gray-800: #55565b;

  36.   --color-gray-700: #75767b;

  37.   --color-gray-600: #828388;

  38.   --color-gray-500: #919297;

  39.   --color-gray-400: #adaeb3;

  40.   --color-gray-300: #c1c2c7;

  41.   --color-gray-200: #d3d4d9;

  42.   --color-gray-100: #dedfe4;

  43.   --color-gray-050: #f3f4f9;

  44.   --color-gray-025: #f9faff;

  45.   /* Blue variations. */

  46.   --color-blue: var(--color-blue-600);

  47.   --color-blue-900: #000f33;

  48.   --color-blue-800: #001f66;

  49.   --color-blue-700: #002e9a;

  50.   --color-blue-650: #0036b1;

  51.   --color-blue-600: #003ecc;

  52.   --color-blue-500: #004eff;

  53.   --color-blue-400: #3371ff;

  54.   --color-blue-300: #6694ff;

  55.   --color-blue-200: #99b8ff;

  56.   --color-blue-100: #ccdbff;

  57.   --color-blue-070: #dbe6ff;

  58.   --color-blue-050: #e5edff;

  59.   --color-blue-020: #f5f8ff;

  60.   /* Red variations. */

  61.   --color-red: var(--color-red-500);

  62.   --color-red-900: #2c0707;

  63.   --color-red-800: #580e0e;

  64.   --color-red-700: #841515;

  65.   --color-red-600: #b01c1c;

  66.   --color-red-550: #c61f1f;

  67.   --color-red-500: #dc2323;

  68.   --color-red-400: #e34f4f;

  69.   --color-red-300: #ea7b7b;

  70.   --color-red-200: #f1a7a7;

  71.   --color-red-100: #f8d3d3;

  72.   --color-red-070: #fae0e0;

  73.   --color-red-050: #fce9e9;

  74.   --color-red-020: #fdf5f5;

  75.   /*

  76.    * Base.

  77.    */

  78.   --color-fg: var(--color-text);

  79.   --color-bg: var(--color-white);

  80.   --color-link: var(--color-absolutezero);

  81.   --color-link-hover: var(--color-absolutezero-hover);

  82.   --color-link-active: var(--color-absolutezero-active);

  83.   --color-divider: rgba(142, 146, 156, 0.5);

  84.   /*

  85.    * Typography.

  86.    */

  87.   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  88.   --font-family-serif: "Times New Roman", times, serif;

  89.   --line-height: 1.5;

  90.   --line-height-heading: 1.3;

  91.   --line-height-form-label: calc(18rem / 16); /* 18px */

  92.   --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */

  93.   --font-size-xl: 2.25rem; /* ~36px */

  94.   --font-size-h1: 2.027rem; /* ~32px */

  95.   --font-size-h2: 1.802rem; /* ~29px */

  96.   --font-size-h3: 1.602rem; /* ~26px */

  97.   --font-size-h4: 1.424rem; /* ~23px */

  98.   --font-size-h5: 1.266rem; /* ~20px */

  99.   --font-size-h6: 1.125rem; /* 18px */

  100.   --font-size-s: 0.889rem; /* ~14px */

  101.   --font-size-xs: 0.79rem; /* ~13px */

  102.   --font-size-xxs: 0.702rem; /* ~11px */

  103.   --font-size-label: var(--font-size-s);

  104.   --font-size-description: var(--font-size-xs);

  105.   /**

  106.    * Spaces.

  107.    */

  108.   --space-xl: 3rem; /* 3 * 16px = 48px */

  109.   --space-l: 1.5rem; /* 1.5 * 16px = 24px */

  110.   --space-m: 1rem; /* 1 * 16px = 16px */

  111.   --space-s: 0.75rem; /* 0.75 * 16px = 12px */

  112.   --space-xs: 0.5rem; /* 0.5 * 16px = 8px */

  113.   /*

  114.    * Common.

  115.    */

  116.   --speed-transition: 0.2s;

  117.   --transition: all var(--speed-transition) ease-out;

  118.   --base-border-radius: 2px;

  119.   --focus-border-size: 0.1875rem;

  120.   --focus-border-offset-size: 2px;

  121.   --outline-size: 2px;

  122.   --focus-outline: var(--outline-size) dotted transparent;

  123.   --focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);

  124.   /**

  125.    * Shadows.

  126.    */

  127.   --shadow-z3: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.1);

  128.   /*

  129.    * Inputs.

  130.    */

  131.   --input-fg-color: var(--color-fg);

  132.   --input-bg-color: var(--color-bg);

  133.   --input-fg-color--description: var(--color-gray-800);

  134.   --input-fg-color--placeholder: var(--color-gray-700);

  135.   --input-border-color: var(--color-gray-500);

  136.   --input--hover-border-color: var(--color-text);

  137.   --input--focus-border-color: var(--color-absolutezero);

  138.   --input--error-color: var(--color-maximumred);

  139.   --input--error-border-color: var(--color-maximumred);

  140.   --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */

  141.   --input--disabled-fg-color: var(--color-gray-800);

  142.   --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */

  143.   --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */

  144.   --input--disabled-border-opacity: 0.5;

  145.   --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */

  146.   --input-border-size: 1px; /* (1/16)em ~ 1px */

  147.   --input--error-border-size: 2px;

  148.   --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));

  149.   --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));

  150.   --input-font-size: var(--font-size-base);

  151.   --input-line-height: var(--space-l);

  152.   --input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));

  153.   --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));

  154.   --input-font-size--small: var(--font-size-xs);

  155.   --input-line-height--small: 1.3125rem;

  156.   --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));

  157.   --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));

  158.   --input--extrasmall-font-size: var(--font-size-s);

  159.   --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */

  160.   --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */

  161.   --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */

  162.   /*

  163.    * Details.

  164.    */

  165.   --details-border-color: var(--color-gray-100);

  166.   --details-summary-shadow-color: var(--color-focus);

  167.   --details-summary-focus-border-size: var(--focus-border-size);

  168.   --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));

  169.   --details-box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);

  170.   --details-border-size: 1px;

  171.   --details-border-size-radius: 2px;

  172.   --details-accordion-border-size-radius: var(--base-border-radius);

  173.   --details-spread-box-shadow-radius: 2px;

  174.   --details-bg-color-transition-duration: 0.12s;

  175.   --details-box-shadow-transition-duration: 0.2s;

  176.   --details-transform-transition-duration: 0.12s;

  177.   --details-line-height: 1.295rem;

  178.   /**

  179.    * Buttons.

  180.    */

  181.   --button--focus-border-color: var(--color-blue-300);

  182.   --button-border-radius-size: var(--base-border-radius);

  183.   --button-fg-color: var(--color-text);

  184.   --button-bg-color: var(--color-gray-200);

  185.   --button--hover-bg-color: var(--color-gray-300);

  186.   --button--active-bg-color: var(--color-gray-400);

  187.   --button--disabled-bg-color: #ebebed;

  188.   --button--disabled-fg-color: var(--color-gray-500);

  189.   --button-fg-color--primary: var(--color-white);

  190.   --button-bg-color--primary: var(--color-absolutezero);

  191.   --button--hover-bg-color--primary: var(--color-absolutezero-hover);

  192.   --button--active-bg-color--primary: var(--color-absolutezero-active);

  193.   --button--focus-bg-color--primary: var(--button-bg-color--primary);

  194.   --button--disabled-bg-color--primary: var(--color-gray-200);

  195.   --button--disabled-fg-color--primary: var(--color-gray-600);

  196.   --button-fg-color--danger: var(--color-white);

  197.   --button-bg-color--danger: var(--color-maximumred);

  198.   --button--hover-bg-color--danger: var(--color-maximumred-hover);

  199.   --button--active-bg-color--danger: var(--color-maximumred-active);

  200.   --dropbutton-widget-z-index: 100;

  201.   /**

  202.    * jQuery.UI dropdown.

  203.    */

  204.   --jui-dropdown-fg-color: var(--color-gray-800);

  205.   --jui-dropdown-bg-color: var(--color-white);

  206.   --jui-dropdown--active-fg-color: var(--color-white);

  207.   --jui-dropdown--active-bg-color: var(--color-absolutezero);

  208.   --jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */

  209.   --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */

  210.   /**

  211.    * jQuery.UI dialog.

  212.    */

  213.   --jui-dialog-title-color: var(--color-white);

  214.   --jui-dialog-title-bg-color: var(--color-text);

  215.   --jui-dialog-title-font-size: var(--font-size-h4);

  216.   --jui-dialog-close-button-size: calc(var(--space-m) * 2);

  217.   --jui-dialog-close-button-border-radius: 50%;

  218.   --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);

  219.   --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);

  220.   --jui-dialog-border-radius: 0.25rem;

  221.   --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);

  222.   --jui-dialog--focus-outline: 2px dotted transparent;

  223.   --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);

  224.   --jui-dialog-z-index: 1260;

  225.   --jui-dialog-off-canvas-z-index: 501;

  226.   /**

  227.    * Progress bar.

  228.    */

  229.   --progress-bar-border-size: 1px;

  230.   --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));

  231.   --progress-bar-small-size-radius: var(--space-xs);

  232.   --progress-bar-spacing-size: var(--space-xs);

  233.   --progress-bar-transition: width 0.5s ease-out;

  234.   --progress-bar-label-color: var(--color-text);

  235.   --progress-bar-description-color: var(--color-gray-800);

  236.   --progress-bar-description-font-size: var(--font-size-xs);

  237.   --progress-track-border-color: var(--color-gray-500);

  238.   --progress-track-bg-color: var(--color-gray-200);

  239.   /**

  240.    * Ajax progress.

  241.    */

  242.   --ajax-progress-margin-horizontal: var(--space-s);

  243.   /**

  244.    * Breadcrumb.

  245.    */

  246.   --breadcrumb-height: 1.25rem;

  247.   /**

  248.    * Layout.

  249.    */

  250.   --layout-region-edit-width: min(60rem, 100%);

  251.   --layout-region-edit-extended-width: min(68rem, 100%);

  252.   /**

  253.    * Vertical Tabs.

  254.    *

  255.    * These are shared between the vertical tabs and media library.

  256.    * @see ../components/vertical-tabs.pcss.css

  257.    * @see ../theme/media-library.pcss.css

  258.    */

  259.   --vertical-tabs-margin-vertical: var(--space-s);

  260.   --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);

  261.   --vertical-tabs-shadow: var(--details-box-shadow);

  262.   --vertical-tabs-border-color: var(--details-border-color);

  263.   --vertical-tabs-border-size: 1px;

  264.   --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);

  265.   --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;

  266.   --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);

  267.   --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);

  268.   --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);

  269.   --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);

  270.   --vertical-tabs-menu-separator-color: var(--color-gray-200);

  271.   --vertical-tabs-menu-separator-size: 1px;

  272.   --vertical-tabs-menu-width: 20em;

  273.   --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));

  274.   --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);

  275.   --vertical-tabs-menu-link--active-border-size: 0.25rem;

  276.   --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);

  277.   --vertical-tabs-menu--z-index: 0;

  278. }

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