Update badge colors to pass contrast minimums (#3496)

devongovett · web-flow · commit a8c3401a504f · 2022-09-12T11:22:33.000-07:00
diff --git a/packages/@adobe/spectrum-css-temp/components/badge/skin.css b/packages/@adobe/spectrum-css-temp/components/badge/skin.css
@@ -24,16 +24,14 @@ governing permissions and limitations under the License.
 
 .spectrum-Badge--yellow {
   color: var(--spectrum-global-color-static-black);
-  background-color: var(--spectrum-label-colored-yellow-background-color);
+  background-color: var(--spectrum-global-color-static-yellow-600);
 }
 
 .spectrum-Badge--seafoam  {
-  background-color: var(--spectrum-label-colored-seafoam-background-color);
+  background-color: var(--spectrum-global-color-static-seafoam-700);
 }
 
 .spectrum-Badge--positive {
-  /* this color is not accessible in dark mode */
-  /* background-color: var(--spectrum-label-colored-green-background-color); */
   background-color: var(--spectrum-global-color-static-green-700);
 }
 
@@ -42,17 +40,17 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Badge--fuchsia  {
-  background-color: var(--spectrum-label-colored-fuchsia-background-color);
+  background-color: var(--spectrum-global-color-static-fuchsia-600);
 }
 
 .spectrum-Badge--indigo  {
-  background-color: var(--spectrum-global-color-indigo-400);
+  background-color: var(--spectrum-global-color-static-indigo-600);
 }
 
 .spectrum-Badge--magenta  {
-  background-color: var(--spectrum-global-color-magenta-400);
+  background-color: var(--spectrum-global-color-static-magenta-600);
 }
 
 .spectrum-Badge--purple  {
-  background-color: var(--spectrum-global-color-purple-400);
+  background-color: var(--spectrum-global-color-static-purple-600);
 }

Original file line number	Diff line number	Diff line change
`@@ -24,16 +24,14 @@ governing permissions and limitations under the License.`
`24`	`24`
`25`	`25`	`.spectrum-Badge--yellow {`
`26`	`26`	`color: var(--spectrum-global-color-static-black);`
`27`		`- background-color: var(--spectrum-label-colored-yellow-background-color);`
	`27`	`+ background-color: var(--spectrum-global-color-static-yellow-600);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.spectrum-Badge--seafoam {`
`31`		`- background-color: var(--spectrum-label-colored-seafoam-background-color);`
	`31`	`+ background-color: var(--spectrum-global-color-static-seafoam-700);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.spectrum-Badge--positive {`
`35`		`- /* this color is not accessible in dark mode */`
`36`		`- /* background-color: var(--spectrum-label-colored-green-background-color); */`
`37`	`35`	`background-color: var(--spectrum-global-color-static-green-700);`
`38`	`36`	`}`
`39`	`37`
`@@ -42,17 +40,17 @@ governing permissions and limitations under the License.`
`42`	`40`	`}`
`43`	`41`
`44`	`42`	`.spectrum-Badge--fuchsia {`
`45`		`- background-color: var(--spectrum-label-colored-fuchsia-background-color);`
	`43`	`+ background-color: var(--spectrum-global-color-static-fuchsia-600);`
`46`	`44`	`}`
`47`	`45`
`48`	`46`	`.spectrum-Badge--indigo {`
`49`		`- background-color: var(--spectrum-global-color-indigo-400);`
	`47`	`+ background-color: var(--spectrum-global-color-static-indigo-600);`
`50`	`48`	`}`
`51`	`49`
`52`	`50`	`.spectrum-Badge--magenta {`
`53`		`- background-color: var(--spectrum-global-color-magenta-400);`
	`51`	`+ background-color: var(--spectrum-global-color-static-magenta-600);`
`54`	`52`	`}`
`55`	`53`
`56`	`54`	`.spectrum-Badge--purple {`
`57`		`- background-color: var(--spectrum-global-color-purple-400);`
	`55`	`+ background-color: var(--spectrum-global-color-static-purple-600);`
`58`	`56`	`}`