@lifesg/react-design-system 4.0.0-alpha.7 → 4.0.0-alpha.9

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 (268) hide show
  1. package/accordion/accordion-item.js.map +1 -1
  2. package/accordion/accordion.js.map +1 -1
  3. package/alert/alert.js.map +1 -1
  4. package/button/button.js +1 -1
  5. package/button/button.js.map +1 -1
  6. package/button/button.styles.d.ts +1 -0
  7. package/button/button.styles.js +1 -1
  8. package/button/button.styles.js.map +1 -1
  9. package/button/button.styles_19i4dfq.css +21 -0
  10. package/cjs/accordion/accordion-item.js.map +1 -1
  11. package/cjs/accordion/accordion.js.map +1 -1
  12. package/cjs/alert/alert.js.map +1 -1
  13. package/cjs/button/button.js +1 -1
  14. package/cjs/button/button.js.map +1 -1
  15. package/cjs/button/button.styles.js +1 -1
  16. package/cjs/button/button.styles.js.map +1 -1
  17. package/cjs/button/button.styles_19i4dfq.css +21 -0
  18. package/cjs/countdown-timer/countdown-timer.js.map +1 -1
  19. package/cjs/data-table/data-table.js +1 -1
  20. package/cjs/data-table/data-table.js.map +1 -1
  21. package/cjs/data-table/data-table.styles.js +1 -1
  22. package/cjs/data-table/data-table.styles.js.map +1 -1
  23. package/{data-table/data-table.styles_rxganh.css → cjs/data-table/data-table.styles_1tnlmhe.css} +7 -6
  24. package/cjs/date-range-input/date-range-input.js.map +1 -1
  25. package/cjs/e-signature/e-signature-canvas.js.map +1 -1
  26. package/cjs/error-display/error-display-data.js +1 -1
  27. package/cjs/error-display/error-display-data.js.map +1 -1
  28. package/cjs/error-display/inactivity-timer.js.map +1 -1
  29. package/cjs/external/dompurify/dist/purify.es.js +2 -2
  30. package/cjs/external/dompurify/dist/purify.es.js.map +1 -1
  31. package/cjs/file-download/file-list-card/file-list-card.js.map +1 -1
  32. package/cjs/file-upload/custom-sensors.js.map +1 -1
  33. package/cjs/file-upload/file-list/file-list.js.map +1 -1
  34. package/cjs/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
  35. package/cjs/filter/addons/filter-item-checkbox.js.map +1 -1
  36. package/cjs/filter/addons/filter-item-checkbox.styles.js +1 -1
  37. package/cjs/filter/addons/filter-item-checkbox.styles.js.map +1 -1
  38. package/{filter/addons/filter-item-checkbox.styles_7degw7.css → cjs/filter/addons/filter-item-checkbox.styles_6nbpdl.css} +1 -1
  39. package/cjs/filter/filter-item.js.map +1 -1
  40. package/cjs/filter/filter-item.styles.js +1 -1
  41. package/cjs/filter/filter-item.styles.js.map +1 -1
  42. package/cjs/filter/{filter-item.styles_cphjnj.css → filter-item.styles_1yixp8h.css} +1 -1
  43. package/cjs/filter/filter-modal.styles.js +1 -1
  44. package/cjs/filter/filter-modal.styles.js.map +1 -1
  45. package/{filter/filter-modal.styles_qw3xlg.css → cjs/filter/filter-modal.styles_kuth21.css} +1 -1
  46. package/cjs/filter/filter-sidebar.styles.js +1 -1
  47. package/cjs/filter/filter-sidebar.styles.js.map +1 -1
  48. package/cjs/filter/{filter-sidebar.styles_1otwpjl.css → filter-sidebar.styles_rbfq4f.css} +1 -1
  49. package/cjs/filter/filter.js.map +1 -1
  50. package/cjs/form/form-textarea/form-textarea.js +1 -1
  51. package/cjs/form/form-textarea/form-textarea.js.map +1 -1
  52. package/cjs/fullscreen-image-carousel/stateful-image.js.map +1 -1
  53. package/cjs/histogram-slider/histogram-slider.js.map +1 -1
  54. package/cjs/input-range-slider/input-range-slider.js.map +1 -1
  55. package/cjs/input-slider/input-slider.js.map +1 -1
  56. package/cjs/input-textarea/textarea-counter.js.map +1 -1
  57. package/cjs/input-textarea/textarea.js +1 -1
  58. package/cjs/input-textarea/textarea.js.map +1 -1
  59. package/cjs/input-textarea/textarea.styles.js +1 -1
  60. package/cjs/input-textarea/textarea.styles.js.map +1 -1
  61. package/cjs/input-textarea/{textarea.styles_q77m5x.css → textarea.styles_6we7bs.css} +3 -1
  62. package/cjs/modal/index.js.map +1 -1
  63. package/cjs/modal-v2/modal-v2.js +1 -1
  64. package/cjs/modal-v2/modal-v2.js.map +1 -1
  65. package/cjs/modal-v2/slots/card.js +1 -1
  66. package/cjs/modal-v2/slots/card.js.map +1 -1
  67. package/cjs/modal-v2/slots/header.js +2 -0
  68. package/cjs/modal-v2/slots/header.js.map +1 -0
  69. package/cjs/modal-v2/slots/slot-styles.js +1 -1
  70. package/cjs/modal-v2/slots/slot-styles.js.map +1 -1
  71. package/cjs/modal-v2/slots/{slot-styles_13sd376.css → slot-styles_10ut1v7.css} +5 -1
  72. package/cjs/navbar/navbar-items.js +1 -1
  73. package/cjs/navbar/navbar-items.js.map +1 -1
  74. package/cjs/navbar/navbar-items.styles.js +1 -1
  75. package/cjs/navbar/navbar-items.styles.js.map +1 -1
  76. package/cjs/navbar/{navbar-items.styles_1i3ltot.css → navbar-items.styles_1b1zx.css} +9 -8
  77. package/cjs/navbar/navbar-logo-data.js +1 -1
  78. package/cjs/navbar/navbar-logo-data.js.map +1 -1
  79. package/cjs/navbar/navbar.js.map +1 -1
  80. package/cjs/otp-input/otp-input.js.map +1 -1
  81. package/cjs/overlay/overlay.js.map +1 -1
  82. package/cjs/pagination/pagination.js.map +1 -1
  83. package/cjs/phone-number-input/phone-number-input.js.map +1 -1
  84. package/cjs/predictive-text-input/predictive-text-input.js.map +1 -1
  85. package/cjs/shared/dropdown-list/dropdown-list.js.map +1 -1
  86. package/cjs/shared/internal-calendar/calendar-manager.js.map +1 -1
  87. package/cjs/shared/standalone-date-input/standalone-date-input.js.map +1 -1
  88. package/cjs/singpass-button/singpass-button.styles.js +1 -1
  89. package/cjs/singpass-button/singpass-button.styles.js.map +1 -1
  90. package/cjs/singpass-button/{singpass-button.styles_1miyex3.css → singpass-button.styles_1fj2lru.css} +1 -1
  91. package/cjs/smart-app-banner/smart-app-banner.styles.js +1 -1
  92. package/cjs/smart-app-banner/smart-app-banner.styles.js.map +1 -1
  93. package/cjs/smart-app-banner/{smart-app-banner.styles_15u6yv4.css → smart-app-banner.styles_r6yjq9.css} +1 -1
  94. package/cjs/theme/types.js +1 -1
  95. package/cjs/theme/types.js.map +1 -1
  96. package/cjs/time-slot-bar/time-slot-bar.js.map +1 -1
  97. package/cjs/time-slot-bar-week/time-slot-bar-week-days.js.map +1 -1
  98. package/cjs/timetable/timetable.js.map +1 -1
  99. package/cjs/toast/toast.styles.js +1 -1
  100. package/cjs/toast/toast.styles.js.map +1 -1
  101. package/{toast/toast.styles_1e0l60w.css → cjs/toast/toast.styles_57j3lf.css} +1 -1
  102. package/cjs/toggle/toggle-icon.js +1 -1
  103. package/cjs/toggle/toggle-icon.js.map +1 -1
  104. package/cjs/toggle/toggle-icon.styles.js +1 -1
  105. package/cjs/toggle/toggle-icon.styles.js.map +1 -1
  106. package/cjs/toggle/{toggle-icon.styles_ba71y.css → toggle-icon.styles_o6dxr3.css} +3 -2
  107. package/cjs/toggle/toggle.js +1 -1
  108. package/cjs/toggle/toggle.js.map +1 -1
  109. package/cjs/toggle/toggle.styles.js +1 -1
  110. package/cjs/toggle/toggle.styles.js.map +1 -1
  111. package/cjs/toggle/toggle.styles_11tmfsr.css +41 -0
  112. package/cjs/unit-number/unit-number-input.js.map +1 -1
  113. package/cjs/util/is-styled-components.js.map +1 -1
  114. package/cjs/util/string-helper.js +1 -1
  115. package/cjs/util/string-helper.js.map +1 -1
  116. package/cjs/util/use-event-listener.js.map +1 -1
  117. package/cjs/util/use-state-actions.js.map +1 -1
  118. package/countdown-timer/countdown-timer.js.map +1 -1
  119. package/data-table/data-table.d.ts +1 -1
  120. package/data-table/data-table.js +1 -1
  121. package/data-table/data-table.js.map +1 -1
  122. package/data-table/data-table.styles.d.ts +1 -0
  123. package/data-table/data-table.styles.js +1 -1
  124. package/data-table/data-table.styles.js.map +1 -1
  125. package/{cjs/data-table/data-table.styles_rxganh.css → data-table/data-table.styles_1tnlmhe.css} +7 -6
  126. package/data-table/types.d.ts +4 -2
  127. package/date-range-input/date-range-input.js.map +1 -1
  128. package/docs/component-catalog.json +1 -1
  129. package/e-signature/e-signature-canvas.js.map +1 -1
  130. package/error-display/error-display-data.js +1 -1
  131. package/error-display/error-display-data.js.map +1 -1
  132. package/error-display/inactivity-timer.js.map +1 -1
  133. package/external/dompurify/dist/purify.es.js +2 -2
  134. package/external/dompurify/dist/purify.es.js.map +1 -1
  135. package/file-download/file-list-card/file-list-card.js.map +1 -1
  136. package/file-upload/custom-sensors.d.ts +2 -2
  137. package/file-upload/custom-sensors.js.map +1 -1
  138. package/file-upload/file-list/file-list.js.map +1 -1
  139. package/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
  140. package/filter/addons/filter-item-checkbox.js.map +1 -1
  141. package/filter/addons/filter-item-checkbox.styles.js +1 -1
  142. package/filter/addons/filter-item-checkbox.styles.js.map +1 -1
  143. package/{cjs/filter/addons/filter-item-checkbox.styles_7degw7.css → filter/addons/filter-item-checkbox.styles_6nbpdl.css} +1 -1
  144. package/filter/filter-item.js.map +1 -1
  145. package/filter/filter-item.styles.js +1 -1
  146. package/filter/filter-item.styles.js.map +1 -1
  147. package/filter/{filter-item.styles_cphjnj.css → filter-item.styles_1yixp8h.css} +1 -1
  148. package/filter/filter-modal.styles.js +1 -1
  149. package/filter/filter-modal.styles.js.map +1 -1
  150. package/{cjs/filter/filter-modal.styles_qw3xlg.css → filter/filter-modal.styles_kuth21.css} +1 -1
  151. package/filter/filter-sidebar.styles.js +1 -1
  152. package/filter/filter-sidebar.styles.js.map +1 -1
  153. package/filter/{filter-sidebar.styles_1otwpjl.css → filter-sidebar.styles_rbfq4f.css} +1 -1
  154. package/filter/filter.js.map +1 -1
  155. package/form/form-textarea/form-textarea.js +1 -1
  156. package/form/form-textarea/form-textarea.js.map +1 -1
  157. package/fullscreen-image-carousel/stateful-image.js.map +1 -1
  158. package/fullscreen-image-carousel/types.d.ts +2 -2
  159. package/histogram-slider/histogram-slider.js.map +1 -1
  160. package/input-range-slider/input-range-slider.js.map +1 -1
  161. package/input-slider/input-slider.js.map +1 -1
  162. package/input-textarea/textarea-counter.js.map +1 -1
  163. package/input-textarea/textarea.js +1 -1
  164. package/input-textarea/textarea.js.map +1 -1
  165. package/input-textarea/textarea.styles.d.ts +2 -0
  166. package/input-textarea/textarea.styles.js +1 -1
  167. package/input-textarea/textarea.styles.js.map +1 -1
  168. package/input-textarea/{textarea.styles_q77m5x.css → textarea.styles_6we7bs.css} +3 -1
  169. package/input-textarea/types.d.ts +7 -0
  170. package/modal/index.d.ts +4 -0
  171. package/modal/index.js.map +1 -1
  172. package/modal/types.d.ts +2 -0
  173. package/modal-v2/modal-v2.d.ts +6 -0
  174. package/modal-v2/modal-v2.js +1 -1
  175. package/modal-v2/modal-v2.js.map +1 -1
  176. package/modal-v2/slots/card.js +1 -1
  177. package/modal-v2/slots/card.js.map +1 -1
  178. package/modal-v2/slots/header.d.ts +5 -0
  179. package/modal-v2/slots/header.js +2 -0
  180. package/modal-v2/slots/header.js.map +1 -0
  181. package/modal-v2/slots/index.d.ts +1 -0
  182. package/modal-v2/slots/slot-styles.d.ts +4 -0
  183. package/modal-v2/slots/slot-styles.js +1 -1
  184. package/modal-v2/slots/slot-styles.js.map +1 -1
  185. package/modal-v2/slots/{slot-styles_13sd376.css → slot-styles_10ut1v7.css} +5 -1
  186. package/modal-v2/types.d.ts +21 -0
  187. package/navbar/navbar-items.js +1 -1
  188. package/navbar/navbar-items.js.map +1 -1
  189. package/navbar/navbar-items.styles.d.ts +2 -1
  190. package/navbar/navbar-items.styles.js +1 -1
  191. package/navbar/navbar-items.styles.js.map +1 -1
  192. package/navbar/{navbar-items.styles_1i3ltot.css → navbar-items.styles_1b1zx.css} +9 -8
  193. package/navbar/navbar-logo-data.js +1 -1
  194. package/navbar/navbar-logo-data.js.map +1 -1
  195. package/navbar/navbar.js.map +1 -1
  196. package/otp-input/otp-input.js.map +1 -1
  197. package/overlay/overlay.js.map +1 -1
  198. package/package.json +1 -1
  199. package/pagination/pagination.js.map +1 -1
  200. package/phone-number-input/phone-number-input.js.map +1 -1
  201. package/predictive-text-input/predictive-text-input.js.map +1 -1
  202. package/shared/dropdown-list/dropdown-list.js.map +1 -1
  203. package/shared/internal-calendar/calendar-manager.js.map +1 -1
  204. package/shared/standalone-date-input/standalone-date-input.js.map +1 -1
  205. package/singpass-button/singpass-button.styles.js +1 -1
  206. package/singpass-button/singpass-button.styles.js.map +1 -1
  207. package/singpass-button/{singpass-button.styles_1miyex3.css → singpass-button.styles_1fj2lru.css} +1 -1
  208. package/smart-app-banner/smart-app-banner.styles.js +1 -1
  209. package/smart-app-banner/smart-app-banner.styles.js.map +1 -1
  210. package/smart-app-banner/{smart-app-banner.styles_15u6yv4.css → smart-app-banner.styles_r6yjq9.css} +1 -1
  211. package/theme/styles/a11y-playground.css +358 -87
  212. package/theme/styles/bookingsg.css +391 -85
  213. package/theme/styles/careercompass.css +396 -90
  214. package/theme/styles/ccube.css +402 -45
  215. package/theme/styles/imda.css +348 -85
  216. package/theme/styles/lifesg.css +377 -87
  217. package/theme/styles/mylegacy.css +382 -85
  218. package/theme/styles/oneservice.css +349 -86
  219. package/theme/styles/pa.css +172 -104
  220. package/theme/styles/rbs.css +403 -46
  221. package/theme/styles/sgw-digital-lobby.css +352 -87
  222. package/theme/styles/smgs.css +401 -95
  223. package/theme/styles/spf.css +208 -99
  224. package/theme/styles/supportgowhere.css +387 -90
  225. package/theme/styles/tote-board.css +816 -0
  226. package/theme/types.d.ts +1 -1
  227. package/theme/types.js +1 -1
  228. package/theme/types.js.map +1 -1
  229. package/time-slot-bar/time-slot-bar.js.map +1 -1
  230. package/time-slot-bar-week/time-slot-bar-week-days.js.map +1 -1
  231. package/timetable/timetable.js.map +1 -1
  232. package/toast/toast.styles.js +1 -1
  233. package/toast/toast.styles.js.map +1 -1
  234. package/{cjs/toast/toast.styles_1e0l60w.css → toast/toast.styles_57j3lf.css} +1 -1
  235. package/toggle/toggle-icon.d.ts +2 -1
  236. package/toggle/toggle-icon.js +1 -1
  237. package/toggle/toggle-icon.js.map +1 -1
  238. package/toggle/toggle-icon.styles.d.ts +1 -0
  239. package/toggle/toggle-icon.styles.js +1 -1
  240. package/toggle/toggle-icon.styles.js.map +1 -1
  241. package/toggle/{toggle-icon.styles_ba71y.css → toggle-icon.styles_o6dxr3.css} +3 -2
  242. package/toggle/toggle.js +1 -1
  243. package/toggle/toggle.js.map +1 -1
  244. package/toggle/toggle.styles.d.ts +18 -15
  245. package/toggle/toggle.styles.js +1 -1
  246. package/toggle/toggle.styles.js.map +1 -1
  247. package/toggle/toggle.styles_11tmfsr.css +41 -0
  248. package/tools/storybook-argtypes/services/arg-types-row-builder.d.ts +6 -0
  249. package/tools/storybook-argtypes/types.d.ts +13 -1
  250. package/unit-number/unit-number-input.js.map +1 -1
  251. package/util/is-styled-components.js.map +1 -1
  252. package/util/string-helper.d.ts +2 -2
  253. package/util/string-helper.js +1 -1
  254. package/util/string-helper.js.map +1 -1
  255. package/util/use-event-listener.js.map +1 -1
  256. package/util/use-state-actions.js.map +1 -1
  257. package/button/button.styles_1pxy0co.css +0 -20
  258. package/cjs/button/button.styles_1pxy0co.css +0 -20
  259. package/cjs/form/form-textarea/form-textarea.styles.js +0 -2
  260. package/cjs/form/form-textarea/form-textarea.styles.js.map +0 -1
  261. package/cjs/form/form-textarea/form-textarea.styles_1kneyif.css +0 -3
  262. package/cjs/toggle/toggle.styles_1t5qrye.css +0 -38
  263. package/form/form-textarea/form-textarea.styles.d.ts +0 -3
  264. package/form/form-textarea/form-textarea.styles.js +0 -2
  265. package/form/form-textarea/form-textarea.styles.js.map +0 -1
  266. package/form/form-textarea/form-textarea.styles_1kneyif.css +0 -3
  267. package/theme/styles/default.css +0 -158
  268. package/toggle/toggle.styles_1t5qrye.css +0 -38
