design-system-simplefi
Version:
Design System for SimpleFi Applications
90 lines • 2.56 kB
JavaScript
import { colors } from '../colors';
import { pxToRem } from '../../utils';
import { BASE_FONT_SIZE, BASE_LINE_HEIGHT } from '../constants';
var family = {
base: "'NBInternationalPro', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif",
mono: "'space-mono', 'Courier New', Courier, monospace",
};
var size = {
h0: pxToRem(BASE_FONT_SIZE * 2.625),
h1: pxToRem(BASE_FONT_SIZE * 2.25),
h2: pxToRem(BASE_FONT_SIZE * 1.875),
h3: pxToRem(BASE_FONT_SIZE * 1.5),
h4: pxToRem(BASE_FONT_SIZE * 1.125),
lg: pxToRem(BASE_FONT_SIZE * 1),
md: pxToRem(BASE_FONT_SIZE * 0.8125),
sm: pxToRem(BASE_FONT_SIZE * 0.6875),
xs: pxToRem(BASE_FONT_SIZE * 0.625), // 10px
};
var weight = {
light: 200,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
};
var lineHeight = {
xxxl: pxToRem(BASE_LINE_HEIGHT * 2.5),
xxl: pxToRem(BASE_LINE_HEIGHT * 2),
xl: pxToRem(BASE_LINE_HEIGHT * 1.5),
lg: pxToRem(BASE_LINE_HEIGHT),
md: pxToRem(BASE_LINE_HEIGHT * 0.75),
sm: pxToRem(BASE_LINE_HEIGHT * 0.5), // 10px
};
var margin = {
heading: {
h0: {
top: pxToRem(BASE_LINE_HEIGHT * 4),
bottom: pxToRem(BASE_LINE_HEIGHT * 4), // 50px
},
h1: {
top: pxToRem(BASE_LINE_HEIGHT * 3),
bottom: pxToRem(BASE_LINE_HEIGHT * 3), // 45px
},
h2: {
top: pxToRem(BASE_LINE_HEIGHT * 2),
bottom: pxToRem(BASE_LINE_HEIGHT * 2), // 30px
},
h3: {
top: pxToRem(BASE_LINE_HEIGHT * 1.5),
bottom: pxToRem(BASE_LINE_HEIGHT * 1.5), // 20px
},
h4: {
top: pxToRem(BASE_LINE_HEIGHT * 1),
bottom: pxToRem(BASE_LINE_HEIGHT * 1), // 15px
},
},
paragraph: {
bottom: pxToRem(BASE_LINE_HEIGHT * 0.5), // 10px
},
};
var links = {
primary: {
color: colors.deepBlue,
hoverColor: colors.lightPurple,
activeColor: colors.deepPurple,
decoration: 'none',
},
danger: {
color: colors.neonCoral,
hoverColor: colors.neonPink,
activeColor: colors.neonPink,
decoration: 'none',
},
secondary: {
color: colors.midGrey,
hoverColor: colors.darkGrey,
activeColor: colors.darkGrey,
decoration: 'underline',
},
};
var typography = {
family: family,
size: size,
weight: weight,
lineHeight: lineHeight,
margin: margin,
links: links,
};
export default typography;
//# sourceMappingURL=typography.js.map