@latte-macchiat-io/latte-vanilla-components 0.0.179 → 0.0.181

package/package.json

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

package/src/index.ts

@@ -86,11 +86,17 @@ export { type TextareaVariants } from './components/Form/TextField/Textarea/Text
 
 export { ToRemove } from './components/ToRemove/ToRemove';
 
-// Theme utilities
+// Theme utilities  
 export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
+export { createCustomLightTheme, createCustomDarkTheme, type ThemeOverrides as CustomThemeOverrides } from './utils/createCustomTheme';
+export { createThemeOverride } from './utils/themeOverrides.css';
 // Theme contract and values
 export { themeContract } from './theme/contract.css';
 export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
 
+// Pre-built themes (these actually generate CSS variables)
+export { lightTheme } from './themes/light.css';
+export { darkTheme } from './themes/dark.css';
+
 // Theme utilities
 export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';

package/src/themes/dark.css.ts

@@ -0,0 +1,19 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { themeContract } from '../theme/contract.css';
+import { baseDarkTheme } from '../theme/baseThemeValues';
+
+// Create the dark theme at module level so Vanilla Extract can process it
+export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContract, {
+  colors: baseDarkTheme.colors,
+  space: baseDarkTheme.space,
+  radii: baseDarkTheme.radii,
+  fonts: baseDarkTheme.fonts,
+  maxWidth: `${baseDarkTheme.maxWidth}px`,
+  fontSizes: baseDarkTheme.fontSizes,
+  fontWeights: baseDarkTheme.fontWeights,
+  lineHeights: baseDarkTheme.lineHeights,
+  shadows: baseDarkTheme.shadows,
+  section: baseDarkTheme.section,
+  header: baseDarkTheme.header,
+  footer: baseDarkTheme.footer,
+});

package/src/themes/light.css.ts

@@ -0,0 +1,19 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { themeContract } from '../theme/contract.css';
+import { baseLightTheme } from '../theme/baseThemeValues';
+
+// Create the light theme at module level so Vanilla Extract can process it
+export const lightTheme = createGlobalTheme(':root', themeContract, {
+  colors: baseLightTheme.colors,
+  space: baseLightTheme.space,
+  radii: baseLightTheme.radii,
+  fonts: baseLightTheme.fonts,
+  maxWidth: `${baseLightTheme.maxWidth}px`,
+  fontSizes: baseLightTheme.fontSizes,
+  fontWeights: baseLightTheme.fontWeights,
+  lineHeights: baseLightTheme.lineHeights,
+  shadows: baseLightTheme.shadows,
+  section: baseLightTheme.section,
+  header: baseLightTheme.header,
+  footer: baseLightTheme.footer,
+});

package/src/utils/createCustomTheme.ts

@@ -0,0 +1,52 @@
+import { baseLightTheme, baseDarkTheme } from '../theme/baseThemeValues';
+
+// Type for partial theme overrides
+export type ThemeOverrides = {
+  colors?: Partial<typeof baseLightTheme.colors>;
+  space?: Partial<typeof baseLightTheme.space>;
+  radii?: Partial<typeof baseLightTheme.radii>;
+  fonts?: Partial<typeof baseLightTheme.fonts>;
+  maxWidth?: string;
+  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
+  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
+  shadows?: Partial<typeof baseLightTheme.shadows>;
+  section?: Partial<typeof baseLightTheme.section>;
+  header?: Partial<typeof baseLightTheme.header>;
+  footer?: Partial<typeof baseLightTheme.footer>;
+};
+
+// Utility to merge overrides with base theme
+export const createCustomLightTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: { ...baseLightTheme.colors, ...overrides.colors },
+    space: { ...baseLightTheme.space, ...overrides.space },
+    radii: { ...baseLightTheme.radii, ...overrides.radii },
+    fonts: { ...baseLightTheme.fonts, ...overrides.fonts },
+    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
+    fontSizes: { ...baseLightTheme.fontSizes, ...overrides.fontSizes },
+    fontWeights: { ...baseLightTheme.fontWeights, ...overrides.fontWeights },
+    lineHeights: { ...baseLightTheme.lineHeights, ...overrides.lineHeights },
+    shadows: { ...baseLightTheme.shadows, ...overrides.shadows },
+    section: { ...baseLightTheme.section, ...overrides.section },
+    header: { ...baseLightTheme.header, ...overrides.header },
+    footer: { ...baseLightTheme.footer, ...overrides.footer },
+  };
+};
+
+export const createCustomDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: { ...baseDarkTheme.colors, ...overrides.colors },
+    space: { ...baseDarkTheme.space, ...overrides.space },
+    radii: { ...baseDarkTheme.radii, ...overrides.radii },
+    fonts: { ...baseDarkTheme.fonts, ...overrides.fonts },
+    maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
+    fontSizes: { ...baseDarkTheme.fontSizes, ...overrides.fontSizes },
+    fontWeights: { ...baseDarkTheme.fontWeights, ...overrides.fontWeights },
+    lineHeights: { ...baseDarkTheme.lineHeights, ...overrides.lineHeights },
+    shadows: { ...baseDarkTheme.shadows, ...overrides.shadows },
+    section: { ...baseDarkTheme.section, ...overrides.section },
+    header: { ...baseDarkTheme.header, ...overrides.header },
+    footer: { ...baseDarkTheme.footer, ...overrides.footer },
+  };
+};

