npm - @nxds/claude-design - Versions diffs - 0.7.0 → 0.8.0 - Mend

@nxds/claude-design 0.7.0 → 0.8.0

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 (12) hide show

package/README.md +8 -8
package/coverage.md +2 -2
package/files.json +8 -8
package/package.json +1 -1
package/project/README.md +37 -4
package/project/components/ToggleGroup/README.md +1 -1
package/project/components/bundle.css +463 -903
package/project/components/bundle.js +2 -2
package/project/components/index.d.ts +1 -1
package/project/design-system.json +4 -4
package/project/tokens.css +341 -672
package/project/tokens.json +484 -2148

package/project/tokens.json CHANGED Viewed

@@ -4,8 +4,8 @@
   "meta": {
     "source": "nxds",
     "package": "@nxds/claude-design",
-    "version": "0.7.0",
-    "ref": "3ea22c0d",
+    "version": "0.8.0",
+    "ref": "afb823c7",
     "appearance": "default"
   },
   "color": {
@@ -26,7 +26,7 @@
           "light": "oklch(1 0 0)",
           "dark": "oklch(0.1408 0.006 285.9)"
         },
-        "usage": "Page background, the base surface everything sits on. Pair with foreground."
+        "usage": "Page background, the base surface everything sits on. Pair with foreground. Read by Avatar, ChoiceCard, DatePicker and 5 more components."
       },
       {
         "name": "nx-color-background-hover",
@@ -34,7 +34,7 @@
           "light": "oklch(0.9906 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Row or ghost-control hover on background. Pair with foreground."
+        "usage": "Row or ghost-control hover on background. Pair with foreground. Read by Attachment, Breadcrumb, ChoiceCard and 7 more components."
       },
       {
         "name": "nx-color-background-active",
@@ -42,7 +42,7 @@
           "light": "oklch(0.9517 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Row or ghost-control press and selection on background. Pair with foreground."
+        "usage": "Row or ghost-control press and selection on background. Pair with foreground. Read by Breadcrumb, ChoiceCard, ChoiceRow and FilterBuilder."
       },
       {
         "name": "nx-color-muted",
@@ -50,7 +50,7 @@
           "light": "oklch(0.9811 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Quiet fill for wells, code, skeletons and inactive tracks on background. Pair with muted-foreground."
+        "usage": "Quiet fill for wells, code, skeletons and inactive tracks on background. Pair with muted-foreground. Read by Attachment, Avatar, Bubble and 10 more components."
       },
       {
         "name": "nx-color-muted-extralight",
@@ -58,7 +58,7 @@
           "light": "oklch(0.9924 0.002 285.9)",
           "dark": "oklch(0.1568 0.006 285.9)"
         },
-        "usage": "Quietest muted surface — sits between background and muted for barely-there fills (empty states, subtle panels)."
+        "usage": "Quietest muted surface — sits between background and muted for barely-there fills (empty states, subtle panels). Read by EmptyState and FilterBuilder."
       },
       {
         "name": "nx-color-container",
@@ -66,7 +66,7 @@
           "light": "oklch(1 0 0)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Card and panel surface on background. Pair with container-foreground."
+        "usage": "Card and panel surface on background. Pair with container-foreground. Read by Accordion, Alert, AlertDialog and 35 more components."
       },
       {
         "name": "nx-color-container-hover",
@@ -74,7 +74,7 @@
           "light": "oklch(0.9811 0.002 285.9)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Row or control hover inside a container."
+        "usage": "Row or control hover inside a container. Read by Accordion, Alert, AlertDialog and 30 more components."
       },
       {
         "name": "nx-color-container-active",
@@ -82,7 +82,7 @@
           "light": "oklch(0.9657 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Row or control press and selection inside a container."
+        "usage": "Row or control press and selection inside a container. Read by AlertDialog, Button, ButtonGroup and 12 more components."
       },
       {
         "name": "nx-color-popover",
@@ -90,7 +90,7 @@
           "light": "oklch(1 0 0)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Surface of menus, popovers, tooltips and dialogs. Pair with popover-foreground."
+        "usage": "Surface of menus, popovers, tooltips and dialogs. Pair with popover-foreground. Read by AlertDialog, Bubble, Chart and 18 more components."
       },
       {
         "name": "nx-color-popover-hover",
@@ -98,15 +98,7 @@
           "light": "oklch(0.9657 0.002 285.9)",
           "dark": "oklch(0.2608 0.006 285.9)"
         },
-        "usage": "Highlighted menu row inside a popover."
-      },
-      {
-        "name": "nx-color-popover-active",
-        "value": {
-          "light": "oklch(0.9657 0.002 285.9)",
-          "dark": "oklch(0.2208 0.006 285.9)"
-        },
-        "usage": "Pressed or checked menu row inside a popover."
+        "usage": "Highlighted menu row inside a popover. Read by Combobox, Command, ContextMenu and 6 more components."
       },
       {
         "name": "nx-color-control-background",
@@ -114,7 +106,7 @@
           "light": "oklch(0.9517 0.002 285.9)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Rail of neutral controls: switch tracks, slider tracks, segmented tabs. Also the hover fill on a neutral control rail."
+        "usage": "Rail of neutral controls: switch tracks, slider tracks, segmented tabs. Also the hover fill on a neutral control rail. Read by Attachment, ButtonGroup, FilterBuilder and 13 more components."
       },
       {
         "name": "nx-color-control-background-hover",
@@ -122,12 +114,12 @@
           "light": "oklch(0.9188 0.002 285.9)",
           "dark": "oklch(0.2608 0.006 285.9)"
         },
-        "usage": "control-background while the pointer is over it."
+        "usage": "control-background while the pointer is over it. Read by FilterBuilder, Input, InputGroup and 9 more components."
       },
       {
         "name": "nx-color-control-thumb",
         "value": "oklch(1 0 0)",
-        "usage": "Thumb of switches and sliders, on control-background."
+        "usage": "Thumb of switches and sliders, on control-background. Read by Switch."
       },
       {
         "name": "nx-color-nav-background",
@@ -135,7 +127,7 @@
           "light": "oklch(0.9811 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Sidebar and navigation surface. Pair with nav-foreground."
+        "usage": "Sidebar and navigation surface. Pair with nav-foreground. Read by Sidebar."
       },
       {
         "name": "nx-color-nav-item-hover",
@@ -143,7 +135,7 @@
           "light": "oklch(0.9517 0.002 285.9)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Navigation item hover on nav-background."
+        "usage": "Navigation item hover on nav-background. Read by Sidebar."
       },
       {
         "name": "nx-color-nav-item-active",
@@ -151,7 +143,7 @@
           "light": "oklch(0.9517 0.002 285.9)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Current navigation item on nav-background."
+        "usage": "Current navigation item on nav-background. Read by Sidebar."
       },
       {
         "name": "nx-color-nav-border",
@@ -159,7 +151,7 @@
           "light": "oklch(0.9517 0.002 285.9)",
           "dark": "oklch(0.2208 0.006 285.9)"
         },
-        "usage": "Border between the sidebar and the page, and inside it."
+        "usage": "Border between the sidebar and the page, and inside it. Read by Sidebar."
       },
       {
         "name": "nx-color-disabled",
@@ -167,7 +159,7 @@
           "light": "oklch(0.9657 0.002 285.9)",
           "dark": "oklch(0.1808 0.006 285.9)"
         },
-        "usage": "Fill of a disabled neutral control or input. Pair with disabled-foreground."
+        "usage": "Fill of a disabled neutral control or input. Pair with disabled-foreground. Read by AlertDialog, Button, Carousel and 23 more components."
       },
       {
         "name": "nx-color-border-focus",
@@ -175,7 +167,7 @@
           "light": "oklch(0.7876 0.002 285.9)",
           "dark": "oklch(0.3828 0.006 285.9)"
         },
-        "usage": "Border of a focused input, on background or container."
+        "usage": "Border of a focused input, on background or container. Read by Combobox, Command, DatePicker and MultiSelect."
       },
       {
         "name": "nx-color-foreground",
@@ -183,7 +175,7 @@
           "light": "oklch(0.1408 0.0044 285.823)",
           "dark": "oklch(0.8838 0 0)"
         },
-        "usage": "Body text and icons on background, muted and the hover fills."
+        "usage": "Body text and icons on background, muted and the hover fills. Read by Accordion, Alert, AlertDialog and 48 more components."
       },
       {
         "name": "nx-color-container-foreground",
@@ -191,7 +183,7 @@
           "light": "oklch(0.1408 0.0044 285.823)",
           "dark": "oklch(0.8838 0 0)"
         },
-        "usage": "Text and icons on container."
+        "usage": "Text and icons on container. Read by Card."
       },
       {
         "name": "nx-color-popover-foreground",
@@ -199,7 +191,7 @@
           "light": "oklch(0.1408 0.0044 285.823)",
           "dark": "oklch(0.8931 0 0)"
         },
-        "usage": "Text and icons on popover and its row fills."
+        "usage": "Text and icons on popover and its row fills. Read by AlertDialog, Bubble, Chart and 17 more components."
       },
       {
         "name": "nx-color-nav-foreground",
@@ -207,7 +199,7 @@
           "light": "oklch(0.1408 0.0044 285.823)",
           "dark": "oklch(0.8096 0 0)"
         },
-        "usage": "Navigation text and icons on nav-background."
+        "usage": "Navigation text and icons on nav-background. Read by Sidebar."
       },
       {
         "name": "nx-color-muted-foreground",
@@ -215,7 +207,7 @@
           "light": "oklch(0.5235 0.0044 285.823)",
           "dark": "oklch(0.8157 0 0)"
         },
-        "usage": "It's a gray that softens contrast so primary content stands forward."
+        "usage": "It's a gray that softens contrast so primary content stands forward. Read by Accordion, Alert, AlertDialog and 36 more components."
       },
       {
         "name": "nx-color-nav-muted-foreground",
@@ -223,7 +215,7 @@
           "light": "oklch(0.4845 0.0044 285.823)",
           "dark": "oklch(0.7205 0 0)"
         },
-        "usage": "Secondary navigation text, such as group labels, on nav-background."
+        "usage": "Secondary navigation text, such as group labels, on nav-background. Read by Sidebar."
       },
       {
         "name": "nx-color-muted-foreground-subtle",
@@ -231,7 +223,7 @@
           "light": "oklch(0.636 0.0044 285.823)",
           "dark": "oklch(0.7334 0 0)"
         },
-        "usage": "Tertiary text tier below muted-foreground - helper text, captions, divider labels."
+        "usage": "Tertiary text tier below muted-foreground - helper text, captions, divider labels. Read by AlertDialog, Combobox, Command and 17 more components."
       },
       {
         "name": "nx-color-disabled-foreground",
@@ -239,7 +231,7 @@
           "light": "oklch(0.5704 0.0044 285.823)",
           "dark": "oklch(0.7205 0 0)"
         },
-        "usage": "Text and icons of a disabled control, on disabled and the family disabled fills."
+        "usage": "Text and icons of a disabled control, on disabled and the family disabled fills. Read by Accordion, Alert, AlertDialog and 32 more components."
       },
       {
         "name": "nx-color-border-default",
@@ -247,7 +239,7 @@
           "light": "oklch(0.1448 0 0 / 0.0884)",
           "dark": "oklch(1 0 0 / 0.1768)"
         },
-        "usage": "Default border of inputs, cards, tables and separators, on background or container."
+        "usage": "Default border of inputs, cards, tables and separators, on background or container. Read by Accordion, Alert, AlertDialog and 51 more components."
       },
       {
         "name": "nx-color-border-disabled",
@@ -255,7 +247,7 @@
           "light": "oklch(0.1448 0 0 / 0.0884)",
           "dark": "oklch(1 0 0 / 0.1768)"
         },
-        "usage": "Border of a disabled control."
+        "usage": "Border of a disabled control. Read by Accordion, AlertDialog, Button and 24 more components."
       },
       {
         "name": "nx-color-border-hairline",
@@ -263,7 +255,7 @@
           "light": "oklch(0.1448 0 0 / 0.0941)",
           "dark": "oklch(1 0 0 / 0.0941)"
         },
-        "usage": "Faint divider between rows and grouped items."
+        "usage": "Faint divider between rows and grouped items. Read by Attachment, Avatar, Item and Message."
       },
       {
         "name": "nx-color-primary-background",
@@ -271,7 +263,7 @@
           "light": "oklch(0.1448 0 0)",
           "dark": "oklch(1 0 0)"
         },
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with primary-foreground. Marks the main action on a surface."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with primary-foreground. Marks the main action on a surface. Read by AlertDialog, Attachment, Badge and 19 more components."
       },
       {
         "name": "nx-color-primary-background-hover",
@@ -279,7 +271,7 @@
           "light": "oklch(0.207 0 0)",
           "dark": "oklch(0.945 0 0)"
         },
-        "usage": "primary-background while the pointer is over the control."
+        "usage": "primary-background while the pointer is over the control. Read by AlertDialog, Button, Carousel and 12 more components."
       },
       {
         "name": "nx-color-primary-background-active",
@@ -287,7 +279,7 @@
           "light": "oklch(0.118 0 0)",
           "dark": "oklch(0.87 0 0)"
         },
-        "usage": "primary-background while the control is pressed."
+        "usage": "primary-background while the control is pressed. Read by AlertDialog, Button, Carousel and 11 more components."
       },
       {
         "name": "nx-color-primary-foreground",
@@ -295,7 +287,7 @@
           "light": "oklch(1 0 0)",
           "dark": "oklch(0 0 0)"
         },
-        "usage": "Foreground on primary-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
+        "usage": "Foreground on primary-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by AlertDialog, Badge, Bubble and 15 more components."
       },
       {
         "name": "nx-color-primary-disabled",
@@ -303,7 +295,7 @@
           "light": "oklch(0.765 0 0)",
           "dark": "oklch(0.118 0 0)"
         },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground. Read by AlertDialog, Button, Carousel and 13 more components."
       },
       {
         "name": "nx-color-primary-subtle",
@@ -311,7 +303,7 @@
           "light": "oklch(0.985 0 0)",
           "dark": "oklch(0.118 0 0)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with primary-subtle-foreground. Marks the main action on a surface."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with primary-subtle-foreground. Marks the main action on a surface. Read by Badge, ChoiceCard, DatePicker and 3 more components."
       },
       {
         "name": "nx-color-primary-subtle-foreground",
@@ -319,7 +311,7 @@
           "light": "oklch(0.3884 0 0)",
           "dark": "oklch(0.8252 0 0)"
         },
