@latte-macchiat-io/latte-vanilla-components 0.0.290 → 0.0.292

package/package.json

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

package/src/components/Button/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 
 import { buttonRecipe, type ButtonVariants } from './styles.css';

package/src/components/Carousel/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useRef, useState } from 'react';
 

package/src/components/ConsentCookie/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { useEffect, useState } from 'react';
 

package/src/components/Form/TextField/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 

package/src/components/Header/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import { useState } from 'react';
 

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

@@ -1,4 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css';
+import { themeContract } from '../../theme/contract.css';
 
 export const logo = style({
   alignItems: 'center',
@@ -12,3 +13,7 @@ globalStyle(`${logo} img`, {
   maxWidth: '100%',
   display: 'block',
 });
+
+globalStyle(`${logo} svg path`, {
+  fill: themeContract.logo.color,
+});

package/src/components/Logo/theme.ts

@@ -0,0 +1,17 @@
+const themeLogoBase = {
+  logo: {},
+};
+
+export const themeLogoLight = {
+  logo: {
+    ...themeLogoBase.logo,
+    color: '#FF7377',
+  },
+};
+
+export const themeLogoDark = {
+  logo: {
+    ...themeLogoBase.logo,
+    color: '#FF7377',
+  },
+};

package/src/components/Nav/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 
 import { navRecipe, NavVariants } from './styles.css';

package/src/theme/baseThemeValues.ts

@@ -10,6 +10,7 @@ import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
 import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
 import { themeIconDark, themeIconLight } from '../components/Icon/theme';
 import { themeKeyNumberDark, themeKeyNumberLight } from '../components/KeyNumber/theme';
+import { themeLogoDark, themeLogoLight } from '../components/Logo/theme';
 import { themeMainDark, themeMainLight } from '../components/Main/theme';
 import { themeModalDark, themeModalLight } from '../components/Modal/theme';
 import { themeNavDark, themeNavLight } from '../components/Nav/theme';
@@ -145,6 +146,8 @@ export const baseLightTheme = {
 
   ...themeVideoLight,
 
+  ...themeLogoLight,
+
   form: {
     ...themeFormLight.form,
     ...themeFormRowLight,
@@ -279,6 +282,8 @@ export const baseDarkTheme = {
 
   ...themeVideoDark,
 
+  ...themeLogoDark,
+
   form: {
     ...themeFormDark.form,
     ...themeFormRowDark,

package/src/theme/contract.css.ts

@@ -385,6 +385,10 @@ export const themeContract = createGlobalThemeContract({
     },
   },
 
+  logo: {
+    color: 'latte-logo-color',
+  },
+
   columns: {
     gap: {
       mobile: 'latte-columns-gap-mobile',

package/src/theme/createTheme.ts

@@ -32,6 +32,7 @@ export type ThemeOverrides = {
   video?: Partial<typeof baseLightTheme.video>;
   carousel?: Partial<typeof baseLightTheme.carousel>;
   form?: Partial<typeof baseLightTheme.form>;
+  logo?: Partial<typeof baseLightTheme.logo>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -65,6 +66,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     video: { ...baseLightTheme.video, ...overrides.video },
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
     form: { ...baseLightTheme.form, ...overrides.form },
+    logo: { ...baseLightTheme.logo, ...overrides.logo },
   });
 };
 
@@ -99,6 +101,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     video: { ...baseDarkTheme.video, ...overrides.video },
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
     form: { ...baseDarkTheme.form, ...overrides.form },
+    logo: { ...baseDarkTheme.logo, ...overrides.logo },
   });
 };