@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.177

package/src/components/Section/stories.ts

@@ -0,0 +1,64 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { defaultTheme } from '@assets/styles/default-theme';
+// import { Section } from './Section';
+// import { sectionStyle } from './styles.css';
+// import { Align } from './types';
+
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Section',
+//   component: Section,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+// } satisfies Meta<typeof Section>;
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     theme: defaultTheme,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const FullHeight: Story = {
+//   args: {
+//     isFullHeight: true,
+//     theme: defaultTheme,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const AlignCenter: Story = {
+//   args: {
+//     theme: defaultTheme,
+//     align: Align.Center,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const BackgroundColor: Story = {
+//   args: {
+//     isDark: true,
+//     theme: defaultTheme,
+//     backgroundColor: 'red',
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };

package/{dist/types/index.d.ts → src/index.ts}

@@ -1,58 +1,96 @@
+// Theme system - Import this first to apply global styles
 export * from './theme';
+
+// Styles utilities
 export { sprinkles, responsiveProperties, type Sprinkles } from './styles/sprinkles.css';
 export { breakpoints, queries } from './styles/mediaqueries';
+
+// Vanilla Extract Components (fully migrated)
 export { Button, type ButtonProps } from './components/Button/Button';
 export { type ButtonVariants } from './components/Button/Button.css';
+
 export { Section, type SectionProps } from './components/Section/Section';
 export { type SectionVariants } from './components/Section/Section.css';
+
 export { Main, type MainProps } from './components/Main/Main';
 export { type MainVariants } from './components/Main/Main.css';
+
 export { Header, type HeaderProps } from './components/Header/Header';
 export { type HeaderVariants } from './components/Header/Header.css';
+
 export { Footer, type FooterProps } from './components/Footer/Footer';
 export { type FooterVariants } from './components/Footer/Footer.css';
+
 export { Nav, type NavProps } from './components/Nav/Nav';
 export { type NavVariants } from './components/Nav/Nav.css';
+
 export { Icon, type IconProps } from './components/Icon/Icon';
 export { type IconVariants } from './components/Icon/Icon.css';
+
 export { Modal, type ModalProps } from './components/Modal/Modal';
 export { type ModalVariants } from './components/Modal/Modal.css';
+
 export { Logo, type LogoProps } from './components/Logo/Logo';
 export { type LogoVariants } from './components/Logo/Logo.css';
+
 export { Columns, type ColumnsProps } from './components/Columns/Columns';
 export { type ColumnsVariants } from './components/Columns/Columns.css';
+
 export { Actions, type ActionsProps } from './components/Actions/Actions';
 export { type ActionsVariants } from './components/Actions/Actions.css';
+
 export { Carousel, type CarouselProps } from './components/Carousel/Carousel';
 export { type CarouselVariants } from './components/Carousel/Carousel.css';
+
 export { ConsentCookie, type ConsentCookieProps } from './components/ConsentCookie/ConsentCookie';
 export { type ConsentCookieVariants } from './components/ConsentCookie/ConsentCookie.css';
+
 export { KeyNumber, type KeyNumberProps } from './components/KeyNumber/KeyNumber';
 export { type KeyNumberVariants } from './components/KeyNumber/KeyNumber.css';
+
 export { NavSocial, type NavSocialProps, type SocialNetwork, type SocialLink } from './components/NavSocial/NavSocial';
 export { type NavSocialVariants } from './components/NavSocial/NavSocial.css';
+
 export { NavLegal, type NavLegalProps } from './components/NavLegal/NavLegal';
 export { type NavLegalVariants } from './components/NavLegal/NavLegal.css';
+
 export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher/LanguageSwitcher';
 export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/LanguageSwitcher.css';
+
+// Video Components
 export { Video, type VideoProps } from './components/Video/Video';
 export { type VideoVariants } from './components/Video/Video.css';
+
 export { VideoFullWidth, type VideoFullWidthProps } from './components/VideoFullWidth/VideoFullWidth';
 export { type VideoFullWidthVariants } from './components/VideoFullWidth/VideoFullWidth.css';
