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 My Theme; + // ... other cases + } +}; +``` + +4. **Extract translations**: `pnpm run i18n:extract` + ## Environment Variables Required environment variables: diff --git a/apps/web/components.json b/apps/web/components.json index f74fbc5..6b74c0b 100644 --- a/apps/web/components.json +++ b/apps/web/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/web/index.html b/apps/web/index.html index 56eceac..da45f7a 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -31,6 +31,11 @@