187 lines
4.4 KiB
CSS
187 lines
4.4 KiB
CSS
@font-face {
|
|
font-family: 'Pretendard Variable';
|
|
font-weight: 45 920;
|
|
font-style: normal;
|
|
font-display: fallback;
|
|
src: url('./assets/fonts/PretendardVariable.woff2') format('woff2-variations');
|
|
}
|
|
|
|
:root {
|
|
/* primitive colors */
|
|
--black: #000;
|
|
--grey50: #f9fafb;
|
|
--grey100: #f2f4f6;
|
|
--grey200: #e5e8eb;
|
|
--grey300: #d1d6db;
|
|
--grey400: #b0b8c1;
|
|
--grey500: #8b95a1;
|
|
--grey600: #6b7684;
|
|
--grey700: #4e5968;
|
|
--grey800: #333d4b;
|
|
--grey900: #191f28;
|
|
--greyOpacity50: rgba(0, 23, 51, 0.02);
|
|
--greyOpacity100: rgba(2, 32, 71, 0.05);
|
|
--greyOpacity200: rgba(0, 27, 55, 0.1);
|
|
--greyOpacity300: rgba(0, 29, 58, 0.18);
|
|
--greyOpacity400: rgba(0, 25, 54, 0.31);
|
|
--greyOpacity500: rgba(3, 24, 50, 0.46);
|
|
--greyOpacity600: rgba(0, 19, 43, 0.58);
|
|
--greyOpacity700: rgba(3, 18, 40, 0.7);
|
|
--greyOpacity800: rgba(0, 12, 30, 0.8);
|
|
--greyOpacity900: rgba(2, 9, 19, 0.91);
|
|
--white: #fff;
|
|
--blue50: #e8f3ff;
|
|
--blue100: #c9e2ff;
|
|
--blue200: #90c2ff;
|
|
--blue300: #64a8ff;
|
|
--blue400: #4593fc;
|
|
--blue500: #3182f6;
|
|
--blue600: #2272eb;
|
|
--blue700: #1b64da;
|
|
--blue800: #1957c2;
|
|
--blue900: #194aa6;
|
|
--red50: #fee;
|
|
--red100: #ffd4d6;
|
|
--red200: #feafb4;
|
|
--red300: #fb8890;
|
|
--red400: #f66570;
|
|
--red500: #f04452;
|
|
--red600: #e42939;
|
|
--red700: #d22030;
|
|
--red800: #bc1b2a;
|
|
--red900: #a51926;
|
|
--orange50: #fff3e0;
|
|
--orange100: #ffe0b0;
|
|
--orange200: #ffcd80;
|
|
--orange300: #ffbd51;
|
|
--orange400: #ffa927;
|
|
--orange500: #fe9800;
|
|
--orange600: #fb8800;
|
|
--orange700: #f57800;
|
|
--orange800: #ed6700;
|
|
--orange900: #e45600;
|
|
--yellow50: #fff9e7;
|
|
--yellow100: #ffefbf;
|
|
--yellow200: #ffe69b;
|
|
--yellow300: #ffdd78;
|
|
--yellow400: #ffd158;
|
|
--yellow500: #ffc342;
|
|
--yellow600: #ffb331;
|
|
--yellow700: #faa131;
|
|
--yellow800: #ee8f11;
|
|
--yellow900: #dd7d02;
|
|
--green50: #f0faf6;
|
|
--green100: #aeefd5;
|
|
--green200: #76e4b8;
|
|
--green300: #3fd599;
|
|
--green400: #15c47e;
|
|
--green500: #03b26c;
|
|
--green600: #02a262;
|
|
--green700: #029359;
|
|
--green800: #028450;
|
|
--green900: #027648;
|
|
--teal50: #edf8f8;
|
|
--teal100: #bce9e9;
|
|
--teal200: #89d8d8;
|
|
--teal300: #58c7c7;
|
|
--teal400: #30b6b6;
|
|
--teal500: #18a5a5;
|
|
--teal600: #109595;
|
|
--teal700: #0c8585;
|
|
--teal800: #097575;
|
|
--teal900: #076565;
|
|
--purple50: #f9f0fc;
|
|
--purple100: #edccf8;
|
|
--purple200: #da9bef;
|
|
--purple300: #c770e4;
|
|
--purple400: #b44bd7;
|
|
--purple500: #a234c7;
|
|
--purple600: #9128b4;
|
|
--purple700: #8222a2;
|
|
--purple800: #73228e;
|
|
--purple900: #65237b;
|
|
--whiteOpacity50: rgba(209, 209, 253, 0.05);
|
|
--whiteOpacity100: rgba(217, 217, 255, 0.11);
|
|
--whiteOpacity200: rgba(222, 222, 255, 0.19);
|
|
--whiteOpacity300: rgba(224, 224, 255, 0.27);
|
|
--whiteOpacity400: rgba(232, 232, 253, 0.36);
|
|
--whiteOpacity500: rgba(242, 242, 255, 0.47);
|
|
--whiteOpacity600: rgba(248, 248, 255, 0.6);
|
|
--whiteOpacity700: rgba(253, 253, 255, 0.75);
|
|
--whiteOpacity800: rgba(253, 253, 254, 0.89);
|
|
--whiteOpacity900: #fff;
|
|
|
|
/* semantic colors */
|
|
--primary-color: #05f;
|
|
--accent-color: #f50;
|
|
|
|
--background: #fff;
|
|
--background-secondary: var(--grey100);
|
|
--background-tertiary: var(--grey200);
|
|
|
|
--border-color: var(--grey300);
|
|
--border-color-secondary: var(--grey600);
|
|
--border-color-tertiary: var(--grey800);
|
|
|
|
--text-color: var(--grey900);
|
|
--text-color-secondary: var(--grey700);
|
|
--text-color-tertiary: var(--grey400);
|
|
|
|
--error-color: var(--red500);
|
|
--success-color: var(--green500);
|
|
--warning-color: var(--yellow500);
|
|
--info-color: var(--blue500);
|
|
|
|
--on-primary: var(--whiteOpacity800);
|
|
--on-error: var(--whiteOpacity800);
|
|
--on-success: var(--whiteOpacity800);
|
|
--on-warning: var(--whiteOpacity800);
|
|
--on-info: var(--whiteOpacity800);
|
|
|
|
--error-border: var(--red700);
|
|
--success-border: var(--green700);
|
|
--warning-border: var(--yellow700);
|
|
--info-border: var(--blue700);
|
|
|
|
/* shadow */
|
|
--shadow: 2px 4px 12px var(--greyOpacity200);
|
|
--shadow-hard: 2px 4px 16px var(--greyOpacity300);
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
'Pretendard Variable',
|
|
Pretendard,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
system-ui,
|
|
Roboto,
|
|
'Helvetica Neue',
|
|
'Segoe UI',
|
|
'Apple SD Gothic Neo',
|
|
'Noto Sans KR',
|
|
'Malgun Gothic',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|