@reusable-ui/typos
Version:
Texts, paragraphs, fonts and more.
70 lines (69 loc) • 2.98 kB
JavaScript
// cssfn:
import {
// writes css in javascript:
rule, rules, ifFirstChild, ifLastChild, ifNotLastChild, nextSiblings, globalScope,
// reads/writes css variables configuration:
usesCssProps, usesSuffixedProps, overwriteProps,
// utilities:
flat, } from '@cssfn/core'; // writes css in javascript
// internals:
import {
// configs:
headings, } from '../configs/headings.js';
// styles:
export const usesHeadingRule = (cssProps, selector, conditions = '&', levels = [1, 2, 3, 4, 5, 6]) => {
const selectors = (flat(selector)
.filter((selector) => (!!selector || (selector === '')) && (selector !== true)));
const selectorsWithLevels = (levels
.flatMap((level) => selectors
.map((selector) => ((selector === '&') ? '&' : `${selector}${level}`))));
return rules([
// shared rule for h1-h6:
rule(selectorsWithLevels, {
...rule(conditions, {
// layouts:
display: 'block',
// spacings:
...ifFirstChild({
marginBlockStart: 0, // kill the top_margin at the first heading
}),
...ifLastChild({
marginBlockEnd: 0, // kill the bottom_margin at the last heading
}),
...nextSiblings(selectorsWithLevels, {
...rule(conditions, {
/*
* treats subsequent headings as subtitles
* make it closer to the main heading
* make it further to the content
*/
// appearances:
opacity: cssProps.subOpacity,
// spacings:
// make the subtitle closer to the main heading:
marginBlockStart: `calc(0px - ${cssProps.marginBlockEnd})`,
...ifNotLastChild({
// make subtitle further to the content:
marginBlockEnd: cssProps.marginBlockEnd,
}),
}, { specificityWeight: 0 }),
}),
// customize:
...usesCssProps(cssProps),
}, { specificityWeight: 0 }),
}),
// individual rule for each h1-h6:
levels
.map((level) => rule(selectors.map((selector) => ((selector === '&') ? '&' : `${selector}${level}`)), {
...rule(conditions, {
// customize with propName{level}:
...overwriteProps(cssProps, usesSuffixedProps(cssProps, `${level}`)),
}, { specificityWeight: 0 }),
})),
]);
};
export default () => [
globalScope({
...usesHeadingRule(headings, ['h', '.h'], `:not(:where(${[1, 2, 3, 4, 5, 6].map((level) => `.display-${level}`).join(', ')}, .lead))`),
}),
];