feat: add alert recipe and fade keyframes, update font sizes and global styles

src/recipes/alert.ts

@@ -0,0 +1,106 @@
+import { defineSlotRecipe, type SystemStyleObject } from '@pandacss/dev'
+
+export const alertSlots = ['root', 'title', 'description', 'closeButton', 'actionsContainer'] as const
+
+interface AlertRecipeArg {
+  semanticColorNames: string[]
+}
+
+const alertRecipe = ({ semanticColorNames }: AlertRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames]
+  return defineSlotRecipe({
+    className: 'alert',
+    slots: alertSlots,
+    base: {
+      root: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'xs',
+        padding: 'sm',
+        borderRadius: 'md',
+        backgroundColor: 'var(--alert-background-color)',
+        color: 'var(--alert-color)'
+      },
+      title: {
+        color: 'var(--alert-color)',
+        fontWeight: 'semibold',
+        lineHeight: 'tight',
+        '&[aria-level="1"]': {
+          fontSize: 'h1'
+        },
+        '&[aria-level="2"]': {
+          fontSize: 'h2'
+        },
+        '&[aria-level="3"]': {
+          fontSize: 'h3'
+        },
+        '&[aria-level="4"]': {
+          fontSize: 'h4'
+        },
+        '&[aria-level="5"]': {
+          fontSize: 'h5'
+        },
+        '&[aria-level="6"]': {
+          fontSize: 'h6'
+        }
+      },
+      description: {
+        color: 'var(--alert-color)'
+      },
+      closeButton: {
+        all: 'unset',
+        position: 'absolute',
+        top: 'sm',
+        right: 'sm',
+        cursor: 'pointer',
+        color: 'var(--alert-color)'
+      },
+      actionsContainer: {
+        display: 'flex',
+        gap: 'xs',
+        justifyContent: 'flex-end'
+      }
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              ...Object.fromEntries(
+                alertSlots.map((slot) => {
+                  switch (slot) {
+                    case 'root':
+                      return [
+                        slot,
+                        {
+                          '--alert-background-color': `{colors.${color}.3}`,
+                          '--alert-color': `{colors.${color}.12}`
+                        } as SystemStyleObject
+                      ]
+                    case 'title':
+                      return [slot, {} as SystemStyleObject]
+                    case 'closeButton':
+                      return [slot, {} as SystemStyleObject]
+                    case 'description':
+                      return [slot, {} as SystemStyleObject]
+                    case 'actionsContainer':
+                      return [slot, {} as SystemStyleObject]
+                    default:
+                      return [slot, {} as SystemStyleObject]
+                  }
+                })
+              )
+            }
+          ])
+        )
+      }
+    },
+    defaultVariants: {
+      color: 'neutral'
+    }
+  })
+}
+
+export default alertRecipe

src/recipes/mark.ts

@@ -20,7 +20,17 @@ const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
     },
     variants: {
       color: {
-        ...Object.fromEntries(colors.map((color) => [color, {}]))
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              '&::selection': {
+                backgroundColor: `{colors.${color}.2}`,
+                color: `{colors.${color}.9}`
+              }
+            }
+          ])
+        )
       },
       variant: {
         ...Object.fromEntries(markVariants.map((variant) => [variant, {}]))
@@ -34,15 +44,34 @@ const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
               color,
               variant,
               css: {
-                margin: '0 -0.4em',
-                padding: '0.1em 0.4em 0.1em 0.4em',
-                borderRadius: '0.8em 0.3em',
-                boxDecorationBreak: 'clone',
-                WebkitBoxDecorationBreak: 'clone',
+                position: 'relative',
+                marginBlock: '0',
+                marginInline: '-0.4ch',
+                paddingBlock: '0.2ch',
+                paddingInline: '0.6ch',
+                borderTopLeftRadius: '0.5em 40%',
+                borderTopRightRadius: '0.3em 15%',
+                borderBottomLeftRadius: '0.45em 80%',
+                borderBottomRightRadius: '0.75em 60%',
                 backgroundClip: 'padding-box',
                 fontWeight: 'semibold',
-                backgroundImage: `linear-gradient(to right, color-mix(in srgb, {colors.${color}.9} 10%,transparent) 0%, color-mix(in srgb, {colors.${color}.9} 73%, transparent) 12%, color-mix(in srgb, {colors.${color}.9} 25%, transparent) 100%)`,
-                color: `{colors.${color}.foreground}`
+                color: `{colors.${color}.foreground}`,
+                _before: {
+                  content: '""',
+                  position: 'absolute',
+                  inset: '0',
+                  width: '100%',
+                  height: '80%',
+                  top: '50%',
+                  left: '50%',
+                  boxDecorationBreak: 'clone',
+                  WebkitBoxDecorationBreak: 'clone',
+                  borderRadius: 'inherit',
+                  background: 'inherit',
+                  backgroundImage: `linear-gradient(to right,color-mix(in srgb, {colors.${color}.9} 15%,transparent) 0%,color-mix(in srgb, {colors.${color}.9} 65%, transparent) 12%, color-mix(in srgb, {colors.${color}.9} 20%, transparent 80%))`,
+                  transform: 'translate(-50%, -50%) skewX(-15deg)',
+                  zIndex: '-1'
+                }
               } as SystemStyleObject
             }
           case 'bold':
@@ -70,7 +99,7 @@ const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
       })
     ),
     defaultVariants: {
-      color: 'neutral',
+      color: 'primary',
       variant: 'highlight'
     }
   })