@latte-macchiat-io/latte-vanilla-components 0.0.249 → 0.0.251

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Header/theme.ts +1 -0
  3. package/src/components/Heading/styles.css.ts +6 -6
  4. package/src/components/Section/index.tsx +1 -3
  5. package/src/components/Section/styles.css.ts +1 -0
  6. package/src/components/Video/theme.ts +32 -0
  7. package/src/theme/contract.css.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.249",
3
+ "version": "0.0.251",
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/Header/theme.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  const themeHeaderBase = {
2
2
  header: {
3
+ isFixed: 'true',
3
4
  fontSize: '1.2em',
4
5
  height: {
5
6
  mobile: '15px',
package/src/components/Heading/styles.css.ts CHANGED
@@ -51,7 +51,7 @@ export const headingRecipe = recipe(
51
51
  '@media': {
52
52
  ...generateResponsiveMedia({
53
53
  fontSize: themeContract.heading.size.xxl.fontSize,
54
- paddingBottom: themeContract.heading.size.xxl.fontSize,
54
+ paddingBottom: themeContract.heading.size.xxl.paddingBottom,
55
55
  }),
56
56
  },
57
57
  },
@@ -60,7 +60,7 @@ export const headingRecipe = recipe(
60
60
  '@media': {
61
61
  ...generateResponsiveMedia({
62
62
  fontSize: themeContract.heading.size.xl.fontSize,
63
- paddingBottom: themeContract.heading.size.xl.fontSize,
63
+ paddingBottom: themeContract.heading.size.xl.paddingBottom,
64
64
  }),
65
65
  },
66
66
  },
@@ -69,7 +69,7 @@ export const headingRecipe = recipe(
69
69
  '@media': {
70
70
  ...generateResponsiveMedia({
71
71
  fontSize: themeContract.heading.size.lg.fontSize,
72
- paddingBottom: themeContract.heading.size.lg.fontSize,
72
+ paddingBottom: themeContract.heading.size.lg.paddingBottom,
73
73
  }),
74
74
  },
75
75
  },
@@ -78,7 +78,7 @@ export const headingRecipe = recipe(
78
78
  '@media': {
79
79
  ...generateResponsiveMedia({
80
80
  fontSize: themeContract.heading.size.md.fontSize,
81
- paddingBottom: themeContract.heading.size.md.fontSize,
81
+ paddingBottom: themeContract.heading.size.md.paddingBottom,
82
82
  }),
83
83
  },
84
84
  },
@@ -87,7 +87,7 @@ export const headingRecipe = recipe(
87
87
  '@media': {
88
88
  ...generateResponsiveMedia({
89
89
  fontSize: themeContract.heading.size.sm.fontSize,
90
- paddingBottom: themeContract.heading.size.sm.fontSize,
90
+ paddingBottom: themeContract.heading.size.sm.paddingBottom,
91
91
  }),
92
92
  },
93
93
  },
@@ -96,7 +96,7 @@ export const headingRecipe = recipe(
96
96
  '@media': {
97
97
  ...generateResponsiveMedia({
98
98
  fontSize: themeContract.heading.size.xs.fontSize,
99
- paddingBottom: themeContract.heading.size.xs.fontSize,
99
+ paddingBottom: themeContract.heading.size.xs.paddingBottom,
100
100
  }),
101
101
  },
102
102
  },
package/src/components/Section/index.tsx CHANGED
@@ -8,9 +8,7 @@ export type SectionProps = React.HTMLAttributes<HTMLDivElement> &
8
8
  };
9
9
 
10
10
  export const Section = ({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom, className, children, style }: SectionProps) => (
11
- <section
12
- style={style}
13
- className={clsx(sectionRecipe({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom, isHeaderFixed: true }), className)}>
11
+ <section style={style} className={clsx(sectionRecipe({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom }), className)}>
14
12
  <div className={sectionContent}>{children}</div>
15
13
  </section>
16
14
  );
package/src/components/Section/styles.css.ts CHANGED
@@ -106,6 +106,7 @@ export const sectionRecipe = recipe(
106
106
  align: 'left',
107
107
  isDark: false,
108
108
  isFullHeight: false,
109
+ isHeaderFixed: themeContract.header.isFixed ? true : false,
109
110
  withPaddingTop: true,
110
111
  withPaddingBottom: true,
111
112
  variant: 'transparent',
package/src/components/Video/theme.ts CHANGED
@@ -3,6 +3,14 @@ const themeVideoBase = {
3
3
  playButton: {
4
4
  border: 'none',
5
5
  borderRadius: '1000px',
6
+ iconSize: {
7
+ mobile: '50px',
8
+ sm: '50px',
9
+ md: '50px',
10
+ lg: '75px',
11
+ xl: '75px',
12
+ '2xl': '75px',
13
+ },
6
14
  iconColor: '#FF7377',
7
15
  backgroundColor: '#FF7377',
8
16
  width: {
@@ -25,6 +33,14 @@ const themeVideoBase = {
25
33
  pauseButton: {
26
34
  border: 'none',
27
35
  borderRadius: '1000px',
36
+ iconSize: {
37
+ mobile: '50px',
38
+ sm: '50px',
39
+ md: '50px',
40
+ lg: '75px',
41
+ xl: '75px',
42
+ '2xl': '75px',
43
+ },
28
44
  iconColor: '#FF7377',
29
45
  backgroundColor: '#FF7377',
30
46
  width: {
@@ -47,6 +63,14 @@ const themeVideoBase = {
47
63
  soundButton: {
48
64
  border: 'none',
49
65
  borderRadius: '1000px',
66
+ iconSize: {
67
+ mobile: '50px',
68
+ sm: '50px',
69
+ md: '50px',
70
+ lg: '75px',
71
+ xl: '75px',
72
+ '2xl': '75px',
73
+ },
50
74
  iconColor: '#FF7377',
51
75
  backgroundColor: '#FF7377',
52
76
  width: {
@@ -69,6 +93,14 @@ const themeVideoBase = {
69
93
  closeButton: {
70
94
  border: 'none',
71
95
  borderRadius: '1000px',
96
+ iconSize: {
97
+ mobile: '50px',
98
+ sm: '50px',
99
+ md: '50px',
100
+ lg: '75px',
101
+ xl: '75px',
102
+ '2xl': '75px',
103
+ },
72
104
  iconColor: '#FF7377',
73
105
  backgroundColor: '#FF7377',
74
106
  width: {
package/src/theme/contract.css.ts CHANGED
@@ -149,6 +149,7 @@ export const themeContract = createGlobalThemeContract({
149
149
  },
150
150
  },
151
151
  header: {
152
+ isFixed: 'latte-header-isFixed',
152
153
  fontSize: 'latte-header-fontSize',
153
154
  backgroundColor: 'latte-header-backgroundColor',
154
155
  height: {