fix(button): reduce mod interception (#3662)

This update aims to simplify `--mod-*` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-button-*` properties instead and adjusts the specificity to ensure no regressions in rendered results.

Other changes of note:

- Removes the `.spectrum-Button--sizeM` as unnecessary and duplicate as these styles are applied in the base class.
- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects.

Author: castastrophe

.changeset/stale-baboons-shake.md

@@ -0,0 +1,10 @@
+---
+"@spectrum-css/button": patch
+---
+
+This update aims to simplify `--mod-*` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-button-*` properties instead and adjusts the specificity to ensure no regressions in rendered results.
+
+Other changes of note:
+
+- Removes the `.spectrum-Button--sizeM` as unnecessary and duplicate as these styles are applied in the base class.
+- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects.

components/button/dist/metadata.json

@@ -8,7 +8,6 @@
     ".spectrum-Button .spectrum-ProgressCircle",
     ".spectrum-Button--noWrap .spectrum-Button-label",
     ".spectrum-Button--sizeL",
-    ".spectrum-Button--sizeM",
     ".spectrum-Button--sizeS",
     ".spectrum-Button--sizeXL",
     ".spectrum-Button-label",
@@ -35,26 +34,19 @@
     ".spectrum-Button.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline",
-    ".spectrum-Button.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button.spectrum-Button--staticBlack",
     ".spectrum-Button.spectrum-Button--staticBlack.is-selected",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
-    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary",
-    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline",
-    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button.spectrum-Button--staticWhite",
     ".spectrum-Button.spectrum-Button--staticWhite.is-selected",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
-    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary",
-    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary)",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
-    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary:not(.spectrum-Button--outline)",
     ".spectrum-Button::-moz-focus-inner",
     ".spectrum-Button:active",
     ".spectrum-Button:after",
@@ -311,9 +303,9 @@
     "--system-button-primary-outline-background-color-focus",
     "--system-button-primary-outline-background-color-hover",
     "--system-button-secondary-background-color-default",
-    "--system-button-secondary-not-outline-background-color-down",
-    "--system-button-secondary-not-outline-background-color-focus",
-    "--system-button-secondary-not-outline-background-color-hover",
+    "--system-button-secondary-background-color-down",
+    "--system-button-secondary-background-color-focus",
+    "--system-button-secondary-background-color-hover",
     "--system-button-secondary-outline-background-color-down",
     "--system-button-secondary-outline-background-color-focus",
     "--system-button-secondary-outline-background-color-hover",
@@ -331,21 +323,18 @@
     "--system-button-static-black-content-color-down",
     "--system-button-static-black-content-color-focus",
     "--system-button-static-black-content-color-hover",
-    "--system-button-static-black-outline-not-secondary-background-color-default",
-    "--system-button-static-black-outline-not-secondary-background-color-down",
-    "--system-button-static-black-outline-not-secondary-background-color-focus",
-    "--system-button-static-black-outline-not-secondary-background-color-hover",
-    "--system-button-static-black-outline-not-secondary-border-color-default",
-    "--system-button-static-black-outline-not-secondary-border-color-down",
-    "--system-button-static-black-outline-not-secondary-border-color-focus",
-    "--system-button-static-black-outline-not-secondary-border-color-hover",
-    "--system-button-static-black-outline-not-secondary-content-color-default",
-    "--system-button-static-black-outline-not-secondary-content-color-down",
-    "--system-button-static-black-outline-not-secondary-content-color-focus",
-    "--system-button-static-black-outline-not-secondary-content-color-hover",
-    "--system-button-static-black-outline-secondary-background-color-down",
-    "--system-button-static-black-outline-secondary-background-color-focus",
-    "--system-button-static-black-outline-secondary-background-color-hover",
+    "--system-button-static-black-outline-background-color-default",
+    "--system-button-static-black-outline-background-color-down",
+    "--system-button-static-black-outline-background-color-focus",
+    "--system-button-static-black-outline-background-color-hover",
+    "--system-button-static-black-outline-border-color-default",
+    "--system-button-static-black-outline-border-color-down",
+    "--system-button-static-black-outline-border-color-focus",
+    "--system-button-static-black-outline-border-color-hover",
+    "--system-button-static-black-outline-content-color-default",
+    "--system-button-static-black-outline-content-color-down",
+    "--system-button-static-black-outline-content-color-focus",
+    "--system-button-static-black-outline-content-color-hover",
     "--system-button-static-black-secondary-background-color-default",
     "--system-button-static-black-secondary-background-color-down",
     "--system-button-static-black-secondary-background-color-focus",
