@latte-macchiat-io/latte-vanilla-components 0.0.183 → 0.0.185

package/package.json

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

package/src/index.ts

@@ -90,6 +90,7 @@ export { ToRemove } from './components/ToRemove/ToRemove';
 export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
 export { createCustomLightTheme, createCustomDarkTheme, type ThemeOverrides as CustomThemeOverrides } from './utils/createCustomTheme';
 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/theme/contract.css.ts

@@ -4,80 +4,80 @@ import { createGlobalThemeContract } from '@vanilla-extract/css';
 // This enables predictable CSS variable names for external consumption and runtime overrides
 export const themeContract = createGlobalThemeContract({
   colors: {
-    primary: null,
-    secondary: null,
-    accent: null,
-    background: null,
-    surface: null,
-    text: null,
-    textSecondary: null,
-    textLight: null,
-    border: null,
-    error: null,
-    warning: null,
-    success: null,
-    info: null,
+    primary: 'latte-colors-primary',
+    secondary: 'latte-colors-secondary',
+    accent: 'latte-colors-accent',
+    background: 'latte-colors-background',
+    surface: 'latte-colors-surface',
+    text: 'latte-colors-text',
+    textSecondary: 'latte-colors-textSecondary',
+    textLight: 'latte-colors-textLight',
+    border: 'latte-colors-border',
+    error: 'latte-colors-error',
+    warning: 'latte-colors-warning',
+    success: 'latte-colors-success',
+    info: 'latte-colors-info',
   },
   space: {
-    none: null,
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    '2xl': null,
+    none: 'latte-space-none',
+    xs: 'latte-space-xs',
+    sm: 'latte-space-sm',
+    md: 'latte-space-md',
+    lg: 'latte-space-lg',
+    xl: 'latte-space-xl',
+    '2xl': 'latte-space-2xl',
   },
   radii: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    full: null,
+    none: 'latte-radii-none',
+    sm: 'latte-radii-sm',
+    md: 'latte-radii-md',
+    lg: 'latte-radii-lg',
+    xl: 'latte-radii-xl',
+    full: 'latte-radii-full',
   },
   fonts: {
-    body: null,
-    heading: null,
-    mono: null,
+    body: 'latte-fonts-body',
+    heading: 'latte-fonts-heading',
+    mono: 'latte-fonts-mono',
   },
   fontSizes: {
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    '2xl': null,
-    '3xl': null,
-    '4xl': null,
+    xs: 'latte-fontSizes-xs',
+    sm: 'latte-fontSizes-sm',
+    md: 'latte-fontSizes-md',
+    lg: 'latte-fontSizes-lg',
+    xl: 'latte-fontSizes-xl',
+    '2xl': 'latte-fontSizes-2xl',
+    '3xl': 'latte-fontSizes-3xl',
+    '4xl': 'latte-fontSizes-4xl',
   },
   fontWeights: {
-    light: null,
-    normal: null,
-    medium: null,
-    semibold: null,
-    bold: null,
+    light: 'latte-fontWeights-light',
+    normal: 'latte-fontWeights-normal',
+    medium: 'latte-fontWeights-medium',
+    semibold: 'latte-fontWeights-semibold',
+    bold: 'latte-fontWeights-bold',
   },
   lineHeights: {
-    tight: null,
-    normal: null,
-    relaxed: null,
+    tight: 'latte-lineHeights-tight',
+    normal: 'latte-lineHeights-normal',
+    relaxed: 'latte-lineHeights-relaxed',
   },
   shadows: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
+    none: 'latte-shadows-none',
+    sm: 'latte-shadows-sm',
+    md: 'latte-shadows-md',
+    lg: 'latte-shadows-lg',
+    xl: 'latte-shadows-xl',
   },
-  maxWidth: null,
+  maxWidth: 'latte-maxWidth',
   section: {
-    paddingTop: null,
-    paddingBottom: null,
+    paddingTop: 'latte-section-paddingTop',
+    paddingBottom: 'latte-section-paddingBottom',
   },
   header: {
-    height: null,
+    height: 'latte-header-height',
   },
   footer: {
-    height: null,
+    height: 'latte-footer-height',
   },
-}, (value) => `latte-${value}`);
+});

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 },
+  });
+};