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

Rework color tokens

pull/481/head
Cory LaViska 2020-12-22 09:40:11 -05:00
rodzic 4ebd15121e
commit fcd432d8b7
52 zmienionych plików z 712 dodań i 845 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -1,13 +1,13 @@
.code-block {
position: relative;
border-radius: 3px;
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
background: var(--sl-color-gray-50);
margin-bottom: 1.5rem;
}
.code-block__preview {
position: relative;
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
@ -39,9 +39,9 @@
bottom: 0;
width: 1.75rem;
font-size: 20px;
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
background-color: white;
border-left: solid 1px var(--sl-color-gray-90);
border-left: solid 1px var(--sl-color-gray-200);
border-top-right-radius: 3px;
cursor: ew-resize;
transition: 250ms background-color;
@ -49,9 +49,9 @@
.code-block__resizer:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)), var(--sl-focus-ring-box-shadow);
background-color: var(--sl-color-primary-95);
color: var(--sl-color-primary-50);
box-shadow: 0 0 0 1px var(--sl-color-primary-400), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
z-index: 2;
}
@ -66,7 +66,7 @@
}
.code-block__source {
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
border-bottom: none;
border-radius: 0 !important;
margin: 0;
@ -89,13 +89,13 @@
justify-content: center;
width: 100%;
height: 2.5rem;
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: var(--sl-color-white);
font: inherit;
font-size: 0.875rem;
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
cursor: pointer;
transition: 250ms background-color;
-webkit-appearance: none;
@ -103,17 +103,17 @@
.code-block__toggle:hover,
.code-block__toggle:active {
border-color: var(--sl-color-primary-80);
background-color: var(--sl-color-primary-95);
color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
.code-block__toggle:focus {
outline: none;
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-95);
color: var(--sl-color-primary-50);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.code-block__toggle svg {
@ -129,39 +129,39 @@
/* Dark theme */
.sl-theme-dark .code-block {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
background-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__preview {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__source {
border-color: var(--sl-color-gray-20);
border-color: var(--sl-color-gray-800);
}
.sl-theme-dark .code-block__resizer {
border-left-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-10);
color: var(--sl-color-gray-60);
border-left-color: var(--sl-color-gray-800);
background-color: var(--sl-color-gray-900);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-60);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle:hover,
.sl-theme-dark .code-block__toggle:active {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-60);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-400);
}
.sl-theme-dark .code-block__toggle:focus {
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-10);
color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-900);
color: var(--sl-color-primary-500);
}

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

@ -10,13 +10,13 @@
.border-radius-demo {
width: 3rem;
height: 3rem;
background: var(--sl-color-primary-50);
background: var(--sl-color-primary-500);
}
/* Transition demo */
.transition-demo {
position: relative;
background: var(--sl-color-gray-90);
background: var(--sl-color-gray-200);
width: 8rem;
height: 2rem;
}
@ -24,7 +24,7 @@
.transition-demo::after {
content: '';
position: absolute;
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
top: 0;
left: 0;
width: 0;
@ -38,13 +38,13 @@
}
.sl-theme-dark .transition-demo {
background: var(--sl-color-gray-20);
background: var(--sl-color-gray-800);
}
/* Spacing demo */
.spacing-demo {
width: 100px;
background: var(--sl-color-primary-50);
background: var(--sl-color-primary-500);
}
/* Elevation dmeo */
@ -56,5 +56,5 @@
}
.sl-theme-dark .elevation-demo {
background-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-800);
}

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

