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

package/src/components/Section/stories.tsx

@@ -102,9 +102,7 @@ export const DarkSection: Story = {
     children: (
       <>
         <h2 style={{ color: 'white' }}>Dark Section</h2>
-        <p style={{ color: 'rgba(255, 255, 255, 0.8)' }}>
-          This section has a dark background, great for creating visual contrast.
-        </p>
+        <p style={{ color: 'rgba(255, 255, 255, 0.8)' }}>This section has a dark background, great for creating visual contrast.</p>
         <Button variant="primary">Get Started</Button>
       </>
     ),
@@ -122,8 +120,12 @@ export const FullHeight: Story = {
           This section takes up the full viewport height, perfect for hero sections and landing page intros.
         </p>
         <div style={{ display: 'flex', gap: '1rem' }}>
-          <Button variant="primary" size="large">Get Started</Button>
-          <Button variant="secondary" size="large">Learn More</Button>
+          <Button variant="primary" size="lg">
+            Get Started
+          </Button>
+          <Button variant="secondary" size="lg">
+            Learn More
+          </Button>
         </div>
       </div>
     ),
@@ -144,7 +146,7 @@ export const NoSpacing: Story = {
 
 export const SmallSpacing: Story = {
   args: {
-    spacing: 'small',
+    spacing: 'sm',
     children: (
       <>
         <h2>Small Spacing Section</h2>
@@ -156,7 +158,7 @@ export const SmallSpacing: Story = {
 
 export const LargeSpacing: Story = {
   args: {
-    spacing: 'large',
+    spacing: 'lg',
     children: (
       <>
         <h2>Large Spacing Section</h2>
@@ -209,27 +211,27 @@ export const AsArticle: Story = {
 export const HeroSection: Story = {
   render: () => (
     <Section isFullHeight={true} align="center" backgroundColor="primary">
-      <div style={{ 
-        color: 'white', 
-        textAlign: 'center',
-        display: 'flex', 
-        flexDirection: 'column', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100%',
-        maxWidth: '800px',
-        margin: '0 auto'
-      }}>
-        <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>
-          Welcome to Our Platform
-        </h1>
+      <div
+        style={{
+          color: 'white',
+          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          maxWidth: '800px',
+          margin: '0 auto',
+        }}>
+        <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>Welcome to Our Platform</h1>
         <p style={{ fontSize: '1.25rem', marginBottom: '3rem', opacity: 0.9 }}>
-          Build amazing applications with our comprehensive component library. 
-          Get started in minutes and scale to millions of users.
+          Build amazing applications with our comprehensive component library. Get started in minutes and scale to millions of users.
         </p>
         <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
-          <Button variant="secondary" size="large">Get Started Free</Button>
-          <Button variant="ghost" size="large" style={{ borderColor: 'white', color: 'white' }}>
+          <Button variant="secondary" size="lg">
+            Get Started Free
+          </Button>
+          <Button variant="ghost" size="lg" style={{ borderColor: 'white', color: 'white' }}>
             Watch Demo
           </Button>
         </div>
@@ -247,60 +249,57 @@ export const HeroSection: Story = {
 
 export const FeatureSection: Story = {
   render: () => (
-    <Section spacing="large">
+    <Section spacing="lg">
       <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
         <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
-          <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>
-            Why Choose Our Components?
-          </h2>
+          <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>Why Choose Our Components?</h2>
           <p style={{ fontSize: '1.1rem', color: 'var(--latte-colors-textSecondary)', maxWidth: '600px', margin: '0 auto' }}>
             Built with modern best practices, accessibility in mind, and developer experience at the forefront.
           </p>
         </div>
-        
-        <div style={{ 
-          display: 'grid', 
-          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
-          gap: '2rem' 
-        }}>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            gap: '2rem',
+          }}>
           {[
             {
               title: '🎨 Theme System',
-              description: 'Flexible theming with light/dark modes and complete customization options.'
+              description: 'Flexible theming with light/dark modes and complete customization options.',
             },
             {
               title: '⚡ Performance',
-              description: 'Zero-runtime CSS-in-JS with Vanilla Extract for optimal performance.'
+              description: 'Zero-runtime CSS-in-JS with Vanilla Extract for optimal performance.',
             },
             {
               title: '🔒 Type Safety',
-              description: 'Full TypeScript support with excellent IntelliSense and autocomplete.'
+              description: 'Full TypeScript support with excellent IntelliSense and autocomplete.',
             },
             {
               title: '📱 Responsive',
-              description: 'Mobile-first design with responsive utilities and breakpoint support.'
+              description: 'Mobile-first design with responsive utilities and breakpoint support.',
             },
             {
               title: '♿ Accessible',
-              description: 'WCAG compliant components with proper ARIA attributes and keyboard navigation.'
+              description: 'WCAG compliant components with proper ARIA attributes and keyboard navigation.',
             },
             {
               title: '🚀 Developer Experience',
-              description: 'Great documentation, hot reloading, and intuitive component APIs.'
-            }
+              description: 'Great documentation, hot reloading, and intuitive component APIs.',
+            },
           ].map((feature, index) => (
-            <div key={index} style={{ 
-              padding: '2rem',
-              backgroundColor: 'var(--latte-colors-surface)',
-              borderRadius: 'var(--latte-radii-lg)',
-              border: '1px solid var(--latte-colors-border)'
-            }}>
-              <h3 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>
-                {feature.title}
-              </h3>
-              <p style={{ color: 'var(--latte-colors-textSecondary)' }}>
-                {feature.description}
-              </p>
+            <div
+              key={index}
+              style={{
+                padding: '2rem',
+                backgroundColor: 'var(--latte-colors-surface)',
+                borderRadius: 'var(--latte-radii-lg)',
+                border: '1px solid var(--latte-colors-border)',
+              }}>
+              <h3 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>{feature.title}</h3>
+              <p style={{ color: 'var(--latte-colors-textSecondary)' }}>{feature.description}</p>
             </div>
           ))}
         </div>
@@ -318,17 +317,17 @@ export const FeatureSection: Story = {
 
 export const CallToActionSection: Story = {
   render: () => (
-    <Section isDark={true} align="center" spacing="large">
+    <Section isDark={true} align="center" spacing="lg">
       <div style={{ color: 'white', textAlign: 'center', maxWidth: '600px', margin: '0 auto' }}>
-        <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>
-          Ready to Get Started?
-        </h2>
+        <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>Ready to Get Started?</h2>
         <p style={{ fontSize: '1.1rem', marginBottom: '2rem', opacity: 0.9 }}>
           Join thousands of developers building amazing applications with our component library.
         </p>
         <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
-          <Button variant="primary" size="large">Start Building</Button>
-          <Button variant="ghost" size="large" style={{ borderColor: 'white', color: 'white' }}>
+          <Button variant="primary" size="lg">
+            Start Building
+          </Button>
+          <Button variant="ghost" size="lg" style={{ borderColor: 'white', color: 'white' }}>
             View Documentation
           </Button>
         </div>
@@ -342,4 +341,4 @@ export const CallToActionSection: Story = {
       },
     },
   },
-};
+};

package/src/components/Video/Video.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const videoBase = style({
   position: 'relative',

package/src/components/VideoFullWidth/VideoFullWidth.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const videoFullWidthBase = style({
   height: 0,

package/src/index.ts

@@ -1,11 +1,17 @@
 // Theme system - Import this first to apply global styles
-export * from './theme';
+export { themeContract } from './themes/contract.css';
+export { baseLightTheme, baseDarkTheme } from './themes/baseThemeValues';
+export { createLightTheme, createDarkTheme, type ThemeOverrides } from './themes/createTheme.css';
 
-// Styles utilities
+// Available themes
+export { lightTheme } from './themes/light.css';
+export { darkTheme } from './themes/dark.css';
+
+// Styles utilities (sprinkles, media queries, etc.)
 export { sprinkles, responsiveProperties, type Sprinkles } from './styles/sprinkles.css';
 export { breakpoints, queries } from './styles/mediaqueries';
 
-// Vanilla Extract Components (fully migrated)
+// Components
 export { Button, type ButtonProps } from './components/Button/Button';
 export { type ButtonVariants } from './components/Button/Button.css';
 
@@ -83,22 +89,3 @@ 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 System - Core Exports
-export { themeContract } from './theme/contract.css';
-export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
-
-// Pre-built Themes (Ready to Use)
-export { lightTheme } from './themes/light.css';
-export { darkTheme } from './themes/dark.css';
-
-// Quick Theme Utilities (For Rapid Development)
-export { quickTheme, createQuickTheme } from './utils/quickTheme';
-
-// Advanced Theme Creation
-export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
-
-// Theme Management Utilities
-export { toggleTheme, setTheme, getCurrentTheme } from './theme/utils';

package/src/styles/sprinkles.css.ts

@@ -1,6 +1,6 @@
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import { queries } from './mediaqueries';
-import { themeContract } from '../theme';
+import { themeContract } from '../themes/contract.css';
 
 const responsiveProperties = defineProperties({
   conditions: {

package/src/themes/createTheme.css.ts

@@ -0,0 +1,65 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
+import { themeContract } from './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);
+};

package/src/themes/dark.css.ts

@@ -1,8 +1,9 @@
 import { createGlobalTheme } from '@vanilla-extract/css';
-import { themeContract } from '../theme/contract.css';
-import { baseDarkTheme } from '../theme/baseThemeValues';
+import { baseDarkTheme } from './baseThemeValues';
+import { themeContract } from './contract.css';
 
 // Create the dark theme at module level so Vanilla Extract can process it
+// The dark theme will only be applied when the html element has a data-theme="dark" attribute
 export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContract, {
   colors: baseDarkTheme.colors,
   space: baseDarkTheme.space,
@@ -16,4 +17,4 @@ export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContr
   section: baseDarkTheme.section,
   header: baseDarkTheme.header,
   footer: baseDarkTheme.footer,
-});
+});

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