@arbor-education/design-system.components 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (245) hide show
  1. package/README.md +1 -1
  2. package/dist/components/button/Button.d.ts +5 -2
  3. package/dist/components/button/Button.d.ts.map +1 -1
  4. package/dist/components/button/Button.js +3 -1
  5. package/dist/components/button/Button.js.map +1 -1
  6. package/dist/components/card/Card.d.ts +1 -2
  7. package/dist/components/card/Card.d.ts.map +1 -1
  8. package/dist/components/card/Card.js +3 -3
  9. package/dist/components/card/Card.js.map +1 -1
  10. package/dist/components/card/Card.test.js +0 -5
  11. package/dist/components/card/Card.test.js.map +1 -1
  12. package/dist/components/formField/FormField.d.ts +4 -0
  13. package/dist/components/formField/FormField.d.ts.map +1 -1
  14. package/dist/components/formField/FormField.js +2 -1
  15. package/dist/components/formField/FormField.js.map +1 -1
  16. package/dist/components/formField/FormField.stories.d.ts.map +1 -1
  17. package/dist/components/formField/FormField.stories.js +3 -1
  18. package/dist/components/formField/FormField.stories.js.map +1 -1
  19. package/dist/components/formField/FormField.test.js +5 -0
  20. package/dist/components/formField/FormField.test.js.map +1 -1
  21. package/dist/components/formField/inputs/checkbox/CheckboxInput.d.ts +7 -0
  22. package/dist/components/formField/inputs/checkbox/CheckboxInput.d.ts.map +1 -0
  23. package/dist/components/formField/inputs/checkbox/CheckboxInput.js +31 -0
  24. package/dist/components/formField/inputs/checkbox/CheckboxInput.js.map +1 -0
  25. package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts +17 -0
  26. package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts.map +1 -0
  27. package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js +19 -0
  28. package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js.map +1 -0
  29. package/dist/components/formField/inputs/checkbox/CheckboxInput.test.d.ts +2 -0
  30. package/dist/components/formField/inputs/checkbox/CheckboxInput.test.d.ts.map +1 -0
  31. package/dist/components/formField/inputs/checkbox/CheckboxInput.test.js +30 -0
  32. package/dist/components/formField/inputs/checkbox/CheckboxInput.test.js.map +1 -0
  33. package/dist/components/formField/inputs/dropdown/Dropdown.d.ts +11 -0
  34. package/dist/components/formField/inputs/dropdown/Dropdown.d.ts.map +1 -0
  35. package/dist/components/formField/inputs/dropdown/Dropdown.js +43 -0
  36. package/dist/components/formField/inputs/dropdown/Dropdown.js.map +1 -0
  37. package/dist/components/formField/inputs/dropdown/Dropdown.stories.d.ts +161 -0
  38. package/dist/components/formField/inputs/dropdown/Dropdown.stories.d.ts.map +1 -0
  39. package/dist/components/formField/inputs/dropdown/Dropdown.stories.js +172 -0
  40. package/dist/components/formField/inputs/dropdown/Dropdown.stories.js.map +1 -0
  41. package/dist/components/formField/inputs/dropdown/Dropdown.test.d.ts +2 -0
  42. package/dist/components/formField/inputs/dropdown/Dropdown.test.d.ts.map +1 -0
  43. package/dist/components/formField/inputs/dropdown/Dropdown.test.js +93 -0
  44. package/dist/components/formField/inputs/dropdown/Dropdown.test.js.map +1 -0
  45. package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.d.ts +11 -0
  46. package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.d.ts.map +1 -0
  47. package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.js +15 -0
  48. package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.js.map +1 -0
  49. package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.d.ts +10 -0
  50. package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.d.ts.map +1 -0
  51. package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js +12 -0
  52. package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js.map +1 -0
  53. package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts +9 -0
  54. package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts.map +1 -0
  55. package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js +17 -0
  56. package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js.map +1 -0
  57. package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts +7 -0
  58. package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts.map +1 -0
  59. package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js +16 -0
  60. package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js.map +1 -0
  61. package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts +16 -0
  62. package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts.map +1 -0
  63. package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js +73 -0
  64. package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js.map +1 -0
  65. package/dist/components/formField/inputs/number/NumberInput.d.ts +6 -0
  66. package/dist/components/formField/inputs/number/NumberInput.d.ts.map +1 -0
  67. package/dist/components/formField/inputs/number/NumberInput.js +39 -0
  68. package/dist/components/formField/inputs/number/NumberInput.js.map +1 -0
  69. package/dist/components/formField/inputs/number/NumberInput.stories.d.ts +20 -0
  70. package/dist/components/formField/inputs/number/NumberInput.stories.d.ts.map +1 -0
  71. package/dist/components/formField/inputs/number/NumberInput.stories.js +22 -0
  72. package/dist/components/formField/inputs/number/NumberInput.stories.js.map +1 -0
  73. package/dist/components/formField/inputs/number/NumberInput.test.d.ts +2 -0
  74. package/dist/components/formField/inputs/number/NumberInput.test.d.ts.map +1 -0
  75. package/dist/components/formField/inputs/number/NumberInput.test.js +30 -0
  76. package/dist/components/formField/inputs/number/NumberInput.test.js.map +1 -0
  77. package/dist/components/formField/inputs/radio/RadioButtonInput.d.ts +7 -0
  78. package/dist/components/formField/inputs/radio/RadioButtonInput.d.ts.map +1 -0
  79. package/dist/components/formField/inputs/radio/RadioButtonInput.js +9 -0
  80. package/dist/components/formField/inputs/radio/RadioButtonInput.js.map +1 -0
  81. package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts +46 -0
  82. package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -0
  83. package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +83 -0
  84. package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -0
  85. package/dist/components/formField/inputs/radio/RadioButtonInput.test.d.ts +2 -0
  86. package/dist/components/formField/inputs/radio/RadioButtonInput.test.d.ts.map +1 -0
  87. package/dist/components/formField/inputs/radio/RadioButtonInput.test.js +34 -0
  88. package/dist/components/formField/inputs/radio/RadioButtonInput.test.js.map +1 -0
  89. package/dist/components/heading/Heading.d.ts +392 -388
  90. package/dist/components/heading/Heading.d.ts.map +1 -1
  91. package/dist/components/heading/Heading.js +8 -1
  92. package/dist/components/heading/Heading.js.map +1 -1
  93. package/dist/components/heading/Heading.stories.d.ts.map +1 -1
  94. package/dist/components/heading/Heading.stories.js +7 -8
  95. package/dist/components/heading/Heading.stories.js.map +1 -1
  96. package/dist/components/heading/HeadingInnerContainer.d.ts +2 -2
  97. package/dist/components/heading/HeadingInnerContainer.js +4 -4
  98. package/dist/components/icon/Icon.d.ts +2 -2
  99. package/dist/components/icon/Icon.d.ts.map +1 -1
  100. package/dist/components/icon/Icon.js.map +1 -1
  101. package/dist/components/icon/allowedIcons.d.ts +1 -0
  102. package/dist/components/icon/allowedIcons.d.ts.map +1 -1
  103. package/dist/components/section/Section.d.ts +18 -0
  104. package/dist/components/section/Section.d.ts.map +1 -0
  105. package/dist/components/section/Section.js +36 -0
  106. package/dist/components/section/Section.js.map +1 -0
  107. package/dist/components/section/Section.stories.d.ts +18 -0
  108. package/dist/components/section/Section.stories.d.ts.map +1 -0
  109. package/dist/components/section/Section.stories.js +27 -0
  110. package/dist/components/section/Section.stories.js.map +1 -0
  111. package/dist/components/section/Section.test.d.ts +2 -0
  112. package/dist/components/section/Section.test.d.ts.map +1 -0
  113. package/dist/components/section/Section.test.js +157 -0
  114. package/dist/components/section/Section.test.js.map +1 -0
  115. package/dist/components/slideover/Slideover.d.ts +11 -0
  116. package/dist/components/slideover/Slideover.d.ts.map +1 -0
  117. package/dist/components/slideover/Slideover.js +11 -0
  118. package/dist/components/slideover/Slideover.js.map +1 -0
  119. package/dist/components/slideover/Slideover.test.d.ts +2 -0
  120. package/dist/components/slideover/Slideover.test.d.ts.map +1 -0
  121. package/dist/components/slideover/Slideover.test.js +33 -0
  122. package/dist/components/slideover/Slideover.test.js.map +1 -0
  123. package/dist/components/slideoverManager/SlideoverManager.d.ts +7 -0
  124. package/dist/components/slideoverManager/SlideoverManager.d.ts.map +1 -0
  125. package/dist/components/slideoverManager/SlideoverManager.js +29 -0
  126. package/dist/components/slideoverManager/SlideoverManager.js.map +1 -0
  127. package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +15 -0
  128. package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -0
  129. package/dist/components/slideoverManager/SlideoverManager.stories.js +102 -0
  130. package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -0
  131. package/dist/components/slideoverManager/SlideoverManager.test.d.ts +2 -0
  132. package/dist/components/slideoverManager/SlideoverManager.test.d.ts.map +1 -0
  133. package/dist/components/slideoverManager/SlideoverManager.test.js +53 -0
  134. package/dist/components/slideoverManager/SlideoverManager.test.js.map +1 -0
  135. package/dist/index.css +1948 -1334
  136. package/dist/index.css.map +1 -1
  137. package/dist/index.d.ts +7 -1
  138. package/dist/index.d.ts.map +1 -1
  139. package/dist/index.js +7 -1
  140. package/dist/index.js.map +1 -1
  141. package/dist/utils/Constants.d.ts +6 -0
  142. package/dist/utils/Constants.d.ts.map +1 -0
  143. package/dist/utils/Constants.js +6 -0
  144. package/dist/utils/Constants.js.map +1 -0
  145. package/dist/utils/PopupParentContext.d.ts +3 -0
  146. package/dist/utils/PopupParentContext.d.ts.map +1 -0
  147. package/dist/utils/PopupParentContext.js +6 -0
  148. package/dist/utils/PopupParentContext.js.map +1 -0
  149. package/dist/utils/PubSub.d.ts +11 -0
  150. package/dist/utils/PubSub.d.ts.map +1 -0
  151. package/dist/utils/PubSub.js +27 -0
  152. package/dist/utils/PubSub.js.map +1 -0
  153. package/dist/utils/PubSub.test.d.ts +2 -0
  154. package/dist/utils/PubSub.test.d.ts.map +1 -0
  155. package/dist/utils/PubSub.test.js +229 -0
  156. package/dist/utils/PubSub.test.js.map +1 -0
  157. package/dist/utils/SlideoverUtils.d.ts +7 -0
  158. package/dist/utils/SlideoverUtils.d.ts.map +1 -0
  159. package/dist/utils/SlideoverUtils.js +8 -0
  160. package/dist/utils/SlideoverUtils.js.map +1 -0
  161. package/dist/utils/getDefaultPopupParent.d.ts +2 -0
  162. package/dist/utils/getDefaultPopupParent.d.ts.map +1 -0
  163. package/dist/utils/getDefaultPopupParent.js +13 -0
  164. package/dist/utils/getDefaultPopupParent.js.map +1 -0
  165. package/dist/utils/hooks/useComponentDidMount.d.ts +3 -0
  166. package/dist/utils/hooks/useComponentDidMount.d.ts.map +1 -0
  167. package/dist/utils/hooks/useComponentDidMount.js +5 -0
  168. package/dist/utils/hooks/useComponentDidMount.js.map +1 -0
  169. package/dist/utils/hooks/usePubSub.d.ts +2 -0
  170. package/dist/utils/hooks/usePubSub.d.ts.map +1 -0
  171. package/dist/utils/hooks/usePubSub.js +12 -0
  172. package/dist/utils/hooks/usePubSub.js.map +1 -0
  173. package/package.json +3 -3
  174. package/src/components/button/Button.story.tsx +9 -0
  175. package/src/components/button/Button.tsx +10 -2
  176. package/src/components/button/button.scss +75 -33
  177. package/src/components/card/Card.test.tsx +0 -6
  178. package/src/components/card/Card.tsx +12 -7
  179. package/src/components/card/card.scss +32 -18
  180. package/src/components/formField/FormField.stories.tsx +9 -1
  181. package/src/components/formField/FormField.test.tsx +6 -0
  182. package/src/components/formField/FormField.tsx +5 -0
  183. package/src/components/formField/formField.scss +20 -8
  184. package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx +22 -0
  185. package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx +35 -0
  186. package/src/components/formField/inputs/checkbox/CheckboxInput.tsx +79 -0
  187. package/src/components/formField/inputs/checkbox/checkboxInput.scss +96 -0
  188. package/src/components/formField/inputs/dropdown/Dropdown.stories.tsx +185 -0
  189. package/src/components/formField/inputs/dropdown/Dropdown.test.tsx +185 -0
  190. package/src/components/formField/inputs/dropdown/Dropdown.tsx +82 -0
  191. package/src/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.tsx +41 -0
  192. package/src/components/formField/inputs/dropdown/buttons/dropdownButton/dropdownButton.scss +12 -0
  193. package/src/components/formField/inputs/dropdown/dropdown.scss +24 -0
  194. package/src/components/formField/inputs/dropdown/items/DropdownItemRenderer.tsx +38 -0
  195. package/src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx +49 -0
  196. package/src/components/formField/inputs/dropdown/items/dropdownItem/dropdownItem.scss +62 -0
  197. package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx +48 -0
  198. package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/dropdownMultiLineItem.scss +52 -0
  199. package/src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx +138 -0
  200. package/src/components/formField/inputs/dropdown/wrapper/dropdownWrapper.scss +32 -0
  201. package/src/components/formField/inputs/input.scss +25 -26
  202. package/src/components/formField/inputs/number/NumberInput.stories.tsx +25 -0
  203. package/src/components/formField/inputs/number/NumberInput.test.tsx +33 -0
  204. package/src/components/formField/inputs/number/NumberInput.tsx +107 -0
  205. package/src/components/formField/inputs/number/numberInput.scss +68 -0
  206. package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +97 -0
  207. package/src/components/formField/inputs/radio/RadioButtonInput.test.tsx +37 -0
  208. package/src/components/formField/inputs/radio/RadioButtonInput.tsx +46 -0
  209. package/src/components/formField/inputs/radio/radioButtonInput.scss +100 -0
  210. package/src/components/formField/label/label.scss +5 -1
  211. package/src/components/heading/Heading.stories.tsx +11 -12
  212. package/src/components/heading/Heading.tsx +21 -2
  213. package/src/components/heading/heading.scss +4 -0
  214. package/src/components/icon/Icon.tsx +2 -2
  215. package/src/components/icon/allowedIcons.tsx +2 -0
  216. package/src/components/pill/pill.scss +7 -7
  217. package/src/components/section/Section.stories.tsx +34 -0
  218. package/src/components/section/Section.test.tsx +308 -0
  219. package/src/components/section/Section.tsx +131 -0
  220. package/src/components/section/section.scss +42 -0
  221. package/src/components/slideover/Slideover.test.tsx +36 -0
  222. package/src/components/slideover/Slideover.tsx +38 -0
  223. package/src/components/slideover/slideover.scss +50 -0
  224. package/src/components/slideoverManager/SlideoverManager.stories.tsx +374 -0
  225. package/src/components/slideoverManager/SlideoverManager.test.tsx +64 -0
  226. package/src/components/slideoverManager/SlideoverManager.tsx +51 -0
  227. package/src/components/slideoverManager/slideoverManager.scss +13 -0
  228. package/src/components/tabs/tabs.scss +8 -7
  229. package/src/global.scss +10 -1
  230. package/src/index.scss +14 -3
  231. package/src/index.ts +9 -3
  232. package/src/tokens.scss +1321 -1239
  233. package/src/utils/Constants.ts +5 -0
  234. package/src/utils/PopupParentContext.ts +6 -0
  235. package/src/utils/PubSub.test.ts +303 -0
  236. package/src/utils/PubSub.ts +34 -0
  237. package/src/utils/SlideoverUtils.ts +9 -0
  238. package/src/utils/getDefaultPopupParent.ts +14 -0
  239. package/src/utils/hooks/useComponentDidMount.ts +5 -0
  240. package/src/utils/hooks/usePubSub.ts +12 -0
  241. package/tokens/export-config.json +32 -0
  242. package/tokens/json/$metadata.json +5 -0
  243. package/tokens/json/$themes.json +1333 -0
  244. package/tokens/json/Arbor.json +6329 -0
  245. package/src/components/heading/HeadingInnerContainer.tsx +0 -18
package/dist/index.css CHANGED
@@ -1,1255 +1,1337 @@
1
1
  @import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
2
+ /* stylelint-disable */
2
3
  /**
3
4
  * Do not edit directly, this file was auto-generated.
4
5
  */
