From fcd432d8b7cf54442d783af3e5c957b814c69283 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 22 Dec 2020 09:40:11 -0500
Subject: [PATCH] Rework color tokens

---
 docs/assets/plugins/code-block/code-block.css |  66 +--
 docs/assets/styles/demos.css                  |  12 +-
 docs/assets/styles/docs-dark.css              |  76 ++--
 docs/assets/styles/docs.css                   |  84 ++--
 docs/components/animation.md                  |   8 +-
 docs/components/card.md                       |   2 +-
 docs/components/color-picker.md               |   2 +-
 docs/components/dialog.md                     |   2 +-
 docs/components/drawer.md                     |   2 +-
 docs/components/form.md                       |  12 +-
 docs/components/icon.md                       |   6 +-
 docs/components/spinner.md                    |   2 +-
 docs/components/switch.md                     |   2 +-
 docs/components/theme.md                      |   2 +-
 docs/getting-started/changelog.md             |  10 +
 docs/getting-started/community.md             |  10 +
 docs/getting-started/customizing.md           |  14 +-
 docs/getting-started/overview.md              |   4 +-
 docs/getting-started/themes.md                |  10 +-
 docs/tokens/color.md                          | 233 +++++------
 src/components.d.ts                           |   4 +-
 src/components/alert/alert.scss               |  24 +-
 src/components/avatar/avatar.scss             |   2 +-
 src/components/badge/badge.scss               |  31 +-
 src/components/button/button.scss             | 134 +++---
 src/components/card/card.scss                 |   2 +-
 src/components/checkbox/checkbox.scss         |  16 +-
 src/components/color-picker/color-picker.scss |  21 +-
 src/components/details/details.scss           |   4 +-
 src/components/icon-button/icon-button.scss   |   8 +-
 .../image-comparer/image-comparer.scss        |   6 +-
 src/components/input/input.scss               |   4 +-
 src/components/menu-item/menu-item.scss       |   8 +-
 src/components/menu-label/menu-label.scss     |   2 +-
 src/components/progress-bar/progress-bar.scss |   4 +-
 .../progress-ring/progress-ring.scss          |   4 +-
 src/components/radio/radio.scss               |  16 +-
 src/components/range/range.scss               |  38 +-
 src/components/rating/rating.scss             |   4 +-
 src/components/select/select.scss             |   2 +-
 src/components/skeleton/skeleton.scss         |   4 +-
 src/components/spinner/spinner.scss           |   5 +-
 src/components/switch/switch.scss             |  36 +-
 src/components/tab-group/tab-group.scss       |  10 +-
 src/components/tab/tab.scss                   |  10 +-
 src/components/tag/tag.scss                   |  30 +-
 src/components/textarea/textarea.scss         |   2 +-
 src/styles/form-control-help-text.scss        |   4 -
 src/styles/form-control-label.scss            |   4 -
 src/styles/mixins/make-color-palette.scss     |   8 -
 src/styles/shoelace.scss                      | 166 +++++---
 themes/dark.css                               | 385 ++++++------------
 52 files changed, 712 insertions(+), 845 deletions(-)
 delete mode 100644 src/styles/mixins/make-color-palette.scss

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index edb93930..54fda8f3 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -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);
 }
diff --git a/docs/assets/styles/demos.css b/docs/assets/styles/demos.css
index 559dfa0e..848e01a3 100644
--- a/docs/assets/styles/demos.css
+++ b/docs/assets/styles/demos.css
@@ -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);
 }
diff --git a/docs/assets/styles/docs-dark.css b/docs/assets/styles/docs-dark.css
index 656589d4..64b17446 100644
--- a/docs/assets/styles/docs-dark.css
+++ b/docs/assets/styles/docs-dark.css
@@ -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);
 }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 4da7754e..c53a1927 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -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) {
diff --git a/docs/components/animation.md b/docs/components/animation.md
index 43b490b5..d72c8544 100644
--- a/docs/components/animation.md
+++ b/docs/components/animation.md
@@ -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>
 ```
diff --git a/docs/components/card.md b/docs/components/card.md
index ab9e922e..5ec2ae09 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -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"] {
diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md
index 5ee58a11..87b73644 100644
--- a/docs/components/color-picker.md
+++ b/docs/components/color-picker.md
@@ -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>
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 2b934813..f33db284 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -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>
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index 1ef69b23..59069bd9 100644
--- a/docs/components/drawer.md
+++ b/docs/components/drawer.md
@@ -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>
diff --git a/docs/components/form.md b/docs/components/form.md
index 202c86d9..d4415c28 100644
--- a/docs/components/form.md
+++ b/docs/components/form.md
@@ -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>
 ```
diff --git a/docs/components/icon.md b/docs/components/icon.md
index 92d95325..5730e060 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -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"] {
diff --git a/docs/components/spinner.md b/docs/components/spinner.md
index f97ae36b..f8a7f9a1 100644
--- a/docs/components/spinner.md
+++ b/docs/components/spinner.md
@@ -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>
diff --git a/docs/components/switch.md b/docs/components/switch.md
index 6bc9dd0b..e7761403 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -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]
diff --git a/docs/components/theme.md b/docs/components/theme.md
index 921f7820..0efdca08 100644
--- a/docs/components/theme.md
+++ b/docs/components/theme.md
@@ -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>
diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index daba007b..5a0e5e44 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -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
diff --git a/docs/getting-started/community.md b/docs/getting-started/community.md
index 99609099..ae4d0798 100644
--- a/docs/getting-started/community.md
+++ b/docs/getting-started/community.md
@@ -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.
diff --git a/docs/getting-started/customizing.md b/docs/getting-started/customizing.md
index f7bb2ff2..4be14e52 100644
--- a/docs/getting-started/customizing.md
+++ b/docs/getting-started/customizing.md
@@ -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;
 }
 ```
 
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 4fe679c5..f5b8d6cc 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -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)
diff --git a/docs/getting-started/themes.md b/docs/getting-started/themes.md
index 4b6d6758..25e86fb2 100644
--- a/docs/getting-started/themes.md
+++ b/docs/getting-started/themes.md
@@ -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;
+  /* ... */
 }
 ```
 
