From cbbcb6fd8ac4bed7a72d5652daff904e2a4623a3 Mon Sep 17 00:00:00 2001 From: Damla Demir Date: Mon, 3 Oct 2022 10:05:21 +0300 Subject: [PATCH] refactor: change typography variables and fix document (#254) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: change typography and fix document * fix: fix typo * fix: change typography variable in select and input * fix: typography body-text names changed Co-authored-by: Murat Çorlu <127687+muratcorlu@users.noreply.github.com> --- docs/design-system/typography.stories.mdx | 157 ++++++++++++++-------- src/components/alert/bl-alert.css | 2 +- src/components/badge/bl-badge.css | 4 +- src/components/input/bl-input.css | 4 +- src/components/select/bl-select.css | 4 +- src/themes/default.css | 41 +++--- 6 files changed, 131 insertions(+), 81 deletions(-) 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 */