@latte-macchiat-io/latte-vanilla-components 0.0.480 → 0.0.481

package/package.json

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

package/src/components/ExpandCollapse/Item/styles.css.ts

@@ -1,22 +1,26 @@
 import { globalStyle, style } from '@vanilla-extract/css';
+import { themeContract } from '../../../theme/contract.css';
+import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const collapseExpandItem = style({
   gap: 0,
   display: 'flex',
-  borderRadius: 20,
   flexDirection: 'column',
   transition: 'gap 0.3s ease-out',
-  // backgroundColor: brandColorGreyXXLight,
 
-  // '@media': generateResponsiveMedia({
-  //   padding: breakpointMapper([8, 8, 8, 8, 8, 8]),
-  // }),
+  border: themeContract.expandCollapse.item.border,
+  borderRadius: themeContract.expandCollapse.item.borderRadius,
+  backgroundColor: themeContract.expandCollapse.item.backgroundColor,
+
+  '@media': generateResponsiveMedia({
+    padding: themeContract.expandCollapse.item.padding,
+  }),
 });
 
 export const collapseExpandItemOpen = style({
-  // '@media': generateResponsiveMedia({
-  //   gap: breakpointMapper([10, 10, 10, 15, 15, 15]),
-  // }),
+  '@media': generateResponsiveMedia({
+    gap: themeContract.expandCollapse.item.gap,
+  }),
 });
 
 export const collapseExpandItemTitle = style({
@@ -33,6 +37,7 @@ export const collapseExpandItemTitle = style({
 });
 
 export const collapseExpandTitleIcon = style({
+  margin: 0,
   transition: 'transform 0.3s ease-out',
 
   // '@media': generateResponsiveMedia({

package/src/components/ExpandCollapse/theme.ts

@@ -19,17 +19,47 @@ const themeExpandCollapseBase = {
         '2xl': '50px',
       },
     },
+
+    item: {
+      border: '',
+      borderRadius: '',
+
+      gap: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+      padding: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+    },
   },
 };
 
 export const themeExpandCollapseLight = {
   expandCollapse: {
     ...themeExpandCollapseBase.expandCollapse,
+    item: {
+      ...themeExpandCollapseBase.expandCollapse.item,
+      backgroundColor: '',
+    },
   },
 };
 
 export const themeExpandCollapseDark = {
   expandCollapse: {
     ...themeExpandCollapseBase.expandCollapse,
+    item: {
+      ...themeExpandCollapseBase.expandCollapse.item,
+      backgroundColor: '',
+    },
   },
 };

package/src/theme/contract.css.ts

@@ -1289,5 +1289,28 @@ export const themeContract = createGlobalThemeContract({
         '2xl': 'latte-expandCollapse-list-gap-2xl',
       },
     },
+    item: {
+      border: 'latte-expandCollapse-item-border',
+      borderRadius: 'latte-expandCollapse-item-borderRadius',
+      backgroundColor: 'latte-expandCollapse-item-backgroundColor',
+
+      padding: {
+        mobile: 'latte-expandCollapse-item-padding-mobile',
+        sm: 'latte-expandCollapse-item-padding-sm',
+        md: 'latte-expandCollapse-item-padding-md',
+        lg: 'latte-expandCollapse-item-padding-lg',
+        xl: 'latte-expandCollapse-item-padding-xl',
+        '2xl': 'latte-expandCollapse-item-padding-2xl',
+      },
+
+      gap: {
+        mobile: 'latte-expandCollapse-item-gap-mobile',
+        sm: 'latte-expandCollapse-item-gap-sm',
+        md: 'latte-expandCollapse-item-gap-md',
+        lg: 'latte-expandCollapse-item-gap-lg',
+        xl: 'latte-expandCollapse-item-gap-xl',
+        '2xl': 'latte-expandCollapse-item-gap-2xl',
+      },
+    },
   },
 });