From d4c3069e3f0f6d856d7cf11aaff8b25198f271b3 Mon Sep 17 00:00:00 2001 From: TaraT Date: Wed, 22 Jan 2025 08:05:07 +0530 Subject: [PATCH] fix(textfield): update border and background color (#3505) * feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror * chore(textfield): update border and background color --------- Co-authored-by: [ Cassondra ] --- .changeset/strong-actors-warn.md | 5 +++++ .github/workflows/vrt.yml | 2 +- components/page/themes/express.css | 16 ++++++++++++++++ components/textfield/dist/metadata.json | 20 +++++++++++++++++--- components/textfield/index.css | 4 +--- components/textfield/themes/spectrum-two.css | 9 +++++++++ components/textfield/themes/spectrum.css | 3 +++ 7 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 .changeset/strong-actors-warn.md create mode 100644 components/page/themes/express.css diff --git a/.changeset/strong-actors-warn.md b/.changeset/strong-actors-warn.md new file mode 100644 index 00000000000..6178758c591 --- /dev/null +++ b/.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. diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index 7a1e093e9e1..9bd94f9d835 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -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 diff --git a/components/page/themes/express.css b/components/page/themes/express.css new file mode 100644 index 00000000000..9fd550418f2 --- /dev/null +++ b/components/page/themes/express.css @@ -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 + * + * 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"; diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index bd2dae4fa72..957382aec88 100644 --- a/components/textfield/dist/metadata.json +++ b/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", diff --git a/components/textfield/index.css b/components/textfield/index.css index 01da44b91a6..935d0c891b1 100644 --- a/components/textfield/index.css +++ b/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 */ diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css index 976c9385e45..d004f10b0b9 100644 --- a/components/textfield/themes/spectrum-two.css +++ b/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); } } diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css index c224d267667..d0eeaa1d331 100644 --- a/components/textfield/themes/spectrum.css +++ b/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); } }