@latte-macchiat-io/latte-vanilla-components 0.0.449 → 0.0.451

package/package.json

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

package/src/components/Box/index.tsx

@@ -15,14 +15,14 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> &
     background?: string;
   };
 
-export const Box = ({ align, vAlign, children, backgroundColor, isLight, className, direction, isReversed, paddingTop }: BoxProps) => {
+export const Box = ({ align, vAlign, children, variant, isLight, className, direction, isReversed, paddingTop }: BoxProps) => {
   return (
     <div
       className={cn(
         box({
           align,
           direction,
-          backgroundColor,
+          variant,
           isReversed,
           paddingTop,
         }),

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

@@ -8,6 +8,8 @@ export const boxBase = style({
   display: 'flex',
   position: 'relative',
   alignItems: 'stretch',
+
+  border: themeContract.box.border,
   borderRadius: themeContract.box.borderRadius,
 
   selectors: {
@@ -19,7 +21,7 @@ export const boxBase = style({
   '@media': {
     ...generateResponsiveMedia({
       gap: themeContract.box.gap,
-      paddingTop: themeContract.box.paddingTop,
+      paddingTop: themeContract.box.paddingTop.sm,
       paddingLeft: themeContract.box.paddingLeft,
       paddingRight: themeContract.box.paddingRight,
       paddingBottom: themeContract.box.paddingBottom,
@@ -30,9 +32,9 @@ export const boxBase = style({
 export const boxAdjacent = style({
   selectors: {
     [`${boxBase} + &`]: {
-      // '@media': generateResponsiveMedia({
-      //   marginTop: breakpointMapper([20, 20, 30, 30, 40, 40]),
-      // }),
+      '@media': generateResponsiveMedia({
+        marginTop: themeContract.box.adjacent.marginTop,
+      }),
     },
   },
 });
@@ -41,7 +43,7 @@ export const box = recipe({
   base: [boxBase, boxAdjacent],
 
   variants: {
-    backgroundColor: {
+    variant: {
       primary: {
         backgroundColor: themeContract.section.variant.primary.backgroundColor,
       },
@@ -89,14 +91,14 @@ export const box = recipe({
     paddingTop: {
       small: {},
       medium: {
-        // '@media': generateResponsiveMedia({
-        //   paddingTop: breakpointMapper([100, 100, 115, 115, 130, 130]),
-        // }),
+        '@media': generateResponsiveMedia({
+          paddingTop: themeContract.box.paddingTop.md,
+        }),
       },
       large: {
-        // '@media': generateResponsiveMedia({
-        //   paddingTop: breakpointMapper([90, 90, 120, 120, 180, 240]),
-        // }),
+        '@media': generateResponsiveMedia({
+          paddingTop: themeContract.box.paddingTop.lg,
+        }),
       },
     },
   },
@@ -105,19 +107,10 @@ export const box = recipe({
     align: 'left',
     paddingTop: 'small',
     direction: 'column',
-    backgroundColor: 'primary',
+    variant: 'primary',
   },
 });
 
-export const boxBackground = style({
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 0,
-  position: 'absolute',
-});
-
 export const boxContent = recipe({
   base: [
     {
@@ -149,31 +142,5 @@ export const boxContent = recipe({
   },
 });
 
-export const boxVisual = style({
-  width: '100%',
-  height: '60vw',
-  display: 'flex',
-  position: 'relative',
-
-  '@media': {
-    [queries.md]: {
-      width: '45%',
-      height: 'auto',
-      minWidth: '40%',
-    },
-  },
-});
-
-export const boxVisualDefaultStyle = style({
-  margin: 'auto',
-  position: 'relative',
-
-  '@media': {
-    [queries.md]: {
-      height: '100%',
-    },
-  },
-});
-
 export type BoxVariants = RecipeVariants<typeof box>;
 export type BoxContentVariants = RecipeVariants<typeof boxContent>;

package/src/components/Box/theme.ts

@@ -12,12 +12,9 @@ const themeBoxBase = {
       '2xl': '50px',
     },
     paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
+      sm: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      md: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      lg: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
     },
     paddingLeft: {
       mobile: '15px',
@@ -43,17 +40,50 @@ const themeBoxBase = {
       xl: '50px',
       '2xl': '50px',
     },
+
+    adjacent: {
+      marginTop: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+    },
   },
 };
 
 export const themeBoxLight = {
   box: {
     ...themeBoxBase.box,
+    variant: {
+      transparent: {
+        backgroundColor: '',
+      },
+      primary: {
+        backgroundColor: '',
+      },
+      secondary: {
+        backgroundColor: '',
+      },
+    },
   },
 };
 
 export const themeBoxDark = {
   box: {
     ...themeBoxBase.box,
+    variant: {
+      transparent: {
+        backgroundColor: '',
+      },
+      primary: {
+        backgroundColor: '',
+      },
+      secondary: {
+        backgroundColor: '',
+      },
+    },
   },
 };

package/src/theme/contract.css.ts

@@ -645,13 +645,42 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-box-gap-xl',
       '2xl': 'latte-box-gap-2xl',
     },
+    variant: {
+      transparent: {
+        backgroundColor: 'latte-box-variant-transparent-backgroundColor',
+      },
+      primary: {
+        backgroundColor: 'latte-box-variant-primary-backgroundColor',
+      },
+      secondary: {
+        backgroundColor: 'latte-box-variant-secondary-backgroundColor',
+      },
+    },
     paddingTop: {
-      mobile: 'latte-box-paddingTop-mobile',
-      sm: 'latte-box-paddingTop-sm',
-      md: 'latte-box-paddingTop-md',
-      lg: 'latte-box-paddingTop-lg',
-      xl: 'latte-box-paddingTop-xl',
-      '2xl': 'latte-box-paddingTop-2xl',
+      sm: {
+        mobile: 'latte-box-paddingTop-sm-mobile',
+        sm: 'latte-box-paddingTop-sm-sm',
+        md: 'latte-box-paddingTop-sm-md',
+        lg: 'latte-box-paddingTop-sm-lg',
+        xl: 'latte-box-paddingTop-sm-xl',
+        '2xl': 'latte-box-paddingTop-sm-2xl',
+      },
+      md: {
+        mobile: 'latte-box-paddingTop-md-mobile',
+        sm: 'latte-box-paddingTop-md-sm',
+        md: 'latte-box-paddingTop-md-md',
+        lg: 'latte-box-paddingTop-md-lg',
+        xl: 'latte-box-paddingTop-md-xl',
+        '2xl': 'latte-box-paddingTop-md-2xl',
+      },
+      lg: {
+        mobile: 'latte-box-paddingTop-lg-mobile',
+        sm: 'latte-box-paddingTop-lg-sm',
+        md: 'latte-box-paddingTop-lg-md',
+        lg: 'latte-box-paddingTop-lg-lg',
+        xl: 'latte-box-paddingTop-lg-xl',
+        '2xl': 'latte-box-paddingTop-lg-xl',
+      },
     },
     paddingLeft: {
       mobile: 'latte-box-paddingLeft-mobile',
@@ -677,6 +706,17 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-box-paddingBottom-xl',
       '2xl': 'latte-box-paddingBottom-2xl',
     },
+
+    adjacent: {
+      marginTop: {
+        mobile: 'latte-box-adjacent-marginTop-mobile',
+        sm: 'latte-box-adjacent-marginTop-sm',
+        md: 'latte-box-adjacent-marginTop-md',
+        lg: 'latte-box-adjacent-marginTop-lg',
+        xl: 'latte-box-adjacent-marginTop-xl',
+        '2xl': 'latte-box-adjacent-marginTop-2xl',
+      },
+    },
   },
 
   modal: {