From ee0254e822fad2442e0670900b50adf0dd5d2095 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 4 Jan 2023 11:29:11 -0500 Subject: [PATCH] fixes #1097 --- docs/resources/changelog.md | 1 + docs/tokens/border-radius.md | 16 ++++++++-------- docs/tokens/typography.md | 10 +++++----- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index f3b2bb08..017920c2 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -26,6 +26,7 @@ This release includes a complete rewrite of `` to improve accessibili - Fixed a bug in `` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096) - Fixed a bug that prevented `` from submitting a default value of `on` when no value was provided [#1103](https://github.com/shoelace-style/shoelace/discussions/1103) - Reorganized all components to make class structures more consistent +- Updated some incorrect default values for design tokens in the docs [#1097](https://github.com/shoelace-style/shoelace/issues/1097) - Updated non-public fields to use the `private` keyword (these were previously private only by convention, but now TypeScript will warn you) - Updated the hover style of `` to be consistent with `` - Updated the status of `` and `` from experimental to stable diff --git a/docs/tokens/border-radius.md b/docs/tokens/border-radius.md index 845e3945..c04347a3 100644 --- a/docs/tokens/border-radius.md +++ b/docs/tokens/border-radius.md @@ -2,11 +2,11 @@ Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size. -| Token | Value | Example | -| ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- | -| `--sl-border-radius-small` | 0.125rem (2px) |
| -| `--sl-border-radius-medium` | 0.25rem (4px) |
| -| `--sl-border-radius-large` | 0.5rem (8px) |
| -| `--sl-border-radius-x-large` | 1rem (16px) |
| -| `--sl-border-radius-circle` | 50% |
| -| `--sl-border-radius-pill` | 9999px |
| +| Token | Value | Example | +| ---------------------------- | --------------- | -------------------------------------------------------------------------------------------------------- | +| `--sl-border-radius-small` | 0.1875rem (3px) |
| +| `--sl-border-radius-medium` | 0.25rem (4px) |
| +| `--sl-border-radius-large` | 0.5rem (8px) |
| +| `--sl-border-radius-x-large` | 1rem (16px) |
| +| `--sl-border-radius-circle` | 50% |
| +| `--sl-border-radius-pill` | 9999px |
| diff --git a/docs/tokens/typography.md b/docs/tokens/typography.md index 1aa2db26..d5449e28 100644 --- a/docs/tokens/typography.md +++ b/docs/tokens/typography.md @@ -10,7 +10,7 @@ The default font stack is designed to be simple and highly available on as many | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | `--sl-font-sans` | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | The quick brown fox jumped over the lazy dog. | | `--sl-font-serif` | Georgia, 'Times New Roman', serif | The quick brown fox jumped over the lazy dog. | -| `--sl-font-mono` | Menlo, Monaco, 'Courier New', monospace | The quick brown fox jumped over the lazy dog. | +| `--sl-font-mono` | SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; | The quick brown fox jumped over the lazy dog. | ## Font Size @@ -41,18 +41,18 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu | Token | Value | Example | | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | -| `--sl-letter-spacing-denser` | ? | The quick brown fox jumped over the lazy dog. | +| `--sl-letter-spacing-denser` | -0.03em | The quick brown fox jumped over the lazy dog. | | `--sl-letter-spacing-dense` | -0.015em | The quick brown fox jumped over the lazy dog. | | `--sl-letter-spacing-normal` | normal | The quick brown fox jumped over the lazy dog. | | `--sl-letter-spacing-loose` | 0.075em | The quick brown fox jumped over the lazy dog. | -| `--sl-letter-spacing-looser` | ? | The quick brown fox jumped over the lazy dog. | +| `--sl-letter-spacing-looser` | 0.15em | The quick brown fox jumped over the lazy dog. | ## Line Height | Token | Value | Example | | ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--sl-line-height-denser` | ? |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| +| `--sl-line-height-denser` | 1 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| | `--sl-line-height-dense` | 1.4 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| | `--sl-line-height-normal` | 1.8 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| | `--sl-line-height-loose` | 2.2 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| -| `--sl-line-height-looser` | ? |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
| +| `--sl-line-height-looser` | 2.6 |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
|