@ -1,25 +1,34 @@
/* Elevation tokens */
.sl-theme-dark {
background: var(--sl-color-gray-10);
color: var(--sl-color-gray-80);
--sl-shadow-x-small: 0 1px 0 #6b72800d;
--sl-shadow-small: 0 1px 2px #6b72801a;
--sl-shadow-medium: 0 2px 4px #6b72801a;
--sl-shadow-large: 0 2px 8px #6b72801a;
--sl-shadow-x-large: 0 4px 16px #6b72801a;
}
.sl-theme-dark {
background: var(--sl-color-gray-900);
color: var(--sl-color-gray-200);
}
/* Sidebar **/
.sl-theme-dark .sidebar {
background: var(--sl-color-gray-10);
border-right-color: var(--sl-color-gray-15);
background: var(--sl-color-gray-900);
border-right-color: var(--sl-color-gray-900);
}
.sl-theme-dark .sidebar li > p {
color: var(--sl-color-white);
border-bottom-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .sidebar-toggle {
background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%, 0.8);
background-color: var(--sl-color-gray-900);
}
.sl-theme-dark .docsify-pagination-container {
border-top-color: var(--sl-color-gray-20) !important;
border-top-color: var(--sl-color-gray-800) !important;
}
/* Search */
@ -38,7 +47,7 @@
}
.sl-theme-dark .sidebar .clear-button {
color: var(--sl-color-gray-30);
color: var(--sl-color-gray-700);
}
.sl-theme-dark .sidebar .clear-button svg circle {
@ -47,7 +56,7 @@
/* Content */
.sl-theme-dark .component-header {
border-bottom-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .anchor span {
@ -55,73 +64,78 @@
}
.sl-theme-dark .markdown-section h2 {
border-bottom-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section blockquote {
border-left-color: var(--sl-color-gray-20);
border-left-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section kbd {
border-color: var(--sl-color-gray-20);
border-color: var(--sl-color-gray-800);
}
/* Tables */
.sl-theme-dark .markdown-section tr:nth-child(2n) {
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
background: var(--sl-color-gray-950);
}
.sl-theme-dark .markdown-section td {
border-top-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-20);
border-top-color: var(--sl-color-gray-800);
border-bottom-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section table .attribute-tooltip {
border-bottom-color: var(--sl-color-gray-30);
border-bottom-color: var(--sl-color-gray-700);
}
/* Tips & warnings */
.sl-theme-dark .markdown-section p.tip,
.sl-theme-dark .markdown-section p.warn {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%)
background-color: var(--sl-color-gray-950)
}
.sl-theme-dark .markdown-section p.tip::before,
.sl-theme-dark .markdown-section p.warn::before {
color: var(--sl-color-gray-10);
color: var(--sl-color-gray-900);
}
.sl-theme-dark .markdown-section p.tip code,
.sl-theme-dark .markdown-section p.warn code {
background-color: var(--sl-color-gray-15);
background-color: var(--sl-color-gray-800);
}
/* Code */
.sl-theme-dark .markdown-section code {
background: var(--sl-color-gray-950);
}
/* Code blocks */
.sl-theme-dark .markdown-section pre,
.sl-theme-dark .code-block__source {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
background-color: var(--sl-color-gray-800);
}
.sl-theme-dark .markdown-section pre > code {
color: var(--sl-color-gray-80);
color: var(--sl-color-gray-200);
}
.sl-theme-dark .markdown-section pre .token.comment {
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
}
.sl-theme-dark .markdown-section pre .token.prolog,
.sl-theme-dark .markdown-section pre .token.doctype,
.sl-theme-dark .markdown-section pre .token.cdata,
.sl-theme-dark .markdown-section pre .token.operator {
color: var(--sl-color-gray-70);
color: var(--sl-color-gray-300);
}
.sl-theme-dark .markdown-section pre .token.property,
.sl-theme-dark .markdown-section pre .token.keyword,
.sl-theme-dark .markdown-section pre .token.tag,
.sl-theme-dark .markdown-section pre .token.url {
color: var(--sl-color-primary-65);
color: var(--sl-color-primary-400);
}
.sl-theme-dark .markdown-section pre .token.symbol,
@ -137,7 +151,7 @@
.sl-theme-dark .markdown-section pre .token.char,
.sl-theme-dark .markdown-section pre .token.builtin,
.sl-theme-dark .markdown-section pre .token.inserted {
color: var(--sl-color-success-60);
color: var(--sl-color-success-400);
}
.sl-theme-dark .markdown-section pre .token.atrule,
@ -162,9 +176,9 @@
/* Repo buttons */
.sl-theme-dark .repo-button {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-25);
color: var(--sl-color-gray-80);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-200);
}
.sl-theme-dark .repo-button--github sl-icon {
@ -172,11 +186,11 @@
}
.sl-theme-dark .repo-button:hover {
background-color: var(--sl-color-gray-15);
border: solid 1px var(--sl-color-gray-30);
background-color: var(--sl-color-gray-900);
border: solid 1px var(--sl-color-gray-700);
}
.sl-theme-dark .repo-button:focus {
border-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
}

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

@ -11,12 +11,12 @@ body {
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
letter-spacing: var(--sl-letter-spacing-normal);
color: var(--sl-color-gray-25);
color: var(--sl-color-gray-800);
line-height: var(--sl-line-height-normal);
}
a {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
strong {
@ -26,7 +26,7 @@ strong {
/* Sidebar */
.sidebar {
background: var(--sl-color-white);
border-right: solid 1px var(--sl-color-gray-95);
border-right: solid 1px var(--sl-color-gray-200);
}
.sidebar .app-name {
@ -37,7 +37,7 @@ strong {
.sidebar-version {
font-size: var(--sl-font-size-x-small);
font-weight: var(--sl-font-weight-normal);
color: var(--sl-color-gray-60);
color: var(--sl-color-gray-400);
text-align: right;
padding: 0 var(--sl-spacing-small);
margin: -1.25rem 0 .6rem 0;
@ -68,7 +68,7 @@ strong {
}
.sidebar .search input[type='search']:focus {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
border-color: var(--sl-input-border-color-focus);
outline: none;
}
@ -100,7 +100,7 @@ strong {
}
.search .matching-post {
border-bottom: solid 1px var(--sl-color-gray-95) !important;
border-bottom: solid 1px var(--sl-color-gray-500) !important;
padding: .25rem 1.5rem;
}
@ -125,12 +125,13 @@ strong {
width: 2rem;
height: 2rem;
border-radius: var(--sl-border-radius-medium);
background-color: var(--sl-color-white);
padding: .5rem;
}
.sidebar-toggle:focus {
outline: none;
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.sidebar-toggle span:last-child {
@ -165,12 +166,12 @@ strong {
.sidebar-nav li.collapse > a,
.sidebar-nav li.active > a {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
.sidebar li > p {
font-weight: var(--sl-font-weight-bold);
border-bottom: solid 1px var(--sl-color-gray-90);
border-bottom: solid 1px var(--sl-color-gray-200);
margin: 0 .75rem .5rem 0;
}
@ -253,7 +254,7 @@ strong {
.markdown-section blockquote {
position: relative;
border-left: solid 4px var(--sl-color-gray-90);
border-left: solid 4px var(--sl-color-gray-200);
font-style: italic;
padding: 1rem 1.5rem;
margin: 0 0 1rem 0;
@ -273,7 +274,7 @@ strong {
}
.docsify-pagination-container {
border-top-color: var(--sl-color-gray-90) !important;
border-top-color: var(--sl-color-gray-200) !important;
}
.markdown-section h1,
@ -292,7 +293,7 @@ strong {
.markdown-section h2 {
font-size: var(--sl-font-size-x-large);
border-bottom: solid 1px var(--sl-color-gray-90);
border-bottom: solid 1px var(--sl-color-gray-200);
margin-top: 2rem;
}
@ -323,7 +324,7 @@ strong {
.markdown-section code {
font-family: var(--sl-font-mono);
font-size: 87.5%;
background: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%, .05);
background: var(--sl-color-gray-50);
border-radius: var(--sl-border-radius-small);
padding: 2px 4px;
}
@ -332,14 +333,14 @@ strong {
font-family: var(--sl-font-mono);
font-size: 87.5%;
border-radius: var(--sl-border-radius-small);
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
padding: 2px 4px;
}
/* Code blocks */
.markdown-section pre {
position: relative;
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
background: var(--sl-color-gray-50);
border-radius: var(--sl-border-radius-medium);
}
@ -347,7 +348,7 @@ strong {
display: block;
background: none;
border-radius: 0;
color: var(--sl-color-gray-30);
color: var(--sl-color-gray-700);
padding: var(--sl-spacing-medium);
overflow: auto;
hyphens: none;
@ -355,18 +356,18 @@ strong {
}
.markdown-section pre .token.comment {
color: var(--sl-color-gray-70);
color: var(--sl-color-gray-400);
}
.markdown-section pre .token.prolog,
.markdown-section pre .token.doctype,
.markdown-section pre .token.cdata,
.markdown-section pre .token.operator {
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
}
.markdown-section pre .token.punctuation {
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
}
.namespace {
@ -377,7 +378,7 @@ strong {
.markdown-section pre .token.keyword,
.markdown-section pre .token.tag,
.markdown-section pre .token.url {
color: var(--sl-color-primary-45);
color: var(--sl-color-primary-500);
}
.markdown-section pre .token.symbol,
@ -393,7 +394,7 @@ strong {
.markdown-section pre .token.char,
.markdown-section pre .token.builtin,
.markdown-section pre .token.inserted {
color: var(--sl-color-success-40);
color: var(--sl-color-success-600);
}
.markdown-section pre .token.atrule,
@ -435,7 +436,7 @@ strong {
}
.markdown-section tr:nth-child(2n) {
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
background: var(--sl-color-gray-50);
}
.markdown-section th {
@ -445,8 +446,8 @@ strong {
}
.markdown-section td {
border-top: solid 1px var(--sl-color-gray-90);
border-bottom: solid 1px var(--sl-color-gray-90);
border-top: solid 1px var(--sl-color-gray-200);
border-bottom: solid 1px var(--sl-color-gray-200);
border-left: none;
border-right: none;
}
@ -457,15 +458,20 @@ strong {
.markdown-section table .attribute-tooltip {
background: none;
border-bottom: dashed 1px var(--sl-color-gray-80);
border-bottom: dashed 1px var(--sl-color-gray-200);
cursor: help;
}
/* Iframes */
.markdown-section iframe {
border: none;
}
/* Tips & Warnings */
.markdown-section p.tip,
.markdown-section p.warn {
position: relative;
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
background: var(--sl-color-gray-50);
border-left: solid 4px transparent;
border-radius: var(--sl-border-radius-medium);
padding-left: 1.5rem;
@ -488,29 +494,29 @@ strong {
}
.markdown-section p.warn {
border-left-color: var(--sl-color-primary-50);
border-left-color: var(--sl-color-primary-500);
}
.markdown-section p.warn:before {
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
}
.markdown-section p.tip {
border-left-color: var(--sl-color-danger-50);
border-left-color: var(--sl-color-danger-500);
}
.markdown-section p.tip:before {
background-color: var(--sl-color-danger-50);
background-color: var(--sl-color-danger-500);
}
.markdown-section p.tip code,
.markdown-section p.warn code {
background-color: var(--sl-color-gray-95);
background-color: var(--sl-color-gray-100);
}
/* Component headers */
.component-header {
border-bottom: solid 1px var(--sl-color-gray-90);
border-bottom: solid 1px var(--sl-color-gray-200);
padding-bottom: 2rem;
margin-top: -1rem;
margin-bottom: 2rem;
@ -524,7 +530,7 @@ strong {
.component-header__tag code {
background: none;
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
font-size: var(--sl-font-size-large);
padding: 0;
margin: 0;
@ -552,13 +558,13 @@ html .repo-button {
display: inline-block;
vertical-align: middle;
background-color: var(--sl-color-white);
border: solid 1px var(--sl-color-gray-85);
border: solid 1px var(--sl-color-gray-200);
border-radius: var(--sl-border-radius-medium);
box-shadow: var(--sl-shadow-x-small);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
text-decoration: none;
color: var(--sl-color-gray-30);
color: var(--sl-color-gray-700);
padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
margin-bottom: var(--sl-spacing-xx-small);
transition: 0.25s all;
@ -566,14 +572,14 @@ html .repo-button {
html .repo-button:hover {
text-decoration: none;
background-color: var(--sl-color-gray-95);
border: solid 1px var(--sl-color-gray-80);
background-color: var(--sl-color-gray-50);
border: solid 1px var(--sl-color-gray-200);
}
html .repo-button:focus {
outline: none;
border-color: var(--sl-color-primary-50);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-500);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
html .repo-button:not(:last-of-type) {

8
docs/components/animation.md
Wyświetl plik

@ -19,7 +19,7 @@ To animate an element, wrap it in `<sl-animation>` and set a `name` and `duratio
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
margin: 1.5rem;
}
</style>
@ -83,7 +83,7 @@ This example demonstrates all of the baked-in animations and easings. All animat
.animation-sandbox .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
}
.animation-sandbox .controls {
@ -130,7 +130,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
}
</style>
```
@ -160,7 +160,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
}
</style>
```

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

@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
}
.card-overview small {
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
}
.card-overview [slot="footer"] {

2
docs/components/color-picker.md
Wyświetl plik

@ -22,7 +22,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
To prevent users from toggling the format themselves, add the `no-toggle` attribute.
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
```html preview
<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>

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

@ -62,7 +62,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
```html preview
<sl-dialog label="Dialog" class="dialog-scrolling">
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-80); padding: 0 1rem;">
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>

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

@ -158,7 +158,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
```html preview
<sl-drawer label="Drawer" class="drawer-scrolling">
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-80); padding: 0 1rem;">
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>

12
docs/components/form.md
Wyświetl plik

@ -181,21 +181,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: var(--sl-color-danger-40);
color: var(--sl-color-danger-600);
}
.custom-input[invalid]:not([disabled])::part(base) {
border-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-500);
}
.custom-input[invalid] {
--focus-ring: 0 0 0 var(--sl-focus-ring-width)
hsla(
var(--sl-color-danger-hue),
var(--sl-color-danger-saturation),
var(--sl-focus-ring-lightness),
var(--sl-focus-ring-alpha)
);
--focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
}
</style>
```

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

@ -180,12 +180,12 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
}
.icon-list-item:hover {
background-color: var(--sl-color-primary-95);
color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
.sl-theme-dark .icon-list-item:hover {
background-color: var(--sl-color-primary-15);
background-color: var(--sl-color-primary-900);
}
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {

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

@ -30,7 +30,7 @@ The width of the spinner can be changed by setting the `--stroke-width` custom p
### Color
The spinner's color can be changed by setting the `--indicator-color` custom property.
The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
```html preview
<sl-spinner style="font-size: 2rem; --indicator-color: tomato;"></sl-spinner>

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

@ -33,7 +33,7 @@ Use the `disabled` attribute to disable the switch.
Use the available custom properties to make the switch a different size.
```html preview
<sl-switch style="--width: 80px; --height: 30px; --thumb-size: 26px;"></sl-switch>
<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
```
[component-metadata:sl-switch]

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

@ -29,7 +29,7 @@ To use the official dark theme, include its stylesheet per the instructions on t
<sl-theme name="dark">
<!-- Design tokens used inside <sl-theme> will reflect the theme's colors -->
<div style="background-color: var(--sl-color-gray-10); padding: var(--sl-spacing-xx-large);">
<div style="background-color: var(--sl-color-gray-900); padding: var(--sl-spacing-xx-large);">
<!-- These are just some sample components to demonstrate -->
<sl-dropdown>
<sl-button slot="trigger" caret>Dropdown</sl-button>

10
docs/getting-started/changelog.md
Wyświetl plik

@ -8,6 +8,13 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
- 🚨 BREAKING CHANGE: Reworked color tokens
- Theme colors are now inspired by Tailwind's professionally-designed color palette
- Color token variations now range from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
- Color token variations were inverted, e.g. 50 is lightest and 950 is darkest
- All component styles were adapted to use the new color tokens, but visual changes are subtle
- The dark theme was adapted use the new color tokens
- HSL is no longer used because it is not perceptually uniform (this may be revisited when all browsers support [LCH colors](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/))
- 🚨 BREAKING CHANGE: Refactored `sl-select` to improve accessibility [#216](https://github.com/shoelace-style/shoelace/issues/216)
- Removed the internal `sl-input` because it was causing problems with a11y and virtual keyboards
- Removed `input`, `prefix` and `suffix` parts
@ -17,7 +24,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
- Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
- Fixed a bug where disabled link buttons didn't appear disabled
- Improved elevation tokens in dark theme
- Removed `sl-blur` and `sl-focus` events from `sl-menu` since menus can't have focus as of 2.0.0-beta.22
- Updated `sl-spinner` so the indicator is more obvious
- Updated to Bootstrap Icons 1.2.1
## 2.0.0-beta.24

10
docs/getting-started/community.md
Wyświetl plik

@ -18,6 +18,16 @@ Please be respectful of other users and remember that Shoelace is an open source
Join the Chat
</sl-button>
## Stack Overflow
If you have a specific problem to solve, Stack Overflow is a great place to get feedback from other developers. For best results, try to generalize your question and avoid bloating it with unnecessary or unrelated code.
<sl-button type="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
Ask a Question
</sl-button>
## Twitter
Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.

14
docs/getting-started/customizing.md
Wyświetl plik

@ -14,9 +14,17 @@ To customize a design token, simply override it in your stylesheet using a `:roo
```css
:root {
/* Changes the primary color to a shade of orange at 90% saturation */
--sl-color-primary-hue: 30;
--sl-color-primary-saturation: 90%;
/* Changes the primary color palette to purple */
--sl-color-primary-50: #faf5ff;
--sl-color-primary-100: #f3e8ff;
--sl-color-primary-200: #e9d5ff;
--sl-color-primary-300: #d8b4fe;
--sl-color-primary-400: #c084fc;
--sl-color-primary-500: #a855f7;
--sl-color-primary-600: #9333ea;
--sl-color-primary-700: #7e22ce;
--sl-color-primary-800: #6b21a8;
--sl-color-primary-900: #581c87;
}
```

4
docs/getting-started/overview.md
Wyświetl plik

@ -116,9 +116,9 @@ Special thanks to the following projects and individuals that helped make Shoela
- Components are compiled by [Stencil](https://stenciljs.com/)
- Documentation is powered by [Docsify](https://docsify.js.org/)
- CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
- Theme colors and form controls are inspired by [Element](https://element.eleme.io/)
- The default theme is based on color palettes from [Tailwind](https://tailwindcss.com/)
- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
- Illustrations are courtesy of [unDraw](https://undraw.co/)
- 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/)
- The animation component was inspired by [animatable-component](https://github.com/proyecto26/animatable-component)
- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)

10
docs/getting-started/themes.md
Wyświetl plik

@ -12,7 +12,7 @@ To install the dark theme, add the following to the `<head>` section of your app
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/themes/dark.css">
```
**Themes must be activated after importing!** You can do this with the [`<sl-theme>`](/components/theme.md) component. Only the contents of `<sl-theme>` will inherit the theme's styles.
**Themes must be activated after importing!** You can do this with the [`<sl-theme>`](/components/theme.md) component. Only the elements inside of `<sl-theme>` will inherit the theme's styles.
```html
<sl-button>Light Mode</sl-button>
@ -52,10 +52,10 @@ Every selector in a theme must be scoped to the theme's class to ensure interope
```css
.sl-theme-purple-power {
--sl-color-primary-hue: 290;
--sl-color-primary-saturation: 80%;
/* more design token customizations here */
--sl-color-primary-50: #faf5ff;
--sl-color-primary-100: #f3e8ff;
--sl-color-primary-200: #e9d5ff;
/* ... */
}
```

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

@ -4,173 +4,122 @@ Color tokens are used to maintain consistent color use throughout your app.
## Theme Colors
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% or 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead.
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
To customize a theme color, change its respective hue, saturation, and text tokens. Possible theme colors include `primary`, `gray`, `success`, `info`, `warning`, and `danger`.
This will make all colors in the primary color palette various shades of purple.
```css
:root {
--sl-color-primary-hue: 290;
--sl-color-primary-saturation: 87%;
--sl-color-primary-text: var(--sl-color-white);
/* Changes the primary color palette to purple */
--sl-color-primary-50: #faf5ff;
--sl-color-primary-100: #f3e8ff;
--sl-color-primary-200: #e9d5ff;
--sl-color-primary-300: #d8b4fe;
--sl-color-primary-400: #c084fc;
--sl-color-primary-500: #a855f7;
--sl-color-primary-600: #9333ea;
--sl-color-primary-700: #7e22ce;
--sl-color-primary-800: #6b21a8;
--sl-color-primary-900: #581c87;
}
```
You can update these values on the client and the changes will reflect instantly. To update the primary color using JavaScript, try this.
```js
document.documentElement.style.setProperty('--sl-color-primary-hue', '290');
document.documentElement.style.setProperty('--sl-color-primary-saturation', '87%');
```
?> Although CSS lets you override custom properties on specific elements, these values _must_ be scoped to the `:root` block for the entire palette to be recalculated. [See this page for details.](https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop)
## Primary
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-primary-5` | <div class="color-demo" style="background-color: var(--sl-color-primary-5);"></div> |
| `--sl-color-primary-10` | <div class="color-demo" style="background-color: var(--sl-color-primary-10);"></div> |
| `--sl-color-primary-15` | <div class="color-demo" style="background-color: var(--sl-color-primary-15);"></div> |
| `--sl-color-primary-20` | <div class="color-demo" style="background-color: var(--sl-color-primary-20);"></div> |
| `--sl-color-primary-25` | <div class="color-demo" style="background-color: var(--sl-color-primary-25);"></div> |
| `--sl-color-primary-30` | <div class="color-demo" style="background-color: var(--sl-color-primary-30);"></div> |
| `--sl-color-primary-35` | <div class="color-demo" style="background-color: var(--sl-color-primary-35);"></div> |
| `--sl-color-primary-40` | <div class="color-demo" style="background-color: var(--sl-color-primary-40);"></div> |
| `--sl-color-primary-45` | <div class="color-demo" style="background-color: var(--sl-color-primary-45);"></div> |
| `--sl-color-primary-50` | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div> |
| `--sl-color-primary-55` | <div class="color-demo" style="background-color: var(--sl-color-primary-55);"></div> |
| `--sl-color-primary-60` | <div class="color-demo" style="background-color: var(--sl-color-primary-60);"></div> |
| `--sl-color-primary-65` | <div class="color-demo" style="background-color: var(--sl-color-primary-65);"></div> |
| `--sl-color-primary-70` | <div class="color-demo" style="background-color: var(--sl-color-primary-70);"></div> |
| `--sl-color-primary-75` | <div class="color-demo" style="background-color: var(--sl-color-primary-75);"></div> |
| `--sl-color-primary-80` | <div class="color-demo" style="background-color: var(--sl-color-primary-80);"></div> |
| `--sl-color-primary-85` | <div class="color-demo" style="background-color: var(--sl-color-primary-85);"></div> |
| `--sl-color-primary-90` | <div class="color-demo" style="background-color: var(--sl-color-primary-90);"></div> |
| `--sl-color-primary-95` | <div class="color-demo" style="background-color: var(--sl-color-primary-95);"></div> |
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-primary-50` | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div> |
| `--sl-color-primary-100` | <div class="color-demo" style="background-color: var(--sl-color-primary-100);"></div> |
| `--sl-color-primary-200` | <div class="color-demo" style="background-color: var(--sl-color-primary-200);"></div> |
| `--sl-color-primary-300` | <div class="color-demo" style="background-color: var(--sl-color-primary-300);"></div> |
| `--sl-color-primary-400` | <div class="color-demo" style="background-color: var(--sl-color-primary-400);"></div> |
| `--sl-color-primary-500` | <div class="color-demo" style="background-color: var(--sl-color-primary-500);"></div> |
| `--sl-color-primary-600` | <div class="color-demo" style="background-color: var(--sl-color-primary-600);"></div> |
| `--sl-color-primary-700` | <div class="color-demo" style="background-color: var(--sl-color-primary-700);"></div> |
| `--sl-color-primary-800` | <div class="color-demo" style="background-color: var(--sl-color-primary-800);"></div> |
| `--sl-color-primary-900` | <div class="color-demo" style="background-color: var(--sl-color-primary-900);"></div> |
| `--sl-color-primary-950` | <div class="color-demo" style="background-color: var(--sl-color-primary-950);"></div> |
## Gray
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div> |
| `--sl-color-gray-5` | <div class="color-demo" style="background-color: var(--sl-color-gray-5);"></div> |
| `--sl-color-gray-10` | <div class="color-demo" style="background-color: var(--sl-color-gray-10);"></div> |
| `--sl-color-gray-15` | <div class="color-demo" style="background-color: var(--sl-color-gray-15);"></div> |
| `--sl-color-gray-20` | <div class="color-demo" style="background-color: var(--sl-color-gray-20);"></div> |
| `--sl-color-gray-25` | <div class="color-demo" style="background-color: var(--sl-color-gray-25);"></div> |
| `--sl-color-gray-30` | <div class="color-demo" style="background-color: var(--sl-color-gray-30);"></div> |
| `--sl-color-gray-35` | <div class="color-demo" style="background-color: var(--sl-color-gray-35);"></div> |
| `--sl-color-gray-40` | <div class="color-demo" style="background-color: var(--sl-color-gray-40);"></div> |
| `--sl-color-gray-45` | <div class="color-demo" style="background-color: var(--sl-color-gray-45);"></div> |
| `--sl-color-gray-50` | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div> |
| `--sl-color-gray-55` | <div class="color-demo" style="background-color: var(--sl-color-gray-55);"></div> |
| `--sl-color-gray-60` | <div class="color-demo" style="background-color: var(--sl-color-gray-60);"></div> |
| `--sl-color-gray-65` | <div class="color-demo" style="background-color: var(--sl-color-gray-65);"></div> |
| `--sl-color-gray-70` | <div class="color-demo" style="background-color: var(--sl-color-gray-70);"></div> |
| `--sl-color-gray-75` | <div class="color-demo" style="background-color: var(--sl-color-gray-75);"></div> |
| `--sl-color-gray-80` | <div class="color-demo" style="background-color: var(--sl-color-gray-80);"></div> |
| `--sl-color-gray-85` | <div class="color-demo" style="background-color: var(--sl-color-gray-85);"></div> |
| `--sl-color-gray-90` | <div class="color-demo" style="background-color: var(--sl-color-gray-90);"></div> |
| `--sl-color-gray-95` | <div class="color-demo" style="background-color: var(--sl-color-gray-95);"></div> |
| `--sl-color-white` | <div class="color-demo" style="background-color: var(--sl-color-white);"></div> |
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-white` | <div class="color-demo" style="background-color: var(--sl-color-white);"></div> |
| `--sl-color-gray-50` | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div> |
| `--sl-color-gray-100` | <div class="color-demo" style="background-color: var(--sl-color-gray-100);"></div> |
| `--sl-color-gray-200` | <div class="color-demo" style="background-color: var(--sl-color-gray-200);"></div> |
| `--sl-color-gray-300` | <div class="color-demo" style="background-color: var(--sl-color-gray-300);"></div> |
| `--sl-color-gray-400` | <div class="color-demo" style="background-color: var(--sl-color-gray-400);"></div> |
| `--sl-color-gray-500` | <div class="color-demo" style="background-color: var(--sl-color-gray-500);"></div> |
| `--sl-color-gray-600` | <div class="color-demo" style="background-color: var(--sl-color-gray-600);"></div> |
| `--sl-color-gray-700` | <div class="color-demo" style="background-color: var(--sl-color-gray-700);"></div> |
| `--sl-color-gray-800` | <div class="color-demo" style="background-color: var(--sl-color-gray-800);"></div> |
| `--sl-color-gray-900` | <div class="color-demo" style="background-color: var(--sl-color-gray-900);"></div> |
| `--sl-color-gray-950` | <div class="color-demo" style="background-color: var(--sl-color-gray-950);"></div> |
| `--sl-color-black` | <div class="color-demo" style="background-color: var(--sl-color-black);"></div> |
## Success
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-success-5` | <div class="color-demo" style="background-color: var(--sl-color-success-5);"></div> |
| `--sl-color-success-10` | <div class="color-demo" style="background-color: var(--sl-color-success-10);"></div> |
| `--sl-color-success-15` | <div class="color-demo" style="background-color: var(--sl-color-success-15);"></div> |
| `--sl-color-success-20` | <div class="color-demo" style="background-color: var(--sl-color-success-20);"></div> |
| `--sl-color-success-25` | <div class="color-demo" style="background-color: var(--sl-color-success-25);"></div> |
| `--sl-color-success-30` | <div class="color-demo" style="background-color: var(--sl-color-success-30);"></div> |
| `--sl-color-success-35` | <div class="color-demo" style="background-color: var(--sl-color-success-35);"></div> |
| `--sl-color-success-40` | <div class="color-demo" style="background-color: var(--sl-color-success-40);"></div> |
| `--sl-color-success-45` | <div class="color-demo" style="background-color: var(--sl-color-success-45);"></div> |
| `--sl-color-success-50` | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div> |
| `--sl-color-success-55` | <div class="color-demo" style="background-color: var(--sl-color-success-55);"></div> |
| `--sl-color-success-60` | <div class="color-demo" style="background-color: var(--sl-color-success-60);"></div> |
| `--sl-color-success-65` | <div class="color-demo" style="background-color: var(--sl-color-success-65);"></div> |
| `--sl-color-success-70` | <div class="color-demo" style="background-color: var(--sl-color-success-70);"></div> |
| `--sl-color-success-75` | <div class="color-demo" style="background-color: var(--sl-color-success-75);"></div> |
| `--sl-color-success-80` | <div class="color-demo" style="background-color: var(--sl-color-success-80);"></div> |
| `--sl-color-success-85` | <div class="color-demo" style="background-color: var(--sl-color-success-85);"></div> |
| `--sl-color-success-90` | <div class="color-demo" style="background-color: var(--sl-color-success-90);"></div> |
| `--sl-color-success-95` | <div class="color-demo" style="background-color: var(--sl-color-success-95);"></div> |
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-success-50` | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div> |
| `--sl-color-success-100` | <div class="color-demo" style="background-color: var(--sl-color-success-100);"></div> |
| `--sl-color-success-200` | <div class="color-demo" style="background-color: var(--sl-color-success-200);"></div> |
| `--sl-color-success-300` | <div class="color-demo" style="background-color: var(--sl-color-success-300);"></div> |
| `--sl-color-success-400` | <div class="color-demo" style="background-color: var(--sl-color-success-400);"></div> |
| `--sl-color-success-500` | <div class="color-demo" style="background-color: var(--sl-color-success-500);"></div> |
| `--sl-color-success-600` | <div class="color-demo" style="background-color: var(--sl-color-success-600);"></div> |
| `--sl-color-success-700` | <div class="color-demo" style="background-color: var(--sl-color-success-700);"></div> |
| `--sl-color-success-800` | <div class="color-demo" style="background-color: var(--sl-color-success-800);"></div> |
| `--sl-color-success-900` | <div class="color-demo" style="background-color: var(--sl-color-success-900);"></div> |
| `--sl-color-success-950` | <div class="color-demo" style="background-color: var(--sl-color-success-950);"></div> |
## Info
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-info-5` | <div class="color-demo" style="background-color: var(--sl-color-info-5);"></div> |
| `--sl-color-info-10` | <div class="color-demo" style="background-color: var(--sl-color-info-10);"></div> |
| `--sl-color-info-15` | <div class="color-demo" style="background-color: var(--sl-color-info-15);"></div> |
| `--sl-color-info-20` | <div class="color-demo" style="background-color: var(--sl-color-info-20);"></div> |
| `--sl-color-info-25` | <div class="color-demo" style="background-color: var(--sl-color-info-25);"></div> |
| `--sl-color-info-30` | <div class="color-demo" style="background-color: var(--sl-color-info-30);"></div> |
| `--sl-color-info-35` | <div class="color-demo" style="background-color: var(--sl-color-info-35);"></div> |
| `--sl-color-info-40` | <div class="color-demo" style="background-color: var(--sl-color-info-40);"></div> |
| `--sl-color-info-45` | <div class="color-demo" style="background-color: var(--sl-color-info-45);"></div> |
| `--sl-color-info-50` | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div> |
| `--sl-color-info-55` | <div class="color-demo" style="background-color: var(--sl-color-info-55);"></div> |
| `--sl-color-info-60` | <div class="color-demo" style="background-color: var(--sl-color-info-60);"></div> |
| `--sl-color-info-65` | <div class="color-demo" style="background-color: var(--sl-color-info-65);"></div> |
| `--sl-color-info-70` | <div class="color-demo" style="background-color: var(--sl-color-info-70);"></div> |
| `--sl-color-info-75` | <div class="color-demo" style="background-color: var(--sl-color-info-75);"></div> |
| `--sl-color-info-80` | <div class="color-demo" style="background-color: var(--sl-color-info-80);"></div> |
| `--sl-color-info-85` | <div class="color-demo" style="background-color: var(--sl-color-info-85);"></div> |
| `--sl-color-info-90` | <div class="color-demo" style="background-color: var(--sl-color-info-90);"></div> |
| `--sl-color-info-95` | <div class="color-demo" style="background-color: var(--sl-color-info-95);"></div> |
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-info-50` | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div> |
| `--sl-color-info-100` | <div class="color-demo" style="background-color: var(--sl-color-info-100);"></div> |
| `--sl-color-info-200` | <div class="color-demo" style="background-color: var(--sl-color-info-200);"></div> |
| `--sl-color-info-300` | <div class="color-demo" style="background-color: var(--sl-color-info-300);"></div> |
| `--sl-color-info-400` | <div class="color-demo" style="background-color: var(--sl-color-info-400);"></div> |
| `--sl-color-info-500` | <div class="color-demo" style="background-color: var(--sl-color-info-500);"></div> |
| `--sl-color-info-600` | <div class="color-demo" style="background-color: var(--sl-color-info-600);"></div> |
| `--sl-color-info-700` | <div class="color-demo" style="background-color: var(--sl-color-info-700);"></div> |
| `--sl-color-info-800` | <div class="color-demo" style="background-color: var(--sl-color-info-800);"></div> |
| `--sl-color-info-900` | <div class="color-demo" style="background-color: var(--sl-color-info-900);"></div> |
| `--sl-color-info-950` | <div class="color-demo" style="background-color: var(--sl-color-info-950);"></div> |
## Warning
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-warning-5` | <div class="color-demo" style="background-color: var(--sl-color-warning-5);"></div> |
| `--sl-color-warning-10` | <div class="color-demo" style="background-color: var(--sl-color-warning-10);"></div> |
| `--sl-color-warning-15` | <div class="color-demo" style="background-color: var(--sl-color-warning-15);"></div> |
| `--sl-color-warning-20` | <div class="color-demo" style="background-color: var(--sl-color-warning-20);"></div> |
| `--sl-color-warning-25` | <div class="color-demo" style="background-color: var(--sl-color-warning-25);"></div> |
| `--sl-color-warning-30` | <div class="color-demo" style="background-color: var(--sl-color-warning-30);"></div> |
| `--sl-color-warning-35` | <div class="color-demo" style="background-color: var(--sl-color-warning-35);"></div> |
| `--sl-color-warning-40` | <div class="color-demo" style="background-color: var(--sl-color-warning-40);"></div> |
| `--sl-color-warning-45` | <div class="color-demo" style="background-color: var(--sl-color-warning-45);"></div> |
| `--sl-color-warning-50` | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div> |
| `--sl-color-warning-55` | <div class="color-demo" style="background-color: var(--sl-color-warning-55);"></div> |
| `--sl-color-warning-60` | <div class="color-demo" style="background-color: var(--sl-color-warning-60);"></div> |
| `--sl-color-warning-65` | <div class="color-demo" style="background-color: var(--sl-color-warning-65);"></div> |
| `--sl-color-warning-70` | <div class="color-demo" style="background-color: var(--sl-color-warning-70);"></div> |
| `--sl-color-warning-75` | <div class="color-demo" style="background-color: var(--sl-color-warning-75);"></div> |
| `--sl-color-warning-80` | <div class="color-demo" style="background-color: var(--sl-color-warning-80);"></div> |
| `--sl-color-warning-85` | <div class="color-demo" style="background-color: var(--sl-color-warning-85);"></div> |
| `--sl-color-warning-90` | <div class="color-demo" style="background-color: var(--sl-color-warning-90);"></div> |
| `--sl-color-warning-95` | <div class="color-demo" style="background-color: var(--sl-color-warning-95);"></div> |
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-warning-50` | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div> |
| `--sl-color-warning-100` | <div class="color-demo" style="background-color: var(--sl-color-warning-100);"></div> |
| `--sl-color-warning-200` | <div class="color-demo" style="background-color: var(--sl-color-warning-200);"></div> |
| `--sl-color-warning-300` | <div class="color-demo" style="background-color: var(--sl-color-warning-300);"></div> |
| `--sl-color-warning-400` | <div class="color-demo" style="background-color: var(--sl-color-warning-400);"></div> |
| `--sl-color-warning-500` | <div class="color-demo" style="background-color: var(--sl-color-warning-500);"></div> |
| `--sl-color-warning-600` | <div class="color-demo" style="background-color: var(--sl-color-warning-600);"></div> |
| `--sl-color-warning-700` | <div class="color-demo" style="background-color: var(--sl-color-warning-700);"></div> |
| `--sl-color-warning-800` | <div class="color-demo" style="background-color: var(--sl-color-warning-800);"></div> |
| `--sl-color-warning-900` | <div class="color-demo" style="background-color: var(--sl-color-warning-900);"></div> |
| `--sl-color-warning-950` | <div class="color-demo" style="background-color: var(--sl-color-warning-950);"></div> |
## Danger
| Token | Example |
| ---------------------- | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-5` | <div class="color-demo" style="background-color: var(--sl-color-danger-5);"></div> |
| `--sl-color-danger-10` | <div class="color-demo" style="background-color: var(--sl-color-danger-10);"></div> |
| `--sl-color-danger-15` | <div class="color-demo" style="background-color: var(--sl-color-danger-15);"></div> |
| `--sl-color-danger-20` | <div class="color-demo" style="background-color: var(--sl-color-danger-20);"></div> |
| `--sl-color-danger-25` | <div class="color-demo" style="background-color: var(--sl-color-danger-25);"></div> |
| `--sl-color-danger-30` | <div class="color-demo" style="background-color: var(--sl-color-danger-30);"></div> |
| `--sl-color-danger-35` | <div class="color-demo" style="background-color: var(--sl-color-danger-35);"></div> |
| `--sl-color-danger-40` | <div class="color-demo" style="background-color: var(--sl-color-danger-40);"></div> |
| `--sl-color-danger-45` | <div class="color-demo" style="background-color: var(--sl-color-danger-45);"></div> |
| `--sl-color-danger-50` | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div> |
| `--sl-color-danger-55` | <div class="color-demo" style="background-color: var(--sl-color-danger-55);"></div> |
| `--sl-color-danger-60` | <div class="color-demo" style="background-color: var(--sl-color-danger-60);"></div> |
| `--sl-color-danger-65` | <div class="color-demo" style="background-color: var(--sl-color-danger-65);"></div> |
| `--sl-color-danger-70` | <div class="color-demo" style="background-color: var(--sl-color-danger-70);"></div> |
| `--sl-color-danger-75` | <div class="color-demo" style="background-color: var(--sl-color-danger-75);"></div> |
| `--sl-color-danger-80` | <div class="color-demo" style="background-color: var(--sl-color-danger-80);"></div> |
| `--sl-color-danger-85` | <div class="color-demo" style="background-color: var(--sl-color-danger-85);"></div> |
| `--sl-color-danger-90` | <div class="color-demo" style="background-color: var(--sl-color-danger-90);"></div> |
| `--sl-color-danger-95` | <div class="color-demo" style="background-color: var(--sl-color-danger-95);"></div> |
| Token | Example |
| ------------------------ | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-50` | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div> |
| `--sl-color-danger-100` | <div class="color-demo" style="background-color: var(--sl-color-danger-100);"></div> |
| `--sl-color-danger-200` | <div class="color-demo" style="background-color: var(--sl-color-danger-200);"></div> |
| `--sl-color-danger-300` | <div class="color-demo" style="background-color: var(--sl-color-danger-300);"></div> |
| `--sl-color-danger-400` | <div class="color-demo" style="background-color: var(--sl-color-danger-400);"></div> |
| `--sl-color-danger-500` | <div class="color-demo" style="background-color: var(--sl-color-danger-500);"></div> |
| `--sl-color-danger-600` | <div class="color-demo" style="background-color: var(--sl-color-danger-600);"></div> |
| `--sl-color-danger-700` | <div class="color-demo" style="background-color: var(--sl-color-danger-700);"></div> |
| `--sl-color-danger-800` | <div class="color-demo" style="background-color: var(--sl-color-danger-800);"></div> |
| `--sl-color-danger-900` | <div class="color-demo" style="background-color: var(--sl-color-danger-900);"></div> |
| `--sl-color-danger-950` | <div class="color-demo" style="background-color: var(--sl-color-danger-950);"></div> |

4
src/components.d.ts vendored
Wyświetl plik

@ -291,7 +291,7 @@ export namespace Components {
/**
* Removes the format toggle.
*/
"noToggle": boolean;
"noFormatToggle": boolean;
/**
* Whether to show the opacity slider.
*/
@ -1926,7 +1926,7 @@ declare namespace LocalJSX {
/**
* Removes the format toggle.
*/
"noToggle"?: boolean;
"noFormatToggle"?: boolean;
/**
* Emitted after the color picker closes and all transitions are complete.
*/

24
src/components/alert/alert.scss
Wyświetl plik

@ -16,7 +16,7 @@
display: flex;
align-items: stretch;
background-color: var(--sl-color-white);
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
border-top-width: 3px;
border-radius: var(--sl-border-radius-medium);
box-shadow: var(--box-shadow);
@ -24,7 +24,7 @@
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-normal);
line-height: 1.6;
color: var(--sl-color-gray-30);
color: var(--sl-color-gray-700);
opacity: 0;
transform: scale(0.9);
transition: var(--sl-transition-medium) opacity ease, var(--sl-transition-medium) transform ease;
@ -52,42 +52,42 @@
}
.alert--primary {
border-top-color: var(--sl-color-primary-50);
border-top-color: var(--sl-color-primary-500);
.alert__icon {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
}
.alert--success {
border-top-color: var(--sl-color-success-50);
border-top-color: var(--sl-color-success-500);
.alert__icon {
color: var(--sl-color-success-50);
color: var(--sl-color-success-500);
}
}
.alert--info {
border-top-color: var(--sl-color-info-50);
border-top-color: var(--sl-color-info-500);
.alert__icon {
color: var(--sl-color-info-50);
color: var(--sl-color-info-500);
}
}
.alert--warning {
border-top-color: var(--sl-color-warning-50);
border-top-color: var(--sl-color-warning-500);
.alert__icon {
color: var(--sl-color-warning-50);
color: var(--sl-color-warning-500);
}
}
.alert--danger {
border-top-color: var(--sl-color-danger-50);
border-top-color: var(--sl-color-danger-500);
.alert__icon {
color: var(--sl-color-danger-50);
color: var(--sl-color-danger-500);
}
}

2
src/components/avatar/avatar.scss
Wyświetl plik

@ -16,7 +16,7 @@
position: relative;
width: var(--size);
height: var(--size);
background-color: var(--sl-color-gray-80);
background-color: var(--sl-color-gray-300);
font-family: var(--sl-font-sans);
font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal);

31
src/components/badge/badge.scss
Wyświetl plik

@ -24,27 +24,27 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.badge--primary {
background-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
color: var(--sl-color-white);
}
.badge--success {
background-color: var(--sl-color-success-50);
background-color: var(--sl-color-success-500);
color: var(--sl-color-white);
}
.badge--info {
background-color: var(--sl-color-info-50);
background-color: var(--sl-color-info-500);
color: var(--sl-color-white);
}
.badge--warning {
background-color: var(--sl-color-warning-50);
background-color: var(--sl-color-warning-500);
color: var(--sl-color-white);
}
.badge--danger {
background-color: var(--sl-color-danger-50);
background-color: var(--sl-color-danger-500);
color: var(--sl-color-white);
}
@ -65,38 +65,33 @@
}
.badge--pulse.badge--primary {
--pulse-hue: var(--sl-color-primary-hue);
--pulse-saturation: var(--sl-color-primary-saturation);
--pulse-color: var(--sl-color-primary-500);
}
.badge--pulse.badge--success {
--pulse-hue: var(--sl-color-success-hue);
--pulse-saturation: var(--sl-color-success-saturation);
--pulse-color: var(--sl-color-success-500);
}
.badge--pulse.badge--info {
--pulse-hue: var(--sl-color-info-hue);
--pulse-saturation: var(--sl-color-info-saturation);
--pulse-color: var(--sl-color-info-500);
}
.badge--pulse.badge--warning {
--pulse-hue: var(--sl-color-warning-hue);
--pulse-saturation: var(--sl-color-warning-saturation);
--pulse-color: var(--sl-color-warning-500);
}
.badge--pulse.badge--danger {
--pulse-hue: var(--sl-color-danger-hue);
--pulse-saturation: var(--sl-color-danger-saturation);
--pulse-color: var(--sl-color-danger-500);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0.75);
box-shadow: 0 0 0 0 var(--pulse-color);
}
70% {
box-shadow: 0 0 0 0.5rem hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0);
box-shadow: 0 0 0 0.5rem transparent;
}
100% {
box-shadow: 0 0 0 0 hsla(var(--pulse-hue), var(--pulse-saturation), 50%, 0);
box-shadow: 0 0 0 0 transparent;
}
}

134
src/components/button/button.scss
Wyświetl plik

@ -31,7 +31,7 @@
outline: none;
}
&[disabled] {
&.button--disabled {
opacity: 0.5;
cursor: not-allowed;
@ -77,156 +77,150 @@
.button {
&.button--default {
background-color: var(--sl-color-white);
border-color: var(--sl-color-gray-80);
color: var(--sl-color-gray-40);
border-color: var(--sl-color-gray-300);
color: var(--sl-color-gray-600);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-primary-95);
border-color: var(--sl-color-primary-80);
color: var(--sl-color-primary-40);
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-300);
color: var(--sl-color-primary-600);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-primary-95);
border-color: var(--sl-color-primary-70);
color: var(--sl-color-primary-40);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-300);
color: var(--sl-color-primary-600);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-primary-95);
border-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-30);
background-color: var(--sl-color-primary-100);
border-color: var(--sl-color-primary-400);
color: var(--sl-color-primary-700);
}
}
&.button--primary {
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
color: var(--sl-color-primary-text);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
color: var(--sl-color-primary-text);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
color: var(--sl-color-primary-text);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
color: var(--sl-color-primary-text);
}
}
&.button--success {
background-color: var(--sl-color-success-50);
border-color: var(--sl-color-success-50);
background-color: var(--sl-color-success-500);
border-color: var(--sl-color-success-500);
color: var(--sl-color-success-text);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-success-60);
border-color: var(--sl-color-success-60);
background-color: var(--sl-color-success-400);
border-color: var(--sl-color-success-400);
color: var(--sl-color-success-text);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-success-60);
border-color: var(--sl-color-success-60);
background-color: var(--sl-color-success-400);
border-color: var(--sl-color-success-400);
color: var(--sl-color-success-text);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%, var(--sl-focus-ring-alpha));
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-success-50);
border-color: var(--sl-color-success-50);
background-color: var(--sl-color-success-500);
border-color: var(--sl-color-success-500);
color: var(--sl-color-success-text);
}
}
&.button--info {
background-color: var(--sl-color-info-50);
border-color: var(--sl-color-info-50);
background-color: var(--sl-color-info-500);
border-color: var(--sl-color-info-500);
color: var(--sl-color-info-text);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-info-60);
border-color: var(--sl-color-info-60);
background-color: var(--sl-color-info-400);
border-color: var(--sl-color-info-400);
color: var(--sl-color-info-text);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-info-60);
border-color: var(--sl-color-info-60);
background-color: var(--sl-color-info-400);
border-color: var(--sl-color-info-400);
color: var(--sl-color-info-text);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%, var(--sl-focus-ring-alpha));
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-info-50);
border-color: var(--sl-color-info-50);
background-color: var(--sl-color-info-500);
border-color: var(--sl-color-info-500);
color: var(--sl-color-info-text);
}
}
&.button--warning {
background-color: var(--sl-color-warning-50);
border-color: var(--sl-color-warning-50);
background-color: var(--sl-color-warning-500);
border-color: var(--sl-color-warning-500);
color: var(--sl-color-warning-text);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-warning-60);
border-color: var(--sl-color-warning-60);
background-color: var(--sl-color-warning-400);
border-color: var(--sl-color-warning-400);
color: var(--sl-color-warning-text);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-warning-60);
border-color: var(--sl-color-warning-60);
background-color: var(--sl-color-warning-400);
border-color: var(--sl-color-warning-400);
color: var(--sl-color-warning-text);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%, var(--sl-focus-ring-alpha));
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-warning-50);
border-color: var(--sl-color-warning-50);
background-color: var(--sl-color-warning-500);
border-color: var(--sl-color-warning-500);
color: var(--sl-color-warning-text);
}
}
&.button--danger {
background-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-50);
background-color: var(--sl-color-danger-500);
border-color: var(--sl-color-danger-500);
color: var(--sl-color-danger-text);
&:hover:not(.button--disabled) {
background-color: var(--sl-color-danger-60);
border-color: var(--sl-color-danger-60);
background-color: var(--sl-color-danger-400);
border-color: var(--sl-color-danger-400);
color: var(--sl-color-danger-text);
}
&:focus:not(.button--disabled) {
background-color: var(--sl-color-danger-60);
border-color: var(--sl-color-danger-60);
background-color: var(--sl-color-danger-400);
border-color: var(--sl-color-danger-400);
color: var(--sl-color-danger-text);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%, var(--sl-focus-ring-alpha));
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
}
&:active:not(.button--disabled) {
background-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-50);
background-color: var(--sl-color-danger-500);
border-color: var(--sl-color-danger-500);
color: var(--sl-color-danger-text);
}
}
@ -239,26 +233,25 @@
.button--text {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
&:hover:not(.button--disabled) {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-60);
color: var(--sl-color-primary-400);
}
&:focus:not(.button--disabled) {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-60);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
&:active:not(.button--disabled) {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-40);
color: var(--sl-color-primary-600);
}
}
@ -377,7 +370,6 @@
sl-spinner {
--indicator-color: currentColor;
--stroke-width: 1px;
position: absolute;
height: 1em;
width: 1em;

2
src/components/card/card.scss
Wyświetl plik

@ -7,7 +7,7 @@
* @prop --padding: The padding to use for card sections.
*/
:host {
--border-color: var(--sl-color-gray-90);
--border-color: var(--sl-color-gray-200);
--border-radius: var(--sl-border-radius-medium);
--border-width: 1px;
--padding: var(--sl-spacing-large);

16
src/components/checkbox/checkbox.scss
Wyświetl plik

@ -59,29 +59,29 @@
.checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {
border-color: var(--sl-input-border-color-focus);
background-color: var(--sl-input-background-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
// Checked/indeterminate
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
}
// Checked/indeterminate + hover
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-400);
}
// Checked/indeterminate + focus
.checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-60);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
// Disabled

