@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
176 lines (172 loc) • 4.96 kB
JavaScript
'use strict';
var system = require('@nex-ui/system');
var toSlots = require('../shared/toSlots.cjs');
var variants = require('../shared/variants.cjs');
const buttonRecipe = system.defineSlotRecipe({
slots: {
root: {
position: 'relative',
transition: 'colors',
lineHeight: 'base',
overflow: 'hidden',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
_focusVisibleRing: {
outline: '{borders.md} {colors.colorPalette.primary}',
outlineOffset: '0.5'
}
},
startIcon: {
display: 'inherit',
ml: '-1',
mr: '2',
'& svg': {
fs: '1.25em'
}
},
endIcon: {
display: 'inherit',
ml: '2',
mr: '-1',
'& svg': {
fs: '1.25em'
}
}
},
variants: {
variant: {
outlined: {
root: {
bg: 'transparent',
border: 'md',
borderColor: {
_DEFAULT: 'colorPalette.primary',
_hover: 'colorPalette.secondary',
_expanded: 'colorPalette.secondary'
},
color: {
_DEFAULT: 'colorPalette.primary',
_hover: 'colorPalette.secondary',
_expanded: 'colorPalette.secondary'
}
}
},
solid: {
root: {
bg: {
_DEFAULT: 'colorPalette.primary',
_hover: 'colorPalette.secondary',
_expanded: 'colorPalette.secondary'
},
color: 'colorPalette.contrastText'
}
},
ghost: {
root: {
color: 'colorPalette.500',
bg: {
_DEFAULT: 'transparent',
_hover: 'colorPalette.500/10',
_expanded: 'colorPalette.500/10'
}
}
},
faded: {
root: {
bg: {
_DEFAULT: 'colorPalette.100',
_hover: 'colorPalette.50',
_expanded: 'colorPalette.50',
_dark: {
_DEFAULT: 'colorPalette.800/50',
_hover: 'colorPalette.900/50',
_expanded: 'colorPalette.900/50'
}
},
color: {
_DEFAULT: 'colorPalette.600',
_dark: 'colorPalette.400'
}
}
}
},
size: toSlots.toSlots(variants.sizeVariant, 'root'),
disabled: toSlots.toSlots(variants.disabledVariant, 'root'),
loading: toSlots.toSlots(variants.disabledVariant, 'root'),
fullWidth: toSlots.toSlots(variants.fullWidth, 'root'),
radius: toSlots.toSlots(variants.radiusVariant, 'root'),
iconOnly: {
true: {
root: {
px: '0.5'
}
}
},
color: toSlots.toSlots(variants.colorVariant, 'root'),
rippleDisabled: {
true: {
root: {
transition: 'scale',
_active: {
scale: '0.95'
}
}
}
}
},
compoundVariants: [
{
size: 'sm',
iconOnly: true,
css: {
root: {
w: '8',
fs: '1.5em'
}
}
},
{
size: 'md',
iconOnly: true,
css: {
root: {
w: '10',
fs: '1.7em'
}
}
},
{
size: 'lg',
iconOnly: true,
css: {
root: {
w: '12',
fs: '1.9em'
}
}
},
{
iconOnly: true,
loading: true,
css: {
startIcon: {
ml: 0,
mr: 0,
fs: '1em'
},
endIcon: {
ml: 0,
mr: 0,
fs: '1em'
}
}
}
],
defaultVariants: {
variant: 'solid',
size: 'md',
radius: 'md'
}
});
exports.buttonRecipe = buttonRecipe;