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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +286 -10
  2. package/package.json +5 -3
  3. package/src/components/Actions/Actions.css.ts +1 -1
  4. package/src/components/Button/Button.css.ts +1 -1
  5. package/src/components/Button/stories.tsx +10 -17
  6. package/src/components/Carousel/Carousel.css.ts +1 -1
  7. package/src/components/Columns/Columns.css.ts +1 -1
  8. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  9. package/src/components/Footer/Footer.css.ts +1 -1
  10. package/src/components/Form/Form.css.ts +1 -1
  11. package/src/components/Form/Row/Row.css.ts +1 -1
  12. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  13. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  14. package/src/components/Form/TextField/TextField.css.ts +1 -1
  15. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  16. package/src/components/Header/Header.css.ts +1 -1
  17. package/src/components/Header/HeaderOverlay/index.tsx +1 -1
  18. package/src/components/Header/HeaderOverlay/styles.css.ts +7 -7
  19. package/src/components/Header/ToggleNav/index.tsx +2 -5
  20. package/src/components/Icon/Icon.css.ts +0 -1
  21. package/src/components/KeyNumber/KeyNumber.css.ts +1 -1
  22. package/src/components/LanguageSwitcher/LanguageSwitcher.css.ts +1 -1
  23. package/src/components/Logo/Logo.css.ts +1 -1
  24. package/src/components/Logo/stories.tsx +1 -0
  25. package/src/components/Main/Main.css.ts +1 -1
  26. package/src/components/Modal/Modal.css.ts +1 -1
  27. package/src/components/Modal/stories.tsx +55 -89
  28. package/src/components/Nav/Nav.css.ts +1 -1
  29. package/src/components/Nav/Nav.tsx +1 -0
  30. package/src/components/NavLegal/NavLegal.css.ts +1 -1
  31. package/src/components/NavSocial/NavSocial.css.ts +1 -1
  32. package/src/components/Section/Section.css.ts +1 -1
  33. package/src/components/Section/stories.tsx +61 -61
  34. package/src/components/Video/Video.css.ts +1 -1
  35. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +1 -1
  36. package/src/index.ts +9 -22
  37. package/src/styles/sprinkles.css.ts +1 -1
  38. package/src/themes/createTheme.css.ts +65 -0
  39. package/src/themes/dark.css.ts +4 -3
  40. package/src/themes/light.css.ts +3 -3
  41. package/src/types/withClassName.ts +1 -0
  42. package/src/assets/styles/default-theme.ts +0 -312
  43. package/src/assets/styles/mediaqueries.tsx +0 -24
  44. package/src/components/ToRemove/ToRemove.tsx +0 -3
  45. package/src/theme/index.ts +0 -6
  46. package/src/theme/utils.ts +0 -76
  47. package/src/types/theme.ts +0 -295
  48. package/src/utils/quickTheme.ts +0 -38
  49. package/src/utils/theme.ts +0 -131
  50. /package/src/{theme → themes}/baseThemeValues.ts +0 -0
  51. /package/src/{theme → themes}/contract.css.ts +0 -0
package/README.md CHANGED
@@ -1,22 +1,298 @@
1
- # latte-vanilla-components
1
+ # 🥤 Latte Vanilla Components
2
2
 
3
- Beautiful components for amazing projects, with a touch of Vanilla 🥤
3
+ 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.
4
4
 
5
- ## Publish to NPM Registry
5
+ ## Features
6
6
 
7
- Just push changes to the `main` branch and the GitHub Actions workflow will publish the package to the NPM registry.
7
+ - 🎨 **Professional Theme System** - Light/dark themes with full customization
8
+ - 🚀 **Zero Runtime CSS-in-JS** - Vanilla Extract for optimal performance
9
+ - 📱 **Responsive Design** - Mobile-first, accessible components
10
+ - 🔒 **Type Safety** - Full TypeScript support throughout
11
+ - ⚡ **Developer Experience** - Hot reloading, IntelliSense, great docs
12
+ - 🎯 **Production Ready** - Optimized builds, minimal bundle size
8
13
 
