From 0829af77c09ec825a3ee924042e036f3e864d0e7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 25 Aug 2021 17:48:37 -0400
Subject: [PATCH] fix --sl-color-neutral-0|1000

---
 docs/assets/plugins/code-block/code-block.css |  6 +--
 docs/assets/styles/docs.css                   | 16 +++----
 docs/components/avatar.md                     |  2 +-
 docs/getting-started/customizing.md           |  2 +-
 docs/resources/changelog.md                   |  1 +
 docs/tokens/color.md                          |  4 +-
 src/components/alert/alert.styles.ts          |  2 +-
 src/components/avatar/avatar.styles.ts        |  2 +-
 src/components/badge/badge.styles.ts          | 10 ++---
 src/components/button/button.styles.ts        | 44 +++++++++----------
 src/components/card/card.styles.ts            |  2 +-
 src/components/checkbox/checkbox.styles.ts    |  2 +-
 .../image-comparer/image-comparer.styles.ts   |  4 +-
 src/components/menu-item/menu-item.styles.ts  |  2 +-
 .../progress-bar/progress-bar.styles.ts       |  2 +-
 src/components/radio/radio.styles.ts          |  2 +-
 src/components/switch/switch.styles.ts        | 12 ++---
 src/themes/dark.styles.ts                     | 14 +++---
 src/themes/light.styles.ts                    | 14 +++---
 19 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 994b0842a..a3ec233c8 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -11,7 +11,7 @@
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: rgb(var(--sl-color-neutral-1000));
+  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-color-neutral-1000));
+  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;
@@ -92,7 +92,7 @@
   min-width: 2.5rem;
   border: none;
   border-radius: 0;
-  background: rgb(var(--sl-color-neutral-1000));
+  background: rgb(var(--sl-color-neutral-0));
   font: inherit;
   font-size: 0.7rem;
   font-weight: 500;
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 1a070cad0..41bf6900e 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-1000));
+  background-color: rgb(var(--sl-color-neutral-0));
   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-1000));
+  background: rgb(var(--sl-color-neutral-0));
   border-right: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
@@ -109,11 +109,11 @@ strong {
 }
 
 .sidebar .clear-button svg circle {
-  fill: rgb(var(--sl-color-neutral-400));
+  fill: rgb(var(--sl-color-neutral-500));
 }
 
 .sidebar .clear-button svg path {
-  stroke: rgb(var(--sl-color-neutral-1000));
+  stroke: rgb(var(--sl-color-neutral-0));
 }
 
 .sidebar .clear-button:focus {
@@ -150,7 +150,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: rgb(var(--sl-color-neutral-1000));
+  background-color: rgb(var(--sl-color-neutral-0));
   padding: 0.5rem;
 }
 
@@ -285,7 +285,7 @@ strong {
 }
 
 .anchor span {
-  color: rgb(var(--sl-color-neutral-0));
+  color: rgb(var(--sl-color-neutral-1000));
 }
 
 .markdown-section blockquote {
@@ -529,7 +529,7 @@ strong {
 .markdown-section p.warn:before {
   content: '!';
   border-radius: 100%;
-  color: rgb(var(--sl-color-neutral-1000));
+  color: rgb(var(--sl-color-neutral-0));
   font-size: 14px;
   font-weight: bold;
   left: -12px;
@@ -687,7 +687,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 }
 
 .color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-0) / 10%);
