@guruhotel/aura-ui/esm/alert/alert.styles.js

⚛️ React UI library by GuruHotel

import{Stack as t}from"../stack";import{Text as e}from"../text";import{styled as s}from"../theme";export const StyledCloseButton=s("button",{all:"unset",fontFamily:"inherit",rounded:"$full",p:"$1",display:"inline-flex",alignItems:"center",justifyContent:"center",variants:{size:{xs:{size:"$2"},sm:{size:"$2"},md:{size:"$2"},lg:{size:"$2"},xl:{size:"$3"}}}});export const StyledAlert=s(t,{paddingX:"$4",paddingY:"$3",spacing:"$2",rounded:"$lg",variants:{variant:{solid:{},"left-accent":{},"top-accent":{}},status:{success:{},error:{},warning:{},info:{}}},defaultVariants:{variant:"solid",status:"success"},compoundVariants:[{status:"error",variant:"solid",css:{bg:"$red5",color:"$red12"}},{status:"error",variant:"left-accent",css:{bg:"$red5",color:"$red12",borderLeftWidth:"medium",borderLeftStyle:"solid"}},{status:"error",variant:"top-accent",css:{bg:"$red5",color:"$red12",borderTopWidth:"medium",borderTopStyle:"solid"}},{status:"info",variant:"solid",css:{bg:"$guru5",color:"$guru12"}},{status:"info",variant:"left-accent",css:{bg:"$guru5",color:"$guru12",borderLeftWidth:"medium",borderLeftStyle:"solid"}},{status:"info",variant:"top-accent",css:{bg:"$guru5",color:"$guru12",borderTopWidth:"medium",borderTopStyle:"solid"}},{status:"success",variant:"solid",css:{bg:"$nature5",color:"$nature12"}},{status:"success",variant:"left-accent",css:{bg:"$nature5",color:"$nature12",borderLeftWidth:"medium",borderLeftStyle:"solid"}},{status:"success",variant:"top-accent",css:{bg:"$nature5",color:"$nature12",borderTopWidth:"medium",borderTopStyle:"solid"}},{status:"warning",variant:"solid",css:{bg:"$sunshine5",color:"$sunshine12"}},{status:"warning",variant:"left-accent",css:{bg:"$sunshine5",color:"$sunshine12",borderLeftWidth:"medium",borderLeftStyle:"solid"}},{status:"warning",variant:"top-accent",css:{bg:"$sunshine5",color:"$sunshine12",borderTopWidth:"medium",borderTopStyle:"solid"}}]});export const AlertTitle=s(e,{fontWeight:"$bold",fontSize:"$md"});export const AlertDescription=s(e,{fontWeight:"$normal",fontSize:"$sm"});