diff --git a/.changeset/strong-actors-warn.md b/.changeset/strong-actors-warn.md new file mode 100644 index 0000000000..6178758c59 --- /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/components/page/themes/express.css b/components/page/themes/express.css new file mode 100644 index 0000000000..9fd550418f --- /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 bd2dae4fa7..957382aec8 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 01da44b91a..935d0c891b 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 976c9385e4..d004f10b0b 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 c224d26766..d0eeaa1d33 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); } }