+  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-1000) / 10%);
 }
 
 @media screen and (max-width: 1200px) {
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index ed59431b4..0ec63dfdb 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
   }
 
   .avatar-group sl-avatar::part(base) {
-    border: solid 2px rgb(var(--sl-color-neutral-1000));
+    border: solid 2px rgb(var(--sl-color-neutral-0));
   }
 </style>
 ```
diff --git a/docs/getting-started/customizing.md b/docs/getting-started/customizing.md
index 14f1d7c3b..21e305bf2 100644
--- a/docs/getting-started/customizing.md
+++ b/docs/getting-started/customizing.md
@@ -46,7 +46,7 @@ Here's an example that modifies buttons with the `tomato-button` class.
 
 <style>
   .tomato-button::part(base) {
-    background: rgb(var(--sl-color-neutral-1000));
+    background: rgb(var(--sl-color-neutral-0));
     border: solid 1px tomato;
   }
 
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 3640391b3..4515f1237 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
 - Added `--swatch-size` custom property to `sl-color-picker`
 - Added `date` to `sl-input` as a supported `type`
 - Adjusted elevation tokens to use neutral in light mode and black in dark mode
diff --git a/docs/tokens/color.md b/docs/tokens/color.md
index 57d7a9a78..0d62b177c 100644
--- a/docs/tokens/color.md
+++ b/docs/tokens/color.md
@@ -129,8 +129,8 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
     Black & White<br>
     <code>--sl-color-neutral-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
+  <div class="color-palette__example"><div class="color-palette__swatch " style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
 </div>
 
 ?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index f1f39da0d..3d8c4d428 100644
--- a/src/components/alert/alert.styles.ts
+++ b/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-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border: solid 1px rgb(var(--sl-color-neutral-200));
     border-top-width: 3px;
     border-radius: var(--sl-border-radius-medium);
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 2b11d58e0..7daa24a12 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -21,7 +21,7 @@ export default css`
     font-family: var(--sl-font-sans);
     font-size: calc(var(--size) * 0.5);
     font-weight: var(--sl-font-weight-normal);
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     overflow: hidden;
     user-select: none;
     vertical-align: middle;
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index 82f17367e..fae773fd4 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -26,27 +26,27 @@ export default css`
   /* Type modifiers */
   .badge--primary {
     background-color: rgb(var(--sl-color-primary-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .badge--success {
     background-color: rgb(var(--sl-color-success-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .badge--neutral {
     background-color: rgb(var(--sl-color-neutral-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .badge--warning {
     background-color: rgb(var(--sl-color-warning-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .badge--danger {
     background-color: rgb(var(--sl-color-danger-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /* Pill modifier */
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index dc573389e..38aa1a2f4 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -69,7 +69,7 @@ export default css`
 
   /* Default */
   .button.button--default {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-neutral-300));
     color: rgb(var(--sl-color-neutral-700));
   }
