@latte-macchiat-io/latte-vanilla-components 0.0.277 → 0.0.278

package/package.json

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

package/src/components/Paragraph/export.tsx

@@ -0,0 +1,2 @@
+export { Paragraph, type ParagraphProps } from '.';
+export { type ParagraphVariants } from './styles.css';

package/src/components/Paragraph/index.tsx

@@ -0,0 +1,12 @@
+import { clsx } from 'clsx';
+
+import { paragraphRecipe, type ParagraphVariants } from './styles.css';
+
+export type ParagraphProps = React.HTMLAttributes<HTMLDivElement> &
+  ParagraphVariants & {
+    children: React.ReactNode;
+  };
+
+export const Paragraph = ({ align, className, children }: ParagraphProps) => (
+  <p className={clsx(paragraphRecipe({ align }), className)}>{children}</p>
+);

package/src/components/Paragraph/stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Paragraph } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Paragraph> = {
+  title: 'Latte Components / 1. Global / Paragraph',
+  component: Paragraph,
+  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: <>Lorem ispum</>,
+  },
+};

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

@@ -0,0 +1,60 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const paragraphRecipe = recipe(
+  {
+    base: [
+      {
+        fontWeight: 300,
+
+        '@media': {
+          ...generateResponsiveMedia({
+            paddingBottom: themeContract.paragraph.paddingBottom,
+          }),
+        },
+      },
+    ],
+
+    variants: {
+      align: {
+        left: {
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+        },
+        center: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        right: {
+          alignItems: 'flex-end',
+          justifyContent: 'flex-end',
+        },
+      },
+    },
+
+    defaultVariants: {
+      align: 'left',
+    },
+  },
+  'actions'
+);
+
+globalStyle('p:last-of-type', {
+  paddingBottom: 0,
+});
+
+globalStyle('p + ul', {
+  paddingTop: 15,
+
+  '@media': {
+    [queries.sm]: {
+      paddingTop: 30,
+    },
+  },
+});
+
+export type ParagraphVariants = RecipeVariants<typeof paragraphRecipe>;

package/src/components/Paragraph/theme.ts

@@ -0,0 +1,24 @@
+const themeParagraphBase = {
+  paragraph: {
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeParagraphLight = {
+  paragraph: {
+    ...themeParagraphBase.paragraph,
+  },
+};
+
+export const themeParagraphDark = {
+  paragraph: {
+    ...themeParagraphBase.paragraph,
+  },
+};

package/src/theme/baseThemeValues.ts

@@ -15,6 +15,7 @@ import { themeModalDark, themeModalLight } from '../components/Modal/theme';
 import { themeNavDark, themeNavLight } from '../components/Nav/theme';
 import { themeNavLegalDark, themeNavLegalLight } from '../components/NavLegal/theme';
 import { themeNavSocialDark, themeNavSocialLight } from '../components/NavSocial/theme';
+import { themeParagraphDark, themeParagraphLight } from '../components/Paragraph/theme';
 import { themeSectionDark, themeSectionLight } from '../components/Section/theme';
 import { themeVideoDark, themeVideoLight } from '../components/Video/theme';
 
@@ -124,6 +125,7 @@ export const baseLightTheme = {
 
   ...themeSectionLight,
   ...themeHeadingLight,
+  ...themeParagraphLight,
 
   ...themeActionsLight,
   ...themeButtonLight,
@@ -255,6 +257,7 @@ export const baseDarkTheme = {
 
   ...themeSectionDark,
   ...themeHeadingDark,
+  ...themeParagraphDark,
 
   ...themeActionsDark,
   ...themeButtonDark,

package/src/theme/contract.css.ts

@@ -374,6 +374,17 @@ export const themeContract = createGlobalThemeContract({
     },
   },
 
+  paragraph: {
+    paddingBottom: {
+      mobile: 'latte-paragraph-paddingBottom-mobile',
+      sm: 'latte-paragraph-paddingBottom-sm',
+      md: 'latte-paragraph-paddingBottom-md',
+      lg: 'latte-paragraph-paddingBottom-lg',
+      xl: 'latte-paragraph-paddingBottom-xl',
+      '2xl': 'latte-paragraph-paddingBottom-2xl',
+    },
+  },
+
   columns: {
     gap: {
       mobile: 'latte-columns-gap-mobile',

package/src/theme/createTheme.ts

@@ -21,6 +21,7 @@ export type ThemeOverrides = {
   icon?: Partial<typeof baseLightTheme.icon>;
   columns?: Partial<typeof baseLightTheme.columns>;
   heading?: Partial<typeof baseLightTheme.heading>;
+  paragraph?: Partial<typeof baseLightTheme.paragraph>;
   modal?: Partial<typeof baseLightTheme.modal>;
   keyNumber?: Partial<typeof baseLightTheme.keyNumber>;
   header?: Partial<typeof baseLightTheme.header>;
@@ -53,6 +54,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     icon: { ...baseLightTheme.icon, ...overrides.icon },
     columns: { ...baseLightTheme.columns, ...overrides.columns },
     heading: { ...baseLightTheme.heading, ...overrides.heading },
+    paragraph: { ...baseLightTheme.paragraph, ...overrides.paragraph },
     modal: { ...baseLightTheme.modal, ...overrides.modal },
     keyNumber: { ...baseLightTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseLightTheme.header, ...overrides.header },
@@ -86,6 +88,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     icon: { ...baseDarkTheme.icon, ...overrides.icon },
     columns: { ...baseDarkTheme.columns, ...overrides.columns },
     heading: { ...baseDarkTheme.heading, ...overrides.heading },
+    paragraph: { ...baseDarkTheme.paragraph, ...overrides.paragraph },
     modal: { ...baseDarkTheme.modal, ...overrides.modal },
     keyNumber: { ...baseDarkTheme.keyNumber, ...overrides.keyNumber },
     header: { ...baseDarkTheme.header, ...overrides.header },