feat(Typography): add global typography CSS styles (#388)

packages/bee-q/.storybook/main.ts

@@ -24,7 +24,7 @@ const config: StorybookConfig = {
     buildStoriesJson: true,
   },
   framework: '@storybook/web-components-vite',
-  stories: ['../src/**/*.stories.@(mdx|ts|tsx)'],
+  stories: ['../src/_storybook/**/*.mdx', '../src/**/*.stories.@(mdx|ts|tsx)'],
   staticDirs: ['../../../dist/bee-q/www', { from: '../../../dist/bee-q/dist/bee-q', to: '/bee-q' }],
   viteFinal: async (config: InlineConfig, { configType }) => {
     // Add your own config tweaks if needed and return the modified config

packages/bee-q/src/_storybook/foundation/typography.mdx

@@ -0,0 +1,343 @@
+import { Canvas, Meta, Source, Typeset } from '@storybook/blocks';
+
+<Meta title="Foundation/Typography" />
+
+export const typography = {
+  type: {
+    primary: '"Outfit", sans-serif',
+  },
+  weight: {
+    regular: '400',
+    semibold: '500',
+    bold: '700',
+  },
+  size: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 20,
+    xl: 24,
+    xxl: 32,
+    xxl2: 40,
+    xxl3: 48,
+    xxl4: 56,
+    xxl5: 64,
+  },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typography
+
+Typography is an essential part of any design system, and it's important to understand the different types of typography and how to use them effectively.
+
+BEEQ uses the Outfit font, a versatile and modern typeface that caters to a wide range of typographical needs.
+
+**Font:** [Outfit](https://fonts.google.com/specimen/Outfit)
+
+The Outfit font is carefully selected for its excellent legibility, adaptability, and aesthetic appeal, ensuring a cohesive and visually pleasing user experience.
+
+# Built-in typography classes
+
+- [Display](#display)
+- [H1](#h1)
+- [H2](#h2)
+- [H3](#h3)
+- [H4](#h4)
+- [H5](#h5)
+- [H6](#h6)
+- [Body](#body)
+- [Caption](#caption)
+- [Overline](#overline)
+
+## Display
+
+Display typography is used for headlines, titles, and other large text elements that are meant to grab the reader's attention.
+It is often used for special announcements, promotions, or other important messages that need to stand out from the rest of the content on the page.
+To use the display font, add the `display` class to the element (recommended to be a `<h1>` HTML element).
+
+<Source dark format="dedent" language="html" code={`<h1 class="display">${SampleText}</h1>`} />
+
+<div class="rounded-xs border border-solid border-stroke-success bg-ui-success-light p-m">
+**💡 NOTE:**
+
+In addition to the `.display` class, you can also add the `.semibold` or `.bold` classes to change the font weight of the text.
+The `.semibold` class is a lighter weight than the `.bold` class, but still provides a noticeable difference in weight.
+**It applies to all headings, not just the display heading.**
+
+</div>
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl5)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl5)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl5)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H1
+
+The H1 heading is typically used as the main heading of a page or section, and should be visually distinct from other headings on the page.
+It is usually the largest and most prominent heading on the page, and is often used to introduce the main topic or purpose of the page.
+
+To set a H1 heading, you can use the native `h1` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h1>${SampleText}</h1>`} />
+or the `.h1` class:
+<Source dark format="dedent" language="html" code={`<p class="h1">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl4)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl4)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl4)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H2
+
+The H2 heading is often used to introduce a new topic or section, and can be used to break up long blocks of text into more manageable sections.
+It should be visually distinct from other headings on the page, and is usually the second largest and most prominent heading on the page.
+
+To set a H1 heading, you can use the native `h2` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h2>${SampleText}</h2>`} />
+or the `.h2` class:
+<Source dark format="dedent" language="html" code={`<p class="h2">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl3)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl3)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl3)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H3
+
+The H3 heading is used to introduce subtopics or sections within a larger topic.
+It should be visually distinct from other headings on the page, and is usually smaller than the H2 heading.
+
+To set a H1 heading, you can use the native `h3` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h3>${SampleText}</h3>`} />
+or the `.h3` class:
+<Source dark format="dedent" language="html" code={`<p class="h3">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl2)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl2)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl2)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H4
+
+The H4 heading is used to introduce subtopics or sections within a larger topic.
+It should be visually distinct from other headings on the page, and is usually smaller than the H3 heading.
+
+To set a H1 heading, you can use the native `h4` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h4>${SampleText}</h4>`} />
+or the `.h4` class:
+<Source dark format="dedent" language="html" code={`<p class="h4">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xxl)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H5
+
+The H5 heading is used to introduce subtopics or sections within a larger topic.
+It should be visually distinct from other headings on the page, and is usually smaller than the H4 heading.
+
+To set a H1 heading, you can use the native `h5` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h5>${SampleText}</h5>`} />
+or the `.h5` class:
+<Source dark format="dedent" language="html" code={`<p class="h5">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xl)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xl)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xl)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## H6
+
+The H6 heading is used to introduce subtopics or sections within a larger topic.
+It should be visually distinct from other headings on the page, and is usually smaller than the H5 heading.
+
+To set a H1 heading, you can use the native `h6` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<h6>${SampleText}</h6>`} />
+or the `.h6` class:
+<Source dark format="dedent" language="html" code={`<p class="h6">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.l)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.l)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.l)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+
+## Body
+
+The body text is used for the main content of a page, and should be visually distinct from other headings on the page.
+
+<div class="rounded-xs border border-solid border-stroke-warning bg-ui-warning-light p-m">
+  ❗️ BEEQ set by default the body styles in the global CSS, so **you don't need to add any class to use it**.
+</div>
+
+<Source dark format="dedent" language="html" code={`<p>${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.m)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+
+## Caption
+
+The caption element is used to provide a short description or explanation about an image or other visual element.
+It is typically used in conjunction with the figure element, which contains the visual element being described.
+
+To set a caption, you can use the native `figcaption` HTML tag:
+
+<Source dark format="dedent" language="html" code={`<figcaption>${SampleText}</figcaption>`} />
+or the `.caption` class:
+<Source dark format="dedent" language="html" code={`<p class="caption">${SampleText}</p>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.s)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.s)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.s)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>
+
+## Overline
+
+To set a overline, you can use the `.overline` CSS class:
+
+<Source dark format="dedent" language="html" code={`<span class="overline">${SampleText}</span>`} />
+
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xs)]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xs)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleText}
+/>
+<Typeset
+  fontFamily={typography.type.primary}
+  fontSizes={[Number(typography.size.xs)]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+/>

packages/bee-q/src/components/badge/bq-badge.tsx

@@ -130,7 +130,7 @@ export class BqBadge {
           }}
           part="base"
         >
