diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index f92121fbb..3831feb2f 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -15,7 +15,7 @@
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: rgb(var(--sl-color-white));
+  background-color: rgb(var(--sl-color-empty));
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -44,7 +44,7 @@
   width: 1.75rem;
   font-size: 20px;
   color: rgb(var(--sl-color-gray-500));
-  background-color: rgb(var(--sl-color-white));
+  background-color: rgb(var(--sl-color-empty));
   border-left: solid 1px rgb(var(--sl-color-gray-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
@@ -97,7 +97,7 @@
   border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  background: rgb(var(--sl-color-white));
+  background: rgb(var(--sl-color-empty));
   font: inherit;
   font-size: 0.875rem;
   color: rgb(var(--sl-color-gray-600));
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index f56a21304..789a941f2 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-white));
+  background-color: rgb(var(--sl-color-empty));
   color: rgb(var(--sl-color-gray-800));
   line-height: var(--sl-line-height-normal);
 }
@@ -28,7 +28,7 @@ strong {
 
 /* Sidebar */
 .sidebar {
-  background: rgb(var(--sl-color-white));
+  background: rgb(var(--sl-color-empty));
   border-right: solid 1px rgb(var(--sl-color-gray-200));
 }
 
@@ -105,7 +105,7 @@ strong {
 }
 
 .sidebar .clear-button svg path {
-  stroke: rgb(var(--sl-color-white));
+  stroke: rgb(var(--sl-color-empty));
 }
 
 .sidebar .clear-button:focus {
@@ -142,7 +142,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: rgb(var(--sl-color-white));
+  background-color: rgb(var(--sl-color-empty));
   padding: 0.5rem;
 }
 
@@ -269,7 +269,7 @@ strong {
 }
 
 .anchor span {
-  color: rgb(var(--sl-color-black));
+  color: rgb(var(--sl-color-full));
 }
 
 .markdown-section blockquote {
@@ -514,7 +514,7 @@ strong {
 .markdown-section p.warn:before {
   content: '!';
   border-radius: 100%;
-  color: rgb(var(--sl-color-white));
+  color: rgb(var(--sl-color-empty));
   font-size: 14px;
   font-weight: bold;
   left: -12px;
@@ -590,7 +590,7 @@ strong {
 html .repo-button {
   display: inline-flex;
   align-items: center;
-  background-color: rgb(var(--sl-color-white));
+  background-color: rgb(var(--sl-color-empty));
   border: solid 1px rgb(var(--sl-color-gray-200));
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-small);
@@ -691,7 +691,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 
 /* Elevation dmeo */
 .elevation-demo {
-  background: rgb(var(--sl-color-white));
+  background: rgb(var(--sl-color-empty));
   border-radius: 3px;
   width: 4rem;
   height: 4rem;
@@ -726,6 +726,10 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
   border-radius: var(--sl-border-radius-small);
 }
 
+.color-palette__swatch--border {
+  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-full) / 10%);
+}
+
 @media screen and (max-width: 1200px) {
   .color-palette {
     grid-template-columns: repeat(6, 1fr);
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index a7dd413a5..118f832d3 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-white));
+    border: solid 2px rgb(var(--sl-color-empty));
   }
 </style>
 ```
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index ce8e55c08..95f5436aa 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -29,7 +29,8 @@ This is more verbose than before, but it has the advantage of letting you set th
 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-primary|success|warning|info|danger-text` design tokens (use the color scale instead)
+- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-empty|full` instead)
+- 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors 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/tokens/color.md b/docs/tokens/color.md
index e4fb5fc5e..448a713a0 100644
--- a/docs/tokens/color.md
+++ b/docs/tokens/color.md
@@ -50,7 +50,9 @@ 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-primary-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Success<br>
     <code>--sl-color-success-<em>{n}</em></code>
@@ -66,7 +68,9 @@ 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-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-900));"></div>900</div>
   <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>
@@ -82,7 +86,9 @@ 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-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>
     <code>--sl-color-warning-<em>{n}</em></code>
@@ -98,7 +104,9 @@ 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-warning-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Danger<br>
     <code>--sl-color-danger-<em>{n}</em></code>
@@ -116,6 +124,15 @@ 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-danger-950));"></div>950</div>
 </div>
 
+<div class="color-palette">
+  <div class="color-palette__name">
+    Full & Empty<br>
+    <code>--sl-color-<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>
+
 ## Primitives
 
 Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors).
@@ -136,7 +153,9 @@ 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-blue-gray-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Cool Gray<br>
     <code>--sl-color-cool-gray-<em>{n}</em></code>
@@ -152,7 +171,9 @@ 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-cool-gray-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Gray<br>
     <code>--sl-color-gray-<em>{n}</em></code>
@@ -168,7 +189,9 @@ 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-gray-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-900));"></div>900</div>  
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-950));"></div>950</div>  
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     True Gray<br>
     <code>--sl-color-true-gray-<em>{n}</em></code>
@@ -184,7 +207,9 @@ 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-true-gray-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Warm Gray<br>
     <code>--sl-color-warm-gray-<em>{n}</em></code>
@@ -200,7 +225,9 @@ 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-warm-gray-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Red<br>
     <code>--sl-color-red-<em>{n}</em></code>
@@ -216,7 +243,9 @@ 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-red-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Orange<br>
     <code>--sl-color-orange-<em>{n}</em></code>
@@ -232,7 +261,9 @@ 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-orange-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Amber<br>
     <code>--sl-color-amber-<em>{n}</em></code>
@@ -248,7 +279,9 @@ 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-amber-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Yellow<br>
     <code>--sl-color-yellow-<em>{n}</em></code>
@@ -264,7 +297,9 @@ 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-yellow-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Lime<br>
     <code>--sl-color-lime-<em>{n}</em></code>
@@ -280,7 +315,9 @@ 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-lime-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Green<br>
     <code>--sl-color-green-<em>{n}</em></code>
@@ -296,7 +333,9 @@ 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-green-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Emerald<br>
     <code>--sl-color-emerald-<em>{n}</em></code>
@@ -312,7 +351,9 @@ 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-emerald-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Teal<br>
     <code>--sl-color-teal-<em>{n}</em></code>
@@ -328,7 +369,9 @@ 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-teal-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Cyan<br>
     <code>--sl-color-cyan-<em>{n}</em></code>
@@ -344,7 +387,9 @@ 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-cyan-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Sky<br>
     <code>--sl-color-sky-<em>{n}</em></code>
@@ -360,7 +405,9 @@ 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-sky-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Blue<br>
     <code>--sl-color-blue-<em>{n}</em></code>
@@ -376,7 +423,9 @@ 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-blue-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Indigo<br>
     <code>--sl-color-indigo-<em>{n}</em></code>
@@ -392,7 +441,9 @@ 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-indigo-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Violet<br>
     <code>--sl-color-violet-<em>{n}</em></code>
@@ -408,7 +459,9 @@ 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-violet-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Purple<br>
     <code>--sl-color-purple-<em>{n}</em></code>
@@ -424,7 +477,9 @@ 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-purple-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Fuchsia<br>
     <code>--sl-color-fuchsia-<em>{n}</em></code>
@@ -440,7 +495,9 @@ 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-fuchsia-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Pink<br>
     <code>--sl-color-pink-<em>{n}</em></code>
@@ -456,7 +513,9 @@ 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-pink-800));"></div>800</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-900));"></div>900</div>
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-950));"></div>950</div>
+</div>
 
+<div class="color-palette">
   <div class="color-palette__name">
     Rose<br>
     <code>--sl-color-rose-<em>{n}</em></code>
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 1125d7f53..078b645f7 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-white));
+    background-color: rgb(var(--sl-color-empty));
     border: solid 1px rgb(var(--sl-color-gray-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 121b6232f..0a3cf46b2 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-white));
+    color: rgb(var(--sl-color-empty));
     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 dfec9b8e2..66d4efcbe 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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .badge--success {
     background-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .badge--info {
     background-color: rgb(var(--sl-color-info-500));
-    color: rgb(var(--sl-color-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .badge--warning {
     background-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .badge--danger {
     background-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /* Pill modifier */
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 5cf3ad3c2..2659f5fa8 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-white));
+    background-color: rgb(var(--sl-color-empty));
     border-color: rgb(var(--sl-color-gray-300));
     color: rgb(var(--sl-color-gray-600));
   }
@@ -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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /* 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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success);
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /* 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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info);
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /* 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-white));
+    color: rgb(var(--sl-color-empty));
   }
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning);
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /* 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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
   }
 
   .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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   /*
@@ -482,7 +482,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px rgb(var(--sl-color-white) / 20%);
+    border-left: solid 1px rgb(var(--sl-color-empty) / 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 9ad0783fb..2c0249d6d 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-white));
+    background-color: rgb(var(--sl-color-empty));
     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 ceee2599d..5993b2d61 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-white));
+    color: rgb(var(--sl-color-empty));
     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 e88b43335..27040fe1e 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-white));
+    background-color: rgb(var(--sl-color-empty));
     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-white));
+    background-color: rgb(var(--sl-color-empty));
     border-radius: var(--sl-border-radius-circle);
     font-size: calc(var(--handle-size) * 0.5);
     color: rgb(var(--sl-color-gray-500));
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index cce6942cb..62013de6e 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -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-white));
+    color: rgb(var(--sl-color-empty));
   }
 
   .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 04c2933dc..85820e95d 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-gray-200));
     --indicator-color: rgb(var(--sl-color-primary-500));
-    --label-color: rgb(var(--sl-color-white));
+    --label-color: rgb(var(--sl-color-empty));
 
     display: block;
   }
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 065545982..9c1ab6b3a 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-white));
+    color: rgb(var(--sl-color-empty));
     border-color: rgb(var(--sl-color-primary-500));
     background-color: rgb(var(--sl-color-primary-500));
   }
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index e67878a25..936477c4c 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-black) / 10%);
+    --track-color: rgb(var(--sl-color-full) / 10%);
     --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 337e85ef1..e09fb8834 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-white));
+    background-color: rgb(var(--sl-color-empty));
     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-gray-200));
   }
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-white));
+    background-color: rgb(var(--sl-color-empty));
     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-white));
+    background-color: rgb(var(--sl-color-empty));
     border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
@@ -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-white));
+    background-color: rgb(var(--sl-color-empty));
     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-white));
+    background-color: rgb(var(--sl-color-empty));
     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-white));
+    background-color: rgb(var(--sl-color-empty));
     border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
diff --git a/src/themes/base.styles.ts b/src/themes/base.styles.ts
index 0cbc7ba6e..1fa4ca307 100644
--- a/src/themes/base.styles.ts
+++ b/src/themes/base.styles.ts
@@ -8,9 +8,6 @@ export default css`
      * Color Primitives
      */
 
-    --sl-color-black: 0 0 0;
-    --sl-color-white: 255 255 255;
-
     /* Blue Gray */
     --sl-color-blue-gray-50: 248 250 252;
     --sl-color-blue-gray-100: 241 245 249;
@@ -301,6 +298,9 @@ export default css`
      * Theme Tokens
      */
 
+    --sl-color-full: 0 0 0;
+    --sl-color-empty: 255 255 255;
+
     /* Primary */
     --sl-color-primary-50: var(--sl-color-sky-50);
     --sl-color-primary-100: var(--sl-color-sky-100);
@@ -472,9 +472,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-white);
-    --sl-input-background-color-hover: var(--sl-color-white);
-    --sl-input-background-color-focus: var(--sl-color-white);
+    --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);
@@ -533,7 +533,7 @@ export default css`
      * Panels
      */
 
-    --sl-panel-background-color: var(--sl-color-white);
+    --sl-panel-background-color: var(--sl-color-empty);
     --sl-panel-border-color: var(--sl-color-gray-200);
     /*
      * Tooltip tokens
@@ -541,7 +541,7 @@ export default css`
 
     --sl-tooltip-border-radius: var(--sl-border-radius-medium);
     --sl-tooltip-background-color: var(--sl-color-gray-900);
-    --sl-tooltip-color: var(--sl-color-white);
+    --sl-tooltip-color: var(--sl-color-empty);
     --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 138603a6b..0cd3bda13 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-black: 255 255 255;
-    --sl-color-white: var(--sl-color-gray-50);
+    --sl-color-full: 255 255 255;
+    --sl-color-empty: var(--sl-color-gray-50);
 
     /* Blue Gray */
     --sl-color-blue-gray-950: 248 250 252;