-        "usage": "Foreground on primary-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
+        "usage": "Foreground on primary-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by AlertDialog, Attachment, Badge and 17 more components."
       },
       {
         "name": "nx-color-primary-subtle-hover",
@@ -327,7 +319,7 @@
           "light": "oklch(0.945 0 0)",
           "dark": "oklch(0.207 0 0)"
         },
-        "usage": "primary-subtle while the pointer is over the control."
+        "usage": "primary-subtle while the pointer is over the control. Read by Toolbar."
       },
       {
         "name": "nx-color-primary-subtle-active",
@@ -335,7 +327,7 @@
           "light": "oklch(0.87 0 0)",
           "dark": "oklch(0.297 0 0)"
         },
-        "usage": "primary-subtle while the control is pressed."
+        "usage": "primary-subtle while the control is pressed. Read by Toolbar."
       },
       {
         "name": "nx-color-primary-border",
@@ -343,7 +335,7 @@
           "light": "oklch(0.87 0 0)",
           "dark": "oklch(0.385 0 0)"
         },
-        "usage": "Border of an outlined control or alert in this family, on background or container."
+        "usage": "Border of an outlined control or alert in this family, on background or container. Read by Avatar, Badge, ChoiceCard and 5 more components."
       },
       {
         "name": "nx-color-primary-border-active",
@@ -351,7 +343,7 @@
           "light": "oklch(0.66 0 0)",
           "dark": "oklch(0.553 0 0)"
         },
-        "usage": "primary-border while the control is pressed or selected."
+        "usage": "primary-border while the control is pressed or selected. Read by Toggle and ToggleGroup."
       },
       {
         "name": "nx-color-secondary-background",
@@ -359,7 +351,7 @@
           "light": "oklch(0.945 0 0)",
           "dark": "oklch(0.207 0 0)"
         },
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with secondary-foreground. Marks a supporting action beside a primary one."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with secondary-foreground. Marks a supporting action beside a primary one. Read by AlertDialog, Badge, Button and 12 more components."
       },
       {
         "name": "nx-color-secondary-background-hover",
@@ -367,7 +359,7 @@
           "light": "oklch(0.87 0 0)",
           "dark": "oklch(0.385 0 0)"
         },
-        "usage": "secondary-background while the pointer is over the control."
+        "usage": "secondary-background while the pointer is over the control. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-secondary-background-active",
@@ -375,7 +367,7 @@
           "light": "oklch(0.765 0 0)",
           "dark": "oklch(0.46 0 0)"
         },
-        "usage": "secondary-background while the control is pressed."
+        "usage": "secondary-background while the control is pressed. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-secondary-foreground",
@@ -383,7 +375,7 @@
           "light": "oklch(0 0 0)",
           "dark": "oklch(1 0 0)"
         },
-        "usage": "Foreground on secondary-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
+        "usage": "Foreground on secondary-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by AlertDialog, Badge, Button and 12 more components."
       },
       {
         "name": "nx-color-secondary-disabled",
@@ -391,7 +383,7 @@
           "light": "oklch(0.985 0 0)",
           "dark": "oklch(0.118 0 0)"
         },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-secondary-subtle",
@@ -399,7 +391,7 @@
           "light": "oklch(0.945 0 0)",
           "dark": "oklch(0.297 0 0)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with secondary-subtle-foreground. Marks a supporting action beside a primary one."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with secondary-subtle-foreground. Marks a supporting action beside a primary one. Read by Badge and MultiSelect."
       },
       {
         "name": "nx-color-secondary-subtle-foreground",
@@ -407,51 +399,17 @@
           "light": "oklch(0.0532 0 0)",
           "dark": "oklch(0.8962 0 0)"
         },
-        "usage": "Foreground on secondary-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
-      },
-      {
-        "name": "nx-color-secondary-subtle-hover",
-        "value": {
-          "light": "oklch(0.87 0 0)",
-          "dark": "oklch(0.385 0 0)"
-        },
-        "usage": "secondary-subtle while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-secondary-subtle-active",
-        "value": {
-          "light": "oklch(0.765 0 0)",
-          "dark": "oklch(0.46 0 0)"
-        },
-        "usage": "secondary-subtle while the control is pressed."
+        "usage": "Foreground on secondary-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by Badge and MultiSelect."
       },
       {
         "name": "nx-color-success-background",
         "value": "oklch(0.62 0.2233 140.055)",
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with success-foreground. Marks a completed or healthy state."
-      },
-      {
-        "name": "nx-color-success-background-hover",
-        "value": "oklch(0.52 0.1871 140.022)",
-        "usage": "success-background while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-success-background-active",
-        "value": "oklch(0.43 0.1534 139.623)",
-        "usage": "success-background while the control is pressed."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with success-foreground. Marks a completed or healthy state. Read by Avatar, Badge, Message and 2 more components."
       },
       {
         "name": "nx-color-success-foreground",
         "value": "oklch(1 0 0)",
-        "usage": "Foreground on success-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
-      },
-      {
-        "name": "nx-color-success-disabled",
-        "value": {
-          "light": "oklch(0.87 0.3119 139.843)",
-          "dark": "oklch(0.25 0.0887 139.4)"
-        },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Foreground on success-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-success-subtle",
@@ -459,7 +417,7 @@
           "light": "oklch(0.982 0.035 137.785)",
           "dark": "oklch(0.25 0.0887 139.4)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with success-subtle-foreground. Marks a completed or healthy state."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with success-subtle-foreground. Marks a completed or healthy state. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-success-subtle-foreground",
@@ -467,23 +425,7 @@
           "light": "oklch(0.488 0.185 140.055)",
           "dark": "oklch(0.8596 0.3119 139.843)"
         },
-        "usage": "Foreground on success-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
-      },
-      {
-        "name": "nx-color-success-subtle-hover",
-        "value": {
-          "light": "oklch(0.96 0.0789 139.835)",
-          "dark": "oklch(0.34 0.1216 139.757)"
-        },
-        "usage": "success-subtle while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-success-subtle-active",
-        "value": {
-          "light": "oklch(0.925 0.1596 139.892)",
-          "dark": "oklch(0.43 0.1534 139.623)"
-        },
-        "usage": "success-subtle while the control is pressed."
+        "usage": "Foreground on success-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-success-border",
@@ -491,43 +433,17 @@
           "light": "oklch(0.925 0.1596 139.892)",
           "dark": "oklch(0.52 0.1871 140.022)"
         },
-        "usage": "Border of an outlined control or alert in this family, on background or container."
-      },
-      {
-        "name": "nx-color-border-success-active",
-        "value": {
-          "light": "oklch(0.79 0.2864 140.349)",
-          "dark": "oklch(0.72 0.2591 140.014)"
-        },
-        "usage": "success-border while the control is pressed or selected."
+        "usage": "Border of an outlined control or alert in this family, on background or container. Read by Alert, Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-warning-background",
         "value": "oklch(0.62 0.2044 41.116)",
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with warning-foreground. Marks a state that needs attention soon."
-      },
-      {
-        "name": "nx-color-warning-background-hover",
-        "value": "oklch(0.52 0.1809 38.402)",
-        "usage": "warning-background while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-warning-background-active",
-        "value": "oklch(0.43 0.153 37.304)",
-        "usage": "warning-background while the control is pressed."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with warning-foreground. Marks a state that needs attention soon. Read by Avatar, Badge, Message and 2 more components."
       },
       {
         "name": "nx-color-warning-foreground",
         "value": "oklch(1 0 0)",
-        "usage": "Foreground on warning-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
-      },
-      {
-        "name": "nx-color-warning-disabled",
-        "value": {
-          "light": "oklch(0.84 0.142 66.29)",
-          "dark": "oklch(0.25 0.091 36.259)"
-        },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Foreground on warning-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-warning-subtle",
@@ -535,7 +451,7 @@
           "light": "oklch(0.98 0.0185 73.684)",
           "dark": "oklch(0.25 0.091 36.259)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with warning-subtle-foreground. Marks a state that needs attention soon."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with warning-subtle-foreground. Marks a state that needs attention soon. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-warning-subtle-foreground",
@@ -543,23 +459,7 @@
           "light": "oklch(0.4583 0.159 41.116)",
           "dark": "oklch(0.8818 0.1073 66.29)"
         },
-        "usage": "Foreground on warning-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
-      },
-      {
-        "name": "nx-color-warning-subtle-hover",
-        "value": {
-          "light": "oklch(0.955 0.0435 75.164)",
-          "dark": "oklch(0.34 0.1188 38.172)"
-        },
-        "usage": "warning-subtle while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-warning-subtle-active",
-        "value": {
-          "light": "oklch(0.91 0.0819 70.697)",
-          "dark": "oklch(0.43 0.153 37.304)"
-        },
-        "usage": "warning-subtle while the control is pressed."
+        "usage": "Foreground on warning-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-warning-border",
@@ -567,35 +467,27 @@
           "light": "oklch(0.91 0.0819 70.697)",
           "dark": "oklch(0.52 0.1809 38.402)"
         },
-        "usage": "Border of an outlined control or alert in this family, on background or container."
-      },
-      {
-        "name": "nx-color-border-warning-active",
-        "value": {
-          "light": "oklch(0.78 0.1803 55.934)",
-          "dark": "oklch(0.71 0.2099 47.604)"
-        },
-        "usage": "warning-border while the control is pressed or selected."
+        "usage": "Border of an outlined control or alert in this family, on background or container. Read by Alert, Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-error-background",
         "value": "oklch(0.577 0.2523 27.926)",
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with error-foreground. Marks a failed, invalid or destructive state."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with error-foreground. Marks a failed, invalid or destructive state. Read by AlertDialog, Avatar, Badge and 20 more components."
       },
       {
         "name": "nx-color-error-background-hover",
         "value": "oklch(0.505 0.2209 27.946)",
-        "usage": "error-background while the pointer is over the control."
+        "usage": "error-background while the pointer is over the control. Read by AlertDialog, Button, Carousel and 11 more components."
       },
       {
         "name": "nx-color-error-background-active",
         "value": "oklch(0.42 0.1838 28.144)",
-        "usage": "error-background while the control is pressed."
+        "usage": "error-background while the control is pressed. Read by AlertDialog, Button, Carousel and 11 more components."
       },
       {
         "name": "nx-color-error-foreground",
         "value": "oklch(1 0 0)",
-        "usage": "Foreground on error-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
+        "usage": "Foreground on error-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by AlertDialog, Badge, Button and 17 more components."
       },
       {
         "name": "nx-color-error-disabled",
@@ -603,7 +495,7 @@
           "light": "oklch(0.808 0.1333 28.058)",
           "dark": "oklch(0.25 0.1094 28.309)"
         },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-error-subtle",
@@ -611,7 +503,7 @@
           "light": "oklch(0.971 0.0176 28.865)",
           "dark": "oklch(0.25 0.1094 28.309)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with error-subtle-foreground. Marks a failed, invalid or destructive state."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with error-subtle-foreground. Marks a failed, invalid or destructive state. Read by Alert, Attachment, Badge and 2 more components."
       },
       {
         "name": "nx-color-error-subtle-foreground",
@@ -619,7 +511,7 @@
           "light": "oklch(0.3992 0.1837 27.926)",
           "dark": "oklch(0.8848 0.0788 28.058)"
         },
-        "usage": "Foreground on error-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
+        "usage": "Foreground on error-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by Alert, AlertDialog, Attachment and 19 more components."
       },
       {
         "name": "nx-color-error-subtle-hover",
@@ -627,7 +519,7 @@
           "light": "oklch(0.936 0.0399 27.342)",
           "dark": "oklch(0.34 0.1487 28.057)"
         },
-        "usage": "error-subtle while the pointer is over the control."
+        "usage": "error-subtle while the pointer is over the control. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-error-subtle-active",
@@ -635,7 +527,7 @@
           "light": "oklch(0.885 0.0747 27.394)",
           "dark": "oklch(0.42 0.1838 28.144)"
         },
-        "usage": "error-subtle while the control is pressed."
+        "usage": "error-subtle while the control is pressed. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-color-error-border",
@@ -643,7 +535,7 @@
           "light": "oklch(0.885 0.0747 27.394)",
           "dark": "oklch(0.505 0.2209 27.946)"
         },
-        "usage": "Border of an outlined control or alert in this family, on background or container."
+        "usage": "Border of an outlined control or alert in this family, on background or container. Read by Alert, Attachment, Badge and 16 more components."
       },
       {
         "name": "nx-color-border-error-active",
@@ -651,35 +543,17 @@
           "light": "oklch(0.704 0.2267 27.842)",
           "dark": "oklch(0.637 0.2786 27.978)"
         },
-        "usage": "error-border while the control is pressed or selected."
+        "usage": "error-border while the control is pressed or selected. Read by Toggle and ToggleGroup."
       },
       {
         "name": "nx-color-information-background",
         "value": "oklch(0.546 0.2205 255.276)",
-        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with information-foreground. Marks neutral guidance or a status update."
-      },
-      {
-        "name": "nx-color-information-background-hover",
-        "value": "oklch(0.488 0.197 255.267)",
-        "usage": "information-background while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-information-background-active",
-        "value": "oklch(0.41 0.1633 254.871)",
-        "usage": "information-background while the control is pressed."
+        "usage": "Solid fill for buttons, badges and other strong emphasis in this family. Pair with information-foreground. Marks neutral guidance or a status update. Read by Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-information-foreground",
         "value": "oklch(1 0 0)",
-        "usage": "Foreground on information-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage."
-      },
-      {
-        "name": "nx-color-information-disabled",
-        "value": {
-          "light": "oklch(0.809 0.1012 254.248)",
-          "dark": "oklch(0.25 0.1042 256.214)"
-        },
-        "usage": "Fill of a disabled control in this family. Pair with disabled-foreground."
+        "usage": "Foreground on information-background. The surface relationship defines this role, not text alone: text and icons share it, and contrasting control parts or indicators may use it on the same surface. Other pairings require contrast coverage. Read by Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-information-subtle",
@@ -687,7 +561,7 @@
           "light": "oklch(0.97 0.0152 252.81)",
           "dark": "oklch(0.25 0.1042 256.214)"
         },
-        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with information-subtle-foreground. Marks neutral guidance or a status update."
+        "usage": "Tinted fill for light badges, alerts and selected rows on background or container. Pair with information-subtle-foreground. Marks neutral guidance or a status update. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-information-subtle-foreground",
@@ -695,23 +569,7 @@
           "light": "oklch(0.4067 0.1729 255.276)",
           "dark": "oklch(0.8721 0.0699 254.248)"
         },
