@latte-macchiat-io/latte-vanilla-components 0.0.205 → 0.0.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.205",
+  "version": "0.0.207",
   "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,8 @@ export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
     children: React.ReactNode;
   };
 
-export const Heading = ({ as, size, weight, align, className, children }: HeadingProps) => {
+export const Heading = ({ as, size, align, className, children }: HeadingProps) => {
   const Component = as as AllowedHeading;
 
-  return <Component className={clsx(headingRecipe({ size, weight, align }), className)}>{children}</Component>;
+  return <Component className={clsx(headingRecipe({ size, align }), className)}>{children}</Component>;
 };

package/src/components/Heading/stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Heading } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Heading> = {
+  title: 'Latte Components / 1. Global / Heading',
+  component: Heading,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: <>Title</>,
+  },
+};

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

@@ -1,7 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { sprinkles } from '../../styles/sprinkles.css';
+
 import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const headingRecipe = recipe({
   base: style({
@@ -11,41 +12,93 @@ export const headingRecipe = recipe({
   }),
 
   variants: {
-    size: {
-      h1: [
-        sprinkles({
-          fontSize: { mobile: '2xl', md: '3xl', lg: '4xl' },
-          lineHeight: { mobile: 'tight', md: 'tight', lg: 'tight' },
-        }),
-      ],
-      h2: sprinkles({
-        fontSize: { mobile: 'xl', md: '2xl', lg: '3xl' },
-        lineHeight: { mobile: 'tight', md: 'tight', lg: 'tight' },
-      }),
-      h3: sprinkles({
-        fontSize: { mobile: 'lg', md: 'xl', lg: '2xl' },
-        lineHeight: { mobile: 'normal', md: 'tight', lg: 'tight' },
-      }),
-      h4: sprinkles({
-        fontSize: { mobile: 'md', md: 'lg', lg: 'xl' },
-        lineHeight: { mobile: 'normal', md: 'normal', lg: 'tight' },
-      }),
-      h5: sprinkles({
-        fontSize: { mobile: 'sm', md: 'md', lg: 'lg' },
-        lineHeight: { mobile: 'normal', md: 'normal', lg: 'normal' },
-      }),
-      h6: sprinkles({
-        fontSize: { mobile: 'xs', md: 'sm', lg: 'md' },
-        lineHeight: { mobile: 'relaxed', md: 'normal', lg: 'normal' },
-      }),
+    level: {
+      h1: {
+        fontWeight: themeContract.heading.h1.fontWeight,
+        fontFamily: themeContract.heading.h1.fontFamily,
+      },
+
+      h2: {
+        fontWeight: themeContract.heading.h2.fontWeight,
+        fontFamily: themeContract.heading.h2.fontFamily,
+      },
+
+      h3: {
+        fontWeight: themeContract.heading.h3.fontWeight,
+        fontFamily: themeContract.heading.h3.fontFamily,
+      },
+
+      h4: {
+        fontWeight: themeContract.heading.h4.fontWeight,
+        fontFamily: themeContract.heading.h4.fontFamily,
+      },
+
+      h5: {
+        fontWeight: themeContract.heading.h5.fontWeight,
+        fontFamily: themeContract.heading.h5.fontFamily,
+      },
+
+      h6: {
+        fontWeight: themeContract.heading.h6.fontWeight,
+        fontFamily: themeContract.heading.h6.fontFamily,
+      },
     },
 
-    weight: {
-      light: { fontWeight: themeContract.fontWeights.light },
-      normal: { fontWeight: themeContract.fontWeights.normal },
-      medium: { fontWeight: themeContract.fontWeights.medium },
-      semibold: { fontWeight: themeContract.fontWeights.semibold },
-      bold: { fontWeight: themeContract.fontWeights.bold },
+    size: {
+      xxl: {
+        lineHeight: themeContract.heading.size.xxl.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.xxl.fontSize,
+            paddingBottom: themeContract.heading.size.xxl.fontSize,
+          }),
+        },
+      },
+      xl: {
+        lineHeight: themeContract.heading.size.xl.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.xl.fontSize,
+            paddingBottom: themeContract.heading.size.xl.fontSize,
+          }),
+        },
+      },
+      lg: {
+        lineHeight: themeContract.heading.size.lg.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.lg.fontSize,
+            paddingBottom: themeContract.heading.size.lg.fontSize,
+          }),
+        },
+      },
+      md: {
+        lineHeight: themeContract.heading.size.md.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.md.fontSize,
+            paddingBottom: themeContract.heading.size.md.fontSize,
+          }),
+        },
+      },
+      sm: {
+        lineHeight: themeContract.heading.size.sm.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.sm.fontSize,
+            paddingBottom: themeContract.heading.size.sm.fontSize,
+          }),
+        },
+      },
+      xs: {
+        lineHeight: themeContract.heading.size.xs.lineHeight,
+        '@media': {
+          ...generateResponsiveMedia({
+            fontSize: themeContract.heading.size.xs.fontSize,
+            paddingBottom: themeContract.heading.size.xs.fontSize,
+          }),
+        },
+      },
     },
 
     align: {
@@ -56,9 +109,9 @@ export const headingRecipe = recipe({
   },
 
   defaultVariants: {
-    size: 'h2',
+    size: 'xl',
+    level: 'h2',
     align: 'left',
-    weight: 'medium',
   },
 });
 