package/theme/styles/spf.css CHANGED
@@ -1,12 +1,117 @@
1
- @import url("./default.css");
1
+
2
2
  @layer fds {
3
+ :root {
4
+ /*
5
+ ========================================================================
6
+ BORDER
7
+ ========================================================================
8
+ */
9
+ --fds-border-width-005: 0.5px;
10
+ --fds-border-width-010: 1px;
11
+ --fds-border-width-020: 2px;
12
+ --fds-border-width-040: 4px;
13
+ --fds-border-style-solid: solid;
14
+
15
+ /*
16
+ ========================================================================
17
+ BREAKPOINT
18
+ ========================================================================
19
+ */
20
+ --fds-breakpoint-xxs-min: 0;
21
+ --fds-breakpoint-xxs-max: 320px;
22
+ --fds-breakpoint-xs-min: 321px;
23
+ --fds-breakpoint-xs-max: 375px;
24
+ --fds-breakpoint-sm-min: 376px;
25
+ --fds-breakpoint-sm-max: 480px;
26
+ --fds-breakpoint-md-min: 481px;
27
+ --fds-breakpoint-md-max: 768px;
28
+ --fds-breakpoint-lg-min: 769px;
29
+ --fds-breakpoint-lg-max: 1200px;
30
+ --fds-breakpoint-xl-min: 1201px;
31
+ --fds-breakpoint-xl-max: 1440px;
32
+ --fds-breakpoint-xxl-min: 1441px;
33
+ --fds-breakpoint-column-xxs: 8;
34
+ --fds-breakpoint-column-xs: 8;
35
+ --fds-breakpoint-column-sm: 8;
36
+ --fds-breakpoint-column-md: 8;
37
+ --fds-breakpoint-column-lg: 12;
38
+ --fds-breakpoint-column-xl: 12;
39
+ --fds-breakpoint-column-xxl: 12;
40
+ --fds-breakpoint-gutter-xxs: 16px;
41
+ --fds-breakpoint-gutter-xs: 16px;
42
+ --fds-breakpoint-gutter-sm: 16px;
43
+ --fds-breakpoint-gutter-md: 16px;
44
+ --fds-breakpoint-gutter-lg: 32px;
45
+ --fds-breakpoint-gutter-xl: 32px;
46
+ --fds-breakpoint-gutter-xxl: 32px;
47
+ --fds-breakpoint-margin-xxs: 24px;
48
+ --fds-breakpoint-margin-xs: 24px;
49
+ --fds-breakpoint-margin-sm: 24px;
50
+ --fds-breakpoint-margin-md: 24px;
51
+ --fds-breakpoint-margin-lg: 48px;
52
+ --fds-breakpoint-margin-xl: 48px;
53
+ --fds-breakpoint-margin-xxl: 48px;
54
+
55
+ /*
56
+ ========================================================================
57
+ SPACING
58
+ ========================================================================
59
+ */
60
+ --fds-spacing-0: 0;
61
+ --fds-spacing-4: 4px;
62
+ --fds-spacing-8: 8px;
63
+ --fds-spacing-12: 12px;
64
+ --fds-spacing-16: 16px;
65
+ --fds-spacing-20: 20px;
66
+ --fds-spacing-24: 24px;
67
+ --fds-spacing-32: 32px;
68
+ --fds-spacing-40: 40px;
69
+ --fds-spacing-48: 48px;
70
+ --fds-spacing-64: 64px;
71
+ --fds-spacing-72: 72px;
72
+ --fds-layout-xs: 8px;
73
+ --fds-layout-sm: 16px;
74
+ --fds-layout-md: 24px;
75
+ --fds-layout-lg: 32px;
76
+ --fds-layout-xl: 48px;
77
+ --fds-layout-xxl: 64px;
78
+ --fds-layout-xxxl: 128px;
79
+
80
+ /*
81
+ ========================================================================
82
+ MOTION
83
+ ========================================================================
84
+ */
85
+ --fds-motion-duration-150: 150ms;
86
+ --fds-motion-duration-250: 250ms;
87
+ --fds-motion-duration-350: 350ms;
88
+ --fds-motion-duration-500: 500ms;
89
+ --fds-motion-duration-800: 800ms;
90
+ --fds-motion-duration-1000: 1000ms;
91
+ --fds-motion-timing-ease-default: cubic-bezier(0.45, 0.05, 0.55, 0.95);
92
+ --fds-motion-timing-ease-standard: cubic-bezier(0.86, 0, 0.07, 1);
93
+ --fds-motion-timing-ease-entrance: cubic-bezier(0.18, 0.13, 0, 1);
94
+ --fds-motion-timing-ease-exit: cubic-bezier(1, 0, 0.8, 0.85);
95
+
96
+ /*
97
+ ========================================================================
98
+ RADIUS
99
+ ========================================================================
100
+ */
101
+ --fds-radius-none: 0;
102
+ --fds-radius-xs: 2px;
103
+ --fds-radius-sm: 4px;
104
+ --fds-radius-md: 8px;
105
+ --fds-radius-lg: 12px;
106
+ --fds-radius-full: 9999px;
107
+ }
3
108
 
4
- /*
5
- ============================================================================
6
- PRIMITIVE COLOURS
7
- ============================================================================
8
- */
9
109
  [data-fds-theme="spf"] {
110
+ /*
111
+ ============================================================================
112
+ PRIMITIVE COLOURS
113
+ ============================================================================
114
+ */
10
115
  --fds-colour-brand-10: #00205B;
11
116
  --fds-colour-brand-20: #143168;
12
117
  --fds-colour-brand-30: #274374;
@@ -99,18 +204,6 @@ PRIMITIVE COLOURS
99
204
  --fds-colour-black: #000000;
100
205
  --fds-colour-primary-inverse: #6FC7EC;
101
206
 
102
- /*
103
- ============================================================================
104
- RADIUS
105
- ============================================================================
106
- */
107
- --fds-radius-none: 0;
108
- --fds-radius-xs: 2px;
109
- --fds-radius-sm: 8px;
110
- --fds-radius-md: 8px;
111
- --fds-radius-lg: 12px;
112
- --fds-radius-full: 9999px;
113
-
114
207
  /*
115
208
  ============================================================================
116
209
  SEMANTIC COLOURS - LIGHT MODE
@@ -259,76 +352,6 @@ PRIMITIVE COLOURS
259
352
  --fds-colour-focus-ring: var(--fds-colour-primary-50);
260
353
  --fds-colour-focus-ring-inverse: var(--fds-colour-white);
261
354
 
262
- /*
263
- ========================================================================
264
- COMPONENT TOKENS
265
- ========================================================================
266
- */
267
-
268
- /* Button */
269
- --fds-button-radius: var(--fds-radius-sm);
270
- --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
271
- --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
272
- --fds-button-default-colour-text: var(--fds-colour-text-inverse);
273
- --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
274
- --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
275
- --fds-button-light-colour-text: var(--fds-colour-text-primary);
276
- --fds-button-link-colour-text: var(--fds-colour-text-primary);
277
-
278
- /* Navbar */
279
- --fds-navbar-full-height: 6rem;
280
- --fds-navbar-full-logo-height: 3rem;
281
- --fds-navbar-compressed-height: 5rem;
282
- --fds-navbar-compressed-logo-height: 2rem;
283
- --fds-navbar-mobile-height: 4rem;
284
- --fds-navbar-mobile-logo-height: 2rem;
285
- --fds-navbar-colour-bg: var(--fds-colour-bg);
286
- --fds-navbar-colour-icon: var(--fds-colour-icon);
287
- --fds-navbar-link-colour-text: var(--fds-colour-text-primary-strongest);
288
- --fds-navbar-link-colour-text-hover: var(--fds-colour-text-subtler);
289
- --fds-navbar-link-colour-text-selected-hover: var(
290
- --fds-colour-text-subtler
291
- );
292
-
293
- /* Footer */
294
- --fds-footer-colour-bg: var(--fds-colour-bg-inverse);
295
- --fds-footer-colour-text: var(--fds-colour-text-inverse);
296
- --fds-footer-link-colour-text: var(--fds-colour-text-inverse);
297
- --fds-footer-link-colour-text-hover: var(--fds-colour-text-inverse);
298
- --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text-inverse);
299
- --fds-footer-disclaimer-link-colour-text-hover: var(
300
- --fds-colour-text-inverse
301
- );
302
-
303
- /* Animation */
304
- --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
305
-
306
- /*
307
- ========================================================================
308
- SHADOW
309
- ========================================================================
310
- */
311
- --fds-shadow-xs-subtle: 0 0 4px 1px
312
- rgb(from var(--fds-colour-neutral-50) r g b / 24%);
313
- --fds-shadow-xs-strong: 0 0 4px 1px
314
- rgb(from var(--fds-colour-neutral-50) r g b / 50%);
315
- --fds-shadow-xs-focus-strong: 0 0 4px 1px
316
- rgb(from var(--fds-colour-border-focus) r g b / 50%);
317
- --fds-shadow-xs-error-strong: 0 0 4px 1px
318
- rgb(from var(--fds-colour-border-error) r g b / 50%);
319
- --fds-shadow-sm-subtle: 0 2px 4px 0
320
- rgb(from var(--fds-colour-neutral-50) r g b / 24%);
321
- --fds-shadow-sm-strong: 0 2px 4px 0
322
- rgb(from var(--fds-colour-neutral-50) r g b / 50%);
323
- --fds-shadow-md-subtle: 0 2px 8px 0
324
- rgb(from var(--fds-colour-neutral-50) r g b / 24%);
325
- --fds-shadow-md-strong: 0 2px 8px 0
326
- rgb(from var(--fds-colour-neutral-50) r g b / 50%);
327
- --fds-shadow-lg-subtle: 0 2px 12px 1px
328
- rgb(from var(--fds-colour-neutral-50) r g b / 24%);
329
- --fds-shadow-lg-strong: 0 2px 12px 1px
330
- rgb(from var(--fds-colour-neutral-50) r g b / 50%);
331
-
332
355
  /*
333
356
  ============================================================================
334
357
  FONT
@@ -377,14 +400,106 @@ PRIMITIVE COLOURS
377
400
  --fds-font-form-description-lh: 1.625rem;
378
401
  --fds-font-form-label-ls: 0.009rem;
379
402
  --fds-font-form-description-ls: 0.008rem;
403
+
404
+ /*
405
+ ============================================================================
406
+ RADIUS
407
+ ============================================================================
408
+ */
409
+ --fds-radius-none: 0;
410
+ --fds-radius-xs: 2px;
411
+ --fds-radius-sm: 8px;
412
+ --fds-radius-md: 8px;
413
+ --fds-radius-lg: 12px;
414
+ --fds-radius-full: 9999px;
415
+
416
+ /*
417
+ ============================================================================
418
+ SHADOW
419
+ ============================================================================
420
+ */
421
+
422
+ --fds-shadow-xs-subtle: 0 0 4px 1px
423
+ rgb(from var(--fds-colour-neutral-50) r g b / 24%);
424
+
425
+ --fds-shadow-xs-strong: 0 0 4px 1px
426
+ rgb(from var(--fds-colour-neutral-50) r g b / 50%);
427
+
428
+ --fds-shadow-xs-focus-strong: 0 0 4px 1px
429
+ rgb(from var(--fds-colour-border-focus) r g b / 50%);
430
+
431
+ --fds-shadow-xs-error-strong: 0 0 4px 1px
432
+ rgb(from var(--fds-colour-border-error) r g b / 50%);
433
+
434
+ --fds-shadow-sm-subtle: 0 2px 4px 0
435
+ rgb(from var(--fds-colour-neutral-50) r g b / 24%);
436
+
437
+ --fds-shadow-sm-strong: 0 2px 4px 0
438
+ rgb(from var(--fds-colour-neutral-50) r g b / 50%);
439
+
440
+ --fds-shadow-md-subtle: 0 2px 8px 0
441
+ rgb(from var(--fds-colour-neutral-50) r g b / 24%);
442
+
443
+ --fds-shadow-md-strong: 0 2px 8px 0
444
+ rgb(from var(--fds-colour-neutral-50) r g b / 50%);
445
+
446
+ --fds-shadow-lg-subtle: 0 2px 12px 1px
447
+ rgb(from var(--fds-colour-neutral-50) r g b / 24%);
448
+
449
+ --fds-shadow-lg-strong: 0 2px 12px 1px
450
+ rgb(from var(--fds-colour-neutral-50) r g b / 50%);
451
+
452
+ /*
453
+ ============================================================================
454
+ COMPONENT TOKENS
455
+ ============================================================================
456
+ */
457
+
458
+ /* Button */
459
+ --fds-button-radius: var(--fds-radius-sm);
460
+ --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
461
+ --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
462
+ --fds-button-default-colour-text: var(--fds-colour-text-inverse);
463
+ --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
464
+ --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
465
+ --fds-button-light-colour-text: var(--fds-colour-text-primary);
466
+ --fds-button-link-colour-text: var(--fds-colour-text-primary);
467
+
468
+ /* Navbar */
469
+ --fds-navbar-full-height: 6rem;
470
+ --fds-navbar-full-logo-height: 3rem;
471
+ --fds-navbar-compressed-height: 5rem;
472
+ --fds-navbar-compressed-logo-height: 2rem;
473
+ --fds-navbar-mobile-height: 4rem;
474
+ --fds-navbar-mobile-logo-height: 2rem;
475
+ --fds-navbar-colour-bg: var(--fds-colour-bg);
476
+ --fds-navbar-colour-icon: var(--fds-colour-icon);
477
+ --fds-navbar-link-colour-text: var(--fds-colour-text-primary-strongest);
478
+ --fds-navbar-link-colour-text-hover: var(--fds-colour-text-subtler);
479
+ --fds-navbar-link-colour-text-selected-hover: var(
480
+ --fds-colour-text-subtler
481
+ );
482
+
483
+ /* Footer */
484
+ --fds-footer-colour-bg: var(--fds-colour-bg-inverse);
485
+ --fds-footer-colour-text: var(--fds-colour-text-inverse);
486
+ --fds-footer-link-colour-text: var(--fds-colour-text-inverse);
487
+ --fds-footer-link-colour-text-hover: var(--fds-colour-text-inverse);
488
+ --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text-inverse);
489
+ --fds-footer-disclaimer-link-colour-text-hover: var(
490
+ --fds-colour-text-inverse
491
+ );
492
+
493
+ /* Animation */
494
+ --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
380
495
  }
