feat: bug fixes for reducing theming variables

adobe · Dec 3, 2024 · d976a4d · d976a4d
1 parent 0d80bad
commit d976a4d
Show file tree

Hide file tree

Showing 68 changed files with 1,943 additions and 1,985 deletions.
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
@@ -331,10 +331,12 @@ export const ArgGrid = ({
 export const Sizes = ({
 	withHeading = true,
 	withBorder = false,
+	withWrapperBorder = true,
 	...args
 } = {}, context = {}) => {
 	return ArgGrid({
 		withBorder,
+		withWrapperBorder,
 		heading: withHeading ? "Sizing" : undefined,
 		argKey: "size",
 		labels: {

diff --git a/components/actionbutton/index.css b/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(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
 	block-size: var(--spectrum-actionbutton-height);
 
 	border-radius: var(--spectrum-actionbutton-border-radius);
@@ -294,6 +294,7 @@ a.spectrum-ActionButton {
 	@extend %spectrum-AnchorButton;
 }
 
+/* Nested sub-component: Icon */
 .spectrum-ActionButton-icon {
 	@extend %spectrum-ButtonIcon;
 

diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
@@ -72,7 +72,7 @@
 		z-index: 0;
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -81,15 +81,15 @@
 		}
 
 		& + .spectrum-ActionGroup-item {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px;
 
 			margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
 			margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
 
 			border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -124,7 +124,7 @@
 		border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
 
 		&:first-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
 
 			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -142,7 +142,7 @@
 		}
 
 		&:last-child {
-			/* Action button passthrough styling */
+			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
 			border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));

diff --git a/components/button/index.css b/components/button/index.css
diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json
@@ -35,21 +35,25 @@
     ".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--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--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",
@@ -113,8 +117,7 @@
     "--mod-focus-indicator-gap",
     "--mod-line-height-100",
     "--mod-sans-font-family-stack",
-    "--mod-static-black-focus-indicator-color",
-    "--mod-static-white-focus-indicator-color"
+    "--mod-static-black-focus-indicator-color"
   ],
   "component": [
     "--spectrum-button-animation-duration",
@@ -144,7 +147,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 +300,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 +323,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 +349,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 +357,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 +382,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",

diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
@@ -49,4 +49,3 @@
 | `--mod-line-height-100`                    |
 | `--mod-sans-font-family-stack`             |
 | `--mod-static-black-focus-indicator-color` |
-| `--mod-static-white-focus-indicator-color` |
diff --git a/components/button/themes/express.css b/components/button/themes/express.css
@@ -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);
 		}
 	}
 }