fix(action-button,styles): border-radius modifier patch

Author: castastrophe

.changeset/nine-geese-behave.md

@@ -0,0 +1,8 @@
+---
+'@spectrum-web-components/action-button': patch
+'@spectrum-web-components/styles': patch
+---
+
+[#​3644](https://github.com/adobe/spectrum-css/pull/3644) Thanks [@​marissahuysentruyt](https://github.com/marissahuysentruyt)!
+
+This patch update fixes support for `--mod-actionbutton-border-radius` to make sure it is accessible by consumers and overwrites the default border radius setting when used.

packages/action-button/src/action-button-overrides.css

@@ -63,32 +63,32 @@ governing permissions and limitations under the License.
 }
 
 :host {
-    --spectrum-actionbutton-border-radius: var(
-        --system-action-button-size-m-border-radius
+    --spectrum-actionbutton-border-radius-default: var(
+        --system-action-button-size-m-border-radius-default
     );
 }
 
 :host([size='xs']) {
-    --spectrum-actionbutton-border-radius: var(
-        --system-action-button-size-xs-border-radius
+    --spectrum-actionbutton-border-radius-default: var(
+        --system-action-button-size-xs-border-radius-default
     );
 }
 
 :host([size='s']) {
-    --spectrum-actionbutton-border-radius: var(
-        --system-action-button-size-s-border-radius
+    --spectrum-actionbutton-border-radius-default: var(
+        --system-action-button-size-s-border-radius-default
     );
 }
 
 :host([size='l']) {
-    --spectrum-actionbutton-border-radius: var(
-        --system-action-button-size-l-border-radius
+    --spectrum-actionbutton-border-radius-default: var(
+        --system-action-button-size-l-border-radius-default
     );
 }
 
 :host([size='xl']) {
-    --spectrum-actionbutton-border-radius: var(
-        --system-action-button-size-xl-border-radius
+    --spectrum-actionbutton-border-radius-default: var(
+        --system-action-button-size-xl-border-radius-default
     );
 }
 

packages/action-button/src/spectrum-action-button.css

@@ -95,7 +95,7 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
     --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-actionbutton-border-radius));
+    --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default));
     --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));
     --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
@@ -315,7 +315,6 @@ governing permissions and limitations under the License.
     line-height: var(--spectrum-actionbutton-height);
     font-size: var(--spectrum-actionbutton-font-size);
     white-space: nowrap;
-    color: inherit;
     color: var(--mod-actionbutton-label-color, inherit);
     text-overflow: ellipsis;
     overflow: hidden;

tools/styles/tokens-v2/system-theme-bridge.css

@@ -32,19 +32,19 @@
     --system-action-button-border-color-focus: transparent;
     --system-action-button-border-color-disabled: transparent;
     --system-action-button-content-color-selected: var(--spectrum-gray-50);
-    --system-action-button-size-m-border-radius: var(
+    --system-action-button-size-m-border-radius-default: var(
         --spectrum-corner-radius-medium-size-medium
     );
-    --system-action-button-size-xs-border-radius: var(
+    --system-action-button-size-xs-border-radius-default: var(
         --spectrum-corner-radius-medium-size-extra-small
     );
-    --system-action-button-size-s-border-radius: var(
+    --system-action-button-size-s-border-radius-default: var(
         --spectrum-corner-radius-medium-size-small
     );
-    --system-action-button-size-l-border-radius: var(
+    --system-action-button-size-l-border-radius-default: var(
         --spectrum-corner-radius-medium-size-large
     );
-    --system-action-button-size-xl-border-radius: var(
+    --system-action-button-size-xl-border-radius-default: var(
         --spectrum-corner-radius-medium-size-extra-large
     );
     --system-action-button-quiet-background-color-default: transparent;

tools/styles/tokens/express/system-theme-bridge.css

@@ -28,19 +28,19 @@
     --system-action-button-border-color-focus: transparent;
     --system-action-button-border-color-disabled: transparent;
     --system-action-button-content-color-selected: var(--spectrum-gray-75);
-    --system-action-button-size-m-border-radius: var(
+    --system-action-button-size-m-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-xs-border-radius: var(
+    --system-action-button-size-xs-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-s-border-radius: var(
+    --system-action-button-size-s-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-l-border-radius: var(
+    --system-action-button-size-l-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-xl-border-radius: var(
+    --system-action-button-size-xl-border-radius-default: var(
         --spectrum-corner-radius-100
     );
     --system-action-button-quiet-background-color-default: transparent;

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -30,19 +30,19 @@
         --spectrum-disabled-border-color
     );
     --system-action-button-content-color-selected: var(--spectrum-gray-75);
-    --system-action-button-size-m-border-radius: var(
+    --system-action-button-size-m-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-xs-border-radius: var(
+    --system-action-button-size-xs-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-s-border-radius: var(
+    --system-action-button-size-s-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-l-border-radius: var(
+    --system-action-button-size-l-border-radius-default: var(
         --spectrum-corner-radius-100
     );
-    --system-action-button-size-xl-border-radius: var(
+    --system-action-button-size-xl-border-radius-default: var(
         --spectrum-corner-radius-100
     );
     --system-action-button-quiet-background-color-default: transparent;