@reusable-ui/basic
Version:
A styled basic building block of Reusable-UI components.
91 lines (90 loc) • 3.3 kB
JavaScript
// cssfn:
import {
// reads/writes css variables configuration:
cssConfig, } from '@cssfn/core'; // writes css in javascript
// reusable-ui core:
import {
// a color management system:
colors,
// a border (stroke) management system:
borders, borderRadiuses,
// a spacer (gap) management system:
spacers,
// a typography management system:
typos, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// configs:
export const [basics, basicValues, cssBasicConfig] = cssConfig(() => {
const bases = {
// backgrounds:
backg: 'transparent',
altBackg: colors.primary,
backgGrad: [
['linear-gradient(180deg, rgba(255,255,255, 0.2), rgba(0,0,0, 0.2))', 'border-box'],
],
// foregrounds:
foreg: 'currentColor',
altForeg: colors.primaryText,
// borders:
borderStyle: borders.style,
borderWidth: borders.defaultWidth,
borderColor: borders.color,
borderRadiusSm: borderRadiuses.sm,
borderRadiusMd: borderRadiuses.md,
borderRadiusLg: borderRadiuses.lg,
// rings:
ring: colors.secondaryThin,
// animations:
defaultAnimationDuration: '300ms',
// spacings:
paddingInlineSm: spacers.sm,
paddingBlockSm: spacers.xs,
paddingInlineMd: [['calc((', spacers.sm, '+', spacers.md, ')/2)']],
paddingBlockMd: [['calc((', spacers.xs, '+', spacers.sm, ')/2)']],
paddingInlineLg: spacers.md,
paddingBlockLg: spacers.sm,
// typos:
fontSizeSm: [['calc((', typos.fontSizeSm, '+', typos.fontSizeMd, ')/2)']],
fontSizeMd: typos.fontSizeMd,
fontSizeLg: typos.fontSizeLg,
fontFamily: 'inherit',
fontWeight: 'inherit',
fontStyle: 'inherit',
textDecoration: 'inherit',
lineHeight: 'inherit',
};
const subs = {
// animations:
transition: [
// appearances:
['opacity', bases.defaultAnimationDuration, 'ease-out'],
// sizes:
['inline-size', bases.defaultAnimationDuration, 'ease-out'],
['block-size', bases.defaultAnimationDuration, 'ease-out'],
// backgrounds:
['background', bases.defaultAnimationDuration, 'ease-out'],
// foregrounds:
['color', bases.defaultAnimationDuration, 'ease-out'],
// borders:
['border', bases.defaultAnimationDuration, 'ease-out'],
['border-radius', bases.defaultAnimationDuration, 'ease-out'],
// spacings:
// ['padding' , bases.defaultAnimationDuration, 'ease-out'], // beautiful but uncomfortable
// typos:
['font-size', bases.defaultAnimationDuration, 'ease-out'],
],
};
const defaults = {
// borders:
borderRadius: bases.borderRadiusMd,
// spacings:
paddingInline: bases.paddingInlineMd,
paddingBlock: bases.paddingBlockMd,
// typos:
fontSize: bases.fontSizeMd,
};
return {
...bases,
...subs,
...defaults,
};
}, { prefix: 'bsc' });