fix(swatch): adjust s2 corner rounding

rise-erpelding · rise-erpelding · commit f86628cc5b87 · 2025-02-06T15:03:19.000-06:00
diff --git a/.changeset/light-impalas-march.md b/.changeset/light-impalas-march.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/swatch": patch
+---
+
+Adjust S2 corner rounding to match S2 spec.
diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json
@@ -103,7 +103,7 @@
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-75",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -120,6 +120,7 @@
   ],
   "system-theme": [
     "--system-swatch-border-color",
+    "--system-swatch-border-radius",
     "--system-swatch-disabled-icon-color",
     "--system-swatch-inner-border-color-selected"
   ],
diff --git a/components/swatch/index.css b/components/swatch/index.css
@@ -62,7 +62,6 @@
 .spectrum-Swatch {
 	--spectrum-swatch-focus-indicator-border-radius: 8px;
 	--spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
-	--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
 	--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
 	--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
 	--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css
@@ -17,5 +17,6 @@
 		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
 		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
 		--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
+		--spectrum-swatch-border-radius: var(--spectrum-corner-radius-75);
 	}
 }
diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css
@@ -20,5 +20,6 @@
 		--spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));
 		--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
 		--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);
+		--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
 	}
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@spectrum-css/swatch": patch
 +---
++
 +Adjust S2 corner rounding to match S2 spec.
Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,6 @@`
`17`	`17`	`--spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));`
`18`	`18`	`--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);`
`19`	`19`	`--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);`
	`20`	`+ --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75);`
`20`	`21`	`}`
`21`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,5 +20,6 @@`
`20`	`20`	`--spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));`
`21`	`21`	`--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);`
`22`	`22`	`--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);`
	`23`	`+ --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);`
`23`	`24`	`}`
`24`	`25`	`}`