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

Update design token pages

Browse Source
This commit is contained in:
Cory LaViska
2020-07-08 08:52:18 -04:00
parent 717849adb8
commit 0033ef796f
7 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/assets/styles/docs.css
View File

@@ -191,8 +191,8 @@
font-family: var(--base-font-family);
}
.markdown-section table code {
white-space: normal !important;
.markdown-section table code:not([class*="lang-"]):not([class*="language-"]) {
white-space: normal;
}
html .repo-button {
@@ -245,3 +245,8 @@ html .repo-button--small {
html .repo-button--sponsor sl-icon {
color: #ea4aaa;
}
body[data-page^="tokens/"] .table-wrapper td:first-child,
body[data-page^="tokens/"] .table-wrapper td:first-child code {
white-space: nowrap;
}

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

@@ -1,5 +1,7 @@
# Border Radius Tokens
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
| ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- |
| `--sl-border-radius-small` | 0.125rem (2px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div> |

25
docs/tokens/color.md
View File

@@ -1,14 +1,28 @@
# Color Tokens
TODO
Color tokens are used to maintain consistent color use throughout your app.
- Describe how color tokens are generated using HSL
- Show hue + saturation tokens for each base color
## Theme Colors
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% nor 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead.
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
To customize a theme color, change its respective hue, saturation, and text tokens. This will update all colors in the palette — there's no need to update individual palette colors. In fact, doing so is strongly discouraged.
```css
--sl-color-primary-hue: 203;
--sl-color-primary-saturation: 100%;
--sl-color-primary-text: var(--sl-color-white);
```
?> Palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly.
## Primary
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-primary-5` | <div class="color-demo" style="background-color: var(--sl-color-primary-5);"></div> |
| `--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> |
@@ -33,6 +47,7 @@ TODO
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div> |
| `--sl-color-gray-5` | <div class="color-demo" style="background-color: var(--sl-color-gray-5);"></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> |
@@ -57,6 +72,7 @@ TODO
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-success-5` | <div class="color-demo" style="background-color: var(--sl-color-success-5);"></div> |
| `--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> |
@@ -80,6 +96,7 @@ TODO
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-info-5` | <div class="color-demo" style="background-color: var(--sl-color-info-5);"></div> |
| `--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> |
@@ -103,6 +120,7 @@ TODO
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-warning-5` | <div class="color-demo" style="background-color: var(--sl-color-warning-5);"></div> |
| `--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> |
@@ -126,6 +144,7 @@ TODO
| Token | Example |
| ---------------------- | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-5` | <div class="color-demo" style="background-color: var(--sl-color-danger-5);"></div> |
| `--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> |

2
docs/tokens/spacing.md
View File

@@ -1,5 +1,7 @@
# Spacing Tokens
Spacing tokens are used to provide consistent spacing between components and content throughout your app.
| 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> |

2
docs/tokens/transition.md
View File

@@ -1,5 +1,7 @@
# Transition Tokens
Transition tokens are used to provide consistent transitions throughout your app.
| Token | Value | Example |
| ------------------------ | ------ | --------------------------------------------------------------------------------------------- |
| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div> |

2
docs/tokens/typography.md
View File

@@ -1,5 +1,7 @@
# Typography Tokens
Typography tokens are used to maintain a consistent set of font styles throughout your app.
## Font Family
The default font stack is designed to be simple and highly available on as many devices as possible.

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

@@ -1,6 +1,6 @@
# Z-Index Tokens
Z-indexes are still very much a work in progress.
Z-indexes are used to stack components in a logical manner.
| Token | Value |
| --------------------------- | ----- |