@augmenting-integrations/themes 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Augmenting Integrations LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import type { ThemeName } from "@augmenting-integrations/brand";
+export type ThemeMeta = {
+    id: ThemeName;
+    label: string;
+    description: string;
+    swatch: {
+        primary: string;
+        primaryDark: string;
+    };
+};
+/**
+ * Base themes shipped with the platform. Each tenant app extends this list
+ * with its own brand themes via the merged-registry pattern:
+ *
+ *   import { BASE_THEMES } from "@augmenting-integrations/themes";
+ *   import { acmeTheme } from "./styles/themes/acmeTheme";
+ *   export const THEMES = [acmeTheme, ...BASE_THEMES];
+ *
+ * The CSS files for the base themes are exposed via the `./css/<id>.css`
+ * subpath export — apps `@import` only the ones they want at globals.css.
+ */
+export declare const BASE_THEMES: ThemeMeta[];
+export declare const THEME_COOKIE_KEY = "x-theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,SAAS,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAqClC,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,51 @@
+/**
+ * Base themes shipped with the platform. Each tenant app extends this list
+ * with its own brand themes via the merged-registry pattern:
+ *
+ *   import { BASE_THEMES } from "@augmenting-integrations/themes";
+ *   import { acmeTheme } from "./styles/themes/acmeTheme";
+ *   export const THEMES = [acmeTheme, ...BASE_THEMES];
+ *
+ * The CSS files for the base themes are exposed via the `./css/<id>.css`
+ * subpath export — apps `@import` only the ones they want at globals.css.
+ */
+export const BASE_THEMES = [
+    {
+        id: "neutral",
+        label: "Neutral",
+        description: "Cool grayscale, professional, restrained — shadcn defaults.",
+        swatch: { primary: "#18181b", primaryDark: "#e5e5e5" },
+    },
+    {
+        id: "woxom",
+        label: "Woxom",
+        description: "Navy + Tokyo Night neon dashboard. Reference brand-faithful theme.",
+        swatch: { primary: "#1C4587", primaryDark: "#7aa2f7" },
+    },
+    {
+        id: "teal-pro",
+        label: "Teal Pro",
+        description: "Corporate teal — clean and slightly cool.",
+        swatch: { primary: "#0f766e", primaryDark: "#14b8a6" },
+    },
+    {
+        id: "warm-sun",
+        label: "Warm Sun",
+        description: "Energetic warm orange — friendly and approachable.",
+        swatch: { primary: "#c2410c", primaryDark: "#fb923c" },
+    },
+    {
+        id: "tokyo",
+        label: "Tokyo",
+        description: "Tokyo Night dark with neon accents; muted indigo when light.",
+        swatch: { primary: "#3d59a1", primaryDark: "#7aa2f7" },
+    },
+    {
+        id: "vapor",
+        label: "Vapor",
+        description: "Pastel lavender light with vibrant accents; deep purple when dark.",
+        swatch: { primary: "#6d4cff", primaryDark: "#a78bfa" },
+    },
+];
+export const THEME_COOKIE_KEY = "x-theme";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,WAAW,GAAgB;IACtC;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,6DAA6D;QAC1E,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;IACD;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,oEAAoE;QACjF,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,2CAA2C;QACxD,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,oDAAoD;QACjE,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;IACD;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,8DAA8D;QAC3E,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;IACD;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,oEAAoE;QACjF,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE;KACvD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,45 @@
+// src/index.ts
+var BASE_THEMES = [
+  {
+    id: "neutral",
+    label: "Neutral",
+    description: "Cool grayscale, professional, restrained \u2014 shadcn defaults.",
+    swatch: { primary: "#18181b", primaryDark: "#e5e5e5" }
+  },
+  {
+    id: "woxom",
+    label: "Woxom",
+    description: "Navy + Tokyo Night neon dashboard. Reference brand-faithful theme.",
+    swatch: { primary: "#1C4587", primaryDark: "#7aa2f7" }
+  },
+  {
+    id: "teal-pro",
+    label: "Teal Pro",
+    description: "Corporate teal \u2014 clean and slightly cool.",
+    swatch: { primary: "#0f766e", primaryDark: "#14b8a6" }
+  },
+  {
+    id: "warm-sun",
+    label: "Warm Sun",
+    description: "Energetic warm orange \u2014 friendly and approachable.",
+    swatch: { primary: "#c2410c", primaryDark: "#fb923c" }
+  },
+  {
+    id: "tokyo",
+    label: "Tokyo",
+    description: "Tokyo Night dark with neon accents; muted indigo when light.",
+    swatch: { primary: "#3d59a1", primaryDark: "#7aa2f7" }
+  },
+  {
+    id: "vapor",
+    label: "Vapor",
+    description: "Pastel lavender light with vibrant accents; deep purple when dark.",
+    swatch: { primary: "#6d4cff", primaryDark: "#a78bfa" }
+  }
+];
+var THEME_COOKIE_KEY = "x-theme";
+export {
+  BASE_THEMES,
+  THEME_COOKIE_KEY
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { ThemeName } from \"@augmenting-integrations/brand\";\n\nexport type ThemeMeta = {\n  id: ThemeName;\n  label: string;\n  description: string;\n  swatch: { primary: string; primaryDark: string };\n};\n\n/**\n * Base themes shipped with the platform. Each tenant app extends this list\n * with its own brand themes via the merged-registry pattern:\n *\n *   import { BASE_THEMES } from \"@augmenting-integrations/themes\";\n *   import { acmeTheme } from \"./styles/themes/acmeTheme\";\n *   export const THEMES = [acmeTheme, ...BASE_THEMES];\n *\n * The CSS files for the base themes are exposed via the `./css/<id>.css`\n * subpath export — apps `@import` only the ones they want at globals.css.\n */\nexport const BASE_THEMES: ThemeMeta[] = [\n  {\n    id: \"neutral\",\n    label: \"Neutral\",\n    description: \"Cool grayscale, professional, restrained — shadcn defaults.\",\n    swatch: { primary: \"#18181b\", primaryDark: \"#e5e5e5\" },\n  },\n  {\n    id: \"woxom\",\n    label: \"Woxom\",\n    description: \"Navy + Tokyo Night neon dashboard. Reference brand-faithful theme.\",\n    swatch: { primary: \"#1C4587\", primaryDark: \"#7aa2f7\" },\n  },\n  {\n    id: \"teal-pro\",\n    label: \"Teal Pro\",\n    description: \"Corporate teal — clean and slightly cool.\",\n    swatch: { primary: \"#0f766e\", primaryDark: \"#14b8a6\" },\n  },\n  {\n    id: \"warm-sun\",\n    label: \"Warm Sun\",\n    description: \"Energetic warm orange — friendly and approachable.\",\n    swatch: { primary: \"#c2410c\", primaryDark: \"#fb923c\" },\n  },\n  {\n    id: \"tokyo\",\n    label: \"Tokyo\",\n    description: \"Tokyo Night dark with neon accents; muted indigo when light.\",\n    swatch: { primary: \"#3d59a1\", primaryDark: \"#7aa2f7\" },\n  },\n  {\n    id: \"vapor\",\n    label: \"Vapor\",\n    description: \"Pastel lavender light with vibrant accents; deep purple when dark.\",\n    swatch: { primary: \"#6d4cff\", primaryDark: \"#a78bfa\" },\n  },\n];\n\nexport const THEME_COOKIE_KEY = \"x-theme\";\n"],"mappings":";AAoBO,IAAM,cAA2B;AAAA,EACtC;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ,EAAE,SAAS,WAAW,aAAa,UAAU;AAAA,EACvD;AACF;AAEO,IAAM,mBAAmB;","names":[]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@augmenting-integrations/themes",
+  "version": "0.1.0",
+  "description": "Theme CSS files and registry. Each theme defines tokens for both data-theme attribute and .dark variant.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/css/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./css/*": "./src/css/*"
+  },
+  "files": [
+    "dist",
+    "src/css",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@augmenting-integrations/brand": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.5",
+    "@augmenting-integrations/brand": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "test": "vitest run --passWithNoTests"
+  }
+}