21
src/components/color-picker/color-picker.scss
Wyświetl plik

@ -54,16 +54,15 @@
width: var(--grid-handle-size);
height: var(--grid-handle-size);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
border: solid 2px white;
margin-top: calc(var(--grid-handle-size) / -2);
margin-left: calc(var(--grid-handle-size) / -2);
&:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
inset 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}
@ -100,8 +99,8 @@
&:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%),
var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}
@ -158,7 +157,7 @@
}
&:focus {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
outline: none;
}
}
@ -227,7 +226,7 @@
grid-template-columns: repeat(8, 1fr);
grid-gap: 6px;
justify-items: center;
border-top: solid 1px var(--sl-color-gray-90);
border-top: solid 1px var(--sl-color-gray-200);
padding: var(--sl-spacing-small);
}
@ -251,7 +250,7 @@
&:focus {
outline: none;
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}
@ -330,11 +329,11 @@
}
&:focus:not(.color-dropdown__trigger--disabled) {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
outline: none;
&::before {
box-shadow: inset 0 0 0 1px var(--sl-color-primary-50);
box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
}
}

4
src/components/details/details.scss
Wyświetl plik

@ -16,7 +16,7 @@
}
.details {
border: solid 1px var(--sl-color-gray-90);
border: solid 1px var(--sl-color-gray-200);
border-radius: var(--sl-border-radius-medium);
overflow-anchor: none;
}
@ -39,7 +39,7 @@
}
.focus-visible .details__header:focus {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.details--disabled .details__header {

8
src/components/icon-button/icon-button.scss
Wyświetl plik

@ -12,7 +12,7 @@
border: none;
border-radius: var(--sl-border-radius-medium);
font-size: inherit;
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
padding: var(--sl-spacing-x-small);
cursor: pointer;
transition: var(--sl-transition-medium) color;
@ -20,11 +20,11 @@
&:hover:not(.icon-button--disabled),
&:focus:not(.icon-button--disabled) {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
&:active:not(.icon-button--disabled) {
color: var(--sl-color-primary-40);
color: var(--sl-color-primary-600);
}
&:focus {
@ -38,5 +38,5 @@
}
.focus-visible.icon-button:focus {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}

6
src/components/image-comparer/image-comparer.scss
Wyświetl plik

@ -62,13 +62,13 @@
background-color: var(--sl-color-white);
border-radius: var(--sl-border-radius-circle);
font-size: calc(var(--handle-size) * 0.5);
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-500);
cursor: inherit;
z-index: 10;
&:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%),
var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 1px var(--sl-color-primary-500),
0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}

