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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.251",
+  "version": "0.0.253",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Section/index.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 
 import { sectionContent, sectionRecipe, type SectionVariants } from './styles.css';
+import { themeContract } from '../../theme/contract.css';
 
 export type SectionProps = React.HTMLAttributes<HTMLDivElement> &
   SectionVariants & {
@@ -8,7 +9,9 @@ export type SectionProps = React.HTMLAttributes<HTMLDivElement> &
   };
 
 export const Section = ({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom, className, children, style }: SectionProps) => (
-  <section style={style} className={clsx(sectionRecipe({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom }), className)}>
+  <section
+    style={style}
+    className={clsx(sectionRecipe({ align, isDark, variant, isFullHeight, withPaddingTop, withPaddingBottom, isHeaderFixed: true }), className)}>
     <div className={sectionContent}>{children}</div>
   </section>
 );

package/src/components/Section/styles.css.ts

@@ -106,7 +106,7 @@ export const sectionRecipe = recipe(
       align: 'left',
       isDark: false,
       isFullHeight: false,
-      isHeaderFixed: themeContract.header.isFixed ? true : false,
+      isHeaderFixed: false,
       withPaddingTop: true,
       withPaddingBottom: true,
       variant: 'transparent',

package/src/theme/contract.css.ts

@@ -97,12 +97,12 @@ export const themeContract = createGlobalThemeContract({
       '2xl': 'latte-global-paddingLeft-2xl',
     },
     paddingLeftNeg: {
-      mobile: 'latte-global-paddingLefttNeg-mobile',
-      sm: 'latte-global-paddingLefttNeg-sm',
-      md: 'latte-global-paddingLefttNeg-md',
-      lg: 'latte-global-paddingLefttNeg-lg',
-      xl: 'latte-global-paddingLefttNeg-xl',
-      '2xl': 'latte-global-paddingLefttNeg-2xl',
+      mobile: 'latte-global-paddingLeftNeg-mobile',
+      sm: 'latte-global-paddingLeftNeg-sm',
+      md: 'latte-global-paddingLeftNeg-md',
+      lg: 'latte-global-paddingLeftNeg-lg',
+      xl: 'latte-global-paddingLeftNeg-xl',
+      '2xl': 'latte-global-paddingLeftNeg-2xl',
     },
   },
 
@@ -581,7 +581,7 @@ export const themeContract = createGlobalThemeContract({
     },
     paddingTop: {
       mobile: 'latte-modal-paddingTop-mobile',
-      sm: 'latte-modal-gpaddingTopap-sm',
+      sm: 'latte-modal-paddingTopap-sm',
       md: 'latte-modal-paddingTop-md',
       lg: 'latte-modal-paddingTop-lg',
       xl: 'latte-modal-paddingTop-xl',
@@ -733,12 +733,12 @@ export const themeContract = createGlobalThemeContract({
         '2xl': 'latte-video-soundButton-width-2xl',
       },
       height: {
-        mobile: 'latte-video-closeButton-height-mobile',
-        sm: 'latte-video-closeButton-height-sm',
-        md: 'latte-video-closeButton-height-md',
-        lg: 'latte-video-closeButton-height-lg',
-        xl: 'latte-video-closeButton-height-xl',
-        '2xl': 'latte-video-closeButton-height-2xl',
+        mobile: 'latte-video-soundButton-height-mobile',
+        sm: 'latte-video-soundButton-height-sm',
+        md: 'latte-video-soundButton-height-md',
+        lg: 'latte-video-soundButton-height-lg',
+        xl: 'latte-video-soundButton-height-xl',
+        '2xl': 'latte-video-soundButton-height-2xl',
       },
       iconSize: {
         mobile: 'latte-video-soundButton-iconSize-mobile',

package/src/theme/createTheme.ts

@@ -83,7 +83,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     button: { ...baseDarkTheme.button, ...overrides.button },
     icon: { ...baseDarkTheme.icon, ...overrides.icon },
     columns: { ...baseDarkTheme.columns, ...overrides.columns },
-    heading: { ...baseLightTheme.heading, ...overrides.heading },
+    heading: { ...baseDarkTheme.heading, ...overrides.heading },
     modal: { ...baseDarkTheme.modal, ...overrides.modal },
     keyNumber: { ...baseDarkTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseDarkTheme.header, ...overrides.header },