chore(combobox): fixing lint errors

Author: aramos-adobe

components/combobox/index.css

@@ -90,6 +90,13 @@
 	--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
 	--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
 	/* @passthroughs end -- settings for nested Picker Button component */
+
+	/*** 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-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--sizeS {
@@ -301,12 +308,6 @@
 /* TEXTFIELD (wrapper) */
 .spectrum-Combobox-textfield {
 	inline-size: 100%;
-
-	/* &.spectrum-Textfield--quiet {
-		input:read-only {
-			background-color: transparent;
-		}
-	} */
 }
 
 /* TEXT INPUT */
@@ -380,8 +381,8 @@
 /* Combobox Read-only */
 .spectrum-Textfield.is-readOnly {
 	input:read-only {
-		background-color: var(--spectrum-textfield-background-color);
-		border-color: var(--spectrum-textfield-border-color);
+		background-color: var(--spectrum-combobox-readonly-input-background-color);
+		border-color: var(--spectrum-combobox-readonly-input-border-color);
 
 		&:hover {
 			background-color: revert;
@@ -390,13 +391,13 @@
 	}
 
 	&.is-invalid input:read-only {
-		border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
+		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 {
-		background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
+		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-textfield-text-color-disabled)));
+		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
 	}
 
 	&.spectrum-Textfield--quiet {
@@ -406,12 +407,13 @@
 		}
 
 		&.is-invalid input:read-only {
-			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
+			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
 		}
 	}
 }
 
 /* QUIET VARIATION (no visible background) */
+/* stylelint-disable-next-line no-duplicate-selectors -- Combobox quiet variation and mods */
 .spectrum-Combobox--quiet {
 	border-radius: 0;
 

components/combobox/metadata/metadata.json

@@ -164,6 +164,11 @@
     "--spectrum-combobox-inline-size",
     "--spectrum-combobox-line-height",
     "--spectrum-combobox-min-inline-size",
+    "--spectrum-combobox-readonly-background-color-disabled",
+    "--spectrum-combobox-readonly-border-color-invalid-default",
+    "--spectrum-combobox-readonly-input-background-color",
+    "--spectrum-combobox-readonly-input-border-color",
+    "--spectrum-combobox-readonly-text-color-disabled",
     "--spectrum-combobox-spacing-block-end-edge-to-text",
     "--spectrum-combobox-spacing-block-start-edge-to-text",
     "--spectrum-combobox-spacing-edge-to-menu",
@@ -196,6 +201,8 @@
     "--spectrum-component-top-to-text-75",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
+    "--spectrum-disabled-background-color",
+    "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-text-quiet",
     "--spectrum-field-label-to-component",
     "--spectrum-field-label-to-component-quiet-extra-large",
@@ -219,6 +226,7 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-400",
+    "--spectrum-gray-50",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -229,11 +237,6 @@
     "--spectrum-negative-border-color-focus-hover",
     "--spectrum-negative-border-color-hover",
     "--spectrum-negative-border-color-key-focus",
-    "--spectrum-textfield-background-color",
-    "--spectrum-textfield-background-color-disabled",
-    "--spectrum-textfield-border-color",
-    "--spectrum-textfield-border-color-invalid-default",
-    "--spectrum-textfield-text-color-disabled",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
@@ -244,7 +247,8 @@
     "--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-combobox-border-color-key-focus",
+    "--system-spectrum-textfield-border-color"
   ],
   "passthroughs": [
     "--mod-picker-button-background-color",