From 7d6390d9bfaa5368b1210a842a80c9d20260d6d5 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 3 Aug 2021 17:34:51 -0400 Subject: [PATCH] adjust styles and use tokens when possible --- docs/assets/plugins/code-block/code-block.css | 49 +- docs/assets/plugins/theme/theme.js | 5 +- docs/assets/styles/demos.css | 60 -- docs/assets/styles/docs-dark.css | 191 ------- docs/assets/styles/docs.css | 154 ++++- docs/components/avatar.md | 2 +- docs/components/icon.md | 4 - docs/index.html | 2 - docs/tokens/color.md | 537 ++++++++++++++---- 9 files changed, 579 insertions(+), 425 deletions(-) delete mode 100644 docs/assets/styles/demos.css delete mode 100644 docs/assets/styles/docs-dark.css diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 864a09ec1..42f3eb5d2 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -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); -} diff --git a/docs/assets/plugins/theme/theme.js b/docs/assets/plugins/theme/theme.js index 2c4dd1d52..158bcd1bd 100644 --- a/docs/assets/plugins/theme/theme.js +++ b/docs/assets/plugins/theme/theme.js @@ -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)); }); }); diff --git a/docs/assets/styles/demos.css b/docs/assets/styles/demos.css deleted file mode 100644 index d5e89c42c..000000000 --- a/docs/assets/styles/demos.css +++ /dev/null @@ -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); -} diff --git a/docs/assets/styles/docs-dark.css b/docs/assets/styles/docs-dark.css deleted file mode 100644 index d280e22ce..000000000 --- a/docs/assets/styles/docs-dark.css +++ /dev/null @@ -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); -} diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 5ebc2ca60..5abbff34a 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -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; + } +} diff --git a/docs/components/avatar.md b/docs/components/avatar.md index 4bf523b3b..03eb128d7 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -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); } ``` diff --git a/docs/components/icon.md b/docs/components/icon.md index c2f5cde35..f8872f984 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -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; } diff --git a/docs/index.html b/docs/index.html index 9f38c2ed1..8e9ea8a0d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,8 +33,6 @@ - - diff --git a/docs/tokens/color.md b/docs/tokens/color.md index 08e1ae9e5..1e1df0477 100644 --- a/docs/tokens/color.md +++ b/docs/tokens/color.md @@ -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; -} -``` +
+
+ Primary
+ --sl-color-primary-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-?> 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) +
+ Success
+ --sl-color-success-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-## Primary +
+ Info
+ --sl-color-info-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-| Token | Example | -| ------------------------ | ------------------------------------------------------------------------------------- | -| `--sl-color-primary-50` |
| -| `--sl-color-primary-100` |
| -| `--sl-color-primary-200` |
| -| `--sl-color-primary-300` |
| -| `--sl-color-primary-400` |
| -| `--sl-color-primary-500` |
| -| `--sl-color-primary-600` |
| -| `--sl-color-primary-700` |
| -| `--sl-color-primary-800` |
| -| `--sl-color-primary-900` |
| -| `--sl-color-primary-950` |
| +
+ Warning
+ --sl-color-warning-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-## Gray +
+ Danger
+ --sl-color-danger-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+
-| Token | Example | -| ------------------------ | ------------------------------------------------------------------------------- | -| `--sl-color-white` |
| -| `--sl-color-gray-50` |
| -| `--sl-color-gray-100` |
| -| `--sl-color-gray-200` |
| -| `--sl-color-gray-300` |
| -| `--sl-color-gray-400` |
| -| `--sl-color-gray-500` |
| -| `--sl-color-gray-600` |
| -| `--sl-color-gray-700` |
| -| `--sl-color-gray-800` |
| -| `--sl-color-gray-900` |
| -| `--sl-color-gray-950` |
| -| `--sl-color-black` |
| +## 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` |
| -| `--sl-color-success-100` |
| -| `--sl-color-success-200` |
| -| `--sl-color-success-300` |
| -| `--sl-color-success-400` |
| -| `--sl-color-success-500` |
| -| `--sl-color-success-600` |
| -| `--sl-color-success-700` |
| -| `--sl-color-success-800` |
| -| `--sl-color-success-900` |
| -| `--sl-color-success-950` |
| +
+
+ Blue Gray
+ --sl-color-blue-gray-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-## Info +
+ Cool Gray
+ --sl-color-cool-gray-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-| Token | Example | -| ------------------------ | ------------------------------------------------------------------------------- | -| `--sl-color-info-50` |
| -| `--sl-color-info-100` |
| -| `--sl-color-info-200` |
| -| `--sl-color-info-300` |
| -| `--sl-color-info-400` |
| -| `--sl-color-info-500` |
| -| `--sl-color-info-600` |
| -| `--sl-color-info-700` |
| -| `--sl-color-info-800` |
| -| `--sl-color-info-900` |
| -| `--sl-color-info-950` |
| +
+ Gray
+ --sl-color-gray-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-## Warning +
+ True Gray
+ --sl-color-true-gray-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-| Token | Example | -| ------------------------ | ------------------------------------------------------------------------------------- | -| `--sl-color-warning-50` |
| -| `--sl-color-warning-100` |
| -| `--sl-color-warning-200` |
| -| `--sl-color-warning-300` |
| -| `--sl-color-warning-400` |
| -| `--sl-color-warning-500` |
| -| `--sl-color-warning-600` |
| -| `--sl-color-warning-700` |
| -| `--sl-color-warning-800` |
| -| `--sl-color-warning-900` |
| -| `--sl-color-warning-950` |
| +
+ Warm Gray
+ --sl-color-warm-gray-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
-## Danger +
+ Red
+ --sl-color-red-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Orange
+ --sl-color-orange-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Amber
+ --sl-color-amber-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Yellow
+ --sl-color-yellow-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Lime
+ --sl-color-lime-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Green
+ --sl-color-green-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Emerald
+ --sl-color-emerald-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Teal
+ --sl-color-teal-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Cyan
+ --sl-color-cyan-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Sky
+ --sl-color-sky-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Blue
+ --sl-color-blue-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Indigo
+ --sl-color-indigo-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Violet
+ --sl-color-violet-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Purple
+ --sl-color-purple-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Fuchsia
+ --sl-color-fuchsia-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Pink
+ --sl-color-pink-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+ +
+ Rose
+ --sl-color-rose-{n} +
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+
-| Token | Example | -| ------------------------ | ----------------------------------------------------------------------------------- | -| `--sl-color-danger-50` |
| -| `--sl-color-danger-100` |
| -| `--sl-color-danger-200` |
| -| `--sl-color-danger-300` |
| -| `--sl-color-danger-400` |
| -| `--sl-color-danger-500` |
| -| `--sl-color-danger-600` |
| -| `--sl-color-danger-700` |
| -| `--sl-color-danger-800` |
| -| `--sl-color-danger-900` |
| -| `--sl-color-danger-950` |
| \ No newline at end of file