variables-components.pcss.css

/**
 * @file
 * Component-scoped custom properties (interim global home).
 *
 * These tokens belong to individual components (input, button, details, pager,
 * dialog, progress, vertical-tabs, …). They are kept here — declared on :root,
 * always loaded — rather than moved into their component stylesheets, because
 * many component stylesheets are loaded conditionally while these tokens are
 * consumed across components. Scoping them to their component selectors is
 * deferred to a later phase. Split
 * out of the former css/base/variables.pcss.css as part of
 * https://www.drupal.org/i/3582351.
 *
 * Duplicate declarations for input padding, input line height, and dialog
 * z-index are folded into the canonical declarations below.
 */

:root {
  /*
   * Inputs.
   */
  --input-fg-color: var(--admin-color-text);
  --input-bg-color: var(--admin-color-bg-input);
  --input-fg-color--placeholder: var(--admin-color-gray-700);
  --input-border-color: var(--admin-color-gray-500);
  --input--focus-border-color: var(--admin-color-link);
  --input--error-color: var(--admin-color-error);
  --input--error-border-color: var(--admin-color-error);
  --input--disabled-fg-color: light-dark(var(--admin-color-gray-800), var(--admin-color-gray-400));
  --input--disabled-bg-color: var(--admin-color-bg-disabled);
  --input--disabled-border-color: var(--admin-color-border-disabled);
  --input-border-radius-size: var(--admin-radius-2xs);
  --input-border-size: 1px; /* (1/16)em ~ 1px */
  --input--error-border-size: 2px;
  --input-padding-vertical: var(--admin-space-xs);
  --input-padding-horizontal: var(--admin-space-s);
  --input-font-size: var(--admin-font-size-m);
  --input-line-height: var(--admin-space-l);
  --input-padding-vertical--small: calc(var(--admin-space-xs) - (var(--input-border-size) * 2));
  --input-padding-horizontal--small: calc(var(--admin-space-m) - var(--input-border-size));
  --input-font-size--small: var(--admin-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(--admin-space-xs) - var(--input-border-size));
  --input--extrasmall-font-size: var(--admin-font-size-s);
  --input--extrasmall-line-height: calc(var(--admin-space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
  --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */

  /*
   * Details.
   */
  --details-border-color: var(--admin-color-gray-100);
  --details-box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
  --details-border-size: 1px;
  --details-border-size-radius: var(--admin-radius-2xs);
  --details-accordion-border-size-radius: var(--admin-radius-2xs);
  --details-bg-color-transition-duration: 0.12s;
  --details-transform-transition-duration: 0.12s;
  --details-line-height: 1.295rem;

  /**
   * Buttons.
   */
  --button-border-radius-size: var(--admin-radius-2xs);
  --button-fg-color: var(--admin-color-gray-900);
  --button--hover-bg-color: var(--admin-color-gray-100);
  --button--active-bg-color: var(--admin-color-gray-200);
  --button-bg-color--primary: var(--admin-color-accent-500);
  --button--focus-bg-color--primary: var(--button-bg-color--primary);
  --button-fg-color--danger: var(--admin-color-text-on-primary);
  --button--hover-bg-color--danger: #c61f1f;
  --dropbutton-widget-z-index: 100;

  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--admin-color-gray-800);
  --jui-dropdown-bg-color: var(--admin-color-bg-raised);
  /* Fixed white: text on the active item's blue fill (--jui-dropdown--active-bg-color). */
  --jui-dropdown--active-fg-color: var(--admin-color-white);
  --jui-dropdown--active-bg-color: var(--admin-color-link);
  --jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
  --jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */

  /**
   * jQuery.UI dialog.
   */
  /* Fixed white: title text on the dark titlebar fill (--jui-dialog-title-bg-color). */
  --jui-dialog-title-color: var(--admin-color-white);
  --jui-dialog-title-bg-color: var(--admin-color-text);
  --jui-dialog-title-font-size: var(--admin-font-size-h4);
  --jui-dialog-close-button-size: calc(var(--admin-space-m) * 2);
  --jui-dialog-close-button-border-radius: 50%;
  --jui-dialog-close-button-reserved-space: calc(var(--admin-space-m) * 4);
  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--admin-space-m) * 3);
  --jui-dialog-border-radius: var(--admin-radius-xs);
  --jui-dialog-box-shadow: 0 0 var(--admin-space-m) calc(var(--admin-space-m) / -4) var(--admin-color-text);
  --jui-dialog--focus-outline: 2px dotted transparent;
  --jui-dialog--focus-box-shadow: 0 0 0 3px var(--admin-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(--admin-space-xs) - (2 * var(--progress-bar-border-size)));
  --progress-bar-small-size-radius: var(--admin-space-xs);
  --progress-bar-spacing-size: var(--admin-space-xs);
  --progress-bar-transition: width 0.5s ease-out;
  --progress-bar-label-color: var(--admin-color-text);
  --progress-bar-description-color: var(--admin-color-gray-800);
  --progress-bar-description-font-size: var(--admin-font-size-xs);
  --progress-track-border-color: var(--admin-color-gray-500);
  --progress-track-bg-color: var(--admin-color-gray-200);

  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--admin-space-s);

  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;

  /**
   * Layout.
   */
  --layout-region-edit-width: min(960px, 100%);
  --layout-region-edit-extended-width: min(1088px, 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(--admin-space-s);
  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
  --vertical-tabs-shadow: var(--details-box-shadow);
  --vertical-tabs-border-color: var(--admin-color-border);
  --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-separator-color: var(--admin-color-gray-200);
  --vertical-tabs-menu-separator-size: 1px;
  --vertical-tabs-menu-width: 20em;
  --vertical-tabs-menu-link--active-border-size: 4px;
  --vertical-tabs-menu-link--active-border-color: var(--admin-color-link);
  --vertical-tabs-menu--z-index: 0;
}

.entity-meta {
  --entity-meta-color-bg: transparent;
  --entity-meta-border-color: var(--admin-color-border);
}

.accordion {
  --accordion-bg-color: transparent;
  --accordion-border-color: var(--admin-color-border);
}