revert luminance removal and rework surface tokens

docs/assets/plugins/code-block/code-block.css

@@ -1,7 +1,7 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background-color: rgb(var(--sl-surface-base-alt));
+  background-color: rgb(var(--sl-color-neutral-50));
   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-surface-base));
+  background-color: rgb(var(--sl-color-neutral-0));
   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-surface-base));
+  background-color: rgb(var(--sl-color-neutral-0));
   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-surface-base));
+  background: rgb(var(--sl-color-neutral-0));
   font: inherit;
   font-size: 0.7rem;
   font-weight: 500;

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-surface-raised));
+  background-color: rgb(var(--sl-color-neutral-0));
   border-radius: var(--sl-border-radius-large);
   box-shadow: var(--sl-shadow-x-large);
   margin: 10rem auto;
@@ -104,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-surface-raised));
+  color: rgb(var(--sl-color-neutral-0));
   background-color: rgb(var(--sl-color-primary-600));
 }
 

docs/assets/styles/docs.css

@@ -290,7 +290,7 @@ strong {
 .markdown-section code {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
-  background-color: rgb(var(--sl-surface-base-alt));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-radius: var(--sl-border-radius-small);
   padding: 2px 4px;
 }
@@ -302,14 +302,14 @@ kbd,
   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-surface-base));
+  box-shadow: inset 0 1px 0 rgb(var(--sl-color-neutral-0));
   padding: 2px 5px;
 }
 
 /* Code blocks */
 .markdown-section pre {
   position: relative;
-  background-color: rgb(var(--sl-surface-base-alt));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-radius: var(--sl-border-radius-medium);
 }
 
@@ -413,7 +413,7 @@ kbd,
 }
 
 .markdown-section tr:nth-child(2n) {
-  background: rgb(var(--sl-surface-base));
+  background: rgb(var(--sl-color-neutral-50));
 }
 
 .markdown-section th {
@@ -442,7 +442,7 @@ kbd,
 .markdown-section p.tip,
 .markdown-section p.warn {
   position: relative;
-  background-color: rgb(var(--sl-surface-base-alt));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-left: solid 4px transparent;
   border-radius: var(--sl-border-radius-medium);
   padding-left: 1.5rem;

docs/getting-started/themes.md

@@ -108,7 +108,9 @@ You will, however, need to maintain your theme more carefully, as new versions o
 
 ## Dark Theme
 
-The built-in dark theme uses an inverted color scale so, if you're using design tokens as intended, you'll get a decent dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it further depending on your needs.
+The built-in dark theme uses an inverted + shifted color scale so, if you're using design tokens as intended, you'll get a decent dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
+
+This was achieved by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was increased slightly to avoid true black, a color that is typically undesirable in dark themes. The result is a custom palette that complements the light theme well and makes it easy to offer light and dark variations with minimal effort.
 
 To install the dark theme, add the following to the `<head>` section of your page.
 

docs/resources/changelog.md

@@ -8,13 +8,12 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Added initial surface design tokens
+- Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
 - Added missing background color to `<sl-details>`
 - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` 
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
-- Modified the color scale to no longer use a luminance shift
 
 ## 2.0.0-beta.52
 

src/components/alert/alert.styles.ts

@@ -15,7 +15,7 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: rgb(var(--sl-surface-raised));
+    background-color: rgb(var(--sl-surface-base-alt));
     border: solid 1px rgb(var(--sl-color-neutral-200));
     border-top-width: 3px;
     border-radius: var(--sl-border-radius-medium);

src/components/button/button.styles.ts

@@ -70,7 +70,7 @@ export default css`
 
   /* Default */
   .button--standard.button--default {
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-neutral-300));
     color: rgb(var(--sl-color-neutral-700));
   }

src/components/card/card.styles.ts

@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--sl-surface-raised));
+    background-color: rgb(var(--sl-surface-base-alt));
     box-shadow: var(--sl-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);

src/components/details/details.styles.ts

@@ -12,7 +12,7 @@ export default css`
   .details {
     border: solid 1px rgb(var(--sl-color-neutral-200));
     border-radius: var(--sl-border-radius-medium);
-    background-color: rgb(var(--sl-surface-raised));
+    background-color: rgb(var(--sl-color-neutral-0));
     overflow-anchor: none;
   }
 

src/components/switch/switch.styles.ts

@@ -41,7 +41,7 @@ export default css`
   .switch__control .switch__thumb {
     width: var(--thumb-size);
     height: var(--thumb-size);
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-radius: 50%;
     border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-400));
     transform: translateX(calc((var(--width) - var(--height)) / -2));
@@ -64,7 +64,7 @@ export default css`
   }
 
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-neutral-400));
   }
 
@@ -90,7 +90,7 @@ export default css`
   }
 
   .switch--checked .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     transform: translateX(calc((var(--width) - var(--height)) / 2));
   }
@@ -102,7 +102,7 @@ export default css`
   }
 
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
   }
 
@@ -116,7 +116,7 @@ export default css`
     .switch__input${focusVisibleSelector}
     ~ .switch__control
     .switch__thumb {
-    background-color: rgb(var(--sl-surface-base));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }