@lifesg/react-design-system 4.0.0-alpha.12 → 4.0.0-alpha.13

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 (228) hide show
  1. package/breadcrumb/breadcrumb.js +1 -1
  2. package/breadcrumb/breadcrumb.js.map +1 -1
  3. package/breadcrumb/breadcrumb.styles.d.ts +0 -8
  4. package/breadcrumb/breadcrumb.styles.js +1 -1
  5. package/breadcrumb/breadcrumb.styles.js.map +1 -1
  6. package/breadcrumb/breadcrumb.styles_1blzn8n.css +7 -0
  7. package/breadcrumb/types.d.ts +2 -13
  8. package/cjs/breadcrumb/breadcrumb.js +1 -1
  9. package/cjs/breadcrumb/breadcrumb.js.map +1 -1
  10. package/cjs/breadcrumb/breadcrumb.styles.js +1 -1
  11. package/cjs/breadcrumb/breadcrumb.styles.js.map +1 -1
  12. package/cjs/breadcrumb/breadcrumb.styles_1blzn8n.css +7 -0
  13. package/cjs/drawer/drawer.js +1 -1
  14. package/cjs/drawer/drawer.js.map +1 -1
  15. package/cjs/drawer/drawer.styles.js +1 -1
  16. package/cjs/drawer/drawer.styles.js.map +1 -1
  17. package/{drawer/drawer.styles_94hx3y.css → cjs/drawer/drawer.styles_a4bwe0.css} +6 -3
  18. package/cjs/file-upload/file-list/file-list.js +1 -1
  19. package/cjs/file-upload/file-list/file-list.js.map +1 -1
  20. package/cjs/file-upload/file-list/file-list.styles.js +1 -1
  21. package/cjs/file-upload/file-list/file-list.styles.js.map +1 -1
  22. package/cjs/file-upload/file-list/file-list.styles_1xbypnh.css +2 -0
  23. package/cjs/file-upload/file-list-item/file-item-actions.js +2 -0
  24. package/cjs/file-upload/file-list-item/file-item-actions.js.map +1 -0
  25. package/cjs/file-upload/file-list-item/file-item-actions.styles.js +2 -0
  26. package/cjs/file-upload/file-list-item/file-item-actions.styles.js.map +1 -0
  27. package/cjs/file-upload/file-list-item/file-item-actions.styles_1quulgy.css +8 -0
  28. package/cjs/file-upload/file-list-item/file-item-details.js +2 -0
  29. package/cjs/file-upload/file-list-item/file-item-details.js.map +1 -0
  30. package/cjs/file-upload/file-list-item/file-item-details.styles.js +2 -0
  31. package/cjs/file-upload/file-list-item/file-item-details.styles.js.map +1 -0
  32. package/cjs/file-upload/file-list-item/file-item-details.styles_1ce9akx.css +7 -0
  33. package/cjs/file-upload/file-list-item/file-list-item.js +1 -1
  34. package/cjs/file-upload/file-list-item/file-list-item.js.map +1 -1
  35. package/cjs/file-upload/file-list-item/file-list-item.styles.js +1 -1
  36. package/cjs/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
  37. package/cjs/file-upload/file-list-item/file-list-item.styles_x3a500.css +10 -0
  38. package/cjs/file-upload/file-list-item/use-truncated-name.js +2 -0
  39. package/cjs/file-upload/file-list-item/use-truncated-name.js.map +1 -0
  40. package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js +1 -1
  41. package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map +1 -1
  42. package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js +1 -1
  43. package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map +1 -1
  44. package/cjs/local-nav/local-nav-dropdown/{local-nav-dropdown.styles_uhd4xl.css → local-nav-dropdown.styles_kpel1m.css} +9 -6
  45. package/cjs/local-nav/local-nav-menu/local-nav-menu.js +1 -1
  46. package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map +1 -1
  47. package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js +1 -1
  48. package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js.map +1 -1
  49. package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_67fcyc.css +8 -0
  50. package/cjs/menu/menu-content.js +1 -1
  51. package/cjs/menu/menu-content.js.map +1 -1
  52. package/cjs/menu/menu-content.styles.js +1 -1
  53. package/cjs/menu/menu-content.styles.js.map +1 -1
  54. package/cjs/menu/menu-content.styles_1r8oxtk.css +5 -0
  55. package/cjs/menu/menu-item.styles.js +1 -1
  56. package/cjs/menu/menu-item.styles.js.map +1 -1
  57. package/cjs/menu/{menu-item.styles_liyed8.css → menu-item.styles_eut2j9.css} +1 -1
  58. package/cjs/menu/menu-link.styles.js +1 -1
  59. package/cjs/menu/menu-link.styles.js.map +1 -1
  60. package/cjs/menu/menu-link.styles_rng7n7.css +2 -0
  61. package/cjs/menu/menu-section.js +1 -1
  62. package/cjs/menu/menu-section.js.map +1 -1
  63. package/cjs/menu/menu-section.styles.js +1 -1
  64. package/cjs/menu/menu-section.styles.js.map +1 -1
  65. package/cjs/menu/menu-section.styles_1n0ppxl.css +5 -0
  66. package/cjs/navbar/navbar-items.js +1 -1
  67. package/cjs/navbar/navbar-items.js.map +1 -1
  68. package/cjs/notification-banner/notification-banner-hoc.js +1 -1
  69. package/cjs/notification-banner/notification-banner-hoc.js.map +1 -1
  70. package/cjs/pagination/pagination.js +1 -1
  71. package/cjs/pagination/pagination.js.map +1 -1
  72. package/cjs/shared/dropdown-list/dropdown-label.js +1 -1
  73. package/cjs/shared/dropdown-list/dropdown-label.js.map +1 -1
  74. package/cjs/shared/fade-wrapper/fade-wrapper.js +1 -1
  75. package/cjs/shared/fade-wrapper/fade-wrapper.js.map +1 -1
  76. package/cjs/theme/tokens/colour.js +1 -1
  77. package/cjs/theme/tokens/colour.js.map +1 -1
  78. package/cjs/theme/tokens/radius.js +1 -1
  79. package/cjs/theme/tokens/radius.js.map +1 -1
  80. package/codemods/run-codemod.js +8 -2
  81. package/codemods/run-codemod.js.map +1 -1
  82. package/codemods/run-codemod.ts +13 -4
  83. package/drawer/drawer.d.ts +1 -1
  84. package/drawer/drawer.js +1 -1
  85. package/drawer/drawer.js.map +1 -1
  86. package/drawer/drawer.styles.d.ts +3 -0
  87. package/drawer/drawer.styles.js +1 -1
  88. package/drawer/drawer.styles.js.map +1 -1
  89. package/{cjs/drawer/drawer.styles_94hx3y.css → drawer/drawer.styles_a4bwe0.css} +6 -3
  90. package/drawer/types.d.ts +7 -0
  91. package/file-upload/file-list/file-list.js +1 -1
  92. package/file-upload/file-list/file-list.js.map +1 -1
  93. package/file-upload/file-list/file-list.styles.d.ts +0 -1
  94. package/file-upload/file-list/file-list.styles.js +1 -1
  95. package/file-upload/file-list/file-list.styles.js.map +1 -1
  96. package/file-upload/file-list/file-list.styles_1xbypnh.css +2 -0
  97. package/file-upload/file-list-item/file-item-actions.d.ts +30 -0
  98. package/file-upload/file-list-item/file-item-actions.js +2 -0
  99. package/file-upload/file-list-item/file-item-actions.js.map +1 -0
  100. package/file-upload/file-list-item/file-item-actions.styles.d.ts +6 -0
  101. package/file-upload/file-list-item/file-item-actions.styles.js +2 -0
  102. package/file-upload/file-list-item/file-item-actions.styles.js.map +1 -0
  103. package/file-upload/file-list-item/file-item-actions.styles_1quulgy.css +8 -0
  104. package/file-upload/file-list-item/file-item-details.d.ts +15 -0
  105. package/file-upload/file-list-item/file-item-details.js +2 -0
  106. package/file-upload/file-list-item/file-item-details.js.map +1 -0
  107. package/file-upload/file-list-item/file-item-details.styles.d.ts +7 -0
  108. package/file-upload/file-list-item/file-item-details.styles.js +2 -0
  109. package/file-upload/file-list-item/file-item-details.styles.js.map +1 -0
  110. package/file-upload/file-list-item/file-item-details.styles_1ce9akx.css +7 -0
  111. package/file-upload/file-list-item/file-list-item.d.ts +1 -7
  112. package/file-upload/file-list-item/file-list-item.js +1 -1
  113. package/file-upload/file-list-item/file-list-item.js.map +1 -1
  114. package/file-upload/file-list-item/file-list-item.styles.d.ts +6 -13
  115. package/file-upload/file-list-item/file-list-item.styles.js +1 -1
  116. package/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
  117. package/file-upload/file-list-item/file-list-item.styles_x3a500.css +10 -0
  118. package/file-upload/file-list-item/types.d.ts +10 -3
  119. package/file-upload/file-list-item/use-truncated-name.d.ts +1 -0
  120. package/file-upload/file-list-item/use-truncated-name.js +2 -0
  121. package/file-upload/file-list-item/use-truncated-name.js.map +1 -0
  122. package/input-group/types.d.ts +4 -1
  123. package/input-select/types.d.ts +1 -0
  124. package/local-nav/local-nav-dropdown/local-nav-dropdown.js +1 -1
  125. package/local-nav/local-nav-dropdown/local-nav-dropdown.js.map +1 -1
  126. package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.d.ts +3 -0
  127. package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js +1 -1
  128. package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map +1 -1
  129. package/local-nav/local-nav-dropdown/{local-nav-dropdown.styles_uhd4xl.css → local-nav-dropdown.styles_kpel1m.css} +9 -6
  130. package/local-nav/local-nav-menu/local-nav-menu.js +1 -1
  131. package/local-nav/local-nav-menu/local-nav-menu.js.map +1 -1
  132. package/local-nav/local-nav-menu/local-nav-menu.styles.d.ts +3 -0
  133. package/local-nav/local-nav-menu/local-nav-menu.styles.js +1 -1
  134. package/local-nav/local-nav-menu/local-nav-menu.styles.js.map +1 -1
  135. package/local-nav/local-nav-menu/local-nav-menu.styles_67fcyc.css +8 -0
  136. package/local-nav/types.d.ts +17 -0
  137. package/masked-input/types.d.ts +1 -2
  138. package/menu/menu-content.js +1 -1
  139. package/menu/menu-content.js.map +1 -1
  140. package/menu/menu-content.styles.d.ts +1 -0
  141. package/menu/menu-content.styles.js +1 -1
  142. package/menu/menu-content.styles.js.map +1 -1
  143. package/menu/menu-content.styles_1r8oxtk.css +5 -0
  144. package/menu/menu-item.styles.js +1 -1
  145. package/menu/menu-item.styles.js.map +1 -1
  146. package/menu/{menu-item.styles_liyed8.css → menu-item.styles_eut2j9.css} +1 -1
  147. package/menu/menu-link.styles.js +1 -1
  148. package/menu/menu-link.styles.js.map +1 -1
  149. package/menu/menu-link.styles_rng7n7.css +2 -0
  150. package/menu/menu-section.d.ts +1 -1
  151. package/menu/menu-section.js +1 -1
  152. package/menu/menu-section.js.map +1 -1
  153. package/menu/menu-section.styles.d.ts +7 -0
  154. package/menu/menu-section.styles.js +1 -1
  155. package/menu/menu-section.styles.js.map +1 -1
  156. package/menu/menu-section.styles_1n0ppxl.css +5 -0
  157. package/menu/menu.d.ts +1 -1
  158. package/menu/types.d.ts +10 -2
  159. package/navbar/navbar-items.js +1 -1
  160. package/navbar/navbar-items.js.map +1 -1
  161. package/navbar/types.d.ts +9 -0
  162. package/notification-banner/notification-banner-hoc.js +1 -1
  163. package/notification-banner/notification-banner-hoc.js.map +1 -1
  164. package/package.json +2 -3
  165. package/pagination/pagination.js +1 -1
  166. package/pagination/pagination.js.map +1 -1
  167. package/pagination/types.d.ts +8 -1
  168. package/select-histogram/types.d.ts +1 -0
  169. package/shared/dropdown-list/dropdown-label.d.ts +2 -2
  170. package/shared/dropdown-list/dropdown-label.js +1 -1
  171. package/shared/dropdown-list/dropdown-label.js.map +1 -1
  172. package/shared/dropdown-list/types.d.ts +6 -2
  173. package/shared/fade-wrapper/fade-wrapper.js +1 -1
  174. package/shared/fade-wrapper/fade-wrapper.js.map +1 -1
  175. package/shared/fade-wrapper/types.d.ts +1 -0
  176. package/shared/styles/index.d.ts +5 -0
  177. package/theme/styles/a11y-playground.css +52 -40
  178. package/theme/styles/bookingsg.css +52 -40
  179. package/theme/styles/careercompass.css +52 -40
  180. package/theme/styles/ccube.css +52 -40
  181. package/theme/styles/imda.css +52 -40
  182. package/theme/styles/lifesg.css +52 -40
  183. package/theme/styles/mylegacy.css +52 -40
  184. package/theme/styles/oneservice.css +52 -40
  185. package/theme/styles/pa.css +28 -22
  186. package/theme/styles/rbs.css +52 -40
  187. package/theme/styles/sgw-digital-lobby.css +52 -40
  188. package/theme/styles/smgs.css +52 -40
  189. package/theme/styles/spf.css +28 -27
  190. package/theme/styles/sportsg-orange.css +52 -40
  191. package/theme/styles/supportgowhere.css +52 -40
  192. package/theme/styles/tote-board.css +52 -40
  193. package/theme/styles/vica.css +52 -40
  194. package/theme/styles/websg.css +52 -40
  195. package/theme/styles/wise.css +52 -40
  196. package/theme/styles/wogaa.css +52 -40
  197. package/theme/tokens/colour.d.ts +6 -0
  198. package/theme/tokens/colour.js +1 -1
  199. package/theme/tokens/colour.js.map +1 -1
  200. package/theme/tokens/radius.d.ts +3 -0
  201. package/theme/tokens/radius.js +1 -1
  202. package/theme/tokens/radius.js.map +1 -1
  203. package/breadcrumb/breadcrumb.styles_1nl4aua.css +0 -18
  204. package/cjs/breadcrumb/breadcrumb.styles_1nl4aua.css +0 -18
  205. package/cjs/file-upload/file-item-edit.js +0 -2
  206. package/cjs/file-upload/file-item-edit.js.map +0 -1
  207. package/cjs/file-upload/file-item-edit.styles.js +0 -2
  208. package/cjs/file-upload/file-item-edit.styles.js.map +0 -1
  209. package/cjs/file-upload/file-item-edit.styles_19bvztn.css +0 -11
  210. package/cjs/file-upload/file-list/file-list.styles_1w7so98.css +0 -3
  211. package/cjs/file-upload/file-list-item/file-list-item.styles_kgtfke.css +0 -17
  212. package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_pq19dh.css +0 -5
  213. package/cjs/menu/menu-content.styles_p7ijll.css +0 -2
  214. package/cjs/menu/menu-link.styles_hfxoez.css +0 -2
  215. package/cjs/menu/menu-section.styles_g7my4d.css +0 -3
  216. package/file-upload/file-item-edit.d.ts +0 -14
  217. package/file-upload/file-item-edit.js +0 -2
  218. package/file-upload/file-item-edit.js.map +0 -1
  219. package/file-upload/file-item-edit.styles.d.ts +0 -9
  220. package/file-upload/file-item-edit.styles.js +0 -2
  221. package/file-upload/file-item-edit.styles.js.map +0 -1
  222. package/file-upload/file-item-edit.styles_19bvztn.css +0 -11
  223. package/file-upload/file-list/file-list.styles_1w7so98.css +0 -3
  224. package/file-upload/file-list-item/file-list-item.styles_kgtfke.css +0 -17
  225. package/local-nav/local-nav-menu/local-nav-menu.styles_pq19dh.css +0 -5
  226. package/menu/menu-content.styles_p7ijll.css +0 -2
  227. package/menu/menu-link.styles_hfxoez.css +0 -2
  228. package/menu/menu-section.styles_g7my4d.css +0 -3
