From 9dbee4c686be83db3b600b095d602c8b60851412 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 6 Aug 2021 08:32:46 -0400
Subject: [PATCH] add neutral color palette

---
 docs/assets/plugins/code-block/code-block.css | 22 ++---
 docs/assets/plugins/metadata/metadata.js      |  6 +-
 docs/assets/styles/docs.css                   | 90 ++++++++++---------
 docs/components/alert.md                      |  8 +-
 docs/components/avatar.md                     |  2 +-
 docs/components/badge.md                      | 10 +--
 docs/components/button-group.md               |  6 +-
 docs/components/button.md                     |  6 +-
 docs/components/card.md                       |  2 +-
 docs/components/dialog.md                     |  2 +-
 docs/components/drawer.md                     |  2 +-
 docs/components/tag.md                        |  2 +-
 docs/getting-started/themes.md                |  2 +
 docs/resources/changelog.md                   |  8 +-
 docs/resources/contributing.md                |  2 +-
 docs/tokens/color.md                          | 51 ++++++-----
 src/components/alert/alert.styles.ts          | 14 +--
 src/components/alert/alert.ts                 |  4 +-
 src/components/avatar/avatar.styles.ts        |  4 +-
 src/components/badge/badge.styles.ts          | 18 ++--
 src/components/badge/badge.ts                 |  4 +-
 src/components/button/button.styles.ts        | 76 ++++++++--------
 src/components/button/button.ts               |  6 +-
 src/components/card/card.styles.ts            |  4 +-
 src/components/checkbox/checkbox.styles.ts    |  2 +-
 .../color-picker/color-picker.styles.ts       | 12 +--
 src/components/details/details.styles.ts      |  2 +-
 .../icon-button/icon-button.styles.ts         |  2 +-
 .../image-comparer/image-comparer.styles.ts   |  6 +-
 src/components/menu-item/menu-item.styles.ts  |  6 +-
 .../menu-label/menu-label.styles.ts           |  2 +-
 .../progress-bar/progress-bar.styles.ts       |  4 +-
 .../progress-ring/progress-ring.styles.ts     |  2 +-
 src/components/radio/radio.styles.ts          |  2 +-
 src/components/range/range.styles.ts          |  2 +-
 src/components/rating/rating.styles.ts        |  2 +-
 src/components/select/select.ts               |  4 +-
 src/components/skeleton/skeleton.styles.ts    |  4 +-
 src/components/spinner/spinner.styles.ts      |  2 +-
 src/components/switch/switch.styles.ts        | 24 ++---
 src/components/tab-group/tab-group.styles.ts  |  2 +-
 src/components/tab/tab.styles.ts              |  2 +-
 src/components/tag/tag.styles.ts              |  8 +-
 src/components/tag/tag.ts                     |  4 +-
 src/themes/base.styles.ts                     | 74 +++++++--------
 src/themes/dark.styles.ts                     |  4 +-
 46 files changed, 265 insertions(+), 258 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 42532e3b1..0cfa59a0b 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -1,21 +1,21 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background-color: rgb(var(--sl-color-gray-50));
