@nadicodeai/design-system 4.0.5 → 5.2.2

package/DESIGN.md

@@ -592,9 +592,9 @@ A register adds rules. It never redefines a foundation value. A value one regist
 
 | Register | Rulebook | Its own token families | Dark mode |
 | --- | --- | --- | --- |
-| Website | `skills/design/product-design/references/surfaces-website.md` over `## Layout` here | `register.website.layout`: `section`, `page-*`, `frame-*`, `cell-padding`, `section-gap`, `cross-size-*`, every `h-*` height. It speaks `display-xl`, `display-lg`, and `title-lg` | Light only |
+| Website | `apps/website/docs/design-doctrine.md` over `## Layout` here | `register.website.layout`: `section`, `page-*`, `frame-*`, `cell-padding`, `section-gap`, `cross-size-*`, every `h-*` height. It speaks `display-xl`, `display-lg`, and `title-lg` | Light only |
 | Portal | `apps/portal/docs/design-doctrine.md` | `register.portal.density`: `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | System, light, dark, on the `.dark` class |
-| Nadia desktop app | `skills/design/product-design/references/surfaces-nadia.md` | `register.nadia.*`: the colour-role aliases, the radius aliases, six elevation recipes, and the overlay border; data only, never projected to CSS | Follows the operating system, on the `.dark` class |
+| Nadia desktop app | `apps/nadia/docs/design-doctrine.md` | `register.nadia.*`: the colour-role aliases, the radius aliases, six elevation recipes, and the overlay border; data only, never projected to CSS | Follows the operating system, on the `.dark` class |
 
 The website's depth is flat and architectural: hairlines, contrast, dotted fields, diagonal fills, and dark action bands make hierarchy, and the page frame and row grid stay dominant. It uses no rung of the material ladder and no floating card stack as page structure. Marketing bands may use `register.website.layout.section`, emitted as `--nc-section`, when they need the broader inherited hero rhythm. The website kernel uses no negative letter spacing outside the two display tiers.
 
@@ -668,6 +668,22 @@ which statuses exist and which tone each value takes — belong to the consuming
 app, because they are its domain, not this contract's; the Portal keeps its
 whole map in one module and no surface picks a status colour anywhere else.
 
+## System activity
+
+System activity, measured progress and settled status share the foundation's
+visual language. Activity is transient: it communicates ongoing work, then
+gives way to content or outcome feedback. The shared activity family uses
+neutral ink for its structure and the cobalto info role for moving foreground
+particles. The existing success, warning and error roles keep their meanings.
+
+`ActivityOrb` in `@nadicodeai/ui` renders three distinct activities: loading,
+connecting and processing. Its closed motion recipes, operation mapping,
+sizes and runtime behaviour are owned by
+[`packages/ui/docs/activity.md`](../ui/docs/activity.md). A consuming app
+chooses the actual activity and supplies its readable meaning. Measurable
+completion uses progress, and waiting for a person or a failed operation uses
+the existing feedback treatment.
+
 ## Do's and Don'ts
 
 This section states the correct form; a complete positive definition is the whole rule.
@@ -940,8 +956,8 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "destructive-foreground": {"$value":"{core.color.on-primary}"},
           "sidebar-background": {"$value":"{core.color.canvas-soft}"},
           "sidebar-border": {"$value":"{core.color.line}"},
-          "user-bubble": {"$value":"{core.color.link-bg-soft}"},
-          "user-bubble-border": {"$value":"{core.color.link}"},
+          "user-bubble": {"$value":"{core.color.canvas-soft-2}"},
+          "user-bubble-border": {"$value":"{core.color.line}"},
           "medallion": {"$value":"{core.color.verde-vivo}"}
         },
         "dark": {
@@ -969,8 +985,8 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "destructive-foreground": {"$value":"{core.color.on-primary}"},
           "sidebar-background": {"$value":"{core.color.dark-canvas}"},
           "sidebar-border": {"$value":"{core.color.dark-seam}"},
-          "user-bubble": {"$value":"{core.color.dark-link-bg-soft}"},
-          "user-bubble-border": {"$value":"{core.color.dark-link}"},
+          "user-bubble": {"$value":"{core.color.dark-canvas-soft-2}"},
+          "user-bubble-border": {"$value":"{core.color.dark-line}"},
           "medallion": {"$value":"{core.color.dark-verde-vivo}"}
         }
       },

package/dist/css/tokens.css

@@ -0,0 +1,583 @@
+@layer tokens, theme;
+
+/* src/assets/fonts/geist.css */
+/*!
+ * Geist & Geist Mono — SIL Open Font License 1.1
+ * © 2023 Vercel, in collaboration with basement.studio
+ * Source: https://github.com/vercel/geist-font. The full licence ships as
+ * OFL.txt beside the font files this stylesheet points at.
+ * Marked as a legal comment so the attribution survives into the bundled
+ * public artifact that ships those files.
+ */
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/Geist-Variable.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/Geist-Italic.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/GeistMono-Variable.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/GeistMono-Italic.woff2) format("woff2");
+}
+
+/* src/css/tokens.generated.css */
+@layer tokens {
+  :root {
+    --nc-primary: oklch(0.5075 0.1338 151.91);
+    --nc-on-primary: oklch(1.0000 0.0000 0.00);
+    --nc-action: oklch(0.1776 0.0000 0.00);
+    --nc-action-foreground: oklch(1.0000 0.0000 0.00);
+    --nc-action-hover: oklch(0.3012 0.0000 0.00);
+    --nc-action-active: oklch(0.0000 0.0000 0.00);
+    --nc-ink: oklch(0.1776 0.0000 0.00);
+    --nc-body: oklch(0.3867 0.0000 0.00);
+    --nc-muted: oklch(0.5278 0.0000 0.00);
+    --nc-canvas: oklch(1.0000 0.0000 0.00);
+    --nc-canvas-soft: oklch(0.9851 0.0000 0.00);
+    --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);
+    --nc-material-workspace: oklch(0.9761 0.0000 0.00);
+    --nc-material-solid: oklch(1.0000 0.0000 0.00);
+    --nc-line: oklch(0.9219 0.0000 0.00);
+    --nc-input: oklch(0.5624 0.0000 0.00);
+    --nc-seam: oklch(0.8699 0.0000 0.00);
+    --nc-cross: oklch(0.6830 0.0000 0.00);
+    --nc-focus-ring: oklch(0.1776 0.0000 0.00);
+    --nc-scrim: oklch(0.1776 0.0000 0.00);
+    --nc-link: oklch(0.4815 0.1209 154.24);
+    --nc-link-deep: oklch(0.3852 0.0953 154.99);
+    --nc-link-bg-soft: oklch(0.9170 0.0519 161.77);
+    --nc-accent: oklch(0.6824 0.2108 37.70);
+    --nc-info: oklch(0.5005 0.2804 266.17);
+    --nc-info-soft: oklch(0.9457 0.0259 276.40);
+    --nc-info-deep: oklch(0.3197 0.1758 266.79);
+    --nc-success: oklch(0.6415 0.1644 153.23);
+    --nc-success-soft: oklch(0.9170 0.0519 161.77);
+    --nc-success-deep: oklch(0.3852 0.0953 154.99);
+    --nc-error: oklch(0.5688 0.1995 26.59);
+    --nc-error-soft: oklch(0.9522 0.0207 17.52);
+    --nc-error-deep: oklch(0.4235 0.1525 27.08);
+    --nc-warning: oklch(0.8466 0.1678 84.63);
+    --nc-warning-soft: oklch(0.9649 0.0461 90.87);
+    --nc-warning-deep: oklch(0.4834 0.0995 82.44);
+    --nc-flag-red: oklch(0.5688 0.1995 26.59);
+    --nc-verde-vivo: oklch(0.5604 0.1485 151.68);
+    --nc-selection-bg: oklch(0.1776 0.0000 0.00);
+    --nc-selection-fg: oklch(0.9851 0.0000 0.00);
+    --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);
+    --nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00);
+    --nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00);
+    --nc-state-ready: oklch(0.5278 0.0000 0.00);
+    --nc-state-running: oklch(0.5005 0.2804 266.17);
+    --nc-state-review: oklch(0.8466 0.1678 84.63);
+    --nc-state-blocked: oklch(0.5688 0.1995 26.59);
+    --nc-state-complete: oklch(0.6415 0.1644 153.23);
+    --nc-background-100: oklch(1.0000 0.0000 0.00);
+    --nc-background-200: oklch(0.9851 0.0000 0.00);
+    --nc-identity-verde: oklch(0.6415 0.1644 153.23);
+    --nc-identity-rosso: oklch(0.5688 0.1995 26.59);
+    --nc-identity-arancio: oklch(0.6824 0.2108 37.70);
+    --nc-identity-giallo: oklch(0.8466 0.1678 84.63);
+    --nc-identity-cobalto: oklch(0.5005 0.2804 266.17);
+    --nc-identity-ink: oklch(0.0000 0.0000 0.00);
+    --nc-identity-white: oklch(1.0000 0.0000 0.00);
+    --nc-chart-1: oklch(0.5005 0.2804 266.17);
+    --nc-chart-2: oklch(0.6415 0.1644 153.23);
+    --nc-chart-3: oklch(0.7638 0.1562 86.86);
+    --nc-chart-4: oklch(0.5688 0.1995 26.59);
+    --nc-chart-5: oklch(0.6161 0.1062 208.85);
+    --nc-chart-6: oklch(0.5015 0.1883 294.99);
+    --nc-chart-seq-1: oklch(0.6998 0.1347 269.48);
+    --nc-chart-seq-2: oklch(0.5724 0.1897 270.11);
+    --nc-chart-seq-3: oklch(0.4725 0.2271 267.41);
+    --nc-chart-seq-4: oklch(0.3989 0.1934 267.50);
+    --nc-chart-seq-5: oklch(0.3270 0.1487 267.91);
+    --nc-chart-div-warm: oklch(0.7592 0.1560 83.30);
+    --nc-chart-div-mid: oklch(0.5278 0.0000 0.00);
+    --nc-chart-div-cool: oklch(0.5923 0.2215 269.61);
+    --nc-dark-canvas: oklch(0.0000 0.0000 0.00);
+    --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);
+    --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
+    --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
+    --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
+    --nc-dark-ink: oklch(0.9461 0.0000 0.00);
+    --nc-dark-body: oklch(0.8297 0.0000 0.00);
+    --nc-dark-muted: oklch(0.6500 0.0000 0.00);
+    --nc-dark-line: oklch(0.2686 0.0000 0.00);
+    --nc-dark-input: oklch(0.5208 0.0000 0.00);
+    --nc-dark-seam: oklch(0.2178 0.0000 0.00);
+    --nc-dark-primary: oklch(0.7727 0.1753 155.96);
+    --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
+    --nc-dark-action: oklch(1.0000 0.0000 0.00);
+    --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
+    --nc-dark-action-hover: oklch(0.9189 0.0000 0.00);
+    --nc-dark-action-active: oklch(0.8761 0.0000 0.00);
+    --nc-dark-link: oklch(0.7661 0.1498 157.10);
+    --nc-dark-link-deep: oklch(0.8524 0.0996 159.83);
+    --nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32);
+    --nc-dark-focus-ring: oklch(0.9461 0.0000 0.00);
+    --nc-dark-scrim: oklch(0.9461 0.0000 0.00);
+    --nc-dark-error: oklch(0.7955 0.0980 21.02);
+    --nc-dark-error-soft: oklch(0.2296 0.0728 26.06);
+    --nc-dark-error-deep: oklch(0.8856 0.0534 19.64);
+    --nc-dark-warning: oklch(0.8939 0.1387 90.47);
+    --nc-dark-warning-soft: oklch(0.3135 0.0643 85.04);
+    --nc-dark-warning-deep: oklch(0.9320 0.0896 90.86);
+    --nc-dark-info: oklch(0.7067 0.1528 272.08);
+    --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);
+    --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);
+    --nc-dark-cyan: oklch(0.7820 0.1247 190.99);
+    --nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55);
+    --nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54);
+    --nc-dark-success: oklch(0.7019 0.1753 153.20);
+    --nc-dark-success-soft: oklch(0.2893 0.0697 156.32);
+    --nc-dark-success-deep: oklch(0.8524 0.0996 159.83);
+    --nc-dark-state-ready: oklch(0.5624 0.0000 0.00);
+    --nc-dark-state-running: oklch(0.5923 0.2215 269.61);
+    --nc-dark-state-review: oklch(0.8466 0.1678 84.63);
+    --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);
+    --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);
+    --nc-dark-selection-bg: oklch(0.9461 0.0000 0.00);
+    --nc-dark-selection-fg: oklch(0.1448 0.0000 0.00);
+    --nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00);
+    --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);
+    --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);
+    --nc-dark-cross: oklch(0.4495 0.0000 0.00);
+    --nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43);
+    --nc-dark-chart-1: oklch(0.5923 0.2215 269.61);
+    --nc-dark-chart-2: oklch(0.6415 0.1644 153.23);
+    --nc-dark-chart-3: oklch(0.8939 0.1387 90.47);
+    --nc-dark-chart-4: oklch(0.6627 0.1685 23.66);
+    --nc-dark-chart-5: oklch(0.7820 0.1247 190.99);
+    --nc-dark-chart-6: oklch(0.6297 0.1321 299.36);
+    --nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11);
+    --nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48);
+    --nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44);
+    --nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78);
+    --nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31);
+    --nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47);
+    --nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00);
+    --nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44);
+    --nc-xxs: 4px;
+    --nc-xs: 8px;
+    --nc-sm: 12px;
+    --nc-md: 16px;
+    --nc-lg: 24px;
+    --nc-xl: 32px;
+    --nc-2xl: 40px;
+    --nc-3xl: 48px;
+    --nc-4xl: 64px;
+    --nc-5xl: 96px;
+    --nc-6xl: 128px;
+    --nc-guide: 1px;
+    --nc-icon-stroke: 1.6px;
+    --nc-focus-outline-width: 2px;
+    --nc-focus-outline-offset: 2px;
+    --nc-control-height: 32px;
+    --nc-control-padding-inline: 10px;
+    --nc-touch-target: 44px;
+    --nc-rounded-none: 0px;
+    --nc-rounded-xs: 2px;
+    --nc-rounded-sm: 4px;
+    --nc-rounded-md: 6px;
+    --nc-rounded-lg: 8px;
+    --nc-rounded-xl: 10px;
+    --nc-rounded-2xl: 12px;
+    --nc-rounded-3xl: 16px;
+    --nc-rounded-pill-sm: 64px;
+    --nc-rounded-pill: 100px;
+    --nc-rounded-full: 9999px;
+    --nc-type-display-xl-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-xl-font-size: 72px;
+    --nc-type-display-xl-font-weight: 600;
+    --nc-type-display-xl-line-height: 74px;
+    --nc-type-display-xl-letter-spacing: -1.5px;
+    --nc-type-display-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-lg-font-size: 52px;
+    --nc-type-display-lg-font-weight: 600;
+    --nc-type-display-lg-line-height: 54px;
+    --nc-type-display-lg-letter-spacing: -1px;
+    --nc-type-display-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-md-font-size: 24px;
+    --nc-type-display-md-font-weight: 600;
+    --nc-type-display-md-line-height: 32px;
+    --nc-type-display-md-letter-spacing: 0px;
+    --nc-type-display-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-sm-font-size: 20px;
+    --nc-type-display-sm-font-weight: 600;
+    --nc-type-display-sm-line-height: 28px;
+    --nc-type-display-sm-letter-spacing: 0px;
+    --nc-type-title-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-lg-font-size: 40px;
+    --nc-type-title-lg-font-weight: 600;
+    --nc-type-title-lg-line-height: 41px;
+    --nc-type-title-lg-letter-spacing: 0px;
+    --nc-type-title-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-md-font-size: 30px;
+    --nc-type-title-md-font-weight: 600;
+    --nc-type-title-md-line-height: 32px;
+    --nc-type-title-md-letter-spacing: 0px;
+    --nc-type-title-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-sm-font-size: 22px;
+    --nc-type-title-sm-font-weight: 600;
+    --nc-type-title-sm-line-height: 25px;
+    --nc-type-title-sm-letter-spacing: 0px;
+    --nc-type-body-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-lg-font-size: 18px;
+    --nc-type-body-lg-font-weight: 400;
+    --nc-type-body-lg-line-height: 27px;
+    --nc-type-body-lg-letter-spacing: 0px;
+    --nc-type-body-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-md-font-size: 16px;
+    --nc-type-body-md-font-weight: 400;
+    --nc-type-body-md-line-height: 25px;
+    --nc-type-body-md-letter-spacing: 0px;
+    --nc-type-body-md-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-md-strong-font-size: 16px;
+    --nc-type-body-md-strong-font-weight: 500;
+    --nc-type-body-md-strong-line-height: 24px;
+    --nc-type-body-md-strong-letter-spacing: 0px;
+    --nc-type-body-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-sm-font-size: 14px;
+    --nc-type-body-sm-font-weight: 400;
+    --nc-type-body-sm-line-height: 20px;
+    --nc-type-body-sm-letter-spacing: 0px;
+    --nc-type-body-sm-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-sm-strong-font-size: 14px;
+    --nc-type-body-sm-strong-font-weight: 500;
+    --nc-type-body-sm-strong-line-height: 20px;
+    --nc-type-body-sm-strong-letter-spacing: 0px;
+    --nc-type-caption-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-caption-font-size: 12px;
+    --nc-type-caption-font-weight: 400;
+    --nc-type-caption-line-height: 16px;
+    --nc-type-caption-letter-spacing: 0px;
+    --nc-type-caption-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-caption-strong-font-size: 12px;
+    --nc-type-caption-strong-font-weight: 500;
+    --nc-type-caption-strong-line-height: 16px;
+    --nc-type-caption-strong-letter-spacing: 0px;
+    --nc-type-caption-mono-font-family:
+      Geist Mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    --nc-type-caption-mono-font-size: 12px;
+    --nc-type-caption-mono-font-weight: 500;
+    --nc-type-caption-mono-line-height: 16px;
+    --nc-type-caption-mono-letter-spacing: 0px;
+    --nc-type-code-font-family:
+      Geist Mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    --nc-type-code-font-size: 13px;
+    --nc-type-code-font-weight: 400;
+    --nc-type-code-line-height: 20px;
+    --nc-type-code-letter-spacing: 0px;
+    --nc-type-button-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-button-md-font-size: 14px;
+    --nc-type-button-md-font-weight: 500;
+    --nc-type-button-md-line-height: 18px;
+    --nc-type-button-md-letter-spacing: 0px;
+    --nc-type-button-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-button-lg-font-size: 16px;
+    --nc-type-button-lg-font-weight: 500;
+    --nc-type-button-lg-line-height: 24px;
+    --nc-type-button-lg-letter-spacing: 0px;
+    --nc-material-scrim-opacity: 10%;
+    --nc-material-glass-opacity: 76%;
+    --nc-material-glass-saturation: 116%;
+    --nc-material-glass-blur: 28px;
+    --nc-elevation-resting:
+      0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
+      0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
+      0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
+      0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
+      0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
+      0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
+    --nc-elevation-raised:
+      0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
+      0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
+      0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
+      0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
+      0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
+      0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
+    --nc-elevation-floating:
+      0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
+      0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
+      0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
+      0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
+      0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
+    --nc-elevation-modal:
+      0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
+      0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
+      0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
+      0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
+      0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
+      0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
+    --nc-duration-stagger: 60ms;
+    --nc-duration-control: 100ms;
+    --nc-duration-close: 140ms;
+    --nc-duration-confirm: 180ms;
+    --nc-duration-open: 220ms;
+    --nc-duration-msg-in: 240ms;
+    --nc-duration-transition: 240ms;
+    --nc-duration-drawer-swipe: 400ms;
+    --nc-duration-drawer: 450ms;
+    --nc-duration-spin: 600ms;
+    --nc-duration-typing: 1s;
+    --nc-duration-pulse: 1.6s;
+    --nc-duration-shimmer: 2s;
+    --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);
+    --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+    --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
+    --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+    --nc-section: 192px;
+    --nc-page-pad: 24px;
+    --nc-page-max-mobile: 448px;
+    --nc-page-max-tablet: 624px;
+    --nc-page-max-desktop: 1440px;
+    --nc-frame-max: 1392px;
+    --nc-frame-gap: 24px;
+    --nc-cell-padding: 24px;
+    --nc-section-gap: 48px;
+    --nc-cross-size-mobile: 11px;
+    --nc-cross-size-tablet: 15px;
+    --nc-cross-size-desktop: 21px;
+    --nc-h-strip-mobile: 72px;
+    --nc-h-strip-tablet: 80px;
+    --nc-h-strip-desktop: 88px;
+    --nc-h-cell-sm: 120px;
+    --nc-h-cell-md-mobile: 144px;
+    --nc-h-cell-md-tablet: 160px;
+    --nc-h-cell-md-desktop: 168px;
+    --nc-h-cell-lg-mobile: 220px;
+    --nc-h-cell-lg-desktop: 240px;
+    --nc-h-visual-mobile: 276px;
+    --nc-h-visual-tablet: 318px;
+    --nc-h-visual-desktop: 360px;
+    --nc-h-precision-mobile: 276px;
+    --nc-h-precision-tablet: 480px;
+    --nc-h-precision-desktop: 720px;
+    --nc-h-hero-mobile: 560px;
+    --nc-h-hero-desktop: 720px;
+    --nc-h-action-strip-mobile: 20px;
+    --nc-h-action-strip-desktop: 32px;
+    --nc-h-action-body-mobile: 320px;
+    --nc-h-action-body-tablet: 338px;
+    --nc-h-action-band: 260px;
+    --nc-h-feature-mobile: 360px;
+    --nc-h-feature-tablet: 400px;
+    --nc-h-feature-desktop: 456px;
+    --nc-h-editorial-feature-mobile: 360px;
+    --nc-h-editorial-feature-tablet: 440px;
+    --nc-h-editorial-feature-desktop: 560px;
+    --nc-h-bento-primary: 384px;
+    --nc-h-bento-secondary: 240px;
+    --nc-h-bento-mobile-copy: 248px;
+    --nc-h-bento-mobile-main: 537px;
+    --nc-h-bento-strip: 20px;
+    --nc-filter-chip-gap: 6px;
+    --nc-filter-chip-height: 28px;
+    --nc-filter-chip-icon: 14px;
+  }
+}
+
+/* src/css/modes.generated.css */
+@layer theme {
+  .dark {
+    --nc-canvas: var(--nc-dark-canvas);
+    --nc-canvas-soft: var(--nc-dark-canvas-soft);
+    --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
+    --nc-material-workspace: var(--nc-dark-material-workspace);
+    --nc-material-solid: var(--nc-dark-material-solid);
+    --nc-ink: var(--nc-dark-ink);
+    --nc-body: var(--nc-dark-body);
+    --nc-muted: var(--nc-dark-muted);
+    --nc-line: var(--nc-dark-line);
+    --nc-input: var(--nc-dark-input);
+    --nc-seam: var(--nc-dark-seam);
+    --nc-primary: var(--nc-dark-primary);
+    --nc-on-primary: var(--nc-dark-on-primary);
+    --nc-action: var(--nc-dark-action);
+    --nc-action-foreground: var(--nc-dark-action-foreground);
+    --nc-action-hover: var(--nc-dark-action-hover);
+    --nc-action-active: var(--nc-dark-action-active);
+    --nc-link: var(--nc-dark-link);
+    --nc-link-deep: var(--nc-dark-link-deep);
+    --nc-link-bg-soft: var(--nc-dark-link-bg-soft);
+    --nc-focus-ring: var(--nc-dark-focus-ring);
+    --nc-scrim: var(--nc-dark-scrim);
+    --nc-error: var(--nc-dark-error);
+    --nc-error-soft: var(--nc-dark-error-soft);
+    --nc-error-deep: var(--nc-dark-error-deep);
+    --nc-warning: var(--nc-dark-warning);
+    --nc-warning-soft: var(--nc-dark-warning-soft);
+    --nc-warning-deep: var(--nc-dark-warning-deep);
+    --nc-info: var(--nc-dark-info);
+    --nc-info-soft: var(--nc-dark-info-soft);
+    --nc-info-deep: var(--nc-dark-info-deep);
+    --nc-success: var(--nc-dark-success);
+    --nc-success-soft: var(--nc-dark-success-soft);
+    --nc-success-deep: var(--nc-dark-success-deep);
+    --nc-state-ready: var(--nc-dark-state-ready);
+    --nc-state-running: var(--nc-dark-state-running);
+    --nc-state-review: var(--nc-dark-state-review);
+    --nc-state-blocked: var(--nc-dark-state-blocked);
+    --nc-state-complete: var(--nc-dark-state-complete);
+    --nc-selection-bg: var(--nc-dark-selection-bg);
+    --nc-selection-fg: var(--nc-dark-selection-fg);
+    --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);
+    --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);
+    --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);
+    --nc-cross: var(--nc-dark-cross);
+    --nc-verde-vivo: var(--nc-dark-verde-vivo);
+    --nc-chart-1: var(--nc-dark-chart-1);
+    --nc-chart-2: var(--nc-dark-chart-2);
+    --nc-chart-3: var(--nc-dark-chart-3);
+    --nc-chart-4: var(--nc-dark-chart-4);
+    --nc-chart-5: var(--nc-dark-chart-5);
+    --nc-chart-6: var(--nc-dark-chart-6);
+    --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
+    --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
+    --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
+    --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
+    --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
+    --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
+    --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
+    --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
+    --nc-elevation-resting:
+      0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
+      0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
+      0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
+      0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
+      0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+    --nc-elevation-raised:
+      0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
+      0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
+      0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
+      0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
+      0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+    --nc-elevation-floating:
+      0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
+      0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
+      0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
+      0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+    --nc-elevation-modal:
+      0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
+      0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
+      0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
+      0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
+      0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+  }
+}
+
+/* src/css/tokens.css */

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

@@ -4000,22 +4000,22 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.776,
-                  0.937,
-                  0.851
+                  0.961,
+                  0.961,
+                  0.961
                 ],
-                "hex": "#c6efd9"
+                "hex": "#f5f5f5"
               }
             },
             "user-bubble-border": {
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0,
-                  0.443,
-                  0.239
+                  0.898,
+                  0.898,
+                  0.898
                 ],
-                "hex": "#00713d"
+                "hex": "#e5e5e5"
               }
             },
             "medallion": {
@@ -4289,22 +4289,22 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0,
-                  0.208,
-                  0.11
+                  0.102,
+                  0.102,
+                  0.102
                 ],
-                "hex": "#00351c"
+                "hex": "#1a1a1a"
               }
             },
             "user-bubble-border": {
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.306,
-                  0.812,
-                  0.549
+                  0.149,
+                  0.149,
+                  0.149
                 ],
-                "hex": "#4ecf8c"
+                "hex": "#262626"
               }
             },
             "medallion": {

package/dist/tokens/nadicode.dtcg.json

@@ -3813,10 +3813,10 @@
               "$value": "{nadicode.core.color.line}"
             },
             "user-bubble": {
-              "$value": "{nadicode.core.color.link-bg-soft}"
+              "$value": "{nadicode.core.color.canvas-soft-2}"
             },
             "user-bubble-border": {
-              "$value": "{nadicode.core.color.link}"
+              "$value": "{nadicode.core.color.line}"
             },
             "medallion": {
               "$value": "{nadicode.core.color.verde-vivo}"
@@ -3894,10 +3894,10 @@
               "$value": "{nadicode.core.color.dark-seam}"
             },
             "user-bubble": {
-              "$value": "{nadicode.core.color.dark-link-bg-soft}"
+              "$value": "{nadicode.core.color.dark-canvas-soft-2}"
             },
             "user-bubble-border": {
-              "$value": "{nadicode.core.color.dark-link}"
+              "$value": "{nadicode.core.color.dark-line}"
             },
             "medallion": {
               "$value": "{nadicode.core.color.dark-verde-vivo}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "4.0.5",
+  "version": "5.2.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,7 @@
     "./tokens/dtcg-resolved": "./dist/tokens/nadicode.dtcg-resolved.json",
     "./tailwind": "./dist/tailwind/nadicode.tailwind.json",
     "./css": "./dist/css/index.css",
+    "./css/tokens": "./dist/css/tokens.css",
     "./icons/*": "./dist/icons/*",
     "./favicon/*": "./dist/favicon/*",
     "./assets/logo-mark": {