💄 Style

디자인 토큰 추가
depromeet · Feb 15, 2025 · e00758a · e00758a
1 parent d59eb69
commit e00758a
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,6 +5,45 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --white: #ffffff;
+  --black: #14151a;
+  /* gray */
+  --gray-white: #ffffff;
+  --gray-50: #f9f9fb;
+  --gray-75: #f1f1f4;
+  --gray-100: #dddee7;
+  --gray-200: #c8c9d7;
+  --gray-300: #adaebe;
+  --gray-400: #8f92a6;
+  --gray-500: #696c83;
+  --gray-600: #525466;
+  --gray-700: #3f414f;
+  --gray-800: #292b34;
+  --gray-900: #1a1b22;
+  /* primary */
+  --primary-light: #eeeaff;
+  --primary-hover: #e5e0ff;
+  --primary-active: #cabfff;
+  --primary: #5330ff;
+  --primary-normal: #5330ff;
+  --primary-normal-hover: #4b2be6;
+  --primary-normal-active: #4226cc;
+  --primary-dark: #3e24bf;
+  --primary-dark-hover: #321d99;
+  --primary-dark-active: #251673;
+  --primary-darker: #1d1159;
+  /* secondary */
+  --secondary-light: #ffe6f2;
+  --secondary-hover: #ffd9eb;
+  --secondary-active: #ffb0d6;
+  --secondary: #fe007b;
+  --secondary-normal: #fe007b;
+  --secondary-normal-hover: #e5006f;
+  --secondary-normal-active: #cb0062;
+  --secondary-dark: #bf005c;
+  --secondary-dark-hover: #98004a;
+  --secondary-dark-active: #720037;
+  --secondary-darker: #59002b;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,6 +11,56 @@ const config: Config = {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+        white: 'var(--white)',
+        black: 'var(--black)',
+        /**
+         * Gray
+         */
+        gray: {
+          50: 'var(--gray-50)',
+          75: 'var(--gray-75)',
+          100: 'var(--gray-100)',
+          200: 'var(--gray-200)',
+          300: 'var(--gray-300)',
+          400: 'var(--gray-400)',
+          500: 'var(--gray-500)',
+          600: 'var(--gray-600)',
+          700: 'var(--gray-700)',
+          800: 'var(--gray-800)',
+          900: 'var(--gray-900)',
+        },
+        /**
+         * Primary
+         */
+        primary: {
+          DEFAULT: 'var(--primary)',
+          light: 'var(--primary-light)',
+          hover: 'var(--primary-hover)',
+          active: 'var(--primary-active)',
+          normal: 'var(--primary-normal)',
+          'normal-hover': 'var(--primary-normal-hover)',
+          'normal-active': 'var(--primary-normal-active)',
+          dark: 'var(--primary-dark)',
+          'dark-hover': 'var(--primary-dark-hover)',
+          'dark-active': 'var(--primary-dark-active)',
+          darker: 'var(--primary-darker)',
+        },
+        /**
+         * Secondary
+         */
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          light: 'var(--secondary-light)',
+          hover: 'var(--secondary-hover)',
+          active: 'var(--secondary-active)',
+          normal: 'var(--secondary-normal)',
+          'normal-hover': 'var(--secondary-normal-hover)',
+          'normal-active': 'var(--secondary-normal-active)',
+          dark: 'var(--secondary-dark)',
+          'dark-hover': 'var(--secondary-dark-hover)',
+          'dark-active': 'var(--secondary-dark-active)',
+          darker: 'var(--secondary-darker)',
+        },
       },
     },
   },