Skip to content

Commit

Permalink
Merge pull request #43 from sopt-makers/feat/#41-fonts
Browse files Browse the repository at this point in the history 
refactor(fonts): 폰트 객체 형태 추가
  • Loading branch information
@seojisoosoo
seojisoosoo authored Jan 14, 2024
2 parents f6e01ec + e4b0cc6 commit 25cc5f3
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 178 deletions.
238 changes: 64 additions & 174 deletions packages/fonts/src/fonts.ts
View file
Original file line number Diff line number Diff line change
@@ -1,175 +1,65 @@
export const fontBase = `
font-family: 'SUIT', sans-serif;
font-style: normal;
`;
interface Font {
fontFamily?: string;
fontStyle?: string;
fontWeight: number | string;
fontSize: number | string;
lineHeight: number | string;
letterSpacing: number | string;
}

export const fonts = {
HEADING_48_B: `
font-weight: 700;
font-size: 48px;
line-height: 72px;
letter-spacing: -2%;
`,
HEADING_32_B: `
font-weight: 700;
font-size: 32px;
line-height: 48px;
letter-spacing: -2%;
`,
HEADING_28_B: `
font-weight: 700;
font-size: 28px;
line-height: 42px;
letter-spacing: -2%;
`,
HEADING_24_B: `
font-weight: 700;
font-size: 24px;
line-height: 36px;
letter-spacing: -2%;
`,
HEADING_20_B: `
font-weight: 700;
font-size: 20px;
line-height: 30px;
letter-spacing: -2%;
`,
HEADING_18_B: `
font-weight: 700;
font-size: 18px;
line-height: 28px;
letter-spacing: -2%;
`,
HEADING_16_B: `
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: -2%;
`,
TITLE_32_SB: `
font-weight: 600;
font-size: 32px;
line-height: 48px;
letter-spacing: -2%;
`,
TITLE_28_SB: `
font-weight: 600;
font-size: 28px;
line-height: 42px;
letter-spacing: -2%;
`,
TITLE_24_SB: `
font-weight: 600;
font-size: 24px;
line-height: 36px;
letter-spacing: -2%;
`,
TITLE_20_SB: `
font-weight: 600;
font-size: 20px;
line-height: 30px;
letter-spacing: -2%;
`,
TITLE_18_SB: `
font-weight: 600;
font-size: 18px;
line-height: 28px;
letter-spacing: -2%;
`,
TITLE_16_SB: `
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: -1.5%;
`,
TITLE_14_SB: `
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: -1.5%;
`,
BODY_18_M: `
font-weight: 500;
font-size: 18px;
line-height: 30px;
letter-spacing: -1.5%;
`,
BODY_16_M: `
font-weight: 500;
font-size: 16px;
line-height: 26px;
letter-spacing: -1.5%;
`,
BODY_16_R: `
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: -1.5%;
`,
BODY_14_M: `
font-weight: 500;
font-size: 14px;
line-height: 22px;
letter-spacing: -1.5%;
`,
BODY_14_R: `
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: -1.5%;
`,
BODY_14_L: `
font-weight: 300;
font-size: 14px;
line-height: 22px;
letter-spacing: -1.5%;
`,
BODY_13_M: `
font-weight: 500;
font-size: 13px;
line-height: 20px;
letter-spacing: -1.5%;
`,
BODY_13_R: `
font-weight: 400;
font-size: 13px;
line-height: 20px;
letter-spacing: -1.5%;
`,
BODY_13_L: `
font-weight: 300;
font-size: 13px;
line-height: 20px;
letter-spacing: -1.5%;
`,
LABEL_18_SB: `
font-weight: 600;
font-size: 18px;
line-height: 24px;
letter-spacing: -2%;
`,
LABEL_16_SB: `
font-weight: 600;
font-size: 16px;
line-height: 22px;
letter-spacing: -2%;
`,
LABEL_14_SB: `
font-weight: 600;
font-size: 14px;
line-height: 18px;
letter-spacing: -2%;
`,
LABEL_12_SB: `
font-weight: 600;
font-size: 12px;
line-height: 16px;
letter-spacing: -2%;
`,
LABEL_11_SB: `
font-weight: 600;
font-size: 11px;
line-height: 14px;
letter-spacing: -2%;
`,
}
function fontStr({ fontWeight, fontSize, lineHeight, letterSpacing }: Font) {
return `
font-family: 'SUIT', sans-serif;
font-style: normal;
font-weight : ${fontWeight};
font-size : ${fontSize};
line-height : ${lineHeight};
letter-spacing: ${letterSpacing};
`;
}