-        "usage": "Foreground on information-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier."
-      },
-      {
-        "name": "nx-color-information-subtle-hover",
-        "value": {
-          "light": "oklch(0.932 0.0342 257.472)",
-          "dark": "oklch(0.33 0.1316 254.902)"
-        },
-        "usage": "information-subtle while the pointer is over the control."
-      },
-      {
-        "name": "nx-color-information-subtle-active",
-        "value": {
-          "light": "oklch(0.882 0.0612 253.613)",
-          "dark": "oklch(0.41 0.1633 254.871)"
-        },
-        "usage": "information-subtle while the control is pressed."
+        "usage": "Foreground on information-subtle. The surface relationship defines this role, not text alone: text and icons share it, and contrasting indicators may use it on that surface. Use on neutral surfaces only with contrast coverage for the intended content tier. Read by Alert, Badge and MultiSelect."
       },
       {
         "name": "nx-color-information-border",
@@ -719,15 +577,7 @@
           "light": "oklch(0.882 0.0612 253.613)",
           "dark": "oklch(0.488 0.197 255.267)"
         },
-        "usage": "Border of an outlined control or alert in this family, on background or container."
-      },
-      {
-        "name": "nx-color-border-information-active",
-        "value": {
-          "light": "oklch(0.707 0.1599 255.225)",
-          "dark": "oklch(0.623 0.2112 255.145)"
-        },
-        "usage": "information-border while the control is pressed or selected."
+        "usage": "Border of an outlined control or alert in this family, on background or container. Read by Alert, Badge, MultiSelect and Sonner."
       },
       {
         "name": "nx-color-chart-categorical-1",
@@ -735,7 +585,7 @@
           "light": "oklch(0.5774 0.1168 186.391)",
           "dark": "oklch(0.7839 0.1682 180.426)"
         },
-        "usage": "First chart series, on container or background. Series colours stay in order."
+        "usage": "For authors: First chart series, on container or background. Series colours stay in order. No component reads it."
       },
       {
         "name": "nx-color-chart-categorical-2",
@@ -743,7 +593,7 @@
           "light": "oklch(0.5474 0.1768 131.589)",
           "dark": "oklch(0.8137 0.2278 124.321)"
         },
-        "usage": "Second chart series, on container or background."
+        "usage": "For authors: Second chart series, on container or background. No component reads it."
       },
       {
         "name": "nx-color-chart-categorical-3",
@@ -751,7 +601,7 @@
           "light": "oklch(0.5371 0.1864 41.116)",
           "dark": "oklch(0.8542 0.0819 70.697)"
         },
-        "usage": "Third chart series, on container or background."
+        "usage": "For authors: Third chart series, on container or background. No component reads it."
       },
       {
         "name": "nx-color-chart-categorical-4",
@@ -759,7 +609,7 @@
           "light": "oklch(0.4951 0.2237 17.585)",
           "dark": "oklch(0.8823 0.0771 10.001)"
         },
-        "usage": "Fourth chart series, on container or background."
+        "usage": "For authors: Fourth chart series, on container or background. No component reads it."
       },
       {
         "name": "nx-color-chart-categorical-5",
@@ -767,7 +617,7 @@
           "light": "oklch(0.4634 0.2899 276.966)",
           "dark": "oklch(0.8999 0.0533 274.039)"
         },
-        "usage": "Fifth chart series, on container or background."
+        "usage": "For authors: Fifth chart series, on container or background. No component reads it."
       },
       {
         "name": "nx-color-focus-default",
@@ -775,7 +625,7 @@
           "light": "oklch(0.3884 0 0)",
           "dark": "oklch(0.8252 0 0)"
         },
-        "usage": "Focus ring of every interactive control, on any surface."
+        "usage": "Focus ring of every interactive control, on any surface. Read by Accordion, Alert, AlertDialog and 45 more components."
       },
       {
         "name": "nx-color-focus-error",
@@ -783,15 +633,7 @@
           "light": "oklch(0.6494 0.2523 27.926)",
           "dark": "oklch(0.7356 0.1333 28.058)"
         },
-        "usage": "Focus ring of an invalid control."
-      },
-      {
-        "name": "nx-color-background-hover-alpha",
-        "value": {
-          "light": "oklch(0.13 0.006 285.9 / 0.0581)",
-          "dark": "oklch(0.13 0.006 285.9 / 0.0589)"
-        },
-        "usage": "Translucent hover fill for controls that sit on an image or an unknown surface."
+        "usage": "Focus ring of an invalid control. Read by Checkbox, Combobox, FilterBuilder and 12 more components."
       },
       {
         "name": "nx-color-border-default-alpha",
@@ -799,7 +641,7 @@
           "light": "oklch(0.13 0.006 285.9 / 0.0884)",
           "dark": "oklch(0.13 0.006 285.9 / 0.1768)"
         },
-        "usage": "Translucent border for controls that sit on an image or an unknown surface."
+        "usage": "Translucent border for controls that sit on an image or an unknown surface. Read by Combobox, Command, ContextMenu and 6 more components."
       },
       {
         "name": "nx-color-overlay",
@@ -807,7 +649,7 @@
           "light": "oklch(0.13 0.006 285.9 / 0.7529)",
           "dark": "oklch(0.13 0.006 285.9 / 0.8471)"
         },
-        "usage": "Scrim behind dialogs, sheets and drawers."
+        "usage": "Scrim behind dialogs, sheets and drawers. Read by AlertDialog, Combobox, Command and 15 more components."
       },
       {
         "name": "nx-color-popover-alpha",
@@ -815,2005 +657,344 @@
           "light": "oklch(1 0 0 / 0.97)",
           "dark": "oklch(0.2208 0.006 285.9 / 0.97)"
         },
