refactor: change typography variables and fix document

docs/design-system/typography.stories.mdx

@@ -10,55 +10,98 @@ import { html } from 'lit';
 
 # Baklava Typography
 
-We use **Rubik** font by default in Baklava Design System.
+Typography creates purposeful texture, guiding users to read and understand the hierarchy of information.
+
+The default font is **Rubik** in Baklava Design System. You can give any typography variable in your code like this:
+
+
+```css
+.my-header {
+    font: var(--bl-font-display-light);
+}
+```
 
 ## Display Titles
 
-`Display 1` and `Display 2` titles are our largest titles. We generally use them in landing pages.
-
-<Story name="Display 1">
-  {html`<h1 style="font: var(--bl-font-display-1)">Display 1</h1>`}
-</Story>
-
-<Story name="Display 2">
-  {html`<h1 style="font: var(--bl-font-display-2-light)">Display 2 Light</h1>
-  <h1 style="font: var(--bl-font-display-2-regular)">Display 2 Regular</h1>
-  <h1 style="font: var(--bl-font-display-2-medium)">Display 2 Medium</h1>
-  <h1 style="font: var(--bl-font-display-2-semibold)">Display 2 Semibold</h1>
-  <h1 style="font: var(--bl-font-display-2-bold)">Display 2 Bold</h1>`}
-</Story>
-
-## Sub-Titles
-
-Sub-titles are used widely in many components.
-
-<Story name="Sub Title 1">
-  {html`<h1 style="font: var(--bl-font-title-1-regular)">Sub Title 1 Regular</h1>
-  <h1 style="font: var(--bl-font-title-1-medium)">Sub Title 1 Medium</h1>
-  <h1 style="font: var(--bl-font-title-1-semibold)">Sub Title 1 Semibold</h1>
-  <h1 style="font: var(--bl-font-title-1-bold)">Sub Title 1 Bold</h1>`}
-</Story>
-
-<Story name="Sub Title 2">
-  {html`<h1 style="font: var(--bl-font-title-2-regular)">Sub Title 2 Regular</h1>
-  <h1 style="font: var(--bl-font-title-2-medium)">Sub Title 2 Medium</h1>
-  <h1 style="font: var(--bl-font-title-2-semibold)">Sub Title 2 Semibold</h1>
-  <h1 style="font: var(--bl-font-title-2-bold)">Sub Title 2 Bold</h1>`}
-</Story>
-
-<Story name="Sub Title 3">
-  {html`<h1 style="font: var(--bl-font-title-3-regular)">Sub Title 3 Regular</h1>
-  <h1 style="font: var(--bl-font-title-3-medium)">Sub Title 3 Medium</h1>
-  <h1 style="font: var(--bl-font-title-3-semibold)">Sub Title 3 Semibold</h1>
-  <h1 style="font: var(--bl-font-title-3-bold)">Sub Title 3 Bold</h1>`}
-</Story>
-
-<Story name="Sub Title 4">
-  {html`<h1 style="font: var(--bl-font-title-4-regular)">Sub Title 4 Regular</h1>
-  <h1 style="font: var(--bl-font-title-4-medium)">Sub Title 4 Medium</h1>
-  <h1 style="font: var(--bl-font-title-4-semibold)">Sub Title 4 Semibold</h1>
-  <h1 style="font: var(--bl-font-title-4-bold)">Sub Title 4 Bold</h1>`}
-</Story>
+A display fonts is a font that is intended for use at large sizes for headings. Often used on landing pages.
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-display-light | Font Family: Rubik <br/> Weight: 300 / Light <br/> Size: 48px / 3rem | <h1 style={{ font: 'var(--bl-font-display-light)' }}>Display Light</h1> |
+| --bl-font-display-regular | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 48px / 3rem | <h1 style={{ font: 'var(--bl-font-display-regular)' }}>Display Regular</h1> |
+| --bl-font-display-medium | Font Family: Rubik <br/> Weight: 500 / Medium <br/> Size: 48px / 3rem | <h1 style={{ font: 'var(--bl-font-display-medium)' }}>Display Medium</h1> |
+| --bl-font-display-semibold | Font Family: Rubik <br/> Weight: 600 / Semibold <br/> Size: 48px / 3rem | <h1 style={{ font: 'var(--bl-font-display-semibold)' }}>Display Semibold</h1> |
+| --bl-font-display-bold | Font Family: Rubik <br/> Weight: 700 / Bold <br/> Size: 48px / 3rem | <h1 style={{ font: 'var(--bl-font-display-bold)' }}>Display Bold</h1> |
+
+## Headings
+
+Heading fonts are used as larger, higher impact text, such as in a title or section header.
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-heading-1 | Font Family: Rubik <br/> Weight: 300 / Light <br/> Size: 32px / 2rem | <h1 style={{ font: 'var(--bl-font-heading-1)' }}>Heading 1</h1> |
+| --bl-font-heading-2 | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 28px / 1.75rem | <h1 style={{ font: 'var(--bl-font-heading-2)' }}>Heading 2</h1> |
+| --bl-font-heading-3 | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 24px / 1.5rem | <h1 style={{ font: 'var(--bl-font-heading-3)' }}>Heading 3</h1> |
+
+## Sub Titles
+
+Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length.
+
+#### Sub Title 1
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-1-regular | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 20px / 1.25rem | <h1 style={{ font: 'var(--bl-font-title-1-regular)' }}>Sub Title 1 Regular</h1> |
+| --bl-font-title-1-medium  | Font Family: Rubik <br/> Weight: 500 / Medium <br/> Size: 20px / 1.25rem | <h1 style={{ font: 'var(--bl-font-title-1-medium)' }}>Sub Title 1 Medium</h1> |
+| --bl-font-title-1-semibold  | Font Family: Rubik <br/> Weight: 600 / Semibold <br/> Size: 20px / 1.25rem | <h1 style={{ font: 'var(--bl-font-title-1-semibold)' }}>Sub Title 1 Semibold</h1> |
+| --bl-font-title-1-bold  | Font Family: Rubik <br/> Weight: 700 / Bold <br/> Size: 20px / 1.25rem | <h1 style={{ font: 'var(--bl-font-title-1-bold)' }}>Sub Title 1 Bold</h1> |
+
+#### Sub Title 2
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-2-regular | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 16px / 1rem | <h1 style={{ font: 'var(--bl-font-title-2-regular)' }}>Sub Title 2 Regular</h1> |
+| --bl-font-title-2-medium  | Font Family: Rubik <br/> Weight: 500 / Medium <br/> Size: 16px / 1rem | <h1 style={{ font: 'var(--bl-font-title-2-medium)' }}>Sub Title 2 Medium</h1> |
+| --bl-font-title-2-semibold  | Font Family: Rubik <br/> Weight: 600 / Semibold <br/> Size: 16px / 1rem | <h1 style={{ font: 'var(--bl-font-title-2-semibold)' }}>Sub Title 2 Semibold</h1> |
+| --bl-font-title-2-bold  | Font Family: Rubik <br/> Weight: 700 / Bold <br/> Size: 16px / 1rem | <h1 style={{ font: 'var(--bl-font-title-2-bold)' }}>Sub Title 2 Bold</h1> |
+
+#### Sub Title 3
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-3-regular | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 14px / 0.875rem | <h1 style={{ font: 'var(--bl-font-title-3-regular)' }}>Sub Title 3 Regular</h1> |
+| --bl-font-title-3-medium  | Font Family: Rubik <br/> Weight: 500 / Medium <br/> Size: 14px / 0.875rem | <h1 style={{ font: 'var(--bl-font-title-3-medium)' }}>Sub Title 3 Medium</h1> |
+| --bl-font-title-3-semibold  | Font Family: Rubik <br/> Weight: 600 / Semibold <br/> Size: 14px / 0.875rem | <h1 style={{ font: 'var(--bl-font-title-3-semibold)' }}>Sub Title 3 Semibold</h1> |
+| --bl-font-title-3-bold  | Font Family: Rubik <br/> Weight: 700 / Bold <br/> Size: 14px / 0.875rem | <h1 style={{ font: 'var(--bl-font-title-3-bold)' }}>Sub Title 3 Bold</h1> |
+
+#### Sub Title 4
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-4-regular | Font Family: Rubik <br/> Weight: 400 / Regular <br/> Size: 12px / 0.75rem | <h1 style={{ font: 'var(--bl-font-title-4-regular)' }}>Sub Title 4 Regular</h1> |
+| --bl-font-title-4-medium  | Font Family: Rubik <br/> Weight: 500 / Medium <br/> Size: 12px / 0.75rem | <h1 style={{ font: 'var(--bl-font-title-4-medium)' }}>Sub Title 4 Medium</h1> |
+| --bl-font-title-4-semibold  | Font Family: Rubik <br/> Weight: 600 / Semibold <br/> Size: 12px / 0.75rem | <h1 style={{ font: 'var(--bl-font-title-4-semibold)' }}>Sub Title 4 Semibold</h1> |
+| --bl-font-title-4-bold  | Font Family: Rubik <br/> Weight: 700 / Bold <br/> Size: 12px / 0.75rem | <h1 style={{ font: 'var(--bl-font-title-4-bold)' }}>Sub Title 4 Bold</h1> |
+
+
+## Body Texts
+
+Body text typically used for long-form writing as it works well for small text sizes.
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-body-text-1 |  Font Family: Rubik <br/>   Weight: 400 / Regular <br/> Size: 16px / 1rem | <h1 style={{ font: 'var(--bl-font-body-text-1)' }}>Form Body Text 1</h1> |
+| --bl-font-body-text-2 |  Font Family: Rubik <br/>   Weight: 400 / Regular <br/> Size: 14px / 0.875rem | <h1 style={{ font: 'var(--bl-font-body-text-2)' }}>Form Body Text 2</h1> |
+| --bl-font-body-text-3 |  Font Family: Rubik <br/>   Weight: 400 / Regular <br/> Size: 12px / 0.75rem | <h1 style={{ font: 'var(--bl-font-body-text-3)' }}>Form Body Text 3</h1> |
+
+
+## Captions
+
+Caption is the smallest font size. They are mostly used for labels.
+
+| <div style={{ width: '15rem' }}>Variable</div> | <div style={{ width: '20rem' }}>Styles</div>  | <div style={{ width: '25rem' }}>Example</div>  |
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-caption |  Font Family: Rubik <br/>   Weight: 500 / Medium <br/> Size: 10px / 0.625rem | <h1 style={{ font: 'var(--bl-font-caption)' }}>Caption</h1> |
 
 ## CSS Variables
 