+  background-color: rgb(var(--sl-color-neutral-50));
   margin-bottom: 1.5rem;
 }
 
 .sl-theme-dark .code-block {
-  background-color: rgb(var(--sl-color-gray-200));
+  background-color: rgb(var(--sl-color-neutral-200));
 }
 
 .code-block__preview {
   position: relative;
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: rgb(var(--sl-color-empty));
+  background-color: rgb(var(--sl-color-1000));
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -43,9 +43,9 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: rgb(var(--sl-color-gray-500));
-  background-color: rgb(var(--sl-color-empty));
-  border-left: solid 1px rgb(var(--sl-color-gray-200));
+  color: rgb(var(--sl-color-neutral-500));
+  background-color: rgb(var(--sl-color-1000));
+  border-left: solid 1px rgb(var(--sl-color-neutral-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
   transition: 250ms background-color;
@@ -71,7 +71,7 @@
 }
 
 .code-block__source {
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom: none;
   border-radius: 0 !important;
   margin: 0;
@@ -94,13 +94,13 @@
   justify-content: center;
   width: 100%;
   height: 2.5rem;
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  background: rgb(var(--sl-color-empty));
+  background: rgb(var(--sl-color-1000));
   font: inherit;
   font-size: 0.875rem;
-  color: rgb(var(--sl-color-gray-600));
+  color: rgb(var(--sl-color-neutral-600));
   cursor: pointer;
   transition: 250ms background-color;
   -webkit-appearance: none;
diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index b03cc44d0..852d510e5 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -315,10 +315,10 @@
           return next(content);
         }
 
-        let badgeType = 'info';
+        let badgeType = 'neutral';
         if (component.status === 'stable') badgeType = 'primary';
         if (component.status === 'experimental') badgeType = 'warning';
-        if (component.status === 'planned') badgeType = 'info';
+        if (component.status === 'planned') badgeType = 'neutral';
         if (component.status === 'deprecated') badgeType = 'danger';
 
         result += `
@@ -328,7 +328,7 @@
             </div>
 
             <div class="component-header__info">
-              <sl-badge type="info" pill>
+              <sl-badge type="neutral" pill>
                 Since ${component.since || '?'}
               </sl-badge>
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index b4df7dd7e..c7fcc7aaf 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -13,8 +13,8 @@ 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-empty));
-  color: rgb(var(--sl-color-gray-800));
+  background-color: rgb(var(--sl-color-1000));
+  color: rgb(var(--sl-color-neutral-800));
   line-height: var(--sl-line-height-normal);
 }
 
@@ -28,8 +28,8 @@ strong {
 
 /* Sidebar */
 .sidebar {
-  background: rgb(var(--sl-color-empty));
-  border-right: solid 1px rgb(var(--sl-color-gray-200));
+  background: rgb(var(--sl-color-1000));
+  border-right: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
 .sidebar .app-name {
@@ -40,7 +40,7 @@ strong {
 .sidebar-version {
   font-size: var(--sl-font-size-x-small);
   font-weight: var(--sl-font-weight-normal);
-  color: rgb(var(--sl-color-gray-400));
+  color: rgb(var(--sl-color-neutral-400));
   text-align: right;
   padding: 0 var(--sl-spacing-small);
   margin: -1.25rem 0 0.6rem 0;
@@ -68,6 +68,10 @@ strong {
   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));
@@ -101,11 +105,11 @@ strong {
 }
 
 .sidebar .clear-button svg circle {
-  fill: rgb(var(--sl-color-gray-400));
+  fill: rgb(var(--sl-color-neutral-400));
 }
 
 .sidebar .clear-button svg path {
-  stroke: rgb(var(--sl-color-empty));
+  stroke: rgb(var(--sl-color-1000));
 }
 
 .sidebar .clear-button:focus {
@@ -117,7 +121,7 @@ strong {
 }
 
 .search .matching-post {
-  border-bottom: solid 1px rgb(var(--sl-color-gray-500)) !important;
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-500)) !important;
   padding: 0.25rem 1.5rem;
 }
 
@@ -142,7 +146,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: rgb(var(--sl-color-empty));
+  background-color: rgb(var(--sl-color-1000));
   padding: 0.5rem;
 }
 
@@ -188,7 +192,7 @@ strong {
 
 .sidebar li > p {
   font-weight: var(--sl-font-weight-bold);
-  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
   margin: 0 0.75rem 0.5rem 0;
 }
 
@@ -269,12 +273,12 @@ strong {
 }
 
 .anchor span {
-  color: rgb(var(--sl-color-full));
+  color: rgb(var(--sl-color-0));
 }
 
 .markdown-section blockquote {
   position: relative;
-  border-left: solid 4px rgb(var(--sl-color-gray-200));
+  border-left: solid 4px rgb(var(--sl-color-neutral-200));
   font-style: italic;
   padding: 1rem 1.5rem;
   margin: 0 0 1rem 0;
@@ -298,7 +302,7 @@ strong {
 }
 
 .docsify-pagination-container {
-  border-top-color: rgb(var(--sl-color-gray-200)) !important;
+  border-top-color: rgb(var(--sl-color-neutral-200)) !important;
 }
 
 .markdown-section h1,
@@ -317,7 +321,7 @@ strong {
 
 .markdown-section h2 {
   font-size: var(--sl-font-size-x-large);
-  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
   margin-top: 2rem;
 }
 
@@ -348,39 +352,39 @@ strong {
 .markdown-section code {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
-  background-color: rgb(var(--sl-color-gray-50));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-radius: var(--sl-border-radius-small);
   padding: 2px 4px;
 }
 
 .sl-theme-dark .markdown-section code {
-  background-color: rgb(var(--sl-color-gray-100));
+  background-color: rgb(var(--sl-color-neutral-100));
 }
 
 .markdown-section kbd {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
   border-radius: var(--sl-border-radius-small);
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  border: solid 1px rgb(var(--sl-color-neutral-200));
   padding: 2px 4px;
 }
 
 /* Code blocks */
 .markdown-section pre {
   position: relative;
-  background-color: rgb(var(--sl-color-gray-50));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-radius: var(--sl-border-radius-medium);
 }
 
 .sl-theme-dark .markdown-section pre {
-  background-color: rgb(var(--sl-color-gray-100));
+  background-color: rgb(var(--sl-color-neutral-100));
 }
 
 .markdown-section pre > code {
   display: block;
   background: none;
   border-radius: 0;
-  color: rgb(var(--sl-color-gray-700));
+  color: rgb(var(--sl-color-neutral-700));
   padding: var(--sl-spacing-medium);
   overflow: auto;
   hyphens: none;
@@ -388,18 +392,18 @@ strong {
 }
 
 .markdown-section pre .token.comment {
-  color: rgb(var(--sl-color-gray-400));
+  color: rgb(var(--sl-color-neutral-400));
 }
 
 .markdown-section pre .token.prolog,
 .markdown-section pre .token.doctype,
 .markdown-section pre .token.cdata,
 .markdown-section pre .token.operator {
-  color: rgb(var(--sl-color-gray-600));
+  color: rgb(var(--sl-color-neutral-600));
 }
 
 .markdown-section pre .token.punctuation {
-  color: rgb(var(--sl-color-gray-600));
+  color: rgb(var(--sl-color-neutral-600));
 }
 
 .namespace {
@@ -466,11 +470,11 @@ strong {
 }
 
 .markdown-section tr:nth-child(2n) {
-  background: rgb(var(--sl-color-gray-50));
+  background: rgb(var(--sl-color-neutral-50));
 }
 
 .sl-theme-dark .markdown-section tr:nth-child(2n) {
-  background: rgb(var(--sl-color-gray-100));
+  background: rgb(var(--sl-color-neutral-100));
 }
 
 .markdown-section th {
@@ -480,8 +484,8 @@ strong {
 }
 
 .markdown-section td {
-  border-top: solid 1px rgb(var(--sl-color-gray-200));
-  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
+  border-top: solid 1px rgb(var(--sl-color-neutral-200));
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
   border-left: none;
   border-right: none;
 }
@@ -499,7 +503,7 @@ strong {
 .markdown-section p.tip,
 .markdown-section p.warn {
   position: relative;
-  background-color: rgb(var(--sl-color-gray-50));
+  background-color: rgb(var(--sl-color-neutral-50));
   border-left: solid 4px transparent;
   border-radius: var(--sl-border-radius-medium);
   padding-left: 1.5rem;
@@ -507,14 +511,14 @@ strong {
 
 .sl-theme-dark .markdown-section p.tip,
 .sl-theme-dark .markdown-section p.warn {
-  background-color: rgb(var(--sl-color-gray-100));
+  background-color: rgb(var(--sl-color-neutral-100));
 }
 
 .markdown-section p.tip:before,
 .markdown-section p.warn:before {
   content: '!';
   border-radius: 100%;
-  color: rgb(var(--sl-color-empty));
+  color: rgb(var(--sl-color-1000));
   font-size: 14px;
   font-weight: bold;
   left: -12px;
@@ -544,12 +548,12 @@ strong {
 
 .markdown-section p.tip code,
 .markdown-section p.warn code {
-  background-color: rgb(var(--sl-color-gray-100));
+  background-color: rgb(var(--sl-color-neutral-100));
 }
 
 /* Component headers */
 .component-header {
-  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
   padding-bottom: 2rem;
   margin-top: -1rem;
   margin-bottom: 2rem;
@@ -563,7 +567,7 @@ strong {
 
 .component-header__tag code {
   background: none;
-  color: rgb(var(--sl-color-gray-500));
+  color: rgb(var(--sl-color-neutral-500));
   font-size: var(--sl-font-size-large);
   padding: 0;
   margin: 0;
@@ -590,15 +594,15 @@ strong {
 html .repo-button {
   display: inline-flex;
   align-items: center;
-  background-color: rgb(var(--sl-color-empty));
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  background-color: rgb(var(--sl-color-1000));
+  border: solid 1px rgb(var(--sl-color-neutral-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);
   line-height: 2;
   text-decoration: none;
-  color: rgb(var(--sl-color-gray-700));
+  color: rgb(var(--sl-color-neutral-700));
   padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
   margin-bottom: var(--sl-spacing-xx-small);
   transition: 0.25s all;
@@ -606,12 +610,12 @@ html .repo-button {
 
 html .repo-button:hover {
   text-decoration: none;
-  background-color: rgb(var(--sl-color-gray-50));
-  border: solid 1px rgb(var(--sl-color-gray-200));
+  background-color: rgb(var(--sl-color-neutral-50));
+  border: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
 .sl-theme-dark .repo-button:hover {
-  background-color: rgb(var(--sl-color-gray-100));
+  background-color: rgb(var(--sl-color-neutral-100));
 }
 
 html .repo-button:focus {
@@ -640,7 +644,7 @@ html .repo-button--sponsor sl-icon {
 }
 
 html .repo-button--github sl-icon {
-  color: rgb(var(--sl-color-gray-600));
+  color: rgb(var(--sl-color-neutral-600));
 }
 
 html .repo-button--twitter sl-icon {
@@ -662,7 +666,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 /* Transition demo */
 .transition-demo {
   position: relative;
-  background: rgb(var(--sl-color-gray-200));
+  background: rgb(var(--sl-color-neutral-200));
   width: 8rem;
   height: 2rem;
 }
@@ -691,7 +695,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 
 /* Elevation dmeo */
 .elevation-demo {
-  background: rgb(var(--sl-color-empty));
+  background: rgb(var(--sl-color-1000));
   border-radius: 3px;
   width: 4rem;
   height: 4rem;
@@ -727,7 +731,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-full) / 10%);
+  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-0) / 10%);
 }
 
 @media screen and (max-width: 1200px) {
diff --git a/docs/components/alert.md b/docs/components/alert.md
index c113e9bd9..c9f0ccada 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -36,7 +36,7 @@ Set the `type` attribute to change the alert's type.
 
 <br>
 
-<sl-alert type="info" open>
+<sl-alert type="neutral" open>
   <sl-icon slot="icon" name="gear"></sl-icon>
   <strong>Your settings have been updated</strong><br>
   Settings will take affect on next login.
@@ -126,7 +126,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
 <div class="alert-toast">
   <sl-button type="primary">Primary</sl-button>
   <sl-button type="success">Success</sl-button>
-  <sl-button type="info">Info</sl-button>
+  <sl-button type="neutral">Info</sl-button>
   <sl-button type="warning">Warning</sl-button>
   <sl-button type="danger">Danger</sl-button>
   
@@ -142,7 +142,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
     You can safely exit the app now.
   </sl-alert>
 
-  <sl-alert type="info" duration="3000" closable>
+  <sl-alert type="neutral" duration="3000" closable>
     <sl-icon slot="icon" name="gear"></sl-icon>
     <strong>Your settings have been updated</strong><br>
     Settings will take affect on next login.
@@ -164,7 +164,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
 <script>
   const container = document.querySelector('.alert-toast');
 
-  ['primary', 'success', 'info', 'warning', 'danger'].map(type => {
+  ['primary', 'success', 'neutral', 'warning', 'danger'].map(type => {
     const button = container.querySelector(`sl-button[type="${type}"]`);
     const alert = container.querySelector(`sl-alert[type="${type}"]`);
 
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 118f832d3..7ddad211e 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-empty));
+    border: solid 2px rgb(var(--sl-color-1000));
   }
 </style>
 ```
diff --git a/docs/components/badge.md b/docs/components/badge.md
index a34e4d462..87f113a40 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -17,7 +17,7 @@ Set the `type` attribute to change the badge's type.
 ```html preview
 <sl-badge type="primary">Primary</sl-badge>
 <sl-badge type="success">Success</sl-badge>
-<sl-badge type="info">Info</sl-badge>
+<sl-badge type="neutral">Neutral</sl-badge>
 <sl-badge type="warning">Warning</sl-badge>
 <sl-badge type="danger">Danger</sl-badge>
 ```
@@ -29,7 +29,7 @@ Use the `pill` attribute to give badges rounded edges.
 ```html preview
 <sl-badge type="primary" pill>Primary</sl-badge>
 <sl-badge type="success" pill>Success</sl-badge>
-<sl-badge type="info" pill>Info</sl-badge>
+<sl-badge type="neutral" pill>Neutral</sl-badge>
 <sl-badge type="warning" pill>Warning</sl-badge>
 <sl-badge type="danger" pill>Danger</sl-badge>
 ```
@@ -42,7 +42,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 <div class="badge-pulse">
   <sl-badge type="primary" pill pulse>1</sl-badge>
   <sl-badge type="success" pill pulse>1</sl-badge>
-  <sl-badge type="info" pill pulse>1</sl-badge>
+  <sl-badge type="neutral" pill pulse>1</sl-badge>
   <sl-badge type="warning" pill pulse>1</sl-badge>
   <sl-badge type="danger" pill pulse>1</sl-badge>
 </div>
@@ -82,8 +82,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 ```html preview
 <sl-menu style="max-width: 240px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
   <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" type="info" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" type="info" pill>12</sl-badge></sl-menu-item>
+  <sl-menu-item>Comments <sl-badge slot="suffix" type="neutral" pill>4</sl-badge></sl-menu-item>
+  <sl-menu-item>Replies <sl-badge slot="suffix" type="neutral" pill>12</sl-badge></sl-menu-item>
 </sl-menu>
 ```
 
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 1775dbd07..9323b5fc0 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -64,9 +64,9 @@ Theme buttons are supported through the button's `type` attribute.
 <br><br>
 
 <sl-button-group>
-  <sl-button type="info">Left</sl-button>
-  <sl-button type="info">Center</sl-button>
-  <sl-button type="info">Right</sl-button>
+  <sl-button type="neutral">Left</sl-button>
+  <sl-button type="neutral">Center</sl-button>
+  <sl-button type="neutral">Right</sl-button>
 </sl-button-group>
 
 <br><br>
diff --git a/docs/components/button.md b/docs/components/button.md
index c59700e02..3ebbbca7f 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -18,7 +18,7 @@ Use the `type` attribute to set the button's type.
 <sl-button type="default">Default</sl-button>
 <sl-button type="primary">Primary</sl-button>
 <sl-button type="success">Success</sl-button>
-<sl-button type="info">Info</sl-button>
+<sl-button type="neutral">Neutral</sl-button>
 <sl-button type="warning">Warning</sl-button>
 <sl-button type="danger">Danger</sl-button>
 ```
@@ -162,7 +162,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
 <sl-button type="default" loading>Default</sl-button>
 <sl-button type="primary" loading>Primary</sl-button>
 <sl-button type="success" loading>Success</sl-button>
-<sl-button type="info" loading>Info</sl-button>
+<sl-button type="neutral" loading>Neutral</sl-button>
 <sl-button type="warning" loading>Warning</sl-button>
 <sl-button type="danger" loading>Danger</sl-button>
 ```
@@ -175,7 +175,7 @@ Use the `disabled` attribute to disable a button. Clicks will be suppressed unti
 <sl-button type="default" disabled>Default</sl-button>
 <sl-button type="primary" disabled>Primary</sl-button>
 <sl-button type="success" disabled>Success</sl-button>
-<sl-button type="info" disabled>Info</sl-button>
+<sl-button type="neutral" disabled>Neutral</sl-button>
 <sl-button type="warning" disabled>Warning</sl-button>
 <sl-button type="danger" disabled>Danger</sl-button>
 ```
diff --git a/docs/components/card.md b/docs/components/card.md
index 040994573..0c54fc75f 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: rgb(var(--sl-color-gray-500));
+    color: rgb(var(--sl-color-neutral-500));
   }
 
   .card-overview [slot="footer"] {
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 1e27e6b4c..3e8fc79a1 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -58,7 +58,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 rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-neutral-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 7c32db5aa..b82139d04 100644
--- a/docs/components/drawer.md
+++ b/docs/components/drawer.md
@@ -146,7 +146,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 rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-neutral-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/tag.md b/docs/components/tag.md
index ce1682843..06a043d1d 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -7,7 +7,7 @@ Tags are used as labels to organize things or to indicate a selection.
 ```html preview
 <sl-tag type="primary">Primary</sl-tag>
 <sl-tag type="success">Success</sl-tag>
-<sl-tag type="info">Info</sl-tag>
+<sl-tag type="neutral">Neutral</sl-tag>
 <sl-tag type="warning">Warning</sl-tag>
 <sl-tag type="danger">Danger</sl-tag>
 ```
diff --git a/docs/getting-started/themes.md b/docs/getting-started/themes.md
index 6af765937..4a92ec24b 100644
--- a/docs/getting-started/themes.md
+++ b/docs/getting-started/themes.md
@@ -6,6 +6,8 @@ The default theme is included as part of `themes/base.css` and should always be
 
 ## Dark Mode
 
+The dark theme uses an "inverted" color scale, so if you're using design tokens correctly, you'll get a decent dark mode for free.
+
 To install the dark theme, add the following to the `<head>` section of your app.
 
 ```html
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 95f5436aa..90990aaea 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -13,7 +13,7 @@ This release adds a variety of new color primitives and changes the way color to
 ```css
 .example {
   /* rgb() is required now */
-  color: rgb(var(--sl-color-gray-500));
+  color: rgb(var(--sl-color-neutral-500));
 }
 ```
 
@@ -22,15 +22,17 @@ This is more verbose than before, but it has the advantage of letting you set th
 ```css
 .example-with-alpha {
   /* easily adjust opacity for any color token */
-  color: rgb(var(--sl-color-gray-500) / 50%);
+  color: rgb(var(--sl-color-neutral-500) / 50%);
 }
 ```
 
 This change applies to all design tokens that implement a color. Refer to the [color tokens](/tokens/color) page for more details.
 
 - 🚨 BREAKING: all design tokens that implement colors have been converted to `R G B` and must be used with the `rgb()` function
-- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-empty|full` instead)
+- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-1000|full` instead)
 - 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead)
