@latte-macchiat-io/latte-vanilla-components 0.0.206 → 0.0.208

package/package.json

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

package/src/components/Heading/index.tsx

@@ -9,8 +9,18 @@ export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
     children: React.ReactNode;
   };
 
+const levelToSize: Record<AllowedHeading, NonNullable<HeadingProps['size']>> = {
+  h1: 'xxl',
+  h2: 'xl',
+  h3: 'lg',
+  h4: 'md',
+  h5: 'sm',
+  h6: 'xs',
+};
+
 export const Heading = ({ as, size, align, className, children }: HeadingProps) => {
-  const Component = as as AllowedHeading;
+  const Component = as;
+  const resolvedSize = size ?? levelToSize[as];
 
-  return <Component className={clsx(headingRecipe({ size, align }), className)}>{children}</Component>;
+  return <Component className={clsx(headingRecipe({ size: resolvedSize, align, as }), className)}>{children}</Component>;
 };

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

@@ -12,7 +12,7 @@ export const headingRecipe = recipe({
   }),
 
   variants: {
-    level: {
+    as: {
       h1: {
         fontWeight: themeContract.heading.h1.fontWeight,
         fontFamily: themeContract.heading.h1.fontFamily,
@@ -109,8 +109,8 @@ export const headingRecipe = recipe({
   },
 
   defaultVariants: {
+    as: 'h2',
     size: 'xl',
-    level: 'h2',
     align: 'left',
   },
 });

package/src/components/Heading/theme.ts

@@ -1,41 +1,39 @@
-import { themeContract } from '../../theme/contract.css';
-
 const themeHeadingBase = {
   heading: {
     h1: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.heading,
+      fontFamily: `var(--font-outfit)`,
     },
 
     h2: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.heading,
+      fontFamily: `var(--font-outfit)`,
     },
 
     h3: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.heading,
+      fontFamily: `var(--font-outfit)`,
     },
 
     h4: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.heading,
+      fontFamily: `var(--font-outfit)`,
     },
 
     h5: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.body,
+      fontFamily: `var(--font-outfit)`,
     },
 
     h6: {
       color: '',
       fontWeight: '800',
-      fontFamily: themeContract.fonts.body,
+      fontFamily: `var(--font-outfit)`,
     },
 
     size: {