@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
82 lines (79 loc) • 2.23 kB
JavaScript
import { defineSlotRecipe } from '@nex-ui/system';
import { toSlots } from '../shared/toSlots.mjs';
import { colorVariant, radiusVariant } from '../shared/variants.mjs';
const alertRecipe = defineSlotRecipe({
slots: {
root: {
display: 'flex',
alignItems: 'center',
px: '4',
py: '3',
gap: '3',
overflow: 'hidden'
},
icon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 26
},
content: {
flex: 1,
minHeight: '8',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
gap: '1',
color: 'inherit'
},
title: {
fontWeight: 'medium',
fs: 'md',
color: 'inherit'
},
description: {
fs: 'md',
opacity: 0.9,
color: 'inherit'
},
closeButton: {}
},
variants: {
variant: {
solid: {
root: {
bg: 'colorPalette.primary',
color: 'colorPalette.contrastText'
},
closeButton: {
color: 'colorPalette.contrastText'
}
},
outlined: {
root: {
bg: 'transparent',
border: 'sm',
borderColor: 'colorPalette.primary',
color: 'colorPalette.tertiary'
}
},
faded: {
root: {
bg: 'colorPalette.subtle',
color: 'colorPalette.tertiary'
}
},
subtle: {
root: {
bg: 'colorPalette.subtle',
color: 'colorPalette.tertiary',
border: 'sm',
borderColor: 'colorPalette.highlight'
}
}
},
color: toSlots(colorVariant, 'root', 'closeButton'),
radius: toSlots(radiusVariant, 'root')
}
});
export { alertRecipe };