+- 🚨 BREAKING: removed `info` variant from `sl-alert`, `sl-badge`, `sl-button`, and `sl-tag` (use `neutral` instead)
+- 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)
 - Added new color primitives to the base set of design tokens
 - Added `--sl-color-*-950` swatches to all color palettes
 - Added a console error that appears when menu items have duplicate values in `sl-select`
diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md
index 54d825097..fd14b48bf 100644
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@@ -216,7 +216,7 @@ To expose custom properties as part of a component's API, scope them to the `:ho
 ```css
 :host {
   --color: rgb(var(--sl-color-primary-500));
-  --background-color: rgb(var(--sl-color-gray-100));
+  --background-color: rgb(var(--sl-color-neutral-100));
 }
 ```
 
diff --git a/docs/tokens/color.md b/docs/tokens/color.md
index 448a713a0..e6ee3be3c 100644
--- a/docs/tokens/color.md
+++ b/docs/tokens/color.md
@@ -10,7 +10,7 @@ All color tokens are defined as a set of RGB integers, eg. `113 113 122`. CSS do
 
 ```css
 .example {
-  color: rgb(var(--sl-color-gray-500));
+  color: rgb(var(--sl-color-neutral-500));
 }
 ```
 
@@ -22,7 +22,7 @@ By default, color tokens produce an opaque color. With this syntax, you can easi
 
 ```css
 .example-with-alpha {
-  color: rgb(var(--sl-color-gray-500) / 50%);
+  color: rgb(var(--sl-color-neutral-500) / 50%);
 }
 ```
 
