@navikt/ds-css 7.9.0 → 7.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (245) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +6 -6
  3. package/darkside/accordion.darkside.css +8 -9
  4. package/darkside/action-menu.darkside.css +12 -12
  5. package/darkside/alert.darkside.css +8 -8
  6. package/darkside/button.darkside.css +20 -22
  7. package/darkside/chat.darkside.css +7 -7
  8. package/darkside/chips.darkside.css +19 -19
  9. package/darkside/copybutton.darkside.css +13 -13
  10. package/darkside/date.darkside.css +17 -17
  11. package/darkside/expansioncard.darkside.css +10 -10
  12. package/darkside/form/combobox.darkside.css +20 -20
  13. package/darkside/form/error-summary.darkside.css +10 -10
  14. package/darkside/form/fieldset.darkside.css +1 -1
  15. package/darkside/form/file-upload.darkside.css +12 -12
  16. package/darkside/form/form-progress.darkside.css +3 -3
  17. package/darkside/form/form-summary.darkside.css +17 -17
  18. package/darkside/form/form.darkside.css +3 -3
  19. package/darkside/form/radio-checkbox.darkside.css +8 -8
  20. package/darkside/form/search.darkside.css +8 -8
  21. package/darkside/form/select.darkside.css +5 -5
  22. package/darkside/form/switch.darkside.css +10 -10
  23. package/darkside/form/text-field.darkside.css +5 -5
  24. package/darkside/form/textarea.darkside.css +4 -4
  25. package/darkside/guide-panel.darkside.css +8 -8
  26. package/darkside/help-text.darkside.css +2 -2
  27. package/darkside/internalheader.darkside.css +9 -9
  28. package/darkside/link.darkside.css +1 -1
  29. package/darkside/list.darkside.css +5 -5
  30. package/darkside/loader.darkside.css +1 -1
  31. package/darkside/modal.darkside.css +10 -10
  32. package/darkside/pagination.darkside.css +3 -3
  33. package/darkside/popover.darkside.css +2 -2
  34. package/darkside/primitives/page.darkside.css +1 -1
  35. package/darkside/progress-bar.darkside.css +2 -2
  36. package/darkside/read-more.darkside.css +13 -13
  37. package/darkside/skeleton.darkside.css +1 -1
  38. package/darkside/stepper.darkside.css +11 -11
  39. package/darkside/table.darkside.css +18 -22
  40. package/darkside/tabs.darkside.css +11 -11
  41. package/darkside/tag.darkside.css +21 -21
  42. package/darkside/timeline.darkside.css +19 -19
  43. package/darkside/toggle-group.darkside.css +7 -7
  44. package/darkside/tooltip.darkside.css +5 -5
  45. package/darkside/typography.darkside.css +19 -19
  46. package/dist/component/link.css +1 -1
  47. package/dist/component/link.min.css +1 -1
  48. package/dist/component/table.css +2 -6
  49. package/dist/component/table.min.css +1 -1
  50. package/dist/component/tag.css +6 -6
  51. package/dist/component/tag.min.css +1 -1
  52. package/dist/components.css +9 -13
  53. package/dist/components.min.css +1 -1
  54. package/dist/darkside/component/accordion.css +8 -9
  55. package/dist/darkside/component/accordion.min.css +1 -1
  56. package/dist/darkside/component/actionmenu.css +12 -12
  57. package/dist/darkside/component/actionmenu.min.css +1 -1
  58. package/dist/darkside/component/alert.css +6 -6
  59. package/dist/darkside/component/alert.min.css +1 -1
  60. package/dist/darkside/component/button.css +20 -22
  61. package/dist/darkside/component/button.min.css +1 -1
  62. package/dist/darkside/component/chat.css +7 -7
  63. package/dist/darkside/component/chat.min.css +1 -1
  64. package/dist/darkside/component/chips.css +19 -19
  65. package/dist/darkside/component/chips.min.css +1 -1
  66. package/dist/darkside/component/copybutton.css +13 -13
  67. package/dist/darkside/component/copybutton.min.css +1 -1
  68. package/dist/darkside/component/date.css +17 -17
  69. package/dist/darkside/component/date.min.css +1 -1
  70. package/dist/darkside/component/expansioncard.css +10 -10
  71. package/dist/darkside/component/expansioncard.min.css +1 -1
  72. package/dist/darkside/component/form.css +106 -106
  73. package/dist/darkside/component/form.min.css +1 -1
  74. package/dist/darkside/component/guidepanel.css +8 -8
  75. package/dist/darkside/component/guidepanel.min.css +1 -1
  76. package/dist/darkside/component/helptext.css +2 -2
  77. package/dist/darkside/component/helptext.min.css +1 -1
  78. package/dist/darkside/component/internalheader.css +9 -9
  79. package/dist/darkside/component/internalheader.min.css +1 -1
  80. package/dist/darkside/component/link.css +1 -1
  81. package/dist/darkside/component/link.min.css +1 -1
  82. package/dist/darkside/component/list.css +5 -5
  83. package/dist/darkside/component/list.min.css +1 -1
  84. package/dist/darkside/component/loader.css +1 -1
  85. package/dist/darkside/component/loader.min.css +1 -1
  86. package/dist/darkside/component/modal.css +8 -8
  87. package/dist/darkside/component/modal.min.css +1 -1
  88. package/dist/darkside/component/pagination.css +3 -3
  89. package/dist/darkside/component/pagination.min.css +1 -1
  90. package/dist/darkside/component/popover.css +2 -2
  91. package/dist/darkside/component/popover.min.css +1 -1
  92. package/dist/darkside/component/primitives.css +1 -1
  93. package/dist/darkside/component/primitives.min.css +1 -1
  94. package/dist/darkside/component/progressbar.css +2 -2
  95. package/dist/darkside/component/progressbar.min.css +1 -1
  96. package/dist/darkside/component/readmore.css +13 -13
  97. package/dist/darkside/component/readmore.min.css +1 -1
  98. package/dist/darkside/component/skeleton.css +1 -1
  99. package/dist/darkside/component/skeleton.min.css +1 -1
  100. package/dist/darkside/component/stepper.css +11 -11
  101. package/dist/darkside/component/stepper.min.css +1 -1
  102. package/dist/darkside/component/table.css +18 -22
  103. package/dist/darkside/component/table.min.css +1 -1
  104. package/dist/darkside/component/tabs.css +11 -11
  105. package/dist/darkside/component/tabs.min.css +1 -1
  106. package/dist/darkside/component/tag.css +21 -21
  107. package/dist/darkside/component/tag.min.css +1 -1
  108. package/dist/darkside/component/timeline.css +19 -19
  109. package/dist/darkside/component/timeline.min.css +1 -1
  110. package/dist/darkside/component/togglegroup.css +7 -7
  111. package/dist/darkside/component/togglegroup.min.css +1 -1
  112. package/dist/darkside/component/tooltip.css +5 -5
  113. package/dist/darkside/component/tooltip.min.css +1 -1
  114. package/dist/darkside/component/typography.css +19 -19
  115. package/dist/darkside/component/typography.min.css +1 -1
  116. package/dist/darkside/components.css +385 -392
  117. package/dist/darkside/components.min.css +1 -1
  118. package/dist/darkside/global/tokens.css +460 -477
  119. package/dist/darkside/global/tokens.min.css +1 -1
  120. package/dist/darkside/index.css +845 -869
  121. package/dist/darkside/index.min.css +1 -1
  122. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/accordion.css +8 -9
  123. package/dist/darkside/version/7.9.2/component/accordion.min.css +1 -0
  124. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/actionmenu.css +12 -12
  125. package/dist/darkside/version/7.9.2/component/actionmenu.min.css +1 -0
  126. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/alert.css +6 -6
  127. package/dist/darkside/version/7.9.2/component/alert.min.css +1 -0
  128. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/button.css +20 -22
  129. package/dist/darkside/version/7.9.2/component/button.min.css +1 -0
  130. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/chat.css +7 -7
  131. package/dist/darkside/version/7.9.2/component/chat.min.css +1 -0
  132. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/chips.css +19 -19
  133. package/dist/darkside/version/7.9.2/component/chips.min.css +1 -0
  134. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/copybutton.css +13 -13
  135. package/dist/darkside/version/7.9.2/component/copybutton.min.css +1 -0
  136. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/date.css +17 -17
  137. package/dist/darkside/version/7.9.2/component/date.min.css +1 -0
  138. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/expansioncard.css +10 -10
  139. package/dist/darkside/version/7.9.2/component/expansioncard.min.css +1 -0
  140. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/form.css +106 -106
  141. package/dist/darkside/version/7.9.2/component/form.min.css +1 -0
  142. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/guidepanel.css +8 -8
  143. package/dist/darkside/version/7.9.2/component/guidepanel.min.css +1 -0
  144. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/helptext.css +2 -2
  145. package/dist/darkside/version/7.9.2/component/helptext.min.css +1 -0
  146. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/internalheader.css +9 -9
  147. package/dist/darkside/version/7.9.2/component/internalheader.min.css +1 -0
  148. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/link.css +1 -1
  149. package/dist/darkside/version/7.9.2/component/link.min.css +1 -0
  150. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/list.css +5 -5
  151. package/dist/darkside/version/7.9.2/component/list.min.css +1 -0
  152. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/loader.css +1 -1
  153. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/loader.min.css +1 -1
  154. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/modal.css +8 -8
  155. package/dist/darkside/version/7.9.2/component/modal.min.css +1 -0
  156. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/pagination.css +3 -3
  157. package/dist/darkside/version/7.9.2/component/pagination.min.css +1 -0
  158. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/popover.css +2 -2
  159. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/popover.min.css +1 -1
  160. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/primitives.css +1 -1
  161. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/primitives.min.css +1 -1
  162. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/progressbar.css +2 -2
  163. package/dist/darkside/version/7.9.2/component/progressbar.min.css +1 -0
  164. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/readmore.css +13 -13
  165. package/dist/darkside/version/7.9.2/component/readmore.min.css +1 -0
  166. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/skeleton.css +1 -1
  167. package/dist/darkside/version/7.9.2/component/skeleton.min.css +1 -0
  168. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/stepper.css +11 -11
  169. package/dist/darkside/version/7.9.2/component/stepper.min.css +1 -0
  170. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/table.css +18 -22
  171. package/dist/darkside/version/7.9.2/component/table.min.css +1 -0
  172. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/tabs.css +11 -11
  173. package/dist/darkside/version/7.9.2/component/tabs.min.css +1 -0
  174. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/tag.css +21 -21
  175. package/dist/darkside/version/7.9.2/component/tag.min.css +1 -0
  176. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/timeline.css +19 -19
  177. package/dist/darkside/version/7.9.2/component/timeline.min.css +1 -0
  178. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/togglegroup.css +7 -7
  179. package/dist/darkside/version/7.9.2/component/togglegroup.min.css +1 -0
  180. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/tooltip.css +5 -5
  181. package/dist/darkside/version/7.9.2/component/tooltip.min.css +1 -0
  182. package/dist/darkside/version/{7.9.0 → 7.9.2}/component/typography.css +19 -19
  183. package/dist/darkside/version/7.9.2/component/typography.min.css +1 -0
  184. package/dist/darkside/version/{7.9.0 → 7.9.2}/components.css +385 -392
  185. package/dist/darkside/version/7.9.2/components.min.css +1 -0
  186. package/dist/darkside/version/7.9.2/global/tokens.css +879 -0
  187. package/dist/darkside/version/7.9.2/global/tokens.min.css +1 -0
  188. package/dist/darkside/version/{7.9.0 → 7.9.2}/index.css +845 -869
  189. package/dist/darkside/version/7.9.2/index.min.css +1 -0
  190. package/dist/global/tokens.css +23 -1
  191. package/dist/global/tokens.min.css +1 -1
  192. package/dist/index.css +32 -14
  193. package/dist/index.min.css +2 -2
  194. package/link.css +1 -1
  195. package/package.json +4 -4
  196. package/table.css +2 -6
  197. package/tag.css +6 -6
  198. package/dist/darkside/version/7.9.0/component/accordion.min.css +0 -1
  199. package/dist/darkside/version/7.9.0/component/actionmenu.min.css +0 -1
  200. package/dist/darkside/version/7.9.0/component/alert.min.css +0 -1
  201. package/dist/darkside/version/7.9.0/component/button.min.css +0 -1
  202. package/dist/darkside/version/7.9.0/component/chat.min.css +0 -1
  203. package/dist/darkside/version/7.9.0/component/chips.min.css +0 -1
  204. package/dist/darkside/version/7.9.0/component/copybutton.min.css +0 -1
  205. package/dist/darkside/version/7.9.0/component/date.min.css +0 -1
  206. package/dist/darkside/version/7.9.0/component/expansioncard.min.css +0 -1
  207. package/dist/darkside/version/7.9.0/component/form.min.css +0 -1
  208. package/dist/darkside/version/7.9.0/component/guidepanel.min.css +0 -1
  209. package/dist/darkside/version/7.9.0/component/helptext.min.css +0 -1
  210. package/dist/darkside/version/7.9.0/component/internalheader.min.css +0 -1
  211. package/dist/darkside/version/7.9.0/component/link.min.css +0 -1
  212. package/dist/darkside/version/7.9.0/component/list.min.css +0 -1
  213. package/dist/darkside/version/7.9.0/component/modal.min.css +0 -1
  214. package/dist/darkside/version/7.9.0/component/pagination.min.css +0 -1
  215. package/dist/darkside/version/7.9.0/component/progressbar.min.css +0 -1
  216. package/dist/darkside/version/7.9.0/component/readmore.min.css +0 -1
  217. package/dist/darkside/version/7.9.0/component/skeleton.min.css +0 -1
  218. package/dist/darkside/version/7.9.0/component/stepper.min.css +0 -1
  219. package/dist/darkside/version/7.9.0/component/table.min.css +0 -1
  220. package/dist/darkside/version/7.9.0/component/tabs.min.css +0 -1
  221. package/dist/darkside/version/7.9.0/component/tag.min.css +0 -1
  222. package/dist/darkside/version/7.9.0/component/timeline.min.css +0 -1
  223. package/dist/darkside/version/7.9.0/component/togglegroup.min.css +0 -1
  224. package/dist/darkside/version/7.9.0/component/tooltip.min.css +0 -1
  225. package/dist/darkside/version/7.9.0/component/typography.min.css +0 -1
  226. package/dist/darkside/version/7.9.0/components.min.css +0 -1
  227. package/dist/darkside/version/7.9.0/global/tokens.css +0 -896
  228. package/dist/darkside/version/7.9.0/global/tokens.min.css +0 -1
  229. package/dist/darkside/version/7.9.0/index.min.css +0 -1
  230. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/dropdown.css +0 -0
  231. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/dropdown.min.css +0 -0
  232. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/linkpanel.css +0 -0
  233. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/linkpanel.min.css +0 -0
  234. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/panel.css +0 -0
  235. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/panel.min.css +0 -0
  236. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/theme.css +0 -0
  237. /package/dist/darkside/version/{7.9.0 → 7.9.2}/component/theme.min.css +0 -0
  238. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/baseline.css +0 -0
  239. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/baseline.min.css +0 -0
  240. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/fonts.css +0 -0
  241. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/fonts.min.css +0 -0
  242. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/print.css +0 -0
  243. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/print.min.css +0 -0
  244. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/reset.css +0 -0
  245. /package/dist/darkside/version/{7.9.0 → 7.9.2}/global/reset.min.css +0 -0
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  .navds-heading--xlarge.navds-typo--spacing {
16
- margin-bottom: var(--ax-spacing-5);
16
+ margin-bottom: var(--ax-space-20);
17
17
  }
