js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettify docs

Browse Source
This commit is contained in:
Cory LaViska
2020-07-06 08:36:48 -04:00
parent 75d3e94924
commit 73a7d84550
34 changed files with 320 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -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)
[Documentation](https://shoelace.style)

2
docs/404.md
View File

@@ -1,3 +1,3 @@
# Not Found
Sorry, I couldn't find that page.
Sorry, I couldn't find that page.

2
docs/_sidebar.md
View File

@@ -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)

18
docs/components/alert.md
View File

@@ -20,39 +20,39 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-alert type="primary" open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</sl-alert>
<br>
<br />
<sl-alert type="success" open>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</sl-alert>
<br>
<br />
<sl-alert type="info" open>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
<strong>Your settings have been updated</strong><br />
Some settings will take affect the next time you log in.
</sl-alert>
<br>
<br />
<sl-alert type="warning" open>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>This will end your session</strong><br>
<strong>This will end your session</strong><br />
You will be logged out until you log in again.
</sl-alert>
<br>
<br />
<sl-alert type="danger" open>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Delete this file?</strong><br>
<strong>Delete this file?</strong><br />
This is permanent, which means forever!
</sl-alert>
```

11
docs/components/avatar.md
View File

@@ -11,7 +11,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-avatar initials="SL"></sl-avatar>
<sl-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Gray tabby kitten looking down"></sl-avatar>
<sl-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
alt="Gray tabby kitten looking down"
></sl-avatar>
```
## Examples
@@ -23,7 +26,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-avatar shape="square" initials="SL"></sl-avatar>
<sl-avatar shape="square" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Gray tabby kitten looking down"></sl-avatar>
<sl-avatar
shape="square"
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
alt="Gray tabby kitten looking down"
></sl-avatar>
```
### Custom Icon

4
docs/components/badge.md
View File

@@ -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
<sl-menu style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);">
<sl-menu
style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-label>Messages</sl-menu-label>
<sl-menu-item>Comments <sl-badge slot="suffix">4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix">12</sl-badge></sl-menu-item>

8
docs/components/checkbox.md
View File

@@ -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
<sl-checkbox>Default</sl-checkbox><br>
<sl-checkbox checked>Checked</sl-checkbox><br>
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br>
<sl-checkbox disabled>Disabled</sl-checkbox><br>
<sl-checkbox>Default</sl-checkbox><br />
<sl-checkbox checked>Checked</sl-checkbox><br />
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br />
<sl-checkbox disabled>Disabled</sl-checkbox><br />
```
[component-metadata:sl-checkbox]

20
docs/components/details.md
View File

@@ -8,7 +8,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-details summary="Toggle Me">
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.
</sl-details>
```
@@ -18,9 +19,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-details summary="Disabled" disabled>
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.
</sl-details>
```
### Grouping Details
@@ -30,15 +31,18 @@ Details are designed to function independently, but you can simulate a group whe
```html preview
<div class="details-group-example">
<sl-details summary="First" open>
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.
</sl-details>
<sl-details summary="Second">
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.
</sl-details>
<sl-details summary="Third">
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.
</sl-details>
</div>
@@ -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));
});
</script>
<style>
.details-group-example sl-details:not(:last-of-type) {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
</style>
```

6
docs/components/dialog.md
View File

@@ -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());
})();

20
docs/components/drawer.md
View File

@@ -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
<div style="position: relative; border: solid 2px var(--sl-color-gray-80); height: 300px; padding: 1rem; margin-bottom: 1rem;">
<div
style="position: relative; border: solid 2px var(--sl-color-gray-80); height: 300px; padding: 1rem; margin-bottom: 1rem;"
>
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
<sl-drawer label="Drawer" contained class="drawer-contained" style="--width: 50%;">
@@ -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());
})();
</script>

10
docs/components/form.md
View File

@@ -9,28 +9,28 @@ All of Shoelace's components make use of the [shadow DOM](https://developer.mozi
```html preview
<sl-form class="form-overview">
<sl-input name="name" type="text" label="Name"></sl-input>
<br>
<br />
<sl-select name="favorite" label="Select your favorite">
<sl-menu-item value="birds">Birds</sl-menu-item>
<sl-menu-item value="cats">Cats</sl-menu-item>
<sl-menu-item value="dogs">Dogs</sl-menu-item>
</sl-select>
<br>
<br />
<sl-checkbox name="agree" value="yes">
I totally agree
</sl-checkbox>
<br><br>
<br /><br />
<sl-button submit>Submit</sl-button>
</sl-form>
<script>
const form = document.querySelector('.form-overview');
form.addEventListener('slSubmit', event => {
const formData = event.detail.formData;
const formControls = event.detail.formControls;
let output = '';
// do something with the form data...
for (const entry of formData.entries()) {
output += `${entry[0]}: ${entry[1]}\n`;

27
docs/components/input.md
View File

@@ -16,7 +16,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input type="text" label="Name"></sl-input>
<br>
<br />
<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>
```
@@ -24,9 +24,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input placeholder="Small" size="small"></sl-input>
<br>
<br />
<sl-input placeholder="Medium" size="medium"></sl-input>
<br>
<br />
<sl-input placeholder="Large" size="large"></sl-input>
```
@@ -34,24 +34,25 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input placeholder="Small" size="small" pill></sl-input>
<br>
<br />
<sl-input placeholder="Medium" size="medium" pill></sl-input>
<br>
<br />
<sl-input placeholder="Large" size="large" pill></sl-input>
```
### Prefix & Suffix Icons
```html preview
<sl-input type="text" placeholder="Small" size="small">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>
<br>
<br />
<sl-input type="text" placeholder="Medium" size="medium">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>
<br>
<br />
<sl-input type="text" placeholder="Large" size="large">
<sl-icon name="tag" slot="prefix"></sl-icon>
<sl-icon name="gear" slot="suffix"></sl-icon>
@@ -62,9 +63,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
<br>
<br />
<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>
<br>
<br />
<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>
```
@@ -72,9 +73,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
<br>
<br />
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
<br>
<br />
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
```
@@ -82,9 +83,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
<br>
<br />
<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>
<br>
<br />
<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
```

