@nadicodeai/design-system 12.1.175 → 12.1.177

package/AGENTS.md

@@ -25,7 +25,7 @@ rule goes to its owner:
 - How a Portal page is assembled: its composition, and the block in
   `apps/portal/registry/blocks/` that shows it.
 - What code can detect: a type or a lint rule in `packages/oxlint-plugin/`.
-- What a pull request decided and worth repeating: an exemplar in the
+- What a landed change decided and worth repeating: an exemplar in the
   `product-design` skill, whose rule index links every rule to its owner.
 - A product's pages and scope: that app's docs.
 

package/DESIGN.md

@@ -582,7 +582,7 @@ Text on a colour ground is the pole that clears AA on that hue: `{colors.identit
 
 ### Category colour
 
-Labels and their icons may carry blue, teal, purple or pink to distinguish named categories. `Tag` owns these categorical tones; `Badge` also offers the teal, purple and pink soft fills with their contrasting foregrounds, and no status fill. The same category keeps the same tone across a surface and after sorting. A word remains visible, and a colour never invents status. Green, amber and red remain feedback meanings; the five-tone `StatusBadge` owns those. Icons inherit the tone of their label rather than adding a second colour. Brand marks keep their genuine colours. This uses Geist’s light fill / strong text technique with nadicode’s semantic roles; agents never choose raw palette values in pages.
+Labels and their icons carry the palette's eight hues to distinguish named categories, as Vercel's labels do: blue, teal, purple, pink, green, orange, yellow and red, each the hue's 200 step as the ground and its 1000 step as the ink in both themes (`category-<tone>` and `category-<tone>-foreground`). A category label (`CategoryTag`) is vivid instead: the hue itself, its 700 step (cobalto, acqua, viola, rosa, verde, arancio, giallo, rosso), as the ground in both themes, and its pole that clears AA as the ink, identity-white on cobalto, viola and rosso and identity-ink on the others (`label-<tone>` and `label-<tone>-foreground`). `Tag` owns these tones; `Badge` also offers the teal, purple and pink soft fills with their contrasting foregrounds, and no status fill. The same category keeps the same tone across a surface and after sorting. A word remains visible, and a colour never invents status: a status is `StatusBadge`'s shape and word, never a pill, so a green or red label reads as a category and never as done or failed. Icons inherit the tone of their label rather than adding a second colour. Brand marks keep their genuine colours. This uses Geist's light fill / strong text technique with nadicode's semantic roles; agents never choose raw palette values in pages.
 
 ### Scales
 
@@ -800,7 +800,7 @@ The pages share the parts below them, each with one owner: one line per record i
 
 Every setting is that Settings composition, whether it belongs to the person, to the platform or to one record's Settings tab, so the column keeps its width and its field layout from one entry of a settings menu to the next, and each section saves its own fields from its own footer ("Cards and sections"). A card's header and fields share one uninterrupted body, and only its save footer has a divider. `SettingsPage`'s, `SettingsSection`'s and `SettingsField`'s usage pages hold the column, the cards and the fields; Nadia keeps its settings column at most 42rem. A structured table keeps visible column names while its container can hold the data, and a matrix whose every column must stay, such as notification audiences by group, keeps them all and lets its names wrap.
 
-Every page opens with the same header, `PageHeader`: collections, working pages and settings pages alike, in the page's own column, so the title and the cards share one edge. The title is the page's name as its navigation writes it, the page's actions sit on the title's row through `PageActions`, whose usage pages hold their order, variants and wrapping, and under the title is one sentence saying what the page's concept is, as every Vercel page does (*Passport*: what it does and where it applies), with a link to learn more when there is one. An action always sits on the title of the thing it acts on, never on a tab's, and one command is a button, never a menu of one. Navigation remains a visible link or part of the navigation, never an overflow command. That sentence is the page's only explanation: nothing else introduces, explains or counts the page, and no line of text stands loose under a card or a list; what a card's reader needs is the card's own description or footer line, and a lasting condition is a notice above what it concerns. Inside an object worked from a section sidebar, the title is the section's name ("Apps"); a page that opens with the object's own header or card, such as an Agent's Profile, has it as its title and no title row above it.
+Every page opens with the same header, `PageHeader`: collections, working pages and settings pages alike, in the page's own column, so the title and the cards share one edge, but for the plain list `CollectionPage`'s usage page names. The title is the page's name as its navigation writes it, the page's actions sit on the title's row through `PageActions`, whose usage pages hold their order, variants and wrapping, and under the title is one sentence saying what the page's concept is, as every Vercel page does (*Passport*: what it does and where it applies), with a link to learn more when there is one. An action always sits on the title of the thing it acts on, never on a tab's, and one command is a button, never a menu of one. Navigation remains a visible link or part of the navigation, never an overflow command. That sentence is the page's only explanation: nothing else introduces, explains or counts the page, and no line of text stands loose under a card or a list; what a card's reader needs is the card's own description or footer line, and a lasting condition is a notice above what it concerns. Inside an object worked from a section sidebar, the title is the section's name ("Apps"); a page that opens with the object's own header or card, such as an Agent's Profile, has it as its title and no title row above it.
 
 A collection is named once, by the page's title, and the collection's card never adds a header that only describes it. A populated collection carries no picture; its first use shows one, in every product ("Elevation & Depth"). The table's footer holds only a count or the paging, never a help sentence: guidance a step needs lives in that step.
 

package/dist/css/index.css

@@ -938,6 +938,14 @@
     --sidebar-accent-foreground: var(--nc-ink);
     --sidebar-border: var(--nc-line);
     --sidebar-ring: var(--nc-focus-ring);
+    --category-green: var(--nc-verde-200);
+    --category-green-foreground: var(--nc-verde-1000);
+    --category-orange: var(--nc-arancio-200);
+    --category-orange-foreground: var(--nc-arancio-1000);
+    --category-yellow: var(--nc-giallo-200);
+    --category-yellow-foreground: var(--nc-giallo-1000);
+    --category-red: var(--nc-rosso-200);
+    --category-red-foreground: var(--nc-rosso-1000);
     --category-blue: var(--nc-cobalto-200);
     --category-blue-foreground: var(--nc-cobalto-1000);
     --category-teal: var(--nc-category-teal-soft);
@@ -946,6 +954,22 @@
     --category-purple-foreground: var(--nc-category-purple-deep);
     --category-pink: var(--nc-category-pink-soft);
     --category-pink-foreground: var(--nc-category-pink-deep);
+    --label-green: var(--nc-verde-700);
+    --label-green-foreground: var(--nc-identity-ink);
+    --label-orange: var(--nc-arancio-700);
+    --label-orange-foreground: var(--nc-identity-ink);
+    --label-yellow: var(--nc-giallo-700);
+    --label-yellow-foreground: var(--nc-identity-ink);
+    --label-red: var(--nc-rosso-700);
+    --label-red-foreground: var(--nc-identity-white);
+    --label-blue: var(--nc-cobalto-700);
+    --label-blue-foreground: var(--nc-identity-white);
+    --label-teal: var(--nc-acqua-700);
+    --label-teal-foreground: var(--nc-identity-ink);
+    --label-purple: var(--nc-viola-700);
+    --label-purple-foreground: var(--nc-identity-white);
+    --label-pink: var(--nc-rosa-700);
+    --label-pink-foreground: var(--nc-identity-ink);
   }
   .dark {
     --radius: var(--nc-rounded-md);
@@ -1003,6 +1027,14 @@
     --sidebar-accent-foreground: var(--nc-dark-ink);
     --sidebar-border: var(--nc-dark-line);
     --sidebar-ring: var(--nc-dark-focus-ring);
+    --category-green: var(--nc-dark-verde-200);
+    --category-green-foreground: var(--nc-dark-verde-1000);
+    --category-orange: var(--nc-dark-arancio-200);
+    --category-orange-foreground: var(--nc-dark-arancio-1000);
+    --category-yellow: var(--nc-dark-giallo-200);
+    --category-yellow-foreground: var(--nc-dark-giallo-1000);
+    --category-red: var(--nc-dark-rosso-200);
+    --category-red-foreground: var(--nc-dark-rosso-1000);
     --category-blue: var(--nc-dark-cobalto-200);
     --category-blue-foreground: var(--nc-dark-cobalto-1000);
     --category-teal: var(--nc-dark-category-teal-soft);
@@ -1011,9 +1043,25 @@
     --category-purple-foreground: var(--nc-dark-category-purple-deep);
     --category-pink: var(--nc-dark-category-pink-soft);
     --category-pink-foreground: var(--nc-dark-category-pink-deep);
+    --label-green: var(--nc-dark-verde-700);
+    --label-green-foreground: var(--nc-identity-ink);
+    --label-orange: var(--nc-dark-arancio-700);
+    --label-orange-foreground: var(--nc-identity-ink);
+    --label-yellow: var(--nc-dark-giallo-700);
+    --label-yellow-foreground: var(--nc-identity-ink);
+    --label-red: var(--nc-dark-rosso-700);
+    --label-red-foreground: var(--nc-identity-white);
+    --label-blue: var(--nc-dark-cobalto-700);
+    --label-blue-foreground: var(--nc-identity-white);
+    --label-teal: var(--nc-dark-acqua-700);
+    --label-teal-foreground: var(--nc-identity-ink);
+    --label-purple: var(--nc-dark-viola-700);
+    --label-purple-foreground: var(--nc-identity-white);
+    --label-pink: var(--nc-dark-rosa-700);
+    --label-pink-foreground: var(--nc-identity-ink);
   }
   @theme { --color-*: initial; --color-nc-action: oklch(0.5005 0.2804 266.17); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.4602 0.2797 266.14); --color-nc-action-active: oklch(0.4202 0.2522 266.14); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.5103 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9851 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-material-resting: oklch(1.0000 0.0000 0.00); --color-nc-material-raised: oklch(1.0000 0.0000 0.00); --color-nc-material-floating: oklch(1.0000 0.0000 0.00); --color-nc-material-modal: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.9612 0.0000 0.00); --color-nc-link: oklch(0.5005 0.2804 266.17); --color-nc-link-deep: oklch(0.4202 0.2522 266.14); --color-nc-link-bg-soft: oklch(0.9656 0.0171 248.01); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --color-nc-logo-guide: oklch(0.6830 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6398 0.2044 356.46); --color-nc-chart-3: oklch(0.5015 0.1883 294.99); --color-nc-chart-4: oklch(0.6824 0.2108 37.70); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5688 0.1995 26.59); --color-nc-chart-7: oklch(0.7691 0.1577 84.69); --color-nc-chart-8: oklch(0.6415 0.1644 153.23); --color-nc-chart-9: oklch(0.7191 0.1452 266.33); --color-nc-chart-10: oklch(0.8309 0.1048 356.57); --color-nc-cobalto-100: oklch(0.9754 0.0115 264.51); --color-nc-cobalto-200: oklch(0.9543 0.0215 265.76); --color-nc-cobalto-300: oklch(0.9297 0.0334 265.23); --color-nc-cobalto-400: oklch(0.8944 0.0509 267.00); --color-nc-cobalto-500: oklch(0.8308 0.0837 265.90); --color-nc-cobalto-600: oklch(0.7191 0.1452 266.33); --color-nc-cobalto-700: oklch(0.5005 0.2804 266.17); --color-nc-cobalto-800: oklch(0.4602 0.2797 266.14); --color-nc-cobalto-900: oklch(0.4202 0.2522 266.14); --color-nc-cobalto-1000: oklch(0.2811 0.1684 266.17); --color-nc-rosso-100: oklch(0.9752 0.0122 29.87); --color-nc-rosso-200: oklch(0.9552 0.0222 27.81); --color-nc-rosso-300: oklch(0.9290 0.0360 26.28); --color-nc-rosso-400: oklch(0.8944 0.0552 26.52); --color-nc-rosso-500: oklch(0.8304 0.0942 26.48); --color-nc-rosso-600: oklch(0.7201 0.1742 26.79); --color-nc-rosso-700: oklch(0.5688 0.1995 26.59); --color-nc-rosso-800: oklch(0.5297 0.1996 26.67); --color-nc-rosso-900: oklch(0.4882 0.1797 26.59); --color-nc-rosso-1000: oklch(0.2805 0.1143 26.81); --color-nc-arancio-100: oklch(0.9749 0.0125 35.73); --color-nc-arancio-200: oklch(0.9544 0.0233 37.38); --color-nc-arancio-300: oklch(0.9298 0.0366 36.77); --color-nc-arancio-400: oklch(0.8945 0.0567 37.21); --color-nc-arancio-500: oklch(0.8292 0.0974 37.12); --color-nc-arancio-600: oklch(0.7428 0.1602 37.76); --color-nc-arancio-700: oklch(0.6824 0.2108 37.70); --color-nc-arancio-800: oklch(0.6419 0.2102 37.75); --color-nc-arancio-900: oklch(0.4993 0.1647 37.64); --color-nc-arancio-1000: oklch(0.2801 0.0916 38.02); --color-nc-giallo-100: oklch(0.9860 0.0154 86.42); --color-nc-giallo-200: oklch(0.9699 0.0272 83.54); --color-nc-giallo-300: oklch(0.9555 0.0420 85.96); --color-nc-giallo-400: oklch(0.9298 0.0673 84.45); --color-nc-giallo-500: oklch(0.9004 0.1074 84.93); --color-nc-giallo-600: oklch(0.8696 0.1403 84.42); --color-nc-giallo-700: oklch(0.8466 0.1678 84.63); --color-nc-giallo-800: oklch(0.7691 0.1577 84.69); --color-nc-giallo-900: oklch(0.5305 0.1090 83.33); --color-nc-giallo-1000: oklch(0.3186 0.0654 84.14); --color-nc-verde-100: oklch(0.9747 0.0157 154.48); --color-nc-verde-200: oklch(0.9560 0.0265 152.38); --color-nc-verde-300: oklch(0.9290 0.0407 153.11); --color-nc-verde-400: oklch(0.8955 0.0664 152.93); --color-nc-verde-500: oklch(0.8310 0.1403 153.27); --color-nc-verde-600: oklch(0.7191 0.1645 153.16); --color-nc-verde-700: oklch(0.6415 0.1644 153.23); --color-nc-verde-800: oklch(0.6017 0.1542 153.23); --color-nc-verde-900: oklch(0.4992 0.1279 153.23); --color-nc-verde-1000: oklch(0.2815 0.0723 153.13); --color-nc-acqua-100: oklch(0.9752 0.0109 211.04); --color-nc-acqua-200: oklch(0.9559 0.0171 205.84); --color-nc-acqua-300: oklch(0.9297 0.0259 208.75); --color-nc-acqua-400: oklch(0.8954 0.0424 207.56); --color-nc-acqua-500: oklch(0.8304 0.0902 209.06); --color-nc-acqua-600: oklch(0.7205 0.1064 208.54); --color-nc-acqua-700: oklch(0.6161 0.1062 208.85); --color-nc-acqua-800: oklch(0.5765 0.0992 208.28); --color-nc-acqua-900: oklch(0.4990 0.0860 208.78); --color-nc-acqua-1000: oklch(0.2797 0.0484 210.29); --color-nc-viola-100: oklch(0.9745 0.0134 295.33); --color-nc-viola-200: oklch(0.9545 0.0243 296.12); --color-nc-viola-300: oklch(0.9290 0.0381 295.47); --color-nc-viola-400: oklch(0.8954 0.0563 294.18); --color-nc-viola-500: oklch(0.8289 0.0954 295.03); --color-nc-viola-600: oklch(0.7204 0.1631 294.91); --color-nc-viola-700: oklch(0.5015 0.1883 294.99); --color-nc-viola-800: oklch(0.4620 0.1886 294.84); --color-nc-viola-900: oklch(0.4227 0.1694 295.05); --color-nc-viola-1000: oklch(0.2796 0.1131 295.14); --color-nc-rosa-100: oklch(0.9746 0.0139 355.00); --color-nc-rosa-200: oklch(0.9555 0.0241 358.28); --color-nc-rosa-300: oklch(0.9307 0.0386 357.63); --color-nc-rosa-400: oklch(0.8944 0.0614 356.49); --color-nc-rosa-500: oklch(0.8309 0.1048 356.57); --color-nc-rosa-600: oklch(0.7193 0.1969 356.59); --color-nc-rosa-700: oklch(0.6398 0.2044 356.46); --color-nc-rosa-800: oklch(0.6001 0.2050 356.50); --color-nc-rosa-900: oklch(0.5009 0.1842 356.43); --color-nc-rosa-1000: oklch(0.2808 0.1147 356.80); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-resting: oklch(0.1448 0.0000 0.00); --color-nc-dark-material-raised: oklch(0.1684 0.0000 0.00); --color-nc-dark-material-floating: oklch(0.1684 0.0000 0.00); --color-nc-dark-material-modal: oklch(0.1684 0.0000 0.00); --color-nc-card-graphite: oklch(0.1957 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.7090 0.0000 0.00); --color-nc-dark-muted: oklch(0.6993 0.0000 0.00); --color-nc-dark-line: oklch(0.3485 0.0000 0.00); --color-nc-dark-input: oklch(0.5590 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.5005 0.2804 266.17); --color-nc-dark-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.4602 0.2797 266.14); --color-nc-dark-action-active: oklch(0.4202 0.2522 266.14); --color-nc-dark-link: oklch(0.7993 0.1005 266.67); --color-nc-dark-link-deep: oklch(0.8944 0.0509 267.00); --color-nc-dark-link-bg-soft: oklch(0.2518 0.0572 257.41); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.0000 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5005 0.2804 266.17); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.6007 0.2160 266.02); --color-nc-dark-chart-2: oklch(0.6611 0.1941 356.61); --color-nc-dark-chart-3: oklch(0.6004 0.1789 294.79); --color-nc-dark-chart-4: oklch(0.6612 0.2003 37.74); --color-nc-dark-chart-5: oklch(0.6568 0.1009 208.69); --color-nc-dark-chart-6: oklch(0.6084 0.1887 26.65); --color-nc-dark-chart-7: oklch(0.8466 0.1678 84.63); --color-nc-dark-chart-8: oklch(0.6608 0.1568 153.03); --color-nc-dark-chart-9: oklch(0.7993 0.1005 266.67); --color-nc-dark-chart-10: oklch(0.8005 0.1279 356.32); --color-nc-dark-cobalto-100: oklch(0.1915 0.0982 266.32); --color-nc-dark-cobalto-200: oklch(0.2197 0.1184 266.25); --color-nc-dark-cobalto-300: oklch(0.2604 0.1398 265.97); --color-nc-dark-cobalto-400: oklch(0.2997 0.1624 266.24); --color-nc-dark-cobalto-500: oklch(0.3702 0.1966 266.08); --color-nc-dark-cobalto-600: oklch(0.6007 0.2160 266.02); --color-nc-dark-cobalto-700: oklch(0.5005 0.2804 266.17); --color-nc-dark-cobalto-800: oklch(0.4602 0.2797 266.14); --color-nc-dark-cobalto-900: oklch(0.7993 0.1005 266.67); --color-nc-dark-cobalto-1000: oklch(0.9604 0.0186 265.98); --color-nc-dark-rosso-100: oklch(0.1907 0.0689 26.80); --color-nc-dark-rosso-200: oklch(0.2215 0.0837 26.41); --color-nc-dark-rosso-300: oklch(0.2596 0.0994 26.37); --color-nc-dark-rosso-400: oklch(0.3014 0.1159 26.97); --color-nc-dark-rosso-500: oklch(0.3705 0.1397 26.54); --color-nc-dark-rosso-600: oklch(0.6084 0.1887 26.65); --color-nc-dark-rosso-700: oklch(0.5688 0.1995 26.59); --color-nc-dark-rosso-800: oklch(0.5297 0.1996 26.67); --color-nc-dark-rosso-900: oklch(0.7992 0.1149 26.43); --color-nc-dark-rosso-1000: oklch(0.9598 0.0198 25.17); --color-nc-dark-arancio-100: oklch(0.1909 0.0632 37.47); --color-nc-dark-arancio-200: oklch(0.2201 0.0732 37.26); --color-nc-dark-arancio-300: oklch(0.2598 0.0852 37.90); --color-nc-dark-arancio-400: oklch(0.2988 0.0989 37.50); --color-nc-dark-arancio-500: oklch(0.3706 0.1219 37.77); --color-nc-dark-arancio-600: oklch(0.6612 0.2003 37.74); --color-nc-dark-arancio-700: oklch(0.6824 0.2108 37.70); --color-nc-dark-arancio-800: oklch(0.6419 0.2102 37.75); --color-nc-dark-arancio-900: oklch(0.7993 0.1180 37.52); --color-nc-dark-arancio-1000: oklch(0.9590 0.0208 36.03); --color-nc-dark-giallo-100: oklch(0.1903 0.0391 84.07); --color-nc-dark-giallo-200: oklch(0.2185 0.0449 83.81); --color-nc-dark-giallo-300: oklch(0.2592 0.0532 83.54); --color-nc-dark-giallo-400: oklch(0.3008 0.0616 85.18); --color-nc-dark-giallo-500: oklch(0.3705 0.0759 85.25); --color-nc-dark-giallo-600: oklch(0.6598 0.1353 84.83); --color-nc-dark-giallo-700: oklch(0.8466 0.1678 84.63); --color-nc-dark-giallo-800: oklch(0.8064 0.1654 84.43); --color-nc-dark-giallo-900: oklch(0.8007 0.1595 84.74); --color-nc-dark-giallo-1000: oklch(0.9604 0.0256 84.59); --color-nc-dark-verde-100: oklch(0.1910 0.0488 153.39); --color-nc-dark-verde-200: oklch(0.2208 0.0571 152.80); --color-nc-dark-verde-300: oklch(0.2606 0.0664 153.49); --color-nc-dark-verde-400: oklch(0.2987 0.0765 153.24); --color-nc-dark-verde-500: oklch(0.3685 0.0944 153.24); --color-nc-dark-verde-600: oklch(0.6608 0.1568 153.03); --color-nc-dark-verde-700: oklch(0.6415 0.1644 153.23); --color-nc-dark-verde-800: oklch(0.6017 0.1542 153.23); --color-nc-dark-verde-900: oklch(0.7994 0.1555 153.29); --color-nc-dark-verde-1000: oklch(0.9600 0.0248 152.88); --color-nc-dark-acqua-100: oklch(0.1914 0.0330 209.05); --color-nc-dark-acqua-200: oklch(0.2192 0.0379 209.81); --color-nc-dark-acqua-300: oklch(0.2610 0.0450 209.30); --color-nc-dark-acqua-400: oklch(0.3011 0.0519 208.95); --color-nc-dark-acqua-500: oklch(0.3711 0.0639 208.82); --color-nc-dark-acqua-600: oklch(0.6568 0.1009 208.69); --color-nc-dark-acqua-700: oklch(0.6161 0.1062 208.85); --color-nc-dark-acqua-800: oklch(0.5765 0.0992 208.28); --color-nc-dark-acqua-900: oklch(0.8004 0.1007 208.37); --color-nc-dark-acqua-1000: oklch(0.9596 0.0161 206.44); --color-nc-dark-viola-100: oklch(0.1897 0.0654 295.79); --color-nc-dark-viola-200: oklch(0.2192 0.0805 294.49); --color-nc-dark-viola-300: oklch(0.2605 0.0949 295.18); --color-nc-dark-viola-400: oklch(0.2990 0.1087 294.76); --color-nc-dark-viola-500: oklch(0.3702 0.1310 295.14); --color-nc-dark-viola-600: oklch(0.6004 0.1789 294.79); --color-nc-dark-viola-700: oklch(0.5015 0.1883 294.99); --color-nc-dark-viola-800: oklch(0.4620 0.1886 294.84); --color-nc-dark-viola-900: oklch(0.8000 0.1131 295.20); --color-nc-dark-viola-1000: oklch(0.9591 0.0215 294.60); --color-nc-dark-rosa-100: oklch(0.1902 0.0716 355.67); --color-nc-dark-rosa-200: oklch(0.2198 0.0850 357.06); --color-nc-dark-rosa-300: oklch(0.2591 0.1026 356.37); --color-nc-dark-rosa-400: oklch(0.3000 0.1188 356.62); --color-nc-dark-rosa-500: oklch(0.3695 0.1426 356.71); --color-nc-dark-rosa-600: oklch(0.6611 0.1941 356.61); --color-nc-dark-rosa-700: oklch(0.6398 0.2044 356.46); --color-nc-dark-rosa-800: oklch(0.6001 0.2050 356.50); --color-nc-dark-rosa-900: oklch(0.8005 0.1279 356.32); --color-nc-dark-rosa-1000: oklch(0.9599 0.0220 356.32); --color-nc-category-teal-soft: oklch(0.9585 0.0244 187.32); --color-nc-category-teal-deep: oklch(0.4600 0.0788 185.34); --color-nc-dark-category-teal-soft: oklch(0.2627 0.0410 187.13); --color-nc-dark-category-teal-deep: oklch(0.8398 0.1008 186.70); --color-nc-category-purple-soft: oklch(0.9464 0.0327 307.17); --color-nc-category-purple-deep: oklch(0.4541 0.1958 308.26); --color-nc-dark-category-purple-soft: oklch(0.2479 0.0790 306.78); --color-nc-dark-category-purple-deep: oklch(0.7911 0.1271 310.92); --color-nc-category-pink-soft: oklch(0.9476 0.0263 347.12); --color-nc-category-pink-deep: oklch(0.4863 0.1711 355.09); --color-nc-dark-category-pink-soft: oklch(0.2550 0.0598 353.51); --color-nc-dark-category-pink-deep: oklch(0.8108 0.1129 347.21); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-wide: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-section: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-xs: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-compact: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-xs: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label-display: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-label-mono-lg: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono-md: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-body-display: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lead: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-compact: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 72px; --leading-display-xl: 72px; --text-display-xl--letter-spacing: -4.32px; --tracking-display-xl: -4.32px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-wide: 64px; --text-display-wide--line-height: 64px; --leading-display-wide: 64px; --text-display-wide--letter-spacing: -3.84px; --tracking-display-wide: -3.84px; --text-display-wide--font-weight: 600; --font-weight-display-wide: 600; --text-display-lg: 56px; --text-display-lg--line-height: 56px; --leading-display-lg: 56px; --text-display-lg--letter-spacing: -3.36px; --tracking-display-lg: -3.36px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-section: 48px; --text-display-section--line-height: 56px; --leading-display-section: 56px; --text-display-section--letter-spacing: -2.88px; --tracking-display-section: -2.88px; --text-display-section--font-weight: 600; --font-weight-display-section: 600; --text-display-md: 40px; --text-display-md--line-height: 48px; --leading-display-md: 48px; --text-display-md--letter-spacing: -2.4px; --tracking-display-md: -2.4px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 32px; --text-heading-lg--line-height: 40px; --leading-heading-lg: 40px; --text-heading-lg--letter-spacing: -1.28px; --tracking-heading-lg: -1.28px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: -0.96px; --tracking-heading-md: -0.96px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 26px; --leading-heading-sm: 26px; --text-heading-sm--letter-spacing: -0.4px; --tracking-heading-sm: -0.4px; --text-heading-sm--font-weight: 600; --font-weight-heading-sm: 600; --text-heading-xs: 16px; --text-heading-xs--line-height: 24px; --leading-heading-xs: 24px; --text-heading-xs--letter-spacing: -0.32px; --tracking-heading-xs: -0.32px; --text-heading-xs--font-weight: 600; --font-weight-heading-xs: 600; --text-heading-compact: 14px; --text-heading-compact--line-height: 20px; --leading-heading-compact: 20px; --text-heading-compact--letter-spacing: -0.28px; --tracking-heading-compact: -0.28px; --text-heading-compact--font-weight: 600; --font-weight-heading-compact: 600; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --text-button: 14px; --text-button--line-height: 21px; --leading-button: 21px; --text-button--letter-spacing: 0px; --tracking-button: 0px; --text-button--font-weight: 500; --font-weight-button: 500; --text-button-xs: 12px; --text-button-xs--line-height: 16px; --leading-button-xs: 16px; --text-button-xs--letter-spacing: 0px; --tracking-button-xs: 0px; --text-button-xs--font-weight: 500; --font-weight-button-xs: 500; --text-label-display: 20px; --text-label-display--line-height: 32px; --leading-label-display: 32px; --text-label-display--letter-spacing: 0px; --tracking-label-display: 0px; --text-label-display--font-weight: 400; --font-weight-label-display: 400; --text-label-lg: 18px; --text-label-lg--line-height: 20px; --leading-label-lg: 20px; --text-label-lg--letter-spacing: 0px; --tracking-label-lg: 0px; --text-label-lg--font-weight: 400; --font-weight-label-lg: 400; --text-label-md: 16px; --text-label-md--line-height: 20px; --leading-label-md: 20px; --text-label-md--letter-spacing: 0px; --tracking-label-md: 0px; --text-label-md--font-weight: 400; --font-weight-label-md: 400; --text-label: 14px; --text-label--line-height: 20px; --leading-label: 20px; --text-label--letter-spacing: 0px; --tracking-label: 0px; --text-label--font-weight: 400; --font-weight-label: 400; --text-label-sm: 13px; --text-label-sm--line-height: 16px; --leading-label-sm: 16px; --text-label-sm--letter-spacing: 0px; --tracking-label-sm: 0px; --text-label-sm--font-weight: 400; --font-weight-label-sm: 400; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-label-mono-lg: 14px; --text-label-mono-lg--line-height: 20px; --leading-label-mono-lg: 20px; --text-label-mono-lg--letter-spacing: 0px; --tracking-label-mono-lg: 0px; --text-label-mono-lg--font-weight: 400; --font-weight-label-mono-lg: 400; --text-label-mono-md: 13px; --text-label-mono-md--line-height: 20px; --leading-label-mono-md: 20px; --text-label-mono-md--letter-spacing: 0px; --tracking-label-mono-md: 0px; --text-label-mono-md--font-weight: 400; --font-weight-label-mono-md: 400; --text-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 400; --font-weight-label-mono: 400; --text-body-display: 24px; --text-body-display--line-height: 36px; --leading-body-display: 36px; --text-body-display--letter-spacing: 0px; --tracking-body-display: 0px; --text-body-display--font-weight: 400; --font-weight-body-display: 400; --text-body-lead: 20px; --text-body-lead--line-height: 36px; --leading-body-lead: 36px; --text-body-lead--letter-spacing: 0px; --tracking-body-lead: 0px; --text-body-lead--font-weight: 400; --font-weight-body-lead: 400; --text-body-lg: 18px; --text-body-lg--line-height: 28px; --leading-body-lg: 28px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 24px; --leading-body-md: 24px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-compact: 13px; --text-body-compact--line-height: 18px; --leading-body-compact: 18px; --text-body-compact--letter-spacing: 0px; --tracking-body-compact: 0px; --text-body-compact--font-weight: 400; --font-weight-body-compact: 400; --text-code: 13px; --text-code--line-height: 18px; --leading-code: 18px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --radius-none: 0px; --radius-xs: 2px; --radius-xs-plus: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 36px; --spacing-nadicode-control-height-sm: 32px; --spacing-nadicode-control-height-lg: 40px; --spacing-nadicode-control-height-xs: 24px; --spacing-nadicode-control-padding-inline: 12px; --spacing-nadicode-button-padding-inline-sm: 6px; --spacing-nadicode-button-padding-inline: 10px; --spacing-nadicode-button-padding-inline-lg: 14px; --spacing-nadicode-card-padding: 20px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-button-padding-inline-sm: var(--spacing-nadicode-button-padding-inline-sm); --spacing-button-padding-inline: var(--spacing-nadicode-button-padding-inline); --spacing-button-padding-inline-lg: var(--spacing-nadicode-button-padding-inline-lg); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
-  @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-destructive-soft: var(--destructive-soft); --color-destructive-soft-foreground: var(--destructive-soft-foreground); --color-warning-soft: var(--warning-soft); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-success-soft: var(--success-soft); --color-success-soft-foreground: var(--success-soft-foreground); --color-info-soft: var(--info-soft); --color-info-soft-foreground: var(--info-soft-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-selection: var(--selection); --color-selection-foreground: var(--selection-foreground); --color-recessed: var(--recessed); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-category-blue: var(--category-blue); --color-category-blue-foreground: var(--category-blue-foreground); --color-category-teal: var(--category-teal); --color-category-teal-foreground: var(--category-teal-foreground); --color-category-purple: var(--category-purple); --color-category-purple-foreground: var(--category-purple-foreground); --color-category-pink: var(--category-pink); --color-category-pink-foreground: var(--category-pink-foreground); }
+  @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-destructive-soft: var(--destructive-soft); --color-destructive-soft-foreground: var(--destructive-soft-foreground); --color-warning-soft: var(--warning-soft); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-success-soft: var(--success-soft); --color-success-soft-foreground: var(--success-soft-foreground); --color-info-soft: var(--info-soft); --color-info-soft-foreground: var(--info-soft-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-selection: var(--selection); --color-selection-foreground: var(--selection-foreground); --color-recessed: var(--recessed); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-category-green: var(--category-green); --color-category-green-foreground: var(--category-green-foreground); --color-category-orange: var(--category-orange); --color-category-orange-foreground: var(--category-orange-foreground); --color-category-yellow: var(--category-yellow); --color-category-yellow-foreground: var(--category-yellow-foreground); --color-category-red: var(--category-red); --color-category-red-foreground: var(--category-red-foreground); --color-category-blue: var(--category-blue); --color-category-blue-foreground: var(--category-blue-foreground); --color-category-teal: var(--category-teal); --color-category-teal-foreground: var(--category-teal-foreground); --color-category-purple: var(--category-purple); --color-category-purple-foreground: var(--category-purple-foreground); --color-category-pink: var(--category-pink); --color-category-pink-foreground: var(--category-pink-foreground); --color-label-green: var(--label-green); --color-label-green-foreground: var(--label-green-foreground); --color-label-orange: var(--label-orange); --color-label-orange-foreground: var(--label-orange-foreground); --color-label-yellow: var(--label-yellow); --color-label-yellow-foreground: var(--label-yellow-foreground); --color-label-red: var(--label-red); --color-label-red-foreground: var(--label-red-foreground); --color-label-blue: var(--label-blue); --color-label-blue-foreground: var(--label-blue-foreground); --color-label-teal: var(--label-teal); --color-label-teal-foreground: var(--label-teal-foreground); --color-label-purple: var(--label-purple); --color-label-purple-foreground: var(--label-purple-foreground); --color-label-pink: var(--label-pink); --color-label-pink-foreground: var(--label-pink-foreground); }
 }
 @utility text-display-xl { & strong { font-weight: 500; } }
 @utility text-display-wide { & strong { font-weight: 500; } }

package/dist/tokens/nadicode.dtcg-resolved.json

@@ -5621,6 +5621,94 @@
               "hex": "#111111"
             }
           },
+          "category-green": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.894,
+                0.965,
+                0.91
+              ],
+              "hex": "#e4f6e8"
+            }
+          },
+          "category-green-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.2,
+                0.09
+              ],
+              "hex": "#003317"
+            }
+          },
+          "category-orange": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.922,
+                0.898
+              ],
+              "hex": "#ffebe5"
+            }
+          },
+          "category-orange-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.298,
+                0.071,
+                0
+              ],
+              "hex": "#4c1200"
+            }
+          },
+          "category-yellow": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.996,
+                0.957,
+                0.882
+              ],
+              "hex": "#fef4e1"
+            }
+          },
+          "category-yellow-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.259,
+                0.184,
+                0
+              ],
+              "hex": "#422f00"
+            }
+          },
+          "category-red": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.922,
+                0.91
+              ],
+              "hex": "#ffebe8"
+            }
+          },
+          "category-red-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.329,
+                0,
+                0.016
+              ],
+              "hex": "#540004"
+            }
+          },
           "category-blue": {
             "$value": {
               "colorSpace": "srgb",
@@ -5708,6 +5796,182 @@
               ],
               "hex": "#a32464"
             }
+          },
+          "label-green": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.659,
+                0.353
+              ],
+              "hex": "#00a85a"
+            }
+          },
+          "label-green-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-orange": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.353,
+                0.122
+              ],
+              "hex": "#ff5a1f"
+            }
+          },
+          "label-orange-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-yellow": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.761,
+                0.125
+              ],
+              "hex": "#ffc220"
+            }
+          },
+          "label-yellow-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-red": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.827,
+                0.188,
+                0.184
+              ],
+              "hex": "#d3302f"
+            }
+          },
+          "label-red-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-blue": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.118,
+                0.235,
+                1
+              ],
+              "hex": "#1e3cff"
+            }
+          },
+          "label-blue-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-teal": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.588,
+                0.655
+              ],
+              "hex": "#0096a7"
+            }
+          },
+          "label-teal-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-purple": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.435,
+                0.259,
+                0.757
+              ],
+              "hex": "#6f42c1"
+            }
+          },
+          "label-purple-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-pink": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.898,
+                0.275,
+                0.561
+              ],
+              "hex": "#e5468f"
+            }
+          },
+          "label-pink-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
           }
         },
         "dark": {
@@ -6305,6 +6569,94 @@
               "hex": "#ededed"
             }
           },
+          "category-green": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.133,
+                0.051
+              ],
+              "hex": "#00220d"
+            }
+          },
+          "category-green-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.902,
+                0.969,
+                0.918
+              ],
+              "hex": "#e6f7ea"
+            }
+          },
+          "category-orange": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.208,
+                0.035,
+                0
+              ],
+              "hex": "#350900"
+            }
+          },
+          "category-orange-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.929,
+                0.91
+              ],
+              "hex": "#ffede8"
+            }
+          },
+          "category-yellow": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.141,
+                0.094,
+                0
+              ],
+              "hex": "#241800"
+            }
+          },
+          "category-yellow-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.98,
+                0.945,
+                0.875
+              ],
+              "hex": "#faf1df"
+            }
+          },
+          "category-red": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.224,
+                0.012,
+                0.016
+              ],
+              "hex": "#390304"
+            }
+          },
+          "category-red-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.929,
+                0.922
+              ],
+              "hex": "#ffedeb"
+            }
+          },
           "category-blue": {
             "$value": {
               "colorSpace": "srgb",
@@ -6392,6 +6744,182 @@
               ],
               "hex": "#f7a3cf"
             }
+          },
+          "label-green": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.659,
+                0.353
+              ],
+              "hex": "#00a85a"
+            }
+          },
+          "label-green-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-orange": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.353,
+                0.122
+              ],
+              "hex": "#ff5a1f"
+            }
+          },
+          "label-orange-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-yellow": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                0.761,
+                0.125
+              ],
+              "hex": "#ffc220"
+            }
+          },
+          "label-yellow-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-red": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.827,
+                0.188,
+                0.184
+              ],
+              "hex": "#d3302f"
+            }
+          },
+          "label-red-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-blue": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.118,
+                0.235,
+                1
+              ],
+              "hex": "#1e3cff"
+            }
+          },
+          "label-blue-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-teal": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0.588,
+                0.655
+              ],
+              "hex": "#0096a7"
+            }
+          },
+          "label-teal-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
+          },
+          "label-purple": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.435,
+                0.259,
+                0.757
+              ],
+              "hex": "#6f42c1"
+            }
+          },
+          "label-purple-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                1,
+                1,
+                1
+              ],
+              "hex": "#ffffff"
+            }
+          },
+          "label-pink": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.898,
+                0.275,
+                0.561
+              ],
+              "hex": "#e5468f"
+            }
+          },
+          "label-pink-foreground": {
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000"
+            }
           }
         }
       }

package/dist/tokens/nadicode.dtcg.json

@@ -5186,6 +5186,30 @@
           "sidebar-ring": {
             "$value": "{nadicode.core.color.focus-ring}"
           },
+          "category-green": {
+            "$value": "{nadicode.core.color.verde-200}"
+          },
+          "category-green-foreground": {
+            "$value": "{nadicode.core.color.verde-1000}"
+          },
+          "category-orange": {
+            "$value": "{nadicode.core.color.arancio-200}"
+          },
+          "category-orange-foreground": {
+            "$value": "{nadicode.core.color.arancio-1000}"
+          },
+          "category-yellow": {
+            "$value": "{nadicode.core.color.giallo-200}"
+          },
+          "category-yellow-foreground": {
+            "$value": "{nadicode.core.color.giallo-1000}"
+          },
+          "category-red": {
+            "$value": "{nadicode.core.color.rosso-200}"
+          },
+          "category-red-foreground": {
+            "$value": "{nadicode.core.color.rosso-1000}"
+          },
           "category-blue": {
             "$value": "{nadicode.core.color.cobalto-200}"
           },
@@ -5209,6 +5233,54 @@
           },
           "category-pink-foreground": {
             "$value": "{nadicode.core.color.category-pink-deep}"
+          },
+          "label-green": {
+            "$value": "{nadicode.core.color.verde-700}"
+          },
+          "label-green-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-orange": {
+            "$value": "{nadicode.core.color.arancio-700}"
+          },
+          "label-orange-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-yellow": {
+            "$value": "{nadicode.core.color.giallo-700}"
+          },
+          "label-yellow-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-red": {
+            "$value": "{nadicode.core.color.rosso-700}"
+          },
+          "label-red-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-blue": {
+            "$value": "{nadicode.core.color.cobalto-700}"
+          },
+          "label-blue-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-teal": {
+            "$value": "{nadicode.core.color.acqua-700}"
+          },
+          "label-teal-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-purple": {
+            "$value": "{nadicode.core.color.viola-700}"
+          },
+          "label-purple-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-pink": {
+            "$value": "{nadicode.core.color.rosa-700}"
+          },
+          "label-pink-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
           }
         },
         "dark": {
@@ -5374,6 +5446,30 @@
           "sidebar-ring": {
             "$value": "{nadicode.core.color.dark-focus-ring}"
           },
+          "category-green": {
+            "$value": "{nadicode.core.color.dark-verde-200}"
+          },
+          "category-green-foreground": {
+            "$value": "{nadicode.core.color.dark-verde-1000}"
+          },
+          "category-orange": {
+            "$value": "{nadicode.core.color.dark-arancio-200}"
+          },
+          "category-orange-foreground": {
+            "$value": "{nadicode.core.color.dark-arancio-1000}"
+          },
+          "category-yellow": {
+            "$value": "{nadicode.core.color.dark-giallo-200}"
+          },
+          "category-yellow-foreground": {
+            "$value": "{nadicode.core.color.dark-giallo-1000}"
+          },
+          "category-red": {
+            "$value": "{nadicode.core.color.dark-rosso-200}"
+          },
+          "category-red-foreground": {
+            "$value": "{nadicode.core.color.dark-rosso-1000}"
+          },
           "category-blue": {
             "$value": "{nadicode.core.color.dark-cobalto-200}"
           },
@@ -5397,6 +5493,54 @@
           },
           "category-pink-foreground": {
             "$value": "{nadicode.core.color.dark-category-pink-deep}"
+          },
+          "label-green": {
+            "$value": "{nadicode.core.color.dark-verde-700}"
+          },
+          "label-green-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-orange": {
+            "$value": "{nadicode.core.color.dark-arancio-700}"
+          },
+          "label-orange-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-yellow": {
+            "$value": "{nadicode.core.color.dark-giallo-700}"
+          },
+          "label-yellow-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-red": {
+            "$value": "{nadicode.core.color.dark-rosso-700}"
+          },
+          "label-red-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-blue": {
+            "$value": "{nadicode.core.color.dark-cobalto-700}"
+          },
+          "label-blue-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-teal": {
+            "$value": "{nadicode.core.color.dark-acqua-700}"
+          },
+          "label-teal-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
+          },
+          "label-purple": {
+            "$value": "{nadicode.core.color.dark-viola-700}"
+          },
+          "label-purple-foreground": {
+            "$value": "{nadicode.core.color.identity-white}"
+          },
+          "label-pink": {
+            "$value": "{nadicode.core.color.dark-rosa-700}"
+          },
+          "label-pink-foreground": {
+            "$value": "{nadicode.core.color.identity-ink}"
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.175",
+  "version": "12.1.177",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/tokens/extension.tokens.json

@@ -1131,6 +1131,30 @@
         "sidebar-ring": {
           "$value": "{core.color.focus-ring}"
         },
+        "category-green": {
+          "$value": "{core.color.verde-200}"
+        },
+        "category-green-foreground": {
+          "$value": "{core.color.verde-1000}"
+        },
+        "category-orange": {
+          "$value": "{core.color.arancio-200}"
+        },
+        "category-orange-foreground": {
+          "$value": "{core.color.arancio-1000}"
+        },
+        "category-yellow": {
+          "$value": "{core.color.giallo-200}"
+        },
+        "category-yellow-foreground": {
+          "$value": "{core.color.giallo-1000}"
+        },
+        "category-red": {
+          "$value": "{core.color.rosso-200}"
+        },
+        "category-red-foreground": {
+          "$value": "{core.color.rosso-1000}"
+        },
         "category-blue": {
           "$value": "{core.color.cobalto-200}"
         },
@@ -1154,6 +1178,54 @@
         },
         "category-pink-foreground": {
           "$value": "{core.color.category-pink-deep}"
+        },
+        "label-green": {
+          "$value": "{core.color.verde-700}"
+        },
+        "label-green-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-orange": {
+          "$value": "{core.color.arancio-700}"
+        },
+        "label-orange-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-yellow": {
+          "$value": "{core.color.giallo-700}"
+        },
+        "label-yellow-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-red": {
+          "$value": "{core.color.rosso-700}"
+        },
+        "label-red-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-blue": {
+          "$value": "{core.color.cobalto-700}"
+        },
+        "label-blue-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-teal": {
+          "$value": "{core.color.acqua-700}"
+        },
+        "label-teal-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-purple": {
+          "$value": "{core.color.viola-700}"
+        },
+        "label-purple-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-pink": {
+          "$value": "{core.color.rosa-700}"
+        },
+        "label-pink-foreground": {
+          "$value": "{core.color.identity-ink}"
         }
       },
       "dark": {
@@ -1319,6 +1391,30 @@
         "sidebar-ring": {
           "$value": "{core.color.dark-focus-ring}"
         },
+        "category-green": {
+          "$value": "{core.color.dark-verde-200}"
+        },
+        "category-green-foreground": {
+          "$value": "{core.color.dark-verde-1000}"
+        },
+        "category-orange": {
+          "$value": "{core.color.dark-arancio-200}"
+        },
+        "category-orange-foreground": {
+          "$value": "{core.color.dark-arancio-1000}"
+        },
+        "category-yellow": {
+          "$value": "{core.color.dark-giallo-200}"
+        },
+        "category-yellow-foreground": {
+          "$value": "{core.color.dark-giallo-1000}"
+        },
+        "category-red": {
+          "$value": "{core.color.dark-rosso-200}"
+        },
+        "category-red-foreground": {
+          "$value": "{core.color.dark-rosso-1000}"
+        },
         "category-blue": {
           "$value": "{core.color.dark-cobalto-200}"
         },
@@ -1342,6 +1438,54 @@
         },
         "category-pink-foreground": {
           "$value": "{core.color.dark-category-pink-deep}"
+        },
+        "label-green": {
+          "$value": "{core.color.dark-verde-700}"
+        },
+        "label-green-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-orange": {
+          "$value": "{core.color.dark-arancio-700}"
+        },
+        "label-orange-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-yellow": {
+          "$value": "{core.color.dark-giallo-700}"
+        },
+        "label-yellow-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-red": {
+          "$value": "{core.color.dark-rosso-700}"
+        },
+        "label-red-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-blue": {
+          "$value": "{core.color.dark-cobalto-700}"
+        },
+        "label-blue-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-teal": {
+          "$value": "{core.color.dark-acqua-700}"
+        },
+        "label-teal-foreground": {
+          "$value": "{core.color.identity-ink}"
+        },
+        "label-purple": {
+          "$value": "{core.color.dark-viola-700}"
+        },
+        "label-purple-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "label-pink": {
+          "$value": "{core.color.dark-rosa-700}"
+        },
+        "label-pink-foreground": {
+          "$value": "{core.color.identity-ink}"
         }
       }
     }