@latte-macchiat-io/latte-vanilla-components 0.0.186 → 0.0.188

package/src/themes/light.css.ts

@@ -1,6 +1,6 @@
 import { createGlobalTheme } from '@vanilla-extract/css';
-import { themeContract } from '../theme/contract.css';
-import { baseLightTheme } from '../theme/baseThemeValues';
+import { themeContract } from './/contract.css';
+import { baseLightTheme } from './/baseThemeValues';
 
 // Create the light theme at module level so Vanilla Extract can process it
 export const lightTheme = createGlobalTheme(':root', themeContract, {
@@ -16,4 +16,4 @@ export const lightTheme = createGlobalTheme(':root', themeContract, {
   section: baseLightTheme.section,
   header: baseLightTheme.header,
   footer: baseLightTheme.footer,
-});
+});

package/src/types/withClassName.ts

@@ -1,3 +1,4 @@
+// TODO Could be removed and replaced by `React.HTMLAttributes<HTMLElement>` in most cases
 export type WithClassName = {
   className: string;
 };

package/src/assets/styles/default-theme.ts

@@ -1,312 +0,0 @@
-import { Theme } from '@/types/theme';
-
-const brandFont = '"Goudy Bookletter 1911", sans-serif';
-const defaultFont = '"Gill Sans", sans-serif';
-
-const brandColorTerracotta = '#FF7377';
-
-const brandColorBeigeDark = '#C8AE96';
-const brandColorBeigeLight = '#FCEFE6';
-
-const brandColorGrey = '#2E2E2E';
-const brandColorGreyLight = '#CCCCCC';
-const brandColorGreyMedium = ' #888888';
-const brandColorBlack = '#000000';
-
-const brandColor = brandColorTerracotta;
-
-export const defaultTheme: Theme = {
-  global: {
-    maxWidth: 1200,
-    paddingLeft: [15, 15, 30, 30],
-    paddingRight: [15, 15, 30, 30],
-
-    brandFont: brandFont,
-    defaultFont: defaultFont,
-  },
-
-  colors: {
-    defaultText: brandColorBlack,
-    defaultLightText: brandColorBeigeLight,
-    defaultTitle: '',
-    defaultLink: brandColorBlack,
-    defaultIcon: brandColorBlack,
-  },
-
-  backgroundColors: {
-    modal: brandColorBeigeLight,
-    modalOverlay: 'rgba(0, 0, 0, 0.6)',
-    cookieConsent: brandColorBeigeLight,
-  },
-
-  borders: {
-    hr: `1px solid ${brandColorBeigeDark}`,
-    cookieConsent: `2px solid ${brandColorBlack}`,
-  },
-
-  borderRadius: {
-    modal: 30,
-    input: 30,
-    cookieConsent: 30,
-  },
-
-  widthSizes: {
-    modal: 600,
-    cookieConsent: 500,
-  },
-
-  transitions: {
-    global: 'all 0.3s ease-in-out',
-  },
-
-  actions: {
-    gap: [15, 15, 30, 30],
-    paddingTop: [15, 15, 30, 30],
-    paddingBottom: [15, 15, 30, 30],
-  },
-
-  button: {
-    minWidth: 80,
-    fontWeight: 400,
-    letterSpacing: 0.1,
-    color: {
-      primary: brandColorBeigeLight,
-      secondary: brandColorGrey,
-      disabled: brandColorGreyMedium,
-    },
-    backgroundColor: {
-      primary: brandColor,
-      secondary: brandColorBeigeDark,
-      disabled: brandColorGreyLight,
-    },
-    border: {
-      width: 2,
-      style: 'solid',
-      color: {
-        primary: brandColor,
-        secondary: brandColorBeigeDark,
-        disabled: brandColorGreyLight,
-      },
-    },
-    borderRadius: 50,
-    paddingTop: {
-      small: [5, 5, 10, 10, 15, 15],
-      medium: [10, 10, 15, 15, 20, 20],
-      large: [15, 15, 20, 20, 25, 25],
-    },
-    paddingBottom: {
-      small: [5, 5, 10, 10, 15, 15],
-      medium: [10, 10, 15, 15, 20, 20],
-      large: [15, 15, 20, 20, 25, 25],
-    },
-    paddingLeft: {
-      small: [5, 5, 10, 10, 15, 15],
-      medium: [10, 10, 15, 15, 20, 20],
-      large: [15, 15, 20, 20, 25, 25],
-    },
-    paddingRight: {
-      small: [5, 5, 10, 10, 15, 15],
-      medium: [10, 10, 15, 15, 20, 20],
-      large: [15, 15, 20, 20, 25, 25],
-    },
-    transition: 'all 0.3s ease-in-out',
-  },
-
-  columns: {
-    gap: 30,
-  },
-
-  keyNumber: {
-    paddingBottom: [5, 5, 10, 10, 15, 15],
-  },
-
-  form: {
-    width: 800,
-    padding: ['15px', '30px'],
-    backgroundColor: '',
-
-    row: {
-      gap: [30, 60],
-      padding: ['15px', '30px'],
-    },
-
-    label: {
-      font: brandFont,
-      fontWeight: 500,
-      color: brandColor,
-      paddingBottom: 5,
-    },
-
-    input: {
-      color: '',
-      borderRadius: 0,
-      padding: [5, 10],
-      font: defaultFont,
-      backgroundColor: '',
-      placeholder: {
-        color: '',
-        opacity: 1,
-      },
-      border: `2px solid ${brandColorBlack}`,
-    },
-
-    textarea: {
-      color: '',
-      borderRadius: 0,
-      padding: [5, 10],
-      font: defaultFont,
-      backgroundColor: '',
-      placeholder: {
-        color: '',
-        opacity: 1,
-      },
-      border: `2px solid ${brandColorBlack}`,
-    },
-
-    error: {
-      color: brandColorTerracotta,
-    },
-  },
-
-  header: {
-    gap: [15, 15, 15, 15],
-    height: [60, 60, 120, 120],
-    backgroundColor: brandColorBeigeLight,
-
-    paddingTop: [15, 30, 50, 100],
-    paddingLeft: [15, 30, 50, 100],
-    paddingRight: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-
-    overlayGap: [15, 15, 15, 15],
-    overlayBackgroundColor: brandColorBeigeLight,
-
-    toggleNavColor: brandColorBlack,
-    toggleNavOpenColor: brandColorBlack,
-    toggleNavBorderRadius: 5,
-  },
-
-  main: {
-    minHeight: '45vh',
-    backgroundColor: brandColorBeigeLight,
-  },
-
-  section: {
-    paddingTop: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-  },
-
-  footer: {
-    gap: [15, 15, 15, 15],
-    height: [60, 60, 120, 120],
-    backgroundColor: brandColorBeigeLight,
-
-    paddingTop: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-  },
-
-  modal: {
-    border: '',
-    borderRadius: 0,
-    width: [50, 50, 75, 75],
-    backgroundColor: brandColorBeigeLight,
-
-    overlayBlur: 0,
-    overlayOpacity: 0.5,
-    overlayBackgroundColor: brandColorBlack,
-
-    paddingTop: [15, 30, 50, 100],
-    paddingLeft: [15, 30, 50, 100],
-    paddingRight: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-  },
-
-  languageSwitcher: {
-    border: '',
-    borderRadius: 0,
-    color: brandColorBlack,
-    width: [150, 150, 200, 200],
-    backgroundColor: brandColorBeigeLight,
-
-    paddingTop: [15, 30, 50, 100],
-    paddingLeft: [15, 30, 50, 100],
-    paddingRight: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-  },
-
-  carousel: {
-    gap: [0, 0, 30, 60],
-    bullet: {
-      borderRadius: 0,
-      width: [12, 12, 12, 12],
-      height: [12, 12, 12, 12],
-      backgroundColor: brandColorBeigeLight,
-    },
-  },
-
-  video: {
-    playButton: {
-      border: '',
-      borderRadius: 0,
-      width: [50, 50, 75, 75],
-      height: [50, 50, 75, 75],
-      color: brandColorBlack,
-      backgroundColor: brandColorBeigeLight,
-    },
-    pauseButton: {
-      border: '',
-      borderRadius: 0,
-      width: [40, 40, 50, 50],
-      height: [40, 40, 50, 50],
-      color: brandColorBlack,
-      backgroundColor: brandColorBeigeLight,
-    },
-    soundButton: {
-      border: '',
-      borderRadius: 0,
-      width: [40, 40, 50, 50],
-      height: [40, 40, 50, 50],
-      color: brandColorBlack,
-      backgroundColor: brandColorBeigeLight,
-    },
-    closeButton: {
-      border: '',
-      borderRadius: 0,
-      width: [40, 40, 50, 50],
-      height: [40, 40, 50, 50],
-      color: brandColorBlack,
-      backgroundColor: brandColorBeigeLight,
-    },
-  },
-
-  consentCookie: {
-    borders: 0,
-    borderRadius: 0,
-    width: [50, 50, 75, 75],
-    backgroundColor: brandColorBeigeLight,
-
-    overlayBlur: 0,
-    overlayOpacity: 0.5,
-    overlayBackgroundColor: brandColorBlack,
-
-    paddingTop: [15, 30, 50, 100],
-    paddingLeft: [15, 30, 50, 100],
-    paddingRight: [15, 30, 50, 100],
-    paddingBottom: [15, 30, 50, 100],
-
-    actionsGap: 30,
-    actionsPaddingTop: [15, 100, 100, 100],
-  },
-
-  nav: {
-    gap: [15, 15, 15, 15],
-  },
-
-  navSocial: {
-    gap: [15, 15, 15, 15],
-  },
-
-  navLegal: {
-    gap: [15, 15, 15, 15],
-  },
-};