@@ -97,129 +97,129 @@ export default css`
   .button.button--primary {
     background-color: rgb(var(--sl-color-primary-600));
     border-color: rgb(var(--sl-color-primary-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--primary:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--primary:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--primary:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-600));
     border-color: rgb(var(--sl-color-primary-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /* Success */
   .button.button--success {
     background-color: rgb(var(--sl-color-success-600));
     border-color: rgb(var(--sl-color-success-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--success:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-500));
     border-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--success:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-600));
     border-color: rgb(var(--sl-color-success-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-success-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--success:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-600));
     border-color: rgb(var(--sl-color-success-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /* Neutral */
   .button.button--neutral {
     background-color: rgb(var(--sl-color-neutral-600));
     border-color: rgb(var(--sl-color-neutral-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--neutral:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-500));
     border-color: rgb(var(--sl-color-neutral-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--neutral:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-500));
     border-color: rgb(var(--sl-color-neutral-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--neutral:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-600));
     border-color: rgb(var(--sl-color-neutral-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /* Warning */
   .button.button--warning {
     background-color: rgb(var(--sl-color-warning-600));
     border-color: rgb(var(--sl-color-warning-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
   .button.button--warning:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-500));
     border-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--warning:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-500));
     border-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-warning-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--warning:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-600));
     border-color: rgb(var(--sl-color-warning-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /* Danger */
   .button.button--danger {
     background-color: rgb(var(--sl-color-danger-600));
     border-color: rgb(var(--sl-color-danger-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--danger:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-500));
     border-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .button.button--danger:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-500));
     border-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--danger:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-600));
     border-color: rgb(var(--sl-color-danger-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   /*
@@ -482,7 +482,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px rgb(var(--sl-color-neutral-1000) / 20%);
+    border-left: solid 1px rgb(var(--sl-color-neutral-0) / 20%);
   }
 
   /* Bump focused buttons up so their focus ring isn't clipped */
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 489d02994..528de26fd 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     box-shadow: var(--sl-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index ec348aceb..2498d1a36 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -30,7 +30,7 @@ export default css`
     border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     border-radius: 2px;
     background-color: rgb(var(--sl-input-background-color));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
   }
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
index d9ec8fcdb..3892f405d 100644
--- a/src/components/image-comparer/image-comparer.styles.ts
+++ b/src/components/image-comparer/image-comparer.styles.ts
@@ -48,7 +48,7 @@ export default css`
     top: 0;
     width: var(--divider-width);
     height: 100%;
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     transform: translateX(calc(var(--divider-width) / -2));
     cursor: ew-resize;
   }
@@ -61,7 +61,7 @@ export default css`
     top: calc(50% - (var(--handle-size) / 2));
     width: var(--handle-size);
     height: var(--handle-size);
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-radius: var(--sl-border-radius-circle);
     font-size: calc(var(--handle-size) * 0.5);
     color: rgb(var(--sl-color-neutral-500));
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 64529d202..f1ca375c5 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -64,7 +64,7 @@ export default css`
   :host(.sl-focus-visible:focus:not([aria-disabled='true'])) .menu-item {
     outline: none;
     background-color: rgb(var(--sl-color-primary-600));
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
   }
 
   .menu-item .menu-item__check {
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index 97db9fcf8..e218df6c3 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -8,7 +8,7 @@ export default css`
     --height: 16px;
     --track-color: rgb(var(--sl-color-neutral-500) / 20%);
     --indicator-color: rgb(var(--sl-color-primary-600));
-    --label-color: rgb(var(--sl-color-neutral-1000));
+    --label-color: rgb(var(--sl-color-neutral-0));
 
     display: block;
   }
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 83901b4bb..ef777daee 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -69,7 +69,7 @@ export default css`
 
   /* Checked */
   .radio--checked .radio__control {
-    color: rgb(var(--sl-color-neutral-1000));
+    color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     background-color: rgb(var(--sl-color-primary-600));
   }
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index fe7f4599c..7c7a33e47 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -40,7 +40,7 @@ export default css`
   .switch__control .switch__thumb {
     width: var(--thumb-size);
     height: var(--thumb-size);
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-radius: 50%;
     border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     transform: translateX(calc((var(--width) - var(--height)) / -2));
@@ -62,7 +62,7 @@ export default css`
     border-color: rgb(var(--sl-color-neutral-200));
   }
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-input-border-color));
   }
 
@@ -73,7 +73,7 @@ export default css`
   }
 
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    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));
   }
@@ -85,7 +85,7 @@ export default css`
   }
 
   .switch--checked .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     transform: translateX(calc((var(--width) - var(--height)) / 2));
   }
@@ -97,7 +97,7 @@ export default css`
   }
 
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
   }
 
@@ -108,7 +108,7 @@ export default css`
   }
 
   .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-1000));
+    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));
   }
diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts
index 1c7dc711c..ad995589f 100644
--- a/src/themes/dark.styles.ts
+++ b/src/themes/dark.styles.ts
@@ -364,8 +364,8 @@ export default css`
     --sl-color-neutral-950: var(--sl-color-gray-950);
 
     /* Neutral one-offs */
-    --sl-color-neutral-0: 255 255 255;
-    --sl-color-neutral-1000: 24 24 27;
+    --sl-color-neutral-0: 24 24 27;
+    --sl-color-neutral-1000: 255 255 255;
 
     /*
      * Border radius tokens
@@ -469,9 +469,9 @@ export default css`
     --sl-input-height-medium: 2.5rem; /* 40px */
     --sl-input-height-large: 3.125rem; /* 50px */
 
