feat(combobox): clarifying specificity of selectors

aramos-adobe · aramos-adobe · commit bcf877c440e3 · 2024-10-31T10:54:48.000-04:00
diff --git a/components/combobox/index.css b/components/combobox/index.css
@@ -93,10 +93,11 @@
 
 	/*** Read-only Colors ***/
 	--spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);
-	--spectrum-combobox-readonly-input-border-color: var(--system-spectrum-textfield-border-color);
+	--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
 	--spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
 	--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
+	--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
 }
 
 .spectrum-Combobox--sizeS {
@@ -221,8 +222,8 @@
 		transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu)));
 	}
 
-	&.is-readOnly .spectrum-Combobox-textfield {
-		input:read-only {
+	&.is-readOnly:not(.spectrum-Combobox--quiet) {
+		.spectrum-Combobox-input:read-only {
 			background-color: var(--spectrum-combobox-readonly-input-background-color);
 			border-color: var(--spectrum-combobox-readonly-input-border-color);
 
@@ -231,11 +232,11 @@
 			}
 		}
 
-		&.is-invalid input:read-only {
+		&.is-invalid .spectrum-Combobox-input:read-only {
 			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
 		}
 
-		&.is-disabled input:read-only {
+		&.is-disabled .spectrum-Combobox-input:read-only {
 			background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
 			border-color: transparent;
 			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
@@ -406,18 +407,17 @@
 			inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));
 		}
 
-		&.spectrum-Textfield--quiet {
-			input:read-only {
-				background-color: unset;
-				border-color: unset;
+		&.is-readOnly {
+			.spectrum-Combobox-input:read-only {
+				border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color));
 			}
 
-			input:read-only:hover {
-				background-color: unset;
-				border-color: unset;
+			&.is-disabled .spectrum-Combobox-input:read-only {
+				color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
+				border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
 			}
 
-			&.is-invalid input:read-only {
+			&.is-invalid > .spectrum-Combobox-input:read-only {
 				border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
 			}
 		}
diff --git a/components/combobox/metadata/metadata.json b/components/combobox/metadata/metadata.json
@@ -10,9 +10,9 @@
     ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input",
     ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.spectrum-Textfield--quiet input:read-only",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.spectrum-Textfield--quiet input:read-only:hover",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.spectrum-Textfield--quiet.is-invalid input:read-only",
+    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL",
     ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM",
     ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS",
@@ -62,10 +62,10 @@
     ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield input:read-only",
-    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield input:read-only:hover",
-    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-disabled input:read-only",
-    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-invalid input:read-only",
+    ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
@@ -123,6 +123,7 @@
     "--mod-combobox-inline-size",
     "--mod-combobox-line-height",
     "--mod-combobox-min-inline-size",
+    "--mod-combobox-readonly-input-border-color",
     "--mod-combobox-spacing-block-end-edge-to-text",
     "--mod-combobox-spacing-block-start-edge-to-text",
     "--mod-combobox-spacing-edge-to-menu",
@@ -143,6 +144,7 @@
     "--spectrum-combobox-block-spacing-edge-to-alert",
     "--spectrum-combobox-block-spacing-edge-to-progress-circle",
     "--spectrum-combobox-border-color-default",
+    "--spectrum-combobox-border-color-disabled",
     "--spectrum-combobox-border-color-focus",
     "--spectrum-combobox-border-color-focus-hover",
     "--spectrum-combobox-border-color-hover",
@@ -203,6 +205,7 @@
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
+    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-text-quiet",
     "--spectrum-field-label-to-component",
@@ -248,8 +251,7 @@
     "--system-spectrum-combobox-border-color-focus",
     "--system-spectrum-combobox-border-color-focus-hover",
     "--system-spectrum-combobox-border-color-hover",
-    "--system-spectrum-combobox-border-color-key-focus",
-    "--system-spectrum-textfield-border-color"
+    "--system-spectrum-combobox-border-color-key-focus"
   ],
   "passthroughs": [
     "--mod-picker-button-background-color",
diff --git a/components/combobox/metadata/mods.md b/components/combobox/metadata/mods.md
@@ -43,6 +43,7 @@
 | `--mod-combobox-inline-size`                           |
 | `--mod-combobox-line-height`                           |
 | `--mod-combobox-min-inline-size`                       |
+| `--mod-combobox-readonly-input-border-color`           |
 | `--mod-combobox-spacing-block-end-edge-to-text`        |
 | `--mod-combobox-spacing-block-start-edge-to-text`      |
 | `--mod-combobox-spacing-edge-to-menu`                  |

Original file line number	Diff line number	Diff line change
`@@ -93,10 +93,11 @@`
`93`	`93`
`94`	`94`	`/* Read-only Colors */`
`95`	`95`	`--spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);`
`96`		`- --spectrum-combobox-readonly-input-border-color: var(--system-spectrum-textfield-border-color);`
	`96`	`+ --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);`
`97`	`97`	`--spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);`
`98`	`98`	`--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);`
`99`	`99`	`--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);`
	`100`	`+ --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);`
`100`	`101`	`}`
`101`	`102`
`102`	`103`	`.spectrum-Combobox--sizeS {`
`@@ -221,8 +222,8 @@`
`221`	`222`	`transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu)));`
`222`	`223`	`}`
`223`	`224`
`224`		`- &.is-readOnly .spectrum-Combobox-textfield {`
`225`		`- input:read-only {`
	`225`	`+ &.is-readOnly:not(.spectrum-Combobox--quiet) {`
	`226`	`+ .spectrum-Combobox-input:read-only {`
`226`	`227`	`background-color: var(--spectrum-combobox-readonly-input-background-color);`
`227`	`228`	`border-color: var(--spectrum-combobox-readonly-input-border-color);`
`228`	`229`
`@@ -231,11 +232,11 @@`
`231`	`232`	`}`
`232`	`233`	`}`
`233`	`234`
`234`		`- &.is-invalid input:read-only {`
	`235`	`+ &.is-invalid .spectrum-Combobox-input:read-only {`
`235`	`236`	`border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));`
`236`	`237`	`}`
`237`	`238`
`238`		`- &.is-disabled input:read-only {`
	`239`	`+ &.is-disabled .spectrum-Combobox-input:read-only {`
`239`	`240`	`background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));`
`240`	`241`	`border-color: transparent;`
`241`	`242`	`color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));`
`@@ -406,18 +407,17 @@`
`406`	`407`	`inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));`
`407`	`408`	`}`
`408`	`409`
`409`		`- &.spectrum-Textfield--quiet {`
`410`		`- input:read-only {`
`411`		`- background-color: unset;`
`412`		`- border-color: unset;`
	`410`	`+ &.is-readOnly {`
	`411`	`+ .spectrum-Combobox-input:read-only {`
	`412`	`+ border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color));`
`413`	`413`	`}`
`414`	`414`
`415`		`- input:read-only:hover {`
`416`		`- background-color: unset;`
`417`		`- border-color: unset;`
	`415`	`+ &.is-disabled .spectrum-Combobox-input:read-only {`
	`416`	`+ color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));`
	`417`	`+ border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));`
`418`	`418`	`}`
`419`	`419`
`420`		`- &.is-invalid input:read-only {`
	`420`	`+ &.is-invalid > .spectrum-Combobox-input:read-only {`
`421`	`421`	`border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));`
`422`	`422`	`}`
`423`	`423`	`}`