fix: specificity adjustments for variant application via theming

adobe · Nov 12, 2024 · f1a2703 · f1a2703
1 parent 4baf330
commit f1a2703
Show file tree

Hide file tree

Showing 58 changed files with 995 additions and 1,029 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 dist
 !tokens/dist/index.css
+!tokens/dist/css/*.css
 
 # Not committing the map assets, these are dev-only
 *.map

diff --git a/components/actionbutton/stories/actionbutton.test.js b/components/actionbutton/stories/actionbutton.test.js
@@ -71,10 +71,30 @@ export const ActionButtonGroup = Variants({
 			testHeading: "Static black",
 			staticColor: "black",
 		},
+		{
+			testHeading: "Static black (emphasized)",
+			staticColor: "black",
+			isEmphasized: true,
+		},
+		{
+			testHeading: "Static black (quiet)",
+			staticColor: "black",
+			isQuiet: true,
+		},
 		{
 			testHeading: "Static white",
 			staticColor: "white",
 		},
+		{
+			testHeading: "Static white (emphasized)",
+			staticColor: "white",
+			isEmphasized: true,
+		},
+		{
+			testHeading: "Static white (quiet)",
+			staticColor: "white",
+			isQuiet: true,
+		},
 		{
 			testHeading: "Internationalization (Thai)",
 			label: "ล้างทั้งหมด",

diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/metadata.json
@@ -2,11 +2,11 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Avatar",
-    ".spectrum-Avatar .spectrum-Avatar.spectrum-Avatar--size100",
     ".spectrum-Avatar-image",
     ".spectrum-Avatar-link",
     ".spectrum-Avatar.is-disabled",
     ".spectrum-Avatar.is-focused:not(.is-disabled):after",
+    ".spectrum-Avatar.spectrum-Avatar--size100",
     ".spectrum-Avatar.spectrum-Avatar--size200",
     ".spectrum-Avatar.spectrum-Avatar--size300",
     ".spectrum-Avatar.spectrum-Avatar--size400",
@@ -53,11 +53,13 @@
     "--spectrum-focus-indicator-thickness"
   ],
   "system-theme": [
+    "--system-avatar-block-size",
     "--system-avatar-color-opacity",
     "--system-avatar-color-opacity-disabled",
     "--system-avatar-focus-indicator-color",
     "--system-avatar-focus-indicator-gap",
     "--system-avatar-focus-indicator-thickness",
+    "--system-avatar-inline-size",
     "--system-avatar-size-100-block-size",
     "--system-avatar-size-100-inline-size",
     "--system-avatar-size-200-block-size",

diff --git a/components/avatar/themes/spectrum-two.css b/components/avatar/themes/spectrum-two.css
@@ -21,7 +21,7 @@
 
 		--spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
 
-		&
+		&,
 		&.spectrum-Avatar--size100 {
 			--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
 			--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);

diff --git a/components/button/index.css b/components/button/index.css
@@ -72,7 +72,6 @@
 	.spectrum-Icon {
 		/* 	Any block-size difference between the intended workflow icon size and actual icon used.
 		Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
-		/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- use the icon sizing to determine the size calculation */
 		--spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)));
 
 		margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--spectrum-button-icon-size-difference, 0px) / 2)));
@@ -201,10 +200,10 @@ a.spectrum-Button {
 	--spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
 
 	&.is-selected {
-		--spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-default));
-		--spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-hover));
-		--spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-down));
-		--spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-focus));
+		--mod-button-content-color-default: var(--mod-button-static-content-color);
+		--mod-button-content-color-hover: var(--mod-button-static-content-color);
+		--mod-button-content-color-down: var(--mod-button-static-content-color);
+		--mod-button-content-color-focus: var(--mod-button-static-content-color);
 	}
 }
 

diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json
@@ -154,10 +154,6 @@
     "--spectrum-button-min-width",
     "--spectrum-button-minimum-width-multiplier",
     "--spectrum-button-padding-label-to-icon",
-    "--spectrum-button-static-white-content-color-default",
-    "--spectrum-button-static-white-content-color-down",
-    "--spectrum-button-static-white-content-color-focus",
-    "--spectrum-button-static-white-content-color-hover",
     "--spectrum-button-top-to-icon",
     "--spectrum-button-top-to-text",
     "--spectrum-button-top-to-text-extra-large",
@@ -525,7 +521,7 @@
     "--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-focus-indicator-color",
+    "--system-button-static-black-focus-ring-color",
     "--system-button-static-black-outline-background-color-default",
     "--system-button-static-black-outline-background-color-disabled",
     "--system-button-static-black-outline-background-color-down",
@@ -594,7 +590,7 @@
     "--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-focus-indicator-color",
+    "--system-button-static-white-focus-ring-color",
     "--system-button-static-white-outline-background-color-default",
     "--system-button-static-white-outline-background-color-disabled",
     "--system-button-static-white-outline-background-color-down",

diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js
@@ -44,10 +44,20 @@ export const ButtonGroups = Variants({
 			testHeading: "Static black",
 			staticColor: "black",
 		},
+		{
+			testHeading: "Static black (outline)",
+			staticColor: "black",
+			treatment: "outline",
+		},
 		{
 			testHeading: "Static white",
 			staticColor: "white",
 		},
+		{
+			testHeading: "Static white (outline)",
+			staticColor: "white",
+			treatment: "outline",
+		},
 		{
 			testHeading: "Text wrapping with workflow icon",
 			customStyles: {