mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

adjust styles and use tokens when possible

pull/498/head
Cory LaViska 2021-08-03 17:34:51 -04:00
rodzic 68f40ed779
commit 7d6390d9bf
9 zmienionych plików z 579 dodań i 425 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

49
docs/assets/plugins/code-block/code-block.css
Wyświetl plik

@ -1,17 +1,21 @@
.code-block {
position: relative;
border-radius: 3px;
background: var(--sl-color-gray-50);
background-color: var(--sl-color-gray-50);
margin-bottom: 1.5rem;
}
.sl-theme-dark .code-block {
background-color: var(--sl-color-gray-100);
}
.code-block__preview {
position: relative;
border: solid 1px var(--sl-color-gray-200);
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: white;
background-color: var(--sl-color-white);
min-width: 20rem;
max-width: 100%;
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@ -40,7 +44,7 @@
width: 1.75rem;
font-size: 20px;
color: var(--sl-color-gray-500);
background-color: white;
background-color: var(--sl-color-white);
border-left: solid 1px var(--sl-color-gray-200);
border-top-right-radius: 3px;
cursor: ew-resize;
@ -126,42 +130,3 @@
.code-block--expanded .code-block__toggle svg {
transform: rotate(180deg);
}
/* Dark theme */
.sl-theme-dark .code-block {
background-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__preview {
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__source {
border-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__resizer {
border-left-color: var(--sl-color-gray-800);
background-color: var(--sl-color-gray-900);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle {
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle:hover,
.sl-theme-dark .code-block__toggle:active {
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle:focus {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-900);
color: var(--sl-color-primary-500);
}

5
docs/assets/plugins/theme/theme.js
Wyświetl plik

@ -6,6 +6,7 @@
window.$docsify.plugins.push((hook, vm) => {
hook.mounted(function () {
let isDark = localStorage.getItem('theme') === 'sl-theme-dark';
const documentElement = document.documentElement;
const sidebarToggle = document.querySelector('.sidebar-toggle');
const noTransitions = Object.assign(document.createElement('style'), {
textContent: '* { transition: none !important; }'
@ -18,7 +19,7 @@
// Set initial theme
if (isDark) {
document.body.classList.add('sl-theme-dark');
documentElement.classList.add('sl-theme-dark');
}
// Toggle theme
@ -30,7 +31,7 @@
// Disable transitions as the theme changes
document.body.appendChild(noTransitions);
requestAnimationFrame(() => {
document.body.classList.toggle('sl-theme-dark', isDark);
documentElement.classList.toggle('sl-theme-dark', isDark);
requestAnimationFrame(() => document.body.removeChild(noTransitions));
});
});

60
docs/assets/styles/demos.css
Wyświetl plik

@ -1,60 +0,0 @@
/* Color demo */
.color-demo {
width: 4rem;
height: 2rem;
border-radius: var(--sl-border-radius-small);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.33);
}
/* Border radius demo */
.border-radius-demo {
width: 3rem;
height: 3rem;
background: var(--sl-color-primary-500);
}
/* Transition demo */
.transition-demo {
position: relative;
background: var(--sl-color-gray-200);
width: 8rem;
height: 2rem;
}
.transition-demo:after {
content: '';
position: absolute;
background-color: var(--sl-color-primary-500);
top: 0;
left: 0;
width: 0;
height: 100%;
transition-duration: inherit;
transition-property: width;
}
.transition-demo:hover:after {
width: 100%;
}
.sl-theme-dark .transition-demo {
background: var(--sl-color-gray-800);
}
/* Spacing demo */
.spacing-demo {
width: 100px;
background: var(--sl-color-primary-500);
}
/* Elevation dmeo */
.elevation-demo {
background: var(--sl-color-white);
border-radius: 3px;
width: 4rem;
height: 4rem;
}
.sl-theme-dark .elevation-demo {
background-color: var(--sl-color-gray-800);
}

191
docs/assets/styles/docs-dark.css
Wyświetl plik

@ -1,191 +0,0 @@
/* Elevation tokens */
.sl-theme-dark {
--sl-shadow-x-small: 0 1px 0 #6b72800d;
--sl-shadow-small: 0 1px 2px #6b72801a;
--sl-shadow-medium: 0 2px 4px #6b72801a;
--sl-shadow-large: 0 2px 8px #6b72801a;
--sl-shadow-x-large: 0 4px 16px #6b72801a;
}
.sl-theme-dark {
background: var(--sl-color-gray-900);
color: var(--sl-color-gray-200);
}
/* Sidebar **/
.sl-theme-dark .sidebar {
background: var(--sl-color-gray-900);
border-right-color: var(--sl-color-gray-900);
}
.sl-theme-dark .sidebar li > p {
color: var(--sl-color-white);
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .sidebar-toggle {
background-color: var(--sl-color-gray-900);
}
.sl-theme-dark .docsify-pagination-container {
border-top-color: var(--sl-color-gray-800) !important;
}
/* Search */
.sl-theme-dark .sidebar .search input[type='search'] {
background: var(--sl-input-background-color);
border-color: var(--sl-input-border-color);
color: var(--sl-input-color);
}
.sl-theme-dark .sidebar .search input[type='search']:hover {
border-color: var(--sl-input-border-color-hover);
}
.sl-theme-dark .sidebar .search input[type='search']:focus {
border-color: var(--sl-input-border-color-focus);
}
.sl-theme-dark .sidebar .clear-button {
color: var(--sl-color-gray-700);
}
.sl-theme-dark .sidebar .clear-button svg circle {
fill: currentColor;
}
/* Content */
.sl-theme-dark .component-header {
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .anchor span {
color: var(--sl-color-white);
}
.sl-theme-dark .markdown-section h2 {
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section blockquote {
border-left-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section kbd {
border-color: var(--sl-color-gray-800);
}
/* Tables */
.sl-theme-dark .markdown-section tr:nth-child(2n) {
background: var(--sl-color-gray-950);
}
.sl-theme-dark .markdown-section td {
border-top-color: var(--sl-color-gray-800);
border-bottom-color: var(--sl-color-gray-800);
}
/* Tips & warnings */
.sl-theme-dark .markdown-section p.tip,
.sl-theme-dark .markdown-section p.warn {
background-color: var(--sl-color-gray-950);
}
.sl-theme-dark .markdown-section p.tip:before,
.sl-theme-dark .markdown-section p.warn:before {
color: var(--sl-color-gray-900);
}
.sl-theme-dark .markdown-section p.tip code,
.sl-theme-dark .markdown-section p.warn code {
background-color: var(--sl-color-gray-800);
}
/* Code */
.sl-theme-dark .markdown-section code {
background: var(--sl-color-gray-950);
}
/* Code blocks */
.sl-theme-dark .markdown-section pre,
.sl-theme-dark .code-block__source {
background-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section pre > code {
color: var(--sl-color-gray-200);
}
.sl-theme-dark .markdown-section pre .token.comment {
color: var(--sl-color-gray-600);
}
.sl-theme-dark .markdown-section pre .token.prolog,
.sl-theme-dark .markdown-section pre .token.doctype,
.sl-theme-dark .markdown-section pre .token.cdata,
.sl-theme-dark .markdown-section pre .token.operator {
color: var(--sl-color-gray-300);
}
.sl-theme-dark .markdown-section pre .token.property,
.sl-theme-dark .markdown-section pre .token.keyword,
.sl-theme-dark .markdown-section pre .token.tag,
.sl-theme-dark .markdown-section pre .token.url {
color: var(--sl-color-primary-400);
}
.sl-theme-dark .markdown-section pre .token.symbol,
.sl-theme-dark .markdown-section pre .token.deleted {
color: #f92672;
}
.sl-theme-dark .markdown-section pre .token.boolean,
.sl-theme-dark .markdown-section pre .token.constant,
.sl-theme-dark .markdown-section pre .token.selector,
.sl-theme-dark .markdown-section pre .token.attr-name,
.sl-theme-dark .markdown-section pre .token.string,
.sl-theme-dark .markdown-section pre .token.char,
.sl-theme-dark .markdown-section pre .token.builtin,
.sl-theme-dark .markdown-section pre .token.inserted {
color: var(--sl-color-success-400);
}
.sl-theme-dark .markdown-section pre .token.atrule,
.sl-theme-dark .markdown-section pre .token.attr-value,
.sl-theme-dark .markdown-section pre .token.number,
.sl-theme-dark .markdown-section pre .token.variable {
color: #c380ff;
}
.sl-theme-dark .markdown-section pre .token.function,
.sl-theme-dark .markdown-section pre .token.class-name {
color: #ffbb4d;
}
.sl-theme-dark .markdown-section pre .token.regex {
color: #f8bd5b;
}
.sl-theme-dark .markdown-section pre .token.important {
color: #fd495f;
}
/* Repo buttons */
.sl-theme-dark .repo-button {
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-200);
}
.sl-theme-dark .repo-button--github sl-icon {
color: var(--sl-color-white);
}
.sl-theme-dark .repo-button:hover {
background-color: var(--sl-color-gray-900);
border: solid 1px var(--sl-color-gray-700);
}
.sl-theme-dark .repo-button:focus {
border-color: var(--sl-color-primary-500);
}

154
docs/assets/styles/docs.css
Wyświetl plik

@ -13,6 +13,7 @@ body {
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
letter-spacing: var(--sl-letter-spacing-normal);
background-color: var(--sl-color-white);
color: var(--sl-color-gray-800);
line-height: var(--sl-line-height-normal);
}
@ -57,8 +58,10 @@ strong {
}
.sidebar .search input[type='search'] {
background-color: var(--sl-input-background-color);
border: solid 1px var(--sl-input-border-color);
border-radius: var(--sl-border-radius-pill);
color: var(--sl-input-color);
padding-left: 1rem;
padding-right: 2rem;
margin: 0 1.25rem;
@ -66,12 +69,16 @@ strong {
}
.sidebar .search input[type='search']:hover {
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
.sidebar .search input[type='search']:focus {
background-color: var(--sl-input-background-color-focus);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
border-color: var(--sl-input-border-color-focus);
color: var(--sl-input-color-focus);
outline: none;
}
@ -83,7 +90,7 @@ strong {
.sidebar .clear-button {
position: absolute;
right: 30px;
right: 34px;
top: 7px;
width: 22px !important;
height: 22px !important;
@ -93,6 +100,14 @@ strong {
transform: scale(0.75) !important;
}
.sidebar .clear-button svg circle {
fill: var(--sl-color-gray-400);
}
.sidebar .clear-button svg path {
stroke: var(--sl-color-white);
}
.sidebar .clear-button:focus {
outline: none;
}
@ -253,6 +268,10 @@ strong {
overflow-anchor: none;
}
.anchor span {
color: var(--sl-color-black);
}
.markdown-section blockquote {
position: relative;
border-left: solid 4px var(--sl-color-gray-200);
@ -329,11 +348,15 @@ strong {
.markdown-section code {
font-family: var(--sl-font-mono);
font-size: 87.5%;
background: var(--sl-color-gray-50);
background-color: var(--sl-color-gray-50);
border-radius: var(--sl-border-radius-small);
padding: 2px 4px;
}
.sl-theme-dark .markdown-section code {
background-color: var(--sl-color-gray-100);
}
.markdown-section kbd {
font-family: var(--sl-font-mono);
font-size: 87.5%;
@ -345,10 +368,14 @@ strong {
/* Code blocks */
.markdown-section pre {
position: relative;
background: var(--sl-color-gray-50);
background-color: var(--sl-color-gray-50);
border-radius: var(--sl-border-radius-medium);
}
.sl-theme-dark .markdown-section pre {
background-color: var(--sl-color-gray-100);
}
.markdown-section pre > code {
display: block;
background: none;
@ -372,7 +399,7 @@ strong {
}
.markdown-section pre .token.punctuation {
color: var(--sl-color-gray-500);
color: var(--sl-color-gray-600);
}
.namespace {
@ -383,7 +410,7 @@ strong {
.markdown-section pre .token.keyword,
.markdown-section pre .token.tag,
.markdown-section pre .token.url {
color: var(--sl-color-primary-500);
color: var(--sl-color-sky-600);
}
.markdown-section pre .token.symbol,
@ -399,27 +426,24 @@ strong {
.markdown-section pre .token.char,
.markdown-section pre .token.builtin,
.markdown-section pre .token.inserted {
color: var(--sl-color-success-600);
color: var(--sl-color-emerald-600);
}
.markdown-section pre .token.atrule,
.markdown-section pre .token.attr-value,
.markdown-section pre .token.number,
.markdown-section pre .token.variable {
color: #9013fe;
color: var(--sl-color-violet-600);
}
.markdown-section pre .token.function,
.markdown-section pre .token.class-name {
color: #eb9200;
}
.markdown-section pre .token.class-name,
.markdown-section pre .token.regex {
color: #f5a623;
color: var(--sl-color-orange-600);
}
.markdown-section pre .token.important {
color: #d0021b;
color: var(--sl-color-red-600);
}
.markdown-section pre .token.important,
@ -445,6 +469,10 @@ strong {
background: var(--sl-color-gray-50);
}
.sl-theme-dark .markdown-section tr:nth-child(2n) {
background: var(--sl-color-gray-100);
}
.markdown-section th {
border: none;
font-weight: var(--sl-font-weight-semibold);
@ -471,12 +499,17 @@ strong {
.markdown-section p.tip,
.markdown-section p.warn {
position: relative;
background: var(--sl-color-gray-50);
background-color: var(--sl-color-gray-50);
border-left: solid 4px transparent;
border-radius: var(--sl-border-radius-medium);
padding-left: 1.5rem;
}
.sl-theme-dark .markdown-section p.tip,
.sl-theme-dark .markdown-section p.warn {
background-color: var(--sl-color-gray-100);
}
.markdown-section p.tip:before,
.markdown-section p.warn:before {
content: '!';
@ -577,6 +610,10 @@ html .repo-button:hover {
border: solid 1px var(--sl-color-gray-200);
}
.sl-theme-dark .repo-button:hover {
background-color: var(--sl-color-gray-100);
}
html .repo-button:focus {
outline: none;
border-color: var(--sl-color-primary-500);
@ -599,18 +636,101 @@ html .repo-button--small {
}
html .repo-button--sponsor sl-icon {
color: #ea4aaa;
color: var(--sl-color-pink-500);
}
html .repo-button--github sl-icon {
color: #242a2e;
color: var(--sl-color-gray-600);
}
html .repo-button--twitter sl-icon {
color: #1ea0f2;
color: var(--sl-color-sky-500);
}
body[data-page^='tokens/'] .table-wrapper td:first-child,
body[data-page^='tokens/'] .table-wrapper td:first-child code {
white-space: nowrap;
}
/* Border radius demo */
.border-radius-demo {
width: 3rem;
height: 3rem;
background: var(--sl-color-primary-500);
}
/* Transition demo */
.transition-demo {
position: relative;
background: var(--sl-color-gray-200);
width: 8rem;
height: 2rem;
}
.transition-demo:after {
content: '';
position: absolute;
background-color: var(--sl-color-primary-500);
top: 0;
left: 0;
width: 0;
height: 100%;
transition-duration: inherit;
transition-property: width;
}
.transition-demo:hover:after {
width: 100%;
}
/* Spacing demo */
.spacing-demo {
width: 100px;
background: var(--sl-color-primary-500);
}
/* Elevation dmeo */
.elevation-demo {
background: var(--sl-color-white);
border-radius: 3px;
width: 4rem;
height: 4rem;
}
/* Color palettes */
.color-palette {
display: grid;
grid-template-columns: 200px repeat(11, 1fr);
gap: 1rem 0rem;
margin: 2rem 0;
}
.color-palette__name {
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-semibold);
grid-template-columns: repeat(11, 1fr);
}
.color-palette__name code {
background: none;
font-size: var(--sl-font-size-x-small);
}
.color-palette__example {
font-size: var(--sl-font-size-x-small);
text-align: center;
}
.color-palette__swatch {
height: 3rem;
}
@media screen and (max-width: 1200px) {
.color-palette {
grid-template-columns: repeat(6, 1fr);
}
.color-palette__name {
grid-column-start: span 6;
}
}

2
docs/components/avatar.md
Wyświetl plik

@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
}
.avatar-group sl-avatar::part(base) {
border: solid 2px white;
border: solid 2px var(--sl-color-white);
}
</style>
```

4
docs/components/icon.md
Wyświetl plik

@ -618,10 +618,6 @@ If you want to change the icons Shoelace uses internally, you can register an ic
color: var(--sl-color-primary-500);
}
.sl-theme-dark .icon-list-item:hover {
background-color: var(--sl-color-primary-900);
}
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
display: none;
}

2
docs/index.html
Wyświetl plik

@ -33,8 +33,6 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
<link rel="stylesheet" href="/assets/styles/docs.css" />
<link rel="stylesheet" href="/assets/styles/docs-dark.css" />
<link rel="stylesheet" href="/assets/styles/demos.css" />
<link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
<link rel="stylesheet" href="/assets/plugins/theme/theme.css" />
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />

537
docs/tokens/color.md
Wyświetl plik

@ -1,125 +1,450 @@
# Color Tokens
Color tokens are used to maintain consistent color use throughout your app.
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives.
## Theme Colors
To reference a color token in your stylesheet, use 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.
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
## Theme Tokens
This will make all colors in the primary color palette various shades of purple.
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, info, warning, and danger are used to visualize actions that correspond to their respective meanings.
```css
:root {
/* Changes the primary color palette to purple */
--sl-color-primary-50: #faf5ff;
--sl-color-primary-100: #f3e8ff;
--sl-color-primary-200: #e9d5ff;
--sl-color-primary-300: #d8b4fe;
--sl-color-primary-400: #c084fc;
--sl-color-primary-500: #a855f7;
--sl-color-primary-600: #9333ea;
--sl-color-primary-700: #7e22ce;
--sl-color-primary-800: #6b21a8;
--sl-color-primary-900: #581c87;
}
```
<div class="color-palette">
<div class="color-palette__name">
Primary<br>
<code>--sl-color-primary-<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-1000);"></div>1000</div>
?> Although CSS lets you override custom properties on specific elements, these values _must_ be scoped to the `:root` block for the entire palette to be recalculated. [See this page for details.](https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop)
<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-1000);"></div>1000</div>
## Primary
<div class="color-palette__name">
Info<br>
<code>--sl-color-info-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-50);"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-100);"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-200);"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-300);"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-400);"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-500);"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-600);"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-700);"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-800);"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-900);"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-1000);"></div>1000</div>
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-primary-50` | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div> |
| `--sl-color-primary-100` | <div class="color-demo" style="background-color: var(--sl-color-primary-100);"></div> |
| `--sl-color-primary-200` | <div class="color-demo" style="background-color: var(--sl-color-primary-200);"></div> |
| `--sl-color-primary-300` | <div class="color-demo" style="background-color: var(--sl-color-primary-300);"></div> |
| `--sl-color-primary-400` | <div class="color-demo" style="background-color: var(--sl-color-primary-400);"></div> |
| `--sl-color-primary-500` | <div class="color-demo" style="background-color: var(--sl-color-primary-500);"></div> |
| `--sl-color-primary-600` | <div class="color-demo" style="background-color: var(--sl-color-primary-600);"></div> |
| `--sl-color-primary-700` | <div class="color-demo" style="background-color: var(--sl-color-primary-700);"></div> |
| `--sl-color-primary-800` | <div class="color-demo" style="background-color: var(--sl-color-primary-800);"></div> |
| `--sl-color-primary-900` | <div class="color-demo" style="background-color: var(--sl-color-primary-900);"></div> |
| `--sl-color-primary-950` | <div class="color-demo" style="background-color: var(--sl-color-primary-950);"></div> |
<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-1000);"></div>1000</div>
## Gray
<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-1000);"></div>1000</div>
</div>
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-white` | <div class="color-demo" style="background-color: var(--sl-color-white);"></div> |
| `--sl-color-gray-50` | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div> |
| `--sl-color-gray-100` | <div class="color-demo" style="background-color: var(--sl-color-gray-100);"></div> |
| `--sl-color-gray-200` | <div class="color-demo" style="background-color: var(--sl-color-gray-200);"></div> |
| `--sl-color-gray-300` | <div class="color-demo" style="background-color: var(--sl-color-gray-300);"></div> |
| `--sl-color-gray-400` | <div class="color-demo" style="background-color: var(--sl-color-gray-400);"></div> |
| `--sl-color-gray-500` | <div class="color-demo" style="background-color: var(--sl-color-gray-500);"></div> |
| `--sl-color-gray-600` | <div class="color-demo" style="background-color: var(--sl-color-gray-600);"></div> |
| `--sl-color-gray-700` | <div class="color-demo" style="background-color: var(--sl-color-gray-700);"></div> |
| `--sl-color-gray-800` | <div class="color-demo" style="background-color: var(--sl-color-gray-800);"></div> |
| `--sl-color-gray-900` | <div class="color-demo" style="background-color: var(--sl-color-gray-900);"></div> |
| `--sl-color-gray-950` | <div class="color-demo" style="background-color: var(--sl-color-gray-950);"></div> |
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div> |
## Primitives
## Success
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).
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-success-50` | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div> |
| `--sl-color-success-100` | <div class="color-demo" style="background-color: var(--sl-color-success-100);"></div> |
| `--sl-color-success-200` | <div class="color-demo" style="background-color: var(--sl-color-success-200);"></div> |
| `--sl-color-success-300` | <div class="color-demo" style="background-color: var(--sl-color-success-300);"></div> |
| `--sl-color-success-400` | <div class="color-demo" style="background-color: var(--sl-color-success-400);"></div> |
| `--sl-color-success-500` | <div class="color-demo" style="background-color: var(--sl-color-success-500);"></div> |
| `--sl-color-success-600` | <div class="color-demo" style="background-color: var(--sl-color-success-600);"></div> |
| `--sl-color-success-700` | <div class="color-demo" style="background-color: var(--sl-color-success-700);"></div> |
| `--sl-color-success-800` | <div class="color-demo" style="background-color: var(--sl-color-success-800);"></div> |
| `--sl-color-success-900` | <div class="color-demo" style="background-color: var(--sl-color-success-900);"></div> |
| `--sl-color-success-950` | <div class="color-demo" style="background-color: var(--sl-color-success-950);"></div> |
<div class="color-palette">
<div class="color-palette__name">
Blue Gray<br>
<code>--sl-color-blue-gray-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-50);"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-100);"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-200);"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-300);"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-400);"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-500);"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-600);"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-700);"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-800);"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-900);"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-1000);"></div>1000</div>
## Info
<div class="color-palette__name">
Cool Gray<br>
<code>--sl-color-cool-gray-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-50);"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-100);"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-200);"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-300);"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-400);"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-500);"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-600);"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-700);"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-800);"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-900);"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-1000);"></div>1000</div>
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-info-50` | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div> |
| `--sl-color-info-100` | <div class="color-demo" style="background-color: var(--sl-color-info-100);"></div> |
| `--sl-color-info-200` | <div class="color-demo" style="background-color: var(--sl-color-info-200);"></div> |
| `--sl-color-info-300` | <div class="color-demo" style="background-color: var(--sl-color-info-300);"></div> |
| `--sl-color-info-400` | <div class="color-demo" style="background-color: var(--sl-color-info-400);"></div> |
| `--sl-color-info-500` | <div class="color-demo" style="background-color: var(--sl-color-info-500);"></div> |
| `--sl-color-info-600` | <div class="color-demo" style="background-color: var(--sl-color-info-600);"></div> |
| `--sl-color-info-700` | <div class="color-demo" style="background-color: var(--sl-color-info-700);"></div> |
| `--sl-color-info-800` | <div class="color-demo" style="background-color: var(--sl-color-info-800);"></div> |
| `--sl-color-info-900` | <div class="color-demo" style="background-color: var(--sl-color-info-900);"></div> |
| `--sl-color-info-950` | <div class="color-demo" style="background-color: var(--sl-color-info-950);"></div> |
<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-1000);"></div>1000</div>
## Warning
<div class="color-palette__name">
True Gray<br>
<code>--sl-color-true-gray-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-50);"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-100);"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-200);"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-300);"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-400);"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-500);"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-600);"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-700);"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-800);"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-900);"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-1000);"></div>1000</div>
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-warning-50` | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div> |
| `--sl-color-warning-100` | <div class="color-demo" style="background-color: var(--sl-color-warning-100);"></div> |
| `--sl-color-warning-200` | <div class="color-demo" style="background-color: var(--sl-color-warning-200);"></div> |
| `--sl-color-warning-300` | <div class="color-demo" style="background-color: var(--sl-color-warning-300);"></div> |
| `--sl-color-warning-400` | <div class="color-demo" style="background-color: var(--sl-color-warning-400);"></div> |
| `--sl-color-warning-500` | <div class="color-demo" style="background-color: var(--sl-color-warning-500);"></div> |
| `--sl-color-warning-600` | <div class="color-demo" style="background-color: var(--sl-color-warning-600);"></div> |
| `--sl-color-warning-700` | <div class="color-demo" style="background-color: var(--sl-color-warning-700);"></div> |
| `--sl-color-warning-800` | <div class="color-demo" style="background-color: var(--sl-color-warning-800);"></div> |
| `--sl-color-warning-900` | <div class="color-demo" style="background-color: var(--sl-color-warning-900);"></div> |
| `--sl-color-warning-950` | <div class="color-demo" style="background-color: var(--sl-color-warning-950);"></div> |
<div class="color-palette__name">
Warm Gray<br>
<code>--sl-color-warm-gray-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-50);"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-100);"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-200);"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-300);"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-400);"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-500);"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-600);"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-700);"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-800);"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-900);"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-1000);"></div>1000</div>
## Danger
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<div class="color-palette__name">
Green<br>
<code>--sl-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-1000);"></div>1000</div>
<div class="color-palette__name">
Emerald<br>
<code>--sl-color-emerald-<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-1000);"></div>1000</div>
<div class="color-palette__name">
Teal<br>
<code>--sl-color-teal-<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-1000);"></div>1000</div>
<div class="color-palette__name">
Cyan<br>
<code>--sl-color-cyan-<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-1000);"></div>1000</div>
<div class="color-palette__name">
Sky<br>
<code>--sl-color-sky-<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
<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-1000);"></div>1000</div>
</div>
| Token | Example |
| ------------------------ | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-50` | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div> |
| `--sl-color-danger-100` | <div class="color-demo" style="background-color: var(--sl-color-danger-100);"></div> |
| `--sl-color-danger-200` | <div class="color-demo" style="background-color: var(--sl-color-danger-200);"></div> |
| `--sl-color-danger-300` | <div class="color-demo" style="background-color: var(--sl-color-danger-300);"></div> |
| `--sl-color-danger-400` | <div class="color-demo" style="background-color: var(--sl-color-danger-400);"></div> |
| `--sl-color-danger-500` | <div class="color-demo" style="background-color: var(--sl-color-danger-500);"></div> |
| `--sl-color-danger-600` | <div class="color-demo" style="background-color: var(--sl-color-danger-600);"></div> |
| `--sl-color-danger-700` | <div class="color-demo" style="background-color: var(--sl-color-danger-700);"></div> |
| `--sl-color-danger-800` | <div class="color-demo" style="background-color: var(--sl-color-danger-800);"></div> |
| `--sl-color-danger-900` | <div class="color-demo" style="background-color: var(--sl-color-danger-900);"></div> |
| `--sl-color-danger-950` | <div class="color-demo" style="background-color: var(--sl-color-danger-950);"></div> |