package/theme/styles/smgs.css CHANGED
@@ -103,6 +103,9 @@
103
103
  --fds-radius-sm: 4px;
104
104
  --fds-radius-md: 8px;
105
105
  --fds-radius-lg: 12px;
106
+ --fds-radius-xl: 16px;
107
+ --fds-radius-xxl: 24px;
108
+ --fds-radius-xxxl: 32px;
106
109
  --fds-radius-full: 9999px;
107
110
  }
108
111
 
@@ -224,6 +227,8 @@
224
227
 
225
228
  --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
226
229
 
230
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
231
+
227
232
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
228
233
 
229
234
  --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
360
365
 
361
366
  --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
362
367
 
368
+ --fds-colour-bg-primary: var(--fds-colour-primary-50);
369
+
370
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
371
+
372
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
373
+
374
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
375
+
376
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
377
+
378
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
379
+
380
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
381
+
382
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
383
+
384
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
385
+
386
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
387
+
388
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
389
+
363
390
  --fds-colour-bg-hover: var(--fds-colour-primary-95);
364
391
 
365
392
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
430
457
 
431
458
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
432
459
 
433
- --fds-colour-bg-primary: var(--fds-colour-primary-50);
434
-
435
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
436
-
437
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
438
-
439
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
440
-
441
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
442
-
443
- --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
444
-
445
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
446
-
447
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
448
-
449
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
450
-
451
460
  --fds-colour-bg-available: #6DD0A1;
