diff --git a/apps/marketing/components.json b/apps/marketing/components.json
index 288111a..953e21a 100644
--- a/apps/marketing/components.json
+++ b/apps/marketing/components.json
@@ -13,8 +13,8 @@
"aliases": {
"components": "@/components",
"hooks": "@/hooks",
- "lib": "@/lib",
- "utils": "@bahar/web-ui/lib/utils",
+ "lib": "@bahar/design-system",
+ "utils": "@bahar/design-system",
"ui": "@bahar/web-ui/components"
}
}
diff --git a/apps/marketing/tsconfig.json b/apps/marketing/tsconfig.json
index bf340ce..7d5f391 100644
--- a/apps/marketing/tsconfig.json
+++ b/apps/marketing/tsconfig.json
@@ -6,7 +6,8 @@
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
- "@bahar/web-ui/*": ["../../packages/web-ui/src/*"]
+ "@bahar/web-ui/*": ["../../packages/web-ui/src/*"],
+ "@bahar/design-system/*": ["../../packages/design-system/src/*"]
}
},
"include": ["src/**/*"],
diff --git a/apps/web/README.md b/apps/web/README.md
index 3910538..5cabdad 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -77,6 +77,50 @@ import { cn } from "@bahar/web-ui/lib/utils";
See `packages/web-ui/README.md` for the full list of available components.
+## Adding Color Themes
+
+To add a new color theme:
+
+1. **Add CSS variables** in `packages/design-system/colors.css`:
+
+```css
+[data-theme="mytheme"] {
+ --background: oklch(98% 0.01 180);
+ --primary: oklch(55% 0.18 180);
+ /* ... other light mode colors */
+}
+
+[data-theme="mytheme"].dark {
+ --background: oklch(15% 0.025 180);
+ --primary: oklch(65% 0.16 180);
+ /* ... other dark mode colors */
+}
+```
+
+2. **Register the theme** in `src/atoms/theme.ts`:
+
+```typescript
+export enum ColorTheme {
+ DEFAULT = "default",
+ NORD = "nord",
+ MYTHEME = "mytheme",
+}
+```
+
+3. **Add translation** in `src/components/ThemeMenu.tsx`:
+
+```typescript
+const ColorThemeLabel: FC<{ theme: ColorTheme }> = ({ theme }) => {
+ switch (theme) {
+ case ColorTheme.MYTHEME:
+ return