diff --git a/README.md b/README.md index 0572116cd..ec9a09d35 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ _A forward-thinking web component library for desktop and mobile._ 🥾 --- -Shoelace harnesses the power of [web components](#web-components) to bring you a modern, versatile, open source component library. +Shoelace harnesses the power of [web components](#web-components) to bring you a modern, versatile, open source component library. Here's why you'll love it: @@ -17,4 +17,4 @@ Shoelace is designed and developed in New Hampshire by [@claviska](https://twitt --- -[Documentation](https://shoelace.style) \ No newline at end of file +[Documentation](https://shoelace.style) diff --git a/docs/404.md b/docs/404.md index a93a8f689..3d4de0e7a 100644 --- a/docs/404.md +++ b/docs/404.md @@ -1,3 +1,3 @@ # Not Found -Sorry, I couldn't find that page. \ No newline at end of file +Sorry, I couldn't find that page. diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 7c6db7027..697072180 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,4 +1,5 @@ - Getting Started + - [Overview](/) - [Installation](/getting-started/installation.md) - [Usage](/getting-started/usage.md) @@ -6,6 +7,7 @@ - [Roadmap](/getting-started/roadmap.md) - Components + - [Alert](/components/alert.md) - [Avatar](/components/avatar.md) - [Badge](/components/badge.md) diff --git a/docs/components/alert.md b/docs/components/alert.md index 3ba4ec1f8..b51df369a 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -20,39 +20,39 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ```html preview - This is super informative
+ This is super informative
You can tell by how pretty the alert is. -
+
- Your changes have been saved
+ Your changes have been saved
You can safely exit the app now. -
+
- Your settings have been updated
+ Your settings have been updated
Some settings will take affect the next time you log in. -
+
- This will end your session
+ This will end your session
You will be logged out until you log in again. -
+
- Delete this file?
+ Delete this file?
This is permanent, which means forever! ``` diff --git a/docs/components/avatar.md b/docs/components/avatar.md index f9f3fb6c1..f8144a34c 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -11,7 +11,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i - + ``` ## Examples @@ -23,7 +26,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i - + ``` ### Custom Icon diff --git a/docs/components/badge.md b/docs/components/badge.md index 4acbc8d41..7c97a4109 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -42,7 +42,9 @@ One of the most common use cases for badges is attaching them to buttons. To mak When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly. ```html preview - + Messages Comments 4 Replies 12 diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index 2c3ad2b79..f43bc0335 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -7,10 +7,10 @@ Checkboxes... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ```html preview -Default
-Checked
-Indeterminate
-Disabled
+Default
+Checked
+Indeterminate
+Disabled
``` [component-metadata:sl-checkbox] diff --git a/docs/components/details.md b/docs/components/details.md index 2fd81abc7..37c0084b4 100644 --- a/docs/components/details.md +++ b/docs/components/details.md @@ -8,7 +8,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ```html preview - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ``` @@ -18,9 +19,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ```html preview - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - ``` ### Grouping Details @@ -30,15 +31,18 @@ Details are designed to function independently, but you can simulate a group whe ```html preview
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -47,13 +51,13 @@ Details are designed to function independently, but you can simulate a group whe // Close all other details when one is shown container.addEventListener('slShow', event => { - [...container.querySelectorAll('sl-details')].map(details => details.open = event.target === details); + [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); }); ``` diff --git a/docs/components/dialog.md b/docs/components/dialog.md index bbc01af54..5d25980cb 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog.md @@ -19,7 +19,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i const dialog = document.querySelector('.dialog-overview'); const openButton = dialog.nextElementSibling; const closeButton = dialog.querySelector('sl-button[slot="footer"]'); - + openButton.addEventListener('click', () => dialog.show()); closeButton.addEventListener('click', () => dialog.hide()); })(); @@ -45,7 +45,7 @@ By default, dialogs are closed when the user clicks or taps on the overlay. The const dialog = document.querySelector('.dialog-no-overlay-dismiss'); const openButton = dialog.nextElementSibling; const closeButton = dialog.querySelector('sl-button[slot="footer"]'); - + openButton.addEventListener('click', () => dialog.show()); closeButton.addEventListener('click', () => dialog.hide()); })(); @@ -71,7 +71,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di const dialog = document.querySelector('.dialog-scrolling'); const openButton = dialog.nextElementSibling; const closeButton = dialog.querySelector('sl-button[slot="footer"]'); - + openButton.addEventListener('click', () => dialog.show()); closeButton.addEventListener('click', () => dialog.hide()); })(); diff --git a/docs/components/drawer.md b/docs/components/drawer.md index 25cbfc8d1..3d40a5e92 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -19,7 +19,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i const drawer = document.querySelector('.drawer-overview'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -43,7 +43,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i const drawer = document.querySelector('.drawer-placement'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -55,7 +55,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent. ```html preview -
+
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens. @@ -71,7 +73,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo const drawer = document.querySelector('.drawer-contained'); const openButton = drawer.parentElement.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -95,7 +97,7 @@ By default, drawers are closed when the user clicks or taps on the overlay. The const drawer = document.querySelector('.drawer-no-overlay-dismiss'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -121,7 +123,7 @@ By design, a drawer's height is 100% of its container and will never exceed that const drawer = document.querySelector('.drawer-scrolling'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -143,7 +145,7 @@ By design, a drawer's height is 100% of its container and will never exceed that const drawer = document.querySelector('.drawer-custom-width'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -165,7 +167,7 @@ By design, a drawer's height is 100% of its container and will never exceed that const drawer = document.querySelector('.drawer-no-header'); const openButton = drawer.nextElementSibling; const closeButton = drawer.querySelector('sl-button[type="primary"]'); - + openButton.addEventListener('click', () => drawer.show()); closeButton.addEventListener('click', () => drawer.hide()); })(); @@ -185,7 +187,7 @@ By design, a drawer's height is 100% of its container and will never exceed that (() => { const drawer = document.querySelector('.drawer-no-footer'); const openButton = drawer.nextElementSibling; - + openButton.addEventListener('click', () => drawer.show()); })(); diff --git a/docs/components/form.md b/docs/components/form.md index 39e6af744..f213ef7e8 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -9,28 +9,28 @@ All of Shoelace's components make use of the [shadow DOM](https://developer.mozi ```html preview -
+
Birds Cats Dogs -
+
I totally agree -

+

Submit ``` @@ -139,7 +138,6 @@ A tooltip's target is its _first child element_, so you should only wrap one ele Above - Below diff --git a/docs/getting-started/customizing.md b/docs/getting-started/customizing.md index 94d7ed6f5..195dcef89 100644 --- a/docs/getting-started/customizing.md +++ b/docs/getting-started/customizing.md @@ -1,4 +1,3 @@ # Customizing TODO - diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md index 7f987457d..de171e88f 100644 --- a/docs/getting-started/overview.md +++ b/docs/getting-started/overview.md @@ -13,7 +13,7 @@ Shoelace is actively designed and developed in New Hampshire by [@claviska](http The fastest way to get started is with the CDN. Add this to your `` section: ```html - + ``` @@ -33,7 +33,7 @@ Now you have access to all of Shoelace's components! Try adding a button to your Thanks to the popularity of frameworks such as React, Vue, and Angular, component-driven development is a way of life for front-end developers. Components are awesome, and they make a lot of sense in terms of design, development, and testing. -Unfortunately, *framework-specific* components fail us in a number of ways: +Unfortunately, _framework-specific_ components fail us in a number of ways: - 🔒 You can only use them in the framework they're designed for - ⏳ Their lifespan is limited to that of the framework's diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index ac65c8110..62f5f934e 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -15,4 +15,3 @@ TODO ## Angular TODO - diff --git a/docs/tokens/border-radius.md b/docs/tokens/border-radius.md index 4847a972a..276b6f51d 100644 --- a/docs/tokens/border-radius.md +++ b/docs/tokens/border-radius.md @@ -1,12 +1,10 @@ # Border Radius Tokens -| 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.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 |
| diff --git a/docs/tokens/color.md b/docs/tokens/color.md index 20dbf691c..a4e9bb242 100644 --- a/docs/tokens/color.md +++ b/docs/tokens/color.md @@ -7,145 +7,140 @@ TODO ## Primary -| Token | Example | -|-------|---------| -| `--sl-color-primary-10` |
-| `--sl-color-primary-15` |
-| `--sl-color-primary-20` |
-| `--sl-color-primary-25` |
-| `--sl-color-primary-30` |
-| `--sl-color-primary-35` |
-| `--sl-color-primary-40` |
-| `--sl-color-primary-45` |
-| `--sl-color-primary-50` |
-| `--sl-color-primary-55` |
-| `--sl-color-primary-60` |
-| `--sl-color-primary-65` |
-| `--sl-color-primary-70` |
-| `--sl-color-primary-75` |
-| `--sl-color-primary-80` |
-| `--sl-color-primary-85` |
-| `--sl-color-primary-90` |
-| `--sl-color-primary-95` |
- +| Token | Example | +| ----------------------- | ------------------------------------------------------------------------------------ | +| `--sl-color-primary-10` |
| +| `--sl-color-primary-15` |
| +| `--sl-color-primary-20` |
| +| `--sl-color-primary-25` |
| +| `--sl-color-primary-30` |
| +| `--sl-color-primary-35` |
| +| `--sl-color-primary-40` |
| +| `--sl-color-primary-45` |
| +| `--sl-color-primary-50` |
| +| `--sl-color-primary-55` |
| +| `--sl-color-primary-60` |
| +| `--sl-color-primary-65` |
| +| `--sl-color-primary-70` |
| +| `--sl-color-primary-75` |
| +| `--sl-color-primary-80` |
| +| `--sl-color-primary-85` |
| +| `--sl-color-primary-90` |
| +| `--sl-color-primary-95` |
| ## Gray -| Token | Example | -|-------|---------| -| `--sl-color-black` |
-| `--sl-color-gray-10` |
-| `--sl-color-gray-15` |
-| `--sl-color-gray-20` |
-| `--sl-color-gray-25` |
-| `--sl-color-gray-30` |
-| `--sl-color-gray-35` |
-| `--sl-color-gray-40` |
-| `--sl-color-gray-45` |
-| `--sl-color-gray-50` |
-| `--sl-color-gray-55` |
-| `--sl-color-gray-60` |
-| `--sl-color-gray-65` |
-| `--sl-color-gray-70` |
-| `--sl-color-gray-75` |
-| `--sl-color-gray-80` |
-| `--sl-color-gray-85` |
-| `--sl-color-gray-90` |
-| `--sl-color-gray-95` |
-| `--sl-color-white` |
- +| Token | Example | +| -------------------- | --------------------------------------------------------------------------------- | +| `--sl-color-black` |
| +| `--sl-color-gray-10` |
| +| `--sl-color-gray-15` |
| +| `--sl-color-gray-20` |
| +| `--sl-color-gray-25` |
| +| `--sl-color-gray-30` |
| +| `--sl-color-gray-35` |
| +| `--sl-color-gray-40` |
| +| `--sl-color-gray-45` |
| +| `--sl-color-gray-50` |
| +| `--sl-color-gray-55` |
| +| `--sl-color-gray-60` |
| +| `--sl-color-gray-65` |
| +| `--sl-color-gray-70` |
| +| `--sl-color-gray-75` |
| +| `--sl-color-gray-80` |
| +| `--sl-color-gray-85` |
| +| `--sl-color-gray-90` |
| +| `--sl-color-gray-95` |
| +| `--sl-color-white` |
| ## Success -| Token | Example | -|-------|---------| -| `--sl-color-success-10` |
-| `--sl-color-success-15` |
-| `--sl-color-success-20` |
-| `--sl-color-success-25` |
-| `--sl-color-success-30` |
-| `--sl-color-success-35` |
-| `--sl-color-success-40` |
-| `--sl-color-success-45` |
-| `--sl-color-success-50` |
-| `--sl-color-success-55` |
-| `--sl-color-success-60` |
-| `--sl-color-success-65` |
-| `--sl-color-success-70` |
-| `--sl-color-success-75` |
-| `--sl-color-success-80` |
-| `--sl-color-success-85` |
-| `--sl-color-success-90` |
-| `--sl-color-success-95` |
- +| Token | Example | +| ----------------------- | ------------------------------------------------------------------------------------ | +| `--sl-color-success-10` |
| +| `--sl-color-success-15` |
| +| `--sl-color-success-20` |
| +| `--sl-color-success-25` |
| +| `--sl-color-success-30` |
| +| `--sl-color-success-35` |
| +| `--sl-color-success-40` |
| +| `--sl-color-success-45` |
| +| `--sl-color-success-50` |
| +| `--sl-color-success-55` |
| +| `--sl-color-success-60` |
| +| `--sl-color-success-65` |
| +| `--sl-color-success-70` |
| +| `--sl-color-success-75` |
| +| `--sl-color-success-80` |
| +| `--sl-color-success-85` |
| +| `--sl-color-success-90` |
| +| `--sl-color-success-95` |
| ## Info -| Token | Example | -|-------|---------| -| `--sl-color-info-10` |
-| `--sl-color-info-15` |
-| `--sl-color-info-20` |
-| `--sl-color-info-25` |
-| `--sl-color-info-30` |
-| `--sl-color-info-35` |
-| `--sl-color-info-40` |
-| `--sl-color-info-45` |
-| `--sl-color-info-50` |
-| `--sl-color-info-55` |
-| `--sl-color-info-60` |
-| `--sl-color-info-65` |
-| `--sl-color-info-70` |
-| `--sl-color-info-75` |
-| `--sl-color-info-80` |
-| `--sl-color-info-85` |
-| `--sl-color-info-90` |
-| `--sl-color-info-95` |
- +| Token | Example | +| -------------------- | --------------------------------------------------------------------------------- | +| `--sl-color-info-10` |
| +| `--sl-color-info-15` |
| +| `--sl-color-info-20` |
| +| `--sl-color-info-25` |
| +| `--sl-color-info-30` |
| +| `--sl-color-info-35` |
| +| `--sl-color-info-40` |
| +| `--sl-color-info-45` |
| +| `--sl-color-info-50` |
| +| `--sl-color-info-55` |
| +| `--sl-color-info-60` |
| +| `--sl-color-info-65` |
| +| `--sl-color-info-70` |
| +| `--sl-color-info-75` |
| +| `--sl-color-info-80` |
| +| `--sl-color-info-85` |
| +| `--sl-color-info-90` |
| +| `--sl-color-info-95` |
| ## Warning -| Token | Example | -|-------|---------| -| `--sl-color-warning-10` |
-| `--sl-color-warning-15` |
-| `--sl-color-warning-20` |
-| `--sl-color-warning-25` |
-| `--sl-color-warning-30` |
-| `--sl-color-warning-35` |
-| `--sl-color-warning-40` |
-| `--sl-color-warning-45` |
-| `--sl-color-warning-50` |
-| `--sl-color-warning-55` |
-| `--sl-color-warning-60` |
-| `--sl-color-warning-65` |
-| `--sl-color-warning-70` |
-| `--sl-color-warning-75` |
-| `--sl-color-warning-80` |
-| `--sl-color-warning-85` |
-| `--sl-color-warning-90` |
-| `--sl-color-warning-95` |
- +| Token | Example | +| ----------------------- | ------------------------------------------------------------------------------------ | +| `--sl-color-warning-10` |
| +| `--sl-color-warning-15` |
| +| `--sl-color-warning-20` |
| +| `--sl-color-warning-25` |
| +| `--sl-color-warning-30` |
| +| `--sl-color-warning-35` |
| +| `--sl-color-warning-40` |
| +| `--sl-color-warning-45` |
| +| `--sl-color-warning-50` |
| +| `--sl-color-warning-55` |
| +| `--sl-color-warning-60` |
| +| `--sl-color-warning-65` |
| +| `--sl-color-warning-70` |
| +| `--sl-color-warning-75` |
| +| `--sl-color-warning-80` |
| +| `--sl-color-warning-85` |
| +| `--sl-color-warning-90` |
| +| `--sl-color-warning-95` |
| ## Danger -| Token | Example | -|-------|---------| -| `--sl-color-danger-10` |
-| `--sl-color-danger-15` |
-| `--sl-color-danger-20` |
-| `--sl-color-danger-25` |
-| `--sl-color-danger-30` |
-| `--sl-color-danger-35` |
-| `--sl-color-danger-40` |
-| `--sl-color-danger-45` |
-| `--sl-color-danger-50` |
-| `--sl-color-danger-55` |
-| `--sl-color-danger-60` |
-| `--sl-color-danger-65` |
-| `--sl-color-danger-70` |
-| `--sl-color-danger-75` |
-| `--sl-color-danger-80` |
-| `--sl-color-danger-85` |
-| `--sl-color-danger-90` |
-| `--sl-color-danger-95` |
+| Token | Example | +| ---------------------- | ----------------------------------------------------------------------------------- | +| `--sl-color-danger-10` |
| +| `--sl-color-danger-15` |
| +| `--sl-color-danger-20` |
| +| `--sl-color-danger-25` |
| +| `--sl-color-danger-30` |
| +| `--sl-color-danger-35` |
| +| `--sl-color-danger-40` |
| +| `--sl-color-danger-45` |
| +| `--sl-color-danger-50` |
| +| `--sl-color-danger-55` |
| +| `--sl-color-danger-60` |
| +| `--sl-color-danger-65` |
| +| `--sl-color-danger-70` |
| +| `--sl-color-danger-75` |
| +| `--sl-color-danger-80` |
| +| `--sl-color-danger-85` |
| +| `--sl-color-danger-90` |
| +| `--sl-color-danger-95` |
| diff --git a/docs/tokens/elevation.md b/docs/tokens/elevation.md index 0ae9656f0..f4c30c43c 100644 --- a/docs/tokens/elevation.md +++ b/docs/tokens/elevation.md @@ -2,10 +2,10 @@ Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the `box-shadow` property. These are especially useful for menus, popovers, and dialogs. -| Token | Example | -|-------|---------| -| `--sl-shadow-x-small` |
-| `--sl-shadow-small` |
-| `--sl-shadow-medium` |
-| `--sl-shadow-large` |
-| `--sl-shadow-x-large` |
+| Token | Example | +| --------------------- | -------------------------------------------------------------------------------- | +| `--sl-shadow-x-small` |
| +| `--sl-shadow-small` |
| +| `--sl-shadow-medium` |
| +| `--sl-shadow-large` |
| +| `--sl-shadow-x-large` |
| diff --git a/docs/tokens/spacing.md b/docs/tokens/spacing.md index 2318ac3a8..259193d6a 100644 --- a/docs/tokens/spacing.md +++ b/docs/tokens/spacing.md @@ -1,14 +1,14 @@ # Spacing Tokens -| Token | Value | Example -|-------|-------|--------- -| `--sl-spacing-xxx-small` | 0.125rem (2px) |
-| `--sl-spacing-xx-small` | 0.25rem (4px) |
-| `--sl-spacing-x-small` | 0.5rem (8px) |
-| `--sl-spacing-small` | 0.75rem (12px) |
-| `--sl-spacing-medium` | 1rem (16px) |
-| `--sl-spacing-large` | 1.25rem (20px) |
-| `--sl-spacing-x-large` | 1.75rem (28px) |
-| `--sl-spacing-xx-large` | 2.25rem (36px) |
-| `--sl-spacing-xxx-large` | 3rem (48px) |
-| `--sl-spacing-xxxx-large` | 4.5rem (72px) |
\ No newline at end of file +| Token | Value | Example | +| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- | +| `--sl-spacing-xxx-small` | 0.125rem (2px) |
| +| `--sl-spacing-xx-small` | 0.25rem (4px) |
| +| `--sl-spacing-x-small` | 0.5rem (8px) |
| +| `--sl-spacing-small` | 0.75rem (12px) |
| +| `--sl-spacing-medium` | 1rem (16px) |
| +| `--sl-spacing-large` | 1.25rem (20px) |
| +| `--sl-spacing-x-large` | 1.75rem (28px) |
| +| `--sl-spacing-xx-large` | 2.25rem (36px) |
| +| `--sl-spacing-xxx-large` | 3rem (48px) |
| +| `--sl-spacing-xxxx-large` | 4.5rem (72px) |
| diff --git a/docs/tokens/transition.md b/docs/tokens/transition.md index 357bd9ec5..3c600763b 100644 --- a/docs/tokens/transition.md +++ b/docs/tokens/transition.md @@ -1,12 +1,9 @@ # Transition Tokens -| Token | Value | Example -|-------|-------|--------- -| `--sl-transition-x-slow` | 1000ms |
-| `--sl-transition-slow` | 500ms |
-| `--sl-transition-medium` | 250ms |
-| `--sl-transition-fast` | 150ms |
-| `--sl-transition-x-fast` | 50ms |
- - - +| Token | Value | Example | +| ------------------------ | ------ | --------------------------------------------------------------------------------------------- | +| `--sl-transition-x-slow` | 1000ms |
| +| `--sl-transition-slow` | 500ms |
| +| `--sl-transition-medium` | 250ms |
| +| `--sl-transition-fast` | 150ms |
| +| `--sl-transition-x-fast` | 50ms |
| diff --git a/docs/tokens/typography.md b/docs/tokens/typography.md index 511c1c771..7e5e52c11 100644 --- a/docs/tokens/typography.md +++ b/docs/tokens/typography.md @@ -4,52 +4,49 @@ The default font stack is designed to be simple and highly available on as many devices as possible. -| Token | Value | Example -|-------|-------|--------- -| `--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. - +| Token | Value | Example | +| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| `--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. | ## Font Size Font sizes 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-font-size-xx-small` | 0.625rem (10px) | Aa -| `--sl-font-size-x-small` | 0.75rem (12px) | Aa -| `--sl-font-size-small` | 0.875rem (14px) | Aa -| `--sl-font-size-medium` | 1rem (16px) | Aa -| `--sl-font-size-large` | 1.25rem (20px) | Aa -| `--sl-font-size-x-large` | 1.5rem (24px) | Aa -| `--sl-font-size-xx-large` | 2.25rem (36px) | Aa -| `--sl-font-size-xxx-large` | 3rem (48px) | Aa -| `--sl-font-size-xxxx-large` | 4.5rem (72px) | Aa - +| Token | Value | Example | +| --------------------------- | --------------- | ----------------------------------------------------------------- | +| `--sl-font-size-xx-small` | 0.625rem (10px) | Aa | +| `--sl-font-size-x-small` | 0.75rem (12px) | Aa | +| `--sl-font-size-small` | 0.875rem (14px) | Aa | +| `--sl-font-size-medium` | 1rem (16px) | Aa | +| `--sl-font-size-large` | 1.25rem (20px) | Aa | +| `--sl-font-size-x-large` | 1.5rem (24px) | Aa | +| `--sl-font-size-xx-large` | 2.25rem (36px) | Aa | +| `--sl-font-size-xxx-large` | 3rem (48px) | Aa | +| `--sl-font-size-xxxx-large` | 4.5rem (72px) | Aa | ## Font Weight -| Token | Value | Example -|-------|-------|--------- -| `--sl-font-weight-light` | 300 | The quick brown fox jumped over the lazy dog. -| `--sl-font-weight-normal` | 400 | The quick brown fox jumped over the lazy dog. -| `--sl-font-weight-semibold` | 500 | The quick brown fox jumped over the lazy dog. -| `--sl-font-weight-bold` | 700 | The quick brown fox jumped over the lazy dog. - +| Token | Value | Example | +| --------------------------- | ----- | --------------------------------------------------------------------------------------------------------------- | +| `--sl-font-weight-light` | 300 | The quick brown fox jumped over the lazy dog. | +| `--sl-font-weight-normal` | 400 | The quick brown fox jumped over the lazy dog. | +| `--sl-font-weight-semibold` | 500 | The quick brown fox jumped over the lazy dog. | +| `--sl-font-weight-bold` | 700 | The quick brown fox jumped over the lazy dog. | ## Letter Spacing -| Token | Value | Example -|-------|-------|--------- -| `--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. +| Token | Value | Example | +| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | +| `--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. | ## Line Height -| Token | Value | Example -|-------|-------|--------- -| `--sl-line-height-dense` | 1.25 |
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.5 |
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` | 1.75 |
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.
+| Token | Value | Example | +| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--sl-line-height-dense` | 1.25 |
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.5 |
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` | 1.75 |
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.
| diff --git a/docs/tokens/z-index.md b/docs/tokens/z-index.md index 463c4785f..7840437bf 100644 --- a/docs/tokens/z-index.md +++ b/docs/tokens/z-index.md @@ -2,9 +2,9 @@ Z-indexes are still very much a work in progress. -| Token | Value -|-------|------- -| `--sl-z-index-default` | 1 -| `--sl-z-index-panel` | 80 -| `--sl-z-index-notification` | 90 -| `--sl-z-index-dialog` | 100 \ No newline at end of file +| Token | Value | +| --------------------------- | ----- | +| `--sl-z-index-default` | 1 | +| `--sl-z-index-panel` | 80 | +| `--sl-z-index-notification` | 90 | +| `--sl-z-index-dialog` | 100 |