@tallyui/theme 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/index.js

@@ -0,0 +1,9 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@tallyui/theme",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Shared design tokens and utilities for Tally UI",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./src/index.ts"
+    },
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.1"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn';
+export type { ClassValue } from 'clsx';

package/src/tokens.css

@@ -0,0 +1,55 @@
+@theme {
+  /* Background hierarchy */
+  --color-bg: #f8f9fa;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f3f4f6;
+
+  /* Text hierarchy */
+  --color-foreground: #111827;
+  --color-muted: #6b7280;
+  --color-bright: #f9fafb;
+
+  /* Border */
+  --color-border: #e5e7eb;
+
+  /* Brand / Primary */
+  --color-primary: #6366f1;
+  --color-primary-foreground: #ffffff;
+
+  /* Status */
+  --color-success: #059669;
+  --color-danger: #dc2626;
+  --color-warning: #d97706;
+  --color-info: #3b82f6;
+
+  /* Commerce */
+  --color-price: #059669;
+  --color-sale: #dc2626;
+}
+
+@layer theme {
+  :root {
+    @variant dark {
+      --color-bg: #0d1117;
+      --color-surface: #161b22;
+      --color-surface-alt: #1c2128;
+
+      --color-foreground: #c9d1d9;
+      --color-muted: #8b949e;
+      --color-bright: #f0f6fc;
+
+      --color-border: #30363d;
+
+      --color-primary: #818cf8;
+      --color-primary-foreground: #1e1b4b;
+
+      --color-success: #3fb950;
+      --color-danger: #f85149;
+      --color-warning: #d29922;
+      --color-info: #58a6ff;
+
+      --color-price: #3fb950;
+      --color-sale: #f85149;
+    }
+  }
+}