@lifesg/react-design-system 4.0.0-alpha.8 → 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 (199) 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/cjs/accordion/accordion-item.js.map +1 -1
  5. package/cjs/accordion/accordion.js.map +1 -1
  6. package/cjs/alert/alert.js.map +1 -1
  7. package/cjs/countdown-timer/countdown-timer.js.map +1 -1
  8. package/cjs/data-table/data-table.js +1 -1
  9. package/cjs/data-table/data-table.js.map +1 -1
  10. package/cjs/date-range-input/date-range-input.js.map +1 -1
  11. package/cjs/e-signature/e-signature-canvas.js.map +1 -1
  12. package/cjs/error-display/inactivity-timer.js.map +1 -1
  13. package/cjs/external/dompurify/dist/purify.es.js +2 -2
  14. package/cjs/external/dompurify/dist/purify.es.js.map +1 -1
  15. package/cjs/file-download/file-list-card/file-list-card.js.map +1 -1
  16. package/cjs/file-upload/custom-sensors.js.map +1 -1
  17. package/cjs/file-upload/file-list/file-list.js.map +1 -1
  18. package/cjs/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
  19. package/cjs/filter/addons/filter-item-checkbox.js.map +1 -1
  20. package/cjs/filter/filter-item.js.map +1 -1
  21. package/cjs/filter/filter.js.map +1 -1
  22. package/cjs/form/form-textarea/form-textarea.js +1 -1
  23. package/cjs/form/form-textarea/form-textarea.js.map +1 -1
  24. package/cjs/fullscreen-image-carousel/stateful-image.js.map +1 -1
  25. package/cjs/histogram-slider/histogram-slider.js.map +1 -1
  26. package/cjs/input-range-slider/input-range-slider.js.map +1 -1
  27. package/cjs/input-slider/input-slider.js.map +1 -1
  28. package/cjs/input-textarea/textarea-counter.js.map +1 -1
  29. package/cjs/input-textarea/textarea.js +1 -1
  30. package/cjs/input-textarea/textarea.js.map +1 -1
  31. package/cjs/input-textarea/textarea.styles.js +1 -1
  32. package/cjs/input-textarea/textarea.styles.js.map +1 -1
  33. package/{input-textarea/textarea.styles_q77m5x.css → cjs/input-textarea/textarea.styles_6we7bs.css} +3 -1
  34. package/cjs/modal/index.js.map +1 -1
  35. package/cjs/modal-v2/modal-v2.js +1 -1
  36. package/cjs/modal-v2/modal-v2.js.map +1 -1
  37. package/cjs/modal-v2/slots/card.js +1 -1
  38. package/cjs/modal-v2/slots/card.js.map +1 -1
  39. package/cjs/modal-v2/slots/header.js +2 -0
  40. package/cjs/modal-v2/slots/header.js.map +1 -0
  41. package/cjs/modal-v2/slots/slot-styles.js +1 -1
  42. package/cjs/modal-v2/slots/slot-styles.js.map +1 -1
  43. package/cjs/modal-v2/slots/{slot-styles_13sd376.css → slot-styles_10ut1v7.css} +5 -1
  44. package/cjs/navbar/navbar-items.js +1 -1
  45. package/cjs/navbar/navbar-items.js.map +1 -1
  46. package/cjs/navbar/navbar-items.styles.js +1 -1
  47. package/cjs/navbar/navbar-items.styles.js.map +1 -1
  48. package/cjs/navbar/{navbar-items.styles_1i3ltot.css → navbar-items.styles_1b1zx.css} +9 -8
  49. package/cjs/navbar/navbar-logo-data.js +1 -1
  50. package/cjs/navbar/navbar-logo-data.js.map +1 -1
  51. package/cjs/navbar/navbar.js.map +1 -1
  52. package/cjs/otp-input/otp-input.js.map +1 -1
  53. package/cjs/overlay/overlay.js.map +1 -1
  54. package/cjs/pagination/pagination.js.map +1 -1
  55. package/cjs/phone-number-input/phone-number-input.js.map +1 -1
  56. package/cjs/predictive-text-input/predictive-text-input.js.map +1 -1
  57. package/cjs/shared/dropdown-list/dropdown-list.js.map +1 -1
  58. package/cjs/shared/internal-calendar/calendar-manager.js.map +1 -1
  59. package/cjs/shared/standalone-date-input/standalone-date-input.js.map +1 -1
  60. package/cjs/theme/types.js +1 -1
  61. package/cjs/theme/types.js.map +1 -1
  62. package/cjs/time-slot-bar/time-slot-bar.js.map +1 -1
  63. package/cjs/time-slot-bar-week/time-slot-bar-week-days.js.map +1 -1
  64. package/cjs/timetable/timetable.js.map +1 -1
  65. package/cjs/toggle/toggle-icon.js +1 -1
  66. package/cjs/toggle/toggle-icon.js.map +1 -1
  67. package/cjs/toggle/toggle-icon.styles.js +1 -1
  68. package/cjs/toggle/toggle-icon.styles.js.map +1 -1
  69. package/cjs/toggle/{toggle-icon.styles_ba71y.css → toggle-icon.styles_o6dxr3.css} +3 -2
  70. package/cjs/toggle/toggle.js +1 -1
  71. package/cjs/toggle/toggle.js.map +1 -1
  72. package/cjs/toggle/toggle.styles.js +1 -1
  73. package/cjs/toggle/toggle.styles.js.map +1 -1
  74. package/cjs/toggle/toggle.styles_11tmfsr.css +41 -0
  75. package/cjs/unit-number/unit-number-input.js.map +1 -1
  76. package/cjs/util/is-styled-components.js.map +1 -1
  77. package/cjs/util/string-helper.js +1 -1
  78. package/cjs/util/string-helper.js.map +1 -1
  79. package/cjs/util/use-event-listener.js.map +1 -1
  80. package/cjs/util/use-state-actions.js.map +1 -1
  81. package/countdown-timer/countdown-timer.js.map +1 -1
  82. package/data-table/data-table.js +1 -1
  83. package/data-table/data-table.js.map +1 -1
  84. package/data-table/types.d.ts +2 -2
  85. package/date-range-input/date-range-input.js.map +1 -1
  86. package/docs/component-catalog.json +1 -1
  87. package/e-signature/e-signature-canvas.js.map +1 -1
  88. package/error-display/inactivity-timer.js.map +1 -1
  89. package/external/dompurify/dist/purify.es.js +2 -2
  90. package/external/dompurify/dist/purify.es.js.map +1 -1
  91. package/file-download/file-list-card/file-list-card.js.map +1 -1
  92. package/file-upload/custom-sensors.d.ts +2 -2
  93. package/file-upload/custom-sensors.js.map +1 -1
  94. package/file-upload/file-list/file-list.js.map +1 -1
  95. package/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
  96. package/filter/addons/filter-item-checkbox.js.map +1 -1
  97. package/filter/filter-item.js.map +1 -1
  98. package/filter/filter.js.map +1 -1
  99. package/form/form-textarea/form-textarea.js +1 -1
  100. package/form/form-textarea/form-textarea.js.map +1 -1
  101. package/fullscreen-image-carousel/stateful-image.js.map +1 -1
  102. package/fullscreen-image-carousel/types.d.ts +2 -2
  103. package/histogram-slider/histogram-slider.js.map +1 -1
  104. package/input-range-slider/input-range-slider.js.map +1 -1
  105. package/input-slider/input-slider.js.map +1 -1
  106. package/input-textarea/textarea-counter.js.map +1 -1
  107. package/input-textarea/textarea.js +1 -1
  108. package/input-textarea/textarea.js.map +1 -1
  109. package/input-textarea/textarea.styles.d.ts +2 -0
  110. package/input-textarea/textarea.styles.js +1 -1
  111. package/input-textarea/textarea.styles.js.map +1 -1
  112. package/{cjs/input-textarea/textarea.styles_q77m5x.css → input-textarea/textarea.styles_6we7bs.css} +3 -1
  113. package/input-textarea/types.d.ts +7 -0
  114. package/modal/index.d.ts +4 -0
  115. package/modal/index.js.map +1 -1
  116. package/modal/types.d.ts +2 -0
  117. package/modal-v2/modal-v2.d.ts +6 -0
  118. package/modal-v2/modal-v2.js +1 -1
  119. package/modal-v2/modal-v2.js.map +1 -1
  120. package/modal-v2/slots/card.js +1 -1
  121. package/modal-v2/slots/card.js.map +1 -1
  122. package/modal-v2/slots/header.d.ts +5 -0
  123. package/modal-v2/slots/header.js +2 -0
  124. package/modal-v2/slots/header.js.map +1 -0
  125. package/modal-v2/slots/index.d.ts +1 -0
  126. package/modal-v2/slots/slot-styles.d.ts +4 -0
  127. package/modal-v2/slots/slot-styles.js +1 -1
  128. package/modal-v2/slots/slot-styles.js.map +1 -1
  129. package/modal-v2/slots/{slot-styles_13sd376.css → slot-styles_10ut1v7.css} +5 -1
  130. package/modal-v2/types.d.ts +21 -0
  131. package/navbar/navbar-items.js +1 -1
  132. package/navbar/navbar-items.js.map +1 -1
  133. package/navbar/navbar-items.styles.d.ts +2 -1
  134. package/navbar/navbar-items.styles.js +1 -1
  135. package/navbar/navbar-items.styles.js.map +1 -1
  136. package/navbar/{navbar-items.styles_1i3ltot.css → navbar-items.styles_1b1zx.css} +9 -8
  137. package/navbar/navbar-logo-data.js +1 -1
  138. package/navbar/navbar-logo-data.js.map +1 -1
  139. package/navbar/navbar.js.map +1 -1
  140. package/otp-input/otp-input.js.map +1 -1
  141. package/overlay/overlay.js.map +1 -1
  142. package/package.json +1 -1
  143. package/pagination/pagination.js.map +1 -1
  144. package/phone-number-input/phone-number-input.js.map +1 -1
  145. package/predictive-text-input/predictive-text-input.js.map +1 -1
  146. package/shared/dropdown-list/dropdown-list.js.map +1 -1
  147. package/shared/internal-calendar/calendar-manager.js.map +1 -1
  148. package/shared/standalone-date-input/standalone-date-input.js.map +1 -1
  149. package/theme/styles/a11y-playground.css +358 -87
  150. package/theme/styles/bookingsg.css +391 -85
  151. package/theme/styles/careercompass.css +396 -90
  152. package/theme/styles/ccube.css +402 -45
  153. package/theme/styles/imda.css +348 -85
  154. package/theme/styles/lifesg.css +377 -87
  155. package/theme/styles/mylegacy.css +382 -85
  156. package/theme/styles/oneservice.css +349 -86
  157. package/theme/styles/pa.css +172 -63
  158. package/theme/styles/rbs.css +403 -46
  159. package/theme/styles/sgw-digital-lobby.css +352 -87
  160. package/theme/styles/smgs.css +401 -95
  161. package/theme/styles/spf.css +208 -99
  162. package/theme/styles/supportgowhere.css +387 -90
  163. package/theme/styles/tote-board.css +816 -0
  164. package/theme/types.d.ts +1 -1
  165. package/theme/types.js +1 -1
  166. package/theme/types.js.map +1 -1
  167. package/time-slot-bar/time-slot-bar.js.map +1 -1
  168. package/time-slot-bar-week/time-slot-bar-week-days.js.map +1 -1
  169. package/timetable/timetable.js.map +1 -1
  170. package/toggle/toggle-icon.d.ts +2 -1
  171. package/toggle/toggle-icon.js +1 -1
  172. package/toggle/toggle-icon.js.map +1 -1
  173. package/toggle/toggle-icon.styles.d.ts +1 -0
  174. package/toggle/toggle-icon.styles.js +1 -1
  175. package/toggle/toggle-icon.styles.js.map +1 -1
  176. package/toggle/{toggle-icon.styles_ba71y.css → toggle-icon.styles_o6dxr3.css} +3 -2
  177. package/toggle/toggle.js +1 -1
  178. package/toggle/toggle.js.map +1 -1
  179. package/toggle/toggle.styles.d.ts +18 -15
  180. package/toggle/toggle.styles.js +1 -1
  181. package/toggle/toggle.styles.js.map +1 -1
  182. package/toggle/toggle.styles_11tmfsr.css +41 -0
  183. package/unit-number/unit-number-input.js.map +1 -1
  184. package/util/is-styled-components.js.map +1 -1
  185. package/util/string-helper.d.ts +2 -2
  186. package/util/string-helper.js +1 -1
  187. package/util/string-helper.js.map +1 -1
  188. package/util/use-event-listener.js.map +1 -1
  189. package/util/use-state-actions.js.map +1 -1
  190. package/cjs/form/form-textarea/form-textarea.styles.js +0 -2
  191. package/cjs/form/form-textarea/form-textarea.styles.js.map +0 -1
  192. package/cjs/form/form-textarea/form-textarea.styles_1kneyif.css +0 -3
  193. package/cjs/toggle/toggle.styles_1t5qrye.css +0 -38
  194. package/form/form-textarea/form-textarea.styles.d.ts +0 -3
  195. package/form/form-textarea/form-textarea.styles.js +0 -2
  196. package/form/form-textarea/form-textarea.styles.js.map +0 -1
  197. package/form/form-textarea/form-textarea.styles_1kneyif.css +0 -3
  198. package/theme/styles/default.css +0 -158
  199. package/toggle/toggle.styles_1t5qrye.css +0 -38
