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

package/package.json

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

package/src/index.ts

@@ -1,11 +1,7 @@
 // Theme system - Import this first to apply global styles
 export { themeContract } from './themes/contract.css';
 export { baseLightTheme, baseDarkTheme } from './themes/baseThemeValues';
-export { createLightTheme, createDarkTheme, type ThemeOverrides } from './themes/createTheme.css';
-
-// Available themes
-export { lightTheme } from './themes/light.css';
-export { darkTheme } from './themes/dark.css';
+export { createLightTheme, createDarkTheme, type ThemeOverrides } from './themes/createTheme';
 
 // Styles utilities (sprinkles, media queries, etc.)
 export { sprinkles, responsiveProperties, type Sprinkles } from './styles/sprinkles.css';

package/src/themes/{createTheme.css.ts → createTheme.ts}

@@ -10,12 +10,12 @@ export type ThemeOverrides = {
   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>;
+  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>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -25,7 +25,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     space: { ...baseLightTheme.space, ...overrides.space },
     radii: { ...baseLightTheme.radii, ...overrides.radii },
     fonts: { ...baseLightTheme.fonts, ...overrides.fonts },
-    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
+    maxWidth: `${overrides.maxWidth || baseLightTheme.maxWidth}`,
     fontSizes: { ...baseLightTheme.fontSizes, ...overrides.fontSizes },
     fontWeights: { ...baseLightTheme.fontWeights, ...overrides.fontWeights },
     lineHeights: { ...baseLightTheme.lineHeights, ...overrides.lineHeights },
@@ -43,7 +43,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     space: { ...baseDarkTheme.space, ...overrides.space },
     radii: { ...baseDarkTheme.radii, ...overrides.radii },
     fonts: { ...baseDarkTheme.fonts, ...overrides.fonts },
-    maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
+    maxWidth: `${overrides.maxWidth || baseDarkTheme.maxWidth}`,
     fontSizes: { ...baseDarkTheme.fontSizes, ...overrides.fontSizes },
     fontWeights: { ...baseDarkTheme.fontWeights, ...overrides.fontWeights },
     lineHeights: { ...baseDarkTheme.lineHeights, ...overrides.lineHeights },
@@ -62,4 +62,4 @@ export const createLightTheme = (overrides: ThemeOverrides = {}) => {
 // 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,20 +0,0 @@
-import { createGlobalTheme } from '@vanilla-extract/css';
-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,
-  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 './/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, {
-  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,
-});