452
461
 
453
462
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -688,12 +697,13 @@
688
697
  /* text */
689
698
  --fds-colour-text: var(--fds-colour-neutral-100);
690
699
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
691
- --fds-colour-text-subtler: var(--fds-colour-neutral-60);
692
- --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
700
+ --fds-colour-text-subtler: var(--fds-colour-neutral-70);
701
+ --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
693
702
  --fds-colour-text-primary: var(--fds-colour-primary-60);
694
703
  --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
704
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
695
705
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
696
- --fds-colour-text-brand: var(--fds-colour-brand-50);
706
+ --fds-colour-text-brand: var(--fds-colour-brand-60);
697
707
  --fds-colour-text-secondary: var(--fds-colour-secondary-60);
698
708
  --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
699
709
  --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -709,13 +719,13 @@
709
719
  --fds-colour-text-info: var(--fds-colour-info-70);
710
720
  --fds-colour-text-inverse: var(--fds-colour-black);
711
721
  /* icon */
712
- --fds-colour-icon: var(--fds-colour-neutral-60);
713
- --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
714
- --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
722
+ --fds-colour-icon: var(--fds-colour-neutral-70);
723
+ --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
724
+ --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
715
725
  --fds-colour-icon-primary: var(--fds-colour-primary-60);
716
726
  --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