-        "usage": "Translucent popover surface for frosted overlays."
-      },
+        "usage": "Translucent popover surface for frosted overlays. Read by AlertDialog, Combobox, Command and 15 more components."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "heading": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
+    },
+    "groups": [
       {
-        "name": "nx-color-popover-backdrop",
-        "value": "oklch(0.13 0.006 285.9 / 0.9098)",
-        "usage": "Backdrop behind a frosted popover."
+        "name": "heading",
+        "family": "heading",
+        "styles": [
+          {
+            "name": "typography-heading-large",
+            "fontSize": "30px",
+            "usage": "Major section heading, dialog titles, card group headers",
+            "lineHeight": "36px",
+            "fontWeight": 700,
+            "letterSpacing": "-0.8px"
+          },
+          {
+            "name": "typography-heading-medium",
+            "fontSize": "24px",
+            "usage": "Susbsection heading, card titles, modal headers",
+            "lineHeight": "32px",
+            "fontWeight": 700,
+            "letterSpacing": "-0.4px"
+          },
+          {
+            "name": "typography-heading-small",
+            "fontSize": "20px",
+            "usage": "Card Titles, list section headers, minor heading",
+            "lineHeight": "28px",
+            "fontWeight": 700,
+            "letterSpacing": "-0.4px"
+          },
+          {
+            "name": "typography-heading-xsmall",
+            "fontSize": "18px",
+            "usage": "Table Section headers, accordian titles, minor seciton lables",
+            "lineHeight": "28px",
+            "fontWeight": 700,
+            "letterSpacing": "-0.4px"
+          },
+          {
+            "name": "typography-heading-xxsmall",
+            "fontSize": "16px",
+            "usage": "Smallest heading tier — empty-state titles, compact card headers",
+            "lineHeight": "24px",
+            "fontWeight": 600,
+            "letterSpacing": "-0.4px"
+          }
+        ]
       },
       {
-        "name": "nx-color-green-50",
-        "value": "oklch(0.982 0.035 137.785)",
-        "usage": "Raw green palette step (oklch(0.982 0.035 137.785)). Components read the semantic colours; use this for one-off fills only."
+        "name": "body",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "typography-body-default",
+            "fontSize": "14px",
+            "usage": "Default paragraph text, descriptions, card content, and main body copy",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "letterSpacing": "0px"
+          },
+          {
+            "name": "typography-body-small",
+            "fontSize": "12px",
+            "usage": "Supporting copy, captions, and secondary text under a heading",
+            "lineHeight": "16px",
+            "fontWeight": 400,
+            "letterSpacing": "0px"
+          }
+        ]
       },
       {
-        "name": "nx-color-green-100",
-        "value": "oklch(0.96 0.0789 139.835)",
-        "usage": "Raw green palette step (oklch(0.96 0.0789 139.835)). Components read the semantic colours; use this for one-off fills only."
+        "name": "typography",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "typography-shortcut",
+            "fontSize": "12px",
+            "usage": "Keyboard shortcut hint text in command palettes, menus, and menubars",
+            "lineHeight": "16px",
+            "fontWeight": 400,
+            "letterSpacing": "1.6px"
+          }
+        ]
       },
       {
-        "name": "nx-color-green-200",
-        "value": "oklch(0.925 0.1596 139.892)",
-        "usage": "Raw green palette step (oklch(0.925 0.1596 139.892)). Components read the semantic colours; use this for one-off fills only."
+        "name": "label",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "typography-label-default",
+            "fontSize": "14px",
+            "usage": "Form, field, and control labels at default density",
+            "lineHeight": "20px",
+            "fontWeight": 500,
+            "letterSpacing": "0px"
+          },
+          {
+            "name": "typography-label-small",
+            "fontSize": "12px",
+            "usage": "Compact form and control labels in dense layouts",
+            "lineHeight": "16px",
+            "fontWeight": 500,
+            "letterSpacing": "0px"
+          },
+          {
+            "name": "typography-label-caps",
+            "fontSize": "11px",
+            "usage": "Compact eyebrow and section labels, tuned for all-caps; apply uppercase at the call site",
+            "lineHeight": "12px",
+            "fontWeight": 600,
+            "letterSpacing": "0.4px"
+          }
+        ]
       },
       {
-        "name": "nx-color-green-300",
-        "value": "oklch(0.87 0.3119 139.843)",
-        "usage": "Raw green palette step (oklch(0.87 0.3119 139.843)). Components read the semantic colours; use this for one-off fills only."
-      },
+        "name": "code",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "typography-code-block",
+            "fontSize": "14px",
+            "usage": "Text style ``nx:typography-code-block``.",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "letterSpacing": "0px"
+          },
+          {
+            "name": "typography-code-inline",
+            "fontSize": "14px",
+            "usage": "Text style ``nx:typography-code-inline``.",
+            "fontWeight": 600,
+            "letterSpacing": "0px"
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
       {
-        "name": "nx-color-green-400",
-        "value": "oklch(0.79 0.2864 140.349)",
-        "usage": "Raw green palette step (oklch(0.79 0.2864 140.349)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-0",
+        "value": "0px",
+        "usage": "Spacing step 0 (0px): `nx:p-0`, `nx:gap-0`, `nx:m-0`. Read by Accordion, Alert, AlertDialog and 53 more components."
       },
       {
-        "name": "nx-color-green-500",
-        "value": "oklch(0.72 0.2591 140.014)",
-        "usage": "Raw green palette step (oklch(0.72 0.2591 140.014)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-1",
+        "value": "4px",
+        "usage": "Spacing step 1 (4px): `nx:p-1`, `nx:gap-1`, `nx:m-1`. Read by Alert, AlertDialog, Attachment and 33 more components."
       },
       {
-        "name": "nx-color-green-600",
-        "value": "oklch(0.62 0.2233 140.055)",
-        "usage": "Raw green palette step (oklch(0.62 0.2233 140.055)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-2",
+        "value": "8px",
+        "usage": "Spacing step 2 (8px): `nx:p-2`, `nx:gap-2`, `nx:m-2`. Read by Accordion, Alert, AlertDialog and 50 more components."
       },
       {
-        "name": "nx-color-green-700",
-        "value": "oklch(0.52 0.1871 140.022)",
-        "usage": "Raw green palette step (oklch(0.52 0.1871 140.022)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-3",
+        "value": "12px",
+        "usage": "Spacing step 3 (12px): `nx:p-3`, `nx:gap-3`, `nx:m-3`. Read by Alert, AlertDialog, Attachment and 33 more components."
       },
       {
-        "name": "nx-color-green-800",
-        "value": "oklch(0.43 0.1534 139.623)",
-        "usage": "Raw green palette step (oklch(0.43 0.1534 139.623)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-4",
+        "value": "16px",
+        "usage": "Spacing step 4 (16px): `nx:p-4`, `nx:gap-4`, `nx:m-4`. Read by Accordion, Alert, AlertDialog and 51 more components."
       },
       {
-        "name": "nx-color-green-900",
-        "value": "oklch(0.34 0.1216 139.757)",
-        "usage": "Raw green palette step (oklch(0.34 0.1216 139.757)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-5",
+        "value": "20px",
+        "usage": "Spacing step 5 (20px): `nx:p-5`, `nx:gap-5`, `nx:m-5`. Read by Avatar, Breadcrumb, Field and 7 more components."
       },
       {
-        "name": "nx-color-green-950",
-        "value": "oklch(0.25 0.0887 139.4)",
-        "usage": "Raw green palette step (oklch(0.25 0.0887 139.4)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-6",
+        "value": "24px",
+        "usage": "Spacing step 6 (24px): `nx:p-6`, `nx:gap-6`, `nx:m-6`. Read by Alert, AlertDialog, Avatar and 26 more components."
       },
       {
-        "name": "nx-color-emerald-50",
-        "value": "oklch(0.982 0.0271 166.113)",
-        "usage": "Raw emerald palette step (oklch(0.982 0.0271 166.113)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-7",
+        "value": "28px",
+        "usage": "Spacing step 7 (28px): `nx:p-7`, `nx:gap-7`, `nx:m-7`. Read by Field, Sidebar and ToggleGroup."
       },
       {
-        "name": "nx-color-emerald-100",
-        "value": "oklch(0.96 0.0629 163.051)",
-        "usage": "Raw emerald palette step (oklch(0.96 0.0629 163.051)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-8",
+        "value": "32px",
+        "usage": "Spacing step 8 (32px): `nx:p-8`, `nx:gap-8`, `nx:m-8`. Read by Alert, AlertDialog, Attachment and 25 more components."
       },
       {
-        "name": "nx-color-emerald-200",
-        "value": "oklch(0.925 0.1236 164.15)",
-        "usage": "Raw emerald palette step (oklch(0.925 0.1236 164.15)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-9",
+        "value": "36px",
+        "usage": "Spacing step 9 (36px): `nx:p-9`, `nx:gap-9`, `nx:m-9`. Read by NativeSelect, Switch and ToggleGroup."
       },
       {
-        "name": "nx-color-emerald-300",
-        "value": "oklch(0.87 0.2341 164.978)",
-        "usage": "Raw emerald palette step (oklch(0.87 0.2341 164.978)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-10",
+        "value": "40px",
+        "usage": "Spacing step 10 (40px): `nx:p-10`, `nx:gap-10`, `nx:m-10`. Read by AlertDialog, Attachment, Avatar and 21 more components."
       },
       {
-        "name": "nx-color-emerald-400",
-        "value": "oklch(0.79 0.2219 163.223)",
-        "usage": "Raw emerald palette step (oklch(0.79 0.2219 163.223)). Components read the semantic colours; use this for one-off fills only."
+        "name": "nx-spacing-11",
+        "value": "44px",
+        "usage": "Spacing step 11 (44px): `nx:p-11`, `nx:gap-11`, `nx:m-11`. Read by ToggleGroup."
       },
       {
-        "name": "nx-color-emerald-500",
-        "value": "oklch(0.72 0.2046 162.48)",
-        "usage": "Raw emerald palette step (oklch(0.72 0.2046 162.48)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-emerald-600",
-        "value": "oklch(0.62 0.1742 163.225)",
-        "usage": "Raw emerald palette step (oklch(0.62 0.1742 163.225)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-emerald-700",
-        "value": "oklch(0.52 0.1411 165.612)",
-        "usage": "Raw emerald palette step (oklch(0.52 0.1411 165.612)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-emerald-800",
-        "value": "oklch(0.43 0.1147 166.913)",
-        "usage": "Raw emerald palette step (oklch(0.43 0.1147 166.913)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-emerald-900",
-        "value": "oklch(0.34 0.0884 168.94)",
-        "usage": "Raw emerald palette step (oklch(0.34 0.0884 168.94)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-emerald-950",
-        "value": "oklch(0.25 0.0624 172.552)",
-        "usage": "Raw emerald palette step (oklch(0.25 0.0624 172.552)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-50",
-        "value": "oklch(0.98 0.0297 180.72)",
-        "usage": "Raw teal palette step (oklch(0.98 0.0297 180.72)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-100",
-        "value": "oklch(0.945 0.086 180.801)",
-        "usage": "Raw teal palette step (oklch(0.945 0.086 180.801)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-200",
-        "value": "oklch(0.9 0.1682 180.426)",
-        "usage": "Raw teal palette step (oklch(0.9 0.1682 180.426)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-300",
-        "value": "oklch(0.85 0.1971 181.071)",
-        "usage": "Raw teal palette step (oklch(0.85 0.1971 181.071)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-400",
-        "value": "oklch(0.79 0.1821 181.912)",
-        "usage": "Raw teal palette step (oklch(0.79 0.1821 181.912)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-500",
-        "value": "oklch(0.72 0.1653 182.503)",
-        "usage": "Raw teal palette step (oklch(0.72 0.1653 182.503)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-600",
-        "value": "oklch(0.62 0.1405 184.704)",
-        "usage": "Raw teal palette step (oklch(0.62 0.1405 184.704)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-700",
-        "value": "oklch(0.52 0.1168 186.391)",
-        "usage": "Raw teal palette step (oklch(0.52 0.1168 186.391)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-800",
-        "value": "oklch(0.43 0.0957 188.216)",
-        "usage": "Raw teal palette step (oklch(0.43 0.0957 188.216)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-900",
-        "value": "oklch(0.34 0.0756 188.416)",
-        "usage": "Raw teal palette step (oklch(0.34 0.0756 188.416)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-teal-950",
-        "value": "oklch(0.25 0.0548 192.524)",
-        "usage": "Raw teal palette step (oklch(0.25 0.0548 192.524)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-50",
-        "value": "oklch(0.98 0.0244 200.873)",
-        "usage": "Raw cyan palette step (oklch(0.98 0.0244 200.873)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-100",
-        "value": "oklch(0.955 0.0502 203.388)",
-        "usage": "Raw cyan palette step (oklch(0.955 0.0502 203.388)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-200",
-        "value": "oklch(0.91 0.0962 205.041)",
-        "usage": "Raw cyan palette step (oklch(0.91 0.0962 205.041)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-300",
-        "value": "oklch(0.85 0.1529 207.078)",
-        "usage": "Raw cyan palette step (oklch(0.85 0.1529 207.078)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-400",
-        "value": "oklch(0.79 0.1738 211.53)",
-        "usage": "Raw cyan palette step (oklch(0.79 0.1738 211.53)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-500",
-        "value": "oklch(0.72 0.1608 215.221)",
-        "usage": "Raw cyan palette step (oklch(0.72 0.1608 215.221)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-600",
-        "value": "oklch(0.63 0.1461 221.723)",
-        "usage": "Raw cyan palette step (oklch(0.63 0.1461 221.723)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-700",
-        "value": "oklch(0.53 0.1242 223.128)",
-        "usage": "Raw cyan palette step (oklch(0.53 0.1242 223.128)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-800",
-        "value": "oklch(0.44 0.104 224.283)",
-        "usage": "Raw cyan palette step (oklch(0.44 0.104 224.283)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-900",
-        "value": "oklch(0.35 0.085 227.392)",
-        "usage": "Raw cyan palette step (oklch(0.35 0.085 227.392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-cyan-950",
-        "value": "oklch(0.26 0.0646 229.695)",
-        "usage": "Raw cyan palette step (oklch(0.26 0.0646 229.695)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-50",
-        "value": "oklch(0.975 0.0142 236.62)",
-        "usage": "Raw sky palette step (oklch(0.975 0.0142 236.62)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-100",
-        "value": "oklch(0.945 0.0315 236.824)",
-        "usage": "Raw sky palette step (oklch(0.945 0.0315 236.824)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-200",
-        "value": "oklch(0.895 0.0654 230.902)",
-        "usage": "Raw sky palette step (oklch(0.895 0.0654 230.902)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-300",
-        "value": "oklch(0.82 0.1156 230.318)",
-        "usage": "Raw sky palette step (oklch(0.82 0.1156 230.318)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-400",
-        "value": "oklch(0.74 0.1663 232.661)",
-        "usage": "Raw sky palette step (oklch(0.74 0.1663 232.661)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-500",
-        "value": "oklch(0.67 0.1829 237.323)",
-        "usage": "Raw sky palette step (oklch(0.67 0.1829 237.323)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-600",
-        "value": "oklch(0.58 0.1704 241.966)",
-        "usage": "Raw sky palette step (oklch(0.58 0.1704 241.966)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-700",
-        "value": "oklch(0.5 0.1489 242.749)",
-        "usage": "Raw sky palette step (oklch(0.5 0.1489 242.749)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-800",
-        "value": "oklch(0.42 0.1209 240.79)",
-        "usage": "Raw sky palette step (oklch(0.42 0.1209 240.79)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-900",
-        "value": "oklch(0.34 0.098 240.876)",
-        "usage": "Raw sky palette step (oklch(0.34 0.098 240.876)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-sky-950",
-        "value": "oklch(0.25 0.075 243.157)",
-        "usage": "Raw sky palette step (oklch(0.25 0.075 243.157)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-50",
-        "value": "oklch(0.96 0.0197 272.314)",
-        "usage": "Raw indigo palette step (oklch(0.96 0.0197 272.314)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-100",
-        "value": "oklch(0.925 0.0375 272.788)",
-        "usage": "Raw indigo palette step (oklch(0.925 0.0375 272.788)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-200",
-        "value": "oklch(0.865 0.069 274.039)",
-        "usage": "Raw indigo palette step (oklch(0.865 0.069 274.039)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-300",
-        "value": "oklch(0.78 0.1159 274.713)",
-        "usage": "Raw indigo palette step (oklch(0.78 0.1159 274.713)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-400",
-        "value": "oklch(0.67 0.1813 276.935)",
-        "usage": "Raw indigo palette step (oklch(0.67 0.1813 276.935)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-500",
-        "value": "oklch(0.57 0.244 277.117)",
-        "usage": "Raw indigo palette step (oklch(0.57 0.244 277.117)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-600",
-        "value": "oklch(0.49 0.2912 276.966)",
-        "usage": "Raw indigo palette step (oklch(0.49 0.2912 276.966)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-700",
-        "value": "oklch(0.42 0.2495 277.023)",
-        "usage": "Raw indigo palette step (oklch(0.42 0.2495 277.023)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-800",
-        "value": "oklch(0.35 0.2074 277.366)",
-        "usage": "Raw indigo palette step (oklch(0.35 0.2074 277.366)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-900",
-        "value": "oklch(0.28 0.1645 278.697)",
-        "usage": "Raw indigo palette step (oklch(0.28 0.1645 278.697)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-indigo-950",
-        "value": "oklch(0.21 0.1214 281.288)",
-        "usage": "Raw indigo palette step (oklch(0.21 0.1214 281.288)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-50",
-        "value": "oklch(0.965 0.0192 293.756)",
-        "usage": "Raw violet palette step (oklch(0.965 0.0192 293.756)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-100",
-        "value": "oklch(0.93 0.0392 294.588)",
-        "usage": "Raw violet palette step (oklch(0.93 0.0392 294.588)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-200",
-        "value": "oklch(0.875 0.0705 293.283)",
-        "usage": "Raw violet palette step (oklch(0.875 0.0705 293.283)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-300",
-        "value": "oklch(0.79 0.1223 293.571)",
-        "usage": "Raw violet palette step (oklch(0.79 0.1223 293.571)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-400",
-        "value": "oklch(0.68 0.1933 293.541)",
-        "usage": "Raw violet palette step (oklch(0.68 0.1933 293.541)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-500",
-        "value": "oklch(0.59 0.2532 292.717)",
-        "usage": "Raw violet palette step (oklch(0.59 0.2532 292.717)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-600",
-        "value": "oklch(0.51 0.2773 293.009)",
-        "usage": "Raw violet palette step (oklch(0.51 0.2773 293.009)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-700",
-        "value": "oklch(0.44 0.2397 292.581)",
-        "usage": "Raw violet palette step (oklch(0.44 0.2397 292.581)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-800",
-        "value": "oklch(0.37 0.2014 292.759)",
-        "usage": "Raw violet palette step (oklch(0.37 0.2014 292.759)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-900",
-        "value": "oklch(0.3 0.1626 293.745)",
-        "usage": "Raw violet palette step (oklch(0.3 0.1626 293.745)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-violet-950",
-        "value": "oklch(0.22 0.1207 291.089)",
-        "usage": "Raw violet palette step (oklch(0.22 0.1207 291.089)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-50",
-        "value": "oklch(0.967 0.0215 308.299)",
-        "usage": "Raw purple palette step (oklch(0.967 0.0215 308.299)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-100",
-        "value": "oklch(0.935 0.0421 307.174)",
-        "usage": "Raw purple palette step (oklch(0.935 0.0421 307.174)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-200",
-        "value": "oklch(0.88 0.0787 306.703)",
-        "usage": "Raw purple palette step (oklch(0.88 0.0787 306.703)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-300",
-        "value": "oklch(0.8 0.1343 306.383)",
-        "usage": "Raw purple palette step (oklch(0.8 0.1343 306.383)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-400",
-        "value": "oklch(0.7 0.2061 305.504)",
-        "usage": "Raw purple palette step (oklch(0.7 0.2061 305.504)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-500",
-        "value": "oklch(0.61 0.2701 303.9)",
-        "usage": "Raw purple palette step (oklch(0.61 0.2701 303.9)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-600",
-        "value": "oklch(0.53 0.2772 302.321)",
-        "usage": "Raw purple palette step (oklch(0.53 0.2772 302.321)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-700",
-        "value": "oklch(0.46 0.241 301.924)",
-        "usage": "Raw purple palette step (oklch(0.46 0.241 301.924)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-800",
-        "value": "oklch(0.39 0.2029 303.724)",
-        "usage": "Raw purple palette step (oklch(0.39 0.2029 303.724)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-900",
-        "value": "oklch(0.32 0.1657 304.987)",
-        "usage": "Raw purple palette step (oklch(0.32 0.1657 304.987)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-purple-950",
-        "value": "oklch(0.24 0.1253 302.717)",
-        "usage": "Raw purple palette step (oklch(0.24 0.1253 302.717)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-50",
-        "value": "oklch(0.97 0.0244 320.058)",
-        "usage": "Raw fuchsia palette step (oklch(0.97 0.0244 320.058)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-100",
-        "value": "oklch(0.94 0.0479 318.852)",
-        "usage": "Raw fuchsia palette step (oklch(0.94 0.0479 318.852)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-200",
-        "value": "oklch(0.89 0.0911 319.62)",
-        "usage": "Raw fuchsia palette step (oklch(0.89 0.0911 319.62)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-300",
-        "value": "oklch(0.81 0.1692 321.434)",
-        "usage": "Raw fuchsia palette step (oklch(0.81 0.1692 321.434)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-400",
-        "value": "oklch(0.71 0.2728 322.16)",
-        "usage": "Raw fuchsia palette step (oklch(0.71 0.2728 322.16)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-500",
-        "value": "oklch(0.63 0.3072 322.15)",
-        "usage": "Raw fuchsia palette step (oklch(0.63 0.3072 322.15)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-600",
-        "value": "oklch(0.56 0.2723 322.896)",
-        "usage": "Raw fuchsia palette step (oklch(0.56 0.2723 322.896)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-700",
-        "value": "oklch(0.49 0.2374 323.949)",
-        "usage": "Raw fuchsia palette step (oklch(0.49 0.2374 323.949)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-800",
-        "value": "oklch(0.41 0.1982 324.591)",
-        "usage": "Raw fuchsia palette step (oklch(0.41 0.1982 324.591)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-900",
-        "value": "oklch(0.33 0.159 325.612)",
-        "usage": "Raw fuchsia palette step (oklch(0.33 0.159 325.612)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-fuchsia-950",
-        "value": "oklch(0.25 0.1204 325.661)",
-        "usage": "Raw fuchsia palette step (oklch(0.25 0.1204 325.661)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-50",
-        "value": "oklch(0.97 0.024 343.198)",
-        "usage": "Raw pink palette step (oklch(0.97 0.024 343.198)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-100",
-        "value": "oklch(0.94 0.05 342.258)",
-        "usage": "Raw pink palette step (oklch(0.94 0.05 342.258)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-200",
-        "value": "oklch(0.89 0.0943 343.231)",
-        "usage": "Raw pink palette step (oklch(0.89 0.0943 343.231)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-300",
-        "value": "oklch(0.82 0.1582 346.018)",
-        "usage": "Raw pink palette step (oklch(0.82 0.1582 346.018)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-400",
-        "value": "oklch(0.72 0.2597 349.761)",
-        "usage": "Raw pink palette step (oklch(0.72 0.2597 349.761)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-500",
-        "value": "oklch(0.64 0.2809 354.308)",
-        "usage": "Raw pink palette step (oklch(0.64 0.2809 354.308)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-600",
-        "value": "oklch(0.57 0.2469 0.584)",
-        "usage": "Raw pink palette step (oklch(0.57 0.2469 0.584)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-700",
-        "value": "oklch(0.5 0.2154 3.958)",
-        "usage": "Raw pink palette step (oklch(0.5 0.2154 3.958)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-800",
-        "value": "oklch(0.42 0.181 3.815)",
-        "usage": "Raw pink palette step (oklch(0.42 0.181 3.815)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-900",
-        "value": "oklch(0.34 0.1468 2.432)",
-        "usage": "Raw pink palette step (oklch(0.34 0.1468 2.432)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-pink-950",
-        "value": "oklch(0.25 0.1077 3.907)",
-        "usage": "Raw pink palette step (oklch(0.25 0.1077 3.907)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-50",
-        "value": "oklch(0.985 0.0034 247.858)",
-        "usage": "Raw slate palette step (oklch(0.985 0.0034 247.858)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-75",
-        "value": "oklch(0.9713 0.0068 247.895)",
-        "usage": "Raw slate palette step (oklch(0.9713 0.0068 247.895)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-100",
-        "value": "oklch(0.945 0.0069 247.896)",
-        "usage": "Raw slate palette step (oklch(0.945 0.0069 247.896)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-150",
-        "value": "oklch(0.9227 0.0126 255.508)",
-        "usage": "Raw slate palette step (oklch(0.9227 0.0126 255.508)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-200",
-        "value": "oklch(0.87 0.0126 255.508)",
-        "usage": "Raw slate palette step (oklch(0.87 0.0126 255.508)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-300",
-        "value": "oklch(0.765 0.0198 252.894)",
-        "usage": "Raw slate palette step (oklch(0.765 0.0198 252.894)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-400",
-        "value": "oklch(0.66 0.0402 256.993)",
-        "usage": "Raw slate palette step (oklch(0.66 0.0402 256.993)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-500",
-        "value": "oklch(0.553 0.046 257.526)",
-        "usage": "Raw slate palette step (oklch(0.553 0.046 257.526)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-600",
-        "value": "oklch(0.46 0.043 257.421)",
-        "usage": "Raw slate palette step (oklch(0.46 0.043 257.421)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-700",
-        "value": "oklch(0.385 0.0449 257.424)",
-        "usage": "Raw slate palette step (oklch(0.385 0.0449 257.424)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-800",
-        "value": "oklch(0.297 0.0408 260.329)",
-        "usage": "Raw slate palette step (oklch(0.297 0.0408 260.329)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-900",
-        "value": "oklch(0.207 0.0398 265.755)",
-        "usage": "Raw slate palette step (oklch(0.207 0.0398 265.755)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-950",
-        "value": "oklch(0.118 0.0406 264.695)",
-        "usage": "Raw slate palette step (oklch(0.118 0.0406 264.695)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a50",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.0392)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a100",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.0627)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a200",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.0941)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a300",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.1882)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a400",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.3137)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a500",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.502)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a600",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.6275)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a700",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.7529)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a800",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.8471)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a900",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.9098)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-slate-a950",
-        "value": "oklch(0.1288 0.0406 264.695 / 0.9569)",
-        "usage": "Raw slate palette step (oklch(0.1288 0.0406 264.695 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-50",
-        "value": "oklch(0.971 0.0179 12.422)",
-        "usage": "Raw rose palette step (oklch(0.971 0.0179 12.422)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-100",
-        "value": "oklch(0.936 0.0406 12.58)",
-        "usage": "Raw rose palette step (oklch(0.936 0.0406 12.58)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-200",
-        "value": "oklch(0.885 0.0771 10.001)",
-        "usage": "Raw rose palette step (oklch(0.885 0.0771 10.001)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-300",
-        "value": "oklch(0.81 0.1354 11.638)",
-        "usage": "Raw rose palette step (oklch(0.81 0.1354 11.638)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-400",
-        "value": "oklch(0.71 0.2263 13.428)",
-        "usage": "Raw rose palette step (oklch(0.71 0.2263 13.428)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-500",
-        "value": "oklch(0.64 0.2744 16.439)",
-        "usage": "Raw rose palette step (oklch(0.64 0.2744 16.439)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-600",
-        "value": "oklch(0.58 0.2489 17.585)",
-        "usage": "Raw rose palette step (oklch(0.58 0.2489 17.585)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-700",
-        "value": "oklch(0.51 0.2187 16.935)",
-        "usage": "Raw rose palette step (oklch(0.51 0.2187 16.935)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-800",
-        "value": "oklch(0.42 0.1799 13.697)",
-        "usage": "Raw rose palette step (oklch(0.42 0.1799 13.697)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-900",
-        "value": "oklch(0.34 0.1457 10.272)",
-        "usage": "Raw rose palette step (oklch(0.34 0.1457 10.272)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-rose-950",
-        "value": "oklch(0.25 0.1071 12.094)",
-        "usage": "Raw rose palette step (oklch(0.25 0.1071 12.094)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-50",
-        "value": "oklch(0.985 0.0421 120.757)",
-        "usage": "Raw lime palette step (oklch(0.985 0.0421 120.757)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-100",
-        "value": "oklch(0.965 0.1023 122.328)",
-        "usage": "Raw lime palette step (oklch(0.965 0.1023 122.328)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-200",
-        "value": "oklch(0.93 0.2278 124.321)",
-        "usage": "Raw lime palette step (oklch(0.93 0.2278 124.321)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-300",
-        "value": "oklch(0.9 0.2565 126.665)",
-        "usage": "Raw lime palette step (oklch(0.9 0.2565 126.665)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-400",
-        "value": "oklch(0.88 0.2588 128.85)",
-        "usage": "Raw lime palette step (oklch(0.88 0.2588 128.85)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-500",
-        "value": "oklch(0.82 0.2486 130.85)",
-        "usage": "Raw lime palette step (oklch(0.82 0.2486 130.85)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-600",
-        "value": "oklch(0.73 0.2243 131.684)",
-        "usage": "Raw lime palette step (oklch(0.73 0.2243 131.684)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-700",
-        "value": "oklch(0.61 0.1871 131.589)",
-        "usage": "Raw lime palette step (oklch(0.61 0.1871 131.589)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-800",
-        "value": "oklch(0.49 0.1488 130.933)",
-        "usage": "Raw lime palette step (oklch(0.49 0.1488 130.933)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-900",
-        "value": "oklch(0.37 0.1125 131.063)",
-        "usage": "Raw lime palette step (oklch(0.37 0.1125 131.063)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-lime-950",
-        "value": "oklch(0.26 0.0805 132.109)",
-        "usage": "Raw lime palette step (oklch(0.26 0.0805 132.109)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-50",
-        "value": "oklch(0.985 0.0428 102.212)",
-        "usage": "Raw yellow palette step (oklch(0.985 0.0428 102.212)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-100",
-        "value": "oklch(0.96 0.1199 103.193)",
-        "usage": "Raw yellow palette step (oklch(0.96 0.1199 103.193)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-200",
-        "value": "oklch(0.92 0.2067 101.54)",
-        "usage": "Raw yellow palette step (oklch(0.92 0.2067 101.54)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-300",
-        "value": "oklch(0.88 0.2 98.111)",
-        "usage": "Raw yellow palette step (oklch(0.88 0.2 98.111)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-400",
-        "value": "oklch(0.86 0.193 91.936)",
-        "usage": "Raw yellow palette step (oklch(0.86 0.193 91.936)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-500",
-        "value": "oklch(0.8 0.1794 86.047)",
-        "usage": "Raw yellow palette step (oklch(0.8 0.1794 86.047)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-600",
-        "value": "oklch(0.72 0.1653 75.834)",
-        "usage": "Raw yellow palette step (oklch(0.72 0.1653 75.834)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-700",
-        "value": "oklch(0.6 0.1449 66.442)",
-        "usage": "Raw yellow palette step (oklch(0.6 0.1449 66.442)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-800",
-        "value": "oklch(0.47 0.1176 61.907)",
-        "usage": "Raw yellow palette step (oklch(0.47 0.1176 61.907)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-900",
-        "value": "oklch(0.35 0.0911 57.708)",
-        "usage": "Raw yellow palette step (oklch(0.35 0.0911 57.708)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-yellow-950",
-        "value": "oklch(0.23 0.0625 53.813)",
-        "usage": "Raw yellow palette step (oklch(0.23 0.0625 53.813)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-50",
-        "value": "oklch(0.97 0.0152 252.81)",
-        "usage": "Raw blue palette step (oklch(0.97 0.0152 252.81)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-100",
-        "value": "oklch(0.932 0.0342 257.472)",
-        "usage": "Raw blue palette step (oklch(0.932 0.0342 257.472)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-200",
-        "value": "oklch(0.882 0.0612 253.613)",
-        "usage": "Raw blue palette step (oklch(0.882 0.0612 253.613)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-300",
-        "value": "oklch(0.809 0.1012 254.248)",
-        "usage": "Raw blue palette step (oklch(0.809 0.1012 254.248)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-400",
-        "value": "oklch(0.707 0.1599 255.225)",
-        "usage": "Raw blue palette step (oklch(0.707 0.1599 255.225)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-500",
-        "value": "oklch(0.623 0.2112 255.145)",
-        "usage": "Raw blue palette step (oklch(0.623 0.2112 255.145)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-600",
-        "value": "oklch(0.546 0.2205 255.276)",
-        "usage": "Raw blue palette step (oklch(0.546 0.2205 255.276)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-700",
-        "value": "oklch(0.488 0.197 255.267)",
-        "usage": "Raw blue palette step (oklch(0.488 0.197 255.267)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-800",
-        "value": "oklch(0.41 0.1633 254.871)",
-        "usage": "Raw blue palette step (oklch(0.41 0.1633 254.871)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-900",
-        "value": "oklch(0.33 0.1316 254.902)",
-        "usage": "Raw blue palette step (oklch(0.33 0.1316 254.902)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-blue-950",
-        "value": "oklch(0.25 0.1042 256.214)",
-        "usage": "Raw blue palette step (oklch(0.25 0.1042 256.214)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-50",
-        "value": "oklch(0.985 0.0017 247.839)",
-        "usage": "Raw gray palette step (oklch(0.985 0.0017 247.839)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-75",
-        "value": "oklch(0.97 0.0029 264.542)",
-        "usage": "Raw gray palette step (oklch(0.97 0.0029 264.542)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-100",
-        "value": "oklch(0.945 0.0029 264.542)",
-        "usage": "Raw gray palette step (oklch(0.945 0.0029 264.542)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-150",
-        "value": "oklch(0.9215 0.0058 264.531)",
-        "usage": "Raw gray palette step (oklch(0.9215 0.0058 264.531)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-200",
-        "value": "oklch(0.87 0.0058 264.531)",
-        "usage": "Raw gray palette step (oklch(0.87 0.0058 264.531)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-300",
-        "value": "oklch(0.765 0.0093 258.338)",
-        "usage": "Raw gray palette step (oklch(0.765 0.0093 258.338)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-400",
-        "value": "oklch(0.66 0.0224 261.749)",
-        "usage": "Raw gray palette step (oklch(0.66 0.0224 261.749)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-500",
-        "value": "oklch(0.553 0.0267 264.328)",
-        "usage": "Raw gray palette step (oklch(0.553 0.0267 264.328)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-600",
-        "value": "oklch(0.46 0.0298 257.68)",
-        "usage": "Raw gray palette step (oklch(0.46 0.0298 257.68)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-700",
-        "value": "oklch(0.385 0.0343 260.169)",
-        "usage": "Raw gray palette step (oklch(0.385 0.0343 260.169)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-800",
-        "value": "oklch(0.297 0.0335 257.672)",
-        "usage": "Raw gray palette step (oklch(0.297 0.0335 257.672)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-900",
-        "value": "oklch(0.207 0.0318 264.665)",
-        "usage": "Raw gray palette step (oklch(0.207 0.0318 264.665)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-950",
-        "value": "oklch(0.118 0.0274 261.692)",
-        "usage": "Raw gray palette step (oklch(0.118 0.0274 261.692)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a50",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.0392)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a100",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.0627)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a200",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.0941)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a300",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.1882)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a400",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.3137)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a500",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.502)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a600",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.6275)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a700",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.7529)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a800",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.8471)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a900",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.9098)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-gray-a950",
-        "value": "oklch(0.1296 0.0274 261.692 / 0.9569)",
-        "usage": "Raw gray palette step (oklch(0.1296 0.0274 261.692 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-50",
-        "value": "oklch(0.985 0 0)",
-        "usage": "Raw zinc palette step (oklch(0.985 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-75",
-        "value": "oklch(0.9704 0.0013 286.375)",
-        "usage": "Raw zinc palette step (oklch(0.9704 0.0013 286.375)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-100",
-        "value": "oklch(0.945 0.0013 286.375)",
-        "usage": "Raw zinc palette step (oklch(0.945 0.0013 286.375)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-150",
-        "value": "oklch(0.924 0.0035 247.861)",
-        "usage": "Raw zinc palette step (oklch(0.924 0.0035 247.861)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-200",
-        "value": "oklch(0.87 0.0035 247.861)",
-        "usage": "Raw zinc palette step (oklch(0.87 0.0035 247.861)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-300",
-        "value": "oklch(0.765 0.0053 247.885)",
-        "usage": "Raw zinc palette step (oklch(0.765 0.0053 247.885)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-400",
-        "value": "oklch(0.66 0.0144 286.025)",
-        "usage": "Raw zinc palette step (oklch(0.66 0.0144 286.025)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-500",
-        "value": "oklch(0.553 0.0153 285.886)",
-        "usage": "Raw zinc palette step (oklch(0.553 0.0153 285.886)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-600",
-        "value": "oklch(0.46 0.0162 285.717)",
-        "usage": "Raw zinc palette step (oklch(0.46 0.0162 285.717)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-700",
-        "value": "oklch(0.385 0.0119 285.805)",
-        "usage": "Raw zinc palette step (oklch(0.385 0.0119 285.805)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-800",
-        "value": "oklch(0.297 0.0057 271.205)",
-        "usage": "Raw zinc palette step (oklch(0.297 0.0057 271.205)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-900",
-        "value": "oklch(0.207 0.0061 271.116)",
-        "usage": "Raw zinc palette step (oklch(0.207 0.0061 271.116)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-950",
-        "value": "oklch(0.118 0.0048 262.802)",
-        "usage": "Raw zinc palette step (oklch(0.118 0.0048 262.802)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a50",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.0392)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a100",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.0627)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a200",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.0941)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a300",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.1882)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a400",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.3137)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a500",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.502)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a600",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.6275)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a700",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.7529)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a800",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.8471)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a900",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.9098)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-zinc-a950",
-        "value": "oklch(0.1395 0.0048 262.802 / 0.9569)",
-        "usage": "Raw zinc palette step (oklch(0.1395 0.0048 262.802 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-50",
-        "value": "oklch(0.985 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.985 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-75",
-        "value": "oklch(0.9702 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.9702 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-100",
-        "value": "oklch(0.945 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.945 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-150",
-        "value": "oklch(0.9219 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.9219 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-200",
-        "value": "oklch(0.87 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.87 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-300",
-        "value": "oklch(0.765 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.765 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-400",
-        "value": "oklch(0.66 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.66 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-500",
-        "value": "oklch(0.553 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.553 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-600",
-        "value": "oklch(0.46 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.46 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-700",
-        "value": "oklch(0.385 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.385 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-800",
-        "value": "oklch(0.297 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.297 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-900",
-        "value": "oklch(0.207 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.207 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-950",
-        "value": "oklch(0.118 0 0)",
-        "usage": "Raw neutral palette step (oklch(0.118 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a50",
-        "value": "oklch(0.1448 0 0 / 0.0392)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a100",
-        "value": "oklch(0.1448 0 0 / 0.0627)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a200",
-        "value": "oklch(0.1448 0 0 / 0.0941)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a300",
-        "value": "oklch(0.1448 0 0 / 0.1882)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a400",
-        "value": "oklch(0.1448 0 0 / 0.3137)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a500",
-        "value": "oklch(0.1448 0 0 / 0.502)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a600",
-        "value": "oklch(0.1448 0 0 / 0.6275)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a700",
-        "value": "oklch(0.1448 0 0 / 0.7529)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a800",
-        "value": "oklch(0.1448 0 0 / 0.8471)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a900",
-        "value": "oklch(0.1448 0 0 / 0.9098)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-neutral-a950",
-        "value": "oklch(0.1448 0 0 / 0.9569)",
-        "usage": "Raw neutral palette step (oklch(0.1448 0 0 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-50",
-        "value": "oklch(0.985 0.0029 84.559)",
-        "usage": "Raw stone palette step (oklch(0.985 0.0029 84.559)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-75",
-        "value": "oklch(0.9701 0.0041 91.446)",
-        "usage": "Raw stone palette step (oklch(0.9701 0.0041 91.446)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-100",
-        "value": "oklch(0.945 0.0029 84.559)",
-        "usage": "Raw stone palette step (oklch(0.945 0.0029 84.559)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-150",
-        "value": "oklch(0.9226 0.0046 78.297)",
-        "usage": "Raw stone palette step (oklch(0.9226 0.0046 78.297)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-200",
-        "value": "oklch(0.87 0.0047 78.296)",
-        "usage": "Raw stone palette step (oklch(0.87 0.0047 78.296)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-300",
-        "value": "oklch(0.765 0.0084 73.724)",
-        "usage": "Raw stone palette step (oklch(0.765 0.0084 73.724)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-400",
-        "value": "oklch(0.66 0.0094 84.582)",
-        "usage": "Raw stone palette step (oklch(0.66 0.0094 84.582)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-500",
-        "value": "oklch(0.553 0.0085 80.708)",
-        "usage": "Raw stone palette step (oklch(0.553 0.0085 80.708)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-600",
-        "value": "oklch(0.46 0.0065 95.196)",
-        "usage": "Raw stone palette step (oklch(0.46 0.0065 95.196)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-700",
-        "value": "oklch(0.385 0.005 106.631)",
-        "usage": "Raw stone palette step (oklch(0.385 0.005 106.631)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-800",
-        "value": "oklch(0.297 0 0)",
-        "usage": "Raw stone palette step (oklch(0.297 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-900",
-        "value": "oklch(0.207 0 0)",
-        "usage": "Raw stone palette step (oklch(0.207 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-950",
-        "value": "oklch(0.118 0 0)",
-        "usage": "Raw stone palette step (oklch(0.118 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a50",
-        "value": "oklch(0.14 0.0138 92.993 / 0.0392)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a100",
-        "value": "oklch(0.14 0.0138 92.993 / 0.0627)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a200",
-        "value": "oklch(0.14 0.0138 92.993 / 0.0941)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a300",
-        "value": "oklch(0.14 0.0138 92.993 / 0.1882)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a400",
-        "value": "oklch(0.14 0.0138 92.993 / 0.3137)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a500",
-        "value": "oklch(0.14 0.0138 92.993 / 0.502)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a600",
-        "value": "oklch(0.14 0.0138 92.993 / 0.6275)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a700",
-        "value": "oklch(0.14 0.0138 92.993 / 0.7529)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a800",
-        "value": "oklch(0.14 0.0138 92.993 / 0.8471)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a900",
-        "value": "oklch(0.14 0.0138 92.993 / 0.9098)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-stone-a950",
-        "value": "oklch(0.14 0.0138 92.993 / 0.9569)",
-        "usage": "Raw stone palette step (oklch(0.14 0.0138 92.993 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-50",
-        "value": "oklch(0.971 0.0176 28.865)",
-        "usage": "Raw red palette step (oklch(0.971 0.0176 28.865)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-100",
-        "value": "oklch(0.936 0.0399 27.342)",
-        "usage": "Raw red palette step (oklch(0.936 0.0399 27.342)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-200",
-        "value": "oklch(0.885 0.0747 27.394)",
-        "usage": "Raw red palette step (oklch(0.885 0.0747 27.394)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-300",
-        "value": "oklch(0.808 0.1333 28.058)",
-        "usage": "Raw red palette step (oklch(0.808 0.1333 28.058)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-400",
-        "value": "oklch(0.704 0.2267 27.842)",
-        "usage": "Raw red palette step (oklch(0.704 0.2267 27.842)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-500",
-        "value": "oklch(0.637 0.2786 27.978)",
-        "usage": "Raw red palette step (oklch(0.637 0.2786 27.978)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-600",
-        "value": "oklch(0.577 0.2523 27.926)",
-        "usage": "Raw red palette step (oklch(0.577 0.2523 27.926)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-700",
-        "value": "oklch(0.505 0.2209 27.946)",
-        "usage": "Raw red palette step (oklch(0.505 0.2209 27.946)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-800",
-        "value": "oklch(0.42 0.1838 28.144)",
-        "usage": "Raw red palette step (oklch(0.42 0.1838 28.144)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-900",
-        "value": "oklch(0.34 0.1487 28.057)",
-        "usage": "Raw red palette step (oklch(0.34 0.1487 28.057)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-red-950",
-        "value": "oklch(0.25 0.1094 28.309)",
-        "usage": "Raw red palette step (oklch(0.25 0.1094 28.309)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-50",
-        "value": "oklch(0.98 0.0185 73.684)",
-        "usage": "Raw orange palette step (oklch(0.98 0.0185 73.684)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-100",
-        "value": "oklch(0.955 0.0435 75.164)",
-        "usage": "Raw orange palette step (oklch(0.955 0.0435 75.164)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-200",
-        "value": "oklch(0.91 0.0819 70.697)",
-        "usage": "Raw orange palette step (oklch(0.91 0.0819 70.697)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-300",
-        "value": "oklch(0.84 0.142 66.29)",
-        "usage": "Raw orange palette step (oklch(0.84 0.142 66.29)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-400",
-        "value": "oklch(0.78 0.1803 55.934)",
-        "usage": "Raw orange palette step (oklch(0.78 0.1803 55.934)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-500",
-        "value": "oklch(0.71 0.2099 47.604)",
-        "usage": "Raw orange palette step (oklch(0.71 0.2099 47.604)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-600",
-        "value": "oklch(0.62 0.2044 41.116)",
-        "usage": "Raw orange palette step (oklch(0.62 0.2044 41.116)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-700",
-        "value": "oklch(0.52 0.1809 38.402)",
-        "usage": "Raw orange palette step (oklch(0.52 0.1809 38.402)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-800",
-        "value": "oklch(0.43 0.153 37.304)",
-        "usage": "Raw orange palette step (oklch(0.43 0.153 37.304)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-900",
-        "value": "oklch(0.34 0.1188 38.172)",
-        "usage": "Raw orange palette step (oklch(0.34 0.1188 38.172)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-orange-950",
-        "value": "oklch(0.25 0.091 36.259)",
-        "usage": "Raw orange palette step (oklch(0.25 0.091 36.259)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-50",
-        "value": "oklch(0.985 0.0143 75.368)",
-        "usage": "Raw amber palette step (oklch(0.985 0.0143 75.368)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-100",
-        "value": "oklch(0.96 0.0386 75.273)",
-        "usage": "Raw amber palette step (oklch(0.96 0.0386 75.273)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-200",
-        "value": "oklch(0.92 0.0786 74.981)",
-        "usage": "Raw amber palette step (oklch(0.92 0.0786 74.981)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-300",
-        "value": "oklch(0.87 0.1315 74.99)",
-        "usage": "Raw amber palette step (oklch(0.87 0.1315 74.99)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-400",
-        "value": "oklch(0.84 0.1659 75.338)",
-        "usage": "Raw amber palette step (oklch(0.84 0.1659 75.338)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-500",
-        "value": "oklch(0.77 0.1774 74.873)",
-        "usage": "Raw amber palette step (oklch(0.77 0.1774 74.873)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-600",
-        "value": "oklch(0.68 0.1564 75.243)",
-        "usage": "Raw amber palette step (oklch(0.68 0.1564 75.243)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-700",
-        "value": "oklch(0.57 0.131 75.452)",
-        "usage": "Raw amber palette step (oklch(0.57 0.131 75.452)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-800",
-        "value": "oklch(0.46 0.1058 75.364)",
-        "usage": "Raw amber palette step (oklch(0.46 0.1058 75.364)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-900",
-        "value": "oklch(0.35 0.0806 74.939)",
-        "usage": "Raw amber palette step (oklch(0.35 0.0806 74.939)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-amber-950",
-        "value": "oklch(0.24 0.0553 74.712)",
-        "usage": "Raw amber palette step (oklch(0.24 0.0553 74.712)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-base",
-        "value": "oklch(1 0 0)",
-        "usage": "Raw white palette step (oklch(1 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a50",
-        "value": "oklch(1 0 0 / 0.0392)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a100",
-        "value": "oklch(1 0 0 / 0.0627)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a200",
-        "value": "oklch(1 0 0 / 0.0941)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a300",
-        "value": "oklch(1 0 0 / 0.1882)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a400",
-        "value": "oklch(1 0 0 / 0.3137)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a500",
-        "value": "oklch(1 0 0 / 0.502)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a600",
-        "value": "oklch(1 0 0 / 0.6275)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a700",
-        "value": "oklch(1 0 0 / 0.7529)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a800",
-        "value": "oklch(1 0 0 / 0.8471)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a900",
-        "value": "oklch(1 0 0 / 0.9098)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-white-a950",
-        "value": "oklch(1 0 0 / 0.9569)",
-        "usage": "Raw white palette step (oklch(1 0 0 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-base",
-        "value": "oklch(0.1448 0 0)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a50",
-        "value": "oklch(0.1448 0 0 / 0.0392)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.0392)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a100",
-        "value": "oklch(0.1448 0 0 / 0.0627)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.0627)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a200",
-        "value": "oklch(0.1448 0 0 / 0.0941)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.0941)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a300",
-        "value": "oklch(0.1448 0 0 / 0.1882)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.1882)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a400",
-        "value": "oklch(0.1448 0 0 / 0.3137)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.3137)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a500",
-        "value": "oklch(0.1448 0 0 / 0.502)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.502)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a600",
-        "value": "oklch(0.1448 0 0 / 0.6275)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.6275)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a700",
-        "value": "oklch(0.1448 0 0 / 0.7529)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.7529)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a800",
-        "value": "oklch(0.1448 0 0 / 0.8471)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.8471)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a900",
-        "value": "oklch(0.1448 0 0 / 0.9098)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.9098)). Components read the semantic colours; use this for one-off fills only."
-      },
-      {
-        "name": "nx-color-black-a950",
-        "value": "oklch(0.1448 0 0 / 0.9569)",
-        "usage": "Raw black palette step (oklch(0.1448 0 0 / 0.9569)). Components read the semantic colours; use this for one-off fills only."
-      }
-    ]
-  },
-  "type": {
-    "fonts": [],
-    "families": {
-      "sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      "heading": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-      "serif": "Georgia",
-      "mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
-    },
-    "groups": [
-      {
-        "name": "heading",
-        "family": "heading",
-        "styles": [
-          {
-            "name": "typography-heading-large",
-            "fontSize": "30px",
-            "usage": "Major section heading, dialog titles, card group headers",
-            "lineHeight": "36px",
-            "fontWeight": 700,
-            "letterSpacing": "-0.8px"
-          },
-          {
-            "name": "typography-heading-medium",
-            "fontSize": "24px",
-            "usage": "Susbsection heading, card titles, modal headers",
-            "lineHeight": "32px",
-            "fontWeight": 700,
-            "letterSpacing": "-0.4px"
-          },
-          {
-            "name": "typography-heading-small",
-            "fontSize": "20px",
-            "usage": "Card Titles, list section headers, minor heading",
-            "lineHeight": "28px",
-            "fontWeight": 700,
-            "letterSpacing": "-0.4px"
-          },
-          {
-            "name": "typography-heading-xsmall",
-            "fontSize": "18px",
-            "usage": "Table Section headers, accordian titles, minor seciton lables",
-            "lineHeight": "28px",
-            "fontWeight": 700,
-            "letterSpacing": "-0.4px"
-          },
-          {
-            "name": "typography-heading-xxsmall",
-            "fontSize": "16px",
-            "usage": "Smallest heading tier — empty-state titles, compact card headers",
-            "lineHeight": "24px",
-            "fontWeight": 600,
-            "letterSpacing": "-0.4px"
-          }
-        ]
-      },
-      {
-        "name": "body",
-        "family": "sans",
-        "styles": [
-          {
-            "name": "typography-body-default",
-            "fontSize": "14px",
-            "usage": "Default paragraph text, descriptions, card content, and main body copy",
-            "lineHeight": "20px",
-            "fontWeight": 400,
-            "letterSpacing": "0px"
-          },
-          {
-            "name": "typography-body-small",
-            "fontSize": "12px",
-            "usage": "Supporting copy, captions, and secondary text under a heading",
-            "lineHeight": "16px",
-            "fontWeight": 400,
-            "letterSpacing": "0px"
-          }
-        ]
-      },
-      {
-        "name": "typography",
-        "family": "sans",
-        "styles": [
-          {
-            "name": "typography-shortcut",
-            "fontSize": "12px",
-            "usage": "Keyboard shortcut hint text in command palettes, menus, and menubars",
-            "lineHeight": "16px",
-            "fontWeight": 400,
-            "letterSpacing": "1.6px"
-          }
-        ]
-      },
-      {
-        "name": "label",
-        "family": "sans",
-        "styles": [
-          {
-            "name": "typography-label-default",
-            "fontSize": "14px",
-            "usage": "Form, field, and control labels at default density",
-            "lineHeight": "20px",
-            "fontWeight": 500,
-            "letterSpacing": "0px"
-          },
-          {
-            "name": "typography-label-small",
-            "fontSize": "12px",
-            "usage": "Compact form and control labels in dense layouts",
-            "lineHeight": "16px",
-            "fontWeight": 500,
-            "letterSpacing": "0px"
-          },
-          {
-            "name": "typography-label-caps",
-            "fontSize": "11px",
-            "usage": "Compact eyebrow and section labels, tuned for all-caps; apply uppercase at the call site",
-            "lineHeight": "12px",
-            "fontWeight": 600,
-            "letterSpacing": "0.4px"
-          }
-        ]
-      },
-      {
-        "name": "code",
-        "family": "mono",
-        "styles": [
-          {
-            "name": "typography-code-block",
-            "fontSize": "14px",
-            "usage": "Text style ``nx:typography-code-block``.",
-            "lineHeight": "20px",
-            "fontWeight": 400,
-            "letterSpacing": "0px"
-          },
-          {
-            "name": "typography-code-inline",
-            "fontSize": "14px",
-            "usage": "Text style ``nx:typography-code-inline``.",
-            "fontWeight": 600,
-            "letterSpacing": "0px"
-          }
-        ]
-      }
-    ]
-  },
-  "spacing": {
-    "tokens": [
-      {
-        "name": "nx-spacing-0",
-        "value": "0px",
-        "usage": "Spacing step 0 (0px): `nx:p-0`, `nx:gap-0`, `nx:m-0`."
-      },
-      {
-        "name": "nx-spacing-1",
-        "value": "4px",
-        "usage": "Spacing step 1 (4px): `nx:p-1`, `nx:gap-1`, `nx:m-1`."
-      },
-      {
-        "name": "nx-spacing-2",
-        "value": "8px",
-        "usage": "Spacing step 2 (8px): `nx:p-2`, `nx:gap-2`, `nx:m-2`."
-      },
-      {
-        "name": "nx-spacing-3",
-        "value": "12px",
-        "usage": "Spacing step 3 (12px): `nx:p-3`, `nx:gap-3`, `nx:m-3`."
-      },
-      {
-        "name": "nx-spacing-4",
-        "value": "16px",
-        "usage": "Spacing step 4 (16px): `nx:p-4`, `nx:gap-4`, `nx:m-4`."
-      },
-      {
-        "name": "nx-spacing-5",
-        "value": "20px",
-        "usage": "Spacing step 5 (20px): `nx:p-5`, `nx:gap-5`, `nx:m-5`."
-      },
-      {
-        "name": "nx-spacing-6",
-        "value": "24px",
-        "usage": "Spacing step 6 (24px): `nx:p-6`, `nx:gap-6`, `nx:m-6`."
-      },
-      {
-        "name": "nx-spacing-7",
-        "value": "28px",
-        "usage": "Spacing step 7 (28px): `nx:p-7`, `nx:gap-7`, `nx:m-7`."
-      },
-      {
-        "name": "nx-spacing-8",
-        "value": "32px",
-        "usage": "Spacing step 8 (32px): `nx:p-8`, `nx:gap-8`, `nx:m-8`."
-      },
-      {
-        "name": "nx-spacing-9",
-        "value": "36px",
-        "usage": "Spacing step 9 (36px): `nx:p-9`, `nx:gap-9`, `nx:m-9`."
-      },
-      {
-        "name": "nx-spacing-10",
-        "value": "40px",
-        "usage": "Spacing step 10 (40px): `nx:p-10`, `nx:gap-10`, `nx:m-10`."
-      },
-      {
-        "name": "nx-spacing-11",
-        "value": "44px",
-        "usage": "Spacing step 11 (44px): `nx:p-11`, `nx:gap-11`, `nx:m-11`."
-      },
-      {
-        "name": "nx-spacing-12",
-        "value": "48px",
-        "usage": "Spacing step 12 (48px): `nx:p-12`, `nx:gap-12`, `nx:m-12`."
+        "name": "nx-spacing-12",
+        "value": "48px",
+        "usage": "Spacing step 12 (48px): `nx:p-12`, `nx:gap-12`, `nx:m-12`. Read by AlertDialog, Avatar, Button and 16 more components."
       },
       {
         "name": "nx-spacing-14",
         "value": "56px",
-        "usage": "Spacing step 14 (56px): `nx:p-14`, `nx:gap-14`, `nx:m-14`."
+        "usage": "Spacing step 14 (56px): `nx:p-14`, `nx:gap-14`, `nx:m-14`. Read by Avatar, DatePicker, Message and ToggleGroup."
       },
       {
         "name": "nx-spacing-16",
         "value": "64px",
-        "usage": "Spacing step 16 (64px): `nx:p-16`, `nx:gap-16`, `nx:m-16`."
+        "usage": "Spacing step 16 (64px): `nx:p-16`, `nx:gap-16`, `nx:m-16`. Read by Avatar, InputGroup, Message and 2 more components."
       },
       {
         "name": "nx-spacing-20",
         "value": "80px",
-        "usage": "Spacing step 20 (80px): `nx:p-20`, `nx:gap-20`, `nx:m-20`."
+        "usage": "Spacing step 20 (80px): `nx:p-20`, `nx:gap-20`, `nx:m-20`. Read by Avatar, Message and ToggleGroup."
       },
       {
         "name": "nx-spacing-24",
         "value": "96px",
-        "usage": "Spacing step 24 (96px): `nx:p-24`, `nx:gap-24`, `nx:m-24`."
+        "usage": "Spacing step 24 (96px): `nx:p-24`, `nx:gap-24`, `nx:m-24`. Read by Avatar, Drawer, Message and ToggleGroup."
       },
       {
         "name": "nx-spacing-28",
         "value": "112px",
-        "usage": "Spacing step 28 (112px): `nx:p-28`, `nx:gap-28`, `nx:m-28`."
+        "usage": "Spacing step 28 (112px): `nx:p-28`, `nx:gap-28`, `nx:m-28`. Read by ToggleGroup."
       },
       {
         "name": "nx-spacing-32",
         "value": "128px",
-        "usage": "Spacing step 32 (128px): `nx:p-32`, `nx:gap-32`, `nx:m-32`."
+        "usage": "Spacing step 32 (128px): `nx:p-32`, `nx:gap-32`, `nx:m-32`. Read by Attachment, Chart, ContextMenu and 5 more components."
       },
       {
         "name": "nx-spacing-36",
         "value": "144px",
-        "usage": "Spacing step 36 (144px): `nx:p-36`, `nx:gap-36`, `nx:m-36`."
+        "usage": "Spacing step 36 (144px): `nx:p-36`, `nx:gap-36`, `nx:m-36`. Read by FilterBuilder and ToggleGroup."
       },
       {
         "name": "nx-spacing-40",
         "value": "160px",
-        "usage": "Spacing step 40 (160px): `nx:p-40`, `nx:gap-40`, `nx:m-40`."
+        "usage": "Spacing step 40 (160px): `nx:p-40`, `nx:gap-40`, `nx:m-40`. Read by DescriptionList, MultiSelect and ToggleGroup."
       },
       {
         "name": "nx-spacing-44",
         "value": "176px",
-        "usage": "Spacing step 44 (176px): `nx:p-44`, `nx:gap-44`, `nx:m-44`."
+        "usage": "Spacing step 44 (176px): `nx:p-44`, `nx:gap-44`, `nx:m-44`. Read by Slider and ToggleGroup."
       },
       {
         "name": "nx-spacing-48",
         "value": "192px",
-        "usage": "Spacing step 48 (192px): `nx:p-48`, `nx:gap-48`, `nx:m-48`."
+        "usage": "Spacing step 48 (192px): `nx:p-48`, `nx:gap-48`, `nx:m-48`. Read by Combobox, FilterBuilder, Menubar and ToggleGroup."
       },
       {
         "name": "nx-spacing-52",
         "value": "208px",
-        "usage": "Spacing step 52 (208px): `nx:p-52`, `nx:gap-52`, `nx:m-52`."
+        "usage": "Spacing step 52 (208px): `nx:p-52`, `nx:gap-52`, `nx:m-52`. Read by ToggleGroup."
       },
       {
         "name": "nx-spacing-56",
         "value": "224px",
-        "usage": "Spacing step 56 (224px): `nx:p-56`, `nx:gap-56`, `nx:m-56`."
+        "usage": "Spacing step 56 (224px): `nx:p-56`, `nx:gap-56`, `nx:m-56`. Read by MultiSelect and ToggleGroup."
       },
       {
         "name": "nx-spacing-60",
         "value": "240px",
-        "usage": "Spacing step 60 (240px): `nx:p-60`, `nx:gap-60`, `nx:m-60`."
+        "usage": "Spacing step 60 (240px): `nx:p-60`, `nx:gap-60`, `nx:m-60`. Read by ToggleGroup."
       },
       {
         "name": "nx-spacing-64",
         "value": "256px",
-        "usage": "Spacing step 64 (256px): `nx:p-64`, `nx:gap-64`, `nx:m-64`."
+        "usage": "Spacing step 64 (256px): `nx:p-64`, `nx:gap-64`, `nx:m-64`. Read by FilterBuilder, HoverCard and ToggleGroup."
       },
       {
         "name": "nx-spacing-72",
         "value": "288px",
-        "usage": "Spacing step 72 (288px): `nx:p-72`, `nx:gap-72`, `nx:m-72`."
+        "usage": "Spacing step 72 (288px): `nx:p-72`, `nx:gap-72`, `nx:m-72`. Read by Combobox, FilterBuilder, MultiSelect and 2 more components."
       },
       {
         "name": "nx-spacing-80",
         "value": "320px",
-        "usage": "Spacing step 80 (320px): `nx:p-80`, `nx:gap-80`, `nx:m-80`."
+        "usage": "Spacing step 80 (320px): `nx:p-80`, `nx:gap-80`, `nx:m-80`. Read by ToggleGroup."
       },
       {
         "name": "nx-spacing-96",
         "value": "384px",
-        "usage": "Spacing step 96 (384px): `nx:p-96`, `nx:gap-96`, `nx:m-96`."
+        "usage": "Spacing step 96 (384px): `nx:p-96`, `nx:gap-96`, `nx:m-96`. Read by FilterBuilder, Select and ToggleGroup."
       },
       {
         "name": "nx-spacing-0_5",
         "value": "2px",
-        "usage": "Spacing step 0.5 (2px): `nx:p-0.5`, `nx:gap-0.5`, `nx:m-0.5`."
+        "usage": "Spacing step 0.5 (2px): `nx:p-0.5`, `nx:gap-0.5`, `nx:m-0.5`. Read by Alert, Attachment, Breadcrumb and 11 more components."
       },
       {
         "name": "nx-spacing-1_5",
         "value": "6px",
-        "usage": "Spacing step 1.5 (6px): `nx:p-1.5`, `nx:gap-1.5`, `nx:m-1.5`."
+        "usage": "Spacing step 1.5 (6px): `nx:p-1.5`, `nx:gap-1.5`, `nx:m-1.5`. Read by Badge, Breadcrumb, Card and 24 more components."
       },
       {
         "name": "nx-spacing-2_5",
         "value": "10px",
-        "usage": "Spacing step 2.5 (10px): `nx:p-2.5`, `nx:gap-2.5`, `nx:m-2.5`."
+        "usage": "Spacing step 2.5 (10px): `nx:p-2.5`, `nx:gap-2.5`, `nx:m-2.5`. Read by AlertDialog, Attachment, Badge and 28 more components."
       },
       {
         "name": "nx-spacing-3_5",
         "value": "14px",
-        "usage": "Spacing step 3.5 (14px): `nx:p-3.5`, `nx:gap-3.5`, `nx:m-3.5`."
+        "usage": "Spacing step 3.5 (14px): `nx:p-3.5`, `nx:gap-3.5`, `nx:m-3.5`. Read by AlertDialog, Badge, Breadcrumb and 22 more components."
       },
       {
         "name": "nx-container-p",
         "value": "24px",
-        "usage": "Spacing role `nx:p-container`."
+        "usage": "Spacing role `nx:p-container`. Read by Combobox, FilterBuilder, HoverCard and 2 more components."
       },
       {
         "name": "nx-container-gap",
         "value": "16px",
-        "usage": "Spacing role `nx:gap-container`."
+        "usage": "For authors: Spacing role `nx:gap-container`. No component reads it."
       },
       {
         "name": "nx-layout-section-gap",
         "value": "32px",
-        "usage": "Spacing role `nx:gap-layout-section`."
+        "usage": "For authors: Spacing role `nx:gap-layout-section`. No component reads it."
       },
       {
         "name": "nx-layout-stack-gap",
         "value": "8px",
-        "usage": "Spacing role `nx:gap-layout-stack`."
+        "usage": "For authors: Spacing role `nx:gap-layout-stack`. No component reads it."
       }
     ]
   },
