@latte-macchiat-io/latte-vanilla-components 0.0.245 → 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 (24) 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/styles.css.ts +88 -76
  15. package/src/components/Heading/styles.css.ts +94 -91
  16. package/src/components/KeyNumber/styles.css.ts +60 -54
  17. package/src/components/LanguageSwitcher/styles.css.ts +112 -100
  18. package/src/components/Modal/styles.css.ts +77 -68
  19. package/src/components/Nav/styles.css.ts +22 -19
  20. package/src/components/NavLegal/styles.css.ts +16 -13
  21. package/src/components/NavSocial/styles.css.ts +21 -15
  22. package/src/components/Section/styles.css.ts +105 -99
  23. package/src/components/ThemeToggle/styles.css.ts +11 -8
  24. package/src/components/Video/styles.css.ts +163 -139
package/src/components/Header/styles.css.ts CHANGED
@@ -3,106 +3,118 @@ import { recipe } from '@vanilla-extract/recipes';
3
3
  import { queries, themeContract } from '../..';
4
4
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
5
 
6
- export const headerRecipe = recipe({
7
- base: [
8
- {
9
- zIndex: 30,
10
- width: '100%',
11
- display: 'flex',
12
- flexDirection: 'row',
13
- alignItems: 'center',
14
- position: 'relative',
15
- justifyContent: 'space-between',
6
+ export const headerRecipe = recipe(
7
+ {
8
+ base: [
9
+ {
10
+ zIndex: 30,
11
+ width: '100%',
12
+ display: 'flex',
13
+ flexDirection: 'row',
14
+ alignItems: 'center',
15
+ position: 'relative',
16
+ justifyContent: 'space-between',
16
17
 
17
- fontSize: themeContract.header.fontSize,
18
- backgroundColor: themeContract.header.backgroundColor,
18
+ fontSize: themeContract.header.fontSize,
19
+ backgroundColor: themeContract.header.backgroundColor,
19
20
 
21
+ '@media': {
22
+ ...generateResponsiveMedia({
23
+ gap: themeContract.header.gap,
24
+ height: themeContract.header.height,
25
+ paddingTop: themeContract.header.paddingTop,
26
+ paddingLeft: themeContract.global.paddingLeft,
27
+ paddingRight: themeContract.global.paddingRight,
28
+ paddingBottom: themeContract.header.paddingBottom,
29
+ }),
30
+ },
31
+ },
32
+ ],
33
+
34
+ variants: {
35
+ isFixed: {
36
+ true: { position: 'fixed' },
37
+ false: { position: 'relative' },
38
+ },
39
+ },
40
+
41
+ defaultVariants: {
42
+ isFixed: false,
43
+ },
44
+ },
45
+ 'header'
46
+ );
47
+
48
+ export const headerPlaceholder = style(
49
+ [
50
+ {
20
51
  '@media': {
21
52
  ...generateResponsiveMedia({
22
- gap: themeContract.header.gap,
23
53
  height: themeContract.header.height,
24
- paddingTop: themeContract.header.paddingTop,
25
- paddingLeft: themeContract.global.paddingLeft,
26
- paddingRight: themeContract.global.paddingRight,
27
- paddingBottom: themeContract.header.paddingBottom,
28
54
  }),
29
55
  },
30
56
  },
31
57
  ],
58
+ 'header-placeholder'
59
+ );
32
60
 
33
- variants: {
34
- isFixed: {
35
- true: { position: 'fixed' },
36
- false: { position: 'relative' },
37
- },
38
- },
39
-
40
- defaultVariants: {
41
- isFixed: false,
42
- },
43
- });
44
-
45
- export const headerPlaceholder = style([
61
+ export const headerOverlayRecipe = recipe(
46
62
  {
47
- '@media': {
48
- ...generateResponsiveMedia({
49
- height: themeContract.header.height,
50
- }),
63
+ base: {
64
+ inset: 0,
65
+ zIndex: 25,
66
+ position: 'fixed',
67
+ backgroundColor: 'rgba(0,0,0,0.6)',
68
+ transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out',
51
69
  },
52
- },
53
- ]);
54
-
55
- export const headerOverlayRecipe = recipe({
56
- base: {
57
- inset: 0,
58
- zIndex: 25,
59
- position: 'fixed',
60
- backgroundColor: 'rgba(0,0,0,0.6)',
61
- transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out',
62
- },
63
70
 
64
- variants: {
65
- isOpen: {
66
- true: {
67
- opacity: 1,
68
- visibility: 'visible',
69
- },
70
- false: {
71
- opacity: 0,
72
- visibility: 'hidden',
71
+ variants: {
72
+ isOpen: {
73
+ true: {
74
+ opacity: 1,
75
+ visibility: 'visible',
76
+ },
77
+ false: {
78
+ opacity: 0,
79
+ visibility: 'hidden',
80
+ },
73
81
  },
74
82
  },
75
- },
76
83
 
77
- defaultVariants: {
78
- isOpen: false,
84
+ defaultVariants: {
85
+ isOpen: false,
86
+ },
79
87
  },
80
- });
88
+ 'header-overlay'
89
+ );
81
90
 
82
- export const headerToggleNav = recipe({
83
- base: {
84
- border: 0,
85
- zIndex: 30,
86
- },
91
+ export const headerToggleNav = recipe(
92
+ {
93
+ base: {
94
+ border: 0,
95
+ zIndex: 30,
96
+ },
87
97
 
88
- variants: {
89
- toggleNavVisibility: {
90
- show: { display: 'block' },
91
- hide: { display: 'none' },
92
- mobileOnly: {
93
- display: 'block',
94
- '@media': {
95
- [queries.md]: {
96
- display: 'none',
98
+ variants: {
99
+ toggleNavVisibility: {
100
+ show: { display: 'block' },
101
+ hide: { display: 'none' },
102
+ mobileOnly: {
103
+ display: 'block',
104
+ '@media': {
105
+ [queries.md]: {
106
+ display: 'none',
107
+ },
97
108
  },
98
109
  },
99
110
  },
100
111
  },
112
+ defaultVariants: {
113
+ toggleNavVisibility: 'mobileOnly',
114
+ },
101
115
  },
102
- defaultVariants: {
103
- toggleNavVisibility: 'mobileOnly',
104
- },
105
- });
116
+ 'header-toggle-nav'
117
+ );
106
118
 
107
119
  export type HeaderToggleNavVariants = Parameters<typeof headerToggleNav>[0];
108
120
  export type HeaderOverlayVariants = Parameters<typeof headerOverlayRecipe>[0];
package/src/components/Heading/styles.css.ts CHANGED
@@ -4,115 +4,118 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
4
  import { themeContract } from '../../theme/contract.css';
5
5
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
6
6
 
7
- export const headingRecipe = recipe({
8
- base: style({
9
- margin: 0,
10
- padding: 0,
11
- fontFamily: themeContract.fonts.heading,
12
- }),
7
+ export const headingRecipe = recipe(
8
+ {
9
+ base: style({
10
+ margin: 0,
11
+ padding: 0,
12
+ fontFamily: themeContract.fonts.heading,
13
+ }),
13
14
 
14
- variants: {
15
- as: {
16
- h1: {
17
- fontWeight: themeContract.heading.h1.fontWeight,
18
- fontFamily: themeContract.heading.h1.fontFamily,
19
- },
15
+ variants: {
16
+ as: {
17
+ h1: {
18
+ fontWeight: themeContract.heading.h1.fontWeight,
19
+ fontFamily: themeContract.heading.h1.fontFamily,
20
+ },
20
21
 
21
- h2: {
22
- fontWeight: themeContract.heading.h2.fontWeight,
23
- fontFamily: themeContract.heading.h2.fontFamily,
24
- },
22
+ h2: {
23
+ fontWeight: themeContract.heading.h2.fontWeight,
24
+ fontFamily: themeContract.heading.h2.fontFamily,
25
+ },
25
26
 
26
- h3: {
27
- fontWeight: themeContract.heading.h3.fontWeight,
28
- fontFamily: themeContract.heading.h3.fontFamily,
29
- },
27
+ h3: {
28
+ fontWeight: themeContract.heading.h3.fontWeight,
29
+ fontFamily: themeContract.heading.h3.fontFamily,
30
+ },
30
31
 
31
- h4: {
32
- fontWeight: themeContract.heading.h4.fontWeight,
33
- fontFamily: themeContract.heading.h4.fontFamily,
34
- },
32
+ h4: {
33
+ fontWeight: themeContract.heading.h4.fontWeight,
34
+ fontFamily: themeContract.heading.h4.fontFamily,
35
+ },
35
36
 
36
- h5: {
37
- fontWeight: themeContract.heading.h5.fontWeight,
38
- fontFamily: themeContract.heading.h5.fontFamily,
39
- },
37
+ h5: {
38
+ fontWeight: themeContract.heading.h5.fontWeight,
39
+ fontFamily: themeContract.heading.h5.fontFamily,
40
+ },
40
41
 
41
- h6: {
42
- fontWeight: themeContract.heading.h6.fontWeight,
43
- fontFamily: themeContract.heading.h6.fontFamily,
42
+ h6: {
43
+ fontWeight: themeContract.heading.h6.fontWeight,
44
+ fontFamily: themeContract.heading.h6.fontFamily,
45
+ },
44
46
  },
45
- },
46
47
 
47
- size: {
48
- xxl: {
49
- lineHeight: themeContract.heading.size.xxl.lineHeight,
50
- '@media': {
51
- ...generateResponsiveMedia({
52
- fontSize: themeContract.heading.size.xxl.fontSize,
53
- paddingBottom: themeContract.heading.size.xxl.fontSize,
54
- }),
48
+ size: {
49
+ xxl: {
50
+ lineHeight: themeContract.heading.size.xxl.lineHeight,
51
+ '@media': {
52
+ ...generateResponsiveMedia({
53
+ fontSize: themeContract.heading.size.xxl.fontSize,
54
+ paddingBottom: themeContract.heading.size.xxl.fontSize,
55
+ }),
56
+ },
55
57
  },
56
- },
57
- xl: {
58
- lineHeight: themeContract.heading.size.xl.lineHeight,
59
- '@media': {
60
- ...generateResponsiveMedia({
61
- fontSize: themeContract.heading.size.xl.fontSize,
62
- paddingBottom: themeContract.heading.size.xl.fontSize,
63
- }),
58
+ xl: {
59
+ lineHeight: themeContract.heading.size.xl.lineHeight,
60
+ '@media': {
61
+ ...generateResponsiveMedia({
62
+ fontSize: themeContract.heading.size.xl.fontSize,
63
+ paddingBottom: themeContract.heading.size.xl.fontSize,
64
+ }),
65
+ },
64
66
  },
65
- },
66
- lg: {
67
- lineHeight: themeContract.heading.size.lg.lineHeight,
68
- '@media': {
69
- ...generateResponsiveMedia({
70
- fontSize: themeContract.heading.size.lg.fontSize,
71
- paddingBottom: themeContract.heading.size.lg.fontSize,
72
- }),
67
+ lg: {
68
+ lineHeight: themeContract.heading.size.lg.lineHeight,
69
+ '@media': {
70
+ ...generateResponsiveMedia({
71
+ fontSize: themeContract.heading.size.lg.fontSize,
72
+ paddingBottom: themeContract.heading.size.lg.fontSize,
73
+ }),
74
+ },
73
75
  },
74
- },
75
- md: {
76
- lineHeight: themeContract.heading.size.md.lineHeight,
77
- '@media': {
78
- ...generateResponsiveMedia({
79
- fontSize: themeContract.heading.size.md.fontSize,
80
- paddingBottom: themeContract.heading.size.md.fontSize,
81
- }),
76
+ md: {
77
+ lineHeight: themeContract.heading.size.md.lineHeight,
78
+ '@media': {
79
+ ...generateResponsiveMedia({
80
+ fontSize: themeContract.heading.size.md.fontSize,
81
+ paddingBottom: themeContract.heading.size.md.fontSize,
82
+ }),
83
+ },
82
84
  },
83
- },
84
- sm: {
85
- lineHeight: themeContract.heading.size.sm.lineHeight,
86
- '@media': {
87
- ...generateResponsiveMedia({
88
- fontSize: themeContract.heading.size.sm.fontSize,
89
- paddingBottom: themeContract.heading.size.sm.fontSize,
90
- }),
85
+ sm: {
86
+ lineHeight: themeContract.heading.size.sm.lineHeight,
87
+ '@media': {
88
+ ...generateResponsiveMedia({
89
+ fontSize: themeContract.heading.size.sm.fontSize,
90
+ paddingBottom: themeContract.heading.size.sm.fontSize,
91
+ }),
92
+ },
91
93
  },
92
- },
93
- xs: {
94
- lineHeight: themeContract.heading.size.xs.lineHeight,
95
- '@media': {
96
- ...generateResponsiveMedia({
97
- fontSize: themeContract.heading.size.xs.fontSize,
98
- paddingBottom: themeContract.heading.size.xs.fontSize,
99
- }),
94
+ xs: {
95
+ lineHeight: themeContract.heading.size.xs.lineHeight,
96
+ '@media': {
97
+ ...generateResponsiveMedia({
98
+ fontSize: themeContract.heading.size.xs.fontSize,
99
+ paddingBottom: themeContract.heading.size.xs.fontSize,
100
+ }),
101
+ },
100
102
  },
101
103
  },
102
- },
103
104
 
104
- align: {
105
- left: { textAlign: 'left' },
106
- center: { textAlign: 'center' },
107
- right: { textAlign: 'right' },
105
+ align: {
106
+ left: { textAlign: 'left' },
107
+ center: { textAlign: 'center' },
108
+ right: { textAlign: 'right' },
109
+ },
108
110
  },
109
- },
110
111
 
111
- defaultVariants: {
112
- as: 'h2',
113
- size: 'xl',
114
- align: 'left',
112
+ defaultVariants: {
113
+ as: 'h2',
114
+ size: 'xl',
115
+ align: 'left',
116
+ },
115
117
  },
116
- });
118
+ 'heading'
119
+ );
117
120
 
118
121
  export type HeadingVariants = RecipeVariants<typeof headingRecipe>;
package/src/components/KeyNumber/styles.css.ts CHANGED
@@ -3,74 +3,80 @@ import { recipe, type 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 keyNumberRecipe = recipe({
7
- base: [
8
- {
9
- display: 'flex',
10
- textAlign: 'center',
11
- flexDirection: 'row',
6
+ export const keyNumberRecipe = recipe(
7
+ {
8
+ base: [
9
+ {
10
+ display: 'flex',
11
+ textAlign: 'center',
12
+ flexDirection: 'row',
12
13
 
13
- '@media': {
14
- ...generateResponsiveMedia({
15
- paddingTop: themeContract.keyNumber.paddingTop,
16
- paddingBottom: themeContract.keyNumber.paddingBottom,
17
- }),
14
+ '@media': {
15
+ ...generateResponsiveMedia({
16
+ paddingTop: themeContract.keyNumber.paddingTop,
17
+ paddingBottom: themeContract.keyNumber.paddingBottom,
18
+ }),
19
+ },
18
20
  },
19
- },
20
- ],
21
+ ],
21
22
 
22
- variants: {
23
- align: {
24
- left: {
25
- textAlign: 'left',
26
- justifyContent: 'center',
27
- },
28
- center: {
29
- textAlign: 'center',
30
- justifyContent: 'center',
23
+ variants: {
24
+ align: {
25
+ left: {
26
+ textAlign: 'left',
27
+ justifyContent: 'center',
28
+ },
29
+ center: {
30
+ textAlign: 'center',
31
+ justifyContent: 'center',
32
+ },
33
+ right: {
34
+ textAlign: 'right',
35
+ justifyContent: 'right',
36
+ },
31
37
  },
32
- right: {
33
- textAlign: 'right',
34
- justifyContent: 'right',
35
- },
36
- },
37
38
 
38
- vAlign: {
39
- top: {
40
- alignItems: 'flex-start',
41
- },
42
- center: {
43
- alignItems: 'center',
44
- },
45
- bottom: {
46
- alignItems: 'flex-end',
39
+ vAlign: {
40
+ top: {
41
+ alignItems: 'flex-start',
42
+ },
43
+ center: {
44
+ alignItems: 'center',
45
+ },
46
+ bottom: {
47
+ alignItems: 'flex-end',
48
+ },
47
49
  },
48
50
  },
49
- },
50
51
 
51
- defaultVariants: {
52
- align: 'center',
53
- vAlign: 'center',
52
+ defaultVariants: {
53
+ align: 'center',
54
+ vAlign: 'center',
55
+ },
54
56
  },
55
- });
57
+ 'key-number'
58
+ );
56
59
 
57
- export const keyNumberValueRecipe = recipe({
58
- base: {
59
- lineHeight: '1em',
60
- },
60
+ export const keyNumberValueRecipe = recipe(
61
+ {
62
+ base: {
63
+ lineHeight: '1em',
64
+ },
61
65
 
62
- variants: {
63
- size: {
64
- normal: { fontSize: '1em' },
65
- large: { fontSize: themeContract.keyNumber.fontSize.large },
66
- xlarge: { fontSize: themeContract.keyNumber.fontSize.xlarge },
66
+ variants: {
67
+ size: {
68
+ normal: { fontSize: '1em' },
69
+ large: { fontSize: themeContract.keyNumber.fontSize.large },
70
+ xlarge: { fontSize: themeContract.keyNumber.fontSize.xlarge },
71
+ },
67
72
  },
68
- },
69
73
 
70
- defaultVariants: {
71
- size: 'normal',
74
+ defaultVariants: {
75
+ size: 'normal',
76
+ },
72
77
  },
73
- });
78
+ 'key-number-value'
79
+ );
74
80
 
75
81
  export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;
76
82
  export type KeyNumberValueVariants = RecipeVariants<typeof keyNumberValueRecipe>;