717
727
  --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
718
- --fds-colour-icon-brand: var(--fds-colour-brand-50);
728
+ --fds-colour-icon-brand: var(--fds-colour-brand-60);
719
729
  --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
720
730
  --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
721
731
  --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -725,15 +735,15 @@
725
735
  --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
726
736
  --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
727
737
  --fds-colour-icon-success: var(--fds-colour-success-60);
728
- --fds-colour-icon-warning: var(--fds-colour-warning-50);
738
+ --fds-colour-icon-warning: var(--fds-colour-warning-70);
729
739
  --fds-colour-icon-error: var(--fds-colour-error-60);
730
740
  --fds-colour-icon-error-strong: var(--fds-colour-error-70);
731
741
  --fds-colour-icon-info: var(--fds-colour-info-60);
732
742
  --fds-colour-icon-inverse: var(--fds-colour-black);
733
743
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
734
744
  /* border - adjusted for dark mode */
735
- --fds-colour-border: var(--fds-colour-neutral-20);
736
- --fds-colour-border-strong: var(--fds-colour-neutral-40);
745
+ --fds-colour-border: var(--fds-colour-neutral-40);
746
+ --fds-colour-border-strong: var(--fds-colour-neutral-50);
737
747
  --fds-colour-border-stronger: var(--fds-colour-neutral-60);
