Skip to content

Commit

Permalink
fix(textfield): update border and background color (#3505)
Browse files Browse the repository at this point in the history
* feat: migration of tokens to spectrum 2
Expanding the existing themes system to support the new S2 mappings.

---
Co-authored-by: castastrophe <[email protected]>
Co-authored-by: Patrick Fulton <[email protected]>
Co-authored-by: Cory Dransfeldt <[email protected]>
Co-authored-by: Aziz Ramos <[email protected]>
Co-authored-by: Josh Winn <[email protected]>
Co-authored-by: Rise Erpelding <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: TarunAdobe <[email protected]>
Co-authored-by: Dragan Eror<[email protected]>

* chore(textfield): update border and background color

---------

Co-authored-by: [ Cassondra ] <[email protected]>
  • Loading branch information
TarunAdobe and castastrophe committed Jan 22, 2025
1 parent e487172 commit 6305b99
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 7 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/textfield": patch
---

Updated the textfield border radius and background-color and added the respective `--mod` property.
2 changes: 1 addition & 1 deletion .github/workflows/vrt.yml
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ jobs:
exitOnceUploaded: true
onlyChanged: true
traceChanged: true
untraced: ".github/actions/*/package.json generator/package.json"
untraced: ".github/* plugins/stylelint-*/* tools/* .changeset/*"
diagnostics: true
autoAcceptChanges: "main"
# Lets VRT pass without running so as not to waste snapshots
Expand Down
16 changes: 16 additions & 0 deletions components/page/themes/express.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

/* @combine .spectrum.spectrum--express */

@import "./spectrum.css";
20 changes: 17 additions & 3 deletions components/textfield/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 1 addition & 3 deletions components/textfield/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 */
Expand Down
9 changes: 9 additions & 0 deletions components/textfield/themes/spectrum-two.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
3 changes: 3 additions & 0 deletions components/textfield/themes/spectrum.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

0 comments on commit 6305b99

Please sign in to comment.