@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/Form/TextField/Input/Input.css.ts CHANGED
@@ -53,54 +53,57 @@ const inputBase = style({
53
53
  // },
54
54
  });
55
55
 
56
- export const inputRecipe = recipe({
57
- base: inputBase,
56
+ export const inputRecipe = recipe(
57
+ {
58
+ base: inputBase,
58
59
 
59
- variants: {
60
- size: {
61
- sm: {
62
- fontSize: themeContract.fontSizes.xs,
63
- padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
60
+ variants: {
61
+ size: {
62
+ sm: {
63
+ fontSize: themeContract.fontSizes.xs,
64
+ padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
65
+ },
66
+ md: {},
67
+ lg: {
68
+ fontSize: themeContract.fontSizes.md,
69
+ padding: `${themeContract.space.md} ${themeContract.space.lg}`,
70
+ },
64
71
  },
65
- md: {},
66
- lg: {
67
- fontSize: themeContract.fontSizes.md,
68
- padding: `${themeContract.space.md} ${themeContract.space.lg}`,
69
- },
70
- },
71
- variant: {
72
- default: {},
73
- filled: {
74
- backgroundColor: themeContract.colors.surface,
75
- border: 'none',
72
+ variant: {
73
+ default: {},
74
+ filled: {
75
+ backgroundColor: themeContract.colors.surface,
76
+ border: 'none',
76
77
 
77
- // ':focus': {
78
- // backgroundColor: themeContract.colors.background,
79
- // border: `1px solid ${themeContract.colors.primary}`,
80
- // },
81
- },
82
- outlined: {
83
- backgroundColor: 'transparent',
84
- },
85
- underlined: {
86
- backgroundColor: 'transparent',
87
- border: 'none',
88
- borderBottom: `1px solid ${themeContract.colors.border}`,
89
- borderRadius: 0,
90
- padding: `${themeContract.space.sm} 0`,
78
+ // ':focus': {
79
+ // backgroundColor: themeContract.colors.background,
80
+ // border: `1px solid ${themeContract.colors.primary}`,
81
+ // },
82
+ },
83
+ outlined: {
84
+ backgroundColor: 'transparent',
85
+ },
86
+ underlined: {
87
+ backgroundColor: 'transparent',
88
+ border: 'none',
89
+ borderBottom: `1px solid ${themeContract.colors.border}`,
90
+ borderRadius: 0,
91
+ padding: `${themeContract.space.sm} 0`,
91
92
 
92
- // ':focus': {
93
- // borderBottom: `2px solid ${themeContract.colors.primary}`,
94
- // outline: 'none',
95
- // },
93
+ // ':focus': {
94
+ // borderBottom: `2px solid ${themeContract.colors.primary}`,
95
+ // outline: 'none',
96
+ // },
97
+ },
96
98
  },
97
99
  },
98
- },
99
100
 
100
- defaultVariants: {
101
- size: 'md',
102
- variant: 'default',
101
+ defaultVariants: {
102
+ size: 'md',
103
+ variant: 'default',
104
+ },
103
105
  },
104
- });
106
+ 'input'
107
+ );
105
108
 
106
109
  export type InputVariants = RecipeVariants<typeof inputRecipe>;
package/src/components/Form/TextField/Label/Label.css.ts CHANGED
@@ -2,57 +2,63 @@ import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { themeContract } from '../../../../theme/contract.css';
4
4
 
5
- const labelBase = style({
6
- fontFamily: themeContract.fonts.body,
7
- fontSize: themeContract.fontSizes.sm,
8
- fontWeight: themeContract.fontWeights.medium,
9
- color: themeContract.colors.text,
10
- lineHeight: themeContract.lineHeights.tight,
11
- width: '100%',
12
- textAlign: 'left',
13
- paddingBottom: themeContract.space.xs,
5
+ const labelBase = style(
6
+ {
7
+ fontFamily: themeContract.fonts.body,
8
+ fontSize: themeContract.fontSizes.sm,
9
+ fontWeight: themeContract.fontWeights.medium,
10
+ color: themeContract.colors.text,
11
+ lineHeight: themeContract.lineHeights.tight,
12
+ width: '100%',
13
+ textAlign: 'left',
14
+ paddingBottom: themeContract.space.xs,
14
15
 
15
- // selectors: {
16
- // '&[data-required="true"]': {
17
- // selectors: {
18
- // '&::after': {
19
- // content: ' *',
20
- // color: themeContract.colors.error,
21
- // },
22
- // },
23
- // },
24
- // },
25
- });
16
+ // selectors: {
17
+ // '&[data-required="true"]': {
18
+ // selectors: {
19
+ // '&::after': {
20
+ // content: ' *',
21
+ // color: themeContract.colors.error,
22
+ // },
23
+ // },
24
+ // },
25
+ // },
26
+ },
27
+ 'text-field-label-base'
28
+ );
26
29
 
27
- export const labelRecipe = recipe({
28
- base: labelBase,
30
+ export const labelRecipe = recipe(
31
+ {
32
+ base: labelBase,
29
33
 
30
- variants: {
31
- size: {
32
- sm: {
33
- fontSize: themeContract.fontSizes.xs,
34
- paddingBottom: themeContract.space.xs,
35
- },
36
- md: {},
37
- lg: {
38
- fontSize: themeContract.fontSizes.md,
39
- paddingBottom: themeContract.space.sm,
34
+ variants: {
35
+ size: {
36
+ sm: {
37
+ fontSize: themeContract.fontSizes.xs,
38
+ paddingBottom: themeContract.space.xs,
39
+ },
40
+ md: {},
41
+ lg: {
42
+ fontSize: themeContract.fontSizes.md,
43
+ paddingBottom: themeContract.space.sm,
44
+ },
40
45
  },
41
- },
42
- variant: {
43
- default: {},
44
- inline: {
45
- display: 'inline-block',
46
- marginRight: themeContract.space.sm,
47
- paddingBottom: 0,
46
+ variant: {
47
+ default: {},
48
+ inline: {
49
+ display: 'inline-block',
50
+ marginRight: themeContract.space.sm,
51
+ paddingBottom: 0,
52
+ },
48
53
  },
49
54
  },
50
- },
51
55
 
52
- defaultVariants: {
53
- size: 'md',
54
- variant: 'default',
56
+ defaultVariants: {
57
+ size: 'md',
58
+ variant: 'default',
59
+ },
55
60
  },
56
- });
61
+ 'text-field-label'
62
+ );
57
63
 
58
64
  export type LabelVariants = RecipeVariants<typeof labelRecipe>;
package/src/components/Form/TextField/TextField.css.ts CHANGED
@@ -95,45 +95,48 @@ const errorMessage = style({
95
95
  fontFamily: themeContract.fonts.body,
96
96
  });
97
97
 
98
- export const textFieldRecipe = recipe({
99
- base: textFieldBase,
100
-
101
- variants: {
102
- size: {
103
- sm: {
104
- gap: themeContract.space.xs,
105
-
106
- // selectors: {
107
- // [`& .${labelBase}`]: {
108
- // fontSize: themeContract.fontSizes.xs,
109
- // },
110
- // [`& .${inputBase}`]: {
111
- // fontSize: themeContract.fontSizes.xs,
112
- // padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
113
- // },
114
- // },
115
- },
116
- md: {},
117
- lg: {
118
- gap: themeContract.space.sm,
119
-
120
- // selectors: {
121
- // [`& .${labelBase}`]: {
122
- // fontSize: themeContract.fontSizes.md,
123
- // },
124
- // [`& .${inputBase}`]: {
125
- // fontSize: themeContract.fontSizes.md,
126
- // padding: `${themeContract.space.md} ${themeContract.space.lg}`,
127
- // },
128
- // },
98
+ export const textFieldRecipe = recipe(
99
+ {
100
+ base: textFieldBase,
101
+
102
+ variants: {
103
+ size: {
104
+ sm: {
105
+ gap: themeContract.space.xs,
106
+
107
+ // selectors: {
108
+ // [`& .${labelBase}`]: {
109
+ // fontSize: themeContract.fontSizes.xs,
110
+ // },
111
+ // [`& .${inputBase}`]: {
112
+ // fontSize: themeContract.fontSizes.xs,
113
+ // padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
114
+ // },
115
+ // },
116
+ },
117
+ md: {},
118
+ lg: {
119
+ gap: themeContract.space.sm,
120
+
121
+ // selectors: {
122
+ // [`& .${labelBase}`]: {
123
+ // fontSize: themeContract.fontSizes.md,
124
+ // },
125
+ // [`& .${inputBase}`]: {
126
+ // fontSize: themeContract.fontSizes.md,
127
+ // padding: `${themeContract.space.md} ${themeContract.space.lg}`,
128
+ // },
129
+ // },
130
+ },
129
131
  },
130
132
  },
131
- },
132
133
 
133
- defaultVariants: {
134
- size: 'md',
134
+ defaultVariants: {
135
+ size: 'md',
136
+ },
135
137
  },
136
- });
138
+ 'text-field'
139
+ );
137
140
 
138
141
  export { labelBase, inputBase, textareaBase, messageContainer, errorMessage };
139
142
  export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;
package/src/components/Form/TextField/Textarea/Textarea.css.ts CHANGED
@@ -2,120 +2,126 @@ import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
3
  import { themeContract } from '../../../../theme/contract.css';
4
4
 
5
- const textareaBase = style({
6
- appearance: 'none',
7
- backgroundColor: themeContract.colors.background,
8
- border: `1px solid ${themeContract.colors.border}`,
9
- borderRadius: themeContract.radii.md,
10
- color: themeContract.colors.text,
11
- fontFamily: themeContract.fonts.body,
12
- fontSize: themeContract.fontSizes.sm,
13
- lineHeight: themeContract.lineHeights.normal,
14
- padding: `${themeContract.space.sm} ${themeContract.space.md}`,
15
- transition: 'all 0.2s ease-in-out',
16
- width: '100%',
17
- resize: 'vertical',
18
- minHeight: '80px',
19
-
20
- '::placeholder': {
21
- color: themeContract.colors.textSecondary,
22
- },
23
-
24
- ':hover': {
25
- borderColor: themeContract.colors.primary,
26
- },
27
-
28
- ':focus': {
29
- outline: '2px solid',
30
- outlineColor: themeContract.colors.primary,
31
- outlineOffset: '2px',
32
- borderColor: themeContract.colors.primary,
33
- },
5
+ const textareaBase = style(
6
+ {
7
+ appearance: 'none',
8
+ backgroundColor: themeContract.colors.background,
9
+ border: `1px solid ${themeContract.colors.border}`,
10
+ borderRadius: themeContract.radii.md,
11
+ color: themeContract.colors.text,
12
+ fontFamily: themeContract.fonts.body,
13
+ fontSize: themeContract.fontSizes.sm,
14
+ lineHeight: themeContract.lineHeights.normal,
15
+ padding: `${themeContract.space.sm} ${themeContract.space.md}`,
16
+ transition: 'all 0.2s ease-in-out',
17
+ width: '100%',
18
+ resize: 'vertical',
19
+ minHeight: '80px',
34
20
 
35
- ':disabled': {
36
- backgroundColor: themeContract.colors.surface,
37
- color: themeContract.colors.textSecondary,
38
- cursor: 'not-allowed',
39
- opacity: '0.6',
40
- resize: 'none',
41
- },
21
+ '::placeholder': {
22
+ color: themeContract.colors.textSecondary,
23
+ },
42
24
 
43
- selectors: {
44
- '&[data-error="true"]': {
45
- borderColor: themeContract.colors.error,
25
+ ':hover': {
26
+ borderColor: themeContract.colors.primary,
46
27
  },
47
- '&[data-error="true"]:focus': {
48
- outlineColor: themeContract.colors.error,
49
- borderColor: themeContract.colors.error,
28
+
29
+ ':focus': {
30
+ outline: '2px solid',
31
+ outlineColor: themeContract.colors.primary,
32
+ outlineOffset: '2px',
33
+ borderColor: themeContract.colors.primary,
50
34
  },
51
- },
52
- });
53
35
 
54
- export const textareaRecipe = recipe({
55
- base: textareaBase,
36
+ ':disabled': {
37
+ backgroundColor: themeContract.colors.surface,
38
+ color: themeContract.colors.textSecondary,
39
+ cursor: 'not-allowed',
40
+ opacity: '0.6',
41
+ resize: 'none',
42
+ },
56
43
 
57
- variants: {
58
- size: {
59
- sm: {
60
- fontSize: themeContract.fontSizes.xs,
61
- padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
62
- minHeight: '60px',
44
+ selectors: {
45
+ '&[data-error="true"]': {
46
+ borderColor: themeContract.colors.error,
63
47
  },
64
- md: {},
65
- lg: {
66
- fontSize: themeContract.fontSizes.md,
67
- padding: `${themeContract.space.md} ${themeContract.space.lg}`,
68
- minHeight: '100px',
48
+ '&[data-error="true"]:focus': {
49
+ outlineColor: themeContract.colors.error,
50
+ borderColor: themeContract.colors.error,
69
51
  },
70
52
  },
71
- variant: {
72
- default: {},
73
- filled: {
74
- backgroundColor: themeContract.colors.surface,
75
- border: 'none',
53
+ },
54
+ 'text-area-base'
55
+ );
56
+
57
+ export const textareaRecipe = recipe(
58
+ {
59
+ base: textareaBase,
76
60
 
77
- ':focus': {
78
- backgroundColor: themeContract.colors.background,
79
- border: `1px solid ${themeContract.colors.primary}`,
61
+ variants: {
62
+ size: {
63
+ sm: {
64
+ fontSize: themeContract.fontSizes.xs,
65
+ padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
66
+ minHeight: '60px',
67
+ },
68
+ md: {},
69
+ lg: {
70
+ fontSize: themeContract.fontSizes.md,
71
+ padding: `${themeContract.space.md} ${themeContract.space.lg}`,
72
+ minHeight: '100px',
80
73
  },
81
74
  },
82
- outlined: {
83
- backgroundColor: 'transparent',
84
- },
85
- underlined: {
86
- backgroundColor: 'transparent',
87
- border: 'none',
88
- borderBottom: `1px solid ${themeContract.colors.border}`,
89
- borderRadius: 0,
90
- padding: `${themeContract.space.sm} 0`,
75
+ variant: {
76
+ default: {},
77
+ filled: {
78
+ backgroundColor: themeContract.colors.surface,
79
+ border: 'none',
91
80
 
92
- ':focus': {
93
- borderBottom: `2px solid ${themeContract.colors.primary}`,
94
- outline: 'none',
81
+ ':focus': {
82
+ backgroundColor: themeContract.colors.background,
83
+ border: `1px solid ${themeContract.colors.primary}`,
84
+ },
85
+ },
86
+ outlined: {
87
+ backgroundColor: 'transparent',
88
+ },
89
+ underlined: {
90
+ backgroundColor: 'transparent',
91
+ border: 'none',
92
+ borderBottom: `1px solid ${themeContract.colors.border}`,
93
+ borderRadius: 0,
94
+ padding: `${themeContract.space.sm} 0`,
95
+
96
+ ':focus': {
97
+ borderBottom: `2px solid ${themeContract.colors.primary}`,
98
+ outline: 'none',
99
+ },
95
100
  },
96
101
  },
97
- },
98
- resize: {
99
- vertical: {
100
- resize: 'vertical',
101
- },
102
- horizontal: {
103
- resize: 'horizontal',
104
- },
105
- both: {
106
- resize: 'both',
107
- },
108
- none: {
109
- resize: 'none',
102
+ resize: {
103
+ vertical: {
104
+ resize: 'vertical',
105
+ },
106
+ horizontal: {
107
+ resize: 'horizontal',
108
+ },
109
+ both: {
110
+ resize: 'both',
111
+ },
112
+ none: {
113
+ resize: 'none',
114
+ },
110
115
  },
111
116
  },
112
- },
113
117
 
114
- defaultVariants: {
115
- size: 'md',
116
- variant: 'default',
117
- resize: 'vertical',
118
+ defaultVariants: {
119
+ size: 'md',
120
+ variant: 'default',
121
+ resize: 'vertical',
122
+ },
118
123
  },
119
- });
124
+ 'text-area'
125
+ );
120
126
 
121
127
  export type TextareaVariants = RecipeVariants<typeof textareaRecipe>;
package/src/components/Header/HeaderToggleNav/styles.css.ts CHANGED
@@ -1,37 +1,43 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe } from '@vanilla-extract/recipes';
3
3
 
4
- export const toggleNavButton = recipe({
5
- base: {
6
- background: 'transparent',
7
- border: 'none',
8
- cursor: 'pointer',
9
- display: 'flex',
10
- flexDirection: 'column',
11
- justifyContent: 'space-between',
12
- width: '24px',
13
- height: '18px',
14
- padding: 0,
4
+ export const toggleNavButton = recipe(
5
+ {
6
+ base: {
7
+ background: 'transparent',
8
+ border: 'none',
9
+ cursor: 'pointer',
10
+ display: 'flex',
11
+ flexDirection: 'column',
12
+ justifyContent: 'space-between',
13
+ width: '24px',
14
+ height: '18px',
15
+ padding: 0,
16
+ },
15
17
  },
16
- });
18
+ 'toggle-nav-button'
19
+ );
17
20
 
18
- export const bar = style({
19
- height: '3px',
20
- width: '100%',
21
- display: 'block',
22
- borderRadius: '2px',
23
- backgroundColor: 'black',
24
- transition: 'all 0.3s ease',
21
+ export const bar = style(
22
+ {
23
+ height: '3px',
24
+ width: '100%',
25
+ display: 'block',
26
+ borderRadius: '2px',
27
+ backgroundColor: 'black',
28
+ transition: 'all 0.3s ease',
25
29
 
26
- selectors: {
27
- '&.open:nth-child(1)': {
28
- transform: 'translateY(7.5px) rotate(45deg)',
29
- },
30
- '&.open:nth-child(2)': {
31
- opacity: 0,
32
- },
33
- '&.open:nth-child(3)': {
34
- transform: 'translateY(-7.5px) rotate(-45deg)',
30
+ selectors: {
31
+ '&.open:nth-child(1)': {
32
+ transform: 'translateY(7.5px) rotate(45deg)',
33
+ },
34
+ '&.open:nth-child(2)': {
35
+ opacity: 0,
36
+ },
37
+ '&.open:nth-child(3)': {
38
+ transform: 'translateY(-7.5px) rotate(-45deg)',
39
+ },
35
40
  },
36
41
  },
37
- });
42
+ 'bar'
43
+ );
package/src/components/Header/index.tsx CHANGED
@@ -18,7 +18,7 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
18
18
 
19
19
  const renderToggleNav = () => (
20
20
  <div className={headerToggleNav({ toggleNavVisibility })}>
21
- {childrenToggleNav ? (
21
+ {childrenToggleNav !== undefined ? (
22
22
  childrenToggleNav({ isOpen: isNavOpen, onClick: onToggleNav })
23
23
  ) : (
24
24
  <HeaderToggleNav isOpen={isNavOpen} onClick={onToggleNav} />