variables.css

Same filename in this branch
  1. main core/themes/olivero/css/base/variables.css
  2. main core/themes/claro/css/base/variables.css
  3. main core/modules/navigation/css/base/variables.css
  4. main core/themes/admin/migration/css/theme/variables.css
  5. main core/themes/admin/css/base/variables.css
  6. main core/themes/default_admin/css/base/variables.css
Same filename and directory in other branches
  1. 10 core/themes/olivero/css/base/variables.css
  2. 10 core/themes/claro/css/base/variables.css
  3. 10 core/modules/navigation/css/base/variables.css
  4. 11.x core/themes/olivero/css/base/variables.css
  5. 11.x core/themes/claro/css/base/variables.css
  6. 11.x core/modules/navigation/css/base/variables.css
  7. 9 core/themes/olivero/css/base/variables.css
  8. 9 core/themes/claro/css/base/variables.css
  9. 8.9.x core/themes/claro/css/base/variables.css
  10. 11.x core/themes/admin/migration/css/theme/variables.css
  11. 11.x core/themes/admin/css/base/variables.css
  12. 11.x core/themes/default_admin/migration/css/theme/variables.css
  13. 11.x core/themes/default_admin/css/base/variables.css

CSS custom property definitions for the Gin migration layer.

File

core/themes/default_admin/migration/css/theme/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. /**
  8. * @file
  9. * CSS custom property definitions for the Gin migration layer.
  10. */
  11. /* cspell:ignore blinkmacsystemfont, ginter, xxxs */
  12. :root {
  13. --gin-color-title: #222330;
  14. --gin-color-text: #222330;
  15. --gin-color-text-light: #545560;
  16. --gin-color-focus: rgb(0, 125, 250, 0.6);
  17. --gin-color-focus-border: rgb(0, 0, 0, 0.2);
  18. --gin-color-focus-neutral-rgb: rgb(0, 0, 0, 0.4);
  19. --gin-color-disabled: #767676;
  20. --gin-color-disabled-bg: #eaeaea;
  21. --gin-color-disabled-border: #c2c2c2;
  22. --gin-color-warning: #d8b234;
  23. --gin-color-warning-light: #efcf64;
  24. --gin-bg-warning: #483e1e;
  25. --gin-bg-warning-light: rgb(226, 151, 0, 0.08);
  26. --gin-color-danger: #cc3d3d;
  27. --gin-color-danger-lightest: #fdd9d9;
  28. --gin-color-danger-light: #f39b9d;
  29. --gin-bg-danger: #583333;
  30. --gin-bg-danger-light: rgb(222, 117, 96, 0.1);
  31. --gin-color-green: #058260;
  32. --gin-color-green-light: #32cea4;
  33. --gin-color-green-lightest: #adebdb;
  34. --gin-bg-green: #145242;
  35. --gin-bg-green-light: rgb(72, 171, 123, 0.1);
  36. --gin-color-info: #082538;
  37. --gin-color-info-light: #589ac5;
  38. --gin-bg-info: #122b3c;
  39. --gin-status-text: #626262;
  40. --gin-status-bg: #eee;
  41. --gin-status-success-text: #1d6844;
  42. --gin-status-success-bg: #26a76930;
  43. --gin-status-warning-text: #826b1f;
  44. --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  45. --gin-status-danger-text: #cc3d3d;
  46. --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  47. --gin-color-contextual: var(--gin-color-text);
  48. --gin-color-contextual-text: #eee;
  49. --gin-bg-input: #fff;
  50. --gin-bg-layer: #fff;
  51. --gin-bg-layer2: #edeff5;
  52. --gin-bg-layer3: #fff;
  53. --gin-bg-layer4: #e2e5ec;
  54. --gin-bg-secondary: var(--gin-bg-layer);
  55. --gin-bg-header: #eeeff3;
  56. --gin-bg-unpublished: var(--gin-bg-danger-light);
  57. --gin-pattern: var(--gin-border-color);
  58. --gin-pattern-fallback: var(--gin-bg-layer2);
  59. --gin-pattern-square: 0.5rem;
  60. --gin-font: ginter, inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  61. --gin-font-size-xxs: 0.75rem;
  62. --gin-font-size-xs: small;
  63. --gin-font-size-s: 0.875rem;
  64. --gin-font-size: 1rem;
  65. --gin-font-size-m: var(--gin-font-size);
  66. --gin-font-size-l: 1.125rem;
  67. --gin-font-size-xl: 1.25rem;
  68. --gin-font-size-h3: 1.5rem;
  69. --gin-font-size-h2: 1.75rem;
  70. --gin-font-size-h1: 1.6rem;
  71. --gin-font-size-quote: 1.1em;
  72. --gin-font-weight-normal: 400;
  73. --gin-font-weight-semibold: 525;
  74. --gin-font-weight-bold: 575;
  75. --gin-font-weight-heavy: 625;
  76. --gin-spacing-xxxs: var(--space-xxxs);
  77. --gin-spacing-xxs: var(--space-xxs);
  78. --gin-spacing-xs: var(--space-xs);
  79. --gin-spacing-s: var(--space-s);
  80. --gin-spacing-m: var(--space-m);
  81. --gin-spacing-l: var(--space-l);
  82. --gin-spacing-xl: var(--space-xl);
  83. --gin-spacing-xxl: var(--space-xxl);
  84. --gin-spacing-xxxl: var(--space-xxxl);
  85. --gin-icon-color: #414247;
  86. --gin-icon-size-close: 1.25rem;
  87. --gin-icon-size-toolbar-secondary: 1.0625rem;
  88. --gin-icon-size-toolbar: 1.0625rem;
  89. --gin-icon-size-sidebar-toggle: 1.3125rem;
  90. --gin-border-xxs: 0.125rem;
  91. --gin-border-xs: 0.25rem;
  92. --gin-border-s: 0.375rem;
  93. --gin-border-m: 0.5rem;
  94. --gin-border-l: 0.75rem;
  95. --gin-border-xl: 1rem;
  96. --gin-border-color: #d4d4d8;
  97. --gin-border-color-secondary: rgb(0, 0, 0, 0.08);
  98. --gin-border-color-layer: rgb(0, 0, 0, 0.08);
  99. --gin-border-color-layer2: #d4d4d8;
  100. --gin-border-color-table: rgb(0, 0, 0, 0.1);
  101. --gin-border-color-table-header: rgb(0, 0, 0, 0.3);
  102. --gin-border-color-form-element: #8e929c;
  103. --size-summary-border-radius: calc(var(--gin-border-m) - 1px);
  104. --gin-easing: cubic-bezier(0.19, 1, 0.22, 1);
  105. --gin-transition: 0.15s var(--gin-easing);
  106. --gin-transition-fast: 0.3s var(--gin-easing);
  107. /* stylelint-disable-next-line color-function-notation */
  108. --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 0.02), 0 0.1875rem 0.25rem rgb(20 45 82 / 0.03), 0 0.3125rem 0.5rem rgb(20 45 82 / 0.04);
  109. /* stylelint-disable-next-line color-function-notation */
  110. --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 0.02), 0 0.1875rem 0.25rem rgb(20 45 82 / 0.03), 0 0.3125rem 0.5rem rgb(20 45 82 / 0.04), 0 1.25rem 1.5rem rgb(20 45 82 / 0.12);
  111. --gin-height-sticky: 3.75rem;
  112. --gin-toolbar-width-collapsed: 4.125rem;
  113. --gin-toolbar-width: 16rem;
  114. --gin-toolbar-height: 0px;
  115. --gin-toolbar-secondary-height: 0px;
  116. --gin-toolbar-bg-level2: #edeff5;
  117. --gin-toolbar-bg-level3: rgb(44, 45, 47, 0.05);
  118. --gin-toolbar-y-offset: 0px;
  119. --gin-toolbar-x-offset: 0px;
  120. --gin-scroll-offset: 0px;
  121. --gin-sticky-offset: 0px;
  122. --gin-sidebar-small-width: 20rem;
  123. --gin-sidebar-min-width: 15rem;
  124. --gin-sidebar-width: 20rem;
  125. --gin-sidebar-max-width: 35rem;
  126. --gin-sidebar-offset: var(--gin-sidebar-width);
  127. --gin-switch: #26a769;
  128. --gin-shadow-button: #0003;
  129. --gin-color-button-text: #fff;
  130. --gin-offset-x: var(--gin-toolbar-x-offset);
  131. --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
  132. --gin-link-decoration-style: dotted;
  133. --gin-max-line-length: 80ch;
  134. --input-line-height: var(--gin-spacing-l);
  135. --input-padding-horizontal: var(--gin-spacing-s);
  136. --input-padding-vertical: var(--gin-spacing-xs);
  137. --gin-tooltip-bg: #232429;
  138. --jui-dialog-z-index: 1260;
  139. @media (min-width: 61em) {
  140. --gin-font-size-h1: 1.8125rem;
  141. --gin-font-size-quote: 1.2em;
  142. --gin-icon-size-toolbar: 1.25rem;
  143. }
  144. @media (min-width: 90em) {
  145. --gin-font-size-h1: 2.125rem;
  146. }
  147. @media (min-width: 64em) {
  148. --gin-sticky-offset: var(--gin-height-sticky);
  149. }
  150. @media (min-width: 80em) {
  151. --gin-sidebar-width: 22.5rem;
  152. }
  153. }
  154. :root[data-gin-layout-density="small"],
  155. [data-gin-layout-density="small"] {
  156. --gin-spacing-density-xxs: 0.15625rem;
  157. --gin-spacing-density-xs: 0.3125rem;
  158. --gin-spacing-density-s: 0.46875rem;
  159. --gin-spacing-density-m: 0.625rem;
  160. --gin-spacing-density-l: 0.9375rem;
  161. --gin-spacing-density-xl: 1.25rem;
  162. --gin-spacing-density-xxl: 1.875rem;
  163. --gin-spacing-density-xxxl: 2.5rem;
  164. }
  165. :root[data-gin-layout-density="medium"],
  166. [data-gin-layout-density="medium"] {
  167. --gin-spacing-density-xxs: 0.1875rem;
  168. --gin-spacing-density-xs: 0.375rem;
  169. --gin-spacing-density-s: 0.5625rem;
  170. --gin-spacing-density-m: 0.75rem;
  171. --gin-spacing-density-l: 1.125rem;
  172. --gin-spacing-density-xl: 1.5rem;
  173. --gin-spacing-density-xxl: 2.25rem;
  174. --gin-spacing-density-xxxl: 3rem;
  175. }
  176. :root {
  177. --gin-spacing-density-xxs: 0.25rem;
  178. --gin-spacing-density-xs: 0.5rem;
  179. --gin-spacing-density-s: 0.75rem;
  180. --gin-spacing-density-m: 1rem;
  181. --gin-spacing-density-l: 1.5rem;
  182. --gin-spacing-density-xl: 2rem;
  183. --gin-spacing-density-xxl: 3rem;
  184. --gin-spacing-density-xxxl: 4rem;
  185. }
  186. .gin--dark-mode {
  187. --gin-color-title: #fff;
  188. --gin-color-text: #d2d3d3;
  189. --gin-color-text-light: #9e9fa0;
  190. --gin-shadow-button: rgba(#111, 0.9);
  191. --gin-color-button-text: #111;
  192. --gin-color-focus: rgb(81, 168, 255);
  193. --gin-color-focus-border: rgb(0, 0, 0, 0.8);
  194. --gin-color-focus-neutral-rgb: rgb(255, 255, 255, 0.8);
  195. --gin-color-disabled: #919191;
  196. --gin-color-disabled-border: #646464;
  197. --gin-color-disabled-bg: #47474c;
  198. --gin-color-warning: #dec15f;
  199. --gin-bg-warning-light: rgb(222, 193, 95, 0.1);
  200. --gin-color-danger: #ce6060;
  201. --gin-color-danger-lightest: #483439;
  202. --gin-color-green: #32cea4;
  203. --gin-color-info: #559bca;
  204. --gin-bg-input: var(--gin-bg-layer2);
  205. --gin-bg-app: #1b1b1d;
  206. --gin-bg-layer: #2a2a2d;
  207. --gin-bg-layer2: #3b3b3f;
  208. --gin-bg-layer3: #47474c;
  209. --gin-bg-layer4: #19191b;
  210. --gin-bg-secondary: var(--gin-bg-app);
  211. --gin-bg-unpublished: var(--gin-bg-warning-light);
  212. --gin-color-contextual: var(--gin-bg-layer3);
  213. --gin-border-color: #43454a;
  214. --gin-border-color-secondary: rgb(255, 255, 255, 0.075);
  215. --gin-border-color-layer: rgb(0, 0, 0, 0.05);
  216. --gin-border-color-layer2: #76777b;
  217. --gin-border-color-table: #43454a;
  218. --gin-border-color-table-header: rgb(255, 255, 255, 0.4);
  219. --gin-border-color-form-element: var(--gin-border-color-layer2);
  220. --gin-bg-header: #1b1b1d;
  221. --gin-switch: var(--gin-color-primary);
  222. --gin-status-text: #c3cbd0;
  223. --gin-status-bg: rgb(255, 255, 255, 0.12);
  224. --gin-status-success-text: #8bd3b1;
  225. --gin-status-success-bg: #26a76940;
  226. --gin-status-warning-text: #e8d185;
  227. --gin-status-warning-bg: rgb(226, 151, 0, 0.15);
  228. --gin-status-danger-text: #e69e9e;
  229. --gin-status-danger-bg: rgb(222, 117, 96, 0.15);
  230. /* stylelint-disable-next-line color-function-notation */
  231. --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 0.02), 0 0.1875rem 0.25rem rgb(0 0 0 / 0.03), 0 0.3125rem 0.5rem rgb(0 0 0 / 0.04);
  232. /* stylelint-disable-next-line color-function-notation */
  233. --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 0.02), 0 0.1875rem 0.25rem rgb(0 0 0 / 0.03), 0 0.3125rem 0.5rem rgb(0 0 0 / 0.04), 0 1.25rem 1.5rem rgb(0 0 0 / 0.12);
  234. --gin-icon-color: #888;
  235. --gin-pattern-fallback: var(--gin-bg-layer2);
  236. --gin-pattern: var(--gin-border-color);
  237. --gin-tooltip-bg: var(--gin-bg-layer3);
  238. }
  239. @media (forced-colors: active) {
  240. :root {
  241. --gin-icon-color: CanvasText;
  242. }
  243. }
  244. .entity-meta {
  245. --entity-meta-color-bg: transparent;
  246. --entity-meta-border-color: var(--gin-border-color);
  247. }
  248. .accordion {
  249. --accordion-bg-color: transparent;
  250. --accordion-border-color: var(--gin-border-color);
  251. }

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