quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
143 lines (142 loc) • 3.25 kB
JavaScript
import { css } from '@emotion/react';
export var COLORS = {
white: '#FFFFFF',
black: '#000000',
grey1: '#FEFEFE',
grey2: '#F7F7F7',
grey3: '#F0F0F0',
grey4: '#E8E8E8',
grey5: '#D9D9D9',
grey6: '#CCCCCC',
grey7: '#AAAAAA',
grey8: '#525252',
coolgrey1: '#F7F7F8',
coolgrey2: '#E9EEF3',
coolgrey3: '#C3C8CC',
coolgrey4: '#9199A1',
coolgrey5: '#5E666E',
primary: '#0078FE',
primaryL: '#7DC8FF',
primaryO: '#92B8F8',
blue1: '#F4F8FC',
blue2: '#DEEEFF',
blue3: '#4CA0FE',
blue4: '#0060CB',
blue5: '#0032C3',
blue6: '#000F64',
red: '#E30000',
yellow: '#FFC328',
green: '#74CA1E',
};
export var BASE_SPACING = {
xs: '5px',
s: '10px',
m: '15px',
l: '20px',
xl: '25px',
};
export var BASE_FONTWEIGHT = {
bold: 700,
medium: 500,
regular: 400,
// black: 900,
// semiBold: 600,
// light: 300,
// thin: 100
};
export var BASE_SHADOW = {
s: '0px 0px 5px 0px rgba(0,0,0,0.1);',
m: '0px 0px 9px 0px rgba(0,0,0,0.1);',
l: '0px 5px 20px 0px rgba(0,0,0,0.15);',
};
export var TYPOGRAPHYS = {
headline1: {
fontSize: 18,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 26,
tag: 'h1',
},
headline2: {
fontSize: 16,
fontWeight: BASE_FONTWEIGHT.bold,
lineHeight: 22,
tag: 'h2',
},
headline3: {
fontSize: 16,
fontWeight: BASE_FONTWEIGHT.regular,
lineHeight: 23,
tag: 'h3',
},
subTitle1: {
fontSize: 15,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 22,
tag: 'p',
},
subTitle2: {
fontSize: 14,
fontWeight: BASE_FONTWEIGHT.bold,
lineHeight: 20,
tag: 'p',
},
subTitle3: {
fontSize: 14,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 20,
tag: 'p',
},
body1: {
fontSize: 14,
fontWeight: BASE_FONTWEIGHT.regular,
lineHeight: 24,
tag: 'p',
},
body2: {
fontSize: 13,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 19,
tag: 'p',
},
body3: {
fontSize: 13,
fontWeight: BASE_FONTWEIGHT.regular,
lineHeight: 19,
tag: 'p',
},
caption1: {
fontSize: 12,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 17,
tag: 'span',
},
caption2: {
fontSize: 12,
fontWeight: BASE_FONTWEIGHT.regular,
lineHeight: 17,
tag: 'span',
},
caption3: {
fontSize: 10,
fontWeight: BASE_FONTWEIGHT.medium,
lineHeight: 14,
tag: 'span',
},
};
export var TYPOGRAPHYS_STYLE = Object.fromEntries(Object.entries(TYPOGRAPHYS).map(function (_a) {
var key = _a[0], value = _a[1];
return [
key,
css({
fontSize: String(value.fontSize) + 'px',
fontWeight: value.fontWeight,
lineHeight: String(value.lineHeight) + 'px',
}),
];
}));
Object.freeze(COLORS);
Object.freeze(BASE_SPACING);
Object.freeze(BASE_FONTWEIGHT);
Object.freeze(BASE_SHADOW);
Object.freeze(TYPOGRAPHYS);
Object.freeze(TYPOGRAPHYS_STYLE);