Merge pull request #40 from softeerbootcamp4th/dev-darkdulgi

[design] 색상, 그래디언트 재정의
softeerbootcamp4th · Jul 26, 2024 · 94c1b4c · 94c1b4c
2 parents fb77646 + 61cf1fb
commit 94c1b4c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 3 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,6 @@
 function App() {
   return (
-    <div className="text-5xl">
+    <div className="text-5xl graphic-gradient">
       <div className="flex flex-col">
         <span>다람쥐 헌 쳇바퀴에 타고파</span>
         <span>Hyundai Sans Text Office</span>

diff --git a/src/index.css b/src/index.css
@@ -19,3 +19,9 @@
     font-family: "hdsans";
   }
 }
+
+@layer components {
+  .graphic-gradient {
+    @apply bg-gradient-to-r from-[#3ED7BE] to-[#069AF8];
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,15 @@
 /** @type {import('tailwindcss').Config} */
+import redefinedStyles from "./tailwind.redefine.js";
+
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      ...redefinedStyles,
+    },
     fontFamily: {
       "ds-digital": ["ds-digital"],
-      "hdsans": ["hdsans"],
+      hdsans: ["hdsans"],
     },
   },
   plugins: [],

diff --git a/tailwind.redefine.js b/tailwind.redefine.js
@@ -0,0 +1,60 @@
+export default {
+  colors: {
+    blue: {
+      100: "#ECF9FF",
+      200: "#CFF0FF",
+      300: "#97E0FF",
+      400: "#3CC5FF",
+      500: "#36B1E6",
+      600: "#309ECC",
+      700: "#247699",
+      800: "#1B5973",
+      900: "#154559",
+    },
+    green: {
+      100: "#D5FDF8",
+      200: "#BBFBF0",
+      300: "#9AF0E2",
+      400: "#3ED7BE",
+      500: "#38C2AB",
+      600: "#32AC98",
+      700: "#258172",
+      800: "#258172",
+      900: "#164B43",
+    },
+    yellow: {
+      100: "#FFEECD",
+      200: "#FFDD9C",
+      300: "#FFD076",
+      400: "#F9BB44",
+      500: "#E0A83D",
+      600: "#C79636",
+      700: "#BB8C33",
+      800: "#957029",
+      900: "#70541F",
+    },
+    red: {
+      100: "#F9DCDB",
+      200: "#F4BAB7",
+      300: "#EE9793",
+      400: "#E9756F",
+      500: "#E3524A",
+      600: "#B6423C",
+      700: "#88312D",
+      800: "#5B211E",
+      900: "#2D100F",
+    },
+    neutral: {
+      100: "#E4E4E4",
+      200: "#C8C8C9",
+      300: "#ADADAF",
+      400: "#919294",
+      500: "#767679",
+      600: "#5E5F61",
+      700: "#474749",
+      800: "#2F2F30",
+      900: "#181818",
+    },
+    black: "#0D0D0D",
+  },
+};