@latte-macchiat-io/latte-vanilla-components 0.0.433 → 0.0.435

package/package.json

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

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

@@ -33,8 +33,8 @@ export const modalContentRecipe = recipe(
         left: '50%',
         display: 'flex',
         position: 'fixed',
+        overflowY: 'auto',
         flexDirection: 'column',
-
         color: themeContract.colors.text,
         transform: 'translate(-50%, -50%)',
         borderRadius: themeContract.modal.borderRadius,

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

@@ -1,7 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
@@ -46,12 +45,10 @@ globalStyle('p:last-of-type', {
 });
 
 globalStyle('p + ul', {
-  paddingTop: 15,
-
   '@media': {
-    [queries.sm]: {
-      paddingTop: 30,
-    },
+    ...generateResponsiveMedia({
+      paddingBottom: themeContract.paragraph.plusList.paddingBottom,
+    }),
   },
 });
 

package/src/components/Paragraph/theme.ts

@@ -8,6 +8,14 @@ const themeParagraphBase = {
       xl: '50px',
       '2xl': '50px',
     },
+    plusList: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
   },
 };
 

package/src/theme/contract.css.ts

@@ -383,6 +383,16 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-paragraph-paddingBottom-xl',
       '2xl': 'latte-paragraph-paddingBottom-2xl',
     },
+    plusList: {
+      paddingBottom: {
+        mobile: 'latte-paragraph-plusList-paddingBottom-mobile',
+        sm: 'latte-paragraph-plusList-paddingBottom-sm',
+        md: 'latte-paragraph-plusList-paddingBottom-md',
+        lg: 'latte-paragraph-plusList-paddingBottom-lg',
+        xl: 'latte-paragraph-plusList-paddingBottom-xl',
+        '2xl': 'latte-paragraph-plusList-paddingBottom-2xl',
+      },
+    },
   },
 
   logo: {