package/src/components/Heading/theme.ts

@@ -0,0 +1,84 @@
+const themeHeadingBase = {
+  heading: {
+    h1: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    h2: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    h3: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    h4: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    h5: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    h6: {
+      color: '',
+      fontWeight: '800',
+      fontFamily: `var(--font-outfit)`,
+    },
+
+    size: {
+      xxl: {
+        lineHeight: '1.2em',
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+      xl: {
+        lineHeight: '1.2em',
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+      lg: {
+        lineHeight: '1.2em',
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+      md: {
+        lineHeight: '1.2em',
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+      sm: {
+        lineHeight: '1.2em',
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+      xs: {
+        lineHeight: '1.2em',
+        fontSize: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+        paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
+      },
+    },
+  },
+};
+
+export const themeHeadingLight = {
+  heading: {
+    ...themeHeadingBase.heading,
+  },
+};
+
+export const themeHeadingDark = {
+  heading: {
+    ...themeHeadingBase.heading,
+  },
+};

package/src/theme/baseThemeValues.ts

@@ -4,6 +4,7 @@ import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/th
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
 import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
 import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
+import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
 import { themeIconDark, themeIconLight } from '../components/Icon/theme';
 import { themeKeyNumberDark, themeKeyNumberLight } from '../components/KeyNumber/theme';
 import { themeMainDark, themeMainLight } from '../components/Main/theme';
@@ -119,6 +120,7 @@ export const baseLightTheme = {
   },
 
   ...themeSectionLight,
+  ...themeHeadingLight,
 
   ...themeActionsLight,
   ...themeButtonLight,
@@ -243,6 +245,7 @@ export const baseDarkTheme = {
   },
 
   ...themeSectionDark,
+  ...themeHeadingDark,
 
   ...themeActionsDark,
   ...themeButtonDark,

package/src/theme/contract.css.ts

@@ -210,6 +210,155 @@ export const themeContract = createGlobalThemeContract({
     },
   },
 
+  heading: {
+    h1: {
+      color: 'latte-heading-h1-color',
+      fontWeight: 'latte-heading-h1-fontWeight',
+      fontFamily: 'latte-heading-h1-fontFamily',
+    },
+    h2: {
+      color: 'latte-heading-h2-color',
+      fontWeight: 'latte-heading-h2-fontWeight',
+      fontFamily: 'latte-heading-h2-fontFamily',
+    },
+    h3: {
+      color: 'latte-heading-h3-color',
+      fontWeight: 'latte-heading-h3-fontWeight',
+      fontFamily: 'latte-heading-h3-fontFamily',
+    },
+    h4: {
+      color: 'latte-heading-h4-color',
+      fontWeight: 'latte-heading-h4-fontWeight',
+      fontFamily: 'latte-heading-h4-fontFamily',
+    },
+    h5: {
+      color: 'latte-heading-h5-color',
+      fontWeight: 'latte-heading-h5-fontWeight',
+      fontFamily: 'latte-heading-h5-fontFamily',
+    },
+    h6: {
+      color: 'latte-heading-h6-color',
+      fontWeight: 'latte-heading-h6-fontWeight',
+      fontFamily: 'latte-heading-h6-fontFamily',
+    },
+    size: {
+      xxl: {
+        lineHeight: 'latte-heading-size-xxl-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-xxl-fontSize-mobile',
+          sm: 'latte-heading-size-xxl-fontSize--sm',
+          md: 'latte-heading-size-xxl-fontSize--md',
+          lg: 'latte-heading-size-xxl-fontSize--lg',
+          xl: 'latte-heading-size-xxl-fontSize--xl',
+          '2xl': 'latte-heading-size-xxl-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-xxl-paddingBottom-mobile',
+          sm: 'latte-heading-size-xxl-paddingBottom-sm',
+          md: 'latte-heading-size-xxl-paddingBottom-md',
+          lg: 'latte-heading-size-xxl-paddingBottom-lg',
+          xl: 'latte-heading-size-xxl-paddingBottom-xl',
+          '2xl': 'latte-heading-size-xxl-paddingBottom-2xl',
+        },
+      },
+      xl: {
+        lineHeight: 'latte-heading-size-xl-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-xl-fontSize-mobile',
+          sm: 'latte-heading-size-xl-fontSize--sm',
+          md: 'latte-heading-size-xl-fontSize--md',
+          lg: 'latte-heading-size-xl-fontSize--lg',
+          xl: 'latte-heading-size-xl-fontSize--xl',
+          '2xl': 'latte-heading-size-xl-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-xl-paddingBottom-mobile',
+          sm: 'latte-heading-size-xl-paddingBottom-sm',
+          md: 'latte-heading-size-xl-paddingBottom-md',
+          lg: 'latte-heading-size-xl-paddingBottom-lg',
+          xl: 'latte-heading-size-xl-paddingBottom-xl',
+          '2xl': 'latte-heading-size-xl-paddingBottom-2xl',
+        },
+      },
+      lg: {
+        lineHeight: 'latte-heading-size-lg-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-lg-fontSize-mobile',
+          sm: 'latte-heading-size-lg-fontSize--sm',
+          md: 'latte-heading-size-lg-fontSize--md',
+          lg: 'latte-heading-size-lg-fontSize--lg',
+          xl: 'latte-heading-size-lg-fontSize--xl',
+          '2xl': 'latte-heading-size-lg-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-lg-paddingBottom-mobile',
+          sm: 'latte-heading-size-lg-paddingBottom-sm',
+          md: 'latte-heading-size-lg-paddingBottom-md',
+          lg: 'latte-heading-size-lg-paddingBottom-lg',
+          xl: 'latte-heading-size-lg-paddingBottom-xl',
+          '2xl': 'latte-heading-size-lg-paddingBottom-2xl',
+        },
+      },
+      md: {
+        lineHeight: 'latte-heading-size-md-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-md-fontSize-mobile',
+          sm: 'latte-heading-size-md-fontSize--sm',
+          md: 'latte-heading-size-md-fontSize--md',
+          lg: 'latte-heading-size-md-fontSize--lg',
+          xl: 'latte-heading-size-md-fontSize--xl',
+          '2xl': 'latte-heading-size-md-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-md-paddingBottom-mobile',
+          sm: 'latte-heading-size-md-paddingBottom-sm',
+          md: 'latte-heading-size-md-paddingBottom-md',
+          lg: 'latte-heading-size-md-paddingBottom-lg',
+          xl: 'latte-heading-size-md-paddingBottom-xl',
+          '2xl': 'latte-heading-size-md-paddingBottom-2xl',
+        },
+      },
+      sm: {
+        lineHeight: 'latte-heading-size-sm-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-sm-fontSize-mobile',
+          sm: 'latte-heading-size-sm-fontSize--sm',
+          md: 'latte-heading-size-sm-fontSize--md',
+          lg: 'latte-heading-size-sm-fontSize--lg',
+          xl: 'latte-heading-size-sm-fontSize--xl',
+          '2xl': 'latte-heading-size-sm-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-sm-paddingBottom-mobile',
+          sm: 'latte-heading-size-sm-paddingBottom-sm',
+          md: 'latte-heading-size-sm-paddingBottom-md',
+          lg: 'latte-heading-size-sm-paddingBottom-lg',
+          xl: 'latte-heading-size-sm-paddingBottom-xl',
+          '2xl': 'latte-heading-size-sm-paddingBottom-2xl',
+        },
+      },
+      xs: {
+        lineHeight: 'latte-heading-size-xs-lineHeight',
+        fontSize: {
+          mobile: 'latte-heading-size-xs-fontSize-mobile',
+          sm: 'latte-heading-size-xs-fontSize--sm',
+          md: 'latte-heading-size-xs-fontSize--md',
+          lg: 'latte-heading-size-xs-fontSize--lg',
+          xl: 'latte-heading-size-xs-fontSize--xl',
+          '2xl': 'latte-heading-size-xs-fontSize--2xl',
+        },
+        paddingBottom: {
+          mobile: 'latte-heading-size-xs-paddingBottom-mobile',
+          sm: 'latte-heading-size-xs-paddingBottom-sm',
+          md: 'latte-heading-size-xs-paddingBottom-md',
+          lg: 'latte-heading-size-xs-paddingBottom-lg',
+          xl: 'latte-heading-size-xs-paddingBottom-xl',
+          '2xl': 'latte-heading-size-xs-paddingBottom-2xl',
+        },
+      },
+    },
+  },
+
   columns: {
     gap: {
       mobile: 'latte-columns-gap-mobile',

package/src/theme/createTheme.ts

@@ -20,6 +20,7 @@ export type ThemeOverrides = {
   button?: Partial<typeof baseLightTheme.button>;
   icon?: Partial<typeof baseLightTheme.icon>;
   columns?: Partial<typeof baseLightTheme.columns>;
+  heading?: Partial<typeof baseLightTheme.heading>;
   modal?: Partial<typeof baseLightTheme.modal>;
   keyNumber?: Partial<typeof baseLightTheme.keyNumber>;
   header?: Partial<typeof baseLightTheme.header>;
@@ -50,6 +51,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     button: { ...baseLightTheme.button, ...overrides.button },
     icon: { ...baseLightTheme.icon, ...overrides.icon },
     columns: { ...baseLightTheme.columns, ...overrides.columns },
+    heading: { ...baseLightTheme.heading, ...overrides.heading },
     modal: { ...baseLightTheme.modal, ...overrides.modal },
     keyNumber: { ...baseLightTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseLightTheme.header, ...overrides.header },
@@ -81,6 +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 },
     modal: { ...baseDarkTheme.modal, ...overrides.modal },
     keyNumber: { ...baseDarkTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseDarkTheme.header, ...overrides.header },