738
748
  --fds-colour-border-primary: var(--fds-colour-primary-60);
739
749
  --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -759,7 +769,18 @@
759
769
  --fds-colour-bg: var(--fds-colour-black);
760
770
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
761
771
  --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
762
- --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
772
+ --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
773
+ --fds-colour-bg-primary: var(--fds-colour-primary-60);
774
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
775
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
776
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
777
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
778
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
779
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
780
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
781
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
782
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
783
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
763
784
  --fds-colour-bg-hover: var(--fds-colour-primary-20);
764
785
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
765
786
  --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -780,8 +801,8 @@
780
801
  --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
781
802
  --fds-colour-bg-warning: var(--fds-colour-warning-10);
782
803
  --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
783
- --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
784
- --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
804
+ --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
805
+ --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
785
806
  --fds-colour-bg-info: var(--fds-colour-info-10);
786
807
  --fds-colour-bg-info-hover: var(--fds-colour-info-20);
787
808
  --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -795,16 +816,7 @@
795
816
  --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
796
817
  --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
797
818
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
798
- --fds-colour-bg-primary: var(--fds-colour-primary-60);
799
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
800
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
801
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
802
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
803
819
  --fds-colour-bg-available: #185339;
804
- --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
805
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
806
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
807
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
808
820
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
809
821
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
810
822
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
package/theme/styles/spf.css CHANGED
@@ -103,6 +103,9 @@
103
103
  --fds-radius-sm: 4px;
104
104
  --fds-radius-md: 8px;
105
105
  --fds-radius-lg: 12px;
106
+ --fds-radius-xl: 16px;
107
+ --fds-radius-xxl: 24px;
108
+ --fds-radius-xxxl: 32px;
106
109
  --fds-radius-full: 9999px;
107
110
  }
108
111
 
@@ -406,12 +409,7 @@
406
409
  RADIUS
407
410
  ============================================================================
408
411
  */
409
- --fds-radius-none: 0;
410
- --fds-radius-xs: 2px;
411
412
  --fds-radius-sm: 8px;
412
- --fds-radius-md: 8px;
413
- --fds-radius-lg: 12px;
414
- --fds-radius-full: 9999px;
415
413
 
416
414
  /*
417
415
  ============================================================================
@@ -503,12 +501,13 @@
503
501
  /* text */
504
502
  --fds-colour-text: var(--fds-colour-neutral-100);
505
503
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
506
- --fds-colour-text-subtler: var(--fds-colour-neutral-60);
507
- --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
504
+ --fds-colour-text-subtler: var(--fds-colour-neutral-70);
505
+ --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
508
506
  --fds-colour-text-primary: var(--fds-colour-primary-60);
509
507
  --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
508
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
510
509
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
511
- --fds-colour-text-brand: var(--fds-colour-brand-50);
510
+ --fds-colour-text-brand: var(--fds-colour-brand-60);
512
511
  --fds-colour-text-secondary: var(--fds-colour-secondary-60);
