mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
use rgb primitives for color tokens to support alpha
This commit is contained in:
Cory LaViska
@@ -1,21 +1,21 @@
|
||||
.code-block {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: var(--sl-color-gray-50);
|
||||
background-color: rgb(var(--sl-color-gray-50));
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.sl-theme-dark .code-block {
|
||||
background-color: var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-gray-200));
|
||||
}
|
||||
|
||||
.code-block__preview {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
@@ -43,9 +43,9 @@
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: var(--sl-color-gray-500);
|
||||
background-color: var(--sl-color-white);
|
||||
border-left: solid 1px var(--sl-color-gray-200);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-left: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-top-right-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
transition: 250ms background-color;
|
||||
@@ -53,9 +53,10 @@
|
||||
|
||||
.code-block__resizer:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-400), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-500);
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
|
||||
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -70,7 +71,7 @@
|
||||
}
|
||||
|
||||
.code-block__source {
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
margin: 0;
|
||||
@@ -93,13 +94,13 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background: var(--sl-color-white);
|
||||
background: rgb(var(--sl-color-white));
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
color: var(--sl-color-gray-600);
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
cursor: pointer;
|
||||
transition: 250ms background-color;
|
||||
-webkit-appearance: none;
|
||||
@@ -107,16 +108,16 @@
|
||||
|
||||
.code-block__toggle:hover,
|
||||
.code-block__toggle:active {
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-500);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.code-block__toggle:focus {
|
||||
outline: none;
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-500);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -13,13 +13,13 @@ 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);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
color: rgb(var(--sl-color-gray-800));
|
||||
line-height: var(--sl-line-height-normal);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
strong {
|
||||
@@ -28,8 +28,8 @@ strong {
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background: var(--sl-color-white);
|
||||
border-right: solid 1px var(--sl-color-gray-200);
|
||||
background: rgb(var(--sl-color-white));
|
||||
border-right: solid 1px rgb(var(--sl-color-gray-200));
|
||||
}
|
||||
|
||||
.sidebar .app-name {
|
||||
@@ -40,7 +40,7 @@ strong {
|
||||
.sidebar-version {
|
||||
font-size: var(--sl-font-size-x-small);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--sl-color-gray-400);
|
||||
color: rgb(var(--sl-color-gray-400));
|
||||
text-align: right;
|
||||
padding: 0 var(--sl-spacing-small);
|
||||
margin: -1.25rem 0 0.6rem 0;
|
||||
@@ -58,10 +58,10 @@ strong {
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search'] {
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid 1px var(--sl-input-border-color);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid 1px rgb(var(--sl-input-border-color));
|
||||
border-radius: var(--sl-border-radius-pill);
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
padding-left: 1rem;
|
||||
padding-right: 2rem;
|
||||
margin: 0 1.25rem;
|
||||
@@ -69,16 +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);
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search']:focus {
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
background-color: rgb(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);
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -101,11 +101,11 @@ strong {
|
||||
}
|
||||
|
||||
.sidebar .clear-button svg circle {
|
||||
fill: var(--sl-color-gray-400);
|
||||
fill: rgb(var(--sl-color-gray-400));
|
||||
}
|
||||
|
||||
.sidebar .clear-button svg path {
|
||||
stroke: var(--sl-color-white);
|
||||
stroke: rgb(var(--sl-color-white));
|
||||
}
|
||||
|
||||
.sidebar .clear-button:focus {
|
||||
@@ -117,7 +117,7 @@ strong {
|
||||
}
|
||||
|
||||
.search .matching-post {
|
||||
border-bottom: solid 1px var(--sl-color-gray-500) !important;
|
||||
border-bottom: solid 1px rgb(var(--sl-color-gray-500)) !important;
|
||||
padding: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@ strong {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -183,12 +183,12 @@ strong {
|
||||
|
||||
.sidebar-nav li.collapse > a,
|
||||
.sidebar-nav li.active > a {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.sidebar li > p {
|
||||
font-weight: var(--sl-font-weight-bold);
|
||||
border-bottom: solid 1px var(--sl-color-gray-200);
|
||||
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
|
||||
margin: 0 0.75rem 0.5rem 0;
|
||||
}
|
||||
|
||||
@@ -269,12 +269,12 @@ strong {
|
||||
}
|
||||
|
||||
.anchor span {
|
||||
color: var(--sl-color-black);
|
||||
color: rgb(var(--sl-color-black));
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
position: relative;
|
||||
border-left: solid 4px var(--sl-color-gray-200);
|
||||
border-left: solid 4px rgb(var(--sl-color-gray-200));
|
||||
font-style: italic;
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
@@ -298,7 +298,7 @@ strong {
|
||||
}
|
||||
|
||||
.docsify-pagination-container {
|
||||
border-top-color: var(--sl-color-gray-200) !important;
|
||||
border-top-color: rgb(var(--sl-color-gray-200)) !important;
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
@@ -317,7 +317,7 @@ strong {
|
||||
|
||||
.markdown-section h2 {
|
||||
font-size: var(--sl-font-size-x-large);
|
||||
border-bottom: solid 1px var(--sl-color-gray-200);
|
||||
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -348,39 +348,39 @@ strong {
|
||||
.markdown-section code {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
background-color: var(--sl-color-gray-50);
|
||||
background-color: rgb(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);
|
||||
background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
.markdown-section kbd {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown-section pre {
|
||||
position: relative;
|
||||
background-color: var(--sl-color-gray-50);
|
||||
background-color: rgb(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);
|
||||
background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
.markdown-section pre > code {
|
||||
display: block;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
color: var(--sl-color-gray-700);
|
||||
color: rgb(var(--sl-color-gray-700));
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: auto;
|
||||
hyphens: none;
|
||||
@@ -388,18 +388,18 @@ strong {
|
||||
}
|
||||
|
||||
.markdown-section pre .token.comment {
|
||||
color: var(--sl-color-gray-400);
|
||||
color: rgb(var(--sl-color-gray-400));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.prolog,
|
||||
.markdown-section pre .token.doctype,
|
||||
.markdown-section pre .token.cdata,
|
||||
.markdown-section pre .token.operator {
|
||||
color: var(--sl-color-gray-600);
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.punctuation {
|
||||
color: var(--sl-color-gray-600);
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
}
|
||||
|
||||
.namespace {
|
||||
@@ -410,12 +410,12 @@ strong {
|
||||
.markdown-section pre .token.keyword,
|
||||
.markdown-section pre .token.tag,
|
||||
.markdown-section pre .token.url {
|
||||
color: var(--sl-color-sky-600);
|
||||
color: rgb(var(--sl-color-sky-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.symbol,
|
||||
.markdown-section pre .token.deleted {
|
||||
color: #f92672;
|
||||
color: rgb(var(--sl-color-pink-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.boolean,
|
||||
@@ -426,24 +426,24 @@ strong {
|
||||
.markdown-section pre .token.char,
|
||||
.markdown-section pre .token.builtin,
|
||||
.markdown-section pre .token.inserted {
|
||||
color: var(--sl-color-emerald-600);
|
||||
color: rgb(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: var(--sl-color-violet-600);
|
||||
color: rgb(var(--sl-color-violet-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.function,
|
||||
.markdown-section pre .token.class-name,
|
||||
.markdown-section pre .token.regex {
|
||||
color: var(--sl-color-orange-600);
|
||||
color: rgb(var(--sl-color-orange-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.important {
|
||||
color: var(--sl-color-red-600);
|
||||
color: rgb(var(--sl-color-red-600));
|
||||
}
|
||||
|
||||
.markdown-section pre .token.important,
|
||||
@@ -466,11 +466,11 @@ strong {
|
||||
}
|
||||
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background: var(--sl-color-gray-50);
|
||||
background: rgb(var(--sl-color-gray-50));
|
||||
}
|
||||
|
||||
.sl-theme-dark .markdown-section tr:nth-child(2n) {
|
||||
background: var(--sl-color-gray-100);
|
||||
background: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
@@ -480,8 +480,8 @@ strong {
|
||||
}
|
||||
|
||||
.markdown-section td {
|
||||
border-top: solid 1px var(--sl-color-gray-200);
|
||||
border-bottom: solid 1px var(--sl-color-gray-200);
|
||||
border-top: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
@@ -499,7 +499,7 @@ strong {
|
||||
.markdown-section p.tip,
|
||||
.markdown-section p.warn {
|
||||
position: relative;
|
||||
background-color: var(--sl-color-gray-50);
|
||||
background-color: rgb(var(--sl-color-gray-50));
|
||||
border-left: solid 4px transparent;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding-left: 1.5rem;
|
||||
@@ -507,14 +507,14 @@ strong {
|
||||
|
||||
.sl-theme-dark .markdown-section p.tip,
|
||||
.sl-theme-dark .markdown-section p.warn {
|
||||
background-color: var(--sl-color-gray-100);
|
||||
background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
.markdown-section p.tip:before,
|
||||
.markdown-section p.warn:before {
|
||||
content: '!';
|
||||
border-radius: 100%;
|
||||
color: var(--sl-color-white);
|
||||
color: rgb(var(--sl-color-white));
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: -12px;
|
||||
@@ -527,29 +527,29 @@ strong {
|
||||
}
|
||||
|
||||
.markdown-section p.warn {
|
||||
border-left-color: var(--sl-color-primary-500);
|
||||
border-left-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.markdown-section p.warn:before {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
border-left-color: var(--sl-color-danger-500);
|
||||
border-left-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.markdown-section p.tip:before {
|
||||
background-color: var(--sl-color-danger-500);
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.markdown-section p.tip code,
|
||||
.markdown-section p.warn code {
|
||||
background-color: var(--sl-color-gray-100);
|
||||
background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
/* Component headers */
|
||||
.component-header {
|
||||
border-bottom: solid 1px var(--sl-color-gray-200);
|
||||
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
|
||||
padding-bottom: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
@@ -563,7 +563,7 @@ strong {
|
||||
|
||||
.component-header__tag code {
|
||||
background: none;
|
||||
color: var(--sl-color-gray-500);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
font-size: var(--sl-font-size-large);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -590,15 +590,15 @@ strong {
|
||||
html .repo-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: var(--sl-color-white);
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-x-small);
|
||||
font-size: var(--sl-font-size-small);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
line-height: 2;
|
||||
text-decoration: none;
|
||||
color: var(--sl-color-gray-700);
|
||||
color: rgb(var(--sl-color-gray-700));
|
||||
padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
|
||||
margin-bottom: var(--sl-spacing-xx-small);
|
||||
transition: 0.25s all;
|
||||
@@ -606,17 +606,17 @@ html .repo-button {
|
||||
|
||||
html .repo-button:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--sl-color-gray-50);
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-gray-50));
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
}
|
||||
|
||||
.sl-theme-dark .repo-button:hover {
|
||||
background-color: var(--sl-color-gray-100);
|
||||
background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
|
||||
html .repo-button:focus {
|
||||
outline: none;
|
||||
border-color: var(--sl-color-primary-500);
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
@@ -636,15 +636,15 @@ html .repo-button--small {
|
||||
}
|
||||
|
||||
html .repo-button--sponsor sl-icon {
|
||||
color: var(--sl-color-pink-500);
|
||||
color: rgb(var(--sl-color-pink-500));
|
||||
}
|
||||
|
||||
html .repo-button--github sl-icon {
|
||||
color: var(--sl-color-gray-600);
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
}
|
||||
|
||||
html .repo-button--twitter sl-icon {
|
||||
color: var(--sl-color-sky-500);
|
||||
color: rgb(var(--sl-color-sky-500));
|
||||
}
|
||||
|
||||
body[data-page^='tokens/'] .table-wrapper td:first-child,
|
||||
@@ -656,13 +656,13 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
|
||||
.border-radius-demo {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: var(--sl-color-primary-500);
|
||||
background: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
/* Transition demo */
|
||||
.transition-demo {
|
||||
position: relative;
|
||||
background: var(--sl-color-gray-200);
|
||||
background: rgb(var(--sl-color-gray-200));
|
||||
width: 8rem;
|
||||
height: 2rem;
|
||||
}
|
||||
@@ -670,7 +670,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
|
||||
.transition-demo:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
@@ -686,12 +686,12 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
|
||||
/* Spacing demo */
|
||||
.spacing-demo {
|
||||
width: 100px;
|
||||
background: var(--sl-color-primary-500);
|
||||
background: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
/* Elevation dmeo */
|
||||
.elevation-demo {
|
||||
background: var(--sl-color-white);
|
||||
background: rgb(var(--sl-color-white));
|
||||
border-radius: 3px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@@ -19,7 +19,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -83,7 +83,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
|
||||
.animation-sandbox .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.animation-sandbox .controls {
|
||||
@@ -129,7 +129,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -169,7 +169,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
|
||||
.animation-keyframes .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
|
||||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px var(--sl-color-white);
|
||||
border: solid 2px rgb(var(--sl-color-white));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -80,7 +80,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak
|
||||
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 240px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-label>Messages</sl-menu-label>
|
||||
<sl-menu-item>Comments <sl-badge slot="suffix" type="info" pill>4</sl-badge></sl-menu-item>
|
||||
<sl-menu-item>Replies <sl-badge slot="suffix" type="info" pill>12</sl-badge></sl-menu-item>
|
||||
|
||||
@@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--sl-color-gray-500);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
}
|
||||
|
||||
.card-overview [slot="footer"] {
|
||||
|
||||
@@ -58,7 +58,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" class="dialog-scrolling">
|
||||
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
|
||||
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
|
||||
@@ -96,7 +96,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
|
||||
|
||||
```html preview
|
||||
<div
|
||||
style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
|
||||
style="position: relative; border: solid 2px rgb(var(--sl-panel-border-color)); height: 300px; padding: 1rem; margin-bottom: 1rem;"
|
||||
>
|
||||
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
|
||||
|
||||
@@ -146,7 +146,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-scrolling">
|
||||
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
|
||||
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
|
||||
@@ -114,7 +114,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
||||
|
||||
<style>
|
||||
.dropdown-hoist {
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -179,11 +179,11 @@ The `invalid` attribute reflects the form control's validity, so you can style i
|
||||
<style>
|
||||
.custom-input[invalid]:not([disabled])::part(label),
|
||||
.custom-input[invalid]:not([disabled])::part(help-text) {
|
||||
color: var(--sl-color-danger-600);
|
||||
color: rgb(var(--sl-color-danger-600));
|
||||
}
|
||||
|
||||
.custom-input[invalid]:not([disabled])::part(base) {
|
||||
border-color: var(--sl-color-danger-500);
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.custom-input[invalid] {
|
||||
|
||||
@@ -558,7 +558,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
|
||||
|
||||
<style>
|
||||
.icon-search {
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
@@ -614,8 +614,8 @@ If you want to change the icons Shoelace uses internally, you can register an ic
|
||||
}
|
||||
|
||||
.icon-list-item:hover {
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
|
||||
|
||||
@@ -6,7 +6,7 @@ Menu dividers are used to visually group menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="2">Option 2</sl-menu-item>
|
||||
|
||||
@@ -6,7 +6,7 @@ Menu items provide options for the user to pick from in a menu.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item>Option 2</sl-menu-item>
|
||||
|
||||
@@ -6,7 +6,7 @@ Menu labels are used to describe a group of menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-label>Fruits</sl-menu-label>
|
||||
<sl-menu-item value="apple">Apple</sl-menu-item>
|
||||
|
||||
@@ -7,7 +7,7 @@ Menus provide a list of options for the user to choose from.
|
||||
You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
|
||||
@@ -27,7 +27,7 @@ The resize observer will report changes to the dimensions of the elements it wra
|
||||
<style>
|
||||
.resize-observer-overview div {
|
||||
display: flex;
|
||||
border: solid 2px var(--sl-input-border-color);
|
||||
border: solid 2px rgb(var(--sl-input-border-color));
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@@ -215,8 +215,8 @@ To expose custom properties as part of a component's API, scope them to the `:ho
|
||||
|
||||
```css
|
||||
:host {
|
||||
--color: var(--sl-color-primary-500);
|
||||
--background-color: var(--sl-color-gray-100);
|
||||
--color: rgb(var(--sl-color-primary-500));
|
||||
--background-color: rgb(var(--sl-color-gray-100));
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -13,81 +13,81 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-1000));"></div>1000</div>
|
||||
|
||||
<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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-1000));"></div>1000</div>
|
||||
|
||||
<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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-1000));"></div>1000</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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-1000));"></div>1000</div>
|
||||
|
||||
<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 class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-1000));"></div>1000</div>
|
||||
</div>
|
||||
|
||||
## Primitives
|
||||
@@ -99,352 +99,352 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-1000));"></div>1000</div>
|
||||
|
||||
<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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-1000));"></div>1000</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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-1000));"></div>1000</div>
|
||||
|
||||
<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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-1000));"></div>1000</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>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-1000));"></div>1000</div>
|
||||
|
||||
<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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(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 class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-1000));"></div>1000</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,8 +15,8 @@ export default css`
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background-color: var(--sl-color-white);
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-top-width: 3px;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--box-shadow);
|
||||
@@ -24,7 +24,7 @@ export default css`
|
||||
font-size: var(--sl-font-size-small);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
line-height: 1.6;
|
||||
color: var(--sl-color-gray-700);
|
||||
color: rgb(var(--sl-color-gray-700));
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
@@ -40,43 +40,43 @@ export default css`
|
||||
}
|
||||
|
||||
.alert--primary {
|
||||
border-top-color: var(--sl-color-primary-500);
|
||||
border-top-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.alert--primary .alert__icon {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
border-top-color: var(--sl-color-success-500);
|
||||
border-top-color: rgb(var(--sl-color-success-500));
|
||||
}
|
||||
|
||||
.alert--success .alert__icon {
|
||||
color: var(--sl-color-success-500);
|
||||
color: rgb(var(--sl-color-success-500));
|
||||
}
|
||||
|
||||
.alert--info {
|
||||
border-top-color: var(--sl-color-info-500);
|
||||
border-top-color: rgb(var(--sl-color-info-500));
|
||||
}
|
||||
|
||||
.alert--info .alert__icon {
|
||||
color: var(--sl-color-info-500);
|
||||
color: rgb(var(--sl-color-info-500));
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
border-top-color: var(--sl-color-warning-500);
|
||||
border-top-color: rgb(var(--sl-color-warning-500));
|
||||
}
|
||||
|
||||
.alert--warning .alert__icon {
|
||||
color: var(--sl-color-warning-500);
|
||||
color: rgb(var(--sl-color-warning-500));
|
||||
}
|
||||
|
||||
.alert--danger {
|
||||
border-top-color: var(--sl-color-danger-500);
|
||||
border-top-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.alert--danger .alert__icon {
|
||||
color: var(--sl-color-danger-500);
|
||||
color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.alert__message {
|
||||
|
||||
@@ -17,11 +17,11 @@ export default css`
|
||||
position: relative;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
background-color: var(--sl-color-gray-400);
|
||||
background-color: rgb(var(--sl-color-gray-400));
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: calc(var(--size) * 0.5);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--sl-color-white);
|
||||
color: rgb(var(--sl-color-white));
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -25,28 +25,28 @@ export default css`
|
||||
|
||||
/* Type modifiers */
|
||||
.badge--primary {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-primary-text);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-primary-text));
|
||||
}
|
||||
|
||||
.badge--success {
|
||||
background-color: var(--sl-color-success-500);
|
||||
color: var(--sl-color-success-text);
|
||||
background-color: rgb(var(--sl-color-success-500));
|
||||
color: rgb(var(--sl-color-success-text));
|
||||
}
|
||||
|
||||
.badge--info {
|
||||
background-color: var(--sl-color-info-500);
|
||||
color: var(--sl-color-info-text);
|
||||
background-color: rgb(var(--sl-color-info-500));
|
||||
color: rgb(var(--sl-color-info-text));
|
||||
}
|
||||
|
||||
.badge--warning {
|
||||
background-color: var(--sl-color-warning-500);
|
||||
color: var(--sl-color-warning-text);
|
||||
background-color: rgb(var(--sl-color-warning-500));
|
||||
color: rgb(var(--sl-color-warning-text));
|
||||
}
|
||||
|
||||
.badge--danger {
|
||||
background-color: var(--sl-color-danger-500);
|
||||
color: var(--sl-color-danger-text);
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
color: rgb(var(--sl-color-danger-text));
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
@@ -60,23 +60,23 @@ export default css`
|
||||
}
|
||||
|
||||
.badge--pulse.badge--primary {
|
||||
--pulse-color: var(--sl-color-primary-500);
|
||||
--pulse-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.badge--pulse.badge--success {
|
||||
--pulse-color: var(--sl-color-success-500);
|
||||
--pulse-color: rgb(var(--sl-color-success-500));
|
||||
}
|
||||
|
||||
.badge--pulse.badge--info {
|
||||
--pulse-color: var(--sl-color-info-500);
|
||||
--pulse-color: rgb(var(--sl-color-info-500));
|
||||
}
|
||||
|
||||
.badge--pulse.badge--warning {
|
||||
--pulse-color: var(--sl-color-warning-500);
|
||||
--pulse-color: rgb(var(--sl-color-warning-500));
|
||||
}
|
||||
|
||||
.badge--pulse.badge--danger {
|
||||
--pulse-color: var(--sl-color-danger-500);
|
||||
--pulse-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
@@ -69,157 +69,157 @@ export default css`
|
||||
|
||||
/* Default */
|
||||
.button.button--default {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-gray-300);
|
||||
color: var(--sl-color-gray-600);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-gray-300));
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
}
|
||||
|
||||
.button.button--default:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-300);
|
||||
color: var(--sl-color-primary-600);
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
border-color: rgb(var(--sl-color-primary-300));
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
}
|
||||
|
||||
.button.button--default:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-300);
|
||||
color: var(--sl-color-primary-600);
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
border-color: rgb(var(--sl-color-primary-300));
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
.button.button--default:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-100);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
color: var(--sl-color-primary-700);
|
||||
background-color: rgb(var(--sl-color-primary-100));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.button.button--primary {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-primary-text);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-primary-text));
|
||||
}
|
||||
|
||||
.button.button--primary:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
color: var(--sl-color-primary-text);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: rgb(var(--sl-color-primary-text));
|
||||
}
|
||||
|
||||
.button.button--primary:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
color: var(--sl-color-primary-text);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: rgb(var(--sl-color-primary-text));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
.button.button--primary:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-primary-text);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-primary-text));
|
||||
}
|
||||
|
||||
/* Success */
|
||||
.button.button--success {
|
||||
background-color: var(--sl-color-success-500);
|
||||
border-color: var(--sl-color-success-500);
|
||||
color: var(--sl-color-success-text);
|
||||
background-color: rgb(var(--sl-color-success-500));
|
||||
border-color: rgb(var(--sl-color-success-500));
|
||||
color: rgb(var(--sl-color-success-text));
|
||||
}
|
||||
|
||||
.button.button--success:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-success-400);
|
||||
border-color: var(--sl-color-success-400);
|
||||
color: var(--sl-color-success-text);
|
||||
background-color: rgb(var(--sl-color-success-400));
|
||||
border-color: rgb(var(--sl-color-success-400));
|
||||
color: rgb(var(--sl-color-success-text));
|
||||
}
|
||||
|
||||
.button.button--success:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-success-400);
|
||||
border-color: var(--sl-color-success-400);
|
||||
color: var(--sl-color-success-text);
|
||||
background-color: rgb(var(--sl-color-success-400));
|
||||
border-color: rgb(var(--sl-color-success-400));
|
||||
color: rgb(var(--sl-color-success-text));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success);
|
||||
}
|
||||
|
||||
.button.button--success:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-success-500);
|
||||
border-color: var(--sl-color-success-500);
|
||||
color: var(--sl-color-success-text);
|
||||
background-color: rgb(var(--sl-color-success-500));
|
||||
border-color: rgb(var(--sl-color-success-500));
|
||||
color: rgb(var(--sl-color-success-text));
|
||||
}
|
||||
|
||||
/* Info */
|
||||
.button.button--info {
|
||||
background-color: var(--sl-color-info-500);
|
||||
border-color: var(--sl-color-info-500);
|
||||
color: var(--sl-color-info-text);
|
||||
background-color: rgb(var(--sl-color-info-500));
|
||||
border-color: rgb(var(--sl-color-info-500));
|
||||
color: rgb(var(--sl-color-info-text));
|
||||
}
|
||||
|
||||
.button.button--info:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-info-400);
|
||||
border-color: var(--sl-color-info-400);
|
||||
color: var(--sl-color-info-text);
|
||||
background-color: rgb(var(--sl-color-info-400));
|
||||
border-color: rgb(var(--sl-color-info-400));
|
||||
color: rgb(var(--sl-color-info-text));
|
||||
}
|
||||
|
||||
.button.button--info:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-info-400);
|
||||
border-color: var(--sl-color-info-400);
|
||||
color: var(--sl-color-info-text);
|
||||
background-color: rgb(var(--sl-color-info-400));
|
||||
border-color: rgb(var(--sl-color-info-400));
|
||||
color: rgb(var(--sl-color-info-text));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info);
|
||||
}
|
||||
|
||||
.button.button--info:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-info-500);
|
||||
border-color: var(--sl-color-info-500);
|
||||
color: var(--sl-color-info-text);
|
||||
background-color: rgb(var(--sl-color-info-500));
|
||||
border-color: rgb(var(--sl-color-info-500));
|
||||
color: rgb(var(--sl-color-info-text));
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.button.button--warning {
|
||||
background-color: var(--sl-color-warning-500);
|
||||
border-color: var(--sl-color-warning-500);
|
||||
color: var(--sl-color-warning-text);
|
||||
background-color: rgb(var(--sl-color-warning-500));
|
||||
border-color: rgb(var(--sl-color-warning-500));
|
||||
color: rgb(var(--sl-color-warning-text));
|
||||
}
|
||||
.button.button--warning:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-warning-400);
|
||||
border-color: var(--sl-color-warning-400);
|
||||
color: var(--sl-color-warning-text);
|
||||
background-color: rgb(var(--sl-color-warning-400));
|
||||
border-color: rgb(var(--sl-color-warning-400));
|
||||
color: rgb(var(--sl-color-warning-text));
|
||||
}
|
||||
|
||||
.button.button--warning:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-warning-400);
|
||||
border-color: var(--sl-color-warning-400);
|
||||
color: var(--sl-color-warning-text);
|
||||
background-color: rgb(var(--sl-color-warning-400));
|
||||
border-color: rgb(var(--sl-color-warning-400));
|
||||
color: rgb(var(--sl-color-warning-text));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning);
|
||||
}
|
||||
|
||||
.button.button--warning:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-warning-500);
|
||||
border-color: var(--sl-color-warning-500);
|
||||
color: var(--sl-color-warning-text);
|
||||
background-color: rgb(var(--sl-color-warning-500));
|
||||
border-color: rgb(var(--sl-color-warning-500));
|
||||
color: rgb(var(--sl-color-warning-text));
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.button.button--danger {
|
||||
background-color: var(--sl-color-danger-500);
|
||||
border-color: var(--sl-color-danger-500);
|
||||
color: var(--sl-color-danger-text);
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
color: rgb(var(--sl-color-danger-text));
|
||||
}
|
||||
|
||||
.button.button--danger:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-color-danger-400);
|
||||
border-color: var(--sl-color-danger-400);
|
||||
color: var(--sl-color-danger-text);
|
||||
background-color: rgb(var(--sl-color-danger-400));
|
||||
border-color: rgb(var(--sl-color-danger-400));
|
||||
color: rgb(var(--sl-color-danger-text));
|
||||
}
|
||||
|
||||
.button.button--danger:focus:not(.button--disabled) {
|
||||
background-color: var(--sl-color-danger-400);
|
||||
border-color: var(--sl-color-danger-400);
|
||||
color: var(--sl-color-danger-text);
|
||||
background-color: rgb(var(--sl-color-danger-400));
|
||||
border-color: rgb(var(--sl-color-danger-400));
|
||||
color: rgb(var(--sl-color-danger-text));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
|
||||
}
|
||||
|
||||
.button.button--danger:active:not(.button--disabled) {
|
||||
background-color: var(--sl-color-danger-500);
|
||||
border-color: var(--sl-color-danger-500);
|
||||
color: var(--sl-color-danger-text);
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
color: rgb(var(--sl-color-danger-text));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -229,26 +229,26 @@ export default css`
|
||||
.button--text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.button--text:hover:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--sl-color-primary-400);
|
||||
color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
.button--text:focus:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--sl-color-primary-400);
|
||||
color: rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
.button--text:active:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--sl-color-primary-600);
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -482,8 +482,7 @@ export default css`
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: solid 1px #fff4;
|
||||
mix-blend-mode: lighten;
|
||||
border-left: solid 1px rgb(var(--sl-color-white) / 20%);
|
||||
}
|
||||
|
||||
/* Bump focused buttons up so their focus ring isn't clipped */
|
||||
|
||||
@@ -5,7 +5,7 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--border-color: var(--sl-color-gray-200);
|
||||
--border-color: rgb(var(--sl-color-gray-200));
|
||||
--border-radius: var(--sl-border-radius-medium);
|
||||
--border-width: 1px;
|
||||
--padding: var(--sl-spacing-large);
|
||||
@@ -16,7 +16,7 @@ export default css`
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
box-shadow: var(--sl-shadow-x-small);
|
||||
border: solid var(--border-width) var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
@@ -14,7 +14,7 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-size: var(--sl-input-font-size-medium);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -27,10 +27,10 @@ export default css`
|
||||
justify-content: center;
|
||||
width: var(--sl-toggle-size);
|
||||
height: var(--sl-toggle-size);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
border-radius: 2px;
|
||||
background-color: var(--sl-input-background-color);
|
||||
color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
color: rgb(var(--sl-color-white));
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
|
||||
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
|
||||
}
|
||||
@@ -56,36 +56,36 @@ export default css`
|
||||
|
||||
/* Hover */
|
||||
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
/* Checked/indeterminate */
|
||||
.checkbox--checked .checkbox__control,
|
||||
.checkbox--indeterminate .checkbox__control {
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
/* Checked/indeterminate + hover */
|
||||
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
||||
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
/* Checked/indeterminate + focus */
|
||||
.checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,
|
||||
.checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,13 +20,13 @@ export default css`
|
||||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.color-picker--inline {
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
box-shadow: var(--sl-shadow-small);
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@ export default css`
|
||||
|
||||
.color-picker__grid-handle:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
|
||||
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
@@ -97,7 +97,7 @@ export default css`
|
||||
|
||||
.color-picker__slider-handle:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
|
||||
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
@@ -172,7 +172,7 @@ export default css`
|
||||
width: calc(var(--sl-input-height-small) / 2);
|
||||
height: calc(var(--sl-input-height-small) / 2);
|
||||
color: white;
|
||||
background-color: var(--sl-color-gray-900);
|
||||
background-color: rgb(var(--sl-color-gray-900));
|
||||
border-radius: var(--sl-border-radius-circle);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -225,7 +225,7 @@ export default css`
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-gap: 6px;
|
||||
justify-items: center;
|
||||
border-top: solid 1px var(--sl-color-gray-200);
|
||||
border-top: solid 1px rgb(var(--sl-color-gray-200));
|
||||
padding: var(--sl-spacing-small);
|
||||
}
|
||||
|
||||
@@ -253,10 +253,10 @@ export default css`
|
||||
}
|
||||
|
||||
.color-picker__transparent-bg {
|
||||
background-image: linear-gradient(45deg, var(--sl-color-gray-300) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--sl-color-gray-300) 75%),
|
||||
linear-gradient(45deg, transparent 75%, var(--sl-color-gray-300) 75%),
|
||||
linear-gradient(45deg, var(--sl-color-gray-300) 25%, transparent 25%);
|
||||
background-image: linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
|
||||
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
|
||||
linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
|
||||
}
|
||||
@@ -335,7 +335,7 @@ export default css`
|
||||
}
|
||||
|
||||
.color-dropdown__trigger:focus:not(.color-dropdown__trigger--disabled):before {
|
||||
box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.color-dropdown__trigger.color-dropdown__trigger--disabled {
|
||||
|
||||
@@ -9,7 +9,7 @@ export default css`
|
||||
}
|
||||
|
||||
.details {
|
||||
border: solid 1px var(--sl-color-gray-200);
|
||||
border: solid 1px rgb(var(--sl-color-gray-200));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default css`
|
||||
width: var(--width);
|
||||
max-width: calc(100% - var(--sl-spacing-xx-large));
|
||||
max-height: calc(100% - var(--sl-spacing-xx-large));
|
||||
background-color: var(--sl-panel-background-color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
}
|
||||
@@ -101,6 +101,6 @@ export default css`
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--sl-overlay-background-color);
|
||||
background-color: rgb(var(--sl-overlay-background-color) / 40%);
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -39,7 +39,7 @@ export default css`
|
||||
z-index: 2;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: var(--sl-panel-background-color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
transition: var(--sl-transition-medium) transform;
|
||||
overflow: auto;
|
||||
@@ -132,7 +132,7 @@ export default css`
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--sl-overlay-background-color);
|
||||
background-color: rgb(var(--sl-overlay-background-color) / 40%);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,8 +27,8 @@ export default css`
|
||||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
overflow: auto;
|
||||
|
||||
@@ -16,7 +16,7 @@ export default css`
|
||||
border: none;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
font-size: inherit;
|
||||
color: var(--sl-color-gray-500);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
padding: var(--sl-spacing-x-small);
|
||||
cursor: pointer;
|
||||
transition: var(--sl-transition-medium) color;
|
||||
@@ -25,11 +25,11 @@ export default css`
|
||||
|
||||
.icon-button:hover:not(.icon-button--disabled),
|
||||
.icon-button:focus:not(.icon-button--disabled) {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.icon-button:active:not(.icon-button--disabled) {
|
||||
color: var(--sl-color-primary-600);
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
}
|
||||
|
||||
.icon-button:focus {
|
||||
|
||||
@@ -48,7 +48,7 @@ export default css`
|
||||
top: 0;
|
||||
width: var(--divider-width);
|
||||
height: 100%;
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
transform: translateX(calc(var(--divider-width) / -2));
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@@ -61,17 +61,17 @@ export default css`
|
||||
top: calc(50% - (var(--handle-size) / 2));
|
||||
width: var(--handle-size);
|
||||
height: var(--handle-size);
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-radius: var(--sl-border-radius-circle);
|
||||
font-size: calc(var(--handle-size) * 0.5);
|
||||
color: var(--sl-color-gray-500);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
cursor: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.image-comparer__handle:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
|
||||
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -21,8 +21,8 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
letter-spacing: var(--sl-input-letter-spacing);
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
@@ -30,37 +30,37 @@ export default css`
|
||||
}
|
||||
|
||||
.input:hover:not(.input--disabled) {
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
}
|
||||
|
||||
.input:hover:not(.input--disabled) .input__control {
|
||||
color: var(--sl-input-color-hover);
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
}
|
||||
|
||||
.input.input--focused:not(.input--disabled) {
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.input.input--focused:not(.input--disabled) .input__control {
|
||||
color: var(--sl-input-color-focus);
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
}
|
||||
|
||||
.input.input--disabled {
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
background-color: rgb(var(--sl-input-background-color-disabled));
|
||||
border-color: rgb(var(--sl-input-border-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.input.input--disabled .input__control {
|
||||
color: var(--sl-input-color-disabled);
|
||||
color: rgb(var(--sl-input-color-disabled));
|
||||
}
|
||||
|
||||
.input.input--disabled .input__control::placeholder {
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
}
|
||||
|
||||
.input__control {
|
||||
@@ -70,7 +70,7 @@ export default css`
|
||||
font-weight: inherit;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@@ -91,12 +91,12 @@ export default css`
|
||||
.input__control:-webkit-autofill:hover,
|
||||
.input__control:-webkit-autofill:focus,
|
||||
.input__control:-webkit-autofill:active {
|
||||
box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
|
||||
-webkit-text-fill-color: var(--sl-color-primary-500);
|
||||
box-shadow: 0 0 0 var(--sl-input-height-large) rgb(var(--sl-input-background-color-hover)) inset !important;
|
||||
-webkit-text-fill-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.input__control::placeholder {
|
||||
color: var(--sl-input-placeholder-color);
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ export default css`
|
||||
|
||||
.input__prefix ::slotted(sl-icon),
|
||||
.input__suffix ::slotted(sl-icon) {
|
||||
color: var(--sl-input-icon-color);
|
||||
color: rgb(var(--sl-input-icon-color));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -218,7 +218,7 @@ export default css`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
color: var(--sl-input-icon-color);
|
||||
color: rgb(var(--sl-input-icon-color));
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
@@ -228,7 +228,7 @@ export default css`
|
||||
|
||||
.input__clear:hover,
|
||||
.input__password-toggle:hover {
|
||||
color: var(--sl-input-icon-color-hover);
|
||||
color: rgb(var(--sl-input-icon-color-hover));
|
||||
}
|
||||
|
||||
.input__clear:focus,
|
||||
|
||||
@@ -9,7 +9,7 @@ export default css`
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
border-top: solid 1px var(--sl-panel-border-color);
|
||||
border-top: solid 1px rgb(var(--sl-panel-border-color));
|
||||
margin: var(--sl-spacing-x-small) 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -18,7 +18,7 @@ export default css`
|
||||
line-height: var(--sl-line-height-normal);
|
||||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
text-align: left;
|
||||
color: var(--sl-color-gray-700);
|
||||
color: rgb(var(--sl-color-gray-700));
|
||||
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
|
||||
transition: var(--sl-transition-fast) fill;
|
||||
user-select: none;
|
||||
@@ -27,7 +27,7 @@ export default css`
|
||||
}
|
||||
.menu-item.menu-item--disabled {
|
||||
outline: none;
|
||||
color: var(--sl-color-gray-400);
|
||||
color: rgb(var(--sl-color-gray-400));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -62,8 +62,8 @@ export default css`
|
||||
:host(:hover:not([aria-disabled='true'])) .menu-item,
|
||||
:host(:focus:not([aria-disabled='true'])) .menu-item {
|
||||
outline: none;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-white));
|
||||
}
|
||||
|
||||
.menu-item .menu-item__check {
|
||||
|
||||
@@ -14,7 +14,7 @@ export default css`
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
line-height: var(--sl-line-height-normal);
|
||||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
color: var(--sl-color-gray-400);
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@ export default css`
|
||||
|
||||
:host {
|
||||
--height: 16px;
|
||||
--track-color: var(--sl-color-gray-200);
|
||||
--indicator-color: var(--sl-color-primary-500);
|
||||
--label-color: var(--sl-color-white);
|
||||
--track-color: rgb(var(--sl-color-gray-200));
|
||||
--indicator-color: rgb(var(--sl-color-primary-500));
|
||||
--label-color: rgb(var(--sl-color-white));
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--track-color: var(--sl-color-gray-200);
|
||||
--indicator-color: var(--sl-color-primary-500);
|
||||
--track-color: rgb(var(--sl-color-gray-200));
|
||||
--indicator-color: rgb(var(--sl-color-primary-500));
|
||||
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ export default css`
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding: var(--sl-spacing-large);
|
||||
padding-top: var(--sl-spacing-x-small);
|
||||
@@ -19,7 +19,7 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-size: var(--sl-input-font-size-medium);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
padding: 0 var(--sl-spacing-xx-small);
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-size: var(--sl-input-font-size-medium);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -38,9 +38,9 @@ export default css`
|
||||
justify-content: center;
|
||||
width: var(--sl-toggle-size);
|
||||
height: var(--sl-toggle-size);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
border-radius: 50%;
|
||||
background-color: var(--sl-input-background-color);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
color: transparent;
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
|
||||
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
|
||||
@@ -56,34 +56,34 @@ export default css`
|
||||
|
||||
/* Hover */
|
||||
.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.radio--checked .radio__control {
|
||||
color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
/* Checked + hover */
|
||||
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
/* Checked + focus */
|
||||
.radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ export default css`
|
||||
:host {
|
||||
--thumb-size: 20px;
|
||||
--tooltip-offset-y: 10px;
|
||||
--track-color: var(--sl-color-gray-200);
|
||||
--track-color: rgb(var(--sl-color-gray-200));
|
||||
--track-height: 6px;
|
||||
|
||||
display: block;
|
||||
@@ -42,8 +42,8 @@ export default css`
|
||||
width: var(--thumb-size);
|
||||
height: var(--thumb-size);
|
||||
border-radius: 50%;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border: solid var(--sl-input-border-width) var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-color-primary-500));
|
||||
-webkit-appearance: none;
|
||||
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
|
||||
@@ -52,19 +52,19 @@ export default css`
|
||||
}
|
||||
|
||||
.range__control:not(:disabled)::-webkit-slider-thumb:hover {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
.range__control:not(:disabled):focus::-webkit-slider-thumb {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
.range__control:not(:disabled)::-webkit-slider-thumb:active {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@@ -86,27 +86,27 @@ export default css`
|
||||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
border-radius: 50%;
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
|
||||
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range__control:not(:disabled)::-moz-range-thumb:hover {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
.range__control:not(:disabled):focus::-moz-range-thumb {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
.range__control:not(:disabled)::-moz-range-thumb:active {
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@@ -133,12 +133,12 @@ export default css`
|
||||
z-index: var(--sl-z-index-tooltip);
|
||||
left: 1px;
|
||||
border-radius: var(--sl-tooltip-border-radius);
|
||||
background-color: var(--sl-tooltip-background-color);
|
||||
background-color: rgb(var(--sl-tooltip-background-color));
|
||||
font-family: var(--sl-tooltip-font-family);
|
||||
font-size: var(--sl-tooltip-font-size);
|
||||
font-weight: var(--sl-tooltip-font-weight);
|
||||
line-height: var(--sl-tooltip-line-height);
|
||||
color: var(--sl-tooltip-color);
|
||||
color: rgb(var(--sl-tooltip-color));
|
||||
opacity: 0;
|
||||
padding: var(--sl-tooltip-padding);
|
||||
transition: var(--sl-transition-fast) opacity;
|
||||
@@ -164,7 +164,7 @@ export default css`
|
||||
}
|
||||
|
||||
.range--tooltip-top .range__tooltip:after {
|
||||
border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-top: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-left: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-right: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
top: 100%;
|
||||
@@ -175,7 +175,7 @@ export default css`
|
||||
bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
|
||||
}
|
||||
.range--tooltip-bottom .range__tooltip:after {
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-left: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-right: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
bottom: 100%;
|
||||
|
||||
@@ -5,7 +5,7 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--symbol-color: var(--sl-color-gray-300);
|
||||
--symbol-color: rgb(var(--sl-color-gray-300));
|
||||
--symbol-color-active: #ffbe00;
|
||||
--symbol-size: 1.2rem;
|
||||
--symbol-spacing: var(--sl-spacing-xxx-small);
|
||||
|
||||
@@ -25,8 +25,8 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
letter-spacing: var(--sl-input-letter-spacing);
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
@@ -34,23 +34,23 @@ export default css`
|
||||
}
|
||||
|
||||
.select:not(.select--disabled) .select__box:hover {
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
color: var(--sl-input-color-hover);
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
}
|
||||
|
||||
.select.select--focused:not(.select--disabled) .select__box {
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
box-shadow: var(--focus-ring);
|
||||
outline: none;
|
||||
color: var(--sl-input-color-focus);
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
}
|
||||
|
||||
.select--disabled .select__box {
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
color: var(--sl-input-color-disabled);
|
||||
background-color: rgb(var(--sl-input-background-color-disabled));
|
||||
border-color: rgb(var(--sl-input-border-color-disabled));
|
||||
color: rgb(var(--sl-input-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
outline: none;
|
||||
@@ -96,11 +96,11 @@ export default css`
|
||||
|
||||
/* Placeholder */
|
||||
.select--placeholder-visible .select__label {
|
||||
color: var(--sl-input-placeholder-color);
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
}
|
||||
|
||||
.select--disabled.select--placeholder-visible .select__label {
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
|
||||
@@ -6,8 +6,8 @@ export default css`
|
||||
|
||||
:host {
|
||||
--border-radius: var(--sl-border-radius-pill);
|
||||
--color: var(--sl-color-gray-200);
|
||||
--sheen-color: var(--sl-color-gray-100);
|
||||
--color: rgb(var(--sl-color-gray-200));
|
||||
--sheen-color: rgb(var(--sl-color-gray-300));
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@@ -5,8 +5,8 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--track-color: var(--sl-color-gray-200);
|
||||
--indicator-color: var(--sl-color-primary-500);
|
||||
--track-color: rgb(var(--sl-color-black) / 10%);
|
||||
--indicator-color: rgb(var(--sl-color-primary-500));
|
||||
--stroke-width: 2px;
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
@@ -18,7 +18,7 @@ export default css`
|
||||
font-family: var(--sl-input-font-family);
|
||||
font-size: var(--sl-input-font-size-medium);
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -31,8 +31,8 @@ export default css`
|
||||
justify-content: center;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
background-color: var(--sl-color-gray-300);
|
||||
border: solid var(--sl-input-border-width) var(--sl-color-gray-300);
|
||||
background-color: rgb(var(--sl-color-gray-300));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-color-gray-300));
|
||||
border-radius: var(--height);
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
|
||||
}
|
||||
@@ -40,9 +40,9 @@ export default css`
|
||||
.switch__control .switch__thumb {
|
||||
width: var(--thumb-size);
|
||||
height: var(--thumb-size);
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-radius: 50%;
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
transform: translateX(calc((var(--width) - var(--height)) / -2));
|
||||
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
|
||||
var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
|
||||
@@ -58,56 +58,56 @@ export default css`
|
||||
|
||||
/* Hover */
|
||||
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
|
||||
background-color: var(--sl-color-gray-200);
|
||||
border-color: var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-gray-200));
|
||||
border-color: rgb(var(--sl-color-gray-200));
|
||||
}
|
||||
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-input-border-color);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-input-border-color));
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
|
||||
background-color: var(--sl-color-gray-200);
|
||||
border-color: var(--sl-color-gray-200);
|
||||
background-color: rgb(var(--sl-color-gray-200));
|
||||
border-color: rgb(var(--sl-color-gray-200));
|
||||
}
|
||||
|
||||
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.switch--checked .switch__control {
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
.switch--checked .switch__control .switch__thumb {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
transform: translateX(calc((var(--width) - var(--height)) / 2));
|
||||
}
|
||||
|
||||
/* Checked + hover */
|
||||
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
/* Checked + focus */
|
||||
.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control {
|
||||
background-color: var(--sl-color-primary-400);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
background-color: rgb(var(--sl-color-primary-400));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
}
|
||||
|
||||
.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
|
||||
background-color: var(--sl-color-white);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: rgb(var(--sl-color-white));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--tabs-border-color: var(--sl-color-gray-200);
|
||||
--tabs-border-color: rgb(var(--sl-color-gray-200));
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -90,7 +90,7 @@ export default css`
|
||||
|
||||
.tab-group--top .tab-group__indicator {
|
||||
bottom: -2px;
|
||||
border-bottom: solid 2px var(--sl-color-primary-500);
|
||||
border-bottom: solid 2px rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab-group--top .tab-group__body {
|
||||
@@ -132,7 +132,7 @@ export default css`
|
||||
|
||||
.tab-group--bottom .tab-group__indicator {
|
||||
top: calc(-1 * 2px);
|
||||
border-top: solid 2px var(--sl-color-primary-500);
|
||||
border-top: solid 2px rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab-group--bottom .tab-group__body {
|
||||
@@ -159,7 +159,7 @@ export default css`
|
||||
|
||||
.tab-group--start .tab-group__indicator {
|
||||
right: calc(-1 * 2px);
|
||||
border-right: solid 2px var(--sl-color-primary-500);
|
||||
border-right: solid 2px rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab-group--start .tab-group__body {
|
||||
@@ -187,7 +187,7 @@ export default css`
|
||||
|
||||
.tab-group--end .tab-group__indicator {
|
||||
left: calc(-1 * 2px);
|
||||
border-left: solid 2px var(--sl-color-primary-500);
|
||||
border-left: solid 2px rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab-group--end .tab-group__body {
|
||||
|
||||
@@ -17,7 +17,7 @@ export default css`
|
||||
font-size: var(--sl-font-size-small);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
border-radius: 4px;
|
||||
color: var(--sl-color-gray-600);
|
||||
color: rgb(var(--sl-color-gray-600));
|
||||
padding: var(--sl-spacing-medium) var(--sl-spacing-large);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
@@ -26,7 +26,7 @@ export default css`
|
||||
}
|
||||
|
||||
.tab:hover:not(.tab--disabled) {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab:focus {
|
||||
@@ -34,12 +34,12 @@ export default css`
|
||||
}
|
||||
|
||||
.tab:focus:not(.tab--disabled) {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.tab.tab--active:not(.tab--disabled) {
|
||||
color: var(--sl-color-primary-500);
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
}
|
||||
|
||||
.tab.tab--closable {
|
||||
|
||||
@@ -28,33 +28,33 @@ export default css`
|
||||
*/
|
||||
|
||||
.tag--primary {
|
||||
background-color: var(--sl-color-primary-100);
|
||||
border-color: var(--sl-color-primary-200);
|
||||
color: var(--sl-color-primary-700);
|
||||
background-color: rgb(var(--sl-color-primary-100));
|
||||
border-color: rgb(var(--sl-color-primary-200));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
}
|
||||
|
||||
.tag--success {
|
||||
background-color: var(--sl-color-success-100);
|
||||
border-color: var(--sl-color-success-200);
|
||||
color: var(--sl-color-success-700);
|
||||
background-color: rgb(var(--sl-color-success-100));
|
||||
border-color: rgb(var(--sl-color-success-200));
|
||||
color: rgb(var(--sl-color-success-700));
|
||||
}
|
||||
|
||||
.tag--info {
|
||||
background-color: var(--sl-color-info-100);
|
||||
border-color: var(--sl-color-info-200);
|
||||
color: var(--sl-color-info-700);
|
||||
background-color: rgb(var(--sl-color-info-100));
|
||||
border-color: rgb(var(--sl-color-info-200));
|
||||
color: rgb(var(--sl-color-info-700));
|
||||
}
|
||||
|
||||
.tag--warning {
|
||||
background-color: var(--sl-color-warning-100);
|
||||
border-color: var(--sl-color-warning-200);
|
||||
color: var(--sl-color-warning-700);
|
||||
background-color: rgb(var(--sl-color-warning-100));
|
||||
border-color: rgb(var(--sl-color-warning-200));
|
||||
color: rgb(var(--sl-color-warning-700));
|
||||
}
|
||||
|
||||
.tag--danger {
|
||||
background-color: var(--sl-color-danger-100);
|
||||
border-color: var(--sl-color-danger-200);
|
||||
color: var(--sl-color-danger-700);
|
||||
background-color: rgb(var(--sl-color-danger-100));
|
||||
border-color: rgb(var(--sl-color-danger-200));
|
||||
color: rgb(var(--sl-color-danger-700));
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -19,45 +19,45 @@ export default css`
|
||||
font-weight: var(--sl-input-font-weight);
|
||||
line-height: var(--sl-line-height-normal);
|
||||
letter-spacing: var(--sl-input-letter-spacing);
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
vertical-align: middle;
|
||||
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.textarea:hover:not(.textarea--disabled) {
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
}
|
||||
.textarea:hover:not(.textarea--disabled) .textarea__control {
|
||||
color: var(--sl-input-color-hover);
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
}
|
||||
|
||||
.textarea.textarea--focused:not(.textarea--disabled) {
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
|
||||
color: var(--sl-input-color-focus);
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
}
|
||||
|
||||
.textarea.textarea--focused:not(.textarea--disabled) .textarea__control {
|
||||
color: var(--sl-input-color-focus);
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
}
|
||||
|
||||
.textarea.textarea--disabled {
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
background-color: rgb(var(--sl-input-background-color-disabled));
|
||||
border-color: rgb(var(--sl-input-border-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.textarea.textarea--disabled .textarea__control {
|
||||
color: var(--sl-input-color-disabled);
|
||||
color: rgb(var(--sl-input-color-disabled));
|
||||
}
|
||||
|
||||
.textarea.textarea--disabled .textarea__control::placeholder {
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
}
|
||||
|
||||
.textarea__control {
|
||||
@@ -66,7 +66,7 @@ export default css`
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4;
|
||||
color: var(--sl-input-color);
|
||||
color: rgb(var(--sl-input-color));
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@@ -82,7 +82,7 @@ export default css`
|
||||
}
|
||||
|
||||
.textarea__control::placeholder {
|
||||
color: var(--sl-input-placeholder-color);
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,12 +21,12 @@ export default css`
|
||||
.tooltip {
|
||||
max-width: var(--max-width);
|
||||
border-radius: var(--sl-tooltip-border-radius);
|
||||
background-color: var(--sl-tooltip-background-color);
|
||||
background-color: rgb(var(--sl-tooltip-background-color));
|
||||
font-family: var(--sl-tooltip-font-family);
|
||||
font-size: var(--sl-tooltip-font-size);
|
||||
font-weight: var(--sl-tooltip-font-weight);
|
||||
line-height: var(--sl-tooltip-line-height);
|
||||
color: var(--sl-tooltip-color);
|
||||
color: rgb(var(--sl-tooltip-color));
|
||||
padding: var(--sl-tooltip-padding);
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ export default css`
|
||||
.tooltip-positioner[data-popper-placement^='bottom'] .tooltip:after {
|
||||
bottom: 100%;
|
||||
left: calc(50% - var(--sl-tooltip-arrow-size));
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-left: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-right: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
}
|
||||
@@ -75,7 +75,7 @@ export default css`
|
||||
.tooltip-positioner[data-popper-placement^='top'] .tooltip:after {
|
||||
top: 100%;
|
||||
left: calc(50% - var(--sl-tooltip-arrow-size));
|
||||
border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-top: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-left: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-right: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
}
|
||||
@@ -93,7 +93,7 @@ export default css`
|
||||
.tooltip-positioner[data-popper-placement^='left'] .tooltip:after {
|
||||
top: calc(50% - var(--sl-tooltip-arrow-size));
|
||||
left: 100%;
|
||||
border-left: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-left: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-top: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
}
|
||||
@@ -111,7 +111,7 @@ export default css`
|
||||
.tooltip-positioner[data-popper-placement^='right'] .tooltip:after {
|
||||
top: calc(50% - var(--sl-tooltip-arrow-size));
|
||||
right: 100%;
|
||||
border-right: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
|
||||
border-right: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-top: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ export default css`
|
||||
/* Help text */
|
||||
.form-control--has-help-text .form-control__help-text {
|
||||
display: block;
|
||||
color: var(--sl-input-help-text-color);
|
||||
color: rgb(var(--sl-input-help-text-color));
|
||||
}
|
||||
|
||||
.form-control--has-help-text .form-control__help-text ::slotted(*) {
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
* Color Primitives
|
||||
*/
|
||||
|
||||
--sl-color-black: #000;
|
||||
--sl-color-white: #fff;
|
||||
--sl-color-black: 0 0 0;
|
||||
--sl-color-white: 255 255 255;
|
||||
|
||||
/* We can probably ditch these now */
|
||||
--sl-color-primary-text: var(--sl-color-white);
|
||||
@@ -16,290 +16,290 @@
|
||||
--sl-color-danger-text: var(--sl-color-white);
|
||||
|
||||
/* Blue Gray */
|
||||
--sl-color-blue-gray-50: #f8fafc;
|
||||
--sl-color-blue-gray-100: #f1f5f9;
|
||||
--sl-color-blue-gray-200: #e2e8f0;
|
||||
--sl-color-blue-gray-300: #cbd5e1;
|
||||
--sl-color-blue-gray-400: #94a3b8;
|
||||
--sl-color-blue-gray-500: #64748b;
|
||||
--sl-color-blue-gray-600: #475569;
|
||||
--sl-color-blue-gray-700: #334155;
|
||||
--sl-color-blue-gray-800: #1e293b;
|
||||
--sl-color-blue-gray-900: #0f172a;
|
||||
--sl-color-blue-gray-1000: #0a101e;
|
||||
--sl-color-blue-gray-50: 248 250 252;
|
||||
--sl-color-blue-gray-100: 241 245 249;
|
||||
--sl-color-blue-gray-200: 226 232 240;
|
||||
--sl-color-blue-gray-300: 203 213 225;
|
||||
--sl-color-blue-gray-400: 148 163 184;
|
||||
--sl-color-blue-gray-500: 100 116 139;
|
||||
--sl-color-blue-gray-600: 71 85 105;
|
||||
--sl-color-blue-gray-700: 51 65 85;
|
||||
--sl-color-blue-gray-800: 30 41 59;
|
||||
--sl-color-blue-gray-900: 15 23 42;
|
||||
--sl-color-blue-gray-1000: 10 16 30;
|
||||
|
||||
/* Cool Gray */
|
||||
--sl-color-cool-gray-50: #f9fafb;
|
||||
--sl-color-cool-gray-100: #f3f4f6;
|
||||
--sl-color-cool-gray-200: #e5e7eb;
|
||||
--sl-color-cool-gray-300: #d1d5db;
|
||||
--sl-color-cool-gray-400: #9ca3af;
|
||||
--sl-color-cool-gray-500: #6b7280;
|
||||
--sl-color-cool-gray-600: #4b5563;
|
||||
--sl-color-cool-gray-700: #374151;
|
||||
--sl-color-cool-gray-800: #1f2937;
|
||||
--sl-color-cool-gray-900: #111827;
|
||||
--sl-color-cool-gray-1000: #0c111d;
|
||||
--sl-color-cool-gray-50: 249 250 251;
|
||||
--sl-color-cool-gray-100: 243 244 246;
|
||||
--sl-color-cool-gray-200: 229 231 235;
|
||||
--sl-color-cool-gray-300: 209 213 219;
|
||||
--sl-color-cool-gray-400: 156 163 175;
|
||||
--sl-color-cool-gray-500: 107 114 128;
|
||||
--sl-color-cool-gray-600: 75 85 99;
|
||||
--sl-color-cool-gray-700: 55 65 81;
|
||||
--sl-color-cool-gray-800: 31 41 55;
|
||||
--sl-color-cool-gray-900: 17 24 39;
|
||||
--sl-color-cool-gray-1000: 12 17 29;
|
||||
|
||||
/* Gray */
|
||||
--sl-color-gray-50: #fafafa;
|
||||
--sl-color-gray-100: #f4f4f5;
|
||||
--sl-color-gray-200: #e4e4e7;
|
||||
--sl-color-gray-300: #d4d4d8;
|
||||
--sl-color-gray-400: #a1a1aa;
|
||||
--sl-color-gray-500: #71717a;
|
||||
--sl-color-gray-600: #52525b;
|
||||
--sl-color-gray-700: #3f3f46;
|
||||
--sl-color-gray-800: #27272a;
|
||||
--sl-color-gray-900: #18181b;
|
||||
--sl-color-gray-1000: #131316;
|
||||
--sl-color-gray-50: 250 250 250;
|
||||
--sl-color-gray-100: 244 244 245;
|
||||
--sl-color-gray-200: 228 228 231;
|
||||
--sl-color-gray-300: 212 212 216;
|
||||
--sl-color-gray-400: 161 161 170;
|
||||
--sl-color-gray-500: 113 113 122;
|
||||
--sl-color-gray-600: 82 82 91;
|
||||
--sl-color-gray-700: 63 63 70;
|
||||
--sl-color-gray-800: 39 39 42;
|
||||
--sl-color-gray-900: 24 24 27;
|
||||
--sl-color-gray-1000: 19 19 22;
|
||||
|
||||
/* True Gray */
|
||||
--sl-color-true-gray-50: #fafafa;
|
||||
--sl-color-true-gray-100: #f5f5f5;
|
||||
--sl-color-true-gray-200: #e5e5e5;
|
||||
--sl-color-true-gray-300: #d4d4d4;
|
||||
--sl-color-true-gray-400: #a3a3a3;
|
||||
--sl-color-true-gray-500: #737373;
|
||||
--sl-color-true-gray-600: #525252;
|
||||
--sl-color-true-gray-700: #404040;
|
||||
--sl-color-true-gray-800: #262626;
|
||||
--sl-color-true-gray-900: #171717;
|
||||
--sl-color-true-gray-1000: #111111;
|
||||
--sl-color-true-gray-50: 250 250 250;
|
||||
--sl-color-true-gray-100: 245 245 245;
|
||||
--sl-color-true-gray-200: 229 229 229;
|
||||
--sl-color-true-gray-300: 212 212 212;
|
||||
--sl-color-true-gray-400: 163 163 163;
|
||||
--sl-color-true-gray-500: 115 115 115;
|
||||
--sl-color-true-gray-600: 82 82 82;
|
||||
--sl-color-true-gray-700: 64 64 64;
|
||||
--sl-color-true-gray-800: 38 38 38;
|
||||
--sl-color-true-gray-900: 23 23 23;
|
||||
--sl-color-true-gray-1000: 17 17 17;
|
||||
|
||||
/* Warm Gray */
|
||||
--sl-color-warm-gray-50: #fafaf9;
|
||||
--sl-color-warm-gray-100: #f5f5f4;
|
||||
--sl-color-warm-gray-200: #e7e5e4;
|
||||
--sl-color-warm-gray-300: #d6d3d1;
|
||||
--sl-color-warm-gray-400: #a8a29e;
|
||||
--sl-color-warm-gray-500: #78716c;
|
||||
--sl-color-warm-gray-600: #57534e;
|
||||
--sl-color-warm-gray-700: #44403c;
|
||||
--sl-color-warm-gray-800: #292524;
|
||||
--sl-color-warm-gray-900: #1c1917;
|
||||
--sl-color-warm-gray-1000: #131210;
|
||||
--sl-color-warm-gray-50: 250 250 249;
|
||||
--sl-color-warm-gray-100: 245 245 244;
|
||||
--sl-color-warm-gray-200: 231 229 228;
|
||||
--sl-color-warm-gray-300: 214 211 209;
|
||||
--sl-color-warm-gray-400: 168 162 158;
|
||||
--sl-color-warm-gray-500: 120 113 108;
|
||||
--sl-color-warm-gray-600: 87 83 78;
|
||||
--sl-color-warm-gray-700: 68 64 60;
|
||||
--sl-color-warm-gray-800: 41 37 36;
|
||||
--sl-color-warm-gray-900: 28 25 23;
|
||||
--sl-color-warm-gray-1000: 19 18 16;
|
||||
|
||||
/* Red */
|
||||
--sl-color-red-50: #fef2f2;
|
||||
--sl-color-red-100: #fee2e2;
|
||||
--sl-color-red-200: #fecaca;
|
||||
--sl-color-red-300: #fca5a5;
|
||||
--sl-color-red-400: #f87171;
|
||||
--sl-color-red-500: #ef4444;
|
||||
--sl-color-red-600: #dc2626;
|
||||
--sl-color-red-700: #b91c1c;
|
||||
--sl-color-red-800: #991b1b;
|
||||
--sl-color-red-900: #7f1d1d;
|
||||
--sl-color-red-1000: #501414;
|
||||
--sl-color-red-50: 254 242 242;
|
||||
--sl-color-red-100: 254 226 226;
|
||||
--sl-color-red-200: 254 202 202;
|
||||
--sl-color-red-300: 252 165 165;
|
||||
--sl-color-red-400: 248 113 113;
|
||||
--sl-color-red-500: 239 68 68;
|
||||
--sl-color-red-600: 220 38 38;
|
||||
--sl-color-red-700: 185 28 28;
|
||||
--sl-color-red-800: 153 27 27;
|
||||
--sl-color-red-900: 127 29 29;
|
||||
--sl-color-red-1000: 80 20 20;
|
||||
|
||||
/* Orange */
|
||||
--sl-color-orange-50: #fff7ed;
|
||||
--sl-color-orange-100: #ffedd5;
|
||||
--sl-color-orange-200: #fed7aa;
|
||||
--sl-color-orange-300: #fdba74;
|
||||
--sl-color-orange-400: #fb923c;
|
||||
--sl-color-orange-500: #f97316;
|
||||
--sl-color-orange-600: #ea580c;
|
||||
--sl-color-orange-700: #c2410c;
|
||||
--sl-color-orange-800: #9a3412;
|
||||
--sl-color-orange-900: #7c2d12;
|
||||
--sl-color-orange-1000: #52200f;
|
||||
--sl-color-orange-50: 255 247 237;
|
||||
--sl-color-orange-100: 255 237 213;
|
||||
--sl-color-orange-200: 254 215 170;
|
||||
--sl-color-orange-300: 253 186 116;
|
||||
--sl-color-orange-400: 251 146 60;
|
||||
--sl-color-orange-500: 249 115 22;
|
||||
--sl-color-orange-600: 234 88 12;
|
||||
--sl-color-orange-700: 194 65 12;
|
||||
--sl-color-orange-800: 154 52 18;
|
||||
--sl-color-orange-900: 124 45 18;
|
||||
--sl-color-orange-1000: 82 32 15;
|
||||
|
||||
/* Amber */
|
||||
--sl-color-amber-50: #fffbeb;
|
||||
--sl-color-amber-100: #fef3c7;
|
||||
--sl-color-amber-200: #fde68a;
|
||||
--sl-color-amber-300: #fcd34d;
|
||||
--sl-color-amber-400: #fbbf24;
|
||||
--sl-color-amber-500: #f59e0b;
|
||||
--sl-color-amber-600: #d97706;
|
||||
--sl-color-amber-700: #b45309;
|
||||
--sl-color-amber-800: #92400e;
|
||||
--sl-color-amber-900: #78350f;
|
||||
--sl-color-amber-1000: #4a230b;
|
||||
--sl-color-amber-50: 255 251 235;
|
||||
--sl-color-amber-100: 254 243 199;
|
||||
--sl-color-amber-200: 253 230 138;
|
||||
--sl-color-amber-300: 252 211 77;
|
||||
--sl-color-amber-400: 251 191 36;
|
||||
--sl-color-amber-500: 245 158 11;
|
||||
--sl-color-amber-600: 217 119 6;
|
||||
--sl-color-amber-700: 180 83 9;
|
||||
--sl-color-amber-800: 146 64 14;
|
||||
--sl-color-amber-900: 120 53 15;
|
||||
--sl-color-amber-1000: 74 35 11;
|
||||
|
||||
/* Yellow */
|
||||
--sl-color-yellow-50: #fefce8;
|
||||
--sl-color-yellow-100: #fef9c3;
|
||||
--sl-color-yellow-200: #fef08a;
|
||||
--sl-color-yellow-300: #fde047;
|
||||
--sl-color-yellow-400: #facc15;
|
||||
--sl-color-yellow-500: #eab308;
|
||||
--sl-color-yellow-600: #ca8a04;
|
||||
--sl-color-yellow-700: #a16207;
|
||||
--sl-color-yellow-800: #854d0e;
|
||||
--sl-color-yellow-900: #713f12;
|
||||
--sl-color-yellow-1000: #3c260b;
|
||||
--sl-color-yellow-50: 254 252 232;
|
||||
--sl-color-yellow-100: 254 249 195;
|
||||
--sl-color-yellow-200: 254 240 138;
|
||||
--sl-color-yellow-300: 253 224 71;
|
||||
--sl-color-yellow-400: 250 204 21;
|
||||
--sl-color-yellow-500: 234 179 8;
|
||||
--sl-color-yellow-600: 202 138 4;
|
||||
--sl-color-yellow-700: 161 98 7;
|
||||
--sl-color-yellow-800: 133 77 14;
|
||||
--sl-color-yellow-900: 113 63 18;
|
||||
--sl-color-yellow-1000: 60 38 11;
|
||||
|
||||
/* Lime */
|
||||
--sl-color-lime-50: #f7fee7;
|
||||
--sl-color-lime-100: #ecfccb;
|
||||
--sl-color-lime-200: #d9f99d;
|
||||
--sl-color-lime-300: #bef264;
|
||||
--sl-color-lime-400: #a3e635;
|
||||
--sl-color-lime-500: #84cc16;
|
||||
--sl-color-lime-600: #65a30d;
|
||||
--sl-color-lime-700: #4d7c0f;
|
||||
--sl-color-lime-800: #3f6212;
|
||||
--sl-color-lime-900: #365314;
|
||||
--sl-color-lime-1000: #26390e;
|
||||
--sl-color-lime-50: 247 254 231;
|
||||
--sl-color-lime-100: 236 252 203;
|
||||
--sl-color-lime-200: 217 249 157;
|
||||
--sl-color-lime-300: 190 242 100;
|
||||
--sl-color-lime-400: 163 230 53;
|
||||
--sl-color-lime-500: 132 204 22;
|
||||
--sl-color-lime-600: 101 163 13;
|
||||
--sl-color-lime-700: 77 124 15;
|
||||
--sl-color-lime-800: 63 98 18;
|
||||
--sl-color-lime-900: 54 83 20;
|
||||
--sl-color-lime-1000: 38 57 14;
|
||||
|
||||
/* Green */
|
||||
--sl-color-green-50: #f0fdf4;
|
||||
--sl-color-green-100: #dcfce7;
|
||||
--sl-color-green-200: #bbf7d0;
|
||||
--sl-color-green-300: #86efac;
|
||||
--sl-color-green-400: #4ade80;
|
||||
--sl-color-green-500: #22c55e;
|
||||
--sl-color-green-600: #16a34a;
|
||||
--sl-color-green-700: #15803d;
|
||||
--sl-color-green-800: #166534;
|
||||
--sl-color-green-900: #14532d;
|
||||
--sl-color-green-1000: #0c311b;
|
||||
--sl-color-green-50: 240 253 244;
|
||||
--sl-color-green-100: 220 252 231;
|
||||
--sl-color-green-200: 187 247 208;
|
||||
--sl-color-green-300: 134 239 172;
|
||||
--sl-color-green-400: 74 222 128;
|
||||
--sl-color-green-500: 34 197 94;
|
||||
--sl-color-green-600: 22 163 74;
|
||||
--sl-color-green-700: 21 128 61;
|
||||
--sl-color-green-800: 22 101 52;
|
||||
--sl-color-green-900: 20 83 45;
|
||||
--sl-color-green-1000: 12 49 27;
|
||||
|
||||
/* Emerald */
|
||||
--sl-color-emerald-50: #ecfdf5;
|
||||
--sl-color-emerald-100: #d1fae5;
|
||||
--sl-color-emerald-200: #a7f3d0;
|
||||
--sl-color-emerald-300: #6ee7b7;
|
||||
--sl-color-emerald-400: #34d399;
|
||||
--sl-color-emerald-500: #10b981;
|
||||
--sl-color-emerald-600: #059669;
|
||||
--sl-color-emerald-700: #047857;
|
||||
--sl-color-emerald-800: #065f46;
|
||||
--sl-color-emerald-900: #064e3b;
|
||||
--sl-color-emerald-1000: #032d22;
|
||||
--sl-color-emerald-50: 236 253 245;
|
||||
--sl-color-emerald-100: 209 250 229;
|
||||
--sl-color-emerald-200: 167 243 208;
|
||||
--sl-color-emerald-300: 110 231 183;
|
||||
--sl-color-emerald-400: 52 211 153;
|
||||
--sl-color-emerald-500: 16 185 129;
|
||||
--sl-color-emerald-600: 5 150 105;
|
||||
--sl-color-emerald-700: 4 120 87;
|
||||
--sl-color-emerald-800: 6 95 70;
|
||||
--sl-color-emerald-900: 6 78 59;
|
||||
--sl-color-emerald-1000: 3 45 34;
|
||||
|
||||
/* Teal */
|
||||
--sl-color-teal-50: #f0fdfa;
|
||||
--sl-color-teal-100: #ccfbf1;
|
||||
--sl-color-teal-200: #99f6e4;
|
||||
--sl-color-teal-300: #5eead4;
|
||||
--sl-color-teal-400: #2dd4bf;
|
||||
--sl-color-teal-500: #14b8a6;
|
||||
--sl-color-teal-600: #0d9488;
|
||||
--sl-color-teal-700: #0f766e;
|
||||
--sl-color-teal-800: #115e59;
|
||||
--sl-color-teal-900: #134e4a;
|
||||
--sl-color-teal-1000: #0c2e2c;
|
||||
--sl-color-teal-50: 240 253 250;
|
||||
--sl-color-teal-100: 204 251 241;
|
||||
--sl-color-teal-200: 153 246 228;
|
||||
--sl-color-teal-300: 94 234 212;
|
||||
--sl-color-teal-400: 45 212 191;
|
||||
--sl-color-teal-500: 20 184 166;
|
||||
--sl-color-teal-600: 13 148 136;
|
||||
--sl-color-teal-700: 15 118 110;
|
||||
--sl-color-teal-800: 17 94 89;
|
||||
--sl-color-teal-900: 19 78 74;
|
||||
--sl-color-teal-1000: 12 46 44;
|
||||
|
||||
/* Cyan */
|
||||
--sl-color-cyan-50: #ecfeff;
|
||||
--sl-color-cyan-100: #cffafe;
|
||||
--sl-color-cyan-200: #a5f3fc;
|
||||
--sl-color-cyan-300: #67e8f9;
|
||||
--sl-color-cyan-400: #22d3ee;
|
||||
--sl-color-cyan-500: #06b6d4;
|
||||
--sl-color-cyan-600: #0891b2;
|
||||
--sl-color-cyan-700: #0e7490;
|
||||
--sl-color-cyan-800: #155e75;
|
||||
--sl-color-cyan-900: #164e63;
|
||||
--sl-color-cyan-1000: #103442;
|
||||
--sl-color-cyan-50: 236 254 255;
|
||||
--sl-color-cyan-100: 207 250 254;
|
||||
--sl-color-cyan-200: 165 243 252;
|
||||
--sl-color-cyan-300: 103 232 249;
|
||||
--sl-color-cyan-400: 34 211 238;
|
||||
--sl-color-cyan-500: 6 182 212;
|
||||
--sl-color-cyan-600: 8 145 178;
|
||||
--sl-color-cyan-700: 14 116 144;
|
||||
--sl-color-cyan-800: 21 94 117;
|
||||
--sl-color-cyan-900: 22 78 99;
|
||||
--sl-color-cyan-1000: 16 52 66;
|
||||
|
||||
/* Sky */
|
||||
--sl-color-sky-50: #f0f9ff;
|
||||
--sl-color-sky-100: #e0f2fe;
|
||||
--sl-color-sky-200: #bae6fd;
|
||||
--sl-color-sky-300: #7dd3fc;
|
||||
--sl-color-sky-400: #38bdf8;
|
||||
--sl-color-sky-500: #0ea5e9;
|
||||
--sl-color-sky-600: #0284c7;
|
||||
--sl-color-sky-700: #0369a1;
|
||||
--sl-color-sky-800: #075985;
|
||||
--sl-color-sky-900: #0c4a6e;
|
||||
--sl-color-sky-1000: #0b3249;
|
||||
--sl-color-sky-50: 240 249 255;
|
||||
--sl-color-sky-100: 224 242 254;
|
||||
--sl-color-sky-200: 186 230 253;
|
||||
--sl-color-sky-300: 125 211 252;
|
||||
--sl-color-sky-400: 56 189 248;
|
||||
--sl-color-sky-500: 14 165 233;
|
||||
--sl-color-sky-600: 2 132 199;
|
||||
--sl-color-sky-700: 3 105 161;
|
||||
--sl-color-sky-800: 7 89 133;
|
||||
--sl-color-sky-900: 12 74 110;
|
||||
--sl-color-sky-1000: 11 50 73;
|
||||
|
||||
/* Blue */
|
||||
--sl-color-blue-50: #eff6ff;
|
||||
--sl-color-blue-100: #dbeafe;
|
||||
--sl-color-blue-200: #bfdbfe;
|
||||
--sl-color-blue-300: #93c5fd;
|
||||
--sl-color-blue-400: #60a5fa;
|
||||
--sl-color-blue-500: #3b82f6;
|
||||
--sl-color-blue-600: #2563eb;
|
||||
--sl-color-blue-700: #1d4ed8;
|
||||
--sl-color-blue-800: #1e40af;
|
||||
--sl-color-blue-900: #1e3a8a;
|
||||
--sl-color-blue-1000: #152149;
|
||||
--sl-color-blue-50: 239 246 255;
|
||||
--sl-color-blue-100: 219 234 254;
|
||||
--sl-color-blue-200: 191 219 254;
|
||||
--sl-color-blue-300: 147 197 253;
|
||||
--sl-color-blue-400: 96 165 250;
|
||||
--sl-color-blue-500: 59 130 246;
|
||||
--sl-color-blue-600: 37 99 235;
|
||||
--sl-color-blue-700: 29 78 216;
|
||||
--sl-color-blue-800: 30 64 175;
|
||||
--sl-color-blue-900: 30 58 138;
|
||||
--sl-color-blue-1000: 21 33 73;
|
||||
|
||||
/* Indigo */
|
||||
--sl-color-indigo-50: #eef2ff;
|
||||
--sl-color-indigo-100: #e0e7ff;
|
||||
--sl-color-indigo-200: #c7d2fe;
|
||||
--sl-color-indigo-300: #a5b4fc;
|
||||
--sl-color-indigo-400: #818cf8;
|
||||
--sl-color-indigo-500: #6366f1;
|
||||
--sl-color-indigo-600: #4f46e5;
|
||||
--sl-color-indigo-700: #4338ca;
|
||||
--sl-color-indigo-800: #3730a3;
|
||||
--sl-color-indigo-900: #312e81;
|
||||
--sl-color-indigo-1000: #242154;
|
||||
--sl-color-indigo-50: 238 242 255;
|
||||
--sl-color-indigo-100: 224 231 255;
|
||||
--sl-color-indigo-200: 199 210 254;
|
||||
--sl-color-indigo-300: 165 180 252;
|
||||
--sl-color-indigo-400: 129 140 248;
|
||||
--sl-color-indigo-500: 99 102 241;
|
||||
--sl-color-indigo-600: 79 70 229;
|
||||
--sl-color-indigo-700: 67 56 202;
|
||||
--sl-color-indigo-800: 55 48 163;
|
||||
--sl-color-indigo-900: 49 46 129;
|
||||
--sl-color-indigo-1000: 36 33 84;
|
||||
|
||||
/* Violet */
|
||||
--sl-color-violet-50: #f5f3ff;
|
||||
--sl-color-violet-100: #ede9fe;
|
||||
--sl-color-violet-200: #ddd6fe;
|
||||
--sl-color-violet-300: #c4b5fd;
|
||||
--sl-color-violet-400: #a78bfa;
|
||||
--sl-color-violet-500: #8b5cf6;
|
||||
--sl-color-violet-600: #7c3aed;
|
||||
--sl-color-violet-700: #6d28d9;
|
||||
--sl-color-violet-800: #5b21b6;
|
||||
--sl-color-violet-900: #4c1d95;
|
||||
--sl-color-violet-1000: #311558;
|
||||
--sl-color-violet-50: 245 243 255;
|
||||
--sl-color-violet-100: 237 233 254;
|
||||
--sl-color-violet-200: 221 214 254;
|
||||
--sl-color-violet-300: 196 181 253;
|
||||
--sl-color-violet-400: 167 139 250;
|
||||
--sl-color-violet-500: 139 92 246;
|
||||
--sl-color-violet-600: 124 58 237;
|
||||
--sl-color-violet-700: 109 40 217;
|
||||
--sl-color-violet-800: 91 33 182;
|
||||
--sl-color-violet-900: 76 29 149;
|
||||
--sl-color-violet-1000: 49 21 88;
|
||||
|
||||
/* Purple */
|
||||
--sl-color-purple-50: #faf5ff;
|
||||
--sl-color-purple-100: #f3e8ff;
|
||||
--sl-color-purple-200: #e9d5ff;
|
||||
--sl-color-purple-300: #d8b4fe;
|
||||
--sl-color-purple-400: #c084fc;
|
||||
--sl-color-purple-500: #a855f7;
|
||||
--sl-color-purple-600: #9333ea;
|
||||
--sl-color-purple-700: #7e22ce;
|
||||
--sl-color-purple-800: #6b21a8;
|
||||
--sl-color-purple-900: #581c87;
|
||||
--sl-color-purple-1000: #2f1143;
|
||||
--sl-color-purple-50: 250 245 255;
|
||||
--sl-color-purple-100: 243 232 255;
|
||||
--sl-color-purple-200: 233 213 255;
|
||||
--sl-color-purple-300: 216 180 254;
|
||||
--sl-color-purple-400: 192 132 252;
|
||||
--sl-color-purple-500: 168 85 247;
|
||||
--sl-color-purple-600: 147 51 234;
|
||||
--sl-color-purple-700: 126 34 206;
|
||||
--sl-color-purple-800: 107 33 168;
|
||||
--sl-color-purple-900: 88 28 135;
|
||||
--sl-color-purple-1000: 47 17 67;
|
||||
|
||||
/* Fuchsia */
|
||||
--sl-color-fuchsia-50: #fdf4ff;
|
||||
--sl-color-fuchsia-100: #fae8ff;
|
||||
--sl-color-fuchsia-200: #f5d0fe;
|
||||
--sl-color-fuchsia-300: #f0abfc;
|
||||
--sl-color-fuchsia-400: #e879f9;
|
||||
--sl-color-fuchsia-500: #d946ef;
|
||||
--sl-color-fuchsia-600: #c026d3;
|
||||
--sl-color-fuchsia-700: #a21caf;
|
||||
--sl-color-fuchsia-800: #86198f;
|
||||
--sl-color-fuchsia-900: #701a75;
|
||||
--sl-color-fuchsia-1000: #38103a;
|
||||
--sl-color-fuchsia-50: 253 244 255;
|
||||
--sl-color-fuchsia-100: 250 232 255;
|
||||
--sl-color-fuchsia-200: 245 208 254;
|
||||
--sl-color-fuchsia-300: 240 171 252;
|
||||
--sl-color-fuchsia-400: 232 121 249;
|
||||
--sl-color-fuchsia-500: 217 70 239;
|
||||
--sl-color-fuchsia-600: 192 38 211;
|
||||
--sl-color-fuchsia-700: 162 28 175;
|
||||
--sl-color-fuchsia-800: 134 25 143;
|
||||
--sl-color-fuchsia-900: 112 26 117;
|
||||
--sl-color-fuchsia-1000: 56 16 58;
|
||||
|
||||
/* Pink */
|
||||
--sl-color-pink-50: #fdf2f8;
|
||||
--sl-color-pink-100: #fce7f3;
|
||||
--sl-color-pink-200: #fbcfe8;
|
||||
--sl-color-pink-300: #f9a8d4;
|
||||
--sl-color-pink-400: #f472b6;
|
||||
--sl-color-pink-500: #ec4899;
|
||||
--sl-color-pink-600: #db2777;
|
||||
--sl-color-pink-700: #be185d;
|
||||
--sl-color-pink-800: #9d174d;
|
||||
--sl-color-pink-900: #831843;
|
||||
--sl-color-pink-1000: #430e23;
|
||||
--sl-color-pink-50: 253 242 248;
|
||||
--sl-color-pink-100: 252 231 243;
|
||||
--sl-color-pink-200: 251 207 232;
|
||||
--sl-color-pink-300: 249 168 212;
|
||||
--sl-color-pink-400: 244 114 182;
|
||||
--sl-color-pink-500: 236 72 153;
|
||||
--sl-color-pink-600: 219 39 119;
|
||||
--sl-color-pink-700: 190 24 93;
|
||||
--sl-color-pink-800: 157 23 77;
|
||||
--sl-color-pink-900: 131 24 67;
|
||||
--sl-color-pink-1000: 67 14 35;
|
||||
|
||||
/* Rose */
|
||||
--sl-color-rose-50: #fff1f2;
|
||||
--sl-color-rose-100: #ffe4e6;
|
||||
--sl-color-rose-200: #fecdd3;
|
||||
--sl-color-rose-300: #fda4af;
|
||||
--sl-color-rose-400: #fb7185;
|
||||
--sl-color-rose-500: #f43f5e;
|
||||
--sl-color-rose-600: #e11d48;
|
||||
--sl-color-rose-700: #be123c;
|
||||
--sl-color-rose-800: #9f1239;
|
||||
--sl-color-rose-900: #881337;
|
||||
--sl-color-rose-1000: #4a0d20;
|
||||
--sl-color-rose-50: 255 241 242;
|
||||
--sl-color-rose-100: 255 228 230;
|
||||
--sl-color-rose-200: 254 205 211;
|
||||
--sl-color-rose-300: 253 164 175;
|
||||
--sl-color-rose-400: 251 113 133;
|
||||
--sl-color-rose-500: 244 63 94;
|
||||
--sl-color-rose-600: 225 29 72;
|
||||
--sl-color-rose-700: 190 18 60;
|
||||
--sl-color-rose-800: 159 18 57;
|
||||
--sl-color-rose-900: 136 19 55;
|
||||
--sl-color-rose-1000: 74 13 32;
|
||||
|
||||
/*
|
||||
* Theme Tokens
|
||||
@@ -480,7 +480,6 @@
|
||||
--sl-input-background-color-hover: var(--sl-color-white);
|
||||
--sl-input-background-color-focus: var(--sl-color-white);
|
||||
--sl-input-background-color-disabled: var(--sl-color-gray-100);
|
||||
|
||||
--sl-input-border-color: var(--sl-color-gray-300);
|
||||
--sl-input-border-color-hover: var(--sl-color-gray-400);
|
||||
--sl-input-border-color-focus: var(--sl-color-primary-500);
|
||||
@@ -502,14 +501,11 @@
|
||||
--sl-input-color-hover: var(--sl-color-gray-700);
|
||||
--sl-input-color-focus: var(--sl-color-gray-700);
|
||||
--sl-input-color-disabled: var(--sl-color-gray-900);
|
||||
|
||||
--sl-input-icon-color: var(--sl-color-gray-400);
|
||||
--sl-input-icon-color-hover: var(--sl-color-gray-600);
|
||||
--sl-input-icon-color-focus: var(--sl-color-gray-600);
|
||||
|
||||
--sl-input-placeholder-color: var(--sl-color-gray-400);
|
||||
--sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
|
||||
|
||||
--sl-input-spacing-small: var(--sl-spacing-small);
|
||||
--sl-input-spacing-medium: var(--sl-spacing-medium);
|
||||
--sl-input-spacing-large: var(--sl-spacing-large);
|
||||
@@ -528,14 +524,14 @@
|
||||
|
||||
--sl-input-help-text-color: var(--sl-color-gray-400);
|
||||
|
||||
/* Toggles (checkboxes, radios, switches) */
|
||||
/* Toggle (checkboxes, radios, switches) */
|
||||
--sl-toggle-size: 1rem;
|
||||
|
||||
/*
|
||||
* Overlay tokens
|
||||
*/
|
||||
|
||||
--sl-overlay-background-color: #37415180;
|
||||
--sl-overlay-background-color: var(--sl-color-blue-gray-900);
|
||||
|
||||
/*
|
||||
* Panels
|
||||
@@ -543,9 +539,8 @@
|
||||
|
||||
--sl-panel-background-color: var(--sl-color-white);
|
||||
--sl-panel-border-color: var(--sl-color-gray-200);
|
||||
|
||||
/*
|
||||
* Tooltip tokens
|
||||
Tooltip tokens
|
||||
*/
|
||||
|
||||
--sl-tooltip-border-radius: var(--sl-border-radius-medium);
|
||||
|
||||
@@ -1,291 +1,291 @@
|
||||
:host,
|
||||
.sl-theme-dark {
|
||||
--sl-color-black: #fff;
|
||||
--sl-color-black: 255 255 255;
|
||||
--sl-color-white: var(--sl-color-gray-100);
|
||||
|
||||
/* Blue Gray */
|
||||
--sl-color-blue-gray-1000: #f8fafc;
|
||||
--sl-color-blue-gray-900: #f1f5f9;
|
||||
--sl-color-blue-gray-800: #e2e8f0;
|
||||
--sl-color-blue-gray-700: #cbd5e1;
|
||||
--sl-color-blue-gray-600: #94a3b8;
|
||||
--sl-color-blue-gray-500: #64748b;
|
||||
--sl-color-blue-gray-400: #475569;
|
||||
--sl-color-blue-gray-300: #334155;
|
||||
--sl-color-blue-gray-200: #1e293b;
|
||||
--sl-color-blue-gray-100: #0f172a;
|
||||
--sl-color-blue-gray-50: #0a101e;
|
||||
--sl-color-blue-gray-1000: 248 250 252;
|
||||
--sl-color-blue-gray-900: 241 245 249;
|
||||
--sl-color-blue-gray-800: 226 232 240;
|
||||
--sl-color-blue-gray-700: 203 213 225;
|
||||
--sl-color-blue-gray-600: 148 163 184;
|
||||
--sl-color-blue-gray-500: 100 116 139;
|
||||
--sl-color-blue-gray-400: 71 85 105;
|
||||
--sl-color-blue-gray-300: 51 65 85;
|
||||
--sl-color-blue-gray-200: 30 41 59;
|
||||
--sl-color-blue-gray-100: 15 23 42;
|
||||
--sl-color-blue-gray-50: 10 16 30;
|
||||
|
||||
/* Cool Gray */
|
||||
--sl-color-cool-gray-1000: #f9fafb;
|
||||
--sl-color-cool-gray-900: #f3f4f6;
|
||||
--sl-color-cool-gray-800: #e5e7eb;
|
||||
--sl-color-cool-gray-700: #d1d5db;
|
||||
--sl-color-cool-gray-600: #9ca3af;
|
||||
--sl-color-cool-gray-500: #6b7280;
|
||||
--sl-color-cool-gray-400: #4b5563;
|
||||
--sl-color-cool-gray-300: #374151;
|
||||
--sl-color-cool-gray-200: #1f2937;
|
||||
--sl-color-cool-gray-100: #111827;
|
||||
--sl-color-cool-gray-50: #0c111d;
|
||||
--sl-color-cool-gray-1000: 249 250 251;
|
||||
--sl-color-cool-gray-900: 243 244 246;
|
||||
--sl-color-cool-gray-800: 229 231 235;
|
||||
--sl-color-cool-gray-700: 209 213 219;
|
||||
--sl-color-cool-gray-600: 156 163 175;
|
||||
--sl-color-cool-gray-500: 107 114 128;
|
||||
--sl-color-cool-gray-400: 75 85 99;
|
||||
--sl-color-cool-gray-300: 55 65 81;
|
||||
--sl-color-cool-gray-200: 31 41 55;
|
||||
--sl-color-cool-gray-100: 17 24 39;
|
||||
--sl-color-cool-gray-50: 12 17 29;
|
||||
|
||||
/* Gray */
|
||||
--sl-color-gray-1000: #fafafa;
|
||||
--sl-color-gray-900: #f4f4f5;
|
||||
--sl-color-gray-800: #e4e4e7;
|
||||
--sl-color-gray-700: #d4d4d8;
|
||||
--sl-color-gray-600: #a1a1aa;
|
||||
--sl-color-gray-500: #71717a;
|
||||
--sl-color-gray-400: #52525b;
|
||||
--sl-color-gray-300: #3f3f46;
|
||||
--sl-color-gray-200: #27272a;
|
||||
--sl-color-gray-100: #18181b;
|
||||
--sl-color-gray-50: #131316;
|
||||
--sl-color-gray-1000: 250 250 250;
|
||||
--sl-color-gray-900: 244 244 245;
|
||||
--sl-color-gray-800: 228 228 231;
|
||||
--sl-color-gray-700: 212 212 216;
|
||||
--sl-color-gray-600: 161 161 170;
|
||||
--sl-color-gray-500: 113 113 122;
|
||||
--sl-color-gray-400: 82 82 91;
|
||||
--sl-color-gray-300: 63 63 70;
|
||||
--sl-color-gray-200: 39 39 42;
|
||||
--sl-color-gray-100: 24 24 27;
|
||||
--sl-color-gray-50: 19 19 22;
|
||||
|
||||
/* True Gray */
|
||||
--sl-color-true-gray-1000: #fafafa;
|
||||
--sl-color-true-gray-900: #f5f5f5;
|
||||
--sl-color-true-gray-800: #e5e5e5;
|
||||
--sl-color-true-gray-700: #d4d4d4;
|
||||
--sl-color-true-gray-600: #a3a3a3;
|
||||
--sl-color-true-gray-500: #737373;
|
||||
--sl-color-true-gray-400: #525252;
|
||||
--sl-color-true-gray-300: #404040;
|
||||
--sl-color-true-gray-200: #262626;
|
||||
--sl-color-true-gray-100: #171717;
|
||||
--sl-color-true-gray-50: #111111;
|
||||
--sl-color-true-gray-1000: 250 250 250;
|
||||
--sl-color-true-gray-900: 245 245 245;
|
||||
--sl-color-true-gray-800: 229 229 229;
|
||||
--sl-color-true-gray-700: 212 212 212;
|
||||
--sl-color-true-gray-600: 163 163 163;
|
||||
--sl-color-true-gray-500: 115 115 115;
|
||||
--sl-color-true-gray-400: 82 82 82;
|
||||
--sl-color-true-gray-300: 64 64 64;
|
||||
--sl-color-true-gray-200: 38 38 38;
|
||||
--sl-color-true-gray-100: 23 23 23;
|
||||
--sl-color-true-gray-50: 17 17 17;
|
||||
|
||||
/* Warm Gray */
|
||||
--sl-color-warm-gray-1000: #fafaf9;
|
||||
--sl-color-warm-gray-900: #f5f5f4;
|
||||
--sl-color-warm-gray-800: #e7e5e4;
|
||||
--sl-color-warm-gray-700: #d6d3d1;
|
||||
--sl-color-warm-gray-600: #a8a29e;
|
||||
--sl-color-warm-gray-500: #78716c;
|
||||
--sl-color-warm-gray-400: #57534e;
|
||||
--sl-color-warm-gray-300: #44403c;
|
||||
--sl-color-warm-gray-200: #292524;
|
||||
--sl-color-warm-gray-100: #1c1917;
|
||||
--sl-color-warm-gray-50: #131210;
|
||||
--sl-color-warm-gray-1000: 250 250 249;
|
||||
--sl-color-warm-gray-900: 245 245 244;
|
||||
--sl-color-warm-gray-800: 231 229 228;
|
||||
--sl-color-warm-gray-700: 214 211 209;
|
||||
--sl-color-warm-gray-600: 168 162 158;
|
||||
--sl-color-warm-gray-500: 120 113 108;
|
||||
--sl-color-warm-gray-400: 87 83 78;
|
||||
--sl-color-warm-gray-300: 68 64 60;
|
||||
--sl-color-warm-gray-200: 41 37 36;
|
||||
--sl-color-warm-gray-100: 28 25 23;
|
||||
--sl-color-warm-gray-50: 19 18 16;
|
||||
|
||||
/* Red */
|
||||
--sl-color-red-1000: #fef2f2;
|
||||
--sl-color-red-900: #fee2e2;
|
||||
--sl-color-red-800: #fecaca;
|
||||
--sl-color-red-700: #fca5a5;
|
||||
--sl-color-red-600: #f87171;
|
||||
--sl-color-red-500: #ef4444;
|
||||
--sl-color-red-400: #dc2626;
|
||||
--sl-color-red-300: #b91c1c;
|
||||
--sl-color-red-200: #991b1b;
|
||||
--sl-color-red-100: #7f1d1d;
|
||||
--sl-color-red-50: #501414;
|
||||
--sl-color-red-1000: 254 242 242;
|
||||
--sl-color-red-900: 254 226 226;
|
||||
--sl-color-red-800: 254 202 202;
|
||||
--sl-color-red-700: 252 165 165;
|
||||
--sl-color-red-600: 248 113 113;
|
||||
--sl-color-red-500: 239 68 68;
|
||||
--sl-color-red-400: 220 38 38;
|
||||
--sl-color-red-300: 185 28 28;
|
||||
--sl-color-red-200: 153 27 27;
|
||||
--sl-color-red-100: 127 29 29;
|
||||
--sl-color-red-50: 80 20 20;
|
||||
|
||||
/* Orange */
|
||||
--sl-color-orange-1000: #fff7ed;
|
||||
--sl-color-orange-900: #ffedd5;
|
||||
--sl-color-orange-800: #fed7aa;
|
||||
--sl-color-orange-700: #fdba74;
|
||||
--sl-color-orange-600: #fb923c;
|
||||
--sl-color-orange-500: #f97316;
|
||||
--sl-color-orange-400: #ea580c;
|
||||
--sl-color-orange-300: #c2410c;
|
||||
--sl-color-orange-200: #9a3412;
|
||||
--sl-color-orange-100: #7c2d12;
|
||||
--sl-color-orange-50: #52200f;
|
||||
--sl-color-orange-1000: 255 247 237;
|
||||
--sl-color-orange-900: 255 237 213;
|
||||
--sl-color-orange-800: 254 215 170;
|
||||
--sl-color-orange-700: 253 186 116;
|
||||
--sl-color-orange-600: 251 146 60;
|
||||
--sl-color-orange-500: 249 115 22;
|
||||
--sl-color-orange-400: 234 88 12;
|
||||
--sl-color-orange-300: 194 65 12;
|
||||
--sl-color-orange-200: 154 52 18;
|
||||
--sl-color-orange-100: 124 45 18;
|
||||
--sl-color-orange-50: 82 32 15;
|
||||
|
||||
/* Amber */
|
||||
--sl-color-amber-1000: #fffbeb;
|
||||
--sl-color-amber-900: #fef3c7;
|
||||
--sl-color-amber-800: #fde68a;
|
||||
--sl-color-amber-700: #fcd34d;
|
||||
--sl-color-amber-600: #fbbf24;
|
||||
--sl-color-amber-500: #f59e0b;
|
||||
--sl-color-amber-400: #d97706;
|
||||
--sl-color-amber-300: #b45309;
|
||||
--sl-color-amber-200: #92400e;
|
||||
--sl-color-amber-100: #78350f;
|
||||
--sl-color-amber-50: #4a230b;
|
||||
--sl-color-amber-1000: 255 251 235;
|
||||
--sl-color-amber-900: 254 243 199;
|
||||
--sl-color-amber-800: 253 230 138;
|
||||
--sl-color-amber-700: 252 211 77;
|
||||
--sl-color-amber-600: 251 191 36;
|
||||
--sl-color-amber-500: 245 158 11;
|
||||
--sl-color-amber-400: 217 119 6;
|
||||
--sl-color-amber-300: 180 83 9;
|
||||
--sl-color-amber-200: 146 64 14;
|
||||
--sl-color-amber-100: 120 53 15;
|
||||
--sl-color-amber-50: 74 35 11;
|
||||
|
||||
/* Yellow */
|
||||
--sl-color-yellow-1000: #fefce8;
|
||||
--sl-color-yellow-900: #fef9c3;
|
||||
--sl-color-yellow-800: #fef08a;
|
||||
--sl-color-yellow-700: #fde047;
|
||||
--sl-color-yellow-600: #facc15;
|
||||
--sl-color-yellow-500: #eab308;
|
||||
--sl-color-yellow-400: #ca8a04;
|
||||
--sl-color-yellow-300: #a16207;
|
||||
--sl-color-yellow-200: #854d0e;
|
||||
--sl-color-yellow-100: #713f12;
|
||||
--sl-color-yellow-50: #3c260b;
|
||||
--sl-color-yellow-1000: 254 252 232;
|
||||
--sl-color-yellow-900: 254 249 195;
|
||||
--sl-color-yellow-800: 254 240 138;
|
||||
--sl-color-yellow-700: 253 224 71;
|
||||
--sl-color-yellow-600: 250 204 21;
|
||||
--sl-color-yellow-500: 234 179 8;
|
||||
--sl-color-yellow-400: 202 138 4;
|
||||
--sl-color-yellow-300: 161 98 7;
|
||||
--sl-color-yellow-200: 133 77 14;
|
||||
--sl-color-yellow-100: 113 63 18;
|
||||
--sl-color-yellow-50: 60 38 11;
|
||||
|
||||
/* Lime */
|
||||
--sl-color-lime-1000: #f7fee7;
|
||||
--sl-color-lime-900: #ecfccb;
|
||||
--sl-color-lime-800: #d9f99d;
|
||||
--sl-color-lime-700: #bef264;
|
||||
--sl-color-lime-600: #a3e635;
|
||||
--sl-color-lime-500: #84cc16;
|
||||
--sl-color-lime-400: #65a30d;
|
||||
--sl-color-lime-300: #4d7c0f;
|
||||
--sl-color-lime-200: #3f6212;
|
||||
--sl-color-lime-100: #365314;
|
||||
--sl-color-lime-50: #26390e;
|
||||
--sl-color-lime-1000: 247 254 231;
|
||||
--sl-color-lime-900: 236 252 203;
|
||||
--sl-color-lime-800: 217 249 157;
|
||||
--sl-color-lime-700: 190 242 100;
|
||||
--sl-color-lime-600: 163 230 53;
|
||||
--sl-color-lime-500: 132 204 22;
|
||||
--sl-color-lime-400: 101 163 13;
|
||||
--sl-color-lime-300: 77 124 15;
|
||||
--sl-color-lime-200: 63 98 18;
|
||||
--sl-color-lime-100: 54 83 20;
|
||||
--sl-color-lime-50: 38 57 14;
|
||||
|
||||
/* Green */
|
||||
--sl-color-green-1000: #f0fdf4;
|
||||
--sl-color-green-900: #dcfce7;
|
||||
--sl-color-green-800: #bbf7d0;
|
||||
--sl-color-green-700: #86efac;
|
||||
--sl-color-green-600: #4ade80;
|
||||
--sl-color-green-500: #22c55e;
|
||||
--sl-color-green-400: #16a34a;
|
||||
--sl-color-green-300: #15803d;
|
||||
--sl-color-green-200: #166534;
|
||||
--sl-color-green-100: #14532d;
|
||||
--sl-color-green-50: #0c311b;
|
||||
--sl-color-green-1000: 240 253 244;
|
||||
--sl-color-green-900: 220 252 231;
|
||||
--sl-color-green-800: 187 247 208;
|
||||
--sl-color-green-700: 134 239 172;
|
||||
--sl-color-green-600: 74 222 128;
|
||||
--sl-color-green-500: 34 197 94;
|
||||
--sl-color-green-400: 22 163 74;
|
||||
--sl-color-green-300: 21 128 61;
|
||||
--sl-color-green-200: 22 101 52;
|
||||
--sl-color-green-100: 20 83 45;
|
||||
--sl-color-green-50: 12 49 27;
|
||||
|
||||
/* Emerald */
|
||||
--sl-color-emerald-1000: #ecfdf5;
|
||||
--sl-color-emerald-900: #d1fae5;
|
||||
--sl-color-emerald-800: #a7f3d0;
|
||||
--sl-color-emerald-700: #6ee7b7;
|
||||
--sl-color-emerald-600: #34d399;
|
||||
--sl-color-emerald-500: #10b981;
|
||||
--sl-color-emerald-400: #059669;
|
||||
--sl-color-emerald-300: #047857;
|
||||
--sl-color-emerald-200: #065f46;
|
||||
--sl-color-emerald-100: #064e3b;
|
||||
--sl-color-emerald-50: #032d22;
|
||||
--sl-color-emerald-1000: 236 253 245;
|
||||
--sl-color-emerald-900: 209 250 229;
|
||||
--sl-color-emerald-800: 167 243 208;
|
||||
--sl-color-emerald-700: 110 231 183;
|
||||
--sl-color-emerald-600: 52 211 153;
|
||||
--sl-color-emerald-500: 16 185 129;
|
||||
--sl-color-emerald-400: 5 150 105;
|
||||
--sl-color-emerald-300: 4 120 87;
|
||||
--sl-color-emerald-200: 6 95 70;
|
||||
--sl-color-emerald-100: 6 78 59;
|
||||
--sl-color-emerald-50: 3 45 34;
|
||||
|
||||
/* Teal */
|
||||
--sl-color-teal-1000: #f0fdfa;
|
||||
--sl-color-teal-900: #ccfbf1;
|
||||
--sl-color-teal-800: #99f6e4;
|
||||
--sl-color-teal-700: #5eead4;
|
||||
--sl-color-teal-600: #2dd4bf;
|
||||
--sl-color-teal-500: #14b8a6;
|
||||
--sl-color-teal-400: #0d9488;
|
||||
--sl-color-teal-300: #0f766e;
|
||||
--sl-color-teal-200: #115e59;
|
||||
--sl-color-teal-100: #134e4a;
|
||||
--sl-color-teal-50: #0c2e2c;
|
||||
--sl-color-teal-1000: 240 253 250;
|
||||
--sl-color-teal-900: 204 251 241;
|
||||
--sl-color-teal-800: 153 246 228;
|
||||
--sl-color-teal-700: 94 234 212;
|
||||
--sl-color-teal-600: 45 212 191;
|
||||
--sl-color-teal-500: 20 184 166;
|
||||
--sl-color-teal-400: 13 148 136;
|
||||
--sl-color-teal-300: 15 118 110;
|
||||
--sl-color-teal-200: 17 94 89;
|
||||
--sl-color-teal-100: 19 78 74;
|
||||
--sl-color-teal-50: 12 46 44;
|
||||
|
||||
/* Cyan */
|
||||
--sl-color-cyan-1000: #ecfeff;
|
||||
--sl-color-cyan-900: #cffafe;
|
||||
--sl-color-cyan-800: #a5f3fc;
|
||||
--sl-color-cyan-700: #67e8f9;
|
||||
--sl-color-cyan-600: #22d3ee;
|
||||
--sl-color-cyan-500: #06b6d4;
|
||||
--sl-color-cyan-400: #0891b2;
|
||||
--sl-color-cyan-300: #0e7490;
|
||||
--sl-color-cyan-200: #155e75;
|
||||
--sl-color-cyan-100: #164e63;
|
||||
--sl-color-cyan-50: #103442;
|
||||
--sl-color-cyan-1000: 236 254 255;
|
||||
--sl-color-cyan-900: 207 250 254;
|
||||
--sl-color-cyan-800: 165 243 252;
|
||||
--sl-color-cyan-700: 103 232 249;
|
||||
--sl-color-cyan-600: 34 211 238;
|
||||
--sl-color-cyan-500: 6 182 212;
|
||||
--sl-color-cyan-400: 8 145 178;
|
||||
--sl-color-cyan-300: 14 116 144;
|
||||
--sl-color-cyan-200: 21 94 117;
|
||||
--sl-color-cyan-100: 22 78 99;
|
||||
--sl-color-cyan-50: 16 52 66;
|
||||
|
||||
/* Sky */
|
||||
--sl-color-sky-1000: #f0f9ff;
|
||||
--sl-color-sky-900: #e0f2fe;
|
||||
--sl-color-sky-800: #bae6fd;
|
||||
--sl-color-sky-700: #7dd3fc;
|
||||
--sl-color-sky-600: #38bdf8;
|
||||
--sl-color-sky-500: #0ea5e9;
|
||||
--sl-color-sky-400: #0284c7;
|
||||
--sl-color-sky-300: #0369a1;
|
||||
--sl-color-sky-200: #075985;
|
||||
--sl-color-sky-100: #0c4a6e;
|
||||
--sl-color-sky-50: #0b3249;
|
||||
--sl-color-sky-1000: 240 249 255;
|
||||
--sl-color-sky-900: 224 242 254;
|
||||
--sl-color-sky-800: 186 230 253;
|
||||
--sl-color-sky-700: 125 211 252;
|
||||
--sl-color-sky-600: 56 189 248;
|
||||
--sl-color-sky-500: 14 165 233;
|
||||
--sl-color-sky-400: 2 132 199;
|
||||
--sl-color-sky-300: 3 105 161;
|
||||
--sl-color-sky-200: 7 89 133;
|
||||
--sl-color-sky-100: 12 74 110;
|
||||
--sl-color-sky-50: 11 50 73;
|
||||
|
||||
/* Blue */
|
||||
--sl-color-blue-1000: #eff6ff;
|
||||
--sl-color-blue-900: #dbeafe;
|
||||
--sl-color-blue-800: #bfdbfe;
|
||||
--sl-color-blue-700: #93c5fd;
|
||||
--sl-color-blue-600: #60a5fa;
|
||||
--sl-color-blue-500: #3b82f6;
|
||||
--sl-color-blue-400: #2563eb;
|
||||
--sl-color-blue-300: #1d4ed8;
|
||||
--sl-color-blue-200: #1e40af;
|
||||
--sl-color-blue-100: #1e3a8a;
|
||||
--sl-color-blue-50: #152149;
|
||||
--sl-color-blue-1000: 239 246 255;
|
||||
--sl-color-blue-900: 219 234 254;
|
||||
--sl-color-blue-800: 191 219 254;
|
||||
--sl-color-blue-700: 147 197 253;
|
||||
--sl-color-blue-600: 96 165 250;
|
||||
--sl-color-blue-500: 59 130 246;
|
||||
--sl-color-blue-400: 37 99 235;
|
||||
--sl-color-blue-300: 29 78 216;
|
||||
--sl-color-blue-200: 30 64 175;
|
||||
--sl-color-blue-100: 30 58 138;
|
||||
--sl-color-blue-50: 21 33 73;
|
||||
|
||||
/* Indigo */
|
||||
--sl-color-indigo-1000: #eef2ff;
|
||||
--sl-color-indigo-900: #e0e7ff;
|
||||
--sl-color-indigo-800: #c7d2fe;
|
||||
--sl-color-indigo-700: #a5b4fc;
|
||||
--sl-color-indigo-600: #818cf8;
|
||||
--sl-color-indigo-500: #6366f1;
|
||||
--sl-color-indigo-400: #4f46e5;
|
||||
--sl-color-indigo-300: #4338ca;
|
||||
--sl-color-indigo-200: #3730a3;
|
||||
--sl-color-indigo-100: #312e81;
|
||||
--sl-color-indigo-50: #242154;
|
||||
--sl-color-indigo-1000: 238 242 255;
|
||||
--sl-color-indigo-900: 224 231 255;
|
||||
--sl-color-indigo-800: 199 210 254;
|
||||
--sl-color-indigo-700: 165 180 252;
|
||||
--sl-color-indigo-600: 129 140 248;
|
||||
--sl-color-indigo-500: 99 102 241;
|
||||
--sl-color-indigo-400: 79 70 229;
|
||||
--sl-color-indigo-300: 67 56 202;
|
||||
--sl-color-indigo-200: 55 48 163;
|
||||
--sl-color-indigo-100: 49 46 129;
|
||||
--sl-color-indigo-50: 36 33 84;
|
||||
|
||||
/* Violet */
|
||||
--sl-color-violet-1000: #f5f3ff;
|
||||
--sl-color-violet-900: #ede9fe;
|
||||
--sl-color-violet-800: #ddd6fe;
|
||||
--sl-color-violet-700: #c4b5fd;
|
||||
--sl-color-violet-600: #a78bfa;
|
||||
--sl-color-violet-500: #8b5cf6;
|
||||
--sl-color-violet-400: #7c3aed;
|
||||
--sl-color-violet-300: #6d28d9;
|
||||
--sl-color-violet-200: #5b21b6;
|
||||
--sl-color-violet-100: #4c1d95;
|
||||
--sl-color-violet-50: #311558;
|
||||
--sl-color-violet-1000: 245 243 255;
|
||||
--sl-color-violet-900: 237 233 254;
|
||||
--sl-color-violet-800: 221 214 254;
|
||||
--sl-color-violet-700: 196 181 253;
|
||||
--sl-color-violet-600: 167 139 250;
|
||||
--sl-color-violet-500: 139 92 246;
|
||||
--sl-color-violet-400: 124 58 237;
|
||||
--sl-color-violet-300: 109 40 217;
|
||||
--sl-color-violet-200: 91 33 182;
|
||||
--sl-color-violet-100: 76 29 149;
|
||||
--sl-color-violet-50: 49 21 88;
|
||||
|
||||
/* Purple */
|
||||
--sl-color-purple-1000: #faf5ff;
|
||||
--sl-color-purple-900: #f3e8ff;
|
||||
--sl-color-purple-800: #e9d5ff;
|
||||
--sl-color-purple-700: #d8b4fe;
|
||||
--sl-color-purple-600: #c084fc;
|
||||
--sl-color-purple-500: #a855f7;
|
||||
--sl-color-purple-400: #9333ea;
|
||||
--sl-color-purple-300: #7e22ce;
|
||||
--sl-color-purple-200: #6b21a8;
|
||||
--sl-color-purple-100: #581c87;
|
||||
--sl-color-purple-50: #2f1143;
|
||||
--sl-color-purple-1000: 250 245 255;
|
||||
--sl-color-purple-900: 243 232 255;
|
||||
--sl-color-purple-800: 233 213 255;
|
||||
--sl-color-purple-700: 216 180 254;
|
||||
--sl-color-purple-600: 192 132 252;
|
||||
--sl-color-purple-500: 168 85 247;
|
||||
--sl-color-purple-400: 147 51 234;
|
||||
--sl-color-purple-300: 126 34 206;
|
||||
--sl-color-purple-200: 107 33 168;
|
||||
--sl-color-purple-100: 88 28 135;
|
||||
--sl-color-purple-50: 47 17 67;
|
||||
|
||||
/* Fuchsia */
|
||||
--sl-color-fuchsia-1000: #fdf4ff;
|
||||
--sl-color-fuchsia-900: #fae8ff;
|
||||
--sl-color-fuchsia-800: #f5d0fe;
|
||||
--sl-color-fuchsia-700: #f0abfc;
|
||||
--sl-color-fuchsia-600: #e879f9;
|
||||
--sl-color-fuchsia-500: #d946ef;
|
||||
--sl-color-fuchsia-400: #c026d3;
|
||||
--sl-color-fuchsia-300: #a21caf;
|
||||
--sl-color-fuchsia-200: #86198f;
|
||||
--sl-color-fuchsia-100: #701a75;
|
||||
--sl-color-fuchsia-50: #38103a;
|
||||
--sl-color-fuchsia-1000: 253 244 255;
|
||||
--sl-color-fuchsia-900: 250 232 255;
|
||||
--sl-color-fuchsia-800: 245 208 254;
|
||||
--sl-color-fuchsia-700: 240 171 252;
|
||||
--sl-color-fuchsia-600: 232 121 249;
|
||||
--sl-color-fuchsia-500: 217 70 239;
|
||||
--sl-color-fuchsia-400: 192 38 211;
|
||||
--sl-color-fuchsia-300: 162 28 175;
|
||||
--sl-color-fuchsia-200: 134 25 143;
|
||||
--sl-color-fuchsia-100: 112 26 117;
|
||||
--sl-color-fuchsia-50: 56 16 58;
|
||||
|
||||
/* Pink */
|
||||
--sl-color-pink-1000: #fdf2f8;
|
||||
--sl-color-pink-900: #fce7f3;
|
||||
--sl-color-pink-800: #fbcfe8;
|
||||
--sl-color-pink-700: #f9a8d4;
|
||||
--sl-color-pink-600: #f472b6;
|
||||
--sl-color-pink-500: #ec4899;
|
||||
--sl-color-pink-400: #db2777;
|
||||
--sl-color-pink-300: #be185d;
|
||||
--sl-color-pink-200: #9d174d;
|
||||
--sl-color-pink-100: #831843;
|
||||
--sl-color-pink-50: #430e23;
|
||||
--sl-color-pink-1000: 253 242 248;
|
||||
--sl-color-pink-900: 252 231 243;
|
||||
--sl-color-pink-800: 251 207 232;
|
||||
--sl-color-pink-700: 249 168 212;
|
||||
--sl-color-pink-600: 244 114 182;
|
||||
--sl-color-pink-500: 236 72 153;
|
||||
--sl-color-pink-400: 219 39 119;
|
||||
--sl-color-pink-300: 190 24 93;
|
||||
--sl-color-pink-200: 157 23 77;
|
||||
--sl-color-pink-100: 131 24 67;
|
||||
--sl-color-pink-50: 67 14 35;
|
||||
|
||||
/* Rose */
|
||||
--sl-color-rose-1000: #fff1f2;
|
||||
--sl-color-rose-900: #ffe4e6;
|
||||
--sl-color-rose-800: #fecdd3;
|
||||
--sl-color-rose-700: #fda4af;
|
||||
--sl-color-rose-600: #fb7185;
|
||||
--sl-color-rose-500: #f43f5e;
|
||||
--sl-color-rose-400: #e11d48;
|
||||
--sl-color-rose-300: #be123c;
|
||||
--sl-color-rose-200: #9f1239;
|
||||
--sl-color-rose-100: #881337;
|
||||
--sl-color-rose-50: #4a0d20;
|
||||
--sl-color-rose-1000: 255 241 242;
|
||||
--sl-color-rose-900: 255 228 230;
|
||||
--sl-color-rose-800: 254 205 211;
|
||||
--sl-color-rose-700: 253 164 175;
|
||||
--sl-color-rose-600: 251 113 133;
|
||||
--sl-color-rose-500: 244 63 94;
|
||||
--sl-color-rose-400: 225 29 72;
|
||||
--sl-color-rose-300: 190 18 60;
|
||||
--sl-color-rose-200: 159 18 57;
|
||||
--sl-color-rose-100: 136 19 55;
|
||||
--sl-color-rose-50: 74 13 32;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user