fix: correct nested CSS structure for size XL variant

adobe · Feb 11, 2025 · f589fec · f589fec
1 parent b7421af
commit f589fec
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
@@ -158,14 +158,23 @@
     "--system-search-border-color-key-focus",
     "--system-search-border-radius",
     "--system-search-edge-to-visual",
+    "--system-search-size-l-block-size",
     "--system-search-size-l-border-radius",
     "--system-search-size-l-edge-to-visual",
+    "--system-search-size-l-icon-size",
+    "--system-search-size-l-text-to-icon",
     "--system-search-size-m-border-radius",
     "--system-search-size-m-edge-to-visual",
+    "--system-search-size-s-block-size",
     "--system-search-size-s-border-radius",
     "--system-search-size-s-edge-to-visual",
+    "--system-search-size-s-icon-size",
+    "--system-search-size-s-text-to-icon",
+    "--system-search-size-xl-block-size",
     "--system-search-size-xl-border-radius",
-    "--system-search-size-xl-edge-to-visual"
+    "--system-search-size-xl-edge-to-visual",
+    "--system-search-size-xl-icon-size",
+    "--system-search-size-xl-text-to-icon"
   ],
   "passthroughs": [
     "--mod-textfield-background-color",

diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
@@ -41,14 +41,14 @@
 			--spectrum-search-block-size: var(--spectrum-component-height-200);
 			--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
 			--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
+		}
 
-			&.spectrum-Search--sizeXL {
-				--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
-				--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
-				--spectrum-search-block-size: var(--spectrum-component-height-300);
-				--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
-				--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
-			}
+		&.spectrum-Search--sizeXL {
+			--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+			--spectrum-search-block-size: var(--spectrum-component-height-300);
+			--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
+			--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
 		}
 	}
 }