@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.244",
3
+ "version": "0.0.246",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/Actions/styles.css.ts CHANGED
@@ -3,53 +3,56 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { themeContract } from '../../theme/contract.css';
4
4
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
5
 
6
- export const actionsRecipe = recipe({
7
- base: [
8
- {
9
- width: '100%',
10
- display: 'flex',
11
- flexWrap: 'wrap',
6
+ export const actionsRecipe = recipe(
7
+ {
8
+ base: [
9
+ {
10
+ width: '100%',
11
+ display: 'flex',
12
+ flexWrap: 'wrap',
12
13
 
13
- '@media': {
14
- ...generateResponsiveMedia({
15
- gap: themeContract.actions.gap,
16
- paddingTop: themeContract.actions.paddingBottom,
17
- paddingBottom: themeContract.actions.paddingBottom,
18
- }),
14
+ '@media': {
15
+ ...generateResponsiveMedia({
16
+ gap: themeContract.actions.gap,
17
+ paddingTop: themeContract.actions.paddingBottom,
18
+ paddingBottom: themeContract.actions.paddingBottom,
19
+ }),
20
+ },
19
21
  },
20
- },
21
- ],
22
+ ],
22
23
 
23
- variants: {
24
- align: {
25
- left: {
26
- alignItems: 'flex-start',
27
- justifyContent: 'flex-start',
28
- },
29
- center: {
30
- alignItems: 'center',
31
- justifyContent: 'center',
24
+ variants: {
25
+ align: {
26
+ left: {
27
+ alignItems: 'flex-start',
28
+ justifyContent: 'flex-start',
29
+ },
30
+ center: {
31
+ alignItems: 'center',
32
+ justifyContent: 'center',
33
+ },
34
+ right: {
35
+ alignItems: 'flex-end',
36
+ justifyContent: 'flex-end',
37
+ },
32
38
  },
33
- right: {
34
- alignItems: 'flex-end',
35
- justifyContent: 'flex-end',
36
- },
37
- },
38
39
 
39
- direction: {
40
- row: {
41
- flexDirection: 'row',
42
- },
43
- column: {
44
- flexDirection: 'column',
40
+ direction: {
41
+ row: {
42
+ flexDirection: 'row',
43
+ },
44
+ column: {
45
+ flexDirection: 'column',
46
+ },
45
47
  },
46
48
  },
47
- },
48
49
 
49
- defaultVariants: {
50
- align: 'left',
51
- direction: 'row',
50
+ defaultVariants: {
51
+ align: 'left',
52
+ direction: 'row',
53
+ },
52
54
  },
53
- });
55
+ 'actions'
56
+ );
54
57
 
55
58
  export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;
package/src/components/Button/styles.css.ts CHANGED
@@ -3,129 +3,132 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { themeContract } from '../../theme/contract.css';
4
4
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
5
 
6
- export const buttonRecipe = recipe({
7
- base: {
8
- border: 'none',
9
- outline: 'none',
10
- cursor: 'pointer',
11
- alignItems: 'center',
12
- textDecoration: 'none',
13
- display: 'inline-flex',
14
- justifyContent: 'center',
15
-
16
- minWidth: themeContract.button.minWidth,
17
- fontWeight: themeContract.button.fontWeight,
18
- transition: themeContract.button.transition,
19
- fontFamily: themeContract.button.fontFamily,
20
- borderRadius: themeContract.button.borderRadius,
21
- letterSpacing: themeContract.button.letterSpacing,
22
-
23
- ':hover': {
24
- opacity: '0.8',
25
- },
6
+ export const buttonRecipe = recipe(
7
+ {
8
+ base: {
9
+ border: 'none',
10
+ outline: 'none',
11
+ cursor: 'pointer',
12
+ alignItems: 'center',
13
+ textDecoration: 'none',
14
+ display: 'inline-flex',
15
+ justifyContent: 'center',
16
+
17
+ minWidth: themeContract.button.minWidth,
18
+ fontWeight: themeContract.button.fontWeight,
19
+ transition: themeContract.button.transition,
20
+ fontFamily: themeContract.button.fontFamily,
21
+ borderRadius: themeContract.button.borderRadius,
22
+ letterSpacing: themeContract.button.letterSpacing,
23
+
24
+ ':hover': {
25
+ opacity: '0.8',
26
+ },
26
27
 
27
- ':active': {},
28
+ ':active': {},
28
29
 
29
- ':focus-visible': {},
30
+ ':focus-visible': {},
30
31
 
31
- ':disabled': {
32
- opacity: '0.5',
33
- pointerEvents: 'none',
32
+ ':disabled': {
33
+ opacity: '0.5',
34
+ pointerEvents: 'none',
35
+ },
34
36
  },
35
- },
36
37
 
37
- variants: {
38
- variant: {
39
- primary: {
40
- color: themeContract.button.variant.primary.color,
41
- backgroundColor: themeContract.button.variant.primary.backgroundColor,
42
- },
38
+ variants: {
39
+ variant: {
40
+ primary: {
41
+ color: themeContract.button.variant.primary.color,
42
+ backgroundColor: themeContract.button.variant.primary.backgroundColor,
43
+ },
43
44
 
44
- secondary: {
45
- color: themeContract.button.variant.secondary.color,
46
- backgroundColor: themeContract.button.variant.secondary.backgroundColor,
45
+ secondary: {
46
+ color: themeContract.button.variant.secondary.color,
47
+ backgroundColor: themeContract.button.variant.secondary.backgroundColor,
48
+ },
47
49
  },
48
- },
49
50
 
50
- style: {
51
- outline: {
52
- backgroundColor: 'transparent',
51
+ style: {
52
+ outline: {
53
+ backgroundColor: 'transparent',
54
+ },
53
55
  },
54
- },
55
56
 
56
- size: {
57
- sm: [
58
- {
59
- fontSize: themeContract.fontSizes.sm,
60
-
61
- '@media': {
62
- ...generateResponsiveMedia({
63
- paddingTop: themeContract.button.size.small.paddingTop,
64
- paddingLeft: themeContract.button.size.small.paddingLeft,
65
- paddingRight: themeContract.button.size.small.paddingRight,
66
- paddingBottom: themeContract.button.size.small.paddingBottom,
67
- }),
57
+ size: {
58
+ sm: [
59
+ {
60
+ fontSize: themeContract.fontSizes.sm,
61
+
62
+ '@media': {
63
+ ...generateResponsiveMedia({
64
+ paddingTop: themeContract.button.size.small.paddingTop,
65
+ paddingLeft: themeContract.button.size.small.paddingLeft,
66
+ paddingRight: themeContract.button.size.small.paddingRight,
67
+ paddingBottom: themeContract.button.size.small.paddingBottom,
68
+ }),
69
+ },
68
70
  },
69
- },
70
- ],
71
- md: [
72
- {
73
- fontSize: themeContract.fontSizes.md,
74
-
75
- '@media': {
76
- ...generateResponsiveMedia({
77
- paddingTop: themeContract.button.size.medium.paddingTop,
78
- paddingLeft: themeContract.button.size.medium.paddingLeft,
79
- paddingRight: themeContract.button.size.medium.paddingRight,
80
- paddingBottom: themeContract.button.size.medium.paddingBottom,
81
- }),
71
+ ],
72
+ md: [
73
+ {
74
+ fontSize: themeContract.fontSizes.md,
75
+
76
+ '@media': {
77
+ ...generateResponsiveMedia({
78
+ paddingTop: themeContract.button.size.medium.paddingTop,
79
+ paddingLeft: themeContract.button.size.medium.paddingLeft,
80
+ paddingRight: themeContract.button.size.medium.paddingRight,
81
+ paddingBottom: themeContract.button.size.medium.paddingBottom,
82
+ }),
83
+ },
82
84
  },
83
- },
84
- ],
85
- lg: [
86
- {
87
- fontSize: themeContract.fontSizes.lg,
88
-
89
- '@media': {
90
- ...generateResponsiveMedia({
91
- paddingTop: themeContract.button.size.large.paddingTop,
92
- paddingLeft: themeContract.button.size.large.paddingLeft,
93
- paddingRight: themeContract.button.size.large.paddingRight,
94
- paddingBottom: themeContract.button.size.large.paddingBottom,
95
- }),
85
+ ],
86
+ lg: [
87
+ {
88
+ fontSize: themeContract.fontSizes.lg,
89
+
90
+ '@media': {
91
+ ...generateResponsiveMedia({
92
+ paddingTop: themeContract.button.size.large.paddingTop,
93
+ paddingLeft: themeContract.button.size.large.paddingLeft,
94
+ paddingRight: themeContract.button.size.large.paddingRight,
95
+ paddingBottom: themeContract.button.size.large.paddingBottom,
96
+ }),
97
+ },
96
98
  },
97
- },
98
- ],
99
- },
99
+ ],
100
+ },
100
101
 
101
- fullWidth: {
102
- true: {
103
- width: '100%',
102
+ fullWidth: {
103
+ true: {
104
+ width: '100%',
105
+ },
104
106
  },
105
107
  },
106
- },
107
108
 
108
- compoundVariants: [
109
- {
110
- variants: { variant: 'primary', style: 'outline' },
111
- style: {
112
- color: themeContract.button.variant.primary.backgroundColor,
113
- border: `1px solid ${themeContract.button.variant.primary.backgroundColor}`,
109
+ compoundVariants: [
110
+ {
111
+ variants: { variant: 'primary', style: 'outline' },
112
+ style: {
113
+ color: themeContract.button.variant.primary.backgroundColor,
114
+ border: `1px solid ${themeContract.button.variant.primary.backgroundColor}`,
115
+ },
114
116
  },
115
- },
116
- {
117
- variants: { variant: 'secondary', style: 'outline' },
118
- style: {
119
- color: themeContract.button.variant.secondary.backgroundColor,
120
- border: `1px solid ${themeContract.button.variant.secondary.backgroundColor}`,
117
+ {
118
+ variants: { variant: 'secondary', style: 'outline' },
119
+ style: {
120
+ color: themeContract.button.variant.secondary.backgroundColor,
121
+ border: `1px solid ${themeContract.button.variant.secondary.backgroundColor}`,
122
+ },
121
123
  },
122
- },
123
- ],
124
+ ],
124
125
 
125
- defaultVariants: {
126
- size: 'md',
127
- variant: 'primary',
126
+ defaultVariants: {
127
+ size: 'md',
128
+ variant: 'primary',
129
+ },
128
130
  },
129
- });
131
+ 'button'
132
+ );
130
133
 
131
134
  export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;
package/src/components/Carousel/styles.css.ts CHANGED
@@ -8,71 +8,83 @@ import { themeContract } from '../../theme/contract.css';
8
8
  import { combineResponsive } from '../../utils/combineResponsive';
9
9
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
10
10
 
11
- export const carouselRecipe = recipe({
12
- base: {
13
- width: '100%',
14
- overflow: 'hidden',
15
- position: 'relative',
16
- },
17
-
18
- variants: {
19
- isFullWidth: {
20
- true: {
21
- width: '100vw',
22
-
23
- marginLeft: calc(themeContract.global.paddingLeft.mobile).negate().toString(),
24
- marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
11
+ export const carouselRecipe = recipe(
12
+ {
13
+ base: {
14
+ width: '100%',
15
+ overflow: 'hidden',
16
+ position: 'relative',
17
+ },
25
18
 
26
- '@media': {
27
- [queries.sm]: {
28
- marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
29
- marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
30
- },
31
- [queries.md]: {
32
- marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
33
- marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
34
- },
35
- [queries.lg]: {
36
- marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
37
- marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
38
- },
39
- [queries.xl]: {
40
- marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
41
- marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
42
- },
43
- [queries['2xl']]: {
44
- marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
45
- marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
19
+ variants: {
20
+ isFullWidth: {
21
+ true: {
22
+ width: '100vw',
23
+
24
+ marginLeft: calc(themeContract.global.paddingLeft.mobile).negate().toString(),
25
+ marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
26
+
27
+ '@media': {
28
+ [queries.sm]: {
29
+ marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
30
+ marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
31
+ },
32
+ [queries.md]: {
33
+ marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
34
+ marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
35
+ },
36
+ [queries.lg]: {
37
+ marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
38
+ marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
39
+ },
40
+ [queries.xl]: {
41
+ marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
42
+ marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
43
+ },
44
+ [queries['2xl']]: {
45
+ marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
46
+ marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
47
+ },
46
48
  },
47
49
  },
48
50
  },
49
51
  },
50
- },
51
52
 
52
- defaultVariants: {
53
- isFullWidth: false,
53
+ defaultVariants: {
54
+ isFullWidth: false,
55
+ },
54
56
  },
55
- });
57
+ 'carousel'
58
+ );
56
59
 
57
- export const carouselContent = style({
58
- width: '100%',
59
- position: 'relative',
60
- });
60
+ export const carouselContent = style(
61
+ {
62
+ width: '100%',
63
+ position: 'relative',
64
+ },
65
+ 'carousel-content'
66
+ );
61
67
 
62
- export const carouselSlide = style({
63
- display: 'flex',
64
- position: 'relative',
65
- willChange: 'transform',
66
- transition: 'transform 0.3s ease-in-out',
67
- });
68
+ export const carouselSlide = style(
69
+ {
70
+ display: 'flex',
71
+ position: 'relative',
72
+ willChange: 'transform',
73
+ transition: 'transform 0.3s ease-in-out',
74
+ },
75
+ 'carousel-slide'
76
+ );
68
77
 
69
- export const carouselItem = style({
70
- width: '100%',
71
- flexShrink: 0,
72
- display: 'flex',
73
- position: 'relative',
74
- alignItems: 'stretch',
75
- });
78
+ export const carouselItem = style(
79
+ {
80
+ width: '100%',
81
+ flexShrink: 0,
82
+ display: 'flex',
83
+ position: 'relative',
84
+ alignItems: 'stretch',
85
+ },
86
+ 'carousel-item'
87
+ );
76
88
 
77
89
  globalStyle(`${carouselItem} > div`, {
78
90
  '@media': {
@@ -82,53 +94,59 @@ globalStyle(`${carouselItem} > div`, {
82
94
  },
83
95
  });
84
96
 
85
- export const carouselNav = style({
86
- left: 0,
87
- right: 0,
88
- bottom: 0,
89
- zIndex: 30,
90
- width: '100%',
91
- display: 'flex',
92
- position: 'absolute',
93
- pointerEvents: 'none',
94
- justifyContent: 'flex-end',
95
-
96
- gap: themeContract.space.sm,
97
- padding: themeContract.space.md,
98
- maxWidth: themeContract.maxWidth,
99
- });
100
-
101
- export const carouselNavButton = style({
102
- border: 'none',
103
- display: 'flex',
104
- cursor: 'pointer',
105
- alignItems: 'center',
106
- pointerEvents: 'auto',
107
- justifyContent: 'center',
108
- transition: 'all 0.3s ease-in-out',
109
-
110
- borderRadius: themeContract.carousel.nav.borderRadius,
111
- backgroundColor: themeContract.carousel.nav.backgroundColor,
97
+ export const carouselNav = style(
98
+ {
99
+ left: 0,
100
+ right: 0,
101
+ bottom: 0,
102
+ zIndex: 30,
103
+ width: '100%',
104
+ display: 'flex',
105
+ position: 'absolute',
106
+ pointerEvents: 'none',
107
+ justifyContent: 'flex-end',
112
108
 
113
- ':hover': {
114
- transform: 'scale(1.1)',
115
- color: themeContract.colors.background,
116
- backgroundColor: themeContract.colors.primary,
109
+ gap: themeContract.space.sm,
110
+ padding: themeContract.space.md,
111
+ maxWidth: themeContract.maxWidth,
117
112
  },
113
+ 'carousel-nav'
114
+ );
115
+
116
+ export const carouselNavButton = style(
117
+ {
118
+ border: 'none',
119
+ display: 'flex',
120
+ cursor: 'pointer',
121
+ alignItems: 'center',
122
+ pointerEvents: 'auto',
123
+ justifyContent: 'center',
124
+ transition: 'all 0.3s ease-in-out',
125
+
126
+ borderRadius: themeContract.carousel.nav.borderRadius,
127
+ backgroundColor: themeContract.carousel.nav.backgroundColor,
128
+
129
+ ':hover': {
130
+ transform: 'scale(1.1)',
131
+ color: themeContract.colors.background,
132
+ backgroundColor: themeContract.colors.primary,
133
+ },
118
134
 
119
- ':disabled': {
120
- opacity: '0.5',
121
- transform: 'none',
122
- pointerEvents: 'none',
123
- },
135
+ ':disabled': {
136
+ opacity: '0.5',
137
+ transform: 'none',
138
+ pointerEvents: 'none',
139
+ },
124
140
 
125
- '@media': {
126
- ...generateResponsiveMedia({
127
- width: themeContract.carousel.nav.width,
128
- height: themeContract.carousel.nav.height,
129
- }),
141
+ '@media': {
142
+ ...generateResponsiveMedia({
143
+ width: themeContract.carousel.nav.width,
144
+ height: themeContract.carousel.nav.height,
145
+ }),
146
+ },
130
147
  },
131
- });
148
+ 'carousel-nav-button'
149
+ );
132
150
 
133
151
  export const carouselBullets = style({
134
152
  left: 0,
@@ -148,29 +166,35 @@ export const carouselBullets = style({
148
166
  },
149
167
  });
150
168
 
151
- export const carouselBullet = style({
152
- border: 'none',
153
- cursor: 'pointer',
154
- transition: 'all 0.3s ease-in-out',
169
+ export const carouselBullet = style(
170
+ {
171
+ border: 'none',
172
+ cursor: 'pointer',
173
+ transition: 'all 0.3s ease-in-out',
155
174
 
156
- borderRadius: themeContract.carousel.bullet.borderRadius,
157
- backgroundColor: themeContract.carousel.bullet.backgroundColor,
175
+ borderRadius: themeContract.carousel.bullet.borderRadius,
176
+ backgroundColor: themeContract.carousel.bullet.backgroundColor,
158
177
 
159
- ':hover': {
160
- transform: 'scale(1.2)',
161
- },
178
+ ':hover': {
179
+ transform: 'scale(1.2)',
180
+ },
162
181
 
163
- '@media': {
164
- ...generateResponsiveMedia({
165
- width: themeContract.carousel.bullet.width,
166
- height: themeContract.carousel.bullet.height,
167
- }),
182
+ '@media': {
183
+ ...generateResponsiveMedia({
184
+ width: themeContract.carousel.bullet.width,
185
+ height: themeContract.carousel.bullet.height,
186
+ }),
187
+ },
168
188
  },
169
- });
189
+ 'carousel-bullet'
190
+ );
170
191
 
171
- export const carouselBulletActive = style({
172
- pointerEvents: 'none',
173
- backgroundColor: themeContract.carousel.bullet.activeBackgroundColor,
174
- });
192
+ export const carouselBulletActive = style(
193
+ {
194
+ pointerEvents: 'none',
195
+ backgroundColor: themeContract.carousel.bullet.activeBackgroundColor,
196
+ },
197
+ 'carousel-bullet-active'
198
+ );
175
199
 
176
200
  export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;