@@ -2822,47 +1003,47 @@
       {
         "name": "nx-radius-base",
         "value": "4px",
-        "usage": "Corner radius (4px): `nx:rounded-base`."
+        "usage": "Corner radius (4px): `nx:rounded-base`. Read by AlertDialog, Button, Carousel and 10 more components."
       },
       {
         "name": "nx-radius-sm",
         "value": "2px",
-        "usage": "Corner radius (2px): `nx:rounded-sm`."
+        "usage": "Corner radius (2px): `nx:rounded-sm`. Read by Alert, AlertDialog, Attachment and 25 more components."
       },
       {
         "name": "nx-radius-md",
         "value": "4px",
-        "usage": "Corner radius (4px): `nx:rounded-md`."
+        "usage": "Corner radius (4px): `nx:rounded-md`. Read by Accordion, Alert, AlertDialog and 37 more components."
       },
       {
         "name": "nx-radius-lg",
         "value": "6px",
-        "usage": "Corner radius (6px): `nx:rounded-lg`."
+        "usage": "Corner radius (6px): `nx:rounded-lg`. Read by AlertDialog, Avatar, Combobox and 18 more components."
       },
       {
         "name": "nx-radius-xl",
         "value": "8px",
-        "usage": "Corner radius (8px): `nx:rounded-xl`."
+        "usage": "Corner radius (8px): `nx:rounded-xl`. Read by Bubble, Card and Sidebar."
       },
       {
         "name": "nx-radius-2xl",
         "value": "12px",
-        "usage": "Corner radius (12px): `nx:rounded-2xl`."
+        "usage": "For authors: Corner radius (12px): `nx:rounded-2xl`. No component reads it."
       },
       {
         "name": "nx-radius-3xl",
         "value": "20px",
-        "usage": "Corner radius (20px): `nx:rounded-3xl`."
+        "usage": "For authors: Corner radius (20px): `nx:rounded-3xl`. No component reads it."
       },
       {
         "name": "nx-radius-4xl",
         "value": "28px",
-        "usage": "Corner radius (28px): `nx:rounded-4xl`."
+        "usage": "For authors: Corner radius (28px): `nx:rounded-4xl`. No component reads it."
       },
       {
         "name": "nx-radius-full",
         "value": "9999px",
-        "usage": "Corner radius (9999px): `nx:rounded-full`."
+        "usage": "Corner radius (9999px): `nx:rounded-full`. Read by Attachment, Avatar, Badge and 12 more components."
       }
     ]
   },