5
6
  :root {
6
- --colour-brand-100: #ceefd5;
7
- --colour-brand-200: #a7e1b3;
8
- --colour-brand-300: #7ed28e;
9
- --colour-brand-400: #5ec171;
10
- --colour-brand-500: #3cad51;
11
- --colour-brand-700: #0b800b;
12
- --colour-brand-800: #005700;
13
- --colour-brand-900: #024002;
14
- --colour-brand-050: #f0faf3;
15
- --colour-brand-600: #0e8a0e;
16
- --colour-semantic-destructive-300: #e86565;
17
- --colour-semantic-destructive-500: #c93232;
18
- --colour-semantic-destructive-700: #920a0a;
19
- --colour-semantic-destructive-800: #610202;
20
- --colour-semantic-destructive-900: #360000;
21
- --colour-semantic-destructive-050: #fff5f5;
22
- --colour-semantic-destructive-100-hover: #ffe2e2;
23
- --colour-semantic-destructive-600-accessible: #a62323;
24
- --colour-semantic-warning-300: #ffa24a;
25
- --colour-semantic-warning-500: #e4720d;
26
- --colour-semantic-warning-700: #a74102;
27
- --colour-semantic-warning-800: #611f00;
28
- --colour-semantic-warning-900: #451600;
29
- --colour-semantic-warning-050: #fffaf5;
30
- --colour-semantic-warning-100-hover: #ffe8d0;
31
- --colour-semantic-warning-600-accessible: #b85605;
32
- --colour-semantic-success-300: #66cd84;
33
- --colour-semantic-success-500: #16a33d;
34
- --colour-semantic-success-700: #026319;
35
- --colour-semantic-success-800: #003508;
36
- --colour-semantic-success-050: #f5fff8;
37
- --colour-semantic-success-100-hover: #d7f9e0;
38
- --colour-semantic-success-600-accessible: #078427;
39
- --colour-semantic-info-300: #6db5e3;
40
- --colour-semantic-info-500: #2c8bca;
41
- --colour-semantic-info-700: #024f83;
42
- --colour-semantic-info-800: #053a61;
43
- --colour-semantic-info-900: #021a2b;
44
- --colour-semantic-info-050: #f5fbff;
45
- --colour-semantic-info-100-hover: #c7e3f4;
46
- --colour-semantic-info-600-accessible: #1c77b4;
47
- --colour-semantic-caution-300: #ffd45b;
48
- --colour-semantic-caution-500: #edae06;
49
- --colour-semantic-caution-600: #c18900;
50
- --colour-semantic-caution-800: #613f00;
51
- --colour-semantic-caution-050: #fffdf5;
52
- --colour-semantic-caution-700-kpi: #7d5400;
53
- --colour-semantic-caution-100-hover: #fff3d0;
54
- --colour-mono-white: #ffffff;
55
- --colour-mono-black: #202020;
56
- --colour-grey-100: #efefef;
57
- --colour-grey-200: #dfdfdf;
58
- --colour-grey-300: #d1d1d1;
59
- --colour-grey-400: #b3b3b3;
60
- --colour-grey-500: #7e7e7e;
61
- --colour-grey-600: #595959;
62
- --colour-grey-700: #474747;
63
- --colour-grey-800: #3b3b3b;
64
- --colour-grey-900: #2f2f2f;
65
- --colour-grey-050: #f8f8f8;
66
- --colour-chart-colours-green-4: #005f00;
67
- --colour-chart-colours-green-2: #009d00;
68
- --colour-chart-colours-green-1: #70cc12;
69
- --colour-chart-colours-teal-1: #6eeae2;
70
- --colour-chart-colours-teal-2: #93f8f2;
71
- --colour-chart-colours-purple-1: #ba9eea;
72
- --colour-chart-colours-purple-2: #cbaffb;
73
- --colour-chart-colours-orange-1: #ffb62c;
74
- --colour-chart-colours-orange-2: #f8c867;
75
- --colour-chart-colours-blue-1: #50b4f4;
76
- --colour-chart-colours-blue-2: #7acbff;
77
- --colour-chart-colours-green-3: #aaea0f;
78
- --colour-chart-colours-yellow-1: #ffd950;
79
- --colour-chart-colours-yellow-2: #ffe790;
80
- --colour-chart-colours-red-1: #fa6969;
81
- --colour-chart-colours-red-2: #ff8b8b;
82
- --colour-ramp-gradient-sequential-100: #e1f8a9;
83
- --colour-ramp-gradient-sequential-200: #d6f68a;
84
- --colour-ramp-gradient-sequential-300: #c4f157;
85
- --colour-ramp-gradient-sequential-400: #aaea0f;
86
- --colour-ramp-gradient-sequential-500: #91db0f;
87
- --colour-ramp-gradient-sequential-600: #76ca10;
88
- --colour-ramp-gradient-sequential-700: #59b80f;
89
- --colour-ramp-gradient-sequential-800: #299a0e;
90
- --colour-ramp-gradient-sequential-900: #005f00;
91
- --colour-ramp-gradient-sequential-050: #f6fee2;
92
- --colour-ramp-gradient-diverging-100: #fe9212;
93
- --colour-ramp-gradient-diverging-200: #fcb836;
94
- --colour-ramp-gradient-diverging-300: #f9dc8f;
95
- --colour-ramp-gradient-diverging-400: #f6fee2;
96
- --colour-ramp-gradient-diverging-500: #d8f78f;
97
- --colour-ramp-gradient-diverging-600: #b1ec21;
98
- --colour-ramp-gradient-diverging-700: #6cb70a;
99
- --colour-ramp-gradient-diverging-800: #217a04;
100
- --colour-ramp-gradient-diverging-900: #005f00;
101
- --colour-ramp-gradient-diverging-050: #ff8000;
102
- --colour-extended-colours-bg: #ffffff;
103
- --colour-extended-colours-green-100: #c6e8be;
104
- --colour-extended-colours-green-500: #009d00;
105
- --colour-extended-colours-green-800: #002a00;
106
- --colour-extended-colours-green-050: #d7ebd2;
107
- --colour-extended-colours-orange-100: #efe0bc;
108
- --colour-extended-colours-orange-500: #ffb62c;
109
- --colour-extended-colours-orange-800: #7e3e00;
110
- --colour-extended-colours-orange-050: #f7eed8;
111
- --colour-extended-colours-blue-100: #c6e1ef;
112
- --colour-extended-colours-blue-500: #50b4f4;
113
- --colour-extended-colours-blue-800: #003d69;
114
- --colour-extended-colours-blue-050: #e1eef5;
115
- --colour-extended-colours-purple-100: #e2dcef;
116
- --colour-extended-colours-purple-500: #ba9eea;
117
- --colour-extended-colours-purple-800: #472b61;
118
- --colour-extended-colours-purple-050: #eeebf4;
119
- --colour-extended-colours-yellow-100: #ede6c7;
120
- --colour-extended-colours-yellow-500: #ffd950;
121
- --colour-extended-colours-yellow-800: #7e5a00;
122
- --colour-extended-colours-yellow-050: #f7f2dd;
123
- --colour-extended-colours-teal-100: #cbefed;
124
- --colour-extended-colours-teal-500: #6eeae2;
125
- --colour-extended-colours-teal-800: #0a685b;
126
- --colour-extended-colours-teal-050: #e4f4f3;
127
- --colour-extended-colours-salmon-100: #f4d8d1;
128
- --colour-extended-colours-salmon-500: #fa6969;
129
- --colour-extended-colours-salmon-800: #7a0100;
130
- --colour-extended-colours-salmon-050: #f6e5e1;
131
- --button-medium-primary-default-color-background: #0e8a0e;
132
- --button-medium-primary-default-color-text: #ffffff;
133
- --button-medium-primary-default-color-icon: #ffffff;
134
- --button-medium-primary-hover-color-background: #005700;
135
- --button-medium-primary-hover-color-text: #ffffff;
136
- --button-medium-primary-hover-color-icon: #ffffff;
137
- --button-medium-primary-pressed-color-background: #024002;
138
- --button-medium-primary-pressed-color-text: #ffffff;
139
- --button-medium-primary-pressed-color-icon: #ffffff;
140
- --button-medium-primary-focus-color-background: #0e8a0e;
141
- --button-medium-primary-focus-color-text: #ffffff;
142
- --button-medium-primary-focus-color-icon: #ffffff;
143
- --button-medium-primary-focus-color-focus: #3cad51;
144
- --button-medium-secondary-default-color-text: #2f2f2f;
145
- --button-medium-secondary-default-color-background: #ffffff;
146
- --button-medium-secondary-default-color-border: #d1d1d1;
147
- --button-medium-secondary-default-color-icon: #2f2f2f;
148
- --button-medium-secondary-hover-color-background: #f8f8f8;
149
- --button-medium-secondary-hover-color-text: #2f2f2f;
150
- --button-medium-secondary-hover-color-icon: #2f2f2f;
151
- --button-medium-secondary-hover-color-border: #d1d1d1;
152
- --button-medium-secondary-pressed-color-background: #efefef;
153
- --button-medium-secondary-pressed-color-text: #2f2f2f;
154
- --button-medium-secondary-pressed-color-icon: #2f2f2f;
155
- --button-medium-secondary-pressed-color-border: #d1d1d1;
156
- --button-medium-tertiary-default-color-text: #2f2f2f;
157
- --button-medium-tertiary-default-color-background: #efefef;
158
- --button-medium-tertiary-default-color-icon: #2f2f2f;
159
- --button-medium-tertiary-hover-color-background: #dfdfdf;
160
- --button-medium-tertiary-hover-color-text: #2f2f2f;
161
- --button-medium-tertiary-hover-color-icon: #2f2f2f;
162
- --button-medium-tertiary-pressed-color-background: #d1d1d1;
163
- --button-medium-tertiary-pressed-color-text: #2f2f2f;
164
- --button-medium-tertiary-pressed-color-icon: #2f2f2f;
165
- --button-medium-tertiary-focus-color-background: #efefef;
166
- --button-medium-tertiary-focus-color-text: #2f2f2f;
167
- --button-medium-tertiary-focus-color-icon: #2f2f2f;
168
- --button-medium-tertiary-focus-color-focus: #3cad51;
169
- --button-medium-secondary-focus-color-background: #ffffff;
170
- --button-medium-secondary-focus-color-text: #2f2f2f;
171
- --button-medium-secondary-focus-color-icon: #2f2f2f;
172
- --button-medium-secondary-focus-color-border: #d1d1d1;
173
- --button-medium-secondary-focus-color-focus: #3cad51;
174
- --button-medium-text-link-default-color-text: #0e8a0e;
175
- --button-medium-text-link-default-color-icon: #0e8a0e;
176
- --button-medium-text-link-hover-color-text: #005700;
177
- --button-medium-text-link-hover-color-icon: #005700;
178
- --button-medium-text-link-pressed-color-text: #024002;
179
- --button-medium-text-link-pressed-color-icon: #024002;
180
- --button-medium-text-link-focus-color-text: #0e8a0e;
181
- --button-medium-text-link-focus-color-icon: #0e8a0e;
182
- --button-medium-text-link-focus-color-focus: #3cad51;
183
- --button-medium-primary-destructive-hover-color-text: #ffffff;
184
- --button-medium-primary-destructive-hover-color-background: #a62323;
185
- --button-medium-primary-destructive-hover-color-icon: #ffffff;
186
- --button-medium-primary-destructive-pressed-color-background: #920a0a;
187
- --button-medium-primary-destructive-pressed-color-text: #ffffff;
188
- --button-medium-primary-destructive-pressed-color-icon: #ffffff;
189
- --button-medium-primary-destructive-default-color-text: #ffffff;
190
- --button-medium-primary-destructive-default-color-icon: #ffffff;
191
- --button-medium-primary-destructive-default-color-background: #c93232;
192
- --button-medium-primary-destructive-focus-color-background: #c93232;
193
- --button-medium-primary-destructive-focus-color-text: #ffffff;
194
- --button-medium-primary-destructive-focus-color-icon: #ffffff;
195
- --button-medium-primary-destructive-focus-color-focus: #3cad51;
196
- --button-medium-secondary-destructive-default-color-border: #c93232;
197
- --button-medium-secondary-destructive-default-color-background: #ffffff;
198
- --button-medium-secondary-destructive-default-color-text: #a62323;
199
- --button-medium-secondary-destructive-default-color-icon: #a62323;
200
- --button-medium-secondary-destructive-hover-color-text: #ffffff;
201
- --button-medium-secondary-destructive-hover-color-icon: #ffffff;
202
- --button-medium-secondary-destructive-hover-color-background: #a62323;
203
- --button-medium-secondary-destructive-pressed-color-background: #920a0a;
204
- --button-medium-secondary-destructive-pressed-color-text: #ffffff;
205
- --button-medium-secondary-destructive-pressed-color-icon: #ffffff;
206
- --button-medium-secondary-destructive-focus-color-background: #ffffff;
207
- --button-medium-secondary-destructive-focus-color-border: #c93232;
208
- --button-medium-secondary-destructive-focus-color-text: #a62323;
209
- --button-medium-secondary-destructive-focus-color-icon: #a62323;
210
- --button-medium-secondary-destructive-focus-color-focus: #3cad51;
211
- --button-medium-warning-default-color-text: #e4720d;
212
- --button-medium-warning-default-color-icon: #e4720d;
213
- --button-medium-warning-default-color-border: #e4720d;
214
- --button-medium-warning-hover-color-text: #ffffff;
215
- --button-medium-warning-hover-color-icon: #ffffff;
216
- --button-medium-warning-hover-color-background: #e4720d;
217
- --button-medium-warning-pressed-color-background: #a74102;
218
- --button-medium-spacing-y: 0.75rem;
219
- --button-medium-spacing-x: 1rem;
220
- --button-medium-spacing-gap-y: 0.5rem;
221
- --button-medium-radius: 6.188rem;
222
- --button-small-primary-default-color-background: #0e8a0e;
223
- --button-small-primary-default-color-text: #ffffff;
224
- --button-small-primary-default-color-icon: #ffffff;
225
- --button-small-primary-hover-color-background: #005700;
226
- --button-small-primary-hover-color-text: #ffffff;
227
- --button-small-primary-hover-color-icon: #ffffff;
228
- --button-small-primary-pressed-color-background: #024002;
229
- --button-small-primary-pressed-color-text: #ffffff;
230
- --button-small-primary-pressed-color-icon: #ffffff;
231
- --button-small-primary-focus-color-background: #0e8a0e;
232
- --button-small-primary-focus-color-text: #ffffff;
233
- --button-small-primary-focus-color-icon: #ffffff;
234
- --button-small-primary-focus-color-focus: #3cad51;
235
- --button-small-secondary-default-color-background: #ffffff;
236
- --button-small-secondary-default-color-text: #2f2f2f;
237
- --button-small-secondary-default-color-icon: #2f2f2f;
238
- --button-small-secondary-default-color-border: #d1d1d1;
239
- --button-small-secondary-hover-color-background: #f8f8f8;
240
- --button-small-secondary-hover-color-text: #2f2f2f;
241
- --button-small-secondary-hover-color-icon: #2f2f2f;
242
- --button-small-secondary-hover-color-border: #d1d1d1;
243
- --button-small-secondary-pressed-color-background: #efefef;
244
- --button-small-secondary-pressed-color-text: #2f2f2f;
245
- --button-small-secondary-pressed-color-icon: #2f2f2f;
246
- --button-small-secondary-pressed-color-border: #d1d1d1;
247
- --button-small-secondary-focus-color-background: #ffffff;
248
- --button-small-secondary-focus-color-text: #2f2f2f;
249
- --button-small-secondary-focus-color-icon: #2f2f2f;
250
- --button-small-secondary-focus-color-border: #d1d1d1;
251
- --button-small-secondary-focus-color-focus: #3cad51;
252
- --button-small-tertiary-default-color-background: #efefef;
253
- --button-small-tertiary-default-color-text: #2f2f2f;
254
- --button-small-tertiary-default-color-icon: #2f2f2f;
255
- --button-small-tertiary-hover-color-background: #dfdfdf;
256
- --button-small-tertiary-hover-color-text: #2f2f2f;
257
- --button-small-tertiary-hover-color-icon: #2f2f2f;
258
- --button-small-tertiary-pressed-color-background: #d1d1d1;
259
- --button-small-tertiary-pressed-color-text: #2f2f2f;
260
- --button-small-tertiary-pressed-color-icon: #2f2f2f;
261
- --button-small-tertiary-focus-color-background: #efefef;
262
- --button-small-tertiary-focus-color-text: #2f2f2f;
263
- --button-small-tertiary-focus-color-icon: #2f2f2f;
264
- --button-small-tertiary-focus-color-focus: #3cad51;
265
- --button-small-primary-destructive-default-color-background: #c93232;
266
- --button-small-primary-destructive-default-color-text: #ffffff;
267
- --button-small-primary-destructive-default-color-icon: #ffffff;
268
- --button-small-primary-destructive-hover-color-background: #a62323;
269
- --button-small-primary-destructive-hover-color-text: #ffffff;
270
- --button-small-primary-destructive-hover-color-icon: #ffffff;
271
- --button-small-primary-destructive-pressed-color-background: #920a0a;
272
- --button-small-primary-destructive-pressed-color-text: #ffffff;
273
- --button-small-primary-destructive-pressed-color-icon: #ffffff;
274
- --button-small-primary-destructive-focus-color-background: #c93232;
275
- --button-small-primary-destructive-focus-color-text: #ffffff;
276
- --button-small-primary-destructive-focus-color-icon: #ffffff;
277
- --button-small-primary-destructive-focus-color-focus: #3cad51;
278
- --button-small-secondary-destructive-default-color-background: #ffffff;
279
- --button-small-secondary-destructive-default-color-border: #c93232;
280
- --button-small-secondary-destructive-default-color-text: #a62323;
281
- --button-small-secondary-destructive-default-color-icon: #a62323;
282
- --button-small-secondary-destructive-hover-color-background: #a62323;
283
- --button-small-secondary-destructive-hover-color-text: #ffffff;
284
- --button-small-secondary-destructive-hover-color-icon: #ffffff;
285
- --button-small-secondary-destructive-pressed-color-background: #920a0a;
286
- --button-small-secondary-destructive-pressed-color-text: #ffffff;
287
- --button-small-secondary-destructive-pressed-color-icon: #ffffff;
288
- --button-small-secondary-destructive-focus-color-background: #ffffff;
289
- --button-small-secondary-destructive-focus-color-border: #c93232;
290
- --button-small-secondary-destructive-focus-color-text: #a62323;
291
- --button-small-secondary-destructive-focus-color-icon: #a62323;
292
- --button-small-secondary-destructive-focus-color-focus: #3cad51;
293
- --button-small-text-link-default-color-text: #0e8a0e;
294
- --button-small-text-link-default-color-icon: #0e8a0e;
295
- --button-small-text-link-hover-color-text: #005700;
296
- --button-small-text-link-hover-color-icon: #005700;
297
- --button-small-text-link-pressed-color-text: #024002;
298
- --button-small-text-link-pressed-color-icon: #024002;
299
- --button-small-text-link-focus-color-text: #0e8a0e;
300
- --button-small-text-link-focus-color-icon: #0e8a0e;
301
- --button-small-text-link-focus-color-focus: #3cad51;
302
- --button-small-warning-default-color-text: #e4720d;
303
- --button-small-warning-default-color-icon: #e4720d;
304
- --button-small-warning-default-color-border: #e4720d;
305
- --button-small-warning-hover-color-text: #ffffff;
306
- --button-small-warning-hover-color-icon: #ffffff;
307
- --button-small-warning-hover-color-background: #e4720d;
308
- --button-small-warning-pressed-color-background: #a74102;
309
- --button-small-spacing-gap-y: 0.5rem;
310
- --button-small-spacing-y: 1rem;
311
- --button-small-spacing-x: 0.75rem;
312
- --button-small-radius: 6.188rem;
313
- --section-list-row-color-text: #2f2f2f;
314
- --section-list-row-color-icon: #2f2f2f;
315
- --section-list-row-default-color-background: #ffffff;
316
- --section-list-row-default-color-icon-arrow: #b3b3b3;
317
- --section-list-row-hover-hover-bg: #f8f8f8;
318
- --section-list-row-hover-color-icon-arrow: #2f2f2f;
319
- --section-list-row-pressed-pressed-bg: #dfdfdf;
320
- --section-list-row-color-border: #f8f8f8;
321
- --section-list-row-spacing-x: 0.5rem;
322
- --section-list-row-spacing-y: 0.75rem;
323
- --section-list-row-radius: 0.5rem;
324
- --section-list-row-accordions-spacing-gap: 0.75rem;
325
- --section-list-row-accordions-spacing-y: 0.25rem;
326
- --section-list-row-accordions-spacing-x: 0.5rem;
327
- --section-heading-color-text: #2f2f2f;
328
- --section-heading-color-icon: #2f2f2f;
329
- --section-heading-interactive-default-color-background: #ffffff;
330
- --section-heading-interactive-hover-color-background: #f8f8f8;
331
- --section-heading-interactive-pressed-color-background: #dfdfdf;
332
- --section-heading-interactive-focus-color-border: #3cad51;
333
- --section-heading-interactive-spacing-bottom: 0.5rem;
334
- --section-heading-interactive-holder-spacing-y: 1rem;
335
- --section-heading-interactive-radius: 0.5rem;
336
- --section-heading-color-border: #f8f8f8;
337
- --section-heading-spacing-top: 0rem;
338
- --section-heading-spacing-right: 0.5rem;
339
- --section-heading-spacing-bottom: 0.5rem;
340
- --section-heading-spacing-left: 0.5rem;
341
- --section-heading-spacing-gap: 0.75rem;
342
- --section-container-color-background: #ffffff;
343
- --section-container-radius: 0.5rem;
344
- --section-container-spacing-x: 0.5rem;
345
- --section-container-spacing-y: 0.5rem;
346
- --section-subsection-color-background: #ffffff;
347
- --section-subsection-heading-interactive-color-border: #f8f8f8;
348
- --section-subsection-heading-interactive-spacing-y: 1rem;
349
- --section-subsection-heading-interactive-radius: 0.5rem;
350
- --section-subsection-heading-interactive-weight-border: 0.062rem;
351
- --section-subsection-heading-spacing-x: 0.5rem;
352
- --section-subsection-heading-spacing-y: 0.5rem;
7
+ --font-size-1-11: 0.688rem;
8
+ --font-size-2-13: 0.812rem;
9
+ --font-size-3-14: 0.875rem;
10
+ --font-size-4-16: 1rem;
11
+ --font-size-6-22: 1.375rem;
12
+ --font-size-7-27: 1.688rem;
13
+ --font-size-8-40: 2.5rem;
14
+ --font-size-5-18: 1.125rem;
15
+ --font-family-display: Grenette;
16
+ --font-family-standard: Inter;
17
+ --font-weight-bold: 700;
18
+ --font-weight-medium: 500;
19
+ --font-weight-regular: 400;
20
+ --font-weight-semi-bold: 600;
21
+ --page-sign-in-color-background: #fffcf8;
22
+ --color-grey-100: #efefef;
23
+ --color-grey-200: #dfdfdf;
24
+ --color-grey-300: #d1d1d1;
25
+ --color-grey-400: #b3b3b3;
26
+ --color-grey-500: #7e7e7e;
27
+ --color-grey-600: #595959;
28
+ --color-grey-700: #474747;
29
+ --color-grey-800: #3b3b3b;
30
+ --color-grey-900: #2f2f2f;
31
+ --color-grey-050: #f8f8f8;
32
+ --color-mono-black: #202020;
33
+ --color-mono-white: #ffffff;
34
+ --color-brand-100: #ceefd5;
35
+ --color-brand-200: #a7e1b3;
36
+ --color-brand-300: #7ed28e;
37
+ --color-brand-400: #5ec171;
38
+ --color-brand-500: #3cad51;
39
+ --color-brand-600: #0e8a0e;
40
+ --color-brand-700: #0b800b;
41
+ --color-brand-800: #005700;
42
+ --color-brand-900: #024002;
43
+ --color-brand-050: #f0faf3;
44
+ --color-semantic-info-100: #c7e3f4;
45
+ --color-semantic-info-300: #6db5e3;
46
+ --color-semantic-info-500: #2c8bca;
47
+ --color-semantic-info-600: #1c77b4;
48
+ --color-semantic-info-700: #024f83;
49
+ --color-semantic-info-800: #053a61;
50
+ --color-semantic-info-900: #021a2b;
51
+ --color-semantic-info-050: #f5fbff;
52
+ --color-semantic-caution-100: #fff3d0;
53
+ --color-semantic-caution-300: #ffd45b;
54
+ --color-semantic-caution-500: #edae06;
55
+ --color-semantic-caution-600: #c18900;
56
+ --color-semantic-caution-700: #7d5400;
57
+ --color-semantic-caution-800: #613f00;
58
+ --color-semantic-caution-050: #fffdf5;
59
+ --color-semantic-success-100: #d7f9e0;
60
+ --color-semantic-success-300: #66cd84;
61
+ --color-semantic-success-500: #16a33d;
62
+ --color-semantic-success-600: #078427;
63
+ --color-semantic-success-700: #026319;
64
+ --color-semantic-success-800: #003508;
65
+ --color-semantic-success-050: #f5fff8;
66
+ --color-semantic-warning-100: #ffe8d0;
67
+ --color-semantic-warning-300: #ffa24a;
68
+ --color-semantic-warning-500: #e4720d;
69
+ --color-semantic-warning-600: #b85605;
70
+ --color-semantic-warning-700: #a74102;
71
+ --color-semantic-warning-800: #611f00;
72
+ --color-semantic-warning-900: #451600;
73
+ --color-semantic-warning-050: #fffaf5;
74
+ --color-semantic-destructive-100: #ffe2e2;
75
+ --color-semantic-destructive-300: #e86565;
76
+ --color-semantic-destructive-500: #c93232;
77
+ --color-semantic-destructive-600: #a62323;
78
+ --color-semantic-destructive-700: #920a0a;
79
+ --color-semantic-destructive-800: #610202;
80
+ --color-semantic-destructive-900: #360000;
81
+ --color-semantic-destructive-050: #fff5f5;
82
+ --color-chart-colours-red-1: #fa6969;
83
+ --color-chart-colours-red-2: #ff8b8b;
84
+ --color-chart-colours-blue-1: #50b4f4;
85
+ --color-chart-colours-blue-2: #7acbff;
86
+ --color-chart-colours-teal-1: #6eeae2;
87
+ --color-chart-colours-teal-2: #93f8f2;
88
+ --color-chart-colours-green-1: #70cc12;
89
+ --color-chart-colours-green-2: #009d00;
90
+ --color-chart-colours-green-3: #aaea0f;
91
+ --color-chart-colours-green-4: #005f00;
92
+ --color-chart-colours-orange-1: #ffb62c;
93
+ --color-chart-colours-orange-2: #f8c867;
94
+ --color-chart-colours-purple-1: #ba9eea;
95
+ --color-chart-colours-purple-2: #cbaffb;
96
+ --color-chart-colours-yellow-1: #ffd950;
97
+ --color-chart-colours-yellow-2: #ffe790;
98
+ --color-extended-colours-blue-100: #c6e1ef;
99
+ --color-extended-colours-blue-500: #50b4f4;
100
+ --color-extended-colours-blue-800: #003d69;
101
+ --color-extended-colours-blue-050: #e1eef5;
102
+ --color-extended-colours-teal-100: #cbefed;
103
+ --color-extended-colours-teal-500: #6eeae2;
104
+ --color-extended-colours-teal-800: #0a685b;
105
+ --color-extended-colours-teal-050: #e4f4f3;
106
+ --color-extended-colours-green-100: #c6e8be;
107
+ --color-extended-colours-green-500: #009d00;
108
+ --color-extended-colours-green-800: #002a00;
109
+ --color-extended-colours-green-050: #d7ebd2;
110
+ --color-extended-colours-orange-100: #efe0bc;
111
+ --color-extended-colours-orange-500: #ffb62c;
112
+ --color-extended-colours-orange-800: #7e3e00;
113
+ --color-extended-colours-orange-050: #f7eed8;
114
+ --color-extended-colours-purple-100: #e2dcef;
115
+ --color-extended-colours-purple-500: #ba9eea;
116
+ --color-extended-colours-purple-800: #472b61;
117
+ --color-extended-colours-purple-050: #eeebf4;
118
+ --color-extended-colours-salmon-100: #f4d8d1;
119
+ --color-extended-colours-salmon-500: #fa6969;
120
+ --color-extended-colours-salmon-800: #7a0100;
121
+ --color-extended-colours-salmon-050: #f6e5e1;
122
+ --color-extended-colours-yellow-100: #ede6c7;
123
+ --color-extended-colours-yellow-500: #ffd950;
124
+ --color-extended-colours-yellow-800: #7e5a00;
125
+ --color-extended-colours-yellow-050: #f7f2dd;
126
+ --color-ramp-gradient-diverging-100: #fe9212;
127
+ --color-ramp-gradient-diverging-200: #fcb836;
128
+ --color-ramp-gradient-diverging-300: #f9dc8f;
129
+ --color-ramp-gradient-diverging-400: #f6fee2;
130
+ --color-ramp-gradient-diverging-500: #d8f78f;
131
+ --color-ramp-gradient-diverging-600: #b1ec21;
132
+ --color-ramp-gradient-diverging-700: #6cb70a;
133
+ --color-ramp-gradient-diverging-800: #217a04;
134
+ --color-ramp-gradient-diverging-900: #005f00;
135
+ --color-ramp-gradient-diverging-050: #ff8000;
136
+ --color-ramp-gradient-sequential-100: #e1f8a9;
137
+ --color-ramp-gradient-sequential-200: #d6f68a;
138
+ --color-ramp-gradient-sequential-300: #c4f157;
139
+ --color-ramp-gradient-sequential-400: #aaea0f;
140
+ --color-ramp-gradient-sequential-500: #91db0f;
141
+ --color-ramp-gradient-sequential-600: #76ca10;
142
+ --color-ramp-gradient-sequential-700: #59b80f;
143
+ --color-ramp-gradient-sequential-800: #299a0e;
144
+ --color-ramp-gradient-sequential-900: #005f00;
145
+ --color-ramp-gradient-sequential-050: #f6fee2;
146
+ --focus-border: 3px;
147
+ --modal-overlay-color-background: rgba(32, 32, 32, 0.5);
148
+ --avatar-large-size: 3rem;
149
+ --avatar-small-size: 1.25rem;
150
+ --avatar-medium-size: 2rem;
151
+ --avatar-extra-large-size: 6rem;
152
+ --border-weight: 1px;
153
+ --widget-notifications-read-color: #ffffff;
154
+ --section-heading-spacing-top: 0.5rem;
353
155
  --section-subsection-radius: 0rem;
354
- --section-subsection-spacing-x: 0.5rem;
355
- --section-subsection-spacing-y: 0.5rem;
356
- --section-table-color-background: #ffffff;
357
- --section-table-spacing-gap: 0.5rem;
358
- --pill-bg: #ffffff;
359
- --pill-single-filter-default-color-background: #ffffff;
360
- --pill-single-filter-default-color-text: #2f2f2f;
361
- --pill-single-filter-default-color-border: #efefef;
362
- --pill-single-filter-default-focus: #3cad51;
363
- --pill-single-filter-hover-color-background: #f8f8f8;
364
- --pill-single-filter-hover-color-border: #7e7e7e;
365
- --pill-single-filter-hover-color-text: #2f2f2f;
366
- --pill-single-filter-pressed-color-background: #efefef;
367
- --pill-single-filter-pressed-color-border: #7e7e7e;
368
- --pill-single-filter-pressed-color-text: #2f2f2f;
369
- --pill-single-filter-active-color-background: #f8f8f8;
370
- --pill-single-filter-active-color-border: #2f2f2f;
371
- --pill-single-filter-active-color-text: #2f2f2f;
372
- --pill-single-filter-active-focus: #3cad51;
373
- --pill-single-filter-spacing-x: 0.75rem;
374
- --pill-single-filter-spacing-y: 1rem;
375
- --pill-single-filter-radius: 6.188rem;
376
- --pill-checkbox-default-color-background: #ffffff;
377
- --pill-checkbox-default-color-border: #efefef;
378
- --pill-checkbox-default-color-text: #2f2f2f;
379
- --pill-checkbox-default-focus: #3cad51;
380
- --pill-checkbox-default-color-icon: #7e7e7e;
381
- --pill-checkbox-hover-color-background: #f8f8f8;
382
- --pill-checkbox-hover-color-border: #7e7e7e;
383
- --pill-checkbox-hover-color-text: #2f2f2f;
384
- --pill-checkbox-hover-color-icon: #2f2f2f;
385
- --pill-checkbox-selected-color-background: #f0faf3;
386
- --pill-checkbox-selected-color-border: #0e8a0e;
387
- --pill-checkbox-selected-color-text: #005700;
388
- --pill-checkbox-selected-focus: #3cad51;
389
- --pill-checkbox-selected-color-icon: #0e8a0e;
390
- --pill-checkbox-spacing-x: 0.75rem;
391
- --pill-checkbox-spacing-y: 1rem;
392
- --pill-checkbox-radius: 6.188rem;
393
- --sidebar-bg: #ffffff;
394
- --side-nav-icon-bg: #ffffff;
395
- --side-nav-icon-icon: #7e7e7e;
396
- --side-nav-icon-icon-bg-hover: #f8f8f8;
397
- --side-nav-icon-icon-hover: #2f2f2f;
398
- --side-nav-icon-icon-active: #0e8a0e;
399
- --side-nav-icon-icon-bg-active: #f0faf3;
400
- --side-nav-icon-icon-bg-pressed: #efefef;
401
- --side-nav-bg: #ffffff;
402
- --side-nav-list-default-text: #2f2f2f;
403
- --side-nav-list-default-favourite-icon: #7e7e7e;
404
- --side-nav-list-default-icon: #2f2f2f;
405
- --side-nav-list-hover-text: #2f2f2f;
406
- --side-nav-list-hover-favourite-icon: #7e7e7e;
407
- --side-nav-list-hover-bg: #f8f8f8;
408
- --side-nav-list-hover-icon: #2f2f2f;
409
- --side-nav-list-active-text: #005700;
410
- --side-nav-list-active-favourite-icon: #0e8a0e;
411
- --side-nav-list-active-bg: #f0faf3;
412
- --side-nav-list-active-icon: #005700;
413
- --search-global-default-color-background: #f8f8f8;
414
- --search-global-default-color-text: #2f2f2f;
415
- --search-global-default-color-icon: #2f2f2f;
416
- --search-global-hover-color-background: #efefef;
417
- --search-global-hover-color-icon: #2f2f2f;
418
- --search-global-hover-color-text: #2f2f2f;
419
- --search-global-focus-color-background: #f8f8f8;
420
- --search-global-focus-color-icon: #2f2f2f;
421
- --search-global-focus-color-text: #2f2f2f;
422
- --search-global-focus-color-border: #efefef;
423
- --search-global-focus-weight-border: 0.062rem;
424
- --search-global-active-color-background: #ffffff;
425
- --search-global-active-color-icon: #595959;
426
- --search-global-active-color-text: #595959;
427
- --search-global-active-color-border: #efefef;
428
- --search-global-active-weight-border: 0.062rem;
429
- --search-global-spacing-gap: 0.5rem;
430
- --search-global-spacing-x: 1rem;
431
- --search-global-spacing-y: 0.5rem;
432
- --search-global-radius: 1rem;
433
- --search-color-background: #ffffff;
434
- --search-pill-active-bg: #efefef;
435
- --search-pill-active-border: #2f2f2f;
436
- --search-pill-active-text: #2f2f2f;
437
- --search-pill-default-bg: #ffffff;
438
- --search-pill-default-bg-hover: #f8f8f8;
439
- --search-pill-default-bg-pressed: #efefef;
440
- --search-pill-default-text: #2f2f2f;
441
- --search-pill-default-border: #efefef;
442
- --search-list-default-color-background: #ffffff;
443
- --search-list-hover-color-background: #f8f8f8;
444
- --search-list-color-text: #2f2f2f;
445
- --search-list-color-header: #595959;
446
- --search-list-color-icon: #2f2f2f;
447
- --search-list-spacing-gap: 0.5rem;
448
- --search-list-spacing-x: 0.5rem;
449
- --search-list-spacing-y: 0.5rem;
450
- --search-list-radius: 0.5rem;
451
- --search-on-page-active-color-background: #ffffff;
452
- --search-on-page-active-color-icon: #595959;
453
- --search-on-page-active-color-text: #595959;
454
- --search-on-page-active-color-border: #efefef;
455
- --search-on-page-active-weight-border: 0.062rem;
456
- --search-on-page-default-color-background: #ffffff;
457
- --search-on-page-default-color-icon: #595959;
458
- --search-on-page-default-color-text: #595959;
459
- --search-on-page-focus-color-background: #ffffff;
460
- --search-on-page-focus-color-icon: #595959;
461
- --search-on-page-focus-color-text: #595959;
462
- --search-on-page-hover-color-background: #efefef;
463
- --search-on-page-hover-color-icon: #2f2f2f;
464
- --search-on-page-hover-color-text: #2f2f2f;
465
- --search-on-page-spacing-gap: 0.5rem;
466
- --search-on-page-radius: 1rem;
467
- --search-on-page-spacing-x: 1rem;
468
- --search-on-page-spacing-y: 0.5rem;
469
- --search-in-table-active-color-background: #ffffff;
470
- --search-in-table-active-color-icon: #595959;
471
- --search-in-table-active-color-text: #595959;
472
- --search-in-table-active-color-border: #efefef;
473
- --search-in-table-active-weight-border: 0.062rem;
474
- --search-in-table-active-spacing-gap: 0.5rem;
475
- --search-in-table-active-radius: 1rem;
476
- --search-in-table-active-spacing-x: 1rem;
477
- --search-in-table-active-spacing-y: 0.5rem;
478
- --search-in-table-default-color-background: #ffffff;
479
- --search-in-table-default-color-icon: #595959;
480
- --search-in-table-default-color-text: #595959;
481
- --search-in-table-focus-color-background: #ffffff;
482
- --search-in-table-focus-color-icon: #595959;
483
- --search-in-table-focus-color-text: #595959;
484
- --search-in-table-focus-color-border: #efefef;
485
- --search-in-table-focus-weight-border: 0.062rem;
486
- --search-in-table-hover-color-background: #f8f8f8;
487
- --search-in-table-hover-color-icon: #2f2f2f;
488
- --search-in-table-hover-color-text: #2f2f2f;
489
- --search-in-table-radius: 6.188rem;
490
- --search-in-section-active-color-background: #ffffff;
491
- --search-in-section-active-color-icon: #595959;
492
- --search-in-section-active-color-text: #595959;
493
- --search-in-section-active-color-border: #efefef;
494
- --search-in-section-active-weight-border: 0.062rem;
495
- --search-in-section-default-color-background: #f8f8f8;
496
- --search-in-section-default-color-icon: #2f2f2f;
497
- --search-in-section-default-color-text: #2f2f2f;
498
- --search-in-section-focus-color-background: #f8f8f8;
499
- --search-in-section-focus-color-icon: #2f2f2f;
500
- --search-in-section-focus-color-text: #2f2f2f;
501
- --search-in-section-focus-color-border: #efefef;
502
- --search-in-section-focus-weight-border: 0.062rem;
503
- --search-in-section-hover-color-background: #efefef;
504
- --search-in-section-hover-color-icon: #2f2f2f;
505
- --search-in-section-hover-color-text: #2f2f2f;
506
- --search-in-section-spacing-gap: 0.5rem;
507
- --search-in-section-radius: 1rem;
508
- --search-in-section-spacing-x: 1rem;
509
- --search-in-section-spacing-y: 0.5rem;
510
- --search-results-color-border: #f8f8f8;
511
- --search-results-spacing-gap: 0.25rem;
512
- --search-results-spacing-x: 0.5rem;
513
- --search-results-spacing-y: 0.5rem;
514
- --search-results-weight-border: 0.062rem;
515
- --search-color-text: #2f2f2f;
516
- --search-filters-spacing-gap: 0.5rem;
517
- --search-filters-spacing-x: 1rem;
518
- --search-filters-spacing-y: 1rem;
519
- --search-radius: 0.5rem;
520
- --search-footer-spacing-gap: 0.5rem;
521
- --search-footer-spacing-x: 1rem;
522
- --search-footer-spacing-y: 1rem;
523
- --widget-attachments-default-color-text: #2f2f2f;
524
- --widget-attachments-default-color-background: #f8f8f8;
525
- --widget-attachments-default-color-icon: #2f2f2f;
526
- --widget-attachments-hover-color-background: #efefef;
527
- --widget-attachments-hover-color-text: #2f2f2f;
528
- --widget-attachments-hover-color-icon: #2f2f2f;
529
- --widget-container-color-background: #ffffff;
530
- --widget-container-radius: 0.5rem;
531
- --widget-container-spacing-x: 0.5rem;
532
- --widget-container-spacing-y: 0.5rem;
533
- --widget-heading-color-border: #f8f8f8;
534
- --widget-heading-color-icon: #2f2f2f;
535
- --widget-heading-color-text: #2f2f2f;
536
- --widget-heading-interactive-default-color-background: #ffffff;
537
- --widget-heading-interactive-hover-color-background: #f8f8f8;
538
- --widget-heading-interactive-pressed-color-background: #dfdfdf;
539
- --widget-heading-interactive-focus-color-border: #3cad51;
540
- --widget-heading-interactive-spacing-y: 0.75rem;
541
- --widget-heading-interactive-radius: 0.5rem;
542
- --widget-heading-interactive-holder-spacing-y: 1rem;
543
- --widget-heading-interactive-spacing-x: 0.5rem;
544
- --widget-heading-color-background: #ffffff;
545
- --widget-heading-spacing-top: 0.75rem;
546
- --widget-heading-spacing-right: 0.5rem;
547
- --widget-heading-spacing-bottom: 1rem;
548
- --widget-heading-spacing-left: 0.5rem;
549
- --widget-heading-weight-border: 0.062rem;
550
- --widget-heading-spacing-gap: 0.75rem;
551
- --widget-list-row-color-border: #f8f8f8;
552
- --widget-list-row-color-icon: #2f2f2f;
553
- --widget-list-row-color-text: #2f2f2f;
554
- --widget-list-row-default-color-background: #ffffff;
555
- --widget-list-row-default-color-icon-arrow: #b3b3b3;
556
- --widget-list-row-hover-hover-bg: #f8f8f8;
557
- --widget-list-row-hover-color-icon-arrow: #2f2f2f;
558
- --widget-list-row-pressed-pressed-bg: #dfdfdf;
559
- --widget-list-row-radius: 0.5rem;
560
- --widget-list-row-spacing-x: 0.5rem;
561
- --widget-list-row-spacing-y: 0.75rem;
562
- --widget-list-row-accordions-spacing-gap: 0.75rem;
563
- --widget-list-row-accordions-spacing-y: 0.25rem;
564
- --widget-list-row-accordions-spacing-x: 0.5rem;
565
- --widget-table-color-background: #ffffff;
566
- --widget-table-spacing-gap: 0.5rem;
567
- --widget-notifications-read-default-color-background: #ffffff;
568
- --widget-notifications-read-hover-color-background: #f8f8f8;
569
- --widget-notifications-read-focus-color-background: #ffffff;
570
- --widget-notifications-read-color-text: #595959;
571
- --widget-notifications-read-color-title: #2f2f2f;
572
- --widget-notifications-not-read-default-color-background: #f0faf3;
573
- --widget-notifications-not-read-hover-color-background: #ceefd5;
574
- --widget-notifications-not-read-focus-color-background: #f0faf3;
575
- --widget-notifications-not-read-color-text: #024002;
576
- --widget-notifications-not-read-color-title: #024002;
577
- --widget-notifications-color-title: #2f2f2f;
578
- --widget-notifications-color-text: #595959;
579
- --widget-notifications-radius: 0.5rem;
580
- --widget-notifications-spacing-gap: 0.5rem;
581
- --widget-notifications-spacing-x: 0.5rem;
582
- --widget-notifications-spacing-y: 0.5rem;
583
- --widget-favourites-default-color-background: #ffffff;
584
- --widget-favourites-color-text: #595959;
585
- --widget-favourites-hover-color-background: #f8f8f8;
586
- --widget-favourites-focus-color-background: #ffffff;
587
- --widget-favourites-color-icon: #d1d1d1;
588
- --widget-favourites-color-border: #f8f8f8;
589
- --widget-favourites-radius: 0.5rem;
590
- --widget-favourites-spacing-gap: 0.5rem;
591
- --widget-favourites-spacing-x: 0.5rem;
592
- --widget-favourites-spacing-y: 0.75rem;
593
- --widget-favourites-weight-border: 0.062rem;
594
- --widget-calendar-default-color-background: #ffffff;
595
- --widget-calendar-hover-color-background: #f8f8f8;
596
- --widget-calendar-focus-color-background: #ffffff;
597
- --widget-calendar-color-text: #595959;
598
- --widget-calendar-color-border: #f8f8f8;
599
- --widget-calendar-radius: 0.5rem;
600
- --widget-calendar-spacing-gap: 0.5rem;
601
- --widget-calendar-spacing-x: 0.5rem;
602
- --widget-calendar-spacing-y: 0.75rem;
603
- --widget-calendar-weight-border: 0.062rem;
604
- --widget-payments-default-color-background: #ffffff;
605
- --widget-payments-color-title: #2f2f2f;
606
- --widget-payments-color-text: #595959;
607
- --widget-payments-hover-color-background: #f8f8f8;
608
- --widget-payments-focus-color-background: #ffffff;
609
- --widget-payments-radius: 0.5rem;
610
- --widget-payments-spacing-gap: 0.5rem;
611
- --widget-payments-spacing-x: 0.5rem;
612
- --widget-payments-spacing-y: 0.5rem;
613
- --breadcrumbs-breadcrumb-link-default-color-text: #595959;
614
- --breadcrumbs-breadcrumb-link-default-color-icon: #595959;
615
- --breadcrumbs-breadcrumb-link-default-spacing-gap-y: 0.25rem;
616
- --breadcrumbs-breadcrumb-link-active-color-text: #2f2f2f;
617
- --breadcrumbs-breadcrumb-link-active-color-icon: #2f2f2f;
618
- --breadcrumbs-breadcrumb-link-active-spacing-gap-y: 0.25rem;
619
- --breadcrumbs-breadcrumb-link-hover-color-text: #0e8a0e;
620
- --breadcrumbs-breadcrumb-link-hover-color-icon: #0e8a0e;
621
- --breadcrumbs-breadcrumb-link-hover-spacing-gap-y: 0.25rem;
622
- --breadcrumbs-breadcrumb-link-spacing-gap-y: 0.25rem;
623
- --breadcrumbs-copy-icon-default-color: #2f2f2f;
624
- --breadcrumbs-copy-icon-hover-color: #2f2f2f;
625
- --breadcrumbs-copy-icon-hover-color-background: #efefef;
626
- --breadcrumbs-copy-icon-number: 6.188rem;
627
- --breadcrumbs-elipsis-default-color: #2f2f2f;
628
- --breadcrumbs-elipsis-hover-color: #2f2f2f;
629
- --breadcrumbs-elipsis-hover-colour-background: #efefef;
630
- --breadcrumbs-elipsis-radius: 6.188rem;
631
- --breadcrumbs-divider-default-color: #595959;
632
- --breadcrumbs-spacing-gap-y: 0.25rem;
633
- --breadcrumbs-spacing-gap-y: 0.5rem; /* stylelint-disable-line declaration-block-no-duplicate-custom-properties */
634
- --filters-default-color-background: #ffffff;
635
- --filters-color-text: #2f2f2f;
636
- --filters-color-icon: #0e8a0e;
637
- --filters-hover-color-background: #efefef;
638
- --filters-color-border: #efefef;
639
- --filters-spacing-x: 0.5rem;
640
- --filters-spacing-gap-y: 0.5rem;
641
- --filters-spacing-gap-x: 0.25rem;
642
- --filters-radius: 0.5rem;
643
- --filters-chip-container-spacing-gap-y: 0.5rem;
644
- --filters-spacing-y: 0.5rem;
645
- --form-field-pill-default-color-background: #f8f8f8;
646
- --form-field-pill-default-color-text: #2f2f2f;
647
- --form-field-pill-default-color-icon: #2f2f2f;
648
- --form-field-pill-x-icon-default-color-icon: #595959;
649
- --form-field-pill-x-icon-hover-color-background: #595959;
650
- --form-field-pill-x-icon-hover-color-icon: #f8f8f8;
651
- --form-field-pill-hover-color-background: #efefef;
652
- --form-field-pill-hover-color-text: #2f2f2f;
653
- --form-field-pill-hover-color-icon: #2f2f2f;
654
- --form-field-pill-placeholder-color-text: #595959;
655
- --form-field-placeholder-color-background: #ffffff;
656
- --form-field-placeholder-color-border: #dfdfdf;
657
- --form-field-hover-color-border: #7e7e7e;
658
- --form-field-hover-color-background: #ffffff;
659
- --form-field-focus-color-border: #0e8a0e;
660
- --form-field-focus-color-background: #ffffff;
661
- --form-field-error-color-border: #c93232;
662
- --form-field-error-color-background: #ffffff;
663
- --form-field-error-color-error-text: #595959;
664
- --form-field-error-color-error-icon: #c93232;
665
- --form-field-disabled-color-background: #efefef;
666
- --form-field-disabled-color-border: #dfdfdf;
667
- --form-field-default-color-background: #ffffff;
668
- --form-field-default-color-border: #dfdfdf;
669
- --form-field-help-text-default-color-text: #0e8a0e;
670
- --form-field-help-text-default-color-icon: #0e8a0e;
671
- --form-field-help-text-hover-color-text: #005700;
672
- --form-field-help-text-hover-color-icon: #005700;
673
- --form-field-form-numeric: 0rem;
674
- --form-field-icon-default-color-icon: #2f2f2f;
675
- --form-field-icon-default-color-background: #ffffff;
676
- --form-field-icon-hover-color-background: #f8f8f8;
677
- --form-field-icon-hover-color-icon: #2f2f2f;
678
- --form-field-icon-disabled-color-background: #ffffff;
679
- --form-field-icon-disabled-color-icon: #b3b3b3;
680
- --form-field-icon-pressed-color-background: #efefef;
681
- --form-field-icon-pressed-color-icon: #2f2f2f;
682
- --form-field-icon-radius: 6.188rem;
683
- --form-field-label-color-text: #2f2f2f;
684
- --form-field-description-color-text: #595959;
685
- --form-field-label-color-icon: #2f2f2f;
686
- --form-field-spacing-x: 0.5rem;
687
- --form-field-radius: 0.5rem;
688
- --form-field-spacing-y: 0.5rem;
689
- --text-field-small-height: 2rem;
690
- --text-field-medium-height: 2.25rem;
691
- --tabs-tab-item-active-default-color-line: #0e8a0e;
692
- --tabs-tab-item-active-default-color-text: #0e8a0e;
693
- --tabs-tab-item-active-default-color-icon: #0e8a0e;
694
- --tabs-tab-item-active-color-focus: #3cad51;
695
- --tabs-tab-item-active-focussed-color-text: #0e8a0e;
696
- --tabs-tab-item-active-focussed-color-icon: #0e8a0e;
697
- --tabs-tab-item-active-focussed-color-line: #0e8a0e;
698
- --tabs-tab-item-active-focussed-focus: #3cad51;
699
- --tabs-tab-item-radius: 0.5rem;
700
- --tabs-tab-item-inactive-default-color-text: #2f2f2f;
701
- --tabs-tab-item-inactive-default-color-icon: #2f2f2f;
702
- --tabs-tab-item-inactive-hover-color-line: #d1d1d1;
703
- --tabs-tab-item-inactive-hover-color-text: #202020;
704
- --tabs-tab-item-inactive-hover-color-icon: #202020;
705
- --tabs-tab-item-inactive-focussed-color-focus: #3cad51;
706
- --tabs-tab-item-inactive-focussed-color-text: #2f2f2f;
707
- --tabs-tab-item-inactive-focussed-color-icon: #2f2f2f;
708
- --tabs-tab-item-color-text: #2f2f2f;
709
- --tabs-tab-item-spacing-gap-x: 0.5rem;
710
- --tabs-tab-item-spacing-x: 0.75rem;
711
- --tabs-tab-item-spacing-y: 0.25rem;
712
- --tabs-color-line: #dfdfdf;
713
- --tabs-text: #2f2f2f;
714
- --form-dropdown-form-drop-item-default-color-background: #ffffff;
715
- --form-dropdown-form-drop-item-default-color-text: #2f2f2f;
716
- --form-dropdown-form-drop-item-default-color-icon: #2f2f2f;
717
- --form-dropdown-form-drop-item-hover-color-background: #f8f8f8;
718
- --form-dropdown-form-drop-item-hover-color-text: #2f2f2f;
719
- --form-dropdown-form-drop-item-hover-color-icon: #2f2f2f;
720
- --form-dropdown-form-drop-item-active-color-background: #f0faf3;
721
- --form-dropdown-form-drop-item-active-color-text: #024002;
722
- --form-dropdown-form-drop-item-active-color-icon: #024002;
723
- --form-dropdown-form-drop-item-focus-default-color-focus: #0e8a0e;
724
- --form-dropdown-form-drop-item-focus-default-color-background: #ffffff;
725
- --form-dropdown-form-drop-item-focus-default-color-text: #2f2f2f;
726
- --form-dropdown-form-drop-item-focus-default-color-icon: #2f2f2f;
727
- --form-dropdown-form-drop-item-title-color-text: #2f2f2f;
728
- --form-dropdown-form-drop-item-title-color-line: #efefef;
729
- --form-dropdown-form-drop-item-focus-hover-color-background: #f8f8f8;
730
- --form-dropdown-form-drop-item-focus-hover-color-text: #2f2f2f;
731
- --form-dropdown-form-drop-item-focus-hover-color-icon: #2f2f2f;
732
- --form-dropdown-form-drop-item-focus-hover-color-focus: #2f2f2f;
733
- --form-dropdown-form-drop-item-spacing-x: 0.5rem;
734
- --form-dropdown-form-drop-item-spacing-gap-y: 0.5rem;
735
- --form-dropdown-form-drop-item-radius: 0.5rem;
736
- --form-dropdown-form-drop-item-spacing-y: 0.5rem;
737
- --form-dropdown-color-background: #ffffff;
738
- --form-dropdown-spacing-x: 0.5rem;
739
- --form-dropdown-radius: 0.5rem;
740
- --form-dropdown-spacing-y: 0.5rem;
741
- --checkbox-input-control-unchecked-default-color-border: #7e7e7e;
742
- --checkbox-input-control-unchecked-default-color-background: #ffffff;
743
- --checkbox-input-control-unchecked-default-color-focus: #3cad51;
744
- --checkbox-input-control-unchecked-hover-color-border: #474747;
745
- --checkbox-input-control-unchecked-hover-color-background: #ffffff;
746
- --checkbox-input-control-unchecked-disabled-color-background: #efefef;
747
- --checkbox-input-control-unchecked-disabled-color-border: #b3b3b3;
748
- --checkbox-input-control-unchecked-weight-border: 0.062rem;
749
- --checkbox-input-control-checked-default-color-background: #0e8a0e;
750
- --checkbox-input-control-checked-default-color-icon: #ffffff;
751
- --checkbox-input-control-checked-disabled-color-background: #b3b3b3;
752
- --checkbox-input-control-checked-disabled-color-icon: #ffffff;
753
- --checkbox-input-control-checked-hover-color-background: #005700;
754
- --checkbox-input-control-checked-hover-color-icon: #ffffff;
755
- --checkbox-input-control-checked-focus-color-background: #0e8a0e;
756
- --checkbox-input-control-checked-focus-color-focus: #3cad51;
757
- --checkbox-input-control-indeterminate-default-color-background: #0e8a0e;
758
- --checkbox-input-control-indeterminate-default-color-icon: #ffffff;
759
- --checkbox-input-control-indeterminate-hover-color-background: #005700;
760
- --checkbox-input-control-indeterminate-hover-color-icon: #ffffff;
761
- --checkbox-input-control-indeterminate-disabled-color-background: #b3b3b3;
762
- --checkbox-input-control-indeterminate-disabled-color-icon: #ffffff;
763
- --checkbox-input-control-indeterminate-focus-color-background: #0e8a0e;
764
- --checkbox-input-control-indeterminate-focus-color-focus: #3cad51;
765
- --checkbox-input-control-indeterminate-focus-color-icon: #ffffff;
766
- --checkbox-input-control-radius: 0.5rem;
767
- --checkbox-default-color-text: #2f2f2f;
768
- --checkbox-default-disabled-color-text: #595959;
769
- --checkbox-default-focus: #3cad51;
770
- --checkbox-hover-color-text: #2f2f2f;
771
- --checkbox-selected-color-text: #2f2f2f;
772
- --checkbox-selected-disabled-color-text: #595959;
773
- --checkbox-selected-focus: #3cad51;
774
- --checkbox-radius: 0.5rem;
775
- --checkbox-spacing-padding: 0.5rem;
776
- --checkbox-spacing-gap-y: 0.5rem;
777
- --checkbox-group-spacing-gap-y: 0.5rem;
778
- --radio-button-default-color-border: #7e7e7e;
779
- --radio-button-default-color-background: #ffffff;
780
- --radio-button-default-color-text: #2f2f2f;
781
- --radio-button-hover-color-border: #2f2f2f;
782
- --radio-button-hover-color-background: #ffffff;
783
- --radio-button-hover-color-text: #2f2f2f;
784
- --radio-button-selected-color-border: #0e8a0e;
785
- --radio-button-selected-color-background: #ffffff;
786
- --radio-button-selected-color-check: #0e8a0e;
787
- --radio-button-selected-color-text: #2f2f2f;
788
- --radio-button-selected-hover-color-border: #005700;
789
- --radio-button-selected-hover-color-background: #ffffff;
790
- --radio-button-selected-hover-color-check: #005700;
791
- --radio-button-selected-hover-color-text: #2f2f2f;
792
- --radio-button-disabled-color-background: #efefef;
793
- --radio-button-disabled-color-border: #7e7e7e;
794
- --radio-button-disabled-color-text: #595959;
795
- --radio-button-disabled-color-check: #7e7e7e;
796
- --radio-button-spacing-gap-y: 0.5rem;
797
- --radio-button-spacing-x: 0.5rem;
798
- --radio-button-spacing-gap-x: 0.5rem;
799
- --toggle-off-default-color-dot: #7e7e7e;
800
- --toggle-off-default-color-border: #7e7e7e;
801
- --toggle-off-default-color-background: #ffffff;
802
- --toggle-off-hover-color-dot: #595959;
803
- --toggle-off-hover-color-border: #595959;
804
- --toggle-off-hover-color-background: #f8f8f8;
805
- --toggle-off-focus-color-dot: #7e7e7e;
806
- --toggle-off-focus-color-border: #7e7e7e;
807
- --toggle-off-focus-color-background: #ffffff;
808
- --toggle-off-disabled-color-dot: #d1d1d1;
809
- --toggle-off-disabled-color-border: #d1d1d1;
810
- --toggle-off-disabled-color-background: #ffffff;
811
- --toggle-off-active-color-dot: #2f2f2f;
812
- --toggle-off-active-color-border: #024002;
813
- --toggle-off-active-color-background: #efefef;
814
- --toggle-on-active-color-dot: #efefef;
815
- --toggle-on-active-color-border: #024002;
816
- --toggle-on-active-color-background: #024002;
817
- --toggle-on-default-color-dot: #ffffff;
818
- --toggle-on-default-color-border: #0b800b;
819
- --toggle-on-default-color-background: #0b800b;
820
- --toggle-on-hover-color-dot: #f8f8f8;
821
- --toggle-on-hover-color-border: #005700;
822
- --toggle-on-hover-color-background: #005700;
823
- --toggle-on-focus-color-dot: #ffffff;
824
- --toggle-on-focus-color-border: #0b800b;
825
- --toggle-on-focus-color-background: #0b800b;
826
- --toggle-on-disabled-color-dot: #f8f8f8;
827
- --toggle-on-disabled-color-border: #d1d1d1;
828
- --toggle-on-disabled-color-background: #d1d1d1;
829
- --toggle-radius: 1rem;
830
- --toggle-weight-border: 0.062rem;
831
- --kpi-color-benchmark-text: #7e7e7e;
832
- --kpi-color-benchmark-text-bg: #efefef;
833
- --kpi-display-text-danger-color-text: #920a0a;
834
- --kpi-display-text-warning-color-text: #a74102;
835
- --kpi-display-text-success-color-text: #026319;
836
- --kpi-display-text-info-color-text: #024f83;
837
- --kpi-display-text-caution-color-text: #7d5400;
838
- --kpi-display-text-default-color-text: #3b3b3b;
839
- --kpi-color-background: #ffffff;
840
- --kpi-spacing-padding: 1rem;
841
- --kpi-spacing-x: 1rem;
842
- --kpi-radius: 0.5rem;
843
- --banner-warning-color-background: #fffaf5;
844
- --banner-warning-color-border: #e4720d;
845
- --banner-warning-color-text: #611f00;
846
- --banner-warning-color-icon: #611f00;
847
- --banner-destructive-color-background: #fff5f5;
848
- --banner-destructive-color-border: #c93232;
849
- --banner-destructive-color-text: #610202;
850
- --banner-destructive-color-icon: #610202;
851
- --banner-neutral-color-border: #b3b3b3;
852
- --banner-neutral-color-text: #2f2f2f;
853
- --banner-neutral-color-icon: #2f2f2f;
854
- --banner-info-color-background: #f5fbff;
855
- --banner-info-color-border: #2c8bca;
856
- --banner-info-color-text: #053a61;
857
- --banner-info-color-icon: #053a61;
858
- --banner-spacing-gap: 1rem;
859
- --banner-spacing-x: 1rem;
860
- --banner-spacing-y: 1rem;
861
- --banner-radius: 0.5rem;
862
- --icons-icon-default: #2f2f2f;
863
- --slideover-color-text: #2f2f2f;
864
- --slideover-overlay-color-background: rgb(32 32 32 / 50%);
865
- --slideover-color-background: #f8f8f8;
866
- --slideover-header-color-background: #ffffff;
867
- --slideover-header-color-icon: #2f2f2f;
868
- --slideover-header-color-icon-hover: #f8f8f8;
869
- --slideover-header-color-text: #2f2f2f;
870
- --slideover-header-spacing-padding: 1rem;
871
- --slideover-header-icon-radius: 1rem;
872
- --slideover-footer-color-background: #ffffff;
873
- --slideover-footer-spacing-padding: 1rem;
874
- --slideover-footer-spacing-gap-y: 1rem;
875
- --slideover-radius: 0.5rem;
156
+ --spacing-large: 1rem;
157
+ --spacing-small: 0.5rem;
158
+ --spacing-medium: 0.75rem;
159
+ --spacing-xlarge: 1.5rem;
160
+ --spacing-xsmall: 0.25rem;
161
+ --spacing-xxlarge: 2rem;
162
+ --spacing-xxxlarge: 4rem;
163
+ --icon-size-small: 16px;
164
+ --icon-size-medium: 24px;
165
+ --icon-size-xsmall: 12px;
166
+ --slideover-overlay-color-background: rgba(32, 32, 32, 0.5);
876
167
  --arbor-logo-top-1: #f7931e;
877
168
  --arbor-logo-top-2: #d58822;
878
- --arbor-logo-text: #ffffff;
169
+ --arbor-logo-left-1: #7dba3c;
170
+ --arbor-logo-left-2: #a0861a;
879
171
  --arbor-logo-right-1: #deee21;
880
172
  --arbor-logo-right-2: #96ba0f;
881
173
  --arbor-logo-bottom-1: #afd318;
882
174
  --arbor-logo-bottom-2: #68aa22;
883
- --arbor-logo-left-1: #7dba3c;
884
- --arbor-logo-left-2: #a0861a;
885
- --hyperlink-default: #0b800b;
886
- --hyperlink-hover: #005700;
887
- --hyperlink-pressed: #024002;
888
- --type-body-hyperlink-colour: #0b800b;
889
- --type-body-hyperlink-family: Inter;
890
- --type-body-hyperlink-size: 0.812rem;
891
- --type-body-hyperlink-weight: 31.25rem;
892
- --type-body-p-family: Inter;
893
- --type-body-p-size: 0.812rem;
894
- --type-body-p-weight: 25rem;
895
- --type-body-bold-family: Inter;
896
- --type-body-bold-size: 0.812rem;
897
- --type-body-bold-weight: 37.5rem;
898
- --type-headings-h1-family: Inter;
899
- --type-headings-h1-size: 1.688rem;
900
- --type-headings-h1-weight: 37.5rem;
901
- --type-headings-h2-family: Inter;
902
- --type-headings-h2-size: 1.375rem;
903
- --type-headings-h2-weight: 37.5rem;
904
- --type-headings-h3-family: Inter;
905
- --type-headings-h3-size: 1.125rem;
906
- --type-headings-h3-weight: 37.5rem;
907
- --type-headings-h4-family: Inter;
908
- --type-headings-h4-size: 1rem;
909
- --type-headings-h4-weight: 600;
910
- --type-buttons-button-m-family: Inter;
911
- --type-buttons-button-m-size: 0.875rem;
912
- --type-buttons-button-m-weight: 37.5rem;
913
- --type-buttons-button-s-family: Inter;
914
- --type-buttons-button-s-size: 0.812rem;
915
- --type-buttons-button-s-weight: 37.5rem;
916
- --type-display-display-1-family: Inter;
917
- --type-display-display-1-size: 2.5rem;
918
- --type-display-display-1-weight: 43.75rem;
919
- --modal-overlay-color-background: rgb(32 32 32 / 50%);
920
- --modal-color-background: #f8f8f8;
921
- --modal-header-color-background: #ffffff;
922
- --modal-header-color-icon: #2f2f2f;
923
- --modal-header-color-text: #2f2f2f;
924
- --modal-header-color-icon-hover: #f8f8f8;
925
- --modal-header-spacing-padding: 1rem;
926
- --modal-header-radius-icon: 1rem;
927
- --modal-footer-color-background: #ffffff;
928
- --modal-footer-spacing-padding: 1rem;
929
- --modal-footer-spacing-gap-y: 1rem;
930
- --modal-radius: 0.5rem;
931
- --page-heading-color-text: #202020;
932
- --page-heading-spacing-gap: 0.5rem;
933
- --card-default-color-background: #ffffff;
934
- --card-default-color-text: #2f2f2f;
935
- --card-default-color-icon: #2f2f2f;
936
- --card-default-color-border: #efefef;
937
- --card-hover-color-background: #ffffff;
938
- --card-hover-color-text: #2f2f2f;
939
- --card-hover-color-icon: #2f2f2f;
940
- --card-hover-color-border: #efefef;
941
- --card-focus-color-background: #ffffff;
942
- --card-focus-color-text: #2f2f2f;
943
- --card-focus-color-icon: #2f2f2f;
944
- --card-focus-focus: #3cad51;
945
- --card-focus-color-border: #efefef;
946
- --card-radius: 0.5rem;
947
- --card-spacing-x: 1.5rem;
948
- --card-spacing-gap-y: 1rem;
949
- --card-spacing-gap-x: 1rem;
950
- --card-spacing-y: 1.5rem;
951
- --page-sign-in-color-background: #fffcf8;
952
- --page-color-background: #f8f8f8;
953
- --form-dropdown-multi-line-form-drop-item-multi-color-background: #ffffff;
954
- --form-dropdown-multi-line-form-drop-item-multi-default-color-background: #ffffff;
955
- --form-dropdown-multi-line-form-drop-item-multi-default-color-text-1: #2f2f2f;
956
- --form-dropdown-multi-line-form-drop-item-multi-default-color-icon: #2f2f2f;
957
- --form-dropdown-multi-line-form-drop-item-multi-default-color-text-2: #595959;
958
- --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-background: #ffffff;
959
- --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-1: #2f2f2f;
960
- --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-icon: #2f2f2f;
961
- --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-focus: #3cad51;
962
- --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-2: #595959;
963
- --form-dropdown-multi-line-form-drop-item-multi-hover-color-background: #f8f8f8;
964
- --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-1: #2f2f2f;
965
- --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-2: #595959;
966
- --form-dropdown-multi-line-form-drop-item-multi-hover-color-icon: #2f2f2f;
967
- --form-dropdown-multi-line-form-drop-item-multi-active-color-background: #f0faf3;
968
- --form-dropdown-multi-line-form-drop-item-multi-active-color-text-1: #024002;
969
- --form-dropdown-multi-line-form-drop-item-multi-active-color-text-2: #005700;
970
- --form-dropdown-multi-line-form-drop-item-multi-active-color-icon: #005700;
971
- --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-background: #f0faf3;
972
- --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-1: #024002;
973
- --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-2: #005700;
974
- --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-icon: #005700;
975
- --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-focus: #3cad51;
976
- --form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding: 0.5rem;
977
- --form-dropdown-multi-line-form-drop-item-multi-base-spacing-gap-x: 0.5rem;
978
- --form-dropdown-multi-line-form-drop-item-multi-base-radius: 0.5rem;
979
- --form-dropdown-multi-line-color-background: #ffffff;
980
- --form-dropdown-multi-line-radius: 0.5rem;
981
- --form-dropdown-multi-line-spacing-padding: 0.5rem;
982
- --form-dropdown-multi-line-spacing-gap-x: 0.5rem;
983
- --focus-color-focus: #3cad51;
984
- --focus-border: 0.188rem;
985
- --tables-controls-color-icon: #2f2f2f;
986
- --tables-controls-icon-default-color-background: #ffffff;
987
- --tables-controls-icon-hover-color-background: #f8f8f8;
988
- --tables-controls-icon-focus-color-background: #ffffff;
989
- --tables-controls-icon-deactivated-color-background: #ffffff;
990
- --tables-controls-icon-deactivated-color-icon: #920a0a;
991
- --tables-controls-spacing-gap: 0.5rem;
992
- --tables-controls-spacing-y: 0.5rem;
993
- --tables-footer-color-text: #2f2f2f;
994
- --tables-footer-color-background: #ffffff;
995
- --tables-ag-grid-color-text: #202020;
996
- --tables-ag-grid-rows-odd-color-background: #ffffff;
997
- --tables-ag-grid-rows-even-color-background: #f8f8f8;
998
- --tables-ag-grid-rows-color-border: #efefef;
999
- --tables-ag-grid-rows-headers-color-background: #f8f8f8;
1000
- --tables-ag-grid-rows-headers-color-divider: #dfdfdf;
1001
- --tables-ag-grid-rows-headers-color-icons: #7e7e7e;
1002
- --tables-ag-grid-rows-headers-color-text: #2f2f2f;
1003
- --tables-ag-grid-rows-xsmall-spacing-y: 0.5rem;
1004
- --tables-ag-grid-rows-small-spacing-y: 0.75rem;
1005
- --tables-ag-grid-rows-medium-spacing-y: 1rem;
1006
- --tables-ag-grid-rows-large-spacing-y: 1.5rem;
1007
- --tables-ag-grid-rows-weight-border: 0.062rem;
1008
- --bg: #ffffff;
1009
- --avatar-small-initials-green-default-color-background: #d7ebd2;
1010
- --avatar-small-initials-green-color-text: #002a00;
1011
- --avatar-small-initials-green-color-border: #c6e8be;
1012
- --avatar-small-initials-green-hover-color-background: #c6e8be;
1013
- --avatar-small-initials-orange-color-border: #efe0bc;
1014
- --avatar-small-initials-orange-color-text: #7e3e00;
1015
- --avatar-small-initials-orange-default-color-background: #f7eed8;
1016
- --avatar-small-initials-orange-hover-color-background: #efe0bc;
1017
- --avatar-small-initials-blue-color-border: #c6e1ef;
1018
- --avatar-small-initials-blue-color-text: #003d69;
1019
- --avatar-small-initials-blue-default-color-background: #e1eef5;
1020
- --avatar-small-initials-blue-hover-color-background: #c6e1ef;
1021
- --avatar-small-initials-purple-color-border: #e2dcef;
1022
- --avatar-small-initials-purple-color-text: #472b61;
1023
- --avatar-small-initials-purple-default-color-background: #eeebf4;
1024
- --avatar-small-initials-purple-hover-color-background: #e2dcef;
1025
- --avatar-small-initials-yellow-color-border: #ede6c7;
1026
- --avatar-small-initials-yellow-color-text: #7e5a00;
1027
- --avatar-small-initials-yellow-default-color-background: #f7f2dd;
1028
- --avatar-small-initials-yellow-hover-color-background: #ede6c7;
1029
- --avatar-small-initials-teal-color-border: #cbefed;
1030
- --avatar-small-initials-teal-color-text: #0a685b;
1031
- --avatar-small-initials-teal-default-color-background: #e4f4f3;
1032
- --avatar-small-initials-teal-hover-color-background: #cbefed;
1033
- --avatar-small-initials-salmon-color-border: #f4d8d1;
1034
- --avatar-small-initials-salmon-color-text: #7a0100;
1035
- --avatar-small-initials-salmon-default-color-background: #f6e5e1;
1036
- --avatar-small-initials-salmon-hover-color-background: #f4d8d1;
1037
- --avatar-small-initials-grey-color-border: #efefef;
1038
- --avatar-small-initials-grey-color-text: #2f2f2f;
1039
- --avatar-small-initials-grey-default-color-background: #f8f8f8;
1040
- --avatar-small-initials-grey-hover-color-background: #efefef;
1041
- --avatar-small-initials-see-more-color-border: #efefef;
1042
- --avatar-small-initials-see-more-color-icon: #2f2f2f;
1043
- --avatar-small-initials-see-more-default-color-background: #f8f8f8;
1044
- --avatar-small-initials-see-more-hover-color-background: #efefef;
1045
- --avatar-small-initials-radius: 6.188rem;
1046
- --avatar-small-color-border: #efefef;
1047
- --avatar-small-color-background: #f8f8f8;
1048
- --avatar-small-radius: 6.188rem;
1049
- --avatar-small-size: 1.25rem;
1050
- --avatar-medium-color-border: #efefef;
1051
- --avatar-medium-color-text: #2f2f2f;
1052
- --avatar-medium-color-background: #f8f8f8;
1053
- --avatar-medium-radius: 6.188rem;
1054
- --avatar-medium-size: 2rem;
1055
- --avatar-large-color-border: #efefef;
1056
- --avatar-large-color-text: #2f2f2f;
1057
- --avatar-large-color-background: #f8f8f8;
1058
- --avatar-large-radius: 0.5rem;
1059
- --avatar-large-size: 3rem;
1060
- --avatar-extra-large-color-border: #efefef;
1061
- --avatar-extra-large-color-text: #2f2f2f;
1062
- --avatar-extra-large-color-background: #f8f8f8;
1063
- --avatar-extra-large-radius: 1rem;
1064
- --avatar-extra-large-size: 6rem;
1065
- --avatar-border-weight: 0.062rem;
1066
- --card-data-view-default-color-background: #f8f8f8;
1067
- --card-data-view-color-text: #2f2f2f;
1068
- --card-data-view-color-divider-x: #f8f8f8;
1069
- --card-data-view-hover-color-background: #efefef;
1070
- --card-data-view-radius: 0.5rem;
1071
- --card-data-view-spacing-x: 1rem;
1072
- --card-data-view-spacing-gap: 1rem;
1073
- --card-data-view-spacing-y: 1rem;
1074
- --date-picker-date-cell-inactive-default-color-background: #ffffff;
1075
- --date-picker-date-cell-inactive-default-color-text: #2f2f2f;
1076
- --date-picker-date-cell-inactive-hover-color-background: #f8f8f8;
1077
- --date-picker-date-cell-inactive-time-call-color-text: #ffffff;
1078
- --date-picker-date-cell-inactive-hover-radius: 6.188rem;
1079
- --date-picker-date-cell-today-default-color-background: #f0faf3;
1080
- --date-picker-date-cell-today-default-color-text: #0e8a0e;
1081
- --date-picker-date-cell-today-hover-color-background: #ceefd5;
1082
- --date-picker-date-cell-today-multi-select-color-background: #f0faf3;
1083
- --date-picker-date-cell-today-hover-color-text: #005700;
1084
- --date-picker-date-cell-today-hover-radius: 6.188rem;
1085
- --date-picker-date-cell-today-multi-select-radius: 6.188rem;
1086
- --date-picker-date-cell-selected-color-background: #0e8a0e;
1087
- --date-picker-date-cell-selected-color-text: #ffffff;
1088
- --date-picker-date-cell-selected-radius: 6.188rem;
1089
- --date-picker-date-cell-selected-multi-color-background: #0e8a0e;
1090
- --date-picker-date-cell-selected-multi-color-text: #ffffff;
1091
- --date-picker-date-cell-selected-multi-color-container-background: #f0faf3;
1092
- --date-picker-date-cell-selected-multi-range-color-background: #f0faf3;
1093
- --date-picker-date-cell-selected-multi-range-color-text: #2f2f2f;
1094
- --date-picker-date-cell-selected-multi-range-hover-color-background: #ceefd5;
1095
- --date-picker-date-cell-selected-multi-radius: 6.188rem;
1096
- --date-picker-date-cell-disabled-color-text: #7e7e7e;
1097
- --date-picker-date-cell-day-label-color-text: #595959;
1098
175
  --date-picker-date-cell-size: 2.75rem;
1099
- --date-picker-date-picker-text-default-color-text: #2f2f2f;
1100
- --date-picker-date-picker-text-default-color-icon: #2f2f2f;
1101
- --date-picker-date-picker-text-hover-color-background: #f8f8f8;
1102
- --date-picker-date-picker-text-active-color-background: #f0faf3;
1103
- --date-picker-date-picker-text-active-color-text: #005700;
1104
- --date-picker-date-picker-text-active-color-icon: #005700;
1105
- --date-picker-date-picker-text-hover-radius: 6.188rem;
1106
- --date-picker-date-picker-text-gap-y: 0.25rem;
1107
- --date-picker-date-picker-text-spacing-y: 0.75rem;
1108
- --date-picker-date-picker-text-spacing-x: 0.5rem;
1109
- --date-picker-time-cell-default-color-text: #2f2f2f;
1110
- --date-picker-time-cell-hover-color-background: #f8f8f8;
1111
- --date-picker-time-cell-active-color-background: #0e8a0e;
1112
- --date-picker-time-cell-active-color-text: #ffffff;
1113
- --date-picker-time-cell-default-color-background: #ffffff;
1114
- --date-picker-time-cell-radius: 0.5rem;
1115
- --date-picker-time-selector-color-background: #ffffff;
1116
- --date-picker-time-selector-radius: 0.5rem;
1117
- --date-picker-time-selector-spacing-padding: 0.25rem;
1118
- --date-picker-date-arrow-default-color-background: #ffffff;
1119
- --date-picker-date-arrow-hover-color-background: #f8f8f8;
1120
- --date-picker-date-arrow-color-icon: #2f2f2f;
1121
- --date-picker-date-arrow-radius: 6.188rem;
1122
176
  --date-picker-date-arrow-size: 2.75rem;
1123
- --date-picker-color-background: #ffffff;
1124
- --date-picker-spacing-y: 1rem;
1125
- --date-picker-spacing-x: 0.75rem;
1126
- --date-picker-radius: 0.5rem;
1127
- --date-picker-spacing-gap: 0.75rem;
1128
- --tooltip-color-background: #2f2f2f;
1129
- --tooltip-color-text: #ffffff;
1130
- --tooltip-spacing-x: 1rem;
1131
- --tooltip-spacing-y: 1rem;
1132
- --tooltip-homepage-color-background: #ffffff;
1133
- --tooltip-homepage-color-text: #2f2f2f;
1134
- --tooltip-homepage-color-border: #f8f8f8;
1135
- --tooltip-homepage-spacing-x: 1.5rem;
1136
- --tooltip-homepage-spacing-y: 1.5rem;
1137
- --tooltip-homepage-spacing-gap-y: 1rem;
1138
- --tooltip-homepage-radius: 0.5rem;
1139
- --navigation-top-nav-items-default-color-background: #ffffff;
1140
- --navigation-top-nav-items-default-color-text: #474747;
1141
- --navigation-top-nav-items-hover-color-text: #474747;
1142
- --navigation-top-nav-items-hover-color-background: #f8f8f8;
1143
- --navigation-top-nav-items-pressed-color-text: #005700;
1144
- --navigation-top-nav-items-pressed-color-background: #f0faf3;
1145
- --navigation-top-nav-items-focus-color-text: #474747;
1146
- --navigation-top-nav-items-focus-color-background: #ffffff;
1147
- --navigation-top-nav-items-spacing-gap: 0.25rem;
1148
- --navigation-top-nav-items-spacing-x: 1rem;
1149
- --navigation-top-nav-items-spacing-y: 0.5rem;
1150
- --navigation-top-nav-items-radius: 0.5rem;
1151
- --navigation-top-nav-items-drop-down-default-color-background: #ffffff;
1152
- --navigation-top-nav-items-drop-down-default-color-text: #202020;
1153
- --navigation-top-nav-items-drop-down-hover-color-background: #f8f8f8;
1154
- --navigation-top-nav-items-drop-down-hover-color-text: #202020;
1155
- --navigation-top-nav-items-drop-down-focus-color-background: #ffffff;
1156
- --navigation-top-nav-items-drop-down-focus-color-text: #202020;
1157
- --navigation-top-logo-school-color-border: #efefef;
1158
- --navigation-top-logo-school-color-background: #ffffff;
1159
- --navigation-top-logo-school-weight-border: 0.062rem;
1160
- --navigation-top-logo-arbor-lockup-color-border: #efefef;
1161
- --navigation-top-logo-arbor-lockup-weight-border: 0.062rem;
1162
- --navigation-top-logo-arbor-lockup-spacing-gap: 0.25rem;
1163
- --navigation-top-logo-weight-border: 0.062rem;
1164
- --navigation-top-nav-group-spacing-gap: 0.5rem;
1165
- --toast-destructive-color-background: #fff5f5;
1166
- --toast-destructive-color-border: #c93232;
1167
- --toast-destructive-icon-color-icon: #610202;
1168
- --toast-destructive-icon-default-color-background: #fff5f5;
1169
- --toast-destructive-icon-hover-color-background: #ffe2e2;
1170
- --toast-destructive-icon-focus-color-background: #fff5f5;
1171
- --toast-destructive-color-text: #610202;
1172
- --toast-info-color-background: #f5fbff;
1173
- --toast-info-color-border: #2c8bca;
1174
- --toast-info-icon-color-icon: #053a61;
1175
- --toast-info-icon-default-color-background: #f5fbff;
1176
- --toast-info-icon-hover-color-background: #c7e3f4;
1177
- --toast-info-icon-focus-color-background: #f5fbff;
1178
- --toast-info-color-text: #053a61;
1179
- --toast-success-color-border: #5ec171;
1180
- --toast-success-icon-color-icon: #024002;
1181
- --toast-success-icon-default-color-background: #f0faf3;
1182
- --toast-success-icon-hover-color-background: #d7f9e0;
1183
- --toast-success-icon-focus-color-background: #f0faf3;
1184
- --toast-success-color-text: #024002;
1185
- --toast-success-color-background: #f0faf3;
1186
- --toast-warning-color-background: #fffaf5;
1187
- --toast-warning-color-border: #e4720d;
1188
- --toast-warning-icon-color-icon: #611f00;
1189
- --toast-warning-icon-default-color-background: #fffaf5;
1190
- --toast-warning-icon-hover-color-background: #ffe8d0;
1191
- --toast-warning-icon-focus-color-background: #fffaf5;
1192
- --toast-warning-color-text: #611f00;
1193
- --toast-caution-color-background: #fffdf5;
1194
- --toast-caution-color-border: #edae06;
1195
- --toast-caution-icon-color-icon: #613f00;
1196
- --toast-caution-icon-default-color-background: #fffdf5;
1197
- --toast-caution-icon-hover-color-background: #fff3d0;
1198
- --toast-caution-icon-focus-color-background: #fffdf5;
1199
- --toast-caution-color-text: #613f00;
1200
- --toast-radius: 0.5rem;
1201
- --toast-spacing-gap: 1rem;
1202
- --toast-spacing-x: 1rem;
1203
- --toast-spacing-y: 1rem;
1204
- --tag-neutral-color-background: #f8f8f8;
1205
- --tag-neutral-color-text: #2f2f2f;
1206
- --tag-category-orange-color-background: #f7eed8;
1207
- --tag-category-orange-color-text: #7e3e00;
1208
- --tag-category-blue-color-background: #e1eef5;
1209
- --tag-category-blue-color-text: #003d69;
1210
- --tag-category-green-color-background: #d7ebd2;
1211
- --tag-category-green-color-text: #002a00;
1212
- --tag-category-purple-color-background: #eeebf4;
1213
- --tag-category-purple-color-text: #472b61;
1214
- --tag-category-teal-color-background: #e4f4f3;
1215
- --tag-category-teal-color-text: #0a685b;
1216
- --tag-category-salmon-color-background: #f6e5e1;
1217
- --tag-category-salmon-color-text: #7a0100;
1218
- --tag-category-yellow-color-background: #f7f2dd;
1219
- --tag-category-yellow-color-text: #7e5a00;
1220
- --tag-radius: 6.188rem;
1221
- --tag-spacing-x: 0.5rem;
1222
- --tag-spacing-y: 0.75rem;
1223
- --tag-spacing-gap-y: 0.5rem;
1224
- --font-family-display: Grenette;
1225
- --font-family-standard: Inter;
1226
- --font-size-7-27: 1.688rem;
1227
- --font-size-6-22: 1.375rem;
1228
- --font-size-5-18: 1.125rem;
1229
- --font-size-4-16: 1rem;
1230
- --font-size-3-14: 0.875rem;
1231
- --font-size-1-11: 0.688rem;
1232
- --font-size-8-40: 2.5rem;
1233
- --font-size-2-13: 0.812rem;
1234
- --font-weight-regular: 25rem;
1235
- --font-weight-medium: 31.25rem;
1236
- --font-weight-semi-bold: 37.5rem;
1237
- --font-weight-bold: 600;
1238
- --border-radius-xsmall: 0.25rem;
1239
- --border-radius-small: 0.5rem;
1240
- --border-radius-large: 1rem;
1241
- --border-radius-round: 6.188rem;
1242
- --spacing-xsmall: 0.25rem;
1243
- --spacing-small: 0.5rem;
1244
- --spacing-large: 1rem;
1245
- --spacing-xlarge: 1.5rem;
1246
- --spacing-xxlarge: 2rem;
1247
- --spacing-medium: 0.75rem;
1248
- --spacing-xxxlarge: 4rem;
1249
- --icon-size-xsmall: 0.75rem;
1250
- --icon-size-small: 1rem;
1251
- --icon-size-medium: 1.5rem;
1252
- --border-weight: 0.062rem;
177
+ --border-radius-large: 16px;
178
+ --border-radius-round: 99px;
179
+ --border-radius-small: 8px;
180
+ --border-radius-xsmall: 4px;
181
+ --line-height-tight: 1.25;
182
+ --line-height-default: 1.5;
183
+ --kpi-radius: var(--border-radius-small);
184
+ --kpi-display-text-info-color-text: var(--color-semantic-info-700);
185
+ --kpi-display-text-danger-color-text: var(--color-semantic-destructive-700);
186
+ --kpi-display-text-caution-color-text: var(--color-semantic-caution-700);
187
+ --kpi-display-text-default-color-text: var(--color-grey-800);
188
+ --kpi-display-text-success-color-text: var(--color-semantic-success-700);
189
+ --kpi-display-text-warning-color-text: var(--color-semantic-warning-700);
190
+ --kpi-spacing-padding: var(--spacing-large);
191
+ --kpi-color-background: var(--color-mono-white);
192
+ --kpi-spacing-vertical: var(--spacing-large);
193
+ --kpi-color-benchmark-text: var(--color-grey-500);
194
+ --kpi-color-benchmark-text-bg: var(--color-grey-100);
195
+ --tag-radius: var(--border-radius-round);
196
+ --tag-neutral-color-text: var(--color-grey-900);
197
+ --tag-neutral-color-background: var(--color-grey-050);
198
+ --tag-category-blue-color-text: var(--color-extended-colours-blue-800);
199
+ --tag-category-blue-color-background: var(--color-extended-colours-blue-050);
200
+ --tag-category-teal-color-text: var(--color-extended-colours-teal-800);
201
+ --tag-category-teal-color-background: var(--color-extended-colours-teal-050);
202
+ --tag-category-green-color-text: var(--color-extended-colours-green-800);
203
+ --tag-category-green-color-background: var(--color-extended-colours-green-050);
204
+ --tag-category-orange-color-text: var(--color-extended-colours-orange-800);
205
+ --tag-category-orange-color-background: var(--color-extended-colours-orange-050);
206
+ --tag-category-purple-color-text: var(--color-extended-colours-purple-800);
207
+ --tag-category-purple-color-background: var(--color-extended-colours-purple-050);
208
+ --tag-category-salmon-color-text: var(--color-extended-colours-salmon-800);
209
+ --tag-category-salmon-color-background: var(--color-extended-colours-salmon-050);
210
+ --tag-category-yellow-color-text: var(--color-extended-colours-yellow-800);
211
+ --tag-category-yellow-color-background: var(--color-extended-colours-yellow-050);
212
+ --tag-spacing-vertical: var(--spacing-xsmall);
213
+ --tag-spacing-horizontal: var(--spacing-medium);
214
+ --tag-spacing-gap-horizontal: var(--spacing-small);
215
+ --card-focus-color-icon: var(--color-grey-900);
216
+ --card-focus-color-text: var(--color-grey-900);
217
+ --card-focus-color-border: var(--color-grey-100);
218
+ --card-focus-color-background: var(--color-mono-white);
219
+ --card-hover-color-icon: var(--color-grey-900);
220
+ --card-hover-color-text: var(--color-grey-900);
221
+ --card-hover-color-border: var(--color-grey-100);
222
+ --card-hover-color-background: var(--color-mono-white);
223
+ --card-radius: var(--border-radius-small);
224
+ --card-default-color-icon: var(--color-grey-900);
225
+ --card-default-color-text: var(--color-grey-900);
226
+ --card-default-color-border: var(--color-grey-100);
227
+ --card-default-color-background: var(--color-mono-white);
228
+ --card-spacing-vertical: var(--spacing-xlarge);
229
+ --card-spacing-horizontal: var(--spacing-xlarge);
230
+ --card-spacing-gap-vertical: var(--spacing-medium);
231
+ --card-spacing-gap-horizontal: var(--spacing-large);
232
+ --page-color-background: var(--color-grey-050);
233
+ --pill-bg: var(--color-mono-white);
234
+ --pill-checkbox-hover-color-icon: var(--color-grey-900);
235
+ --pill-checkbox-hover-color-text: var(--color-grey-900);
236
+ --pill-checkbox-hover-color-border: var(--color-grey-500);
237
+ --pill-checkbox-hover-color-background: var(--color-grey-050);
238
+ --pill-checkbox-radius: var(--border-radius-round);
239
+ --pill-checkbox-default-color-icon: var(--color-grey-500);
240
+ --pill-checkbox-default-color-text: var(--color-grey-900);
241
+ --pill-checkbox-default-color-border: var(--color-grey-100);
242
+ --pill-checkbox-default-color-background: var(--color-mono-white);
243
+ --pill-checkbox-selected-color-icon: var(--color-brand-600);
244
+ --pill-checkbox-selected-color-text: var(--color-brand-800);
245
+ --pill-checkbox-selected-color-border: var(--color-brand-600);
246
+ --pill-checkbox-selected-color-background: var(--color-brand-050);
247
+ --pill-checkbox-spacing-vertical: var(--spacing-xsmall);
248
+ --pill-checkbox-spacing-horizontal: var(--spacing-medium);
249
+ --pill-single-filter-hover-color-text: var(--color-grey-900);
250
+ --pill-single-filter-hover-color-border: var(--color-grey-500);
251
+ --pill-single-filter-hover-color-background: var(--color-grey-050);
252
+ --pill-single-filter-active-color-text: var(--color-grey-900);
253
+ --pill-single-filter-active-color-border: var(--color-grey-500);
254
+ --pill-single-filter-active-color-background: var(--color-grey-100);
255
+ --pill-single-filter-radius: var(--border-radius-round);
256
+ --pill-single-filter-default-color-text: var(--color-grey-900);
257
+ --pill-single-filter-default-color-border: var(--color-grey-100);
258
+ --pill-single-filter-default-color-background: var(--color-mono-white);
259
+ --pill-single-filter-selected-color-text: var(--color-grey-900);
260
+ --pill-single-filter-selected-color-border: var(--color-grey-900);
261
+ --pill-single-filter-selected-color-background: var(--color-grey-050);
262
+ --pill-single-filter-spacing-vertical: var(--spacing-small);
263
+ --pill-single-filter-spacing-horizontal: var(--spacing-large);
264
+ --tabs-text: var(--color-grey-900);
265
+ --tabs-tab-item-active-focus-focus: var(--color-brand-500);
266
+ --tabs-tab-item-active-focus-color-icon: var(--color-brand-600);
267
+ --tabs-tab-item-active-focus-color-line: var(--color-brand-600);
268
+ --tabs-tab-item-active-focus-color-text: var(--color-brand-600);
269
+ --tabs-tab-item-active-default-color-icon: var(--color-brand-600);
270
+ --tabs-tab-item-active-default-color-line: var(--color-brand-600);
271
+ --tabs-tab-item-active-default-color-text: var(--color-brand-600);
272
+ --tabs-tab-item-active-color-focus: var(--color-brand-500);
273
+ --tabs-tab-item-inactive-focus-color-icon: var(--color-grey-900);
274
+ --tabs-tab-item-inactive-focus-color-text: var(--color-grey-900);
275
+ --tabs-tab-item-inactive-focus-color-focus: var(--color-brand-500);
276
+ --tabs-tab-item-inactive-hover-color-icon: var(--color-mono-black);
277
+ --tabs-tab-item-inactive-hover-color-line: var(--color-grey-300);
278
+ --tabs-tab-item-inactive-hover-color-text: var(--color-mono-black);
279
+ --tabs-tab-item-inactive-default-color-icon: var(--color-grey-900);
280
+ --tabs-tab-item-inactive-default-color-text: var(--color-grey-900);
281
+ --tabs-tab-item-color-text: var(--color-grey-900);
282
+ --tabs-tab-item-spacing-vertical: var(--spacing-small);
283
+ --tabs-tab-item-spacing-horizontal: var(--spacing-xsmall);
284
+ --tabs-tab-item-spacing-gap-horizontal: var(--spacing-small);
285
+ --tabs-color-line: var(--color-grey-200);
286
+ --type-body-p-size: var(--font-size-2-13);
287
+ --type-body-p-family: var(--font-family-standard);
288
+ --type-body-p-weight: var(--font-weight-regular);
289
+ --type-body-bold-weight: var(--font-weight-semi-bold);
290
+ --type-body-hyperlink-color: var(--color-brand-700);
291
+ --type-body-hyperlink-weight: var(--font-weight-medium);
292
+ --type-body-line-height: var(--line-height-default);
293
+ --type-display-size: var(--font-size-8-40);
294
+ --type-display-family: var(--font-family-standard);
295
+ --type-display-weight: var(--font-weight-bold);
296
+ --type-display-line-height: var(--line-height-tight);
297
+ --type-headings-h1-size: var(--font-size-7-27);
298
+ --type-headings-h1-family: var(--font-family-standard);
299
+ --type-headings-h1-weight: var(--font-weight-semi-bold);
300
+ --type-headings-h1-line-height: var(--line-height-tight);
301
+ --type-headings-h2-size: var(--font-size-6-22);
302
+ --type-headings-h2-family: var(--font-family-standard);
303
+ --type-headings-h2-weight: var(--font-weight-semi-bold);
304
+ --type-headings-h2-line-height: var(--line-height-tight);
305
+ --type-headings-h3-size: var(--font-size-5-18);
306
+ --type-headings-h3-family: var(--font-family-standard);
307
+ --type-headings-h3-weight: var(--font-weight-semi-bold);
308
+ --type-headings-h3-line-height: var(--line-height-tight);
309
+ --type-headings-h4-size: var(--font-size-4-16);
310
+ --type-headings-h4-family: var(--font-family-standard);
311
+ --type-headings-h4-weight: var(--font-weight-semi-bold);
312
+ --type-headings-h4-line-height: var(--line-height-default);
313
+ --color-extended-colours-bg: var(--color-mono-white);
314
+ --focus-color-focus: var(--color-brand-500);
315
+ --icons-icon-default: var(--color-grey-900);
316
+ --modal-footer-spacing-padding: var(--spacing-large);
317
+ --modal-footer-color-background: var(--color-mono-white);
318
+ --modal-footer-spacing-gap-vertical: var(--spacing-large);
319
+ --modal-header-color-icon: var(--color-grey-900);
320
+ --modal-header-color-text: var(--color-grey-900);
321
+ --modal-header-radius-icon: var(--spacing-large);
322
+ --modal-header-spacing-padding: var(--spacing-large);
323
+ --modal-header-color-background: var(--color-mono-white);
324
+ --modal-header-color-icon-hover: var(--color-grey-050);
325
+ --modal-radius: var(--border-radius-small);
326
+ --modal-color-background: var(--color-grey-050);
327
+ --toast-info-icon-hover-color-background: var(--color-semantic-info-100);
328
+ --toast-info-icon-color-icon: var(--color-semantic-info-800);
329
+ --toast-info-color-text: var(--color-semantic-info-800);
330
+ --toast-info-color-border: var(--color-semantic-info-500);
331
+ --toast-info-color-background: var(--color-semantic-info-050);
332
+ --toast-radius: var(--border-radius-small);
333
+ --toast-caution-icon-hover-color-background: var(--color-semantic-caution-100);
334
+ --toast-caution-icon-color-icon: var(--color-semantic-caution-800);
335
+ --toast-caution-color-text: var(--color-semantic-caution-800);
336
+ --toast-caution-color-border: var(--color-semantic-caution-500);
337
+ --toast-caution-color-background: var(--color-semantic-caution-050);
338
+ --toast-success-icon-hover-color-background: var(--color-semantic-success-100);
339
+ --toast-success-icon-color-icon: var(--color-brand-900);
340
+ --toast-success-color-text: var(--color-brand-900);
341
+ --toast-success-color-border: var(--color-brand-400);
342
+ --toast-success-color-background: var(--color-brand-050);
343
+ --toast-warning-icon-hover-color-background: var(--color-semantic-warning-100);
344
+ --toast-warning-icon-color-icon: var(--color-semantic-warning-800);
345
+ --toast-warning-color-text: var(--color-semantic-warning-800);
346
+ --toast-warning-color-border: var(--color-semantic-warning-500);
347
+ --toast-warning-color-background: var(--color-semantic-warning-050);
348
+ --toast-destructive-icon-hover-color-background: var(--color-semantic-destructive-100);
349
+ --toast-destructive-icon-color-icon: var(--color-semantic-destructive-800);
350
+ --toast-destructive-color-text: var(--color-semantic-destructive-800);
351
+ --toast-destructive-color-border: var(--color-semantic-destructive-500);
352
+ --toast-destructive-color-background: var(--color-semantic-destructive-050);
353
+ --toast-spacing-gap: var(--spacing-large);
354
+ --toast-spacing-padding: var(--spacing-large);
355
+ --toast-spacing-vertical: var(--spacing-large);
356
+ --toast-spacing-horizontal: var(--spacing-small);
357
+ --avatar-large-radius: var(--border-radius-xsmall);
358
+ --avatar-large-color-text: var(--color-grey-900);
359
+ --avatar-large-color-border: var(--color-grey-100);
360
+ --avatar-large-color-background: var(--color-grey-050);
361
+ --avatar-small-radius: var(--border-radius-round);
362
+ --avatar-small-color-border: var(--color-grey-100);
363
+ --avatar-small-color-background: var(--color-grey-050);
364
+ --avatar-medium-radius: var(--border-radius-round);
365
+ --avatar-medium-color-text: var(--color-grey-900);
366
+ --avatar-medium-color-border: var(--color-grey-100);
367
+ --avatar-medium-color-background: var(--color-grey-050);
368
+ --avatar-extra-large-radius: var(--border-radius-small);
369
+ --avatar-extra-large-color-text: var(--color-grey-900);
370
+ --avatar-extra-large-color-border: var(--color-grey-100);
371
+ --avatar-extra-large-color-background: var(--color-grey-050);
372
+ --avatar-border-weight: var(--border-weight);
373
+ --avatar-small-initials-blue-color-text: var(--color-extended-colours-blue-800);
374
+ --avatar-small-initials-blue-color-border: var(--color-extended-colours-blue-100);
375
+ --avatar-small-initials-blue-hover-color-background: var(--color-extended-colours-blue-100);
376
+ --avatar-small-initials-blue-default-color-background: var(--color-extended-colours-blue-050);
377
+ --avatar-small-initials-grey-color-text: var(--color-grey-900);
378
+ --avatar-small-initials-grey-color-border: var(--color-grey-100);
379
+ --avatar-small-initials-grey-hover-color-background: var(--color-grey-100);
380
+ --avatar-small-initials-grey-default-color-background: var(--color-grey-050);
381
+ --avatar-small-initials-teal-color-text: var(--color-extended-colours-teal-800);
382
+ --avatar-small-initials-teal-color-border: var(--color-extended-colours-teal-100);
383
+ --avatar-small-initials-teal-hover-color-background: var(--color-extended-colours-teal-100);
384
+ --avatar-small-initials-teal-default-color-background: var(--color-extended-colours-teal-050);
385
+ --avatar-small-initials-green-color-text: var(--color-extended-colours-green-800);
386
+ --avatar-small-initials-green-color-border: var(--color-extended-colours-green-100);
387
+ --avatar-small-initials-green-hover-color-background: var(--color-extended-colours-green-100);
388
+ --avatar-small-initials-green-default-color-background: var(--color-extended-colours-green-050);
389
+ --avatar-small-initials-orange-color-text: var(--color-extended-colours-orange-800);
390
+ --avatar-small-initials-orange-color-border: var(--color-extended-colours-orange-100);
391
+ --avatar-small-initials-orange-hover-color-background: var(--color-extended-colours-orange-100);
392
+ --avatar-small-initials-orange-default-color-background: var(--color-extended-colours-orange-050);
393
+ --avatar-small-initials-purple-color-text: var(--color-extended-colours-purple-800);
394
+ --avatar-small-initials-purple-color-border: var(--color-extended-colours-purple-100);
395
+ --avatar-small-initials-purple-hover-color-background: var(--color-extended-colours-purple-100);
396
+ --avatar-small-initials-purple-default-color-background: var(--color-extended-colours-purple-050);
397
+ --avatar-small-initials-radius: var(--border-radius-round);
398
+ --avatar-small-initials-salmon-color-text: var(--color-extended-colours-salmon-800);
399
+ --avatar-small-initials-salmon-color-border: var(--color-extended-colours-salmon-100);
400
+ --avatar-small-initials-salmon-hover-color-background: var(--color-extended-colours-salmon-100);
401
+ --avatar-small-initials-salmon-default-color-background: var(--color-extended-colours-salmon-050);
402
+ --avatar-small-initials-yellow-color-text: var(--color-extended-colours-yellow-800);
403
+ --avatar-small-initials-yellow-color-border: var(--color-extended-colours-yellow-100);
404
+ --avatar-small-initials-yellow-hover-color-background: var(--color-extended-colours-yellow-100);
405
+ --avatar-small-initials-yellow-default-color-background: var(--color-extended-colours-yellow-050);
406
+ --avatar-small-initials-see-more-color-icon: var(--color-grey-900);
407
+ --avatar-small-initials-see-more-color-border: var(--color-grey-100);
408
+ --avatar-small-initials-see-more-hover-color-background: var(--color-grey-100);
409
+ --avatar-small-initials-see-more-default-color-background: var(--color-grey-050);
410
+ --banner-info-color-icon: var(--color-semantic-info-800);
411
+ --banner-info-color-text: var(--color-semantic-info-800);
412
+ --banner-info-color-border: var(--color-semantic-info-500);
413
+ --banner-info-color-background: var(--color-semantic-info-050);
414
+ --banner-radius: var(--border-radius-small);
415
+ --banner-neutral-color-icon: var(--color-grey-900);
416
+ --banner-neutral-color-text: var(--color-grey-900);
417
+ --banner-neutral-color-border: var(--color-grey-400);
418
+ --banner-warning-color-icon: var(--color-semantic-warning-800);
419
+ --banner-warning-color-text: var(--color-semantic-warning-800);
420
+ --banner-warning-color-border: var(--color-semantic-warning-500);
421
+ --banner-warning-color-background: var(--color-semantic-warning-050);
422
+ --banner-destructive-color-icon: var(--color-semantic-destructive-800);
423
+ --banner-destructive-color-text: var(--color-semantic-destructive-800);
424
+ --banner-destructive-color-border: var(--color-semantic-destructive-500);
425
+ --banner-destructive-color-background: var(--color-semantic-destructive-050);
426
+ --banner-spacing-gap: var(--spacing-large);
427
+ --banner-spacing-vertical: var(--spacing-large);
428
+ --banner-spacing-horizontal: var(--spacing-large);
429
+ --button-small-radius: var(--border-radius-round);
430
+ --button-small-primary-focus-color-icon: var(--color-mono-white);
431
+ --button-small-primary-focus-color-text: var(--color-mono-white);
432
+ --button-small-primary-focus-color-background: var(--color-brand-600);
433
+ --button-small-primary-hover-color-icon: var(--color-mono-white);
434
+ --button-small-primary-hover-color-text: var(--color-mono-white);
435
+ --button-small-primary-hover-color-background: var(--color-brand-800);
436
+ --button-small-primary-active-color-icon: var(--color-mono-white);
437
+ --button-small-primary-active-color-text: var(--color-mono-white);
438
+ --button-small-primary-active-color-background: var(--color-brand-900);
439
+ --button-small-primary-default-color-icon: var(--color-mono-white);
440
+ --button-small-primary-default-color-text: var(--color-mono-white);
441
+ --button-small-primary-default-color-background: var(--color-brand-600);
442
+ --button-small-warning-hover-color-icon: var(--color-mono-white);
443
+ --button-small-warning-hover-color-text: var(--color-mono-white);
444
+ --button-small-warning-hover-color-background: var(--color-semantic-warning-500);
445
+ --button-small-warning-active-color-background: var(--color-semantic-warning-700);
446
+ --button-small-warning-default-color-icon: var(--color-semantic-warning-500);
447
+ --button-small-warning-default-color-text: var(--color-semantic-warning-500);
448
+ --button-small-warning-default-color-border: var(--color-semantic-warning-500);
449
+ --button-small-tertiary-focus-color-icon: var(--color-grey-900);
450
+ --button-small-tertiary-focus-color-text: var(--color-grey-900);
451
+ --button-small-tertiary-focus-color-background: var(--color-grey-100);
452
+ --button-small-tertiary-hover-color-icon: var(--color-grey-900);
453
+ --button-small-tertiary-hover-color-text: var(--color-grey-900);
454
+ --button-small-tertiary-hover-color-background: var(--color-grey-200);
455
+ --button-small-tertiary-active-color-icon: var(--color-grey-900);
456
+ --button-small-tertiary-active-color-text: var(--color-grey-900);
457
+ --button-small-tertiary-active-color-background: var(--color-grey-300);
458
+ --button-small-tertiary-default-color-icon: var(--color-grey-900);
459
+ --button-small-tertiary-default-color-text: var(--color-grey-900);
460
+ --button-small-tertiary-default-color-background: var(--color-grey-100);
461
+ --button-small-secondary-focus-color-icon: var(--color-grey-900);
462
+ --button-small-secondary-focus-color-text: var(--color-grey-900);
463
+ --button-small-secondary-focus-color-border: var(--color-grey-300);
464
+ --button-small-secondary-focus-color-background: var(--color-mono-white);
465
+ --button-small-secondary-hover-color-icon: var(--color-grey-900);
466
+ --button-small-secondary-hover-color-text: var(--color-grey-900);
467
+ --button-small-secondary-hover-color-border: var(--color-grey-300);
468
+ --button-small-secondary-hover-color-background: var(--color-grey-050);
469
+ --button-small-secondary-active-color-icon: var(--color-grey-900);
470
+ --button-small-secondary-active-color-text: var(--color-grey-900);
471
+ --button-small-secondary-active-color-border: var(--color-grey-300);
472
+ --button-small-secondary-active-color-background: var(--color-grey-100);
473
+ --button-small-secondary-default-color-icon: var(--color-grey-900);
474
+ --button-small-secondary-default-color-text: var(--color-grey-900);
475
+ --button-small-secondary-default-color-border: var(--color-grey-300);
476
+ --button-small-secondary-default-color-background: var(--color-mono-white);
477
+ --button-small-text-link-focus-color-icon: var(--color-brand-600);
478
+ --button-small-text-link-focus-color-text: var(--color-brand-600);
479
+ --button-small-text-link-hover-color-icon: var(--color-brand-800);
480
+ --button-small-text-link-hover-color-text: var(--color-brand-800);
481
+ --button-small-text-link-active-color-icon: var(--color-brand-900);
482
+ --button-small-text-link-active-color-text: var(--color-brand-900);
483
+ --button-small-text-link-default-color-icon: var(--color-brand-600);
484
+ --button-small-text-link-default-color-text: var(--color-brand-600);
485
+ --button-small-spacing-vertical: var(--spacing-small);
486
+ --button-small-spacing-horizontal: var(--spacing-large);
487
+ --button-small-primary-destructive-focus-color-icon: var(--color-mono-white);
488
+ --button-small-primary-destructive-focus-color-text: var(--color-mono-white);
489
+ --button-small-primary-destructive-focus-color-background: var(--color-semantic-destructive-500);
490
+ --button-small-primary-destructive-hover-color-icon: var(--color-mono-white);
491
+ --button-small-primary-destructive-hover-color-text: var(--color-mono-white);
492
+ --button-small-primary-destructive-hover-color-background: var(--color-semantic-destructive-600);
493
+ --button-small-primary-destructive-active-color-icon: var(--color-mono-white);
494
+ --button-small-primary-destructive-active-color-text: var(--color-mono-white);
495
+ --button-small-primary-destructive-active-color-background: var(--color-semantic-destructive-700);
496
+ --button-small-primary-destructive-default-color-icon: var(--color-mono-white);
497
+ --button-small-primary-destructive-default-color-text: var(--color-mono-white);
498
+ --button-small-primary-destructive-default-color-background: var(--color-semantic-destructive-500);
499
+ --button-small-spacing-gap-vertical: var(--spacing-small);
500
+ --button-small-secondary-destructive-focus-color-icon: var(--color-semantic-destructive-600);
501
+ --button-small-secondary-destructive-focus-color-text: var(--color-semantic-destructive-600);
502
+ --button-small-secondary-destructive-focus-color-border: var(--color-semantic-destructive-500);
503
+ --button-small-secondary-destructive-focus-color-background: var(--color-mono-white);
504
+ --button-small-secondary-destructive-hover-color-icon: var(--color-mono-white);
505
+ --button-small-secondary-destructive-hover-color-text: var(--color-mono-white);
506
+ --button-small-secondary-destructive-hover-color-background: var(--color-semantic-destructive-600);
507
+ --button-small-secondary-destructive-active-color-icon: var(--color-mono-white);
508
+ --button-small-secondary-destructive-active-color-text: var(--color-mono-white);
509
+ --button-small-secondary-destructive-active-color-background: var(--color-semantic-destructive-700);
510
+ --button-small-secondary-destructive-default-color-icon: var(--color-semantic-destructive-600);
511
+ --button-small-secondary-destructive-default-color-text: var(--color-semantic-destructive-600);
512
+ --button-small-secondary-destructive-default-color-border: var(--color-semantic-destructive-500);
513
+ --button-small-secondary-destructive-default-color-background: var(--color-mono-white);
514
+ --button-medium-radius: var(--border-radius-round);
515
+ --button-medium-primary-focus-color-icon: var(--color-mono-white);
516
+ --button-medium-primary-focus-color-text: var(--color-mono-white);
517
+ --button-medium-primary-focus-color-background: var(--color-brand-600);
518
+ --button-medium-primary-focus-color-focus: var(--color-brand-500);
519
+ --button-medium-primary-hover-color-icon: var(--color-mono-white);
520
+ --button-medium-primary-hover-color-text: var(--color-mono-white);
521
+ --button-medium-primary-hover-color-background: var(--color-brand-800);
522
+ --button-medium-primary-active-color-icon: var(--color-mono-white);
523
+ --button-medium-primary-active-color-text: var(--color-mono-white);
524
+ --button-medium-primary-active-color-background: var(--color-brand-900);
525
+ --button-medium-primary-default-color-icon: var(--color-mono-white);
526
+ --button-medium-primary-default-color-text: var(--color-mono-white);
527
+ --button-medium-primary-default-color-background: var(--color-brand-600);
528
+ --button-medium-warning-hover-color-icon: var(--color-mono-white);
529
+ --button-medium-warning-hover-color-text: var(--color-mono-white);
530
+ --button-medium-warning-hover-color-background: var(--color-semantic-warning-500);
531
+ --button-medium-warning-active-color-background: var(--color-semantic-warning-700);
532
+ --button-medium-warning-default-color-icon: var(--color-semantic-warning-500);
533
+ --button-medium-warning-default-color-text: var(--color-semantic-warning-500);
534
+ --button-medium-warning-default-color-border: var(--color-semantic-warning-500);
535
+ --button-medium-secondary-focus-color-icon: var(--color-grey-900);
536
+ --button-medium-secondary-focus-color-text: var(--color-grey-900);
537
+ --button-medium-secondary-focus-color-border: var(--color-grey-300);
538
+ --button-medium-secondary-focus-color-background: var(--color-mono-white);
539
+ --button-medium-secondary-hover-color-icon: var(--color-grey-900);
540
+ --button-medium-secondary-hover-color-text: var(--color-grey-900);
541
+ --button-medium-secondary-hover-color-border: var(--color-grey-300);
542
+ --button-medium-secondary-hover-color-background: var(--color-grey-050);
543
+ --button-medium-secondary-active-color-icon: var(--color-grey-900);
544
+ --button-medium-secondary-active-color-text: var(--color-grey-900);
545
+ --button-medium-secondary-active-color-border: var(--color-grey-300);
546
+ --button-medium-secondary-active-color-background: var(--color-grey-100);
547
+ --button-medium-secondary-default-color-icon: var(--color-grey-900);
548
+ --button-medium-secondary-default-color-text: var(--color-grey-900);
549
+ --button-medium-secondary-default-color-border: var(--color-grey-300);
550
+ --button-medium-secondary-default-color-background: var(--color-mono-white);
551
+ --button-medium-secondary-tertiary-focus-color-icon: var(--color-grey-900);
552
+ --button-medium-secondary-tertiary-focus-color-text: var(--color-grey-900);
553
+ --button-medium-secondary-tertiary-focus-color-focus: var(--color-brand-500);
554
+ --button-medium-secondary-tertiary-focus-color-background: var(--color-grey-100);
555
+ --button-medium-secondary-tertiary-hover-color-icon: var(--color-grey-900);
556
+ --button-medium-secondary-tertiary-hover-color-text: var(--color-grey-900);
557
+ --button-medium-secondary-tertiary-hover-color-background: var(--color-grey-200);
558
+ --button-medium-secondary-tertiary-active-color-icon: var(--color-grey-900);
559
+ --button-medium-secondary-tertiary-active-color-text: var(--color-grey-900);
560
+ --button-medium-secondary-tertiary-active-color-background: var(--color-grey-300);
561
+ --button-medium-secondary-tertiary-default-color-icon: var(--color-grey-900);
562
+ --button-medium-secondary-tertiary-default-color-text: var(--color-grey-900);
563
+ --button-medium-secondary-tertiary-default-color-background: var(--color-grey-100);
564
+ --button-medium-text-link-focus-color-icon: var(--color-brand-600);
565
+ --button-medium-text-link-focus-color-text: var(--color-brand-600);
566
+ --button-medium-text-link-hover-color-icon: var(--color-brand-800);
567
+ --button-medium-text-link-hover-color-text: var(--color-brand-800);
568
+ --button-medium-text-link-active-color-icon: var(--color-brand-900);
569
+ --button-medium-text-link-active-color-text: var(--color-brand-900);
570
+ --button-medium-text-link-default-color-icon: var(--color-brand-600);
571
+ --button-medium-text-link-default-color-text: var(--color-brand-600);
572
+ --button-medium-text-link-default-color-background: transparent;
573
+ --button-medium-spacing-vertical: var(--spacing-small);
574
+ --button-medium-spacing-horizontal: var(--spacing-large);
575
+ --button-medium-primary-destructive-focus-color-icon: var(--color-mono-white);
576
+ --button-medium-primary-destructive-focus-color-text: var(--color-mono-white);
577
+ --button-medium-primary-destructive-focus-color-background: var(--color-semantic-destructive-500);
578
+ --button-medium-primary-destructive-hover-color-icon: var(--color-mono-white);
579
+ --button-medium-primary-destructive-hover-color-text: var(--color-mono-white);
580
+ --button-medium-primary-destructive-hover-color-background: var(--color-semantic-destructive-600);
581
+ --button-medium-primary-destructive-active-color-icon: var(--color-mono-white);
582
+ --button-medium-primary-destructive-active-color-text: var(--color-mono-white);
583
+ --button-medium-primary-destructive-active-color-background: var(--color-semantic-destructive-700);
584
+ --button-medium-primary-destructive-default-color-icon: var(--color-mono-white);
585
+ --button-medium-primary-destructive-default-color-text: var(--color-mono-white);
586
+ --button-medium-primary-destructive-default-color-background: var(--color-semantic-destructive-500);
587
+ --button-medium-spacing-gap-vertical: var(--spacing-small);
588
+ --button-medium-secondary-destructive-focus-color-icon: var(--color-semantic-destructive-600);
589
+ --button-medium-secondary-destructive-focus-color-text: var(--color-semantic-destructive-600);
590
+ --button-medium-secondary-destructive-focus-color-border: var(--color-semantic-destructive-500);
591
+ --button-medium-secondary-destructive-focus-color-background: var(--color-mono-white);
592
+ --button-medium-secondary-destructive-hover-color-icon: var(--color-mono-white);
593
+ --button-medium-secondary-destructive-hover-color-text: var(--color-mono-white);
594
+ --button-medium-secondary-destructive-hover-color-background: var(--color-semantic-destructive-600);
595
+ --button-medium-secondary-destructive-active-color-icon: var(--color-mono-white);
596
+ --button-medium-secondary-destructive-active-color-text: var(--color-mono-white);
597
+ --button-medium-secondary-destructive-active-color-background: var(--color-semantic-destructive-700);
598
+ --button-medium-secondary-destructive-default-color-icon: var(--color-semantic-destructive-600);
599
+ --button-medium-secondary-destructive-default-color-text: var(--color-semantic-destructive-600);
600
+ --button-medium-secondary-destructive-default-color-border: var(--color-semantic-destructive-500);
601
+ --button-medium-secondary-destructive-default-color-background: var(--color-mono-white);
602
+ --search-list-focus-color-icon: var(--color-grey-900);
603
+ --search-list-focus-color-text: var(--color-grey-900);
604
+ --search-list-focus-color-border: var(--color-grey-100);
605
+ --search-list-focus-weight-border: var(--border-weight);
606
+ --search-list-focus-color-background: var(--color-mono-white);
607
+ --search-list-hover-color-background: var(--color-grey-050);
608
+ --search-list-radius: var(--border-radius-small);
609
+ --search-list-default-color-background: var(--color-mono-white);
610
+ --search-list-color-icon: var(--color-grey-900);
611
+ --search-list-color-text: var(--color-grey-900);
612
+ --search-list-spacing-gap: var(--spacing-small);
613
+ --search-list-color-header: var(--color-grey-600);
614
+ --search-list-spacing-vertical: var(--spacing-xsmall);
615
+ --search-list-spacing-horizontal: var(--spacing-small);
616
+ --search-pill-active-bg: var(--color-grey-100);
617
+ --search-pill-active-text: var(--color-grey-900);
618
+ --search-pill-active-border: var(--color-grey-900);
619
+ --search-pill-default-bg: var(--color-mono-white);
620
+ --search-pill-default-text: var(--color-grey-900);
621
+ --search-pill-default-border: var(--color-grey-100);
622
+ --search-pill-default-bg-hover: var(--color-grey-050);
623
+ --search-pill-default-bg-active: var(--color-grey-100);
624
+ --search-footer-spacing-vertical: var(--spacing-large);
625
+ --search-footer-spacing-horizontal: var(--spacing-large);
626
+ --search-footer-spacing-horizontal-gap: var(--spacing-small);
627
+ --search-global-focus-color-icon: var(--color-grey-900);
628
+ --search-global-focus-color-text: var(--color-grey-900);
629
+ --search-global-focus-color-border: var(--color-grey-100);
630
+ --search-global-focus-weight-border: var(--border-weight);
631
+ --search-global-focus-color-background: var(--color-mono-white);
632
+ --search-global-hover-color-icon: var(--color-grey-900);
633
+ --search-global-hover-color-text: var(--color-grey-900);
634
+ --search-global-hover-color-background: var(--color-grey-100);
635
+ --search-global-radius: var(--border-radius-large);
636
+ --search-global-default-color-icon: var(--color-grey-900);
637
+ --search-global-default-color-text: var(--color-grey-900);
638
+ --search-global-default-color-background: var(--color-grey-050);
639
+ --search-global-spacing-vertical: var(--spacing-small);
640
+ --search-global-spacing-horizontal: var(--spacing-large);
641
+ --search-global-spacing-horizontal-gap: var(--spacing-small);
642
+ --search-radius: var(--border-radius-small);
643
+ --search-filters-spacing-vertical: var(--spacing-large);
644
+ --search-filters-spacing-horizontal: var(--spacing-large);
645
+ --search-filters-spacing-horizontal-gap: var(--spacing-small);
646
+ --search-on-page-focus-color-icon: var(--color-grey-900);
647
+ --search-on-page-focus-color-text: var(--color-grey-900);
648
+ --search-on-page-focus-color-border: var(--color-grey-100);
649
+ --search-on-page-focus-color-background: var(--color-mono-white);
650
+ --search-on-page-hover-color-icon: var(--color-grey-900);
651
+ --search-on-page-hover-color-text: var(--color-grey-900);
652
+ --search-on-page-hover-color-border: var(--color-grey-100);
653
+ --search-on-page-hover-color-background: var(--color-grey-100);
654
+ --search-on-page-radius: var(--border-radius-large);
655
+ --search-on-page-default-color-icon: var(--color-grey-600);
656
+ --search-on-page-default-color-text: var(--color-grey-600);
657
+ --search-on-page-default-color-border: var(--color-grey-100);
658
+ --search-on-page-default-color-background: var(--color-mono-white);
659
+ --search-on-page-spacing-gap: var(--spacing-small);
660
+ --search-on-page-spacing-vertical: var(--spacing-large);
661
+ --search-on-page-spacing-horizontal: var(--spacing-small);
662
+ --search-results-spacing-gap: var(--spacing-xsmall);
663
+ --search-results-color-border: var(--color-grey-050);
664
+ --search-results-weight-border: var(--border-weight);
665
+ --search-results-spacing-vertical: var(--spacing-small);
666
+ --search-results-spacing-horizontal: var(--spacing-small);
667
+ --search-in-table-focus-color-icon: var(--color-grey-900);
668
+ --search-in-table-focus-color-text: var(--color-grey-900);
669
+ --search-in-table-focus-color-border: var(--color-grey-100);
670
+ --search-in-table-focus-weight-border: var(--border-weight);
671
+ --search-in-table-focus-color-background: var(--color-mono-white);
672
+ --search-in-table-hover-color-icon: var(--color-grey-900);
673
+ --search-in-table-hover-color-text: var(--color-grey-900);
674
+ --search-in-table-hover-color-background: var(--color-grey-050);
675
+ --search-in-table-radius: var(--border-radius-round);
676
+ --search-in-table-default-color-icon: var(--color-grey-600);
677
+ --search-in-table-default-color-text: var(--color-grey-600);
678
+ --search-in-table-default-color-background: var(--color-mono-white);
679
+ --search-color-text: var(--color-grey-900);
680
+ --search-in-section-focus-color-icon: var(--color-grey-900);
681
+ --search-in-section-focus-color-text: var(--color-grey-900);
682
+ --search-in-section-focus-color-border: var(--color-grey-100);
683
+ --search-in-section-focus-weight-border: var(--border-weight);
684
+ --search-in-section-focus-color-background: var(--color-mono-white);
685
+ --search-in-section-hover-color-icon: var(--color-grey-900);
686
+ --search-in-section-hover-color-text: var(--color-grey-900);
687
+ --search-in-section-hover-color-background: var(--color-grey-100);
688
+ --search-in-section-radius: var(--border-radius-large);
689
+ --search-in-section-default-color-icon: var(--color-grey-900);
690
+ --search-in-section-default-color-text: var(--color-grey-900);
691
+ --search-in-section-default-color-background: var(--color-grey-050);
692
+ --search-in-section-spacing-gap: var(--spacing-small);
693
+ --search-in-section-spacing-vertical: var(--spacing-small);
694
+ --search-in-section-spacing-horizontal: var(--spacing-large);
695
+ --search-color-background: var(--color-mono-white);
696
+ --tables-footer-color-text: var(--color-grey-900);
697
+ --tables-footer-color-background: var(--color-mono-white);
698
+ --tables-ag-grid-rows-odd-color-background: var(--color-mono-white);
699
+ --tables-ag-grid-rows-even-color-background: var(--color-grey-050);
700
+ --tables-ag-grid-rows-large-spacing-horizontal: var(--spacing-xlarge);
701
+ --tables-ag-grid-rows-small-spacing-horizontal: var(--spacing-medium);
702
+ --tables-ag-grid-rows-medium-spacing-horizontal: var(--spacing-large);
703
+ --tables-ag-grid-rows-xsmall-spacing-horizontal: var(--spacing-small);
704
+ --tables-ag-grid-rows-headers-color-text: var(--color-grey-900);
705
+ --tables-ag-grid-rows-headers-color-icons: var(--color-grey-500);
706
+ --tables-ag-grid-rows-headers-color-divider: var(--color-grey-200);
707
+ --tables-ag-grid-rows-headers-color-background: var(--color-grey-050);
708
+ --tables-ag-grid-rows-color-border: var(--color-grey-100);
709
+ --tables-ag-grid-rows-weight-border: var(--border-weight);
710
+ --tables-ag-grid-color-text: var(--color-mono-black);
711
+ --tables-controls-icon-hover-color-background: var(--color-grey-050);
712
+ --tables-controls-icon-default-color-background: var(--color-mono-white);
713
+ --tables-controls-icon-deactivated-color-icon: var(--color-semantic-destructive-700);
714
+ --tables-controls-color-icon: var(--color-grey-900);
715
+ --tables-controls-spacing-gap: var(--spacing-small);
716
+ --tables-controls-spacing-horizontal: var(--spacing-small);
717
+ --toggle-on-focus-color-dot: var(--color-mono-white);
718
+ --toggle-on-focus-color-border: var(--color-brand-700);
719
+ --toggle-on-focus-color-background: var(--color-brand-700);
720
+ --toggle-on-hover-color-dot: var(--color-grey-050);
721
+ --toggle-on-hover-color-border: var(--color-brand-800);
722
+ --toggle-on-hover-color-background: var(--color-brand-800);
723
+ --toggle-on-active-color-dot: var(--color-grey-100);
724
+ --toggle-on-active-color-border: var(--color-brand-900);
725
+ --toggle-on-active-color-background: var(--color-brand-900);
726
+ --toggle-on-default-color-dot: var(--color-mono-white);
727
+ --toggle-on-default-color-border: var(--color-brand-700);
728
+ --toggle-on-default-color-background: var(--color-brand-700);
729
+ --toggle-on-disabled-color-dot: var(--color-grey-050);
730
+ --toggle-on-disabled-color-border: var(--color-grey-300);
731
+ --toggle-on-disabled-color-background: var(--color-grey-300);
732
+ --toggle-off-focus-color-dot: var(--color-grey-500);
733
+ --toggle-off-focus-color-border: var(--color-grey-500);
734
+ --toggle-off-focus-color-background: var(--color-mono-white);
735
+ --toggle-off-hover-color-dot: var(--color-grey-600);
736
+ --toggle-off-hover-color-border: var(--color-grey-600);
737
+ --toggle-off-hover-color-background: var(--color-grey-050);
738
+ --toggle-off-active-color-dot: var(--color-grey-900);
739
+ --toggle-off-active-color-border: var(--color-grey-900);
740
+ --toggle-off-active-color-background: var(--color-grey-100);
741
+ --toggle-off-default-color-dot: var(--color-grey-500);
742
+ --toggle-off-default-color-border: var(--color-grey-500);
743
+ --toggle-off-default-color-background: var(--color-mono-white);
744
+ --toggle-off-disabled-color-dot: var(--color-grey-300);
745
+ --toggle-off-disabled-color-border: var(--color-grey-300);
746
+ --toggle-off-disabled-color-background: var(--color-mono-white);
747
+ --toggle-radius: var(--border-radius-large);
748
+ --toggle-weight-border: var(--border-weight);
749
+ --widget-table-spacing-gap: var(--spacing-small);
750
+ --widget-heading-color-icon: var(--color-grey-900);
751
+ --widget-heading-color-text: var(--color-grey-900);
752
+ --widget-heading-interactive-hover-color-background: var(--color-grey-050);
753
+ --widget-heading-interactive-active-color-background: var(--color-grey-200);
754
+ --widget-heading-interactive-holder-spacing-horizontal: var(--spacing-large);
755
+ --widget-heading-interactive-radius: var(--border-radius-small);
756
+ --widget-heading-interactive-default-color-background: var(--color-mono-white);
757
+ --widget-heading-interactive-spacing-vertical: var(--spacing-medium);
758
+ --widget-heading-interactive-spacing-horizontal: var(--spacing-small);
759
+ --widget-heading-spacing-gap: var(--spacing-medium);
760
+ --widget-heading-spacing-top: var(--spacing-medium);
761
+ --widget-heading-color-border: var(--color-grey-050);
762
+ --widget-heading-spacing-left: var(--spacing-small);
763
+ --widget-heading-spacing-right: var(--spacing-small);
764
+ --widget-heading-weight-border: var(--border-weight);
765
+ --widget-heading-spacing-bottom: var(--spacing-large);
766
+ --widget-heading-color-background: var(--color-mono-white);
767
+ --widget-calendar-focus-color-background: var(--color-mono-white);
768
+ --widget-calendar-hover-color-background: var(--color-grey-050);
769
+ --widget-calendar-radius: var(--border-radius-small);
770
+ --widget-calendar-default-color-background: var(--color-mono-white);
771
+ --widget-calendar-color-text: var(--color-grey-600);
772
+ --widget-calendar-spacing-gap: var(--spacing-small);
773
+ --widget-calendar-color-border: var(--color-grey-050);
774
+ --widget-calendar-weight-border: var(--border-weight);
775
+ --widget-calendar-spacing-vertical: var(--spacing-medium);
776
+ --widget-calendar-spacing-horizontal: var(--spacing-small);
777
+ --widget-list-row-hover-hover-bg: var(--color-grey-050);
778
+ --widget-list-row-hover-color-icon-arrow: var(--color-grey-900);
779
+ --widget-list-row-active-active-bg: var(--color-grey-200);
780
+ --widget-list-row-radius: var(--border-radius-small);
781
+ --widget-list-row-default-color-background: var(--color-mono-white);
782
+ --widget-list-row-default-color-icon-arrow: var(--color-grey-400);
783
+ --widget-list-row-accordions-spacing-gap: var(--spacing-medium);
784
+ --widget-list-row-accordions-spacing-vertical: var(--spacing-small);
785
+ --widget-list-row-accordions-spacing-horizontal: var(--spacing-xsmall);
786
+ --widget-list-row-color-icon: var(--color-grey-900);
787
+ --widget-list-row-color-text: var(--color-grey-900);
788
+ --widget-list-row-color-border: var(--color-grey-050);
789
+ --widget-list-row-spacing-vertical: var(--spacing-small);
790
+ --widget-list-row-spacing-horizontal: var(--spacing-medium);
791
+ --widget-payments-focus-color-background: var(--color-mono-white);
792
+ --widget-payments-hover-color-background: var(--color-grey-050);
793
+ --widget-payments-radius: var(--border-radius-small);
794
+ --widget-payments-default-color-background: var(--color-mono-white);
795
+ --widget-payments-color-text: var(--color-grey-600);
796
+ --widget-payments-color-title: var(--color-grey-900);
797
+ --widget-payments-spacing-gap: var(--spacing-small);
798
+ --widget-payments-spacing-vertical: var(--spacing-small);
799
+ --widget-payments-spacing-horizontal: var(--spacing-small);
800
+ --widget-container-radius: var(--border-radius-small);
801
+ --widget-container-color-background: var(--color-mono-white);
802
+ --widget-container-spacing-vertical: var(--spacing-small);
803
+ --widget-container-spacing-horizontal: var(--spacing-small);
804
+ --widget-favourites-icon-hover-color-icon: var(--color-grey-300);
805
+ --widget-favourites-icon-active-color-icon: var(--color-grey-400);
806
+ --widget-favourites-icon-default-color-icon: var(--color-grey-300);
807
+ --widget-favourites-focus-color-background: var(--color-mono-white);
808
+ --widget-favourites-hover-color-background: var(--color-grey-050);
809
+ --widget-favourites-radius: var(--border-radius-small);
810
+ --widget-favourites-default-color-background: var(--color-mono-white);
811
+ --widget-favourites-color-text: var(--color-grey-900);
812
+ --widget-favourites-spacing-gap: var(--spacing-small);
813
+ --widget-favourites-color-border: var(--color-grey-050);
814
+ --widget-favourites-weight-border: var(--border-weight);
815
+ --widget-favourites-spacing-vertical: var(--spacing-small);
816
+ --widget-favourites-spacing-horizontal: var(--spacing-small);
817
+ --widget-attachments-hover-color-icon: var(--color-grey-900);
818
+ --widget-attachments-hover-color-text: var(--color-grey-900);
819
+ --widget-attachments-hover-color-background: var(--color-grey-100);
820
+ --widget-attachments-default-color-icon: var(--color-grey-900);
821
+ --widget-attachments-default-color-text: var(--color-grey-900);
822
+ --widget-attachments-default-color-background: var(--color-grey-050);
823
+ --widget-attachments-spacing-vertical: var(--spacing-large);
824
+ --widget-attachments-spacing-horizontal: var(--spacing-small);
825
+ --widget-notifications-read-focus-icon-hover-color-background: var(--color-grey-050);
826
+ --widget-notifications-read-focus-icon-active-color-background: var(--color-grey-100);
827
+ --widget-notifications-read-focus-icon-default-color-background: var(--color-mono-white);
828
+ --widget-notifications-read-focus-color-background: var(--color-mono-white);
829
+ --widget-notifications-read-hover-icon-hover-color-background: var(--color-grey-100);
830
+ --widget-notifications-read-hover-icon-active-color-background: var(--color-grey-200);
831
+ --widget-notifications-read-hover-icon-default-color-background: var(--color-grey-050);
832
+ --widget-notifications-read-hover-color-background: var(--color-grey-050);
833
+ --widget-notifications-read-default-icon-hover-color-background: var(--color-grey-050);
834
+ --widget-notifications-read-default-icon-active-color-background: var(--color-grey-100);
835
+ --widget-notifications-read-default-icon-default-color-background: var(--color-mono-white);
836
+ --widget-notifications-read-default-color-background: var(--color-mono-white);
837
+ --widget-notifications-read-color-text: var(--color-grey-600);
838
+ --widget-notifications-read-color-title: var(--color-grey-900);
839
+ --widget-notifications-radius: var(--border-radius-small);
840
+ --widget-notifications-unread-focus-icon-hover-color-background: var(--color-brand-100);
841
+ --widget-notifications-unread-focus-icon-active-color-background: var(--color-brand-200);
842
+ --widget-notifications-unread-focus-icon-default-color-background: var(--color-brand-050);
843
+ --widget-notifications-unread-focus-color-background: var(--color-brand-050);
844
+ --widget-notifications-unread-hover-icon-hover-color-background: var(--color-brand-200);
845
+ --widget-notifications-unread-hover-icon-active-color-background: var(--color-brand-300);
846
+ --widget-notifications-unread-hover-icon-default-color-background: var(--color-brand-100);
847
+ --widget-notifications-unread-hover-color-background: var(--color-brand-100);
848
+ --widget-notifications-unread-default-icon-hover-color-background: var(--color-brand-100);
849
+ --widget-notifications-unread-default-icon-active-color-background: var(--color-brand-200);
850
+ --widget-notifications-unread-default-icon-default-color-background: var(--color-brand-050);
851
+ --widget-notifications-unread-default-color-background: var(--color-brand-050);
852
+ --widget-notifications-unread-color-text: var(--color-brand-900);
853
+ --widget-notifications-unread-color-title: var(--color-brand-900);
854
+ --widget-notifications-x-posted-spacing-vertical-gap: var(--spacing-small);
855
+ --widget-notifications-color-text: var(--color-grey-600);
856
+ --widget-notifications-color-title: var(--color-grey-900);
857
+ --widget-notifications-spacing-vertical: var(--spacing-small);
858
+ --widget-notifications-spacing-horizointal: var(--spacing-small);
859
+ --widget-notifications-spacing-vertical-gap: var(--spacing-small);
860
+ --filters-hover-color-background: var(--color-grey-100);
861
+ --filters-radius: var(--border-radius-small);
862
+ --filters-default-color-background: var(--color-mono-white);
863
+ --filters-color-icon: var(--color-brand-600);
864
+ --filters-color-text: var(--color-grey-900);
865
+ --filters-color-border: var(--color-grey-100);
866
+ --filters-chip-container-spacing-gap-vertical: var(--spacing-small);
867
+ --filters-spacing-vertical: var(--spacing-small);
868
+ --filters-spacing-horizontal: var(--spacing-small);
869
+ --filters-spacing-gap-vertical: var(--spacing-xsmall);
870
+ --filters-spacing-gap-horizontal: var(--spacing-small);
871
+ --section-table-spacing-gap: var(--spacing-small);
872
+ --section-heading-color-icon: var(--color-grey-900);
873
+ --section-heading-color-text: var(--color-grey-900);
874
+ --section-heading-interactive-hover-color-background: var(--color-grey-050);
875
+ --section-heading-interactive-active-color-background: var(--color-grey-200);
876
+ --section-heading-interactive-holder-spacing-horizontal: var(--spacing-medium);
877
+ --section-heading-interactive-radius: var(--border-radius-small);
878
+ --section-heading-interactive-default-color-background: var(--color-mono-white);
879
+ --section-heading-interactive-spacing-bottom: var(--spacing-small);
880
+ --section-heading-spacing-gap: var(--spacing-medium);
881
+ --section-heading-color-border: var(--color-grey-050);
882
+ --section-heading-spacing-left: var(--spacing-small);
883
+ --section-heading-spacing-right: var(--spacing-small);
884
+ --section-heading-spacing-bottom: var(--spacing-small);
885
+ --section-list-row-hover-hover-bg: var(--color-grey-050);
886
+ --section-list-row-hover-color-icon-arrow: var(--color-grey-900);
887
+ --section-list-row-active-active-bg: var(--color-grey-200);
888
+ --section-list-row-radius: var(--border-radius-small);
889
+ --section-list-row-default-color-background: var(--color-mono-white);
890
+ --section-list-row-default-color-icon-arrow: var(--color-grey-400);
891
+ --section-list-row-accordions-spacing-gap: var(--spacing-medium);
892
+ --section-list-row-accordions-spacing-vertical: var(--spacing-small);
893
+ --section-list-row-accordions-spacing-horizontal: var(--spacing-xsmall);
894
+ --section-list-row-color-icon: var(--color-grey-900);
895
+ --section-list-row-color-text: var(--color-grey-900);
896
+ --section-list-row-color-border: var(--color-grey-050);
897
+ --section-list-row-spacing-vertical: var(--spacing-small);
898
+ --section-list-row-spacing-horizontal: var(--spacing-medium);
899
+ --section-container-radius: var(--border-radius-small);
900
+ --section-container-color-background: var(--color-mono-white);
901
+ --section-container-spacing-vertical: var(--spacing-small);
902
+ --section-container-spacing-horizontal: var(--spacing-small);
903
+ --section-subsection-heading-interactive-radius: var(--border-radius-small);
904
+ --section-subsection-heading-interactive-color-border: var(--color-grey-050);
905
+ --section-subsection-heading-interactive-weight-border: var(--border-weight);
906
+ --section-subsection-heading-interactive-spacing-vertical: var(--spacing-medium);
907
+ --section-subsection-heading-spacing-vertical: var(--spacing-small);
908
+ --section-subsection-heading-spacing-horizontal: var(--spacing-small);
909
+ --section-subsection-spacing-vertical: var(--spacing-small);
910
+ --sidebar-bg: var(--color-mono-white);
911
+ --tooltip-color-text: var(--color-mono-white);
912
+ --tooltip-color-background: var(--color-grey-900);
913
+ --tooltip-spacing-vertical: var(--spacing-medium);
914
+ --tooltip-spacing-horizontal: var(--spacing-medium);
915
+ --checkbox-group-spacing-gap-horizontal: var(--spacing-small);
916
+ --checkbox-hover-color-text: var(--color-grey-900);
917
+ --checkbox-radius: var(--border-radius-small);
918
+ --checkbox-default-color-text: var(--color-grey-900);
919
+ --checkbox-default-disabled-color-text: var(--color-grey-600);
920
+ --checkbox-selected-color-text: var(--color-grey-900);
921
+ --checkbox-selected-disabled-color-text: var(--color-grey-600);
922
+ --checkbox-input-control-radius: var(--border-radius-xsmall);
923
+ --checkbox-input-control-checked-focus-color-background: var(--color-brand-600);
924
+ --checkbox-input-control-checked-hover-color-icon: var(--color-mono-white);
925
+ --checkbox-input-control-checked-hover-color-background: var(--color-brand-800);
926
+ --checkbox-input-control-checked-default-color-icon: var(--color-mono-white);
927
+ --checkbox-input-control-checked-default-color-background: var(--color-brand-600);
928
+ --checkbox-input-control-checked-disabled-color-icon: var(--color-mono-white);
929
+ --checkbox-input-control-checked-disabled-color-background: var(--color-grey-400);
930
+ --checkbox-input-control-unchecked-hover-color-border: var(--color-grey-700);
931
+ --checkbox-input-control-unchecked-hover-color-background: var(--color-mono-white);
932
+ --checkbox-input-control-unchecked-default-color-border: var(--color-grey-500);
933
+ --checkbox-input-control-unchecked-default-color-background: var(--color-mono-white);
934
+ --checkbox-input-control-unchecked-disabled-color-border: var(--color-grey-400);
935
+ --checkbox-input-control-unchecked-disabled-color-background: var(--color-grey-100);
936
+ --checkbox-input-control-unchecked-weight-border: var(--border-weight);
937
+ --checkbox-input-control-indeterminate-focus-color-icon: var(--color-mono-white);
938
+ --checkbox-input-control-indeterminate-focus-color-background: var(--color-brand-600);
939
+ --checkbox-input-control-indeterminate-hover-color-icon: var(--color-mono-white);
940
+ --checkbox-input-control-indeterminate-hover-color-background: var(--color-brand-800);
941
+ --checkbox-input-control-indeterminate-default-color-icon: var(--color-mono-white);
942
+ --checkbox-input-control-indeterminate-default-color-background: var(--color-brand-600);
943
+ --checkbox-input-control-indeterminate-disabled-color-icon: var(--color-mono-white);
944
+ --checkbox-input-control-indeterminate-disabled-color-background: var(--color-grey-400);
945
+ --checkbox-spacing-padding: var(--spacing-small);
946
+ --checkbox-spacing-gap-horizontal: var(--spacing-small);
947
+ --side-nav-bg: var(--color-mono-white);
948
+ --side-nav-icon-bg: var(--color-mono-white);
949
+ --side-nav-icon-icon: var(--color-grey-500);
950
+ --side-nav-icon-icon-hover: var(--color-grey-900);
951
+ --side-nav-icon-icon-bg-hover: var(--color-grey-050);
952
+ --side-nav-icon-icon-selected: var(--color-brand-600);
953
+ --side-nav-icon-icon-bg-active: var(--color-grey-100);
954
+ --side-nav-icon-icon-bg-selected: var(--color-brand-050);
955
+ --side-nav-list-hover-bg: var(--color-grey-050);
956
+ --side-nav-list-hover-icon: var(--color-grey-900);
957
+ --side-nav-list-hover-text: var(--color-grey-900);
958
+ --side-nav-list-hover-favourite-icon: var(--color-grey-500);
959
+ --side-nav-list-active-bg: var(--color-brand-050);
960
+ --side-nav-list-active-icon: var(--color-brand-800);
961
+ --side-nav-list-active-text: var(--color-brand-800);
962
+ --side-nav-list-active-favourite-icon: var(--color-brand-600);
963
+ --side-nav-list-default-icon: var(--color-grey-900);
964
+ --side-nav-list-default-text: var(--color-grey-900);
965
+ --side-nav-list-default-favourite-icon: var(--color-grey-500);
966
+ --hyperlink-hover: var(--color-brand-800);
967
+ --hyperlink-active: var(--color-brand-900);
968
+ --hyperlink-default: var(--color-brand-700);
969
+ --slideover-footer-color-background: var(--color-mono-white);
970
+ --slideover-footer-spacing-vertical: var(--spacing-medium);
971
+ --slideover-footer-spacing-horizontal: var(--spacing-medium);
972
+ --slideover-footer-spacing-gap-vertical: var(--spacing-large);
973
+ --slideover-header-icon-radius: var(--spacing-large);
974
+ --slideover-header-color-icon: var(--color-grey-900);
975
+ --slideover-header-color-text: var(--color-grey-900);
976
+ --slideover-header-spacing-padding: var(--spacing-medium);
977
+ --slideover-header-color-background: var(--color-mono-white);
978
+ --slideover-header-color-icon-hover: var(--color-grey-050);
979
+ --slideover-radius: var(--border-radius-small);
980
+ --slideover-color-text: var(--color-grey-900);
981
+ --slideover-spacing-padding: var(--spacing-large);
982
+ --slideover-color-background: var(--color-grey-050);
983
+ --arbor-logo-text: var(--color-mono-white);
984
+ --form-field-icon-hover-color-icon: var(--color-grey-900);
985
+ --form-field-icon-hover-color-background: var(--color-grey-050);
986
+ --form-field-icon-active-color-icon: var(--color-grey-900);
987
+ --form-field-icon-active-color-background: var(--color-grey-100);
988
+ --form-field-icon-radius: var(--border-radius-round);
989
+ --form-field-icon-default-color-icon: var(--color-grey-900);
990
+ --form-field-icon-default-color-background: var(--color-mono-white);
991
+ --form-field-icon-disabled-color-icon: var(--color-grey-400);
992
+ --form-field-icon-disabled-color-background: var(--color-mono-white);
993
+ --form-field-pill-hover-color-icon: var(--color-grey-900);
994
+ --form-field-pill-hover-color-text: var(--color-grey-900);
995
+ --form-field-pill-hover-color-background: var(--color-grey-100);
996
+ --form-field-pill-x-icon-hover-color-icon: var(--color-grey-050);
997
+ --form-field-pill-x-icon-default-color-icon: var(--color-grey-600);
998
+ --form-field-pill-x-icon-hover-color-background: var(--color-grey-600);
999
+ --form-field-pill-default-color-icon: var(--color-grey-900);
1000
+ --form-field-pill-default-color-text: var(--color-grey-900);
1001
+ --form-field-pill-default-color-background: var(--color-grey-050);
1002
+ --form-field-pill-default-spacing-vertical: var(--spacing-xsmall);
1003
+ --form-field-pill-default-spacing-horizontal: var(--spacing-small);
1004
+ --form-field-pill-default-spacing-horizontal-gap: var(--spacing-xsmall);
1005
+ --form-field-pill-placeholder-color-text: var(--color-grey-600);
1006
+ --form-field-text-error-color-text: var(--color-grey-900);
1007
+ --form-field-text-error-color-border: var(--color-semantic-destructive-500);
1008
+ --form-field-text-error-color-background: var(--color-mono-white);
1009
+ --form-field-text-error-color-error-icon: var(--color-semantic-destructive-500);
1010
+ --form-field-text-error-color-error-text: var(--color-grey-600);
1011
+ --form-field-text-focus-color-text: var(--color-grey-900);
1012
+ --form-field-text-focus-color-border: var(--color-brand-600);
1013
+ --form-field-text-focus-color-background: var(--color-mono-white);
1014
+ --form-field-text-hover-color-text: var(--color-grey-900);
1015
+ --form-field-text-hover-color-border: var(--color-grey-500);
1016
+ --form-field-text-hover-color-background: var(--color-mono-white);
1017
+ --form-field-text-active-color-text: var(--color-grey-900);
1018
+ --form-field-text-active-color-border: var(--color-brand-600);
1019
+ --form-field-text-active-color-background: var(--color-mono-white);
1020
+ --form-field-text-default-color-text: var(--color-grey-900);
1021
+ --form-field-text-default-color-border: var(--color-grey-200);
1022
+ --form-field-text-default-color-background: var(--color-mono-white);
1023
+ --form-field-text-disabled-color-text: var(--color-grey-900);
1024
+ --form-field-text-disabled-color-border: var(--color-grey-200);
1025
+ --form-field-text-disabled-color-background: var(--color-grey-100);
1026
+ --form-field-text-uneditable-color-text: var(--color-grey-900);
1027
+ --form-field-text-placeholder-color-text: var(--color-grey-600);
1028
+ --form-field-text-placeholder-color-border: var(--color-grey-200);
1029
+ --form-field-text-placeholder-color-background: var(--color-mono-white);
1030
+ --form-field-text-small-height: 2rem;
1031
+ --form-field-text-medium-height: 2.25rem;
1032
+ --form-field-label-color-icon: var(--color-grey-900);
1033
+ --form-field-label-color-text: var(--color-grey-900);
1034
+ --form-field-radius: var(--border-radius-small);
1035
+ --form-field-combobox-error-color-text: var(--color-grey-900);
1036
+ --form-field-combobox-error-color-border: var(--color-semantic-destructive-500);
1037
+ --form-field-combobox-error-color-background: var(--color-mono-white);
1038
+ --form-field-combobox-error-color-error-icon: var(--color-semantic-destructive-500);
1039
+ --form-field-combobox-error-color-error-text: var(--color-grey-600);
1040
+ --form-field-combobox-focus-color-text: var(--color-grey-900);
1041
+ --form-field-combobox-focus-color-border: var(--color-brand-600);
1042
+ --form-field-combobox-focus-color-background: var(--color-mono-white);
1043
+ --form-field-combobox-hover-color-text: var(--color-grey-900);
1044
+ --form-field-combobox-hover-color-border: var(--color-grey-500);
1045
+ --form-field-combobox-hover-color-background: var(--color-mono-white);
1046
+ --form-field-combobox-default-color-text: var(--color-grey-900);
1047
+ --form-field-combobox-default-color-border: var(--color-grey-200);
1048
+ --form-field-combobox-default-color-text-2: var(--color-grey-900);
1049
+ --form-field-combobox-default-color-background: var(--color-mono-white);
1050
+ --form-field-combobox-disabled-color-icon: var(--color-grey-600);
1051
+ --form-field-combobox-disabled-color-text: var(--color-grey-900);
1052
+ --form-field-combobox-disabled-color-border: var(--color-grey-300);
1053
+ --form-field-combobox-disabled-color-background: var(--color-grey-100);
1054
+ --form-field-combobox-disabled-color-error-text: var(--color-grey-600);
1055
+ --form-field-combobox-selected-color-text: var(--color-grey-900);
1056
+ --form-field-combobox-selected-color-border: var(--color-brand-600);
1057
+ --form-field-combobox-selected-color-background: var(--color-mono-white);
1058
+ --form-field-combobox-help-text-hover-color-icon: var(--color-brand-800);
1059
+ --form-field-combobox-help-text-hover-color-text: var(--color-brand-800);
1060
+ --form-field-combobox-help-text-default-color-icon: var(--color-brand-600);
1061
+ --form-field-combobox-help-text-default-color-text: var(--color-brand-600);
1062
+ --form-field-combobox-placeholder-color-text: var(--color-grey-600);
1063
+ --form-field-combobox-placeholder-color-border: var(--color-grey-200);
1064
+ --form-field-combobox-placeholder-color-background: var(--color-mono-white);
1065
+ --form-field-textarea-error-color-text: var(--color-grey-900);
1066
+ --form-field-textarea-error-color-border: var(--color-semantic-destructive-500);
1067
+ --form-field-textarea-error-color-background: var(--color-mono-white);
1068
+ --form-field-textarea-error-color-error-icon: var(--color-semantic-destructive-500);
1069
+ --form-field-textarea-error-color-error-text: var(--color-grey-600);
1070
+ --form-field-textarea-focus-color-text: var(--color-grey-900);
1071
+ --form-field-textarea-focus-color-border: var(--color-brand-600);
1072
+ --form-field-textarea-focus-color-background: var(--color-mono-white);
1073
+ --form-field-textarea-hover-color-text: var(--color-grey-900);
1074
+ --form-field-textarea-hover-color-border: var(--color-grey-500);
1075
+ --form-field-textarea-hover-color-background: var(--color-mono-white);
1076
+ --form-field-textarea-active-color-text: var(--color-grey-900);
1077
+ --form-field-textarea-active-color-border: var(--color-brand-600);
1078
+ --form-field-textarea-active-color-background: var(--color-mono-white);
1079
+ --form-field-textarea-default-color-text: var(--color-grey-900);
1080
+ --form-field-textarea-default-color-border: var(--color-grey-200);
1081
+ --form-field-textarea-default-color-background: var(--color-mono-white);
1082
+ --form-field-textarea-disabled-color-text: var(--color-grey-900);
1083
+ --form-field-textarea-disabled-color-border: var(--color-grey-200);
1084
+ --form-field-textarea-disabled-color-background: var(--color-grey-100);
1085
+ --form-field-textarea-uneditable-color-text: var(--color-grey-900);
1086
+ --form-field-textarea-placeholder-color-text: var(--color-grey-600);
1087
+ --form-field-textarea-placeholder-color-border: var(--color-grey-200);
1088
+ --form-field-textarea-placeholder-color-background: var(--color-mono-white);
1089
+ --form-field-help-text-hover-color-icon: var(--color-brand-800);
1090
+ --form-field-help-text-hover-color-text: var(--color-brand-800);
1091
+ --form-field-help-text-default-color-icon: var(--color-brand-600);
1092
+ --form-field-help-text-default-color-text: var(--color-brand-600);
1093
+ --form-field-help-text-color-label-description-text: var(--color-grey-600);
1094
+ --form-field-spacing-vertical: var(--spacing-small);
1095
+ --form-field-spacing-padding-x: var(--spacing-small);
1096
+ --form-field-spacing-horizontal: var(--spacing-small);
1097
+ --form-field-spacing-padding-left: var(--spacing-small);
1098
+ --form-field-spacing-vertical-gap: var(--spacing-xsmall);
1099
+ --form-field-spacing-padding-right: var(--spacing-xsmall);
1100
+ --form-field-color-label-description-text: var(--color-grey-600);
1101
+ --breadcrumbs-divider-default-color: var(--color-grey-600);
1102
+ --breadcrumbs-elipsis-hover-color: var(--color-grey-900);
1103
+ --breadcrumbs-elipsis-hover-colour-background: var(--color-grey-100);
1104
+ --breadcrumbs-elipsis-radius: var(--border-radius-round);
1105
+ --breadcrumbs-elipsis-default-color: var(--color-grey-900);
1106
+ --breadcrumbs-spacing-gap-horizontal: var(--spacing-xsmall);
1107
+ --breadcrumbs-copy-icon-hover-color: var(--color-grey-900);
1108
+ --breadcrumbs-copy-icon-hover-color-background: var(--color-grey-100);
1109
+ --breadcrumbs-copy-icon-radius: var(--border-radius-round);
1110
+ --breadcrumbs-copy-icon-default-color: var(--color-grey-900);
1111
+ --breadcrumbs-breadcrumb-link-hover-color-icon: var(--color-brand-600);
1112
+ --breadcrumbs-breadcrumb-link-hover-color-text: var(--color-brand-600);
1113
+ --breadcrumbs-breadcrumb-link-hover-spacing-gap-horizontal: var(--spacing-xsmall);
1114
+ --breadcrumbs-breadcrumb-link-active-color-icon: var(--color-grey-900);
1115
+ --breadcrumbs-breadcrumb-link-active-color-text: var(--color-grey-900);
1116
+ --breadcrumbs-breadcrumb-link-active-spacing-gap-horizontal: var(--spacing-xsmall);
1117
+ --breadcrumbs-breadcrumb-link-default-color-icon: var(--color-grey-600);
1118
+ --breadcrumbs-breadcrumb-link-default-color-text: var(--color-grey-600);
1119
+ --breadcrumbs-breadcrumb-link-default-spacing-gap-horizontal: var(--spacing-xsmall);
1120
+ --breadcrumbs-breadcrumb-link-spacing-gap-horizontal: var(--spacing-xsmall);
1121
+ --breadcrumbs-spacing-gap-horizontal: var(--spacing-small);
1122
+ --date-picker-radius: var(--border-radius-small);
1123
+ --date-picker-date-cell-today-hover-radius: var(--border-radius-round);
1124
+ --date-picker-date-cell-today-hover-color-text: var(--color-brand-800);
1125
+ --date-picker-date-cell-today-default-color-text: var(--color-brand-600);
1126
+ --date-picker-date-cell-today-multi-select-radius: var(--border-radius-round);
1127
+ --date-picker-date-cell-today-hover-color-background: var(--color-brand-100);
1128
+ --date-picker-date-cell-today-default-color-background: var(--color-brand-050);
1129
+ --date-picker-date-cell-today-multi-select-color-background: var(--color-brand-050);
1130
+ --date-picker-date-cell-disabled-color-text: var(--color-grey-500);
1131
+ --date-picker-date-cell-inactive-time-call-color-text: var(--color-mono-white);
1132
+ --date-picker-date-cell-inactive-hover-radius: var(--border-radius-round);
1133
+ --date-picker-date-cell-inactive-default-color-text: var(--color-grey-900);
1134
+ --date-picker-date-cell-inactive-hover-color-background: var(--color-grey-050);
1135
+ --date-picker-date-cell-inactive-default-color-background: var(--color-mono-white);
1136
+ --date-picker-date-cell-selected-radius: var(--border-radius-round);
1137
+ --date-picker-date-cell-selected-color-text: var(--color-mono-white);
1138
+ --date-picker-date-cell-selected-color-background: var(--color-brand-600);
1139
+ --date-picker-date-cell-day-label-color-text: var(--color-grey-600);
1140
+ --date-picker-date-cell-selected-multi-radius: var(--border-radius-round);
1141
+ --date-picker-date-cell-selected-multi-color-text: var(--color-mono-white);
1142
+ --date-picker-date-cell-selected-multi-color-background: var(--color-brand-600);
1143
+ --date-picker-date-cell-selected-multi-range-color-text: var(--color-grey-900);
1144
+ --date-picker-date-cell-selected-multi-range-color-background: var(--color-brand-050);
1145
+ --date-picker-date-cell-selected-multi-color-container-background: var(--color-brand-050);
1146
+ --date-picker-date-cell-selected-multi-range-hover-color-background: var(--color-brand-100);
1147
+ --date-picker-time-cell-radius: var(--border-radius-small);
1148
+ --date-picker-time-cell-active-color-text: var(--color-mono-white);
1149
+ --date-picker-time-cell-default-color-text: var(--color-grey-900);
1150
+ --date-picker-time-cell-hover-color-background: var(--color-grey-050);
1151
+ --date-picker-time-cell-active-color-background: var(--color-brand-600);
1152
+ --date-picker-time-cell-default-color-background: var(--color-mono-white);
1153
+ --date-picker-date-arrow-radius: var(--border-radius-round);
1154
+ --date-picker-date-arrow-color-icon: var(--color-grey-900);
1155
+ --date-picker-date-arrow-hover-color-background: var(--color-grey-050);
1156
+ --date-picker-date-arrow-default-color-background: var(--color-mono-white);
1157
+ --date-picker-spacing-gap: var(--spacing-medium);
1158
+ --date-picker-time-selector-radius: var(--border-radius-small);
1159
+ --date-picker-time-selector-spacing-padding: var(--border-radius-xsmall);
1160
+ --date-picker-time-selector-color-background: var(--color-mono-white);
1161
+ --date-picker-color-background: var(--color-mono-white);
1162
+ --date-picker-date-picker-text-gap-vertical: var(--spacing-xsmall);
1163
+ --date-picker-date-picker-text-hover-radius: var(--border-radius-round);
1164
+ --date-picker-date-picker-text-spacing-vertical: var(--spacing-small);
1165
+ --date-picker-date-picker-text-active-color-icon: var(--color-brand-800);
1166
+ --date-picker-date-picker-text-active-color-text: var(--color-brand-800);
1167
+ --date-picker-date-picker-text-default-color-icon: var(--color-grey-900);
1168
+ --date-picker-date-picker-text-default-color-text: var(--color-grey-900);
1169
+ --date-picker-date-picker-text-spacing-horizontal: var(--spacing-medium);
1170
+ --date-picker-date-picker-text-hover-color-background: var(--color-grey-050);
1171
+ --date-picker-date-picker-text-active-color-background: var(--color-brand-050);
1172
+ --date-picker-spacing-vertical: var(--spacing-medium);
1173
+ --date-picker-spacing-horizontal: var(--spacing-large);
1174
+ --page-heading-color-text: var(--color-mono-black);
1175
+ --page-heading-spacing-gap: var(--spacing-small);
1176
+ --page-heading-spacing-horizontal-gap: var(--spacing-large);
1177
+ --form-dropdown-radius: var(--border-radius-small);
1178
+ --form-dropdown-form-drop-item-hover-color-icon: var(--color-grey-900);
1179
+ --form-dropdown-form-drop-item-hover-color-text: var(--color-grey-900);
1180
+ --form-dropdown-form-drop-item-hover-color-background: var(--color-grey-050);
1181
+ --form-dropdown-form-drop-item-title-color-line: var(--color-grey-100);
1182
+ --form-dropdown-form-drop-item-title-color-text: var(--color-grey-900);
1183
+ --form-dropdown-form-drop-item-active-color-icon: var(--color-brand-900);
1184
+ --form-dropdown-form-drop-item-active-color-text: var(--color-brand-900);
1185
+ --form-dropdown-form-drop-item-active-color-background: var(--color-brand-050);
1186
+ --form-dropdown-form-drop-item-radius: var(--border-radius-small);
1187
+ --form-dropdown-form-drop-item-default-color-icon: var(--color-grey-900);
1188
+ --form-dropdown-form-drop-item-default-color-text: var(--color-grey-900);
1189
+ --form-dropdown-form-drop-item-default-color-background: var(--color-mono-white);
1190
+ --form-dropdown-form-drop-item-focus-hover-color-icon: var(--color-grey-900);
1191
+ --form-dropdown-form-drop-item-focus-hover-color-text: var(--color-grey-900);
1192
+ --form-dropdown-form-drop-item-focus-hover-color-focus: var(--color-grey-900);
1193
+ --form-dropdown-form-drop-item-focus-hover-color-background: var(--color-grey-050);
1194
+ --form-dropdown-form-drop-item-focus-default-color-icon: var(--color-grey-900);
1195
+ --form-dropdown-form-drop-item-focus-default-color-text: var(--color-grey-900);
1196
+ --form-dropdown-form-drop-item-focus-default-color-focus: var(--color-brand-600);
1197
+ --form-dropdown-form-drop-item-focus-default-color-background: var(--color-mono-white);
1198
+ --form-dropdown-form-drop-item-spacing-vertical: var(--spacing-xsmall);
1199
+ --form-dropdown-form-drop-item-spacing-horizontal: var(--spacing-small);
1200
+ --form-dropdown-form-drop-item-spacing-gap-horizontal: var(--spacing-small);
1201
+ --form-dropdown-color-background: var(--color-mono-white);
1202
+ --form-dropdown-spacing-vertical: var(--spacing-small);
1203
+ --form-dropdown-spacing-horizontal: var(--spacing-small);
1204
+ --card-data-view-hover-color-background: var(--color-grey-100);
1205
+ --card-data-view-radius: var(--border-radius-small);
1206
+ --card-data-view-default-color-background: var(--color-grey-050);
1207
+ --card-data-view-color-text: var(--color-grey-900);
1208
+ --card-data-view-spacing-gap: var(--spacing-large);
1209
+ --card-data-view-color-divider-x: var(--color-grey-050);
1210
+ --card-data-view-spacing-vertical: var(--spacing-large);
1211
+ --card-data-view-spacing-horizontal: var(--spacing-large);
1212
+ --navigation-top-logo-school-color-border: var(--color-grey-100);
1213
+ --navigation-top-logo-school-weight-border: var(--border-weight);
1214
+ --navigation-top-logo-school-color-background: var(--color-mono-white);
1215
+ --navigation-top-logo-arbor-lockup-spacing-gap: var(--spacing-xsmall);
1216
+ --navigation-top-logo-weight-border: var(--border-weight);
1217
+ --navigation-top-nav-group-spacing-horizontal-gap: var(--spacing-small);
1218
+ --navigation-top-nav-items-focus-color-text: var(--color-grey-700);
1219
+ --navigation-top-nav-items-focus-color-background: var(--color-mono-white);
1220
+ --navigation-top-nav-items-hover-color-text: var(--color-grey-700);
1221
+ --navigation-top-nav-items-hover-color-background: var(--color-grey-050);
1222
+ --navigation-top-nav-items-active-color-text: var(--color-brand-800);
1223
+ --navigation-top-nav-items-active-color-background: var(--color-brand-050);
1224
+ --navigation-top-nav-items-radius: var(--border-radius-small);
1225
+ --navigation-top-nav-items-default-color-text: var(--color-grey-700);
1226
+ --navigation-top-nav-items-default-color-background: var(--color-mono-white);
1227
+ --navigation-top-nav-items-spacing-gap: var(--spacing-xsmall);
1228
+ --navigation-top-nav-items-spacing-vertical: var(--spacing-xsmall);
1229
+ --navigation-top-nav-items-spacing-horizontal: var(--spacing-small);
1230
+ --navigation-top-nav-items-drop-down-focus-color-text: var(--color-mono-black);
1231
+ --navigation-top-nav-items-drop-down-focus-color-background: var(--color-mono-white);
1232
+ --navigation-top-nav-items-drop-down-hover-color-text: var(--color-mono-black);
1233
+ --navigation-top-nav-items-drop-down-hover-color-background: var(--color-grey-050);
1234
+ --navigation-top-nav-items-drop-down-default-color-text: var(--color-mono-black);
1235
+ --navigation-top-nav-items-drop-down-default-color-background: var(--color-mono-white);
1236
+ --tooltip-homepage-x: var(--spacing-large);
1237
+ --tooltip-homepage-radius: var(--spacing-small);
1238
+ --tooltip-homepage-color-text: var(--color-grey-900);
1239
+ --tooltip-homepage-color-border: var(--color-grey-050);
1240
+ --tooltip-homepage-color-background: var(--color-mono-white);
1241
+ --tooltip-homepage-spacing-vertical: var(--spacing-xlarge);
1242
+ --tooltip-homepage-spacing-horizontal: var(--spacing-xlarge);
1243
+ --bg: var(--color-mono-white);
1244
+ --form-dropdown-multi-line-radius: var(--border-radius-small);
1245
+ --form-dropdown-multi-line-spacing-padding: var(--spacing-small);
1246
+ --form-dropdown-multi-line-color-background: var(--color-mono-white);
1247
+ --form-dropdown-multi-line-form-drop-item-multi-base-radius: var(--border-radius-small);
1248
+ --form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding: var(--spacing-xsmall);
1249
+ --form-dropdown-multi-line-form-drop-item-multi-base-spacing-gap-vertical: var(--spacing-small);
1250
+ --form-dropdown-multi-line-form-drop-item-multi-hover-color-icon: var(--color-grey-900);
1251
+ --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-1: var(--color-grey-900);
1252
+ --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-2: var(--color-grey-600);
1253
+ --form-dropdown-multi-line-form-drop-item-multi-hover-color-background: var(--color-grey-050);
1254
+ --form-dropdown-multi-line-form-drop-item-multi-active-color-icon: var(--color-brand-800);
1255
+ --form-dropdown-multi-line-form-drop-item-multi-active-color-text-1: var(--color-brand-900);
1256
+ --form-dropdown-multi-line-form-drop-item-multi-active-color-text-2: var(--color-brand-800);
1257
+ --form-dropdown-multi-line-form-drop-item-multi-active-color-background: var(--color-brand-050);
1258
+ --form-dropdown-multi-line-form-drop-item-multi-default-color-icon: var(--color-grey-900);
1259
+ --form-dropdown-multi-line-form-drop-item-multi-default-color-text-1: var(--color-grey-900);
1260
+ --form-dropdown-multi-line-form-drop-item-multi-default-color-text-2: var(--color-grey-600);
1261
+ --form-dropdown-multi-line-form-drop-item-multi-default-color-background: var(--color-mono-white);
1262
+ --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-icon: var(--color-brand-800);
1263
+ --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-focus: var(--color-brand-500);
1264
+ --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-1: var(--color-brand-900);
1265
+ --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-2: var(--color-brand-800);
1266
+ --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-background: var(--color-brand-050);
1267
+ --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-icon: var(--color-grey-900);
1268
+ --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-1: var(--color-grey-900);
1269
+ --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-2: var(--color-grey-600);
1270
+ --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-background: var(--color-mono-white);
1271
+ --form-dropdown-multi-line-form-drop-item-multi-color-background: var(--color-mono-white);
1272
+ --form-dropdown-multi-line-spacing-gap-vertical: var(--spacing-xsmall);
1273
+ --checkbox-or-radio-button-group-hover-color-text: var(--color-grey-900);
1274
+ --checkbox-or-radio-button-group-hover-color-border: var(--color-grey-900);
1275
+ --checkbox-or-radio-button-group-hover-color-background: var(--color-mono-white);
1276
+ --checkbox-or-radio-button-group-default-color-text: var(--color-grey-900);
1277
+ --checkbox-or-radio-button-group-default-color-border: var(--color-grey-500);
1278
+ --checkbox-or-radio-button-group-default-color-background: var(--color-mono-white);
1279
+ --checkbox-or-radio-button-group-disabled-color-text: var(--color-grey-600);
1280
+ --checkbox-or-radio-button-group-disabled-color-check: var(--color-grey-500);
1281
+ --checkbox-or-radio-button-group-disabled-color-border: var(--color-grey-500);
1282
+ --checkbox-or-radio-button-group-disabled-color-background: var(--color-grey-100);
1283
+ --checkbox-or-radio-button-group-selected-color-text: var(--color-grey-900);
1284
+ --checkbox-or-radio-button-group-selected-color-check: var(--color-brand-600);
1285
+ --checkbox-or-radio-button-group-selected-color-border: var(--color-brand-600);
1286
+ --checkbox-or-radio-button-group-selected-color-background: var(--color-mono-white);
1287
+ --checkbox-or-radio-button-group-selected-hover-color-text: var(--color-grey-900);
1288
+ --checkbox-or-radio-button-group-selected-hover-color-check: var(--color-brand-800);
1289
+ --checkbox-or-radio-button-group-selected-hover-color-border: var(--color-brand-800);
1290
+ --checkbox-or-radio-button-group-selected-hover-color-background: var(--color-mono-white);
1291
+ --checkbox-or-radio-button-group-spacing-vertical: var(--spacing-small);
1292
+ --checkbox-or-radio-button-group-spacing-gap-vertical: var(--spacing-medium);
1293
+ --checkbox-or-radio-button-group-spacing-gap-horizontal: var(--spacing-small);
1294
+ --card-focus-focus: var(--focus-color-focus);
1295
+ --pill-checkbox-default-focus: var(--focus-color-focus);
1296
+ --pill-checkbox-selected-focus: var(--focus-color-focus);
1297
+ --pill-single-filter-default-focus: var(--focus-color-focus);
1298
+ --pill-single-filter-selected-focus: var(--focus-color-focus);
1299
+ --toast-info-icon-focus-color-background: var(--toast-info-color-background);
1300
+ --toast-info-icon-default-color-background: var(--toast-info-color-background);
1301
+ --toast-caution-icon-focus-color-background: var(--toast-caution-color-background);
1302
+ --toast-caution-icon-default-color-background: var(--toast-caution-color-background);
1303
+ --toast-success-icon-focus-color-background: var(--toast-success-color-background);
1304
+ --toast-success-icon-default-color-background: var(--toast-success-color-background);
1305
+ --toast-warning-icon-focus-color-background: var(--toast-warning-color-background);
1306
+ --toast-warning-icon-default-color-background: var(--toast-warning-color-background);
1307
+ --toast-destructive-icon-focus-color-background: var(--toast-destructive-color-background);
1308
+ --toast-destructive-icon-default-color-background: var(--toast-destructive-color-background);
1309
+ --button-small-primary-focus-color-focus: var(--focus-color-focus);
1310
+ --button-small-tertiary-focus-color-focus: var(--focus-color-focus);
1311
+ --button-small-secondary-focus-color-focus: var(--focus-color-focus);
1312
+ --button-small-text-link-focus-color-focus: var(--focus-color-focus);
1313
+ --button-small-primary-destructive-focus-color-focus: var(--focus-color-focus);
1314
+ --button-small-secondary-destructive-focus-color-focus: var(--focus-color-focus);
1315
+ --button-medium-secondary-focus-color-focus: var(--focus-color-focus);
1316
+ --button-medium-text-link-focus-color-focus: var(--focus-color-focus);
1317
+ --button-medium-primary-destructive-focus-color-focus: var(--focus-color-focus);
1318
+ --button-medium-secondary-destructive-focus-color-focus: var(--focus-color-focus);
1319
+ --tables-controls-icon-focus-color-background: var(--tables-controls-icon-default-color-background);
1320
+ --tables-controls-icon-deactivated-color-background: var(--tables-controls-icon-default-color-background);
1321
+ --widget-table-color-background: var(--section-container-color-background);
1322
+ --widget-heading-interactive-focus-color-border: var(--focus-color-focus);
1323
+ --section-table-color-background: var(--section-container-color-background);
1324
+ --section-heading-interactive-focus-color-border: var(--focus-color-focus);
1325
+ --section-subsection-color-background: var(--section-container-color-background);
1326
+ --section-subsection-spacing-horizontal: var(--section-container-spacing-vertical);
1327
+ --checkbox-default-focus: var(--focus-color-focus);
1328
+ --checkbox-selected-focus: var(--focus-color-focus);
1329
+ --checkbox-input-control-checked-focus-color-focus: var(--focus-color-focus);
1330
+ --checkbox-input-control-unchecked-default-color-focus: var(--focus-color-focus);
1331
+ --checkbox-input-control-indeterminate-focus-color-focus: var(--focus-color-focus);
1332
+ --navigation-top-logo-arbor-lockup-color-border: var(--navigation-top-logo-school-color-border);
1333
+ --navigation-top-logo-arbor-lockup-weight-border: var(--navigation-top-logo-weight-border);
1334
+ --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-focus: var(--focus-color-focus);
1253
1335
  }
