feat: bug fixes for reducing theming variables

Author: castastrophe

components/actionbutton/index.css

@@ -242,13 +242,13 @@
 
 	--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));
 	--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));
-	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));
+	--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only));
 
 	@extend %spectrum-BaseButton;
 
 	position: relative;
 
-	min-inline-size: var(--mod-actionbutton-min-width, calc((var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)) * 2 + var(--spectrum-actionbutton-icon-size)));
+	min-inline-size: var(--mod-actionbutton-min-width, calc(var(--spectrum-actionbutton-edge-to-visual-only) * 2 + var(--spectrum-actionbutton-sized-icon-size)));
 	block-size: var(--spectrum-actionbutton-height);
 
 	border-radius: var(--spectrum-actionbutton-border-radius);

components/button/index.css

@@ -35,21 +35,24 @@
     ".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--primary",
+    ".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--outline",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary",
-    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--primary",
+    ".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",
@@ -90,7 +93,6 @@
     "--mod-button-edge-to-visual",
     "--mod-button-edge-to-visual-only",
     "--mod-button-focus-indicator-gap",
-    "--mod-button-focus-ring-border-radius",
     "--mod-button-focus-ring-color",
     "--mod-button-focus-ring-gap",
     "--mod-button-focus-ring-thickness",
@@ -144,7 +146,6 @@
     "--spectrum-button-edge-to-visual",
     "--spectrum-button-edge-to-visual-only",
     "--spectrum-button-focus-indicator-color",
-    "--spectrum-button-focus-ring-border-radius",
     "--spectrum-button-focus-ring-gap",
     "--spectrum-button-focus-ring-thickness",
     "--spectrum-button-font-size",
@@ -298,17 +299,13 @@
     "--system-button-border-color-down",
     "--system-button-border-color-focus",
     "--system-button-border-color-hover",
-    "--system-button-primary-content-color-default",
-    "--system-button-primary-content-color-down",
-    "--system-button-primary-content-color-focus",
-    "--system-button-primary-content-color-hover",
     "--system-button-primary-outline-background-color-down",
     "--system-button-primary-outline-background-color-focus",
     "--system-button-primary-outline-background-color-hover",
     "--system-button-secondary-background-color-default",
-    "--system-button-secondary-background-color-down",
-    "--system-button-secondary-background-color-focus",
-    "--system-button-secondary-background-color-hover",
+    "--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-outline-background-color-down",
     "--system-button-secondary-outline-background-color-focus",
     "--system-button-secondary-outline-background-color-hover",
@@ -325,25 +322,17 @@
     "--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-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-primary-background-color-default",
-    "--system-button-static-black-primary-background-color-down",
-    "--system-button-static-black-primary-background-color-focus",
-    "--system-button-static-black-primary-background-color-hover",
-    "--system-button-static-black-primary-content-color-default",
-    "--system-button-static-black-primary-content-color-down",
-    "--system-button-static-black-primary-content-color-focus",
-    "--system-button-static-black-primary-content-color-hover",
+    "--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-secondary-background-color-default",
     "--system-button-static-black-secondary-background-color-down",
     "--system-button-static-black-secondary-background-color-focus",
@@ -359,14 +348,6 @@
     "--system-button-static-black-secondary-outline-border-color-down",
     "--system-button-static-black-secondary-outline-border-color-focus",
     "--system-button-static-black-secondary-outline-border-color-hover",
-    "--system-button-static-black-selected-background-color-default",
-    "--system-button-static-black-selected-background-color-down",
-    "--system-button-static-black-selected-background-color-focus",
-    "--system-button-static-black-selected-background-color-hover",
-    "--system-button-static-black-selected-content-color-default",
-    "--system-button-static-black-selected-content-color-down",
-    "--system-button-static-black-selected-content-color-focus",
-    "--system-button-static-black-selected-content-color-hover",
     "--system-button-static-white-background-color-default",
     "--system-button-static-white-background-color-down",
     "--system-button-static-white-background-color-focus",
@@ -375,28 +356,20 @@
     "--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-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-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-primary-background-color-default",
-    "--system-button-static-white-primary-background-color-down",
-    "--system-button-static-white-primary-background-color-focus",
-    "--system-button-static-white-primary-background-color-hover",
-    "--system-button-static-white-primary-content-color-default",
-    "--system-button-static-white-primary-content-color-down",
-    "--system-button-static-white-primary-content-color-focus",
-    "--system-button-static-white-primary-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",
@@ -408,15 +381,7 @@
     "--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",
-    "--system-button-static-white-secondary-outline-border-color-hover",
-    "--system-button-static-white-selected-background-color-default",
-    "--system-button-static-white-selected-background-color-down",
-    "--system-button-static-white-selected-background-color-focus",
-    "--system-button-static-white-selected-background-color-hover",
-    "--system-button-static-white-selected-content-color-default",
-    "--system-button-static-white-selected-content-color-down",
-    "--system-button-static-white-selected-content-color-focus",
-    "--system-button-static-white-selected-content-color-hover"
+    "--system-button-static-white-secondary-outline-border-color-hover"
   ],
   "passthroughs": [
     "--mod-progress-circle-position",

components/button/metadata/metadata.json

@@ -25,7 +25,6 @@
 | `--mod-button-edge-to-visual`              |
 | `--mod-button-edge-to-visual-only`         |
 | `--mod-button-focus-indicator-gap`         |
-| `--mod-button-focus-ring-border-radius`    |
 | `--mod-button-focus-ring-color`            |
 | `--mod-button-focus-ring-gap`              |
 | `--mod-button-focus-ring-thickness`        |

components/button/metadata/mods.md

@@ -17,24 +17,24 @@
 
 @container style(--system: express) {
 	.spectrum-Button {
-		--spectrum-button-background-color-default: var(--spectrum-gray-200);
-		--spectrum-button-background-color-hover: var(--spectrum-gray-300);
-		--spectrum-button-background-color-down: var(--spectrum-gray-400);
-		--spectrum-button-background-color-focus: var(--spectrum-gray-300);
+		--mod-button-background-color-default: var(--spectrum-gray-200);
+		--mod-button-background-color-hover: var(--spectrum-gray-300);
+		--mod-button-background-color-down: var(--spectrum-gray-400);
+		--mod-button-background-color-focus: var(--spectrum-gray-300);
 
-		--spectrum-button-border-color-default: transparent;
-		--spectrum-button-border-color-hover: transparent;
-		--spectrum-button-border-color-down: transparent;
-		--spectrum-button-border-color-focus: transparent;
+		--mod-button-border-color-default: transparent;
+		--mod-button-border-color-hover: transparent;
+		--mod-button-border-color-down: transparent;
+		--mod-button-border-color-focus: transparent;
 
-		--spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-		--spectrum-button-border-color-disabled: transparent;
+		--mod-button-background-color-disabled: var(--spectrum-disabled-background-color);
+		--mod-button-border-color-disabled: transparent;
 
 		&.is-selected {
-			--spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+			--mod-button-background-color-default: var(--spectrum-neutral-background-color-default);
+			--mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+			--mod-button-background-color-down: var(--spectrum-neutral-background-color-down);
+			--mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
 		}
 	}
 }