From 049c748fd082af36d0168021d168b48a63517507 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Wed, 15 Jan 2025 17:02:38 -0500 Subject: [PATCH 1/2] 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 --- components/page/themes/express.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 components/page/themes/express.css 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"; From 79b83ba7a767fb19fdf105a70e4082eb48851e00 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Thu, 16 Jan 2025 18:01:54 +0530 Subject: [PATCH 2/2] chore(textfield): update border and background color --- .changeset/strong-actors-warn.md | 5 +++++ components/textfield/dist/metadata.json | 20 +++++++++++++++++--- components/textfield/index.css | 4 +--- components/textfield/themes/spectrum-two.css | 9 +++++++++ components/textfield/themes/spectrum.css | 3 +++ 5 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 .changeset/strong-actors-warn.md 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/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); } }