513
512
  --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
514
513
  --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -524,13 +523,13 @@
524
523
  --fds-colour-text-info: var(--fds-colour-info-70);
525
524
  --fds-colour-text-inverse: var(--fds-colour-black);
526
525
  /* icon */
527
- --fds-colour-icon: var(--fds-colour-neutral-60);
528
- --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
529
- --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
526
+ --fds-colour-icon: var(--fds-colour-neutral-70);
527
+ --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
528
+ --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
530
529
  --fds-colour-icon-primary: var(--fds-colour-primary-60);
531
530
  --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
532
531
  --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
533
- --fds-colour-icon-brand: var(--fds-colour-brand-50);
532
+ --fds-colour-icon-brand: var(--fds-colour-brand-60);
534
533
  --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
535
534
  --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
536
535
  --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -540,15 +539,15 @@
540
539
  --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
541
540
  --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
542
541
  --fds-colour-icon-success: var(--fds-colour-success-60);
543
- --fds-colour-icon-warning: var(--fds-colour-warning-50);
542
+ --fds-colour-icon-warning: var(--fds-colour-warning-70);
544
543
  --fds-colour-icon-error: var(--fds-colour-error-60);
545
544
  --fds-colour-icon-error-strong: var(--fds-colour-error-70);
546
545
  --fds-colour-icon-info: var(--fds-colour-info-60);
547
546
  --fds-colour-icon-inverse: var(--fds-colour-black);
548
547
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
549
548
  /* border - adjusted for dark mode */
550
- --fds-colour-border: var(--fds-colour-neutral-20);
551
- --fds-colour-border-strong: var(--fds-colour-neutral-40);
549
+ --fds-colour-border: var(--fds-colour-neutral-40);
550
+ --fds-colour-border-strong: var(--fds-colour-neutral-50);
552
551
  --fds-colour-border-stronger: var(--fds-colour-neutral-60);
553
552
  --fds-colour-border-primary: var(--fds-colour-primary-60);
554
553
  --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -574,7 +573,18 @@
574
573
  --fds-colour-bg: var(--fds-colour-black);
575
574
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
576
575
  --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
577
- --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
576
+ --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
577
+ --fds-colour-bg-primary: var(--fds-colour-primary-60);
578
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
579
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
580
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
581
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
582
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
583
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
584
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
585
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
586
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
587
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
578
588
  --fds-colour-bg-hover: var(--fds-colour-primary-20);
579
589
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
580
590
  --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -595,8 +605,8 @@
595
605
  --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
596
606
  --fds-colour-bg-warning: var(--fds-colour-warning-10);
597
607
  --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
598
- --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
599
- --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
608
+ --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
609
+ --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
600
610
  --fds-colour-bg-info: var(--fds-colour-info-10);
601
611
  --fds-colour-bg-info-hover: var(--fds-colour-info-20);
602
612
  --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -610,16 +620,7 @@
610
620
  --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
611
621
  --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
612
622
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
613
- --fds-colour-bg-primary: var(--fds-colour-primary-60);
614
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
615
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
616
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
617
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
618
623
  --fds-colour-bg-available: #185339;
619
- --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
620
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
621
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
622
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
623
624
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
624
625
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
625
626
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
package/theme/styles/sportsg-orange.css CHANGED
@@ -103,6 +103,9 @@
103
103
  --fds-radius-sm: 4px;
104
104
  --fds-radius-md: 8px;
105
105
  --fds-radius-lg: 12px;
106
+ --fds-radius-xl: 16px;
107
+ --fds-radius-xxl: 24px;
108
+ --fds-radius-xxxl: 32px;
106
109
  --fds-radius-full: 9999px;
107
110
  }
108
111
 
@@ -224,6 +227,8 @@
224
227
 
225
228
  --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
226
229
 
230
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
231
+
227
232
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
228
233
 
229
234
  --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
360
365
 
361
366
  --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
362
367
 
368
+ --fds-colour-bg-primary: var(--fds-colour-primary-50);
369
+
370
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
371
+
372
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
373
+
374
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
375
+
376
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
377
+
378
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
379
+
380
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
381
+
382
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
383
+
384
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
385
+
386
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
387
+
388
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
389
+
363
390
  --fds-colour-bg-hover: var(--fds-colour-primary-95);
364
391
 
365
392
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
430
457
 
431
458
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
432
459
 
433
- --fds-colour-bg-primary: var(--fds-colour-primary-50);
434
-
435
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
436
-
437
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
438
-
439
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
440
-
441
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
442
-
443
- --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
444
-
445
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
446
-
447
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
448
-
449
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
450
-
451
460
  --fds-colour-bg-available: #6DD0A1;
452
461
 