@@ -2874,7 +1055,7 @@
           "light": "0px 1px 3px 0px oklch(0 0 0 / 0.0314)",
           "dark": "0px 1px 3px 0px oklch(0 0 0 / 0.051)"
         },
-        "usage": "Elevation `nx:shadow-2xs`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "For authors: Elevation `nx:shadow-2xs`. No component reads it."
       },
       {
         "name": "nx-shadow-xs",
@@ -2882,7 +1063,7 @@
           "light": "0px 1px 3px 0px oklch(0 0 0 / 0.0314)",
           "dark": "0px 1px 3px 0px oklch(0 0 0 / 0.051)"
         },
-        "usage": "Elevation `nx:shadow-xs`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "Elevation `nx:shadow-xs`. Read by ButtonGroup, DatePicker, Menubar and Slider."
       },
       {
         "name": "nx-shadow-sm",
@@ -2890,7 +1071,7 @@
           "light": "0px 1px 2px -1px oklch(0 0 0 / 0.051), 0px 1px 3px 0px oklch(0 0 0 / 0.0588)",
           "dark": "0px 1px 2px -1px oklch(0 0 0 / 0.0627), 0px 1px 3px 0px oklch(0 0 0 / 0.0706)"
         },
-        "usage": "Elevation `nx:shadow-sm`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "Elevation `nx:shadow-sm`. Read by Bubble, Card, NavigationMenu and 2 more components."
       },
       {
         "name": "nx-shadow-base",
@@ -2898,7 +1079,7 @@
           "light": "0px 1px 2px -1px oklch(0 0 0 / 0.0588), 0px 1px 3px 0px oklch(0 0 0 / 0.0588)",
           "dark": "0px 1px 2px -1px oklch(0 0 0 / 0.0706), 0px 1px 3px 0px oklch(0 0 0 / 0.0706)"
         },