@@ -32,7 +32,7 @@ This syntax may not look familiar, but it's perfectly valid per the [CSS Color M
 
 ## Theme Tokens
 
-Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, info, warning, and danger are used to visualize actions that correspond to their respective meanings.
+Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
 
 <div class="color-palette">
   <div class="color-palette__name">
@@ -70,24 +70,6 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-950));"></div>950</div>
 </div>
 
-<div class="color-palette">
-  <div class="color-palette__name">
-    Info<br>
-    <code>--sl-color-info-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-50));"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-100));"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-200));"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-300));"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-400));"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-500));"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-600));"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-700));"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-800));"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-900));"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-950));"></div>950</div>
-</div>
-
 <div class="color-palette">
   <div class="color-palette__name">
     Warning<br>
@@ -126,11 +108,29 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Full & Empty<br>
-    <code>--sl-color-<em>{n}</em></code>
+    Neutral<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-full));"></div>full</div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-empty));"></div>empty</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-950));"></div>950</div>
+</div>
+
+<div class="color-palette">
+  <div class="color-palette__name">
+    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-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-1000));"></div>1000</div>
 </div>
 
 ## Primitives
@@ -532,4 +532,3 @@ Additional palettes are provided in the form of color primitives. Use these when
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-950));"></div>950</div>
 </div>
