fixes #407

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `sl-radio-group` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
 - Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `sl-drawer` and `sl-dialog` [#409](https://github.com/shoelace-style/shoelace/issues/409)
 - Fixed a bug where `sl-menu-item` prefix and suffix slots wouldn't always receive the correct spacing
+- Fixed a bug where `sl-badge` used `--sl-color-white` instead of the correct design tokens [#407](https://github.com/shoelace-style/shoelace/issues/407)
 - Improved a11y in `sl-radio` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
 - Improved a11y in `sl-select` by preventing the chevron icon from being announced
 

src/components/badge/badge.scss

@@ -25,27 +25,27 @@
 
 .badge--primary {
   background-color: var(--sl-color-primary-500);
-  color: var(--sl-color-white);
+  color: var(--sl-color-primary-text);
 }
 
 .badge--success {
   background-color: var(--sl-color-success-500);
-  color: var(--sl-color-white);
+  color: var(--sl-color-success-text);
 }
 
 .badge--info {
   background-color: var(--sl-color-info-500);
-  color: var(--sl-color-white);
+  color: var(--sl-color-info-text);
 }
 
 .badge--warning {
   background-color: var(--sl-color-warning-500);
-  color: var(--sl-color-white);
+  color: var(--sl-color-warning-text);
 }
 
 .badge--danger {
   background-color: var(--sl-color-danger-500);
-  color: var(--sl-color-white);
+  color: var(--sl-color-danger-text);
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////