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

package/README.md

@@ -1,6 +1,7 @@
 # 🥤 Latte Vanilla Components
 
-Beautiful, type-safe React components powered by Vanilla Extract CSS. Build modern interfaces with a professional design system that's both powerful and easy to use.
+Beautiful, type-safe React components powered by Vanilla Extract CSS. Build modern interfaces with a professional design
+system that's both powerful and easy to use.
 
 ## ✨ Features
 
@@ -8,7 +9,7 @@ Beautiful, type-safe React components powered by Vanilla Extract CSS. Build mode
 - 🚀 **Zero Runtime CSS-in-JS** - Vanilla Extract for optimal performance
 - 📱 **Responsive Design** - Mobile-first, accessible components
 - 🔒 **Type Safety** - Full TypeScript support throughout
-- ⚡ **Developer Experience** - Hot reloading, IntelliSense, great docs
+- ⚡ **Developer Experience** - Hot reloading, IntelliSense, documentation
 - 🎯 **Production Ready** - Optimized builds, minimal bundle size
 
 ## 📦 Installation
@@ -25,36 +26,57 @@ yarn add @latte-macchiat-io/latte-vanilla-components
 
 ### 1. Set up your theme (choose one approach):
 
-**Option A: Zero Config (Quickest)**
+**Option A: Reuse default theme**
 
 ```typescript
 // src/styles/theme.css.ts
-import { quickTheme } from '@latte-macchiat-io/latte-vanilla-components';
-export { quickTheme };
+import {createDarkTheme, createLightTheme} from "@latte-macchiat-io/latte-vanilla-components";
+
+// Create and apply the default light theme (minimal setup)
+createLightTheme();
+
+// Optional: enable dark theme support
+createDarkTheme();
 ```
 
-**Option B: Brand Colors**
+**Option B: Customize partially themes**
 
 ```typescript
 // src/styles/theme.css.ts
-import { createQuickTheme } from '@latte-macchiat-io/latte-vanilla-components';
+import { createDarkTheme, createLightTheme } from '@latte-macchiat-io/latte-vanilla-components';
+
+// Override only specific properties in light and dark themes
+createLightTheme({
+  colors: {
+    background: '#f0f0f0', // Custom light background color
+    text: '#333333',      // Custom light text color
+  },
+  fonts: {
+    body: 'Arial, sans-serif', // Custom font for body
+  },
+  fontSizes: {
+    md: '18px', // Custom medium font size
+  },
+});
 
-export const myTheme = createQuickTheme({
+// Optional: customize dark theme as well
+createDarkTheme({
   colors: {
-    primary: '#FF7377', // Your brand color
-    secondary: '#FCEFE6', // Secondary brand color
+    background: '#121212', // Custom dark background color
+    text: '#e0e0e0',      // Custom dark text color
   },
+
 });
 ```
 
-**Option C: Professional Custom Theme**
+**Option C: Full Custom Theme (= contract redefinition)**
 
 ```typescript
 // src/styles/theme.css.ts
 import { createGlobalTheme } from '@vanilla-extract/css';
 import { themeContract } from '@latte-macchiat-io/latte-vanilla-components';
 
-export const lightTheme = createGlobalTheme(':root', themeContract, {
+createGlobalTheme(':root', themeContract, {
   colors: {
     primary: '#FF7377',
     background: '#ffffff',
@@ -70,7 +92,7 @@ export const lightTheme = createGlobalTheme(':root', themeContract, {
   // ... define all theme properties
 });
 
-export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContract, {
+createGlobalTheme('html[data-theme="dark"]', themeContract, {
   colors: {
     primary: '#FF7377',
     background: '#1a1a1a',
@@ -81,7 +103,7 @@ export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContr
 });
 ```
 
-### 2. Import your theme:
+### 2. Import your theme globally:
 
 ```typescript
 // src/app/layout.tsx (Next.js)
@@ -119,25 +141,7 @@ export default function App() {
 
 ### Available Theme Properties
 
-```typescript
-{
-  colors: {
-    primary, secondary, accent, background, surface, text,
-    textSecondary, textLight, border, error, warning, success, info
-  },
-  space: { none, xs, sm, md, lg, xl, '2xl' },        // 0px to 128px
-  radii: { none, sm, md, lg, xl, full },             // Border radius
-  fonts: { body, heading, mono },                    // Font families
-  fontSizes: { xs, sm, md, lg, xl, '2xl', '3xl', '4xl' }, // 12px to 40px
-  fontWeights: { light, normal, medium, semibold, bold },
-  lineHeights: { tight, normal, relaxed },
-  shadows: { none, sm, md, lg, xl },                 // Box shadows
-  maxWidth: string,                                  // Container width
-  section: { paddingTop, paddingBottom },           // Section spacing
-  header: { height },                               // Header height
-  footer: { height },                               // Footer height
-}
-```
+- [ ] TODO @Gaelle
 
 ### Theme Switching
 
@@ -217,12 +221,20 @@ All components are mobile-first and responsive:
 
 ```typescript
 // next.config.js
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
-const withVanillaExtract = createVanillaExtractPlugin();
+import type {NextConfig} from "next";
+import {createVanillaExtractPlugin} from "@vanilla-extract/next-plugin";
 
-module.exports = withVanillaExtract({
-  // your config
+const nextConfig: NextConfig = {
+  /* config options here */
+  transpilePackages: ['@latte-macchiat-io/latte-vanilla-components']
+};
+
+const withVanillaExtract = createVanillaExtractPlugin({
+  identifiers: process.env.NODE_ENV === 'production' ? 'short' : 'debug',
 });
+
+export default withVanillaExtract(nextConfig);
+
 ```
 
 ### Using with Vite
@@ -233,6 +245,9 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 export default {
   plugins: [vanillaExtractPlugin()],
+  optimizeDeps: {
+    exclude: ['@latte-macchiat-io/latte-vanilla-components'],
+  },
 };
 ```
 
@@ -279,7 +294,7 @@ const customButton = style({
 
 ---
 
-## 🛠 Development & Contributing
+## 🛠 Development & storybook testing
 
 ### Run Storybook
 
@@ -295,4 +310,4 @@ Push changes to `main` branch and GitHub Actions will automatically publish to N
 
 ---
 
-Made with ☕ by the Latte team. Build beautiful interfaces! ✨
+Made with ❤️ by the Latte team 🥤

package/package.json

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

package/src/components/Button/stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 import { Button } from './Button';
 import { Section } from '../Section/Section';
 

package/src/components/Logo/stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Logo } from '../../index';
 

package/src/components/Modal/stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Modal } from './Modal';
 import { Button } from '../Button/Button';
 import { Section } from '../Section/Section';

package/src/components/Section/stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 import { Section } from './Section';
 import { Button } from '../Button/Button';
 

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