@latte-macchiat-io/latte-vanilla-components 0.0.268 → 0.0.269

package/package.json

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

package/src/components/Form/Row/styles.css.ts

@@ -12,7 +12,7 @@ export const rowRecipe = recipe(
 
       '@media': {
         ...generateResponsiveMedia({
-          gap: themeContract.form.row.gap,
+          gap: themeContract.formRow.gap,
         }),
       },
     },

package/src/components/Form/Row/theme.tsx

@@ -1,30 +1,24 @@
 const themeFormRowBase = {
-  form: {
-    row: {
-      gap: {
-        mobile: '15px',
-        sm: '15px',
-        md: '30px',
-        lg: '30px',
-        xl: '50px',
-        '2xl': '50px',
-      },
+  formRow: {
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
     },
   },
 };
 
 export const themeFormRowLight = {
-  form: {
-    row: {
-      ...themeFormRowBase.form.row,
-    },
+  formRow: {
+    ...themeFormRowBase.formRow,
   },
 };
 
 export const themeFormRowDark = {
-  form: {
-    row: {
-      ...themeFormRowBase.form.row,
-    },
+  formRow: {
+    ...themeFormRowBase.formRow,
   },
 };

package/src/components/Form/theme.tsx

@@ -57,7 +57,6 @@ const themeFormBase = {
 export const themeFormLight = {
   form: {
     ...themeFormBase.form,
-    ...themeFormRowLight.form,
     backgroundColor: '#000000',
   },
 };
@@ -65,7 +64,6 @@ export const themeFormLight = {
 export const themeFormDark = {
   form: {
     ...themeFormBase.form,
-    ...themeFormRowDark.form,
     backgroundColor: '#000000',
   },
 };

package/src/theme/baseThemeValues.ts

@@ -3,6 +3,7 @@ import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
 import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
 import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
+import { themeFormRowDark, themeFormRowLight } from '../components/Form/Row/theme';
 import { themeFormDark, themeFormLight } from '../components/Form/theme';
 import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
 import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
@@ -141,6 +142,7 @@ export const baseLightTheme = {
 
   ...themeVideoLight,
   ...themeFormLight,
+  ...themeFormRowLight,
 };
 
 export const baseDarkTheme = {
@@ -270,4 +272,5 @@ export const baseDarkTheme = {
   ...themeVideoDark,
 
   ...themeFormDark,
+  ...themeFormRowDark,
 };

package/src/theme/contract.css.ts

@@ -906,15 +906,15 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-form-paddingLeft-xl',
       '2xl': 'latte-form-paddingLeft-2xl',
     },
-    row: {
-      gap: {
-        mobile: 'latte-form-row-gap-mobile',
-        sm: 'latte-form-row-gap-sm',
-        md: 'latte-form-row-gap-md',
-        lg: 'latte-form-row-gap-lg',
-        xl: 'latte-form-row-gap-xl',
-        '2xl': 'latte-form-row-gap-2xl',
-      },
+  },
+  formRow: {
+    gap: {
+      mobile: 'latte-formRow-gap-mobile',
+      sm: 'latte-formRow-gap-sm',
+      md: 'latte-formRow-gap-md',
+      lg: 'latte-formRow-gap-lg',
+      xl: 'latte-formRow-gap-xl',
+      '2xl': 'latte-formRow-gap-2xl',
     },
   },
 });

package/src/theme/createTheme.ts

@@ -31,6 +31,7 @@ export type ThemeOverrides = {
   video?: Partial<typeof baseLightTheme.video>;
   carousel?: Partial<typeof baseLightTheme.carousel>;
   form?: Partial<typeof baseLightTheme.form>;
+  formRow?: Partial<typeof baseLightTheme.formRow>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -63,6 +64,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     video: { ...baseLightTheme.video, ...overrides.video },
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
     form: { ...baseLightTheme.form, ...overrides.form },
+    formRow: { ...baseLightTheme.formRow, ...overrides.formRow },
   });
 };
 
@@ -96,6 +98,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     video: { ...baseDarkTheme.video, ...overrides.video },
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
     form: { ...baseDarkTheme.form, ...overrides.form },
+    formRow: { ...baseDarkTheme.formRow, ...overrides.formRow },
   });
 };