9
- ## Run the Storybook
14
+ ## 📦 Installation
10
15
 
11
16
  ```bash
12
- pnpm run storybook
17
+ npm install @latte-macchiat-io/latte-vanilla-components
18
+ # or
19
+ pnpm add @latte-macchiat-io/latte-vanilla-components
20
+ # or
21
+ yarn add @latte-macchiat-io/latte-vanilla-components
22
+ ```
23
+
24
+ ## 🚀 Quick Start
25
+
26
+ ### 1. Set up your theme (choose one approach):
27
+
28
+ **Option A: Zero Config (Quickest)**
29
+
30
+ ```typescript
31
+ // src/styles/theme.css.ts
32
+ import { quickTheme } from '@latte-macchiat-io/latte-vanilla-components';
33
+ export { quickTheme };
34
+ ```
35
+
36
+ **Option B: Brand Colors**
37
+
38
+ ```typescript
39
+ // src/styles/theme.css.ts
40
+ import { createQuickTheme } from '@latte-macchiat-io/latte-vanilla-components';
41
+
42
+ export const myTheme = createQuickTheme({
43
+ colors: {
44
+ primary: '#FF7377', // Your brand color
45
+ secondary: '#FCEFE6', // Secondary brand color
46
+ },
47
+ });
48
+ ```
49
+
50
+ **Option C: Professional Custom Theme**
51
+
52
+ ```typescript
53
+ // src/styles/theme.css.ts
54
+ import { createGlobalTheme } from '@vanilla-extract/css';
55
+ import { themeContract } from '@latte-macchiat-io/latte-vanilla-components';
56
+
57
+ export const lightTheme = createGlobalTheme(':root', themeContract, {
58
+ colors: {
59
+ primary: '#FF7377',
60
+ background: '#ffffff',
61
+ text: '#000000',
62
+ // ... define all colors
63
+ },
64
+ space: {
65
+ xs: '4px',
66
+ sm: '8px',
67
+ md: '16px',
68
+ // ... define all spacing
69
+ },
70
+ // ... define all theme properties
71
+ });
72
+
73
+ export const darkTheme = createGlobalTheme('html[data-theme="dark"]', themeContract, {
74
+ colors: {
75
+ primary: '#FF7377',
76
+ background: '#1a1a1a',
77
+ text: '#ffffff',
78
+ // ... dark theme colors
79
+ },
80
+ // ... same structure as light theme
81
+ });
82
+ ```
83
+
84
+ ### 2. Import your theme:
85
+
86
+ ```typescript
87
+ // src/app/layout.tsx (Next.js)
88
+ import '../styles/theme.css';
89
+
90
+ // src/main.tsx (Vite)
91
+ import './styles/theme.css';
92
+ ```
93
+
94
+ ### 3. Start using components:
95
+
96
+ ```tsx
97
+ import { Button, Section, Header, Modal } from '@latte-macchiat-io/latte-vanilla-components';
98
+
99
+ export default function App() {
100
+ return (
101
+ <Section>
102
+ <Header>
103
+ <h1>My App</h1>
104
+ </Header>
105
+
106
+ <Button variant="primary" size="large">
107
+ Get Started
108
+ </Button>
109
+
110
+ <Modal>
111
+ <p>Beautiful, accessible modal content!</p>
112
+ </Modal>
113
+ </Section>
114
+ );
115
+ }
116
+ ```
117
+
118
+ ## 🎨 Theme Customization
119
+
120
+ ### Available Theme Properties
121
+
122
+ ```typescript
123
+ {
124
+ colors: {
125
+ primary, secondary, accent, background, surface, text,
126
+ textSecondary, textLight, border, error, warning, success, info
127
+ },
128
+ space: { none, xs, sm, md, lg, xl, '2xl' }, // 0px to 128px
129
+ radii: { none, sm, md, lg, xl, full }, // Border radius
130
+ fonts: { body, heading, mono }, // Font families
131
+ fontSizes: { xs, sm, md, lg, xl, '2xl', '3xl', '4xl' }, // 12px to 40px
132
+ fontWeights: { light, normal, medium, semibold, bold },
133
+ lineHeights: { tight, normal, relaxed },
134
+ shadows: { none, sm, md, lg, xl }, // Box shadows
135
+ maxWidth: string, // Container width
136
+ section: { paddingTop, paddingBottom }, // Section spacing
137
+ header: { height }, // Header height
138
+ footer: { height }, // Footer height
139
+ }
140
+ ```
141
+
142
+ ### Theme Switching
143
+
144
+ Add dark mode support:
145
+
146
+ ```tsx
147
+ import { setTheme, toggleTheme } from '@latte-macchiat-io/latte-vanilla-components';
148
+
149
+ function ThemeToggle() {
150
+ return <button onClick={() => toggleTheme()}>Toggle Dark Mode</button>;
151
+ }
152
+
153
+ // Or set specific theme
154
+ setTheme('dark'); // Switch to dark
155
+ setTheme('light'); // Switch to light
156
+ ```
157
+
158
+ ## 🧩 Available Components
159
+
160
+ ### Layout Components
161
+
162
+ - **Section** - Content sections with consistent spacing
163
+ - **Header** - App headers with navigation support
164
+ - **Footer** - App footers with links and info
165
+ - **Main** - Main content areas
166
+ - **Columns** - Responsive column layouts
167
+
168
+ ### Interactive Components
169
+
170
+ - **Button** - Primary, secondary, and variant buttons
171
+ - **Modal** - Accessible modals with animations
172
+ - **Form** - Complete form system with validation
173
+ - **TextField** - Text inputs with labels and validation
174
+ - **Carousel** - Image and content carousels
175
+
176
+ ### Content Components
177
+
178
+ - **Video** - Responsive video players
179
+ - **VideoFullWidth** - Full-width video backgrounds
180
+ - **Logo** - Responsive logo display
181
+ - **Icon** - Icon system with multiple sizes
182
+ - **KeyNumber** - Highlight important numbers/stats
183
+
184
+ ### Navigation Components
185
+
186
+ - **Nav** - Primary navigation
187
+ - **NavSocial** - Social media links
188
+ - **NavLegal** - Legal/policy links
189
+ - **LanguageSwitcher** - Multi-language support
190
+
191
+ ### Utility Components
192
+
193
+ - **Actions** - Action button groups
194
+ - **ConsentCookie** - GDPR cookie consent
195
+
196
+ ## 📱 Responsive Design
197
+
198
+ All components are mobile-first and responsive:
199
+
200
+ ```tsx
201
+ // Responsive spacing using sprinkles
202
+ <Section className={sprinkles({
203
+ padding: { mobile: 'md', desktop: 'xl' }
204
+ })}>
205
+ Content adapts to screen size
206
+ </Section>
207
+
208
+ // Built-in responsive variants
209
+ <Button size={{ mobile: 'small', desktop: 'large' }}>
210
+ Responsive Button
211
+ </Button>
212
+ ```
213
+
214
+ ## 🛠 Development
215
+
216
+ ### Using with Next.js
217
+
218
+ ```typescript
219
+ // next.config.js
220
+ const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
221
+ const withVanillaExtract = createVanillaExtractPlugin();
222
+
223
+ module.exports = withVanillaExtract({
224
+ // your config
225
+ });
226
+ ```
227
+
228
+ ### Using with Vite
229
+
230
+ ```typescript
231
+ // vite.config.ts
232
+ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
233
+
234
+ export default {
235
+ plugins: [vanillaExtractPlugin()],
236
+ };
237
+ ```
238
+
239
+ ## 📚 Advanced Usage
240
+
241
+ ### Custom Component Styling
242
+
243
+ ```tsx
244
+ import { sprinkles } from '@latte-macchiat-io/latte-vanilla-components';
245
+
246
+ // Use the sprinkles utility for custom styling
247
+ <div
248
+ className={sprinkles({
249
+ padding: 'lg',
250
+ backgroundColor: 'primary',
251
+ borderRadius: 'md',
252
+ color: 'white',
253
+ })}>
254
+ Custom styled element
255
+ </div>;
256
+ ```
257
+
258
+ ### Extending Components
259
+
260
+ ```tsx
261
+ // Create your own component using the theme
262
+ import { style } from '@vanilla-extract/css';
263
+ import { themeContract } from '@latte-macchiat-io/latte-vanilla-components';
264
+
265
+ const customButton = style({
266
+ backgroundColor: themeContract.colors.primary,
267
+ color: themeContract.colors.background,
268
+ padding: `${themeContract.space.md} ${themeContract.space.lg}`,
269
+ borderRadius: themeContract.radii.full,
270
+ });
13
271
  ```