+
+// Form Components
 export { Form, type FormProps } from './components/Form/Form';
 export { type FormVariants } from './components/Form/Form.css';
+
 export { Row, type RowProps } from './components/Form/Row/Row';
 export { type RowVariants } from './components/Form/Row/Row.css';
+
 export { TextField, type TextFieldProps, type InputType } from './components/Form/TextField/TextField';
 export { type TextFieldVariants } from './components/Form/TextField/TextField.css';
+
+// Form TextField Subcomponents
 export { Label, type LabelProps } from './components/Form/TextField/Label/Label';
 export { type LabelVariants } from './components/Form/TextField/Label/Label.css';
+
 export { Input, type InputProps, type InputType as InputFieldType } from './components/Form/TextField/Input/Input';
 export { type InputVariants } from './components/Form/TextField/Input/Input.css';
+
 export { Textarea, type TextareaProps } from './components/Form/TextField/Textarea/Textarea';
 export { type TextareaVariants } from './components/Form/TextField/Textarea/Textarea.css';
+
 export { ToRemove } from './components/ToRemove/ToRemove';
+
+// Theme utilities
 export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';
+// Theme contract and values
 export { themeContract } from './theme/contract.css';
 export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
+
+// Theme utilities
 export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';

package/src/styles/mediaqueries.ts

@@ -0,0 +1,17 @@
+export const breakpoints = {
+  mobile: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} 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/theme/baseThemeValues.ts

@@ -0,0 +1,160 @@
+// Base theme values that can be imported and extended by apps
+export const baseLightTheme = {
+  colors: {
+    primary: '#FF7377',
+    secondary: '#FCEFE6',
+    accent: '#FF7377',
+    background: '#ffffff',
+    surface: '#f8f9fa',
+    text: '#000000',
+    textSecondary: '#666666',
+    textLight: '#f5f5f5',
+    border: '#e1e1e1',
+    error: '#dc3545',
+    warning: '#ffc107',
+    success: '#28a745',
+    info: '#17a2b8',
+  },
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '32px',
+    xl: '64px',
+    '2xl': '128px',
+  },
+  radii: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+    full: '9999px',
+  },
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
+  },
+  fontSizes: {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+    '2xl': '24px',
+    '3xl': '32px',
+    '4xl': '40px',
+  },
+  fontWeights: {
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeights: {
+    tight: '1.2',
+    normal: '1.5',
+    relaxed: '1.75',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px rgba(0, 0, 0, 0.1)',
+  },
+  maxWidth: '1500px',
+  section: {
+    paddingTop: '48px',
+    paddingBottom: '48px',
+  },
+  header: {
+    height: '80px',
+  },
+  footer: {
+    height: '80px',
+  },
+};
+
+export const baseDarkTheme = {
+  colors: {
+    primary: '#1a73e8',
+    secondary: '#374151',
+    accent: '#60a5fa',
+    background: '#111827',
+    surface: '#1f2937',
+    text: '#ffffff',
+    textSecondary: '#9ca3af',
+    textLight: '#f3f4f6',
+    border: '#374151',
+    error: '#ef4444',
+    warning: '#f59e0b',
+    success: '#10b981',
+    info: '#3b82f6',
+  },
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '32px',
+    xl: '64px',
+    '2xl': '128px',
+  },
+  radii: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+    full: '9999px',
+  },
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
+  },
+  fontSizes: {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+    '2xl': '24px',
+    '3xl': '32px',
+    '4xl': '40px',
+  },
+  fontWeights: {
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeights: {
+    tight: '1.2',
+    normal: '1.5',
+    relaxed: '1.75',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 2px rgba(0, 0, 0, 0.1)',
+    md: '0 4px 6px rgba(0, 0, 0, 0.15)',
+    lg: '0 10px 15px rgba(0, 0, 0, 0.2)',
+    xl: '0 20px 25px rgba(0, 0, 0, 0.25)',
+  },
+  maxWidth: '1500px',
+  section: {
+    paddingTop: '48px',
+    paddingBottom: '48px',
+  },
+  header: {
+    height: '80px',
+  },
+  footer: {
+    height: '80px',
+  },
+};

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