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

package/README.md

@@ -1,6 +1,9 @@
-# 🥤 Latte Vanilla Components
+# 🥤 Latte Vanilla Components [![npm version](https://img.shields.io/npm/v/@latte-macchiat-io/latte-vanilla-components?style=flat-square)](https://www.npmjs.com/package/@latte-macchiat-io/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 for amazing projects, with a touch of Vanilla 🥤
+
+Intended for internal use by the 👩‍💻🧑‍💻 [latte-macchiat.io](https://latte-macchiat.io) team, we can't offer official support, but feel free to reach out
+with questions, feedback or project ideas!
 
 ## ✨ Features
 
@@ -8,9 +11,17 @@ 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
 
+## 🤓 Philosophy
+
+This library is shipped as raw code (ESM + TypeScript) to be compiled in your project, allowing full
+customization and tree-shaking. It is not a pre-built design system, but rather a set of building blocks
+to create your own unique designs.
+
+You will need to set up Vanilla Extract in your build system (Next.js, Vite, etc.) to use this library.
+
 ## 📦 Installation
 
 ```bash
@@ -25,36 +36,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';
 
-export const myTheme = createQuickTheme({
+// Override only specific properties in light and dark themes
+createLightTheme({
   colors: {
-    primary: '#FF7377', // Your brand color
-    secondary: '#FCEFE6', // Secondary brand color
+    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
   },
 });
+
+// Optional: customize dark theme as well
+createDarkTheme({
+  colors: {
+    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 +102,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 +113,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 +151,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 +231,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 +255,9 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 export default {
   plugins: [vanillaExtractPlugin()],
+  optimizeDeps: {
+    exclude: ['@latte-macchiat-io/latte-vanilla-components'],
+  },
 };
 ```
 
@@ -279,7 +304,7 @@ const customButton = style({
 
 ---
 
-## 🛠 Development & Contributing
+## 🛠 Development & storybook testing
 
 ### Run Storybook
 
@@ -295,4 +320,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.189",
+  "version": "0.0.191",
   "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/ConsentCookie/ConsentCookie.tsx

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { forwardRef, useEffect, useState } from 'react';
 import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './ConsentCookie.css';
 import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
-import { getCookie, setCookie } from '../../utils/cookie';
 import { Button } from '../Button/Button';
+import { getCookie, setCookie } from './cookie';
 
 // Declare window object including gtag to avoid TypeScript errors
 declare const window: Window &

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';