4
docs/components/menu-divider.md
View File

@@ -7,7 +7,9 @@ Menu dividers are used to separate menu items within a menu.
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
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);">
<sl-menu
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-item value="1">Option 1</sl-menu-item>
<sl-menu-item value="2">Option 2</sl-menu-item>
<sl-menu-divider></sl-menu-divider>

5
docs/components/menu-item.md
View File

@@ -7,7 +7,9 @@ Menu items...
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
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);">
<sl-menu
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-item>Option 1</sl-menu-item>
<sl-menu-item>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item>
@@ -24,7 +26,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-icon slot="suffix" name="heart"></sl-icon>
</sl-menu-item>
</sl-menu>
```
[component-metadata:sl-menu-item]

4
docs/components/menu-label.md
View File

@@ -7,7 +7,9 @@ Menu labels are used to describe a group of menu items.
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
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);">
<sl-menu
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-label>Fruits</sl-menu-label>
<sl-menu-item value="apple">Apple</sl-menu-item>
<sl-menu-item value="banana">Banana</sl-menu-item>

4
docs/components/menu.md
View File

@@ -9,7 +9,9 @@ Menus are designed to work well with [dropdowns](/components/dropdown.md), but t
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
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);">
<sl-menu
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-item value="undo">Undo</sl-menu-item>
<sl-menu-item value="redo">Redo</sl-menu-item>
<sl-menu-divider></sl-menu-divider>

16
docs/components/progress-bar.md
View File

@@ -7,10 +7,10 @@ Progress bars...
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
<sl-progress-bar percentage="0"></sl-progress-bar><br>
<sl-progress-bar percentage="25"></sl-progress-bar><br>
<sl-progress-bar percentage="50"></sl-progress-bar><br>
<sl-progress-bar percentage="75"></sl-progress-bar><br>
<sl-progress-bar percentage="0"></sl-progress-bar><br />
<sl-progress-bar percentage="25"></sl-progress-bar><br />
<sl-progress-bar percentage="50"></sl-progress-bar><br />
<sl-progress-bar percentage="75"></sl-progress-bar><br />
<sl-progress-bar percentage="100"></sl-progress-bar>
```
@@ -19,10 +19,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
### Custom Height & Label
```html preview
<sl-progress-bar percentage="0" height="18">0%</sl-progress-bar><br>
<sl-progress-bar percentage="25" height="18">25%</sl-progress-bar><br>
<sl-progress-bar percentage="50" height="18">50%</sl-progress-bar><br>
<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
<sl-progress-bar percentage="0" height="18">0%</sl-progress-bar><br />
<sl-progress-bar percentage="25" height="18">25%</sl-progress-bar><br />
<sl-progress-bar percentage="50" height="18">50%</sl-progress-bar><br />
<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br />
<sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
```

14
docs/components/progress-ring.md
View File

@@ -8,10 +8,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<sl-progress-ring percentage="0">0%</sl-progress-ring><br>
<sl-progress-ring percentage="25">25%</sl-progress-ring><br>
<sl-progress-ring percentage="50">50%</sl-progress-ring><br>
<sl-progress-ring percentage="75">75%</sl-progress-ring><br>
<sl-progress-ring percentage="0">0%</sl-progress-ring><br />
<sl-progress-ring percentage="25">25%</sl-progress-ring><br />
<sl-progress-ring percentage="50">50%</sl-progress-ring><br />
<sl-progress-ring percentage="75">75%</sl-progress-ring><br />
<sl-progress-ring percentage="100">100%</sl-progress-ring>
</div>
```
@@ -22,9 +22,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<sl-progress-ring percentage="50" size="100">50%</sl-progress-ring><br>
<sl-progress-ring percentage="50" size="150">50%</sl-progress-ring><br>
<sl-progress-ring percentage="50" size="200">50%</sl-progress-ring><br>
<sl-progress-ring percentage="50" size="100">50%</sl-progress-ring><br />
<sl-progress-ring percentage="50" size="150">50%</sl-progress-ring><br />
<sl-progress-ring percentage="50" size="200">50%</sl-progress-ring><br />
</div>
```

6
docs/components/radio.md
View File

