@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
288 lines • 8.18 kB
JavaScript
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
import { createTheme as muiCreateTheme, } from '@mui/material/styles';
import px from "../../helpers/px";
import { customPalette } from './palette';
var theme = muiCreateTheme();
export var primaryFontFamily = [
'"Work Sans"',
'Roboto',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Oxygen',
'Ubuntu',
'Cantarell',
'"Open Sans"',
'sans-serif',
].join(', ');
export var secondaryFontFamily = [
'Roboto',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Oxygen',
'Ubuntu',
'Cantarell',
'"Open Sans"',
'sans-serif',
].join(', ');
export var tertiaryFontFamily = [
'Roboto Mono',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Oxygen',
'Ubuntu',
'Cantarell',
'"Open Sans"',
'sans-serif',
].join(', ');
export var BASE_FONT_SIZE = {
fontSize: px(16),
letterSpacing: px(0),
lineHeight: px(24),
};
export var INPUT_FONT_SIZE = {
fontSize: px(16),
letterSpacing: px(0),
lineHeight: px(20),
};
// Base values found here:
// https://github.com/act-org/dls/blob/main/src/styles/themeActEt/typography.ts
var typography = {
allVariants: __assign(__assign({}, BASE_FONT_SIZE), { color: customPalette.text.over.light.high, fontFamily: primaryFontFamily }),
body1: __assign(__assign({ '& > strong': {
fontWeight: 600,
} }, BASE_FONT_SIZE), (_a = { fontFamily: secondaryFontFamily, fontSize: '16px', fontWeight: 400, lineHeight: '24px' }, _a[theme.breakpoints.up('xs')] = {
fontSize: '16px',
lineHeight: '24px',
}, _a[theme.breakpoints.up('sm')] = {
fontSize: '16px',
lineHeight: '24px',
}, _a[theme.breakpoints.up('lg')] = {
fontSize: '16px',
lineHeight: '24px',
}, _a)),
body2: (_b = {
'& > strong': {
fontWeight: 700,
},
fontFamily: secondaryFontFamily,
fontSize: '14px',
fontWeight: 400,
letterSpacing: px(0),
lineHeight: '20px'
},
_b[theme.breakpoints.up('xs')] = {
fontSize: '14px',
lineHeight: '20px',
},
_b[theme.breakpoints.up('sm')] = {
fontSize: '14px',
lineHeight: '20px',
},
_b[theme.breakpoints.up('lg')] = {
fontSize: '14px',
lineHeight: '20px',
},
_b),
button: __assign(__assign({}, INPUT_FONT_SIZE), { fontFamily: primaryFontFamily, fontSize: '16px', fontWeight: 600, lineHeight: '20px' }),
caption: {
fontFamily: secondaryFontFamily,
fontSize: 12,
fontWeight: 400,
letterSpacing: px(1),
lineHeight: px(20),
},
fontFamily: primaryFontFamily,
fontWeightBold: 800,
fontWeightLight: 500,
fontWeightMedium: 600,
fontWeightRegular: 400,
h1: (_c = {
fontFamily: primaryFontFamily,
fontSize: 32,
fontWeight: 600,
letterSpacing: px(-1),
lineHeight: px(38)
},
_c[theme.breakpoints.up('xs')] = {
fontSize: 32,
lineHeight: px(38),
},
_c[theme.breakpoints.up('sm')] = {
fontSize: 48,
lineHeight: px(64),
},
_c[theme.breakpoints.up('lg')] = {
fontSize: 48,
lineHeight: px(64),
},
_c),
h2: (_d = {
fontFamily: primaryFontFamily,
fontSize: '28px',
fontWeight: 500,
letterSpacing: px(-1),
lineHeight: '32px'
},
_d[theme.breakpoints.up('xs')] = {
fontSize: '28px',
lineHeight: '32px',
},
_d[theme.breakpoints.up('sm')] = {
fontSize: '40px',
fontWeight: 600,
lineHeight: '48px',
},
_d[theme.breakpoints.up('lg')] = {
fontSize: '40px',
fontWeight: 600,
lineHeight: '48px',
},
_d),
h3: (_e = {
fontFamily: primaryFontFamily,
fontSize: '24px',
fontWeight: 600,
letterSpacing: px(-1),
lineHeight: '32px'
},
_e[theme.breakpoints.up('xs')] = {
fontSize: '24px',
lineHeight: '32px',
},
_e[theme.breakpoints.up('sm')] = {
fontSize: '32px',
lineHeight: '40px',
},
_e[theme.breakpoints.up('lg')] = {
fontSize: '32px',
lineHeight: '40px',
},
_e),
h4: (_f = {
fontFamily: primaryFontFamily,
fontSize: '20px',
fontWeight: 600,
letterSpacing: px(-0.5),
lineHeight: '24px'
},
_f[theme.breakpoints.up('xs')] = {
fontSize: '20px',
lineHeight: '24px',
},
_f[theme.breakpoints.up('sm')] = {
fontSize: '28px',
lineHeight: '40px',
},
_f[theme.breakpoints.up('lg')] = {
fontSize: '28px',
lineHeight: '40px',
},
_f),
h5: (_g = {
fontFamily: primaryFontFamily,
fontSize: '18px',
fontWeight: 600,
lineHeight: '22px'
},
_g[theme.breakpoints.up('sm')] = {
fontSize: '24px',
letterSpacing: px(-0.75),
lineHeight: '32px',
},
_g),
h6: (_h = {
fontFamily: primaryFontFamily,
fontSize: '18px',
fontWeight: 500,
letterSpacing: px(-0.5),
lineHeight: '24px'
},
_h[theme.breakpoints.up('xs')] = {
fontSize: '18px',
lineHeight: '24px',
},
_h[theme.breakpoints.up('sm')] = {
fontSize: '18px',
fontWeight: 600,
lineHeight: '24px',
},
_h[theme.breakpoints.up('lg')] = {
fontSize: '18px',
fontWeight: 600,
lineHeight: '24px',
},
_h),
overline: {
fontFamily: tertiaryFontFamily,
fontSize: 14,
fontWeight: 500,
letterSpacing: px(1),
lineHeight: px(20),
},
subtitle1: (_j = {
fontFamily: secondaryFontFamily,
fontSize: '18px',
fontWeight: 400,
letterSpacing: px(0),
lineHeight: px(24),
textTransform: undefined
},
_j[theme.breakpoints.up('xs')] = {
fontSize: '18px',
lineHeight: '24px',
},
_j[theme.breakpoints.up('sm')] = {
fontSize: '18px',
lineHeight: '24px',
},
_j[theme.breakpoints.up('lg')] = {
fontSize: '18px',
lineHeight: '24px',
},
_j),
subtitle2: (_k = {
fontFamily: secondaryFontFamily,
fontSize: 16,
fontWeight: 400,
letterSpacing: px(0),
lineHeight: px(24)
},
_k[theme.breakpoints.up('xs')] = {
fontSize: '16px',
lineHeight: '24px',
},
_k[theme.breakpoints.up('sm')] = {
fontSize: '16px',
lineHeight: '24px',
},
_k[theme.breakpoints.up('lg')] = {
fontSize: '16px',
lineHeight: '24px',
},
_k),
};
export default typography;
//# sourceMappingURL=typography.js.map