@@ -354,6 +343,10 @@
     "--system-button-static-black-secondary-content-color-down",
     "--system-button-static-black-secondary-content-color-focus",
     "--system-button-static-black-secondary-content-color-hover",
+    "--system-button-static-black-secondary-outline-background-color-default",
+    "--system-button-static-black-secondary-outline-background-color-down",
+    "--system-button-static-black-secondary-outline-background-color-focus",
+    "--system-button-static-black-secondary-outline-background-color-hover",
     "--system-button-static-black-secondary-outline-border-color-default",
     "--system-button-static-black-secondary-outline-border-color-down",
     "--system-button-static-black-secondary-outline-border-color-focus",
@@ -366,21 +359,18 @@
     "--system-button-static-white-content-color-down",
     "--system-button-static-white-content-color-focus",
     "--system-button-static-white-content-color-hover",
-    "--system-button-static-white-outline-not-secondary-background-color-default",
-    "--system-button-static-white-outline-not-secondary-background-color-down",
-    "--system-button-static-white-outline-not-secondary-background-color-focus",
-    "--system-button-static-white-outline-not-secondary-background-color-hover",
-    "--system-button-static-white-outline-not-secondary-border-color-default",
-    "--system-button-static-white-outline-not-secondary-border-color-down",
-    "--system-button-static-white-outline-not-secondary-border-color-focus",
-    "--system-button-static-white-outline-not-secondary-border-color-hover",
-    "--system-button-static-white-outline-not-secondary-content-color-default",
-    "--system-button-static-white-outline-not-secondary-content-color-down",
-    "--system-button-static-white-outline-not-secondary-content-color-focus",
-    "--system-button-static-white-outline-not-secondary-content-color-hover",
-    "--system-button-static-white-outline-secondary-background-color-down",
-    "--system-button-static-white-outline-secondary-background-color-focus",
-    "--system-button-static-white-outline-secondary-background-color-hover",
+    "--system-button-static-white-outline-background-color-default",
+    "--system-button-static-white-outline-background-color-down",
+    "--system-button-static-white-outline-background-color-focus",
+    "--system-button-static-white-outline-background-color-hover",
+    "--system-button-static-white-outline-border-color-default",
+    "--system-button-static-white-outline-border-color-down",
+    "--system-button-static-white-outline-border-color-focus",
+    "--system-button-static-white-outline-border-color-hover",
+    "--system-button-static-white-outline-content-color-default",
+    "--system-button-static-white-outline-content-color-down",
+    "--system-button-static-white-outline-content-color-focus",
+    "--system-button-static-white-outline-content-color-hover",
     "--system-button-static-white-secondary-background-color-default",
     "--system-button-static-white-secondary-background-color-down",
     "--system-button-static-white-secondary-background-color-focus",
@@ -389,6 +379,10 @@
     "--system-button-static-white-secondary-content-color-down",
     "--system-button-static-white-secondary-content-color-focus",
     "--system-button-static-white-secondary-content-color-hover",
+    "--system-button-static-white-secondary-outline-background-color-default",
+    "--system-button-static-white-secondary-outline-background-color-down",
+    "--system-button-static-white-secondary-outline-background-color-focus",
+    "--system-button-static-white-secondary-outline-background-color-hover",
     "--system-button-static-white-secondary-outline-border-color-default",
     "--system-button-static-white-secondary-outline-border-color-down",
     "--system-button-static-white-secondary-outline-border-color-focus",