@@ -7,9 +7,9 @@ Radios...
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
<sl-radio>Default</sl-radio><br>
<sl-radio checked>Checked</sl-radio><br>
<sl-radio disabled>Disabled</sl-radio><br>
<sl-radio>Default</sl-radio><br />
<sl-radio checked>Checked</sl-radio><br />
<sl-radio disabled>Disabled</sl-radio><br />
```
[component-metadata:sl-radio]

4
docs/components/select.md
View File

@@ -53,7 +53,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
<br>
<br />
<sl-select placeholder="Medium" size="medium" multiple>
<sl-menu-item value="option-1">Option 1</sl-menu-item>
@@ -61,7 +61,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
<br>
<br />
<sl-select placeholder="Large" size="large" multiple>
<sl-menu-item value="option-1">Option 1</sl-menu-item>

4
docs/components/switch.md
View File

@@ -9,11 +9,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
```html preview
<sl-switch>Default</sl-switch>
<br>
<br />
<sl-switch checked>Checked</sl-switch>
<br>
<br />
<sl-switch disabled>Disabled</sl-switch>
```

1
docs/components/tab-group.md
View File

@@ -37,6 +37,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
```
### Tabs on Left
```html preview

8
docs/components/tag.md
View File

@@ -25,7 +25,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tag type="warning" size="small">Warning</sl-tag>
<sl-tag type="danger" size="small">Danger</sl-tag>
<br><br>
<br /><br />
<sl-tag size="medium" type="primary">Primary</sl-tag>
<sl-tag size="medium" type="success">Success</sl-tag>
@@ -33,7 +33,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tag size="medium" type="warning">Warning</sl-tag>
<sl-tag size="medium" type="danger">Danger</sl-tag>
<br><br>
<br /><br />
<sl-tag size="large" type="primary">Primary</sl-tag>
<sl-tag size="large" type="success">Success</sl-tag>
@@ -51,7 +51,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tag type="warning" size="small" removable>Warning</sl-tag>
<sl-tag type="danger" size="small" removable>Danger</sl-tag>
<br><br>
<br /><br />
<sl-tag size="medium" type="primary" removable>Primary</sl-tag>
<sl-tag size="medium" type="success" removable>Success</sl-tag>
@@ -59,7 +59,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tag size="medium" type="warning" removable>Warning</sl-tag>
<sl-tag size="medium" type="danger" removable>Danger</sl-tag>
<br><br>
<br /><br />
<sl-tag size="large" type="primary" removable>Primary</sl-tag>
<sl-tag size="large" type="success" removable>Success</sl-tag>

22
docs/components/tooltip.md
View File

@@ -55,7 +55,7 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
<div class="tooltip-placement-example-row">
<sl-tooltip content="left-end" placement="left-end">
<sl-button></sl-button>
</sl-tooltip>
</sl-tooltip>
<sl-tooltip content="right-end" placement="right-end">
<sl-button></sl-button>
@@ -74,7 +74,7 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
<sl-tooltip content="bottom-end" placement="bottom-end">
<sl-button></sl-button>
</sl-tooltip>
</div>
</div>
</div>
<style>
@@ -90,17 +90,17 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
.tooltip-placement-example sl-button {
float: left;
margin-right: .25rem;
margin-bottom: .25rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.tooltip-placement-example [placement="top-start"] sl-button,
.tooltip-placement-example [placement="bottom-start"] sl-button {
margin-left: calc(40px + .25rem);
.tooltip-placement-example [placement='top-start'] sl-button,
.tooltip-placement-example [placement='bottom-start'] sl-button {
margin-left: calc(40px + 0.25rem);
}
.tooltip-placement-example [placement^="right"] sl-button {
margin-left: calc((40px * 3) + (.25rem * 3));
.tooltip-placement-example [placement^='right'] sl-button {
margin-left: calc((40px * 3) + (0.25rem * 3));
}
</style>
```
@@ -122,12 +122,11 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
<sl-avatar></sl-avatar>
</sl-tooltip>
<script>
const tooltip = document.querySelector('.manual-tooltip');
const toggle = tooltip.previousElementSibling;
toggle.addEventListener('click', () => tooltip.open = !tooltip.open);
toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>
```
@@ -139,7 +138,6 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
<sl-button>Above</sl-button>
</sl-tooltip>
<sl-tooltip content="This is a tooltip" placement="bottom">
<sl-button>Below</sl-button>
</sl-tooltip>

1
docs/getting-started/customizing.md
View File

@@ -1,4 +1,3 @@
# Customizing
TODO

4
docs/getting-started/overview.md
View File

@@ -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 `<head>` section:
```html
<link rel="stylesheet" src="//SOME_CDN/shoelace/shoelace.css">
<link rel="stylesheet" src="//SOME_CDN/shoelace/shoelace.css" />
<script type="module" src="//SOME_CDN/shoelace/shoelace.esm.js"></script>
```
@@ -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

1
docs/getting-started/usage.md
View File

@@ -15,4 +15,3 @@ TODO
## Angular
TODO

18
docs/tokens/border-radius.md
View File

@@ -1,12 +1,10 @@
# Border Radius Tokens
| Token | Value | Example
|-------|-------|---------
| `--sl-border-radius-small` | 0.125rem (2px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div>
| `--sl-border-radius-medium` | 0.25rem (4px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-medium);"></div>
| `--sl-border-radius-large` | 0.5rem (8px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-large);"></div>
| `--sl-border-radius-x-large` | 1rem (16px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-x-large);"></div>
| `--sl-border-radius-circle` | 50% | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-circle);"></div>
| `--sl-border-radius-pill` | 9999px | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-pill); width: 6rem;"></div>
| Token | Value | Example |
| ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- |
| `--sl-border-radius-small` | 0.125rem (2px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div> |
| `--sl-border-radius-medium` | 0.25rem (4px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-medium);"></div> |
| `--sl-border-radius-large` | 0.5rem (8px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-large);"></div> |
| `--sl-border-radius-x-large` | 1rem (16px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-x-large);"></div> |
| `--sl-border-radius-circle` | 50% | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-circle);"></div> |
| `--sl-border-radius-pill` | 9999px | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-pill); width: 6rem;"></div> |

249
docs/tokens/color.md
View File

@@ -7,145 +7,140 @@ TODO
## Primary
| Token | Example |
|-------|---------|
| `--sl-color-primary-10` | <div class="color-demo" style="background-color: var(--sl-color-primary-10);"></div>
| `--sl-color-primary-15` | <div class="color-demo" style="background-color: var(--sl-color-primary-15);"></div>
| `--sl-color-primary-20` | <div class="color-demo" style="background-color: var(--sl-color-primary-20);"></div>
| `--sl-color-primary-25` | <div class="color-demo" style="background-color: var(--sl-color-primary-25);"></div>
| `--sl-color-primary-30` | <div class="color-demo" style="background-color: var(--sl-color-primary-30);"></div>
| `--sl-color-primary-35` | <div class="color-demo" style="background-color: var(--sl-color-primary-35);"></div>
| `--sl-color-primary-40` | <div class="color-demo" style="background-color: var(--sl-color-primary-40);"></div>
| `--sl-color-primary-45` | <div class="color-demo" style="background-color: var(--sl-color-primary-45);"></div>
| `--sl-color-primary-50` | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div>
| `--sl-color-primary-55` | <div class="color-demo" style="background-color: var(--sl-color-primary-55);"></div>
| `--sl-color-primary-60` | <div class="color-demo" style="background-color: var(--sl-color-primary-60);"></div>
| `--sl-color-primary-65` | <div class="color-demo" style="background-color: var(--sl-color-primary-65);"></div>
| `--sl-color-primary-70` | <div class="color-demo" style="background-color: var(--sl-color-primary-70);"></div>
| `--sl-color-primary-75` | <div class="color-demo" style="background-color: var(--sl-color-primary-75);"></div>
| `--sl-color-primary-80` | <div class="color-demo" style="background-color: var(--sl-color-primary-80);"></div>
| `--sl-color-primary-85` | <div class="color-demo" style="background-color: var(--sl-color-primary-85);"></div>
| `--sl-color-primary-90` | <div class="color-demo" style="background-color: var(--sl-color-primary-90);"></div>
| `--sl-color-primary-95` | <div class="color-demo" style="background-color: var(--sl-color-primary-95);"></div>
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-primary-10` | <div class="color-demo" style="background-color: var(--sl-color-primary-10);"></div> |
| `--sl-color-primary-15` | <div class="color-demo" style="background-color: var(--sl-color-primary-15);"></div> |
| `--sl-color-primary-20` | <div class="color-demo" style="background-color: var(--sl-color-primary-20);"></div> |
| `--sl-color-primary-25` | <div class="color-demo" style="background-color: var(--sl-color-primary-25);"></div> |
| `--sl-color-primary-30` | <div class="color-demo" style="background-color: var(--sl-color-primary-30);"></div> |
| `--sl-color-primary-35` | <div class="color-demo" style="background-color: var(--sl-color-primary-35);"></div> |
| `--sl-color-primary-40` | <div class="color-demo" style="background-color: var(--sl-color-primary-40);"></div> |
| `--sl-color-primary-45` | <div class="color-demo" style="background-color: var(--sl-color-primary-45);"></div> |
| `--sl-color-primary-50` | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div> |
| `--sl-color-primary-55` | <div class="color-demo" style="background-color: var(--sl-color-primary-55);"></div> |
| `--sl-color-primary-60` | <div class="color-demo" style="background-color: var(--sl-color-primary-60);"></div> |
| `--sl-color-primary-65` | <div class="color-demo" style="background-color: var(--sl-color-primary-65);"></div> |
| `--sl-color-primary-70` | <div class="color-demo" style="background-color: var(--sl-color-primary-70);"></div> |
| `--sl-color-primary-75` | <div class="color-demo" style="background-color: var(--sl-color-primary-75);"></div> |
| `--sl-color-primary-80` | <div class="color-demo" style="background-color: var(--sl-color-primary-80);"></div> |
| `--sl-color-primary-85` | <div class="color-demo" style="background-color: var(--sl-color-primary-85);"></div> |
| `--sl-color-primary-90` | <div class="color-demo" style="background-color: var(--sl-color-primary-90);"></div> |
| `--sl-color-primary-95` | <div class="color-demo" style="background-color: var(--sl-color-primary-95);"></div> |
## Gray
| Token | Example |
|-------|---------|
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div>
| `--sl-color-gray-10` | <div class="color-demo" style="background-color: var(--sl-color-gray-10);"></div>
| `--sl-color-gray-15` | <div class="color-demo" style="background-color: var(--sl-color-gray-15);"></div>
| `--sl-color-gray-20` | <div class="color-demo" style="background-color: var(--sl-color-gray-20);"></div>
| `--sl-color-gray-25` | <div class="color-demo" style="background-color: var(--sl-color-gray-25);"></div>
| `--sl-color-gray-30` | <div class="color-demo" style="background-color: var(--sl-color-gray-30);"></div>
| `--sl-color-gray-35` | <div class="color-demo" style="background-color: var(--sl-color-gray-35);"></div>
| `--sl-color-gray-40` | <div class="color-demo" style="background-color: var(--sl-color-gray-40);"></div>
| `--sl-color-gray-45` | <div class="color-demo" style="background-color: var(--sl-color-gray-45);"></div>
| `--sl-color-gray-50` | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div>
| `--sl-color-gray-55` | <div class="color-demo" style="background-color: var(--sl-color-gray-55);"></div>
| `--sl-color-gray-60` | <div class="color-demo" style="background-color: var(--sl-color-gray-60);"></div>
| `--sl-color-gray-65` | <div class="color-demo" style="background-color: var(--sl-color-gray-65);"></div>
| `--sl-color-gray-70` | <div class="color-demo" style="background-color: var(--sl-color-gray-70);"></div>
| `--sl-color-gray-75` | <div class="color-demo" style="background-color: var(--sl-color-gray-75);"></div>
| `--sl-color-gray-80` | <div class="color-demo" style="background-color: var(--sl-color-gray-80);"></div>
| `--sl-color-gray-85` | <div class="color-demo" style="background-color: var(--sl-color-gray-85);"></div>
| `--sl-color-gray-90` | <div class="color-demo" style="background-color: var(--sl-color-gray-90);"></div>
| `--sl-color-gray-95` | <div class="color-demo" style="background-color: var(--sl-color-gray-95);"></div>
| `--sl-color-white` | <div class="color-demo" style="background-color: var(--sl-color-white);"></div>
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div> |
| `--sl-color-gray-10` | <div class="color-demo" style="background-color: var(--sl-color-gray-10);"></div> |
| `--sl-color-gray-15` | <div class="color-demo" style="background-color: var(--sl-color-gray-15);"></div> |
| `--sl-color-gray-20` | <div class="color-demo" style="background-color: var(--sl-color-gray-20);"></div> |
| `--sl-color-gray-25` | <div class="color-demo" style="background-color: var(--sl-color-gray-25);"></div> |
| `--sl-color-gray-30` | <div class="color-demo" style="background-color: var(--sl-color-gray-30);"></div> |
| `--sl-color-gray-35` | <div class="color-demo" style="background-color: var(--sl-color-gray-35);"></div> |
| `--sl-color-gray-40` | <div class="color-demo" style="background-color: var(--sl-color-gray-40);"></div> |
| `--sl-color-gray-45` | <div class="color-demo" style="background-color: var(--sl-color-gray-45);"></div> |
| `--sl-color-gray-50` | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div> |
| `--sl-color-gray-55` | <div class="color-demo" style="background-color: var(--sl-color-gray-55);"></div> |
| `--sl-color-gray-60` | <div class="color-demo" style="background-color: var(--sl-color-gray-60);"></div> |
| `--sl-color-gray-65` | <div class="color-demo" style="background-color: var(--sl-color-gray-65);"></div> |
| `--sl-color-gray-70` | <div class="color-demo" style="background-color: var(--sl-color-gray-70);"></div> |
| `--sl-color-gray-75` | <div class="color-demo" style="background-color: var(--sl-color-gray-75);"></div> |
| `--sl-color-gray-80` | <div class="color-demo" style="background-color: var(--sl-color-gray-80);"></div> |
| `--sl-color-gray-85` | <div class="color-demo" style="background-color: var(--sl-color-gray-85);"></div> |
| `--sl-color-gray-90` | <div class="color-demo" style="background-color: var(--sl-color-gray-90);"></div> |
| `--sl-color-gray-95` | <div class="color-demo" style="background-color: var(--sl-color-gray-95);"></div> |
| `--sl-color-white` | <div class="color-demo" style="background-color: var(--sl-color-white);"></div> |
## Success
| Token | Example |
|-------|---------|
| `--sl-color-success-10` | <div class="color-demo" style="background-color: var(--sl-color-success-10);"></div>
| `--sl-color-success-15` | <div class="color-demo" style="background-color: var(--sl-color-success-15);"></div>
| `--sl-color-success-20` | <div class="color-demo" style="background-color: var(--sl-color-success-20);"></div>
| `--sl-color-success-25` | <div class="color-demo" style="background-color: var(--sl-color-success-25);"></div>
| `--sl-color-success-30` | <div class="color-demo" style="background-color: var(--sl-color-success-30);"></div>
| `--sl-color-success-35` | <div class="color-demo" style="background-color: var(--sl-color-success-35);"></div>
| `--sl-color-success-40` | <div class="color-demo" style="background-color: var(--sl-color-success-40);"></div>
| `--sl-color-success-45` | <div class="color-demo" style="background-color: var(--sl-color-success-45);"></div>
| `--sl-color-success-50` | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div>
| `--sl-color-success-55` | <div class="color-demo" style="background-color: var(--sl-color-success-55);"></div>
| `--sl-color-success-60` | <div class="color-demo" style="background-color: var(--sl-color-success-60);"></div>
| `--sl-color-success-65` | <div class="color-demo" style="background-color: var(--sl-color-success-65);"></div>
| `--sl-color-success-70` | <div class="color-demo" style="background-color: var(--sl-color-success-70);"></div>
| `--sl-color-success-75` | <div class="color-demo" style="background-color: var(--sl-color-success-75);"></div>
| `--sl-color-success-80` | <div class="color-demo" style="background-color: var(--sl-color-success-80);"></div>
| `--sl-color-success-85` | <div class="color-demo" style="background-color: var(--sl-color-success-85);"></div>
| `--sl-color-success-90` | <div class="color-demo" style="background-color: var(--sl-color-success-90);"></div>
| `--sl-color-success-95` | <div class="color-demo" style="background-color: var(--sl-color-success-95);"></div>
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-success-10` | <div class="color-demo" style="background-color: var(--sl-color-success-10);"></div> |
| `--sl-color-success-15` | <div class="color-demo" style="background-color: var(--sl-color-success-15);"></div> |
| `--sl-color-success-20` | <div class="color-demo" style="background-color: var(--sl-color-success-20);"></div> |
| `--sl-color-success-25` | <div class="color-demo" style="background-color: var(--sl-color-success-25);"></div> |
| `--sl-color-success-30` | <div class="color-demo" style="background-color: var(--sl-color-success-30);"></div> |
| `--sl-color-success-35` | <div class="color-demo" style="background-color: var(--sl-color-success-35);"></div> |
| `--sl-color-success-40` | <div class="color-demo" style="background-color: var(--sl-color-success-40);"></div> |
| `--sl-color-success-45` | <div class="color-demo" style="background-color: var(--sl-color-success-45);"></div> |
| `--sl-color-success-50` | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div> |
| `--sl-color-success-55` | <div class="color-demo" style="background-color: var(--sl-color-success-55);"></div> |
| `--sl-color-success-60` | <div class="color-demo" style="background-color: var(--sl-color-success-60);"></div> |
| `--sl-color-success-65` | <div class="color-demo" style="background-color: var(--sl-color-success-65);"></div> |
| `--sl-color-success-70` | <div class="color-demo" style="background-color: var(--sl-color-success-70);"></div> |
| `--sl-color-success-75` | <div class="color-demo" style="background-color: var(--sl-color-success-75);"></div> |
| `--sl-color-success-80` | <div class="color-demo" style="background-color: var(--sl-color-success-80);"></div> |
| `--sl-color-success-85` | <div class="color-demo" style="background-color: var(--sl-color-success-85);"></div> |
| `--sl-color-success-90` | <div class="color-demo" style="background-color: var(--sl-color-success-90);"></div> |
| `--sl-color-success-95` | <div class="color-demo" style="background-color: var(--sl-color-success-95);"></div> |
## Info
| Token | Example |
|-------|---------|
| `--sl-color-info-10` | <div class="color-demo" style="background-color: var(--sl-color-info-10);"></div>
| `--sl-color-info-15` | <div class="color-demo" style="background-color: var(--sl-color-info-15);"></div>
| `--sl-color-info-20` | <div class="color-demo" style="background-color: var(--sl-color-info-20);"></div>
| `--sl-color-info-25` | <div class="color-demo" style="background-color: var(--sl-color-info-25);"></div>
| `--sl-color-info-30` | <div class="color-demo" style="background-color: var(--sl-color-info-30);"></div>
| `--sl-color-info-35` | <div class="color-demo" style="background-color: var(--sl-color-info-35);"></div>
| `--sl-color-info-40` | <div class="color-demo" style="background-color: var(--sl-color-info-40);"></div>
| `--sl-color-info-45` | <div class="color-demo" style="background-color: var(--sl-color-info-45);"></div>
| `--sl-color-info-50` | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div>
| `--sl-color-info-55` | <div class="color-demo" style="background-color: var(--sl-color-info-55);"></div>
| `--sl-color-info-60` | <div class="color-demo" style="background-color: var(--sl-color-info-60);"></div>
| `--sl-color-info-65` | <div class="color-demo" style="background-color: var(--sl-color-info-65);"></div>
| `--sl-color-info-70` | <div class="color-demo" style="background-color: var(--sl-color-info-70);"></div>
| `--sl-color-info-75` | <div class="color-demo" style="background-color: var(--sl-color-info-75);"></div>
| `--sl-color-info-80` | <div class="color-demo" style="background-color: var(--sl-color-info-80);"></div>
| `--sl-color-info-85` | <div class="color-demo" style="background-color: var(--sl-color-info-85);"></div>
| `--sl-color-info-90` | <div class="color-demo" style="background-color: var(--sl-color-info-90);"></div>
| `--sl-color-info-95` | <div class="color-demo" style="background-color: var(--sl-color-info-95);"></div>
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-info-10` | <div class="color-demo" style="background-color: var(--sl-color-info-10);"></div> |
| `--sl-color-info-15` | <div class="color-demo" style="background-color: var(--sl-color-info-15);"></div> |
| `--sl-color-info-20` | <div class="color-demo" style="background-color: var(--sl-color-info-20);"></div> |
| `--sl-color-info-25` | <div class="color-demo" style="background-color: var(--sl-color-info-25);"></div> |
| `--sl-color-info-30` | <div class="color-demo" style="background-color: var(--sl-color-info-30);"></div> |
| `--sl-color-info-35` | <div class="color-demo" style="background-color: var(--sl-color-info-35);"></div> |
| `--sl-color-info-40` | <div class="color-demo" style="background-color: var(--sl-color-info-40);"></div> |
| `--sl-color-info-45` | <div class="color-demo" style="background-color: var(--sl-color-info-45);"></div> |
| `--sl-color-info-50` | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div> |
| `--sl-color-info-55` | <div class="color-demo" style="background-color: var(--sl-color-info-55);"></div> |
| `--sl-color-info-60` | <div class="color-demo" style="background-color: var(--sl-color-info-60);"></div> |
| `--sl-color-info-65` | <div class="color-demo" style="background-color: var(--sl-color-info-65);"></div> |
| `--sl-color-info-70` | <div class="color-demo" style="background-color: var(--sl-color-info-70);"></div> |
| `--sl-color-info-75` | <div class="color-demo" style="background-color: var(--sl-color-info-75);"></div> |
| `--sl-color-info-80` | <div class="color-demo" style="background-color: var(--sl-color-info-80);"></div> |
| `--sl-color-info-85` | <div class="color-demo" style="background-color: var(--sl-color-info-85);"></div> |
| `--sl-color-info-90` | <div class="color-demo" style="background-color: var(--sl-color-info-90);"></div> |
| `--sl-color-info-95` | <div class="color-demo" style="background-color: var(--sl-color-info-95);"></div> |
## Warning
| Token | Example |
|-------|---------|
| `--sl-color-warning-10` | <div class="color-demo" style="background-color: var(--sl-color-warning-10);"></div>
| `--sl-color-warning-15` | <div class="color-demo" style="background-color: var(--sl-color-warning-15);"></div>
| `--sl-color-warning-20` | <div class="color-demo" style="background-color: var(--sl-color-warning-20);"></div>
| `--sl-color-warning-25` | <div class="color-demo" style="background-color: var(--sl-color-warning-25);"></div>
| `--sl-color-warning-30` | <div class="color-demo" style="background-color: var(--sl-color-warning-30);"></div>
| `--sl-color-warning-35` | <div class="color-demo" style="background-color: var(--sl-color-warning-35);"></div>
| `--sl-color-warning-40` | <div class="color-demo" style="background-color: var(--sl-color-warning-40);"></div>
| `--sl-color-warning-45` | <div class="color-demo" style="background-color: var(--sl-color-warning-45);"></div>
| `--sl-color-warning-50` | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div>
| `--sl-color-warning-55` | <div class="color-demo" style="background-color: var(--sl-color-warning-55);"></div>
| `--sl-color-warning-60` | <div class="color-demo" style="background-color: var(--sl-color-warning-60);"></div>
| `--sl-color-warning-65` | <div class="color-demo" style="background-color: var(--sl-color-warning-65);"></div>
| `--sl-color-warning-70` | <div class="color-demo" style="background-color: var(--sl-color-warning-70);"></div>
| `--sl-color-warning-75` | <div class="color-demo" style="background-color: var(--sl-color-warning-75);"></div>
| `--sl-color-warning-80` | <div class="color-demo" style="background-color: var(--sl-color-warning-80);"></div>
| `--sl-color-warning-85` | <div class="color-demo" style="background-color: var(--sl-color-warning-85);"></div>
| `--sl-color-warning-90` | <div class="color-demo" style="background-color: var(--sl-color-warning-90);"></div>
| `--sl-color-warning-95` | <div class="color-demo" style="background-color: var(--sl-color-warning-95);"></div>
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-warning-10` | <div class="color-demo" style="background-color: var(--sl-color-warning-10);"></div> |
| `--sl-color-warning-15` | <div class="color-demo" style="background-color: var(--sl-color-warning-15);"></div> |
| `--sl-color-warning-20` | <div class="color-demo" style="background-color: var(--sl-color-warning-20);"></div> |
| `--sl-color-warning-25` | <div class="color-demo" style="background-color: var(--sl-color-warning-25);"></div> |
| `--sl-color-warning-30` | <div class="color-demo" style="background-color: var(--sl-color-warning-30);"></div> |
| `--sl-color-warning-35` | <div class="color-demo" style="background-color: var(--sl-color-warning-35);"></div> |
| `--sl-color-warning-40` | <div class="color-demo" style="background-color: var(--sl-color-warning-40);"></div> |
| `--sl-color-warning-45` | <div class="color-demo" style="background-color: var(--sl-color-warning-45);"></div> |
| `--sl-color-warning-50` | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div> |
| `--sl-color-warning-55` | <div class="color-demo" style="background-color: var(--sl-color-warning-55);"></div> |
| `--sl-color-warning-60` | <div class="color-demo" style="background-color: var(--sl-color-warning-60);"></div> |
| `--sl-color-warning-65` | <div class="color-demo" style="background-color: var(--sl-color-warning-65);"></div> |
| `--sl-color-warning-70` | <div class="color-demo" style="background-color: var(--sl-color-warning-70);"></div> |
| `--sl-color-warning-75` | <div class="color-demo" style="background-color: var(--sl-color-warning-75);"></div> |
| `--sl-color-warning-80` | <div class="color-demo" style="background-color: var(--sl-color-warning-80);"></div> |
| `--sl-color-warning-85` | <div class="color-demo" style="background-color: var(--sl-color-warning-85);"></div> |
| `--sl-color-warning-90` | <div class="color-demo" style="background-color: var(--sl-color-warning-90);"></div> |
| `--sl-color-warning-95` | <div class="color-demo" style="background-color: var(--sl-color-warning-95);"></div> |
## Danger
| Token | Example |
|-------|---------|
| `--sl-color-danger-10` | <div class="color-demo" style="background-color: var(--sl-color-danger-10);"></div>
| `--sl-color-danger-15` | <div class="color-demo" style="background-color: var(--sl-color-danger-15);"></div>
| `--sl-color-danger-20` | <div class="color-demo" style="background-color: var(--sl-color-danger-20);"></div>
| `--sl-color-danger-25` | <div class="color-demo" style="background-color: var(--sl-color-danger-25);"></div>
| `--sl-color-danger-30` | <div class="color-demo" style="background-color: var(--sl-color-danger-30);"></div>
| `--sl-color-danger-35` | <div class="color-demo" style="background-color: var(--sl-color-danger-35);"></div>
| `--sl-color-danger-40` | <div class="color-demo" style="background-color: var(--sl-color-danger-40);"></div>
| `--sl-color-danger-45` | <div class="color-demo" style="background-color: var(--sl-color-danger-45);"></div>
| `--sl-color-danger-50` | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div>
| `--sl-color-danger-55` | <div class="color-demo" style="background-color: var(--sl-color-danger-55);"></div>
| `--sl-color-danger-60` | <div class="color-demo" style="background-color: var(--sl-color-danger-60);"></div>
| `--sl-color-danger-65` | <div class="color-demo" style="background-color: var(--sl-color-danger-65);"></div>
| `--sl-color-danger-70` | <div class="color-demo" style="background-color: var(--sl-color-danger-70);"></div>
| `--sl-color-danger-75` | <div class="color-demo" style="background-color: var(--sl-color-danger-75);"></div>
| `--sl-color-danger-80` | <div class="color-demo" style="background-color: var(--sl-color-danger-80);"></div>
| `--sl-color-danger-85` | <div class="color-demo" style="background-color: var(--sl-color-danger-85);"></div>
| `--sl-color-danger-90` | <div class="color-demo" style="background-color: var(--sl-color-danger-90);"></div>
| `--sl-color-danger-95` | <div class="color-demo" style="background-color: var(--sl-color-danger-95);"></div>
| Token | Example |
| ---------------------- | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-10` | <div class="color-demo" style="background-color: var(--sl-color-danger-10);"></div> |
| `--sl-color-danger-15` | <div class="color-demo" style="background-color: var(--sl-color-danger-15);"></div> |
| `--sl-color-danger-20` | <div class="color-demo" style="background-color: var(--sl-color-danger-20);"></div> |
| `--sl-color-danger-25` | <div class="color-demo" style="background-color: var(--sl-color-danger-25);"></div> |
| `--sl-color-danger-30` | <div class="color-demo" style="background-color: var(--sl-color-danger-30);"></div> |
| `--sl-color-danger-35` | <div class="color-demo" style="background-color: var(--sl-color-danger-35);"></div> |
| `--sl-color-danger-40` | <div class="color-demo" style="background-color: var(--sl-color-danger-40);"></div> |
| `--sl-color-danger-45` | <div class="color-demo" style="background-color: var(--sl-color-danger-45);"></div> |
| `--sl-color-danger-50` | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div> |
| `--sl-color-danger-55` | <div class="color-demo" style="background-color: var(--sl-color-danger-55);"></div> |
| `--sl-color-danger-60` | <div class="color-demo" style="background-color: var(--sl-color-danger-60);"></div> |
| `--sl-color-danger-65` | <div class="color-demo" style="background-color: var(--sl-color-danger-65);"></div> |
| `--sl-color-danger-70` | <div class="color-demo" style="background-color: var(--sl-color-danger-70);"></div> |
| `--sl-color-danger-75` | <div class="color-demo" style="background-color: var(--sl-color-danger-75);"></div> |
| `--sl-color-danger-80` | <div class="color-demo" style="background-color: var(--sl-color-danger-80);"></div> |
| `--sl-color-danger-85` | <div class="color-demo" style="background-color: var(--sl-color-danger-85);"></div> |
| `--sl-color-danger-90` | <div class="color-demo" style="background-color: var(--sl-color-danger-90);"></div> |
| `--sl-color-danger-95` | <div class="color-demo" style="background-color: var(--sl-color-danger-95);"></div> |

