message: feat: split and export alert baseStyle and variants
diff: @@ -5,37 +5,54 @@ import {
  transparentize,
  } from "@chakra-ui/theme-tools"
  -const alert = multiStyleConfig({
  - parts: {
  +function getBg(props: Record<string, any>) {
  + const { theme, colorScheme: c } = props
  + const lightBg = getColor(theme, `${c}.100`, c)
  + const darkBg = transparentize(`${c}.200`, 0.16)(theme)
  + return mode(lightBg, darkBg)(props)
  +}
  +
  +const parts = {
  container: "the alert container",
  title: "the alert title",
  icon: "the alert icon",
  - },
  - baseStyle: {
  - container: {
  +}
  +
  +const baseStyleContainer = {
  px: 4,
  py: 3,
  - },
  - title: {
  +}
  +
  +const baseStyleTitle = {
  fontWeight: "bold",
  lineHeight: "normal",
  - },
  - icon: {
  +}
  +
  +const baseStyleIcon = {
  mr: 3,
  w: 5,
  h: 5,
  - },
  - },
  - variants: {
  - subtle: function (props) {
  +}
  +
  +const baseStyle = {
  + container: baseStyleContainer,
  + title: baseStyleTitle,
  + icon: baseStyleIcon,
  +}
  +
  +const defaultProps = {
  + variant: "subtle",
  +}
  +
  +const variantSubtle = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  return {
  container: { bg: getBg(props) },
  icon: { color: mode(`${c}.500`, `${c}.200`)(props) },
  }
  - },
  +}
  - "left-accent": function (props) {
  +const variantLeftAccent = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  return {
  container: {
  @@ -48,9 +65,9 @@ const alert = multiStyleConfig({
  color: mode(`${c}.500`, `${c}.200`)(props),
  },
  }
  - },
  +}
  - "top-accent": function (props) {
  +const variantTopAccent = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  return {
  container: {
  @@ -63,9 +80,9 @@ const alert = multiStyleConfig({
  color: mode(`${c}.500`, `${c}.200`)(props),
  },
  }
  - },
  +}
  - solid: function (props) {
  +const variantSolid = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  return {
  container: {
  @@ -73,19 +90,32 @@ const alert = multiStyleConfig({
  color: mode(`white`, `gray.900`)(props),
  },
  }
  - },
  - },
  +}
  - defaultProps: {
  - variant: "subtle",
  - },
  +const variants = {
  + subtle: variantSubtle,
  + "left-accent": variantLeftAccent,
  + "top-accent": variantTopAccent,
  + solid: variantSolid,
  +}
  +
  +const alert = multiStyleConfig({
  + parts,
  + baseStyle,
  + variants,
  + // @ts-ignore
  + defaultProps,
  })
  -function getBg(props: Record<string, any>) {
  - const { theme, colorScheme: c } = props
  - const lightBg = getColor(theme, `${c}.100`, c)
  - const darkBg = transparentize(`${c}.200`, 0.16)(theme)
  - return mode(lightBg, darkBg)(props)
  +export const alertStyles = {
  + parts,
  + baseStyleContainer,
  + baseStyleTitle,
  + baseStyleIcon,
  + variantSubtle,
  + variantLeftAccent,
  + variantTopAccent,
  + variantSolid,
  + defaultProps,
  }
  -
  export default alert
  