package/src/css/teal-pro.css

@@ -0,0 +1,73 @@
+/* ===================================================================== */
+/*  TEAL PRO theme                                                       */
+/*  Corporate teal — clean, professional, slightly cool.                 */
+/* ===================================================================== */
+
+[data-theme="teal-pro"] {
+  --background: #ffffff;
+  --foreground: #042f2e;
+  --card: #f0fdfa;
+  --card-foreground: #042f2e;
+  --popover: #ffffff;
+  --popover-foreground: #042f2e;
+  --primary: #0f766e;
+  --primary-foreground: #ffffff;
+  --secondary: #ccfbf1;
+  --secondary-foreground: #134e4a;
+  --muted: #f0fdfa;
+  --muted-foreground: #475569;
+  --accent: #5eead4;
+  --accent-foreground: #042f2e;
+  --destructive: #b91c1c;
+  --border: #d1d5db;
+  --input: #d1d5db;
+  --ring: #0f766e;
+  --chart-1: #0f766e;
+  --chart-2: #14b8a6;
+  --chart-3: #5eead4;
+  --chart-4: #f59e0b;
+  --chart-5: #b91c1c;
+  --radius: 0.5rem;
+  --sidebar: #f0fdfa;
+  --sidebar-foreground: #042f2e;
+  --sidebar-primary: #0f766e;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ccfbf1;
+  --sidebar-accent-foreground: #134e4a;
+  --sidebar-border: #d1d5db;
+  --sidebar-ring: #0f766e;
+}
+
+[data-theme="teal-pro"].dark {
+  --background: #042f2e;
+  --foreground: #ccfbf1;
+  --card: #134e4a;
+  --card-foreground: #ccfbf1;
+  --popover: #134e4a;
+  --popover-foreground: #ccfbf1;
+  --primary: #14b8a6;
+  --primary-foreground: #042f2e;
+  --secondary: #115e59;
+  --secondary-foreground: #ccfbf1;
+  --muted: #115e59;
+  --muted-foreground: #99f6e4;
+  --accent: #5eead4;
+  --accent-foreground: #042f2e;
+  --destructive: #f87171;
+  --border: #115e59;
+  --input: #115e59;
+  --ring: #14b8a6;
+  --chart-1: #14b8a6;
+  --chart-2: #5eead4;
+  --chart-3: #99f6e4;
+  --chart-4: #f59e0b;
+  --chart-5: #f87171;
+  --sidebar: #022c2a;
+  --sidebar-foreground: #ccfbf1;
+  --sidebar-primary: #14b8a6;
+  --sidebar-primary-foreground: #042f2e;
+  --sidebar-accent: #115e59;
+  --sidebar-accent-foreground: #5eead4;
+  --sidebar-border: #115e59;
+  --sidebar-ring: #14b8a6;
+}

