env(tailwind): shadcn 세팅 초기 설정

packages/ui/src/styles/global.css

@@ -1,3 +1,59 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 215 20.2% 65.1%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 216 34% 17%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply font-sans antialiased bg-background text-foreground;
+  }
+}

packages/ui/tailwind.config.js

@@ -1,88 +1,50 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["./src/**/*.{ts,tsx}"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
   theme: {
     extend: {
       colors: {
-        background: {
-          primary: "var(--gdgoc-background-primary)",
-          secondary: "var(--gdgoc-background-secondary)",
-          tertiary: "var(--gdgoc-background-tertiary)",
-          quaternary: "var(--gdgoc-background-quaternary)",
-          quinary: "var(--gdgoc-background-quinary)",
+        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))",
         },
-        brand: {
-          red: "var(--gdgoc-brand-red)",
-          yellow: "var(--gdgoc-brand-yellow)",
-          blue: "var(--gdgoc-brand-blue)",
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
         },
-        gray: {
-          100: "var(--gdgoc-gray-100)",
-          200: "var(--gdgoc-gray-200)",
-          300: "var(--gdgoc-gray-300)",
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
-        white: {
-          100: "var(--gdgoc-white-100)",
-          40: "var(--gdgoc-white-40)",
-          15: "var(--gdgoc-white-15)",
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
         },
-        button: {
-          hover: {
-            gray: {
-              primary: "var(--gdgoc-button-hover-gray-primary)",
-              blue: "var(--gdgoc-button-hover-gray-blue)",
-            },
-            darkGray: {
-              primary: "var(--gdgoc-button-hover-darkgray-primary)",
-              secondary: "var(--gdgoc-button-hover-darkgray-secondary)",
-            },
-            red: {
-              primary: "var(--gdgoc-button-hover-red-primary)",
-              secondary: "var(--gdgoc-button-hover-red-secondary)",
-            },
-            yellow: {
-              primary: "var(--gdgoc-button-hover-yellow-primary)",
-              secondary: "var(--gdgoc-button-hover-yellow-secondary)",
-            },
-            dark: {
-              primary: "var(--gdgoc-button-hover-dark-primary)",
-              secondary: "var(--gdgoc-button-hover-dark-secondary)",
-            },
-          },
+        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))",
         },
       },
-      fontSize: {
-        // Bold Typography
-        "bold-h1": "var(--gdgoc-typography-bold-h1)",
-        "bold-h2": "var(--gdgoc-typography-bold-h2)",
-        "bold-h3": "var(--gdgoc-typography-bold-h3)",
-        "bold-h4": "var(--gdgoc-typography-bold-h4)",
-        "bold-h5": "var(--gdgoc-typography-bold-h5)",
-        "bold-h6": "var(--gdgoc-typography-bold-h6)",
-
-        // Medium Typography
-        "medium-h1": "var(--gdgoc-typography-medium-h1)",
-        "medium-h2": "var(--gdgoc-typography-medium-h2)",
-        "medium-h3": "var(--gdgoc-typography-medium-h3)",
-        "medium-h4": "var(--gdgoc-typography-medium-h4)",
-        "medium-h5": "var(--gdgoc-typography-medium-h5)",
-
-        // Regular Typography
-        "regular-h1": "var(--gdgoc-typography-regular-h1)",
-        "regular-h2": "var(--gdgoc-typography-regular-h2)",
-        "regular-h3": "var(--gdgoc-typography-regular-h3)",
-        "regular-h4": "var(--gdgoc-typography-regular-h4)",
-        "regular-h5": "var(--gdgoc-typography-regular-h5)",
-
-        // Light Typography
-        "light-h1": "var(--gdgoc-typography-light-h1)",
-        "light-h2": "var(--gdgoc-typography-light-h2)",
-        "light-h3": "var(--gdgoc-typography-light-h3)",
-        "light-h4": "var(--gdgoc-typography-light-h4)",
-        "light-h5": "var(--gdgoc-typography-light-h5)",
-        "light-h6": "var(--gdgoc-typography-light-h6)",
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
       },
     },
   },
-};
+  plugins: [require("tailwindcss-animate")],
+}