chore(swatch+swatchgroup): swap none to partial rounding as the default

Author: cdransf

components/swatch/dist/metadata.json

@@ -15,13 +15,13 @@
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before",
-    ".spectrum-Swatch--roundingPartial",
-    ".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--roundingPartial:after",
-    ".spectrum-Swatch--roundingPartial:before",
+    ".spectrum-Swatch--roundingNone",
+    ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch--roundingNone:after",
+    ".spectrum-Swatch--roundingNone:before",
     ".spectrum-Swatch--sizeL",
     ".spectrum-Swatch--sizeM",
     ".spectrum-Swatch--sizeXS",

components/swatch/index.css

@@ -19,7 +19,7 @@
 
 	/* Size */
 	--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
-	--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
+	--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
 	--spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100));
 	--spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200));
 	--spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
@@ -328,16 +328,16 @@
 	inline-size: calc(var(--spectrum-swatch-size) * var(--spectrum-swatch-rectangle-width-multiplier));
 }
 
-/* Variant: Rounding - Partial */
-.spectrum-Swatch--roundingPartial {
+/* Variant: Rounding - None */
+.spectrum-Swatch--roundingNone {
 	&,
 	&::before,
 	&::after,
 	.spectrum-Swatch-fill,
 	.spectrum-Swatch-fill::before,
 	&.is-selected .spectrum-Swatch-fill,
 	&.is-selected .spectrum-Swatch-fill::before {
-		border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
+		border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
 	}
 }
 

components/swatch/stories/swatch.stories.js

@@ -31,14 +31,14 @@ export default {
 		rounding: {
 			name: "Rounding",
 			description: "The amount of corner rounding for a swatch.",
-			defaultValue: "regular",
+			defaultValue: "partial",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string", required: true },
 				category: "Component",
-				defaultValue: { summary: "regular", },
+				defaultValue: { summary: "partial", },
 			},
-			options: ["regular", "partial", "full"],
+			options: ["partial", "none", "full"],
 			control: "select",
 		},
 		isDisabled,
@@ -111,7 +111,7 @@ export default {
 		isDisabled: false,
 		isHovered: false,
 		isKeyboardFocused: false,
-		rounding: "regular",
+		rounding: "partial",
 		swatchColor: "rgb(174, 216, 230)",
 		borderStyle: "default",
 		shape: "square",

components/swatch/stories/template.js

@@ -22,7 +22,7 @@ export const Template = ({
 	isDisabled = false,
 	isHovered = false,
 	isKeyboardFocused = false,
-	rounding = "regular",
+	rounding = "partial",
 	customClasses = [],
 	swatchColor,
 	customStyles = {},
@@ -55,7 +55,7 @@ export const Template = ({
 					typeof size !== "undefined",
 				[`${rootClass}--rounding${capitalize(
 							lowerCase(rounding)
-						)}`]: typeof rounding !== "undefined" && rounding !== "regular",
+						)}`]: typeof rounding !== "undefined" && rounding !== "partial",
 				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,