@latte-macchiat-io/latte-vanilla-components 0.0.210 → 0.0.212

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/Section/index.tsx +2 -2
  3. package/src/components/Section/stories.tsx +4 -4
  4. package/src/components/Section/styles.css.ts +3 -6
  5. package/src/components/Section/theme.ts +4 -10
  6. package/src/theme/contract.css.ts +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.210",
3
+ "version": "0.0.212",
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/Section/index.tsx CHANGED
@@ -7,8 +7,8 @@ export type SectionProps = React.HTMLAttributes<HTMLDivElement> &
7
7
  children: React.ReactNode;
8
8
  };
9
9
 
10
- export const Section = ({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom, className, children, style }: SectionProps) => (
11
- <section style={style} className={clsx(sectionRecipe({ align, isDark, isFullHeight, withPaddingTop, withPaddingBottom }), className)}>
10
+ export const Section = ({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom, className, children, style }: SectionProps) => (
11
+ <section style={style} className={clsx(sectionRecipe({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom }), className)}>
12
12
  <div className={sectionContent}>{children}</div>
13
13
  </section>
14
14
  );
package/src/components/Section/stories.tsx CHANGED
@@ -33,14 +33,14 @@ The Section component provides consistent spacing and layout for content section
33
33
  options: ['left', 'center', 'right'],
34
34
  description: 'Text alignment for the section content',
35
35
  },
36
- isDark: {
37
- control: 'boolean',
38
- description: 'Apply dark background styling',
39
- },
40
36
  isFullHeight: {
41
37
  control: 'boolean',
42
38
  description: 'Make the section take full viewport height',
43
39
  },
40
+ withPaddingTop: {
41
+ control: 'boolean',
42
+ description: '',
43
+ },
44
44
  },
45
45
  };
46
46
 
package/src/components/Section/styles.css.ts CHANGED
@@ -24,18 +24,15 @@ export const sectionRecipe = recipe({
24
24
 
25
25
  variants: {
26
26
  variant: {
27
- transparent: {
28
- color: themeContract.section.variant.transparent.color,
29
- backgroundColor: themeContract.section.variant.transparent.backgroundColor,
30
- },
31
27
  primary: {
32
- color: themeContract.section.variant.primary.color,
33
28
  backgroundColor: themeContract.section.variant.primary.backgroundColor,
34
29
  },
35
30
  secondary: {
36
- color: themeContract.section.variant.secondary.color,
37
31
  backgroundColor: themeContract.section.variant.secondary.backgroundColor,
38
32
  },
33
+ transparent: {
34
+ backgroundColor: themeContract.section.variant.transparent.backgroundColor,
35
+ },
39
36
  },
40
37
 
41
38
  align: {
package/src/components/Section/theme.ts CHANGED
@@ -9,10 +9,10 @@ const themeSectionBase = {
9
9
  '2xl': '50px',
10
10
  },
11
11
  paddingTop: {
12
- mobile: '15px',
13
- sm: '15px',
14
- md: '30px',
15
- lg: '30px',
12
+ mobile: '50px',
13
+ sm: '50px',
14
+ md: '50px',
15
+ lg: '50px',
16
16
  xl: '50px',
17
17
  '2xl': '50px',
18
18
  },
@@ -33,15 +33,12 @@ export const themeSectionLight = {
33
33
 
34
34
  variant: {
35
35
  transparent: {
36
- color: '',
37
36
  backgroundColor: '',
38
37
  },
39
38
  primary: {
40
- color: '',
41
39
  backgroundColor: '',
42
40
  },
43
41
  secondary: {
44
- color: '',
45
42
  backgroundColor: '',
46
43
  },
47
44
  },
@@ -54,15 +51,12 @@ export const themeSectionDark = {
54
51
 
55
52
  variant: {
56
53
  transparent: {
57
- color: '',
58
54
  backgroundColor: '',
59
55
  },
60
56
  primary: {
61
- color: '',
62
57
  backgroundColor: '',
63
58
  },
64
59
  secondary: {
65
- color: '',
66
60
  backgroundColor: '',
67
61
  },
68
62
  },
package/src/theme/contract.css.ts CHANGED
@@ -114,15 +114,12 @@ export const themeContract = createGlobalThemeContract({
114
114
  section: {
115
115
  variant: {
116
116
  transparent: {
117
- color: 'latte-section-variant-transparent-color',
118
117
  backgroundColor: 'latte-section-variant-transparent-backgroundColor',
119
118
  },
120
119
  primary: {
121
- color: 'latte-section-variant-primary-color',
122
120
  backgroundColor: 'latte-section-variant-primary-backgroundColor',
123
121
  },
124
122
  secondary: {
125
- color: 'latte-section-variant-secondary-color',
126
123
  backgroundColor: 'latte-section-variant-secondary-backgroundColor',
127
124
  },
128
125
  },