@reusable-ui/button-icon
Version:
A button component with a nice icon.
103 lines (74 loc) • 5.93 kB
text/typescript
// cssfn:
import {
// cssfn css specific types:
CssKnownProps,
// 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 as CssKnownProps['borderRadius' ],
borderRadiusSm : basics.borderRadiusSm as CssKnownProps['borderRadius' ],
borderRadiusMd : basics.borderRadiusMd as CssKnownProps['borderRadius' ],
borderRadiusLg : basics.borderRadiusLg as CssKnownProps['borderRadius' ],
borderRadiusXl : basics.borderRadiusLg as CssKnownProps['borderRadius' ],
// spacings:
paddingInlineXs : basics.paddingInlineSm as CssKnownProps['paddingInline'],
paddingBlockXs : basics.paddingBlockSm as CssKnownProps['paddingBlock' ],
paddingInlineSm : basics.paddingInlineSm as CssKnownProps['paddingInline'],
paddingBlockSm : basics.paddingBlockSm as CssKnownProps['paddingBlock' ],
paddingInlineMd : basics.paddingInlineMd as CssKnownProps['paddingInline'],
paddingBlockMd : basics.paddingBlockMd as CssKnownProps['paddingBlock' ],
paddingInlineLg : basics.paddingInlineLg as CssKnownProps['paddingInline'],
paddingBlockLg : basics.paddingBlockLg as CssKnownProps['paddingBlock' ],
paddingInlineXl : basics.paddingInlineLg as CssKnownProps['paddingInline'],
paddingBlockXl : basics.paddingBlockLg as CssKnownProps['paddingBlock' ],
gapInlineXs : buttons.gapInlineSm as CssKnownProps['gapInline' ],
gapBlockXs : buttons.gapBlockSm as CssKnownProps['gapBlock' ],
gapInlineSm : buttons.gapInlineSm as CssKnownProps['gapInline' ],
gapBlockSm : buttons.gapBlockSm as CssKnownProps['gapBlock' ],
gapInlineMd : buttons.gapInlineMd as CssKnownProps['gapInline' ],
gapBlockMd : buttons.gapBlockMd as CssKnownProps['gapBlock' ],
gapInlineLg : buttons.gapInlineLg as CssKnownProps['gapInline' ],
gapBlockLg : buttons.gapBlockLg as CssKnownProps['gapBlock' ],
gapInlineXl : buttons.gapInlineLg as CssKnownProps['gapInline' ],
gapBlockXl : buttons.gapBlockLg as CssKnownProps['gapBlock' ],
// typos:
fontSizeXs : typos.fontSizeSm as CssKnownProps['fontSize' ],
fontSizeSm : [['calc((', typos.fontSizeSm, '+', typos.fontSizeMd, ')/2)']] as CssKnownProps['fontSize' ],
fontSizeMd : typos.fontSizeMd as CssKnownProps['fontSize' ],
fontSizeLg : typos.fontSizeLg as CssKnownProps['fontSize' ],
fontSizeXl : typos.fontSizeXl as CssKnownProps['fontSize' ],
};
const defaults = {
// borders:
borderRadius : bases.borderRadiusMd as CssKnownProps['borderRadius' ],
// spacings:
paddingInline : bases.paddingInlineMd as CssKnownProps['paddingInline'],
paddingBlock : bases.paddingBlockMd as CssKnownProps['paddingBlock' ],
gapInline : bases.gapInlineMd as CssKnownProps['gapInline' ],
gapBlock : bases.gapBlockMd as CssKnownProps['gapBlock' ],
// typos:
fontSize : bases.fontSizeMd as CssKnownProps['fontSize' ],
};
return {
...bases,
...defaults,
};
}, { prefix: 'btni' });