feat: extend tailwind themes

cuhacking · Nov 21, 2024 · fbc8784 · fbc8784
1 parent 6fde909
commit fbc8784
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 84 deletions.
diff --git a/libs/external/shadcn/tailwind.config.ts b/libs/external/shadcn/tailwind.config.ts
@@ -4,71 +4,101 @@ import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
 
 import TailwindAnimate from 'tailwindcss-animate'
 
-export default {
-  content: [
-    __dirname,
-    join(
-      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
-    ),
-    ...createGlobPatternsForDependencies(__dirname),
-  ],
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+export function buildConfig(
+  appDir: string,
+): Config {
+  return {
+    content: [
+      join(
+        appDir,
+        '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+      ),
+      ...createGlobPatternsForDependencies(appDir),
+    ],
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: ['JetBrains Mono', 'sans-serif'],
         },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+        backgroundImage: {
+          'greendiant': 'linear-gradient(200deg, hsl(var(--secondary)) 10%, hsl(var(--primary)) 90%)',
+          'g-keyboardBlack': 'linear-gradient(300deg , hsl(var(--g-keyboardblack-start)) -10%, hsl(var(--background)) 100%)',
+          'g-nav-drawer-background': `
+            linear-gradient(
+              90deg,
+              hsl(var(--background)) 0%,
+              hsl(var(--light-black)) 25%,
+              hsl(var(--light-black)) 75%,
+              hsl(var(--background)) 100%
+            )
+          `,
         },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+        colors: {
+          'border': 'hsl(var(--border))',
+          'input': 'hsl(var(--input))',
+          'ring': 'hsl(var(--ring))',
+          'background': 'hsl(var(--background))',
+          'foreground': 'hsl(var(--foreground))',
+          'primary': {
+            DEFAULT: 'hsl(var(--primary))',
+            foreground: 'hsl(var(--primary-foreground))',
+          },
+          'secondary': {
+            DEFAULT: 'hsl(var(--secondary))',
+            foreground: 'hsl(var(--secondary-foreground))',
+          },
+          'destructive': {
+            DEFAULT: 'hsl(var(--destructive))',
+            foreground: 'hsl(var(--destructive-foreground))',
+          },
+          'muted': {
+            DEFAULT: 'hsl(var(--muted))',
+            foreground: 'hsl(var(--muted-foreground))',
+          },
+          'accent': {
+            DEFAULT: 'hsl(var(--accent))',
+            foreground: 'hsl(var(--accent-foreground))',
+          },
+          'popover': {
+            DEFAULT: 'hsl(var(--popover))',
+            foreground: 'hsl(var(--popover-foreground))',
+          },
+          'card': {
+            DEFAULT: 'hsl(var(--card))',
+            foreground: 'hsl(var(--card-foreground))',
+          },
+          'card-nested': {
+            DEFAULT: 'hsl(var(--card-nested))',
+            foreground: 'hsl(var(--card-nested-foreground))',
+          },
         },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+        borderRadius: {
+          lg: `var(--radius)`,
+          md: `calc(var(--radius) - 2px)`,
+          sm: 'calc(var(--radius) - 4px)',
         },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+        keyframes: {
+          'accordion-down': {
+            from: { height: '0' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+          },
+          'accordion-up': {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0' },
+          },
         },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+        animation: {
+          'accordion-down': 'accordion-down 0.2s ease-out',
+          'accordion-up': 'accordion-up 0.2s ease-out',
         },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+        boxShadow: {
+          dropShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+          innerShadow: 'inset 0 4px 4px rgba(0, 0, 0, 0.25)',
+          buttonKeyboard: '0.5px 0.5px 0px 0.6px rgba(0, 0, 0, 0.70), 0.35px 0.35px 0.2px 0.75px rgba(255, 255, 255, 0.15) inset, 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
+          buttonKeyboardHover: '0.25px 0.25px 0px 0.5px #0A0A0A, 0.2px 0.2px 0.2px 0.35px rgba(255, 255, 255, 0.25) inset, 0.2px 0.2px 0px 0.75px rgba(137, 237, 16, 0.25), 0px 0px 10px -4px rgba(137, 237, 16, 0.60), 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
         },
       },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
     },
-  },
-  plugins: [TailwindAnimate],
-} satisfies Config
+    plugins: [TailwindAnimate],
+  }
+}
diff --git a/libs/shared/config/tailwind/shadcn.ts b/libs/shared/config/tailwind/shadcn.ts
@@ -3,7 +3,7 @@ import { join } from 'node:path'
 import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
 
 import TailwindAnimate from 'tailwindcss-animate'