18
18
 
19
19
  .navds-heading--large {
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  .navds-heading--large.navds-typo--spacing {
26
- margin-bottom: var(--ax-spacing-4);
26
+ margin-bottom: var(--ax-space-16);
27
27
  }
28
28
 
29
29
  @media (max-width: 480px) {
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .navds-heading--xlarge.navds-typo--spacing {
37
- margin-bottom: var(--ax-spacing-4);
37
+ margin-bottom: var(--ax-space-16);
38
38
  }
39
39
 
40
40
  .navds-heading--large {
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .navds-heading--large.navds-typo--spacing {
47
- margin-bottom: var(--ax-spacing-3);
47
+ margin-bottom: var(--ax-space-12);
48
48
  }
49
49
  }
50
50
 
@@ -55,7 +55,7 @@
55
55
  }
56
56
 
57
57
  .navds-heading--medium.navds-typo--spacing {
58
- margin-bottom: var(--ax-spacing-3);
58
+ margin-bottom: var(--ax-space-12);
59
59
  }
60
60
 
61
61
  .navds-heading--small {
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  .navds-heading--small.navds-typo--spacing {
68
- margin-bottom: var(--ax-spacing-3);
68
+ margin-bottom: var(--ax-space-12);
69
69
  }
70
70
 
71
71
  .navds-heading--xsmall {
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .navds-heading--xsmall.navds-typo--spacing {
78
- margin-bottom: var(--ax-spacing-3);
78
+ margin-bottom: var(--ax-space-12);
79
79
  }
80
80
 
81
81
  .navds-ingress {
@@ -87,7 +87,7 @@
87
87
  }
88
88
 
89
89
  .navds-ingress.navds-typo--spacing {
90
- margin-bottom: var(--ax-spacing-10);
90
+ margin-bottom: var(--ax-space-40);
91
91
  }
92
92
 
93
93
  .navds-body-long {
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  .navds-body-long.navds-typo--spacing {
102
- margin-bottom: var(--ax-spacing-7);
102
+ margin-bottom: var(--ax-space-28);
103
103
  }
104
104
 
105
105
  .navds-body-long--large {
@@ -109,7 +109,7 @@
109
109
  }
110
110
 
111
111
  .navds-body-long--large.navds-typo--spacing {
112
- margin-bottom: var(--ax-spacing-10);
112
+ margin-bottom: var(--ax-space-40);
113
113
  }
114
114
 
115
115
  .navds-body-long--small {
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  .navds-body-long--small.navds-typo--spacing {
122
- margin-bottom: var(--ax-spacing-6);
122
+ margin-bottom: var(--ax-space-24);
123
123
  }
124
124
 
125
125
  .navds-body-short {
@@ -131,7 +131,7 @@
131
131
  }
132
132
 
133
133
  .navds-body-short.navds-typo--spacing {
134
- margin-bottom: var(--ax-spacing-3);
134
+ margin-bottom: var(--ax-space-12);
135
135
  }
136
136
 
137
137
  .navds-body-short--large {
@@ -141,7 +141,7 @@
141
141
  }
142
142
 
143
143
  .navds-body-short--large.navds-typo--spacing {
144
- margin-bottom: var(--ax-spacing-4);
144
+ margin-bottom: var(--ax-space-16);
145
145
  }
146
146
 
147
147
  .navds-body-short--small {
@@ -151,7 +151,7 @@
151
151
  }
152
152
 
153
153
  .navds-body-short--small.navds-typo--spacing {
154
- margin-bottom: var(--ax-spacing-2);
154
+ margin-bottom: var(--ax-space-8);
155
155
  }
156
156
 
157
157
  .navds-label {
@@ -163,7 +163,7 @@
163
163
  }
164
164
 
165
165
  .navds-label.navds-typo--spacing {
166
- margin-bottom: var(--ax-spacing-3);
166
+ margin-bottom: var(--ax-space-12);
167
167
  }
168
168
 
169
169
  .navds-label--small {
@@ -173,7 +173,7 @@
173
173
  }
174
174
 
175
175
  .navds-label--small.navds-typo--spacing {
176
- margin-bottom: var(--ax-spacing-2);
176
+ margin-bottom: var(--ax-space-8);
177
177
  }
178
178
 
179
179
  .navds-detail {
@@ -184,7 +184,7 @@
184
184
  }
185
185
 
186
186
  .navds-detail.navds-typo--spacing {
187
- margin-bottom: var(--ax-spacing-2);
187
+ margin-bottom: var(--ax-space-8);
188
188
  }
189
189
 
190
190
  .navds-detail.navds-typo--uppercase {
@@ -196,7 +196,7 @@
196
196
  }
197
197
 
198
198
  .navds-detail--small.navds-typo--spacing {
199
- margin-bottom: var(--ax-spacing-2);
199
+ margin-bottom: var(--ax-space-8);
200
200
  }
201
201
 
202
202
  .navds-error-message {
@@ -204,7 +204,7 @@
204
204
  }
205
205
 
206
206
  .navds-error-message.navds-error-message--show-icon {
207
- gap: var(--ax-spacing-1);
207
+ gap: var(--ax-space-4);
208
208
  display: flex;
209
209
  }
210
210
 
@@ -259,12 +259,12 @@
259
259
  --__axc-button-icon-margin: -4px;
260
260
  --__axc-button-border-color: transparent;
261
261
  --__axc-button-border-width: 2px;
262
- padding: var(--ax-spacing-3) var(--ax-spacing-5);
262
+ padding: var(--ax-space-12) var(--ax-space-20);
263
263
  border-radius: var(--ax-border-radius-medium);
264
264
  cursor: pointer;
265
265
  justify-content: center;
266
266
  align-items: center;
267
- gap: var(--ax-spacing-2);
267
+ gap: var(--ax-space-8);
268
268
  box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
269
269
  background: none;
270
270
  border: none;
@@ -283,26 +283,26 @@
283
283
  }
284
284
 
285
285
  .navds-button--small {
286
- padding: var(--ax-spacing-1) var(--ax-spacing-3);
286
+ padding: var(--ax-space-4) var(--ax-space-12);
287
287
  min-width: 2rem;
288
288
  min-height: 2rem;
289
289
  }
290
290
 
291
291
  .navds-button--xsmall {
292
- padding: var(--ax-spacing-05) var(--ax-spacing-2);
293
- gap: var(--ax-spacing-1);
292
+ padding: var(--ax-space-2) var(--ax-space-8);
293
+ gap: var(--ax-space-4);
294
294
  }
295
295
 
296
296
  .navds-button--icon-only {
297
- padding: var(--ax-spacing-3);
297
+ padding: var(--ax-space-12);
298
298
  }
299
299
 
300
300
  .navds-button--icon-only.navds-button--small {
301
- padding: var(--ax-spacing-1);
301
+ padding: var(--ax-space-4);
302
302
  }
303
303
 
304
304
  .navds-button--icon-only.navds-button--xsmall {
305
- padding: var(--ax-spacing-05);
305
+ padding: var(--ax-space-2);
306
306
  }
307
307
 
308
308
  @supports not selector(:focus-visible) {
@@ -357,20 +357,20 @@
357
357
  }
358
358
 
359
359
  .navds-button--primary-neutral {
360
- background-color: var(--ax-bg-neutral-strong);
361
- color: var(--ax-text-neutral-contrast);
360
+ background-color: var(--ax-bg-strong);
361
+ color: var(--ax-text-contrast);
362
362
  }
363
363
 
364
364
  .navds-button--primary-neutral:hover {
365
- background-color: var(--ax-bg-neutral-strong-hover);
365
+ background-color: var(--ax-bg-strong-hover);
366
366
  }
367
367
 
368
368
  .navds-button--primary-neutral:active {
369
- background-color: var(--ax-bg-neutral-strong-pressed);
369
+ background-color: var(--ax-bg-strong-pressed);
370
370
  }
371
371
 
372
372
  .navds-button--primary-neutral:is(:disabled, .navds-button--disabled) {
373
- background-color: var(--ax-bg-neutral-strong);
373
+ background-color: var(--ax-bg-strong);
374
374
  }
375
375
 
376
376
  .navds-button--secondary {
@@ -382,7 +382,6 @@
382
382
  .navds-button--secondary:hover {
383
383
  --__axc-button-border-color: var(--ax-border-accent-strong);
384
384
  background-color: var(--ax-bg-accent-moderate-hoverA);
385
- color: var(--ax-text-accent-strong);
386
385
  }
387
386
 
388
387
  .navds-button--secondary:active {
@@ -405,17 +404,17 @@
405
404
 
406
405
  .navds-button--secondary-neutral:hover {
407
406
  --__axc-button-border-color: var(--ax-border-strong);
408
- background-color: var(--ax-bg-neutral-moderate-hoverA);
407
+ background-color: var(--ax-bg-moderate-hoverA);
409
408
  }
410
409
 
411
410
  .navds-button--secondary-neutral:active {
412
411
  --__axc-button-border-color: transparent;
413
- color: var(--ax-text-neutral-contrast);
414
- background-color: var(--ax-bg-neutral-strong-pressed);
412
+ color: var(--ax-text-contrast);
413
+ background-color: var(--ax-bg-strong-pressed);
415
414
  }
416
415
 
417
416
  .navds-button--secondary-neutral:is(:disabled, .navds-button--disabled) {
418
- --__axc-button-border-color: var(--ax-border-neutral);
417
+ --__axc-button-border-color: var(--ax-border-default);
419
418
  color: var(--ax-text-default);
420
419
  background-color: rgba(0, 0, 0, 0);
421
420
  }
@@ -427,7 +426,6 @@
427
426
 
428
427
  .navds-button--tertiary:hover {
429
428
  background-color: var(--ax-bg-accent-moderate-hoverA);
430
- color: var(--ax-text-accent-strong);
431
429
  }
432
430
 
433
431
  .navds-button--tertiary:active {
@@ -446,12 +444,12 @@
446
444
  }
447
445
 
448
446
  .navds-button--tertiary-neutral:hover {
449
- background-color: var(--ax-bg-neutral-moderate-hoverA);
447
+ background-color: var(--ax-bg-moderate-hoverA);
450
448
  }
451
449
 
452
450
  .navds-button--tertiary-neutral:active {
453
- background-color: var(--ax-bg-neutral-strong-pressed);
454
- color: var(--ax-text-neutral-contrast);
451
+ background-color: var(--ax-bg-strong-pressed);
452
+ color: var(--ax-text-contrast);
455
453
  }
456
454
 
457
455
  .navds-button--tertiary-neutral:is(:disabled, .navds-button--disabled) {
@@ -533,7 +531,7 @@
533
531
  }
534
532
 
535
533
  .navds-chips {
536
- gap: var(--ax-spacing-2);
534
+ gap: var(--ax-space-8);
537
535
  flex-wrap: wrap;
538
536
  margin: 0;
539
537
  padding: 0;
@@ -553,8 +551,8 @@
553
551
  cursor: pointer;
554
552
  justify-content: center;
555
553
  align-items: center;
556
- gap: var(--ax-spacing-05);
557
- padding: 0 var(--ax-spacing-3);
554
+ gap: var(--ax-space-2);
555
+ padding: 0 var(--ax-space-12);
558
556
  border-radius: var(--ax-border-radius-full);
559
557
  min-height: 2rem;
560
558
  margin: 0;
@@ -568,12 +566,12 @@
568
566
  }
569
567
 
570
568
  .navds-chips--readonly .navds-chips__chip {
571
- background-color: var(--ax-bg-neutral-moderateA);
569
+ background-color: var(--ax-bg-moderateA);
572
570
  }
573
571
 
574
572
  .navds-chips--small .navds-chips__chip {
575
573
  min-height: 1.5rem;
576
- padding: 0 var(--ax-spacing-2);
574
+ padding: 0 var(--ax-space-8);
577
575
  }
578
576
 
579
577
  .navds-chips--small .navds-chips__toggle-icon {
@@ -582,7 +580,7 @@
582
580
  }
583
581
 
584
582
  .navds-chips--small .navds-chips__toggle--with-checkmark {
585
- padding-left: var(--ax-spacing-1);
583
+ padding-left: var(--ax-space-4);
586
584
  }
587
585
 
588
586
  .navds-chips--small .navds-chips__removable-icon {
@@ -595,7 +593,7 @@
595
593
  }
596
594
 
597
595
  .navds-chips--small .navds-chips--icon-right {
598
- padding-right: var(--ax-spacing-05);
596
+ padding-right: var(--ax-space-2);
599
597
  }
600
598
 
601
599
  .navds-chips__toggle--action {
@@ -619,27 +617,27 @@
619
617
  }
620
618
 
621
619
  .navds-chips__toggle--neutral {
622
- box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
623
- background-color: var(--ax-bg-neutral-moderate);
620
+ box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
621
+ background-color: var(--ax-bg-moderate);
624
622
  color: var(--ax-text-default);
625
623
  }
626
624
 
627
625
  .navds-chips__toggle--neutral:hover {
628
- background-color: var(--ax-bg-neutral-moderate-hover);
626
+ background-color: var(--ax-bg-moderate-hover);
629
627
  }
630
628
 
631
629
  .navds-chips__toggle--neutral[data-pressed="true"] {
632
630
  box-shadow: none;
633
- background-color: var(--ax-bg-neutral-strong-pressed);
634
- color: var(--ax-text-neutral-contrast);
631
+ background-color: var(--ax-bg-strong-pressed);
632
+ color: var(--ax-text-contrast);
635
633
  }
636
634
 
637
635
  .navds-chips__toggle--neutral[data-pressed="true"]:hover {
638
- background-color: var(--ax-bg-neutral-strong-hover);
636
+ background-color: var(--ax-bg-strong-hover);
639
637
  }
640
638
 
641
639
  .navds-chips--medium .navds-chips__toggle--with-checkmark {
642
- padding-left: var(--ax-spacing-1-alt);
640
+ padding-left: var(--ax-space-6);
643
641
  }
644
642
 
645
643
  .navds-chips__removable {
@@ -656,12 +654,12 @@
656
654
  }
657
655
 
658
656
  .navds-chips__removable--neutral {
659
- background: var(--ax-bg-neutral-strong-pressed);
660
- color: var(--ax-text-neutral-contrast);
657
+ background: var(--ax-bg-strong-pressed);
658
+ color: var(--ax-text-contrast);
661
659
  }
662
660
 
663
661
  .navds-chips__removable--neutral:hover {
664
- background: var(--ax-bg-neutral-strong-hover);
662
+ background: var(--ax-bg-strong-hover);
665
663
  }
666
664
 
667
665
  .navds-chips__removable-icon {
@@ -674,11 +672,11 @@
674
672
  }
675
673
 
676
674
  .navds-chips--icon-left {
677
- padding-left: var(--ax-spacing-1-alt);
675
+ padding-left: var(--ax-space-6);
678
676
  }
679
677
 
680
678
  .navds-chips--icon-right {
681
- padding-right: var(--ax-spacing-1-alt);
679
+ padding-right: var(--ax-space-6);
682
680
  }
683
681
 
684
682
  @media (forced-colors: active) {
@@ -715,7 +713,7 @@
715
713
  }
716
714
 
717
715
  .navds-fieldset > :not(:first-child, :empty) {
718
- margin-top: var(--ax-spacing-2);
716
+ margin-top: var(--ax-space-8);
719
717
  }
720
718
 
721
719
  .navds-fieldset__description {
@@ -750,16 +748,16 @@
750
748
 
751
749
  .navds-dropzone__area {
752
750
  --__axc-dropzone-background: var(--ax-bg-input);
753
- --__axc-dropzone-icon-padding: var(--ax-spacing-2);
751
+ --__axc-dropzone-icon-padding: var(--ax-space-8);
754
752
  --__axc-dropzone-animation-length-long: .4s;
755
753
  --__axc-dropzone-animation-length-short: .25s;
756
754
  --__axc-dropzone-animation-ease-out: cubic-bezier(.3, 1, .3, 1);
757
755
  --__axc-dropzone-animation-over-under: cubic-bezier(.3, 1, .3, 1);
758
756
  align-items: center;
759
- gap: var(--ax-spacing-4);
757
+ gap: var(--ax-space-16);
760
758
  text-align: center;
761
759
  width: 100%;
762
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
760
+ padding: var(--ax-space-16) var(--ax-space-20);
763
761
  border: 1px dashed var(--ax-border-default);
764
762
  border-radius: var(--ax-border-radius-xlarge);
765
763
  background-color: var(--__axc-dropzone-background);
@@ -839,7 +837,7 @@
839
837
  }
840
838
 
841
839
  .navds-dropzone__area-release {
842
- top: var(--ax-spacing-4);
840
+ top: var(--ax-space-16);
843
841
  z-index: 1;
844
842
  pointer-events: none;
845
843
  transition: top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under), transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
@@ -850,7 +848,7 @@
850
848
  .navds-dropzone__area-release__icon {
851
849
  padding: var(--__axc-dropzone-icon-padding);
852
850
  border-radius: var(--ax-border-radius-full);
853
- background-color: var(--ax-bg-neutral-moderateA);
851
+ background-color: var(--ax-bg-moderateA);
854
852
  transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
855
853
  font-size: 1.5rem;
856
854
  display: grid;
@@ -879,7 +877,7 @@
879
877
  .navds-dropzone__area-disabled {
880
878
  color: var(--ax-text-subtle);
881
879
  align-items: center;
882
- gap: var(--ax-spacing-2);
880
+ gap: var(--ax-space-8);
883
881
  flex-direction: column;
884
882
  display: flex;
885
883
  }
@@ -895,8 +893,8 @@
895
893
  border: 1px solid var(--ax-border-subtleA);
896
894
  outline-offset: -1px;
897
895
  border-radius: var(--ax-border-radius-xlarge);
898
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
899
- gap: var(--ax-spacing-3);
896
+ padding: var(--ax-space-12) var(--ax-space-16);
897
+ gap: var(--ax-space-12);
900
898
  align-items: flex-start;
901
899
  transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
902
900
  display: flex;
@@ -907,12 +905,12 @@
907
905
  }
908
906
 
909
907
  .navds-file-item__icon {
910
- background-color: var(--ax-bg-neutral-moderateA);
908
+ background-color: var(--ax-bg-moderateA);
911
909
  color: var(--ax-text-default);
912
910
  border-radius: var(--ax-border-radius-full);
913
911
  min-width: 2.5rem;
914
912
  min-height: 2.5rem;
915
- margin-top: var(--ax-spacing-05);
913
+ margin-top: var(--ax-space-2);
916
914
  place-content: center;
917
915
  transition: background-color .25s cubic-bezier(0, .3, .15, 1);
918
916
  display: grid;
@@ -946,12 +944,12 @@
946
944
  }
947
945
 
948
946
  .navds-file-item__error .navds-file-item__error {
949
- padding-top: var(--ax-spacing-1);
947
+ padding-top: var(--ax-space-4);
950
948
  grid-template-rows: 1fr;
951
949
  }
952
950
 
953
951
  .navds-file-item__error-content {
954
- gap: var(--ax-spacing-1);
952
+ gap: var(--ax-space-4);
955
953
  min-height: 0;
956
954
  display: flex;
957
955
  }
@@ -964,7 +962,7 @@
964
962
 
965
963
  .navds-form-field {
966
964
  justify-items: start;
967
- gap: var(--ax-spacing-2);
965
+ gap: var(--ax-space-8);
968
966
  display: grid;
969
967
  }
970
968
 
@@ -991,8 +989,8 @@
991
989
  }
992
990
 
993
991
  .navds-form-field__readonly-icon {
994
- margin-top: var(--ax-spacing-05);
995
- margin-right: var(--ax-spacing-1);
992
+ margin-top: var(--ax-space-2);
993
+ margin-right: var(--ax-space-4);
996
994
  flex-shrink: 0;
997
995
  align-self: flex-start;
998
996
  }
@@ -1005,7 +1003,7 @@
1005
1003
 
1006
1004
  .navds-error-summary {
1007
1005
  background-color: var(--ax-bg-default);
1008
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
1006
+ padding: var(--ax-space-16) var(--ax-space-20);
1009
1007
  border: 4px solid var(--ax-border-danger);
1010
1008
  border-radius: var(--ax-border-radius-xlarge);
1011
1009
  outline-offset: 2px;
@@ -1022,21 +1020,21 @@
1022
1020
  }
1023
1021
 
1024
1022
  .navds-error-summary--small {
1025
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
1023
+ padding: var(--ax-space-12) var(--ax-space-16);
1026
1024
  }
1027
1025
 
1028
1026
  .navds-error-summary--small .navds-error-summary__heading {
1029
- scroll-margin-top: var(--ax-spacing-4);
1027
+ scroll-margin-top: var(--ax-space-16);
1030
1028
  }
1031
1029
 
1032
1030
  .navds-error-summary--small > .navds-error-summary__list {
1033
- margin: var(--ax-spacing-2) 0;
1034
- gap: var(--ax-spacing-2);
1035
- padding-left: var(--ax-spacing-5);
1031
+ margin: var(--ax-space-8) 0;
1032
+ gap: var(--ax-space-8);
1033
+ padding-left: var(--ax-space-20);
1036
1034
  }
1037
1035
 
1038
1036
  .navds-error-summary__heading {
1039
- scroll-margin-top: var(--ax-spacing-6);
1037
+ scroll-margin-top: var(--ax-space-24);
1040
1038
  }
1041
1039
 
1042
1040
  .navds-error-summary__heading:focus {
@@ -1044,9 +1042,9 @@
1044
1042
  }
1045
1043
 
1046
1044
  .navds-error-summary__list {
1047
- margin: var(--ax-spacing-3) 0;
1048
- gap: var(--ax-spacing-3);
1049
- padding-left: var(--ax-spacing-6);
1045
+ margin: var(--ax-space-12) 0;
1046
+ gap: var(--ax-space-12);
1047
+ padding-left: var(--ax-space-24);
1050
1048
  list-style: inherit;
1051
1049
  flex-direction: column;
1052
1050
  display: flex;
@@ -1124,10 +1122,10 @@
1124
1122
  }
1125
1123
 
1126
1124
  .navds-checkbox__label, .navds-radio__label {
1127
- padding: var(--ax-spacing-3) 0;
1125
+ padding: var(--ax-space-12) 0;
1128
1126
  cursor: pointer;
1129
- gap: var(--ax-spacing-2);
1130
- --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
1127
+ gap: var(--ax-space-8);
1128
+ --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
1131
1129
  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
1132
1130
  display: flex;
1133
1131
  }
@@ -1160,7 +1158,7 @@
1160
1158
  }
1161
1159
 
1162
1160
  .navds-checkbox--small > .navds-checkbox__label, .navds-radio--small > .navds-radio__label {
1163
- padding: var(--ax-spacing-1-alt) 0;
1161
+ padding: var(--ax-space-6) 0;
1164
1162
  }
1165
1163
 
1166
1164
  .navds-checkbox--small > .navds-checkbox__label:before, .navds-radio--small > .navds-radio__label:before {
@@ -1175,7 +1173,7 @@
1175
1173
 
1176
1174
  .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
1177
1175
  content: "";
1178
- transform: translate(var(--ax-spacing-1-alt), -50%);
1176
+ transform: translate(var(--ax-space-6), -50%);
1179
1177
  background-color: var(--ax-bg-default);
1180
1178
  border-radius: 1px;
1181
1179
  flex-shrink: 0;
@@ -1206,7 +1204,7 @@
1206
1204
  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
1207
1205
  color: var(--ax-bg-default);
1208
1206
  height: 1.5rem;
1209
- transform: translate(var(--ax-spacing-1-alt));
1207
+ transform: translate(var(--ax-space-6));
1210
1208
  pointer-events: none;
1211
1209
  align-items: center;
1212
1210
  display: flex;
@@ -1297,8 +1295,8 @@
1297
1295
  }
1298
1296
 
1299
1297
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
1300
- background-color: var(--ax-bg-neutral-strong);
1301
- box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
1298
+ background-color: var(--ax-bg-strong);
1299
+ box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-moderate);
1302
1300
  border-width: 0;
1303
1301
  }
1304
1302
 
@@ -1368,8 +1366,8 @@
1368
1366
  box-sizing: border-box;
1369
1367
  width: 100%;
1370
1368
  min-height: 3rem;
1371
- padding: var(--ax-spacing-2);
1372
- padding-right: var(--ax-spacing-10);
1369
+ padding: var(--ax-space-8);
1370
+ padding-right: var(--ax-space-40);
1373
1371
  display: inline-block;
1374
1372
  position: relative;
1375
1373
  }
@@ -1401,7 +1399,7 @@
1401
1399
  }
1402
1400
 
1403
1401
  .navds-select__chevron {
1404
- right: var(--ax-spacing-2);
1402
+ right: var(--ax-space-8);
1405
1403
  pointer-events: none;
1406
1404
  color: var(--ax-text-default);
1407
1405
  align-self: center;
@@ -1450,8 +1448,8 @@
1450
1448
  }
1451
1449
 
1452
1450
  .navds-select--readonly .navds-select__input {
1453
- background-color: var(--ax-bg-neutral-moderate);
1454
- border-color: var(--ax-border-neutral-subtleA);
1451
+ background-color: var(--ax-bg-moderate);
1452
+ border-color: var(--ax-border-subtleA);
1455
1453
  cursor: default;
1456
1454
  }
1457
1455
 
@@ -1509,11 +1507,11 @@
1509
1507
  }
1510
1508
 
1511
1509
  .navds-switch--small .navds-switch__content {
1512
- padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
1510
+ padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
1513
1511
  }
1514
1512
 
1515
1513
  .navds-switch--right.navds-switch--small .navds-switch__content {
1516
- padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
1514
+ padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
1517
1515
  }
1518
1516
 
1519
1517
  .navds-switch--with-description {
@@ -1532,7 +1530,7 @@
1532
1530
  background-color: var(--ax-bg-input);
1533
1531
  width: 2.75rem;
1534
1532
  height: 1.5rem;
1535
- top: var(--ax-spacing-3);
1533
+ top: var(--ax-space-12);
1536
1534
  border-radius: var(--ax-border-radius-full);
1537
1535
  border: 2px solid var(--ax-border-default);
1538
1536
  transition-property: background-color, border-color;
@@ -1543,7 +1541,7 @@
1543
1541
  }
1544
1542
 
1545
1543
  .navds-switch--small > .navds-switch__track {
1546
- top: var(--ax-spacing-1);
1544
+ top: var(--ax-space-4);
1547
1545
  }
1548
1546
 
1549
1547
  .navds-switch__input:checked ~ .navds-switch__track {
@@ -1572,7 +1570,7 @@
1572
1570
  }
1573
1571
 
1574
1572
  .navds-switch__thumb {
1575
- background-color: var(--ax-bg-neutral-strong);
1573
+ background-color: var(--ax-bg-strong);
1576
1574
  border-radius: var(--ax-border-radius-full);
1577
1575
  justify-content: center;
1578
1576
  align-items: center;
@@ -1639,8 +1637,8 @@
1639
1637
  }
1640
1638
 
1641
1639
  .navds-switch--readonly > .navds-switch__track, .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
1642
- background-color: var(--ax-bg-neutral-moderate);
1643
- border-color: var(--ax-border-neutral-subtleA);
1640
+ background-color: var(--ax-bg-moderate);
1641
+ border-color: var(--ax-border-subtleA);
1644
1642
  }
1645
1643
 
1646
1644
  .navds-switch--readonly > .navds-switch__label-wrapper, .navds-switch--readonly > .navds-switch__input {
@@ -1656,12 +1654,12 @@
1656
1654
  }
1657
1655
 
1658
1656
  .navds-switch--readonly .navds-switch__thumb {
1659
- background-color: var(--ax-bg-neutral-strong);
1657
+ background-color: var(--ax-bg-strong);
1660
1658
  }
1661
1659
 
1662
1660
  .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
1663
- background-color: var(--ax-bg-neutral-strong);
1664
- color: var(--ax-text-neutral-contrast);
1661
+ background-color: var(--ax-bg-strong);
1662
+ color: var(--ax-text-contrast);
1665
1663
  }
1666
1664
 
1667
1665
  @media (hover: hover) and (pointer: fine) {
@@ -1711,7 +1709,7 @@
1711
1709
 
1712
1710
  .navds-text-field__input {
1713
1711
  appearance: none;
1714
- padding: var(--ax-spacing-2);
1712
+ padding: var(--ax-space-8);
1715
1713
  background: var(--ax-bg-input);
1716
1714
  border-radius: var(--ax-border-radius-medium);
1717
1715
  border: 1px solid var(--ax-border-default);
@@ -1737,7 +1735,7 @@
1737
1735
  }
1738
1736
 
1739
1737
  .navds-text-field__input::placeholder {
1740
- color: var(--ax-text-neutral);
1738
+ color: var(--ax-text-subtle);
1741
1739
  }
1742
1740
 
1743
1741
  .navds-text-field__input[size] {
@@ -1745,7 +1743,7 @@
1745
1743
  }
1746
1744
 
1747
1745
  .navds-form-field--small .navds-text-field__input {
1748
- padding: 0 var(--ax-spacing-2);
1746
+ padding: 0 var(--ax-space-8);
1749
1747
  min-height: 2rem;
1750
1748
  }
1751
1749
 
@@ -1755,8 +1753,8 @@
1755
1753
  }
1756
1754
 
1757
1755
  .navds-text-field--readonly .navds-text-field__input {
1758
- background-color: var(--ax-bg-neutral-moderate);
1759
- border-color: var(--ax-border-neutral-subtleA);
1756
+ background-color: var(--ax-bg-moderate);
1757
+ border-color: var(--ax-border-subtleA);
1760
1758
  cursor: default;
1761
1759
  }
1762
1760
 
@@ -1786,7 +1784,7 @@
1786
1784
  .navds-textarea__input {
1787
1785
  height: var(--__axc-textarea-height);
1788
1786
  appearance: none;
1789
- padding: var(--ax-spacing-2);
1787
+ padding: var(--ax-space-8);
1790
1788
  background-color: var(--ax-bg-input);
1791
1789
  border-radius: var(--ax-border-radius-medium);
1792
1790
  border: 1px solid var(--ax-border-default);
@@ -1817,12 +1815,12 @@
1817
1815
  }