453
462
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -596,12 +605,13 @@
596
605
  /* text */
597
606
  --fds-colour-text: var(--fds-colour-neutral-100);
598
607
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
599
- --fds-colour-text-subtler: var(--fds-colour-neutral-60);
600
- --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
608
+ --fds-colour-text-subtler: var(--fds-colour-neutral-70);
609
+ --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
601
610
  --fds-colour-text-primary: var(--fds-colour-primary-60);
602
611
  --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
612
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
603
613
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
604
- --fds-colour-text-brand: var(--fds-colour-brand-50);
614
+ --fds-colour-text-brand: var(--fds-colour-brand-60);
605
615
  --fds-colour-text-secondary: var(--fds-colour-secondary-60);
606
616
  --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
607
617
  --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -617,13 +627,13 @@
617
627
  --fds-colour-text-info: var(--fds-colour-info-70);
618
628
  --fds-colour-text-inverse: var(--fds-colour-black);
619
629
  /* icon */
620
- --fds-colour-icon: var(--fds-colour-neutral-60);
621
- --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
622
- --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
630
+ --fds-colour-icon: var(--fds-colour-neutral-70);
631
+ --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
632
+ --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
623
633
  --fds-colour-icon-primary: var(--fds-colour-primary-60);
624
634
  --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
625
635
  --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
626
- --fds-colour-icon-brand: var(--fds-colour-brand-50);
636
+ --fds-colour-icon-brand: var(--fds-colour-brand-60);
627
637
  --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
628
638
  --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
629
639
  --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -633,15 +643,15 @@
633
643
  --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
634
644
  --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
635
645
  --fds-colour-icon-success: var(--fds-colour-success-60);
636
- --fds-colour-icon-warning: var(--fds-colour-warning-50);
646
+ --fds-colour-icon-warning: var(--fds-colour-warning-70);
637
647
  --fds-colour-icon-error: var(--fds-colour-error-60);
638
648
  --fds-colour-icon-error-strong: var(--fds-colour-error-70);
639
649
  --fds-colour-icon-info: var(--fds-colour-info-60);
640
650
  --fds-colour-icon-inverse: var(--fds-colour-black);
641
651
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
642
652
  /* border - adjusted for dark mode */
643
- --fds-colour-border: var(--fds-colour-neutral-20);
644
- --fds-colour-border-strong: var(--fds-colour-neutral-40);
653
+ --fds-colour-border: var(--fds-colour-neutral-40);
654
+ --fds-colour-border-strong: var(--fds-colour-neutral-50);
645
655
  --fds-colour-border-stronger: var(--fds-colour-neutral-60);
646
656
  --fds-colour-border-primary: var(--fds-colour-primary-60);
647
657
  --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -667,7 +677,18 @@
667
677
  --fds-colour-bg: var(--fds-colour-black);
668
678
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
669
679
  --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
670
- --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
680
+ --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
681
+ --fds-colour-bg-primary: var(--fds-colour-primary-60);
682
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
683
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
684
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
685
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
686
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
687
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
688
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
689
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
690
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
691
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
671
692
  --fds-colour-bg-hover: var(--fds-colour-primary-20);
672
693
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
673
694
  --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -688,8 +709,8 @@
688
709
  --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
689
710
  --fds-colour-bg-warning: var(--fds-colour-warning-10);
690
711
  --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
691
- --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
692
- --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
712
+ --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
713
+ --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
693
714
  --fds-colour-bg-info: var(--fds-colour-info-10);
694
715
  --fds-colour-bg-info-hover: var(--fds-colour-info-20);
695
716
  --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -703,16 +724,7 @@
703
724
  --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
704
725
  --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
705
726
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
706
- --fds-colour-bg-primary: var(--fds-colour-primary-60);
707
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
708
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
709
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
710
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
711
727
  --fds-colour-bg-available: #185339;
712
- --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
713
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
714
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
715
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
716
728
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
717
729
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
718
730
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
package/theme/styles/supportgowhere.css CHANGED
@@ -103,6 +103,9 @@
103
103
  --fds-radius-sm: 4px;
104
104
  --fds-radius-md: 8px;
105
105
  --fds-radius-lg: 12px;
106
+ --fds-radius-xl: 16px;
107
+ --fds-radius-xxl: 24px;
108
+ --fds-radius-xxxl: 32px;
106
109
  --fds-radius-full: 9999px;
107
110
  }
108
111
 
@@ -224,6 +227,8 @@
224
227
 
225
228
  --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
226
229
 
230
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
231
+
227
232
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
228
233
 
229
234
  --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
360
365
 
361
366
  --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
362
367
 
