@latte-macchiat-io/latte-vanilla-components 0.0.448 → 0.0.450

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.448",
+  "version": "0.0.450",
   "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

@@ -41,7 +41,7 @@ export const box = recipe({
   base: [boxBase, boxAdjacent],
 
   variants: {
-    backgroundColor: {
+    variant: {
       primary: {
         backgroundColor: themeContract.section.variant.primary.backgroundColor,
       },
@@ -105,7 +105,7 @@ export const box = recipe({
     align: 'left',
     paddingTop: 'small',
     direction: 'column',
-    backgroundColor: 'primary',
+    variant: 'primary',
   },
 });
 

package/src/theme/baseThemeValues.ts

@@ -1,4 +1,5 @@
 import { themeActionsDark, themeActionsLight } from '../components/Actions/theme';
+import { themeBoxDark, themeBoxLight } from '../components/Box/theme';
 import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
 import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
@@ -151,6 +152,7 @@ export const baseLightTheme = {
 
   ...themeLogoLight,
   ...themeConsentCookieLight,
+  ...themeBoxLight,
 
   form: {
     ...themeFormLight.form,
@@ -290,6 +292,7 @@ export const baseDarkTheme = {
   ...themeLogoDark,
 
   ...themeConsentCookieDark,
+  ...themeBoxDark,
 
   form: {
     ...themeFormDark.form,

package/src/theme/createTheme.ts

@@ -34,6 +34,7 @@ export type ThemeOverrides = {
   carousel?: Partial<typeof baseLightTheme.carousel>;
   form?: Partial<typeof baseLightTheme.form>;
   logo?: Partial<typeof baseLightTheme.logo>;
+  box?: Partial<typeof baseLightTheme.box>;
   consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
 };
 
@@ -70,6 +71,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
     form: { ...baseLightTheme.form, ...overrides.form },
     logo: { ...baseLightTheme.logo, ...overrides.logo },
+    box: { ...baseLightTheme.box, ...overrides.box },
     consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
   });
 };
@@ -107,6 +109,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
     form: { ...baseDarkTheme.form, ...overrides.form },
     logo: { ...baseDarkTheme.logo, ...overrides.logo },
+    box: { ...baseDarkTheme.box, ...overrides.box },
     consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
   });
 };