-
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 078b645f7..eeab685d2 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -15,8 +15,8 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: rgb(var(--sl-color-empty));
-    border: solid 1px rgb(var(--sl-color-gray-200));
+    background-color: rgb(var(--sl-color-1000));
+    border: solid 1px rgb(var(--sl-color-neutral-200));
     border-top-width: 3px;
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--box-shadow);
@@ -24,7 +24,7 @@ export default css`
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-normal);
     line-height: 1.6;
-    color: rgb(var(--sl-color-gray-700));
+    color: rgb(var(--sl-color-neutral-700));
     margin: inherit;
   }
 
@@ -55,12 +55,12 @@ export default css`
     color: rgb(var(--sl-color-success-500));
   }
 
-  .alert--info {
-    border-top-color: rgb(var(--sl-color-info-500));
+  .alert--neutral {
+    border-top-color: rgb(var(--sl-color-neutral-500));
   }
 
-  .alert--info .alert__icon {
-    color: rgb(var(--sl-color-info-500));
+  .alert--neutral .alert__icon {
+    color: rgb(var(--sl-color-neutral-500));
   }
 
   .alert--warning {
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index d96604415..5f503f950 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -52,7 +52,7 @@ export default class SlAlert extends LitElement {
   @property({ type: Boolean, reflect: true }) closable = false;
 
   /** The type of alert. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
+  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /**
    * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
@@ -180,7 +180,7 @@ export default class SlAlert extends LitElement {
           'alert--closable': this.closable,
           'alert--primary': this.type === 'primary',
           'alert--success': this.type === 'success',
-          'alert--info': this.type === 'info',
+          'alert--neutral': this.type === 'neutral',
           'alert--warning': this.type === 'warning',
           'alert--danger': this.type === 'danger'
         })}
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 0a3cf46b2..11bf66af2 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -17,11 +17,11 @@ export default css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: rgb(var(--sl-color-gray-400));
+    background-color: rgb(var(--sl-color-neutral-400));
     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-empty));
+    color: rgb(var(--sl-color-1000));
     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 66d4efcbe..42e00706b 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-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .badge--success {
     background-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
-  .badge--info {
-    background-color: rgb(var(--sl-color-info-500));
-    color: rgb(var(--sl-color-empty));
+  .badge--neutral {
+    background-color: rgb(var(--sl-color-neutral-500));
+    color: rgb(var(--sl-color-1000));
   }
 
   .badge--warning {
     background-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .badge--danger {
     background-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   /* Pill modifier */
@@ -67,8 +67,8 @@ export default css`
     --pulse-color: rgb(var(--sl-color-success-500));
   }
 
-  .badge--pulse.badge--info {
-    --pulse-color: rgb(var(--sl-color-info-500));
+  .badge--pulse.badge--neutral {
+    --pulse-color: rgb(var(--sl-color-neutral-500));
   }
 
   .badge--pulse.badge--warning {
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index f2beb13a6..b92781884 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -16,7 +16,7 @@ export default class SlBadge extends LitElement {
   static styles = styles;
 
   /** The badge's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
+  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
@@ -32,7 +32,7 @@ export default class SlBadge extends LitElement {
           badge: true,
           'badge--primary': this.type === 'primary',
           'badge--success': this.type === 'success',
-          'badge--info': this.type === 'info',
+          'badge--neutral': this.type === 'neutral',
           'badge--warning': this.type === 'warning',
           'badge--danger': this.type === 'danger',
           'badge--pill': this.pill,
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index d0782078a..8b587db05 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -69,9 +69,9 @@ export default css`
 
   /* Default */
   .button.button--default {
-    background-color: rgb(var(--sl-color-empty));
-    border-color: rgb(var(--sl-color-gray-300));
-    color: rgb(var(--sl-color-gray-600));
+    background-color: rgb(var(--sl-color-1000));
+    border-color: rgb(var(--sl-color-neutral-300));
+    color: rgb(var(--sl-color-neutral-600));
   }
 
   .button.button--default:hover:not(.button--disabled) {
@@ -97,129 +97,129 @@ export default css`
   .button.button--primary {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--primary:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-400));
     border-color: rgb(var(--sl-color-primary-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--primary:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-400));
     border-color: rgb(var(--sl-color-primary-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
   }
 
   .button.button--primary:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   /* Success */
   .button.button--success {
     background-color: rgb(var(--sl-color-success-500));
     border-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--success:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-400));
     border-color: rgb(var(--sl-color-success-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--success:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-400));
     border-color: rgb(var(--sl-color-success-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-success) / 25%);
   }
 
   .button.button--success:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-success-500));
     border-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
-  /* Info */
-  .button.button--info {
-    background-color: rgb(var(--sl-color-info-500));
-    border-color: rgb(var(--sl-color-info-500));
-    color: rgb(var(--sl-color-empty));
+  /* Neutral */
+  .button.button--neutral {
+    background-color: rgb(var(--sl-color-neutral-500));
+    border-color: rgb(var(--sl-color-neutral-500));
+    color: rgb(var(--sl-color-1000));
   }
 
-  .button.button--info:hover:not(.button--disabled) {
-    background-color: rgb(var(--sl-color-info-400));
-    border-color: rgb(var(--sl-color-info-400));
-    color: rgb(var(--sl-color-empty));
+  .button.button--neutral:hover:not(.button--disabled) {
+    background-color: rgb(var(--sl-color-neutral-400));
+    border-color: rgb(var(--sl-color-neutral-400));
+    color: rgb(var(--sl-color-1000));
   }
 
-  .button.button--info:focus:not(.button--disabled) {
-    background-color: rgb(var(--sl-color-info-400));
-    border-color: rgb(var(--sl-color-info-400));
-    color: rgb(var(--sl-color-empty));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-info) / 25%);
+  .button.button--neutral:focus:not(.button--disabled) {
+    background-color: rgb(var(--sl-color-neutral-400));
+    border-color: rgb(var(--sl-color-neutral-400));
+    color: rgb(var(--sl-color-1000));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / 25%);
   }
 
-  .button.button--info:active:not(.button--disabled) {
-    background-color: rgb(var(--sl-color-info-500));
-    border-color: rgb(var(--sl-color-info-500));
-    color: rgb(var(--sl-color-empty));
+  .button.button--neutral:active:not(.button--disabled) {
+    background-color: rgb(var(--sl-color-neutral-500));
+    border-color: rgb(var(--sl-color-neutral-500));
+    color: rgb(var(--sl-color-1000));
   }
 
   /* Warning */
   .button.button--warning {
     background-color: rgb(var(--sl-color-warning-500));
     border-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
   .button.button--warning:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-400));
     border-color: rgb(var(--sl-color-warning-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--warning:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-400));
     border-color: rgb(var(--sl-color-warning-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-warning) / 25%);
   }
 
   .button.button--warning:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-warning-500));
     border-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   /* Danger */
   .button.button--danger {
     background-color: rgb(var(--sl-color-danger-500));
     border-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--danger:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-400));
     border-color: rgb(var(--sl-color-danger-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .button.button--danger:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-400));
     border-color: rgb(var(--sl-color-danger-400));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-danger) / 25%);
   }
 
   .button.button--danger:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-danger-500));
     border-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   /*
@@ -482,7 +482,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px rgb(var(--sl-color-empty) / 20%);
+    border-left: solid 1px rgb(var(--sl-color-1000) / 20%);
   }
 
   /* Bump focused buttons up so their focus ring isn't clipped */
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 576aeb3cf..d4040c286 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -39,7 +39,7 @@ export default class SlButton extends LitElement {
   @state() private hasSuffix = false;
 
   /** The button's type. */
-  @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' =
+  @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
     'default';
 
   /** The button's size. */
@@ -161,7 +161,7 @@ export default class SlButton extends LitElement {
           'button--default': this.type === 'default',
           'button--primary': this.type === 'primary',
           'button--success': this.type === 'success',
-          'button--info': this.type === 'info',
+          'button--neutral': this.type === 'neutral',
           'button--warning': this.type === 'warning',
           'button--danger': this.type === 'danger',
           'button--text': this.type === 'text',
@@ -199,7 +199,7 @@ export default class SlButton extends LitElement {
           'button--default': this.type === 'default',
           'button--primary': this.type === 'primary',
           'button--success': this.type === 'success',
-          'button--info': this.type === 'info',
+          'button--neutral': this.type === 'neutral',
           'button--warning': this.type === 'warning',
           'button--danger': this.type === 'danger',
           'button--text': this.type === 'text',
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 2c0249d6d..4bc568092 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --border-color: rgb(var(--sl-color-gray-200));
+    --border-color: rgb(var(--sl-color-neutral-200));
     --border-radius: var(--sl-border-radius-medium);
     --border-width: 1px;
     --padding: var(--sl-spacing-large);
@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     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 3f9346b22..72104a28a 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-empty));
+    color: rgb(var(--sl-color-1000));
     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/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index c131c29c4..2828d118b 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -172,7 +172,7 @@ export default css`
     width: calc(var(--sl-input-height-small) / 2);
     height: calc(var(--sl-input-height-small) / 2);
     color: white;
-    background-color: rgb(var(--sl-color-gray-900));
+    background-color: rgb(var(--sl-color-neutral-900));
     border-radius: var(--sl-border-radius-circle);
     opacity: 0;
   }
@@ -225,7 +225,7 @@ export default css`
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 6px;
     justify-items: center;
-    border-top: solid 1px rgb(var(--sl-color-gray-200));
+    border-top: solid 1px rgb(var(--sl-color-neutral-200));
     padding: var(--sl-spacing-small);
   }
 
@@ -253,10 +253,10 @@ export default css`
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
-      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
-      linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
+      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
+      linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position: 0 0, 0 0, -5px -5px, 5px 5px;
   }
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index 48702b3d7..0c48e82ef 100644
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .details {
-    border: solid 1px rgb(var(--sl-color-gray-200));
+    border: solid 1px rgb(var(--sl-color-neutral-200));
     border-radius: var(--sl-border-radius-medium);
     overflow-anchor: none;
   }
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index 5172ec4f1..6e8225675 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -16,7 +16,7 @@ export default css`
     border: none;
     border-radius: var(--sl-border-radius-medium);
     font-size: inherit;
-    color: rgb(var(--sl-color-gray-500));
+    color: rgb(var(--sl-color-neutral-500));
     padding: var(--sl-spacing-x-small);
     cursor: pointer;
     transition: var(--sl-transition-medium) color;
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
index 84cb35236..cf0ae1ffa 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-empty));
+    background-color: rgb(var(--sl-color-1000));
     transform: translateX(calc(var(--divider-width) / -2));
     cursor: ew-resize;
   }
@@ -61,10 +61,10 @@ export default css`
     top: calc(50% - (var(--handle-size) / 2));
     width: var(--handle-size);
     height: var(--handle-size);
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-radius: var(--sl-border-radius-circle);
     font-size: calc(var(--handle-size) * 0.5);
-    color: rgb(var(--sl-color-gray-500));
+    color: rgb(var(--sl-color-neutral-500));
     cursor: inherit;
     z-index: 10;
   }
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 62013de6e..f0df7d73d 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -18,7 +18,7 @@ export default css`
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
     text-align: left;
-    color: rgb(var(--sl-color-gray-700));
+    color: rgb(var(--sl-color-neutral-700));
     padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
     transition: var(--sl-transition-fast) fill;
     user-select: none;
@@ -27,7 +27,7 @@ export default css`
   }
   .menu-item.menu-item--disabled {
     outline: none;
-    color: rgb(var(--sl-color-gray-400));
+    color: rgb(var(--sl-color-neutral-400));
     cursor: not-allowed;
   }
 
@@ -63,7 +63,7 @@ export default css`
   :host(:focus:not([aria-disabled='true'])) .menu-item {
     outline: none;
     background-color: rgb(var(--sl-color-primary-500));
-    color: rgb(var(--sl-color-empty));
+    color: rgb(var(--sl-color-1000));
   }
 
   .menu-item .menu-item__check {
diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts
index 717da4ce1..9624638cc 100644
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -14,7 +14,7 @@ export default css`
     font-weight: var(--sl-font-weight-semibold);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
-    color: rgb(var(--sl-color-gray-500));
+    color: rgb(var(--sl-color-neutral-500));
     padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
     user-select: none;
   }
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index 85820e95d..f098b7124 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -6,9 +6,9 @@ export default css`
 
   :host {
     --height: 16px;
-    --track-color: rgb(var(--sl-color-gray-200));
+    --track-color: rgb(var(--sl-color-neutral-500) / 20%);
     --indicator-color: rgb(var(--sl-color-primary-500));
-    --label-color: rgb(var(--sl-color-empty));
+    --label-color: rgb(var(--sl-color-1000));
 
     display: block;
   }
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index 0b969de4e..c23b59ece 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-color: rgb(var(--sl-color-gray-200));
+    --track-color: rgb(var(--sl-color-neutral-500) / 15%);
     --indicator-color: rgb(var(--sl-color-primary-500));
 
     display: inline-flex;
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index b18372b28..db71497f7 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-empty));
+    color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-color-primary-500));
     background-color: rgb(var(--sl-color-primary-500));
   }
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 4f0e6ef66..94997a11e 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -9,7 +9,7 @@ export default css`
   :host {
     --thumb-size: 20px;
     --tooltip-offset-y: 10px;
-    --track-color: rgb(var(--sl-color-gray-200));
+    --track-color: rgb(var(--sl-color-neutral-200));
     --track-height: 6px;
 
     display: block;
diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
index 0a85d8c60..a18081b5a 100644
--- a/src/components/rating/rating.styles.ts
+++ b/src/components/rating/rating.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --symbol-color: rgb(var(--sl-color-gray-300));
+    --symbol-color: rgb(var(--sl-color-neutral-300));
     --symbol-color-active: #ffbe00;
     --symbol-size: 1.2rem;
     --symbol-spacing: var(--sl-spacing-xxx-small);
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 2b709e0b3..f546870f4 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -368,7 +368,7 @@ export default class SlSelect extends LitElement {
         return html`
           <sl-tag
             exportparts="base:tag"
-            type="info"
+            type="neutral"
             size=${this.size}
             ?pill=${this.pill}
             clearable
@@ -392,7 +392,7 @@ export default class SlSelect extends LitElement {
         this.displayLabel = '';
         this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
         this.displayTags.push(html`
-          <sl-tag exportparts="base:tag" type="info" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
+          <sl-tag exportparts="base:tag" type="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
         `);
       }
     } else {
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
index 2dc402245..2a904de87 100644
--- a/src/components/skeleton/skeleton.styles.ts
+++ b/src/components/skeleton/skeleton.styles.ts
@@ -6,8 +6,8 @@ export default css`
 
   :host {
     --border-radius: var(--sl-border-radius-pill);
-    --color: rgb(var(--sl-color-gray-200));
-    --sheen-color: rgb(var(--sl-color-gray-300));
+    --color: rgb(var(--sl-color-neutral-200));
+    --sheen-color: rgb(var(--sl-color-neutral-300));
 
     display: block;
     position: relative;
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index 936477c4c..2a5810e3d 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-color: rgb(var(--sl-color-full) / 10%);
+    --track-color: rgb(var(--sl-color-neutral-500) / 15%);
     --indicator-color: rgb(var(--sl-color-primary-500));
     --stroke-width: 2px;
 
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 90d0768c0..0978437b9 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -31,8 +31,8 @@ export default css`
     justify-content: center;
     width: var(--width);
     height: var(--height);
-    background-color: rgb(var(--sl-color-gray-300));
-    border: solid var(--sl-input-border-width) rgb(var(--sl-color-gray-300));
+    background-color: rgb(var(--sl-color-neutral-300));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-300));
     border-radius: var(--height);
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
   }
@@ -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-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-radius: 50%;
     border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     transform: translateX(calc((var(--width) - var(--height)) / -2));
@@ -58,22 +58,22 @@ export default css`
 
   /* Hover */
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: rgb(var(--sl-color-gray-200));
-    border-color: rgb(var(--sl-color-gray-200));
+    background-color: rgb(var(--sl-color-neutral-200));
+    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-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-input-border-color));
   }
 
   /* Focus */
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: rgb(var(--sl-color-gray-200));
-    border-color: rgb(var(--sl-color-gray-200));
+    background-color: rgb(var(--sl-color-neutral-200));
+    border-color: rgb(var(--sl-color-neutral-200));
   }
 
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
   }
