feat(themes): Add shadcn.css export

packages/themes/package.json

@@ -24,16 +24,24 @@
   },
   "license": "MIT",
   "author": "Clerk",
-  "main": "dist/themes/src/index.js",
-  "source": "src/index.js",
-  "typings": "dist/themes/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./shadcn.css": "./dist/themes/shadcn.css"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsup",
     "clean": "rimraf ./dist",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "dev": "tsup --watch",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint": "eslint src",
@@ -43,7 +51,9 @@
     "@clerk/types": "workspace:^",
     "tslib": "catalog:repo"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "tsup": "catalog:repo"
+  },
   "engines": {
     "node": ">=18.17.0"
   },

packages/themes/src/themes/shadcn.css

@@ -0,0 +1,44 @@
+:root {
+  --clerk-color-background: var(--card);
+  --clerk-color-danger: var(--destructive);
+  --clerk-color-foreground: var(--card-foreground);
+  --clerk-color-input: var(--input);
+  --clerk-color-input-foreground: var(--card-foreground);
+  --clerk-color-modal-backdrop: var(--color-black);
+  --clerk-color-muted: var(--muted);
+  --clerk-color-muted-foreground: var(--muted-foreground);
+  --clerk-color-neutral: var(--foreground);
+  --clerk-color-primary: var(--primary);
+  --clerk-color-primary-foreground: var(--primary-foreground);
+  --clerk-color-ring: var(--ring);
+  --clerk-font-weight-normal: var(--font-weight-normal);
+  --clerk-font-weight-medium: var(--font-weight-medium);
+  --clerk-font-weight-semibold: var(--font-weight-semibold);
+  --clerk-font-weight-bold: var(--font-weight-semibold);
+}
+
+.cl-input {
+  background-color: transparent;
+
+  @variant dark {
+    background-color: --alpha(var(--clerk-color-input) / 30%);
+  }
+}
+
+.cl-cardBox,
+.cl-popoverBox {
+  box-shadow: var(--shadow-sm);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--border);
+}
+
+.cl-button[data-variant='solid']::after {
+  display: none;
+}
+
+.cl-providerIcon__apple,
+.cl-providerIcon__github,
+.cl-providerIcon__okx_wallet {
+  filter: invert(1);
+}

packages/themes/tsup.config.ts

@@ -0,0 +1,32 @@
+import { cp, mkdir, readdir } from 'fs/promises';
+import { extname, join } from 'path';
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/**/*.{ts,tsx}'],
+  format: ['cjs', 'esm'],
+  bundle: false,
+  clean: true,
+  minify: false,
+  sourcemap: false,
+  dts: true,
+  tsconfig: './tsconfig.build.json',
+  target: 'es2020',
+  onSuccess: async () => {
+    // Ensure dist/themes directory exists
+    await mkdir('./dist/themes', { recursive: true });
+
+    // Copy all CSS files from src/themes to dist/themes
+    try {
+      const files = await readdir('./src/themes');
+      const cssFiles = files.filter(file => extname(file) === '.css');
+
+      for (const cssFile of cssFiles) {
+        await cp(join('./src/themes', cssFile), join('./dist/themes', cssFile));
+        console.log(`✓ Copied ${cssFile}`);
+      }
+    } catch (error) {
+      // No CSS files found, that's ok
+    }
+  },
+});