From 723ee80c8fb1fe42fda5d7a1849d47dd8e3d00d9 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 23 Sep 2021 08:52:49 -0400
Subject: [PATCH] update docs to use surface tokens

---
 docs/assets/plugins/code-block/code-block.css |   8 +-
 docs/assets/plugins/search/search.css         |   5 +-
 docs/assets/styles/docs.css                   | 106 ++----------------
 3 files changed, 16 insertions(+), 103 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 25a7f2a22..9b1b8e838 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -1,7 +1,7 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background-color: rgb(var(--sl-color-neutral-50));
+  background-color: rgb(var(--sl-surface-base-alt));
   margin-bottom: 1.5rem;
 }
 
@@ -11,7 +11,7 @@
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-base));
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -40,7 +40,7 @@
   width: 1.75rem;
   font-size: 20px;
   color: rgb(var(--sl-color-neutral-600));
-  background-color: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-base));
   border-left: solid 1px rgb(var(--sl-color-neutral-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
@@ -83,7 +83,7 @@
   min-width: 2.5rem;
   border: none;
   border-radius: 0;
-  background: rgb(var(--sl-color-neutral-0));
+  background: rgb(var(--sl-surface-base));
   font: inherit;
   font-size: 0.7rem;
   font-weight: 500;
diff --git a/docs/assets/plugins/search/search.css b/docs/assets/plugins/search/search.css
index 5d1d0bcfa..c98b5a016 100644
--- a/docs/assets/plugins/search/search.css
+++ b/docs/assets/plugins/search/search.css
@@ -39,7 +39,7 @@ body.site-search-visible {
   flex-direction: column;
   max-width: 460px;
   max-height: calc(100vh - 20rem);
-  background-color: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-raised));
   border-radius: var(--sl-border-radius-large);
   box-shadow: var(--sl-shadow-x-large);
   margin: 10rem auto;
@@ -55,6 +55,7 @@ body.site-search-visible {
 
 .site-search__input::part(base) {
   border: none;
+  background: transparent;
   border-radius: var(--sl-border-radius-large);
 }
 
@@ -103,7 +104,7 @@ body.site-search-visible {
 .site-search__results li[aria-selected='true'] a small,
 .site-search__results li[aria-selected='true'] a sl-icon {
   outline: none;
-  color: rgb(var(--sl-color-neutral-0));
+  color: rgb(var(--sl-surface-raised));
   background-color: rgb(var(--sl-color-primary-600));
 }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 7c34c12da..ab7fdcb14 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -13,7 +13,7 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-normal);
-  background-color: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-base));
   color: rgb(var(--sl-color-neutral-800));
   line-height: var(--sl-line-height-normal);
 }
@@ -32,7 +32,7 @@ strong {
 
 /* Sidebar */
 .sidebar {
-  background: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-base));
   border-right: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
@@ -54,94 +54,6 @@ strong {
   margin-top: 0;
 }
 
-/* Search */
-.sidebar .search {
-  position: relative;
-  border: none;
-}
-
-.sidebar .search input[type='search'] {
-  background-color: rgb(var(--sl-input-background-color));
-  border: solid 1px rgb(var(--sl-input-border-color));
-  border-radius: var(--sl-border-radius-pill);
-  color: rgb(var(--sl-input-color));
-  padding-left: 1rem;
-  padding-right: 2rem;
-  margin: 0 1.25rem;
-  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-}
-
-.sidebar .search input[type='search']::placeholder {
-  color: rgb(var(--sl-input-placeholder-color));
-}
-
-.sidebar .search input[type='search']:hover {
-  background-color: rgb(var(--sl-input-background-color-hover));
-  border-color: rgb(var(--sl-input-border-color-hover));
-  color: rgb(var(--sl-input-color-hover));
-}
-
-.sidebar .search input[type='search']:focus {
-  background-color: rgb(var(--sl-input-background-color-focus));
-  box-shadow: var(--sl-focus-ring);
-  border-color: rgb(var(--sl-input-border-color-focus));
-  color: rgb(var(--sl-input-color-focus));
-  outline: none;
-}
-
-.sidebar .input-wrap {
-  position: relative;
-  width: 100%;
-  padding: 0 0.25rem;
-}
-
-.sidebar .clear-button {
-  position: absolute;
-  right: 34px;
-  top: 7px;
-  width: 22px !important;
-  height: 22px !important;
-}
-
-.sidebar .clear-button svg {
-  transform: scale(0.75) !important;
-}
-
-.sidebar .clear-button svg circle {
-  fill: rgb(var(--sl-color-neutral-500));
-}
-
-.sidebar .clear-button svg path {
-  stroke: rgb(var(--sl-color-neutral-0));
-}
-
-.sidebar .clear-button:focus {
-  outline: none;
-}
-
-.search .results-panel {
-  margin-top: 1rem;
-}
-
-.search .matching-post {
-  border-bottom: solid 1px rgb(var(--sl-color-neutral-600)) !important;
-  padding: 0.25rem 1.5rem;
-}
-
-.search .matching-post a {
-  display: block;
-  border-radius: inherit;
-  padding: 0.5rem;
-}
-
-.search .matching-post h2 {
-  margin-bottom: 0;
-}
-
-.search .matching-post p {
-  margin-top: 0;
-}
-
 /* Sidebar toggle */
 .sidebar-toggle {
   top: 0.25rem;
@@ -149,7 +61,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: rgb(var(--sl-color-neutral-0));
+  background-color: rgb(var(--sl-surface-base));
   padding: 0.5rem;
 }
 
@@ -378,7 +290,7 @@ strong {
 .markdown-section code {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
-  background-color: rgb(var(--sl-color-neutral-50));
+  background-color: rgb(var(--sl-surface-base-alt));
   border-radius: var(--sl-border-radius-small);
   padding: 2px 4px;
 }
@@ -387,17 +299,17 @@ kbd,
 .markdown-section kbd {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
-  background-color: rgb(var(--sl-color-neutral-100));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-radius: var(--sl-border-radius-small);
   border: solid 1px rgb(var(--sl-color-neutral-200));
-  box-shadow: inset 0 1px 0 rgb(var(--sl-color-neutral-0));
+  box-shadow: inset 0 1px 0 rgb(var(--sl-surface-base));
   padding: 2px 5px;
 }
 
 /* Code blocks */
 .markdown-section pre {
   position: relative;
-  background-color: rgb(var(--sl-color-neutral-50));
+  background-color: rgb(var(--sl-surface-base-alt));
   border-radius: var(--sl-border-radius-medium);
 }
 
@@ -501,7 +413,7 @@ kbd,
 }
 
 .markdown-section tr:nth-child(2n) {
-  background: rgb(var(--sl-color-neutral-50));
+  background: rgb(var(--sl-surface-base));
 }
 
 .markdown-section th {
@@ -530,7 +442,7 @@ kbd,
 .markdown-section p.tip,
 .markdown-section p.warn {
   position: relative;
-  background-color: rgb(var(--sl-color-neutral-50));
+  background-color: rgb(var(--sl-surface-base-alt));
   border-left: solid 4px transparent;
   border-radius: var(--sl-border-radius-medium);
   padding-left: 1.5rem;