@latte-macchiat-io/latte-vanilla-components 0.0.174 → 0.0.176

package/src/theme/contract.css.ts

@@ -1,8 +1,8 @@
-import { createThemeContract } from '@vanilla-extract/css';
+import { createGlobalThemeContract } from '@vanilla-extract/css';
 
-// Define a theme contract with design tokens
-// This contract can then be reused to create multiple themes or overrides on a global level
-export const themeContract = createThemeContract({
+// Define a theme contract with design tokens using createGlobalThemeContract
+// This enables predictable CSS variable names for external consumption and runtime overrides
+export const themeContract = createGlobalThemeContract({
   colors: {
     primary: null,
     secondary: null,
@@ -80,4 +80,4 @@ export const themeContract = createThemeContract({
   footer: {
     height: null,
   },
-});
+}, (value) => `latte-${value}`);

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+// Theme contract and values
+export { themeContract } from './contract.css';
+export { baseLightTheme, baseDarkTheme } from './baseThemeValues';
+
+// Theme utilities
+export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './utils';

package/src/theme/utils.ts

@@ -0,0 +1,76 @@
+import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
+import { themeContract } from './contract.css';
+
+export type ThemeValues = typeof baseLightTheme;
+
+export const createThemeOverride = (overrides: Partial<ThemeValues>): ThemeValues => {
+  return {
+    ...baseLightTheme,
+    ...overrides,
+    colors: {
+      ...baseLightTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseLightTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseLightTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseLightTheme.fonts,
+      ...overrides.fonts,
+    },
+    fontSizes: {
+      ...baseLightTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    lineHeights: {
+      ...baseLightTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseLightTheme.shadows,
+      ...overrides.shadows,
+    },
+  };
+};
+
+export const getThemeContract = () => themeContract;
+
+export const getThemeValues = (isDark = false): ThemeValues => {
+  return isDark ? baseDarkTheme : baseLightTheme;
+};
+
+export const toggleTheme = () => {
+  const html = document.documentElement;
+  const currentTheme = html.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? null : 'dark';
+
+  if (newTheme) {
+    html.setAttribute('data-theme', newTheme);
+  } else {
+    html.removeAttribute('data-theme');
+  }
+
+  return newTheme === 'dark';
+};
+
+export const setTheme = (theme: 'light' | 'dark') => {
+  const html = document.documentElement;
+
+  if (theme === 'dark') {
+    html.setAttribute('data-theme', 'dark');
+  } else {
+    html.removeAttribute('data-theme');
+  }
+};
+
+export const getCurrentTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light';
+
+  const html = document.documentElement;
+  return html.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+};

package/src/themes/dark.ts

@@ -0,0 +1,3 @@
+// Pre-built dark theme export  
+export { baseDarkTheme as darkTheme } from '../theme/baseThemeValues';
+export { createDarkTheme } from '../utils/theme.css';

package/src/themes/index.ts

@@ -0,0 +1,5 @@
+// Theme exports for consuming applications
+export * from './light';
+export * from './dark';
+export { themeContract } from '../theme/contract.css';
+export { createLightTheme, createDarkTheme, type ThemeOverrides } from '../utils/theme.css';

package/src/themes/light.ts

@@ -0,0 +1,3 @@
+// Pre-built light theme export
+export { baseLightTheme as lightTheme } from '../theme/baseThemeValues';
+export { createLightTheme } from '../utils/theme.css';

package/src/types/theme.ts

@@ -0,0 +1,295 @@
+export interface Theme {
+  global: {
+    maxWidth: number;
+    paddingLeft: number[];
+    paddingRight: number[];
+
+    brandFont: string;
+    defaultFont: string;
+  };
+
+  colors: {
+    defaultText: string;
+    defaultLightText: string;
+    defaultTitle: string;
+    defaultLink: string;
+    defaultIcon: string;
+  };
+
+  backgroundColors: {
+    modal: string;
+    modalOverlay: string;
+    cookieConsent: string;
+  };
+
+  borders: {
+    hr: string;
+    cookieConsent: string;
+  };
+
+  borderRadius: {
+    modal: number;
+    input: number;
+    cookieConsent: number;
+  };
+
+  widthSizes: {
+    modal: number;
+    cookieConsent: number;
+  };
+
+  transitions: {
+    global: string;
+  };
+
+  actions: {
+    gap: number[];
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  button: {
+    minWidth: number;
+    fontWeight: number;
+    letterSpacing: number;
+    color: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    backgroundColor: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    border: {
+      width: number;
+      style: string;
+      color: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+      };
+    };
+    borderRadius: number;
+    paddingTop: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingBottom: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingRight: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingLeft: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    transition: string;
+  };
+
+  keyNumber: {
+    paddingBottom: number[];
+  };
+
+  columns: {
+    gap: number;
+  };
+
+  form: {
+    width: number;
+    backgroundColor: string;
+    padding: [string | number, string | number];
+
+    row: {
+      gap: [string | number, string | number];
+      padding: [string | number, string | number];
+    };
+
+    label: {
+      font: string;
+      color: string;
+      fontWeight: number;
+      paddingBottom: number;
+    };
+
+    input: {
+      font: string;
+      color: string;
+      border: string;
+      padding: number[];
+      borderRadius: number;
+      backgroundColor: string;
+      placeholder: {
+        color: string;
+        opacity: number;
+      };
+    };
+
+    textarea: {
+      font: string;
+      color: string;
+      border: string;
+      padding: number[];
+      borderRadius: number;
+      backgroundColor: string;
+      placeholder: {
+        color: string;
+        opacity: number;
+      };
+    };
+
+    error: {
+      color: string;
+    };
+  };
+
+  header: {
+    gap: number[];
+    height: number[];
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+
+    overlayGap: number[];
+    overlayBackgroundColor: string;
+
+    toggleNavColor: string;
+    toggleNavOpenColor: string;
+    toggleNavBorderRadius: number;
+  };
+
+  main: {
+    minHeight: string;
+    backgroundColor: string;
+  };
+
+  section: {
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  footer: {
+    gap: number[];
+    height: number[];
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  modal: {
+    border: string;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    overlayBlur: number;
+    overlayOpacity: number;
+    overlayBackgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+  };
+
+  languageSwitcher: {
+    color: string;
+    border: string;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+  };
+
+  carousel: {
+    gap: number[];
+    bullet: {
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+  };
+
+  video: {
+    playButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    pauseButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    soundButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    closeButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+  };
+
+  consentCookie: {
+    borders: number;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    overlayBlur: number;
+    overlayOpacity: number;
+    overlayBackgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+
+    actionsGap: number;
+    actionsPaddingTop: number[];
+  };
+
+  nav: {
+    gap: number[];
+  };
+
+  navSocial: {
+    gap: number[];
+  };
+
+  navLegal: {
+    gap: number[];
+  };
+}

package/src/types/withClassName.ts

@@ -0,0 +1,3 @@
+export type WithClassName = {
+  className: string;
+};

package/src/utils/cookie.ts

@@ -0,0 +1,24 @@
+// https://www.w3schools.com/js/js_cookies.asp
+
+export function getCookie(name: string) {
+  const fullName = name + '=';
+  const decodedCookie = decodeURIComponent(document.cookie);
+  const ca = decodedCookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(fullName) == 0) {
+      return c.substring(fullName.length, c.length);
+    }
+  }
+  return '';
+}
+
+export function setCookie(name: string, value: string, expirationInDays: number) {
+  const d = new Date();
+  d.setTime(d.getTime() + expirationInDays * 24 * 60 * 60 * 1000);
+  const expires = 'expires=' + d.toUTCString();
+  document.cookie = name + '=' + value + ';' + expires + ';path=/';
+}

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

@@ -0,0 +1,15 @@
+// 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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,37 @@
+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;