package/src/assets/styles/mediaqueries.tsx

@@ -1,24 +0,0 @@
-export const breakpoints1 = [
-  640 /* Small devices (portrait tablets and large phones, 640px and up) */, 768 /* Medium devices (landscape tablets, 768px and up) */,
-  1024 /* Large devices (laptops/desktops, 1024px and up) */, 1680 /* Extra large devices (large laptops and desktops, 1280px and up) */,
-];
-
-export const mq = breakpoints1.map((bp) => `(min-width: ${bp}px)`);
-
-export const breakpoints = {
-  mobile: 0, // Mobile par défaut
-  sm: 640, // Mobile large
-  md: 768, // Tablette
-  lg: 1024, // Petit laptop
-  xl: 1280, // Desktop
-  '2xl': 1536, // Grand écran
-} as const;
-
-export const queries = {
-  mobile: `screen and (min-width: ${breakpoints.mobile}px)`,
-  sm: `screen and (min-width: ${breakpoints.sm}px)`,
-  md: `screen and (min-width: ${breakpoints.md}px)`,
-  lg: `screen and (min-width: ${breakpoints.lg}px)`,
-  xl: `screen and (min-width: ${breakpoints.xl}px)`,
-  '2xl': `screen and (min-width: ${breakpoints['2xl']}px)`,
-};

package/src/components/ToRemove/ToRemove.tsx

@@ -1,3 +0,0 @@
-export const ToRemove = () => {
-  return <div>ToRemove</div>;
-};

package/src/theme/index.ts

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

@@ -1,76 +0,0 @@
-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';
-};