4
src/components/input/input.scss
Wyświetl plik

@ -6,7 +6,7 @@
* @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.
*/
:host {
--focus-ring: var(--sl-focus-ring-box-shadow);
--focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
display: block;
}
@ -90,7 +90,7 @@
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
-webkit-text-fill-color: var(--sl-color-primary-50);
-webkit-text-fill-color: var(--sl-color-primary-500);
}
&::placeholder {

8
src/components/menu-item/menu-item.scss
Wyświetl plik

@ -14,7 +14,7 @@
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
text-align: left;
color: var(--sl-color-gray-30);
color: var(--sl-color-gray-700);
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
transition: var(--sl-transition-fast) fill;
user-select: none;
@ -23,13 +23,13 @@
&.menu-item--focused:not(.menu-item--disabled) {
outline: none;
background-color: var(--sl-color-primary-95);
color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
&.menu-item--disabled {
outline: none;
color: var(--sl-color-gray-70);
color: var(--sl-color-gray-400);
cursor: not-allowed;
}

2
src/components/menu-label/menu-label.scss
Wyświetl plik

@ -10,7 +10,7 @@
font-weight: var(--sl-font-weight-normal);
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
color: var(--sl-color-gray-60);
color: var(--sl-color-gray-400);
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
user-select: none;
}

4
src/components/progress-bar/progress-bar.scss
Wyświetl plik

@ -8,8 +8,8 @@
*/
:host {
--height: 16px;
--track-color: var(--sl-color-gray-90);
--indicator-color: var(--sl-color-primary-50);
--track-color: var(--sl-color-gray-200);
--indicator-color: var(--sl-color-primary-500);
--label-color: var(--sl-color-white);
display: block;

4
src/components/progress-ring/progress-ring.scss
Wyświetl plik

@ -5,8 +5,8 @@
* @prop --indicator-color: The indicator color.
*/
:host {
--track-color: var(--sl-color-gray-90);
--indicator-color: var(--sl-color-primary-50);
--track-color: var(--sl-color-gray-200);
--indicator-color: var(--sl-color-primary-500);
display: inline-flex;
}

16
src/components/radio/radio.scss
Wyświetl plik

@ -59,27 +59,27 @@
.radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {
border-color: var(--sl-input-border-color-focus);
background-color: var(--sl-input-background-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
// Checked
.radio--checked .radio__control {
color: var(--sl-color-white);
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
}
// Checked + hover
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-400);
}
// Checked + focus
.radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-60);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-400);
background-color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
// Disabled

