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

package/src/components/Modal/Modal.css.ts

@@ -1,7 +1,7 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const fadeIn = keyframes({
   from: { opacity: '0' },

package/src/components/Modal/stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Modal } from './Modal';
@@ -76,13 +77,7 @@ const InteractiveModal = ({ size = 'medium', centered = true, ...args }: any) =>
       <Button variant="primary" onClick={() => setIsOpen(true)}>
         Open Modal
       </Button>
-      <Modal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        size={size}
-        centered={centered}
-        {...args}
-      >
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size={size} centered={centered} {...args}>
         <div style={{ padding: '2rem' }}>
           <h2>Modal Title</h2>
           <p>This is the modal content. You can put any React components here.</p>
@@ -103,7 +98,7 @@ const InteractiveModal = ({ size = 'medium', centered = true, ...args }: any) =>
 export const Default: Story = {
   render: (args) => <InteractiveModal {...args} />,
   args: {
-    size: 'medium',
+    size: 'md',
     centered: true,
     showCloseButton: true,
     closeOnBackdropClick: true,
@@ -194,24 +189,15 @@ export const ConfirmationDialog: Story = {
 
     return (
       <Section>
-        <Button variant="destructive" onClick={() => setIsOpen(true)}>
+        <Button variant="danger" onClick={() => setIsOpen(true)}>
           Delete Item
         </Button>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="small"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="sm" centered={true}>
           <div style={{ padding: '2rem', textAlign: 'center' }}>
-            <h3 style={{ color: 'var(--latte-colors-error)', marginBottom: '1rem' }}>
-              Delete Confirmation
-            </h3>
-            <p style={{ marginBottom: '2rem' }}>
-              Are you sure you want to delete this item? This action cannot be undone.
-            </p>
+            <h3 style={{ color: 'var(--latte-colors-error)', marginBottom: '1rem' }}>Delete Confirmation</h3>
+            <p style={{ marginBottom: '2rem' }}>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-              <Button variant="destructive" onClick={() => setIsOpen(false)}>
+              <Button variant="danger" onClick={() => setIsOpen(false)}>
                 Delete
               </Button>
               <Button variant="secondary" onClick={() => setIsOpen(false)}>
@@ -241,58 +227,46 @@ export const FormModal: Story = {
         <Button variant="primary" onClick={() => setIsOpen(true)}>
           Add New User
         </Button>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="medium"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="md" centered={true}>
           <div style={{ padding: '2rem' }}>
             <h2 style={{ marginBottom: '2rem' }}>Add New User</h2>
             <form style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Name
-                </label>
-                <input 
-                  type="text" 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Name</label>
+                <input
+                  type="text"
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }} 
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}
                 />
               </div>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Email
-                </label>
-                <input 
-                  type="email" 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Email</label>
+                <input
+                  type="email"
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }} 
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}
                 />
               </div>
               <div>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
-                  Role
-                </label>
-                <select 
-                  style={{ 
-                    width: '100%', 
-                    padding: '0.75rem', 
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>Role</label>
+                <select
+                  style={{
+                    width: '100%',
+                    padding: '0.75rem',
                     border: '1px solid var(--latte-colors-border)',
                     borderRadius: 'var(--latte-radii-md)',
-                    fontSize: 'var(--latte-fontSizes-md)'
-                  }}
-                >
+                    fontSize: 'var(--latte-fontSizes-md)',
+                  }}>
                   <option>User</option>
                   <option>Admin</option>
                   <option>Moderator</option>
@@ -346,50 +320,42 @@ export const ImageGallery: Story = {
               key={index}
               src={src}
               alt={`Gallery ${index + 1}`}
-              style={{ 
-                width: '100%', 
-                height: '150px', 
-                objectFit: 'cover', 
+              style={{
+                width: '100%',
+                height: '150px',
+                objectFit: 'cover',
                 borderRadius: 'var(--latte-radii-md)',
-                cursor: 'pointer'
+                cursor: 'pointer',
               }}
               onClick={() => openImage(index)}
             />
           ))}
         </div>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          size="large"
-          centered={true}
-        >
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="lg" centered={true}>
           <div style={{ padding: '1rem' }}>
             <img
               src={images[selectedImage]}
               alt={`Gallery ${selectedImage + 1}`}
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                borderRadius: 'var(--latte-radii-md)'
+              style={{
+                width: '100%',
+                height: 'auto',
+                borderRadius: 'var(--latte-radii-md)',
               }}
             />
-            <div style={{ 
-              marginTop: '1rem', 
-              display: 'flex', 
-              justifyContent: 'space-between', 
-              alignItems: 'center' 
-            }}>
-              <Button 
-                variant="ghost" 
-                onClick={() => setSelectedImage((prev) => (prev > 0 ? prev - 1 : images.length - 1))}
-              >
+            <div
+              style={{
+                marginTop: '1rem',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Button variant="ghost" onClick={() => setSelectedImage((prev) => (prev > 0 ? prev - 1 : images.length - 1))}>
                 ← Previous
               </Button>
-              <span>Image {selectedImage + 1} of {images.length}</span>
-              <Button 
-                variant="ghost" 
-                onClick={() => setSelectedImage((prev) => (prev < images.length - 1 ? prev + 1 : 0))}
-              >
+              <span>
+                Image {selectedImage + 1} of {images.length}
+              </span>
+              <Button variant="ghost" onClick={() => setSelectedImage((prev) => (prev < images.length - 1 ? prev + 1 : 0))}>
                 Next →
               </Button>
             </div>
@@ -405,4 +371,4 @@ export const ImageGallery: Story = {
       },
     },
   },
-};
+};

package/src/components/Nav/Nav.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const navBase = style({
   display: 'flex',

package/src/components/Nav/Nav.tsx

@@ -68,6 +68,7 @@ export const Nav = forwardRef<HTMLElement, NavProps>(
   ) => {
     return (
       <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={clsx(
           navRecipe({ orientation, variant, justify }),

package/src/components/NavLegal/NavLegal.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
+import { themeContract } from '../../themes/contract.css';
 
 const navLegalBase = style({
   display: 'flex',

package/src/components/NavSocial/NavSocial.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme/contract.css';
+import { themeContract } from '../../themes/contract.css';
 
 const navSocialBase = style({
   display: 'flex',

package/src/components/Section/Section.css.ts

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

package/src/components/Section/stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Section } from './Section';
 import { Button } from '../Button/Button';
@@ -101,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>
       </>
     ),
@@ -121,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>
     ),
@@ -143,7 +146,7 @@ export const NoSpacing: Story = {
 
 export const SmallSpacing: Story = {
   args: {
-    spacing: 'small',
+    spacing: 'sm',
     children: (
       <>
         <h2>Small Spacing Section</h2>
@@ -155,7 +158,7 @@ export const SmallSpacing: Story = {
 
 export const LargeSpacing: Story = {
   args: {
-    spacing: 'large',
+    spacing: 'lg',
     children: (
       <>
         <h2>Large Spacing Section</h2>
@@ -208,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>
@@ -246,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>
@@ -317,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>
@@ -341,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,
-});
+});