@latte-macchiat-io/latte-vanilla-components 0.0.182 → 0.0.184

package/package.json

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

package/src/index.ts

@@ -89,7 +89,8 @@ export { ToRemove } from './components/ToRemove/ToRemove';
 // Theme utilities  
 export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
 export { createCustomLightTheme, createCustomDarkTheme, type ThemeOverrides as CustomThemeOverrides } from './utils/createCustomTheme';
-export { createScopedTheme } from './utils/themeOverrides.css';
+export { createScopedTheme } from './utils/themeOverrides';
+export { quickTheme, createQuickTheme } from './utils/quickTheme';
 // Theme contract and values
 export { themeContract } from './theme/contract.css';
 export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
@@ -97,6 +98,7 @@ export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
 // Pre-built themes (these actually generate CSS variables)
 export { lightTheme } from './themes/light.css';
 export { darkTheme } from './themes/dark.css';
+export { defaultTheme } from './themes/default.css';
 
 // Theme utilities
 export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';

package/src/themes/dark.css.ts

@@ -8,7 +8,7 @@ export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContr
   space: baseDarkTheme.space,
   radii: baseDarkTheme.radii,
   fonts: baseDarkTheme.fonts,
-  maxWidth: `${baseDarkTheme.maxWidth}px`,
+  maxWidth: baseDarkTheme.maxWidth,
   fontSizes: baseDarkTheme.fontSizes,
   fontWeights: baseDarkTheme.fontWeights,
   lineHeights: baseDarkTheme.lineHeights,

package/src/themes/default.css.ts

@@ -0,0 +1,20 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { themeContract } from '../theme/contract.css';
+import { baseLightTheme } from '../theme/baseThemeValues';
+
+// Create a default theme for quick usage and RAD (Rapid Application Development)
+// This provides a ready-to-use theme without any customization needed
+export const defaultTheme = 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,
+});

package/src/themes/light.css.ts

@@ -8,7 +8,7 @@ export const lightTheme = createGlobalTheme(':root', themeContract, {
   space: baseLightTheme.space,
   radii: baseLightTheme.radii,
   fonts: baseLightTheme.fonts,
-  maxWidth: `${baseLightTheme.maxWidth}px`,
+  maxWidth: baseLightTheme.maxWidth,
   fontSizes: baseLightTheme.fontSizes,
   fontWeights: baseLightTheme.fontWeights,
   lineHeights: baseLightTheme.lineHeights,

package/src/utils/quickTheme.ts

@@ -0,0 +1,38 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { themeContract } from '../theme/contract.css';
+import { baseLightTheme } from '../theme/baseThemeValues';
+
+// Quick theme utility for RAD (Rapid Application Development)
+// Just import this to get a working theme instantly
+export const quickTheme = 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,
+});
+
+// Helper function to create quick override themes
+export const createQuickTheme = (overrides: Partial<typeof baseLightTheme> = {}) => {
+  return createGlobalTheme(':root', themeContract, {
+    colors: { ...baseLightTheme.colors, ...overrides.colors },
+    space: { ...baseLightTheme.space, ...overrides.space },
+    radii: { ...baseLightTheme.radii, ...overrides.radii },
+    fonts: { ...baseLightTheme.fonts, ...overrides.fonts },
+    maxWidth: overrides.maxWidth || baseLightTheme.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 },
+  });
+};