diff --git a/docs/tokens/color.md b/docs/tokens/color.md
index 47ffc10c..08e1ae9e 100644
--- a/docs/tokens/color.md
+++ b/docs/tokens/color.md
@@ -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> |
\ No newline at end of file
diff --git a/src/components.d.ts b/src/components.d.ts
index 6ace2490..0782e91d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -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.
          */
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index aff89365..c92e09c2 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -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);
   }
 }
 
diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss
index e5ba240b..9c52efd7 100644
--- a/src/components/avatar/avatar.scss
+++ b/src/components/avatar/avatar.scss
@@ -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);
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index 131d46c3..d7548e8d 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -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;
   }
 }
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 240999fb..d9249446 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -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;
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 33ec1cf3..4ffe269d 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -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);
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index e984c657..8ca977fe 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -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
diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss
index a33fe38f..05e743cb 100644
--- a/src/components/color-picker/color-picker.scss
+++ b/src/components/color-picker/color-picker.scss
@@ -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);
     }
   }
 
diff --git a/src/components/details/details.scss b/src/components/details/details.scss
index 354068a5..439bcf13 100644
--- a/src/components/details/details.scss
+++ b/src/components/details/details.scss
@@ -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 {
diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index 89a1d88a..ec02f648 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -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);
 }
diff --git a/src/components/image-comparer/image-comparer.scss b/src/components/image-comparer/image-comparer.scss
index d45569de..46cd611f 100644
--- a/src/components/image-comparer/image-comparer.scss
+++ b/src/components/image-comparer/image-comparer.scss
@@ -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);
   }
 }
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 3629081c..147fb979 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -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 {
diff --git a/src/components/menu-item/menu-item.scss b/src/components/menu-item/menu-item.scss
index 77468664..5f321128 100644
--- a/src/components/menu-item/menu-item.scss
+++ b/src/components/menu-item/menu-item.scss
@@ -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;
   }
 
diff --git a/src/components/menu-label/menu-label.scss b/src/components/menu-label/menu-label.scss
index 6e330c4d..17aed4fb 100644
--- a/src/components/menu-label/menu-label.scss
+++ b/src/components/menu-label/menu-label.scss
@@ -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;
 }
diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index 46da8cd4..2a68df4f 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -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;
diff --git a/src/components/progress-ring/progress-ring.scss b/src/components/progress-ring/progress-ring.scss
index 032de859..48490378 100644
--- a/src/components/progress-ring/progress-ring.scss
+++ b/src/components/progress-ring/progress-ring.scss
@@ -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;
 }
diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss
index a5a1d799..812cc90d 100644
--- a/src/components/radio/radio.scss
+++ b/src/components/radio/radio.scss
@@ -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
diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index c563506f..3e7bff6f 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -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;
     }
 
diff --git a/src/components/rating/rating.scss b/src/components/rating/rating.scss
index 06165dd0..8c474819 100644
--- a/src/components/rating/rating.scss
+++ b/src/components/rating/rating.scss
@@ -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);
   }
 }
 
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 10f2e2ab..738fc1c4 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -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;
 }
diff --git a/src/components/skeleton/skeleton.scss b/src/components/skeleton/skeleton.scss
index e55a04be..dd6556ff 100644
--- a/src/components/skeleton/skeleton.scss
+++ b/src/components/skeleton/skeleton.scss
@@ -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;
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index 435dfb66..2cefd327 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -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;
 }
 
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index 520a0a76..5e9a742d 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -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);
   }
 }
 
diff --git a/src/components/tab-group/tab-group.scss b/src/components/tab-group/tab-group.scss
index 0ed267ca..986c0978 100644
--- a/src/components/tab-group/tab-group.scss
+++ b/src/components/tab-group/tab-group.scss
@@ -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 {
diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
index dd6d5f15..c3a17549 100644
--- a/src/components/tab/tab.scss
+++ b/src/components/tab/tab.scss
@@ -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 {
diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss
index 5704317d..b7c2a18d 100644
--- a/src/components/tag/tag.scss
+++ b/src/components/tag/tag.scss
@@ -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);
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/src/components/textarea/textarea.scss b/src/components/textarea/textarea.scss
index 4fab42b4..5da7184f 100644
--- a/src/components/textarea/textarea.scss
+++ b/src/components/textarea/textarea.scss
@@ -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 {
diff --git a/src/styles/form-control-help-text.scss b/src/styles/form-control-help-text.scss
index c0b927f9..d4b8a101 100644
--- a/src/styles/form-control-help-text.scss
+++ b/src/styles/form-control-help-text.scss
@@ -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);
   }
diff --git a/src/styles/form-control-label.scss b/src/styles/form-control-label.scss
index c8190da1..83684a00 100644
--- a/src/styles/form-control-label.scss
+++ b/src/styles/form-control-label.scss
@@ -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);
     }
diff --git a/src/styles/mixins/make-color-palette.scss b/src/styles/mixins/make-color-palette.scss
deleted file mode 100644
index f82d0848..00000000
--- a/src/styles/mixins/make-color-palette.scss
+++ /dev/null
@@ -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%});
-    }
-  }
-}
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index 175ef963..3a8aacf8 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -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);
diff --git a/themes/dark.css b/themes/dark.css
index b590450a..388e00f7 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -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);
 }