feat: radix ui colors for tailwind & husky v9

ixahmedxi · Jan 26, 2024 · e4352af · e4352af
1 parent 1595e46
commit e4352af
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 17 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm commitlint --edit ${1}
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm lint-staged
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${GeistSans.variable} ${GeistMono.variable} font-sans bg-zinc-50 dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50`}
+        className={`${GeistSans.variable} ${GeistMono.variable} font-sans bg-background text-foreground`}
       >
         <Providers>{children}</Providers>
       </body>

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -14,6 +14,10 @@ export default async function Home() {
         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcnnnnn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
     </main>
   );
 }
diff --git a/apps/web/src/components/ThemeSwitcher.tsx b/apps/web/src/components/ThemeSwitcher.tsx
@@ -18,7 +18,7 @@ export const ThemeSwitcher = () => {
 
   return (
     <select
-      className="border-zinc-300 dark:border-zinc-700 text-sm bg-zinc-200 dark:bg-zinc-800 rounded-md"
+      className="border-border text-sm bg-muted hover:bg-accent transition-colors rounded-md"
       value={theme}
       onChange={(e) => {
         setTheme(e.target.value);

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "lint": "eslint . --cache --max-warnings 0",
     "lint:md": "markdownlint \"**/*.md\" \".github/**/*.md\"",
     "lint:spell": "cspell \"**\"",
-    "prepare": "husky install",
+    "prepare": "husky",
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "devDependencies": {

diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
@@ -14,17 +14,20 @@
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "windy-radix-palette": "2.0.0-beta.7",
+    "windy-radix-typography": "1.0.0-beta.0"
   },
   "devDependencies": {
     "@orbitkit/tsconfig": "workspace:^",
     "@types/node": "^20.11.7",
-    "eslint-config-orbitkit": "workspace:^",
-    "tailwindcss-animate": "^1.0.7"
+    "eslint-config-orbitkit": "workspace:^"
   },
   "volta": {
     "extends": "../../../package.json"

diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts
@@ -3,13 +3,51 @@ import containerQueries from '@tailwindcss/container-queries';
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
 import animate from 'tailwindcss-animate';
+import { createPlugin } from 'windy-radix-palette';
+import windyTypography from 'windy-radix-typography';
 
 import { type Config } from 'tailwindcss';
 
+const colors = createPlugin();
+
 export const orbitKitTailwindPreset: Config = {
   content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
+  presets: [windyTypography],
   theme: {
     extend: {
+      colors: {
+        background: colors.alias('gray.1'),
+        foreground: colors.alias('gray.12'),
+
+        muted: colors.alias('gray.4'),
+        'muted-foreground': colors.alias('gray.11'),
+
+        card: colors.alias('gray.1'),
+        'card-foreground': colors.alias('gray.12'),
+
+        popover: colors.alias('gray.1'),
+        'popover-foreground': colors.alias('gray.12'),
+
+        input: colors.alias('gray.2'),
+
+        primary: colors.alias('crimson.9'),
+        'primary-foreground': colors.alias('crimson.1'),
+
+        secondary: colors.alias('blue.9'),
+        'secondary-foreground': colors.alias('blue.1'),
+
+        accent: colors.alias('gray.5'),
+        'accent-foreground': colors.alias('gray.12'),
+
+        destructive: colors.alias('red.9'),
+        'destructive-foreground': colors.alias('red.1'),
+
+        border: colors.alias('gray.6'),
+        ring: colors.alias('gray.6'),
+      },
+      borderRadius: {
+        radius: '0.5rem',
+      },
       fontFamily: {
         sans: ['var(--font-geist-sans)'],
         mono: ['var(--font-geist-mono)'],
@@ -21,6 +59,10 @@ export const orbitKitTailwindPreset: Config = {
     typography,
     forms,
     aspectRatio,
+    {
+      config: colors.plugin.config ?? {},
+      handler: colors.plugin.handler,
+    },
     {
       config: containerQueries.config ?? {},
       handler: containerQueries.handler,

diff --git a/packages/ui/src/avatar.tsx b/packages/ui/src/avatar.tsx
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground',
       className,
     )}
     {...props}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml