feat(actionbutton): s2 migration

.changeset/chilled-peaches-enjoy.md

@@ -0,0 +1,27 @@
+---
+"@spectrum-css/actionbutton": major
+---
+
+Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
+
+- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
+- Includes the Spectrum 2 down state transform.
+- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
+- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
+- Background and content colors were updated.
+- Mod custom properties have been adjusted:
+  - Renamed:
+    - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
+    - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
+    - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
+  - Removed:
+    - `--mod-actionbutton-border-color-default`
+    - `--mod-actionbutton-border-color-disabled`
+    - `--mod-actionbutton-border-color-down`
+    - `--mod-actionbutton-border-color-focus`
+    - `--mod-actionbutton-border-color-hover`
+    - `--mod-actionbutton-border-width`
+    - `--mod-actionbutton-static-content-color`
+  - New:
+    - `--mod-actionbutton-font-weight`
+    - `--mod-actionbutton-font-style`

components/actionbutton/dist/metadata.json

@@ -2,37 +2,29 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionButton",
+    ".spectrum-ActionButton .spectrum-ActionButton-hold",
+    ".spectrum-ActionButton .spectrum-ActionButton-icon",
+    ".spectrum-ActionButton .spectrum-ActionButton-label",
     ".spectrum-ActionButton--sizeL",
     ".spectrum-ActionButton--sizeS",
     ".spectrum-ActionButton--sizeXL",
     ".spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton-hold",
-    ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
     ".spectrum-ActionButton-icon",
-    ".spectrum-ActionButton-icon:only-child",
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
     ".spectrum-ActionButton.is-selected",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -41,43 +33,58 @@
     ".spectrum-ActionButton:focus",
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
+    ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
     "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
   "modifiers": [
     "--mod-actionbutton-animation-duration",
     "--mod-actionbutton-background-color-default",
+    "--mod-actionbutton-background-color-default-selected",
+    "--mod-actionbutton-background-color-default-selected-emphasized",
     "--mod-actionbutton-background-color-disabled",
     "--mod-actionbutton-background-color-down",
+    "--mod-actionbutton-background-color-down-selected",
+    "--mod-actionbutton-background-color-down-selected-emphasized",
     "--mod-actionbutton-background-color-focus",
+    "--mod-actionbutton-background-color-focus-selected",
+    "--mod-actionbutton-background-color-focus-selected-emphasized",
     "--mod-actionbutton-background-color-hover",
-    "--mod-actionbutton-border-color-default",
-    "--mod-actionbutton-border-color-disabled",
-    "--mod-actionbutton-border-color-down",
-    "--mod-actionbutton-border-color-focus",
-    "--mod-actionbutton-border-color-hover",
+    "--mod-actionbutton-background-color-hover-selected",
+    "--mod-actionbutton-background-color-hover-selected-emphasized",
     "--mod-actionbutton-border-radius",
-    "--mod-actionbutton-border-width",
     "--mod-actionbutton-content-color-default",
+    "--mod-actionbutton-content-color-default-selected",
+    "--mod-actionbutton-content-color-default-selected-emphasized",
     "--mod-actionbutton-content-color-disabled",
     "--mod-actionbutton-content-color-down",
+    "--mod-actionbutton-content-color-down-selected",
+    "--mod-actionbutton-content-color-down-selected-emphasized",
     "--mod-actionbutton-content-color-focus",
+    "--mod-actionbutton-content-color-focus-selected",
+    "--mod-actionbutton-content-color-focus-selected-emphasized",
     "--mod-actionbutton-content-color-hover",
+    "--mod-actionbutton-content-color-hover-selected",
+    "--mod-actionbutton-content-color-hover-selected-emphasized",
     "--mod-actionbutton-edge-to-hold-icon",
     "--mod-actionbutton-edge-to-text",
     "--mod-actionbutton-edge-to-visual",
     "--mod-actionbutton-edge-to-visual-only",
     "--mod-actionbutton-focus-indicator-border-radius",
     "--mod-actionbutton-focus-indicator-color",
     "--mod-actionbutton-focus-indicator-gap",
+    "--mod-actionbutton-focus-indicator-thickness",
+    "--mod-actionbutton-font-size",
+    "--mod-actionbutton-font-style",
+    "--mod-actionbutton-font-weight",
     "--mod-actionbutton-height",
     "--mod-actionbutton-icon-size",
     "--mod-actionbutton-label-color",
+    "--mod-actionbutton-line-height",
     "--mod-actionbutton-min-width",
-    "--mod-actionbutton-text-to-visual",
-    "--mod-disabled-background-color",
-    "--mod-disabled-content-color"
+    "--mod-actionbutton-text-to-visual"
   ],
   "component": [
     "--spectrum-action-button-edge-to-hold-icon-extra-large",
@@ -91,24 +98,15 @@
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
-    "--spectrum-actionbutton-background-color-selected",
-    "--spectrum-actionbutton-background-color-selected-disabled",
-    "--spectrum-actionbutton-background-color-selected-down",
-    "--spectrum-actionbutton-background-color-selected-focus",
-    "--spectrum-actionbutton-background-color-selected-hover",
-    "--spectrum-actionbutton-border-color-default",
-    "--spectrum-actionbutton-border-color-disabled",
-    "--spectrum-actionbutton-border-color-down",
-    "--spectrum-actionbutton-border-color-focus",
-    "--spectrum-actionbutton-border-color-hover",
+    "--spectrum-actionbutton-border-color",
     "--spectrum-actionbutton-border-radius",
     "--spectrum-actionbutton-border-width",
     "--spectrum-actionbutton-content-color-default",
     "--spectrum-actionbutton-content-color-disabled",
     "--spectrum-actionbutton-content-color-down",
     "--spectrum-actionbutton-content-color-focus",
     "--spectrum-actionbutton-content-color-hover",
-    "--spectrum-actionbutton-content-color-selected",
+    "--spectrum-actionbutton-downstate-perspective",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
@@ -118,8 +116,11 @@
     "--spectrum-actionbutton-focus-indicator-gap",
     "--spectrum-actionbutton-focus-indicator-thickness",
     "--spectrum-actionbutton-font-size",
+    "--spectrum-actionbutton-font-style",
+    "--spectrum-actionbutton-font-weight",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
+    "--spectrum-actionbutton-line-height",
     "--spectrum-actionbutton-min-width",
     "--spectrum-actionbutton-text-to-visual"
   ],