38
src/components/range/range.scss
Wyświetl plik

@ -3,7 +3,7 @@
:host {
--thumb-size: 20px;
--tooltip-offset-y: 10px;
--track-color: var(--sl-color-gray-90);
--track-color: var(--sl-color-gray-200);
--track-height: 6px;
display: block;
@ -34,8 +34,8 @@
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-50);
border: solid var(--sl-input-border-width) var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
border: solid var(--sl-input-border-width) var(--sl-color-primary-500);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
@ -44,19 +44,19 @@
}
&:not(:disabled)::-webkit-slider-thumb:hover {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
}
&:not(:disabled):focus::-webkit-slider-thumb {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
box-shadow: var(--sl-focus-ring-box-shadow);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
&:not(:disabled)::-webkit-slider-thumb:active {
background-color: var(--sl-color-primary-40);
border-color: var(--sl-color-primary-40);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
cursor: grabbing;
}
@ -78,27 +78,27 @@
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
cursor: pointer;
}
&:not(:disabled)::-moz-range-thumb:hover {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
}
&:not(:disabled):focus::-moz-range-thumb {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
box-shadow: var(--sl-focus-ring-box-shadow);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
&:not(:disabled)::-moz-range-thumb:active {
background-color: var(--sl-color-primary-40);
border-color: var(--sl-color-primary-40);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
cursor: grabbing;
}

4
src/components/rating/rating.scss
Wyświetl plik

@ -7,7 +7,7 @@
* @prop --symbol-spacing: The spacing to use around symbols.
*/
:host {
--symbol-color: var(--sl-color-gray-85);
--symbol-color: var(--sl-color-gray-300);
--symbol-color-active: #ffbe00;
--symbol-size: 1.2rem;
--symbol-spacing: var(--sl-spacing-xxx-small);
@ -26,7 +26,7 @@
}
&.focus-visible:focus {
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}

2
src/components/select/select.scss
Wyświetl plik

@ -8,7 +8,7 @@
* @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.
*/
:host {
--focus-ring: var(--sl-focus-ring-box-shadow);
--focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
display: block;
}

4
src/components/skeleton/skeleton.scss vendored
Wyświetl plik

@ -7,8 +7,8 @@
*/
:host {
--border-radius: var(--sl-border-radius-pill);
--color: var(--sl-color-gray-90);
--sheen-color: var(--sl-color-gray-95);
--color: var(--sl-color-gray-200);
--sheen-color: var(--sl-color-gray-100);
display: block;
position: relative;

5
src/components/spinner/spinner.scss
Wyświetl plik

@ -6,8 +6,8 @@
* @prop --stroke-width: The width of the indicator.
*/
:host {
--track-color: var(--sl-color-gray-90);
--indicator-color: var(--sl-color-primary-50);
--track-color: #0d131e20;
--indicator-color: var(--sl-color-primary-500);
--stroke-width: 2px;
display: inline-flex;
@ -20,6 +20,7 @@
border-radius: 50%;
border: solid var(--stroke-width) var(--track-color);
border-top-color: var(--indicator-color);
border-right-color: var(--indicator-color);
animation: 1s linear infinite spin;
}

36
src/components/switch/switch.scss
Wyświetl plik

@ -31,8 +31,8 @@
justify-content: center;
width: var(--width);
height: var(--height);
background-color: var(--sl-color-gray-80);
border: solid var(--sl-input-border-width) var(--sl-color-gray-80);
background-color: var(--sl-color-gray-300);
border: solid var(--sl-input-border-width) var(--sl-color-gray-300);
border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
@ -58,8 +58,8 @@
// Hover
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
background-color: var(--sl-color-gray-90);
border-color: var(--sl-color-gray-90);
background-color: var(--sl-color-gray-200);
border-color: var(--sl-color-gray-200);
.switch__thumb {
background-color: var(--sl-color-white);
@ -69,48 +69,48 @@
// Focus
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
background-color: var(--sl-color-gray-90);
border-color: var(--sl-color-gray-90);
background-color: var(--sl-color-gray-200);
border-color: var(--sl-color-gray-200);
.switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-color-primary-50);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-500);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}
// Checked
.switch--checked .switch__control {
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
.switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));
}
}
// Checked + hover
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
.switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-500);
}
}
// Checked + focus
.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control {
background-color: var(--sl-color-primary-60);
border-color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-400);
border-color: var(--sl-color-primary-400);
.switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-color-primary-50);
box-shadow: var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-primary-500);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
}