14
- Then open [http://localhost:6006](http://localhost:6006) in your browser.
15
272
 
16
- ### Install the package in your project
273
+ ## 🎯 Performance
274
+
275
+ - **Zero Runtime CSS-in-JS** - All styles compiled at build time
276
+ - **Atomic CSS** - Reusable utility classes reduce bundle size
277
+ - **Tree Shaking** - Only import components you use
278
+ - **Optimized Builds** - Minimal CSS output in production
279
+
280
+ ---
281
+
282
+ ## 🛠 Development & Contributing
283
+
284
+ ### Run Storybook
17
285
 
18
286
  ```bash
19
- pnpm add @latte-macchiat-io/latte-vanilla-components
287
+ pnpm run storybook
20
288
  ```
21
289
 
22
- Enjoy! 🎉
290
+ Then open [http://localhost:6006](http://localhost:6006) to explore components.
291
+
292
+ ### Publishing
293
+
294
+ Push changes to `main` branch and GitHub Actions will automatically publish to NPM.
295
+
296
+ ---
297
+
298
+ Made with ☕ by the Latte team. Build beautiful interfaces! ✨
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.186",
3
+ "version": "0.0.188",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -32,6 +32,7 @@
32
32
  "devDependencies": {
33
33
  "@chromatic-com/storybook": "^4.1.1",
34
34
  "@playwright/test": "^1.50.0",
35
+ "@storybook/addon-docs": "^9.1.5",
35
36
  "@storybook/addon-onboarding": "^9.1.5",
36
37
  "@storybook/react-vite": "^9.1.5",
37
38
  "@types/node": "^20",
@@ -42,17 +43,18 @@
42
43
  "@vanilla-extract/dynamic": "^2.1.5",
43
44
  "@vanilla-extract/recipes": "^0.5.7",
44
45
  "@vanilla-extract/sprinkles": "^1.6.5",
46
+ "@vanilla-extract/vite-plugin": "^5.1.1",
45
47
  "clsx": "^2.1.1",
46
48
  "eslint": "^9.15.0",
47
49
  "eslint-config-prettier": "^10.0.1",
50
+ "eslint-import-resolver-typescript": "^4.4.4",
48
51
  "eslint-plugin-import": "^2.31.0",
49
52
  "eslint-plugin-jsx-a11y": "^6.6.1",
50
53
  "eslint-plugin-storybook": "^9.1.5",
51
54
  "prettier": "^3.4.2",
52
55
  "storybook": "^9.1.5",
53
56
  "typescript": "5.6.3",
54
- "typescript-eslint": "^8.21.0",
55
- "@storybook/addon-docs": "^9.1.5"
57
+ "typescript-eslint": "^8.21.0"
56
58
  },
57
59
  "engines": {
58
60
  "node": ">=20.9.0",
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
4
3
  import { queries } from '../../styles/mediaqueries';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const actionsBase = style({
7
7
  display: 'flex',
@@ -1,5 +1,5 @@
1
1
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
2
- import { themeContract } from '../../theme';
2
+ import { themeContract } from '../../themes/contract.css';
3
3
 
4
4
  export const buttonRecipe = recipe({
5
5
  base: {
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react-vite';
2
3
  import { Button } from './Button';
3
4
  import { Section } from '../Section/Section';
@@ -80,18 +81,11 @@ export const Ghost: Story = {
80
81
  },
81
82
  };
82
83
 
83
- export const Destructive: Story = {
84
- args: {
85
- variant: 'destructive',
86
- children: 'Destructive Button',
87
- },
88
- };
89
-
90
84
  // Size Variants
91
85
  export const Small: Story = {
92
86
  args: {
93
87
  variant: 'primary',
94
- size: 'small',
88
+ size: 'sm',
95
89
  children: 'Small Button',
96
90
  },
97
91
  };
@@ -99,7 +93,7 @@ export const Small: Story = {
99
93
  export const Medium: Story = {
100
94
  args: {
101
95
  variant: 'primary',
102
- size: 'medium',
96
+ size: 'md',
103
97
  children: 'Medium Button',
104
98
  },
105
99
  };
@@ -107,7 +101,7 @@ export const Medium: Story = {
107
101
  export const Large: Story = {
108
102
  args: {
109
103
  variant: 'primary',
110
- size: 'large',
104
+ size: 'lg',
111
105
  children: 'Large Button',
112
106
  },
113
107
  };
@@ -148,7 +142,6 @@ export const AllVariants: Story = {
148
142
  <Button variant="primary">Primary</Button>
149
143
  <Button variant="secondary">Secondary</Button>
150
144
  <Button variant="ghost">Ghost</Button>
151
- <Button variant="destructive">Destructive</Button>
152
145
  </div>
153
146
  </Section>
154
147
  ),
@@ -166,13 +159,13 @@ export const AllSizes: Story = {
166
159
  render: () => (
167
160
  <Section>
168
161
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
169
- <Button variant="primary" size="small">
162
+ <Button variant="primary" size="sm">
170
163
  Small
171
164
  </Button>
172
- <Button variant="primary" size="medium">
165
+ <Button variant="primary" size="md">
173
166
  Medium
174
167
  </Button>
175
- <Button variant="primary" size="large">
168
+ <Button variant="primary" size="lg">
176
169
  Large
177
170
  </Button>
178
171
  </div>
@@ -195,10 +188,10 @@ export const InteractiveExample: Story = {
195
188
  <div>
196
189
  <h3>Call to Action</h3>
197
190
  <div style={{ display: 'flex', gap: '1rem' }}>
198
- <Button variant="primary" size="large">
191
+ <Button variant="primary" size="lg">
199
192
  Get Started
200
193
  </Button>
201
- <Button variant="secondary" size="large">
194
+ <Button variant="secondary" size="lg">
202
195
  Learn More
203
196
  </Button>
204
197
  </div>
@@ -209,7 +202,7 @@ export const InteractiveExample: Story = {
209
202
  <div style={{ display: 'flex', gap: '0.5rem' }}>
210
203
  <Button variant="primary">Save</Button>
211
204
  <Button variant="secondary">Cancel</Button>
212
- <Button variant="destructive">Delete</Button>
205
+ <Button variant="danger">Delete</Button>
213
206
  </div>
214
207
  </div>
215
208
 
@@ -1,7 +1,7 @@
1
1
  import { keyframes, style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
  keyframes({
6
6
  '0%': { transform: 'translateX(0)' },
7
7
  '100%': { transform: 'translateX(var(--slide-offset))' },
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const columnsBase = style({
7
7
  display: 'flex',
@@ -1,7 +1,7 @@
1
1
  import { keyframes, style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme/contract.css';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const fadeIn = keyframes({
7
7
  from: { opacity: '0' },
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme/contract.css';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const footerBase = style({
7
7
  display: 'flex',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
3
+ import { themeContract } from '../../themes/contract.css';
4
4
 
5
5
  const formBase = style({
6
6
  width: '100%',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../../theme/contract.css';
3
+ import { themeContract } from '../../../themes/contract.css';
4
4
 
5
5
  const rowBase = style({
6
6
  display: 'flex',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../../../theme/contract.css';
3
+ import { themeContract } from '../../../../themes/contract.css';
4
4
 
5
5
  const inputBase = style({
6
6
  appearance: 'none',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../../../theme/contract.css';
3
+ import { themeContract } from '../../../../themes/contract.css';
4
4
 
5
5
  const labelBase = style({
6
6
  fontFamily: themeContract.fonts.body,
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../../theme/contract.css';
3
+ import { themeContract } from '../../../themes/contract.css';
4
4
 
5
5
  const textFieldBase = style({
6
6
  display: 'flex',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../../../theme/contract.css';
3
+ import { themeContract } from '../../../../themes/contract.css';
4
4
 
5
5
  const textareaBase = style({
6
6
  appearance: 'none',
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const headerBase = style({
7
7
  display: 'flex',
@@ -1,8 +1,8 @@
1
1
  import { assignInlineVars } from '@vanilla-extract/dynamic';
2
2
  import { useEffect } from 'react';
3
- import { WithClassName } from '@/types/withClassName';
4
3
 
5
4
  import { headerOverlayStyle, vars } from './styles.css';
5
+ import { WithClassName } from '../../../types/withClassName';
6
6
 
7
7
  export interface HeaderOverlayProps {
8
8
  isOpen: boolean;
@@ -1,5 +1,4 @@
1
- import { createVar, style, CSSProperties } from '@vanilla-extract/css';
2
- import { mq } from '../../../assets/styles/mediaqueries';
1
+ import { createVar, style } from '@vanilla-extract/css';
3
2
 
4
3
  export const vars = {
5
4
  overlayBottom: createVar(),
@@ -25,9 +24,10 @@ export const headerOverlayStyle = style({
25
24
  transform: vars.overlayTransform,
26
25
  transition: 'transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)',
27
26
 
28
- '@media': {
29
- [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
30
- [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
31
- [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
32
- },
27
+ // TODO responsive with sprinkles
28
+ // '@media': {
29
+ // [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
30
+ // [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
31
+ // [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
32
+ // },
33
33
  });
@@ -1,17 +1,14 @@
1
1
  import { assignInlineVars } from '@vanilla-extract/dynamic';
2
- import { Theme } from '@/types/theme';
3
- import { WithClassName } from '@/types/withClassName';
4
2
  import { toggleNavBarStyle, toggleNavStyle, vars } from './styles.css';
5
- import { defaultTheme } from '../../../assets/styles/default-theme';
3
+ import { WithClassName } from '../../../types/withClassName';
6
4
 
7
5
  export type ToggleNavProps = {
8
- theme?: Theme;
9
6
  isNavOpen: boolean;
10
7
  onToggleNav: () => void;
11
8
  displayOnDesktop: boolean;
12
9
  };
13
10
 
14
- export const ToggleNav = ({ theme = defaultTheme, isNavOpen = false, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => {
11
+ export const ToggleNav = ({ isNavOpen = false, onToggleNav, displayOnDesktop, className }: ToggleNavProps & WithClassName) => {
15
12
  const handleClick = () => {
16
13
  window.scrollTo({ top: 0, behavior: 'smooth' });
17
14
  onToggleNav();
@@ -1,6 +1,5 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
4
3
 
5
4
  const iconBase = style({
6
5
  display: 'inline-block',
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../theme';
4
+ import { themeContract } from '../../themes/contract.css';
5
5
 
6
6
  const keyNumberBase = style({
7
7
  display: 'flex',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
3
+ import { themeContract } from '../../themes/contract.css';
4
4
 
5
5
  const languageSwitcherBase = style({
6
6
  position: 'relative',
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
3
+ import { themeContract } from '../../themes/contract.css';
4
4
 
5
5
  const logoBase = style({
6
6
  display: 'inline-block',
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react-vite';
2
3
 
3
4
  import { Logo } from '../../index';
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../theme';
3
+ import { themeContract } from '../../themes/contract.css';
4
4
 
5
5
  const mainBase = style({
6
6
  display: 'flex',