kopia lustrzana https://github.com/shoelace-style/shoelace
improve dark theme and remove rgb() from tokens
Cory LaViska
rodzic
cfc7b2ac93
commit
9cb3314494
|
|
@ -1,17 +1,17 @@
|
|||
.code-block {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.code-block__preview {
|
||||
position: relative;
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-left: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
color: var(--sl-color-neutral-600);
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-left: solid 1px var(--sl-color-neutral-200);
|
||||
border-top-right-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
transition: 250ms background-color;
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.code-block__source {
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
display: none;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
|
||||
.code-block__buttons {
|
||||
position: relative;
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
display: flex;
|
||||
|
|
@ -86,18 +86,18 @@
|
|||
min-width: 2.5rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: rgb(var(--sl-color-neutral-0));
|
||||
background: var(--sl-color-neutral-0);
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-block__button:not(:last-of-type) {
|
||||
border-right: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-right: solid 1px var(--sl-color-neutral-200);
|
||||
}
|
||||
|
||||
.code-block__button--html,
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
.code-block__button--selected {
|
||||
font-weight: 700;
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.code-block__button--codepen {
|
||||
|
|
@ -129,20 +129,20 @@
|
|||
|
||||
.code-block__button:hover,
|
||||
.code-block__button:active {
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400));
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-400);
|
||||
border-right-color: transparent;
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-700);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.code-block__button:focus-visible {
|
||||
outline: none;
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
border-right-color: transparent;
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)), var(--sl-focus-ring);
|
||||
background-color: var(--sl-color-primary-50);
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-400), var(--sl-focus-ring);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
.markdown-section .docsify-copy-code-button {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
background-color: var(--sl-color-neutral-500);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: var(--sl-font-size-x-small);
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
|
||||
.markdown-section .docsify-copy-code-button.copied {
|
||||
animation: pulse 0.75s;
|
||||
--pulse-color: rgb(var(--sl-color-neutral-600));
|
||||
--pulse-color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
@ -210,11 +210,11 @@
|
|||
}
|
||||
|
||||
.markdown-section .docsify-copy-code-button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgb(var(--sl-color-neutral-500) / 50%);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.markdown-section .docsify-copy-code-button:active {
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
background-color: var(--sl-color-neutral-600);
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ body.site-search-visible {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(var(--sl-overlay-background-color) / var(--sl-overlay-opacity));
|
||||
background: var(--sl-overlay-background-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ body.site-search-visible {
|
|||
flex-direction: column;
|
||||
max-width: 460px;
|
||||
max-height: calc(100vh - 20rem);
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-radius: var(--sl-border-radius-large);
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
margin: 10rem auto;
|
||||
|
|
@ -74,7 +74,7 @@ body.site-search-visible {
|
|||
}
|
||||
|
||||
.site-search--has-results .site-search__body {
|
||||
border-top: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
}
|
||||
|
||||
.site-search__results {
|
||||
|
|
@ -97,15 +97,15 @@ body.site-search-visible {
|
|||
|
||||
.site-search__results li a:hover,
|
||||
.site-search__results li a:hover small {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
background-color: var(--sl-color-neutral-100);
|
||||
}
|
||||
|
||||
.site-search__results li[aria-selected='true'] a,
|
||||
.site-search__results li[aria-selected='true'] a small,
|
||||
.site-search__results li[aria-selected='true'] a sl-icon {
|
||||
outline: none;
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-neutral-0);
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.site-search__results h3 {
|
||||
|
|
@ -115,7 +115,7 @@ body.site-search-visible {
|
|||
|
||||
.site-search__results small {
|
||||
display: block;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.site-search__result {
|
||||
|
|
@ -132,7 +132,7 @@ body.site-search-visible {
|
|||
.site-search__result-icon {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
color: rgb(var(--sl-color-neutral-400));
|
||||
color: var(--sl-color-neutral-400);
|
||||
font-size: var(--sl-font-size-x-large);
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ body.site-search-visible {
|
|||
|
||||
.site-search__empty {
|
||||
display: none;
|
||||
border-top: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
text-align: center;
|
||||
padding: var(--sl-spacing-x-large);
|
||||
}
|
||||
|
|
@ -155,14 +155,14 @@ body.site-search-visible {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--sl-spacing-large);
|
||||
border-top: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
.site-search__footer small {
|
||||
color: rgb(var(--sl-color-neutral-700));
|
||||
color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
|
|
|||
|
|
@ -13,17 +13,17 @@ body {
|
|||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
color: rgb(var(--sl-color-neutral-800));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
color: var(--sl-color-neutral-800);
|
||||
line-height: var(--sl-line-height-normal);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
color: var(--sl-color-primary-700);
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -32,8 +32,8 @@ strong {
|
|||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
border-right: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-right: solid 1px var(--sl-color-neutral-200);
|
||||
}
|
||||
|
||||
.sidebar .app-name {
|
||||
|
|
@ -43,7 +43,7 @@ strong {
|
|||
.sidebar-version {
|
||||
font-size: var(--sl-font-size-x-small);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
text-align: right;
|
||||
padding: 0 var(--sl-spacing-small);
|
||||
margin: -1.25rem 0 0.6rem 0;
|
||||
|
|
@ -61,7 +61,7 @@ strong {
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ strong {
|
|||
}
|
||||
|
||||
.sidebar-toggle:active .sidebar-toggle-button span {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.sidebar-toggle:focus {
|
||||
|
|
@ -110,12 +110,12 @@ strong {
|
|||
|
||||
.sidebar-nav li.collapse > a,
|
||||
.sidebar-nav li.active > a {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.sidebar li > p {
|
||||
font-weight: var(--sl-font-weight-bold);
|
||||
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-bottom: solid 1px var(--sl-color-neutral-200);
|
||||
margin: 0 0.75rem 0.5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -200,12 +200,12 @@ strong {
|
|||
}
|
||||
|
||||
.anchor span {
|
||||
color: rgb(var(--sl-color-neutral-1000));
|
||||
color: var(--sl-color-neutral-1000);
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
position: relative;
|
||||
border-left: solid 4px rgb(var(--sl-color-neutral-200));
|
||||
border-left: solid 4px var(--sl-color-neutral-200);
|
||||
font-style: italic;
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
|
|
@ -229,7 +229,7 @@ strong {
|
|||
}
|
||||
|
||||
.docsify-pagination-container {
|
||||
border-top-color: rgb(var(--sl-color-neutral-200)) !important;
|
||||
border-top-color: var(--sl-color-neutral-200) !important;
|
||||
}
|
||||
|
||||
.pagination-item-label,
|
||||
|
|
@ -254,7 +254,7 @@ strong {
|
|||
|
||||
.markdown-section h2 {
|
||||
font-size: var(--sl-font-size-x-large);
|
||||
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-bottom: solid 1px var(--sl-color-neutral-200);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -285,30 +285,30 @@ strong {
|
|||
.markdown-section code {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.markdown-section tr:nth-child(2n) code {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
background-color: var(--sl-color-neutral-100);
|
||||
}
|
||||
|
||||
kbd,
|
||||
.markdown-section kbd {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
box-shadow: inset 0 1px 0 rgb(var(--sl-color-neutral-0));
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
box-shadow: inset 0 1px 0 var(--sl-color-neutral-0);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown-section pre {
|
||||
position: relative;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
}
|
||||
|
||||
|
|
@ -316,7 +316,7 @@ kbd,
|
|||
display: block;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
color: rgb(var(--sl-color-neutral-800));
|
||||
color: var(--sl-color-neutral-800);
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: auto;
|
||||
hyphens: none;
|
||||
|
|
@ -324,18 +324,18 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section pre .token.comment {
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.prolog,
|
||||
.markdown-section pre .token.doctype,
|
||||
.markdown-section pre .token.cdata,
|
||||
.markdown-section pre .token.operator {
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.punctuation {
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
|
|
@ -346,12 +346,12 @@ kbd,
|
|||
.markdown-section pre .token.keyword,
|
||||
.markdown-section pre .token.tag,
|
||||
.markdown-section pre .token.url {
|
||||
color: rgb(var(--sl-color-sky-600));
|
||||
color: var(--sl-color-sky-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.symbol,
|
||||
.markdown-section pre .token.deleted {
|
||||
color: rgb(var(--sl-color-pink-600));
|
||||
color: var(--sl-color-pink-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.boolean,
|
||||
|
|
@ -362,24 +362,24 @@ kbd,
|
|||
.markdown-section pre .token.char,
|
||||
.markdown-section pre .token.builtin,
|
||||
.markdown-section pre .token.inserted {
|
||||
color: rgb(var(--sl-color-emerald-600));
|
||||
color: var(--sl-color-emerald-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.atrule,
|
||||
.markdown-section pre .token.attr-value,
|
||||
.markdown-section pre .token.number,
|
||||
.markdown-section pre .token.variable {
|
||||
color: rgb(var(--sl-color-violet-600));
|
||||
color: var(--sl-color-violet-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.function,
|
||||
.markdown-section pre .token.class-name,
|
||||
.markdown-section pre .token.regex {
|
||||
color: rgb(var(--sl-color-orange-600));
|
||||
color: var(--sl-color-orange-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.important {
|
||||
color: rgb(var(--sl-color-red-600));
|
||||
color: var(--sl-color-red-600);
|
||||
}
|
||||
|
||||
.markdown-section pre .token.important,
|
||||
|
|
@ -412,7 +412,7 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background: rgb(var(--sl-color-neutral-50));
|
||||
background: var(--sl-color-neutral-50);
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
|
|
@ -422,8 +422,8 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section td {
|
||||
border-top: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom: solid 1px var(--sl-color-neutral-200);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -433,7 +433,7 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section table sl-tooltip code {
|
||||
border-bottom: dashed 1px rgb(var(--sl-color-neutral-300));
|
||||
border-bottom: dashed 1px var(--sl-color-neutral-300);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
|
|
@ -446,7 +446,7 @@ kbd,
|
|||
.markdown-section p.tip,
|
||||
.markdown-section p.warn {
|
||||
position: relative;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-left: solid 4px transparent;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding-left: 1.5rem;
|
||||
|
|
@ -456,7 +456,7 @@ kbd,
|
|||
.markdown-section p.warn:before {
|
||||
content: '!';
|
||||
border-radius: 100%;
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
color: var(--sl-color-neutral-0);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: -12px;
|
||||
|
|
@ -469,29 +469,29 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section p.warn {
|
||||
border-left-color: rgb(var(--sl-color-primary-600));
|
||||
border-left-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.markdown-section p.warn:before {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
border-left-color: rgb(var(--sl-color-danger-600));
|
||||
border-left-color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.markdown-section p.tip:before {
|
||||
background-color: rgb(var(--sl-color-danger-600));
|
||||
background-color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.markdown-section p.tip code,
|
||||
.markdown-section p.warn code {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
background-color: var(--sl-color-neutral-100);
|
||||
}
|
||||
|
||||
/* Component headers */
|
||||
.component-header {
|
||||
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-bottom: solid 1px var(--sl-color-neutral-200);
|
||||
padding-bottom: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -505,7 +505,7 @@ kbd,
|
|||
|
||||
.markdown-section .component-header__tag code {
|
||||
background: none;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
font-size: var(--sl-font-size-large);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -523,15 +523,15 @@ kbd,
|
|||
|
||||
/* Repo buttons */
|
||||
.repo-button--sponsor sl-icon {
|
||||
color: rgb(var(--sl-color-pink-600));
|
||||
color: var(--sl-color-pink-600);
|
||||
}
|
||||
|
||||
.repo-button--github sl-icon {
|
||||
color: rgb(var(--sl-color-neutral-700));
|
||||
color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
.repo-button--twitter sl-icon {
|
||||
color: rgb(var(--sl-color-sky-500));
|
||||
color: var(--sl-color-sky-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
|
|
@ -550,13 +550,13 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
|||
.border-radius-demo {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: rgb(var(--sl-color-primary-600));
|
||||
background: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Transition demo */
|
||||
.transition-demo {
|
||||
position: relative;
|
||||
background: rgb(var(--sl-color-neutral-200));
|
||||
background: var(--sl-color-neutral-200);
|
||||
width: 8rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
|
@ -564,7 +564,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
|||
.transition-demo:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
|
|
@ -580,7 +580,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
|||
/* Spacing demo */
|
||||
.spacing-demo {
|
||||
width: 100px;
|
||||
background: rgb(var(--sl-color-primary-600));
|
||||
background: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Elevation dmeo */
|
||||
|
|
@ -622,7 +622,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
|||
}
|
||||
|
||||
.color-palette__swatch--border {
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-1000) / 10%);
|
||||
box-shadow: inset 0 0 0 1px var(--sl-color-neutral-300);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ You can change the appearance and location of the control box by targeting the `
|
|||
left: 1rem;
|
||||
background-color: deeppink;
|
||||
border: none;
|
||||
color: white;
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -107,7 +107,8 @@ const css = `
|
|||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
background-color: deeppink;
|
||||
color: white;
|
||||
border: none;
|
||||
color: pink;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,7 +33,7 @@ const css = `
|
|||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
margin: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
|
@ -109,7 +109,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
|
|||
.animation-sandbox .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.animation-sandbox .controls {
|
||||
|
|
@ -155,7 +155,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
|
|||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -173,7 +173,7 @@ const css = `
|
|||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -252,7 +252,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
|
|||
.animation-keyframes .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -264,7 +264,7 @@ const css = `
|
|||
.animation-keyframes .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ You can group avatars with a few lines of CSS.
|
|||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px rgb(var(--sl-color-neutral-0));
|
||||
border: solid 2px var(--sl-color-neutral-0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -165,7 +165,7 @@ const css = `
|
|||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px rgb(var(--sl-color-neutral-0));
|
||||
border: solid 2px var(--sl-color-neutral-0);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ const App = () => (
|
|||
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 rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 240px; border: solid 1px 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="neutral" pill>4</sl-badge></sl-menu-item>
|
||||
<sl-menu-item>Replies <sl-badge slot="suffix" type="neutral" pill>12</sl-badge></sl-menu-item>
|
||||
|
|
@ -177,7 +177,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '240px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
|
|||
}
|
||||
|
||||
.card-overview small {
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
|
||||
.card-overview [slot="footer"] {
|
||||
|
|
@ -52,7 +52,7 @@ const css = `
|
|||
}
|
||||
|
||||
.card-overview small {
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
|
||||
.card-overview [slot="footer"] {
|
||||
|
|
|
|||
|
|
@ -107,7 +107,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 rgb(var(--sl-color-neutral-200)); padding: 0 1rem;">
|
||||
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
|
|
@ -137,7 +137,7 @@ const App = () => {
|
|||
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
<div style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
|
||||
border: 'dashed 2px var(--sl-color-neutral-200)',
|
||||
padding: '0 1rem'
|
||||
}}>
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
|
|
@ -209,7 +209,7 @@ const App = () => {
|
|||
|
||||
### Customizing Initial Focus
|
||||
|
||||
By default, the dialog's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the dialog. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
|
||||
By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element within the dialog. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" class="dialog-focus">
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const App = () => (
|
|||
Use dividers in [menus](/components/menu) to visually group menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-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>
|
||||
<sl-menu-item value="3">Option 3</sl-menu-item>
|
||||
|
|
@ -134,7 +134,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
|
|||
|
||||
```html preview
|
||||
<div
|
||||
style="position: relative; border: solid 2px rgb(var(--sl-panel-border-color)); height: 300px; padding: 1rem; margin-bottom: 1rem;"
|
||||
style="position: relative; border: solid 2px 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.
|
||||
|
||||
|
|
@ -233,7 +233,7 @@ const App = () => {
|
|||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
border: 'solid 2px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 2px var(--sl-panel-border-color)',
|
||||
height: '300px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1rem'
|
||||
|
|
@ -315,7 +315,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 rgb(var(--sl-color-neutral-200)); padding: 0 1rem;">
|
||||
<div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
|
|
@ -346,7 +346,7 @@ const App = () => {
|
|||
<div
|
||||
style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
|
||||
border: 'dashed 2px var(--sl-color-neutral-200)',
|
||||
padding: '0 1rem'
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -334,7 +334,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
|||
|
||||
<style>
|
||||
.dropdown-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -353,7 +353,7 @@ import {
|
|||
|
||||
const css = `
|
||||
.dropdown-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -384,15 +384,15 @@ 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: rgb(var(--sl-color-danger-600));
|
||||
color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.custom-input[invalid]:not([disabled])::part(base) {
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: var(--sl-color-danger-500);
|
||||
}
|
||||
|
||||
.custom-input[invalid]:focus-within::part(base) {
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -403,15 +403,15 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|||
const css = `
|
||||
.custom-input[invalid]:not([disabled])::part(label),
|
||||
.custom-input[invalid]:not([disabled])::part(help-text) {
|
||||
color: rgb(var(--sl-color-danger-600));
|
||||
color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.custom-input[invalid]:not([disabled])::part(base) {
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: var(--sl-color-danger-500);
|
||||
}
|
||||
|
||||
.custom-input[invalid]:focus-within::part(base) {
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,22 @@ const App = () => (
|
|||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
For non-decorative icons, use the `label` attribute to announce it to assistive devices.
|
||||
|
||||
```html preview
|
||||
<sl-icon name="star-fill" label="Add to favorites"></sl-icon>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlIcon name="star-fill" label="Add to favorites" />
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
|
||||
|
|
@ -592,7 +608,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
|
|||
|
||||
<style>
|
||||
.icon-search {
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
|
|
@ -648,8 +664,8 @@ If you want to change the icons Shoelace uses internally, you can register an ic
|
|||
}
|
||||
|
||||
.icon-list-item:hover {
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,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 rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item>Option 2</sl-menu-item>
|
||||
<sl-menu-item>Option 3</sl-menu-item>
|
||||
|
|
@ -36,7 +36,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
@ -66,7 +66,7 @@ const App = () => (
|
|||
Use the `checked` attribute to draw menu items in a checked state.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item checked>Option 2</sl-menu-item>
|
||||
<sl-menu-item>Option 3</sl-menu-item>
|
||||
|
|
@ -83,7 +83,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
@ -99,7 +99,7 @@ const App = () => (
|
|||
Add the `disabled` attribute to disable the menu item so it cannot be selected.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item disabled>Option 2</sl-menu-item>
|
||||
<sl-menu-item>Option 3</sl-menu-item>
|
||||
|
|
@ -116,7 +116,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
@ -132,7 +132,7 @@ const App = () => (
|
|||
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item>
|
||||
<sl-icon slot="prefix" name="house"></sl-icon>
|
||||
Home
|
||||
|
|
@ -166,7 +166,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
@ -196,7 +196,7 @@ const App = () => (
|
|||
The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
|
||||
|
||||
```html preview
|
||||
<sl-menu class="menu-value" style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu class="menu-value" style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item value="opt-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="opt-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="opt-3">Option 3</sl-menu-item>
|
||||
|
|
@ -239,7 +239,7 @@ const App = () => {
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
onSlSelect={handleSelect}
|
||||
|
|
|
|||
|
|
@ -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 rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-label>Fruits</sl-menu-label>
|
||||
<sl-menu-item value="apple">Apple</sl-menu-item>
|
||||
|
|
@ -32,7 +32,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 labels](/components/menu-label), and [dividers](/components/divider) 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 rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-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-divider></sl-divider>
|
||||
|
|
@ -29,7 +29,7 @@ const App = () => (
|
|||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/reac
|
|||
const css = `
|
||||
.resize-observer-overview div {
|
||||
display: flex;
|
||||
border: solid 2px rgb(var(--sl-input-border-color));
|
||||
border: solid 2px var(--sl-input-border-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -91,8 +91,8 @@ You can customize the active and inactive portions of the track using the `--tra
|
|||
|
||||
```html preview
|
||||
<sl-range style="
|
||||
--track-color-active: rgb(var(--sl-color-primary-600));
|
||||
--track-color-inactive: rgb(var(--sl-color-primary-200));
|
||||
--track-color-active: var(--sl-color-primary-600);
|
||||
--track-color-inactive: var(--sl-color-primary-100);
|
||||
"></sl-range>
|
||||
```
|
||||
|
||||
|
|
@ -102,8 +102,8 @@ import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
|||
const App = () => (
|
||||
<SlRange
|
||||
style={{
|
||||
'--track-color-active': 'rgb(var(--sl-color-primary-600))',
|
||||
'--track-color-inactive': 'rgb(var(--sl-color-primary-200))'
|
||||
'--track-color-active': 'var(--sl-color-primary-600)',
|
||||
'--track-color-inactive': 'var(--sl-color-primary-200)'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 rgb(var(--sl-input-border-color));
|
||||
border: solid 2px var(--sl-input-border-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
@ -42,7 +42,7 @@ import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react';
|
|||
const css = `
|
||||
.resize-observer-overview div {
|
||||
display: flex;
|
||||
border: solid 2px rgb(var(--sl-input-border-color));
|
||||
border: solid 2px var(--sl-input-border-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -370,7 +370,7 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
|
|||
|
||||
<style>
|
||||
.tooltip-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
overflow: hidden;
|
||||
padding: var(--sl-spacing-medium);
|
||||
position: relative;
|
||||
|
|
@ -383,7 +383,7 @@ import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
|||
|
||||
const css = `
|
||||
.tooltip-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
overflow: hidden;
|
||||
padding: var(--sl-spacing-medium);
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Here's an example that modifies buttons with the `tomato-button` class.
|
|||
|
||||
<style>
|
||||
.tomato-button::part(base) {
|
||||
background: rgb(var(--sl-color-neutral-0));
|
||||
background: var(--sl-color-neutral-0);
|
||||
border: solid 1px tomato;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,13 +62,15 @@ This is the technology that Shoelace is built on.
|
|||
|
||||
## What Problem Does This Solve?
|
||||
|
||||
Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
|
||||
Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
|
||||
|
||||
With Shoelace, you can:
|
||||
|
||||
- Start building things faster (no need to roll your own buttons)
|
||||
- Build multiple apps with different frameworks that all share the same UI
|
||||
- Skip having to learn a new component library every time you switch frameworks
|
||||
- Build multiple apps with different frameworks that all share the same UI components
|
||||
- Fully customize components to match your existing designs
|
||||
- Incrementally adopt components as needed (no need to ditch your framework)
|
||||
- Upgrade or switch frameworks without rebuilding foundational components
|
||||
|
||||
If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
|
||||
|
||||
|
|
@ -118,7 +120,7 @@ Special thanks to the following projects and individuals that help make Shoelace
|
|||
- Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
|
||||
- Documentation is powered by [Docsify](https://docsify.js.org/)
|
||||
- CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
|
||||
- Color primitives are derived from [Tailwind](https://tailwindcss.com/)
|
||||
- Color primitives are inspired by [Tailwind](https://tailwindcss.com/)
|
||||
- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
|
||||
- The homepage illustration is courtesy of [unDraw](https://undraw.co/)
|
||||
- Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ You will, however, need to maintain your theme more carefully, as new versions o
|
|||
|
||||
## Dark Theme
|
||||
|
||||
The built-in dark theme uses an inverted + shifted color scale so, if you're using design tokens as intended, you'll get a decent dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
|
||||
The built-in dark theme uses an inverted + shifted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
|
||||
|
||||
This was achieved by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was increased slightly to avoid true black, a color that is typically undesirable in dark themes. The result is a custom palette that complements the light theme well and makes it easy to offer light and dark variations with minimal effort.
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
crossChapterText: false
|
||||
},
|
||||
routerMode: 'history',
|
||||
themeColor: 'rgb(var(--sl-color-primary-500))'
|
||||
themeColor: 'var(--sl-color-primary-500)'
|
||||
};
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,32 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
This release improves the dark theme by shifting luminance in both directions, slightly condensing the spectrum. This results in richer colors in dark mode. It also reduces theme stylesheet sizes by eliminating superfluous gray palette variations.
|
||||
|
||||
In [beta.48](#_200-beta48), I introduced a change to color tokens that allowed you to access alpha values at the expense of a verbose, non-standard syntax. After considering feedback from the community, I've decided to revert this change so the `rgb()` function is no longer required. Many users reported never using it for alpha, and even more reported having trouble remembering to use `rgb()` and that it was causing more harm than good.
|
||||
|
||||
Furthermore, both Safari and Firefox have implemented [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()) behind a flag, so access to alpha channels and other capabilities are coming to the browser soon.
|
||||
|
||||
If you're using color tokens in your own stylesheet, simply remove the `rgb()` to update to this version.
|
||||
|
||||
```css
|
||||
.your-styles {
|
||||
/* change this */
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
|
||||
/* to this */
|
||||
color: var(--sl-color-primary-500);
|
||||
}
|
||||
```
|
||||
|
||||
Thank you for your help and patience with testing Shoelace. I promise, we're not far from a stable release!
|
||||
|
||||
- 🚨 BREAKING: removed blue gray, cool gray, true gray, and warm gray color palettes
|
||||
- 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
|
||||
- 🚨 BREAKING: removed `--sl-surface-base` and `--sl-surface-base-alt` tokens (use the neutral palette instead)
|
||||
- Added experimental `<sl-visually-hidden>` component
|
||||
- Fixed a bug in `<sl-progress-bar>` where the label would show in the default slot
|
||||
- Improved the dark theme palette so colors are bolder and don't appear washed out
|
||||
- Improved a11y of `<sl-avatar>` by representing it as an image with an `alt` [#579](https://github.com/shoelace-style/shoelace/issues/579)
|
||||
- Improved a11y of the scroll buttons in `<sl-tab-group>`
|
||||
- Improved a11y of the close button in `<sl-tab>`
|
||||
|
|
@ -85,7 +110,7 @@ Shoelace doesn't have a lot of dependencies, but this release unbundles most of
|
|||
- 🚨 BREAKING: switched the default `type` of `<sl-tag>` from `primary` to `neutral`
|
||||
- Added the experimental `<sl-mutation-observer>` component
|
||||
- Added the `<sl-divider>` component
|
||||
- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added `--sl-color-neutral-0` and `--sl-color-neutral-50` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added the `--sl-panel-border-width` design token
|
||||
- Added missing background color to `<sl-details>`
|
||||
- Added the `--padding` custom property to `<sl-tab-panel>`
|
||||
|
|
@ -168,7 +193,7 @@ Previously, color tokens were in hexidecimal format. Now, Shoelace now uses an `
|
|||
```css
|
||||
.example {
|
||||
/* rgb() is required now */
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -215,8 +215,8 @@ To expose custom properties as part of a component's API, scope them to the `:ho
|
|||
|
||||
```css
|
||||
:host {
|
||||
--color: rgb(var(--sl-color-primary-500));
|
||||
--background-color: rgb(var(--sl-color-neutral-100));
|
||||
--color: var(--sl-color-primary-500);
|
||||
--background-color: var(--sl-color-neutral-100);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -249,25 +249,6 @@ Parts let you target a specific element inside the component's shadow DOM but, b
|
|||
|
||||
This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.
|
||||
|
||||
### Design Token Color Values
|
||||
|
||||
All design tokens that implement a color value must do so in the following `R G B` format for consistency.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--sl-color-sky-500: 14 165 233;
|
||||
}
|
||||
```
|
||||
|
||||
This format requires the consumer to use the `rgb()` function in their stylesheets, but it also lets them control each token's alpha channel.
|
||||
|
||||
```css
|
||||
.example {
|
||||
color: rgb(var(--sl-color-sky-500));
|
||||
background-color: rgb(var(--sl-color-sky-500) / 5%); /* 5% opacity */
|
||||
}
|
||||
```
|
||||
|
||||
### Form Controls
|
||||
|
||||
Form controls should support validation through the following conventions:
|
||||
|
|
|
|||
|
|
@ -2,34 +2,8 @@
|
|||
|
||||
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
|
||||
|
||||
## Usage
|
||||
|
||||
Color tokens are referenced using the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
|
||||
|
||||
All color tokens are defined as a set of RGB integers, eg. `113 113 122`. CSS doesn't understand this format, however, so you need wrap them in the `rgb()` function.
|
||||
|
||||
```css
|
||||
.example {
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
}
|
||||
```
|
||||
|
||||
This may seem a bit verbose, but it gives us a super power — we can adjust the alpha channel of any color token!
|
||||
|
||||
## Adjusting Alpha Channels
|
||||
|
||||
By default, color tokens produce an opaque color. With this syntax, you can easily adjust alpha channels.
|
||||
|
||||
```css
|
||||
.example-with-alpha {
|
||||
color: rgb(var(--sl-color-neutral-500) / 50%);
|
||||
}
|
||||
```
|
||||
|
||||
The browser evaluates this to `rgb(113 113 122 / 50%)`, where 50% is the alpha value. Note the required `/` delimiter after the color token. Alternatively, you can use a decimal such as 0.5 in lieu of a percentage.
|
||||
|
||||
This syntax may not look familiar, but it's perfectly valid per the [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/#typedef-color) and [well-supported](https://caniuse.com/mdn-css_types_color_space_separated_functional_notation) by modern browsers.
|
||||
|
||||
## Theme Tokens
|
||||
|
||||
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
|
||||
|
|
@ -39,17 +13,17 @@ 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: 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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -57,17 +31,17 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
Success<br>
|
||||
<code>--sl-color-success-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -75,17 +49,17 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
Warning<br>
|
||||
<code>--sl-color-warning-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -93,17 +67,17 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
Danger<br>
|
||||
<code>--sl-color-danger-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -111,17 +85,17 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
Neutral<br>
|
||||
<code>--sl-color-neutral-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-50));"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-100));"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-200));"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-300));"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-400));"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-500));"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-600));"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-neutral-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -129,8 +103,8 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
Black & White<br>
|
||||
<code>--sl-color-neutral-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch " style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--sl-color-neutral-0);"></div>0</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--sl-color-neutral-1000);"></div>1000</div>
|
||||
</div>
|
||||
|
||||
?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)
|
||||
|
|
@ -140,94 +114,22 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
|||
|
||||
Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors).
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
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: 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-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<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: 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-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<div class="color-palette__name">
|
||||
Gray<br>
|
||||
<code>--sl-color-gray-<em>{n}</em></code>
|
||||
</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: 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-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<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: 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-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
<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: 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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -235,17 +137,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Red<br>
|
||||
<code>--sl-color-red-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -253,17 +155,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Orange<br>
|
||||
<code>--sl-color-orange-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -271,17 +173,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Amber<br>
|
||||
<code>--sl-color-amber-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -289,17 +191,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Yellow<br>
|
||||
<code>--sl-color-yellow-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -307,17 +209,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Lime<br>
|
||||
<code>--sl-color-lime-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -325,17 +227,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Green<br>
|
||||
<code>--sl-color-green-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -343,17 +245,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Emerald<br>
|
||||
<code>--sl-color-emerald-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -361,17 +263,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Teal<br>
|
||||
<code>--sl-color-teal-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -379,17 +281,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Cyan<br>
|
||||
<code>--sl-color-cyan-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -397,17 +299,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Sky<br>
|
||||
<code>--sl-color-sky-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -415,17 +317,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Blue<br>
|
||||
<code>--sl-color-blue-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -433,17 +335,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Indigo<br>
|
||||
<code>--sl-color-indigo-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -451,17 +353,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Violet<br>
|
||||
<code>--sl-color-violet-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -469,17 +371,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Purple<br>
|
||||
<code>--sl-color-purple-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -487,17 +389,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Fuchsia<br>
|
||||
<code>--sl-color-fuchsia-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -505,17 +407,17 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Pink<br>
|
||||
<code>--sl-color-pink-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-950);"></div>950</div>
|
||||
</div>
|
||||
|
||||
<div class="color-palette">
|
||||
|
|
@ -523,15 +425,15 @@ Additional palettes are provided in the form of color primitives. Use these when
|
|||
Rose<br>
|
||||
<code>--sl-color-rose-<em>{n}</em></code>
|
||||
</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-950));"></div>950</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-50);"></div>50</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-100);"></div>100</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-200);"></div>200</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-300);"></div>300</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-400);"></div>400</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-500);"></div>500</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-600);"></div>600</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-700);"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-800);"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-900);"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-950);"></div>950</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default css`
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
|
||||
border-top-width: calc(var(--sl-panel-border-width) * 3);
|
||||
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: rgb(var(--sl-color-neutral-700));
|
||||
color: var(--sl-color-neutral-700);
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -40,43 +40,43 @@ export default css`
|
|||
}
|
||||
|
||||
.alert--primary {
|
||||
border-top-color: rgb(var(--sl-color-primary-600));
|
||||
border-top-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.alert--primary .alert__icon {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
border-top-color: rgb(var(--sl-color-success-600));
|
||||
border-top-color: var(--sl-color-success-600);
|
||||
}
|
||||
|
||||
.alert--success .alert__icon {
|
||||
color: rgb(var(--sl-color-success-600));
|
||||
color: var(--sl-color-success-600);
|
||||
}
|
||||
|
||||
.alert--neutral {
|
||||
border-top-color: rgb(var(--sl-color-neutral-600));
|
||||
border-top-color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.alert--neutral .alert__icon {
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
border-top-color: rgb(var(--sl-color-warning-600));
|
||||
border-top-color: var(--sl-color-warning-600);
|
||||
}
|
||||
|
||||
.alert--warning .alert__icon {
|
||||
color: rgb(var(--sl-color-warning-600));
|
||||
color: var(--sl-color-warning-600);
|
||||
}
|
||||
|
||||
.alert--danger {
|
||||
border-top-color: rgb(var(--sl-color-danger-600));
|
||||
border-top-color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.alert--danger .alert__icon {
|
||||
color: rgb(var(--sl-color-danger-600));
|
||||
color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.alert__message {
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ export default css`
|
|||
font-size: var(--icon-size);
|
||||
background: none;
|
||||
border: solid 2px currentColor;
|
||||
background-color: rgb(var(--sl-color-neutral-1000) / 50%);
|
||||
background-color: rgb(0 0 0 /50%);
|
||||
border-radius: var(--sl-border-radius-circle);
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
transition: var(--sl-transition-fast) opacity;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import styles from './animation.styles';
|
|||
* @event sl-finish - Emitted when the animation finishes.
|
||||
* @event sl-start - Emitted when the animation starts or restarts.
|
||||
*
|
||||
* @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container.
|
||||
* @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container or use
|
||||
* multiple animation elements.
|
||||
*/
|
||||
@customElement('sl-animation')
|
||||
export default class SlAnimation extends LitElement {
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ export default css`
|
|||
position: relative;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
background-color: rgb(var(--sl-color-neutral-400));
|
||||
background-color: var(--sl-color-neutral-400);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: calc(var(--size) * 0.5);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
color: var(--sl-color-neutral-0);
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default css`
|
|||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
line-height: 1;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
border: solid 1px rgb(var(--sl-color-neutral-0));
|
||||
border: solid 1px var(--sl-color-neutral-0);
|
||||
white-space: nowrap;
|
||||
padding: 3px 6px;
|
||||
user-select: none;
|
||||
|
|
@ -26,28 +26,28 @@ export default css`
|
|||
|
||||
/* Type modifiers */
|
||||
.badge--primary {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.badge--success {
|
||||
background-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.badge--neutral {
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.badge--warning {
|
||||
background-color: rgb(var(--sl-color-warning-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-warning-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.badge--danger {
|
||||
background-color: rgb(var(--sl-color-danger-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-danger-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
|
|
@ -61,23 +61,23 @@ export default css`
|
|||
}
|
||||
|
||||
.badge--pulse.badge--primary {
|
||||
--pulse-color: rgb(var(--sl-color-primary-600));
|
||||
--pulse-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.badge--pulse.badge--success {
|
||||
--pulse-color: rgb(var(--sl-color-success-600));
|
||||
--pulse-color: var(--sl-color-success-600);
|
||||
}
|
||||
|
||||
.badge--pulse.badge--neutral {
|
||||
--pulse-color: rgb(var(--sl-color-neutral-600));
|
||||
--pulse-color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.badge--pulse.badge--warning {
|
||||
--pulse-color: rgb(var(--sl-color-warning-600));
|
||||
--pulse-color: var(--sl-color-warning-600);
|
||||
}
|
||||
|
||||
.badge--pulse.badge--danger {
|
||||
--pulse-color: rgb(var(--sl-color-danger-600));
|
||||
--pulse-color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default css`
|
|||
font-family: var(--sl-font-sans);
|
||||
font-size: var(--sl-font-size-small);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
line-height: var(--sl-line-height-normal);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -38,15 +38,15 @@ export default css`
|
|||
}
|
||||
|
||||
:host(:not(:last-of-type)) .breadcrumb-item__label {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .breadcrumb-item__label:active {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.breadcrumb-item__label${focusVisibleSelector} {
|
||||
|
|
|
|||
|
|
@ -70,157 +70,157 @@ export default css`
|
|||
|
||||
/* Default */
|
||||
.button--standard.button--default {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-neutral-300));
|
||||
color: rgb(var(--sl-color-neutral-700));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-neutral-300);
|
||||
color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
.button--standard.button--default:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
border-color: rgb(var(--sl-color-primary-300));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
background-color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-300);
|
||||
color: var(--sl-color-primary-700);
|
||||
}
|
||||
|
||||
.button--standard.button--default${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
color: var(--sl-color-primary-700);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--default:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-100));
|
||||
border-color: rgb(var(--sl-color-primary-400));
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
background-color: var(--sl-color-primary-100);
|
||||
border-color: var(--sl-color-primary-400);
|
||||
color: var(--sl-color-primary-700);
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.button--standard.button--primary {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--primary:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--primary${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--primary:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Success */
|
||||
.button--standard.button--success {
|
||||
background-color: rgb(var(--sl-color-success-600));
|
||||
border-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-success-600);
|
||||
border-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--success:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-success-500));
|
||||
border-color: rgb(var(--sl-color-success-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-success-500);
|
||||
border-color: var(--sl-color-success-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--success${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-success-600));
|
||||
border-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-success-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-success-600);
|
||||
border-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--success:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-success-600));
|
||||
border-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-success-600);
|
||||
border-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Neutral */
|
||||
.button--standard.button--neutral {
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
border-color: rgb(var(--sl-color-neutral-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-600);
|
||||
border-color: var(--sl-color-neutral-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--neutral:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-neutral-500));
|
||||
border-color: rgb(var(--sl-color-neutral-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-500);
|
||||
border-color: var(--sl-color-neutral-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--neutral${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-neutral-500));
|
||||
border-color: rgb(var(--sl-color-neutral-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-neutral-500);
|
||||
border-color: var(--sl-color-neutral-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--neutral:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
border-color: rgb(var(--sl-color-neutral-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-600);
|
||||
border-color: var(--sl-color-neutral-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.button--standard.button--warning {
|
||||
background-color: rgb(var(--sl-color-warning-600));
|
||||
border-color: rgb(var(--sl-color-warning-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-warning-600);
|
||||
border-color: var(--sl-color-warning-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
.button--standard.button--warning:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-warning-500));
|
||||
border-color: rgb(var(--sl-color-warning-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-warning-500);
|
||||
border-color: var(--sl-color-warning-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--warning${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-warning-500));
|
||||
border-color: rgb(var(--sl-color-warning-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-warning-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-warning-500);
|
||||
border-color: var(--sl-color-warning-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--warning:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-warning-600));
|
||||
border-color: rgb(var(--sl-color-warning-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-warning-600);
|
||||
border-color: var(--sl-color-warning-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.button--standard.button--danger {
|
||||
background-color: rgb(var(--sl-color-danger-600));
|
||||
border-color: rgb(var(--sl-color-danger-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-danger-600);
|
||||
border-color: var(--sl-color-danger-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--danger:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-danger-500);
|
||||
border-color: var(--sl-color-danger-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--standard.button--danger${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-danger-500));
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-danger-500);
|
||||
border-color: var(--sl-color-danger-500);
|
||||
color: var(--sl-color-neutral-0);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--standard.button--danger:active:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-danger-600));
|
||||
border-color: rgb(var(--sl-color-danger-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-danger-600);
|
||||
border-color: var(--sl-color-danger-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -234,135 +234,135 @@ export default css`
|
|||
|
||||
/* Default */
|
||||
.button--outline.button--default {
|
||||
border-color: rgb(var(--sl-color-neutral-300));
|
||||
color: rgb(var(--sl-color-neutral-700));
|
||||
border-color: var(--sl-color-neutral-300);
|
||||
color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
.button--outline.button--default:hover:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-primary-600);
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--default${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--default:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-primary-700));
|
||||
background-color: rgb(var(--sl-color-primary-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-primary-700);
|
||||
background-color: var(--sl-color-primary-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.button--outline.button--primary {
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
border-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.button--outline.button--primary:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--primary${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--primary:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-primary-700));
|
||||
background-color: rgb(var(--sl-color-primary-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-primary-700);
|
||||
background-color: var(--sl-color-primary-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Success */
|
||||
.button--outline.button--success {
|
||||
border-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-success-600));
|
||||
border-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-success-600);
|
||||
}
|
||||
|
||||
.button--outline.button--success:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-success-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-success-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--success${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-success-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-success-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-success-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--success:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-success-700));
|
||||
background-color: rgb(var(--sl-color-success-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-success-700);
|
||||
background-color: var(--sl-color-success-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Neutral */
|
||||
.button--outline.button--neutral {
|
||||
border-color: rgb(var(--sl-color-neutral-600));
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
border-color: var(--sl-color-neutral-600);
|
||||
color: var(--sl-color-neutral-600);
|
||||
}
|
||||
|
||||
.button--outline.button--neutral:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-neutral-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--neutral${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-neutral-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-neutral-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--neutral:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-neutral-700));
|
||||
background-color: rgb(var(--sl-color-neutral-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-neutral-700);
|
||||
background-color: var(--sl-color-neutral-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.button--outline.button--warning {
|
||||
border-color: rgb(var(--sl-color-warning-600));
|
||||
color: rgb(var(--sl-color-warning-600));
|
||||
border-color: var(--sl-color-warning-600);
|
||||
color: var(--sl-color-warning-600);
|
||||
}
|
||||
|
||||
.button--outline.button--warning:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-warning-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-warning-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--warning${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-warning-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-warning-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-warning-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--warning:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-warning-700));
|
||||
background-color: rgb(var(--sl-color-warning-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-warning-700);
|
||||
background-color: var(--sl-color-warning-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.button--outline.button--danger {
|
||||
border-color: rgb(var(--sl-color-danger-600));
|
||||
color: rgb(var(--sl-color-danger-600));
|
||||
border-color: var(--sl-color-danger-600);
|
||||
color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.button--outline.button--danger:hover:not(.button--disabled) {
|
||||
background-color: rgb(var(--sl-color-danger-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-danger-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.button--outline.button--danger${focusVisibleSelector}:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-danger-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-danger-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--outline.button--danger:active:not(.button--disabled) {
|
||||
border-color: rgb(var(--sl-color-danger-700));
|
||||
background-color: rgb(var(--sl-color-danger-700));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: var(--sl-color-danger-700);
|
||||
background-color: var(--sl-color-danger-700);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -372,26 +372,26 @@ export default css`
|
|||
.button--text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.button--text:hover:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
.button--text${focusVisibleSelector}:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.button--text:active:not(.button--disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
color: var(--sl-color-primary-700);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -625,7 +625,8 @@ export default css`
|
|||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: solid 1px rgb(var(--sl-color-neutral-0) / 20%);
|
||||
border-left: solid 1px rgb(128 128 128 / 33%);
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
/* Bump focused buttons up so their focus ring isn't clipped */
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default css`
|
|||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--border-color: rgb(var(--sl-color-neutral-200));
|
||||
--border-color: var(--sl-color-neutral-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: rgb(var(--sl-surface-base-alt));
|
||||
background-color: var(--sl-panel-background-color);
|
||||
box-shadow: var(--sl-shadow-x-small);
|
||||
border: solid var(--border-width) var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,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: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -28,10 +28,10 @@ export default css`
|
|||
justify-content: center;
|
||||
width: var(--sl-toggle-size);
|
||||
height: var(--sl-toggle-size);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border-radius: 2px;
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-input-background-color);
|
||||
color: var(--sl-color-neutral-0);
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
|
||||
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
|
||||
}
|
||||
|
|
@ -57,31 +57,31 @@ export default css`
|
|||
|
||||
/* Hover */
|
||||
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
||||
.checkbox__input${focusVisibleSelector}
|
||||
~ .checkbox__control {
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
/* Checked/indeterminate */
|
||||
.checkbox--checked .checkbox__control,
|
||||
.checkbox--indeterminate .checkbox__control {
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: var(--sl-color-primary-600);
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Checked/indeterminate + hover */
|
||||
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
||||
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
/* Checked/indeterminate + focus */
|
||||
|
|
@ -89,8 +89,8 @@ export default css`
|
|||
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
||||
.checkbox__input${focusVisibleSelector}
|
||||
~ .checkbox__control {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ export default css`
|
|||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.color-picker--inline {
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
|
||||
}
|
||||
|
||||
.color-picker__grid {
|
||||
|
|
@ -60,7 +60,7 @@ export default css`
|
|||
|
||||
.color-picker__grid-handle${focusVisibleSelector} {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)), var(--sl-focus-ring);
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.color-picker__controls {
|
||||
|
|
@ -97,7 +97,7 @@ export default css`
|
|||
|
||||
.color-picker__slider-handle${focusVisibleSelector} {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)), var(--sl-focus-ring);
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.color-picker__hue {
|
||||
|
|
@ -171,7 +171,7 @@ export default css`
|
|||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgb(var(--sl-focus-ring-color));
|
||||
box-shadow: 0 0 0 0 var(--sl-color-primary-500);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.5rem transparent;
|
||||
|
|
@ -206,7 +206,7 @@ export default css`
|
|||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-gap: 0.5rem;
|
||||
justify-items: center;
|
||||
border-top: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
padding: var(--sl-spacing-small);
|
||||
}
|
||||
|
||||
|
|
@ -234,10 +234,10 @@ export default css`
|
|||
}
|
||||
|
||||
.color-picker__transparent-bg {
|
||||
background-image: linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
|
||||
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
|
||||
linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%);
|
||||
background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
|
||||
linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
|
||||
linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
|
||||
}
|
||||
|
|
@ -302,7 +302,7 @@ export default css`
|
|||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: currentColor;
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-1000) / 25%);
|
||||
box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -316,7 +316,7 @@ export default css`
|
|||
}
|
||||
|
||||
.color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled):before {
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-primary-500));
|
||||
box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
.color-dropdown__trigger.color-dropdown__trigger--disabled {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ export default css`
|
|||
}
|
||||
|
||||
.details {
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default css`
|
|||
width: var(--width);
|
||||
max-width: calc(100% - var(--sl-spacing-2x-large));
|
||||
max-height: calc(100% - var(--sl-spacing-2x-large));
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
background-color: 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: rgb(var(--sl-overlay-background-color) / var(--sl-overlay-opacity));
|
||||
background-color: var(--sl-overlay-background-color);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default css`
|
|||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--color: rgb(var(--sl-panel-border-color));
|
||||
--color: var(--sl-panel-border-color);
|
||||
--width: var(--sl-panel-border-width);
|
||||
--spacing: var(--sl-spacing-medium);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default css`
|
|||
z-index: 2;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
background-color: 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: rgb(var(--sl-overlay-background-color) / var(--sl-overlay-opacity));
|
||||
background-color: var(--sl-overlay-background-color);
|
||||
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: rgb(var(--sl-panel-background-color));
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default css`
|
|||
border: none;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
font-size: inherit;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
padding: var(--sl-spacing-x-small);
|
||||
cursor: pointer;
|
||||
transition: var(--sl-transition-medium) color;
|
||||
|
|
@ -26,11 +26,11 @@ export default css`
|
|||
|
||||
.icon-button:hover:not(.icon-button--disabled),
|
||||
.icon-button:focus:not(.icon-button--disabled) {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.icon-button:active:not(.icon-button--disabled) {
|
||||
color: rgb(var(--sl-color-primary-700));
|
||||
color: var(--sl-color-primary-700);
|
||||
}
|
||||
|
||||
.icon-button:focus {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default css`
|
|||
top: 0;
|
||||
width: var(--divider-width);
|
||||
height: 100%;
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
transform: translateX(calc(var(--divider-width) / -2));
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
|
@ -62,10 +62,10 @@ export default css`
|
|||
top: calc(50% - (var(--handle-size) / 2));
|
||||
width: var(--handle-size);
|
||||
height: var(--handle-size);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-radius: var(--sl-border-radius-circle);
|
||||
font-size: calc(var(--handle-size) * 0.5);
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-600);
|
||||
cursor: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,58 +29,58 @@ export default css`
|
|||
|
||||
/* Standard inputs */
|
||||
.input--standard {
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
}
|
||||
|
||||
.input--standard:hover:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
}
|
||||
|
||||
.input--standard.input--focused:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.input--standard.input--focused:not(.input--disabled) .input__control {
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
color: var(--sl-input-color-focus);
|
||||
}
|
||||
|
||||
.input--standard.input--disabled {
|
||||
background-color: rgb(var(--sl-input-background-color-disabled));
|
||||
border-color: rgb(var(--sl-input-border-color-disabled));
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.input--standard.input--disabled .input__control {
|
||||
color: rgb(var(--sl-input-color-disabled));
|
||||
color: var(--sl-input-color-disabled);
|
||||
}
|
||||
|
||||
.input--standard.input--disabled .input__control::placeholder {
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
}
|
||||
|
||||
/* Filled inputs */
|
||||
.input--filled {
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
background-color: var(--sl-input-filled-background-color);
|
||||
color: var(--sl-input-color);
|
||||
}
|
||||
|
||||
.input--filled:hover:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
background-color: var(--sl-input-filled-background-color-hover);
|
||||
}
|
||||
|
||||
.input--filled.input--focused:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
background-color: var(--sl-input-filled-background-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.input--filled.input--disabled {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
background-color: var(--sl-input-filled-background-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ export default css`
|
|||
font-weight: inherit;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
color: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -113,17 +113,17 @@ 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) rgb(var(--sl-input-background-color-hover)) inset !important;
|
||||
-webkit-text-fill-color: rgb(var(--sl-color-primary-500));
|
||||
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);
|
||||
}
|
||||
|
||||
.input__control::placeholder {
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
color: var(--sl-input-placeholder-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.input:hover:not(.input--disabled) .input__control {
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
color: var(--sl-input-color-hover);
|
||||
}
|
||||
|
||||
.input__control:focus {
|
||||
|
|
@ -140,7 +140,7 @@ export default css`
|
|||
|
||||
.input__prefix ::slotted(sl-icon),
|
||||
.input__suffix ::slotted(sl-icon) {
|
||||
color: rgb(var(--sl-input-icon-color));
|
||||
color: var(--sl-input-icon-color);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -244,7 +244,7 @@ export default css`
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: inherit;
|
||||
color: rgb(var(--sl-input-icon-color));
|
||||
color: var(--sl-input-icon-color);
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
|
@ -254,7 +254,7 @@ export default css`
|
|||
|
||||
.input__clear:hover,
|
||||
.input__password-toggle:hover {
|
||||
color: rgb(var(--sl-input-icon-color-hover));
|
||||
color: var(--sl-input-icon-color-hover);
|
||||
}
|
||||
|
||||
.input__clear:focus,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default css`
|
|||
line-height: var(--sl-line-height-normal);
|
||||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
text-align: left;
|
||||
color: rgb(var(--sl-color-neutral-700));
|
||||
color: var(--sl-color-neutral-700);
|
||||
padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
|
||||
transition: var(--sl-transition-fast) fill;
|
||||
user-select: none;
|
||||
|
|
@ -29,7 +29,7 @@ export default css`
|
|||
|
||||
.menu-item.menu-item--disabled {
|
||||
outline: none;
|
||||
color: rgb(var(--sl-color-neutral-400));
|
||||
color: var(--sl-color-neutral-400);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -64,8 +64,8 @@ export default css`
|
|||
:host(:hover:not([aria-disabled='true'])) .menu-item,
|
||||
:host(${focusVisibleSelector}:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
|
||||
outline: none;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
.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: rgb(var(--sl-color-neutral-500));
|
||||
color: var(--sl-color-neutral-500);
|
||||
padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ export default css`
|
|||
|
||||
:host {
|
||||
--height: 1rem;
|
||||
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
|
||||
--indicator-color: rgb(var(--sl-color-primary-600));
|
||||
--label-color: rgb(var(--sl-color-neutral-0));
|
||||
--track-color: var(--sl-color-neutral-200);
|
||||
--indicator-color: var(--sl-color-primary-600);
|
||||
--label-color: var(--sl-color-neutral-0);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default class SlProgressBar extends LitElement {
|
|||
${!this.indeterminate
|
||||
? html`
|
||||
<span part="label" class="progress-bar__label">
|
||||
<slot>${this.label}</slot>
|
||||
<slot></slot>
|
||||
</span>
|
||||
`
|
||||
: ''}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default css`
|
|||
:host {
|
||||
--size: 128px;
|
||||
--track-width: 4px;
|
||||
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
|
||||
--indicator-color: rgb(var(--sl-color-primary-600));
|
||||
--track-color: var(--sl-color-neutral-200);
|
||||
--indicator-color: var(--sl-color-primary-600);
|
||||
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default css`
|
|||
}
|
||||
|
||||
.radio-group {
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
border: solid var(--sl-panel-border-width) var(--sl-panel-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: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
padding: 0 var(--sl-spacing-2x-small);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,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: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -39,9 +39,9 @@ export default css`
|
|||
justify-content: center;
|
||||
width: var(--sl-toggle-size);
|
||||
height: var(--sl-toggle-size);
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
background-color: 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;
|
||||
|
|
@ -57,35 +57,35 @@ export default css`
|
|||
|
||||
/* Hover */
|
||||
.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
|
||||
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) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.radio--checked .radio__control {
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Checked + hover */
|
||||
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
/* Checked + focus */
|
||||
.radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
border-color: var(--sl-color-primary-500);
|
||||
background-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default css`
|
|||
:host {
|
||||
--thumb-size: 20px;
|
||||
--tooltip-offset: 10px;
|
||||
--track-color-active: rgb(var(--sl-color-neutral-200));
|
||||
--track-color-inactive: rgb(var(--sl-color-neutral-200));
|
||||
--track-color-active: var(--sl-color-neutral-200);
|
||||
--track-color-inactive: var(--sl-color-neutral-200);
|
||||
--track-height: 6px;
|
||||
|
||||
display: block;
|
||||
|
|
@ -44,8 +44,8 @@ export default css`
|
|||
width: var(--thumb-size);
|
||||
height: var(--thumb-size);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border: solid var(--sl-input-border-width) var(--sl-color-primary-600);
|
||||
-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,
|
||||
|
|
@ -54,19 +54,19 @@ export default css`
|
|||
}
|
||||
|
||||
.range__control:enabled::-webkit-slider-thumb:hover {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
.range__control:enabled${focusVisibleSelector}::-webkit-slider-thumb {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.range__control:enabled::-webkit-slider-thumb:active {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
|
|
@ -94,27 +94,27 @@ export default css`
|
|||
height: var(--thumb-size);
|
||||
width: var(--thumb-size);
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
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:enabled::-moz-range-thumb:hover {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
}
|
||||
|
||||
.range__control:enabled${focusVisibleSelector}::-moz-range-thumb {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.range__control:enabled::-moz-range-thumb:active {
|
||||
background-color: rgb(var(--sl-color-primary-500));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: var(--sl-color-primary-500);
|
||||
border-color: var(--sl-color-primary-500);
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
|
|
@ -141,12 +141,12 @@ export default css`
|
|||
z-index: var(--sl-z-index-tooltip);
|
||||
left: 1px;
|
||||
border-radius: var(--sl-tooltip-border-radius);
|
||||
background-color: rgb(var(--sl-tooltip-background-color));
|
||||
background-color: 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: rgb(var(--sl-tooltip-color));
|
||||
color: var(--sl-tooltip-color);
|
||||
opacity: 0;
|
||||
padding: var(--sl-tooltip-padding);
|
||||
transition: var(--sl-transition-fast) opacity;
|
||||
|
|
@ -172,7 +172,7 @@ export default css`
|
|||
}
|
||||
|
||||
.range--tooltip-top .range__tooltip:after {
|
||||
border-top: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-top: var(--sl-tooltip-arrow-size) solid 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%;
|
||||
|
|
@ -184,7 +184,7 @@ export default css`
|
|||
}
|
||||
|
||||
.range--tooltip-bottom .range__tooltip:after {
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid 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%;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export default css`
|
|||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--symbol-color: rgb(var(--sl-color-neutral-300));
|
||||
--symbol-color-active: rgb(var(--sl-color-amber-500));
|
||||
--symbol-color: var(--sl-color-neutral-300);
|
||||
--symbol-color-active: var(--sl-color-amber-500);
|
||||
--symbol-size: 1.2rem;
|
||||
--symbol-spacing: var(--sl-spacing-3x-small);
|
||||
|
||||
|
|
|
|||
|
|
@ -36,29 +36,29 @@ export default css`
|
|||
|
||||
/* Standard selects */
|
||||
.select--standard .select__control {
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
color: var(--sl-input-color);
|
||||
}
|
||||
|
||||
.select--standard:not(.select--disabled) .select__control: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));
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
color: var(--sl-input-color-hover);
|
||||
}
|
||||
|
||||
.select--standard.select--focused:not(.select--disabled) .select__control {
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
outline: none;
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
color: var(--sl-input-color-focus);
|
||||
}
|
||||
|
||||
.select--standard.select--disabled .select__control {
|
||||
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));
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
color: var(--sl-input-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
outline: none;
|
||||
|
|
@ -67,21 +67,21 @@ export default css`
|
|||
/* Filled selects */
|
||||
.select--filled .select__control {
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
background-color: var(--sl-input-filled-background-color);
|
||||
color: var(--sl-input-color);
|
||||
}
|
||||
|
||||
.select--filled:hover:not(.select--disabled) .select__control {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
background-color: var(--sl-input-filled-background-color-hover);
|
||||
}
|
||||
|
||||
.select--filled.select--focused:not(.select--disabled) .select__control {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
background-color: var(--sl-input-filled-background-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.select--filled.select--disabled .select__control {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
background-color: var(--sl-input-filled-background-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -94,7 +94,7 @@ export default css`
|
|||
.select__prefix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
color: var(--sl-input-placeholder-color);
|
||||
}
|
||||
|
||||
.select__label {
|
||||
|
|
@ -124,7 +124,7 @@ export default css`
|
|||
.select__suffix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
color: var(--sl-input-placeholder-color);
|
||||
}
|
||||
|
||||
.select__icon {
|
||||
|
|
@ -139,11 +139,11 @@ export default css`
|
|||
|
||||
/* Placeholder */
|
||||
.select--placeholder-visible .select__label {
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
color: var(--sl-input-placeholder-color);
|
||||
}
|
||||
|
||||
.select--disabled.select--placeholder-visible .select__label {
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export default css`
|
|||
|
||||
:host {
|
||||
--border-radius: var(--sl-border-radius-pill);
|
||||
--color: rgb(var(--sl-color-neutral-200));
|
||||
--sheen-color: rgb(var(--sl-color-neutral-300));
|
||||
--color: var(--sl-color-neutral-200);
|
||||
--sheen-color: var(--sl-color-neutral-300);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export default css`
|
|||
|
||||
:host {
|
||||
--track-width: 2px;
|
||||
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
|
||||
--indicator-color: rgb(var(--sl-color-primary-600));
|
||||
--track-color: rgb(128 128 128 / 25%);
|
||||
--indicator-color: var(--sl-color-primary-600);
|
||||
--speed: 2.5s;
|
||||
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -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: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -32,8 +32,8 @@ export default css`
|
|||
justify-content: center;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
background-color: rgb(var(--sl-color-neutral-400));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-400));
|
||||
background-color: var(--sl-color-neutral-400);
|
||||
border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
|
||||
border-radius: var(--height);
|
||||
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
|
||||
}
|
||||
|
|
@ -41,9 +41,9 @@ export default css`
|
|||
.switch__control .switch__thumb {
|
||||
width: var(--thumb-size);
|
||||
height: var(--thumb-size);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-radius: 50%;
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-400));
|
||||
border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
|
||||
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;
|
||||
|
|
@ -59,66 +59,66 @@ export default css`
|
|||
|
||||
/* Hover */
|
||||
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
|
||||
background-color: rgb(var(--sl-color-neutral-400));
|
||||
border-color: rgb(var(--sl-color-neutral-400));
|
||||
background-color: var(--sl-color-neutral-400);
|
||||
border-color: var(--sl-color-neutral-400);
|
||||
}
|
||||
|
||||
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-neutral-400));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-neutral-400);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch:not(.switch--checked):not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
|
||||
background-color: rgb(var(--sl-color-neutral-400));
|
||||
border-color: rgb(var(--sl-color-neutral-400));
|
||||
background-color: var(--sl-color-neutral-400);
|
||||
border-color: var(--sl-color-neutral-400);
|
||||
}
|
||||
|
||||
.switch:not(.switch--checked):not(.switch--disabled)
|
||||
.switch__input${focusVisibleSelector}
|
||||
~ .switch__control
|
||||
.switch__thumb {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.switch--checked .switch__control {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.switch--checked .switch__control .switch__thumb {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
transform: translateX(calc((var(--width) - var(--height)) / 2));
|
||||
}
|
||||
|
||||
/* Checked + hover */
|
||||
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Checked + focus */
|
||||
.switch.switch--checked:not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
background-color: var(--sl-color-primary-600);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.switch.switch--checked:not(.switch--disabled)
|
||||
.switch__input${focusVisibleSelector}
|
||||
~ .switch__control
|
||||
.switch__thumb {
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
border-color: rgb(var(--sl-color-primary-600));
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-color: var(--sl-color-primary-600);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ export default css`
|
|||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--track-color: rgb(var(--sl-color-neutral-200));
|
||||
--indicator-color: rgb(var(--sl-color-primary-600));
|
||||
--track-color: var(--sl-color-neutral-200);
|
||||
--indicator-color: var(--sl-color-primary-600);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default css`
|
|||
font-size: var(--sl-font-size-small);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
color: var(--sl-color-neutral-600);
|
||||
padding: var(--sl-spacing-medium) var(--sl-spacing-large);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
|
@ -25,7 +25,7 @@ export default css`
|
|||
}
|
||||
|
||||
.tab:hover:not(.tab--disabled) {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.tab:focus {
|
||||
|
|
@ -33,12 +33,12 @@ export default css`
|
|||
}
|
||||
|
||||
.tab${focusVisibleSelector}:not(.tab--disabled) {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
box-shadow: inset var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.tab.tab--active:not(.tab--disabled) {
|
||||
color: rgb(var(--sl-color-primary-600));
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.tab.tab--closable {
|
||||
|
|
|
|||
|
|
@ -28,33 +28,33 @@ export default css`
|
|||
*/
|
||||
|
||||
.tag--primary {
|
||||
background-color: rgb(var(--sl-color-primary-50));
|
||||
border-color: rgb(var(--sl-color-primary-200));
|
||||
color: rgb(var(--sl-color-primary-800));
|
||||
background-color: var(--sl-color-primary-50);
|
||||
border-color: var(--sl-color-primary-200);
|
||||
color: var(--sl-color-primary-800);
|
||||
}
|
||||
|
||||
.tag--success {
|
||||
background-color: rgb(var(--sl-color-success-50));
|
||||
border-color: rgb(var(--sl-color-success-200));
|
||||
color: rgb(var(--sl-color-success-800));
|
||||
background-color: var(--sl-color-success-50);
|
||||
border-color: var(--sl-color-success-200);
|
||||
color: var(--sl-color-success-800);
|
||||
}
|
||||
|
||||
.tag--neutral {
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
border-color: rgb(var(--sl-color-neutral-200));
|
||||
color: rgb(var(--sl-color-neutral-800));
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-color: var(--sl-color-neutral-200);
|
||||
color: var(--sl-color-neutral-800);
|
||||
}
|
||||
|
||||
.tag--warning {
|
||||
background-color: rgb(var(--sl-color-warning-50));
|
||||
border-color: rgb(var(--sl-color-warning-200));
|
||||
color: rgb(var(--sl-color-warning-800));
|
||||
background-color: var(--sl-color-warning-50);
|
||||
border-color: var(--sl-color-warning-200);
|
||||
color: var(--sl-color-warning-800);
|
||||
}
|
||||
|
||||
.tag--danger {
|
||||
background-color: rgb(var(--sl-color-danger-50));
|
||||
border-color: rgb(var(--sl-color-danger-200));
|
||||
color: rgb(var(--sl-color-danger-800));
|
||||
background-color: var(--sl-color-danger-50);
|
||||
border-color: var(--sl-color-danger-200);
|
||||
color: var(--sl-color-danger-800);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -27,62 +27,62 @@ export default css`
|
|||
|
||||
/* Standard textareas */
|
||||
.textarea--standard {
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
|
||||
background-color: var(--sl-input-background-color);
|
||||
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||
}
|
||||
|
||||
.textarea--standard:hover:not(.textarea--disabled) {
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
}
|
||||
.textarea--standard:hover:not(.textarea--disabled) .textarea__control {
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
color: var(--sl-input-color-hover);
|
||||
}
|
||||
|
||||
.textarea--standard.textarea--focused:not(.textarea--disabled) {
|
||||
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) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
background-color: var(--sl-input-background-color-focus);
|
||||
border-color: var(--sl-input-border-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
color: var(--sl-input-color-focus);
|
||||
}
|
||||
|
||||
.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
color: var(--sl-input-color-focus);
|
||||
}
|
||||
|
||||
.textarea--standard.textarea--disabled {
|
||||
background-color: rgb(var(--sl-input-background-color-disabled));
|
||||
border-color: rgb(var(--sl-input-border-color-disabled));
|
||||
background-color: var(--sl-input-background-color-disabled);
|
||||
border-color: var(--sl-input-border-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.textarea--standard.textarea--disabled .textarea__control {
|
||||
color: rgb(var(--sl-input-color-disabled));
|
||||
color: var(--sl-input-color-disabled);
|
||||
}
|
||||
|
||||
.textarea--standard.textarea--disabled .textarea__control::placeholder {
|
||||
color: rgb(var(--sl-input-placeholder-color-disabled));
|
||||
color: var(--sl-input-placeholder-color-disabled);
|
||||
}
|
||||
|
||||
/* Filled textareas */
|
||||
.textarea--filled {
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
background-color: var(--sl-input-filled-background-color);
|
||||
color: var(--sl-input-color);
|
||||
}
|
||||
|
||||
.textarea--filled:hover:not(.textarea--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
background-color: var(--sl-input-filled-background-color-hover);
|
||||
}
|
||||
|
||||
.textarea--filled.textarea--focused:not(.textarea--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
background-color: var(--sl-input-filled-background-color-focus);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.textarea--filled.textarea--disabled {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
background-color: var(--sl-input-filled-background-color-disabled);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ export default css`
|
|||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4;
|
||||
color: rgb(var(--sl-input-color));
|
||||
color: var(--sl-input-color);
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -109,7 +109,7 @@ export default css`
|
|||
}
|
||||
|
||||
.textarea__control::placeholder {
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
color: 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: rgb(var(--sl-tooltip-background-color));
|
||||
background-color: 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: rgb(var(--sl-tooltip-color));
|
||||
color: 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 rgb(var(--sl-tooltip-background-color));
|
||||
border-bottom: var(--sl-tooltip-arrow-size) solid 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 rgb(var(--sl-tooltip-background-color));
|
||||
border-top: var(--sl-tooltip-arrow-size) solid 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 rgb(var(--sl-tooltip-background-color));
|
||||
border-left: var(--sl-tooltip-arrow-size) solid 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 rgb(var(--sl-tooltip-background-color));
|
||||
border-right: var(--sl-tooltip-arrow-size) solid 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: rgb(var(--sl-input-help-text-color));
|
||||
color: var(--sl-input-help-text-color);
|
||||
}
|
||||
|
||||
.form-control--has-help-text .form-control__help-text ::slotted(*) {
|
||||
|
|
|
|||
|
|
@ -7,292 +7,240 @@ export default css`
|
|||
* Color Primitives
|
||||
*/
|
||||
|
||||
/* Blue Gray */
|
||||
--sl-color-blue-gray-50: 20 26 40;
|
||||
--sl-color-blue-gray-100: 25 32 52;
|
||||
--sl-color-blue-gray-200: 34 45 63;
|
||||
--sl-color-blue-gray-300: 55 69 89;
|
||||
--sl-color-blue-gray-400: 75 89 109;
|
||||
--sl-color-blue-gray-500: 105 121 144;
|
||||
--sl-color-blue-gray-600: 153 168 189;
|
||||
--sl-color-blue-gray-700: 208 218 230;
|
||||
--sl-color-blue-gray-800: 231 237 245;
|
||||
--sl-color-blue-gray-900: 246 250 254;
|
||||
--sl-color-blue-gray-950: 253 255 255;
|
||||
|
||||
/* Cool Gray */
|
||||
--sl-color-cool-gray-50: 21 26 39;
|
||||
--sl-color-cool-gray-100: 27 33 49;
|
||||
--sl-color-cool-gray-200: 35 45 59;
|
||||
--sl-color-cool-gray-300: 59 69 85;
|
||||
--sl-color-cool-gray-400: 79 89 103;
|
||||
--sl-color-cool-gray-500: 111 119 133;
|
||||
--sl-color-cool-gray-600: 161 168 180;
|
||||
--sl-color-cool-gray-700: 214 218 224;
|
||||
--sl-color-cool-gray-800: 234 236 240;
|
||||
--sl-color-cool-gray-900: 248 249 251;
|
||||
--sl-color-cool-gray-950: 254 255 255;
|
||||
|
||||
/* Gray */
|
||||
--sl-color-gray-50: 28 28 31;
|
||||
--sl-color-gray-100: 33 33 37;
|
||||
--sl-color-gray-200: 43 43 46;
|
||||
--sl-color-gray-300: 67 67 74;
|
||||
--sl-color-gray-400: 86 86 95;
|
||||
--sl-color-gray-500: 118 118 127;
|
||||
--sl-color-gray-600: 166 166 175;
|
||||
--sl-color-gray-700: 217 217 221;
|
||||
--sl-color-gray-800: 233 233 236;
|
||||
--sl-color-gray-900: 249 249 250;
|
||||
--sl-color-gray-950: 255 255 255;
|
||||
|
||||
/* True Gray */
|
||||
--sl-color-true-gray-50: 26 26 26;
|
||||
--sl-color-true-gray-100: 32 32 32;
|
||||
--sl-color-true-gray-200: 42 42 42;
|
||||
--sl-color-true-gray-300: 68 68 68;
|
||||
--sl-color-true-gray-400: 86 86 86;
|
||||
--sl-color-true-gray-500: 120 120 120;
|
||||
--sl-color-true-gray-600: 168 168 168;
|
||||
--sl-color-true-gray-700: 217 217 217;
|
||||
--sl-color-true-gray-800: 234 234 234;
|
||||
--sl-color-true-gray-900: 250 250 250;
|
||||
--sl-color-true-gray-950: 255 255 255;
|
||||
|
||||
/* Warm Gray */
|
||||
--sl-color-warm-gray-50: 28 27 26;
|
||||
--sl-color-warm-gray-100: 38 34 32;
|
||||
--sl-color-warm-gray-200: 45 41 40;
|
||||
--sl-color-warm-gray-300: 72 68 64;
|
||||
--sl-color-warm-gray-400: 91 87 82;
|
||||
--sl-color-warm-gray-500: 125 118 112;
|
||||
--sl-color-warm-gray-600: 173 167 163;
|
||||
--sl-color-warm-gray-700: 219 216 214;
|
||||
--sl-color-warm-gray-800: 236 234 233;
|
||||
--sl-color-warm-gray-900: 250 250 249;
|
||||
--sl-color-warm-gray-950: 255 255 254;
|
||||
--sl-color-gray-50: hsl(240 5.1% 15%);
|
||||
--sl-color-gray-100: hsl(240 5.7% 18.2%);
|
||||
--sl-color-gray-200: hsl(240 4.6% 21.5%);
|
||||
--sl-color-gray-300: hsl(240 5% 27.6%);
|
||||
--sl-color-gray-400: hsl(240 5% 35.5%);
|
||||
--sl-color-gray-500: hsl(240 3.7% 44%);
|
||||
--sl-color-gray-600: hsl(240 5.3% 58%);
|
||||
--sl-color-gray-700: hsl(240 5.6% 73%);
|
||||
--sl-color-gray-800: hsl(240 7.3% 84%);
|
||||
--sl-color-gray-900: hsl(240 9.1% 91.8%);
|
||||
--sl-color-gray-950: hsl(0 0% 95%);
|
||||
|
||||
/* Red */
|
||||
--sl-color-red-50: 85 24 24;
|
||||
--sl-color-red-100: 132 34 33;
|
||||
--sl-color-red-200: 158 33 31;
|
||||
--sl-color-red-300: 191 35 32;
|
||||
--sl-color-red-400: 226 45 42;
|
||||
--sl-color-red-500: 245 74 72;
|
||||
--sl-color-red-600: 254 118 118;
|
||||
--sl-color-red-700: 255 170 170;
|
||||
--sl-color-red-800: 255 207 207;
|
||||
--sl-color-red-900: 255 231 231;
|
||||
--sl-color-red-950: 255 247 247;
|
||||
--sl-color-red-50: hsl(0 56% 23.9%);
|
||||
--sl-color-red-100: hsl(0.6 60% 33.9%);
|
||||
--sl-color-red-200: hsl(0.9 67.2% 37.1%);
|
||||
--sl-color-red-300: hsl(1.1 71.3% 43.7%);
|
||||
--sl-color-red-400: hsl(1 76% 52.5%);
|
||||
--sl-color-red-500: hsl(0.7 89.6% 57.2%);
|
||||
--sl-color-red-600: hsl(0 98.6% 67.9%);
|
||||
--sl-color-red-700: hsl(0 100% 72.3%);
|
||||
--sl-color-red-800: hsl(0 100% 85.6%);
|
||||
--sl-color-red-900: hsl(0 100% 90.3%);
|
||||
--sl-color-red-950: hsl(0 100% 95.9%);
|
||||
|
||||
/* Orange */
|
||||
--sl-color-orange-50: 87 36 19;
|
||||
--sl-color-orange-100: 129 49 22;
|
||||
--sl-color-orange-200: 159 57 22;
|
||||
--sl-color-orange-300: 200 70 18;
|
||||
--sl-color-orange-400: 240 93 19;
|
||||
--sl-color-orange-500: 255 120 28;
|
||||
--sl-color-orange-600: 255 151 65;
|
||||
--sl-color-orange-700: 255 191 121;
|
||||
--sl-color-orange-800: 255 220 175;
|
||||
--sl-color-orange-900: 255 242 218;
|
||||
--sl-color-orange-950: 255 252 242;
|
||||
--sl-color-orange-50: hsl(15 64.2% 23.3%);
|
||||
--sl-color-orange-100: hsl(15.1 70.9% 31.1%);
|
||||
--sl-color-orange-200: hsl(15.3 75.7% 35.5%);
|
||||
--sl-color-orange-300: hsl(17.1 83.5% 42.7%);
|
||||
--sl-color-orange-400: hsl(20.1 88% 50.8%);
|
||||
--sl-color-orange-500: hsl(24.3 100% 50.5%);
|
||||
--sl-color-orange-600: hsl(27.2 100% 57.7%);
|
||||
--sl-color-orange-700: hsl(31.3 100% 68.7%);
|
||||
--sl-color-orange-800: hsl(33.8 100% 79.3%);
|
||||
--sl-color-orange-900: hsl(38.9 100% 87.7%);
|
||||
--sl-color-orange-950: hsl(46.2 100% 95%);
|
||||
|
||||
/* Amber */
|
||||
--sl-color-amber-50: 79 39 16;
|
||||
--sl-color-amber-100: 125 57 19;
|
||||
--sl-color-amber-200: 151 68 19;
|
||||
--sl-color-amber-300: 186 88 16;
|
||||
--sl-color-amber-400: 223 124 15;
|
||||
--sl-color-amber-500: 251 163 21;
|
||||
--sl-color-amber-600: 255 196 43;
|
||||
--sl-color-amber-700: 255 216 82;
|
||||
--sl-color-amber-800: 255 235 143;
|
||||
--sl-color-amber-900: 255 248 204;
|
||||
--sl-color-amber-950: 255 255 240;
|
||||
--sl-color-amber-50: hsl(21.9 66.3% 21.1%);
|
||||
--sl-color-amber-100: hsl(21.5 73.6% 29.7%);
|
||||
--sl-color-amber-200: hsl(22.3 77.6% 33.3%);
|
||||
--sl-color-amber-300: hsl(25.4 84.2% 39.6%);
|
||||
--sl-color-amber-400: hsl(31.4 87.4% 46.7%);
|
||||
--sl-color-amber-500: hsl(37 96.6% 48.3%);
|
||||
--sl-color-amber-600: hsl(43.3 100% 53.4%);
|
||||
--sl-color-amber-700: hsl(46.5 100% 61.1%);
|
||||
--sl-color-amber-800: hsl(49.3 100% 73%);
|
||||
--sl-color-amber-900: hsl(51.8 100% 85%);
|
||||
--sl-color-amber-950: hsl(60 100% 94.6%);
|
||||
|
||||
/* Yellow */
|
||||
--sl-color-yellow-50: 64 42 16;
|
||||
--sl-color-yellow-100: 118 67 22;
|
||||
--sl-color-yellow-200: 138 81 19;
|
||||
--sl-color-yellow-300: 166 102 14;
|
||||
--sl-color-yellow-400: 207 143 14;
|
||||
--sl-color-yellow-500: 240 184 20;
|
||||
--sl-color-yellow-600: 255 209 30;
|
||||
--sl-color-yellow-700: 255 229 76;
|
||||
--sl-color-yellow-800: 255 245 143;
|
||||
--sl-color-yellow-900: 255 254 200;
|
||||
--sl-color-yellow-950: 255 255 237;
|
||||
--sl-color-yellow-50: hsl(32.5 60% 18.2%);
|
||||
--sl-color-yellow-100: hsl(28.1 68.6% 29%);
|
||||
--sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
|
||||
--sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
|
||||
--sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
|
||||
--sl-color-yellow-500: hsl(44.7 88% 46%);
|
||||
--sl-color-yellow-600: hsl(47.7 100% 50.9%);
|
||||
--sl-color-yellow-700: hsl(51.3 100% 59.9%);
|
||||
--sl-color-yellow-800: hsl(54.6 100% 73%);
|
||||
--sl-color-yellow-900: hsl(58.9 100% 84.2%);
|
||||
--sl-color-yellow-950: hsl(60 100% 94%);
|
||||
|
||||
/* Lime */
|
||||
--sl-color-lime-50: 42 61 18;
|
||||
--sl-color-lime-100: 58 87 24;
|
||||
--sl-color-lime-200: 68 102 23;
|
||||
--sl-color-lime-300: 82 129 21;
|
||||
--sl-color-lime-400: 106 168 22;
|
||||
--sl-color-lime-500: 137 209 31;
|
||||
--sl-color-lime-600: 168 235 59;
|
||||
--sl-color-lime-700: 195 247 105;
|
||||
--sl-color-lime-800: 222 254 162;
|
||||
--sl-color-lime-900: 241 255 208;
|
||||
--sl-color-lime-950: 252 255 236;
|
||||
--sl-color-lime-50: hsl(86.5 54.4% 18%);
|
||||
--sl-color-lime-100: hsl(87.6 56.8% 23.3%);
|
||||
--sl-color-lime-200: hsl(85.8 63.2% 24.5%);
|
||||
--sl-color-lime-300: hsl(86.1 72% 29.4%);
|
||||
--sl-color-lime-400: hsl(85.5 76.8% 37.3%);
|
||||
--sl-color-lime-500: hsl(84.3 74.2% 42.1%);
|
||||
--sl-color-lime-600: hsl(82.8 81.5% 52.6%);
|
||||
--sl-color-lime-700: hsl(82 89.9% 64%);
|
||||
--sl-color-lime-800: hsl(80.9 97.9% 76.6%);
|
||||
--sl-color-lime-900: hsl(77.9 100% 85.8%);
|
||||
--sl-color-lime-950: hsl(69.5 100% 93.8%);
|
||||
|
||||
/* Green */
|
||||
--sl-color-green-50: 16 53 31;
|
||||
--sl-color-green-100: 25 87 49;
|
||||
--sl-color-green-200: 28 106 56;
|
||||
--sl-color-green-300: 29 133 65;
|
||||
--sl-color-green-400: 32 168 78;
|
||||
--sl-color-green-500: 43 202 99;
|
||||
--sl-color-green-600: 80 227 133;
|
||||
--sl-color-green-700: 139 244 177;
|
||||
--sl-color-green-800: 192 252 213;
|
||||
--sl-color-green-900: 225 255 236;
|
||||
--sl-color-green-950: 245 255 249;
|
||||
--sl-color-green-50: hsl(144.3 53.6% 16%);
|
||||
--sl-color-green-100: hsl(143.2 55.4% 23.5%);
|
||||
--sl-color-green-200: hsl(141.5 58.2% 26.3%);
|
||||
--sl-color-green-300: hsl(140.8 64.2% 31.8%);
|
||||
--sl-color-green-400: hsl(140.3 68% 39.2%);
|
||||
--sl-color-green-500: hsl(141.1 64.9% 43%);
|
||||
--sl-color-green-600: hsl(141.6 72.4% 55.2%);
|
||||
--sl-color-green-700: hsl(141.7 82.7% 70.1%);
|
||||
--sl-color-green-800: hsl(141 90.9% 82.1%);
|
||||
--sl-color-green-900: hsl(142 100% 89.1%);
|
||||
--sl-color-green-950: hsl(144 100% 95.5%);
|
||||
|
||||
/* Emerald */
|
||||
--sl-color-emerald-50: 7 49 38;
|
||||
--sl-color-emerald-100: 13 82 63;
|
||||
--sl-color-emerald-200: 15 99 74;
|
||||
--sl-color-emerald-300: 16 125 91;
|
||||
--sl-color-emerald-400: 20 155 109;
|
||||
--sl-color-emerald-500: 29 190 134;
|
||||
--sl-color-emerald-600: 59 216 158;
|
||||
--sl-color-emerald-700: 115 236 188;
|
||||
--sl-color-emerald-800: 172 248 213;
|
||||
--sl-color-emerald-900: 214 255 234;
|
||||
--sl-color-emerald-950: 241 255 250;
|
||||
--sl-color-emerald-50: hsl(164.3 75% 13.5%);
|
||||
--sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
|
||||
--sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
|
||||
--sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
|
||||
--sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
|
||||
--sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
|
||||
--sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
|
||||
--sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
|
||||
--sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
|
||||
--sl-color-emerald-900: hsl(149.3 100% 87%);
|
||||
--sl-color-emerald-950: hsl(158.6 100% 94.8%);
|
||||
|
||||
/* Teal */
|
||||
--sl-color-teal-50: 16 50 48;
|
||||
--sl-color-teal-100: 24 82 78;
|
||||
--sl-color-teal-200: 24 98 93;
|
||||
--sl-color-teal-300: 24 123 114;
|
||||
--sl-color-teal-400: 25 153 141;
|
||||
--sl-color-teal-500: 32 189 171;
|
||||
--sl-color-teal-600: 54 217 196;
|
||||
--sl-color-teal-700: 100 239 217;
|
||||
--sl-color-teal-800: 158 251 233;
|
||||
--sl-color-teal-900: 209 255 246;
|
||||
--sl-color-teal-950: 245 255 255;
|
||||
--sl-color-teal-50: hsl(176.5 51.5% 15.4%);
|
||||
--sl-color-teal-100: hsl(175.9 54.7% 22.3%);
|
||||
--sl-color-teal-200: hsl(175.9 60.7% 23.9%);
|
||||
--sl-color-teal-300: hsl(174.5 67.3% 28.8%);
|
||||
--sl-color-teal-400: hsl(174.4 71.9% 34.9%);
|
||||
--sl-color-teal-500: hsl(173.1 71% 38.3%);
|
||||
--sl-color-teal-600: hsl(172.3 68.2% 48.1%);
|
||||
--sl-color-teal-700: hsl(170.5 81.3% 61.5%);
|
||||
--sl-color-teal-800: hsl(168.4 92.1% 75.2%);
|
||||
--sl-color-teal-900: hsl(168.3 100% 86%);
|
||||
--sl-color-teal-950: hsl(180 100% 95.5%);
|
||||
|
||||
/* Cyan */
|
||||
--sl-color-cyan-50: 21 56 70;
|
||||
--sl-color-cyan-100: 28 82 103;
|
||||
--sl-color-cyan-200: 28 98 122;
|
||||
--sl-color-cyan-300: 25 121 149;
|
||||
--sl-color-cyan-400: 24 150 183;
|
||||
--sl-color-cyan-500: 26 187 217;
|
||||
--sl-color-cyan-600: 46 216 243;
|
||||
--sl-color-cyan-700: 109 237 254;
|
||||
--sl-color-cyan-800: 170 248 255;
|
||||
--sl-color-cyan-900: 212 255 255;
|
||||
--sl-color-cyan-950: 241 255 255;
|
||||
--sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
|
||||
--sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
|
||||
--sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
|
||||
--sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
|
||||
--sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
|
||||
--sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
|
||||
--sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
|
||||
--sl-color-cyan-700: hsl(187 98.6% 66.2%);
|
||||
--sl-color-cyan-800: hsl(184.9 100% 78.3%);
|
||||
--sl-color-cyan-900: hsl(180 100% 86.6%);
|
||||
--sl-color-cyan-950: hsl(180 100% 94.8%);
|
||||
|
||||
/* Sky */
|
||||
--sl-color-sky-50: 17 54 77;
|
||||
--sl-color-sky-100: 20 78 115;
|
||||
--sl-color-sky-200: 19 93 138;
|
||||
--sl-color-sky-300: 18 109 166;
|
||||
--sl-color-sky-400: 22 137 204;
|
||||
--sl-color-sky-500: 31 170 238;
|
||||
--sl-color-sky-600: 64 194 253;
|
||||
--sl-color-sky-700: 130 216 255;
|
||||
--sl-color-sky-800: 191 235 255;
|
||||
--sl-color-sky-900: 229 247 255;
|
||||
--sl-color-sky-950: 245 254 255;
|
||||
--sl-color-sky-50: hsl(203 63.8% 20.9%);
|
||||
--sl-color-sky-100: hsl(203.4 70.4% 28%);
|
||||
--sl-color-sky-200: hsl(202.7 75.8% 30.8%);
|
||||
--sl-color-sky-300: hsl(203.1 80.4% 36.1%);
|
||||
--sl-color-sky-400: hsl(202.1 80.5% 44.3%);
|
||||
--sl-color-sky-500: hsl(199.7 85.9% 47.7%);
|
||||
--sl-color-sky-600: hsl(198.7 97.9% 57.2%);
|
||||
--sl-color-sky-700: hsl(198.7 100% 70.5%);
|
||||
--sl-color-sky-800: hsl(198.8 100% 82.5%);
|
||||
--sl-color-sky-900: hsl(198.5 100% 89.9%);
|
||||
--sl-color-sky-950: hsl(186 100% 95.5%);
|
||||
|
||||
/* Blue */
|
||||
--sl-color-blue-50: 26 37 77;
|
||||
--sl-color-blue-100: 37 62 143;
|
||||
--sl-color-blue-200: 39 68 180;
|
||||
--sl-color-blue-300: 40 82 221;
|
||||
--sl-color-blue-400: 47 103 240;
|
||||
--sl-color-blue-500: 67 135 251;
|
||||
--sl-color-blue-600: 102 170 255;
|
||||
--sl-color-blue-700: 152 202 255;
|
||||
--sl-color-blue-800: 196 224 255;
|
||||
--sl-color-blue-900: 224 239 255;
|
||||
--sl-color-blue-950: 244 251 255;
|
||||
--sl-color-blue-50: hsl(227.1 49.5% 22.7%);
|
||||
--sl-color-blue-100: hsl(225.8 58.9% 36.8%);
|
||||
--sl-color-blue-200: hsl(227.7 64.4% 42.9%);
|
||||
--sl-color-blue-300: hsl(226.1 72.7% 51.2%);
|
||||
--sl-color-blue-400: hsl(222.6 86.5% 56.3%);
|
||||
--sl-color-blue-500: hsl(217.8 95.8% 57.4%);
|
||||
--sl-color-blue-600: hsl(213.3 100% 65%);
|
||||
--sl-color-blue-700: hsl(210.9 100% 74.8%);
|
||||
--sl-color-blue-800: hsl(211.5 100% 83.4%);
|
||||
--sl-color-blue-900: hsl(211 100% 88.9%);
|
||||
--sl-color-blue-950: hsl(201.8 100% 95.3%);
|
||||
|
||||
/* Indigo */
|
||||
--sl-color-indigo-50: 40 37 88;
|
||||
--sl-color-indigo-100: 54 50 134;
|
||||
--sl-color-indigo-200: 61 52 168;
|
||||
--sl-color-indigo-300: 73 60 207;
|
||||
--sl-color-indigo-400: 85 74 234;
|
||||
--sl-color-indigo-500: 105 106 246;
|
||||
--sl-color-indigo-600: 134 145 253;
|
||||
--sl-color-indigo-700: 170 185 255;
|
||||
--sl-color-indigo-800: 204 215 255;
|
||||
--sl-color-indigo-900: 229 236 255;
|
||||
--sl-color-indigo-950: 243 247 255;
|
||||
--sl-color-indigo-50: hsl(243.5 40.8% 27%);
|
||||
--sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
|
||||
--sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
|
||||
--sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
|
||||
--sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
|
||||
--sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
|
||||
--sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
|
||||
--sl-color-indigo-700: hsl(229.4 100% 78.3%);
|
||||
--sl-color-indigo-800: hsl(227.1 100% 85%);
|
||||
--sl-color-indigo-900: hsl(223.8 100% 89.9%);
|
||||
--sl-color-indigo-950: hsl(220 100% 95.1%);
|
||||
|
||||
/* Violet */
|
||||
--sl-color-violet-50: 53 25 92;
|
||||
--sl-color-violet-100: 81 34 154;
|
||||
--sl-color-violet-200: 96 38 187;
|
||||
--sl-color-violet-300: 115 45 222;
|
||||
--sl-color-violet-400: 130 63 242;
|
||||
--sl-color-violet-500: 144 97 251;
|
||||
--sl-color-violet-600: 172 144 255;
|
||||
--sl-color-violet-700: 201 186 255;
|
||||
--sl-color-violet-800: 226 219 255;
|
||||
--sl-color-violet-900: 242 238 255;
|
||||
--sl-color-violet-950: 250 248 255;
|
||||
--sl-color-violet-50: hsl(265.1 57.3% 25.4%);
|
||||
--sl-color-violet-100: hsl(263.5 63.8% 39.4%);
|
||||
--sl-color-violet-200: hsl(263.4 66.2% 44.1%);
|
||||
--sl-color-violet-300: hsl(263.7 72.8% 52.4%);
|
||||
--sl-color-violet-400: hsl(262.5 87.3% 59.8%);
|
||||
--sl-color-violet-500: hsl(258.3 95.1% 63.2%);
|
||||
--sl-color-violet-600: hsl(255.1 100% 67.2%);
|
||||
--sl-color-violet-700: hsl(253 100% 81.5%);
|
||||
--sl-color-violet-800: hsl(251.7 100% 87.9%);
|
||||
--sl-color-violet-900: hsl(254.1 100% 91.7%);
|
||||
--sl-color-violet-950: hsl(257.1 100% 96.1%);
|
||||
|
||||
/* Purple */
|
||||
--sl-color-purple-50: 51 21 71;
|
||||
--sl-color-purple-100: 93 33 140;
|
||||
--sl-color-purple-200: 112 38 173;
|
||||
--sl-color-purple-300: 131 40 211;
|
||||
--sl-color-purple-400: 152 56 239;
|
||||
--sl-color-purple-500: 173 90 252;
|
||||
--sl-color-purple-600: 197 137 255;
|
||||
--sl-color-purple-700: 221 185 255;
|
||||
--sl-color-purple-800: 238 218 255;
|
||||
--sl-color-purple-900: 248 237 255;
|
||||
--sl-color-purple-950: 255 250 255;
|
||||
--sl-color-purple-50: hsl(276 54.3% 20.5%);
|
||||
--sl-color-purple-100: hsl(273.6 61.8% 35.4%);
|
||||
--sl-color-purple-200: hsl(272.9 64% 41.4%);
|
||||
--sl-color-purple-300: hsl(271.9 68.1% 49.2%);
|
||||
--sl-color-purple-400: hsl(271.5 85.1% 57.8%);
|
||||
--sl-color-purple-500: hsl(270.7 96.4% 62.1%);
|
||||
--sl-color-purple-600: hsl(270.5 100% 71.9%);
|
||||
--sl-color-purple-700: hsl(270.9 100% 81.3%);
|
||||
--sl-color-purple-800: hsl(272.4 100% 87.7%);
|
||||
--sl-color-purple-900: hsl(276.7 100% 91.5%);
|
||||
--sl-color-purple-950: hsl(300 100% 96.5%);
|
||||
|
||||
/* Fuchsia */
|
||||
|
||||
--sl-color-fuchsia-50: 60 20 62;
|
||||
--sl-color-fuchsia-100: 117 31 122;
|
||||
--sl-color-fuchsia-200: 139 31 148;
|
||||
--sl-color-fuchsia-300: 167 35 180;
|
||||
--sl-color-fuchsia-400: 197 45 216;
|
||||
--sl-color-fuchsia-500: 222 76 244;
|
||||
--sl-color-fuchsia-600: 237 126 254;
|
||||
--sl-color-fuchsia-700: 245 176 255;
|
||||
--sl-color-fuchsia-800: 250 213 255;
|
||||
--sl-color-fuchsia-900: 255 237 255;
|
||||
--sl-color-fuchsia-950: 255 249 255;
|
||||
--sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
|
||||
--sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
|
||||
--sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
|
||||
--sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
|
||||
--sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
|
||||
--sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
|
||||
--sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
|
||||
--sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
|
||||
--sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
|
||||
--sl-color-fuchsia-900: hsl(300 100% 91.5%);
|
||||
--sl-color-fuchsia-950: hsl(300 100% 96.3%);
|
||||
|
||||
/* Pink */
|
||||
--sl-color-pink-50: 71 18 39;
|
||||
--sl-color-pink-100: 136 30 71;
|
||||
--sl-color-pink-200: 162 30 81;
|
||||
--sl-color-pink-300: 195 32 97;
|
||||
--sl-color-pink-400: 225 46 124;
|
||||
--sl-color-pink-500: 242 78 158;
|
||||
--sl-color-pink-600: 249 119 187;
|
||||
--sl-color-pink-700: 254 173 217;
|
||||
--sl-color-pink-800: 255 212 237;
|
||||
--sl-color-pink-900: 255 236 248;
|
||||
--sl-color-pink-950: 255 247 253;
|
||||
--sl-color-pink-50: hsl(336.2 59.6% 20%);
|
||||
--sl-color-pink-100: hsl(336.8 63.9% 34%);
|
||||
--sl-color-pink-200: hsl(336.8 68.7% 37.6%);
|
||||
--sl-color-pink-300: hsl(336.1 71.8% 44.5%);
|
||||
--sl-color-pink-400: hsl(333.9 74.9% 53.1%);
|
||||
--sl-color-pink-500: hsl(330.7 86.3% 57.7%);
|
||||
--sl-color-pink-600: hsl(328.6 91.5% 67.2%);
|
||||
--sl-color-pink-700: hsl(327.4 97.6% 78.7%);
|
||||
--sl-color-pink-800: hsl(325.1 100% 86.6%);
|
||||
--sl-color-pink-900: hsl(322.1 100% 91.3%);
|
||||
--sl-color-pink-950: hsl(315 100% 95.9%);
|
||||
|
||||
/* Rose */
|
||||
--sl-color-rose-50: 79 18 36;
|
||||
--sl-color-rose-100: 141 26 59;
|
||||
--sl-color-rose-200: 164 26 61;
|
||||
--sl-color-rose-300: 196 27 64;
|
||||
--sl-color-rose-400: 231 38 76;
|
||||
--sl-color-rose-500: 250 69 98;
|
||||
--sl-color-rose-600: 255 118 138;
|
||||
--sl-color-rose-700: 255 169 180;
|
||||
--sl-color-rose-800: 255 210 216;
|
||||
--sl-color-rose-900: 255 233 235;
|
||||
--sl-color-rose-950: 255 246 247;
|
||||
--sl-color-rose-50: hsl(342.3 62.9% 21.5%);
|
||||
--sl-color-rose-100: hsl(342.8 68.9% 34.2%);
|
||||
--sl-color-rose-200: hsl(344.8 72.6% 37.3%);
|
||||
--sl-color-rose-300: hsl(346.9 75.8% 43.7%);
|
||||
--sl-color-rose-400: hsl(348.2 80.1% 52.7%);
|
||||
--sl-color-rose-500: hsl(350.4 94.8% 57.5%);
|
||||
--sl-color-rose-600: hsl(351.2 100% 58.1%);
|
||||
--sl-color-rose-700: hsl(352.3 100% 78.1%);
|
||||
--sl-color-rose-800: hsl(352 100% 86.2%);
|
||||
--sl-color-rose-900: hsl(354.5 100% 90.7%);
|
||||
--sl-color-rose-950: hsl(353.3 100% 95.7%);
|
||||
|
||||
/*
|
||||
* Theme Tokens
|
||||
|
|
@ -364,14 +312,14 @@ export default css`
|
|||
--sl-color-neutral-950: var(--sl-color-gray-950);
|
||||
|
||||
/* Neutral one-offs */
|
||||
--sl-color-neutral-0: 24 24 27;
|
||||
--sl-color-neutral-1000: 255 255 255;
|
||||
--sl-color-neutral-0: hsl(240, 5.9%, 12%);
|
||||
--sl-color-neutral-1000: hsl(0, 0%, 100%);
|
||||
|
||||
/*
|
||||
* Border radii
|
||||
*/
|
||||
|
||||
--sl-border-radius-small: 0.125rem; /* 2px */
|
||||
--sl-border-radius-small: 0.1875rem; /* 3px */
|
||||
--sl-border-radius-medium: 0.25rem; /* 4px */
|
||||
--sl-border-radius-large: 0.5rem; /* 8px */
|
||||
--sl-border-radius-x-large: 1rem; /* 16px */
|
||||
|
|
@ -383,18 +331,11 @@ export default css`
|
|||
* Elevations
|
||||
*/
|
||||
|
||||
--sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 12%);
|
||||
--sl-shadow-small: 0 1px 2px rgb(0 0 0 / 18%);
|
||||
--sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 18%);
|
||||
--sl-shadow-large: 0 2px 8px rgb(0 0 0 / 18%);
|
||||
--sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 18%);
|
||||
|
||||
/*
|
||||
* Surfaces
|
||||
*/
|
||||
|
||||
--sl-surface-base: var(--sl-color-neutral-0);
|
||||
--sl-surface-base-alt: var(--sl-color-neutral-50);
|
||||
--sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
|
||||
--sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
|
||||
--sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
|
||||
--sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
|
||||
--sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
|
||||
|
||||
/*
|
||||
* Spacings
|
||||
|
|
@ -467,10 +408,9 @@ export default css`
|
|||
*/
|
||||
|
||||
/* Focus ring */
|
||||
--sl-focus-ring-color: var(--sl-color-primary-500);
|
||||
--sl-focus-ring-alpha: 45%;
|
||||
--sl-focus-ring-width: 3px;
|
||||
--sl-focus-ring-alpha: 40%;
|
||||
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color) / var(--sl-focus-ring-alpha));
|
||||
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
|
||||
|
||||
/* Buttons */
|
||||
--sl-button-font-size-small: var(--sl-font-size-x-small);
|
||||
|
|
@ -546,14 +486,13 @@ export default css`
|
|||
* Overlays
|
||||
*/
|
||||
|
||||
--sl-overlay-background-color: 0 0 0;
|
||||
--sl-overlay-opacity: 67%;
|
||||
--sl-overlay-background-color: hsl(0 0% 0% / 43%);
|
||||
|
||||
/*
|
||||
* Panels
|
||||
*/
|
||||
|
||||
--sl-panel-background-color: var(--sl-surface-base-alt);
|
||||
--sl-panel-background-color: var(--sl-color-neutral-50);
|
||||
--sl-panel-border-color: var(--sl-color-neutral-200);
|
||||
--sl-panel-border-width: 1px;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,291 +8,239 @@ export default css`
|
|||
* Color Primitives
|
||||
*/
|
||||
|
||||
/* Blue Gray */
|
||||
--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-950: 10 16 30;
|
||||
|
||||
/* Cool Gray */
|
||||
--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-950: 12 17 29;
|
||||
|
||||
/* Gray */
|
||||
--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-950: 19 19 22;
|
||||
|
||||
/* True Gray */
|
||||
--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-950: 17 17 17;
|
||||
|
||||
/* Warm Gray */
|
||||
--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-950: 19 18 16;
|
||||
--sl-color-gray-50: hsl(0 0% 97.5%);
|
||||
--sl-color-gray-100: hsl(240 4.8% 95.9%);
|
||||
--sl-color-gray-200: hsl(240 5.9% 90%);
|
||||
--sl-color-gray-300: hsl(240 4.9% 83.9%);
|
||||
--sl-color-gray-400: hsl(240 5% 64.9%);
|
||||
--sl-color-gray-500: hsl(240 3.8% 46.1%);
|
||||
--sl-color-gray-600: hsl(240 5.2% 33.9%);
|
||||
--sl-color-gray-700: hsl(240 5.3% 26.1%);
|
||||
--sl-color-gray-800: hsl(240 3.7% 15.9%);
|
||||
--sl-color-gray-900: hsl(240 5.9% 10%);
|
||||
--sl-color-gray-950: hsl(240 7.3% 8%);
|
||||
|
||||
/* Red */
|
||||
--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-950: 80 20 20;
|
||||
--sl-color-red-50: hsl(0 85.7% 97.3%);
|
||||
--sl-color-red-100: hsl(0 93.3% 94.1%);
|
||||
--sl-color-red-200: hsl(0 96.3% 89.4%);
|
||||
--sl-color-red-300: hsl(0 93.5% 81.8%);
|
||||
--sl-color-red-400: hsl(0 90.6% 70.8%);
|
||||
--sl-color-red-500: hsl(0 84.2% 60.2%);
|
||||
--sl-color-red-600: hsl(0 72.2% 50.6%);
|
||||
--sl-color-red-700: hsl(0 73.7% 41.8%);
|
||||
--sl-color-red-800: hsl(0 70% 35.3%);
|
||||
--sl-color-red-900: hsl(0 62.8% 30.6%);
|
||||
--sl-color-red-950: hsl(0 60% 19.6%);
|
||||
|
||||
/* Orange */
|
||||
--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-950: 82 32 15;
|
||||
--sl-color-orange-50: hsl(33.3 100% 96.5%);
|
||||
--sl-color-orange-100: hsl(34.3 100% 91.8%);
|
||||
--sl-color-orange-200: hsl(32.1 97.7% 83.1%);
|
||||
--sl-color-orange-300: hsl(30.7 97.2% 72.4%);
|
||||
--sl-color-orange-400: hsl(27 96% 61%);
|
||||
--sl-color-orange-500: hsl(24.6 95% 53.1%);
|
||||
--sl-color-orange-600: hsl(20.5 90.2% 48.2%);
|
||||
--sl-color-orange-700: hsl(17.5 88.3% 40.4%);
|
||||
--sl-color-orange-800: hsl(15 79.1% 33.7%);
|
||||
--sl-color-orange-900: hsl(15.3 74.6% 27.8%);
|
||||
--sl-color-orange-950: hsl(15.2 69.1% 19%);
|
||||
|
||||
/* Amber */
|
||||
--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-950: 74 35 11;
|
||||
--sl-color-amber-50: hsl(48 100% 96.1%);
|
||||
--sl-color-amber-100: hsl(48 96.5% 88.8%);
|
||||
--sl-color-amber-200: hsl(48 96.6% 76.7%);
|
||||
--sl-color-amber-300: hsl(45.9 96.7% 64.5%);
|
||||
--sl-color-amber-400: hsl(43.3 96.4% 56.3%);
|
||||
--sl-color-amber-500: hsl(37.7 92.1% 50.2%);
|
||||
--sl-color-amber-600: hsl(32.1 94.6% 43.7%);
|
||||
--sl-color-amber-700: hsl(26 90.5% 37.1%);
|
||||
--sl-color-amber-800: hsl(22.7 82.5% 31.4%);
|
||||
--sl-color-amber-900: hsl(21.7 77.8% 26.5%);
|
||||
--sl-color-amber-950: hsl(22.9 74.1% 16.7%);
|
||||
|
||||
/* Yellow */
|
||||
--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-950: 60 38 11;
|
||||
--sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
|
||||
--sl-color-yellow-100: hsl(54.9 96.7% 88%);
|
||||
--sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
|
||||
--sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
|
||||
--sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
|
||||
--sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
|
||||
--sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
|
||||
--sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
|
||||
--sl-color-yellow-800: hsl(31.8 81% 28.8%);
|
||||
--sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
|
||||
--sl-color-yellow-950: hsl(33.1 69% 13.9%);
|
||||
|
||||
/* Lime */
|
||||
--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-950: 38 57 14;
|
||||
--sl-color-lime-50: hsl(78.3 92% 95.1%);
|
||||
--sl-color-lime-100: hsl(79.6 89.1% 89.2%);
|
||||
--sl-color-lime-200: hsl(80.9 88.5% 79.6%);
|
||||
--sl-color-lime-300: hsl(82 84.5% 67.1%);
|
||||
--sl-color-lime-400: hsl(82.7 78% 55.5%);
|
||||
--sl-color-lime-500: hsl(83.7 80.5% 44.3%);
|
||||
--sl-color-lime-600: hsl(84.8 85.2% 34.5%);
|
||||
--sl-color-lime-700: hsl(85.9 78.4% 27.3%);
|
||||
--sl-color-lime-800: hsl(86.3 69% 22.7%);
|
||||
--sl-color-lime-900: hsl(87.6 61.2% 20.2%);
|
||||
--sl-color-lime-950: hsl(86.5 60.6% 13.9%);
|
||||
|
||||
/* Green */
|
||||
--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-950: 12 49 27;
|
||||
--sl-color-green-50: hsl(138.5 76.5% 96.7%);
|
||||
--sl-color-green-100: hsl(140.6 84.2% 92.5%);
|
||||
--sl-color-green-200: hsl(141 78.9% 85.1%);
|
||||
--sl-color-green-300: hsl(141.7 76.6% 73.1%);
|
||||
--sl-color-green-400: hsl(141.9 69.2% 58%);
|
||||
--sl-color-green-500: hsl(142.1 70.6% 45.3%);
|
||||
--sl-color-green-600: hsl(142.1 76.2% 36.3%);
|
||||
--sl-color-green-700: hsl(142.4 71.8% 29.2%);
|
||||
--sl-color-green-800: hsl(142.8 64.2% 24.1%);
|
||||
--sl-color-green-900: hsl(143.8 61.2% 20.2%);
|
||||
--sl-color-green-950: hsl(144.3 60.7% 12%);
|
||||
|
||||
/* Emerald */
|
||||
--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-950: 3 45 34;
|
||||
--sl-color-emerald-50: hsl(151.8 81% 95.9%);
|
||||
--sl-color-emerald-100: hsl(149.3 80.4% 90%);
|
||||
--sl-color-emerald-200: hsl(152.4 76% 80.4%);
|
||||
--sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
|
||||
--sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
|
||||
--sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
|
||||
--sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
|
||||
--sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
|
||||
--sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
|
||||
--sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
|
||||
--sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
|
||||
|
||||
/* Teal */
|
||||
--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-950: 12 46 44;
|
||||
--sl-color-teal-50: hsl(166.2 76.5% 96.7%);
|
||||
--sl-color-teal-100: hsl(167.2 85.5% 89.2%);
|
||||
--sl-color-teal-200: hsl(168.4 83.8% 78.2%);
|
||||
--sl-color-teal-300: hsl(170.6 76.9% 64.3%);
|
||||
--sl-color-teal-400: hsl(172.5 66% 50.4%);
|
||||
--sl-color-teal-500: hsl(173.4 80.4% 40%);
|
||||
--sl-color-teal-600: hsl(174.7 83.9% 31.6%);
|
||||
--sl-color-teal-700: hsl(175.3 77.4% 26.1%);
|
||||
--sl-color-teal-800: hsl(176.1 69.4% 21.8%);
|
||||
--sl-color-teal-900: hsl(175.9 60.8% 19%);
|
||||
--sl-color-teal-950: hsl(176.5 58.6% 11.4%);
|
||||
|
||||
/* Cyan */
|
||||
--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-950: 16 52 66;
|
||||
--sl-color-cyan-50: hsl(183.2 100% 96.3%);
|
||||
--sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
|
||||
--sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
|
||||
--sl-color-cyan-300: hsl(187 92.4% 69%);
|
||||
--sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
|
||||
--sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
|
||||
--sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
|
||||
--sl-color-cyan-700: hsl(192.9 82.3% 31%);
|
||||
--sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
|
||||
--sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
|
||||
--sl-color-cyan-950: hsl(196.8 61% 16.1%);
|
||||
|
||||
/* Sky */
|
||||
--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-950: 11 50 73;
|
||||
--sl-color-sky-50: hsl(204 100% 97.1%);
|
||||
--sl-color-sky-100: hsl(204 93.8% 93.7%);
|
||||
--sl-color-sky-200: hsl(200.6 94.4% 86.1%);
|
||||
--sl-color-sky-300: hsl(199.4 95.5% 73.9%);
|
||||
--sl-color-sky-400: hsl(198.4 93.2% 59.6%);
|
||||
--sl-color-sky-500: hsl(198.6 88.7% 48.4%);
|
||||
--sl-color-sky-600: hsl(200.4 98% 39.4%);
|
||||
--sl-color-sky-700: hsl(201.3 96.3% 32.2%);
|
||||
--sl-color-sky-800: hsl(201 90% 27.5%);
|
||||
--sl-color-sky-900: hsl(202 80.3% 23.9%);
|
||||
--sl-color-sky-950: hsl(202.3 73.8% 16.5%);
|
||||
|
||||
/* Blue */
|
||||
--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-950: 21 33 73;
|
||||
--sl-color-blue-50: hsl(213.8 100% 96.9%);
|
||||
--sl-color-blue-100: hsl(214.3 94.6% 92.7%);
|
||||
--sl-color-blue-200: hsl(213.3 96.9% 87.3%);
|
||||
--sl-color-blue-300: hsl(211.7 96.4% 78.4%);
|
||||
--sl-color-blue-400: hsl(213.1 93.9% 67.8%);
|
||||
--sl-color-blue-500: hsl(217.2 91.2% 59.8%);
|
||||
--sl-color-blue-600: hsl(221.2 83.2% 53.3%);
|
||||
--sl-color-blue-700: hsl(224.3 76.3% 48%);
|
||||
--sl-color-blue-800: hsl(225.9 70.7% 40.2%);
|
||||
--sl-color-blue-900: hsl(224.4 64.3% 32.9%);
|
||||
--sl-color-blue-950: hsl(226.2 55.3% 18.4%);
|
||||
|
||||
/* Indigo */
|
||||
--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-950: 36 33 84;
|
||||
--sl-color-indigo-50: hsl(225.9 100% 96.7%);
|
||||
--sl-color-indigo-100: hsl(226.5 100% 93.9%);
|
||||
--sl-color-indigo-200: hsl(228 96.5% 88.8%);
|
||||
--sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
|
||||
--sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
|
||||
--sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
|
||||
--sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
|
||||
--sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
|
||||
--sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
|
||||
--sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
|
||||
--sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
|
||||
|
||||
/* Violet */
|
||||
--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-950: 49 21 88;
|
||||
--sl-color-violet-50: hsl(250 100% 97.6%);
|
||||
--sl-color-violet-100: hsl(251.4 91.3% 95.5%);
|
||||
--sl-color-violet-200: hsl(250.5 95.2% 91.8%);
|
||||
--sl-color-violet-300: hsl(252.5 94.7% 85.1%);
|
||||
--sl-color-violet-400: hsl(255.1 91.7% 76.3%);
|
||||
--sl-color-violet-500: hsl(258.3 89.5% 66.3%);
|
||||
--sl-color-violet-600: hsl(262.1 83.3% 57.8%);
|
||||
--sl-color-violet-700: hsl(263.4 70% 50.4%);
|
||||
--sl-color-violet-800: hsl(263.4 69.3% 42.2%);
|
||||
--sl-color-violet-900: hsl(263.5 67.4% 34.9%);
|
||||
--sl-color-violet-950: hsl(265.1 61.5% 21.4%);
|
||||
|
||||
/* Purple */
|
||||
--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-950: 47 17 67;
|
||||
--sl-color-purple-50: hsl(270 100% 98%);
|
||||
--sl-color-purple-100: hsl(268.7 100% 95.5%);
|
||||
--sl-color-purple-200: hsl(268.6 100% 91.8%);
|
||||
--sl-color-purple-300: hsl(269.2 97.4% 85.1%);
|
||||
--sl-color-purple-400: hsl(270 95.2% 75.3%);
|
||||
--sl-color-purple-500: hsl(270.7 91% 65.1%);
|
||||
--sl-color-purple-600: hsl(271.5 81.3% 55.9%);
|
||||
--sl-color-purple-700: hsl(272.1 71.7% 47.1%);
|
||||
--sl-color-purple-800: hsl(272.9 67.2% 39.4%);
|
||||
--sl-color-purple-900: hsl(273.6 65.6% 32%);
|
||||
--sl-color-purple-950: hsl(276 59.5% 16.5%);
|
||||
|
||||
/* Fuchsia */
|
||||
--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-950: 56 16 58;
|
||||
--sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
|
||||
--sl-color-fuchsia-100: hsl(287 100% 95.5%);
|
||||
--sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
|
||||
--sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
|
||||
--sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
|
||||
--sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
|
||||
--sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
|
||||
--sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
|
||||
--sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
|
||||
--sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
|
||||
--sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
|
||||
|
||||
/* Pink */
|
||||
--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-950: 67 14 35;
|
||||
--sl-color-pink-50: hsl(327.3 73.3% 97.1%);
|
||||
--sl-color-pink-100: hsl(325.7 77.8% 94.7%);
|
||||
--sl-color-pink-200: hsl(325.9 84.6% 89.8%);
|
||||
--sl-color-pink-300: hsl(327.4 87.1% 81.8%);
|
||||
--sl-color-pink-400: hsl(328.6 85.5% 70.2%);
|
||||
--sl-color-pink-500: hsl(330.4 81.2% 60.4%);
|
||||
--sl-color-pink-600: hsl(333.3 71.4% 50.6%);
|
||||
--sl-color-pink-700: hsl(335.1 77.6% 42%);
|
||||
--sl-color-pink-800: hsl(335.8 74.4% 35.3%);
|
||||
--sl-color-pink-900: hsl(335.9 69% 30.4%);
|
||||
--sl-color-pink-950: hsl(336.2 65.4% 15.9%);
|
||||
|
||||
/* Rose */
|
||||
--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-950: 74 13 32;
|
||||
--sl-color-rose-50: hsl(355.7 100% 97.3%);
|
||||
--sl-color-rose-100: hsl(355.6 100% 94.7%);
|
||||
--sl-color-rose-200: hsl(352.7 96.1% 90%);
|
||||
--sl-color-rose-300: hsl(352.6 95.7% 81.8%);
|
||||
--sl-color-rose-400: hsl(351.3 94.5% 71.4%);
|
||||
--sl-color-rose-500: hsl(349.7 89.2% 60.2%);
|
||||
--sl-color-rose-600: hsl(346.8 77.2% 49.8%);
|
||||
--sl-color-rose-700: hsl(345.3 82.7% 40.8%);
|
||||
--sl-color-rose-800: hsl(343.4 79.7% 34.7%);
|
||||
--sl-color-rose-900: hsl(341.5 75.5% 30.4%);
|
||||
--sl-color-rose-950: hsl(341.3 70.1% 17.1%);
|
||||
|
||||
/*
|
||||
* Theme Tokens
|
||||
|
|
@ -364,14 +312,14 @@ export default css`
|
|||
--sl-color-neutral-950: var(--sl-color-gray-950);
|
||||
|
||||
/* Neutral one-offs */
|
||||
--sl-color-neutral-0: 255 255 255;
|
||||
--sl-color-neutral-1000: 0 0 0;
|
||||
--sl-color-neutral-0: hsl(0, 0%, 100%);
|
||||
--sl-color-neutral-1000: hsl(0, 0%, 0%);
|
||||
|
||||
/*
|
||||
* Border radii
|
||||
*/
|
||||
|
||||
--sl-border-radius-small: 0.125rem; /* 2px */
|
||||
--sl-border-radius-small: 0.1875rem; /* 3px */
|
||||
--sl-border-radius-medium: 0.25rem; /* 4px */
|
||||
--sl-border-radius-large: 0.5rem; /* 8px */
|
||||
--sl-border-radius-x-large: 1rem; /* 16px */
|
||||
|
|
@ -383,18 +331,11 @@ export default css`
|
|||
* Elevations
|
||||
*/
|
||||
|
||||
--sl-shadow-x-small: 0 1px 2px rgb(var(--sl-color-neutral-500) / 6%);
|
||||
--sl-shadow-small: 0 1px 2px rgb(var(--sl-color-neutral-500) / 12%);
|
||||
--sl-shadow-medium: 0 2px 4px rgb(var(--sl-color-neutral-500) / 12%);
|
||||
--sl-shadow-large: 0 2px 8px rgb(var(--sl-color-neutral-500) / 12%);
|
||||
--sl-shadow-x-large: 0 4px 16px rgb(var(--sl-color-neutral-500) / 12%);
|
||||
|
||||
/*
|
||||
* Surfaces
|
||||
*/
|
||||
|
||||
--sl-surface-base: var(--sl-color-neutral-0);
|
||||
--sl-surface-base-alt: var(--sl-color-neutral-0);
|
||||
--sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
|
||||
--sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
|
||||
--sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
|
||||
--sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
|
||||
--sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
|
||||
|
||||
/*
|
||||
* Spacings
|
||||
|
|
@ -467,10 +408,9 @@ export default css`
|
|||
*/
|
||||
|
||||
/* Focus rings */
|
||||
--sl-focus-ring-color: var(--sl-color-primary-500);
|
||||
--sl-focus-ring-width: 3px;
|
||||
--sl-focus-ring-alpha: 40%;
|
||||
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color) / var(--sl-focus-ring-alpha));
|
||||
--sl-focus-ring-width: 3px;
|
||||
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
|
||||
|
||||
/* Buttons */
|
||||
--sl-button-font-size-small: var(--sl-font-size-x-small);
|
||||
|
|
@ -546,14 +486,13 @@ export default css`
|
|||
* Overlays
|
||||
*/
|
||||
|
||||
--sl-overlay-background-color: var(--sl-color-blue-gray-500);
|
||||
--sl-overlay-opacity: 33%;
|
||||
--sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
|
||||
|
||||
/*
|
||||
* Panels
|
||||
*/
|
||||
|
||||
--sl-panel-background-color: var(--sl-surface-base-alt);
|
||||
--sl-panel-background-color: var(--sl-color-neutral-0);
|
||||
--sl-panel-border-color: var(--sl-color-neutral-200);
|
||||
--sl-panel-border-width: 1px;
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue