@latte-macchiat-io/latte-vanilla-components 0.0.279 → 0.0.281

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.279",
+  "version": "0.0.281",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Button/styles.css.ts

@@ -125,6 +125,7 @@ export const buttonRecipe = recipe(
 
     defaultVariants: {
       size: 'md',
+      fullWidth: false,
       variant: 'primary',
     },
   },

package/src/components/Header/styles.css.ts

@@ -34,7 +34,6 @@ export const headerRecipe = recipe(
     variants: {
       isFixed: {
         true: { position: 'fixed' },
-        false: { position: 'relative' },
       },
     },
 
@@ -63,7 +62,9 @@ export const headerOverlayRecipe = recipe(
     base: {
       inset: 0,
       zIndex: 25,
+      opacity: 0,
       position: 'fixed',
+      visibility: 'hidden',
       backgroundColor: themeContract.header.overlayBackgroundColor,
       transition: themeContract.header.overlayBackgroundTransition,
 
@@ -84,10 +85,6 @@ export const headerOverlayRecipe = recipe(
           opacity: 1,
           visibility: 'visible',
         },
-        false: {
-          opacity: 0,
-          visibility: 'hidden',
-        },
       },
     },
 

package/src/components/Paragraph/styles.css.ts

@@ -40,7 +40,7 @@ export const paragraphRecipe = recipe(
       align: 'left',
     },
   },
-  'actions'
+  'paragraph'
 );
 
 globalStyle('p:last-of-type', {

package/src/components/Section/styles.css.ts

@@ -11,13 +11,18 @@ export const sectionRecipe = recipe(
         width: '100%',
         display: 'flex',
         margin: '0 auto',
+        minHeight: 'auto',
         position: 'relative',
         flexDirection: 'column',
+        justifyContent: 'flex-start',
+        color: themeContract.colors.text,
 
         '@media': {
           ...generateResponsiveMedia({
+            paddingTop: themeContract.section.paddingTop,
             paddingLeft: themeContract.global.paddingLeft,
             paddingRight: themeContract.global.paddingRight,
+            paddingBottom: themeContract.section.paddingBottom,
           }),
         },
       },
@@ -54,42 +59,20 @@ export const sectionRecipe = recipe(
         true: {
           color: themeContract.colors.textLight,
         },
-        false: {
-          color: themeContract.colors.text,
-        },
       },
       isFullHeight: {
         true: {
           minHeight: '100vh',
           justifyContent: 'center',
         },
-        false: {
-          minHeight: 'auto',
-          justifyContent: 'flex-start',
-        },
       },
       isHeaderFixed: {
         true: {},
-        false: {},
       },
       withPaddingTop: {
-        true: {
-          '@media': {
-            ...generateResponsiveMedia({
-              paddingTop: themeContract.section.paddingTop,
-            }),
-          },
-        },
         false: { paddingTop: 'none' },
       },
       withPaddingBottom: {
-        true: {
-          '@media': {
-            ...generateResponsiveMedia({
-              paddingBottom: themeContract.section.paddingBottom,
-            }),
-          },
-        },
         false: { paddingBottom: 'none' },
       },
     },
@@ -112,8 +95,6 @@ export const sectionRecipe = recipe(
       isDark: false,
       isFullHeight: false,
       isHeaderFixed: false,
-      withPaddingTop: true,
-      withPaddingBottom: true,
       variant: 'transparent',
     },
   },