-    --sl-input-background-color: var(--sl-color-neutral-1000);
-    --sl-input-background-color-hover: var(--sl-color-neutral-1000);
-    --sl-input-background-color-focus: var(--sl-color-neutral-1000);
+    --sl-input-background-color: var(--sl-color-neutral-0);
+    --sl-input-background-color-hover: var(--sl-color-neutral-0);
+    --sl-input-background-color-focus: var(--sl-color-neutral-0);
     --sl-input-background-color-disabled: var(--sl-color-neutral-100);
     --sl-input-border-color: var(--sl-color-neutral-300);
     --sl-input-border-color-hover: var(--sl-color-neutral-400);
@@ -531,7 +531,7 @@ export default css`
      * Panels
      */
 
-    --sl-panel-background-color: var(--sl-color-neutral-1000);
+    --sl-panel-background-color: var(--sl-color-neutral-0);
     --sl-panel-border-color: var(--sl-color-neutral-200);
 
     /*
@@ -540,7 +540,7 @@ export default css`
 
     --sl-tooltip-border-radius: var(--sl-border-radius-medium);
     --sl-tooltip-background-color: var(--sl-color-neutral-800);
-    --sl-tooltip-color: var(--sl-color-neutral-1000);
+    --sl-tooltip-color: var(--sl-color-neutral-0);
     --sl-tooltip-font-family: var(--sl-font-sans);
     --sl-tooltip-font-weight: var(--sl-font-weight-normal);
     --sl-tooltip-font-size: var(--sl-font-size-small);
diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts
index 55aef0993..add604174 100644
--- a/src/themes/light.styles.ts
+++ b/src/themes/light.styles.ts
@@ -364,8 +364,8 @@ export default css`
     --sl-color-neutral-950: var(--sl-color-gray-950);
 
     /* Neutral one-offs */
-    --sl-color-neutral-0: 0 0 0;
-    --sl-color-neutral-1000: 255 255 255;
+    --sl-color-neutral-0: 255 255 255;
+    --sl-color-neutral-1000: 0 0 0;
 
     /*
      * Border radius tokens
@@ -469,9 +469,9 @@ export default css`
     --sl-input-height-medium: 2.5rem; /* 40px */
     --sl-input-height-large: 3.125rem; /* 50px */
 
-    --sl-input-background-color: var(--sl-color-neutral-1000);
-    --sl-input-background-color-hover: var(--sl-color-neutral-1000);
-    --sl-input-background-color-focus: var(--sl-color-neutral-1000);
+    --sl-input-background-color: var(--sl-color-neutral-0);
+    --sl-input-background-color-hover: var(--sl-color-neutral-0);
+    --sl-input-background-color-focus: var(--sl-color-neutral-0);
     --sl-input-background-color-disabled: var(--sl-color-neutral-100);
     --sl-input-border-color: var(--sl-color-neutral-300);
     --sl-input-border-color-hover: var(--sl-color-neutral-400);
@@ -531,7 +531,7 @@ export default css`
      * Panels
      */
 
-    --sl-panel-background-color: var(--sl-color-neutral-1000);
+    --sl-panel-background-color: var(--sl-color-neutral-0);
     --sl-panel-border-color: var(--sl-color-neutral-200);
 
     /*
@@ -540,7 +540,7 @@ export default css`
 
     --sl-tooltip-border-radius: var(--sl-border-radius-medium);
     --sl-tooltip-background-color: var(--sl-color-neutral-800);
-    --sl-tooltip-color: var(--sl-color-neutral-1000);
+    --sl-tooltip-color: var(--sl-color-neutral-0);
     --sl-tooltip-font-family: var(--sl-font-sans);
     --sl-tooltip-font-weight: var(--sl-font-weight-normal);
     --sl-tooltip-font-size: var(--sl-font-size-small);