diff --git a/docs/design-system/typography.stories.mdx b/docs/design-system/typography.stories.mdx
index f4e67bcf..eed89b5f 100644
--- a/docs/design-system/typography.stories.mdx
+++ b/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.
-
-
- {html`Display 1
`}
-
-
-
- {html`Display 2 Light
- Display 2 Regular
- Display 2 Medium
- Display 2 Semibold
- Display 2 Bold
`}
-
-
-## Sub-Titles
-
-Sub-titles are used widely in many components.
-
-
- {html`Sub Title 1 Regular
- Sub Title 1 Medium
- Sub Title 1 Semibold
- Sub Title 1 Bold
`}
-
-
-
- {html`Sub Title 2 Regular
- Sub Title 2 Medium
- Sub Title 2 Semibold
- Sub Title 2 Bold
`}
-
-
-
- {html`Sub Title 3 Regular
- Sub Title 3 Medium
- Sub Title 3 Semibold
- Sub Title 3 Bold
`}
-
-
-
- {html`Sub Title 4 Regular
- Sub Title 4 Medium
- Sub Title 4 Semibold
- Sub Title 4 Bold
`}
-
+A display fonts is a font that is intended for use at large sizes for headings. Often used on landing pages.
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-display-light | Font Family: Rubik
Weight: 300 / Light
Size: 48px / 3rem | Display Light
|
+| --bl-font-display-regular | Font Family: Rubik
Weight: 400 / Regular
Size: 48px / 3rem | Display Regular
|
+| --bl-font-display-medium | Font Family: Rubik
Weight: 500 / Medium
Size: 48px / 3rem | Display Medium
|
+| --bl-font-display-semibold | Font Family: Rubik
Weight: 600 / Semibold
Size: 48px / 3rem | Display Semibold
|
+| --bl-font-display-bold | Font Family: Rubik
Weight: 700 / Bold
Size: 48px / 3rem | Display Bold
|
+
+## Headings
+
+Heading fonts are used as larger, higher impact text, such as in a title or section header.
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-heading-1 | Font Family: Rubik
Weight: 300 / Light
Size: 32px / 2rem | Heading 1
|
+| --bl-font-heading-2 | Font Family: Rubik
Weight: 400 / Regular
Size: 28px / 1.75rem | Heading 2
|
+| --bl-font-heading-3 | Font Family: Rubik
Weight: 400 / Regular
Size: 24px / 1.5rem | Heading 3
|
+
+## Sub Titles
+
+Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length.
+
+#### Sub Title 1
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-1-regular | Font Family: Rubik
Weight: 400 / Regular
Size: 20px / 1.25rem | Sub Title 1 Regular
|
+| --bl-font-title-1-medium | Font Family: Rubik
Weight: 500 / Medium
Size: 20px / 1.25rem | Sub Title 1 Medium
|
+| --bl-font-title-1-semibold | Font Family: Rubik
Weight: 600 / Semibold
Size: 20px / 1.25rem | Sub Title 1 Semibold
|
+| --bl-font-title-1-bold | Font Family: Rubik
Weight: 700 / Bold
Size: 20px / 1.25rem | Sub Title 1 Bold
|
+
+#### Sub Title 2
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-2-regular | Font Family: Rubik
Weight: 400 / Regular
Size: 16px / 1rem | Sub Title 2 Regular
|
+| --bl-font-title-2-medium | Font Family: Rubik
Weight: 500 / Medium
Size: 16px / 1rem | Sub Title 2 Medium
|
+| --bl-font-title-2-semibold | Font Family: Rubik
Weight: 600 / Semibold
Size: 16px / 1rem | Sub Title 2 Semibold
|
+| --bl-font-title-2-bold | Font Family: Rubik
Weight: 700 / Bold
Size: 16px / 1rem | Sub Title 2 Bold
|
+
+#### Sub Title 3
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-3-regular | Font Family: Rubik
Weight: 400 / Regular
Size: 14px / 0.875rem | Sub Title 3 Regular
|
+| --bl-font-title-3-medium | Font Family: Rubik
Weight: 500 / Medium
Size: 14px / 0.875rem | Sub Title 3 Medium
|
+| --bl-font-title-3-semibold | Font Family: Rubik
Weight: 600 / Semibold
Size: 14px / 0.875rem | Sub Title 3 Semibold
|
+| --bl-font-title-3-bold | Font Family: Rubik
Weight: 700 / Bold
Size: 14px / 0.875rem | Sub Title 3 Bold
|
+
+#### Sub Title 4
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-title-4-regular | Font Family: Rubik
Weight: 400 / Regular
Size: 12px / 0.75rem | Sub Title 4 Regular
|
+| --bl-font-title-4-medium | Font Family: Rubik
Weight: 500 / Medium
Size: 12px / 0.75rem | Sub Title 4 Medium
|
+| --bl-font-title-4-semibold | Font Family: Rubik
Weight: 600 / Semibold
Size: 12px / 0.75rem | Sub Title 4 Semibold
|
+| --bl-font-title-4-bold | Font Family: Rubik
Weight: 700 / Bold
Size: 12px / 0.75rem | Sub Title 4 Bold
|
+
+
+## Body Texts
+
+Body text typically used for long-form writing as it works well for small text sizes.
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-body-text-1 | Font Family: Rubik
Weight: 400 / Regular
Size: 16px / 1rem | Form Body Text 1
|
+| --bl-font-body-text-2 | Font Family: Rubik
Weight: 400 / Regular
Size: 14px / 0.875rem | Form Body Text 2
|
+| --bl-font-body-text-3 | Font Family: Rubik
Weight: 400 / Regular
Size: 12px / 0.75rem | Form Body Text 3
|
+
+
+## Captions
+
+Caption is the smallest font size. They are mostly used for labels.
+
+| Variable
| Styles
| Example
|
+|:-----------------------:|:-------------:|:----------:|
+| --bl-font-caption | Font Family: Rubik
Weight: 500 / Medium
Size: 10px / 0.625rem | Caption
|
## 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 */
```
diff --git a/src/components/alert/bl-alert.css b/src/components/alert/bl-alert.css
index cd9b4111..b029bd1f 100644
--- a/src/components/alert/bl-alert.css
+++ b/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 {
diff --git a/src/components/badge/bl-badge.css b/src/components/badge/bl-badge.css
index abb19dfd..20200025 100644
--- a/src/components/badge/bl-badge.css
+++ b/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);
}
diff --git a/src/components/input/bl-input.css b/src/components/input/bl-input.css
index 28e1dc91..01261db3 100644
--- a/src/components/input/bl-input.css
+++ b/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;
}
diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
index 7592d086..6296b19f 100644
--- a/src/components/select/bl-select.css
+++ b/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;
}
diff --git a/src/themes/default.css b/src/themes/default.css
index 1428017d..7970bc3d 100644
--- a/src/themes/default.css
+++ b/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 */