feat: ✨ Implement design system from figma file (#9)
Simon Mulquin simon@octree.ch
Thu, 13 Apr 2023 14:53:58 +0100
3 files changed,
833 insertions(+),
3 deletions(-)
A
frontend/figma.json
@@ -0,0 +1,673 @@
+{ + "default": { + "Body-1": { + "value": { + "fontFamily": "Inter", + "fontWeight": "Regular", + "fontSize": "15", + "letterSpacing": "3%", + "lineHeight": "{lineHeight-default}", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Body-1-neg": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "{default.Body-1.fontWeight}", + "fontSize": "{default.Body-1.fontSize}", + "letterSpacing": "{default.Body-1.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Body-1.textDecoration}", + "textCase": "{default.Body-1.textCase}" + }, + "type": "typography" + }, + "Body-1-underline": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "{default.Body-1.fontWeight}", + "fontSize": "{default.Body-1.fontSize}", + "lineHeight": "{default.Body-1.lineHeight}", + "letterSpacing": "{default.Body-1.letterSpacing}", + "textDecoration": "underline", + "textCase": "{default.Body-1.textCase}" + }, + "type": "typography" + }, + "Body-2": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "{default.Body-1.fontWeight}", + "fontSize": "13px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "2%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Body-2-neg": { + "value": { + "fontFamily": "{default.Body-2.fontFamily}", + "fontWeight": "{default.Body-2.fontWeight}", + "fontSize": "{default.Body-2.fontSize}", + "letterSpacing": "{default.Body-2.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Body-2.textDecoration}", + "textCase": "{default.Body-2.textCase}" + }, + "type": "typography" + }, + "Body-2-semibold": { + "value": { + "fontFamily": "{default.Body-2.fontFamily}", + "fontWeight": "Semi Bold", + "fontSize": "{default.Body-2.fontSize}", + "lineHeight": "{default.Body-2.lineHeight}", + "letterSpacing": "{default.Body-2.letterSpacing}", + "textDecoration": "{default.Body-2.textDecoration}", + "textCase": "{default.Body-2.textCase}" + }, + "type": "typography" + }, + "Button": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Medium", + "fontSize": "13px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "10%", + "textDecoration": "none", + "textCase": "uppercase" + }, + "type": "typography" + }, + "Button-neg": { + "value": { + "fontFamily": "{default.Button.fontFamily}", + "fontWeight": "{default.Button.fontWeight}", + "fontSize": "{default.Button.fontSize}", + "letterSpacing": "{default.Button.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Button.textDecoration}", + "textCase": "{default.Button.textCase}" + }, + "type": "typography" + }, + "Caption": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "12px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "3%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Caption-neg": { + "value": { + "fontFamily": "{default.Caption.fontFamily}", + "fontWeight": "{default.Caption.fontWeight}", + "fontSize": "{default.Caption.fontSize}", + "letterSpacing": "{default.Caption.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Caption.textDecoration}", + "textCase": "{default.Caption.textCase}" + }, + "type": "typography" + }, + "Overline": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "10px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "15%", + "textDecoration": "none", + "textCase": "uppercase" + }, + "type": "typography" + }, + "Overline-neg": { + "value": { + "fontFamily": "{default.Overline.fontFamily}", + "fontWeight": "{default.Overline.fontWeight}", + "fontSize": "{default.Overline.fontSize}", + "letterSpacing": "{default.Overline.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Overline.textDecoration}", + "textCase": "{default.Overline.textCase}" + }, + "type": "typography" + }, + "Subtitle-2": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Medium", + "fontSize": "13px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "0.7%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Subtitle-2-neg": { + "value": { + "fontFamily": "{default.Subtitle-2.fontFamily}", + "fontWeight": "{default.Subtitle-2.fontWeight}", + "fontSize": "{default.Subtitle-2.fontSize}", + "letterSpacing": "{default.Subtitle-2.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Subtitle-2.textDecoration}", + "textCase": "{default.Subtitle-2.textCase}" + }, + "type": "typography" + }, + "Subtitle-1": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "15px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "1%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Subtitle-1-neg": { + "value": { + "fontFamily": "{default.Subtitle-1.fontFamily}", + "fontWeight": "{default.Subtitle-1.fontWeight}", + "fontSize": "{default.Subtitle-1.fontSize}", + "letterSpacing": "{default.Subtitle-1.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Subtitle-1.textDecoration}", + "textCase": "{default.Subtitle-1.textCase}" + }, + "type": "typography" + }, + "Headline-6": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Medium", + "fontSize": "19px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "0.8%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-6-neg": { + "value": { + "fontFamily": "{default.Headline-6.fontFamily}", + "fontWeight": "Regular", + "fontSize": "{default.Headline-6.fontSize}", + "letterSpacing": "{default.Headline-6.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-6.textDecoration}", + "textCase": "{default.Headline-6.textCase}" + }, + "type": "typography" + }, + "Headline-5": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "23px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "0", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-5-neg": { + "value": { + "fontFamily": "{default.Headline-5.fontFamily}", + "fontWeight": "Light", + "fontSize": "{default.Headline-5.fontSize}", + "letterSpacing": "{default.Headline-5.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-5.textDecoration}", + "textCase": "{default.Headline-5.textCase}" + }, + "type": "typography" + }, + "Headline-4": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "33px", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "0.75%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-4-neg": { + "value": { + "fontFamily": "{default.Headline-4.fontFamily}", + "fontWeight": "Light", + "fontSize": "{default.Headline-4.fontSize}", + "letterSpacing": "{default.Headline-4.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-4.textDecoration}", + "textCase": "{default.Headline-4.textCase}" + }, + "type": "typography" + }, + "Headline-3": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Regular", + "fontSize": "46", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "0", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-3-neg": { + "value": { + "fontFamily": "{default.Headline-3.fontFamily}", + "fontWeight": "Light", + "fontSize": "{default.Headline-3.fontSize}", + "letterSpacing": "{default.Headline-3.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-3.textDecoration}", + "textCase": "{default.Headline-3.textCase}" + }, + "type": "typography" + }, + "Headline-2": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Light", + "fontSize": "58", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "-0.8%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-2-neg": { + "value": { + "fontFamily": "{default.Headline-2.fontFamily}", + "fontWeight": "Extra Light", + "fontSize": "{default.Headline-2.fontSize}", + "letterSpacing": "{default.Headline-2.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-2.textDecoration}", + "textCase": "{default.Headline-2.textCase}" + }, + "type": "typography" + }, + "Headline-1": { + "value": { + "fontFamily": "{default.Body-1.fontFamily}", + "fontWeight": "Light", + "fontSize": "93", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "-1.6%", + "textDecoration": "none", + "textCase": "undercase" + }, + "type": "typography" + }, + "Headline-1-neg": { + "value": { + "fontFamily": "{default.Headline-1.fontFamily}", + "fontWeight": "Extra Light", + "fontSize": "{default.Headline-1.fontSize}", + "letterSpacing": "{default.Headline-1.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Headline-1.textDecoration}", + "textCase": "{default.Headline-1.textCase}" + }, + "type": "typography" + }, + "Caption-underline": { + "value": { + "fontFamily": "{default.Caption.fontFamily}", + "fontWeight": "{default.Caption.fontWeight}", + "fontSize": "{default.Caption.fontSize}", + "lineHeight": "{default.Caption.lineHeight}", + "letterSpacing": "{default.Caption.letterSpacing}", + "textDecoration": "underline", + "textCase": "{default.Caption.textCase}" + }, + "type": "typography" + } + }, + "mono": { + "Body-1-mono": { + "value": { + "fontFamily": "IBM Plex mono", + "fontWeight": "{default.Body-1.fontWeight}", + "fontSize": "{default.Body-1.fontSize}", + "letterSpacing": "0", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Body-1.textDecoration}", + "textCase": "{default.Body-1.textCase}" + }, + "type": "typography" + }, + "Body-1-mono-neg": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{mono.Body-1-mono.fontWeight}", + "fontSize": "{mono.Body-1-mono.fontSize}", + "letterSpacing": "{mono.Body-1-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Body-1-mono.textDecoration}", + "textCase": "{mono.Body-1-mono.textCase}" + }, + "type": "typography" + }, + "Body-2-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Body-2.fontWeight}", + "fontSize": "{default.Body-2.fontSize}", + "letterSpacing": "0", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{default.Body-2.textDecoration}", + "textCase": "{default.Body-2.textCase}" + }, + "type": "typography" + }, + "Body-2-mono-neg": { + "value": { + "fontFamily": "{mono.Body-2-mono.fontFamily}", + "fontWeight": "{mono.Body-2-mono.fontWeight}", + "fontSize": "{mono.Body-2-mono.fontSize}", + "letterSpacing": "{mono.Body-2-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Body-2-mono.textDecoration}", + "textCase": "{mono.Body-2-mono.textCase}" + }, + "type": "typography" + }, + "Button-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Button.fontWeight}", + "fontSize": "{default.Button.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Button.letterSpacing}", + "textDecoration": "{default.Button.textDecoration}", + "textCase": "{default.Button.textCase}" + }, + "type": "typography" + }, + "Button-mono-neg": { + "value": { + "fontFamily": "{mono.Button-mono.fontFamily}", + "fontWeight": "{mono.Button-mono.fontWeight}", + "fontSize": "{mono.Button-mono.fontSize}", + "letterSpacing": "{mono.Button-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Button-mono.textDecoration}", + "textCase": "{mono.Button-mono.textCase}" + }, + "type": "typography" + }, + "Caption-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Caption.fontWeight}", + "fontSize": "{default.Caption.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Caption.letterSpacing}", + "textDecoration": "{default.Caption.textDecoration}", + "textCase": "{default.Caption.textCase}" + }, + "type": "typography" + }, + "Caption-mono-neg": { + "value": { + "fontFamily": "{mono.Caption-mono.fontFamily}", + "fontWeight": "{mono.Caption-mono.fontWeight}", + "fontSize": "{mono.Caption-mono.fontSize}", + "letterSpacing": "{mono.Caption-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Caption-mono.textDecoration}", + "textCase": "{mono.Caption-mono.textCase}" + }, + "type": "typography" + }, + "Overline-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Overline.fontWeight}", + "fontSize": "{default.Overline.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Overline.letterSpacing}", + "textDecoration": "{default.Overline.textDecoration}", + "textCase": "{default.Overline.textCase}" + }, + "type": "typography" + }, + "Overline-mono-neg": { + "value": { + "fontFamily": "{mono.Overline-mono.fontFamily}", + "fontWeight": "{mono.Overline-mono.fontWeight}", + "fontSize": "{mono.Overline-mono.fontSize}", + "letterSpacing": "{mono.Overline-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Overline-mono.textDecoration}", + "textCase": "{mono.Overline-mono.textCase}" + }, + "type": "typography" + }, + "Subtitle-2-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Subtitle-2.fontWeight}", + "fontSize": "{default.Subtitle-2.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Subtitle-2.letterSpacing}", + "textDecoration": "{default.Subtitle-2.textDecoration}", + "textCase": "{default.Subtitle-2.textCase}" + }, + "type": "typography" + }, + "Subtitle-2-mono-neg": { + "value": { + "fontFamily": "{mono.Subtitle-2-mono.fontFamily}", + "fontWeight": "{mono.Subtitle-2-mono.fontWeight}", + "fontSize": "{mono.Subtitle-2-mono.fontSize}", + "letterSpacing": "{mono.Subtitle-2-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Subtitle-2-mono.textDecoration}", + "textCase": "{mono.Subtitle-2-mono.textCase}" + }, + "type": "typography" + }, + "Subtitle-1-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Subtitle-1.fontWeight}", + "fontSize": "{default.Subtitle-1.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Subtitle-1.letterSpacing}", + "textDecoration": "{default.Subtitle-1.textDecoration}", + "textCase": "{default.Subtitle-1.textCase}" + }, + "type": "typography" + }, + "Subtitle-1-mono-neg": { + "value": { + "fontFamily": "{mono.Subtitle-1-mono.fontFamily}", + "fontWeight": "{mono.Subtitle-1-mono.fontWeight}", + "fontSize": "{mono.Subtitle-1-mono.fontSize}", + "letterSpacing": "{mono.Subtitle-1-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Subtitle-1-mono.textDecoration}", + "textCase": "{mono.Subtitle-1-mono.textCase}" + }, + "type": "typography" + }, + "Headline-6-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-6.fontWeight}", + "fontSize": "{default.Headline-6.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-6.letterSpacing}", + "textDecoration": "{default.Headline-6.textDecoration}", + "textCase": "{default.Headline-6.textCase}" + }, + "type": "typography" + }, + "Headline-6-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-6-mono.fontFamily}", + "fontWeight": "Regular", + "fontSize": "{mono.Headline-6-mono.fontSize}", + "letterSpacing": "{mono.Headline-6-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-6-mono.textDecoration}", + "textCase": "{mono.Headline-6-mono.textCase}" + }, + "type": "typography" + }, + "Headline-5-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-5.fontWeight}", + "fontSize": "{default.Headline-5.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-5.letterSpacing}", + "textDecoration": "{default.Headline-5.textDecoration}", + "textCase": "{default.Headline-5.textCase}" + }, + "type": "typography" + }, + "Headline-5-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-5-mono.fontFamily}", + "fontWeight": "Light", + "fontSize": "{mono.Headline-5-mono.fontSize}", + "letterSpacing": "{mono.Headline-5-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-5-mono.textDecoration}", + "textCase": "{mono.Headline-5-mono.textCase}" + }, + "type": "typography" + }, + "Headline-4-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-4.fontWeight}", + "fontSize": "{default.Headline-4.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-4.letterSpacing}", + "textDecoration": "{default.Headline-4.textDecoration}", + "textCase": "{default.Headline-4.textCase}" + }, + "type": "typography" + }, + "Headline-4-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-4-mono.fontFamily}", + "fontWeight": "Light", + "fontSize": "{mono.Headline-4-mono.fontSize}", + "letterSpacing": "{mono.Headline-4-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-4-mono.textDecoration}", + "textCase": "{mono.Headline-4-mono.textCase}" + }, + "type": "typography" + }, + "Headline-3-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-3.fontWeight}", + "fontSize": "{default.Headline-3.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-3.letterSpacing}", + "textDecoration": "{default.Headline-3.textDecoration}", + "textCase": "{default.Headline-3.textCase}", + "paragraphSpacing": "" + }, + "type": "typography" + }, + "Headline-3-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-3-mono.fontFamily}", + "fontWeight": "Light", + "fontSize": "{mono.Headline-3-mono.fontSize}", + "letterSpacing": "{mono.Headline-3-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-3-mono.textDecoration}", + "textCase": "{mono.Headline-3-mono.textCase}" + }, + "type": "typography" + }, + "Headline-2-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-2-mono.fontFamily}", + "fontWeight": "ExtraLight", + "fontSize": "{mono.Headline-2-mono.fontSize}", + "letterSpacing": "{mono.Headline-2-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-2-mono.textDecoration}", + "textCase": "{mono.Headline-2-mono.textCase}" + }, + "type": "typography" + }, + "Headline-1-mono-neg": { + "value": { + "fontFamily": "{mono.Headline-1-mono.fontFamily}", + "fontWeight": "ExtraLight", + "fontSize": "{mono.Headline-1-mono.fontSize}", + "letterSpacing": "{mono.Headline-1-mono.letterSpacing}", + "lineHeight": "{lineHeight-default}", + "textDecoration": "{mono.Headline-1-mono.textDecoration}", + "textCase": "{mono.Headline-1-mono.textCase}" + }, + "type": "typography" + }, + "Headline-2-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-2.fontWeight}", + "fontSize": "{default.Headline-2.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-2.letterSpacing}", + "textDecoration": "{default.Headline-2.textDecoration}", + "textCase": "{default.Headline-2.textCase}", + "paragraphSpacing": "" + }, + "type": "typography" + }, + "Headline-1-mono": { + "value": { + "fontFamily": "{mono.Body-1-mono.fontFamily}", + "fontWeight": "{default.Headline-1.fontWeight}", + "fontSize": "{default.Headline-1.fontSize}", + "lineHeight": "{lineHeight-default}", + "letterSpacing": "{default.Headline-1.letterSpacing}", + "textDecoration": "{default.Headline-1.textDecoration}", + "textCase": "{default.Headline-1.textCase}", + "paragraphSpacing": "" + }, + "type": "typography" + } + }, + "lineHeight-default": { + "value": "135%", + "type": "lineHeights" + } + }
M
frontend/theme.ts
→
frontend/theme/index.ts
@@ -1,4 +1,5 @@
import {createTheme} from '@mui/material/styles'; +import * as typography from './typography'; export const caroster = { palette: {@@ -37,9 +38,7 @@ },
}, }, }, - typography: { - fontFamily: ['Inter', 'sans-serif'], - }, + typography, breakpoints: { values: { xs: 0,
A
frontend/theme/typography.ts
@@ -0,0 +1,158 @@
+const weightScale = { + 'Extra Light': 200, + Light: 300, + Regular: 400, + Medium: 500, + 'Semi Bold': 600, +}; + +//Body-1 +export const body1 = { + fontFamily: 'Inter', + fontWeight: weightScale['Regular'], + fontSize: '15px', + letterSpacing: '3%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const body1Neg = body1; +export const body1Underline = {...body1, textDecoration: 'underline'}; + +//Body-2 +export const body2 = { + ...body1, + fontSize: '13px', + letterSpacing: '2%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const body2Neg = body2; +export const body2Semibold = {...body2, fontWeight: weightScale['Semi Bold']}; + +//Button +export const button = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Medium'], + fontSize: '13px', + letterSpacing: '10%', + textDecoration: 'none', + textCase: 'uppercase', +}; +export const buttonNeg = button; + +//Caption +export const caption = { + fontFamily: body1.fontFamily, + fontWeight: 'Regular', + fontSize: '12px', + letterSpacing: '3%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const captionNeg = caption; +export const captionUnderline = {...caption, textDecoration: 'underline'}; + +//Overline +export const overline = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Regular'], + fontSize: '10px', + letterSpacing: '15%', + textDecoration: 'none', + textCase: 'uppercase', +}; +export const overlineNeg = overline; + +//Subtitle-2 +export const subtitle2 = { + fontFamily: body1.fontFamily, + fontWeight: 'Medium', + fontSize: '13px', + letterSpacing: '0.7%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const subtitle2Neg = subtitle2; + +//Subtitle-1 +export const subtitle1 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Regular'], + fontSize: '15px', + letterSpacing: '1%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const subtitle1Neg = subtitle1; + +//Headline-6 +export const headline6 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Medium'], + fontSize: '19px', + letterSpacing: '0.8%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline6Neg = {...headline6, fontWeight: weightScale['Regular']}; + +//Headline-5 +export const headline5 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Regular'], + fontSize: '23px', + letterSpacing: '0', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline5Neg = {...headline5, fontWeight: weightScale['Light']}; + +//Headline-4 +export const headline4 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Regular'], + fontSize: '33px', + letterSpacing: '0.75%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline4Neg = {...headline4, fontWeight: weightScale['Light']}; + +//Headline-3 +export const headline3 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Regular'], + fontSize: '46px', + letterSpacing: '0', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline3Neg = {...headline3, fontWeight: weightScale['Light']}; + +//Headline-2 +export const headline2 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Light'], + fontSize: '58px', + letterSpacing: '-0.8%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline2Neg = { + ...headline2, + fontWeight: weightScale['Extra Light'], +}; + +//Headline-1 +export const headline1 = { + fontFamily: body1.fontFamily, + fontWeight: weightScale['Light'], + fontSize: '93px', + letterSpacing: '-1.6%', + textDecoration: 'none', + textCase: 'undercase', +}; +export const headline1Neg = { + ...headline1, + fontWeight: weightScale['Extra Light'], +};