@@ -84,7 +84,7 @@ export default css`
     border-color: rgb(var(--sl-color-primary-500));
   }
   .switch--checked .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-color-primary-500));
     transform: translateX(calc((var(--width) - var(--height)) / 2));
   }
@@ -95,7 +95,7 @@ export default css`
     border-color: rgb(var(--sl-color-primary-400));
   }
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-color-primary-500));
   }
 
@@ -106,7 +106,7 @@ export default css`
   }
 
   .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-empty));
+    background-color: rgb(var(--sl-color-1000));
     border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
   }
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index b57338e82..a8e3fd05d 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --tabs-border-color: rgb(var(--sl-color-gray-200));
+    --tabs-border-color: rgb(var(--sl-color-neutral-200));
 
     display: block;
   }
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 59532439c..2f9e80d15 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -18,7 +18,7 @@ export default css`
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-semibold);
     border-radius: 4px;
-    color: rgb(var(--sl-color-gray-600));
+    color: rgb(var(--sl-color-neutral-600));
     padding: var(--sl-spacing-medium) var(--sl-spacing-large);
     white-space: nowrap;
     user-select: none;
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 7e80845fe..6358ac530 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -39,10 +39,10 @@ export default css`
     color: rgb(var(--sl-color-success-700));
   }
 
-  .tag--info {
-    background-color: rgb(var(--sl-color-info-100));
-    border-color: rgb(var(--sl-color-info-200));
-    color: rgb(var(--sl-color-info-700));
+  .tag--neutral {
+    background-color: rgb(var(--sl-color-neutral-100));
+    border-color: rgb(var(--sl-color-neutral-200));
+    color: rgb(var(--sl-color-neutral-700));
   }
 
   .tag--warning {
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 5ddf1e17c..760d3aedb 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -25,7 +25,7 @@ export default class SlTag extends LitElement {
   static styles = styles;
 
   /** The tag's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary';
+  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'primary';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -50,7 +50,7 @@ export default class SlTag extends LitElement {
           // Types
           'tag--primary': this.type === 'primary',
           'tag--success': this.type === 'success',
-          'tag--info': this.type === 'info',
+          'tag--neutral': this.type === 'neutral',
           'tag--warning': this.type === 'warning',
           'tag--danger': this.type === 'danger',
           'tag--text': this.type === 'text',
diff --git a/src/themes/base.styles.ts b/src/themes/base.styles.ts
index 370a9c228..abfb44aa9 100644
--- a/src/themes/base.styles.ts
+++ b/src/themes/base.styles.ts
@@ -298,8 +298,8 @@ export default css`
      * Theme Tokens
      */
 