@@ -75,15 +118,15 @@ Here are the CSS variables provided and used in all of the Baklava components re
 --bl-font-weight-bold: 700;
 
 /* Font sizes */
---bl-font-size-2xs: 8px;
---bl-font-size-xs: 10px;
---bl-font-size-s: 12px;
---bl-font-size-m: 14px;
---bl-font-size-l: 16px;
---bl-font-size-xl: 20px;
---bl-font-size-2xl: 24px;
---bl-font-size-3xl: 28px;
---bl-font-size-4xl: 32px;
---bl-font-size-5xl: 48px;
---bl-font-size-6xl: 64px;
+--bl-font-size-2xs: 0.5rem; /* 8px */
+--bl-font-size-xs: 0.625rem; /* 10px */
+--bl-font-size-s: 0.75rem; /* 12px */
+--bl-font-size-m: 0.875rem; /* 14px */
+--bl-font-size-l: 1rem; /* 16px */
+--bl-font-size-xl: 1.25rem; /* 20px */
+--bl-font-size-2xl: 1.5rem; /* 24px */
+--bl-font-size-3xl: 1.75rem; /* 28px */
+--bl-font-size-4xl: 2rem; /* 32px */
+--bl-font-size-5xl: 3rem; /* 48px */
+--bl-font-size-6xl: 4rem; /* 64px */
 ```

src/components/alert/bl-alert.css

@@ -61,7 +61,7 @@
 }
 
 .caption + .description {
-  font: var(--bl-font-caption-text);
+  font: var(--bl-font-body-text-3);
 }
 
 .close-spaced {

src/components/badge/bl-badge.css

@@ -7,7 +7,7 @@
   --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
   --color: var(--bl-badge-color, var(--bl-color-primary));
   --font: var(--bl-font-title-4-medium);
-  --padding-vertical: var(--bl-size-3xs);
+  --padding-vertical: var(--bl-size-4xs);
   --padding-horizontal: var(--bl-size-3xs);
   --margin-icon: var(--bl-size-3xs);
   --icon-size: var(--bl-size-s);
@@ -31,7 +31,7 @@
 }
 
 :host([size='small']) .badge {
-  --font: var(--bl-font-caption-small-text);
+  --font: var(--bl-font-caption);
   --height: var(--bl-size-m);
 }
 

src/components/input/bl-input.css

@@ -93,7 +93,7 @@ label {
   top: 0;
   left: var(--bl-size-2xs);
   transform: translateY(-50%);
-  font: var(--bl-font-form-label);
+  font: var(--bl-font-caption);
   color: var(--bl-color-content-secondary);
   padding: 0 var(--bl-size-3xs);
   background-color: var(--bl-color-primary-background);
@@ -110,7 +110,7 @@ label {
   transition: none;
   transform: none;
   pointer-events: initial;
-  font: var(--bl-font-form-label);
+  font: var(--bl-font-caption);
   color: var(--bl-color-content-secondary);
   padding: 0;
 }

src/components/select/bl-select.css

@@ -208,7 +208,7 @@ label {
   top: 0;
   left: var(--bl-size-2xs);
   transform: translateY(-50%);
-  font: var(--bl-font-form-label);
+  font: var(--bl-font-caption);
   color: var(--label-color);
   padding: 0 var(--bl-size-3xs);
   background-color: var(--bl-color-primary-background);
@@ -225,7 +225,7 @@ label {
   transition: none;
   transform: none;
   pointer-events: initial;
-  font: var(--bl-font-form-label);
+  font: var(--bl-font-caption);
   color: var(--label-color);
   padding: 0;
 }

src/themes/default.css

@@ -83,16 +83,22 @@
   --bl-border-radius-pill: 62.438rem; /* 999px */
   --bl-border-radius-circle: 50%;
 
-  /* Font Style: Display 1 */
-  --bl-font-display-1: var(--bl-font-weight-bold) var(--bl-font-size-6xl) var(--bl-font-family);
+  /* Font Style: Display */
+  --bl-font-display: var(--bl-font-size-5xl) var(--bl-font-family);
+  --bl-font-display-light: var(--bl-font-weight-light) var(--bl-font-display);
+  --bl-font-display-regular: var(--bl-font-weight-regular) var(--bl-font-display);
+  --bl-font-display-medium: var(--bl-font-weight-medium) var(--bl-font-display);
+  --bl-font-display-semibold: var(--bl-font-weight-semibold) var(--bl-font-display);
+  --bl-font-display-bold: var(--bl-font-weight-bold) var(--bl-font-display);
 
-  /* Font Style: Display 2 */
-  --bl-font-display-2: var(--bl-font-size-5xl) var(--bl-font-family);
-  --bl-font-display-2-light: var(--bl-font-weight-light) var(--bl-font-display-2);
-  --bl-font-display-2-regular: var(--bl-font-weight-regular) var(--bl-font-display-2);
-  --bl-font-display-2-medium: var(--bl-font-weight-medium) var(--bl-font-display-2);
-  --bl-font-display-2-semibold: var(--bl-font-weight-semibold) var(--bl-font-display-2);
-  --bl-font-display-2-bold: var(--bl-font-weight-bold) var(--bl-font-display-2);
+  /* Font Style: Heading 1 */
+  --bl-font-heading-1: var(--bl-font-weight-light) var(--bl-font-size-4xl) var(--bl-font-family);
+
+   /* Font Style: Heading 2 */
+   --bl-font-heading-2: var(--bl-font-weight-regular) var(--bl-font-size-3xl) var(--bl-font-family);
+
+   /* Font Style: Heading 3 */
+   --bl-font-heading-3: var(--bl-font-weight-regular) var(--bl-font-size-2xl) var(--bl-font-family);
 
   /* Font Style: Title 1 */
   --bl-font-title-1: var(--bl-font-size-xl) var(--bl-font-family);
@@ -122,16 +128,17 @@
   --bl-font-title-4-semibold: var(--bl-font-weight-semibold) var(--bl-font-title-4);
   --bl-font-title-4-bold: var(--bl-font-weight-bold) var(--bl-font-title-4);
 
-  /* Font Style: Form Label */
-  --bl-font-form-label: var(--bl-font-weight-medium) var(--bl-font-size-xs) var(--bl-font-family);
+  /* Font Style: Body Text 1 */
+  --bl-font-body-text-1: var(--bl-font-weight-regular) var(--bl-font-size-l) var(--bl-font-family);
+
+  /* Font Style: Body Text 2 */
+  --bl-font-body-text-2: var(--bl-font-weight-regular) var(--bl-font-size-m) var(--bl-font-family);
+
+  /* Font Style: Body Text 3 */
+  --bl-font-body-text-3: var(--bl-font-weight-regular) var(--bl-font-size-s) var(--bl-font-family);
 
   /* Font Style: Caption */
-  --bl-font-caption-small-text: var(--bl-font-weight-bold) var(--bl-font-size-2xs)
-    var(--bl-font-family);
-  --bl-font-caption-text: var(--bl-font-weight-regular) var(--bl-font-size-s) var(--bl-font-family);
-  --bl-font-caption-medium: var(--bl-font-weight-medium) var(--bl-font-size-s) var(--bl-font-family);
-  --bl-font-caption-long-text: var(--bl-font-weight-regular) var(--bl-font-size-s)
-    var(--bl-font-family);
+  --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-size-xs) var(--bl-font-family);
 }
 
 /* Prevent FOUCE */