variables.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/base/variables.pcss.css
  2. 9 core/themes/claro/css/base/variables.pcss.css
  3. 10 core/themes/olivero/css/base/variables.pcss.css
  4. 10 core/themes/claro/css/base/variables.pcss.css
  5. 11.x core/themes/olivero/css/base/variables.pcss.css
  6. 11.x core/themes/claro/css/base/variables.pcss.css
  7. 11.x core/modules/navigation/css/base/variables.pcss.css
  8. 10 core/modules/navigation/css/base/variables.pcss.css
:root {
  /*
   * Color Palette.
   */
  --color-absolutezero: #003cc5;
  --color-white: #fff;
  --color-text: #222330;
  --color-text-light: var(--color-grayblue);
  --color-whitesmoke: #f3f4f9;
  --color-whitesmoke-light: #fafbfd;
  --color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
  /* Secondary. */
  --color-lightgray: #d4d4d8;
  --color-lightgray-o-80: rgba(212, 212, 218, 0.8);
  --color-grayblue: #8e929c;
  --color-oldsilver: #82828c;
  --color-davysgrey: #545560;
  --color-maximumred: #d72222;
  --color-sunglow: #ffd23f;
  --color-sunglow-shaded: #977405;
  --color-lightninggreen: #26a769;
  --color-focus: var(--color-lightninggreen);
  /* Variations. */
  --color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
  --color-lightgray-active: #adaeb3; /* 10% darker than base. */
  --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
  --color-absolutezero-active: #00339a; /* 20% darker than base. */
  --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
  --color-maximumred-active: #ab1b1b; /* 10% darker than base. */
  --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
  --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
  --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
  --color-bgred-active: #fceded; /* 10% darker than base. */
  /*
   * 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;
  --line-height: 1.5;
  --line-height-heading: 1.3;
  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  --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: 3px;
  --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);
  /*
   * Inputs.
   */
  --input-fg-color: var(--color-fg);
  --input-bg-color: var(--color-bg);
  --input-fg-color--description: var(--color-davysgrey);
  --input-fg-color--placeholder: var(--color-grayblue);
  --input-border-color: var(--color-grayblue);
  --input--hover-border-color: var(--color-text);
  --input--focus-border-color: var(--color-absolutezero);
  --input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
  --input--error-color: var(--color-maximumred);
  --input--error-border-color: var(--color-maximumred);
  --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's grey with 0.6 opacity. */
  --input--disabled-fg-color: var(--color-oldsilver);
  --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--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-bg-color: rgba(243, 244, 249, 0.4);
  --details-border-color: rgba(216, 217, 224, 0.8);
  --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 4px 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;
  /**
   * Buttons.
   */
  --button--focus-border-color: #5a8bed;
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-text);
  --button-bg-color: var(--color-lightgray);
  --button--hover-bg-color: var(--color-lightgray-hover);
  --button--active-bg-color: var(--color-lightgray-active);
  --button--disabled-bg-color: #ebebed;
  --button--disabled-fg-color: var(--color-grayblue);
  --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-lightgray);
  --button--disabled-fg-color--primary: var(--color-oldsilver);
  --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);
  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--color-davysgrey);
  --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. */
  /**
   * 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-davysgrey);
  --progress-bar-description-font-size: var(--font-size-xs);
  --progress-track-border-color: var(--color-grayblue);
  --progress-track-bg-color: var(--color-lightgray);
  /**
   * Tabledrag icon size.
   */
  --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--space-s);
  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;
}

File

core/themes/claro/css/base/variables.pcss.css

