feat(swatch): add support for lightBorder (#2954)

- implement spectrum-Swatch--lightBorder class for swatches in a swatch
group that have low contrast
- build new mods for swatch-border-color-light
- add changeset

.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.

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;

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` |