368
+ --fds-colour-bg-primary: var(--fds-colour-primary-50);
369
+
370
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
371
+
372
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
373
+
374
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
375
+
376
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
377
+
378
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
379
+
380
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
381
+
382
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
383
+
384
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
385
+
386
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
387
+
388
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
389
+
363
390
  --fds-colour-bg-hover: var(--fds-colour-primary-95);
364
391
 
365
392
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
430
457
 
431
458
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
432
459
 
433
- --fds-colour-bg-primary: var(--fds-colour-primary-50);
434
-
435
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
436
-
437
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
438
-
439
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
440
-
441
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
442
-
443
- --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
444
-
445
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
446
-
447
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
448
-
449
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
450
-
451
460
  --fds-colour-bg-available: #6DD0A1;
452
461
 
453
462
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -679,12 +688,13 @@
679
688
  /* text */
680
689
  --fds-colour-text: var(--fds-colour-neutral-100);
681
690
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
682
- --fds-colour-text-subtler: var(--fds-colour-neutral-60);
683
- --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
691
+ --fds-colour-text-subtler: var(--fds-colour-neutral-70);
692
+ --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
684
693
  --fds-colour-text-primary: var(--fds-colour-primary-60);
685
694
  --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
695
+ --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
686
696
  --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
687
- --fds-colour-text-brand: var(--fds-colour-brand-50);
697
+ --fds-colour-text-brand: var(--fds-colour-brand-60);
688
698
  --fds-colour-text-secondary: var(--fds-colour-secondary-60);
689
699
  --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
690
700
  --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -700,13 +710,13 @@
700
710
  --fds-colour-text-info: var(--fds-colour-info-70);
701
711
  --fds-colour-text-inverse: var(--fds-colour-black);
702
712
  /* icon */
703
- --fds-colour-icon: var(--fds-colour-neutral-60);
704
- --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
705
- --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
713
+ --fds-colour-icon: var(--fds-colour-neutral-70);
714
+ --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
715
+ --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
706
716
  --fds-colour-icon-primary: var(--fds-colour-primary-60);
707
717
  --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
708
718
  --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
709
- --fds-colour-icon-brand: var(--fds-colour-brand-50);
719
+ --fds-colour-icon-brand: var(--fds-colour-brand-60);
710
720
  --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
711
721
  --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
712
722
  --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -716,15 +726,15 @@
716
726
  --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
717
727
  --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
718
728
  --fds-colour-icon-success: var(--fds-colour-success-60);
719
- --fds-colour-icon-warning: var(--fds-colour-warning-50);
729
+ --fds-colour-icon-warning: var(--fds-colour-warning-70);
720
730
  --fds-colour-icon-error: var(--fds-colour-error-60);
721
731
  --fds-colour-icon-error-strong: var(--fds-colour-error-70);
722
732
  --fds-colour-icon-info: var(--fds-colour-info-60);
723
733
  --fds-colour-icon-inverse: var(--fds-colour-black);
724
734
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
725
735
  /* border - adjusted for dark mode */
726
- --fds-colour-border: var(--fds-colour-neutral-20);
727
- --fds-colour-border-strong: var(--fds-colour-neutral-40);
736
+ --fds-colour-border: var(--fds-colour-neutral-40);
737
+ --fds-colour-border-strong: var(--fds-colour-neutral-50);
728
738
  --fds-colour-border-stronger: var(--fds-colour-neutral-60);
729
739
  --fds-colour-border-primary: var(--fds-colour-primary-60);
730
740
  --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -750,7 +760,18 @@
750
760
  --fds-colour-bg: var(--fds-colour-black);
751
761
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
752
762
  --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
753
- --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
763
+ --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
764
+ --fds-colour-bg-primary: var(--fds-colour-primary-60);
765
+ --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
766
+ --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
767
+ --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
768
+ --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
769
+ --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
770
+ --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
771
+ --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
772
+ --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
773
+ --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
774
+ --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
754
775
  --fds-colour-bg-hover: var(--fds-colour-primary-20);
755
776
  --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
756
777
  --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -771,8 +792,8 @@
771
792
  --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
772
793
  --fds-colour-bg-warning: var(--fds-colour-warning-10);
773
794
  --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
774
- --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
775
- --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
795
+ --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
796
+ --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
776
797
  --fds-colour-bg-info: var(--fds-colour-info-10);
777
798
  --fds-colour-bg-info-hover: var(--fds-colour-info-20);
778
799
  --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -786,16 +807,7 @@
786
807
  --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
787
808
  --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
788
809
  --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
789
- --fds-colour-bg-primary: var(--fds-colour-primary-60);
790
- --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
791
- --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
792
- --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
793
- --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
794
810
  --fds-colour-bg-available: #185339;
795
- --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
796
- --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
797
- --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
798
- --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
799
811
  --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
800
812
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
801
813
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);