1254
1336
 
1255
1337
  .sr-only {
@@ -1263,24 +1345,33 @@
1263
1345
  }
1264
1346
 
1265
1347
  .medium-spacing-gap {
1266
- gap: var(--button-medium-spacing-gap-y);
1348
+ gap: var(--spacing-small);
1349
+ }
1350
+
1351
+ .remove-default-button-styles {
1352
+ border: none;
1353
+ background: none;
1354
+ padding: 0;
1355
+ margin: 0;
1356
+ cursor: pointer;
1267
1357
  }
1268
1358
 
1269
1359
  * {
1270
1360
  -webkit-font-smoothing: antialiased;
1271
1361
  -moz-osx-font-smoothing: grayscale;
1272
1362
  text-rendering: optimizeLegibility;
1363
+ font-family: var(--font-family-standard);
1273
1364
  }
1274
1365
 
1275
1366
  .ds-button {
1276
1367
  display: flex;
1277
1368
  align-items: center;
1278
1369
  justify-content: center;
1279
- gap: var(--button-medium-spacing-gap-y);
1370
+ gap: var(--button-medium-spacing-gap-vertical);
1280
1371
  border-radius: var(--button-medium-radius);
1281
1372
  font-family: var(--font-family-standard);
1282
- font-weight: var(--font-weight-regular);
1283
- padding: var(--button-medium-spacing-y) var(--button-medium-spacing-x);
1373
+ font-weight: var(--font-weight-semi-bold);
1374
+ padding: var(--button-medium-spacing-vertical) var(--button-medium-spacing-horizontal);
1284
1375
  border: none;
1285
1376
  cursor: pointer;
1286
1377
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1303,12 +1394,12 @@
1303
1394
  .ds-button--primary {
1304
1395
  background-color: var(--button-medium-primary-default-color-background);
1305
1396
  color: var(--button-medium-primary-default-color-text);
1306
- border: 1px solid var(--button-medium-primary-default-color-border);
1397
+ border: 1px solid var(--button-medium-primary-default-color-background);
1307
1398
  }
1308
1399
  .ds-button--primary:focus {
1309
1400
  background-color: var(--button-medium-primary-focus-color-background);
1310
1401
  color: var(--button-medium-primary-focus-color-text);
1311
- outline: 2px solid var(--button-medium-primary-focus-color-focus);
1402
+ outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
1312
1403
  }
1313
1404
  .ds-button--primary:hover {
1314
1405
  background-color: var(--button-medium-primary-hover-color-background);
@@ -1321,93 +1412,126 @@
1321
1412
  .ds-button--secondary {
1322
1413
  background-color: var(--button-medium-secondary-default-color-background);
1323
1414
  color: var(--button-medium-secondary-default-color-text);
1324
- border: 1px solid var(--button-medium-secondary-default-color-border);
1415
+ border: var(--border-weight) solid var(--button-medium-secondary-default-color-border);
1325
1416
  }
1326
1417
  .ds-button--secondary:focus {
1327
1418
  background-color: var(--button-medium-secondary-focus-color-background);
1328
1419
  color: var(--button-medium-secondary-focus-color-text);
1329
- outline: 2px solid var(--button-medium-secondary-focus-color-focus);
1420
+ outline: var(--focus-border) solid var(--button-medium-secondary-focus-color-focus);
1330
1421
  }
1331
1422
  .ds-button--secondary:hover {
1332
1423
  background-color: var(--button-medium-secondary-hover-color-background);
1333
1424
  color: var(--button-medium-secondary-hover-color-text);
1334
1425
  }
1335
1426
  .ds-button--secondary:active {
1336
- background-color: var(--button-medium-secondary-pressed-color-background);
1337
- color: var(--button-medium-secondary-pressed-color-text);
1427
+ background-color: var(--button-medium-secondary-active-color-background);
1428
+ color: var(--button-medium-secondary-active-color-text);
1429
+ }
1430
+ .ds-button--dropdown {
1431
+ color: var(--color-grey-900, #2F2F2F);
1432
+ /* typography/body/p1-regular */
1433
+ font-family: var(--type-body-p-family, Inter);
1434
+ font-size: var(--type-body-p-size, 13px);
1435
+ font-style: normal;
1436
+ font-weight: var(--type-body-p-weight, 400);
1437
+ line-height: 150%; /* 19.5px */
1438
+ display: flex;
1439
+ padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
1440
+ justify-content: space-between;
1441
+ align-items: center;
1442
+ flex-shrink: 0;
1443
+ border-radius: var(--border-radius-small);
1444
+ border: 1px solid var(--color-grey-200);
1445
+ background: var(--button-medium-secondary-default-color-background);
1446
+ cursor: pointer;
1447
+ }
1448
+ .ds-button--dropdown:focus {
1449
+ outline: none;
1450
+ box-shadow: 0 0 0 3px var(--color-brand-500);
1451
+ background: var(--button-medium-secondary-default-color-background);
1452
+ }
1453
+ .ds-button--dropdown:hover {
1454
+ border: 1px solid var(--color-grey-500);
1455
+ background: var(--color-mono-white);
1456
+ }
1457
+ .ds-button--dropdown--error {
1458
+ border: 1px solid var(--color-semantic-destructive-500);
1338
1459
  }
1339
1460
  .ds-button--tertiary {
1340
- background-color: var(--button-medium-tertiary-default-color-background);
1341
- color: var(--button-medium-tertiary-default-color-text);
1342
- border: 1px solid var(--button-medium-tertiary-default-color-border);
1461
+ background-color: var(--button-small-tertiary-default-color-background);
1462
+ color: var(--button-small-tertiary-default-color-text);
1463
+ border: var(--border-weight) solid var(--button-small-tertiary-default-color-border);
1343
1464
  }
1344
1465
  .ds-button--tertiary:focus {
1345
- background-color: var(--button-medium-tertiary-focus-color-background);
1346
- color: var(--button-medium-tertiary-focus-color-text);
1347
- outline: 2px solid var(--button-medium-tertiary-focus-color-focus);
1466
+ background-color: var(--button-small-tertiary-focus-color-background);
1467
+ color: var(--button-small-tertiary-focus-color-text);
1468
+ outline: var(--focus-border) solid var(--button-small-tertiary-focus-color-focus);
1348
1469
  }
1349
1470
  .ds-button--tertiary:hover {
1350
- background-color: var(--button-medium-tertiary-hover-color-background);
1351
- color: var(--button-medium-tertiary-hover-color-text);
1471
+ background-color: var(--button-small-tertiary-hover-color-background);
1472
+ color: var(--button-small-tertiary-hover-color-text);
1352
1473
  }
1353
1474
  .ds-button--tertiary:active {
1354
- background-color: var(--button-medium-tertiary-pressed-color-background);
1355
- color: var(--button-medium-tertiary-pressed-color-text);
1475
+ background-color: var(--button-small-tertiary-active-color-background);
1476
+ color: var(--button-small-tertiary-active-color-text);
1356
1477
  }
1357
1478
  .ds-button--primary-destructive {
1358
1479
  background-color: var(--button-medium-primary-destructive-default-color-background);
1359
1480
  color: var(--button-medium-primary-destructive-default-color-text);
1360
- border: 1px solid var(--button-medium-primary-destructive-default-color-border);
1481
+ border: var(--border-weight) solid var(--button-medium-primary-destructive-default-color-border);
1361
1482
  }
1362
1483
  .ds-button--primary-destructive:focus {
1363
1484
  background-color: var(--button-medium-primary-destructive-focus-color-background);
1364
1485
  color: var(--button-medium-primary-destructive-focus-color-text);
1365
- outline: 2px solid var(--button-medium-primary-destructive-focus-color-focus);
1486
+ outline: var(--focus-border) solid var(--button-medium-primary-destructive-focus-color-focus);
1366
1487
  }
1367
1488
  .ds-button--primary-destructive:hover {
1368
1489
  background-color: var(--button-medium-primary-destructive-hover-color-background);
1369
1490
  color: var(--button-medium-primary-destructive-hover-color-text);
1370
1491
  }
1371
1492
  .ds-button--primary-destructive:active {
1372
- background-color: var(--button-medium-primary-destructive-pressed-color-background);
1373
- color: var(--button-medium-primary-destructive-pressed-color-text);
1493
+ background-color: var(--button-medium-primary-destructive-active-color-background);
1494
+ color: var(--button-medium-primary-destructive-active-color-text);
1374
1495
  }
1375
1496
  .ds-button--secondary-destructive {
1376
1497
  background-color: var(--button-medium-secondary-destructive-default-color-background);
1377
1498
  color: var(--button-medium-secondary-destructive-default-color-text);
1378
- border: 1px solid var(--button-medium-secondary-destructive-default-color-border);
1499
+ border: var(--border-weight) solid var(--button-medium-secondary-destructive-default-color-border);
1379
1500
  }
1380
1501
  .ds-button--secondary-destructive:focus {
1381
1502
  background-color: var(--button-medium-secondary-destructive-focus-color-background);
1382
1503
  color: var(--button-medium-secondary-destructive-focus-color-text);
1383
- outline: 2px solid var(--button-medium-secondary-destructive-focus-color-focus);
1504
+ outline: var(--focus-border) solid var(--button-medium-secondary-destructive-focus-color-focus);
1384
1505
  }
1385
1506
  .ds-button--secondary-destructive:hover {
1386
1507
  background-color: var(--button-medium-secondary-destructive-hover-color-background);
1387
1508
  color: var(--button-medium-secondary-destructive-hover-color-text);
1388
1509
  }
1389
1510
  .ds-button--secondary-destructive:active {
1390
- background-color: var(--button-medium-secondary-destructive-pressed-color-background);
1391
- color: var(--button-medium-secondary-destructive-pressed-color-text);
1511
+ background-color: var(--button-medium-secondary-destructive-active-color-background);
1512
+ color: var(--button-medium-secondary-destructive-active-color-text);
1392
1513
  }
1393
1514
  .ds-button--text-link {
1394
1515
  background-color: var(--button-medium-text-link-default-color-background);
1395
1516
  color: var(--button-medium-text-link-default-color-text);
1396
- border: 1px solid var(--button-medium-text-link-default-color-border);
1517
+ border: var(--border-weight) solid var(--button-medium-text-link-default-color-border);
1397
1518
  }
1398
1519
  .ds-button--text-link:focus {
1399
- background-color: var(--button-medium-text-link-focus-color-background);
1520
+ background-color: var(--button-medium-text-link-default-color-background);
1400
1521
  color: var(--button-medium-text-link-focus-color-text);
1401
- outline: 2px solid var(--button-medium-text-link-focus-color-focus);
1522
+ outline: var(--focus-border) solid var(--button-medium-text-link-focus-color-focus);
1402
1523
  }
1403
1524
  .ds-button--text-link:hover {
1404
- background-color: var(--button-medium-text-link-hover-color-background);
1525
+ background-color: var(--button-medium-text-link-default-color-background);
1405
1526
  color: var(--button-medium-text-link-hover-color-text);
1406
1527
  }
1407
1528
  .ds-button--text-link:active {
1408
- background-color: var(--button-medium-text-link-pressed-color-background);
1529
+ background-color: var(--button-medium-text-link-default-color-background);
1409
1530
  color: var(--button-medium-text-link-pressed-color-text);
1410
1531
  }
1532
+ .ds-button--error {
1533
+ border: 1px solid var(--color-semantic-destructive-500);
1534
+ }
1411
1535
  .ds-button:disabled {
1412
1536
  opacity: 0.5;
1413
1537
  cursor: not-allowed;
@@ -1434,48 +1558,65 @@ h1.ds-heading {
1434
1558
  font-family: var(--type-headings-h1-family);
1435
1559
  font-size: var(--type-headings-h1-size);
1436
1560
  font-weight: var(--type-headings-h1-weight);
1561
+ line-height: var(--type-headings-h1-line-height);
1437
1562
  }
1438
1563
 
1439
1564
  h2.ds-heading {
1440
1565
  font-family: var(--type-headings-h2-family);
1441
1566
  font-size: var(--type-headings-h2-size);
1442
1567
  font-weight: var(--type-headings-h2-weight);
1568
+ line-height: var(--type-headings-h2-line-height);
1443
1569
  }
1444
1570
 
1445
1571
  h3.ds-heading {
1446
1572
  font-family: var(--type-headings-h3-family);
1447
1573
  font-size: var(--type-headings-h3-size);
1448
1574
  font-weight: var(--type-headings-h3-weight);
1575
+ line-height: var(--type-headings-h3-line-height);
1449
1576
  }
1450
1577
 
1451
1578
  h4.ds-heading {
1452
1579
  font-family: var(--type-headings-h4-family);
1453
1580
  font-size: var(--type-headings-h4-size);
1454
1581
  font-weight: var(--type-headings-h4-weight);
1582
+ line-height: var(--type-headings-h4-line-height);
1455
1583
  }
1456
1584
 
1457
1585
  .ds-card__container {
1458
1586
  display: flex;
1459
1587
  width: 100%;
1460
- padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
1588
+ padding: var(--card-spacing-vertical) var(--card-spacing-horizontal);
1461
1589
  flex-direction: column;
1462
1590
  align-items: flex-start;
1463
- gap: var(--card-spacing-gap-y, 16px);
1464
- border-radius: var(--card-radius, 8px);
1465
- border: 1px solid var(--card-default-color-border, #efefef);
1466
- background: var(--card-default-color-background, #fff);
1591
+ gap: var(--card-spacing-gap-vertical) var(--card-spacing-gap-horizontal);
1592
+ border-radius: var(--card-radius);
1593
+ border: var(--border-weight) solid var(--card-default-color-border);
1594
+ background: var(--card-default-color-background);
1467
1595
  color: var(--card-default-color-text);
1468
- line-height: 1.5;
1596
+ line-height: var(--line-height-default);
1597
+ box-sizing: border-box;
1598
+ }
1599
+ .ds-card__container .ds-card__icon-click {
1600
+ flex-shrink: 0;
1601
+ }
1602
+ .ds-card__container .ds-card__icon-click.ds-icon-arrow-right {
1603
+ display: none;
1469
1604
  }
1470
1605
  .ds-card__container:hover:not(.ds-card__container--disabled) {
1471
- border: 1px solid var(--card-hover-color-border, #efefef);
1472
- background: var(--card-hover-color-background, #fff);
1606
+ border: var(--border-weight) solid var(--card-hover-color-border);
1607
+ background: var(--card-hover-color-background);
1473
1608
  box-shadow: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
1474
1609
  }
1610
+ .ds-card__container:hover:not(.ds-card__container--disabled) .ds-card__icon-click.ds-icon-chevron-right {
1611
+ display: none;
1612
+ }
1613
+ .ds-card__container:hover:not(.ds-card__container--disabled) .ds-card__icon-click.ds-icon-arrow-right {
1614
+ display: block;
1615
+ }
1475
1616
  .ds-card__container:focus:not(.ds-card__container--disabled) {
1476
- border: 1px solid var(--card-focus-color-border, #efefef);
1477
- background: var(--card-focus-color-background, #fff);
1478
- box-shadow: 0 0 0 3px var(--button-medium-primary-focus-color-focus, #3cad51);
1617
+ border: var(--border-weight) solid var(--card-focus-color-border);
1618
+ background: var(--card-focus-color-background);
1619
+ outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
1479
1620
  }
1480
1621
  .ds-card__container--clickable {
1481
1622
  cursor: pointer;
@@ -1485,7 +1626,7 @@ h4.ds-heading {
1485
1626
  display: flex;
1486
1627
  flex-direction: row;
1487
1628
  align-items: flex-start;
1488
- gap: var(--spacing-large, 16px);
1629
+ gap: var(--card-spacing-gap-horizontal);
1489
1630
  width: 100%;
1490
1631
  }
1491
1632
  .ds-card__content .ds-card__icon-left {
@@ -1495,7 +1636,7 @@ h4.ds-heading {
1495
1636
  display: flex;
1496
1637
  flex-direction: column;
1497
1638
  justify-content: space-between;
1498
- gap: var(--card-spacing-gap-x);
1639
+ gap: var(--card-spacing-gap-vertical);
1499
1640
  flex-grow: 1;
1500
1641
  }
1501
1642
  .ds-card__content .ds-card__text .ds-card__title {
@@ -1510,9 +1651,6 @@ h4.ds-heading {
1510
1651
  font-size: var(--type-body-p-size);
1511
1652
  font-weight: var(--type-body-p-weight);
1512
1653
  }
1513
- .ds-card__content .ds-card__icon-click {
1514
- flex-shrink: 0;
1515
- }
1516
1654
 
1517
1655
  .ds-form-field {
1518
1656
  font-family: var(--font-family-standard);
@@ -1522,91 +1660,100 @@ h4.ds-heading {
1522
1660
  box-sizing: border-box;
1523
1661
  }
1524
1662
  .ds-form-field__description {
1525
- margin-bottom: var(--form-field-spacing-y);
1526
- color: var(--form-field-description-color-text);
1663
+ margin-bottom: var(--form-field-spacing-vertical);
1664
+ color: var(--form-field-color-label-description-text);
1527
1665
  display: block;
1528
1666
  }
1529
1667
  .ds-form-field__message {
1530
- margin-top: var(--form-field-spacing-y);
1668
+ margin-top: var(--form-field-spacing-vertical);
1531
1669
  }
1532
1670
  .ds-form-field__message--error, .ds-form-field__message--helper {
1533
1671
  display: flex;
1534
1672
  align-items: center;
1535
- margin-top: var(--form-field-spacing-y);
1673
+ margin-top: var(--form-field-spacing-vertical);
1536
1674
  }
1537
1675
  .ds-form-field__message--error {
1538
- gap: var(--form-field-spacing-x);
1539
- color: var(--form-field-error-color-error-text);
1676
+ gap: var(--form-field-spacing-horizontal);
1677
+ color: var(--form-field-text-error-color-error-text);
1540
1678
  }
1541
1679
  .ds-form-field__message--error .ds-icon {
1542
- color: var(--form-field-error-color-error-icon);
1680
+ color: var(--form-field-text-error-color-error-icon);
1543
1681
  }
1544
1682
  .ds-form-field__message--helper {
1545
1683
  color: var(--form-field-help-text-default-color-text);
1546
1684
  }
1685
+ .ds-form-field__message--helper .ds-icon {
1686
+ color: var(--form-field-help-text-default-color-icon);
1687
+ }
1547
1688
  .ds-form-field__message--helper a {
1548
1689
  color: var(--form-field-help-text-default-color-text);
1549
1690
  text-decoration: underline;
1550
1691
  }
1692
+ .ds-form-field__message--helper a:hover {
1693
+ color: var(--form-field-help-text-hover-color-text);
1694
+ }
1695
+ .ds-form-field__message--helper a:hover .ds-icon {
1696
+ color: var(--form-field-help-text-hover-color-icon);
1697
+ }
1551
1698
 
1552
1699
  .ds-input {
1553
1700
  width: 100%;
1554
1701
  font-family: var(--font-family-standard);
1555
1702
  font-weight: var(--font-weight-regular);
1556
- border: 1px solid var(--form-field-placeholder-color-border);
1703
+ border: var(--border-weight) solid var(--form-field-text-default-color-border);
1557
1704
  border-radius: var(--form-field-radius);
1558
- color: var(--colour-grey-900);
1705
+ color: var(--form-field-text-default-color-text);
1559
1706
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
1560
- line-height: 150%;
1561
- background-color: var(--form-field-placeholder-color-background);
1562
- padding: 0 var(--form-field-spacing-x);
1707
+ line-height: var(--line-height-default);
1708
+ background-color: var(--form-field-text-default-color-background);
1709
+ padding: 0 var(--form-field-spacing-horizontal);
1563
1710
  box-sizing: border-box;
1564
1711
  }
1565
1712
  .ds-input::placeholder {
1566
- color: var(--form-field-pill-placeholder-color-text);
1713
+ color: var(--form-field-text-placeholder-color-text);
1567
1714
  }
1568
1715
  .ds-input:focus {
1569
- border-color: var(--form-field-focus-color-border);
1570
- background-color: var(--form-field-focus-color-background);
1571
- outline: 2px solid var(--button-medium-primary-focus-color-focus);
1716
+ color: var(--form-field-text-focus-color-text);
1717
+ border-color: var(--form-field-text-focus-color-border);
1718
+ background-color: var(--form-field-text-focus-color-background);
1719
+ outline: var(--focus-border) solid var(--button-medium-primary-focus-color-focus);
1572
1720
  }
1573
1721
  .ds-input:disabled {
1574
- background-color: var(--colour-grey-100);
1575
- border-color: var(--colour-grey-200);
1576
- color: var(--colour-grey-500);
1722
+ background-color: var(--form-field-text-disabled-color-background);
1723
+ border-color: var(--form-field-text-disabled-color-border);
1724
+ color: var(--form-field-text-disabled-color-text);
1577
1725
  cursor: not-allowed;
1578
1726
  }
1579
- .ds-input:disabled::placeholder {
1580
- color: var(--colour-grey-400);
1581
- }
1582
1727
  .ds-input:disabled:hover {
1583
- border-color: var(--colour-grey-200);
1728
+ border-color: var(--form-field-text-disabled-color-border);
1584
1729
  }
1585
1730
  .ds-input:hover:not(:disabled, :focus) {
1586
- border-color: var(--form-field-hover-color-border);
1587
- background-color: var(--form-field-hover-color-background);
1731
+ color: var(--form-field-text-hover-color-text);
1732
+ border-color: var(--form-field-text-hover-color-border);
1733
+ background-color: var(--form-field-text-hover-color-background);
1588
1734
  }
1589
1735
  .ds-input--M {
1590
1736
  font-size: var(--font-size-3-14);
1591
- height: var(--text-field-medium-height);
1737
+ height: var(--form-field-text-medium-height);
1592
1738
  }
1593
1739
  .ds-input--S {
1594
1740
  font-size: var(--font-size-2-13);
1595
- height: var(--text-field-small-height);
1741
+ height: var(--form-field-text-small-height);
1596
1742
  }
1597
1743
  .ds-input--error {
1598
- border-color: var(--colour-semantic-destructive-500);
1744
+ border-color: var(--form-field-text-error-color-border);
1745
+ color: var(--form-field-text-error-color-text);
1599
1746
  }
1600
1747
  .ds-input--error:focus {
1601
- border-color: var(--colour-semantic-destructive-500);
1602
- box-shadow: 0 0 0 2px var(--colour-semantic-destructive-100-hover);
1748
+ border-color: var(--form-field-text-error-color-border);
1749
+ box-shadow: 0 0 0 var(--focus-border) var(--form-field-text-error-color-border);
1603
1750
  }
1604
1751
  .ds-input--error:hover:not(:disabled, :focus) {
1605
- border-color: var(--colour-semantic-destructive-300);
1752
+ border-color: var(--form-field-text-hover-color-border);
1606
1753
  }
1607
1754
 
1608
1755
  .ds-textarea {
1609
- padding: var(--form-field-spacing-y) var(--form-field-spacing-x);
1756
+ padding: var(--form-field-spacing-vertical) var(--form-field-spacing-padding-x);
1610
1757
  }
1611
1758
 
1612
1759
  .ds-label {
@@ -1615,28 +1762,252 @@ h4.ds-heading {
1615
1762
  font-weight: var(--font-weight-bold);
1616
1763
  color: var(--form-field-label-color-text);
1617
1764
  line-height: 150%;
1618
- margin-bottom: var(--form-field-spacing-y);
1765
+ margin-bottom: var(--form-field-spacing-vertical);
1619
1766
  display: block;
1620
1767
  }
1768
+ .ds-label:has(+ .ds-form-field__description) {
1769
+ margin-bottom: var(--form-field-spacing-vertical-gap);
1770
+ }
1771
+
1772
+ .ds-number-input__container {
1773
+ display: flex;
1774
+ flex-wrap: wrap;
1775
+ justify-content: center;
1776
+ align-items: center;
1777
+ padding: var(--form-field-spacing-vertical) var(--form-field-spacing-padding-x);
1778
+ gap: var(--form-field-spacing-horizontal) var(--form-field-spacing-vertical-gap);
1779
+ border-radius: var(--form-field-radius);
1780
+ border: var(--border-weight) solid var(--form-field-text-placeholder-color-border);
1781
+ background: var(--form-field-text-placeholder-color-background);
1782
+ }
1783
+ .ds-number-input__container:active {
1784
+ border-color: var(--form-field-text-focus-color-border);
1785
+ background: var(--form-field-text-focus-color-background);
1786
+ }
1787
+ .ds-number-input__container:hover:not(:focus-within) {
1788
+ border-color: var(--form-field-text-hover-color-border);
1789
+ background: var(--form-field-text-hover-color-background);
1790
+ }
1791
+ .ds-number-input__container:focus-within:not(:active) {
1792
+ border-color: var(--form-field-text-focus-color-border);
1793
+ background: var(--form-field-text-focus-color-background);
1794
+ outline: var(--focus-border) solid var(--form-field-text-focus-color-border);
1795
+ }
1796
+ .ds-number-input__container--disabled {
1797
+ background: var(--form-field-text-disabled-color-background);
1798
+ border-color: var(--form-field-text-disabled-color-border);
1799
+ cursor: not-allowed;
1800
+ pointer-events: none;
1801
+ }
1802
+ .ds-number-input__container--error {
1803
+ border-color: var(--form-field-text-error-color-border);
1804
+ }
1805
+ .ds-number-input__container .ds-number-input {
1806
+ text-align: center;
1807
+ border: none;
1808
+ flex: 1;
1809
+ padding: 0;
1810
+ color: var(--form-field-text-default-color-text);
1811
+ }
1812
+ .ds-number-input__container .ds-number-input:focus {
1813
+ outline: none;
1814
+ }
1815
+ .ds-number-input__container .ds-number-input__spinner-button {
1816
+ display: flex;
1817
+ border: none;
1818
+ cursor: pointer;
1819
+ background: none;
1820
+ justify-content: center;
1821
+ align-items: center;
1822
+ width: var(--icon-size-medium);
1823
+ height: var(--icon-size-medium);
1824
+ color: var(--form-field-icon-default-color-icon);
1825
+ padding: 0;
1826
+ }
1827
+ .ds-number-input__container .ds-number-input__spinner-button:disabled {
1828
+ color: var(--form-field-icon-disabled-color-icon);
1829
+ }
1830
+
1831
+ .ds-radio-button-input__container {
1832
+ cursor: pointer;
1833
+ display: inline-flex;
1834
+ align-items: center;
1835
+ gap: var(--checkbox-or-radio-button-group-spacing-gap-horizontal);
1836
+ position: relative;
1837
+ }
1838
+ .ds-radio-button-input__container:focus-within {
1839
+ outline: var(--focus-border) solid var(--color-brand-500);
1840
+ border-radius: var(--checkbox-radius);
1841
+ }
1842
+ .ds-radio-button-input__container .ds-radio-button-input__input {
1843
+ position: absolute;
1844
+ appearance: none;
1845
+ background-color: #fff;
1846
+ margin: 0;
1847
+ }
1848
+ .ds-radio-button-input__container .ds-radio-button-input__text {
1849
+ flex: 1 0 0;
1850
+ font-size: var(--type-body-p-size);
1851
+ font-weight: var(--type-body-p-weight);
1852
+ color: var(--checkbox-default-color-text);
1853
+ line-height: var(--line-height-default);
1854
+ user-select: none;
1855
+ }
1856
+ .ds-radio-button-input__container .ds-radio-button-input__text--disabled {
1857
+ cursor: not-allowed;
1858
+ color: var(--checkbox-or-radio-button-group-disabled-color-text);
1859
+ }
1860
+ .ds-radio-button-input__container .ds-radio-button-input__indicator {
1861
+ position: relative;
1862
+ display: inline-flex;
1863
+ align-items: center;
1864
+ justify-content: center;
1865
+ width: 1rem;
1866
+ height: 1rem;
1867
+ border: var(--border-weight) solid var(--checkbox-or-radio-button-group-default-color-border);
1868
+ border-radius: 50%;
1869
+ background-color: var(--checkbox-or-radio-button-group-default-color-background);
1870
+ transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
1871
+ box-sizing: border-box;
1872
+ }
1873
+ .ds-radio-button-input__container .ds-radio-button-input__indicator::after {
1874
+ content: "";
1875
+ position: absolute;
1876
+ width: 0.625rem;
1877
+ height: 0.625rem;
1878
+ border-radius: 50%;
1879
+ background-color: transparent;
1880
+ transition: background-color 0.2s;
1881
+ }
1882
+ .ds-radio-button-input__container .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator {
1883
+ border-color: var(--checkbox-or-radio-button-group-selected-color-border);
1884
+ background-color: var(--checkbox-or-radio-button-group-selected-color-background);
1885
+ }
1886
+ .ds-radio-button-input__container .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator::after {
1887
+ background-color: var(--checkbox-or-radio-button-group-selected-color-check);
1888
+ }
1889
+ .ds-radio-button-input__container .ds-radio-button-input__input:disabled + .ds-radio-button-input__indicator {
1890
+ border-color: var(--checkbox-or-radio-button-group-disabled-color-border);
1891
+ background-color: var(--checkbox-or-radio-button-group-disabled-color-background);
1892
+ cursor: not-allowed;
1893
+ }
1894
+ .ds-radio-button-input__container .ds-radio-button-input__input:checked:disabled + .ds-radio-button-input__indicator::after {
1895
+ background-color: var(--checkbox-or-radio-button-group-disabled-color-check);
1896
+ }
1897
+ .ds-radio-button-input__container:hover:not(:has(.ds-radio-button-input__input:disabled)) .ds-radio-button-input__indicator {
1898
+ border-color: var(--checkbox-or-radio-button-group-hover-color-border);
1899
+ background-color: var(--checkbox-or-radio-button-group-hover-color-background);
1900
+ }
1901
+ .ds-radio-button-input__container:hover:not(:has(.ds-radio-button-input__input:disabled)) .ds-radio-button-input__label {
1902
+ color: var(--checkbox-or-radio-button-group-hover-color-text);
1903
+ }
1904
+ .ds-radio-button-input__container:hover:not(:has(.ds-radio-button-input__input:disabled)) .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator {
1905
+ border-color: var(--checkbox-or-radio-button-group-selected-hover-color-border);
1906
+ background-color: var(--checkbox-or-radio-button-group-selected-hover-color-background);
1907
+ }
1908
+ .ds-radio-button-input__container:hover:not(:has(.ds-radio-button-input__input:disabled)) .ds-radio-button-input__input:checked + .ds-radio-button-input__indicator::after {
1909
+ background-color: var(--checkbox-or-radio-button-group-selected-hover-color-check);
1910
+ }
1911
+
1912
+ .ds-checkbox-input__container {
1913
+ display: inline-flex;
1914
+ align-items: center;
1915
+ justify-content: center;
1916
+ gap: var(--checkbox-spacing-gap-horizontal);
1917
+ /* Hide the native checkbox input */
1918
+ }
1919
+ .ds-checkbox-input__container:focus-within {
1920
+ outline: var(--focus-border) solid var(--color-brand-500);
1921
+ border-radius: var(--checkbox-radius);
1922
+ }
1923
+ .ds-checkbox-input__container .ds-checkbox-input {
1924
+ width: var(--icon-size-small);
1925
+ height: var(--icon-size-small);
1926
+ padding: 0;
1927
+ box-sizing: border-box;
1928
+ border-radius: var(--checkbox-input-control-radius);
1929
+ border: none;
1930
+ box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-default-color-border);
1931
+ background-color: var(--checkbox-input-control-unchecked-default-color-background);
1932
+ align-items: center;
1933
+ justify-content: center;
1934
+ align-self: center;
1935
+ display: flex;
1936
+ position: relative;
1937
+ }
1938
+ .ds-checkbox-input__container .ds-checkbox-input .ds-checkbox-input__icon {
1939
+ position: absolute;
1940
+ top: 50%;
1941
+ left: 50%;
1942
+ transform: translate(-50%, -50%);
1943
+ }
1944
+ .ds-checkbox-input__container .ds-checkbox-input:hover {
1945
+ box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-hover-color-border);
1946
+ background-color: var(--checkbox-input-control-unchecked-hover-color-background);
1947
+ }
1948
+ .ds-checkbox-input__container .ds-checkbox-label__text {
1949
+ flex: 1 0 0;
1950
+ font-size: var(--type-body-p-size);
1951
+ font-weight: var(--type-body-p-weight);
1952
+ color: var(--checkbox-default-color-text);
1953
+ line-height: var(--line-height-default);
1954
+ }
1955
+ .ds-checkbox-input__container input:checked + .ds-checkbox-input {
1956
+ background-color: var(--checkbox-input-control-checked-default-color-background);
1957
+ box-shadow: none;
1958
+ }
1959
+ .ds-checkbox-input__container input:indeterminate + .ds-checkbox-input {
1960
+ background-color: var(--checkbox-input-control-indeterminate-default-color-background);
1961
+ box-shadow: none;
1962
+ }
1963
+ .ds-checkbox-input__container input:disabled + .ds-checkbox-input {
1964
+ background-color: var(--checkbox-input-control-unchecked-disabled-color-background);
1965
+ cursor: not-allowed;
1966
+ pointer-events: none;
1967
+ box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-disabled-color-border);
1968
+ }
1969
+ .ds-checkbox-input__container input:checked:disabled + .ds-checkbox-input {
1970
+ background-color: var(--checkbox-input-control-checked-disabled-color-background);
1971
+ }
1972
+ .ds-checkbox-input__container input:indeterminate:disabled + .ds-checkbox-input {
1973
+ background-color: var(--checkbox-input-control-indeterminate-disabled-color-background);
1974
+ }
1975
+ .ds-checkbox-input__container input:checked:not(:disabled) + .ds-checkbox-input:hover {
1976
+ background-color: var(--checkbox-input-control-checked-hover-color-background);
1977
+ }
1978
+ .ds-checkbox-input__container input:indeterminate:not(:disabled) + .ds-checkbox-input:hover {
1979
+ background-color: var(--checkbox-input-control-indeterminate-hover-color-background);
1980
+ }
1981
+ .ds-checkbox-input__container:hover .ds-checkbox-label__text {
1982
+ color: var(--checkbox-hover-color-text);
1983
+ }
1984
+ .ds-checkbox-input__container input[type=checkbox] {
1985
+ clip-path: inset(50%);
1986
+ height: 0;
1987
+ width: 0;
1988
+ overflow: hidden;
1989
+ position: absolute;
1990
+ white-space: nowrap;
1991
+ }
1621
1992
 
1622
1993
  .ds-pill {
1623
1994
  display: flex;
1624
- padding: var(--tag-spacing-x, 8px) var(--tag-spacing-y, 12px);
1995
+ padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
1625
1996
  align-items: center;
1626
- gap: var(--tag-spacing-gap-y, 8px);
1627
- border-radius: var(--tag-radius, 99px);
1997
+ gap: var(--tag-spacing-gap-horizontal);
1998
+ border-radius: var(--tag-radius);
1628
1999
  flex-grow: 0;
1629
2000
  width: fit-content;
1630
2001
  /* typography/body/p1-reg */
1631
2002
  font-family: var(--type-body-p-family, Inter);
1632
- font-size: var(--type-body-p-size, 13px);
2003
+ font-size: var(--type-body-p-size);
1633
2004
  font-style: normal;
1634
- font-weight: var(--type-body-p-weight, 400);
2005
+ font-weight: var(--type-body-p-weight);
1635
2006
  line-height: 150%; /* 19.5px */
1636
2007
  }
1637
2008
  .ds-pill--orange {
1638
- color: var(--tag-category-orange-color-text, #7E3E00);
1639
- background: var(--tag-category-orange-color-background, #F7EED8);
2009
+ color: var(--tag-category-orange-color-text);
2010
+ background: var(--tag-category-orange-color-background);
1640
2011
  }
1641
2012
  .ds-pill--blue {
1642
2013
  color: var(--tag-category-blue-color-text);
@@ -1663,15 +2034,48 @@ h4.ds-heading {
1663
2034
  background: var(--tag-category-yellow-color-background);
1664
2035
  }
1665
2036
 
2037
+ .ds-section {
2038
+ border-radius: var(--section-container-radius);
2039
+ padding: var(--section-container-spacing-vertical) var(--section-container-spacing-horizontal);
2040
+ background-color: var(--section-container-color-background);
2041
+ }
2042
+ .ds-section .ds-section {
2043
+ padding-right: 0;
2044
+ }
2045
+ .ds-section .ds-heading {
2046
+ padding: var(--section-heading-spacing-top) var(--section-heading-spacing-right) var(--section-heading-spacing-bottom) var(--section-heading-spacing-left);
2047
+ border-bottom: var(--border-weight) solid var(--section-heading-color-border);
2048
+ margin: 0;
2049
+ border-radius: var(--section-container-radius);
2050
+ color: var(--section-heading-color-text);
2051
+ }
2052
+ .ds-section--collapsible .ds-heading {
2053
+ cursor: pointer;
2054
+ background-color: var(--section-heading-interactive-default-color-background);
2055
+ }
2056
+ .ds-section--collapsible .ds-heading:hover {
2057
+ background-color: var(--section-heading-interactive-hover-color-background);
2058
+ }
2059
+ .ds-section--collapsible .ds-heading:active {
2060
+ background-color: var(--section-heading-interactive-pressed-color-background);
2061
+ }
2062
+ .ds-section--collapsible .ds-heading:focus {
2063
+ border: var(--border-weight) solid var(--section-heading-interactive-focus-color-border);
2064
+ }
2065
+ .ds-section--collapsible .ds-section__contents--collapsed {
2066
+ display: none;
2067
+ }
2068
+
1666
2069
  .ds-tabs {
1667
2070
  display: flex;
1668
2071
  width: 100%;
1669
2072
  list-style: none;
1670
2073
  padding: 0;
1671
2074
  margin: 0;
1672
- font-family: var(--font-family-standard);
2075
+ font-family: var(--type-body-p-family);
1673
2076
  align-items: center;
1674
2077
  justify-content: center;
2078
+ gap: var(--tabs-tab-item-spacing-gap-horizontal);
1675
2079
  }
1676
2080
 
1677
2081
  .ds-tabs-item {
@@ -1680,8 +2084,8 @@ h4.ds-heading {
1680
2084
  }
1681
2085
 
1682
2086
  .ds-tabs-item__tab {
1683
- font-family: var(--font-family-standard);
1684
- padding: var(--tabs-tab-item-spacing-y) var(--tabs-tab-item-spacing-x);
2087
+ font-family: var(--type-body-p-family);
2088
+ padding: var(--tabs-tab-item-spacing-vertical) var(--tabs-tab-item-spacing-horizontal);
1685
2089
  cursor: pointer;
1686
2090
  display: flex;
1687
2091
  align-items: center;
@@ -1694,7 +2098,7 @@ h4.ds-heading {
1694
2098
  font-size: var(--font-size-3-14);
1695
2099
  border-bottom: 2px solid transparent;
1696
2100
  box-sizing: border-box;
1697
- gap: var(--tabs-tab-item-spacing-gap-x);
2101
+ gap: var(--tabs-tab-item-spacing-gap-horizontal);
1698
2102
  }
1699
2103
  .ds-tabs-item__tab:hover {
1700
2104
  color: var(--tabs-tab-item-inactive-hover-color-text);
@@ -1702,8 +2106,8 @@ h4.ds-heading {
1702
2106
  }
1703
2107
  .ds-tabs-item__tab:focus {
1704
2108
  color: var(--tabs-tab-item-inactive-focussed-color-text);
1705
- outline: 2px solid var(--tabs-tab-item-inactive-focussed-color-focus);
1706
- border-radius: var(--tabs-tab-item-radius);
2109
+ outline: var(--focus-border) solid var(--tabs-tab-item-inactive-focus-color-focus);
2110
+ border-radius: var(--border-radius-small);
1707
2111
  }
1708
2112
  .ds-tabs-item__tab--active {
1709
2113
  color: var(--tabs-tab-item-active-default-color-text);
@@ -1715,7 +2119,217 @@ h4.ds-heading {
1715
2119
  }
1716
2120
  .ds-tabs-item__tab--active:focus {
1717
2121
  color: var(--tabs-tab-item-active-default-color-text);
1718
- outline: 2px solid var(--tabs-tab-item-active-color-focus);
2122
+ outline: var(--focus-border) solid var(--tabs-tab-item-active-color-focus);
2123
+ }
2124
+
2125
+ .ds-dropdown select {
2126
+ display: flex;
2127
+ padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
2128
+ justify-content: space-between;
2129
+ align-items: center;
2130
+ flex-shrink: 0;
2131
+ border-radius: var(--border-radius-small);
2132
+ background: var(--button-medium-secondary-default-color-background);
2133
+ }
2134
+ .ds-dropdown select:focus-visible {
2135
+ outline: none;
2136
+ box-shadow: 0 0 0 3px var(--color-brand-500);
2137
+ background: var(--button-medium-secondary-default-color-background);
2138
+ }
2139
+ .ds-dropdown select:hover {
2140
+ border: 1px solid var(--color-grey-500);
2141
+ background: var(--color-mono-white);
2142
+ cursor: pointer;
2143
+ }
2144
+
2145
+ .ds-dropdown-item {
2146
+ display: flex;
2147
+ padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
2148
+ align-items: center;
2149
+ border-radius: var(--form-dropdown-form-drop-item-radius);
2150
+ background: var(--form-dropdown-form-drop-item-default-color-background);
2151
+ cursor: pointer;
2152
+ color: var(--form-dropdown-form-drop-item-default-color-text);
2153
+ /* typography/body/p1-regular */
2154
+ font-family: var(--type-body-p-family);
2155
+ font-size: var(--type-body-p-size);
2156
+ font-style: normal;
2157
+ font-weight: var(--type-body-p-weight);
2158
+ line-height: 150%;
2159
+ }
2160
+ .ds-dropdown-item:focus-visible {
2161
+ outline: none;
2162
+ box-shadow: 0 0 0 3px var(--color-brand-500);
2163
+ background: var(--button-medium-secondary-default-color-background);
2164
+ }
2165
+ .ds-dropdown-item:hover {
2166
+ background: var(--form-dropdown-form-drop-item-hover-color-background);
2167
+ }
2168
+ .ds-dropdown-item--pressed {
2169
+ background: var(--form-dropdown-form-drop-item-active-color-background);
2170
+ color: var(--form-dropdown-form-drop-item-active-color-text);
2171
+ }
2172
+ .ds-dropdown-item--content {
2173
+ display: flex;
2174
+ justify-content: space-between;
2175
+ align-items: center;
2176
+ width: 100%;
2177
+ }
2178
+ .ds-dropdown-item--icon {
2179
+ display: flex;
2180
+ align-items: center;
2181
+ justify-content: center;
2182
+ margin-right: 8px;
2183
+ }
2184
+ .ds-dropdown-item--check-icon {
2185
+ display: flex;
2186
+ align-items: center;
2187
+ justify-content: center;
2188
+ margin-right: 8px;
2189
+ }
2190
+ .ds-dropdown-item--label {
2191
+ flex: 1;
2192
+ }
2193
+ .ds-dropdown-item--check {
2194
+ margin-left: auto;
2195
+ }
2196
+
2197
+ .ds-dropdown-wrapper {
2198
+ color: var(--color-grey-600, #595959);
2199
+ /* typography/body/p1-regular */
2200
+ font-family: var(--type-body-p-family, Inter);
2201
+ font-size: var(--type-body-p-size, 13px);
2202
+ font-style: normal;
2203
+ font-weight: var(--type-body-p-weight, 400);
2204
+ line-height: 150%;
2205
+ }
2206
+ .ds-dropdown-wrapper--items h3 {
2207
+ margin: 0;
2208
+ }
2209
+ .ds-dropdown-wrapper--items--header {
2210
+ color: var(--form-dropdown-form-drop-item-title-color-text);
2211
+ font-size: var(--type-body-bold-size);
2212
+ font-style: normal;
2213
+ font-weight: var(--type-body-bold-weight);
2214
+ line-height: 150%;
2215
+ display: flex;
2216
+ padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
2217
+ align-items: center;
2218
+ gap: 8px;
2219
+ align-self: stretch;
2220
+ border-bottom: 1px solid var(--page-base-color-border);
2221
+ }
2222
+
2223
+ .ds-dropdown-select--pressed {
2224
+ border: 1px solid var(--button-medium-secondary-default-color-border);
2225
+ background: var(--button-medium-secondary-active-color-background);
2226
+ }
2227
+ .ds-dropdown-select--icon {
2228
+ margin-left: var(--spacing-small);
2229
+ display: inline-flex;
2230
+ align-items: center;
2231
+ }
2232
+
2233
+ .ds-dropdown-item-multiline {
2234
+ display: inline-flex;
2235
+ padding: var(--form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding);
2236
+ flex-direction: column;
2237
+ justify-content: center;
2238
+ align-items: flex-start;
2239
+ gap: var(--form-dropdown-multi-line-spacing-gap-vertical);
2240
+ }
2241
+ .ds-dropdown-item-multiline.ds-dropdown-item:focus-visible {
2242
+ outline: none;
2243
+ box-shadow: 0 0 0 3px var(--color-brand-500);
2244
+ background: var(--button-medium-secondary-default-color-background);
2245
+ }
2246
+ .ds-dropdown-item-multiline h4 {
2247
+ margin: 0;
2248
+ }
2249
+ .ds-dropdown-item-multiline--header {
2250
+ align-self: stretch;
2251
+ font-family: var(--type-body-bold-family);
2252
+ font-size: var(--type-body-bold-size);
2253
+ font-style: normal;
2254
+ font-weight: var(--type-body-bold-weight);
2255
+ line-height: 150%;
2256
+ position: relative;
2257
+ display: flex;
2258
+ justify-content: space-between;
2259
+ align-items: center;
2260
+ }
2261
+ .ds-dropdown-item-multiline--content {
2262
+ align-self: stretch;
2263
+ font-family: var(--type-body-p-family);
2264
+ font-size: var(--type-body-p-size);
2265
+ font-style: normal;
2266
+ font-weight: var(--type-body-p-weight);
2267
+ line-height: 150%;
2268
+ }
2269
+ .ds-dropdown-item-multiline--check-icon {
2270
+ position: absolute;
2271
+ right: 0;
2272
+ top: 50%;
2273
+ transform: translateY(-50%);
2274
+ width: 12px;
2275
+ height: 12px;
2276
+ }
2277
+
2278
+ .ds-slideover-manager {
2279
+ display: none;
2280
+ }
2281
+ .ds-slideover-manager--active {
2282
+ display: block;
2283
+ position: fixed;
2284
+ top: 0;
2285
+ left: 0;
2286
+ background-color: var(--slideover-overlay-color-background);
2287
+ height: 100vh;
2288
+ width: 100vw;
2289
+ }
2290
+
2291
+ .ds-slideover {
2292
+ background-color: var(--slideover-color-background);
2293
+ position: fixed;
2294
+ right: 0;
2295
+ height: 100%;
2296
+ width: 580px;
2297
+ display: flex;
2298
+ flex-direction: column;
2299
+ align-items: stretch;
2300
+ }
2301
+ .ds-slideover__header {
2302
+ background-color: var(--slideover-header-color-background);
2303
+ display: flex;
2304
+ align-items: center;
2305
+ padding: var(--slideover-header-spacing-padding);
2306
+ }
2307
+ .ds-slideover__header .ds-heading {
2308
+ flex-grow: 1;
2309
+ font-size: var(--type-headings-h2-size);
2310
+ padding: 0;
2311
+ margin: 0;
2312
+ }
2313
+ .ds-slideover__header--center .ds-heading {
2314
+ justify-content: center;
2315
+ gap: var(--slideover-header-spacing-padding);
2316
+ }
2317
+ .ds-slideover__contents {
2318
+ flex-grow: 1;
2319
+ overflow-y: scroll;
2320
+ display: flex;
2321
+ flex-direction: column;
2322
+ align-items: stretch;
2323
+ gap: var(--slideover-spacing-padding);
2324
+ padding: var(--slideover-spacing-padding);
2325
+ }
2326
+ .ds-slideover__footer {
2327
+ padding: var(--slideover-footer-spacing-vertical) var(--slideover-footer-spacing-horizontal);
2328
+ background-color: var(--slideover-footer-color-background);
2329
+ display: flex;
2330
+ align-items: center;
2331
+ align-self: stretch;
2332
+ justify-content: flex-end;
1719
2333
  }
1720
2334
 
1721
2335
  /*# sourceMappingURL=index.css.map */