@latte-macchiat-io/latte-vanilla-components 0.0.187 → 0.0.189

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';
-};

package/src/themes/dark.css.ts

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

@@ -1,19 +0,0 @@
-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,
-  fontSizes: baseLightTheme.fontSizes,
-  fontWeights: baseLightTheme.fontWeights,
-  lineHeights: baseLightTheme.lineHeights,
-  shadows: baseLightTheme.shadows,
-  section: baseLightTheme.section,
-  header: baseLightTheme.header,
-  footer: baseLightTheme.footer,
-});

package/src/types/theme.ts

@@ -1,295 +0,0 @@
-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/utils/quickTheme.ts

@@ -1,38 +0,0 @@
-import { createGlobalTheme } from '@vanilla-extract/css';
-import { themeContract } from '../theme/contract.css';
-import { baseLightTheme } from '../theme/baseThemeValues';
-
-// Quick theme utility for RAD (Rapid Application Development)
-// Just import this to get a working theme instantly
-export const quickTheme = createGlobalTheme(':root', themeContract, {
-  colors: baseLightTheme.colors,
-  space: baseLightTheme.space,
-  radii: baseLightTheme.radii,
-  fonts: baseLightTheme.fonts,
-  maxWidth: baseLightTheme.maxWidth,
-  fontSizes: baseLightTheme.fontSizes,
-  fontWeights: baseLightTheme.fontWeights,
-  lineHeights: baseLightTheme.lineHeights,
-  shadows: baseLightTheme.shadows,
-  section: baseLightTheme.section,
-  header: baseLightTheme.header,
-  footer: baseLightTheme.footer,
-});
-
-// Helper function to create quick override themes
-export const createQuickTheme = (overrides: Partial<typeof baseLightTheme> = {}) => {
-  return createGlobalTheme(':root', themeContract, {
-    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,
-    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 },
-  });
-};

package/src/utils/theme.ts

@@ -1,131 +0,0 @@
-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 = {
-  colors?: Partial<typeof baseLightTheme.colors>;
-  space?: Partial<typeof baseLightTheme.space>;
-  radii?: Partial<typeof baseLightTheme.radii>;
-  fonts?: Partial<typeof baseLightTheme.fonts>;
-  maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
-  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
-  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 with partial overrides over light theme base
-const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
-  return createGlobalTheme(selector, themeContract, {
-    colors: {
-      ...baseLightTheme.colors,
-      ...overrides.colors,
-    },
-    space: {
-      ...baseLightTheme.space,
-      ...overrides.space,
-    },
-    radii: {
-      ...baseLightTheme.radii,
-      ...overrides.radii,
-    },
-    fonts: {
-      ...baseLightTheme.fonts,
-      ...overrides.fonts,
-    },
-    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
-    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,
-    },
-  });
-};
-
-// 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,
-    },
-    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,
-    },
-  });
-};
-
-// Convenience function for light theme (extends base light theme)
-export const createLightTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppTheme('html', overrides);
-};
-
-// Convenience function for dark theme (extends base dark theme)
-export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppDarkTheme('html[data-theme="dark"]', overrides);
-};