package/src/css/tokyo.css

@@ -0,0 +1,74 @@
+/* ===================================================================== */
+/*  TOKYO theme                                                          */
+/*  Identity is the dark variant: Tokyo Night with neon accents.         */
+/*  Light variant: muted navy/indigo desk-mode complement.               */
+/* ===================================================================== */
+
+[data-theme="tokyo"] {
+  --background: #fafaff;
+  --foreground: #1a1b26;
+  --card: #ffffff;
+  --card-foreground: #1a1b26;
+  --popover: #ffffff;
+  --popover-foreground: #1a1b26;
+  --primary: #3d59a1;
+  --primary-foreground: #ffffff;
+  --secondary: #dde4f5;
+  --secondary-foreground: #3d59a1;
+  --muted: #eef0f8;
+  --muted-foreground: #565f89;
+  --accent: #c8c2f0;
+  --accent-foreground: #5a4a78;
+  --destructive: #c44a5e;
+  --border: #d6dae8;
+  --input: #d6dae8;
+  --ring: #3d59a1;
+  --chart-1: #3d59a1;
+  --chart-2: #5a4a78;
+  --chart-3: #587539;
+  --chart-4: #b45a25;
+  --chart-5: #c44a5e;
+  --radius: 0.5rem;
+  --sidebar: #f3f4fb;
+  --sidebar-foreground: #1a1b26;
+  --sidebar-primary: #3d59a1;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #dde4f5;
+  --sidebar-accent-foreground: #3d59a1;
+  --sidebar-border: #d6dae8;
+  --sidebar-ring: #3d59a1;
+}
+
+[data-theme="tokyo"].dark {
+  --background: #1a1b26;
+  --foreground: #c0caf5;
+  --card: #1f2335;
+  --card-foreground: #c0caf5;
+  --popover: #24283b;
+  --popover-foreground: #c0caf5;
+  --primary: #7aa2f7;
+  --primary-foreground: #1a1b26;
+  --secondary: #292e42;
+  --secondary-foreground: #c0caf5;
+  --muted: #292e42;
+  --muted-foreground: #a9b1d6;
+  --accent: #bb9af7;
+  --accent-foreground: #1a1b26;
+  --destructive: #f7768e;
+  --border: #3b4261;
+  --input: #292e42;
+  --ring: #7aa2f7;
+  --chart-1: #7aa2f7; /* blue */
+  --chart-2: #bb9af7; /* magenta */
+  --chart-3: #9ece6a; /* green */
+  --chart-4: #f7768e; /* red */
+  --chart-5: #ff9e64; /* orange */
+  --sidebar: #16161e;
+  --sidebar-foreground: #c0caf5;
+  --sidebar-primary: #7aa2f7;
+  --sidebar-primary-foreground: #1a1b26;
+  --sidebar-accent: #292e42;
+  --sidebar-accent-foreground: #7dcfff;
+  --sidebar-border: #3b4261;
+  --sidebar-ring: #7aa2f7;
+}