package/theme/styles/pa.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 COLORS
7
- ============================================================================
8
- */
9
109
  [data-fds-theme="pa"] {
110
+ /*
111
+ ============================================================================
112
+ PRIMITIVE COLOURS
113
+ ============================================================================
114
+ */
10
115
  --fds-colour-brand-10: #881317;
11
116
  --fds-colour-brand-20: #B5191E;
12
117
  --fds-colour-brand-30: #B5040A;
@@ -247,50 +352,6 @@ PRIMITIVE COLORS
247
352
  --fds-colour-focus-ring: var(--fds-colour-primary-50);
248
353
  --fds-colour-focus-ring-inverse: var(--fds-colour-white);
249
354
 
250
- /*
251
- ============================================================================
252
- COMPONENT TOKENS
253
- ============================================================================
254
- */
255
-
256
- /* Button */
257
- --fds-button-radius: var(--fds-radius-full);
258
- --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
259
- --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
260
- --fds-button-default-colour-text: var(--fds-colour-text-inverse);
261
- --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
262
- --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
263
- --fds-button-light-colour-text: var(--fds-colour-text-primary);
264
- --fds-button-link-colour-text: var(--fds-colour-text-primary);
265
-
266
- /* Navbar */
267
- --fds-navbar-full-height: 6rem;
268
- --fds-navbar-full-logo-height: 2rem;
269
- --fds-navbar-compressed-height: 4rem;
270
- --fds-navbar-compressed-logo-height: 1.5rem;
271
- --fds-navbar-mobile-height: 3.5rem;
272
- --fds-navbar-mobile-logo-height: 1.5rem;
273
- --fds-navbar-colour-bg: var(--fds-colour-bg);
274
- --fds-navbar-colour-icon: var(--fds-colour-icon);
275
- --fds-navbar-link-colour-text: var(--fds-colour-text);
276
- --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
277
- --fds-navbar-link-colour-text-selected-hover: var(
278
- --fds-text-selected-hover
279
- );
280
-
281
- /* Footer */
282
- --fds-footer-colour-bg: var(--fds-colour-bg-strong);
283
- --fds-footer-colour-text: var(--fds-colour-text);
284
- --fds-footer-link-colour-text: var(--fds-colour-text);
285
- --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
286
- --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
287
- --fds-footer-disclaimer-link-colour-text-hover: var(
288
- --fds-colour-text-subtler
289
- );
290
-
291
- /* Animation */
292
- --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
293
-
294
355
  /*
295
356
  ============================================================================
296
357
  FONT
@@ -341,38 +402,92 @@ PRIMITIVE COLORS
341
402
  --fds-font-form-description-ls: 0.012rem;
342
403
 
343
404
  /*
344
- ========================================================================
405
+ ============================================================================
345
406
  SHADOW
346
- ========================================================================
407
+ ============================================================================
347
408
  */
409
+
348
410
  --fds-shadow-xs-subtle: 0 0 4px 1px
349
411
  rgb(from var(--fds-colour-neutral-50) r g b / 24%);
412
+
350
413
  --fds-shadow-xs-strong: 0 0 4px 1px
351
414
  rgb(from var(--fds-colour-neutral-50) r g b / 50%);
415
+
352
416
  --fds-shadow-xs-focus-strong: 0 0 4px 1px
353
417
  rgb(from var(--fds-colour-border-focus) r g b / 50%);
418
+
354
419
  --fds-shadow-xs-error-strong: 0 0 4px 1px
355
420
  rgb(from var(--fds-colour-border-error) r g b / 50%);
421
+
356
422
  --fds-shadow-sm-subtle: 0 2px 4px 0
357
423
  rgb(from var(--fds-colour-neutral-50) r g b / 24%);
424
+
358
425
  --fds-shadow-sm-strong: 0 2px 4px 0
359
426
  rgb(from var(--fds-colour-neutral-50) r g b / 50%);
427
+
360
428
  --fds-shadow-md-subtle: 0 2px 8px 0
361
429
  rgb(from var(--fds-colour-neutral-50) r g b / 24%);
430
+
362
431
  --fds-shadow-md-strong: 0 2px 8px 0
363
432
  rgb(from var(--fds-colour-neutral-50) r g b / 50%);
433
+
364
434
  --fds-shadow-lg-subtle: 0 2px 12px 1px
365
435
  rgb(from var(--fds-colour-neutral-50) r g b / 24%);
436
+
366
437
  --fds-shadow-lg-strong: 0 2px 12px 1px
367
438
  rgb(from var(--fds-colour-neutral-50) r g b / 50%);
439
+
440
+ /*
441
+ ============================================================================
442
+ COMPONENT TOKENS
443
+ ============================================================================
444
+ */
445
+
446
+ /* Button */
447
+ --fds-button-radius: var(--fds-radius-full);
448
+ --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
449
+ --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
450
+ --fds-button-default-colour-text: var(--fds-colour-text-inverse);
451
+ --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
452
+ --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
453
+ --fds-button-light-colour-text: var(--fds-colour-text-primary);
454
+ --fds-button-link-colour-text: var(--fds-colour-text-primary);
455
+
456
+ /* Navbar */
457
+ --fds-navbar-full-height: 6rem;
458
+ --fds-navbar-full-logo-height: 2rem;
459
+ --fds-navbar-compressed-height: 4rem;
460
+ --fds-navbar-compressed-logo-height: 1.5rem;
461
+ --fds-navbar-mobile-height: 3.5rem;
462
+ --fds-navbar-mobile-logo-height: 1.5rem;
463
+ --fds-navbar-colour-bg: var(--fds-colour-bg);
464
+ --fds-navbar-colour-icon: var(--fds-colour-icon);
465
+ --fds-navbar-link-colour-text: var(--fds-colour-text);
466
+ --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
467
+ --fds-navbar-link-colour-text-selected-hover: var(
468
+ --fds-text-selected-hover
469
+ );
470
+
471
+ /* Footer */
472
+ --fds-footer-colour-bg: var(--fds-colour-bg-strong);
473
+ --fds-footer-colour-text: var(--fds-colour-text);
474
+ --fds-footer-link-colour-text: var(--fds-colour-text);
475
+ --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
476
+ --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
477
+ --fds-footer-disclaimer-link-colour-text-hover: var(
478
+ --fds-colour-text-subtler
479
+ );
480
+
481
+ /* Animation */
482
+ --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
368
483
  }