-        "usage": "Elevation `nx:shadow-base`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "For authors: Elevation `nx:shadow-base`. No component reads it."
       },
       {
         "name": "nx-shadow-md",
@@ -2906,7 +1087,7 @@
           "light": "0px 2px 4px -1px oklch(0 0 0 / 0.0588), 0px 1px 3px 0px oklch(0 0 0 / 0.0588)",
           "dark": "0px 2px 4px -1px oklch(0 0 0 / 0.0784), 0px 1px 3px 0px oklch(0 0 0 / 0.0784)"
         },
-        "usage": "Elevation `nx:shadow-md`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "For authors: Elevation `nx:shadow-md`. No component reads it."
       },
       {
         "name": "nx-shadow-lg",
@@ -2914,7 +1095,7 @@
           "light": "0px 4px 6px -1px oklch(0 0 0 / 0.0784), 0px 1px 3px 0px oklch(0 0 0 / 0.051)",
           "dark": "0px 4px 6px -1px oklch(0 0 0 / 0.1098), 0px 1px 3px 0px oklch(0 0 0 / 0.0784)"
         },
-        "usage": "Elevation `nx:shadow-lg`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "Elevation `nx:shadow-lg`. Read by AlertDialog, Chart, Combobox and 16 more components."
       },
       {
         "name": "nx-shadow-xl",
@@ -2922,7 +1103,7 @@
           "light": "0px 8px 10px -1px oklch(0 0 0 / 0.0784), 0px 1px 3px 0px oklch(0 0 0 / 0.0784)",
           "dark": "0px 8px 10px -1px oklch(0 0 0 / 0.1412), 0px 1px 3px 0px oklch(0 0 0 / 0.1098)"
         },