-
+// TODO: Refactor to not need this tailwind.config
 export function buildConfig(
   appDir: string,
 ): Config {
@@ -17,40 +17,60 @@ export function buildConfig(
     ],
     theme: {
       extend: {
+        fontFamily: {
+          sans: ['JetBrains Mono', 'sans-serif'],
+        },
+        backgroundImage: {
+          'greendiant': 'linear-gradient(200deg, hsl(var(--secondary)) 10%, hsl(var(--primary)) 90%)',
+          'g-keyboardBlack': 'linear-gradient(300deg , hsl(var(--g-keyboardblack-start)) -10%, hsl(var(--background)) 100%)',
+          'g-nav-drawer-background': `
+            linear-gradient(
+              90deg,
+              hsl(var(--background)) 0%,
+              hsl(var(--light-black)) 25%,
+              hsl(var(--light-black)) 75%,
+              hsl(var(--background)) 100%
+            )
+          `,
+        },
         colors: {
-          border: 'hsl(var(--border))',
-          input: 'hsl(var(--input))',
-          ring: 'hsl(var(--ring))',
-          background: 'hsl(var(--background))',
-          foreground: 'hsl(var(--foreground))',
-          primary: {
+          'border': 'hsl(var(--border))',
+          'input': 'hsl(var(--input))',
+          'ring': 'hsl(var(--ring))',
+          'background': 'hsl(var(--background))',
+          'foreground': 'hsl(var(--foreground))',
+          'primary': {
             DEFAULT: 'hsl(var(--primary))',
             foreground: 'hsl(var(--primary-foreground))',
           },
-          secondary: {
+          'secondary': {
             DEFAULT: 'hsl(var(--secondary))',
             foreground: 'hsl(var(--secondary-foreground))',
           },
-          destructive: {
+          'destructive': {
             DEFAULT: 'hsl(var(--destructive))',
             foreground: 'hsl(var(--destructive-foreground))',
           },
-          muted: {
+          'muted': {
             DEFAULT: 'hsl(var(--muted))',
             foreground: 'hsl(var(--muted-foreground))',
           },
-          accent: {
+          'accent': {
             DEFAULT: 'hsl(var(--accent))',
             foreground: 'hsl(var(--accent-foreground))',
           },
-          popover: {
+          'popover': {
             DEFAULT: 'hsl(var(--popover))',
             foreground: 'hsl(var(--popover-foreground))',
           },
-          card: {
+          'card': {
             DEFAULT: 'hsl(var(--card))',
             foreground: 'hsl(var(--card-foreground))',
           },
+          'card-nested': {
+            DEFAULT: 'hsl(var(--card-nested))',
+            foreground: 'hsl(var(--card-nested-foreground))',
+          },
         },
         borderRadius: {
           lg: `var(--radius)`,
@@ -71,6 +91,12 @@ export function buildConfig(
           'accordion-down': 'accordion-down 0.2s ease-out',
           'accordion-up': 'accordion-up 0.2s ease-out',
         },
+        boxShadow: {
+          dropShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+          innerShadow: 'inset 0 4px 4px rgba(0, 0, 0, 0.25)',
+          buttonKeyboard: '0.5px 0.5px 0px 0.6px rgba(0, 0, 0, 0.70), 0.35px 0.35px 0.2px 0.75px rgba(255, 255, 255, 0.15) inset, 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
+          buttonKeyboardHover: '0.25px 0.25px 0px 0.5px #0A0A0A, 0.2px 0.2px 0.2px 0.35px rgba(255, 255, 255, 0.25) inset, 0.2px 0.2px 0px 0.75px rgba(137, 237, 16, 0.25), 0px 0px 10px -4px rgba(137, 237, 16, 0.60), 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
+        },
       },
     },
     plugins: [TailwindAnimate],

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,40 +6,60 @@ export default {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['JetBrains Mono', 'sans-serif'],
+      },
+      backgroundImage: {
+        'greendiant': 'linear-gradient(200deg, hsl(var(--secondary)) 10%, hsl(var(--primary)) 90%)',
+        'g-keyboardBlack': 'linear-gradient(300deg , hsl(var(--g-keyboardblack-start)) -10%, hsl(var(--background)) 100%)',
+        'g-nav-drawer-background': `
+          linear-gradient(
+            90deg,
+            hsl(var(--background)) 0%,
+            hsl(var(--light-black)) 25%,
+            hsl(var(--light-black)) 75%,
+            hsl(var(--background)) 100%
+          )
+        `,
+      },
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
+        'border': 'hsl(var(--border))',
+        'input': 'hsl(var(--input))',
+        'ring': 'hsl(var(--ring))',
+        'background': 'hsl(var(--background))',
+        'foreground': 'hsl(var(--foreground))',
+        'primary': {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
         },
-        secondary: {
+        'secondary': {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))',
         },
-        destructive: {
+        'destructive': {
           DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
-        muted: {
+        'muted': {
           DEFAULT: 'hsl(var(--muted))',
           foreground: 'hsl(var(--muted-foreground))',
         },
-        accent: {
+        'accent': {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
         },
-        popover: {
+        'popover': {
           DEFAULT: 'hsl(var(--popover))',
           foreground: 'hsl(var(--popover-foreground))',
         },
-        card: {
+        'card': {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        'card-nested': {
+          DEFAULT: 'hsl(var(--card-nested))',
+          foreground: 'hsl(var(--card-nested-foreground))',
+        },
       },
       borderRadius: {
         lg: `var(--radius)`,
@@ -60,6 +80,12 @@ export default {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
+      boxShadow: {
+        dropShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+        innerShadow: 'inset 0 4px 4px rgba(0, 0, 0, 0.25)',
+        buttonKeyboard: '0.5px 0.5px 0px 0.6px rgba(0, 0, 0, 0.70), 0.35px 0.35px 0.2px 0.75px rgba(255, 255, 255, 0.15) inset, 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
+        buttonKeyboardHover: '0.25px 0.25px 0px 0.5px #0A0A0A, 0.2px 0.2px 0.2px 0.35px rgba(255, 255, 255, 0.25) inset, 0.2px 0.2px 0px 0.75px rgba(137, 237, 16, 0.25), 0px 0px 10px -4px rgba(137, 237, 16, 0.60), 4px 2px 4px -1px rgba(0, 0, 0, 0.25)',
+      },
     },
   },
   plugins: [TailwindAnimate],