-          <span ref={(element) => (this.spanElement = element)} class="text-xs font-bold leading-regular" part="number">
+          <span ref={(element) => (this.spanElement = element)} class="text-xs font-bold leading-small" part="number">
             <slot onSlotchange={this.onSlotChange}></slot>
           </span>
         </div>

packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss

@@ -24,7 +24,7 @@
 
   --bq-breadcrumb-item--background: theme('colors.transparent');
   --bq-breadcrumb-item--font-size: theme('fontSize.s');
-  --bq-breadcrumb-item--line-height: theme('lineHeight.large');
+  --bq-breadcrumb-item--line-height: theme('lineHeight.regular');
 
   --bq-breadcrumb-item--border-color: theme('colors.transparent');
   --bq-breadcrumb-item--border-style: none;

packages/bee-q/src/components/button/scss/bq-button.scss

@@ -7,7 +7,7 @@
 @layer components {
   // Common button base style
   .bq-button {
-    @apply box-border flex cursor-[inherit] items-center justify-center rounded-m border-2 border-solid border-transparent text-m font-medium leading-large;
+    @apply box-border flex cursor-[inherit] items-center justify-center rounded-m border-2 border-solid border-transparent text-m font-medium leading-regular;
     @apply transition-[background-color,border-color,color] duration-300;
     @apply disabled:cursor-not-allowed;
     @apply focus-visible:focus;

packages/bee-q/src/components/checkbox/bq-checkbox.tsx

@@ -246,7 +246,7 @@ export class BqCheckbox {
           </span>
         </div>
         <span
-          class="bq-checkbox__label ml-xs2 text-start font-medium leading-large text-text-primary group-hover-[&:not(.is-disabled)]:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
+          class="bq-checkbox__label ml-xs2 text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
           part="label"
         >
           <slot />

packages/bee-q/src/components/notification/bq-notification.tsx

@@ -247,7 +247,7 @@ export class BqNotification {
           <div class="flex flex-col items-start gap-[var(--bq-notification--content-footer-gap)]" part="main">
             <div class="flex flex-col gap-[var(--bq-notification--title-body-gap)]" part="content">
               {/* TITLE */}
-              <div class="title-font font-semibold leading-large" part="title">
+              <div class="title-font font-semibold leading-regular" part="title">
                 <slot />
               </div>
               {/* BODY */}