diff --git a/.changeset/pretty-socks-notice.md b/.changeset/pretty-socks-notice.md new file mode 100644 index 0000000000..e8962cdf62 --- /dev/null +++ b/.changeset/pretty-socks-notice.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/swatch": minor +--- + +Reimplements support for the `spectrum-Swatch--lightBorder` class for swatches specifically in a swatch group. diff --git a/components/swatch/index.css b/components/swatch/index.css index bbe7825310..5b893cdd13 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -40,12 +40,14 @@ /* Light theme placeholder tokens */ .spectrum--light & { --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); + --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%); } /* Dark and Darkest theme placeholder tokens */ .spectrum--dark &, .spectrum--darkest & { --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); + --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%); } } @@ -283,6 +285,14 @@ } } +.spectrum-Swatch--lightBorder { + .spectrum-Swatch-fill { + &::before { + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light))); + } + } +} + .spectrum-Swatch-mixedValueIcon { display: none; pointer-events: none; diff --git a/components/swatch/metadata/mods.md b/components/swatch/metadata/mods.md index f9c636abd7..06d5eefd24 100644 --- a/components/swatch/metadata/mods.md +++ b/components/swatch/metadata/mods.md @@ -2,6 +2,7 @@ | -------------------------------------------- | | `--mod-animation-duration-100` | | `--mod-swatch-border-color` | +| `--mod-swatch-border-color-light` | | `--mod-swatch-border-color-selected` | | `--mod-swatch-border-radius` | | `--mod-swatch-border-thickness` |