Skip to content

Commit

Permalink
chore(textfield): update border and background color
Browse files Browse the repository at this point in the history
  • Loading branch information
TarunAdobe authored and castastrophe committed Jan 22, 2025
1 parent 049c748 commit 3e6e2b6
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/strong-actors-warn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@spectrum-css/menu": patch
---

Updated the textfield border radius and background-color and added the respective `--mod` property.
15 changes: 14 additions & 1 deletion components/textfield/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,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",
Expand Down Expand Up @@ -324,7 +329,15 @@
"--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"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-textfield-border-color",
Expand Down
2 changes: 1 addition & 1 deletion components/textfield/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,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 */
Expand Down
7 changes: 7 additions & 0 deletions components/textfield/themes/spectrum-two.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,12 @@
@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-disabled: var(--spectrum-gray-300);
}
}

0 comments on commit 3e6e2b6

Please sign in to comment.