function fontObj({ fontWeight, fontSize, lineHeight, letterSpacing }: Font) {
return {
fontFamily: "'SUIT', sans-serif",
fontStyle: 'normal',
fontWeight: `${fontWeight}`,
fontSize: `${fontSize}px`,
lineHeight: `${lineHeight}px`,
letterSpacing: `${letterSpacing}%`,
};
}

export const fontsObject = {
HEADING_48_B: fontObj({ fontWeight: 700, fontSize: 48, lineHeight: 72, letterSpacing: -2 }),
HEADING_32_B: fontObj({ fontWeight: 700, fontSize: 32, lineHeight: 48, letterSpacing: -2 }),
HEADING_28_B: fontObj({ fontWeight: 700, fontSize: 28, lineHeight: 42, letterSpacing: -2 }),
HEADING_24_B: fontObj({ fontWeight: 700, fontSize: 24, lineHeight: 36, letterSpacing: -2 }),
HEADING_20_B: fontObj({ fontWeight: 700, fontSize: 20, lineHeight: 30, letterSpacing: -2 }),
HEADING_18_B: fontObj({ fontWeight: 700, fontSize: 18, lineHeight: 28, letterSpacing: -2 }),
HEADING_16_B: fontObj({ fontWeight: 700, fontSize: 16, lineHeight: 24, letterSpacing: -2 }),
TITLE_32_SB: fontObj({ fontWeight: 600, fontSize: 32, lineHeight: 48, letterSpacing: -2 }),
TITLE_28_SB: fontObj({ fontWeight: 600, fontSize: 28, lineHeight: 42, letterSpacing: -2 }),
TITLE_24_SB: fontObj({ fontWeight: 600, fontSize: 24, lineHeight: 36, letterSpacing: -2 }),
TITLE_20_SB: fontObj({ fontWeight: 600, fontSize: 20, lineHeight: 30, letterSpacing: -2 }),
TITLE_18_SB: fontObj({ fontWeight: 600, fontSize: 18, lineHeight: 28, letterSpacing: -2 }),
TITLE_16_SB: fontObj({ fontWeight: 600, fontSize: 16, lineHeight: 24, letterSpacing: -1.5 }),
TITLE_14_SB: fontObj({ fontWeight: 600, fontSize: 14, lineHeight: 20, letterSpacing: -1.5 }),
BODY_18_M: fontObj({ fontWeight: 500, fontSize: 18, lineHeight: 30, letterSpacing: -1.5 }),
BODY_16_M: fontObj({ fontWeight: 500, fontSize: 16, lineHeight: 26, letterSpacing: -1.5 }),
BODY_16_R: fontObj({ fontWeight: 400, fontSize: 16, lineHeight: 26, letterSpacing: -1.5 }),
BODY_14_M: fontObj({ fontWeight: 500, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
BODY_14_R: fontObj({ fontWeight: 400, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
BODY_14_L: fontObj({ fontWeight: 300, fontSize: 14, lineHeight: 22, letterSpacing: -1.5 }),
BODY_13_M: fontObj({ fontWeight: 500, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
BODY_13_R: fontObj({ fontWeight: 400, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
BODY_13_L: fontObj({ fontWeight: 300, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }),
LABEL_18_SB: fontObj({ fontWeight: 600, fontSize: 19, lineHeight: 24, letterSpacing: -2 }),
LABEL_16_SB: fontObj({ fontWeight: 600, fontSize: 16, lineHeight: 22, letterSpacing: -2 }),
LABEL_14_SB: fontObj({ fontWeight: 600, fontSize: 14, lineHeight: 18, letterSpacing: -2 }),
LABEL_12_SB: fontObj({ fontWeight: 600, fontSize: 12, lineHeight: 16, letterSpacing: -2 }),
LABEL_11_SB: fontObj({ fontWeight: 600, fontSize: 11, lineHeight: 14, letterSpacing: -2 }),
} satisfies Record<string, Font>;

export const fontsString = Object.fromEntries(
Object.entries(fontsObject).map(([key, value]) => [key, fontStr(value)])
) as Record<keyof typeof fontsObject, string>;
8 changes: 4 additions & 4 deletions packages/ui/theme.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { createGlobalTheme } from '@vanilla-extract/css';
import { colors } from '../colors/src';
import { fonts } from '../fonts/src';
import { fontsObject } from '../fonts/src/fonts';

export const theme = createGlobalTheme("body", {
export const theme = createGlobalTheme('body', {
colors,
fonts
fontsObject,
});

export default theme;
export default theme;

0 comments on commit 25cc5f3

Please sign in to comment.