Skip to content

Commit

Permalink
๐Ÿ’… style: ์ปค์Šคํ…€ ์ปฌ๋Ÿฌ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ์„ธํŒ…๊ฐ’ ์ƒ์ˆ˜ํ™” ๋ฐ tailwind config์— ์—…๋ฐ์ดํŠธ #8
Browse files Browse the repository at this point in the history
  • Loading branch information
froggy1014 committed Jul 31, 2024
1 parent 7b8dfcf commit d310305
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 27 deletions.
28 changes: 28 additions & 0 deletions src/styles/theme/color.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export const COLORS = {
PRIMARY_01: "#8478ff",
PRIMARY_02: "#9b91fa",
PRIMARY_03: "#9b91fa",
PRIMARY_04: "#e4e1ff",
PRIMARY_05: "#edebfe",
GRAY_SCALE_0: "#ffffff",
GRAY_SCALE_50: "#fafafa",
GRAY_SCALE_100: "#f5f5f5",
GRAY_SCALE_200: "#e5e5e5",
GRAY_SCALE_300: "#d4d4d4",
GRAY_SCALE_400: "#a3a3a3",
GRAY_SCALE_500: "#737373",
GRAY_SCALE_600: "#525252",
GRAY_SCALE_700: "#404040",
GRAY_SCALE_800: "#262626",
GRAY_SCALE_900: "#171717",
SECONDARY_PINK: "#ffafed",
SECONDARY_ORANGE: "#ff7e6a",
SECONDARY_YELLOW: "#ffe88a",
SECONDARY_GREEN: "#aafacf",
SECONDARY_BLUE: "#a1ddff",
SECONDARY_PINK_BG: "#ffeffb",
SECONDARY_ORANGE_BG: "#fff1ef",
SECONDARY_YELLOW_BG: "#fffcee",
SECONDARY_GREEN_BG: "#e2ffef",
SECONDARY_BLUE_BG: "#e5f4fe",
};
162 changes: 162 additions & 0 deletions src/styles/theme/typography.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
export const TYPOGRAPHY = {
LABEL_SEMIBOLD: {
FONT_SIZE: "18px",
OPTIONS: {
fontWeight: 600,
lineHeight: "18px",
letterSpacing: "0",
},
},
TITLE_BOLD: {
FONT_SIZE: "20px",
OPTIONS: {
fontWeight: 700,
lineHeight: "20px",
letterSpacing: "0",
},
},
SUBTITLE_BOLD: {
FONT_SIZE: "16px",
OPTIONS: {
fontWeight: 700,
lineHeight: "16px",
letterSpacing: "0",
},
},
SUBTITLE_SEMIBOLD: {
FONT_SIZE: "16px",
OPTIONS: {
fontWeight: 600,
lineHeight: "16px",
letterSpacing: "0",
},
},
SUBTITLE_MEDIUM: {
FONT_SIZE: "16px",
OPTIONS: {
fontWeight: 500,
lineHeight: "16px",
letterSpacing: "0",
},
},
BODY1_MEDIUM: {
FONT_SIZE: "16px",
OPTIONS: {
fontWeight: 500,
lineHeight: "16px",
letterSpacing: "0",
},
},
BODY1_REGULAR: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 400,
lineHeight: "24px",
letterSpacing: "0",
},
},
BODY2_MEDIUM: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 500,
lineHeight: "14px",
letterSpacing: "0",
},
},
BODY2_REGULAR: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 400,
lineHeight: "20px",
letterSpacing: "0",
},
},
BODY2_SEMIBOLD: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 600,
lineHeight: "14px",
letterSpacing: "0",
},
},
BODY2_BOLD: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 700,
lineHeight: "14px",
letterSpacing: "0",
},
},
CAPTION1_REGULAR: {
FONT_SIZE: "12px",
OPTIONS: {
fontWeight: 400,
lineHeight: "12px",
letterSpacing: "0",
},
},
CAPTION1_MEDIUM: {
FONT_SIZE: "12px",
OPTIONS: {
fontWeight: 500,
lineHeight: "12px",
letterSpacing: "0",
},
},
CAPTION1_MEDIUM_NAV: {
FONT_SIZE: "11px",
OPTIONS: {
fontWeight: 500,
lineHeight: "11px",
letterSpacing: "0",
},
},
CAPTION1_MEDIUM_SMALL: {
FONT_SIZE: "10px",
OPTIONS: {
fontWeight: 500,
lineHeight: "10px",
letterSpacing: "0",
},
},
CAPTION2_REGULAR: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 400,
lineHeight: "14px",
letterSpacing: "0",
},
},
CAPTION2_MEDIUM: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 500,
lineHeight: "14px",
letterSpacing: "0",
},
},
BUTTON1_SEMIBOLD: {
FONT_SIZE: "16px",
OPTIONS: {
fontWeight: 600,
lineHeight: "16px",
letterSpacing: "0",
},
},
BUTTON2_MEDIUM: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 500,
lineHeight: "14px",
letterSpacing: "0",
},
},
BUTTON2_REGULAR: {
FONT_SIZE: "14px",
OPTIONS: {
fontWeight: 400,
lineHeight: "14px",
letterSpacing: "0",
},
},
};
146 changes: 119 additions & 27 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import type { Config } from "tailwindcss";

