@latte-macchiat-io/latte-vanilla-components 0.0.244 → 0.0.246

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 (25) hide show
  1. package/package.json +1 -1
  2. package/src/components/Actions/styles.css.ts +42 -39
  3. package/src/components/Button/styles.css.ts +106 -103
  4. package/src/components/Carousel/styles.css.ts +140 -116
  5. package/src/components/Columns/styles.css.ts +32 -29
  6. package/src/components/ConsentCookie/styles.css.ts +134 -123
  7. package/src/components/Form/Form.css.ts +50 -47
  8. package/src/components/Form/Row/Row.css.ts +55 -52
  9. package/src/components/Form/TextField/Input/Input.css.ts +44 -41
  10. package/src/components/Form/TextField/Label/Label.css.ts +50 -44
  11. package/src/components/Form/TextField/TextField.css.ts +38 -35
  12. package/src/components/Form/TextField/Textarea/Textarea.css.ts +102 -96
  13. package/src/components/Header/HeaderToggleNav/styles.css.ts +35 -29
  14. package/src/components/Header/index.tsx +1 -1
  15. package/src/components/Header/styles.css.ts +88 -76
  16. package/src/components/Heading/styles.css.ts +94 -91
  17. package/src/components/KeyNumber/styles.css.ts +60 -54
  18. package/src/components/LanguageSwitcher/styles.css.ts +112 -100
  19. package/src/components/Modal/styles.css.ts +77 -68
  20. package/src/components/Nav/styles.css.ts +22 -19
  21. package/src/components/NavLegal/styles.css.ts +16 -13
  22. package/src/components/NavSocial/styles.css.ts +21 -15
  23. package/src/components/Section/styles.css.ts +105 -99
  24. package/src/components/ThemeToggle/styles.css.ts +11 -8
  25. package/src/components/Video/styles.css.ts +163 -139
package/src/components/Section/styles.css.ts CHANGED
@@ -5,124 +5,130 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
5
5
  import { themeContract } from '../../theme/contract.css';
6
6
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
7
7
 
