* fix(actionbutton): s2 foundations fast follows (#3540)

* fix(actionbutton): define action button border radius for s1/s2

* fix(actionbutton): defines disabled background colors
- defines --spectrum-actionbutton-background-color-disabled,
--spectrum-actionbutton-background-color-selected-disabled custom
properties to use disabled-background-color and disabled-static-*-
background-color is those states
- updates metadata.json
- S1 actionbutton disabled background color should not have been altered
- preserve express disabled `gray-200` background color, and updates
background in selected-disabled dark mode (to use disabled-background-
color)

* fix(actionbutton): transparent background for S1 disabled state

* chore(actionbutton): add changeset

Author: marissahuysentruyt

.changeset/quick-hairs-walk.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/actionbutton": patch
+---
+
+S2 Foundations fixes
+
+- Adjusts corner rounding for S2 foundations to follow S2 action button corner rounding, particularly to help give additional space to the help/corner triangle icon:
+  - corner-radius-medium-size-extra-small
+  - corner-radius-medium-size-small
+  - corner-radius-medium-size-medium
+  - corner-radius-medium-size-large
+  - corner-radius-medium-size-extra-large
+- Corrects the `disabled-background-color` and `disabled-static-*-background-color` tokens for the disabled and selected+disabled states

components/actionbutton/dist/metadata.json

@@ -20,6 +20,11 @@
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
     ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeL",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeM",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeS",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
+    ".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
@@ -165,11 +170,18 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-extra-small",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
+    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-black-background-color",
     "--spectrum-disabled-static-black-border-color",
     "--spectrum-disabled-static-black-content-color",
+    "--spectrum-disabled-static-white-background-color",
     "--spectrum-disabled-static-white-border-color",
     "--spectrum-disabled-static-white-content-color",
     "--spectrum-focus-indicator-color",
@@ -204,15 +216,12 @@
     "--spectrum-text-to-visual-300",
     "--spectrum-text-to-visual-50",
     "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-100",
-    "--spectrum-transparent-black-200",
     "--spectrum-transparent-black-400",
     "--spectrum-transparent-black-500",
     "--spectrum-transparent-black-600",
     "--spectrum-transparent-black-700",
     "--spectrum-transparent-black-800",
     "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-200",
     "--spectrum-transparent-white-400",
     "--spectrum-transparent-white-500",
     "--spectrum-transparent-white-600",
@@ -228,11 +237,11 @@
   ],
   "system-theme": [
     "--system-action-button-background-color-default",
+    "--system-action-button-background-color-disabled",
     "--system-action-button-background-color-down",
     "--system-action-button-background-color-focus",
     "--system-action-button-background-color-hover",
     "--system-action-button-background-color-selected",
-    "--system-action-button-background-color-selected-disabled",
     "--system-action-button-background-color-selected-down",
     "--system-action-button-background-color-selected-focus",
     "--system-action-button-background-color-selected-hover",
@@ -243,9 +252,16 @@
     "--system-action-button-border-color-hover",
     "--system-action-button-content-color-selected",
     "--system-action-button-quiet-background-color-default",
+    "--system-action-button-quiet-background-color-disabled",
     "--system-action-button-quiet-background-color-down",
     "--system-action-button-quiet-background-color-focus",
     "--system-action-button-quiet-background-color-hover",
+    "--system-action-button-quiet-background-color-selected-disabled",
+    "--system-action-button-size-l-border-radius",
+    "--system-action-button-size-m-border-radius",
+    "--system-action-button-size-s-border-radius",
+    "--system-action-button-size-xl-border-radius",
+    "--system-action-button-size-xs-border-radius",
     "--system-action-button-static-black-background-color-default",
     "--system-action-button-static-black-background-color-disabled",
     "--system-action-button-static-black-background-color-down",
@@ -257,6 +273,7 @@
     "--system-action-button-static-black-border-color-focus",
     "--system-action-button-static-black-border-color-hover",
     "--system-action-button-static-black-quiet-background-color-default",
+    "--system-action-button-static-black-quiet-background-color-disabled",
     "--system-action-button-static-black-quiet-background-color-down",
     "--system-action-button-static-black-quiet-background-color-focus",
     "--system-action-button-static-black-quiet-background-color-hover",
@@ -271,6 +288,7 @@
     "--system-action-button-static-white-border-color-focus",
     "--system-action-button-static-white-border-color-hover",
     "--system-action-button-static-white-quiet-background-color-default",
+    "--system-action-button-static-white-quiet-background-color-disabled",
     "--system-action-button-static-white-quiet-background-color-down",
     "--system-action-button-static-white-quiet-background-color-focus",
     "--system-action-button-static-white-quiet-background-color-hover"

components/actionbutton/index.css

@@ -53,7 +53,7 @@
 	--spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
 	--spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default)));
 
-	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-100));
+	--spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
 	--spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100));
 
 	--spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap));

components/actionbutton/themes/express.css

@@ -21,6 +21,7 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
+		--spectrum-actionbutton-background-color-disabled: var(--spectrum-gray-200);
 
 		--spectrum-actionbutton-border-color-default: transparent;
 		--spectrum-actionbutton-border-color-hover: transparent;

components/actionbutton/themes/spectrum-two.css

@@ -17,7 +17,7 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
+		--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 
 		--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
 		--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
@@ -32,11 +32,33 @@
 
 		--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
 
+		&.spectrum-ActionButton--sizeM {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
+		}
+
+		&.spectrum-ActionButton--sizeXS {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small);
+		}
+
+		&.spectrum-ActionButton--sizeS {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small);
+		}
+
+		&.spectrum-ActionButton--sizeL {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large);
+		}
+
+		&.spectrum-ActionButton--sizeXL {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+		}
+
 		&.spectrum-ActionButton--quiet {
 			--spectrum-actionbutton-background-color-default: transparent;
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
 			--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
 			--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+			--spectrum-actionbutton-background-color-disabled: transparent;
+			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color);
 		}
 
 		&.spectrum-ActionButton--staticBlack {
@@ -45,15 +67,16 @@
 			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
 			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
 
-			--spectrum-actionbutton-background-color-disabled: transparent;
-			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color);
 
 			&,
 			&.spectrum-ActionButton--quiet {
 				--spectrum-actionbutton-background-color-default: transparent;
 				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
 				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
 				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+				--spectrum-actionbutton-background-color-disabled: transparent;
 			}
 		}
 
@@ -63,15 +86,16 @@
 			--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
 			--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
 
-			--spectrum-actionbutton-background-color-disabled: transparent;
-			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
+			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+			--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color);
 
 			&,
 			&.spectrum-ActionButton--quiet {
 				--spectrum-actionbutton-background-color-default: transparent;
 				--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
 				--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
 				--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+				--spectrum-actionbutton-background-color-disabled: transparent;
 			}
 		}
 	}

components/actionbutton/themes/spectrum.css

@@ -21,10 +21,19 @@
 		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
-		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
+		--spectrum-actionbutton-background-color-disabled: transparent;
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color);
 
 		--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75);
 
+		&.spectrum-ActionButton--sizeXS,
+		&.spectrum-ActionButton--sizeS,
+		&.spectrum-ActionButton--sizeM,
+		&.spectrum-ActionButton--sizeL,
+		&.spectrum-ActionButton--sizeXL {
+			--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
+		}
+
 		&.spectrum-ActionButton--quiet {
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
 			--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);