14
docs/tokens/elevation.md
View File

@@ -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` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div>
| `--sl-shadow-small` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div>
| `--sl-shadow-medium` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div>
| `--sl-shadow-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div>
| `--sl-shadow-x-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div>
| Token | Example |
| --------------------- | -------------------------------------------------------------------------------- |
| `--sl-shadow-x-small` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div> |
| `--sl-shadow-small` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div> |
| `--sl-shadow-medium` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div> |
| `--sl-shadow-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div> |
| `--sl-shadow-x-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div> |

24
docs/tokens/spacing.md
View File

@@ -1,14 +1,14 @@
# Spacing Tokens
| Token | Value | Example
|-------|-------|---------
| `--sl-spacing-xxx-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-small); height: var(--sl-spacing-xxx-small);"></div>
| `--sl-spacing-xx-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-small); height: var(--sl-spacing-xx-small);"></div>
| `--sl-spacing-x-small` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div>
| `--sl-spacing-small` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div>
| `--sl-spacing-medium` | 1rem (16px) | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div>
| `--sl-spacing-large` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div>
| `--sl-spacing-x-large` | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div>
| `--sl-spacing-xx-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-large); height: var(--sl-spacing-xx-large);"></div>
| `--sl-spacing-xxx-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-large); height: var(--sl-spacing-xxx-large);"></div>
| `--sl-spacing-xxxx-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxxx-large); height: var(--sl-spacing-xxxx-large);"></div>
| Token | Value | Example |
| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- |
| `--sl-spacing-xxx-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-small); height: var(--sl-spacing-xxx-small);"></div> |
| `--sl-spacing-xx-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-small); height: var(--sl-spacing-xx-small);"></div> |
| `--sl-spacing-x-small` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div> |
| `--sl-spacing-small` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div> |
| `--sl-spacing-medium` | 1rem (16px) | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div> |
| `--sl-spacing-large` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div> |
| `--sl-spacing-x-large` | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div> |
| `--sl-spacing-xx-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-large); height: var(--sl-spacing-xx-large);"></div> |
| `--sl-spacing-xxx-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-large); height: var(--sl-spacing-xxx-large);"></div> |
| `--sl-spacing-xxxx-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxxx-large); height: var(--sl-spacing-xxxx-large);"></div> |

17
docs/tokens/transition.md
View File

@@ -1,12 +1,9 @@
# Transition Tokens
| Token | Value | Example
|-------|-------|---------
| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div>
| `--sl-transition-slow` | 500ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-slow);"></div>
| `--sl-transition-medium` | 250ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-medium);"></div>
| `--sl-transition-fast` | 150ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-fast);"></div>
| `--sl-transition-x-fast` | 50ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-fast);"></div>
| Token | Value | Example |
| ------------------------ | ------ | --------------------------------------------------------------------------------------------- |
| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div> |
| `--sl-transition-slow` | 500ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-slow);"></div> |
| `--sl-transition-medium` | 250ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-medium);"></div> |
| `--sl-transition-fast` | 150ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-fast);"></div> |
| `--sl-transition-x-fast` | 50ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-fast);"></div> |

67
docs/tokens/typography.md
View File

@@ -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' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span>
| `--sl-font-serif` | Georgia, 'Times New Roman', serif | <span style="font-family: var(--sl-font-serif)">The quick brown fox jumped over the lazy dog.</span>
| `--sl-font-mono` | Menlo, Monaco, 'Courier New', monospace | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span>
| 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' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-font-serif` | Georgia, 'Times New Roman', serif | <span style="font-family: var(--sl-font-serif)">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-font-mono` | Menlo, Monaco, 'Courier New', monospace | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span> |
## 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) | <span style="font-size: var(--sl-font-size-xx-small)">Aa</span>
| `--sl-font-size-x-small` | 0.75rem (12px) | <span style="font-size: var(--sl-font-size-x-small)">Aa</span>
| `--sl-font-size-small` | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span>
| `--sl-font-size-medium` | 1rem (16px) | <span style="font-size: var(--sl-font-size-medium)">Aa</span>
| `--sl-font-size-large` | 1.25rem (20px) | <span style="font-size: var(--sl-font-size-large)">Aa</span>
| `--sl-font-size-x-large` | 1.5rem (24px) | <span style="font-size: var(--sl-font-size-x-large)">Aa</span>
| `--sl-font-size-xx-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-xx-large)">Aa</span>
| `--sl-font-size-xxx-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-xxx-large)">Aa</span>
| `--sl-font-size-xxxx-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-xxxx-large)">Aa</span>
| Token | Value | Example |
| --------------------------- | --------------- | ----------------------------------------------------------------- |
| `--sl-font-size-xx-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-xx-small)">Aa</span> |
| `--sl-font-size-x-small` | 0.75rem (12px) | <span style="font-size: var(--sl-font-size-x-small)">Aa</span> |
| `--sl-font-size-small` | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span> |
| `--sl-font-size-medium` | 1rem (16px) | <span style="font-size: var(--sl-font-size-medium)">Aa</span> |
| `--sl-font-size-large` | 1.25rem (20px) | <span style="font-size: var(--sl-font-size-large)">Aa</span> |
| `--sl-font-size-x-large` | 1.5rem (24px) | <span style="font-size: var(--sl-font-size-x-large)">Aa</span> |
| `--sl-font-size-xx-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-xx-large)">Aa</span> |
| `--sl-font-size-xxx-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-xxx-large)">Aa</span> |
| `--sl-font-size-xxxx-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-xxxx-large)">Aa</span> |
## Font Weight
| Token | Value | Example
|-------|-------|---------
| `--sl-font-weight-light` | 300 | <span style="font-weight: var(--sl-font-weight-light);">The quick brown fox jumped over the lazy dog.</span>
| `--sl-font-weight-normal` | 400 | <span style="font-weight: var(--sl-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span>
| `--sl-font-weight-semibold` | 500 | <span style="font-weight: var(--sl-font-weight-semibold);">The quick brown fox jumped over the lazy dog.</span>
| `--sl-font-weight-bold` | 700 | <span style="font-weight: var(--sl-font-weight-bold);">The quick brown fox jumped over the lazy dog.</span>
| Token | Value | Example |
| --------------------------- | ----- | --------------------------------------------------------------------------------------------------------------- |
| `--sl-font-weight-light` | 300 | <span style="font-weight: var(--sl-font-weight-light);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-font-weight-normal` | 400 | <span style="font-weight: var(--sl-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-font-weight-semibold` | 500 | <span style="font-weight: var(--sl-font-weight-semibold);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-font-weight-bold` | 700 | <span style="font-weight: var(--sl-font-weight-bold);">The quick brown fox jumped over the lazy dog.</span> |
## Letter Spacing
| Token | Value | Example
|-------|-------|---------
| `--sl-letter-spacing-dense` | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span>
| `--sl-letter-spacing-normal` | normal | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span>
| `--sl-letter-spacing-loose` | 0.075em | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span>
| Token | Value | Example |
| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `--sl-letter-spacing-dense` | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-normal` | normal | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-loose` | 0.075em | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span> |
## Line Height
| Token | Value | Example
|-------|-------|---------
| `--sl-line-height-dense` | 1.25 | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>
| `--sl-line-height-normal` | 1.5 | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>
| `--sl-line-height-loose` | 1.75 | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>
| Token | Value | Example |
| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--sl-line-height-dense` | 1.25 | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-normal` | 1.5 | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-loose` | 1.75 | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

12
docs/tokens/z-index.md
View File

@@ -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
| Token | Value |
| --------------------------- | ----- |
| `--sl-z-index-default` | 1 |
| `--sl-z-index-panel` | 80 |
| `--sl-z-index-notification` | 90 |
| `--sl-z-index-dialog` | 100 |