@latte-macchiat-io/latte-vanilla-components 0.0.421 → 0.0.422

package/package.json

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

package/src/components/ConsentCookie/theme.ts

@@ -0,0 +1,33 @@
+const themeConsentCookieBase = {
+  consentCookie: {
+    border: 'none',
+    overlayBlur: '0',
+    borderRadius: '30px',
+
+    closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+    closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+
+    gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+    width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
+    paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+    paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+  },
+};
+
+export const themeConsentCookieLight = {
+  consentCookie: {
+    ...themeConsentCookieBase.consentCookie,
+    backgroundColor: '#000000',
+    closeButtonColor: '#000000',
+    overlayBackgroundColor: '#000000',
+  },
+};
+
+export const themeConsentCookieDark = {
+  consentCookie: {
+    ...themeConsentCookieBase.consentCookie,
+    backgroundColor: '#000000',
+    closeButtonColor: '#000000',
+    overlayBackgroundColor: '#000000',
+  },
+};

package/src/theme/baseThemeValues.ts

@@ -2,6 +2,7 @@ import { themeActionsDark, themeActionsLight } from '../components/Actions/theme
 import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
 import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
+import { themeConsentCookieDark, themeConsentCookieLight } from '../components/ConsentCookie/theme';
 import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
 import { themeFormRowDark, themeFormRowLight } from '../components/Form/Row/theme';
 import { themeFormTextFieldDark, themeFormTextFieldLight } from '../components/Form/TextField/theme';
@@ -149,6 +150,7 @@ export const baseLightTheme = {
   ...themeVideoLight,
 
   ...themeLogoLight,
+  ...themeConsentCookieLight,
 
   form: {
     ...themeFormLight.form,
@@ -265,7 +267,7 @@ export const baseDarkTheme = {
   ...themeParagraphDark,
 
   ...themeActionsDark,
-    ...themeListDark,
+  ...themeListDark,
   ...themeButtonDark,
   ...themeCarouselDark,
   ...themeColumnsDark,
@@ -287,6 +289,8 @@ export const baseDarkTheme = {
 
   ...themeLogoDark,
 
+  ...themeConsentCookieDark,
+
   form: {
     ...themeFormDark.form,
     ...themeFormRowDark,

package/src/theme/createTheme.ts

@@ -17,7 +17,7 @@ export type ThemeOverrides = {
   main?: Partial<typeof baseLightTheme.main>;
   section?: Partial<typeof baseLightTheme.section>;
   actions?: Partial<typeof baseLightTheme.actions>;
-    list?: Partial<typeof baseLightTheme.list>;
+  list?: Partial<typeof baseLightTheme.list>;
   button?: Partial<typeof baseLightTheme.button>;
   icon?: Partial<typeof baseLightTheme.icon>;
   columns?: Partial<typeof baseLightTheme.columns>;
@@ -34,6 +34,7 @@ export type ThemeOverrides = {
   carousel?: Partial<typeof baseLightTheme.carousel>;
   form?: Partial<typeof baseLightTheme.form>;
   logo?: Partial<typeof baseLightTheme.logo>;
+  consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -69,6 +70,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
     form: { ...baseLightTheme.form, ...overrides.form },
     logo: { ...baseLightTheme.logo, ...overrides.logo },
+    consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
   });
 };
 
@@ -105,6 +107,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
     form: { ...baseDarkTheme.form, ...overrides.form },
     logo: { ...baseDarkTheme.logo, ...overrides.logo },
+    consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
   });
 };