@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/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);