@reusable-ui/typos
Version:
Texts, paragraphs, fonts and more.
82 lines (81 loc) • 2.61 kB
JavaScript
// cssfn:
import {
// reads/writes css variables configuration:
cssConfig, } from '@cssfn/core'; // writes css in javascript
// reusable-ui configs:
import {
// configs:
colors, } from '@reusable-ui/colors'; // a color management system
// configs:
export const [typos, typoValues, cssTypoConfig] = cssConfig(() => {
const bases = {
// backgrounds:
/**
* The default is a solid color of `colors.backg`.
* It can be an image or gradient with the average color of `colors.backg`.
*/
backg: colors.backg,
// foregrounds:
foreg: colors.foreg,
// typos:
fontSizeMd: '16px' /* do not use `rem`, because we're on `:root` */,
fontFamilySansSerief: [
'system-ui',
'-apple-system',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'"Noto Sans"',
'"Liberation Sans"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
fontFamilyMonospace: [
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
fontWeightLighter: 'lighter',
fontWeightLight: 300,
fontWeightNormal: 400,
fontWeightSemibold: 600,
fontWeightBold: 700,
fontWeightBolder: 'bolder',
fontStyle: 'normal',
textDecoration: 'none',
lineHeightSm: 1.25,
lineHeightMd: 1.50,
lineHeightLg: 2.00,
overflowWrap: 'break-word',
};
const subs = {
// typos:
fontSizeXs: [['calc(', bases.fontSizeMd, '*', 0.50, ')']],
fontSizeSm: [['calc(', bases.fontSizeMd, '*', 0.75, ')']],
fontSizeLg: [['calc(', bases.fontSizeMd, '*', 1.25, ')']],
fontSizeXl: [['calc(', bases.fontSizeMd, '*', 1.50, ')']],
fontSizeXxl: [['calc(', bases.fontSizeMd, '*', 1.75, ')']],
fontSizeXxxl: [['calc(', bases.fontSizeMd, '*', 2.00, ')']],
};
const defaults = {
// typos:
fontSize: bases.fontSizeMd,
fontFamily: bases.fontFamilySansSerief,
fontWeight: bases.fontWeightNormal,
lineHeight: bases.lineHeightMd,
};
return {
...bases,
...subs,
...defaults,
};
}, { prefix: '' });
export { typos as default };