chore(textfield): update border and background color

.changeset/strong-actors-warn.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/textfield": patch
+---
+
+Updated the textfield border radius and background-color and added the respective `--mod` property.

components/textfield/dist/metadata.json

@@ -227,6 +227,7 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
+    "--spectrum-border-width-100",
     "--spectrum-character-count-to-field-quiet-extra-large",
     "--spectrum-character-count-to-field-quiet-large",
     "--spectrum-character-count-to-field-quiet-medium",
@@ -247,8 +248,6 @@
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-100",
     "--spectrum-corner-radius-100",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-alert-icon-extra-large",
     "--spectrum-field-edge-to-alert-icon-large",
@@ -291,6 +290,11 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-25",
+    "--spectrum-gray-300",
+    "--spectrum-gray-500",
+    "--spectrum-gray-600",
+    "--spectrum-gray-800",
+    "--spectrum-gray-900",
     "--spectrum-help-text-to-component",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",
@@ -324,7 +328,17 @@
     "--spectrum-workflow-icon-size-300",
     "--spectrum-workflow-icon-size-75"
   ],
-  "system-theme": ["--system-textfield-background-color"],
+  "system-theme": [
+    "--system-textfield-background-color",
+    "--system-textfield-background-color-disabled",
+    "--system-textfield-border-color",
+    "--system-textfield-border-color-disabled",
+    "--system-textfield-border-color-focus",
+    "--system-textfield-border-color-focus-hover",
+    "--system-textfield-border-color-hover",
+    "--system-textfield-border-color-keyboard-focus",
+    "--system-textfield-border-width"
+  ],
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-textfield-border-color",

components/textfield/index.css

@@ -66,8 +66,6 @@
 	--spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
 
 	/* Disabled Colors */
-	--spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
-	--spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
 	--spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
 
 	/* Invalid Colors */
@@ -504,7 +502,7 @@
 	.spectrum-Textfield.is-disabled:hover &,
 	&:disabled {
 		background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
-		border-color: transparent;
+		border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
 		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
 
 		/* Disable the resize functionality when disabled */

components/textfield/themes/spectrum-two.css

@@ -14,5 +14,14 @@
 @container style(--system: spectrum) {
 	.spectrum-Textfield {
 		--spectrum-textfield-background-color: var(--spectrum-gray-25);
+		--spectrum-textfield-background-color-disabled: var(--spectrum-gray-25);
+
+		--spectrum-textfield-border-color: var(--spectrum-gray-500);
+		--spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+		--spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+		--spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
+		--spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+		--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
+		--spectrum-textfield-border-width: var(--spectrum-border-width-100);
 	}
 }

components/textfield/themes/spectrum.css

@@ -18,5 +18,8 @@
 @container style(--system: legacy) {
 	.spectrum-Textfield {
 		--spectrum-textfield-background-color: var(--spectrum-gray-50);
+		--spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
+
+		--spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
 	}
 }