@ttt-productions/theme-core 0.1.1

package/README.md

@@ -0,0 +1,7 @@
+# @ttt-productions/theme-core
+
+Shared theme provider + CSS token contract.
+
+## Install
+```bash
+npm install @ttt-productions/theme-core

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./theme-provider";
+export * from "./required-tokens";
+//# 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,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./theme-provider";
+export * from "./required-tokens";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/required-tokens.d.ts

@@ -0,0 +1,3 @@
+export declare const REQUIRED_TOKENS: readonly ["--brand-primary", "--brand-secondary", "--brand-accent", "--status-success", "--status-warning", "--status-error", "--neutral-white", "--neutral-black"];
+export type RequiredToken = (typeof REQUIRED_TOKENS)[number];
+//# sourceMappingURL=required-tokens.d.ts.map

package/dist/required-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"required-tokens.d.ts","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qKAWhB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/required-tokens.js

@@ -0,0 +1,11 @@
+export const REQUIRED_TOKENS = [
+    "--brand-primary",
+    "--brand-secondary",
+    "--brand-accent",
+    "--status-success",
+    "--status-warning",
+    "--status-error",
+    "--neutral-white",
+    "--neutral-black"
+];
+//# sourceMappingURL=required-tokens.js.map

package/dist/required-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"required-tokens.js","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,iBAAiB;IACjB,mBAAmB;IACnB,gBAAgB;IAEhB,kBAAkB;IAClB,kBAAkB;IAClB,gBAAgB;IAEhB,iBAAiB;IACjB,iBAAiB;CACT,CAAC"}

package/dist/styles/base.css

@@ -0,0 +1,11 @@
+@layer base {
+    html, body {
+      background-color: hsl(var(--background));
+      color: hsl(var(--foreground));
+    }
+  
+    * {
+      border-color: hsl(var(--border));
+    }
+  }
+  

package/dist/styles/contract.css

@@ -0,0 +1,27 @@
+@layer base {
+    :root {
+      /* Loud fallbacks: if you see this color, app did not define required brand contract */
+      --brand-primary: 999 100% 50%;
+      --brand-secondary: 999 100% 50%;
+      --brand-accent: 999 100% 50%;
+  
+      --status-success: 999 100% 50%;
+      --status-warning: 999 100% 50%;
+      --status-error: 999 100% 50%;
+  
+      --neutral-white: 0 0% 100%;
+      --neutral-black: 0 0% 0%;
+    }
+  
+    /* High contrast must be pure B/W: override brand tokens too (prevents bleed) */
+    .high-contrast {
+      --brand-primary: 0 0% 0%;
+      --brand-secondary: 0 0% 0%;
+      --brand-accent: 0 0% 100%;
+  
+      --status-success: 0 0% 0%;
+      --status-warning: 0 0% 0%;
+      --status-error: 0 0% 0%;
+    }
+  }
+  

package/dist/styles/index.css

@@ -0,0 +1,3 @@
+@import "./contract.css";
+@import "./tokens.css";
+@import "./base.css";

package/dist/styles/tokens.css

@@ -0,0 +1,82 @@
+@layer base {
+    :root {
+      /* Semantic tokens (default = light) */
+      --background: var(--neutral-white);
+      --foreground: var(--neutral-black);
+  
+      --card: var(--neutral-white);
+      --card-foreground: var(--neutral-black);
+  
+      --popover: var(--neutral-white);
+      --popover-foreground: var(--neutral-black);
+  
+      --muted: 0 0% 95%;
+      --muted-foreground: var(--neutral-black);
+  
+      --accent: var(--brand-accent);
+      --accent-foreground: var(--neutral-black);
+  
+      --primary: var(--brand-primary);
+      --primary-foreground: var(--neutral-white);
+  
+      --secondary: var(--brand-secondary);
+      --secondary-foreground: var(--neutral-white);
+  
+      --destructive: var(--status-error);
+      --destructive-foreground: var(--neutral-white);
+  
+      --border: var(--brand-primary);
+      --ring: var(--brand-primary);
+  
+      --radius: 1rem;
+    }
+  
+    .dark {
+      /* Keep semantic token mapping; apps can override brand tokens per-mode if they want */
+      --background: 240 6% 10%;
+      --foreground: 0 0% 100%;
+  
+      --card: 240 6% 12%;
+      --card-foreground: 0 0% 100%;
+  
+      --popover: 240 6% 12%;
+      --popover-foreground: 0 0% 100%;
+  
+      --muted: 240 4% 20%;
+      --muted-foreground: 0 0% 100%;
+  
+      --border: 0 0% 100%;
+      --ring: 0 0% 100%;
+    }
+  
+    .high-contrast {
+      /* You already had this approach in master-app and it’s correct: pure B/W semantic tokens */
+      --background: 0 0% 0%;
+      --foreground: 0 0% 100%;
+  
+      --card: 0 0% 0%;
+      --card-foreground: 0 0% 100%;
+  
+      --popover: 0 0% 0%;
+      --popover-foreground: 0 0% 100%;
+  
+      --muted: 0 0% 0%;
+      --muted-foreground: 0 0% 100%;
+  
+      --accent: 0 0% 0%;
+      --accent-foreground: 0 0% 100%;
+  
+      --primary: 0 0% 100%;
+      --primary-foreground: 0 0% 0%;
+  
+      --secondary: 0 0% 100%;
+      --secondary-foreground: 0 0% 0%;
+  
+      --destructive: 0 0% 100%;
+      --destructive-foreground: 0 0% 0%;
+  
+      --border: 0 0% 100%;
+      --ring: 0 0% 100%;
+    }
+  }
+  

package/dist/theme-provider.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAexE"}

package/dist/theme-provider.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { REQUIRED_TOKENS } from "./required-tokens";
+function warnMissingTokens() {
+    if (typeof window === "undefined")
+        return;
+    const root = document.documentElement;
+    const styles = getComputedStyle(root);
+    const missing = REQUIRED_TOKENS.filter((t) => styles.getPropertyValue(t).trim() === "");
+    const loud = REQUIRED_TOKENS.filter((t) => styles.getPropertyValue(t).includes("999 100% 50%"));
+    if (missing.length || loud.length) {
+        // eslint-disable-next-line no-console
+        console.warn(`[theme-core] Missing/invalid required theme tokens.\n` +
+            (missing.length ? `Missing: ${missing.join(", ")}\n` : "") +
+            (loud.length ? `Still using loud fallbacks: ${loud.join(", ")}\n` : "") +
+            `Define these in the consuming app (brand contract).`);
+    }
+}
+export function ThemeProvider({ children }) {
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== "production")
+            warnMissingTokens();
+    }, []);
+    return (_jsx(NextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, themes: ["light", "dark", "high-contrast"], children: children }));
+}
+//# sourceMappingURL=theme-provider.js.map

package/dist/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,SAAS,iBAAiB;IACxB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;IACtC,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IACxF,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC;IAEhG,IAAI,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QAClC,sCAAsC;QACtC,OAAO,CAAC,IAAI,CACV,uDAAuD;YACrD,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1D,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,+BAA+B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACvE,qDAAqD,CACxD,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAiC;IACvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;YAAE,iBAAiB,EAAE,CAAC;IACjE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAC,OAAO,EACjB,YAAY,EAAC,QAAQ,EACrB,YAAY,QACZ,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,CAAC,YAEzC,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@ttt-productions/theme-core",
+    "version": "0.1.1",
+    "description": "Theme provider + CSS token contract for TTT Productions apps",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./styles.css": "./dist/styles/index.css"
+    },
+    "scripts": {
+        "build": "tsc && rm -rf dist/styles && mkdir -p dist/styles && cp -R src/styles/* dist/styles/",
+        "clean": "rm -rf dist *.tsbuildinfo",
+        "typecheck": "tsc --noEmit",
+        "prepublishOnly": "npm run clean && npm run build"
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "dependencies": {
+        "next-themes": "^0.4.6"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "typescript": "^5.8.3"
+    },
+    "author": "DJ (TTT Productions)",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ttt-productions/ttt-packages.git",
+        "directory": "packages/theme-core"
+    }
+}