feat: bug fixes for reducing theming variables

Author: castastrophe

components/actionbutton/index.css

@@ -248,7 +248,7 @@
 
 	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-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",
@@ -298,17 +301,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 +324,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 +350,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 +358,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 +383,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

@@ -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);
 		}
 	}
 }