@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.
- package/README.md +286 -10
- package/package.json +5 -3
- package/src/components/Actions/Actions.css.ts +1 -1
- package/src/components/Button/Button.css.ts +1 -1
- package/src/components/Button/stories.tsx +10 -17
- package/src/components/Carousel/Carousel.css.ts +1 -1
- package/src/components/Columns/Columns.css.ts +1 -1
- package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
- package/src/components/Footer/Footer.css.ts +1 -1
- package/src/components/Form/Form.css.ts +1 -1
- package/src/components/Form/Row/Row.css.ts +1 -1
- package/src/components/Form/TextField/Input/Input.css.ts +1 -1
- package/src/components/Form/TextField/Label/Label.css.ts +1 -1
- package/src/components/Form/TextField/TextField.css.ts +1 -1
- package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
- package/src/components/Header/Header.css.ts +1 -1
- package/src/components/Header/HeaderOverlay/index.tsx +1 -1
- package/src/components/Header/HeaderOverlay/styles.css.ts +7 -7
- package/src/components/Header/ToggleNav/index.tsx +2 -5
- package/src/components/Icon/Icon.css.ts +0 -1
- package/src/components/KeyNumber/KeyNumber.css.ts +1 -1
- package/src/components/LanguageSwitcher/LanguageSwitcher.css.ts +1 -1
- package/src/components/Logo/Logo.css.ts +1 -1
- package/src/components/Logo/stories.tsx +1 -0
- package/src/components/Main/Main.css.ts +1 -1
- package/src/components/Modal/Modal.css.ts +1 -1
- package/src/components/Modal/stories.tsx +55 -89
- package/src/components/Nav/Nav.css.ts +1 -1
- package/src/components/Nav/Nav.tsx +1 -0
- package/src/components/NavLegal/NavLegal.css.ts +1 -1
- package/src/components/NavSocial/NavSocial.css.ts +1 -1
- package/src/components/Section/Section.css.ts +1 -1
- package/src/components/Section/stories.tsx +61 -61
- package/src/components/Video/Video.css.ts +1 -1
- package/src/components/VideoFullWidth/VideoFullWidth.css.ts +1 -1
- package/src/index.ts +9 -22
- package/src/styles/sprinkles.css.ts +1 -1
- package/src/themes/createTheme.css.ts +65 -0
- package/src/themes/dark.css.ts +4 -3
- package/src/themes/light.css.ts +3 -3
- package/src/types/withClassName.ts +1 -0
- package/src/assets/styles/default-theme.ts +0 -312
- package/src/assets/styles/mediaqueries.tsx +0 -24
- package/src/components/ToRemove/ToRemove.tsx +0 -3
- package/src/theme/index.ts +0 -6
- package/src/theme/utils.ts +0 -76
- package/src/types/theme.ts +0 -295
- package/src/utils/quickTheme.ts +0 -38
- package/src/utils/theme.ts +0 -131
- /package/src/{theme → themes}/baseThemeValues.ts +0 -0
- /package/src/{theme → themes}/contract.css.ts +0 -0
package/README.md
CHANGED
@@ -1,22 +1,298 @@
|
|
1
|
-
#
|
1
|
+
# 🥤 Latte Vanilla Components
|
2
2
|
|
3
|
-
Beautiful components
|
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
|
-
##
|
5
|
+
## ✨ Features
|
6
6
|
|
7
|
-
|
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
|
-
##
|
14
|
+
## 📦 Installation
|
10
15
|
|
11
16
|
```bash
|
12
|
-
|
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
|
-
|
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
|
287
|
+
pnpm run storybook
|
20
288
|
```
|
21
289
|
|
22
|
-
|
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.
|
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,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: '
|
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: '
|
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: '
|
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="
|
162
|
+
<Button variant="primary" size="sm">
|
170
163
|
Small
|
171
164
|
</Button>
|
172
|
-
<Button variant="primary" size="
|
165
|
+
<Button variant="primary" size="md">
|
173
166
|
Medium
|
174
167
|
</Button>
|
175
|
-
<Button variant="primary" size="
|
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="
|
191
|
+
<Button variant="primary" size="lg">
|
199
192
|
Get Started
|
200
193
|
</Button>
|
201
|
-
<Button variant="secondary" size="
|
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="
|
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 '../../
|
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 '../../
|
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 '../../
|
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 '../../
|
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 '../../
|
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 '../../../
|
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 '../../../../
|
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 '../../../../
|
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 '../../../
|
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 '../../../../
|
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 '../../
|
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
|
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
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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 {
|
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 = ({
|
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,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 '../../
|
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 '../../
|
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 '../../
|
3
|
+
import { themeContract } from '../../themes/contract.css';
|
4
4
|
|
5
5
|
const logoBase = style({
|
6
6
|
display: 'inline-block',
|
@@ -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 '../../
|
3
|
+
import { themeContract } from '../../themes/contract.css';
|
4
4
|
|
5
5
|
const mainBase = style({
|
6
6
|
display: 'flex',
|