mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
update docs and theme tokens to use wa
This commit is contained in:
Cory LaViska
@@ -34,18 +34,13 @@
|
||||
<meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
|
||||
|
||||
{# Shoelace #}
|
||||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/default.css" />
|
||||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||||
|
||||
{# Set the initial theme and menu states here to prevent flashing #}
|
||||
<script>
|
||||
(() => {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const theme = localStorage.getItem('theme') || 'auto';
|
||||
document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
|
||||
})();
|
||||
</script>
|
||||
{# Web Fonts #}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
|
||||
|
||||
{# Turbo + Scroll positioning #}
|
||||
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
|
||||
@@ -68,37 +63,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{# Icon toolbar #}
|
||||
<div id="icon-toolbar">
|
||||
{# GitHub #}
|
||||
<a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
|
||||
<sl-icon name="github"></sl-icon>
|
||||
</a>
|
||||
|
||||
{# Twitter #}
|
||||
<a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
|
||||
<sl-icon name="twitter"></sl-icon>
|
||||
</a>
|
||||
|
||||
{# Theme selector #}
|
||||
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
||||
<sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
|
||||
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
||||
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
||||
</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
||||
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll>
|
||||
<header>
|
||||
<a href="/">
|
||||
<img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
|
||||
{% include 'workmark.njk' %}
|
||||
</a>
|
||||
<div class="sidebar-version">
|
||||
{{ meta.version }}
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
<ul>
|
||||
<li>
|
||||
<h2>Experimental</h2>
|
||||
<ul>
|
||||
<li><a href="/experimental/themer">Themer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Getting Started</h2>
|
||||
<ul>
|
||||
@@ -47,8 +53,8 @@
|
||||
<li><a href="/tokens/typography">Typography</a></li>
|
||||
<li><a href="/tokens/color">Color</a></li>
|
||||
<li><a href="/tokens/spacing">Spacing</a></li>
|
||||
<li><a href="/tokens/elevation">Elevation</a></li>
|
||||
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
||||
<li><a href="/tokens/borders">Borders</a></li>
|
||||
<li><a href="/tokens/shadows">Shadows</a></li>
|
||||
<li><a href="/tokens/transition">Transition</a></li>
|
||||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||||
<li><a href="/tokens/more">More Tokens</a></li>
|
||||
|
||||
7
docs/_includes/workmark.njk
Normal file
7
docs/_includes/workmark.njk
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 21 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g fill-rule="nonzero" fill="#0ea5e9">
|
||||
<g fill-rule="nonzero" fill="#0070f2">
|
||||
<path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@@ -209,10 +209,10 @@
|
||||
}.css';\n` +
|
||||
'\n' +
|
||||
'body {\n' +
|
||||
' font: 16px sans-serif;\n' +
|
||||
' background-color: var(--sl-color-neutral-0);\n' +
|
||||
' color: var(--sl-color-neutral-900);\n' +
|
||||
' padding: 1rem;\n' +
|
||||
' font: var(--wa-font-size-root) sans-serif;\n' +
|
||||
' background-color: var(--wa-color-surface-default);\n' +
|
||||
' color: var(--wa-color-text-normal);\n' +
|
||||
' padding: var(--wa-space-m);\n' +
|
||||
'}';
|
||||
|
||||
// Docs: https://blog.codepen.io/documentation/prefill/
|
||||
|
||||
@@ -73,72 +73,6 @@
|
||||
updateInert();
|
||||
})();
|
||||
|
||||
//
|
||||
// Theme selector
|
||||
//
|
||||
(() => {
|
||||
function getTheme() {
|
||||
return localStorage.getItem('theme') || 'auto';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
if (theme === 'auto') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return theme === 'dark';
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
theme = newTheme;
|
||||
localStorage.setItem('theme', theme);
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle('sl-theme-dark', isDark());
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
const menu = document.querySelector('#theme-selector sl-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
|
||||
}
|
||||
|
||||
let theme = getTheme();
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('sl-show', event => {
|
||||
const themeSelector = event.target.closest('#theme-selector');
|
||||
if (!themeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('sl-select', event => {
|
||||
const menu = event.target.closest('#theme-selector sl-menu');
|
||||
if (!menu) return;
|
||||
setTheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
// Update the theme when the preference changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));
|
||||
|
||||
// Toggle with backslash
|
||||
document.addEventListener('keydown', event => {
|
||||
if (
|
||||
event.key === '\\' &&
|
||||
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
|
||||
) {
|
||||
event.preventDefault();
|
||||
setTheme(isDark() ? 'light' : 'dark');
|
||||
}
|
||||
});
|
||||
|
||||
// Set the initial theme and sync the UI
|
||||
setTheme(theme);
|
||||
})();
|
||||
|
||||
//
|
||||
// Open details when printing
|
||||
//
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
/* Interactive code blocks */
|
||||
.code-preview {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: var(--wa-corners-1x);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
margin-bottom: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.code-preview__preview {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-top-left-radius: var(--wa-corners-1x);
|
||||
border-top-right-radius: var(--wa-corners-1x);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
/* Block the preview while dragging to prevent iframes from intercepting drag events */
|
||||
@@ -40,16 +40,16 @@
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: var(--sl-color-neutral-600);
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-left: solid 1px var(--sl-color-neutral-200);
|
||||
border-top-right-radius: 3px;
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
|
||||
border-top-right-radius: var(--wa-corners-1x);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.code-preview__preview {
|
||||
padding-right: 1.5rem;
|
||||
padding-right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.code-preview__resizer {
|
||||
@@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
.code-preview__source {
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
display: none;
|
||||
@@ -74,9 +74,9 @@
|
||||
|
||||
.code-preview__buttons {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
|
||||
border-bottom-left-radius: var(--wa-corners-1x);
|
||||
border-bottom-right-radius: var(--wa-corners-1x);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -86,18 +86,18 @@
|
||||
min-width: 2.5rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: var(--sl-color-neutral-0);
|
||||
background: var(--wa-color-surface-default);
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--wa-font-size-xs);
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
text-transform: uppercase;
|
||||
color: var(--sl-color-neutral-600);
|
||||
color: var(--wa-color-text-quiet);
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-preview__button:not(:last-of-type) {
|
||||
border-right: solid 1px var(--sl-color-neutral-200);
|
||||
border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
|
||||
}
|
||||
|
||||
.code-preview__button--html,
|
||||
@@ -109,8 +109,8 @@
|
||||
}
|
||||
|
||||
.code-preview__button--selected {
|
||||
font-weight: 700;
|
||||
color: var(--sl-color-primary-600);
|
||||
font-weight: var(--wa-font-weight-heavy);
|
||||
color: var(--wa-color-brand-text-on-surface);
|
||||
}
|
||||
|
||||
.code-preview__button--codepen {
|
||||
@@ -120,25 +120,25 @@
|
||||
}
|
||||
|
||||
.code-preview__button:first-of-type {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-left-radius: var(--wa-corners-1x);
|
||||
}
|
||||
|
||||
.code-preview__button:last-of-type {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: var(--wa-corners-1x);
|
||||
}
|
||||
|
||||
.code-preview__button:hover,
|
||||
.code-preview__button:active {
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-400);
|
||||
box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
|
||||
border-right-color: transparent;
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-600);
|
||||
background-color: var(--wa-color-brand-container-fill-muted);
|
||||
color: var(--wa-color-brand-text-on-surface);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.code-preview__button:focus-visible {
|
||||
outline: none;
|
||||
outline: var(--sl-focus-ring);
|
||||
outline: var(--wa-focus-ring);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: var(--sl-color-neutral-600);
|
||||
color: var(--wa-color-text-quiet);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,32 +1,29 @@
|
||||
/* Search plugin */
|
||||
:root,
|
||||
:root.sl-theme-dark {
|
||||
--docs-search-box-background: var(--sl-color-neutral-0);
|
||||
--docs-search-box-border-width: 1px;
|
||||
--docs-search-box-border-color: var(--sl-color-neutral-300);
|
||||
--docs-search-box-color: var(--sl-color-neutral-600);
|
||||
--docs-search-dialog-background: var(--sl-color-neutral-0);
|
||||
--docs-search-border-width: var(--docs-border-width);
|
||||
--docs-search-border-color: var(--docs-border-color);
|
||||
--docs-search-text-color: var(--sl-color-neutral-900);
|
||||
--docs-search-text-color-muted: var(--sl-color-neutral-500);
|
||||
--docs-search-font-weight-normal: var(--sl-font-weight-normal);
|
||||
--docs-search-font-weight-semibold: var(--sl-font-weight-semibold);
|
||||
--docs-search-border-radius: calc(2 * var(--docs-border-radius));
|
||||
--docs-search-accent-color: var(--sl-color-primary-600);
|
||||
--docs-search-icon-color: var(--sl-color-neutral-500);
|
||||
--docs-search-icon-color-active: var(--sl-color-neutral-600);
|
||||
--docs-search-shadow: var(--docs-shadow-x-large);
|
||||
--docs-search-result-background-hover: var(--sl-color-neutral-100);
|
||||
--docs-search-result-color-hover: var(--sl-color-neutral-900);
|
||||
--docs-search-result-background-active: var(--sl-color-primary-600);
|
||||
--docs-search-result-color-active: var(--sl-color-neutral-0);
|
||||
--docs-search-focus-ring: var(--sl-focus-ring);
|
||||
--docs-search-overlay-background: rgb(0 0 0 / 0.33);
|
||||
}
|
||||
:root {
|
||||
--docs-search-box-background: var(--wa-form-controls-background);
|
||||
--docs-search-box-border-width: var(--wa-form-controls-border-width);
|
||||
--docs-search-box-border-color: var(--wa-form-controls-color-resting);
|
||||
--docs-search-box-color: var(--wa-form-controls-placeholder-color);
|
||||
|
||||
:root.sl-theme-dark {
|
||||
--docs-search-overlay-background: rgb(71 71 71 / 0.33);
|
||||
--docs-search-dialog-background: var(--wa-color-surface-raised);
|
||||
--docs-search-border-width: var(--wa-border-width-thin);
|
||||
--docs-search-border-color: var(--wa-color-surface-outline);
|
||||
--docs-search-text-color: var(--wa-color-text-normal);
|
||||
--docs-search-text-color-muted: var(--wa-color-text-quiet);
|
||||
--docs-search-font-weight-normal: var(--wa-font-weight-normal);
|
||||
--docs-search-font-weight-semibold: var(--wa-font-weight-medium);
|
||||
--docs-search-border-radius: calc(2 * var(--wa-corners-1x));
|
||||
|
||||
--docs-search-accent-color: var(--wa-color-brand-text-on-surface);
|
||||
--docs-search-icon-color: var(--wa-color-neutral-element-fill-vivid);
|
||||
--docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-element-fill-vivid), 8% black);
|
||||
--docs-search-shadow: var(--wa-shadow-level-3);
|
||||
--docs-search-result-background-hover: var(--wa-color-neutral-element-fill-muted);
|
||||
--docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
|
||||
--docs-search-result-background-active: var(--wa-color-brand-element-fill-vivid);
|
||||
--docs-search-result-color-active: var(--wa-color-brand-text-on-vivid);
|
||||
--docs-search-focus-ring: var(--wa-focus-ring);
|
||||
--docs-search-overlay-background: rgb(0 0 0 / 0.33);
|
||||
}
|
||||
|
||||
body.search-visible {
|
||||
@@ -47,7 +44,7 @@ body.search-visible {
|
||||
font: inherit;
|
||||
color: var(--docs-search-box-color);
|
||||
padding: 0.75rem 1rem;
|
||||
margin: var(--sl-spacing-large) 0;
|
||||
margin: var(--wa-spacing-l) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
7
docs/pages/experimental/themer.md
Normal file
7
docs/pages/experimental/themer.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
meta:
|
||||
title: Themer
|
||||
description: TODO
|
||||
---
|
||||
|
||||
# Themer Goes Here
|
||||
@@ -7,7 +7,7 @@ toc: false
|
||||
|
||||
<div class="splash">
|
||||
<div class="splash-start">
|
||||
<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
|
||||
{% include 'workmark.njk' %}
|
||||
|
||||
# <sl-visually-hidden>Shoelace:</sl-visually-hidden> A forward-thinking library of web components.
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
meta:
|
||||
title: Border Radius
|
||||
description: Border radius tokens are used to give sharp edges a more subtle, rounded effect.
|
||||
---
|
||||
|
||||
# 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.1875rem (3px) | <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> |
|
||||
37
docs/pages/tokens/borders.md
Normal file
37
docs/pages/tokens/borders.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
meta:
|
||||
title: Border Tokens
|
||||
description: Border tokens are used to control borders and corners.
|
||||
---
|
||||
|
||||
# Border 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 |
|
||||
| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
|
||||
| `--wa-border-style` | `solid` | |
|
||||
| `--sl-border-width-thin` | 0.0625rem (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div> |
|
||||
| `--sl-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
|
||||
| `--sl-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div> |
|
||||
|
||||
## Corners
|
||||
|
||||
TODO
|
||||
|
||||
| Token | Value | Example |
|
||||
| ------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| `--wa-corners-half` | `calc(var(--wa-corners-1x) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-half);"></div> |
|
||||
| `--wa-corners-1x` | `0.25rem` | <div class="corner-demo" style="border-radius: var(--wa-corners-1x);"></div> |
|
||||
| `--wa-corners-2x` | `calc(var(--wa-corners-1x) * 2)` | <div class="corner-demo" style="border-radius: var(--wa-corners-2x);"></div> |
|
||||
| `--wa-corners-3x` | `calc(var(--wa-corners-1x) * 3)` | <div class="corner-demo" style="border-radius: var(--wa-corners-3x);"></div> |
|
||||
|
||||
## Special Corners
|
||||
|
||||
TODO
|
||||
|
||||
| Token | Value | Example |
|
||||
| --------------------- | -------- | ------------------------------------------------------------------------------------------- |
|
||||
| `--wa-corners-pill` | `9999px` | <div class="corner-demo" style="width: 6rem; border-radius: var(--wa-corners-pill);"></div> |
|
||||
| `--wa-corners-circle` | `50%` | <div class="corner-demo" style="border-radius: var(--wa-corners-circle);"></div> |
|
||||
| `--wa-corners-sharp` | `0` | <div class="corner-demo" style="border-radius: var(--wa-corners-sharp);"></div> |
|
||||
@@ -8,439 +8,110 @@ meta:
|
||||
|
||||
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
|
||||
|
||||
Color tokens are referenced using the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
|
||||
Color tokens are referenced using the `--wa-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
|
||||
|
||||
## Theme Tokens
|
||||
## App / Surface Tokens
|
||||
|
||||
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
|
||||
TODO
|
||||
|
||||
## Semantic Color Variants
|
||||
|
||||
TODO
|
||||
|
||||
## Color Primitives
|
||||
|
||||
Additional color palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning.
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Primary<br>
|
||||
<code>--sl-color-primary-<em>{n}</em></code>
|
||||
Blue<br>
|
||||
<code>--wa-color-blue-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Success<br>
|
||||
<code>--sl-color-success-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Warning<br>
|
||||
<code>--sl-color-warning-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Danger<br>
|
||||
<code>--sl-color-danger-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Neutral<br>
|
||||
<code>--sl-color-neutral-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Black & White<br>
|
||||
<code>--sl-color-neutral-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--sl-color-neutral-0);"></div>0</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--sl-color-neutral-1000);"></div>1000</div>
|
||||
</div>
|
||||
|
||||
:::tip
|
||||
Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)
|
||||
:::
|
||||
|
||||
## Primitives
|
||||
|
||||
Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors).
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Gray<br>
|
||||
<code>--sl-color-gray-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Red<br>
|
||||
<code>--sl-color-red-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Orange<br>
|
||||
<code>--sl-color-orange-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Amber<br>
|
||||
<code>--sl-color-amber-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Yellow<br>
|
||||
<code>--sl-color-yellow-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Lime<br>
|
||||
<code>--sl-color-lime-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-10);"></div>10</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-20);"></div>20</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-30);"></div>30</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-40);"></div>40</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-60);"></div>60</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-70);"></div>70</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-80);"></div>80</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-90);"></div>90</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-blue-95);"></div>95</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Green<br>
|
||||
<code>--sl-color-green-<em>{n}</em></code>
|
||||
<code>--wa-color-green-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-10);"></div>10</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-20);"></div>20</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-30);"></div>30</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-40);"></div>40</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-60);"></div>60</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-70);"></div>70</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-80);"></div>80</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-90);"></div>90</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-green-95);"></div>95</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Emerald<br>
|
||||
<code>--sl-color-emerald-<em>{n}</em></code>
|
||||
Yellow<br>
|
||||
<code>--wa-color-red-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-10);"></div>10</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-20);"></div>20</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-30);"></div>30</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-40);"></div>40</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-60);"></div>60</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-70);"></div>70</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-80);"></div>80</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-90);"></div>90</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-yellow-95);"></div>95</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Teal<br>
|
||||
<code>--sl-color-teal-<em>{n}</em></code>
|
||||
Red<br>
|
||||
<code>--wa-color-red-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-10);"></div>10</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-20);"></div>20</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-30);"></div>30</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-40);"></div>40</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-60);"></div>60</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-70);"></div>70</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-80);"></div>80</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-90);"></div>90</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-red-95);"></div>95</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Cyan<br>
|
||||
<code>--sl-color-cyan-<em>{n}</em></code>
|
||||
Neutral<br>
|
||||
<code>--wa-color-neutral-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-10);"></div>10</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-20);"></div>20</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-30);"></div>30</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-40);"></div>40</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-60);"></div>60</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-70);"></div>70</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-80);"></div>80</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-90);"></div>90</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-95);"></div>95</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Sky<br>
|
||||
<code>--sl-color-sky-<em>{n}</em></code>
|
||||
Black & White<br>
|
||||
<code>--wa-color-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Blue<br>
|
||||
<code>--sl-color-blue-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Indigo<br>
|
||||
<code>--sl-color-indigo-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Violet<br>
|
||||
<code>--sl-color-violet-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Purple<br>
|
||||
<code>--sl-color-purple-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Fuchsia<br>
|
||||
<code>--sl-color-fuchsia-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Pink<br>
|
||||
<code>--sl-color-pink-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Rose<br>
|
||||
<code>--sl-color-rose-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-950);"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--wa-color-black);"></div>black</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--wa-color-white);"></div>white</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
meta:
|
||||
title: Elevation
|
||||
description: Elevation tokens are used to give elements the appearance of being raised off the page.
|
||||
---
|
||||
|
||||
# Elevation Tokens
|
||||
|
||||
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> |
|
||||
@@ -6,158 +6,27 @@ meta:
|
||||
|
||||
# More Design Tokens
|
||||
|
||||
All of the design tokens described herein are considered relatively stable. However, some changes might occur in future versions to address mission critical bugs or improvements. If such changes occur, they _will not_ be considered breaking changes and will be clearly documented in the [changelog](/resources/changelog).
|
||||
|
||||
Most design tokens are consistent across the light and dark theme. Those that vary will show both values.
|
||||
|
||||
:::tip
|
||||
Currently, the source of design tokens is considered to be [`light.css`](https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css). The dark theme, [dark.css](https://github.com/shoelace-style/shoelace/blob/next/src/themes/dark.css), mirrors all of the same tokens with dark mode-specific values where appropriate. Work is planned to move all design tokens to a single file, perhaps JSON or YAML, in the near future.
|
||||
:::
|
||||
|
||||
## Focus Rings
|
||||
|
||||
Focus ring tokens control the appearance of focus rings. Note that form inputs use `--sl-input-focus-ring-*` tokens instead.
|
||||
|
||||
| Token | Value |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| `--sl-focus-ring-color` | `var(--sl-color-primary-600)` (light theme)<br>`var(--sl-color-primary-700)` (dark theme) |
|
||||
| `--sl-focus-ring-style` | `solid` |
|
||||
| `--sl-focus-ring-width` | `3px` |
|
||||
| `--sl-focus-ring` | `var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color)` |
|
||||
| `--sl-focus-ring-offset` | `1px` |
|
||||
| Token | Value |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-focus-ring` | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
|
||||
| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
|
||||
|
||||
## Buttons
|
||||
## Form Controls
|
||||
|
||||
Button tokens control the appearance of buttons. In addition, buttons also currently use some form input tokens such as `--sl-input-height-*` and `--sl-input-border-*`. More button tokens may be added in the future to make it easier to style them more independently.
|
||||
Form control tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
|
||||
|
||||
| Token | Value |
|
||||
| ------------------------------ | ----------------------------- |
|
||||
| `--sl-button-font-size-small` | `var(--sl-font-size-x-small)` |
|
||||
| `--sl-button-font-size-medium` | `var(--sl-font-size-small)` |
|
||||
| `--sl-button-font-size-large` | `var(--sl-font-size-medium)` |
|
||||
|
||||
## Form Inputs
|
||||
|
||||
Form input tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
|
||||
|
||||
| Token | Value |
|
||||
| --------------------------------------- | ---------------------------------- |
|
||||
| `--sl-input-height-small` | `1.875rem` (30px @ 16px base) |
|
||||
| `--sl-input-height-medium` | `2.5rem` (40px @ 16px base) |
|
||||
| `--sl-input-height-large` | `3.125rem` (50px @ 16px base) |
|
||||
| `--sl-input-background-color` | `var(--sl-color-neutral-0)` |
|
||||
| `--sl-input-background-color-hover` | `var(--sl-input-background-color)` |
|
||||
| `--sl-input-background-color-focus` | `var(--sl-input-background-color)` |
|
||||
| `--sl-input-background-color-disabled` | `var(--sl-color-neutral-100)` |
|
||||
| `--sl-input-border-color` | `var(--sl-color-neutral-300)` |
|
||||
| `--sl-input-border-color-hover` | `var(--sl-color-neutral-400)` |
|
||||
| `--sl-input-border-color-focus` | `var(--sl-color-primary-500)` |
|
||||
| `--sl-input-border-color-disabled` | `var(--sl-color-neutral-300)` |
|
||||
| `--sl-input-border-width` | `1px` |
|
||||
| `--sl-input-required-content` | `*` |
|
||||
| `--sl-input-required-content-offset` | `-2px` |
|
||||
| `--sl-input-required-content-color` | `var(--sl-input-label-color)` |
|
||||
| `--sl-input-border-radius-small` | `var(--sl-border-radius-medium)` |
|
||||
| `--sl-input-border-radius-medium` | `var(--sl-border-radius-medium)` |
|
||||
| `--sl-input-border-radius-large` | `var(--sl-border-radius-medium)` |
|
||||
| `--sl-input-font-family` | `var(--sl-font-sans)` |
|
||||
| `--sl-input-font-weight` | `var(--sl-font-weight-normal)` |
|
||||
| `--sl-input-font-size-small` | `var(--sl-font-size-small)` |
|
||||
| `--sl-input-font-size-medium` | `var(--sl-font-size-medium)` |
|
||||
| `--sl-input-font-size-large` | `var(--sl-font-size-large)` |
|
||||
| `--sl-input-letter-spacing` | `var(--sl-letter-spacing-normal)` |
|
||||
| `--sl-input-color` | `var(--sl-color-neutral-700)` |
|
||||
| `--sl-input-color-hover` | `var(--sl-color-neutral-700)` |
|
||||
| `--sl-input-color-focus` | `var(--sl-color-neutral-700)` |
|
||||
| `--sl-input-color-disabled` | `var(--sl-color-neutral-900)` |
|
||||
| `--sl-input-icon-color` | `var(--sl-color-neutral-500)` |
|
||||
| `--sl-input-icon-color-hover` | `var(--sl-color-neutral-600)` |
|
||||
| `--sl-input-icon-color-focus` | `var(--sl-color-neutral-600)` |
|
||||
| `--sl-input-placeholder-color` | `var(--sl-color-neutral-500)` |
|
||||
| `--sl-input-placeholder-color-disabled` | `var(--sl-color-neutral-600)` |
|
||||
| `--sl-input-spacing-small` | `var(--sl-spacing-small)` |
|
||||
| `--sl-input-spacing-medium` | `var(--sl-spacing-medium)` |
|
||||
| `--sl-input-spacing-large` | `var(--sl-spacing-large)` |
|
||||
| `--sl-input-focus-ring-color` | `hsl(198.6 88.7% 48.4% / 40%)` |
|
||||
| `--sl-input-focus-ring-offset` | `0` |
|
||||
|
||||
## Filled Form Inputs
|
||||
|
||||
Filled form input tokens control the appearance of form controls using the `filled` variant.
|
||||
|
||||
| Token | Value |
|
||||
| --------------------------------------------- | ----------------------------- |
|
||||
| `--sl-input-filled-background-color` | `var(--sl-color-neutral-100)` |
|
||||
| `--sl-input-filled-background-color-hover` | `var(--sl-color-neutral-100)` |
|
||||
| `--sl-input-filled-background-color-focus` | `var(--sl-color-neutral-100)` |
|
||||
| `--sl-input-filled-background-color-disabled` | `var(--sl-color-neutral-100)` |
|
||||
| `--sl-input-filled-color` | `var(--sl-color-neutral-800)` |
|
||||
| `--sl-input-filled-color-hover` | `var(--sl-color-neutral-800)` |
|
||||
| `--sl-input-filled-color-focus` | `var(--sl-color-neutral-700)` |
|
||||
| `--sl-input-filled-color-disabled` | `var(--sl-color-neutral-800)` |
|
||||
|
||||
## Form Labels
|
||||
|
||||
Form label tokens control the appearance of labels in form controls.
|
||||
|
||||
| Token | Value |
|
||||
| ----------------------------------- | ---------------------------- |
|
||||
| `--sl-input-label-font-size-small` | `var(--sl-font-size-small)` |
|
||||
| `--sl-input-label-font-size-medium` | `var(--sl-font-size-medium`) |
|
||||
| `--sl-input-label-font-size-large` | `var(--sl-font-size-large)` |
|
||||
| `--sl-input-label-color` | `inherit` |
|
||||
|
||||
## Help Text
|
||||
|
||||
Help text tokens control the appearance of help text in form controls.
|
||||
|
||||
| Token | Value |
|
||||
| --------------------------------------- | ----------------------------- |
|
||||
| `--sl-input-help-text-font-size-small` | `var(--sl-font-size-x-small)` |
|
||||
| `--sl-input-help-text-font-size-medium` | `var(--sl-font-size-small)` |
|
||||
| `--sl-input-help-text-font-size-large` | `var(--sl-font-size-medium)` |
|
||||
| `--sl-input-help-text-color` | `var(--sl-color-neutral-500)` |
|
||||
|
||||
## Toggles
|
||||
|
||||
Toggle tokens control the appearance of toggles such as [checkbox](/components/checkbox), [radio](/components/radio), [switch](/components/switch), etc.
|
||||
|
||||
| Token | Value |
|
||||
| ------------------------- | ----------------------------- |
|
||||
| `--sl-toggle-size-small` | `0.875rem` (14px @ 16px base) |
|
||||
| `--sl-toggle-size-medium` | `1.125rem` (18px @ 16px base) |
|
||||
| `--sl-toggle-size-large` | `1.375rem` (22px @ 16px base) |
|
||||
|
||||
## Overlays
|
||||
|
||||
Overlay tokens control the appearance of overlays as used in [dialog](/components/dialog), [drawer](/components/drawer), etc.
|
||||
|
||||
| Token | Value |
|
||||
| ------------------------------- | --------------------------- |
|
||||
| `--sl-overlay-background-color` | `hsl(240 3.8% 46.1% / 33%)` |
|
||||
|
||||
## Panels
|
||||
|
||||
Panel tokens control the appearance of panels such as those used in [dialog](/components/dialog), [drawer](/components/drawer), [menu](/components/menu), etc.
|
||||
|
||||
| Token | Value |
|
||||
| ----------------------------- | ----------------------------- |
|
||||
| `--sl-panel-background-color` | `var(--sl-color-neutral-0)` |
|
||||
| `--sl-panel-border-color` | `var(--sl-color-neutral-200)` |
|
||||
| `--sl-panel-border-width` | `1px` |
|
||||
|
||||
## Tooltips
|
||||
|
||||
Tooltip tokens control the appearance of tooltips. This includes the [tooltip](/components/tooltip) component as well as other implementations, such [range tooltips](/components/range).
|
||||
|
||||
| Token | Value |
|
||||
| ------------------------------- | ------------------------------------------------------ |
|
||||
| `--sl-tooltip-border-radius` | `var(--sl-border-radius-medium)` |
|
||||
| `--sl-tooltip-background-color` | `var(--sl-color-neutral-800)` |
|
||||
| `--sl-tooltip-color` | `var(--sl-color-neutral-0)` |
|
||||
| `--sl-tooltip-font-family` | `var(--sl-font-sans)` |
|
||||
| `--sl-tooltip-font-weight` | `var(--sl-font-weight-normal)` |
|
||||
| `--sl-tooltip-font-size` | `var(--sl-font-size-small)` |
|
||||
| `--sl-tooltip-line-height` | `var(--sl-line-height-dense)` |
|
||||
| `--sl-tooltip-padding` | `var(--sl-spacing-2x-small) var(--sl-spacing-x-small)` |
|
||||
| `--sl-tooltip-arrow-size` | `6px` |
|
||||
| Token | Value |
|
||||
| -------------------------------------- | ----------------------------------------------- |
|
||||
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
|
||||
| `--wa-form-controls-border-style` | `var(--wa-border-style)` |
|
||||
| `--wa-form-controls-border-width` | `var(--wa-border-width-thin)` |
|
||||
| `--wa-form-controls-corners` | `var(--wa-corners-1x)` |
|
||||
| `--wa-form-controls-color-resting` | `var(--wa-color-neutral-element-outline-muted)` |
|
||||
| `--wa-form-controls-color-activated` | `var(--wa-color-brand-action-vivid)` |
|
||||
| `--wa-form-controls-font-line-height` | `var(--wa-font-height-compact)` |
|
||||
| `--wa-form-controls-padding` | `var(--wa-space-square-s)` |
|
||||
| `--wa-form-controls-placeholder-color` | `var(--wa-color-neutral-60)` |
|
||||
|
||||
16
docs/pages/tokens/shadows.md
Normal file
16
docs/pages/tokens/shadows.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
meta:
|
||||
title: Shadows
|
||||
description: Shadow tokens are used to give elements the appearance of being raised off the page.
|
||||
---
|
||||
|
||||
# Shadow Tokens
|
||||
|
||||
Shadow 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 |
|
||||
| --------------------- | ----------------------------------------------------------------------------- |
|
||||
| `--wa-shadow-level-0` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-0);"></div> |
|
||||
| `--wa-shadow-level-1` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-1);"></div> |
|
||||
| `--wa-shadow-level-2` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-2);"></div> |
|
||||
| `--wa-shadow-level-3` | <div class="shadow-demo" style="box-shadow: var(--wa-shadow-level-3);"></div> |
|
||||
@@ -8,15 +8,50 @@ meta:
|
||||
|
||||
Spacing tokens are used to provide consistent spacing between content in your app.
|
||||
|
||||
| Token | Value | Example |
|
||||
| ----------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
|
||||
| `--sl-spacing-3x-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div> |
|
||||
| `--sl-spacing-2x-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-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-2x-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div> |
|
||||
| `--sl-spacing-3x-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div> |
|
||||
| `--sl-spacing-4x-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div> |
|
||||
| Token | Value | Example |
|
||||
| ---------------- | -------------- | ------------------------------------------------------------------------------------- |
|
||||
| `--wa-space-3xs` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--wa-space-3xs); height: 0.25rem;"></div> |
|
||||
| `--wa-space-2xs` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--wa-space-2xs); height: 0.25rem;"></div> |
|
||||
| `--wa-space-xs` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--wa-space-xs); height: 0.25rem;"></div> |
|
||||
| `--wa-space-s` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--wa-space-s); height: 0.25rem;"></div> |
|
||||
| `--wa-space-m` | 1rem (16px) | <div class="spacing-demo" style="width: var(--wa-space-m); height: 0.25rem;"></div> |
|
||||
| `--wa-space-l` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--wa-space-l); height: 0.25rem;"></div> |
|
||||
| `--wa-space-xl` | 1.5rem (24px) | <div class="spacing-demo" style="width: var(--wa-space-xl); height: 0.25rem;"></div> |
|
||||
| `--wa-space-2xl` | 2rem (32px) | <div class="spacing-demo" style="width: var(--wa-space-2xl); height: 0.25rem;"></div> |
|
||||
| `--wa-space-3xl` | 3rem (48px) | <div class="spacing-demo" style="width: var(--wa-space-3xl); height: 0.25rem;"></div> |
|
||||
|
||||
## Square Tokens
|
||||
|
||||
TODO
|
||||
|
||||
| Token | Value | Example |
|
||||
| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-space-square-xs` | `var(--wa-space-xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xs);"></div> |
|
||||
| `--wa-space-square-s` | `var(--wa-space-s)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-s);"></div> |
|
||||
| `--wa-space-square-m` | `var(--wa-space-m)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-m);"></div> |
|
||||
| `--wa-space-square-l` | `var(--wa-space-l)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-l);"></div> |
|
||||
| `--wa-space-square-xl` | `var(--wa-space-xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xl);"></div> |
|
||||
|
||||
## Stretch Tokens
|
||||
|
||||
TODO
|
||||
|
||||
| Token | Value | Example |
|
||||
| ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-space-stretch-xs` | `var(--wa-space-xs) var(--wa-space-m)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xs);"></div> |
|
||||
| `--wa-space-stretch-s` | `var(--wa-space-s) var(--wa-space-l)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-s);"></div> |
|
||||
| `--wa-space-stretch-m` | `var(--wa-space-m) var(--wa-space-xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-m);"></div> |
|
||||
| `--wa-space-stretch-l` | `var(--wa-space-l) var(--wa-space-2xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-l);"></div> |
|
||||
| `--wa-space-stretch-xl` | `var(--wa-space-xl) var(--wa-space-3xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xl);"></div> |
|
||||
|
||||
## Squish Tokens
|
||||
|
||||
TODO
|
||||
|
||||
| Token | Value | Example |
|
||||
| ---------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-space-squish-xs` | `var(--wa-space-xs) var(--wa-space-3xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xs);"></div> |
|
||||
| `--wa-space-squish-s` | `var(--wa-space-s) var(--wa-space-2xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-s);"></div> |
|
||||
| `--wa-space-squish-m` | `var(--wa-space-m) var(--wa-space-xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-m);"></div> |
|
||||
| `--wa-space-squish-l` | `var(--wa-space-l) var(--wa-space-s)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-l);"></div> |
|
||||
| `--wa-space-squish-xl` | `var(--wa-space-xl) var(--wa-space-m)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xl);"></div> |
|
||||
|
||||
@@ -8,10 +8,8 @@ meta:
|
||||
|
||||
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> |
|
||||
| `--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 |
|
||||
| ------------------------ | ----- | --------------------------------------------------------------------------------------------- |
|
||||
| `--wa-transition-normal` | 250ms | <div class="transition-demo" style="transition-duration: var(--wa-transition-normal);"></div> |
|
||||
| `--wa-transition-fast` | 150ms | <div class="transition-demo" style="transition-duration: var(--wa-transition-fast);"></div> |
|
||||
| `--wa-transition-faster` | 50ms | <div class="transition-demo" style="transition-duration: var(--wa-transition-faster);"></div> |
|
||||
|
||||
@@ -12,53 +12,43 @@ Typography tokens are used to maintain a consistent set of font styles throughou
|
||||
|
||||
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` | SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| Token | Value | Example |
|
||||
| --------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-font-family-heading` | system-ui | <span style="font-family: var(--wa-font-family-heading)">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-family-body` | system-ui | <span style="font-family: var(--wa-font-family-body)">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-family-code` | 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | <span style="font-family: var(--wa-font-family-code)">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-family-longform` | 'Lora', serif; | <span style="font-family: var(--wa-font-family-longform)">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-2x-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-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-2x-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span> |
|
||||
| `--sl-font-size-3x-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span> |
|
||||
| `--sl-font-size-4x-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span> |
|
||||
| Token | Value | Example |
|
||||
| --------------------- | --------------- | ----------------------------------------------------------- |
|
||||
| `--wa-font-size-root` | 16px | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
|
||||
| `--wa-font-size-2xs` | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span> |
|
||||
| `--wa-font-size-xs` | 0.75rem (12px) | <span style="font-size: var(--wa-font-size-xs)">Aa</span> |
|
||||
| `--wa-font-size-s` | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span> |
|
||||
| `--wa-font-size-m` | 1rem (16px) | <span style="font-size: var(--wa-font-size-m)">Aa</span> |
|
||||
| `--wa-font-size-l` | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span> |
|
||||
| `--wa-font-size-xl` | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span> |
|
||||
| `--wa-font-size-2xl` | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">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> |
|
||||
|
||||
## Letter Spacing
|
||||
|
||||
| Token | Value | Example |
|
||||
| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--sl-letter-spacing-denser` | -0.03em | <span style="letter-spacing: var(--sl-letter-spacing-denser);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--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> |
|
||||
| `--sl-letter-spacing-looser` | 0.15em | <span style="letter-spacing: var(--sl-letter-spacing-looser);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| Token | Value | Example |
|
||||
| -------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-font-weight-light` | 300 | <span style="font-weight: var(--wa-font-weight-light);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-weight-normal` | 400 | <span style="font-weight: var(--wa-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-weight-medium` | 500 | <span style="font-weight: var(--wa-font-weight-medium);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-weight-heavy` | 600 | <span style="font-weight: var(--wa-font-weight-heavy);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-weight-heading` | `var(--wa-font-weight-medium)` | <span style="font-weight: var(--wa-font-weight-heading);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
| `--wa-font-weight-body` | `var(--wa-font-weight-normal)` | <span style="font-weight: var(--wa-font-weight-body);">The quick brown fox jumped over the lazy dog.</span> |
|
||||
|
||||
## Line Height
|
||||
|
||||
| Token | Value | Example |
|
||||
| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--sl-line-height-denser` | 1 | <div style="line-height: var(--sl-line-height-denser);">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-dense` | 1.4 | <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.8 | <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` | 2.2 | <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> |
|
||||
| `--sl-line-height-looser` | 2.6 | <div style="line-height: var(--sl-line-height-looser);">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 |
|
||||
| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `--wa-line-height-compact` | 1.25 | <div style="line-height: var(--wa-line-height-compact);">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> |
|
||||
| `--wa-line-height-regular` | 1.625 | <div style="line-height: var(--wa-line-height-regular);">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> |
|
||||
| `--wa-line-height-comfortable` | 2 | <div style="line-height: var(--wa-line-height-comfortable);">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> |
|
||||
|
||||
@@ -10,8 +10,8 @@ Z-indexes are used to stack components in a logical manner.
|
||||
|
||||
| Token | Value |
|
||||
| -------------------------- | ----- |
|
||||
| `--sl-z-index-drawer` | 700 |
|
||||
| `--sl-z-index-dialog` | 800 |
|
||||
| `--sl-z-index-dropdown` | 900 |
|
||||
| `--sl-z-index-alert-group` | 950 |
|
||||
| `--sl-z-index-tooltip` | 1000 |
|
||||
| `--wa-z-index-drawer` | 700 |
|
||||
| `--wa-z-index-dialog` | 800 |
|
||||
| `--wa-z-index-dropdown` | 900 |
|
||||
| `--wa-z-index-alert-group` | 950 |
|
||||
| `--wa-z-index-tooltip` | 1000 |
|
||||
|
||||
Reference in New Issue
Block a user