diff --git a/pages/_document.tsx b/pages/_document.tsx
index 33d83608..b62948be 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
-
+
diff --git a/styles/global.css b/styles/global.css
index 7abdc09b..f7c17719 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -2,10 +2,6 @@
@tailwind components;
@tailwind utilities;
-body {
- background-color: #1e1f22;
-}
-
/* The height will effect the children's height */
#__next {
height: 100%;
diff --git a/tailwind.config.js b/tailwind.config.js
index c1adce02..38e77ba2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,23 +1,131 @@
-const colors = {
- dark29: "#292a2d",
- dark1E: "#1e1f22",
- dark21: "#212123",
- gray2d: "#2D2D2E",
- blue2f: "#2f88ff",
- blue58: "#5865f2",
- darkRed: "#CC2431",
- green23: "#23A55A",
-};
+const plugin = require("tailwindcss/plugin");
+/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
+ fontFamily: {
+ body: ['"Noto Sans TC"', "Roboto"],
+ },
extend: {
- colors,
+ opacity: {
+ 4: 0.04,
+ 8: 0.08,
+ },
+ colors: {
+ primary: {
+ 50: "#F5F2FC",
+ 100: "#E2D8F7",
+ 200: "#CEBFEF",
+ 300: "#AE99E8",
+ 400: "#8E7BC6",
+ 500: "#7967B1",
+ 600: "#645498",
+ 700: "#4D3E79",
+ 800: "#362662",
+ 900: "#2C1B47",
+ },
+ secondary: {
+ 50: "#E6F7F5",
+ 100: "#B4E7E1",
+ 200: "#80D5CC",
+ 300: "#46C3B8",
+ 400: "#00AFA4",
+ 500: "#009B90",
+ 600: "#00857C",
+ 700: "#007067",
+ 800: "#005A53",
+ 900: "#00453F",
+ },
+ error: {
+ 50: "#FFEEF9",
+ 100: "#FFCCEC",
+ 200: "#FFA9DF",
+ 300: "#FF87D0",
+ 400: "#F666BF",
+ 500: "#E546AC",
+ 600: "#CE2797",
+ 700: "#B20881",
+ 800: "#930069",
+ 900: "#710250",
+ },
+ gray: {
+ 50: "#F3F3F5",
+ 100: "#DDDCE2",
+ 200: "#C6C5CF",
+ 300: "#B0AFBC",
+ 400: "#9B9AA8",
+ 500: "#868594",
+ 600: "#717180",
+ 700: "#5E5D6B",
+ 800: "#4B4A56",
+ 900: "#393841",
+ },
+ basic: {
+ white: "#FFFFFF",
+ black: "#06020B",
+ },
+ },
},
},
- plugins: [],
+ plugins: [
+ plugin(({ addComponents }) => {
+ /** typography */
+ const largeSizes = [64, 56, 44, 36];
+ const mediumSizes = [32, 28, 24, 22, 16, 14, 12];
+
+ largeSizes.forEach((size) => {
+ addComponents({
+ [`.fz-${size}`]: {
+ fontWeight: 400,
+ fontSize: size,
+ lineHeight: 1.5,
+ },
+ });
+ });
+ mediumSizes.forEach((size) => {
+ addComponents({
+ [`.fz-${size}`]: {
+ fontWeight: 400,
+ fontSize: size,
+ lineHeight: 1.3,
+ },
+ [`.fz-${size}-b`]: {
+ fontWeight: 500,
+ fontSize: size,
+ lineHeight: 1.3,
+ },
+ });
+ });
+ }),
+ plugin(({ addUtilities }) => {
+ /** gradient background */
+ addUtilities({
+ ".gradient-purple": {
+ "background-image":
+ "linear-gradient(132.59deg, #7C7BA4 19.04%, #362662 86.03%)",
+ },
+ ".gradient-black": {
+ "background-image":
+ "linear-gradient(132.59deg, #06020B 19.04%, #362662 86.03%)",
+ },
+ ".body-bg": {
+ "background-image":
+ "linear-gradient(145.51deg, #06020B -7.4%, #2C1B47 154.79%)",
+ },
+ });
+ }),
+ plugin(({ addUtilities }) => {
+ /** custom border gradient color */
+ addUtilities({
+ ".border-gradient-purple": {
+ "border-image":
+ "linear-gradient(132.59deg, #7C7BA4 19.04%, #362662 86.03%) 1",
+ },
+ });
+ }),
+ ],
};