package/src/utils/theme.ts

@@ -1,4 +1,6 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
 import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
+import { themeContract } from '../theme/contract.css';
 
 // Type for partial theme overrides
 export type ThemeOverrides = {
@@ -6,19 +8,19 @@ export type ThemeOverrides = {
   space?: Partial<typeof baseLightTheme.space>;
   radii?: Partial<typeof baseLightTheme.radii>;
   fonts?: Partial<typeof baseLightTheme.fonts>;
-  maxWidth?: string;
+  maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
   fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
-  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
-  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
-  shadows?: Partial<typeof baseLightTheme.shadows>;
-  section?: Partial<typeof baseLightTheme.section>;
-  header?: Partial<typeof baseLightTheme.header>;
-  footer?: Partial<typeof baseLightTheme.footer>;
+  fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
+  lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
+  shadows?: Partial<typeof baseLightTheme.fontSizes>;
+  section?: Partial<typeof baseLightTheme.fontSizes>;
+  header?: Partial<typeof baseLightTheme.fontSizes>;
+  footer?: Partial<typeof baseLightTheme.fontSizes>;
 };
 
-// Utility to create a theme object with partial overrides over light theme base
-const createAppTheme = (overrides: ThemeOverrides = {}) => {
-  return {
+// Utility to create a theme with partial overrides over light theme base
+const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
     colors: {
       ...baseLightTheme.colors,
       ...overrides.colors,
@@ -35,7 +37,7 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
       ...baseLightTheme.fonts,
       ...overrides.fonts,
     },
-    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
     fontSizes: {
       ...baseLightTheme.fontSizes,
       ...overrides.fontSizes,
@@ -64,12 +66,12 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
       ...baseLightTheme.footer,
       ...overrides.footer,
     },
-  };
+  });
 };
 
-// Utility to create a theme object with partial overrides over dark theme base
-const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return {
+// Utility to create a theme with partial overrides over dark theme base
+const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
     colors: {
       ...baseDarkTheme.colors,
       ...overrides.colors,
@@ -115,15 +117,15 @@ const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
       ...baseDarkTheme.footer,
       ...overrides.footer,
     },
-  };
+  });
 };
 
-// Returns theme object for light theme - consuming app must call createGlobalTheme
+// Convenience function for light theme (extends base light theme)
 export const createLightTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppTheme(overrides);
+  return createAppTheme('html', overrides);
 };
 
-// Returns theme object for dark theme - consuming app must call createGlobalTheme  
+// Convenience function for dark theme (extends base dark theme)
 export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppDarkTheme(overrides);
-};
+  return createAppDarkTheme('html[data-theme="dark"]', overrides);
+};

package/src/utils/themeOverrides.css.ts

@@ -0,0 +1,10 @@
+import { createGlobalTheme, createThemeContract } from '@vanilla-extract/css';
+import { themeContract } from '../theme/contract.css';
+
+// Create a higher-specificity theme that can override the base themes
+export const themeOverrides = createThemeContract(themeContract);
+
+// Export a utility to create override themes with custom selectors
+export const createThemeOverride = (selector: string, values: Partial<typeof themeContract>) => {
+  return createGlobalTheme(selector, themeContract, values as any);
+};

package/src/utils/deep-merge-objects.ts

@@ -1,15 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const deepMergeObjects = (obj1: any, obj2: any) => {
-  for (const key in obj2) {
-    if (obj2.hasOwnProperty(key)) {
-      if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
-        obj1[key] = deepMergeObjects(obj1[key], obj2[key]);
-      } else {
-        obj1[key] = obj2[key];
-      }
-    }
-  }
-  return obj1;
-};
-
-export default deepMergeObjects;

package/src/utils/use-breakpoint-key.ts

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { breakpoints } from '../assets/styles/mediaqueries';
-
-type BreakpointKey = keyof typeof breakpoints;
-
-export function useBreakpointKey(): number {
-  const [breakpoint, setBreakpoint] = useState<BreakpointKey>('mobile');
-
-  useEffect(() => {
-    function handleResize() {
-      const width = window.innerWidth;
-
-      if (width >= breakpoints['2xl']) setBreakpoint('2xl');
-      else if (width >= breakpoints.xl) setBreakpoint('xl');
-      else if (width >= breakpoints.lg) setBreakpoint('lg');
-      else if (width >= breakpoints.md) setBreakpoint('md');
-      else if (width >= breakpoints.sm) setBreakpoint('sm');
-      else setBreakpoint('mobile');
-    }
-
-    handleResize(); // init au mount
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  // Map Breakpoint → Index numérique
-  const order: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
-  return order.indexOf(breakpoint);
-}

package/src/utils/use-window-size.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-
-function useWindowSize() {
-  // Initialize state with undefined width/height so server and client renders match
-  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const [windowSize, setWindowSize] = useState<{
-    width: undefined | number;
-    height: undefined | number;
-  }>({
-    width: undefined,
-    height: undefined,
-  });
-
-  useEffect(() => {
-    // only execute all the code below in client side
-    // Handler to call on window resize
-    function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-
-    // Add event listener
-    window.addEventListener('resize', handleResize);
-
-    // Call handler right away so state gets updated with initial window size
-    handleResize();
-
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize);
-  }, []); // Empty array ensures that effect is only run on mount
-  return windowSize;
-}
-
-export default useWindowSize;