1818
1816
 
1819
1817
  .navds-form-field--small .navds-textarea__input {
1820
- padding: var(--ax-spacing-1-alt);
1818
+ padding: var(--ax-space-6);
1821
1819
  }
1822
1820
 
1823
1821
  .navds-textarea--readonly .navds-textarea__input {
1824
- background-color: var(--ax-bg-neutral-moderate);
1825
- border-color: var(--ax-border-neutral-subtleA);
1822
+ background-color: var(--ax-bg-moderate);
1823
+ border-color: var(--ax-border-subtleA);
1826
1824
  cursor: default;
1827
1825
  }
1828
1826
 
@@ -1913,7 +1911,7 @@
1913
1911
  }
1914
1912
 
1915
1913
  .navds-search__input {
1916
- padding-right: var(--ax-spacing-10);
1914
+ padding-right: var(--ax-space-40);
1917
1915
  }
1918
1916
 
1919
1917
  .navds-search__input:focus-visible {
@@ -1927,28 +1925,28 @@
1927
1925
  }
1928
1926
 
1929
1927
  .navds-search__input--simple {
1930
- padding-left: var(--ax-spacing-10);
1928
+ padding-left: var(--ax-space-40);
1931
1929
  }
1932
1930
 
1933
1931
  .navds-form-field--small .navds-search__input {
1934
- padding-right: var(--ax-spacing-7);
1932
+ padding-right: var(--ax-space-28);
1935
1933
  }
1936
1934
 
1937
1935
  .navds-form-field--small .navds-search__input--simple {
1938
- padding-left: var(--ax-spacing-7);
1936
+ padding-left: var(--ax-space-28);
1939
1937
  }
1940
1938
 
1941
1939
  .navds-form-field--small .navds-search__search-icon {
1942
- left: var(--ax-spacing-1);
1940
+ left: var(--ax-space-4);
1943
1941
  font-size: 1.25rem;
1944
1942
  }
1945
1943
 
1946
1944
  .navds-form-field--small .navds-search__button-clear {
1947
- right: var(--ax-spacing-1);
1945
+ right: var(--ax-space-4);
1948
1946
  }
1949
1947
 
1950
1948
  .navds-search__search-icon {
1951
- left: var(--ax-spacing-2);
1949
+ left: var(--ax-space-8);
1952
1950
  pointer-events: none;
1953
1951
  font-size: 1.5rem;
1954
1952
  position: absolute;
@@ -1961,7 +1959,7 @@
1961
1959
  }
1962
1960
 
1963
1961
  .navds-search__button-clear {
1964
- right: var(--ax-spacing-2);
1962
+ right: var(--ax-space-8);
1965
1963
  position: absolute;
1966
1964
  top: 50%;
1967
1965
  transform: translateY(-50%);
@@ -2015,9 +2013,9 @@
2015
2013
 
2016
2014
  .navds-combobox__wrapper {
2017
2015
  --__axc-combobox-icon-size: 1.5rem;
2018
- --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
2019
- --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
2020
- --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
2016
+ --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
2017
+ --__axc-combobox-list-item-padding-block: var(--ax-space-12);
2018
+ --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
2021
2019
  --__axc-combobox-border-width: 1px;
2022
2020
  --__axc-combobox-input-height: 2rem;
2023
2021
  border-radius: var(--ax-border-radius-medium);
@@ -2033,9 +2031,9 @@
2033
2031
 
2034
2032
  .navds-form-field--small .navds-combobox__wrapper {
2035
2033
  --__axc-combobox-icon-size: 1.25rem;
2036
- --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
2037
- --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
2038
- --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
2034
+ --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
2035
+ --__axc-combobox-list-item-padding-block: var(--ax-space-6);
2036
+ --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
2039
2037
  --__axc-combobox-input-height: 1.5rem;
2040
2038
  }
2041
2039
 
@@ -2056,11 +2054,11 @@
2056
2054
  }
2057
2055
 
2058
2056
  .navds-combobox--readonly .navds-combobox__selected-options .navds-chips__chip {
2059
- background-color: var(--ax-bg-neutral-moderateA);
2057
+ background-color: var(--ax-bg-moderateA);
2060
2058
  }
2061
2059
 
2062
2060
  .navds-combobox--readonly .navds-combobox__button-toggle-list {
2063
- color: var(--ax-bg-neutral-moderate);
2061
+ color: var(--ax-bg-moderate);
2064
2062
  }
2065
2063
 
2066
2064
  .navds-combobox--readonly .navds-combobox__wrapper {
@@ -2069,7 +2067,7 @@
2069
2067
  }
2070
2068
 
2071
2069
  .navds-combobox--readonly .navds-text-field__input, .navds-combobox--readonly .navds-combobox__input {
2072
- background-color: var(--ax-bg-neutral-moderate);
2070
+ background-color: var(--ax-bg-moderate);
2073
2071
  }
2074
2072
 
2075
2073
  .navds-combobox__button-toggle-list svg, .navds-combobox__list svg {
@@ -2176,7 +2174,7 @@
2176
2174
  }
2177
2175
 
2178
2176
  .navds-combobox__selected-options > li:only-child > .navds-combobox__input {
2179
- margin-left: var(--ax-spacing-1);
2177
+ margin-left: var(--ax-space-4);
2180
2178
  }
2181
2179
 
2182
2180
  .navds-combobox__input--hide-caret {
@@ -2224,7 +2222,7 @@
2224
2222
  max-height: 290px;
2225
2223
  left: 0;
2226
2224
  right: 0;
2227
- top: calc(100% + var(--ax-spacing-2));
2225
+ top: calc(100% + var(--ax-space-8));
2228
2226
  border: 1px solid var(--ax-border-subtleA);
2229
2227
  border-radius: var(--ax-border-radius-large);
2230
2228
  background-color: var(--ax-bg-raised);
@@ -2249,8 +2247,8 @@
2249
2247
  padding-block: var(--__axc-combobox-list-item-padding-block);
2250
2248
  padding-inline: var(--__axc-combobox-list-item-padding-inline);
2251
2249
  border-radius: var(--ax-border-radius-medium);
2252
- margin-inline: var(--ax-spacing-2);
2253
- margin-block: var(--ax-spacing-1);
2250
+ margin-inline: var(--ax-space-8);
2251
+ margin-block: var(--ax-space-4);
2254
2252
  border: 0;
2255
2253
  justify-content: space-between;
2256
2254
  align-items: center;
@@ -2268,9 +2266,9 @@
2268
2266
  }
2269
2267
 
2270
2268
  .navds-combobox__list-item--max-selected {
2271
- background-color: var(--ax-bg-neutral-moderateA);
2272
- border-bottom: 1px solid var(--ax-border-neutral-subtle);
2273
- padding-block: var(--ax-spacing-2);
2269
+ background-color: var(--ax-bg-moderateA);
2270
+ border-bottom: 1px solid var(--ax-border-subtle);
2271
+ padding-block: var(--ax-space-8);
2274
2272
  line-height: var(--ax-font-line-height-large);
2275
2273
  border-radius: 0;
2276
2274
  margin: 0;
@@ -2282,7 +2280,7 @@
2282
2280
  gap: inherit;
2283
2281
  background-color: inherit;
2284
2282
  padding: 0;
2285
- padding-block: var(--ax-spacing-1);
2283
+ padding-block: var(--ax-space-4);
2286
2284
  align-items: stretch;
2287
2285
  margin: 0;
2288
2286
  list-style: none;
@@ -2326,8 +2324,8 @@
2326
2324
  background: var(--ax-bg-accent-moderateA);
2327
2325
  cursor: pointer;
2328
2326
  margin: 0;
2329
- margin-block: calc(var(--ax-spacing-1) * -1);
2330
- padding-block: var(--ax-spacing-4);
2327
+ margin-block: calc(var(--ax-space-4) * -1);
2328
+ padding-block: var(--ax-space-16);
2331
2329
  border-radius: 0;
2332
2330
  justify-content: flex-start;
2333
2331
  gap: .25rem;
@@ -2362,7 +2360,7 @@
2362
2360
  }
2363
2361
 
2364
2362
  .navds-combobox__selected-options {
2365
- gap: var(--ax-spacing-1);
2363
+ gap: var(--ax-space-4);
2366
2364
  }
2367
2365
  }
2368
2366
 
@@ -2432,29 +2430,29 @@
2432
2430
  }
2433
2431
 
2434
2432
  .navds-form-summary {
2435
- border: 1px solid var(--ax-border-neutral-subtleA);
2433
+ border: 1px solid var(--ax-border-subtleA);
2436
2434
  border-radius: var(--ax-border-radius-xlarge);
2437
2435
  background: var(--ax-bg-raised);
2438
2436
  overflow: hidden;
2439
2437
  }
2440
2438
 
2441
2439
  .navds-form-summary__header {
2442
- background: var(--ax-bg-neutral-moderateA);
2443
- padding: var(--ax-spacing-4) var(--ax-spacing-6);
2440
+ background: var(--ax-bg-moderateA);
2441
+ padding: var(--ax-space-16) var(--ax-space-24);
2444
2442
  justify-content: space-between;
2445
- gap: 0 var(--ax-spacing-3);
2443
+ gap: 0 var(--ax-space-12);
2446
2444
  display: flex;
2447
2445
  }
2448
2446
 
2449
2447
  @media (max-width: 479px) {
2450
2448
  .navds-form-summary__header {
2451
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
2449
+ padding: var(--ax-space-12) var(--ax-space-16);
2452
2450
  flex-direction: column;
2453
2451
  }
2454
2452
  }
2455
2453
 
2456
2454
  .navds-form-summary__edit {
2457
- margin-top: var(--ax-spacing-1);
2455
+ margin-top: var(--ax-space-4);
2458
2456
  flex-shrink: 0;
2459
2457
  align-self: flex-start;
2460
2458
  }
@@ -2464,24 +2462,24 @@
2464
2462
  }
2465
2463
 
2466
2464
  .navds-form-summary__answers {
2467
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
2465
+ padding: var(--ax-space-16) var(--ax-space-20);
2468
2466
  margin: 0;
2469
2467
  }
2470
2468
 
2471
2469
  @media (max-width: 479px) {
2472
2470
  .navds-form-summary__answers {
2473
- padding: var(--ax-spacing-4);
2471
+ padding: var(--ax-space-16);
2474
2472
  }
2475
2473
  }
2476
2474
 
2477
2475
  .navds-form-summary__answer:not(:last-child) {
2478
- margin-bottom: var(--ax-spacing-4);
2479
- padding-bottom: var(--ax-spacing-4);
2476
+ margin-bottom: var(--ax-space-16);
2477
+ padding-bottom: var(--ax-space-16);
2480
2478
  border-bottom: 1px solid var(--ax-border-subtleA);
2481
2479
  }
2482
2480
 
2483
2481
  .navds-form-summary__answer:has(.navds-form-summary__answer) {
2484
- padding-bottom: var(--ax-spacing-6);
2482
+ padding-bottom: var(--ax-space-24);
2485
2483
  }
2486
2484
 
2487
2485
  .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -2490,22 +2488,22 @@
2490
2488
 
2491
2489
  @media (max-width: 479px) {
2492
2490
  .navds-form-summary__answer:not(:last-child) {
2493
- margin-bottom: var(--ax-spacing-3);
2494
- padding-bottom: var(--ax-spacing-3);
2491
+ margin-bottom: var(--ax-space-12);
2492
+ padding-bottom: var(--ax-space-12);
2495
2493
  }
2496
2494
 
2497
2495
  .navds-form-summary__answer:has(.navds-form-summary__answer) {
2498
- padding-bottom: var(--ax-spacing-5);
2496
+ padding-bottom: var(--ax-space-20);
2499
2497
  }
2500
2498
  }
2501
2499
 
2502
2500
  .navds-form-summary__value:first-of-type {
2503
- margin-top: var(--ax-spacing-1);
2501
+ margin-top: var(--ax-space-4);
2504
2502
  }
2505
2503
 
2506
2504
  .navds-form-summary__value .navds-form-summary__answers {
2507
- margin-top: var(--ax-spacing-2);
2508
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
2505
+ margin-top: var(--ax-space-8);
2506
+ padding: var(--ax-space-16) var(--ax-space-20);
2509
2507
  background: var(--ax-bg-info-moderateA);
2510
2508
  border-radius: var(--ax-border-radius-large);
2511
2509
  border: 1px solid var(--ax-border-info-subtleA);
@@ -2516,7 +2514,7 @@
2516
2514
  }
2517
2515
 
2518
2516
  .navds-form-progress__bar {
2519
- margin-bottom: var(--ax-spacing-2);
2517
+ margin-bottom: var(--ax-space-8);
2520
2518
  }
2521
2519
 