import { COLORS } from "./src/styles/theme/color";
import { TYPOGRAPHY } from "./src/styles/theme/typography";

const config: Config = {
darkMode: "class",
content: [
Expand All @@ -15,34 +18,38 @@ const config: Config = {
"m-md": "375px",
"m-lg": "450px",
},
fontSize: {
"2xs": "10px",
"11px": "11px",
},
extend: {
colors: {
"primary-color-01": "var(--primary-color-01)",
"primary-color-02": "var(--primary-color-02)",
"primary-color-03": "var(--primary-color-03)",
"primary-color-04": "var(--primary-color-04)",
"primary-color-05": "var(--primary-color-05)",
"gray-scale-0": "var(--gray-scale-0)",
"gray-scale-50": "var(--gray-scale-50)",
"gray-scale-100": "var(--gray-scale-100)",
"gray-scale-200": "var(--gray-scale-200)",
"gray-scale-300": "var(--gray-scale-300)",
"gray-scale-400": "var(--gray-scale-400)",
"gray-scale-500": "var(--gray-scale-500)",
"gray-scale-600": "var(--gray-scale-600)",
"gray-scale-700": "var(--gray-scale-700)",
"gray-scale-800": "var(--gray-scale-800)",
"gray-scale-900": "var(--gray-scale-900)",
"secondary-color-pink": "var(--secondary-color-pink)",
"secondary-color-orange": "var(--secondary-color-orange)",
"secondary-color-yellow": "var(--secondary-color-yellow)",
"secondary-color-green": "var(--secondary-color-green)",
"secondary-color-blue": "var(--secondary-color-blue)",
"secondary-color-pink-bg": "var(--secondary-color-pink-bg)",
"secondary-color-orange-bg": "var(--secondary-color-orange-bg)",
"secondary-color-yellow-bg": "var(--secondary-color-yellow-bg)",
"secondary-color-green-bg": "var(--secondary-color-green-bg)",
"secondary-color-blue-bg": "var(--secondary-color-blue-bg)",
"primary-01": COLORS.PRIMARY_01,
"primary-02": COLORS.PRIMARY_02,
"primary-03": COLORS.PRIMARY_03,
"primary-04": COLORS.PRIMARY_04,
"primary-05": COLORS.PRIMARY_05,
"gray-scale-0": COLORS.GRAY_SCALE_0,
"gray-scale-50": COLORS.GRAY_SCALE_50,
"gray-scale-100": COLORS.GRAY_SCALE_100,
"gray-scale-200": COLORS.GRAY_SCALE_200,
"gray-scale-300": COLORS.GRAY_SCALE_300,
"gray-scale-400": COLORS.GRAY_SCALE_400,
"gray-scale-500": COLORS.GRAY_SCALE_500,
"gray-scale-600": COLORS.GRAY_SCALE_600,
"gray-scale-700": COLORS.GRAY_SCALE_700,
"gray-scale-800": COLORS.GRAY_SCALE_800,
"gray-scale-900": COLORS.GRAY_SCALE_900,
"secondary-pink": COLORS.SECONDARY_PINK,
"secondary-orange": COLORS.SECONDARY_ORANGE,
"secondary-yellow": COLORS.SECONDARY_YELLOW,
"secondary-green": COLORS.SECONDARY_GREEN,
"secondary-blue": COLORS.SECONDARY_BLUE,
"secondary-pink-bg": COLORS.SECONDARY_PINK_BG,
"secondary-orange-bg": COLORS.SECONDARY_ORANGE_BG,
"secondary-yellow-bg": COLORS.SECONDARY_YELLOW_BG,
"secondary-green-bg": COLORS.SECONDARY_GREEN_BG,
"secondary-blue-bg": COLORS.SECONDARY_BLUE_BG,
},
margin: {
"btm-nav-bar": "50px",
Expand All @@ -55,8 +62,93 @@ const config: Config = {
minHeight: {
"btm-nav-bar": "50px",
},
fontFamily: {
pretendard: ["var(--font-pretendard)"],
},
fontSize: {
"label-semi": [
TYPOGRAPHY.LABEL_SEMIBOLD.FONT_SIZE,
TYPOGRAPHY.LABEL_SEMIBOLD.OPTIONS,
],
"title-bold": [
TYPOGRAPHY.TITLE_BOLD.FONT_SIZE,
TYPOGRAPHY.TITLE_BOLD.OPTIONS,
],
"subtitle-bold": [
TYPOGRAPHY.SUBTITLE_BOLD.FONT_SIZE,
TYPOGRAPHY.SUBTITLE_BOLD.OPTIONS,
],
"subtitle-semi": [
TYPOGRAPHY.SUBTITLE_SEMIBOLD.FONT_SIZE,
TYPOGRAPHY.SUBTITLE_SEMIBOLD.OPTIONS,
],
"subtitle-medium": [
TYPOGRAPHY.SUBTITLE_BOLD.FONT_SIZE,
TYPOGRAPHY.SUBTITLE_BOLD.OPTIONS,
],
"body1-medium": [
TYPOGRAPHY.BODY1_MEDIUM.FONT_SIZE,
TYPOGRAPHY.BODY1_MEDIUM.OPTIONS,
],
"body1-regular": [
TYPOGRAPHY.BODY1_REGULAR.FONT_SIZE,
TYPOGRAPHY.BODY1_REGULAR.OPTIONS,
],
"body2-medium": [
TYPOGRAPHY.BODY2_MEDIUM.FONT_SIZE,
TYPOGRAPHY.BODY2_MEDIUM.OPTIONS,
],
"body2-regular": [
TYPOGRAPHY.BODY2_REGULAR.FONT_SIZE,
TYPOGRAPHY.BODY2_REGULAR.OPTIONS,
],
"body2-semi": [
TYPOGRAPHY.BODY2_SEMIBOLD.FONT_SIZE,
TYPOGRAPHY.BODY2_SEMIBOLD.OPTIONS,
],
"body2-bold": [
TYPOGRAPHY.BODY2_BOLD.FONT_SIZE,
TYPOGRAPHY.BODY2_BOLD.OPTIONS,
],
"caption1-regular": [
TYPOGRAPHY.CAPTION1_REGULAR.FONT_SIZE,
TYPOGRAPHY.CAPTION1_REGULAR.OPTIONS,
],
"caption1-medium": [
TYPOGRAPHY.CAPTION1_MEDIUM.FONT_SIZE,
TYPOGRAPHY.CAPTION1_MEDIUM.OPTIONS,
],
"caption1-medium-nav": [
TYPOGRAPHY.CAPTION1_MEDIUM_NAV.FONT_SIZE,
TYPOGRAPHY.CAPTION1_MEDIUM_NAV.OPTIONS,
],
"caption1-medium-small": [
TYPOGRAPHY.CAPTION1_MEDIUM_SMALL.FONT_SIZE,
TYPOGRAPHY.CAPTION1_MEDIUM_SMALL.OPTIONS,
],
"caption2-regular": [
TYPOGRAPHY.CAPTION2_REGULAR.FONT_SIZE,
TYPOGRAPHY.CAPTION2_REGULAR.OPTIONS,
],
"caption2-medium": [
TYPOGRAPHY.CAPTION2_MEDIUM.FONT_SIZE,
TYPOGRAPHY.CAPTION2_MEDIUM.OPTIONS,
],
"button1-semi": [
TYPOGRAPHY.BUTTON1_SEMIBOLD.FONT_SIZE,
TYPOGRAPHY.BUTTON1_SEMIBOLD.OPTIONS,
],
"button2-medium": [
TYPOGRAPHY.BUTTON2_MEDIUM.FONT_SIZE,
TYPOGRAPHY.BUTTON2_MEDIUM.OPTIONS,
],
"button2-regular": [
TYPOGRAPHY.BUTTON2_REGULAR.FONT_SIZE,
TYPOGRAPHY.BUTTON2_REGULAR.OPTIONS,
],
},
},
},
plugins: [require("tailwindcss-radix")],
} satisfies Config;
};
export default config;

0 comments on commit d310305

Please sign in to comment.