mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-11 01:39:11 +00:00
1665 lines
69 KiB
HTML
1665 lines
69 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-layout="default" data-shoelace-version="0.0.10">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="Color tokens help maintain consistent use of color throughout your app." />
|
||
<title>Color Tokens</title>
|
||
|
||
<meta name="turbo-cache-control" />
|
||
|
||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
|
||
<link rel="stylesheet" href="/assets/styles/search.css" />
|
||
|
||
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
||
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="twitter:creator" content="shoelace_style" />
|
||
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<meta property="og:url" content="https://nebulaui.org/tokens/color/" />
|
||
<meta property="og:title" content="Color Tokens" />
|
||
<meta property="og:description" content="Color tokens help maintain consistent use of color throughout your app." />
|
||
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||
|
||
<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>
|
||
|
||
<script src="/assets/scripts/turbo.js" type="module"></script>
|
||
<script src="/assets/scripts/docs.js" defer=""></script>
|
||
<script src="/assets/scripts/code-previews.js" defer=""></script>
|
||
<script src="/assets/scripts/lunr.js" defer=""></script>
|
||
<script src="/assets/scripts/search.js" defer=""></script>
|
||
</head>
|
||
<body>
|
||
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
||
Skip to main content
|
||
</a>
|
||
|
||
<button id="menu-toggle" type="button" aria-label="Menu">
|
||
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
||
</g>
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="icon-toolbar">
|
||
<a
|
||
href="https://github.com/onsonr/nebula"
|
||
title="View Nebula on GitHub"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="github"></sl-icon>
|
||
</a>
|
||
|
||
<a
|
||
href="https://twitter.com/shoelace_style"
|
||
title="Follow Nebula on Twitter"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="twitter"></sl-icon>
|
||
</a>
|
||
|
||
<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="/assets/images/wordmark.svg" alt="Nebula" />
|
||
</a>
|
||
<div class="sidebar-version">0.0.10</div>
|
||
</header>
|
||
|
||
<div class="sidebar-buttons">
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--github"
|
||
href="https://github.com/onsonr/nebula"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--star"
|
||
href="https://github.com/onsonr/nebula/stargazers"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--twitter"
|
||
href="https://twitter.com/shoelace_style"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||
</sl-button>
|
||
</div>
|
||
|
||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||
<sl-icon name="search"></sl-icon>
|
||
<span>Search</span>
|
||
</button>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li>
|
||
<h2>Getting Started</h2>
|
||
<ul>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/getting-started/installation">Installation</a></li>
|
||
<li><a href="/getting-started/usage">Usage</a></li>
|
||
<li><a href="/getting-started/themes">Themes</a></li>
|
||
<li><a href="/getting-started/customizing">Customizing</a></li>
|
||
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
||
<li><a href="/getting-started/localization">Localization</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Frameworks</h2>
|
||
<ul>
|
||
<li><a href="/frameworks/react">React</a></li>
|
||
<li><a href="/frameworks/vue">Vue</a></li>
|
||
<li><a href="/frameworks/angular">Angular</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Resources</h2>
|
||
<ul>
|
||
<li><a href="/resources/community">Community</a></li>
|
||
<li>
|
||
<a
|
||
href="https://github.com/onsonr/nebula/discussions"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Help & Support</a
|
||
>
|
||
</li>
|
||
<li><a href="/resources/accessibility">Accessibility</a></li>
|
||
<li><a href="/resources/contributing">Contributing</a></li>
|
||
<li><a href="/resources/changelog">Changelog</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Components</h2>
|
||
<ul>
|
||
<li>
|
||
<a href="/components/alert"> Alert </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animated-image"> Animated Image </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animation"> Animation </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/avatar"> Avatar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/badge"> Badge </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb"> Breadcrumb </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button"> Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button-group"> Button Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/card"> Card </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel"> Carousel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel-item"> Carousel Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/checkbox"> Checkbox </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/color-picker"> Color Picker </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/copy-button"> Copy Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/details"> Details </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dialog"> Dialog </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/divider"> Divider </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/drawer"> Drawer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dropdown"> Dropdown </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-bytes"> Format Bytes </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-date"> Format Date </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-number"> Format Number </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon"> Icon </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon-button"> Icon Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/image-comparer"> Image Comparer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/include"> Include </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/input"> Input </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu"> Menu </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-item"> Menu Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-label"> Menu Label </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/mutation-observer"> Mutation Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/option"> Option </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/popup"> Popup </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-bar"> Progress Bar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-ring"> Progress Ring </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/qr-code"> QR Code </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio"> Radio </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-button"> Radio Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-group"> Radio Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/range"> Range </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/rating"> Rating </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/relative-time"> Relative Time </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/resize-observer"> Resize Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/select"> Select </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/skeleton"> Skeleton </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/spinner"> Spinner </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/split-panel"> Split Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/switch"> Switch </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab"> Tab </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-group"> Tab Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-panel"> Tab Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tag"> Tag </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/textarea"> Textarea </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tooltip"> Tooltip </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree"> Tree </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree-item"> Tree Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/visually-hidden"> Visually Hidden </a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Design Tokens</h2>
|
||
<ul>
|
||
<li><a href="/tokens/typography">Typography</a></li>
|
||
<li><a href="/tokens/color" class="active-link">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/transition">Transition</a></li>
|
||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||
<li><a href="/tokens/more">More Tokens</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Tutorials</h2>
|
||
<ul>
|
||
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
|
||
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
||
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
||
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main>
|
||
<a id="main-content"></a>
|
||
<article id="content" class="content content--with-toc">
|
||
<div class="content__toc">
|
||
<ul>
|
||
<li class="top"><a href="#">Color Tokens</a></li>
|
||
<li data-level="2"><a href="#theme-tokens">Theme Tokens</a></li>
|
||
<li data-level="2"><a href="#primitives">Primitives</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content__body">
|
||
<h1>Color Tokens</h1>
|
||
<p>
|
||
Color tokens help maintain consistent use of color throughout your app. Nebula provides palettes for theme
|
||
colors and primitives that you can use as a foundation for your design system.
|
||
</p>
|
||
<p>
|
||
Color tokens are referenced using the <code>--sl-color-{name}-{n}</code> CSS custom property, where
|
||
<code>{name}</code> is the name of the palette and <code>{n}</code> is the numeric value of the desired
|
||
swatch.
|
||
</p>
|
||
<h2 id="theme-tokens" class="anchor-heading">
|
||
Theme Tokens<a href="#theme-tokens" aria-label='Direct link to "Theme Tokens"'></a>
|
||
</h2>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<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-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>
|
||
<div role="alert" class="callout callout--tip">
|
||
<p>
|
||
Looking for an easy way to customize your theme?
|
||
<a
|
||
href="https://codepen.io/claviska/full/QWveRgL"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Try the color token generator!</a
|
||
>
|
||
</p>
|
||
</div>
|
||
<h2 id="primitives" class="anchor-heading">
|
||
Primitives<a href="#primitives" aria-label='Direct link to "Primitives"'></a>
|
||
</h2>
|
||
<p>
|
||
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
|
||
<a
|
||
href="https://tailwindcss.com/docs/customizing-colors"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Tailwind color palette</a
|
||
>.
|
||
</p>
|
||
<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>
|
||
<div class="color-palette">
|
||
<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-950)"></div>
|
||
950
|
||
</div>
|
||
</div>
|
||
<div class="color-palette">
|
||
<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-950)"></div>
|
||
950
|
||
</div>
|
||
</div>
|
||
<div class="color-palette">
|
||
<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-950)"></div>
|
||
950
|
||
</div>
|
||
</div>
|
||
<div class="color-palette">
|
||
<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-950)"></div>
|
||
950
|
||
</div>
|
||
</div>
|
||
<div class="color-palette">
|
||
<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-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>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|