8
- export const sectionRecipe = recipe({
9
- base: [
10
- {
11
- width: '100%',
12
- display: 'flex',
13
- margin: '0 auto',
14
- position: 'relative',
15
- flexDirection: 'column',
8
+ export const sectionRecipe = recipe(
9
+ {
10
+ base: [
11
+ {
12
+ width: '100%',
13
+ display: 'flex',
14
+ margin: '0 auto',
15
+ position: 'relative',
16
+ flexDirection: 'column',
16
17
 
17
- '@media': {
18
- ...generateResponsiveMedia({
19
- paddingLeft: themeContract.global.paddingLeft,
20
- paddingRight: themeContract.global.paddingRight,
21
- }),
18
+ '@media': {
19
+ ...generateResponsiveMedia({
20
+ paddingLeft: themeContract.global.paddingLeft,
21
+ paddingRight: themeContract.global.paddingRight,
22
+ }),
23
+ },
22
24
  },
23
- },
24
- ],
25
+ ],
25
26
 
26
- variants: {
27
- variant: {
28
- primary: {
29
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
30
- },
31
- secondary: {
32
- backgroundColor: themeContract.section.variant.secondary.backgroundColor,
33
- },
34
- transparent: {
35
- backgroundColor: themeContract.section.variant.transparent.backgroundColor,
27
+ variants: {
28
+ variant: {
29
+ primary: {
30
+ backgroundColor: themeContract.section.variant.primary.backgroundColor,
31
+ },
32
+ secondary: {
33
+ backgroundColor: themeContract.section.variant.secondary.backgroundColor,
34
+ },
35
+ transparent: {
36
+ backgroundColor: themeContract.section.variant.transparent.backgroundColor,
37
+ },
36
38
  },
37
- },
38
39
 
39
- align: {
40
- left: {
41
- textAlign: 'left',
42
- alignItems: 'flex-start',
43
- },
44
- center: {
45
- textAlign: 'center',
46
- alignItems: 'center',
47
- },
48
- right: {
49
- textAlign: 'right',
50
- alignItems: 'flex-end',
51
- },
52
- },
53
- isDark: {
54
- true: {
55
- color: themeContract.colors.textLight,
56
- },
57
- false: {
58
- color: themeContract.colors.text,
59
- },
60
- },
61
- isFullHeight: {
62
- true: {
63
- minHeight: '100vh',
64
- justifyContent: 'center',
40
+ align: {
41
+ left: {
42
+ textAlign: 'left',
43
+ alignItems: 'flex-start',
44
+ },
45
+ center: {
46
+ textAlign: 'center',
47
+ alignItems: 'center',
48
+ },
49
+ right: {
50
+ textAlign: 'right',
51
+ alignItems: 'flex-end',
52
+ },
65
53
  },
66
- false: {
67
- minHeight: 'auto',
68
- justifyContent: 'flex-start',
54
+ isDark: {
55
+ true: {
56
+ color: themeContract.colors.textLight,
57
+ },
58
+ false: {
59
+ color: themeContract.colors.text,
60
+ },
69
61
  },
70
- },
71
- isHeaderFixed: {
72
- true: {
73
- // minHeight: calc.subtract('100vh', themeContract.header.height),
62
+ isFullHeight: {
63
+ true: {
64
+ minHeight: '100vh',
65
+ justifyContent: 'center',
66
+ },
67
+ false: {
68
+ minHeight: 'auto',
69
+ justifyContent: 'flex-start',
70
+ },
74
71
  },
75
- false: {
76
- minHeight: '100vh',
72
+ isHeaderFixed: {
73
+ true: {
74
+ // minHeight: calc.subtract('100vh', themeContract.header.height),
75
+ },
76
+ false: {
77
+ minHeight: '100vh',
78
+ },
77
79
  },
78
- },
79
- withPaddingTop: {
80
- true: {
81
- '@media': {
82
- ...generateResponsiveMedia({
83
- paddingTop: themeContract.section.paddingTop,
84
- }),
80
+ withPaddingTop: {
81
+ true: {
82
+ '@media': {
83
+ ...generateResponsiveMedia({
84
+ paddingTop: themeContract.section.paddingTop,
85
+ }),
86
+ },
85
87
  },
88
+ false: { paddingTop: 'none' },
86
89
  },
87
- false: { paddingTop: 'none' },
88
- },
89
- withPaddingBottom: {
90
- true: {
91
- '@media': {
92
- ...generateResponsiveMedia({
93
- paddingBottom: themeContract.section.paddingBottom,
94
- }),
90
+ withPaddingBottom: {
91
+ true: {
92
+ '@media': {
93
+ ...generateResponsiveMedia({
94
+ paddingBottom: themeContract.section.paddingBottom,
95
+ }),
96
+ },
95
97
  },
98
+ false: { paddingBottom: 'none' },
96
99
  },
97
- false: { paddingBottom: 'none' },
98
100
  },
99
- },
100
101
 
101
- defaultVariants: {
102
- align: 'left',
103
- isDark: false,
104
- isFullHeight: false,
105
- withPaddingTop: true,
106
- withPaddingBottom: true,
107
- variant: 'transparent',
102
+ defaultVariants: {
103
+ align: 'left',
104
+ isDark: false,
105
+ isFullHeight: false,
106
+ withPaddingTop: true,
107
+ withPaddingBottom: true,
108
+ variant: 'transparent',
109
+ },
108
110
  },
109
- });
111
+ 'section'
112
+ );
110
113
 
111
- export const sectionContent = style([
112
- {
113
- width: '100%',
114
- display: 'flex',
115
- margin: '0 auto',
116
- flexDirection: 'column',
114
+ export const sectionContent = style(
115
+ [
116
+ {
117
+ width: '100%',
118
+ display: 'flex',
119
+ margin: '0 auto',
120
+ flexDirection: 'column',
117
121
 
118
- maxWidth: themeContract.maxWidth,
122
+ maxWidth: themeContract.maxWidth,
119
123
 
120
- '@media': {
121
- ...generateResponsiveMedia({
122
- gap: themeContract.section.gap,
123
- }),
124
+ '@media': {
125
+ ...generateResponsiveMedia({
126
+ gap: themeContract.section.gap,
127
+ }),
128
+ },
124
129
  },
125
- },
126
- ]);
130
+ ],
131
+ 'section-content'
132
+ );
127
133
 
128
134
  export type SectionVariants = RecipeVariants<typeof sectionRecipe>;
package/src/components/ThemeToggle/styles.css.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import { recipe } from '@vanilla-extract/recipes';
2
2
 
3
- export const themeToggleRecipe = recipe({
4
- base: [
5
- {
6
- border: 0,
3
+ export const themeToggleRecipe = recipe(
4
+ {
5
+ base: [
6
+ {
7
+ border: 0,
7
8
 
8
- '@media': {},
9
- },
10
- ],
11
- });
9
+ '@media': {},
10
+ },
11
+ ],
12
+ },
13
+ 'theme-toggle'
14
+ );
package/src/components/Video/styles.css.ts CHANGED
@@ -7,113 +7,87 @@ import { themeContract } from '../../theme/contract.css';
7
7
  import { addPixelsToBreakpoints } from '../../utils/addPixelsToBreakpoints';
8
8
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
9
9
 
10
- export const videoRecipe = recipe({
11
- base: {
12
- width: '100%',
13
- height: '100%',
14
- overflow: 'hidden',
15
- position: 'absolute',
10
+ export const videoRecipe = recipe(
11
+ {
12
+ base: {
13
+ width: '100%',
14
+ height: '100%',
15
+ overflow: 'hidden',
16
+ position: 'absolute',
16
17
 
17
- backgroundColor: themeContract.colors.background,
18
- },
18
+ backgroundColor: themeContract.colors.background,
19
+ },
19
20
 
20
- variants: {
21
- size: {
22
- fullWidth: { width: '100%', aspectRatio: '16/9' },
23
- fullScreen: [
24
- {
25
- width: '100vw',
26
- aspectRatio: '16/9',
27
- position: 'relative',
28
- marginLeft: calc(themeContract.global.paddingLeft.mobile).negate().toString(),
29
- marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
30
-
31
- '@media': {
32
- [queries.sm]: {
33
- marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
34
- marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
35
- },
36
- [queries.md]: {
37
- marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
38
- marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
39
- },
40
- [queries.lg]: {
41
- marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
42
- marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
43
- },
44
- [queries.xl]: {
45
- marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
46
- marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
47
- },
48
- [queries['2xl']]: {
49
- marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
50
- marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
21
+ variants: {
22
+ size: {
23
+ fullWidth: { width: '100%', aspectRatio: '16/9' },
24
+ fullScreen: [
25
+ {
26
+ width: '100vw',
27
+ aspectRatio: '16/9',
28
+ position: 'relative',
29
+ marginLeft: calc(themeContract.global.paddingLeft.mobile).negate().toString(),
30
+ marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
31
+
32
+ '@media': {
33
+ [queries.sm]: {
34
+ marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
35
+ marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
36
+ },
37
+ [queries.md]: {
38
+ marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
39
+ marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
40
+ },
41
+ [queries.lg]: {
42
+ marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
43
+ marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
44
+ },
45
+ [queries.xl]: {
46
+ marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
47
+ marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
48
+ },
49
+ [queries['2xl']]: {
50
+ marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
51
+ marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
52
+ },
51
53
  },
52
54
  },
53
- },
54
- ],
55
+ ],
56
+ },
55
57
  },
56
- },
57
-
58
- defaultVariants: {
59
- size: 'fullWidth',
60
- },
61
- });
62
58
 
63
- export type VideoVariants = RecipeVariants<typeof videoRecipe>;
64
-
65
- export const videoElement = style({
66
- top: '50%',
67
- left: '50%',
68
- width: 'auto',
69
- minWidth: '100%',
70
- minHeight: '100%',
71
- position: 'absolute',
72
- transform: 'translate(-50%, -50%)',
73
- });
74
-
75
- export const videoPoster = style({
76
- top: 0,
77
- left: 0,
78
- opacity: 1,
79
- width: '100%',
80
- height: '100%',
81
- position: 'absolute',
82
- pointerEvents: 'auto',
83
- transition: 'opacity 0.3s ease-in-out',
84
-
85
- selectors: {
86
- '&[data-playing="true"]': {
87
- opacity: 0,
88
- pointerEvents: 'none',
59
+ defaultVariants: {
60
+ size: 'fullWidth',
89
61
  },
90
62
  },
91
- });
63
+ 'video'
64
+ );
92
65
 
93
- export const posterImage = style({
94
- width: '100%',
95
- height: '100%',
96
- objectFit: 'cover',
97
- });
66
+ export type VideoVariants = RecipeVariants<typeof videoRecipe>;
98
67
 
99
- export const playButton = style([
68
+ export const videoElement = style(
100
69
  {
101
70
  top: '50%',
102
71
  left: '50%',
103
- width: '40px',
104
- height: '40px',
105
- display: 'flex',
106
- cursor: 'pointer',
107
- alignItems: 'center',
72
+ width: 'auto',
73
+ minWidth: '100%',
74
+ minHeight: '100%',
108
75
  position: 'absolute',
109
- justifyContent: 'center',
110
- transition: 'all 0.3s ease-in-out',
111
76
  transform: 'translate(-50%, -50%)',
77
+ },
78
+ 'video-element'
79
+ );
112
80
 
113
- border: themeContract.video.playButton.border,
114
- color: themeContract.video.playButton.iconColor,
115
- borderRadius: themeContract.video.playButton.borderRadius,
116
- backgroundColor: themeContract.video.playButton.backgroundColor,
81
+ export const videoPoster = style(
82
+ {
83
+ top: 0,
84
+ left: 0,
85
+ opacity: 1,
86
+ width: '100%',
87
+ height: '100%',
88
+ position: 'absolute',
89
+ pointerEvents: 'auto',
90
+ transition: 'opacity 0.3s ease-in-out',
117
91
 
118
92
  selectors: {
119
93
  '&[data-playing="true"]': {
@@ -121,15 +95,56 @@ export const playButton = style([
121
95
  pointerEvents: 'none',
122
96
  },
123
97
  },
98
+ },
99
+ 'video-poster'
100
+ );
124
101
 
125
- '@media': {
126
- ...generateResponsiveMedia({
127
- width: themeContract.video.playButton.width,
128
- height: themeContract.video.playButton.height,
129
- }),
130
- },
102
+ export const posterImage = style(
103
+ {
104
+ width: '100%',
105
+ height: '100%',
106
+ objectFit: 'cover',
131
107
  },
132
- ]);
108
+ 'video-poster-image'
109
+ );
110
+
111
+ export const playButton = style(
112
+ [
113
+ {
114
+ top: '50%',
115
+ left: '50%',
116
+ width: '40px',
117
+ height: '40px',
118
+ display: 'flex',
119
+ cursor: 'pointer',
120
+ alignItems: 'center',
121
+ position: 'absolute',
122
+ justifyContent: 'center',
123
+ transition: 'all 0.3s ease-in-out',
124
+ transform: 'translate(-50%, -50%)',
125
+
126
+ border: themeContract.video.playButton.border,
127
+ color: themeContract.video.playButton.iconColor,
128
+ borderRadius: themeContract.video.playButton.borderRadius,
129
+ backgroundColor: themeContract.video.playButton.backgroundColor,
130
+
131
+ selectors: {
132
+ '&[data-playing="true"]': {
133
+ opacity: 0,
134
+ pointerEvents: 'none',
135
+ },
136
+ },
137
+
138
+ '@media': {
139
+ ...generateResponsiveMedia({
140
+ width: themeContract.video.playButton.width,
141
+ height: themeContract.video.playButton.height,
142
+ }),
143
+ },
144
+ },
145
+ ],
146
+ 'video-play-button'
147
+ );
133
148
 
134
149
  globalStyle(`${playButton} svg`, {
135
150
  '@media': {
@@ -140,34 +155,40 @@ globalStyle(`${playButton} svg`, {
140
155
  },
141
156
  });
142
157
 
143
- const controlButton = style({
144
- border: 'none',
145
- display: 'flex',
146
- cursor: 'pointer',
147
- position: 'absolute',
148
- alignItems: 'center',
149
- justifyContent: 'center',
150
- transition: 'all 0.3s ease-in-out',
151
- });
152
-
153
- export const closeButton = style([
154
- controlButton,
158
+ const controlButton = style(
155
159
  {
156
- top: themeContract.space.md,
157
- right: themeContract.space.md,
158
- border: themeContract.video.closeButton.border,
159
- color: themeContract.video.closeButton.iconColor,
160
- borderRadius: themeContract.video.closeButton.borderRadius,
161
- backgroundColor: themeContract.video.closeButton.backgroundColor,
160
+ border: 'none',
161
+ display: 'flex',
162
+ cursor: 'pointer',
163
+ position: 'absolute',
164
+ alignItems: 'center',
165
+ justifyContent: 'center',
166
+ transition: 'all 0.3s ease-in-out',
167
+ },
168
+ 'video-control-button'
169
+ );
162
170
 
163
- '@media': {
164
- ...generateResponsiveMedia({
165
- width: themeContract.video.closeButton.width,
166
- height: themeContract.video.closeButton.height,
167
- }),
171
+ export const closeButton = style(
172
+ [
173
+ controlButton,
174
+ {
175
+ top: themeContract.space.md,
176
+ right: themeContract.space.md,
177
+ border: themeContract.video.closeButton.border,
178
+ color: themeContract.video.closeButton.iconColor,
179
+ borderRadius: themeContract.video.closeButton.borderRadius,
180
+ backgroundColor: themeContract.video.closeButton.backgroundColor,
181
+
182
+ '@media': {
183
+ ...generateResponsiveMedia({
184
+ width: themeContract.video.closeButton.width,
185
+ height: themeContract.video.closeButton.height,
186
+ }),
187
+ },
168
188
  },
169
- },
170
- ]);
189
+ ],
190
+ 'video-close-button'
191
+ );
171
192
 
172
193
  globalStyle(`${closeButton} svg`, {
173
194
  '@media': {
@@ -178,24 +199,27 @@ globalStyle(`${closeButton} svg`, {
178
199
  },
179
200
  });
180
201
 
181
- export const pauseButton = style([
182
- controlButton,
183
- {
184
- bottom: themeContract.space.md,
185
- border: themeContract.video.pauseButton.border,
186
- color: themeContract.video.pauseButton.iconColor,
187
- borderRadius: themeContract.video.pauseButton.borderRadius,
188
- backgroundColor: themeContract.video.pauseButton.backgroundColor,
202
+ export const pauseButton = style(
203
+ [
204
+ controlButton,
205
+ {
206
+ bottom: themeContract.space.md,
207
+ border: themeContract.video.pauseButton.border,
208
+ color: themeContract.video.pauseButton.iconColor,
209
+ borderRadius: themeContract.video.pauseButton.borderRadius,
210
+ backgroundColor: themeContract.video.pauseButton.backgroundColor,
189
211
 
190
- '@media': {
191
- ...generateResponsiveMedia({
192
- width: themeContract.video.pauseButton.width,
193
- height: themeContract.video.pauseButton.height,
194
- right: addPixelsToBreakpoints(themeContract.video.pauseButton.width, 20),
195
- }),
212
+ '@media': {
213
+ ...generateResponsiveMedia({
214
+ width: themeContract.video.pauseButton.width,
215
+ height: themeContract.video.pauseButton.height,
216
+ right: addPixelsToBreakpoints(themeContract.video.pauseButton.width, 20),
217
+ }),
218
+ },
196
219
  },
197
- },
198
- ]);
220
+ ],
221
+ 'video-pause-button'
222
+ );
199
223
 
200
224
  globalStyle(`${pauseButton} svg`, {
201
225
  '@media': {