feat: react-ui shadcn interop theme (#399)

packages/react-ui/package.json

@@ -24,6 +24,10 @@
     "./themes/default.css": {
       "types": "./dist/themes/default.css.d.ts",
       "default": "./dist/themes/default.css"
+    },
+    "./themes/shadcn.css": {
+      "types": "./dist/themes/shadcn.css.d.ts",
+      "default": "./dist/themes/shadcn.css"
     }
   },
   "source": "./src/index.ts",

packages/react-ui/src/themes/shadcn.css

@@ -0,0 +1,61 @@
+:root {
+  --aui-background: var(--background, 0 0% 100%);
+  --aui-foreground: var(--foreground, 240 10% 3.9%);
+
+  --aui-card: var(--card, 0 0% 100%);
+  --aui-card-foreground: var(--card-foreground, 240 10% 3.9%);
+
+  --aui-popover: var(--popover, 0 0% 100%);
+  --aui-popover-foreground: var(--popover-foreground, 240 10% 3.9%);
+
+  --aui-primary: var(--primary, 240 5.9% 10%);
+  --aui-primary-foreground: var(--primary-foreground, 0 0% 98%);
+
+  --aui-secondary: var(--secondary, 240 4.8% 95.9%);
+  --aui-secondary-foreground: var(--secondary-foreground, 240 5.9% 10%);
+
+  --aui-muted: var(--muted, 240 4.8% 95.9%);
+  --aui-muted-foreground: var(--muted-foreground, 240 3.8% 46.1%);
+
+  --aui-accent: var(--accent, 240 4.8% 95.9%);
+  --aui-accent-foreground: var(--accent-foreground, 240 5.9% 10%);
+
+  --aui-destructive: var(--destructive, 0 84.2% 60.2%);
+  --aui-destructive-foreground: var(--destructive-foreground, 0 0% 98%);
+
+  --aui-border: var(--border, 240 5.9% 90%);
+  --aui-input: var(--input, 240 5.9% 90%);
+  --aui-ring: var(--ring, 240 10% 3.9%);
+
+  --aui-radius: var(--radius, 0.5rem);
+}
+
+.dark {
+  --aui-background: var(--background, 0 0% 7%);
+  --aui-foreground: var(--foreground, 0 0% 98%);
+
+  --aui-card: var(--card, 240 10% 3.9%);
+  --aui-card-foreground: var(--card-foreground, 0 0% 98%);
+
+  --aui-popover: var(--popover, 240 10% 3.9%);
+  --aui-popover-foreground: var(--popover-foreground, 0 0% 98%);
+
+  --aui-primary: var(--primary, 0 0% 98%);
+  --aui-primary-foreground: var(--primary-foreground, 240 5.9% 10%);
+
+  --aui-secondary: var(--secondary, 240 3.7% 15.9%);
+  --aui-secondary-foreground: var(--secondary-foreground, 0 0% 98%);
+
+  --aui-muted: var(--muted, 240 3.7% 15.9%);
+  --aui-muted-foreground: var(--muted-foreground, 240 5% 64.9%);
+
+  --aui-accent: var(--accent, 240 3.7% 15.9%);
+  --aui-accent-foreground: var(--accent-foreground, 0 0% 98%);
+
+  --aui-destructive: var(--destructive, 0 62.8% 30.6%);
+  --aui-destructive-foreground: var(--destructive-foreground, 0 0% 98%);
+
+  --aui-border: var(--border, 240 3.7% 15.9%);
+  --aui-input: var(--input, 240 3.7% 15.9%);
+  --aui-ring: var(--ring, 240 4.9% 83.9%);
+}

packages/react-ui/tsup.config.ts

@@ -7,6 +7,7 @@ export default defineConfig(() => {
       "src/styles.css",
       "src/markdown-styles.css",
       "src/themes/default.css",
+      "src/themes/shadcn.css",
     ],
     format: ["cjs", "esm"],
     dts: true,