369
484
 
370
- /*
371
- ============================================================================
372
- SEMANTIC COLOURS - DARK MODE
373
- ============================================================================
374
- */
375
485
  [data-fds-theme="pa"][data-fds-theme-mode="dark"] {
486
+ /*
487
+ ============================================================================
488
+ SEMANTIC COLOURS - DARK MODE
489
+ ============================================================================
490
+ */
376
491
  /* text */
377
492
  --fds-colour-text: var(--fds-colour-neutral-100);
378
493
  --fds-colour-text-subtle: var(--fds-colour-neutral-80);
@@ -396,7 +511,6 @@ SEMANTIC COLOURS - DARK MODE
396
511
  --fds-colour-text-error: var(--fds-colour-error-70);
397
512
  --fds-colour-text-info: var(--fds-colour-info-70);
398
513
  --fds-colour-text-inverse: var(--fds-colour-black);
399
-
400
514
  /* icon */
401
515
  --fds-colour-icon: var(--fds-colour-neutral-60);
402
516
  --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
@@ -420,7 +534,6 @@ SEMANTIC COLOURS - DARK MODE
420
534
  --fds-colour-icon-info: var(--fds-colour-info-60);
421
535
  --fds-colour-icon-inverse: var(--fds-colour-black);
422
536
  --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
423
-
424
537
  /* border - adjusted for dark mode */
425
538
  --fds-colour-border: var(--fds-colour-neutral-20);
426
539
  --fds-colour-border-strong: var(--fds-colour-neutral-40);
@@ -445,7 +558,6 @@ SEMANTIC COLOURS - DARK MODE
445
558
  --fds-colour-border-error-focus-strong: var(--fds-colour-error-70);
446
559
  --fds-colour-border-error-strong: var(--fds-colour-error-70);
447
560
  --fds-colour-border-info: var(--fds-colour-info-50);
448
-
449
561
  /* background - dark backgrounds */
450
562
  --fds-colour-bg: var(--fds-colour-black);
451
563
  --fds-colour-bg-strong: var(--fds-colour-neutral-10);
@@ -500,17 +612,14 @@ SEMANTIC COLOURS - DARK MODE
500
612
  --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
501
613
  --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
502
614
  --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);
503
-
504
615
  /* overlay - lighter overlays for dark backgrounds */
505
616
  --fds-colour-overlay-strong: rgb(78 78 78 / 80%);
506
617
  --fds-colour-overlay-subtle: rgb(78 78 78 / 50%);
507
-
508
618
  /* hyperlink - adjusted for dark mode */
509
619
  --fds-colour-hyperlink: var(--fds-colour-primary-60);
510
620
  --fds-colour-hyperlink-hover: var(--fds-colour-primary-70);
511
621
  --fds-colour-hyperlink-visited: var(--fds-colour-primary-70);
512
622
  --fds-colour-hyperlink-inverse: var(--fds-colour-primary-inverse);
513
-
514
623
  /* focus ring - adjusted for dark mode */
515
624
  --fds-colour-focus-ring: var(--fds-colour-primary-60);
516
625
  --fds-colour-focus-ring-inverse: var(--fds-colour-black);