@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.
- package/package.json +1 -1
- package/src/components/Actions/styles.css.ts +42 -39
- package/src/components/Button/styles.css.ts +106 -103
- package/src/components/Carousel/styles.css.ts +140 -116
- package/src/components/Columns/styles.css.ts +32 -29
- package/src/components/ConsentCookie/styles.css.ts +134 -123
- package/src/components/Form/Form.css.ts +50 -47
- package/src/components/Form/Row/Row.css.ts +55 -52
- package/src/components/Form/TextField/Input/Input.css.ts +44 -41
- package/src/components/Form/TextField/Label/Label.css.ts +50 -44
- package/src/components/Form/TextField/TextField.css.ts +38 -35
- package/src/components/Form/TextField/Textarea/Textarea.css.ts +102 -96
- package/src/components/Header/HeaderToggleNav/styles.css.ts +35 -29
- package/src/components/Header/index.tsx +1 -1
- package/src/components/Header/styles.css.ts +88 -76
- package/src/components/Heading/styles.css.ts +94 -91
- package/src/components/KeyNumber/styles.css.ts +60 -54
- package/src/components/LanguageSwitcher/styles.css.ts +112 -100
- package/src/components/Modal/styles.css.ts +77 -68
- package/src/components/Nav/styles.css.ts +22 -19
- package/src/components/NavLegal/styles.css.ts +16 -13
- package/src/components/NavSocial/styles.css.ts +21 -15
- package/src/components/Section/styles.css.ts +105 -99
- package/src/components/ThemeToggle/styles.css.ts +11 -8
- package/src/components/Video/styles.css.ts +163 -139
|
@@ -2,119 +2,131 @@ 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 languageSwitcherBase = style(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const languageSwitcherBase = style(
|
|
6
|
+
{
|
|
7
|
+
position: 'relative',
|
|
8
|
+
display: 'inline-flex',
|
|
9
|
+
alignItems: 'center',
|
|
10
|
+
},
|
|
11
|
+
'lang-switcher-base'
|
|
12
|
+
);
|
|
10
13
|
|
|
11
|
-
const languageSwitcherSelect = style(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
const languageSwitcherSelect = style(
|
|
15
|
+
{
|
|
16
|
+
appearance: 'none',
|
|
17
|
+
background: 'transparent',
|
|
18
|
+
border: `1px solid ${themeContract.colors.border}`,
|
|
19
|
+
borderRadius: themeContract.radii.md,
|
|
20
|
+
padding: `${themeContract.space.sm} ${themeContract.space.md}`,
|
|
21
|
+
paddingRight: themeContract.space.xl,
|
|
22
|
+
fontSize: themeContract.fontSizes.sm,
|
|
23
|
+
fontFamily: themeContract.fonts.body,
|
|
24
|
+
color: themeContract.colors.text,
|
|
25
|
+
cursor: 'pointer',
|
|
26
|
+
transition: 'all 0.3s ease-in-out',
|
|
27
|
+
minWidth: '120px',
|
|
24
28
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
// ':hover': {
|
|
30
|
+
// borderColor: themeContract.colors.primary,
|
|
31
|
+
// backgroundColor: themeContract.colors.surface,
|
|
32
|
+
// },
|
|
29
33
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
// ':focus': {
|
|
35
|
+
// outline: '2px solid',
|
|
36
|
+
// outlineColor: themeContract.colors.primary,
|
|
37
|
+
// outlineOffset: '2px',
|
|
38
|
+
// borderColor: themeContract.colors.primary,
|
|
39
|
+
// },
|
|
36
40
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
41
|
+
// ':disabled': {
|
|
42
|
+
// opacity: '0.5',
|
|
43
|
+
// cursor: 'not-allowed',
|
|
44
|
+
// },
|
|
45
|
+
},
|
|
46
|
+
'lang-switcher-select'
|
|
47
|
+
);
|
|
42
48
|
|
|
43
|
-
const languageSwitcherIcon = style(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
const languageSwitcherIcon = style(
|
|
50
|
+
{
|
|
51
|
+
position: 'absolute',
|
|
52
|
+
right: themeContract.space.sm,
|
|
53
|
+
top: '50%',
|
|
54
|
+
transform: 'translateY(-50%)',
|
|
55
|
+
pointerEvents: 'none',
|
|
56
|
+
color: themeContract.colors.textSecondary,
|
|
57
|
+
transition: 'transform 0.2s ease-in-out',
|
|
51
58
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
+
// selectors: {
|
|
60
|
+
// [`${languageSwitcherSelect}:focus + &`]: {
|
|
61
|
+
// color: themeContract.colors.primary,
|
|
62
|
+
// transform: 'translateY(-50%) rotate(180deg)',
|
|
63
|
+
// },
|
|
64
|
+
// },
|
|
65
|
+
},
|
|
66
|
+
'lang-switcher-icon'
|
|
67
|
+
);
|
|
59
68
|
|
|
60
|
-
export const languageSwitcherRecipe = recipe(
|
|
61
|
-
|
|
69
|
+
export const languageSwitcherRecipe = recipe(
|
|
70
|
+
{
|
|
71
|
+
base: languageSwitcherBase,
|
|
62
72
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
73
|
+
variants: {
|
|
74
|
+
variant: {
|
|
75
|
+
default: {},
|
|
76
|
+
minimal: {
|
|
77
|
+
// selectors: {
|
|
78
|
+
// [`& .${languageSwitcherSelect}`]: {
|
|
79
|
+
// border: 'none',
|
|
80
|
+
// borderRadius: 0,
|
|
81
|
+
// borderBottom: `1px solid ${themeContract.colors.border}`,
|
|
82
|
+
// paddingLeft: 0,
|
|
83
|
+
// paddingRight: themeContract.space.lg,
|
|
84
|
+
// backgroundColor: 'transparent',
|
|
85
|
+
// },
|
|
86
|
+
// },
|
|
87
|
+
},
|
|
88
|
+
outlined: {},
|
|
89
|
+
filled: {
|
|
90
|
+
// selectors: {
|
|
91
|
+
// [`& .${languageSwitcherSelect}`]: {
|
|
92
|
+
// backgroundColor: themeContract.colors.surface,
|
|
93
|
+
// border: 'none',
|
|
94
|
+
// },
|
|
95
|
+
// },
|
|
96
|
+
},
|
|
86
97
|
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
98
|
+
size: {
|
|
99
|
+
sm: {
|
|
100
|
+
// selectors: {
|
|
101
|
+
// [`& .${languageSwitcherSelect}`]: {
|
|
102
|
+
// padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
|
|
103
|
+
// paddingRight: themeContract.space.lg,
|
|
104
|
+
// fontSize: themeContract.fontSizes.xs,
|
|
105
|
+
// minWidth: '100px',
|
|
106
|
+
// },
|
|
107
|
+
// },
|
|
108
|
+
},
|
|
109
|
+
md: {},
|
|
110
|
+
lg: {
|
|
111
|
+
// selectors: {
|
|
112
|
+
// [`& .${languageSwitcherSelect}`]: {
|
|
113
|
+
// padding: `${themeContract.space.md} ${themeContract.space.lg}`,
|
|
114
|
+
// paddingRight: '48px',
|
|
115
|
+
// fontSize: themeContract.fontSizes.md,
|
|
116
|
+
// minWidth: '140px',
|
|
117
|
+
// },
|
|
118
|
+
// },
|
|
119
|
+
},
|
|
109
120
|
},
|
|
110
121
|
},
|
|
111
|
-
},
|
|
112
122
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
123
|
+
defaultVariants: {
|
|
124
|
+
variant: 'default',
|
|
125
|
+
size: 'md',
|
|
126
|
+
},
|
|
116
127
|
},
|
|
117
|
-
|
|
128
|
+
'lang-switcher'
|
|
129
|
+
);
|
|
118
130
|
|
|
119
131
|
export { languageSwitcherSelect, languageSwitcherIcon };
|
|
120
132
|
export type LanguageSwitcherVariants = RecipeVariants<typeof languageSwitcherRecipe>;
|
|
@@ -4,87 +4,96 @@ import { recipe, type 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 modal = style(
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export const modal = style(
|
|
8
|
+
{
|
|
9
|
+
zIndex: 100,
|
|
10
|
+
position: 'fixed',
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
selectors: {
|
|
13
|
+
'&:before': {
|
|
14
|
+
top: 0,
|
|
15
|
+
left: 0,
|
|
16
|
+
right: 0,
|
|
17
|
+
bottom: 0,
|
|
18
|
+
content: "''",
|
|
19
|
+
position: 'fixed',
|
|
20
|
+
backdropFilter: `blur(${themeContract.modal.overlayBlur})`,
|
|
21
|
+
backgroundColor: themeContract.modal.overlayBackgroundColor,
|
|
22
|
+
},
|
|
21
23
|
},
|
|
22
24
|
},
|
|
23
|
-
|
|
25
|
+
'modal'
|
|
26
|
+
);
|
|
24
27
|
|
|
25
|
-
export const modalContentRecipe = recipe(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
export const modalContentRecipe = recipe(
|
|
29
|
+
{
|
|
30
|
+
base: [
|
|
31
|
+
{
|
|
32
|
+
top: '50%',
|
|
33
|
+
left: '50%',
|
|
34
|
+
display: 'flex',
|
|
35
|
+
position: 'fixed',
|
|
36
|
+
flexDirection: 'column',
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
color: themeContract.colors.text,
|
|
39
|
+
transform: 'translate(-50%, -50%)',
|
|
40
|
+
borderRadius: themeContract.modal.borderRadius,
|
|
41
|
+
backgroundColor: themeContract.modal.backgroundColor,
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
43
|
+
'@media': {
|
|
44
|
+
...generateResponsiveMedia({
|
|
45
|
+
gap: themeContract.modal.gap,
|
|
46
|
+
width: themeContract.modal.width,
|
|
47
|
+
maxWidth: {
|
|
48
|
+
mobile: `calc(100% - ${themeContract.global.paddingLeft.mobile} - ${themeContract.global.paddingRight.mobile})`,
|
|
49
|
+
sm: `calc(100% - ${themeContract.global.paddingLeft.sm} - ${themeContract.global.paddingRight.sm})`,
|
|
50
|
+
md: `calc(100% - ${themeContract.global.paddingLeft.md} - ${themeContract.global.paddingRight.md})`,
|
|
51
|
+
lg: `calc(100% - ${themeContract.global.paddingLeft.lg} - ${themeContract.global.paddingRight.lg})`,
|
|
52
|
+
xl: `calc(100% - ${themeContract.global.paddingLeft.xl} - ${themeContract.global.paddingRight.xl})`,
|
|
53
|
+
'2xl': `calc(100% - ${themeContract.global.paddingLeft['2xl']} - ${themeContract.global.paddingRight['2xl']})`,
|
|
54
|
+
},
|
|
55
|
+
paddingTop: themeContract.modal.paddingTop,
|
|
56
|
+
paddingLeft: themeContract.global.paddingLeft,
|
|
57
|
+
paddingRight: themeContract.global.paddingRight,
|
|
58
|
+
paddingBottom: themeContract.modal.paddingBottom,
|
|
59
|
+
}),
|
|
60
|
+
},
|
|
56
61
|
},
|
|
57
|
-
|
|
58
|
-
],
|
|
62
|
+
],
|
|
59
63
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
variants: {
|
|
65
|
+
align: {
|
|
66
|
+
left: { alignItems: 'flex-start' },
|
|
67
|
+
center: { alignItems: 'center' },
|
|
68
|
+
right: { alignItems: 'flex-end' },
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
align: 'center',
|
|
65
73
|
},
|
|
66
74
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
},
|
|
70
|
-
});
|
|
75
|
+
'modal-content'
|
|
76
|
+
);
|
|
71
77
|
|
|
72
|
-
export const modalContentCloseButton = style(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
export const modalContentCloseButton = style(
|
|
79
|
+
[
|
|
80
|
+
{
|
|
81
|
+
border: 0,
|
|
82
|
+
lineHeight: '1em',
|
|
83
|
+
cursor: 'pointer',
|
|
84
|
+
position: 'absolute',
|
|
78
85
|
|
|
79
|
-
|
|
86
|
+
maxWidth: themeContract.maxWidth,
|
|
80
87
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
88
|
+
'@media': {
|
|
89
|
+
...generateResponsiveMedia({
|
|
90
|
+
top: themeContract.modal.closeButtonTopPosition,
|
|
91
|
+
right: themeContract.modal.closeButtonRightPosition,
|
|
92
|
+
}),
|
|
93
|
+
},
|
|
86
94
|
},
|
|
87
|
-
|
|
88
|
-
|
|
95
|
+
],
|
|
96
|
+
'modal-content-close-button'
|
|
97
|
+
);
|
|
89
98
|
|
|
90
99
|
export type ModalVariants = RecipeVariants<typeof modalContentRecipe>;
|
|
@@ -3,30 +3,33 @@ 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 navRecipe = recipe(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
export const navRecipe = recipe(
|
|
7
|
+
{
|
|
8
|
+
base: [
|
|
9
|
+
{
|
|
10
|
+
display: 'flex',
|
|
11
|
+
flexDirection: 'column',
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
'@media': {
|
|
14
|
+
...generateResponsiveMedia({
|
|
15
|
+
gap: themeContract.nav.gap,
|
|
16
|
+
}),
|
|
17
|
+
},
|
|
16
18
|
},
|
|
17
|
-
|
|
18
|
-
],
|
|
19
|
+
],
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
variants: {
|
|
22
|
+
direction: {
|
|
23
|
+
row: { flexDirection: 'row' },
|
|
24
|
+
column: { flexDirection: 'column' },
|
|
25
|
+
},
|
|
24
26
|
},
|
|
25
|
-
},
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
direction: 'column',
|
|
30
|
+
},
|
|
29
31
|
},
|
|
30
|
-
|
|
32
|
+
'nav'
|
|
33
|
+
);
|
|
31
34
|
|
|
32
35
|
export type NavVariants = RecipeVariants<typeof navRecipe>;
|
|
@@ -4,17 +4,20 @@ import { recipe } from '@vanilla-extract/recipes';
|
|
|
4
4
|
import { themeContract } from '../../theme/contract.css';
|
|
5
5
|
import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
|
|
6
6
|
|
|
7
|
-
export const navLegalRecipe = recipe(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
export const navLegalRecipe = recipe(
|
|
8
|
+
{
|
|
9
|
+
base: [
|
|
10
|
+
style({
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'row',
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
14
|
+
'@media': {
|
|
15
|
+
...generateResponsiveMedia({
|
|
16
|
+
gap: themeContract.navLegal.gap,
|
|
17
|
+
}),
|
|
18
|
+
},
|
|
19
|
+
}),
|
|
20
|
+
],
|
|
21
|
+
},
|
|
22
|
+
'nav-legal'
|
|
23
|
+
);
|
|
@@ -4,24 +4,30 @@ import { recipe } from '@vanilla-extract/recipes';
|
|
|
4
4
|
import { themeContract } from '../../theme/contract.css';
|
|
5
5
|
import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
|
|
6
6
|
|
|
7
|
-
export const navSocialRecipe = recipe(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
export const navSocialRecipe = recipe(
|
|
8
|
+
{
|
|
9
|
+
base: [
|
|
10
|
+
{
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'row',
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
'@media': {
|
|
15
|
+
...generateResponsiveMedia({
|
|
16
|
+
gap: themeContract.navSocial.gap,
|
|
17
|
+
}),
|
|
18
|
+
},
|
|
17
19
|
},
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
],
|
|
21
|
+
},
|
|
22
|
+
'nav-social'
|
|
23
|
+
);
|
|
21
24
|
|
|
22
|
-
export const navSocialLink = style(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
export const navSocialLink = style(
|
|
26
|
+
{
|
|
27
|
+
padding: 10,
|
|
28
|
+
},
|
|
29
|
+
'nav-social-link'
|
|
30
|
+
);
|
|
25
31
|
|
|
26
32
|
globalStyle(`${navSocialLink} svg path`, {
|
|
27
33
|
transition: themeContract.navSocial.transition,
|