@@ -129,6 +130,7 @@
     "--spectrum-accent-background-color-hover",
     "--spectrum-accent-background-color-key-focus",
     "--spectrum-animation-duration-100",
+    "--spectrum-black",
     "--spectrum-border-width-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
@@ -150,14 +152,23 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-component-size-width-ratio-down",
     "--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-default-font-style",
     "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-black-background-color",
+    "--spectrum-disabled-static-black-content-color",
+    "--spectrum-disabled-static-white-background-color",
+    "--spectrum-disabled-static-white-content-color",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -169,12 +180,9 @@
     "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-gray-400",
-    "--spectrum-gray-50",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
+    "--spectrum-medium-font-weight",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
     "--spectrum-neutral-background-color-selected-hover",
@@ -193,14 +201,14 @@
     "--spectrum-text-to-visual-75",
     "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-500",
-    "--spectrum-transparent-black-600",
-    "--spectrum-transparent-black-700",
+    "--spectrum-transparent-black-25",
+    "--spectrum-transparent-black-800",
+    "--spectrum-transparent-black-900",
     "--spectrum-transparent-white-100",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-500",
-    "--spectrum-transparent-white-600",
-    "--spectrum-transparent-white-700",
+    "--spectrum-transparent-white-25",
+    "--spectrum-transparent-white-800",
+    "--spectrum-transparent-white-900",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
@@ -214,20 +222,12 @@
     "--mod-button-line-height"
   ],
   "high-contrast": [
+    "--highcontrast-actionbutton-animation-duration",
     "--highcontrast-actionbutton-background-color-default",
     "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-background-color-down",
-    "--highcontrast-actionbutton-background-color-focus",
-    "--highcontrast-actionbutton-background-color-hover",
-    "--highcontrast-actionbutton-border-color-default",
-    "--highcontrast-actionbutton-border-color-disabled",
-    "--highcontrast-actionbutton-border-color-down",
-    "--highcontrast-actionbutton-border-color-focus",
-    "--highcontrast-actionbutton-border-color-hover",
+    "--highcontrast-actionbutton-border-color",
     "--highcontrast-actionbutton-content-color-default",
     "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-content-color-down",
-    "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover"
+    "--highcontrast-actionbutton-focus-indicator-color"
   ]
 }