diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 04a1f1277..7c88d8292 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added the `outline` variation to `` [#522](https://github.com/shoelace-style/shoelace/issues/522) - Added the `filled` variation to ``, ``, and `` and supporting design tokens - Added the `control` part to `` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538) +- Added a border to `` to improve contrast when drawn on various background colors - Changed the default `distance` in `` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538) - Fixed a bug where `` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544) diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts index fae773fd4..4bc3bf307 100644 --- a/src/components/badge/badge.styles.ts +++ b/src/components/badge/badge.styles.ts @@ -17,6 +17,7 @@ export default css` letter-spacing: var(--sl-letter-spacing-normal); line-height: 1; border-radius: var(--sl-border-radius-small); + border: solid 1px rgb(var(--sl-color-neutral-0)); white-space: nowrap; padding: 3px 6px; user-select: none;