package/src/css/vapor.css

@@ -0,0 +1,74 @@
+/* ===================================================================== */
+/*  VAPOR theme                                                          */
+/*  Identity is the light variant: pastel lavender with vibrant accents. */
+/*  Dark variant: deep purple complement keeping saturated accents.      */
+/* ===================================================================== */
+
+[data-theme="vapor"] {
+  --background: #f3effa;
+  --foreground: #1f1d2c;
+  --card: #fdfcff;
+  --card-foreground: #1f1d2c;
+  --popover: #fdfcff;
+  --popover-foreground: #1f1d2c;
+  --primary: #6d4cff;
+  --primary-foreground: #ffffff;
+  --secondary: #e3d9ff;
+  --secondary-foreground: #4a31c9;
+  --muted: #ebe3f7;
+  --muted-foreground: #5b537a;
+  --accent: #ffd8e9;
+  --accent-foreground: #b41858;
+  --destructive: #d92e6a;
+  --border: #d8cfeb;
+  --input: #d8cfeb;
+  --ring: #6d4cff;
+  --chart-1: #6d4cff; /* primary purple */
+  --chart-2: #ff4d8d; /* hot pink */
+  --chart-3: #00b894; /* teal/green */
+  --chart-4: #00a8e8; /* sky */
+  --chart-5: #f59e0b; /* amber */
+  --radius: 0.5rem;
+  --sidebar: #ece5f7;
+  --sidebar-foreground: #1f1d2c;
+  --sidebar-primary: #6d4cff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e3d9ff;
+  --sidebar-accent-foreground: #4a31c9;
+  --sidebar-border: #d8cfeb;
+  --sidebar-ring: #6d4cff;
+}
+
+[data-theme="vapor"].dark {
+  --background: #1a1426;
+  --foreground: #ede9f7;
+  --card: #241a35;
+  --card-foreground: #ede9f7;
+  --popover: #2b2042;
+  --popover-foreground: #ede9f7;
+  --primary: #a78bfa;
+  --primary-foreground: #1a1426;
+  --secondary: #3a2d5a;
+  --secondary-foreground: #ede9f7;
+  --muted: #2e2347;
+  --muted-foreground: #b9b0d4;
+  --accent: #f472b6;
+  --accent-foreground: #1a1426;
+  --destructive: #fb7185;
+  --border: #3f3162;
+  --input: #2e2347;
+  --ring: #a78bfa;
+  --chart-1: #a78bfa; /* lavender */
+  --chart-2: #f472b6; /* pink */
+  --chart-3: #34d399; /* mint */
+  --chart-4: #38bdf8; /* sky */
+  --chart-5: #fbbf24; /* amber */
+  --sidebar: #15101e;
+  --sidebar-foreground: #ede9f7;
+  --sidebar-primary: #a78bfa;
+  --sidebar-primary-foreground: #1a1426;
+  --sidebar-accent: #3a2d5a;
+  --sidebar-accent-foreground: #f472b6;
+  --sidebar-border: #3f3162;
+  --sidebar-ring: #a78bfa;
+}

package/src/css/warm-sun.css