-    --sl-color-full: 0 0 0;
-    --sl-color-empty: 255 255 255;
+    --sl-color-0: 0 0 0;
+    --sl-color-1000: 255 255 255;
 
     /* Primary */
     --sl-color-primary-50: var(--sl-color-sky-50);
@@ -327,19 +327,6 @@ export default css`
     --sl-color-success-900: var(--sl-color-green-900);
     --sl-color-success-950: var(--sl-color-green-950);
 
-    /* Info */
-    --sl-color-info-50: var(--sl-color-gray-50);
-    --sl-color-info-100: var(--sl-color-gray-100);
-    --sl-color-info-200: var(--sl-color-gray-200);
-    --sl-color-info-300: var(--sl-color-gray-300);
-    --sl-color-info-400: var(--sl-color-gray-400);
-    --sl-color-info-500: var(--sl-color-gray-500);
-    --sl-color-info-600: var(--sl-color-gray-600);
-    --sl-color-info-700: var(--sl-color-gray-700);
-    --sl-color-info-800: var(--sl-color-gray-800);
-    --sl-color-info-900: var(--sl-color-gray-900);
-    --sl-color-info-950: var(--sl-color-gray-950);
-
     /* Warning */
     --sl-color-warning-50: var(--sl-color-amber-50);
     --sl-color-warning-100: var(--sl-color-amber-100);
@@ -366,6 +353,19 @@ export default css`
     --sl-color-danger-900: var(--sl-color-red-900);
     --sl-color-danger-950: var(--sl-color-red-950);
 