2522
2520
  .navds-form-progress__button:focus-visible {
@@ -2563,17 +2561,17 @@
2563
2561
  .navds-form-progress__stepper {
2564
2562
  border: 1px solid var(--ax-border-subtle);
2565
2563
  border-radius: var(--ax-border-radius-large);
2566
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
2567
- margin-top: var(--ax-spacing-1);
2564
+ padding: var(--ax-space-16) var(--ax-space-20);
2565
+ margin-top: var(--ax-space-4);
2568
2566
  background: var(--ax-bg-raised);
2569
2567
  }
2570
2568
 
2571
2569
  .navds-accordion__header {
2572
2570
  justify-content: flex-start;
2573
2571
  align-items: flex-start;
2574
- gap: var(--ax-spacing-3);
2572
+ gap: var(--ax-space-12);
2575
2573
  width: 100%;
2576
- padding: var(--ax-spacing-3);
2574
+ padding: var(--ax-space-12);
2577
2575
  text-align: left;
2578
2576
  cursor: pointer;
2579
2577
  border-radius: var(--ax-border-radius-large);
@@ -2598,7 +2596,6 @@
2598
2596
 
2599
2597
  .navds-accordion__header:hover {
2600
2598
  background-color: var(--ax-bg-accent-hoverA);
2601
- color: var(--ax-text-accent-strong);
2602
2599
  }
2603
2600
 
2604
2601
  .navds-accordion__header:hover:before, .navds-accordion__header:hover:after {
@@ -2679,7 +2676,7 @@
2679
2676
 
2680
2677
  .navds-accordion__content {
2681
2678
  --__acx-accordion-content-line-width: 2px;
2682
- padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
2679
+ padding-inline: var(--ax-space-24) var(--ax-space-12);
2683
2680
  max-height: 0;
2684
2681
  transition: all .25s cubic-bezier(.2, 0, 0, 1) allow-discrete;
2685
2682
  border-color: rgba(0, 0, 0, 0);
@@ -2708,13 +2705,13 @@
2708
2705
  }
2709
2706
 
2710
2707
  .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
2711
- padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
2708
+ padding-inline: var(--ax-space-24) var(--ax-space-12);
2712
2709
  }
2713
2710
 
2714
2711
  .navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
2715
2712
  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
2716
- padding-block: var(--ax-spacing-2);
2717
- padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
2713
+ padding-block: var(--ax-space-8);
2714
+ padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
2718
2715
  }
2719
2716
 
2720
2717
  @media (forced-colors: active) {
@@ -2726,9 +2723,9 @@
2726
2723
  .navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
2727
2724
  opacity: 1;
2728
2725
  max-height: fit-content;
2729
- padding-block: var(--ax-spacing-2);
2726
+ padding-block: var(--ax-space-8);
2730
2727
  border-color: var(--ax-border-subtleA);
2731
- padding-block-end: var(--ax-spacing-6);
2728
+ padding-block-end: var(--ax-space-24);
2732
2729
  display: block;
2733
2730
  overflow: visible;
2734
2731
  }
@@ -2743,8 +2740,8 @@
2743
2740
 
2744
2741
  .navds-alert {
2745
2742
  border-radius: var(--ax-border-radius-xlarge);
2746
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
2747
- gap: var(--ax-spacing-3);
2743
+ padding: var(--ax-space-16) var(--ax-space-20);
2744
+ gap: var(--ax-space-12);
2748
2745
  border: 1px solid;
2749
2746
  align-items: center;
2750
2747
  display: flex;
@@ -2770,8 +2767,8 @@
2770
2767
  }
2771
2768
 
2772
2769
  .navds-alert--small {
2773
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
2774
- gap: var(--ax-spacing-2);
2770
+ padding: var(--ax-space-12) var(--ax-space-16);
2771
+ gap: var(--ax-space-8);
2775
2772
  }
2776
2773
 
2777
2774
  .navds-alert--small > .navds-alert__icon {
@@ -2834,7 +2831,7 @@
2834
2831
  }
2835
2832
 
2836
2833
  .navds-alert--close-button > .navds-alert__wrapper, .navds-alert--close-button > .navds-alert__icon {
2837
- margin-block-start: var(--ax-spacing-05);
2834
+ margin-block-start: var(--ax-space-2);
2838
2835
  }
2839
2836
 
2840
2837
  .navds-alert--close-button.navds-alert--small {
@@ -2842,12 +2839,12 @@
2842
2839
  }
2843
2840
 
2844
2841
  .navds-alert--close-button.navds-alert--small > .navds-alert__wrapper, .navds-alert--close-button.navds-alert--small > .navds-alert__icon {
2845
- margin-block-start: var(--ax-spacing-1);
2842
+ margin-block-start: var(--ax-space-4);
2846
2843
  }
2847
2844
 
2848
2845
  .navds-chat {
2849
2846
  align-items: flex-end;
2850
- gap: var(--ax-spacing-3);
2847
+ gap: var(--ax-space-12);
2851
2848
  max-width: 40.75rem;
2852
2849
  display: flex;
2853
2850
  }
@@ -2890,7 +2887,7 @@
2890
2887
  }
2891
2888
 
2892
2889
  .navds-chat__bubble-wrapper {
2893
- gap: var(--ax-spacing-3);
2890
+ gap: var(--ax-space-12);
2894
2891
  flex-direction: column;
2895
2892
  margin: 0;
2896
2893
  padding: 0;
@@ -2899,9 +2896,9 @@
2899
2896
  }
2900
2897
 
2901
2898
  .navds-chat__bubble {
2902
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
2899
+ padding: var(--ax-space-16) var(--ax-space-20);
2903
2900
  background-color: var(--ax-bg-raised);
2904
- gap: var(--ax-spacing-2);
2901
+ gap: var(--ax-space-8);
2905
2902
  border-radius: var(--ax-border-radius-xlarge);
2906
2903
  border-bottom-left-radius: var(--ax-border-radius-small);
2907
2904
  border: 1px solid var(--ax-border-subtleA);
@@ -2911,7 +2908,7 @@
2911
2908
  }
2912
2909
 
2913
2910
  .navds-chat--small .navds-chat__bubble {
2914
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
2911
+ padding: var(--ax-space-12) var(--ax-space-16);
2915
2912
  }
2916
2913
 
2917
2914
  .navds-chat--info .navds-chat__bubble, .navds-chat--info .navds-chat__avatar {
@@ -2919,12 +2916,12 @@
2919
2916
  }
2920
2917
 
2921
2918
  .navds-chat--neutral .navds-chat__bubble, .navds-chat--neutral .navds-chat__avatar {
2922
- background-color: var(--ax-bg-neutral-raised);
2919
+ background-color: var(--ax-bg-raised);
2923
2920
  }
2924
2921
 
2925
2922
  .navds-chat__top-text {
2926
2923
  color: var(--ax-text-default);
2927
- gap: var(--ax-spacing-2);
2924
+ gap: var(--ax-space-8);
2928
2925
  align-items: baseline;
2929
2926
  margin: 0;
2930
2927
  font-weight: normal;
@@ -2948,7 +2945,7 @@
2948
2945
  }
2949
2946
 
2950
2947
  .navds-copybutton {
2951
- --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
2948
+ --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
2952
2949
  cursor: pointer;
2953
2950
  border-radius: var(--ax-border-radius-medium);
2954
2951
  padding: var(--__axc-copybutton-padding);
@@ -2962,15 +2959,15 @@
2962
2959
  }
2963
2960
 
2964
2961
  .navds-copybutton.navds-copybutton--icon-only {
2965
- --__axc-copybutton-padding: var(--ax-spacing-3);
2962
+ --__axc-copybutton-padding: var(--ax-space-12);
2966
2963
  }
2967
2964
 
2968
2965
  .navds-copybutton.navds-copybutton--icon-right {
2969
- --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
2966
+ --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
2970
2967
  }
2971
2968
 
2972
2969
  .navds-copybutton:hover {
2973
- background-color: var(--ax-bg-neutral-moderate-hoverA);
2970
+ background-color: var(--ax-bg-moderate-hoverA);
2974
2971
  }
2975
2972
 
2976
2973
  .navds-copybutton:focus-visible {
@@ -3001,17 +2998,17 @@
3001
2998
  }
3002
2999
 
3003
3000
  .navds-copybutton--small {
3004
- --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
3001
+ --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
3005
3002
  min-width: 2rem;
3006
3003
  min-height: 2rem;
3007
3004
  }
3008
3005
 
3009
3006
  .navds-copybutton--small.navds-copybutton--icon-right {
3010
- --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
3007
+ --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
3011
3008
  }
3012
3009
 
3013
3010
  .navds-copybutton--small.navds-copybutton--icon-only {
3014
- --__axc-copybutton-padding: var(--ax-spacing-1);
3011
+ --__axc-copybutton-padding: var(--ax-space-4);
3015
3012
  }
3016
3013
 
3017
3014
  .navds-copybutton--small .navds-copybutton__icon {
@@ -3019,21 +3016,21 @@
3019
3016
  }
3020
3017
 
3021
3018
  .navds-copybutton--small > .navds-copybutton__content {
3022
- gap: var(--ax-spacing-1-alt);
3019
+ gap: var(--ax-space-6);
3023
3020
  }
3024
3021
 
3025
3022
  .navds-copybutton--xsmall {
3026
- --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
3023
+ --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
3027
3024
  min-width: 1.5rem;
3028
3025
  min-height: 1.5rem;
3029
3026
  }
3030
3027
 
3031
3028
  .navds-copybutton--xsmall.navds-copybutton--icon-right {
3032
- --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
3029
+ --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
3033
3030
  }
3034
3031
 
3035
3032
  .navds-copybutton--xsmall.navds-copybutton--icon-only {
3036
- --__axc-copybutton-padding: var(--ax-spacing-05);
3033
+ --__axc-copybutton-padding: var(--ax-space-2);
3037
3034
  }
3038
3035
 
3039
3036
  .navds-copybutton--xsmall .navds-copybutton__icon {
@@ -3041,7 +3038,7 @@
3041
3038
  }
3042
3039
 
3043
3040
  .navds-copybutton--xsmall > .navds-copybutton__content {
3044
- gap: var(--ax-spacing-1);
3041
+ gap: var(--ax-space-4);
3045
3042
  }
3046
3043
 
3047
3044
  .navds-copybutton__icon {
@@ -3118,17 +3115,17 @@
3118
3115
  .navds-copybutton__content {
3119
3116
  justify-content: center;
3120
3117
  align-items: center;
3121
- gap: var(--ax-spacing-2);
3118
+ gap: var(--ax-space-8);
3122
3119
  display: inline-flex;
3123
3120
  }
3124
3121
 
3125
3122
  .navds-date {
3126
- padding: var(--ax-spacing-4) var(--ax-spacing-3);
3123
+ padding: var(--ax-space-16) var(--ax-space-12);
3127
3124
  }
3128
3125
 
3129
3126
  .navds-date .rdp-day_range_middle.rdp-day_disabled {
3130
3127
  color: var(--ax-text-default);
3131
- background: var(--ax-bg-neutral-moderateA);
3128
+ background: var(--ax-bg-moderateA);
3132
3129
  }
3133
3130
 
3134
3131
  .navds-date .rdp-day_range_middle.rdp-day_selected {
@@ -3138,7 +3135,7 @@
3138
3135
  }
3139
3136
 
3140
3137
  .navds-date .rdp-month, .navds-date.rdp-month {
3141
- gap: var(--ax-spacing-5);
3138
+ gap: var(--ax-space-20);
3142
3139
  display: grid;
3143
3140
  }
3144
3141
 
@@ -3187,7 +3184,7 @@
3187
3184
 
3188
3185
  .navds-date .rdp-day_disabled {
3189
3186
  cursor: not-allowed;
3190
- background-color: var(--ax-bg-neutral-moderateA);
3187
+ background-color: var(--ax-bg-moderateA);
3191
3188
  color: var(--ax-text-subtle);
3192
3189
  text-decoration: line-through;
3193
3190
  }
@@ -3230,8 +3227,8 @@
3230
3227
  .navds-date__caption {
3231
3228
  justify-content: space-between;
3232
3229
  align-items: center;
3233
- gap: var(--ax-spacing-1);
3234
- padding-inline: var(--ax-spacing-1);
3230
+ gap: var(--ax-space-4);
3231
+ padding-inline: var(--ax-space-4);
3235
3232
  display: flex;
3236
3233
  }
3237
3234
 
@@ -3276,18 +3273,18 @@
3276
3273
  }
3277
3274
 
3278
3275
  .navds-date__field-input.navds-text-field__input {
3279
- padding-right: var(--ax-spacing-12);
3276
+ padding-right: var(--ax-space-48);
3280
3277
  }
3281
3278
 
3282
3279
  .navds-form-field--small .navds-date__field-input {
3283
- padding-right: var(--ax-spacing-8);
3280
+ padding-right: var(--ax-space-32);
3284
3281
  }
3285
3282
 
3286
3283
  .navds-date__field-button {
3287
3284
  color: var(--ax-text-default);
3288
3285
  cursor: pointer;
3289
3286
  border-radius: calc(var(--ax-border-radius-medium) - 1px);
3290
- padding: var(--ax-spacing-3);
3287
+ padding: var(--ax-space-12);
3291
3288
  background: none;
3292
3289
  border: none;
3293
3290
  border-start-start-radius: 0;
@@ -3306,7 +3303,7 @@
3306
3303
  }
3307
3304
 
3308
3305
  .navds-form-field--small .navds-date__field-button {
3309
- padding: var(--ax-spacing-1);
3306
+ padding: var(--ax-space-4);
3310
3307
  }
3311
3308
 
3312
3309
  .navds-form-field--disabled .navds-date__field-button {
@@ -3331,7 +3328,7 @@
3331
3328
 
3332
3329
  .navds-date__week-row {
3333
3330
  align-items: center;
3334
- gap: var(--ax-spacing-05);
3331
+ gap: var(--ax-space-2);
3335
3332
  display: flex;
3336
3333
  }
3337
3334
 
@@ -3345,7 +3342,7 @@
3345
3342
  }
3346
3343
 
3347
3344
  .navds-date__weeknumber:active .navds-date__weeknumber-number {
3348
- color: var(--ax-text-neutral-contrast);
3345
+ color: var(--ax-text-contrast);
3349
3346
  }
3350
3347
 
3351
3348
  .navds-date__week-wrapper {
@@ -3357,24 +3354,24 @@
3357
3354
  }
3358
3355
 
3359
3356
  .navds-date__modal-body {
3360
- padding: var(--ax-spacing-4);
3357
+ padding: var(--ax-space-16);
3361
3358
  align-items: flex-end;
3362
- gap: var(--ax-spacing-2);
3359
+ gap: var(--ax-space-8);
3363
3360
  flex-direction: column;
3364
3361
  display: flex;
3365
3362
  }
3366
3363
 
