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

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'
     }
   })