@@ -0,0 +1,73 @@
+/* ===================================================================== */
+/*  WARM SUN theme                                                       */
+/*  Energetic warm orange — friendly, approachable, lively.              */
+/* ===================================================================== */
+
+[data-theme="warm-sun"] {
+  --background: #fffbf5;
+  --foreground: #1c1917;
+  --card: #fff7ed;
+  --card-foreground: #1c1917;
+  --popover: #ffffff;
+  --popover-foreground: #1c1917;
+  --primary: #c2410c;
+  --primary-foreground: #ffffff;
+  --secondary: #fed7aa;
+  --secondary-foreground: #7c2d12;
+  --muted: #fff7ed;
+  --muted-foreground: #57534e;
+  --accent: #fdba74;
+  --accent-foreground: #7c2d12;
+  --destructive: #b91c1c;
+  --border: #e7e5e4;
+  --input: #e7e5e4;
+  --ring: #c2410c;
+  --chart-1: #c2410c;
+  --chart-2: #fb923c;
+  --chart-3: #fdba74;
+  --chart-4: #0f766e;
+  --chart-5: #b91c1c;
+  --radius: 0.625rem;
+  --sidebar: #fff7ed;
+  --sidebar-foreground: #1c1917;
+  --sidebar-primary: #c2410c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #fed7aa;
+  --sidebar-accent-foreground: #7c2d12;
+  --sidebar-border: #e7e5e4;
+  --sidebar-ring: #c2410c;
+}
+
+[data-theme="warm-sun"].dark {
+  --background: #1c1917;
+  --foreground: #fef3c7;
+  --card: #292524;
+  --card-foreground: #fef3c7;
+  --popover: #292524;
+  --popover-foreground: #fef3c7;
+  --primary: #fb923c;
+  --primary-foreground: #1c1917;
+  --secondary: #44403c;
+  --secondary-foreground: #fef3c7;
+  --muted: #44403c;
+  --muted-foreground: #d6d3d1;
+  --accent: #fdba74;
+  --accent-foreground: #1c1917;
+  --destructive: #f87171;
+  --border: #44403c;
+  --input: #44403c;
+  --ring: #fb923c;
+  --chart-1: #fb923c;
+  --chart-2: #fdba74;
+  --chart-3: #fed7aa;
+  --chart-4: #5eead4;
+  --chart-5: #f87171;
+  --sidebar: #1c1917;
+  --sidebar-foreground: #fef3c7;
+  --sidebar-primary: #fb923c;
+  --sidebar-primary-foreground: #1c1917;
+  --sidebar-accent: #44403c;
+  --sidebar-accent-foreground: #fdba74;
+  --sidebar-border: #44403c;
+  --sidebar-ring: #fb923c;
+}

package/src/css/woxom.css

@@ -0,0 +1,79 @@
+/* ===================================================================== */
+/*  WOXOM theme                                                          */
+/*  Light variant: navy #1C4587 + soft indigo surface, professional.     */
+/*  Dark variant: full Tokyo Night with neon accents.                    */
+/* ===================================================================== */
+
+[data-theme="woxom"] {
+  --background: #ffffff;
+  --foreground: #1c1c1c;
+  --card: #f5f5f5;
+  --card-foreground: #1c1c1c;
+  --popover: #ffffff;
+  --popover-foreground: #1c1c1c;
+  --primary: #1c4587;
+  --primary-foreground: #ffffff;
+  --secondary: #c9daf8;
+  --secondary-foreground: #1c4587;
+  --muted: #e8eef7;
+  --muted-foreground: #565f89;
+  --accent: #c9daf8;
+  --accent-foreground: #1c4587;
+  --destructive: #b00020;
+  --border: #e0e0e0;
+  --input: #e0e0e0;
+  --ring: #1c4587;
+  /* Chart colors — distinct, professional */
+  --chart-1: #1c4587;
+  --chart-2: #5c82c5;
+  --chart-3: #4caf50;
+  --chart-4: #fb8c00;
+  --chart-5: #b00020;
+  --radius: 0.5rem;
+  /* Sidebar — slightly tinted off-white */
+  --sidebar: #f5f5f5;
+  --sidebar-foreground: #1c1c1c;
+  --sidebar-primary: #1c4587;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #c9daf8;
+  --sidebar-accent-foreground: #1c4587;
+  --sidebar-border: #e0e0e0;
+  --sidebar-ring: #1c4587;
+}
+
+[data-theme="woxom"].dark {
+  /* Tokyo Night palette */
+  --background: #1a1b26;
+  --foreground: #c0caf5;
+  --card: #1f2335;
+  --card-foreground: #c0caf5;
+  --popover: #1f2335;
+  --popover-foreground: #c0caf5;
+  --primary: #7aa2f7;
+  --primary-foreground: #1a1b26;
+  --secondary: #292e42;
+  --secondary-foreground: #c0caf5;
+  --muted: #292e42;
+  --muted-foreground: #a9b1d6;
+  --accent: #bb9af7;
+  --accent-foreground: #1a1b26;
+  --destructive: #f7768e;
+  --border: #3b4261;
+  --input: #292e42;
+  --ring: #7aa2f7;
+  /* Chart colors — full Tokyo Night neon spectrum */
+  --chart-1: #7aa2f7; /* blue */
+  --chart-2: #bb9af7; /* magenta */
+  --chart-3: #9ece6a; /* green */
+  --chart-4: #ff9e64; /* orange */
+  --chart-5: #f7768e; /* red */
+  /* Sidebar */
+  --sidebar: #16161e;
+  --sidebar-foreground: #c0caf5;
+  --sidebar-primary: #7aa2f7;
+  --sidebar-primary-foreground: #1a1b26;
+  --sidebar-accent: #292e42;
+  --sidebar-accent-foreground: #7dcfff;
+  --sidebar-border: #3b4261;
+  --sidebar-ring: #7aa2f7;
+}