3367
3364
  @media (min-width: 480px) {
3368
3365
  .navds-date {
3369
- padding: var(--ax-spacing-5) var(--ax-spacing-4);
3366
+ padding: var(--ax-space-20) var(--ax-space-16);
3370
3367
  }
3371
3368
 
3372
3369
  .navds-date__modal-body {
3373
- padding: var(--ax-spacing-6);
3370
+ padding: var(--ax-space-24);
3374
3371
  }
3375
3372
 
3376
3373
  .navds-date__caption {
3377
- gap: var(--ax-spacing-2);
3374
+ gap: var(--ax-space-8);
3378
3375
  }
3379
3376
 
3380
3377
  .navds-date .rdp-button, .navds-date__caption-button {
@@ -3507,9 +3504,9 @@
3507
3504
  }
3508
3505
 
3509
3506
  .navds-action-menu__content > .navds-action-menu__content-inner {
3510
- --__axc-action-menu-content-p: var(--ax-spacing-2);
3511
- --__axc-action-menu-item-pr: var(--ax-spacing-2);
3512
- --__axc-action-menu-item-pl: var(--ax-spacing-2);
3507
+ --__axc-action-menu-content-p: var(--ax-space-8);
3508
+ --__axc-action-menu-item-pr: var(--ax-space-8);
3509
+ --__axc-action-menu-item-pl: var(--ax-space-8);
3513
3510
  --__axc-action-menu-item-height: 2rem;
3514
3511
  border-radius: var(--ax-border-radius-large);
3515
3512
  background-color: var(--ax-bg-raised);
@@ -3525,7 +3522,7 @@
3525
3522
 
3526
3523
  .navds-action-menu__item {
3527
3524
  align-items: center;
3528
- gap: var(--ax-spacing-2);
3525
+ gap: var(--ax-space-8);
3529
3526
  min-height: var(--__axc-action-menu-item-height);
3530
3527
  cursor: default;
3531
3528
  border-radius: var(--ax-border-radius-medium);
@@ -3556,15 +3553,15 @@
3556
3553
  }
3557
3554
 
3558
3555
  .navds-action-menu__item--has-icon {
3559
- --__axc-action-menu-item-pl: var(--ax-spacing-6);
3556
+ --__axc-action-menu-item-pl: var(--ax-space-24);
3560
3557
  }
3561
3558
 
3562
3559
  .navds-action-menu__sub-trigger {
3563
- --__axc-action-menu-item-pr: var(--ax-spacing-05);
3560
+ --__axc-action-menu-item-pr: var(--ax-space-2);
3564
3561
  }
3565
3562
 
3566
3563
  .navds-action-menu__sub-trigger[data-state="open"] {
3567
- background-color: var(--ax-bg-neutral-moderate-pressed);
3564
+ background-color: var(--ax-bg-moderate-pressed);
3568
3565
  }
3569
3566
 
3570
3567
  .navds-action-menu__sub-trigger:focus {
@@ -3582,12 +3579,12 @@
3582
3579
 
3583
3580
  .navds-action-menu__marker {
3584
3581
  align-items: center;
3585
- gap: var(--ax-spacing-1);
3582
+ gap: var(--ax-space-4);
3586
3583
  display: flex;
3587
3584
  }
3588
3585
 
3589
3586
  .navds-action-menu__marker--right {
3590
- padding-left: var(--ax-spacing-4);
3587
+ padding-left: var(--ax-space-16);
3591
3588
  margin-left: auto;
3592
3589
  }
3593
3590
 
@@ -3605,10 +3602,10 @@
3605
3602
  }
3606
3603
 
3607
3604
  .navds-action-menu__shortcut {
3608
- background-color: var(--ax-bg-neutral-moderateA);
3605
+ background-color: var(--ax-bg-moderateA);
3609
3606
  color: var(--ax-text-default);
3610
3607
  border-radius: var(--ax-border-radius-small);
3611
- padding: 0 var(--ax-spacing-1);
3608
+ padding: 0 var(--ax-space-4);
3612
3609
  min-width: 1.125rem;
3613
3610
  height: 1.125rem;
3614
3611
  line-height: 1;
@@ -3634,7 +3631,7 @@
3634
3631
 
3635
3632
  .navds-action-menu__divider {
3636
3633
  height: 1px;
3637
- margin-block: var(--ax-spacing-2);
3634
+ margin-block: var(--ax-space-8);
3638
3635
  background-color: var(--ax-border-subtleA);
3639
3636
  }
3640
3637
 
@@ -3657,8 +3654,8 @@
3657
3654
 
3658
3655
  .navds-expansioncard {
3659
3656
  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
3660
- --__axc-expansioncard-padding-block: var(--ax-spacing-4);
3661
- --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
3657
+ --__axc-expansioncard-padding-block: var(--ax-space-16);
3658
+ --__axc-expansioncard-padding-inline: var(--ax-space-20);
3662
3659
  border-radius: var(--ax-border-radius-xlarge);
3663
3660
  background-color: var(--ax-bg-raised);
3664
3661
  border: 1px solid var(--ax-border-default);
@@ -3671,12 +3668,12 @@
3671
3668
  }
3672
3669
 
3673
3670
  .navds-expansioncard--small {
3674
- --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
3675
- --__axc-expansioncard-padding-block: var(--ax-spacing-3);
3671
+ --__axc-expansioncard-padding-inline: var(--ax-space-16);
3672
+ --__axc-expansioncard-padding-block: var(--ax-space-12);
3676
3673
  }
3677
3674
 
3678
3675
  .navds-expansioncard--small > .navds-expansioncard__header .navds-expansioncard__title--small {
3679
- margin-top: var(--ax-spacing-05);
3676
+ margin-top: var(--ax-space-2);
3680
3677
  }
3681
3678
 
3682
3679
  .navds-expansioncard--small :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
@@ -3689,7 +3686,7 @@
3689
3686
  }
3690
3687
 
3691
3688
  .navds-expansioncard__header {
3692
- gap: var(--ax-spacing-4);
3689
+ gap: var(--ax-space-16);
3693
3690
  width: 100%;
3694
3691
  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
3695
3692
  border-radius: var(--__axc-expansioncard-border-radius);
@@ -3700,7 +3697,7 @@
3700
3697
  }
3701
3698
 
3702
3699
  .navds-expansioncard__header:hover {
3703
- background-color: var(--ax-bg-neutral-raised-hover);
3700
+ background-color: var(--ax-bg-hover);
3704
3701
  }
3705
3702
 
3706
3703
  .navds-expansioncard__header[data-open="true"] {
@@ -3728,11 +3725,11 @@
3728
3725
  }
3729
3726
 
3730
3727
  .navds-expansioncard__title--medium {
3731
- margin-top: var(--ax-spacing-2);
3728
+ margin-top: var(--ax-space-8);
3732
3729
  }
3733
3730
 
3734
3731
  .navds-expansioncard__title--large {
3735
- margin-top: var(--ax-spacing-1);
3732
+ margin-top: var(--ax-space-4);
3736
3733
  }
3737
3734
 
3738
3735
  .navds-expansioncard__header-button {
@@ -3772,7 +3769,7 @@
3772
3769
  }
3773
3770
 
3774
3771
  .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
3775
- background-color: var(--ax-bg-neutral-moderate-hoverA);
3772
+ background-color: var(--ax-bg-moderate-hoverA);
3776
3773
  }
3777
3774
 
3778
3775
  .navds-expansioncard__header-chevron {
@@ -3872,22 +3869,22 @@
3872
3869
  }
3873
3870
 
3874
3871
  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > .navds-guide-panel__content {
3875
- margin-top: var(--ax-spacing-5);
3872
+ margin-top: var(--ax-space-20);
3876
3873
  }
3877
3874
 
3878
3875
  .navds-guide-panel[data-poster="false"] > .navds-guide-panel__content {
3879
- margin-left: var(--ax-spacing-5);
3876
+ margin-left: var(--ax-space-20);
3880
3877
  }
3881
3878
 
3882
3879
  @media (min-width: 480px) {
3883
3880
  .navds-guide-panel[data-responsive="true"] > .navds-guide-panel__content {
3884
3881
  margin-top: 0;
3885
- margin-left: var(--ax-spacing-5);
3882
+ margin-left: var(--ax-space-20);
3886
3883
  }
3887
3884
  }
3888
3885
 
3889
3886
  .navds-guide-panel__content-inner {
3890
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
3887
+ padding: var(--ax-space-12) var(--ax-space-16);
3891
3888
  border-radius: var(--ax-border-radius-xlarge);
3892
3889
  background-color: var(--ax-bg-raised);
3893
3890
  height: 100%;
@@ -3900,7 +3897,7 @@
3900
3897
 
3901
3898
  @media (min-width: 480px) {
3902
3899
  .navds-guide-panel__content-inner {
3903
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
3900
+ padding: var(--ax-space-16) var(--ax-space-20);
3904
3901
  }
3905
3902
 
3906
3903
  .navds-guide-panel[data-responsive="true"] .navds-guide-panel__content-inner {
@@ -3915,20 +3912,20 @@
3915
3912
 
3916
3913
  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) .navds-guide-panel__tail {
3917
3914
  left: 50%;
3918
- top: calc(var(--ax-spacing-4) * -1 - 2px);
3915
+ top: calc(var(--ax-space-16) * -1 - 2px);
3919
3916
  transform: translateX(-48%);
3920
3917
  }
3921
3918
 
3922
3919
  .navds-guide-panel[data-poster="false"] .navds-guide-panel__tail {
3923
3920
  top: calc(var(--__axc-guide-panel-guide-size) / 2);
3924
- left: calc(var(--ax-spacing-5) * -1 - 2px);
3921
+ left: calc(var(--ax-space-20) * -1 - 2px);
3925
3922
  transform: translateY(-48%)rotateZ(-90deg)scaleX(-1);
3926
3923
  }
3927
3924
 
3928
3925
  @media (min-width: 480px) {
3929
3926
  .navds-guide-panel[data-responsive="true"] .navds-guide-panel__tail {
3930
3927
  top: calc(var(--__axc-guide-panel-guide-size) / 2);
3931
- left: calc(var(--ax-spacing-5) * -1 - 2px);
3928
+ left: calc(var(--ax-space-20) * -1 - 2px);
3932
3929
  transform: translateY(-48%)rotateZ(-90deg)scaleX(-1);
3933
3930
  }
3934
3931
  }
@@ -3937,7 +3934,7 @@
3937
3934
  cursor: pointer;
3938
3935
  border-radius: var(--ax-border-radius-full);
3939
3936
  color: var(--ax-bg-accent-strong);
3940
- padding: calc(var(--ax-spacing-1) / 2);
3937
+ padding: calc(var(--ax-space-4) / 2);
3941
3938
  background-color: rgba(0, 0, 0, 0);
3942
3939
  border: 0;
3943
3940
  justify-content: center;
@@ -3953,7 +3950,7 @@
3953
3950
 
3954
3951
  .navds-help-text__popover.navds-popover {
3955
3952
  background-color: var(--ax-bg-info-moderate);
3956
- max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
3953
+ max-width: min(65ch, calc(100vw - var(--ax-space-24)));
3957
3954
  border-radius: var(--ax-border-radius-large);
3958
3955
  border: 1px solid var(--ax-border-info);
3959
3956
  }
@@ -4006,7 +4003,7 @@
4006
4003
  font-weight: var(--ax-font-weight-bold);
4007
4004
  text-align: left;
4008
4005
  padding-block: 0;
4009
- padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
4006
+ padding-inline: var(--ax-space-24) var(--ax-space-20);
4010
4007
  border: none;
4011
4008
  border-right: 1px solid var(--ax-border-subtleA);
4012
4009
  color: var(--ax-text-default);
@@ -4024,7 +4021,7 @@
4024
4021
  }
4025
4022
 
4026
4023
  .navds-internalheader__title:hover {
4027
- background: var(--ax-bg-neutral-moderate-hover);
4024
+ background: var(--ax-bg-moderate-hover);
4028
4025
  }
4029
4026
 
4030
4027
  .navds-internalheader__title:is(:hover, :active):not(button, a) {
@@ -4032,20 +4029,20 @@
4032
4029
  }
4033
4030
 
4034
4031
  .navds-internalheader__user {
4035
- padding: 0 var(--ax-spacing-5);
4032
+ padding: 0 var(--ax-space-20);
4036
4033
  border-left: 1px solid var(--ax-border-subtleA);
4037
4034
  align-items: center;
4038
4035
  display: flex;
4039
4036
  }
4040
4037
 
4041
4038
  .navds-internalheader__button {
4042
- padding: 0 var(--ax-spacing-3);
4039
+ padding: 0 var(--ax-space-12);
4043
4040
  font: inherit;
4044
4041
  cursor: pointer;
4045
4042
  text-align: left;
4046
4043
  justify-self: center;
4047
4044
  align-items: center;
4048
- gap: var(--ax-spacing-2);
4045
+ gap: var(--ax-space-8);
4049
4046
  border: none;
4050
4047
  border-left: 1px solid var(--ax-border-subtleA);
4051
4048
  color: var(--ax-text-default);
@@ -4057,7 +4054,7 @@
4057
4054
  }
4058
4055
 
4059
4056
  .navds-internalheader__button:hover {
4060
- background: var(--ax-bg-neutral-moderate-hover);
4057
+ background: var(--ax-bg-moderate-hover);
4061
4058
  }
4062
4059
 
4063
4060
  @media (forced-colors: active) {
@@ -4076,18 +4073,18 @@
4076
4073
  }
4077
4074
 
4078
4075
  :is(.navds-internalheader__title, .navds-internalheader__button):active {
4079
- background: var(--ax-bg-neutral-moderate-pressed);
4076
+ background: var(--ax-bg-moderate-pressed);
4080
4077
  }
4081
4078
 
4082
4079
  .navds-internalheader__user-button {
4083
- padding-left: var(--ax-spacing-5);
4084
- gap: var(--ax-spacing-4);
4080
+ padding-left: var(--ax-space-20);
4081
+ gap: var(--ax-space-16);
4085
4082
  }
4086
4083
 
4087
4084
  .navds-link {
4088
4085
  color: var(--ax-text-accent);
4089
4086
  align-items: center;
4090
- gap: var(--ax-spacing-05);
4087
+ gap: var(--ax-space-2);
4091
4088
  text-underline-offset: .1em;
4092
4089
  text-decoration: underline;
4093
4090
  text-decoration-thickness: .05em;
@@ -4204,7 +4201,7 @@
4204
4201
  }
4205
4202
 
4206
4203
  .navds-loader__background {
4207
- stroke: var(--ax-border-neutral-subtleA);
4204
+ stroke: var(--ax-border-subtleA);
4208
4205
  stroke-width: var(--__axc-loader-stroke-width);
4209
4206
  }
4210
4207
 
@@ -4316,7 +4313,7 @@
4316
4313
  }
4317
4314
 
4318
4315
  .navds-modal--small .navds-modal__header, .navds-modal--small .navds-modal__body, .navds-modal--small .navds-modal__footer {
4319
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
4316
+ padding: var(--ax-space-12) var(--ax-space-16);
4320
4317
  }
4321
4318
 
4322
4319
  @media (min-width: 480px) {
@@ -4352,17 +4349,17 @@
4352
4349
  }
4353
4350
 
4354
4351
  .navds-modal__button {
4355
- margin-left: var(--ax-spacing-4);
4352
+ margin-left: var(--ax-space-16);
4356
4353
  float: right;
4357
4354
  }
4358
4355
 
4359
4356
  .navds-modal__header {
4360
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
4357
+ padding: var(--ax-space-16) var(--ax-space-20);
4361
4358
  }
4362
4359
 
4363
4360
  .navds-modal__header-icon svg {
4364
4361
  vertical-align: -.25rem;
4365
- margin-right: var(--ax-spacing-1);
4362
+ margin-right: var(--ax-space-4);
4366
4363
  display: inline;
4367
4364
  }
4368
4365
 
@@ -4372,7 +4369,7 @@
4372
4369
  }
4373
4370
 
4374
4371
  .navds-modal__body {
4375
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
4372
+ padding: var(--ax-space-16) var(--ax-space-20);
4376
4373
  overscroll-behavior: contain;
4377
4374
  background: linear-gradient(var(--__axc-modal-bg) 30%, transparent) top, linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
4378
4375
  background-repeat: no-repeat;
@@ -4383,12 +4380,12 @@
4383
4380
  }
4384
4381
 
4385
4382
  .navds-modal__header + .navds-modal__body {
4386
- padding-top: var(--ax-spacing-0);
4383
+ padding-top: var(--ax-space-0);
4387
4384
  }
4388
4385
 
4389
4386
  .navds-modal__footer {
4390
- gap: var(--ax-spacing-4);
4391
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
4387
+ gap: var(--ax-space-16);
4388
+ padding: var(--ax-space-16) var(--ax-space-20);
4392
4389
  flex-flow: row-reverse wrap;
4393
4390
  display: flex;
4394
4391
  }
@@ -4440,7 +4437,7 @@
4440
4437
  }
4441
4438
 
4442
4439
  .navds-pagination__list {
4443
- gap: var(--ax-spacing-3);
4440
+ gap: var(--ax-space-12);
4444
4441
  margin: 0;
4445
4442
  padding: 0;
4446
4443
  list-style: none;
@@ -4469,8 +4466,8 @@
4469
4466
  }
4470
4467
 
4471
4468
  .navds-pagination__item[data-selected="true"] {
4472
- background-color: var(--ax-bg-neutral-strong-pressed);
4473
- color: var(--ax-text-neutral-contrast);
4469
+ background-color: var(--ax-bg-strong-pressed);
4470
+ color: var(--ax-text-contrast);
4474
4471
  }
4475
4472
 
4476
4473
  .navds-pagination--invisible {
@@ -4483,11 +4480,11 @@
4483
4480
  box-shadow: var(--ax-shadow-dialog);
4484
4481
  border: 1px solid var(--ax-border-subtleA);
4485
4482
  border-radius: var(--ax-border-radius-xlarge);
4486
- max-width: calc(100vw - var(--ax-spacing-6));
4483
+ max-width: calc(100vw - var(--ax-space-24));
4487
4484
  }