10
src/components/tab-group/tab-group.scss
Wyświetl plik

@ -5,7 +5,7 @@
* @prop --tabs-border-color: The color of the border that separates tabs.
*/
:host {
--tabs-border-color: var(--sl-color-gray-90);
--tabs-border-color: var(--sl-color-gray-200);
display: block;
}
@ -80,7 +80,7 @@
.tab-group__active-tab-indicator {
bottom: -2px;
border-bottom: solid 2px var(--sl-color-primary-50);
border-bottom: solid 2px var(--sl-color-primary-500);
}
.tab-group__body {
@ -114,7 +114,7 @@
.tab-group__active-tab-indicator {
top: calc(-1 * 2px);
border-top: solid 2px var(--sl-color-primary-50);
border-top: solid 2px var(--sl-color-primary-500);
}
.tab-group__body {
@ -141,7 +141,7 @@
.tab-group__active-tab-indicator {
right: calc(-1 * 2px);
border-right: solid 2px var(--sl-color-primary-50);
border-right: solid 2px var(--sl-color-primary-500);
}
.tab-group__body {
@ -169,7 +169,7 @@
.tab-group__active-tab-indicator {
left: calc(-1 * 2px);
border-left: solid 2px var(--sl-color-primary-50);
border-left: solid 2px var(--sl-color-primary-500);
}
.tab-group__body {

10
src/components/tab/tab.scss
Wyświetl plik

@ -4,7 +4,7 @@
* @prop --focus-ring: The focus ring's box shadow.
*/
:host {
--focus-ring: var(--sl-focus-ring-box-shadow-inset);
--focus-ring: inset 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
display: inline-block;
}
@ -16,7 +16,7 @@
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
border-radius: 4px;
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
padding: var(--sl-spacing-medium) var(--sl-spacing-large);
white-space: nowrap;
user-select: none;
@ -24,7 +24,7 @@
transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
&:hover:not(.tab--disabled) {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
&:focus {
@ -32,12 +32,12 @@
}
&:focus:not(.tab--disabled) {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
box-shadow: var(--focus-ring);
}
&.tab--active:not(.tab--disabled) {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
&.tab--closable {

30
src/components/tag/tag.scss
Wyświetl plik

@ -24,33 +24,33 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.tag--primary {
background-color: var(--sl-color-primary-95);
border-color: var(--sl-color-primary-80);
color: var(--sl-color-primary-35);
background-color: var(--sl-color-primary-100);
border-color: var(--sl-color-primary-200);
color: var(--sl-color-primary-700);
}
.tag--success {
background-color: var(--sl-color-success-95);
border-color: var(--sl-color-success-80);
color: var(--sl-color-success-30);
background-color: var(--sl-color-success-100);
border-color: var(--sl-color-success-200);
color: var(--sl-color-success-700);
}
.tag--info {
background-color: var(--sl-color-info-95);
border-color: var(--sl-color-info-80);
color: var(--sl-color-info-40);
background-color: var(--sl-color-info-100);
border-color: var(--sl-color-info-200);
color: var(--sl-color-info-700);
}
.tag--warning {
background-color: var(--sl-color-warning-95);
border-color: var(--sl-color-warning-80);
color: var(--sl-color-warning-30);
background-color: var(--sl-color-warning-100);
border-color: var(--sl-color-warning-200);
color: var(--sl-color-warning-700);
}
.tag--danger {
background-color: var(--sl-color-danger-95);
border-color: var(--sl-color-danger-80);
color: var(--sl-color-danger-40);
background-color: var(--sl-color-danger-100);
border-color: var(--sl-color-danger-200);
color: var(--sl-color-danger-700);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

2
src/components/textarea/textarea.scss
Wyświetl plik

@ -33,7 +33,7 @@
&.textarea--focused:not(.textarea--disabled) {
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
color: var(--sl-input-color-focus);
.textarea__control {

4
src/styles/form-control-help-text.scss
Wyświetl plik

@ -13,10 +13,6 @@
font-size: var(--sl-input-help-text-font-size-large);
}
&.help-text--valid {
color: var(--sl-input-help-text-color-valid);
}
&.help-text--invalid {
color: var(--sl-input-help-text-color-invalid);
}

4
src/styles/form-control-label.scss
Wyświetl plik

@ -22,10 +22,6 @@
font-size: var(--sl-input-label-font-size-large);
}
&.label--valid {
color: var(--sl-input-label-color-valid);
}
&.label--invalid {
color: var(--sl-input-label-color-invalid);
}

8
src/styles/mixins/make-color-palette.scss
Wyświetl plik

@ -1,8 +0,0 @@
// Generates custom properties with colors of lightness 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 95 percent
@mixin make-color-palette($name) {
@for $i from 5 through 95 {
@if $i % 5 == 0 {
--sl-color-#{$name}-#{$i}: hsl(var(--sl-color-#{$name}-hue), var(--sl-color-#{$name}-saturation), #{$i * 1%});
}
}
}

166
src/styles/shoelace.scss
Wyświetl plik

@ -1,45 +1,90 @@
/*! Shoelace */
@import 'mixins/make-color-palette';
:root {
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Color tokens
// Theme color tokens
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-color-primary-hue: 203;
--sl-color-primary-saturation: 100%;
--sl-color-black: #000;
--sl-color-white: #fff;
--sl-color-gray-50: #f9fafb;
--sl-color-gray-100: #f3f4f6;
--sl-color-gray-200: #e5e7eb;
--sl-color-gray-300: #d1d5db;
--sl-color-gray-400: #9ca3af;
--sl-color-gray-500: #6b7280;
--sl-color-gray-600: #4b5563;
--sl-color-gray-700: #374151;
--sl-color-gray-800: #1f2937;
--sl-color-gray-900: #111827;
--sl-color-gray-950: #0d131e;
--sl-color-primary-50: #f0f9ff;
--sl-color-primary-100: #e0f2fe;
--sl-color-primary-200: #bae6fd;
--sl-color-primary-300: #7dd3fc;
--sl-color-primary-400: #38bdf8;
--sl-color-primary-500: #0ea5e9;
--sl-color-primary-600: #0284c7;
--sl-color-primary-700: #0369a1;
--sl-color-primary-800: #075985;
--sl-color-primary-900: #0c4a6e;
--sl-color-primary-950: #082e45;
--sl-color-primary-text: var(--sl-color-white);
--sl-color-success-hue: 110;
--sl-color-success-saturation: 70%;
--sl-color-success-50: #f0fdf4;
--sl-color-success-100: #dcfce7;
--sl-color-success-200: #bbf7d0;
--sl-color-success-300: #86efac;
--sl-color-success-400: #4ade80;
--sl-color-success-500: #22c55e;
--sl-color-success-600: #16a34a;
--sl-color-success-700: #15803d;
--sl-color-success-800: #166534;
--sl-color-success-900: #14532d;
--sl-color-success-950: #0d381e;
--sl-color-success-text: var(--sl-color-white);
--sl-color-info-hue: var(--sl-color-primary-hue);
--sl-color-info-saturation: 10%;
--sl-color-info-50: #f9fafb;
--sl-color-info-100: #f3f4f6;
--sl-color-info-200: #e5e7eb;
--sl-color-info-300: #d1d5db;
--sl-color-info-400: #9ca3af;
--sl-color-info-500: #6b7280;
--sl-color-info-600: #4b5563;
--sl-color-info-700: #374151;
--sl-color-info-800: #1f2937;
--sl-color-info-900: #111827;
--sl-color-info-950: #0d131e;
--sl-color-info-text: var(--sl-color-white);
--sl-color-warning-hue: 40;
--sl-color-warning-saturation: 90%;
--sl-color-warning-50: #fffbeb;
--sl-color-warning-100: #fef3c7;
--sl-color-warning-200: #fde68a;
--sl-color-warning-300: #fcd34d;
--sl-color-warning-400: #fbbf24;
--sl-color-warning-500: #f59e0b;
--sl-color-warning-600: #d97706;
--sl-color-warning-700: #b45309;
--sl-color-warning-800: #92400e;
--sl-color-warning-900: #78350f;
--sl-color-warning-950: #4d220a;
--sl-color-warning-text: var(--sl-color-white);
--sl-color-danger-hue: 10;
--sl-color-danger-saturation: 95%;
--sl-color-danger-50: #fef2f2;
--sl-color-danger-100: #fee2e2;
--sl-color-danger-200: #fecaca;
--sl-color-danger-300: #fca5a5;
--sl-color-danger-400: #f87171;
--sl-color-danger-500: #ef4444;
--sl-color-danger-600: #dc2626;
--sl-color-danger-700: #b91c1c;
--sl-color-danger-800: #991b1b;
--sl-color-danger-900: #7f1d1d;
--sl-color-danger-950: #481111;
--sl-color-danger-text: var(--sl-color-white);
--sl-color-gray-hue: var(--sl-color-primary-hue);
--sl-color-gray-saturation: 10%;
--sl-color-gray-text: var(--sl-color-white);
--sl-color-white: white;
--sl-color-black: black;
@include make-color-palette('primary');
@include make-color-palette('success');
@include make-color-palette('info');
@include make-color-palette('warning');
@include make-color-palette('danger');
@include make-color-palette('gray');
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Border radius tokens
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -56,11 +101,11 @@
// Elevation tokens
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-shadow-x-small: 0 1px 0 rgba(0, 0, 0, 0.05);
--sl-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1);
--sl-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);
--sl-shadow-large: 0 2px 8px rgba(0, 0, 0, 0.1);
--sl-shadow-x-large: 0 4px 16px rgba(0, 0, 0, 0.1);
--sl-shadow-x-small: 0 1px 0 #0d131e0d;
--sl-shadow-small: 0 1px 2px #0d131e1a;
--sl-shadow-medium: 0 2px 4px #0d131e1a;
--sl-shadow-large: 0 2px 8px #0d131e1a;
--sl-shadow-x-large: 0 4px 16px #0d131e1a;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Spacing tokens
@ -129,25 +174,12 @@
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Focus ring
--sl-focus-ring-hue: var(--sl-color-primary-hue);
--sl-focus-ring-saturation: var(--sl-color-primary-saturation);
--sl-focus-ring-lightness: 50%;
--sl-focus-ring-alpha: 0.33;
--sl-focus-ring-color-primary: #0ea5e954;
--sl-focus-ring-color-success: #22c55e54;
--sl-focus-ring-color-info: #6b728054;
--sl-focus-ring-color-warning: #f59e0b54;
--sl-focus-ring-color-danger: #ef444454;
--sl-focus-ring-width: 3px;
--sl-focus-ring-box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(
var(--sl-focus-ring-hue),
var(--sl-focus-ring-saturation),
var(--sl-focus-ring-lightness),
var(--sl-focus-ring-alpha)
);
--sl-focus-ring-box-shadow-inset: inset 0 0 0 var(--sl-focus-ring-width)
hsla(
var(--sl-focus-ring-hue),
var(--sl-focus-ring-saturation),
var(--sl-focus-ring-lightness),
var(--sl-focus-ring-alpha)
);
// Buttons
--sl-button-font-size-small: var(--sl-font-size-x-small);
@ -162,12 +194,12 @@
--sl-input-background-color: var(--sl-color-white);
--sl-input-background-color-hover: var(--sl-color-white);
--sl-input-background-color-focus: var(--sl-color-white);
--sl-input-background-color-disabled: var(--sl-color-gray-95);
--sl-input-background-color-disabled: var(--sl-color-gray-100);
--sl-input-border-color: var(--sl-color-gray-80);
--sl-input-border-color-hover: var(--sl-color-gray-70);
--sl-input-border-color-focus: var(--sl-color-primary-50);
--sl-input-border-color-disabled: var(--sl-color-gray-80);
--sl-input-border-color: var(--sl-color-gray-300);
--sl-input-border-color-hover: var(--sl-color-gray-400);
--sl-input-border-color-focus: var(--sl-color-primary-500);
--sl-input-border-color-disabled: var(--sl-color-gray-300);
--sl-input-border-width: 1px;
--sl-input-border-radius-small: var(--sl-border-radius-medium);
@ -181,17 +213,17 @@
--sl-input-font-size-large: var(--sl-font-size-large);
--sl-input-letter-spacing: var(--sl-letter-spacing-normal);
--sl-input-color: var(--sl-color-gray-30);
--sl-input-color-hover: var(--sl-color-gray-30);
--sl-input-color-focus: var(--sl-color-gray-30);
--sl-input-color-disabled: var(--sl-color-gray-10);
--sl-input-color: var(--sl-color-gray-700);
--sl-input-color-hover: var(--sl-color-gray-700);
--sl-input-color-focus: var(--sl-color-gray-700);
--sl-input-color-disabled: var(--sl-color-gray-900);
--sl-input-icon-color: var(--sl-color-gray-60);
--sl-input-icon-color-hover: var(--sl-color-gray-40);
--sl-input-icon-color-focus: var(--sl-color-gray-40);
--sl-input-icon-color: var(--sl-color-gray-400);
--sl-input-icon-color-hover: var(--sl-color-gray-600);
--sl-input-icon-color-focus: var(--sl-color-gray-600);
--sl-input-placeholder-color: var(--sl-color-gray-60);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-40);
--sl-input-placeholder-color: var(--sl-color-gray-400);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
--sl-input-spacing-small: 0.625rem; // 10px
--sl-input-spacing-medium: 0.75rem; // 12px
@ -209,7 +241,7 @@
--sl-input-help-text-font-size-medium: var(--sl-font-size-small);
--sl-input-help-text-font-size-large: var(--sl-font-size-medium);
--sl-input-help-text-color: var(--sl-color-gray-60);
--sl-input-help-text-color: var(--sl-color-gray-400);
// Toggles (checkboxes, radios, switches)
--sl-toggle-size: 1rem;
@ -218,21 +250,21 @@
// Overlay tokens
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%, 0.5);
--sl-overlay-background-color: #37415180;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Panels
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-panel-background-color: var(--sl-color-white);
--sl-panel-border-color: var(--sl-color-gray-90);
--sl-panel-border-color: var(--sl-color-gray-200);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Tooltip tokens
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-tooltip-border-radius: var(--sl-border-radius-medium);
--sl-tooltip-background-color: var(--sl-color-gray-10);
--sl-tooltip-background-color: var(--sl-color-gray-900);
--sl-tooltip-color: var(--sl-color-white);
--sl-tooltip-font-family: var(--sl-font-sans);
--sl-tooltip-font-weight: var(--sl-font-weight-normal);

385
themes/dark.css
Wyświetl plik

@ -1,287 +1,145 @@
.sl-theme-dark {
/* Theme colors */
--sl-color-primary-saturation: 80%;
--sl-color-success-saturation: 50%;
--sl-color-info-saturation: 10%;
--sl-color-warning-saturation: 70%;
--sl-color-danger-saturation: 75%;
--sl-color-gray-saturation: 10%;
/*
* Color palettes
*
* Don't change these! They need to be redefined so the browser reevaluates them when scoped below the default theme.
* This allows you to apply the theme to a specific element instead of the entire page.
*
* See: https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop
*/
--sl-color-primary-5: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
--sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
--sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
--sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
--sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
--sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
--sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
--sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
--sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
--sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
--sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
--sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
--sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
--sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
--sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
--sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
--sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
--sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
--sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
--sl-color-success-5: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
--sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
--sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
--sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
--sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
--sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
--sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
--sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
--sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
--sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
--sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
--sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
--sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
--sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
--sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
--sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
--sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
--sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
--sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
--sl-color-info-5: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
--sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
--sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
--sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
--sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
--sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
--sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
--sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
--sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
--sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
--sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
--sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
--sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
--sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
--sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
--sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
--sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
--sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
--sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
--sl-color-warning-5: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
--sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
--sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
--sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
--sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
--sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
--sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
--sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
--sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
--sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
--sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
--sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
--sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
--sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
--sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
--sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
--sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
--sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
--sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
--sl-color-danger-5: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
--sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
--sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
--sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
--sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
--sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
--sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
--sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
--sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
--sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
--sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
--sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
--sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
--sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
--sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
--sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
--sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
--sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
--sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
--sl-color-gray-5: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
--sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
--sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
--sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
--sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
--sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
--sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
--sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
--sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
--sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
--sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
--sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
--sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
--sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
--sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
--sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
--sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
--sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
--sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
/* Inputs */
--sl-input-background-color: var(--sl-color-gray-10);
--sl-input-background-color-hover: var(--sl-color-gray-10);
--sl-input-background-color-focus: var(--sl-color-gray-10);
--sl-input-background-color-disabled: var(--sl-color-gray-15);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-50);
--sl-input-border-color-disabled: var(--sl-color-gray-80);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-background-color: var(--sl-color-gray-900);
--sl-input-background-color-hover: var(--sl-color-gray-900);
--sl-input-background-color-focus: var(--sl-color-gray-900);
--sl-input-background-color-disabled: var(--sl-color-gray-800);
--sl-input-border-color: var(--sl-color-gray-700);
--sl-input-border-color-hover: var(--sl-color-gray-600);
--sl-input-border-color-focus: var(--sl-color-primary-500);
--sl-input-border-color-disabled: var(--sl-color-gray-200);
--sl-input-border-color-invalid: var(--sl-color-danger-500);
--sl-input-font-family: var(--sl-font-sans);
--sl-input-font-weight: var(--sl-font-weight-normal);
--sl-input-font-size-small: var(--sl-font-size-small);
--sl-input-font-size-medium: var(--sl-font-size-medium);
--sl-input-font-size-large: var(--sl-font-size-large);
--sl-input-letter-spacing: var(--sl-letter-spacing-normal);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-60);
--sl-input-border-color-disabled: var(--sl-color-gray-30);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-color: var(--sl-color-gray-80);
--sl-input-color-hover: var(--sl-color-gray-80);
--sl-input-color-focus: var(--sl-color-gray-80);
--sl-input-color-disabled: var(--sl-color-gray-90);
--sl-input-color-valid: var(--sl-color-success-60);
--sl-input-color-invalid: var(--sl-color-danger-40);
--sl-input-icon-color: var(--sl-color-gray-40);
--sl-input-icon-color-hover: var(--sl-color-gray-60);
--sl-input-icon-color-focus: var(--sl-color-gray-60);
--sl-input-placeholder-color: var(--sl-color-gray-40);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-50);
--sl-input-border-color: var(--sl-color-gray-700);
--sl-input-border-color-hover: var(--sl-color-gray-600);
--sl-input-border-color-focus: var(--sl-color-primary-400);
--sl-input-border-color-disabled: var(--sl-color-gray-700);
--sl-input-border-color-invalid: var(--sl-color-danger-500);
--sl-input-color: var(--sl-color-gray-200);
--sl-input-color-hover: var(--sl-color-gray-200);
--sl-input-color-focus: var(--sl-color-gray-200);
--sl-input-color-disabled: var(--sl-color-gray-100);
--sl-input-color-invalid: var(--sl-color-danger-600);
--sl-input-icon-color: var(--sl-color-gray-500);
--sl-input-icon-color-hover: var(--sl-color-gray-300);
--sl-input-icon-color-focus: var(--sl-color-gray-300);
--sl-input-placeholder-color: var(--sl-color-gray-600);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-500);
/* Overlays */
--sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%, 0.1);
--sl-overlay-background-color: #d1d5db22;
/* Panels */
--sl-panel-background-color: var(--sl-color-gray-10);
--sl-panel-border-color: var(--sl-color-gray-20);
--sl-panel-background-color: var(--sl-color-gray-900);
--sl-panel-border-color: var(--sl-color-gray-800);
/* Tooltips */
--sl-tooltip-background-color: var(--sl-color-gray-80);
--sl-tooltip-background-color: var(--sl-color-gray-200);
--sl-tooltip-color: var(--sl-color-black);
}
/* Alert */
.sl-theme-dark sl-alert::part(base) {
background-color: var(--sl-color-gray-10);
border-left-color: var(--sl-color-gray-20);
border-right-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-80);
background-color: var(--sl-color-gray-900);
border-left-color: var(--sl-color-gray-800);
border-right-color: var(--sl-color-gray-800);
border-bottom-color: var(--sl-color-gray-800);
color: var(--sl-color-gray-200);
}
/* Avatar */
.sl-theme-dark sl-avatar::part(base) {
background-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-70);
background-color: var(--sl-color-gray-700);
color: var(--sl-color-gray-300);
}
/* Button */
.sl-theme-dark sl-button[type='default']::part(base) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-700);
color: var(--sl-color-gray-400);
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-950);
border-color: var(--sl-color-primary-800);
color: var(--sl-color-primary-400);
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-950);
border-color: var(--sl-color-primary-800);
color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);
background-color: var(--sl-color-primary-900);
border-color: var(--sl-color-primary-700);
color: var(--sl-color-primary-300);
}
/* Card */
.sl-theme-dark sl-card::part(base) {
background-color: var(--sl-color-gray-10);
--border-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-900);
--border-color: var(--sl-color-gray-800);
}
/* Checkbox & radio */
.sl-theme-dark sl-checkbox::part(control),
.sl-theme-dark sl-radio::part(control) {
color: var(--sl-color-gray-10);
color: var(--sl-color-gray-900);
}
/* Color picker */
.sl-theme-dark sl-color-picker::part(format-button) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-700);
color: var(--sl-color-gray-400);
}
.sl-theme-dark sl-color-picker::part(format-button):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-950);
border-color: var(--sl-color-primary-800);
color: var(--sl-color-primary-400);
}
.sl-theme-dark sl-color-picker::part(format-button):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
background-color: var(--sl-color-primary-950);
border-color: var(--sl-color-primary-800);
color: var(--sl-color-primary-400);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
.sl-theme-dark sl-color-picker::part(format-button):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);
background-color: var(--sl-color-primary-900);
border-color: var(--sl-color-primary-700);
color: var(--sl-color-primary-300);
}
.sl-theme-dark sl-color-picker::part(panel) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-900);
border-color: var(--sl-color-gray-800);
}
.sl-theme-dark sl-color-picker::part(slider-handle) {
background-color: var(--sl-color-gray-10);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
background-color: var(--sl-color-gray-800);
box-shadow: 0 0 0 1px var(--sl-color-gray-600);
}
.sl-theme-dark sl-color-picker::part(slider-handle):focus {
box-shadow: 0 0 0 1px hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%),
var(--sl-focus-ring-box-shadow);
box-shadow: 0 0 0 1px var(--sl-color-primary-500), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.sl-theme-dark sl-color-picker::part(grid-handle) {
border-color: var(--sl-color-gray-10);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.sl-theme-dark sl-color-picker::part(grid-handle):focus {
box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
inset 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
var(--sl-focus-ring-box-shadow);
border-color: var(--sl-color-gray-900);
}
.sl-theme-dark sl-color-picker::part(preview),
@ -292,148 +150,163 @@
}
.sl-theme-dark sl-color-picker::part(swatches) {
border-top-color: var(--sl-color-gray-20);
border-top-color: var(--sl-color-gray-800);
}
/* Details */
.sl-theme-dark sl-details::part(base) {
border-color: var(--sl-color-gray-20);
border-color: var(--sl-color-gray-800);
}
/* Icon button */
.sl-theme-dark sl-icon-button::part(base) {
color: var(--sl-color-gray-60);
color: var(--sl-color-gray-400);
}
.sl-theme-dark sl-icon-button:not([disabled])::part(base):hover,
.sl-theme-dark sl-icon-button:not([disabled])::part(base):focus {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
.sl-theme-dark sl-icon-button:not([disabled])::part(base):active {
color: var(--sl-color-primary-60);
color: var(--sl-color-primary-400);
}
/* Image comparer */
.sl-theme-dark sl-image-comparer::part(divider),
.sl-theme-dark sl-image-comparer::part(handle) {
background-color: var(--sl-color-gray-10);
color: var(--sl-color-gray-60);
background-color: var(--sl-color-gray-900);
color: var(--sl-color-gray-400);
}
/* Menu item */
.sl-theme-dark sl-menu-item::part(base) {
color: var(--sl-color-gray-80);
color: var(--sl-color-gray-200);
}
.sl-theme-dark sl-menu-item::part(base):focus {
background-color: var(--sl-color-primary-15);
color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-950);
color: var(--sl-color-primary-500);
}
.sl-theme-dark sl-menu-item[disabled]::part(base) {
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
}
/* Menu label */
.sl-theme-dark sl-menu-label::part(base) {
color: var(--sl-color-gray-40);
color: var(--sl-color-gray-600);
}
/* Progress bar */
.sl-theme-dark sl-progress-bar::part(base) {
background-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-800);
}
.sl-theme-dark sl-progress-bar::part(indicator) {
color: var(--sl-color-gray-10);
color: var(--sl-color-gray-900);
}
/* Progress ring */
.sl-theme-dark sl-progress-ring::part(base) {
--track-color: var(--sl-color-gray-20);
--track-color: var(--sl-color-gray-800);
}
/* Range */
.sl-theme-dark sl-range {
--track-color: var(--sl-color-gray-20);
--track-color: var(--sl-color-gray-800);
}
/* Rating */
.sl-theme-dark sl-rating {
--symbol-color: var(--sl-color-gray-35);
--symbol-color: var(--sl-color-gray-700);
}
/* Select */
.sl-theme-dark sl-select::part(tag) {
background-color: var(--sl-color-info-15);
border-color: var(--sl-color-info-30);
color: var(--sl-color-info-70);
background-color: var(--sl-color-info-800);
border-color: var(--sl-color-info-700);
color: var(--sl-color-info-300);
}
/* Skeleton */
.sl-theme-dark sl-skeleton {
--color: var(--sl-color-gray-20);
--sheen-color: var(--sl-color-gray-25);
--color: var(--sl-color-gray-800);
--sheen-color: var(--sl-color-gray-700);
}
/* Spinner */
.sl-theme-dark sl-spinner {
--track-color: var(--sl-color-gray-20);
--track-color: #f9fafb20;
}
/* Switch */
.sl-theme-dark sl-switch::part(control) {
background-color: var(--sl-color-gray-30);
border-color: var(--sl-color-gray-30);
.sl-theme-dark sl-switch::part(thumb) {
background-color: var(--sl-color-gray-900);
}
.sl-theme-dark sl-switch::part(thumb) {
background-color: var(--sl-color-gray-10);
.sl-theme-dark sl-switch::part(control) {
background-color: var(--sl-color-gray-700);
border-color: var(--sl-color-gray-700);
}
.sl-theme-dark sl-switch:not([disabled])::part(control):hover {
background-color: var(--sl-color-gray-600);
border-color: var(--sl-color-gray-600);
}
.sl-theme-dark sl-switch[checked]::part(control) {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
}
.sl-theme-dark sl-switch[checked]::part(control):hover {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
}
/* Tab group */
.sl-theme-dark sl-tab-group::part(tabs) {
--tabs-border-color: var(--sl-color-gray-20);
--tabs-border-color: var(--sl-color-gray-800);
}
/* Tab */
.sl-theme-dark sl-tab::part(base) {
color: var(--sl-color-gray-60);
color: var(--sl-color-gray-400);
}
.sl-theme-dark sl-tab:not([disabled])::part(base):hover,
.sl-theme-dark sl-tab[active]::part(base) {
color: var(--sl-color-primary-50);
color: var(--sl-color-primary-500);
}
/* Tag */
.sl-theme-dark sl-tag[type='primary']::part(base) {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-70);
background-color: var(--sl-color-primary-950);
border-color: var(--sl-color-primary-900);
color: var(--sl-color-primary-300);
}
.sl-theme-dark sl-tag[type='success']::part(base) {
background-color: var(--sl-color-success-15);
border-color: var(--sl-color-success-30);
color: var(--sl-color-success-65);
background-color: var(--sl-color-success-950);
border-color: var(--sl-color-success-900);
color: var(--sl-color-success-300);
}
.sl-theme-dark sl-tag[type='info']::part(base) {
background-color: var(--sl-color-info-15);
border-color: var(--sl-color-info-30);
color: var(--sl-color-info-70);
background-color: var(--sl-color-info-800);
border-color: var(--sl-color-info-700);
color: var(--sl-color-info-300);
}
.sl-theme-dark sl-tag[type='warning']::part(base) {
background-color: var(--sl-color-warning-15);
border-color: var(--sl-color-warning-30);
color: var(--sl-color-warning-70);
background-color: var(--sl-color-warning-950);
border-color: var(--sl-color-warning-900);
color: var(--sl-color-warning-300);
}
.sl-theme-dark sl-tag[type='danger']::part(base) {
background-color: var(--sl-color-danger-15);
border-color: var(--sl-color-danger-30);
color: var(--sl-color-danger-75);
background-color: var(--sl-color-danger-950);
border-color: var(--sl-color-danger-900);
color: var(--sl-color-danger-300);
}