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

src/index.ts

@@ -6,9 +6,11 @@ import detailsRecipe from '@/recipes/details.js'
 import inputRecipe from '@/recipes/input.js'
 import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
 import generateSemanticColors from './colors/generateSemanticColors.js'
+import fadeKeyframes from './keyframes/fade.js'
 import pulseKeyframes from './keyframes/pulse.js'
 import shimmerKeyframes from './keyframes/shimmer.js'
 import skeletonPattern from './patterns/skeleton.js'
+import alertRecipe from './recipes/alert.js'
 import chipRecipe from './recipes/chip.js'
 import iconButtonRecipe from './recipes/iconButton.js'
 import markRecipe from './recipes/mark.js'
@@ -40,6 +42,7 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
     },
     theme: {
       recipes: {
+        alert: alertRecipe({ semanticColorNames: semanticColorKeysArray }),
         button: buttonRecipe({ semanticColorNames: semanticColorKeysArray }),
         chip: chipRecipe({ semanticColorNames: semanticColorKeysArray }),
         details: detailsRecipe({ semanticColorNames: semanticColorKeysArray }),
@@ -84,24 +87,24 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
           sm: { value: '0.875em' },
           base: { value: '1em' },
           lg: { value: '1.125em' },
-          xl: { value: '1.5em' },
-          h1: { value: '3em' },
-          h2: { value: '2.5em' },
-          h3: { value: '2.25em' },
-          h4: { value: '2em' },
-          h5: { value: '1.75em' },
+          xl: { value: '1.375em' },
           h6: { value: '1.5em' },
+          h5: { value: '1.625em' },
+          h4: { value: '1.75em' },
+          h3: { value: '1.875em' },
+          h2: { value: '2em' },
+          h1: { value: '2.25em' },
           rxs: { value: '0.75rem' },
           rsm: { value: '0.875rem' },
           rbase: { value: '1rem' },
           rlg: { value: '1.25rem' },
-          rxl: { value: '1.5rem' },
-          rh1: { value: '3rem' },
-          rh2: { value: '2.5rem' },
-          rh3: { value: '2.25rem' },
-          rh4: { value: '2rem' },
-          rh5: { value: '1.75rem' },
-          rh6: { value: '1.5rem' }
+          rxl: { value: '1.375rem' },
+          rh6: { value: '1.5rem' },
+          rh5: { value: '1.625rem' },
+          rh4: { value: '1.75rem' },
+          rh3: { value: '1.875rem' },
+          rh2: { value: '2rem' },
+          rh1: { value: '2.25rem' }
         },
         fontWeights: {
           thin: { value: '100' },
@@ -173,7 +176,8 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
       animationStyles: {},
       keyframes: {
         ...shimmerKeyframes,
-        ...pulseKeyframes
+        ...pulseKeyframes,
+        ...fadeKeyframes
       },
       semanticTokens: {
         colors: {
@@ -181,6 +185,70 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
           ...semanticColors
         }
       }
+    },
+    globalCss: {
+      '*, *:before, *:after': {
+        boxSizing: 'border-box',
+        margin: 0,
+        padding: 0
+      },
+      body: {
+        backgroundColor: 'neutral.1',
+        color: 'neutral.12'
+      },
+      'img, picture, video, canvas, svg ': {
+        display: 'block',
+        maxWidth: '100%'
+      },
+      'input, button, textarea, select': {
+        font: 'inherit'
+      },
+      button: {
+        cursor: 'pointer'
+      },
+      'h1, h2, h3, h4, h5, h6': {
+        fontWeight: 'bold',
+        lineHeight: 'tight'
+      },
+      h1: {
+        fontSize: 'h1'
+      },
+      h2: {
+        fontSize: 'h2'
+      },
+      h3: {
+        fontSize: 'h3'
+      },
+      h4: {
+        fontSize: 'h4'
+      },
+      h5: {
+        fontSize: 'h5'
+      },
+      h6: {
+        fontSize: 'h6'
+      },
+      p: {
+        fontSize: 'base',
+        lineHeight: 'normal',
+        textWrap: 'pretty'
+      },
+      small: {
+        fontSize: 'xs'
+      },
+      a: {
+        color: 'inherit',
+        textDecoration: 'none',
+        fontWeight: 'semibold',
+        _hover: {
+          color: 'primary.9'
+        }
+      },
+      '@media (prefers-reduced-motion: no-preference)': {
+        html: {
+          interpolateSize: 'allow-keywords'
+        }
+      }
     }
   })
 }