4488
4485
 
4489
4486
  .navds-popover__content {
4490
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
4487
+ padding: var(--ax-space-16) var(--ax-space-20);
4491
4488
  }
4492
4489
 
4493
4490
  .navds-popover--hidden {
@@ -4503,7 +4500,7 @@
4503
4500
  --__axc-tag-text: ;
4504
4501
  --__axc-tag-text-strong: ;
4505
4502
  border-radius: var(--ax-border-radius-medium);
4506
- padding: var(--ax-spacing-05) var(--ax-spacing-2);
4503
+ padding: var(--ax-space-2) var(--ax-space-8);
4507
4504
  justify-content: center;
4508
4505
  align-items: center;
4509
4506
  min-height: 2rem;
@@ -4512,7 +4509,7 @@
4512
4509
  }
4513
4510
 
4514
4511
  .navds-tag:has(.navds-tag__icon--left) {
4515
- gap: var(--ax-spacing-05);
4512
+ gap: var(--ax-space-2);
4516
4513
  }
4517
4514
 
4518
4515
  .navds-tag--info, .navds-tag--alt3 {
@@ -4548,38 +4545,38 @@
4548
4545
  }
4549
4546
 
4550
4547
  .navds-tag--neutral {
4551
- --__axc-tag-border: var(--ax-border-neutral);
4552
- --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
4553
- --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
4554
- --__axc-tag-text: var(--ax-text-neutral-strong);
4555
- --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
4548
+ --__axc-tag-border: var(--ax-border-default);
4549
+ --__axc-tag-bg: var(--ax-bg-moderateA);
4550
+ --__axc-tag-bg-strong: var(--ax-bg-strong);
4551
+ --__axc-tag-text: var(--ax-text-default);
4552
+ --__axc-tag-text-strong: var(--ax-text-contrast);
4556
4553
  }
4557
4554
 
4558
- .navds-tag--meta-purple, .navds-tag--alt1 {
4559
- --__axc-tag-border: var(--ax-border-meta-purple);
4560
- --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
4561
- --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
4562
- --__axc-tag-text: var(--ax-text-meta-purple-strong);
4563
- --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
4555
+ .navds-tag--meta-1, .navds-tag--alt1 {
4556
+ --__axc-tag-border: var(--ax-border-meta-1);
4557
+ --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
4558
+ --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
4559
+ --__axc-tag-text: var(--ax-text-meta-1-strong);
4560
+ --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
4564
4561
  }
4565
4562
 
4566
- .navds-tag--meta-lime, .navds-tag--alt2 {
4567
- --__axc-tag-border: var(--ax-border-meta-lime);
4568
- --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
4569
- --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
4570
- --__axc-tag-text: var(--ax-text-meta-lime-strong);
4571
- --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
4563
+ .navds-tag--meta-2, .navds-tag--alt2 {
4564
+ --__axc-tag-border: var(--ax-border-meta-2);
4565
+ --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
4566
+ --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
4567
+ --__axc-tag-text: var(--ax-text-meta-2-strong);
4568
+ --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
4572
4569
  }
4573
4570
 
4574
4571
  .navds-tag--small {
4575
4572
  min-height: 1.5rem;
4576
- padding: 0 var(--ax-spacing-1-alt);
4573
+ padding: 0 var(--ax-space-6);
4577
4574
  --__axc-tag-icon-size: 1.25rem;
4578
4575
  }
4579
4576
 
4580
4577
  .navds-tag--xsmall {
4581
4578
  min-height: 1.25rem;
4582
- padding: 0 var(--ax-spacing-1);
4579
+ padding: 0 var(--ax-space-4);
4583
4580
  --__axc-tag-icon-size: 1rem;
4584
4581
  --__axc-tag-icon-margin: -1px;
4585
4582
  }
@@ -4633,7 +4630,7 @@
4633
4630
  .navds-timeline__axislabels {
4634
4631
  box-sizing: content-box;
4635
4632
  height: 1rem;
4636
- margin-bottom: var(--ax-spacing-1);
4633
+ margin-bottom: var(--ax-space-4);
4637
4634
  grid-column: 2;
4638
4635
  position: relative;
4639
4636
  }
@@ -4641,9 +4638,9 @@
4641
4638
  .navds-timeline__row-label {
4642
4639
  white-space: nowrap;
4643
4640
  width: auto;
4644
- margin-right: var(--ax-spacing-4);
4641
+ margin-right: var(--ax-space-16);
4645
4642
  align-items: center;
4646
- gap: var(--ax-spacing-2);
4643
+ gap: var(--ax-space-8);
4647
4644
  grid-column: 1;
4648
4645
  min-height: 1.5rem;
4649
4646
  display: flex;
@@ -4660,8 +4657,8 @@
4660
4657
  }
4661
4658
 
4662
4659
  .navds-timeline__row {
4663
- background: var(--ax-bg-neutral);
4664
- margin: var(--ax-spacing-4) 0;
4660
+ background: var(--ax-bg-soft);
4661
+ margin: var(--ax-space-16) 0;
4665
4662
  grid-column: 2;
4666
4663
  display: flex;
4667
4664
  }
@@ -4708,7 +4705,7 @@
4708
4705
  }
4709
4706
 
4710
4707
  .navds-timeline__period--inner {
4711
- margin: 0 var(--ax-spacing-2);
4708
+ margin: 0 var(--ax-space-8);
4712
4709
  white-space: nowrap;
4713
4710
  text-overflow: clip;
4714
4711
  text-align: left;
@@ -4790,18 +4787,18 @@
4790
4787
  }
4791
4788
 
4792
4789
  .navds-timeline__period--neutral {
4793
- background: var(--ax-bg-neutral-moderate);
4794
- border: solid 1px var(--ax-border-neutral);
4795
- color: var(--ax-text-neutral-icon);
4790
+ background: var(--ax-bg-moderate);
4791
+ border: solid 1px var(--ax-border-default);
4792
+ color: var(--ax-text-icon);
4796
4793
  }
4797
4794
 
4798
4795
  .navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
4799
- background: var(--ax-bg-neutral-moderate-hover);
4796
+ background: var(--ax-bg-moderate-hover);
4800
4797
  }
4801
4798
 
4802
4799
  .navds-timeline__period--neutral.navds-timeline__period--clickable.navds-timeline__period--selected {
4803
- background: var(--ax-bg-neutral-strong-pressed);
4804
- color: var(--ax-text-neutral-contrast);
4800
+ background: var(--ax-bg-strong-pressed);
4801
+ color: var(--ax-text-contrast);
4805
4802
  border: none;
4806
4803
  }
4807
4804
 
@@ -4837,7 +4834,7 @@
4837
4834
  box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
4838
4835
  z-index: 2;
4839
4836
  border-radius: var(--ax-border-radius-full);
4840
- padding: var(--ax-spacing-2);
4837
+ padding: var(--ax-space-8);
4841
4838
  border: none;
4842
4839
  position: relative;
4843
4840
  }
@@ -4871,7 +4868,7 @@
4871
4868
  }
4872
4869
 
4873
4870
  .navds-timeline__zoom {
4874
- margin-top: var(--ax-spacing-6);
4871
+ margin-top: var(--ax-space-24);
4875
4872
  float: right;
4876
4873
  list-style-type: none;
4877
4874
  display: flex;
@@ -4900,13 +4897,13 @@
4900
4897
  }
4901
4898
 
4902
4899
  .navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
4903
- background: var(--ax-bg-neutral-moderate-hoverA);
4900
+ background: var(--ax-bg-moderate-hoverA);
4904
4901
  }
4905
4902
 
4906
4903
  .navds-timeline__zoom-button[aria-pressed="true"] {
4907
- background: var(--ax-bg-neutral-strong-pressed);
4908
- border-color: var(--ax-bg-neutral-strong-pressed);
4909
- color: var(--ax-text-neutral-contrast);
4904
+ background: var(--ax-bg-strong-pressed);
4905
+ border-color: var(--ax-bg-strong-pressed);
4906
+ color: var(--ax-text-contrast);
4910
4907
  }
4911
4908
 
4912
4909
  .navds-timeline__zoom li:focus-within {
@@ -4930,7 +4927,7 @@
4930
4927
  border: 1px solid;
4931
4928
  border-color: var(--ax-border-subtleA);
4932
4929
  border-radius: var(--ax-border-radius-large);
4933
- padding: var(--ax-spacing-4) var(--ax-spacing-5);
4930
+ padding: var(--ax-space-16) var(--ax-space-20);
4934
4931
  }
4935
4932
 
4936
4933
  @media (forced-colors: active) {
@@ -4963,7 +4960,7 @@
4963
4960
  background-color: var(--ax-bg-raised);
4964
4961
  color: var(--ax-text-default);
4965
4962
  border-radius: var(--ax-border-radius-medium);
4966
- padding: 0 var(--ax-spacing-1-alt);
4963
+ padding: 0 var(--ax-space-6);
4967
4964
  text-align: center;
4968
4965
  border: 1px solid var(--ax-border-subtleA);
4969
4966
  box-shadow: var(--ax-shadow-dialog);
@@ -5041,17 +5038,17 @@
5041
5038
  }
5042
5039
 
5043
5040
  .navds-tooltip__keys {
5044
- padding-bottom: var(--ax-spacing-1);
5045
- gap: var(--ax-spacing-1);
5041
+ padding-bottom: var(--ax-space-4);
5042
+ gap: var(--ax-space-4);
5046
5043
  display: flex;
5047
5044
  }
5048
5045
 
5049
5046
  .navds-tooltip__key {
5050
5047
  font-family: var(--ax-font-family);
5051
5048
  color: var(--ax-text-default);
5052
- padding: 0 var(--ax-spacing-1);
5049
+ padding: 0 var(--ax-space-4);
5053
5050
  border-radius: var(--ax-border-radius-small);
5054
- background: var(--ax-bg-neutral-moderateA);
5051
+ background: var(--ax-bg-moderateA);
5055
5052
  justify-content: center;
5056
5053
  align-items: center;
5057
5054
  min-width: 1.125rem;
@@ -5067,7 +5064,7 @@
5067
5064
 
5068
5065
  .navds-toggle-group__wrapper {
5069
5066
  justify-items: start;
5070
- gap: var(--ax-spacing-2);
5067
+ gap: var(--ax-space-8);
5071
5068
  display: grid;
5072
5069
  }
5073
5070
 
@@ -5086,7 +5083,7 @@
5086
5083
  }
5087
5084
 
5088
5085
  .navds-toggle-group__button {
5089
- padding: var(--ax-spacing-1) var(--ax-spacing-3);
5086
+ padding: var(--ax-space-4) var(--ax-space-12);
5090
5087
  cursor: pointer;
5091
5088
  min-height: 3rem;
5092
5089
  color: var(--ax-text-default);
@@ -5128,7 +5125,7 @@
5128
5125
 
5129
5126
  .navds-toggle-group__button-inner {
5130
5127
  align-items: center;
5131
- gap: var(--ax-spacing-2);
5128
+ gap: var(--ax-space-8);
5132
5129
  display: flex;
5133
5130
  }
5134
5131
 
@@ -5141,16 +5138,16 @@
5141
5138
  }
5142
5139
 
5143
5140
  :where(.navds-toggle-group--neutral) .navds-toggle-group__button:hover {
5144
- background-color: var(--ax-bg-neutral-moderate-hoverA);
5141
+ background-color: var(--ax-bg-moderate-hoverA);
5145
5142
  }
5146
5143
 
5147
5144
  :where(.navds-toggle-group--neutral) .navds-toggle-group__button[data-selected="true"] {
5148
- background-color: var(--ax-bg-neutral-strong-pressed);
5149
- color: var(--ax-text-neutral-contrast);
5145
+ background-color: var(--ax-bg-strong-pressed);
5146
+ color: var(--ax-text-contrast);
5150
5147
  }
5151
5148
 
5152
5149
  .navds-toggle-group--small .navds-toggle-group__button {
5153
- padding: var(--ax-spacing-05) var(--ax-spacing-3);
5150
+ padding: var(--ax-space-2) var(--ax-space-12);
5154
5151
  min-height: 2rem;
5155
5152
  }
5156
5153
 
@@ -5241,14 +5238,14 @@
5241
5238
  .navds-read-more {
5242
5239
  --__axc-read-more-icon-size: 1.5rem;
5243
5240
  --__axc-read-more-pi-start: 0px;
5244
- --__axc-read-more-pi-end: var(--ax-spacing-1);
5245
- --__axc-read-more-pb: var(--ax-spacing-1);
5241
+ --__axc-read-more-pi-end: var(--ax-space-4);
5242
+ --__axc-read-more-pb: var(--ax-space-4);
5246
5243
  }
5247
5244
 
5248
5245
  .navds-read-more__button {
5249
5246
  cursor: pointer;
5250
5247
  align-items: flex-start;
5251
- gap: var(--ax-spacing-1);
5248
+ gap: var(--ax-space-4);
5252
5249
  color: var(--ax-text-accent);
5253
5250
  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
5254
5251
  padding-block: var(--__axc-read-more-pb);
@@ -5273,7 +5270,7 @@
5273
5270
  }
5274
5271
 
5275
5272
  .navds-read-more:is([data-volume="low"], :not([data-volume])) .navds-read-more__button:hover {
5276
- background-color: var(--ax-bg-neutral-hoverA);
5273
+ background-color: var(--ax-bg-hoverA);
5277
5274
  color: var(--ax-text-accent-strong);
5278
5275
  }
5279
5276
 
@@ -5288,21 +5285,21 @@
5288
5285
  }
5289
5286
 
5290
5287
  .navds-read-more[data-volume="high"].navds-read-more--large {
5291
- --__axc-read-more-pi-start: var(--ax-spacing-3);
5292
- --__axc-read-more-pi-end: var(--ax-spacing-6);
5288
+ --__axc-read-more-pi-start: var(--ax-space-12);
5289
+ --__axc-read-more-pi-end: var(--ax-space-24);
5293
5290
  }
5294
5291
 
5295
5292
  .navds-read-more[data-volume="high"].navds-read-more--small, .navds-read-more[data-volume="high"].navds-read-more--medium {
5296
- --__axc-read-more-pi-start: var(--ax-spacing-2);
5297
- --__axc-read-more-pi-end: var(--ax-spacing-4);
5293
+ --__axc-read-more-pi-start: var(--ax-space-8);
5294
+ --__axc-read-more-pi-end: var(--ax-space-16);
5298
5295
  }
5299
5296
 
5300
5297
  .navds-read-more__content {
5301
- margin-top: var(--ax-spacing-2);
5302
- border-left: 2px solid var(--ax-border-neutral-subtleA);
5298
+ margin-top: var(--ax-space-8);
5299
+ border-left: 2px solid var(--ax-border-subtleA);
5303
5300
  color: var(--ax-text-default);
5304
5301
  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
5305
- padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
5302
+ padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
5306
5303
  }
5307
5304
 
5308
5305
  .navds-read-more__content[data-state="closed"] {
@@ -5316,12 +5313,12 @@
5316
5313
  }
5317
5314
 