View source
  1. :root {
  2. /*
  3. * Color Palette.
  4. */
  5. --color-absolutezero: #003cc5;
  6. --color-white: #fff;
  7. --color-text: #222330;
  8. --color-text-light: var(--color-grayblue);
  9. --color-whitesmoke: #f3f4f9;
  10. --color-whitesmoke-light: #fafbfd;
  11. --color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
  12. /* Secondary. */
  13. --color-lightgray: #d4d4d8;
  14. --color-lightgray-o-80: rgba(212, 212, 218, 0.8);
  15. --color-grayblue: #8e929c;
  16. --color-oldsilver: #82828c;
  17. --color-davysgrey: #545560;
  18. --color-maximumred: #d72222;
  19. --color-sunglow: #ffd23f;
  20. --color-sunglow-shaded: #977405;
  21. --color-lightninggreen: #26a769;
  22. --color-focus: var(--color-lightninggreen);
  23. /* Variations. */
  24. --color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
  25. --color-lightgray-active: #adaeb3; /* 10% darker than base. */
  26. --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
  27. --color-absolutezero-active: #00339a; /* 20% darker than base. */
  28. --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
  29. --color-maximumred-active: #ab1b1b; /* 10% darker than base. */
  30. --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
  31. --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
  32. --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
  33. --color-bgred-active: #fceded; /* 10% darker than base. */
  34. /*
  35. * Base.
  36. */
  37. --color-fg: var(--color-text);
  38. --color-bg: var(--color-white);
  39. --color-link: var(--color-absolutezero);
  40. --color-link-hover: var(--color-absolutezero-hover);
  41. --color-link-active: var(--color-absolutezero-active);
  42. --color-divider: rgba(142, 146, 156, 0.5);
  43. /*
  44. * Typography.
  45. */
  46. --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  47. --line-height: 1.5;
  48. --line-height-heading: 1.3;
  49. --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  50. --font-size-h1: 2.027rem; /* ~32px */
  51. --font-size-h2: 1.802rem; /* ~29px */
  52. --font-size-h3: 1.602rem; /* ~26px */
  53. --font-size-h4: 1.424rem; /* ~23px */
  54. --font-size-h5: 1.266rem; /* ~20px */
  55. --font-size-h6: 1.125rem; /* 18px */
  56. --font-size-s: 0.889rem; /* ~14px */
  57. --font-size-xs: 0.79rem; /* ~13px */
  58. --font-size-xxs: 0.702rem; /* ~11px */
  59. --font-size-label: var(--font-size-s);
  60. --font-size-description: var(--font-size-xs);
  61. /**
  62. * Spaces.
  63. */
  64. --space-xl: 3rem; /* 3 * 16px = 48px */
  65. --space-l: 1.5rem; /* 1.5 * 16px = 24px */
  66. --space-m: 1rem; /* 1 * 16px = 16px */
  67. --space-s: 0.75rem; /* 0.75 * 16px = 12px */
  68. --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
  69. /*
  70. * Common.
  71. */
  72. --speed-transition: 0.2s;
  73. --transition: all var(--speed-transition) ease-out;
  74. --base-border-radius: 2px;
  75. --focus-border-size: 3px;
  76. --focus-border-offset-size: 2px;
  77. --outline-size: 2px;
  78. --focus-outline: var(--outline-size) dotted transparent;
  79. --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);
  80. /*
  81. * Inputs.
  82. */
  83. --input-fg-color: var(--color-fg);
  84. --input-bg-color: var(--color-bg);
  85. --input-fg-color--description: var(--color-davysgrey);
  86. --input-fg-color--placeholder: var(--color-grayblue);
  87. --input-border-color: var(--color-grayblue);
  88. --input--hover-border-color: var(--color-text);
  89. --input--focus-border-color: var(--color-absolutezero);
  90. --input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
  91. --input--error-color: var(--color-maximumred);
  92. --input--error-border-color: var(--color-maximumred);
  93. --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's grey with 0.6 opacity. */
  94. --input--disabled-fg-color: var(--color-oldsilver);
  95. --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
  96. --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
  97. --input--disabled-border-opacity: 0.5;
  98. --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
  99. --input-border-size: 1px; /* (1/16)em ~ 1px */
  100. --input--error-border-size: 2px;
  101. --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
  102. --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
  103. --input-font-size: var(--font-size-base);
  104. --input-line-height: var(--space-l);
  105. --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
  106. --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
  107. --input--extrasmall-font-size: var(--font-size-s);
  108. --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
  109. --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
  110. --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
  111. /*
  112. * Details.
  113. */
  114. --details-bg-color: rgba(243, 244, 249, 0.4);
  115. --details-border-color: rgba(216, 217, 224, 0.8);
  116. --details-summary-shadow-color: var(--color-focus);
  117. --details-summary-focus-border-size: var(--focus-border-size);
  118. --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  119. --details-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  120. --details-border-size: 1px;
  121. --details-border-size-radius: 2px;
  122. --details-accordion-border-size-radius: var(--base-border-radius);
  123. --details-spread-box-shadow-radius: 2px;
  124. --details-bg-color-transition-duration: 0.12s;
  125. --details-box-shadow-transition-duration: 0.2s;
  126. --details-transform-transition-duration: 0.12s;
  127. /**
  128. * Buttons.
  129. */
  130. --button--focus-border-color: #5a8bed;
  131. --button-border-radius-size: var(--base-border-radius);
  132. --button-fg-color: var(--color-text);
  133. --button-bg-color: var(--color-lightgray);
  134. --button--hover-bg-color: var(--color-lightgray-hover);
  135. --button--active-bg-color: var(--color-lightgray-active);
  136. --button--disabled-bg-color: #ebebed;
  137. --button--disabled-fg-color: var(--color-grayblue);
  138. --button-fg-color--primary: var(--color-white);
  139. --button-bg-color--primary: var(--color-absolutezero);
  140. --button--hover-bg-color--primary: var(--color-absolutezero-hover);
  141. --button--active-bg-color--primary: var(--color-absolutezero-active);
  142. --button--focus-bg-color--primary: var(--button-bg-color--primary);
  143. --button--disabled-bg-color--primary: var(--color-lightgray);
  144. --button--disabled-fg-color--primary: var(--color-oldsilver);
  145. --button-fg-color--danger: var(--color-white);
  146. --button-bg-color--danger: var(--color-maximumred);
  147. --button--hover-bg-color--danger: var(--color-maximumred-hover);
  148. --button--active-bg-color--danger: var(--color-maximumred-active);
  149. /**
  150. * jQuery.UI dropdown.
  151. */
  152. --jui-dropdown-fg-color: var(--color-davysgrey);
  153. --jui-dropdown-bg-color: var(--color-white);
  154. --jui-dropdown--active-fg-color: var(--color-white);
  155. --jui-dropdown--active-bg-color: var(--color-absolutezero);
  156. --jui-dropdown-border-color: rgba(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
  157. --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
  158. /**
  159. * Progress bar.
  160. */
  161. --progress-bar-border-size: 1px;
  162. --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
  163. --progress-bar-small-size-radius: var(--space-xs);
  164. --progress-bar-spacing-size: var(--space-xs);
  165. --progress-bar-transition: width 0.5s ease-out;
  166. --progress-bar-label-color: var(--color-text);
  167. --progress-bar-description-color: var(--color-davysgrey);
  168. --progress-bar-description-font-size: var(--font-size-xs);
  169. --progress-track-border-color: var(--color-grayblue);
  170. --progress-track-bg-color: var(--color-lightgray);
  171. /**
  172. * Tabledrag icon size.
  173. */
  174. --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
  175. /**
  176. * Ajax progress.
  177. */
  178. --ajax-progress-margin-horizontal: var(--space-s);
  179. /**
  180. * Breadcrumb.
  181. */
  182. --breadcrumb-height: 1.25rem;
  183. }

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