@nadicodeai/design-system 4.0.4 → 5.1.0

package/DESIGN.md

@@ -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.

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "4.0.4",
+  "version": "5.1.0",
   "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": {