npm - @neasg/design-system - Versions diffs - 0.4.12 → 0.4.13 - Mend

@neasg/design-system 0.4.12 → 0.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -64,9 +64,151 @@ const config: Config = {
 export default config;
 ```
-Theme tokens are provided through the exported stylesheet. The default root font
-size is 12.5px. If you want to change the package base font size, override
-`--font-size-root` after importing the stylesheet:
+Theme tokens are provided through the exported stylesheet. Light mode is the
+default; apply the `dark` class to an app root to render the dark palette:
+```tsx
+<html className={isDarkMode ? "dark" : undefined}>
+  <body>...</body>
+</html>
+```
+Systems that need to inspect or mirror the dark palette can import the token
+mapping from the root package:
+```ts
+import {
+  darkThemeTokenMapping,
+  neaDarkNeutralPalette,
+  neaDarkNeutralTokenMapping,
+  neaPalette,
+  neaPaletteDarkTokenMapping,
+  semanticColorTokens,
+} from "@neasg/design-system";
+```
+`darkThemeTokenMapping` mirrors the `.dark` declarations in the package
+stylesheet. `neaDarkNeutralTokenMapping` contains the raw dark neutral HSL
+values. `neaDarkNeutralPalette` lists the dark neutral token names and is also
+available as `neaPalette.darkNeutral`. `neaPaletteDarkTokenMapping` contains
+the dark counterpart for every raw palette token.
+For badges, status chips, and other token-driven UI, use `semanticColorTokens`.
+Each semantic color token carries its direct dark mapping:
+```ts
+const statusSuccess = semanticColorTokens.find(
+  (token) => token.token === "--status-success",
+);
+statusSuccess?.token; // "--status-success"
+statusSuccess?.foregroundToken; // "--status-success-foreground"
+statusSuccess?.darkValue; // "148 20% 18%"
+statusSuccess?.darkForegroundValue; // "148 28% 62%"
+```
+Raw palette entries also carry direct dark mappings:
+```ts
+const greenBadge = neaPalette.green.find(
+  (token) => token.token === "--nea-green-100",
+);
+greenBadge?.token; // "--nea-green-100"
+greenBadge?.darkValue; // "145 100% 21%"
+neaPaletteDarkTokenMapping["--nea-green-100"]; // "145 100% 21%"
+```
+```ts
+const neaDarkNeutralTokenMapping = {
+  "--nea-dark-neutral-50": "214 18% 92%",
+  "--nea-dark-neutral-100": "214 18% 90%",
+  "--nea-dark-neutral-200": "215 14% 68%",
+  "--nea-dark-neutral-300": "220 10% 16%",
+  "--nea-dark-neutral-400": "220 12% 13.5%",
+  "--nea-dark-neutral-500": "220 14% 11.5%",
+  "--nea-dark-neutral-600": "220 16% 9.5%",
+  "--nea-dark-neutral-700": "220 18% 8%",
+  "--nea-dark-neutral-800": "220 22% 6.5%",
+} as const;
+```
+```ts
+const darkThemeTokenMapping = {
+  "--background": "var(--nea-dark-neutral-300)",
+  "--foreground": "var(--nea-dark-neutral-50)",
+  "--card": "var(--nea-dark-neutral-300)",
+  "--card-foreground": "var(--nea-dark-neutral-50)",
+  "--card-border": "220 10% 28%",
+  "--popover": "var(--nea-dark-neutral-300)",
+  "--popover-foreground": "var(--nea-dark-neutral-50)",
+  "--tooltip-background": "var(--nea-dark-neutral-800)",
+  "--tooltip-foreground": "var(--nea-dark-neutral-50)",
+  "--primary": "148 30% 38%",
+  "--primary-foreground": "var(--nea-dark-neutral-50)",
+  "--secondary": "var(--nea-dark-neutral-500)",
+  "--secondary-foreground": "var(--nea-dark-neutral-100)",
+  "--muted": "var(--nea-dark-neutral-500)",
+  "--muted-foreground": "var(--nea-dark-neutral-200)",
+  "--accent": "var(--nea-dark-neutral-500)",
+  "--accent-foreground": "var(--nea-dark-neutral-50)",
+  "--destructive": "0 72% 58%",
+  "--destructive-foreground": "var(--nea-dark-neutral-50)",
+  "--status-success": "148 20% 18%",
+  "--status-success-foreground": "148 28% 62%",
+  "--status-warning": "38 22% 18%",
+  "--status-warning-foreground": "42 42% 64%",
+  "--status-info": "214 22% 19%",
+  "--status-info-foreground": "214 36% 66%",
+  "--status-accent": "263 18% 20%",
+  "--status-accent-foreground": "255 34% 68%",
+  "--status-destructive": "0 20% 19%",
+  "--status-destructive-foreground": "0 42% 66%",
+  "--tab-list-background": "var(--table-header-background)",
+  "--tab-trigger-foreground": "var(--nea-dark-neutral-200)",
+  "--tab-trigger-hover-background": "var(--nea-dark-neutral-400)",
+  "--tab-trigger-active-background": "var(--nea-dark-neutral-300)",
+  "--tab-trigger-active-foreground": "var(--nea-dark-neutral-50)",
+  "--tab-indicator": "var(--primary)",
+  "--card-gradient-from": "var(--nea-green-700)",
+  "--card-gradient-to": "var(--nea-green-500)",
+  "--card-gradient-border": "var(--nea-green-500)",
+  "--card-gradient-foreground": "var(--nea-neutral-0)",
+  "--layout-chrome-background": "var(--nea-dark-neutral-500)",
+  "--layout-shell-background": "var(--layout-chrome-background)",
+  "--layout-sidebar-background": "var(--layout-chrome-background)",
+  "--layout-sidebar-logo-background": "hsl(var(--nea-neutral-0))",
+  "--layout-sidebar-border": "var(--card-border)",
+  "--layout-surface-background": "var(--nea-dark-neutral-400)",
+  "--layout-workspace-header-background": "var(--nea-dark-neutral-300)",
+  "--layout-surface-border": "var(--card-border)",
+  "--layout-surface-shadow":
+    "0 24px 54px -34px rgb(0 0 0 / 0.64), 0 2px 10px rgb(0 0 0 / 0.26)",
+  "--overlay-shadow":
+    "0 18px 36px -22px rgb(0 0 0 / 0.58), 0 8px 18px -14px rgb(0 0 0 / 0.34)",
+  "--overlay-shadow-strong":
+    "0 10px 42px -24px rgb(0 0 0 / 0.68), 0 4px 16px -12px rgb(0 0 0 / 0.42)",
+  "--layout-right-panel-background": "var(--layout-surface-background)",
+  "--layout-right-panel-border": "220 10% 32%",
+  "--layout-right-panel-shadow":
+    "-18px 0 36px -28px rgb(0 0 0 / 0.58), -2px 0 12px -8px rgb(0 0 0 / 0.46)",
+  "--table-header-background": "var(--nea-dark-neutral-500)",
+  "--table-row-striped-background": "var(--nea-dark-neutral-500)",
+  "--table-row-warning-background": "var(--nea-dark-neutral-300)",
+  "--border": "var(--card-border)",
+  "--input": "var(--card-border)",
+  "--ring": "148 30% 38%",
+  "--component-border": "var(--card-border)",
+  "--button-outline-background": "var(--nea-dark-neutral-500)",
+  "--button-outline-hover-background": "var(--nea-dark-neutral-400)",
+  "--button-outline-border": "var(--component-border)",
+  "--tab-list-border": "var(--component-border)",
+  "--table-border": "var(--component-border)",
+} as const;
+```
+The default root font size is 14px. If you want to change the package base font
+size, override `--font-size-root` after importing the stylesheet:
 ```css
 :root {
@@ -88,7 +230,7 @@ const inter = Inter({
 Use package components before creating app-local UI copies. If a reusable
 pattern is missing, extract it into the design system instead of duplicating it
-locally. This design system is light-theme only.
+locally.
 ## AI Usage
@@ -135,8 +277,8 @@ Use @neasg/design-system as the source of truth for shared UI.
   import { Button, Input, Card, Table, Typography } from "@neasg/design-system";
 - Use the documented props-driven API. Do not build custom compositions from internal primitives.
 - Use the package theme tokens and Tailwind preset instead of inventing ad hoc colors, spacing, or radius values.
+- Theme switching is driven by the `dark` class. Use the exported `darkThemeTokenMapping`, `semanticColorTokens`, and `neaPaletteDarkTokenMapping` instead of inventing app-local dark-mode colors.
 - Use Typography for headings, body copy, labels, and captions.
-- This design system is light-theme only. Do not generate dark-mode styles, tokens, or examples.
 - If a needed shared pattern is missing, extract it into @neasg/design-system rather than duplicating it locally.
 ```

package/dist/index.d.ts CHANGED Viewed

@@ -120,7 +120,8 @@ export { PageSection, PageSectionGroup } from "./page-section";
 export type { PageSectionGroupProps, PageSectionProps } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
 export type { TypographyProps } from "./typography";
-export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { darkThemeTokenMapping, neaDarkNeutralPalette, neaDarkNeutralTokenMapping, neaPalette, neaPaletteDarkTokenMapping, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export type { CssTokenMapping, SemanticColorToken } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export type { PaginationProps } from "./pagination";

package/dist/index.js CHANGED Viewed

@@ -62,7 +62,7 @@ export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, Pa
 export { WorkspaceHeader } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
-export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { darkThemeTokenMapping, neaDarkNeutralPalette, neaDarkNeutralTokenMapping, neaPalette, neaPaletteDarkTokenMapping, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export { TableToolbar } from "./table-toolbar";

package/dist/styles.css CHANGED Viewed

@@ -39,6 +39,22 @@
   animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
 }
+.docs-token-swatch-preview {
+  background-color: var(--docs-token-swatch-background);
+  color: var(--docs-token-swatch-foreground, hsl(var(--foreground)));
+}
+.dark .docs-token-swatch-preview {
+  background-color: var(
+    --docs-token-swatch-dark-background,
+    var(--docs-token-swatch-background)
+  );
+  color: var(
+    --docs-token-swatch-dark-foreground,
+    var(--docs-token-swatch-foreground, hsl(var(--foreground)))
+  );
+}
 @layer base {
   :root {
     --space-0: 0rem;

package/dist/theme.d.ts CHANGED Viewed

@@ -1,316 +1,575 @@
+export type CssTokenMapping = Readonly<Record<`--${string}`, string>>;
+export declare const neaPaletteDarkTokenMapping: {
+    readonly "--nea-green-50": "146 100% 15%";
+    readonly "--nea-green-100": "145 100% 21%";
+    readonly "--nea-green-200": "144 100% 27.5%";
+    readonly "--nea-green-300": "144 84% 33%";
+    readonly "--nea-green-400": "144 66% 40%";
+    readonly "--nea-green-500": "144 50% 53%";
+    readonly "--nea-green-600": "143 44% 67%";
+    readonly "--nea-green-700": "142 45% 80%";
+    readonly "--nea-green-800": "141 50% 90%";
+    readonly "--nea-green-900": "140 57% 96%";
+    readonly "--nea-blue-50": "224 64% 33%";
+    readonly "--nea-blue-100": "226 71% 40%";
+    readonly "--nea-blue-200": "224 76% 48%";
+    readonly "--nea-blue-300": "221 83% 53%";
+    readonly "--nea-blue-400": "217 91% 60%";
+    readonly "--nea-blue-500": "213 94% 68%";
+    readonly "--nea-blue-600": "213 97% 78%";
+    readonly "--nea-blue-700": "213 97% 87%";
+    readonly "--nea-blue-800": "214 95% 93%";
+    readonly "--nea-blue-900": "214 100% 97%";
+    readonly "--nea-amber-50": "22 78% 26%";
+    readonly "--nea-amber-100": "22 82% 31%";
+    readonly "--nea-amber-200": "26 90% 37%";
+    readonly "--nea-amber-300": "32 95% 44%";
+    readonly "--nea-amber-400": "38 92% 50%";
+    readonly "--nea-amber-500": "43 96% 56%";
+    readonly "--nea-amber-600": "43 96% 66%";
+    readonly "--nea-amber-700": "48 97% 77%";
+    readonly "--nea-amber-800": "48 96% 89%";
+    readonly "--nea-amber-900": "48 100% 96%";
+    readonly "--nea-red-50": "0 63% 31%";
+    readonly "--nea-red-100": "0 74% 35%";
+    readonly "--nea-red-200": "0 74% 42%";
+    readonly "--nea-red-300": "0 72% 51%";
+    readonly "--nea-red-400": "0 84% 60%";
+    readonly "--nea-red-500": "0 91% 71%";
+    readonly "--nea-red-600": "0 94% 82%";
+    readonly "--nea-red-700": "0 96% 89%";
+    readonly "--nea-red-800": "0 93% 94%";
+    readonly "--nea-red-900": "0 86% 97%";
+    readonly "--nea-violet-50": "264 69% 35%";
+    readonly "--nea-violet-100": "263 70% 42%";
+    readonly "--nea-violet-200": "263 84% 50%";
+    readonly "--nea-violet-300": "263 89% 60%";
+    readonly "--nea-violet-400": "258 90% 66%";
+    readonly "--nea-violet-500": "255 92% 76%";
+    readonly "--nea-violet-600": "252 95% 85%";
+    readonly "--nea-violet-700": "252 96% 90%";
+    readonly "--nea-violet-800": "250 100% 97%";
+    readonly "--nea-violet-900": "250 100% 98%";
+    readonly "--nea-neutral-0": "220 22% 6.5%";
+    readonly "--nea-neutral-50": "220 18% 8%";
+    readonly "--nea-neutral-100": "220 16% 9.5%";
+    readonly "--nea-neutral-200": "220 14% 11.5%";
+    readonly "--nea-neutral-300": "220 12% 13.5%";
+    readonly "--nea-neutral-400": "220 10% 16%";
+    readonly "--nea-neutral-500": "215 14% 68%";
+    readonly "--nea-neutral-600": "214 18% 90%";
+    readonly "--nea-neutral-700": "214 18% 92%";
+    readonly "--nea-neutral-800": "214 18% 92%";
+    readonly "--nea-neutral-900": "214 18% 92%";
+    readonly "--nea-dark-neutral-50": "214 18% 92%";
+    readonly "--nea-dark-neutral-100": "214 18% 90%";
+    readonly "--nea-dark-neutral-200": "215 14% 68%";
+    readonly "--nea-dark-neutral-300": "220 10% 16%";
+    readonly "--nea-dark-neutral-400": "220 12% 13.5%";
+    readonly "--nea-dark-neutral-500": "220 14% 11.5%";
+    readonly "--nea-dark-neutral-600": "220 16% 9.5%";
+    readonly "--nea-dark-neutral-700": "220 18% 8%";
+    readonly "--nea-dark-neutral-800": "220 22% 6.5%";
+};
+export declare const neaDarkNeutralTokenMapping: {
+    readonly "--nea-dark-neutral-50": "214 18% 92%";
+    readonly "--nea-dark-neutral-100": "214 18% 90%";
+    readonly "--nea-dark-neutral-200": "215 14% 68%";
+    readonly "--nea-dark-neutral-300": "220 10% 16%";
+    readonly "--nea-dark-neutral-400": "220 12% 13.5%";
+    readonly "--nea-dark-neutral-500": "220 14% 11.5%";
+    readonly "--nea-dark-neutral-600": "220 16% 9.5%";
+    readonly "--nea-dark-neutral-700": "220 18% 8%";
+    readonly "--nea-dark-neutral-800": "220 22% 6.5%";
+};
+export declare const neaDarkNeutralPalette: readonly (({
+    readonly name: "Dark Neutral 50";
+    readonly token: "--nea-dark-neutral-50";
+} | {
+    readonly name: "Dark Neutral 100";
+    readonly token: "--nea-dark-neutral-100";
+} | {
+    readonly name: "Dark Neutral 200";
+    readonly token: "--nea-dark-neutral-200";
+} | {
+    readonly name: "Dark Neutral 300";
+    readonly token: "--nea-dark-neutral-300";
+} | {
+    readonly name: "Dark Neutral 400";
+    readonly token: "--nea-dark-neutral-400";
+} | {
+    readonly name: "Dark Neutral 500";
+    readonly token: "--nea-dark-neutral-500";
+} | {
+    readonly name: "Dark Neutral 600";
+    readonly token: "--nea-dark-neutral-600";
+} | {
+    readonly name: "Dark Neutral 700";
+    readonly token: "--nea-dark-neutral-700";
+} | {
+    readonly name: "Dark Neutral 800";
+    readonly token: "--nea-dark-neutral-800";
+}) & {
+    readonly darkValue: string;
+})[];
 export declare const neaPalette: {
-    readonly green: readonly [{
+    readonly green: readonly (({
         readonly name: "Green 50";
         readonly token: "--nea-green-50";
-    }, {
+    } | {
         readonly name: "Green 100";
         readonly token: "--nea-green-100";
-    }, {
+    } | {
         readonly name: "Green 200";
         readonly token: "--nea-green-200";
-    }, {
+    } | {
         readonly name: "Green 300";
         readonly token: "--nea-green-300";
-    }, {
+    } | {
         readonly name: "Green 400";
         readonly token: "--nea-green-400";
-    }, {
+    } | {
         readonly name: "Green 500";
         readonly token: "--nea-green-500";
-    }, {
+    } | {
         readonly name: "Green 600";
         readonly token: "--nea-green-600";
-    }, {
+    } | {
         readonly name: "Green 700";
         readonly token: "--nea-green-700";
-    }, {
+    } | {
         readonly name: "Green 800";
         readonly token: "--nea-green-800";
-    }, {
+    } | {
         readonly name: "Green 900";
         readonly token: "--nea-green-900";
-    }];
-    readonly blue: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly blue: readonly (({
         readonly name: "Blue 50";
         readonly token: "--nea-blue-50";
-    }, {
+    } | {
         readonly name: "Blue 100";
         readonly token: "--nea-blue-100";
-    }, {
+    } | {
         readonly name: "Blue 200";
         readonly token: "--nea-blue-200";
-    }, {
+    } | {
         readonly name: "Blue 300";
         readonly token: "--nea-blue-300";
-    }, {
+    } | {
         readonly name: "Blue 400";
         readonly token: "--nea-blue-400";
-    }, {
+    } | {
         readonly name: "Blue 500";
         readonly token: "--nea-blue-500";
-    }, {
+    } | {
         readonly name: "Blue 600";
         readonly token: "--nea-blue-600";
-    }, {
+    } | {
         readonly name: "Blue 700";
         readonly token: "--nea-blue-700";
-    }, {
+    } | {
         readonly name: "Blue 800";
         readonly token: "--nea-blue-800";
-    }, {
+    } | {
         readonly name: "Blue 900";
         readonly token: "--nea-blue-900";
-    }];
-    readonly amber: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly amber: readonly (({
         readonly name: "Amber 50";
         readonly token: "--nea-amber-50";
-    }, {
+    } | {
         readonly name: "Amber 100";
         readonly token: "--nea-amber-100";
-    }, {
+    } | {
         readonly name: "Amber 200";
         readonly token: "--nea-amber-200";
-    }, {
+    } | {
         readonly name: "Amber 300";
         readonly token: "--nea-amber-300";
-    }, {
+    } | {
         readonly name: "Amber 400";
         readonly token: "--nea-amber-400";
-    }, {
+    } | {
         readonly name: "Amber 500";
         readonly token: "--nea-amber-500";
-    }, {
+    } | {
         readonly name: "Amber 600";
         readonly token: "--nea-amber-600";
-    }, {
+    } | {
         readonly name: "Amber 700";
         readonly token: "--nea-amber-700";
-    }, {
+    } | {
         readonly name: "Amber 800";
         readonly token: "--nea-amber-800";
-    }, {
+    } | {
         readonly name: "Amber 900";
         readonly token: "--nea-amber-900";
-    }];
-    readonly red: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly red: readonly (({
         readonly name: "Red 50";
         readonly token: "--nea-red-50";
-    }, {
+    } | {
         readonly name: "Red 100";
         readonly token: "--nea-red-100";
-    }, {
+    } | {
         readonly name: "Red 200";
         readonly token: "--nea-red-200";
-    }, {
+    } | {
         readonly name: "Red 300";
         readonly token: "--nea-red-300";
-    }, {
+    } | {
         readonly name: "Red 400";
         readonly token: "--nea-red-400";
-    }, {
+    } | {
         readonly name: "Red 500";
         readonly token: "--nea-red-500";
-    }, {
+    } | {
         readonly name: "Red 600";
         readonly token: "--nea-red-600";
-    }, {
+    } | {
         readonly name: "Red 700";
         readonly token: "--nea-red-700";
-    }, {
+    } | {
         readonly name: "Red 800";
         readonly token: "--nea-red-800";
-    }, {
+    } | {
         readonly name: "Red 900";
         readonly token: "--nea-red-900";
-    }];
-    readonly violet: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly violet: readonly (({
         readonly name: "Violet 50";
         readonly token: "--nea-violet-50";
-    }, {
+    } | {
         readonly name: "Violet 100";
         readonly token: "--nea-violet-100";
-    }, {
+    } | {
         readonly name: "Violet 200";
         readonly token: "--nea-violet-200";
-    }, {
+    } | {
         readonly name: "Violet 300";
         readonly token: "--nea-violet-300";
-    }, {
+    } | {
         readonly name: "Violet 400";
         readonly token: "--nea-violet-400";
-    }, {
+    } | {
         readonly name: "Violet 500";
         readonly token: "--nea-violet-500";
-    }, {
+    } | {
         readonly name: "Violet 600";
         readonly token: "--nea-violet-600";
-    }, {
+    } | {
         readonly name: "Violet 700";
         readonly token: "--nea-violet-700";
-    }, {
+    } | {
         readonly name: "Violet 800";
         readonly token: "--nea-violet-800";
-    }, {
+    } | {
         readonly name: "Violet 900";
         readonly token: "--nea-violet-900";
-    }];
-    readonly neutral: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly neutral: readonly (({
         readonly name: "Neutral 0";
         readonly token: "--nea-neutral-0";
-    }, {
+    } | {
         readonly name: "Neutral 50";
         readonly token: "--nea-neutral-50";
-    }, {
+    } | {
         readonly name: "Neutral 100";
         readonly token: "--nea-neutral-100";
-    }, {
+    } | {
         readonly name: "Neutral 200";
         readonly token: "--nea-neutral-200";
-    }, {
+    } | {
         readonly name: "Neutral 300";
         readonly token: "--nea-neutral-300";
-    }, {
+    } | {
         readonly name: "Neutral 400";
         readonly token: "--nea-neutral-400";
-    }, {
+    } | {
         readonly name: "Neutral 500";
         readonly token: "--nea-neutral-500";
-    }, {
+    } | {
         readonly name: "Neutral 600";
         readonly token: "--nea-neutral-600";
-    }, {
+    } | {
         readonly name: "Neutral 700";
         readonly token: "--nea-neutral-700";
-    }, {
+    } | {
         readonly name: "Neutral 800";
         readonly token: "--nea-neutral-800";
-    }, {
+    } | {
         readonly name: "Neutral 900";
         readonly token: "--nea-neutral-900";
-    }];
-    readonly darkNeutral: readonly [{
+    }) & {
+        readonly darkValue: string;
+    })[];
+    readonly darkNeutral: readonly (({
         readonly name: "Dark Neutral 50";
         readonly token: "--nea-dark-neutral-50";
-    }, {
+    } | {
         readonly name: "Dark Neutral 100";
         readonly token: "--nea-dark-neutral-100";
-    }, {
+    } | {
         readonly name: "Dark Neutral 200";
         readonly token: "--nea-dark-neutral-200";
-    }, {
+    } | {
         readonly name: "Dark Neutral 300";
         readonly token: "--nea-dark-neutral-300";
-    }, {
+    } | {
         readonly name: "Dark Neutral 400";
         readonly token: "--nea-dark-neutral-400";
-    }, {
+    } | {
         readonly name: "Dark Neutral 500";
         readonly token: "--nea-dark-neutral-500";
-    }, {
+    } | {
         readonly name: "Dark Neutral 600";
         readonly token: "--nea-dark-neutral-600";
-    }, {
+    } | {
         readonly name: "Dark Neutral 700";
         readonly token: "--nea-dark-neutral-700";
-    }, {
+    } | {
         readonly name: "Dark Neutral 800";
         readonly token: "--nea-dark-neutral-800";
-    }];
+    }) & {
+        readonly darkValue: string;
+    })[];
+};
+export declare const darkThemeTokenMapping: {
+    readonly "--background": "var(--nea-dark-neutral-300)";
+    readonly "--foreground": "var(--nea-dark-neutral-50)";
+    readonly "--card": "var(--nea-dark-neutral-300)";
+    readonly "--card-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--card-border": "220 10% 28%";
+    readonly "--popover": "var(--nea-dark-neutral-300)";
+    readonly "--popover-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--tooltip-background": "var(--nea-dark-neutral-800)";
+    readonly "--tooltip-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--primary": "148 30% 38%";
+    readonly "--primary-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--secondary": "var(--nea-dark-neutral-500)";
+    readonly "--secondary-foreground": "var(--nea-dark-neutral-100)";
+    readonly "--muted": "var(--nea-dark-neutral-500)";
+    readonly "--muted-foreground": "var(--nea-dark-neutral-200)";
+    readonly "--accent": "var(--nea-dark-neutral-500)";
+    readonly "--accent-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--destructive": "0 72% 58%";
+    readonly "--destructive-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--status-success": "148 20% 18%";
+    readonly "--status-success-foreground": "148 28% 62%";
+    readonly "--status-warning": "38 22% 18%";
+    readonly "--status-warning-foreground": "42 42% 64%";
+    readonly "--status-info": "214 22% 19%";
+    readonly "--status-info-foreground": "214 36% 66%";
+    readonly "--status-accent": "263 18% 20%";
+    readonly "--status-accent-foreground": "255 34% 68%";
+    readonly "--status-destructive": "0 20% 19%";
+    readonly "--status-destructive-foreground": "0 42% 66%";
+    readonly "--tab-list-background": "var(--table-header-background)";
+    readonly "--tab-trigger-foreground": "var(--nea-dark-neutral-200)";
+    readonly "--tab-trigger-hover-background": "var(--nea-dark-neutral-400)";
+    readonly "--tab-trigger-active-background": "var(--nea-dark-neutral-300)";
+    readonly "--tab-trigger-active-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--tab-indicator": "var(--primary)";
+    readonly "--card-gradient-from": "var(--nea-green-700)";
+    readonly "--card-gradient-to": "var(--nea-green-500)";
+    readonly "--card-gradient-border": "var(--nea-green-500)";
+    readonly "--card-gradient-foreground": "var(--nea-neutral-0)";
+    readonly "--layout-chrome-background": "var(--nea-dark-neutral-500)";
+    readonly "--layout-shell-background": "var(--layout-chrome-background)";
+    readonly "--layout-sidebar-background": "var(--layout-chrome-background)";
+    readonly "--layout-sidebar-logo-background": "hsl(var(--nea-neutral-0))";
+    readonly "--layout-sidebar-border": "var(--card-border)";
+    readonly "--layout-surface-background": "var(--nea-dark-neutral-400)";
+    readonly "--layout-workspace-header-background": "var(--nea-dark-neutral-300)";
+    readonly "--layout-surface-border": "var(--card-border)";
+    readonly "--layout-surface-shadow": "0 24px 54px -34px rgb(0 0 0 / 0.64), 0 2px 10px rgb(0 0 0 / 0.26)";
+    readonly "--overlay-shadow": "0 18px 36px -22px rgb(0 0 0 / 0.58), 0 8px 18px -14px rgb(0 0 0 / 0.34)";
+    readonly "--overlay-shadow-strong": "0 10px 42px -24px rgb(0 0 0 / 0.68), 0 4px 16px -12px rgb(0 0 0 / 0.42)";
+    readonly "--layout-right-panel-background": "var(--layout-surface-background)";
+    readonly "--layout-right-panel-border": "220 10% 32%";
+    readonly "--layout-right-panel-shadow": "-18px 0 36px -28px rgb(0 0 0 / 0.58), -2px 0 12px -8px rgb(0 0 0 / 0.46)";
+    readonly "--table-header-background": "var(--nea-dark-neutral-500)";
+    readonly "--table-row-striped-background": "var(--nea-dark-neutral-500)";
+    readonly "--table-row-warning-background": "var(--nea-dark-neutral-300)";
+    readonly "--border": "var(--card-border)";
+    readonly "--input": "var(--card-border)";
+    readonly "--ring": "148 30% 38%";
+    readonly "--component-border": "var(--card-border)";
+    readonly "--button-outline-background": "var(--nea-dark-neutral-500)";
+    readonly "--button-outline-hover-background": "var(--nea-dark-neutral-400)";
+    readonly "--button-outline-border": "var(--component-border)";
+    readonly "--tab-list-border": "var(--component-border)";
+    readonly "--table-border": "var(--component-border)";
 };
 export declare const semanticColorTokens: readonly [{
     readonly name: "Background";
     readonly token: "--background";
     readonly foregroundToken: "--foreground";
+    readonly darkValue: "var(--nea-dark-neutral-300)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Foreground";
     readonly token: "--foreground";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--nea-dark-neutral-50)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Card";
     readonly token: "--card";
     readonly foregroundToken: "--card-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-300)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Card Border";
     readonly token: "--card-border";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "220 10% 28%";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Popover";
     readonly token: "--popover";
     readonly foregroundToken: "--popover-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-300)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Primary";
     readonly token: "--primary";
     readonly foregroundToken: "--primary-foreground";
+    readonly darkValue: "148 30% 38%";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Secondary";
     readonly token: "--secondary";
     readonly foregroundToken: "--secondary-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-500)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-100)";
 }, {
     readonly name: "Muted";
     readonly token: "--muted";
     readonly foregroundToken: "--muted-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-500)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-200)";
 }, {
     readonly name: "Accent";
     readonly token: "--accent";
     readonly foregroundToken: "--accent-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-500)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Destructive";
     readonly token: "--destructive";
     readonly foregroundToken: "--destructive-foreground";
+    readonly darkValue: "0 72% 58%";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Status Success";
     readonly token: "--status-success";
     readonly foregroundToken: "--status-success-foreground";
+    readonly darkValue: "148 20% 18%";
+    readonly darkForegroundValue: "148 28% 62%";
 }, {
     readonly name: "Status Warning";
     readonly token: "--status-warning";
     readonly foregroundToken: "--status-warning-foreground";
+    readonly darkValue: "38 22% 18%";
+    readonly darkForegroundValue: "42 42% 64%";
 }, {
     readonly name: "Status Info";
     readonly token: "--status-info";
     readonly foregroundToken: "--status-info-foreground";
+    readonly darkValue: "214 22% 19%";
+    readonly darkForegroundValue: "214 36% 66%";
 }, {
     readonly name: "Status Accent";
     readonly token: "--status-accent";
     readonly foregroundToken: "--status-accent-foreground";
+    readonly darkValue: "263 18% 20%";
+    readonly darkForegroundValue: "255 34% 68%";
 }, {
     readonly name: "Status Destructive";
     readonly token: "--status-destructive";
     readonly foregroundToken: "--status-destructive-foreground";
+    readonly darkValue: "0 20% 19%";
+    readonly darkForegroundValue: "0 42% 66%";
 }, {
     readonly name: "Tab List";
     readonly token: "--tab-list-background";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--table-header-background)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Tab List Border";
     readonly token: "--tab-list-border";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--component-border)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Tab Trigger";
     readonly token: "--tab-trigger-hover-background";
     readonly foregroundToken: "--tab-trigger-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-400)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-200)";
 }, {
     readonly name: "Tab Trigger Active";
     readonly token: "--tab-trigger-active-background";
     readonly foregroundToken: "--tab-trigger-active-foreground";
+    readonly darkValue: "var(--nea-dark-neutral-300)";
+    readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
 }, {
     readonly name: "Border";
     readonly token: "--border";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--card-border)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Input";
     readonly token: "--input";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--card-border)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Ring";
     readonly token: "--ring";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "148 30% 38%";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Component Border";
     readonly token: "--component-border";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--card-border)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Button Outline";
     readonly token: "--button-outline-background";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--nea-dark-neutral-500)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Button Outline Hover";
     readonly token: "--button-outline-hover-background";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--nea-dark-neutral-400)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Button Outline Border";
     readonly token: "--button-outline-border";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--component-border)";
+    readonly darkForegroundValue?: undefined;
 }];
+export type SemanticColorToken = (typeof semanticColorTokens)[number];
 export declare const typographyTokens: readonly [{
     readonly name: "Sans Font";
     readonly token: "--font-sans";

package/dist/theme.js CHANGED Viewed

@@ -1,5 +1,105 @@
+export const neaPaletteDarkTokenMapping = {
+    "--nea-green-50": "146 100% 15%",
+    "--nea-green-100": "145 100% 21%",
+    "--nea-green-200": "144 100% 27.5%",
+    "--nea-green-300": "144 84% 33%",
+    "--nea-green-400": "144 66% 40%",
+    "--nea-green-500": "144 50% 53%",
+    "--nea-green-600": "143 44% 67%",
+    "--nea-green-700": "142 45% 80%",
+    "--nea-green-800": "141 50% 90%",
+    "--nea-green-900": "140 57% 96%",
+    "--nea-blue-50": "224 64% 33%",
+    "--nea-blue-100": "226 71% 40%",
+    "--nea-blue-200": "224 76% 48%",
+    "--nea-blue-300": "221 83% 53%",
+    "--nea-blue-400": "217 91% 60%",
+    "--nea-blue-500": "213 94% 68%",
+    "--nea-blue-600": "213 97% 78%",
+    "--nea-blue-700": "213 97% 87%",
+    "--nea-blue-800": "214 95% 93%",
+    "--nea-blue-900": "214 100% 97%",
+    "--nea-amber-50": "22 78% 26%",
+    "--nea-amber-100": "22 82% 31%",
+    "--nea-amber-200": "26 90% 37%",
+    "--nea-amber-300": "32 95% 44%",
+    "--nea-amber-400": "38 92% 50%",
+    "--nea-amber-500": "43 96% 56%",
+    "--nea-amber-600": "43 96% 66%",
+    "--nea-amber-700": "48 97% 77%",
+    "--nea-amber-800": "48 96% 89%",
+    "--nea-amber-900": "48 100% 96%",
+    "--nea-red-50": "0 63% 31%",
+    "--nea-red-100": "0 74% 35%",
+    "--nea-red-200": "0 74% 42%",
+    "--nea-red-300": "0 72% 51%",
+    "--nea-red-400": "0 84% 60%",
+    "--nea-red-500": "0 91% 71%",
+    "--nea-red-600": "0 94% 82%",
+    "--nea-red-700": "0 96% 89%",
+    "--nea-red-800": "0 93% 94%",
+    "--nea-red-900": "0 86% 97%",
+    "--nea-violet-50": "264 69% 35%",
+    "--nea-violet-100": "263 70% 42%",
+    "--nea-violet-200": "263 84% 50%",
+    "--nea-violet-300": "263 89% 60%",
+    "--nea-violet-400": "258 90% 66%",
+    "--nea-violet-500": "255 92% 76%",
+    "--nea-violet-600": "252 95% 85%",
+    "--nea-violet-700": "252 96% 90%",
+    "--nea-violet-800": "250 100% 97%",
+    "--nea-violet-900": "250 100% 98%",
+    "--nea-neutral-0": "220 22% 6.5%",
+    "--nea-neutral-50": "220 18% 8%",
+    "--nea-neutral-100": "220 16% 9.5%",
+    "--nea-neutral-200": "220 14% 11.5%",
+    "--nea-neutral-300": "220 12% 13.5%",
+    "--nea-neutral-400": "220 10% 16%",
+    "--nea-neutral-500": "215 14% 68%",
+    "--nea-neutral-600": "214 18% 90%",
+    "--nea-neutral-700": "214 18% 92%",
+    "--nea-neutral-800": "214 18% 92%",
+    "--nea-neutral-900": "214 18% 92%",
+    "--nea-dark-neutral-50": "214 18% 92%",
+    "--nea-dark-neutral-100": "214 18% 90%",
+    "--nea-dark-neutral-200": "215 14% 68%",
+    "--nea-dark-neutral-300": "220 10% 16%",
+    "--nea-dark-neutral-400": "220 12% 13.5%",
+    "--nea-dark-neutral-500": "220 14% 11.5%",
+    "--nea-dark-neutral-600": "220 16% 9.5%",
+    "--nea-dark-neutral-700": "220 18% 8%",
+    "--nea-dark-neutral-800": "220 22% 6.5%",
+};
+export const neaDarkNeutralTokenMapping = {
+    "--nea-dark-neutral-50": "214 18% 92%",
+    "--nea-dark-neutral-100": "214 18% 90%",
+    "--nea-dark-neutral-200": "215 14% 68%",
+    "--nea-dark-neutral-300": "220 10% 16%",
+    "--nea-dark-neutral-400": "220 12% 13.5%",
+    "--nea-dark-neutral-500": "220 14% 11.5%",
+    "--nea-dark-neutral-600": "220 16% 9.5%",
+    "--nea-dark-neutral-700": "220 18% 8%",
+    "--nea-dark-neutral-800": "220 22% 6.5%",
+};
+function withPaletteDarkMappings(colors) {
+    return colors.map((color) => ({
+        ...color,
+        darkValue: neaPaletteDarkTokenMapping[color.token],
+    }));
+}
+export const neaDarkNeutralPalette = withPaletteDarkMappings([
+    { name: "Dark Neutral 50", token: "--nea-dark-neutral-50" },
+    { name: "Dark Neutral 100", token: "--nea-dark-neutral-100" },
+    { name: "Dark Neutral 200", token: "--nea-dark-neutral-200" },
+    { name: "Dark Neutral 300", token: "--nea-dark-neutral-300" },
+    { name: "Dark Neutral 400", token: "--nea-dark-neutral-400" },
+    { name: "Dark Neutral 500", token: "--nea-dark-neutral-500" },
+    { name: "Dark Neutral 600", token: "--nea-dark-neutral-600" },
+    { name: "Dark Neutral 700", token: "--nea-dark-neutral-700" },
+    { name: "Dark Neutral 800", token: "--nea-dark-neutral-800" },
+]);
 export const neaPalette = {
-    green: [
+    green: withPaletteDarkMappings([
         { name: "Green 50", token: "--nea-green-50" },
         { name: "Green 100", token: "--nea-green-100" },
         { name: "Green 200", token: "--nea-green-200" },
@@ -10,8 +110,8 @@ export const neaPalette = {
         { name: "Green 700", token: "--nea-green-700" },
         { name: "Green 800", token: "--nea-green-800" },
         { name: "Green 900", token: "--nea-green-900" },
-    ],
-    blue: [
+    ]),
+    blue: withPaletteDarkMappings([
         { name: "Blue 50", token: "--nea-blue-50" },
         { name: "Blue 100", token: "--nea-blue-100" },
         { name: "Blue 200", token: "--nea-blue-200" },
@@ -22,8 +122,8 @@ export const neaPalette = {
         { name: "Blue 700", token: "--nea-blue-700" },
         { name: "Blue 800", token: "--nea-blue-800" },
         { name: "Blue 900", token: "--nea-blue-900" },
-    ],
-    amber: [
+    ]),
+    amber: withPaletteDarkMappings([
         { name: "Amber 50", token: "--nea-amber-50" },
         { name: "Amber 100", token: "--nea-amber-100" },
         { name: "Amber 200", token: "--nea-amber-200" },
@@ -34,8 +134,8 @@ export const neaPalette = {
         { name: "Amber 700", token: "--nea-amber-700" },
         { name: "Amber 800", token: "--nea-amber-800" },
         { name: "Amber 900", token: "--nea-amber-900" },
-    ],
-    red: [
+    ]),
+    red: withPaletteDarkMappings([
         { name: "Red 50", token: "--nea-red-50" },
         { name: "Red 100", token: "--nea-red-100" },
         { name: "Red 200", token: "--nea-red-200" },
@@ -46,8 +146,8 @@ export const neaPalette = {
         { name: "Red 700", token: "--nea-red-700" },
         { name: "Red 800", token: "--nea-red-800" },
         { name: "Red 900", token: "--nea-red-900" },
-    ],
-    violet: [
+    ]),
+    violet: withPaletteDarkMappings([
         { name: "Violet 50", token: "--nea-violet-50" },
         { name: "Violet 100", token: "--nea-violet-100" },
         { name: "Violet 200", token: "--nea-violet-200" },
@@ -58,8 +158,8 @@ export const neaPalette = {
         { name: "Violet 700", token: "--nea-violet-700" },
         { name: "Violet 800", token: "--nea-violet-800" },
         { name: "Violet 900", token: "--nea-violet-900" },
-    ],
-    neutral: [
+    ]),
+    neutral: withPaletteDarkMappings([
         { name: "Neutral 0", token: "--nea-neutral-0" },
         { name: "Neutral 50", token: "--nea-neutral-50" },
         { name: "Neutral 100", token: "--nea-neutral-100" },
@@ -71,70 +171,184 @@ export const neaPalette = {
         { name: "Neutral 700", token: "--nea-neutral-700" },
         { name: "Neutral 800", token: "--nea-neutral-800" },
         { name: "Neutral 900", token: "--nea-neutral-900" },
-    ],
-    darkNeutral: [
-        { name: "Dark Neutral 50", token: "--nea-dark-neutral-50" },
-        { name: "Dark Neutral 100", token: "--nea-dark-neutral-100" },
-        { name: "Dark Neutral 200", token: "--nea-dark-neutral-200" },
-        { name: "Dark Neutral 300", token: "--nea-dark-neutral-300" },
-        { name: "Dark Neutral 400", token: "--nea-dark-neutral-400" },
-        { name: "Dark Neutral 500", token: "--nea-dark-neutral-500" },
-        { name: "Dark Neutral 600", token: "--nea-dark-neutral-600" },
-        { name: "Dark Neutral 700", token: "--nea-dark-neutral-700" },
-        { name: "Dark Neutral 800", token: "--nea-dark-neutral-800" },
-    ],
+    ]),
+    darkNeutral: neaDarkNeutralPalette,
 };
+export const darkThemeTokenMapping = {
+    "--background": "var(--nea-dark-neutral-300)",
+    "--foreground": "var(--nea-dark-neutral-50)",
+    "--card": "var(--nea-dark-neutral-300)",
+    "--card-foreground": "var(--nea-dark-neutral-50)",
+    "--card-border": "220 10% 28%",
+    "--popover": "var(--nea-dark-neutral-300)",
+    "--popover-foreground": "var(--nea-dark-neutral-50)",
+    "--tooltip-background": "var(--nea-dark-neutral-800)",
+    "--tooltip-foreground": "var(--nea-dark-neutral-50)",
+    "--primary": "148 30% 38%",
+    "--primary-foreground": "var(--nea-dark-neutral-50)",
+    "--secondary": "var(--nea-dark-neutral-500)",
+    "--secondary-foreground": "var(--nea-dark-neutral-100)",
+    "--muted": "var(--nea-dark-neutral-500)",
+    "--muted-foreground": "var(--nea-dark-neutral-200)",
+    "--accent": "var(--nea-dark-neutral-500)",
+    "--accent-foreground": "var(--nea-dark-neutral-50)",
+    "--destructive": "0 72% 58%",
+    "--destructive-foreground": "var(--nea-dark-neutral-50)",
+    "--status-success": "148 20% 18%",
+    "--status-success-foreground": "148 28% 62%",
+    "--status-warning": "38 22% 18%",
+    "--status-warning-foreground": "42 42% 64%",
+    "--status-info": "214 22% 19%",
+    "--status-info-foreground": "214 36% 66%",
+    "--status-accent": "263 18% 20%",
+    "--status-accent-foreground": "255 34% 68%",
+    "--status-destructive": "0 20% 19%",
+    "--status-destructive-foreground": "0 42% 66%",
+    "--tab-list-background": "var(--table-header-background)",
+    "--tab-trigger-foreground": "var(--nea-dark-neutral-200)",
+    "--tab-trigger-hover-background": "var(--nea-dark-neutral-400)",
+    "--tab-trigger-active-background": "var(--nea-dark-neutral-300)",
+    "--tab-trigger-active-foreground": "var(--nea-dark-neutral-50)",
+    "--tab-indicator": "var(--primary)",
+    "--card-gradient-from": "var(--nea-green-700)",
+    "--card-gradient-to": "var(--nea-green-500)",
+    "--card-gradient-border": "var(--nea-green-500)",
+    "--card-gradient-foreground": "var(--nea-neutral-0)",
+    "--layout-chrome-background": "var(--nea-dark-neutral-500)",
+    "--layout-shell-background": "var(--layout-chrome-background)",
+    "--layout-sidebar-background": "var(--layout-chrome-background)",
+    "--layout-sidebar-logo-background": "hsl(var(--nea-neutral-0))",
+    "--layout-sidebar-border": "var(--card-border)",
+    "--layout-surface-background": "var(--nea-dark-neutral-400)",
+    "--layout-workspace-header-background": "var(--nea-dark-neutral-300)",
+    "--layout-surface-border": "var(--card-border)",
+    "--layout-surface-shadow": "0 24px 54px -34px rgb(0 0 0 / 0.64), 0 2px 10px rgb(0 0 0 / 0.26)",
+    "--overlay-shadow": "0 18px 36px -22px rgb(0 0 0 / 0.58), 0 8px 18px -14px rgb(0 0 0 / 0.34)",
+    "--overlay-shadow-strong": "0 10px 42px -24px rgb(0 0 0 / 0.68), 0 4px 16px -12px rgb(0 0 0 / 0.42)",
+    "--layout-right-panel-background": "var(--layout-surface-background)",
+    "--layout-right-panel-border": "220 10% 32%",
+    "--layout-right-panel-shadow": "-18px 0 36px -28px rgb(0 0 0 / 0.58), -2px 0 12px -8px rgb(0 0 0 / 0.46)",
+    "--table-header-background": "var(--nea-dark-neutral-500)",
+    "--table-row-striped-background": "var(--nea-dark-neutral-500)",
+    "--table-row-warning-background": "var(--nea-dark-neutral-300)",
+    "--border": "var(--card-border)",
+    "--input": "var(--card-border)",
+    "--ring": "148 30% 38%",
+    "--component-border": "var(--card-border)",
+    "--button-outline-background": "var(--nea-dark-neutral-500)",
+    "--button-outline-hover-background": "var(--nea-dark-neutral-400)",
+    "--button-outline-border": "var(--component-border)",
+    "--tab-list-border": "var(--component-border)",
+    "--table-border": "var(--component-border)",
+};
+function withDarkThemeMapping(token) {
+    return {
+        ...token,
+        darkValue: darkThemeTokenMapping[token.token],
+        ...(token.foregroundToken
+            ? { darkForegroundValue: darkThemeTokenMapping[token.foregroundToken] }
+            : {}),
+    };
+}
 export const semanticColorTokens = [
-    { name: "Background", token: "--background", foregroundToken: "--foreground" },
-    { name: "Foreground", token: "--foreground" },
-    { name: "Card", token: "--card", foregroundToken: "--card-foreground" },
-    { name: "Card Border", token: "--card-border" },
-    { name: "Popover", token: "--popover", foregroundToken: "--popover-foreground" },
-    { name: "Primary", token: "--primary", foregroundToken: "--primary-foreground" },
-    { name: "Secondary", token: "--secondary", foregroundToken: "--secondary-foreground" },
-    { name: "Muted", token: "--muted", foregroundToken: "--muted-foreground" },
-    { name: "Accent", token: "--accent", foregroundToken: "--accent-foreground" },
-    { name: "Destructive", token: "--destructive", foregroundToken: "--destructive-foreground" },
-    {
+    withDarkThemeMapping({
+        name: "Background",
+        token: "--background",
+        foregroundToken: "--foreground",
+    }),
+    withDarkThemeMapping({ name: "Foreground", token: "--foreground" }),
+    withDarkThemeMapping({
+        name: "Card",
+        token: "--card",
+        foregroundToken: "--card-foreground",
+    }),
+    withDarkThemeMapping({ name: "Card Border", token: "--card-border" }),
+    withDarkThemeMapping({
+        name: "Popover",
+        token: "--popover",
+        foregroundToken: "--popover-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Primary",
+        token: "--primary",
+        foregroundToken: "--primary-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Secondary",
+        token: "--secondary",
+        foregroundToken: "--secondary-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Muted",
+        token: "--muted",
+        foregroundToken: "--muted-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Accent",
+        token: "--accent",
+        foregroundToken: "--accent-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Destructive",
+        token: "--destructive",
+        foregroundToken: "--destructive-foreground",
+    }),
+    withDarkThemeMapping({
         name: "Status Success",
         token: "--status-success",
         foregroundToken: "--status-success-foreground",
-    },
-    {
+    }),
+    withDarkThemeMapping({
         name: "Status Warning",
         token: "--status-warning",
         foregroundToken: "--status-warning-foreground",
-    },
-    {
+    }),
+    withDarkThemeMapping({
         name: "Status Info",
         token: "--status-info",
         foregroundToken: "--status-info-foreground",
-    },
-    {
+    }),
+    withDarkThemeMapping({
         name: "Status Accent",
         token: "--status-accent",
         foregroundToken: "--status-accent-foreground",
-    },
-    {
+    }),
+    withDarkThemeMapping({
         name: "Status Destructive",
         token: "--status-destructive",
         foregroundToken: "--status-destructive-foreground",
-    },
-    { name: "Tab List", token: "--tab-list-background" },
-    { name: "Tab List Border", token: "--tab-list-border" },
-    { name: "Tab Trigger", token: "--tab-trigger-hover-background", foregroundToken: "--tab-trigger-foreground" },
-    {
+    }),
+    withDarkThemeMapping({ name: "Tab List", token: "--tab-list-background" }),
+    withDarkThemeMapping({ name: "Tab List Border", token: "--tab-list-border" }),
+    withDarkThemeMapping({
+        name: "Tab Trigger",
+        token: "--tab-trigger-hover-background",
+        foregroundToken: "--tab-trigger-foreground",
+    }),
+    withDarkThemeMapping({
         name: "Tab Trigger Active",
         token: "--tab-trigger-active-background",
         foregroundToken: "--tab-trigger-active-foreground",
-    },
-    { name: "Border", token: "--border" },
-    { name: "Input", token: "--input" },
-    { name: "Ring", token: "--ring" },
-    { name: "Component Border", token: "--component-border" },
-    { name: "Button Outline", token: "--button-outline-background" },
-    { name: "Button Outline Hover", token: "--button-outline-hover-background" },
-    { name: "Button Outline Border", token: "--button-outline-border" },
+    }),
+    withDarkThemeMapping({ name: "Border", token: "--border" }),
+    withDarkThemeMapping({ name: "Input", token: "--input" }),
+    withDarkThemeMapping({ name: "Ring", token: "--ring" }),
+    withDarkThemeMapping({
+        name: "Component Border",
+        token: "--component-border",
+    }),
+    withDarkThemeMapping({
+        name: "Button Outline",
+        token: "--button-outline-background",
+    }),
+    withDarkThemeMapping({
+        name: "Button Outline Hover",
+        token: "--button-outline-hover-background",
+    }),
+    withDarkThemeMapping({
+        name: "Button Outline Border",
+        token: "--button-outline-border",
+    }),
 ];
 export const typographyTokens = [
     { name: "Sans Font", token: "--font-sans" },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",