@reusable-ui/button
Version:
A button component for initiating an action.
35 lines (34 loc) • 1.01 kB
JavaScript
// cssfn:
import {
// reads/writes css variables configuration:
cssConfig, } from '@cssfn/core'; // writes css in javascript
// reusable-ui core:
import {
// a spacer (gap) management system:
spacers, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// configs:
export const [buttons, buttonValues, cssButtonConfig] = cssConfig(() => {
const bases = {
// spacings:
gapInlineSm: spacers.xs,
gapBlockSm: spacers.xs,
gapInlineMd: spacers.sm,
gapBlockMd: spacers.sm,
gapInlineLg: spacers.md,
gapBlockLg: spacers.md,
// typos:
whiteSpace: 'normal',
// ghosts:
ghostOpacity: 0.5,
ghostOpacityArrive: 1,
};
const defaults = {
// spacings:
gapInline: bases.gapInlineMd,
gapBlock: bases.gapBlockMd,
};
return {
...bases,
...defaults,
};
}, { prefix: 'btn' });