Merge pull request #303 from TEAM-DAWM/style/#302/color-theme

[STYLE] add color token

src/styles/colorToken.ts

@@ -0,0 +1,51 @@
+import color from './color';
+
+const colorToken = {
+	Primary: {
+		normal: color.Blue.Blue6,
+		strong: color.Blue.Blue7,
+		heavy: color.Blue.Blue8,
+		strongVariant: color.Blue.Blue2,
+		heavyVariant: color.Blue.Blue3,
+	},
+	Neutral: {
+		normal: color.Grey.White,
+		strong: color.Grey.Grey2,
+		heavy: color.Grey.Grey3,
+		accent: color.Grey.Grey4,
+	},
+	Text: {
+		primary: color.Blue.Blue7,
+		primaryVariant: color.Blue.Blue3,
+		neutralDark: color.Grey.White,
+		neutralLight: color.Grey.Grey8,
+		assistive: color.Grey.Grey6,
+		disable: color.Grey.Grey4,
+	},
+	Outline: {
+		primaryNormal: color.Blue.Blue4,
+		primaryStrong: color.Blue.Blue7,
+		neutralNormal: color.Grey.Grey3,
+		neutralStrong: color.Grey.Grey4,
+	},
+	Divider: {
+		neutral: color.Grey.Grey4,
+		primary: color.Blue.Blue3,
+	},
+	Component: {
+		normal: color.Grey.White,
+		strong: color.Blue.Blue2,
+		heavy: color.Blue.Blue3,
+		accent: color.Blue.Blue4,
+		assistive: color.Blue.Blue1,
+	},
+	Icon: {
+		normal: color.Grey.Grey5,
+		strong: color.Grey.Grey7,
+		heavy: color.Grey.Grey8,
+		primary: color.Blue.Blue7,
+		inverse: color.Grey.White,
+	},
+};
+
+export default colorToken;

src/styles/font.ts

@@ -1,129 +1,147 @@
 const fonts = {
-	PretendardBold: 'Pretendard-Bold',
-	PretendardSemiBold: 'Pretendard-SemiBold',
-	PretendardMedium: 'Pretendard-Medium',
-	PretendardRegular: 'Pretendard-Regular',
+	PretendardBold: 'Pretendard-Bold, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardSemiBold: 'Pretendard-SemiBold, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardMedium: 'Pretendard-Medium, -apple-system, Helvetica, Arial, sans-serif',
+	PretendardRegular: 'Pretendard-Regular, -apple-system, Helvetica, Arial, sans-serif',
 };
 
 interface Font {
 	family: string;
 	size: number;
 	height: number;
 	letterSpacing: number;
+	fontWeight: number;
 	textDecoration?: string;
 }
 
-const FONT = ({ family, size, height, letterSpacing, textDecoration = 'none' }: Font): string => `
-          font-family:${family};
-          font-size:${size}rem;
-          line-height:${height}%;
-          letter-spacing: ${letterSpacing}%;
-          text-decoration: ${textDecoration};
-      `;
+const FONT = ({ family, size, height, letterSpacing, fontWeight, textDecoration = 'none' }: Font): string => `
+	font-family: ${family};
+	font-size: ${size}rem;
+	line-height: ${height}%;
+	letter-spacing: ${letterSpacing}%;
+	font-weight: ${fontWeight};
+	text-decoration: ${textDecoration};
+`;
+
 const font = {
 	title01: FONT({
 		family: fonts.PretendardMedium,
 		size: 2.4,
 		height: 100,
 		letterSpacing: -3,
+		fontWeight: 500,
 	}),
 
 	title02: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 2,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 600,
 	}),
 
 	body01: FONT({
 		family: fonts.PretendardMedium,
 		size: 1.5,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 500,
 	}),
 
 	body02: FONT({
 		family: fonts.PretendardMedium,
 		size: 1.5,
 		height: 140,
 		letterSpacing: -1,
+		fontWeight: 500,
 	}),
 
 	body03: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 1.4,
 		height: 135,
 		letterSpacing: -2,
+		fontWeight: 600,
 	}),
 
 	body04: FONT({
 		family: fonts.PretendardRegular,
 		size: 1.4,
 		height: 135,
 		letterSpacing: -1,
+		fontWeight: 400,
 	}),
 
 	body05: FONT({
 		family: fonts.PretendardRegular,
 		size: 1.2,
 		height: 100,
 		letterSpacing: -3,
+		fontWeight: 500,
 	}),
 
 	label01: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 2.2,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label02: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 1.8,
 		height: 100,
 		letterSpacing: -4,
+		fontWeight: 600,
 	}),
 
 	label03: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 1.6,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label04: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 1.5,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	label05: FONT({
 		family: fonts.PretendardSemiBold,
 		size: 1.4,
 		height: 100,
 		letterSpacing: 0,
+		fontWeight: 600,
 	}),
 
 	caption01: FONT({
 		family: fonts.PretendardMedium,
 		size: 1.4,
 		height: 100,
 		letterSpacing: -5,
+		fontWeight: 500,
 	}),
 
 	caption02: FONT({
 		family: fonts.PretendardRegular,
 		size: 1.2,
 		height: 100,
 		letterSpacing: -2,
+		fontWeight: 400,
 	}),
 
 	caption03: FONT({
 		family: fonts.PretendardRegular,
 		size: 1.2,
 		height: 100,
 		letterSpacing: -2,
+		fontWeight: 400,
 		textDecoration: 'line-through',
 	}),
 };

src/styles/theme.ts

@@ -1,5 +1,6 @@
 import button from './buttonTheme';
 import color from './color';
+import colorToken from './colorToken';
 import font from './font';
 import fontTheme from './fontTheme';
 import palette from './palette';
@@ -14,6 +15,7 @@ export const theme = {
 	palette,
 	fontTheme,
 	shadow,
+	colorToken,
 };
 
 export type ThemeType = typeof theme;