fix: specificity adjustments for variant application via theming

adobe · Nov 6, 2024 · 59ea9c5 · 59ea9c5
1 parent c34389c
commit 59ea9c5
Show file tree

Hide file tree

Showing 42 changed files with 725 additions and 769 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/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
@@ -201,10 +201,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/themes/spectrum-two.css b/components/button/themes/spectrum-two.css
diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css
@@ -103,24 +103,24 @@
 
 		&.spectrum-Combobox--quiet {
 			--spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier);
-			--spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet);
-			--spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet);
+			--mod-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet);
+			--mod-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet);
 
 			&,
 			&.spectrum-Combobox--sizeM {
-				--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
+				--mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
 			}
 
 			&.spectrum-Combobox--sizeS {
-				--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
+				--mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
 			}
 
 			&.spectrum-Combobox--sizeL {
-				--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large);
+				--mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large);
 			}
 
 			&.spectrum-Combobox--sizeXL {
-				--spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large);
+				--mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large);
 			}
 		}
 	}

diff --git a/components/dial/metadata/metadata.json b/components/dial/metadata/metadata.json
@@ -4,7 +4,6 @@
     ".js-focus-within .spectrum-Dial-handle[focus-within]",
     ".js-focus-within .spectrum-Dial-handle[focus-within]:after",
     ".spectrum-Dial",
-    ".spectrum-Dial--small",
     ".spectrum-Dial-controls",
     ".spectrum-Dial-controls:after",
     ".spectrum-Dial-controls:before",
@@ -35,6 +34,7 @@
     ".spectrum-Dial.is-disabled .spectrum-Dial-handle:after",
     ".spectrum-Dial.is-disabled .spectrum-Dial-handle:before",
     ".spectrum-Dial.is-disabled .spectrum-Dial-labelContainer",
+    ".spectrum-Dial.spectrum-Dial--small",
     ".u-isGrabbing",
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label",
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value"

diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css
@@ -57,10 +57,10 @@
 		--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
 		--spectrum-dial-label-text-size: var(--spectrum-font-size-75);
 		--spectrum-dial-label-line-height: var(--spectrum-line-height-200);
-	}
 
-	.spectrum-Dial--small {
-		--spectrum-dial-width: 24px;
-		--spectrum-dial-height: 24px;
+		&.spectrum-Dial--small {
+			--spectrum-dial-width: 24px;
+			--spectrum-dial-height: 24px;
+		}
 	}
 }
diff --git a/components/divider/index.css b/components/divider/index.css
@@ -32,37 +32,38 @@
 	border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
 
 	background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color));
-}
 
-/* static white variant colors */
-.spectrum-Divider--staticWhite {
-	&,
-	&.spectrum-Divider--sizeM {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white));
-	}
 
-	&.spectrum-Divider--sizeS {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white));
-	}
+	/* static white variant colors */
+	&.spectrum-Divider--staticWhite {
+		&,
+		&.spectrum-Divider--sizeM {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white));
+		}
 
-	&.spectrum-Divider--sizeL {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white));
-	}
-}
+		&.spectrum-Divider--sizeS {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white));
+		}
 
-/* static black variant colors */
-.spectrum-Divider--staticBlack {
-	&,
-	&.spectrum-Divider--sizeM {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black));
+		&.spectrum-Divider--sizeL {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white));
+		}
 	}
 
-	&.spectrum-Divider--sizeS {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black));
-	}
+	/* static black variant colors */
+	&.spectrum-Divider--staticBlack {
+		&,
+		&.spectrum-Divider--sizeM {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black));
+		}
+
+		&.spectrum-Divider--sizeS {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black));
+		}
 
-	&.spectrum-Divider--sizeL {
-		--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black));
+		&.spectrum-Divider--sizeL {
+			--spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black));
+		}
 	}
 }
 

diff --git a/components/divider/metadata/metadata.json b/components/divider/metadata/metadata.json
@@ -2,18 +2,18 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Divider",
-    ".spectrum-Divider--staticBlack",
-    ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL",
-    ".spectrum-Divider--staticBlack.spectrum-Divider--sizeM",
-    ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS",
-    ".spectrum-Divider--staticWhite",
-    ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL",
-    ".spectrum-Divider--staticWhite.spectrum-Divider--sizeM",
-    ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS",
     ".spectrum-Divider--vertical",
     ".spectrum-Divider.spectrum-Divider--sizeL",
     ".spectrum-Divider.spectrum-Divider--sizeM",
-    ".spectrum-Divider.spectrum-Divider--sizeS"
+    ".spectrum-Divider.spectrum-Divider--sizeS",
+    ".spectrum-Divider.spectrum-Divider--staticBlack",
+    ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeL",
+    ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeM",
+    ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeS",
+    ".spectrum-Divider.spectrum-Divider--staticWhite",
+    ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeL",
+    ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeM",
+    ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeS"
   ],
   "modifiers": [
     "--mod-divider-background-color",

diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/metadata/metadata.json
@@ -2,7 +2,7 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-FloatingActionButton",
-    ".spectrum-FloatingActionButton--secondary",
+    ".spectrum-FloatingActionButton.spectrum-FloatingActionButton--secondary",
     ".spectrum-FloatingActionButton:active",
     ".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon",
     ".spectrum-FloatingActionButton:after",

diff --git a/components/floatingactionbutton/themes/spectrum-two.css b/components/floatingactionbutton/themes/spectrum-two.css
@@ -31,16 +31,16 @@
 		--spectrum-floating-action-button-icon-color-hover: var(--spectrum-white);
 		--spectrum-floating-action-button-icon-color-down: var(--spectrum-white);
 		--spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white);
-	}
 
-	.spectrum-FloatingActionButton--secondary {
-		--spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color);
-		--spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
-		--spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
-		--spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
-		--spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
-		--spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
-		--spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
-		--spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		&.spectrum-FloatingActionButton--secondary {
+			--spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color);
+			--spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
+			--spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
+			--spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
+			--spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
+			--spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+			--spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+			--spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+		}
 	}
 }
diff --git a/components/helptext/index.css b/components/helptext/index.css
@@ -16,7 +16,6 @@
 @media (forced-colors: active) {
 	.spectrum-HelpText {
 		--highcontrast-helptext-content-color-default: CanvasText;
-		--highcontrast-helptext-icon-color-default: CanvasText;
 
 		&,
 		.spectrum-HelpText-validationIcon,
@@ -34,7 +33,15 @@
 	font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
 	min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height));
 
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--mod-helptext-line-height: var(--mod-helptext-line-height-cjk);
+		--spectrum-helptext-line-height: var(--spectrum-helptext-line-height-cjk);
+	}
+
 	.spectrum-HelpText-validationIcon {
+		color: inherit;
 		margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
 		padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon));
 		padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon));
@@ -44,46 +51,9 @@
 	}
 
 	.spectrum-HelpText-text {
+		color: inherit;
 		padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text));
 		padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text));
 		line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height));
 	}
-
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
-		.spectrum-HelpText-text {
-			line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk));
-		}
-	}
-
-	&.spectrum-HelpText--neutral {
-		.spectrum-HelpText-text {
-			color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-		}
-
-		.spectrum-HelpText-validationIcon {
-			color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-		}
-	}
-
-	&.spectrum-HelpText--negative {
-		.spectrum-HelpText-text {
-			color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-		}
-
-		.spectrum-HelpText-validationIcon {
-			color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-		}
-	}
-
-	&.is-disabled {
-		.spectrum-HelpText-text {
-			color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
-		}
-
-		.spectrum-HelpText-validationIcon {
-			color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default)));
-		}
-	}
 }