+    /* Neutral */
+    --sl-color-neutral-50: var(--sl-color-gray-50);
+    --sl-color-neutral-100: var(--sl-color-gray-100);
+    --sl-color-neutral-200: var(--sl-color-gray-200);
+    --sl-color-neutral-300: var(--sl-color-gray-300);
+    --sl-color-neutral-400: var(--sl-color-gray-400);
+    --sl-color-neutral-500: var(--sl-color-gray-500);
+    --sl-color-neutral-600: var(--sl-color-gray-600);
+    --sl-color-neutral-700: var(--sl-color-gray-700);
+    --sl-color-neutral-800: var(--sl-color-gray-800);
+    --sl-color-neutral-900: var(--sl-color-gray-900);
+    --sl-color-neutral-950: var(--sl-color-gray-950);
+
     /*
      * Border radius tokens
      */
@@ -457,7 +457,7 @@ export default css`
     /* Focus ring */
     --sl-focus-ring-color-primary: var(--sl-color-primary-500);
     --sl-focus-ring-color-success: var(--sl-color-success-500);
-    --sl-focus-ring-color-info: var(--sl-color-info-500);
+    --sl-focus-ring-color-neutral: var(--sl-color-neutral-500);
     --sl-focus-ring-color-warning: var(--sl-color-warning-500);
     --sl-focus-ring-color-danger: var(--sl-color-danger-500);
     --sl-focus-ring-width: 3px;
@@ -473,14 +473,14 @@ export default css`
     --sl-input-height-medium: 2.5rem; /* 40px */
     --sl-input-height-large: 3.125rem; /* 50px */
 
-    --sl-input-background-color: var(--sl-color-empty);
-    --sl-input-background-color-hover: var(--sl-color-empty);
-    --sl-input-background-color-focus: var(--sl-color-empty);
-    --sl-input-background-color-disabled: var(--sl-color-gray-100);
-    --sl-input-border-color: var(--sl-color-gray-300);
-    --sl-input-border-color-hover: var(--sl-color-gray-400);
+    --sl-input-background-color: var(--sl-color-1000);
+    --sl-input-background-color-hover: var(--sl-color-1000);
+    --sl-input-background-color-focus: var(--sl-color-1000);
+    --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);
     --sl-input-border-color-focus: var(--sl-color-primary-500);
-    --sl-input-border-color-disabled: var(--sl-color-gray-300);
+    --sl-input-border-color-disabled: var(--sl-color-neutral-300);
     --sl-input-border-width: 1px;
 
     --sl-input-border-radius-small: var(--sl-border-radius-medium);
@@ -494,15 +494,15 @@ export default css`
     --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-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-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-400);
-    --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
+    --sl-input-color: var(--sl-color-neutral-700);
+    --sl-input-color-hover: var(--sl-color-neutral-700);
+    --sl-input-color-focus: var(--sl-color-neutral-700);
+    --sl-input-color-disabled: var(--sl-color-neutral-900);
+    --sl-input-icon-color: var(--sl-color-neutral-400);
+    --sl-input-icon-color-hover: var(--sl-color-neutral-600);
+    --sl-input-icon-color-focus: var(--sl-color-neutral-600);
+    --sl-input-placeholder-color: var(--sl-color-neutral-400);
+    --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
     --sl-input-spacing-small: var(--sl-spacing-small);
     --sl-input-spacing-medium: var(--sl-spacing-medium);
     --sl-input-spacing-large: var(--sl-spacing-large);
@@ -519,7 +519,7 @@ export default css`
     --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-400);
+    --sl-input-help-text-color: var(--sl-color-neutral-400);
 
     /* Toggle (checkboxes, radios, switches) */
     --sl-toggle-size: 1rem;
@@ -534,15 +534,15 @@ export default css`
      * Panels
      */
 
-    --sl-panel-background-color: var(--sl-color-empty);
-    --sl-panel-border-color: var(--sl-color-gray-200);
+    --sl-panel-background-color: var(--sl-color-1000);
+    --sl-panel-border-color: var(--sl-color-neutral-200);
     /*
      * Tooltip tokens
      */
 
     --sl-tooltip-border-radius: var(--sl-border-radius-medium);
-    --sl-tooltip-background-color: var(--sl-color-gray-900);
-    --sl-tooltip-color: var(--sl-color-empty);
+    --sl-tooltip-background-color: var(--sl-color-neutral-900);
+    --sl-tooltip-color: var(--sl-color-1000);
     --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/dark.styles.ts b/src/themes/dark.styles.ts
index 0cd3bda13..db8433471 100644
--- a/src/themes/dark.styles.ts
+++ b/src/themes/dark.styles.ts
@@ -3,8 +3,8 @@ import { css } from 'lit';
 export default css`
   :host,
   .sl-theme-dark {
-    --sl-color-full: 255 255 255;
-    --sl-color-empty: var(--sl-color-gray-50);
+    --sl-color-0: 255 255 255;
+    --sl-color-1000: var(--sl-color-gray-50);
 
     /* Blue Gray */
     --sl-color-blue-gray-950: 248 250 252;