5318
5315
  .navds-read-more--large {
5319
- --__axc-read-more-pb: var(--ax-spacing-3);
5316
+ --__axc-read-more-pb: var(--ax-space-12);
5320
5317
  }
5321
5318
 
5322
5319
  .navds-read-more--small {
5323
5320
  --__axc-read-more-icon-size: 1.25rem;
5324
- --__axc-read-more-pb: var(--ax-spacing-05);
5321
+ --__axc-read-more-pb: var(--ax-space-2);
5325
5322
  }
5326
5323
 
5327
5324
  @media (forced-colors: active) {
@@ -5333,9 +5330,9 @@
5333
5330
  }
5334
5331
 
5335
5332
  .navds-progress-bar {
5336
- background: var(--ax-bg-neutral-moderateA);
5333
+ background: var(--ax-bg-moderateA);
5337
5334
  border-radius: var(--ax-border-radius-full);
5338
- box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
5335
+ box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
5339
5336
  position: relative;
5340
5337
  overflow: hidden;
5341
5338
  }
@@ -5438,7 +5435,7 @@
5438
5435
  }
5439
5436
 
5440
5437
  .navds-skeleton {
5441
- background-color: var(--ax-bg-neutral-moderateA);
5438
+ background-color: var(--ax-bg-moderateA);
5442
5439
  pointer-events: none;
5443
5440
  height: 1.3em;
5444
5441
  animation: 2s cubic-bezier(.4, 0, .6, 1) infinite akselSkeletonAnimation;
@@ -5518,7 +5515,7 @@
5518
5515
  grid-template-rows: [line-1] auto [step-start] var(--__axc-stepper-circle-size) [line-2 step-end] auto;
5519
5516
  grid-template-columns: var(--__axc-stepper-circle-size) auto;
5520
5517
  justify-items: flex-start;
5521
- gap: var(--ax-spacing-2);
5518
+ gap: var(--ax-space-8);
5522
5519
  display: grid;
5523
5520
  }
5524
5521
 
@@ -5532,11 +5529,11 @@
5532
5529
  }
5533
5530
 
5534
5531
  .navds-stepper__item--non-interactive .navds-stepper__line {
5535
- background-color: var(--ax-border-neutral-strong);
5532
+ background-color: var(--ax-border-strong);
5536
5533
  }
5537
5534
 
5538
5535
  .navds-stepper__item:has( + .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) .navds-stepper__line--2 {
5539
- background-color: var(--ax-border-neutral-strong);
5536
+ background-color: var(--ax-border-strong);
5540
5537
  }
5541
5538
 
5542
5539
  .navds-stepper__line--1 {
@@ -5555,7 +5552,7 @@
5555
5552
  .navds-stepper__step {
5556
5553
  grid-area: 2 / 1 / -1 / -1;
5557
5554
  grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
5558
- gap: var(--ax-spacing-2);
5555
+ gap: var(--ax-space-8);
5559
5556
  cursor: pointer;
5560
5557
  padding: var(--__axc-stepper-border-width);
5561
5558
  margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1) var(--__axc-stepper-circle-size);
@@ -5640,23 +5637,23 @@
5640
5637
  }
5641
5638
 
5642
5639
  .navds-stepper__step[data-interactive="false"] {
5643
- color: var(--ax-text-neutral);
5640
+ color: var(--ax-text-default);
5644
5641
  cursor: default;
5645
5642
  }
5646
5643
 
5647
5644
  .navds-stepper__step[data-interactive="false"] .navds-stepper__circle {
5648
- color: var(--ax-text-neutral);
5649
- border-color: var(--ax-border-neutral-strong);
5645
+ color: var(--ax-text-default);
5646
+ border-color: var(--ax-border-strong);
5650
5647
  }
5651
5648
 
5652
5649
  .navds-stepper__step[data-interactive="false"][data-active="true"] .navds-stepper__content {
5653
- color: var(--ax-text-neutral-strong);
5650
+ color: var(--ax-text-subtle);
5654
5651
  }
5655
5652
 
5656
5653
  .navds-stepper__step[data-interactive="false"][data-active="true"] .navds-stepper__circle {
5657
- color: var(--ax-text-neutral-contrast);
5658
- background-color: var(--ax-bg-neutral-strong-pressed);
5659
- border-color: var(--ax-bg-neutral-strong-pressed);
5654
+ color: var(--ax-text-contrast);
5655
+ background-color: var(--ax-bg-strong-pressed);
5656
+ border-color: var(--ax-bg-strong-pressed);
5660
5657
  }
5661
5658
 
5662
5659
  .navds-stepper__content {
@@ -5750,7 +5747,7 @@
5750
5747
  }
5751
5748
 
5752
5749
  .navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
5753
- background-color: var(--ax-bg-neutral-hoverA);
5750
+ background-color: var(--ax-bg-hoverA);
5754
5751
  transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
5755
5752
  }
5756
5753
 
@@ -5763,11 +5760,11 @@
5763
5760
  }
5764
5761
 
5765
5762
  .navds-table__row--selected {
5766
- background-color: var(--ax-bg-accent);
5763
+ background-color: var(--ax-bg-accent-soft);
5767
5764
  }
5768
5765
 
5769
5766
  .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
5770
- background-color: var(--ax-bg-neutral);
5767
+ background-color: var(--ax-bg-soft);
5771
5768
  }
5772
5769
 
5773
5770
  .navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)) {
@@ -5775,11 +5772,11 @@
5775
5772
  }
5776
5773
 
5777
5774
  .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
5778
- background-color: var(--ax-bg-neutral);
5775
+ background-color: var(--ax-bg-soft);
5779
5776
  }
5780
5777
 
5781
5778
  .navds-table__header-cell, .navds-table__data-cell {
5782
- padding: var(--ax-spacing-3) var(--ax-spacing-2);
5779
+ padding: var(--ax-space-12) var(--ax-space-8);
5783
5780
  border-bottom: 1px solid var(--ax-border-default);
5784
5781
  text-align: left;
5785
5782
  display: table-cell;
@@ -5806,11 +5803,11 @@
5806
5803
  }
5807
5804
 
5808
5805
  .navds-table--large .navds-table__header-cell, .navds-table--large .navds-table__data-cell {
5809
- padding: var(--ax-spacing-4) var(--ax-spacing-2);
5806
+ padding: var(--ax-space-16) var(--ax-space-8);
5810
5807
  }
5811
5808
 
5812
5809
  .navds-table--small .navds-table__header-cell, .navds-table--small .navds-table__data-cell {
5813
- padding: var(--ax-spacing-1) var(--ax-spacing-2);
5810
+ padding: var(--ax-space-4) var(--ax-space-8);
5814
5811
  }
5815
5812
 
5816
5813
  .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -5829,8 +5826,8 @@
5829
5826
  appearance: none;
5830
5827
  color: var(--ax-text-accent);
5831
5828
  cursor: pointer;
5832
- padding: var(--ax-spacing-4) var(--ax-spacing-3);
5833
- gap: var(--ax-spacing-2);
5829
+ padding: var(--ax-space-16) var(--ax-space-12);
5830
+ gap: var(--ax-space-8);
5834
5831
  width: 100%;
5835
5832
  line-height: inherit;
5836
5833
  font-weight: inherit;
@@ -5842,11 +5839,11 @@
5842
5839
  }
5843
5840
 
5844
5841
  .navds-table--small .navds-table__sort-button {
5845
- padding: var(--ax-spacing-2) var(--ax-spacing-3);
5842
+ padding: var(--ax-space-8) var(--ax-space-12);
5846
5843
  }
5847
5844
 
5848
5845
  .navds-table__sort-button:hover {
5849
- background-color: var(--ax-bg-neutral-hoverA);
5846
+ background-color: var(--ax-bg-hoverA);
5850
5847
  }
5851
5848
 
5852
5849
  .navds-table__sort-button:focus-visible {
@@ -5872,7 +5869,7 @@
5872
5869
  font-size: 1rem;
5873
5870
  }
5874
5871
 
5875
- .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
5872
+ .navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
5876
5873
  transition: border-bottom-color .15s cubic-bezier(.95, .05, .8, .04);
5877
5874
  }
5878
5875
 
@@ -5880,14 +5877,10 @@
5880
5877
  cursor: pointer;
5881
5878
  }
5882
5879
 
5883
- .navds-table__expandable-row--open .navds-table__data-cell {
5880
+ .navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
5884
5881
  border-bottom-color: rgba(0, 0, 0, 0);
5885
5882
  }
5886
5883
 
5887
- .navds-table__expandable-row--open .navds-table__header-cell {
5888
- border-color: var(--ax-border-default);
5889
- }
5890
-
5891
5884
  .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
5892
5885
  border-color: rgba(0, 0, 0, 0);
5893
5886
  }
@@ -5898,11 +5891,11 @@
5898
5891
  }
5899
5892
 
5900
5893
  .navds-table--large .navds-table__toggle-expand-cell {
5901
- padding: 0 var(--ax-spacing-2);
5894
+ padding: 0 var(--ax-space-8);
5902
5895
  }
5903
5896
 
5904
5897
  .navds-table--small .navds-table__toggle-expand-cell {
5905
- padding: var(--ax-spacing-1) var(--ax-spacing-2);
5898
+ padding: var(--ax-space-4) var(--ax-space-8);
5906
5899
  }
5907
5900
 
5908
5901
  .navds-table__toggle-expand-button {
@@ -5928,7 +5921,7 @@
5928
5921
  }
5929
5922
 
5930
5923
  .navds-table__toggle-expand-button:hover, .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button, .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
5931
- background-color: var(--ax-bg-neutral-hoverA);
5924
+ background-color: var(--ax-bg-hoverA);
5932
5925
  }
5933
5926
 
5934
5927
  .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -5952,15 +5945,15 @@
5952
5945
  }
5953
5946
 
5954
5947
  .navds-table__expanded-row-content {
5955
- padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
5948
+ padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
5956
5949
  }
5957
5950
 
5958
5951
  .navds-table--small .navds-table__expanded-row-content {
5959
- padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
5952
+ padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
5960
5953
  }
5961
5954
 
5962
5955
  .navds-tabs__tablist-wrapper {
5963
- box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
5956
+ box-shadow: inset 0 -1px var(--ax-border-subtle);
5964
5957
  width: 100%;
5965
5958
  display: flex;
5966
5959
  }
@@ -5980,7 +5973,7 @@
5980
5973
  }
5981
5974
 
5982
5975
  .navds-tabs__scroll-button {
5983
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
5976
+ padding: var(--ax-space-12) var(--ax-space-16);
5984
5977
  cursor: pointer;
5985
5978
  justify-content: center;
5986
5979
  align-items: center;
@@ -5994,7 +5987,7 @@
5994
5987
  }
5995
5988
 
5996
5989
  .navds-tabs--small .navds-tabs__scroll-button {
5997
- padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
5990
+ padding: var(--ax-space-6) var(--ax-space-16);
5998
5991
  width: 2rem;
5999
5992
  }
6000
5993
 
@@ -6004,11 +5997,11 @@
6004
5997
 
6005
5998
  .navds-tabs__tab {
6006
5999
  min-height: 3rem;
6007
- padding: var(--ax-spacing-3) var(--ax-spacing-4);
6000
+ padding: var(--ax-space-12) var(--ax-space-16);
6008
6001
  color: var(--ax-text-default);
6009
6002
  cursor: pointer;
6010
6003
  --__axc-tabs-line-width: 0;
6011
- --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
6004
+ --__axc-tabs-line-color: var(--ax-border-subtle);
6012
6005
  box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
6013
6006
  background: none;
6014
6007
  border: none;
@@ -6034,7 +6027,7 @@
6034
6027
 
6035
6028
  .navds-tabs__tab-inner {
6036
6029
  align-items: center;
6037
- gap: var(--ax-spacing-1);
6030
+ gap: var(--ax-space-4);
6038
6031
  display: flex;
6039
6032
  }
6040
6033
 
@@ -6053,11 +6046,11 @@
6053
6046
 
6054
6047
  .navds-tabs__tab--small {
6055
6048
  min-height: 2rem;
6056
- padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
6049
+ padding: var(--ax-space-6) var(--ax-space-16);
6057
6050
  }
6058
6051
 
6059
6052
  .navds-tabs__tab-icon--top, .navds-tabs__tab--small.navds-tabs__tab-icon--top {
6060
- padding: var(--ax-spacing-1) var(--ax-spacing-4);
6053
+ padding: var(--ax-space-4) var(--ax-space-16);
6061
6054
  }
6062
6055
 
6063
6056
  :is(.navds-tabs__tab, .navds-tabs__tab--small.navds-tabs__tab--icon-only, .navds-tabs__tab--small.navds-tabs__tab-icon--top) svg {
@@ -6084,29 +6077,29 @@
6084
6077
  @media (forced-colors: active) {
6085
6078
  .navds-tabs__tab[data-state="active"] {
6086
6079
  border-bottom: 3px solid canvastext;
6087
- padding-block-end: calc(var(--ax-spacing-3) - 3px);
6080
+ padding-block-end: calc(var(--ax-space-12) - 3px);
6088
6081
  }
6089
6082
 
6090
6083
  .navds-tabs__tab--small[data-state="active"] {
6091
- padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
6084
+ padding-block-end: calc(var(--ax-space-6) - 3px);
6092
6085
  }
6093
6086
 
6094
6087
  .navds-tabs__tab-icon--top[data-state="active"], .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
6095
- padding-block-end: calc(var(--ax-spacing-1) - 3px);
6088
+ padding-block-end: calc(var(--ax-space-4) - 3px);
6096
6089
  }
6097
6090
  }
6098
6091
 
6099
6092
  .navds-list ul, .navds-list ol {
6100
- margin-block: var(--ax-spacing-4);
6093
+ margin-block: var(--ax-space-16);
6101
6094
  padding: 0;
6102
6095
  }
6103
6096
 
6104
6097
  .navds-list--small ul, .navds-list--small ol {
6105
- margin-block: var(--ax-spacing-3);
6098
+ margin-block: var(--ax-space-12);
6106
6099
  }
6107
6100
 
6108
6101
  .navds-list .navds-list :where(ul, ol) {
6109
- margin-block: var(--ax-spacing-2) 0;
6102
+ margin-block: var(--ax-space-8) 0;
6110
6103
  }
6111
6104
 
6112
6105
  .navds-list ol {
@@ -6123,7 +6116,7 @@
6123
6116
  }
6124
6117
 
6125
6118
  .navds-list ul > .navds-list__item {
6126
- gap: var(--ax-spacing-2);
6119
+ gap: var(--ax-space-8);
6127
6120
  grid-template-columns: auto 1fr;
6128
6121
  display: grid;
6129
6122
  }
@@ -6159,7 +6152,7 @@
6159
6152
  }
6160
6153
 
6161
6154
  .navds-list__item {
6162
- margin-block-end: var(--ax-spacing-2);
6155
+ margin-block-end: var(--ax-space-8);
6163
6156
  }
6164
6157
 
6165
6158
  .navds-list__item:last-child {
@@ -7167,7 +7160,7 @@
7167
7160
  }
7168
7161
 
7169
7162
  .navds-page__content--padding {
7170
- padding-block-end: var(--ax-spacing-16);
7163
+ padding-block-end: var(--ax-space-64);
7171
7164
  }
7172
7165
 
7173
7166
  .navds-pageblock--text {