@latte-macchiat-io/latte-vanilla-components 0.0.179 → 0.0.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.179",
+  "version": "0.0.180",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/utils/theme.ts

@@ -1,4 +1,6 @@
+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 = {
@@ -6,19 +8,19 @@ export type ThemeOverrides = {
   space?: Partial<typeof baseLightTheme.space>;
   radii?: Partial<typeof baseLightTheme.radii>;
   fonts?: Partial<typeof baseLightTheme.fonts>;
-  maxWidth?: string;
+  maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
   fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
-  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
-  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
-  shadows?: Partial<typeof baseLightTheme.shadows>;
-  section?: Partial<typeof baseLightTheme.section>;
-  header?: Partial<typeof baseLightTheme.header>;
-  footer?: Partial<typeof baseLightTheme.footer>;
+  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 object with partial overrides over light theme base
-const createAppTheme = (overrides: ThemeOverrides = {}) => {
-  return {
+// 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,
@@ -35,7 +37,7 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
       ...baseLightTheme.fonts,
       ...overrides.fonts,
     },
-    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
     fontSizes: {
       ...baseLightTheme.fontSizes,
       ...overrides.fontSizes,
@@ -64,12 +66,12 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
       ...baseLightTheme.footer,
       ...overrides.footer,
     },
-  };
+  });
 };
 
-// Utility to create a theme object with partial overrides over dark theme base
-const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return {
+// 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,
@@ -115,15 +117,15 @@ const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
       ...baseDarkTheme.footer,
       ...overrides.footer,
     },
-  };
+  });
 };
 
-// Returns theme object for light theme - consuming app must call createGlobalTheme
+// Convenience function for light theme (extends base light theme)
 export const createLightTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppTheme(overrides);
+  return createAppTheme('html', overrides);
 };
 
-// Returns theme object for dark theme - consuming app must call createGlobalTheme  
+// Convenience function for dark theme (extends base dark theme)
 export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
-  return createAppDarkTheme(overrides);
-};
+  return createAppDarkTheme('html[data-theme="dark"]', overrides);
+};