@latte-macchiat-io/latte-vanilla-components 0.0.245 → 0.0.247

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 (26) 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/index.tsx +10 -4
  14. package/src/components/Header/HeaderToggleNav/styles.css.ts +35 -29
  15. package/src/components/Header/index.tsx +1 -1
  16. package/src/components/Header/styles.css.ts +88 -76
  17. package/src/components/Heading/styles.css.ts +94 -91
  18. package/src/components/KeyNumber/styles.css.ts +60 -54
  19. package/src/components/LanguageSwitcher/styles.css.ts +112 -100
  20. package/src/components/Modal/styles.css.ts +77 -68
  21. package/src/components/Nav/styles.css.ts +22 -19
  22. package/src/components/NavLegal/styles.css.ts +16 -13
  23. package/src/components/NavSocial/styles.css.ts +21 -15
  24. package/src/components/Section/styles.css.ts +105 -99
  25. package/src/components/ThemeToggle/styles.css.ts +11 -8
  26. package/src/components/Video/styles.css.ts +163 -139
package/src/components/Columns/styles.css.ts CHANGED
@@ -3,42 +3,45 @@ import { queries } from '../../styles/mediaqueries';
3
3
  import { themeContract } from '../../theme/contract.css';
4
4
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
5
 
6
- export const columnsRecipe = recipe({
7
- base: [
8
- {
9
- display: 'grid',
10
- width: '100%',
11
- gridTemplateColumns: '1fr', // Mobile : une seule colonne
6
+ export const columnsRecipe = recipe(
7
+ {
8
+ base: [
9
+ {
10
+ display: 'grid',
11
+ width: '100%',
12
+ gridTemplateColumns: '1fr', // Mobile : une seule colonne
12
13
 
13
- '@media': {
14
- ...generateResponsiveMedia({
15
- gap: themeContract.columns.gap,
16
- }),
14
+ '@media': {
15
+ ...generateResponsiveMedia({
16
+ gap: themeContract.columns.gap,
17
+ }),
17
18
 
18
- [queries.sm]: {
19
- gridAutoFlow: 'row',
20
- gridTemplateColumns: 'var(--columns)', // desktop : prend la variable CSS
19
+ [queries.sm]: {
20
+ gridAutoFlow: 'row',
21
+ gridTemplateColumns: 'var(--columns)', // desktop : prend la variable CSS
22
+ },
21
23
  },
22
24
  },
23
- },
24
- ],
25
+ ],
25
26
 
26
- variants: {
27
- align: {
28
- left: { textAlign: 'left' },
29
- center: { textAlign: 'center' },
30
- right: { textAlign: 'right' },
31
- },
32
- vAlign: {
33
- top: { alignItems: 'start' },
34
- center: { alignItems: 'center' },
35
- bottom: { alignItems: 'end' },
27
+ variants: {
28
+ align: {
29
+ left: { textAlign: 'left' },
30
+ center: { textAlign: 'center' },
31
+ right: { textAlign: 'right' },
32
+ },
33
+ vAlign: {
34
+ top: { alignItems: 'start' },
35
+ center: { alignItems: 'center' },
36
+ bottom: { alignItems: 'end' },
37
+ },
36
38
  },
37
- },
38
39
 
39
- defaultVariants: {
40
- vAlign: 'top',
40
+ defaultVariants: {
41
+ vAlign: 'top',
42
+ },
41
43
  },
42
- });
44
+ 'columns'
45
+ );
43
46
 
44
47
  export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;
package/src/components/ConsentCookie/styles.css.ts CHANGED
@@ -19,149 +19,160 @@ const slideUp = keyframes({
19
19
  },
20
20
  });
21
21
 
22
- const consentOverlay = style({
23
- position: 'fixed',
24
- top: 0,
25
- left: 0,
26
- right: 0,
27
- bottom: 0,
28
- zIndex: 100,
29
- animation: `${fadeIn} 0.3s ease-out`,
30
-
31
- '::before': {
32
- content: '""',
22
+ const consentOverlay = style(
23
+ {
33
24
  position: 'fixed',
34
25
  top: 0,
35
26
  left: 0,
36
27
  right: 0,
37
28
  bottom: 0,
38
- backgroundColor: 'rgba(0, 0, 0, 0.3)',
39
- backdropFilter: 'blur(2px)',
40
- opacity: 0.8,
29
+ zIndex: 100,
30
+ animation: `${fadeIn} 0.3s ease-out`,
31
+
32
+ '::before': {
33
+ content: '""',
34
+ position: 'fixed',
35
+ top: 0,
36
+ left: 0,
37
+ right: 0,
38
+ bottom: 0,
39
+ backgroundColor: 'rgba(0, 0, 0, 0.3)',
40
+ backdropFilter: 'blur(2px)',
41
+ opacity: 0.8,
42
+ },
41
43
  },
42
- });
44
+ 'consent-overlay'
45
+ );
43
46
 
44
- const consentContent = style({
45
- // position: 'fixed',
46
- bottom: themeContract.space.md,
47
- right: themeContract.space.md,
48
- zIndex: 20,
49
- display: 'flex',
50
- flexDirection: 'column',
51
- backgroundColor: themeContract.colors.background,
52
- border: `1px solid ${themeContract.colors.border}`,
53
- borderRadius: themeContract.radii.lg,
54
- boxShadow: themeContract.shadows.xl,
55
- padding: themeContract.space.lg,
56
- width: '300px',
57
- maxWidth: 'calc(100vw - 32px)',
58
- animation: `${slideUp} 0.3s ease-out`,
47
+ export const consentContent = style(
48
+ {
49
+ // position: 'fixed',
50
+ bottom: themeContract.space.md,
51
+ right: themeContract.space.md,
52
+ zIndex: 20,
53
+ display: 'flex',
54
+ flexDirection: 'column',
55
+ backgroundColor: themeContract.colors.background,
56
+ border: `1px solid ${themeContract.colors.border}`,
57
+ borderRadius: themeContract.radii.lg,
58
+ boxShadow: themeContract.shadows.xl,
59
+ padding: themeContract.space.lg,
60
+ width: '300px',
61
+ maxWidth: 'calc(100vw - 32px)',
62
+ animation: `${slideUp} 0.3s ease-out`,
59
63
 
60
- '@media': {
61
- [queries.sm]: {
62
- width: '400px',
63
- },
64
- [queries.md]: {
65
- width: '500px',
66
- padding: themeContract.space.xl,
64
+ '@media': {
65
+ [queries.sm]: {
66
+ width: '400px',
67
+ },
68
+ [queries.md]: {
69
+ width: '500px',
70
+ padding: themeContract.space.xl,
71
+ },
67
72
  },
68
73
  },
69
- });
74
+ 'consent-content'
75
+ );
70
76
 
71
- const consentActions = style({
72
- display: 'flex',
73
- alignItems: 'center',
74
- justifyContent: 'flex-end',
75
- gap: themeContract.space.md,
76
- marginTop: themeContract.space.lg,
77
- flexWrap: 'wrap',
77
+ export const consentActions = style(
78
+ {
79
+ display: 'flex',
80
+ alignItems: 'center',
81
+ justifyContent: 'flex-end',
82
+ gap: themeContract.space.md,
83
+ marginTop: themeContract.space.lg,
84
+ flexWrap: 'wrap',
78
85
 
79
- '@media': {
80
- [queries.sm]: {
81
- flexWrap: 'nowrap',
86
+ '@media': {
87
+ [queries.sm]: {
88
+ flexWrap: 'nowrap',
89
+ },
82
90
  },
83
91
  },
84
- });
92
+ 'consent-actions'
93
+ );
85
94
 
86
- export const consentRecipe = recipe({
87
- base: consentOverlay,
95
+ export const consentRecipe = recipe(
96
+ {
97
+ base: consentOverlay,
88
98
 
89
- variants: {
90
- // position: {
91
- // 'bottom-right': {},
92
- // 'bottom-left': {
93
- // // selectors: {
94
- // // '& > div': {
95
- // // left: themeContract.space.md,
96
- // // right: 'auto',
97
- // // },
98
- // // },
99
- // },
100
- // 'bottom-center': {
101
- // // selectors: {
102
- // // '& > div': {
103
- // // left: '50%',
104
- // // right: 'auto',
105
- // // transform: 'translateX(-50%)',
106
- // // },
107
- // // },
108
- // },
109
- // 'top-right': {
110
- // // selectors: {
111
- // // '& > div': {
112
- // // top: themeContract.space.md,
113
- // // bottom: 'auto',
114
- // // },
115
- // // },
116
- // },
117
- // 'top-left': {
118
- // // selectors: {
119
- // // '& > div': {
120
- // // top: themeContract.space.md,
121
- // // bottom: 'auto',
122
- // // left: themeContract.space.md,
123
- // // right: 'auto',
124
- // // },
125
- // // },
126
- // },
127
- // 'top-center': {
128
- // // selectors: {
129
- // // '& > div': {
130
- // // top: themeContract.space.md,
131
- // // bottom: 'auto',
132
- // // left: '50%',
133
- // // right: 'auto',
134
- // // transform: 'translateX(-50%)',
135
- // // },
136
- // // },
137
- // },
138
- // },
139
- variant: {
140
- modal: {},
141
- banner: {
142
- '::before': {
143
- display: 'none',
144
- },
99
+ variants: {
100
+ // position: {
101
+ // 'bottom-right': {},
102
+ // 'bottom-left': {
103
+ // // selectors: {
104
+ // // '& > div': {
105
+ // // left: themeContract.space.md,
106
+ // // right: 'auto',
107
+ // // },
108
+ // // },
109
+ // },
110
+ // 'bottom-center': {
111
+ // // selectors: {
112
+ // // '& > div': {
113
+ // // left: '50%',
114
+ // // right: 'auto',
115
+ // // transform: 'translateX(-50%)',
116
+ // // },
117
+ // // },
118
+ // },
119
+ // 'top-right': {
120
+ // // selectors: {
121
+ // // '& > div': {
122
+ // // top: themeContract.space.md,
123
+ // // bottom: 'auto',
124
+ // // },
125
+ // // },
126
+ // },
127
+ // 'top-left': {
128
+ // // selectors: {
129
+ // // '& > div': {
130
+ // // top: themeContract.space.md,
131
+ // // bottom: 'auto',
132
+ // // left: themeContract.space.md,
133
+ // // right: 'auto',
134
+ // // },
135
+ // // },
136
+ // },
137
+ // 'top-center': {
138
+ // // selectors: {
139
+ // // '& > div': {
140
+ // // top: themeContract.space.md,
141
+ // // bottom: 'auto',
142
+ // // left: '50%',
143
+ // // right: 'auto',
144
+ // // transform: 'translateX(-50%)',
145
+ // // },
146
+ // // },
147
+ // },
148
+ // },
149
+ variant: {
150
+ modal: {},
151
+ banner: {
152
+ '::before': {
153
+ display: 'none',
154
+ },
145
155
 
146
- // selectors: {
147
- // '& > div': {
148
- // position: 'static',
149
- // width: '100%',
150
- // maxWidth: 'none',
151
- // borderRadius: 0,
152
- // bottom: 'auto',
153
- // right: 'auto',
154
- // },
155
- // },
156
+ // selectors: {
157
+ // '& > div': {
158
+ // position: 'static',
159
+ // width: '100%',
160
+ // maxWidth: 'none',
161
+ // borderRadius: 0,
162
+ // bottom: 'auto',
163
+ // right: 'auto',
164
+ // },
165
+ // },
166
+ },
156
167
  },
157
168
  },
158
- },
159
169
 
160
- defaultVariants: {
161
- // position: 'bottom-right',
162
- variant: 'modal',
170
+ defaultVariants: {
171
+ // position: 'bottom-right',
172
+ variant: 'modal',
173
+ },
163
174
  },
164
- });
175
+ 'consent'
176
+ );
165
177
 
166
- export { consentContent, consentActions };
167
178
  export type ConsentCookieVariants = RecipeVariants<typeof consentRecipe>;
package/src/components/Form/Form.css.ts CHANGED
@@ -7,58 +7,61 @@ const formBase = style({
7
7
  backgroundColor: 'transparent',
8
8
  });
9
9
 
10
- export const formRecipe = recipe({
11
- base: formBase,
10
+ export const formRecipe = recipe(
11
+ {
12
+ base: formBase,
12
13
 
13
- variants: {
14
- spacing: {
15
- none: {
16
- gap: 0,
14
+ variants: {
15
+ spacing: {
16
+ none: {
17
+ gap: 0,
18
+ },
19
+ sm: {
20
+ display: 'flex',
21
+ flexDirection: 'column',
22
+ gap: themeContract.space.sm,
23
+ },
24
+ md: {
25
+ display: 'flex',
26
+ flexDirection: 'column',
27
+ gap: themeContract.space.md,
28
+ },
29
+ lg: {
30
+ display: 'flex',
31
+ flexDirection: 'column',
32
+ gap: themeContract.space.lg,
33
+ },
34
+ xl: {
35
+ display: 'flex',
36
+ flexDirection: 'column',
37
+ gap: themeContract.space.xl,
38
+ },
17
39
  },
18
- sm: {
19
- display: 'flex',
20
- flexDirection: 'column',
21
- gap: themeContract.space.sm,
22
- },
23
- md: {
24
- display: 'flex',
25
- flexDirection: 'column',
26
- gap: themeContract.space.md,
27
- },
28
- lg: {
29
- display: 'flex',
30
- flexDirection: 'column',
31
- gap: themeContract.space.lg,
32
- },
33
- xl: {
34
- display: 'flex',
35
- flexDirection: 'column',
36
- gap: themeContract.space.xl,
37
- },
38
- },
39
- layout: {
40
- stacked: {
41
- display: 'flex',
42
- flexDirection: 'column',
43
- },
44
- inline: {
45
- display: 'flex',
46
- flexDirection: 'row',
47
- flexWrap: 'wrap',
48
- alignItems: 'flex-end',
49
- },
50
- grid: {
51
- display: 'grid',
52
- gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
53
- gap: themeContract.space.md,
40
+ layout: {
41
+ stacked: {
42
+ display: 'flex',
43
+ flexDirection: 'column',
44
+ },
45
+ inline: {
46
+ display: 'flex',
47
+ flexDirection: 'row',
48
+ flexWrap: 'wrap',
49
+ alignItems: 'flex-end',
50
+ },
51
+ grid: {
52
+ display: 'grid',
53
+ gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
54
+ gap: themeContract.space.md,
55
+ },
54
56
  },
55
57
  },
56
- },
57
58
 
58
- defaultVariants: {
59
- spacing: 'md',
60
- layout: 'stacked',
59
+ defaultVariants: {
60
+ spacing: 'md',
61
+ layout: 'stacked',
62
+ },
61
63
  },
62
- });
64
+ 'form'
65
+ );
63
66
 
64
67
  export type FormVariants = RecipeVariants<typeof formRecipe>;
package/src/components/Form/Row/Row.css.ts CHANGED
@@ -7,64 +7,67 @@ const rowBase = style({
7
7
  width: '100%',
8
8
  });
9
9
 
10
- export const rowRecipe = recipe({
11
- base: rowBase,
10
+ export const rowRecipe = recipe(
11
+ {
12
+ base: rowBase,
12
13
 
13
- variants: {
14
- align: {
15
- left: {
16
- justifyContent: 'flex-start',
17
- textAlign: 'left',
14
+ variants: {
15
+ align: {
16
+ left: {
17
+ justifyContent: 'flex-start',
18
+ textAlign: 'left',
19
+ },
20
+ center: {
21
+ justifyContent: 'center',
22
+ textAlign: 'center',
23
+ },
24
+ right: {
25
+ justifyContent: 'flex-end',
26
+ textAlign: 'right',
27
+ },
18
28
  },
19
- center: {
20
- justifyContent: 'center',
21
- textAlign: 'center',
29
+ variant: {
30
+ default: {
31
+ flexDirection: 'column',
32
+ gap: themeContract.space.sm,
33
+ },
34
+ actions: {
35
+ flexDirection: 'row',
36
+ alignItems: 'center',
37
+ gap: themeContract.space.md,
38
+ marginTop: themeContract.space.lg,
39
+ },
40
+ message: {
41
+ flexDirection: 'column',
42
+ padding: themeContract.space.md,
43
+ backgroundColor: themeContract.colors.surface,
44
+ borderRadius: themeContract.radii.md,
45
+ border: `1px solid ${themeContract.colors.border}`,
46
+ },
22
47
  },
23
- right: {
24
- justifyContent: 'flex-end',
25
- textAlign: 'right',
48
+ spacing: {
49
+ none: {
50
+ gap: 0,
51
+ },
52
+ sm: {
53
+ gap: themeContract.space.sm,
54
+ },
55
+ md: {
56
+ gap: themeContract.space.md,
57
+ },
58
+ lg: {
59
+ gap: themeContract.space.lg,
60
+ },
26
61
  },
27
62
  },
28
- variant: {
29
- default: {
30
- flexDirection: 'column',
31
- gap: themeContract.space.sm,
32
- },
33
- actions: {
34
- flexDirection: 'row',
35
- alignItems: 'center',
36
- gap: themeContract.space.md,
37
- marginTop: themeContract.space.lg,
38
- },
39
- message: {
40
- flexDirection: 'column',
41
- padding: themeContract.space.md,
42
- backgroundColor: themeContract.colors.surface,
43
- borderRadius: themeContract.radii.md,
44
- border: `1px solid ${themeContract.colors.border}`,
45
- },
46
- },
47
- spacing: {
48
- none: {
49
- gap: 0,
50
- },
51
- sm: {
52
- gap: themeContract.space.sm,
53
- },
54
- md: {
55
- gap: themeContract.space.md,
56
- },
57
- lg: {
58
- gap: themeContract.space.lg,
59
- },
60
- },
61
- },
62
63
 
63
- defaultVariants: {
64
- align: 'left',
65
- variant: 'default',
66
- spacing: 'sm',
64
+ defaultVariants: {
65
+ align: 'left',
66
+ variant: 'default',
67
+ spacing: 'sm',
68
+ },
67
69
  },
68
- });
70
+ 'row'
71
+ );
69
72
 
70
73
  export type RowVariants = RecipeVariants<typeof rowRecipe>;