@reusable-ui/button-icon
Version:
A button component with a nice icon.
69 lines (68 loc) • 2.52 kB
JavaScript
// cssfn:
import {
// reads/writes css variables configuration:
cssConfig, } from '@cssfn/core'; // writes css in javascript
// reusable-ui core:
import {
// a typography management system:
typos, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import {
// configs:
basics, } from '@reusable-ui/basic'; // a base component
import {
// configs:
buttons, } from '@reusable-ui/button'; // a base component
// configs:
export const [buttonIcons, buttonIconValues, cssButtonIconConfig] = cssConfig(() => {
const bases = {
// borders:
borderRadiusXs: basics.borderRadiusSm,
borderRadiusSm: basics.borderRadiusSm,
borderRadiusMd: basics.borderRadiusMd,
borderRadiusLg: basics.borderRadiusLg,
borderRadiusXl: basics.borderRadiusLg,
// spacings:
paddingInlineXs: basics.paddingInlineSm,
paddingBlockXs: basics.paddingBlockSm,
paddingInlineSm: basics.paddingInlineSm,
paddingBlockSm: basics.paddingBlockSm,
paddingInlineMd: basics.paddingInlineMd,
paddingBlockMd: basics.paddingBlockMd,
paddingInlineLg: basics.paddingInlineLg,
paddingBlockLg: basics.paddingBlockLg,
paddingInlineXl: basics.paddingInlineLg,
paddingBlockXl: basics.paddingBlockLg,
gapInlineXs: buttons.gapInlineSm,
gapBlockXs: buttons.gapBlockSm,
gapInlineSm: buttons.gapInlineSm,
gapBlockSm: buttons.gapBlockSm,
gapInlineMd: buttons.gapInlineMd,
gapBlockMd: buttons.gapBlockMd,
gapInlineLg: buttons.gapInlineLg,
gapBlockLg: buttons.gapBlockLg,
gapInlineXl: buttons.gapInlineLg,
gapBlockXl: buttons.gapBlockLg,
// typos:
fontSizeXs: typos.fontSizeSm,
fontSizeSm: [['calc((', typos.fontSizeSm, '+', typos.fontSizeMd, ')/2)']],
fontSizeMd: typos.fontSizeMd,
fontSizeLg: typos.fontSizeLg,
fontSizeXl: typos.fontSizeXl,
};
const defaults = {
// borders:
borderRadius: bases.borderRadiusMd,
// spacings:
paddingInline: bases.paddingInlineMd,
paddingBlock: bases.paddingBlockMd,
gapInline: bases.gapInlineMd,
gapBlock: bases.gapBlockMd,
// typos:
fontSize: bases.fontSizeMd,
};
return {
...bases,
...defaults,
};
}, { prefix: 'btni' });