381
496
 
382
- /*
383
- ============================================================================
384
- SEMANTIC COLOURS - DARK MODE
385
- ============================================================================
386
- */
387
497
  [data-fds-theme="spf"][data-fds-theme-mode="dark"] {
498
+ /*
499
+ ============================================================================
500
+ SEMANTIC COLOURS - DARK MODE
501
+ ============================================================================
502
+ */
388
503
  /* text */
389
504
  --fds-colour-text: var(--fds-colour-neutral-100);
390
505
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
@@ -408,7 +523,6 @@ SEMANTIC COLOURS - DARK MODE
408
523
  --fds-colour-text-error: var(--fds-colour-error-70);
409
524
  --fds-colour-text-info: var(--fds-colour-info-70);
410
525
  --fds-colour-text-inverse: var(--fds-colour-black);
411
-
412
526
  /* icon */
413
527
  --fds-colour-icon: var(--fds-colour-neutral-60);
414
528
  --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
@@ -432,7 +546,6 @@ SEMANTIC COLOURS - DARK MODE
432
546
  --fds-colour-icon-info: var(--fds-colour-info-60);
433
547
  --fds-colour-icon-inverse: var(--fds-colour-black);
434
548
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
435
-
436
549
  /* border - adjusted for dark mode */
437
550
  --fds-colour-border: var(--fds-colour-neutral-20);
438
551
  --fds-colour-border-strong: var(--fds-colour-neutral-40);
@@ -457,7 +570,6 @@ SEMANTIC COLOURS - DARK MODE
457
570
  --fds-colour-border-error-focus-strong: var(--fds-colour-error-70);
458
571
  --fds-colour-border-error-strong: var(--fds-colour-error-70);
459
572
  --fds-colour-border-info: var(--fds-colour-info-50);
460
-
461
573
  /* background - dark backgrounds */
462
574
  --fds-colour-bg: var(--fds-colour-black);
463
575
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
@@ -512,17 +624,14 @@ SEMANTIC COLOURS - DARK MODE
512
624
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
513
625
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
514
626
  --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);
515
-
516
627
  /* overlay - lighter overlays for dark backgrounds */
517
628
  --fds-colour-overlay-strong: rgb(78 78 78 / 80%);
518
629
  --fds-colour-overlay-subtle: rgb(78 78 78 / 50%);
519
-
520
630
  /* hyperlink - adjusted for dark mode */
521
631
  --fds-colour-hyperlink: var(--fds-colour-primary-60);
522
632
  --fds-colour-hyperlink-hover: var(--fds-colour-primary-70);
523
633
  --fds-colour-hyperlink-visited: var(--fds-colour-primary-70);
524
634
  --fds-colour-hyperlink-inverse: var(--fds-colour-primary-inverse);
525
-
526
635
  /* focus ring - adjusted for dark mode */
527
636
  --fds-colour-focus-ring: var(--fds-colour-primary-60);
528
637
  --fds-colour-focus-ring-inverse: var(--fds-colour-black);