-        "usage": "Elevation `nx:shadow-xl`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "For authors: Elevation `nx:shadow-xl`. No component reads it."
       },
       {
         "name": "nx-shadow-2xl",
@@ -2930,15 +1111,7 @@
           "light": "0px 1px 3px 0px oklch(0 0 0 / 0.149)",
           "dark": "0px 1px 3px 0px oklch(0 0 0 / 0.2)"
         },
-        "usage": "Elevation `nx:shadow-2xl`. Components read its layer variables, so an edit here shows on the page only."
-      },
-      {
-        "name": "nx-shadow-inner",
-        "value": {
-          "light": "inset 0px 1px 3px 0px oklch(0 0 0 / 0.0392)",
-          "dark": "inset 0px 1px 3px 0px oklch(0 0 0 / 0.051)"
-        },
-        "usage": "Elevation `nx:shadow-inner`. Components read its layer variables, so an edit here shows on the page only."
+        "usage": "For authors: Elevation `nx:shadow-2xl`. No component reads it."
       }
     ]
   },
@@ -2947,51 +1120,214 @@
       {
         "name": "nx-borderwidth-thin",
         "value": "0.5px",
-        "usage": "Border width (0.5px): `nx:border-width-thin`."
+        "usage": "For authors: Border width (0.5px): `nx:border-width-thin`. No component reads it."
       },
       {
         "name": "nx-borderwidth-default",
         "value": "1px",
-        "usage": "Border width (1px): `nx:border-width-default`."
+        "usage": "Border width (1px): `nx:border-width-default`. Read by Accordion, Alert, AlertDialog and 49 more components."
       },
       {
         "name": "nx-borderwidth-thick",
         "value": "2px",
-        "usage": "Border width (2px): `nx:border-width-thick`."
+        "usage": "Border width (2px): `nx:border-width-thick`. Read by Switch and Tabs."
       }
     ]
   },
   "zIndex": {
     "tokens": [
-      {
-        "name": "nx-z-index-overlay",
-        "value": "10",
-        "usage": "Base overlay layer — backdrops and low-level stacking."
-      },
       {
         "name": "nx-z-index-sticky",
         "value": "30",
-        "usage": "Sticky chrome (headers, toolbars) — above content, below dialogs."
+        "usage": "Sticky chrome (headers, toolbars) — above content, below dialogs. Read by MessageScroller, Sidebar and Table."
       },
       {
         "name": "nx-z-index-modal",
         "value": "50",
-        "usage": "Modal dialogs and their overlay."
+        "usage": "Modal dialogs and their overlay. Read by AlertDialog, Combobox, Command and 15 more components."
       },
       {
         "name": "nx-z-index-popover",
         "value": "70",
-        "usage": "Tooltips, dropdowns, selects, popovers — above modals so they stay usable when nested in a dialog."
+        "usage": "Tooltips, dropdowns, selects, popovers — above modals so they stay usable when nested in a dialog. Read by Combobox, ContextMenu, DropdownMenu and 10 more components."
       },
       {
         "name": "nx-z-index-toast",
         "value": "100",
-        "usage": "Toasts and notifications — above popovers."
+        "usage": "Toasts and notifications — above popovers. Read by Sonner."
+      }
+    ]
+  },
+  "motion": {
+    "tokens": [
+      {
+        "name": "nx-motion-duration-faster",
+        "value": "100ms",
+        "usage": "Tiny feedback transitions such as pressed states. Read by Attachment, Item and Marker."
+      },
+      {
+        "name": "nx-motion-duration-fast",
+        "value": "150ms",
+        "usage": "Frequent lightweight UI transitions such as tab indicators and small fades. Read by Accordion, AlertDialog, Attachment and 26 more components."
+      },
+      {
+        "name": "nx-motion-duration-default",
+        "value": "200ms",
+        "usage": "Default component motion for popovers, menus, and routine state changes. Read by Accordion, Alert, AlertDialog and 48 more components."
+      },
+      {
+        "name": "nx-motion-duration-slow",
+        "value": "300ms",
+        "usage": "Larger surfaces such as dialogs and compact sheets. Read by AlertDialog, Combobox, Command and 15 more components."
+      },
+      {
+        "name": "nx-motion-ease-linear",
+        "value": "linear",
+        "usage": "For authors: Constant-rate motion for loops and progress-like animations. No component reads it."
+      },
+      {
+        "name": "nx-motion-ease-enter",
+        "value": "cubic-bezier(0.23, 1, 0.32, 1)",
+        "usage": "Strong ease-out curve for elements entering or becoming active. Read by Accordion, Alert, AlertDialog and 47 more components."
+      },
+      {
+        "name": "nx-motion-ease-exit",
+        "value": "cubic-bezier(0.4, 0, 1, 1)",
+        "usage": "For authors: Accelerating curve for elements exiting or becoming hidden. No component reads it."
+      },
+      {
+        "name": "nx-motion-ease-move",
+        "value": "cubic-bezier(0.77, 0, 0.175, 1)",
+        "usage": "For authors: Intentional on-screen movement between persistent positions. No component reads it."
+      }
+    ]
+  },
+  "typeScale": {
+    "tokens": [
+      {
+        "name": "nx-typography-size-xxs",
+        "value": "11px",
+        "usage": "Type scale size `xxs` (11px). The text styles read it. Read by Badge and MultiSelect."
+      },
+      {
+        "name": "nx-typography-size-xs",
+        "value": "12px",
+        "usage": "Type scale size `xs` (12px). The text styles read it. Read by Bubble, Chart, Combobox and 23 more components."
+      },
+      {
+        "name": "nx-typography-size-sm",
+        "value": "14px",
+        "usage": "Type scale size `sm` (14px). The text styles read it. Read by Accordion, Alert, AlertDialog and 47 more components."
+      },
+      {
+        "name": "nx-typography-size-base",
+        "value": "16px",
+        "usage": "Type scale size `base` (16px). The text styles read it. Read by Avatar, EmptyState and Message."
+      },
+      {
+        "name": "nx-typography-size-lg",
+        "value": "18px",
+        "usage": "Type scale size `lg` (18px). The text styles read it. Read by Card, Combobox, Command and 6 more components."
+      },
+      {
+        "name": "nx-typography-size-xl",
+        "value": "20px",
+        "usage": "Type scale size `xl` (20px). The text styles read it. Read by AlertDialog."
+      },
+      {
+        "name": "nx-typography-size-2xl",
+        "value": "24px",
+        "usage": "Type scale size `2xl` (24px). The text styles read it. Read by PageHeader."
+      },
+      {
+        "name": "nx-typography-size-3xl",
+        "value": "30px",
+        "usage": "Type scale size `3xl` (30px). The text styles read it."
+      },
+      {
+        "name": "nx-typography-weight-normal",
+        "value": "400",
+        "usage": "Type scale weight `normal` (400). The text styles read it. Read by Accordion, Alert, AlertDialog and 37 more components."
+      },
+      {
+        "name": "nx-typography-weight-medium",
+        "value": "500",
+        "usage": "Type scale weight `medium` (500). The text styles read it. Read by Accordion, Alert, AlertDialog and 39 more components."
+      },
+      {
+        "name": "nx-typography-weight-semibold",
+        "value": "600",
+        "usage": "Type scale weight `semibold` (600). The text styles read it. Read by Badge, EmptyState and MultiSelect."
+      },
+      {
+        "name": "nx-typography-weight-bold",
+        "value": "700",
+        "usage": "Type scale weight `bold` (700). The text styles read it. Read by AlertDialog, Card, Combobox and 8 more components."
+      },
+      {
+        "name": "nx-typography-line-height-xxs",
+        "value": "12px",
+        "usage": "Type scale line-height `xxs` (12px). The text styles read it. Read by Badge and MultiSelect."
+      },
+      {
+        "name": "nx-typography-line-height-xs",
+        "value": "16px",
+        "usage": "Type scale line-height `xs` (16px). The text styles read it. Read by Bubble, Chart, Combobox and 23 more components."
+      },
+      {
+        "name": "nx-typography-line-height-sm",
+        "value": "20px",
+        "usage": "Type scale line-height `sm` (20px). The text styles read it. Read by Accordion, Alert, AlertDialog and 47 more components."
+      },
+      {
+        "name": "nx-typography-line-height-base",
+        "value": "24px",
+        "usage": "Type scale line-height `base` (24px). The text styles read it. Read by EmptyState."
+      },
+      {
+        "name": "nx-typography-line-height-lg",
+        "value": "28px",
+        "usage": "Type scale line-height `lg` (28px). The text styles read it. Read by Card, Combobox, Command and 6 more components."
+      },
+      {
+        "name": "nx-typography-line-height-xl",
+        "value": "28px",
+        "usage": "Type scale line-height `xl` (28px). The text styles read it. Read by AlertDialog."
+      },
+      {
+        "name": "nx-typography-line-height-2xl",
+        "value": "32px",
+        "usage": "Type scale line-height `2xl` (32px). The text styles read it. Read by PageHeader."
+      },
+      {
+        "name": "nx-typography-line-height-3xl",
+        "value": "36px",
+        "usage": "Type scale line-height `3xl` (36px). The text styles read it."
+      },
+      {
+        "name": "nx-typography-letterspacing-tighter",
+        "value": "-0.8px",
+        "usage": "Type scale letterspacing `tighter` (-0.8px). The text styles read it."
+      },
+      {
+        "name": "nx-typography-letterspacing-tight",
+        "value": "-0.4px",
+        "usage": "Type scale letterspacing `tight` (-0.4px). The text styles read it. Read by AlertDialog, Card, Combobox and 9 more components."
+      },
+      {
+        "name": "nx-typography-letterspacing-normal",
+        "value": "0px",
+        "usage": "Type scale letterspacing `normal` (0px). The text styles read it. Read by Accordion, Alert, AlertDialog and 51 more components."
+      },
+      {
+        "name": "nx-typography-letterspacing-wide",
+        "value": "0.4px",
+        "usage": "Type scale letterspacing `wide` (0.4px). The text styles read it. Read by Badge and MultiSelect."
       },
       {
-        "name": "nx-z-index-max",
-        "value": "9999",
-        "usage": "Reserved for host-application system UI (e.g. AI agent overlays)."
+        "name": "nx-typography-letterspacing-widest",
+        "value": "1.6px",
+        "usage": "Type scale letterspacing `widest` (1.6px). The text styles read it. Read by Combobox, Command, ContextMenu and 3 more components."
       }
     ]
   }