diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index ef6b54fd..72b5a5cb 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -39,7 +39,7 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--sl-color-neutral-600);
+  color: var(--sl-color-neutral-700);
   background-color: var(--sl-color-neutral-0);
   border-left: solid 1px var(--sl-color-neutral-200);
   border-top-right-radius: 3px;
@@ -91,7 +91,7 @@
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
-  color: var(--sl-color-neutral-600);
+  color: var(--sl-color-neutral-700);
   padding: 0 1rem;
   cursor: pointer;
 }
@@ -110,7 +110,7 @@
 
 .code-block__button--selected {
   font-weight: 700;
-  color: var(--sl-color-primary-600);
+  color: var(--sl-color-primary-700);
 }
 
 .code-block__button--codepen {
@@ -138,7 +138,7 @@
 
 .code-block__button:focus-visible {
   outline: none;
-  color: var(--sl-color-primary-600);
+  color: var(--sl-color-primary-700);
   border-color: var(--sl-color-primary-400);
   border-right-color: transparent;
   background-color: var(--sl-color-primary-50);
@@ -153,7 +153,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  color: var(--sl-color-neutral-600);
+  color: var(--sl-color-neutral-700);
   cursor: pointer;
   -webkit-appearance: none;
 }
@@ -185,7 +185,7 @@
 
 .markdown-section .docsify-copy-code-button.copied {
   animation: pulse 0.75s;
-  --pulse-color: var(--sl-color-neutral-600);
+  --pulse-color: var(--sl-color-neutral-700);
 }
 
 @keyframes pulse {
@@ -214,7 +214,7 @@
 }
 
 .markdown-section .docsify-copy-code-button:active {
-  background-color: var(--sl-color-neutral-600);
+  background-color: var(--sl-color-neutral-700);
   transform: scale(0.92);
 }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index c7d06ce3..e1632491 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -19,11 +19,11 @@ body {
 }
 
 a {
-  color: var(--sl-color-primary-600);
+  color: var(--sl-color-primary-700);
 }
 
 a:hover {
-  color: var(--sl-color-primary-700);
+  color: var(--sl-color-primary-800);
 }
 
 strong {
@@ -70,7 +70,7 @@ strong {
 }
 
 .sidebar-toggle:active .sidebar-toggle-button span {
-  background-color: var(--sl-color-primary-600);
+  background-color: var(--sl-color-primary-700);
 }
 
 .sidebar-toggle:focus {
@@ -110,7 +110,7 @@ strong {
 
 .sidebar-nav li.collapse > a,
 .sidebar-nav li.active > a {
-  color: var(--sl-color-primary-600);
+  color: var(--sl-color-primary-700);
 }
 
 .sidebar li > p {
@@ -316,7 +316,7 @@ kbd,
   display: block;
   background: none;
   border-radius: 0;
-  color: var(--sl-color-neutral-800);
+  color: var(--sl-color-neutral-900);
   padding: var(--sl-spacing-medium);
   overflow: auto;
   hyphens: none;
@@ -331,11 +331,11 @@ kbd,
 .markdown-section pre .token.doctype,
 .markdown-section pre .token.cdata,
 .markdown-section pre .token.operator {
-  color: var(--sl-color-neutral-600);
+  color: var(--sl-color-neutral-700);
 }
 
 .markdown-section pre .token.punctuation {
-  color: var(--sl-color-neutral-600);
+  color: var(--sl-color-neutral-700);
 }
 
 .namespace {
@@ -346,12 +346,12 @@ kbd,
 .markdown-section pre .token.keyword,
 .markdown-section pre .token.tag,
 .markdown-section pre .token.url {
-  color: var(--sl-color-blue-600);
+  color: var(--sl-color-blue-700);
 }
 
 .markdown-section pre .token.symbol,
 .markdown-section pre .token.deleted {
-  color: var(--sl-color-pink-600);
+  color: var(--sl-color-pink-700);
 }
 
 .markdown-section pre .token.boolean,
@@ -362,7 +362,7 @@ kbd,
 .markdown-section pre .token.char,
 .markdown-section pre .token.builtin,
 .markdown-section pre .token.inserted {
-  color: var(--sl-color-emerald-600);
+  color: var(--sl-color-emerald-700);
 }
 
 .markdown-section pre .token.atrule,
@@ -375,11 +375,11 @@ kbd,
 .markdown-section pre .token.function,
 .markdown-section pre .token.class-name,
 .markdown-section pre .token.regex {
-  color: var(--sl-color-orange-600);
+  color: var(--sl-color-orange-700);
 }
 
 .markdown-section pre .token.important {
-  color: var(--sl-color-red-600);
+  color: var(--sl-color-red-700);
 }
 
 .markdown-section pre .token.important,