From 427d6ba2dc25eff0806973175cc32950dbf50b0c Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 13:42:12 -0400 Subject: [PATCH 01/17] feat(helptext): migration WIP --- components/actiongroup/dist/metadata.json | 1 + components/checkbox/dist/metadata.json | 1 + components/helptext/index.css | 182 +++++++++++----------- components/tag/dist/metadata.json | 11 ++ 4 files changed, 101 insertions(+), 94 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..499e1ba35f4 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -51,6 +51,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 5f2d712964c..6aa0340237c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -193,6 +193,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-50", + "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-800", "--spectrum-line-height-100", diff --git a/components/helptext/index.css b/components/helptext/index.css index 607a81e01c8..da1934bfa30 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -11,95 +11,65 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - - forced-color-adjust: none; - - .spectrum-HelpText-validationIcon, - .spectrum-HelpText-text { - forced-color-adjust: none; - } - } -} - .spectrum-HelpText { --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - &.spectrum-HelpText--sizeS { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - &, - &.spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - &.spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - } + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - &.spectrum-HelpText--sizeXL { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); } +} - &.spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - } +.spectrum-HelpText--sizeS { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); +} - &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); - } +.spectrum-HelpText--sizeL { + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); +} - &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); - } +.spectrum-HelpText--sizeXL { + --spectrum-helptext-min-height: var(--spectrum-component-height-200); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-200); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); +} +.spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); - } - .spectrum-HelpText-validationIcon { margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); @@ -114,34 +84,58 @@ padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100)); } +} - &.spectrum-HelpText--neutral { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } +/* Variants -- Neutral, negative, disabled */ +.spectrum-HelpText--neutral { + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } - &.spectrum-HelpText--negative { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } +} - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } +.spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } - &.is-disabled { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } +} - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); +.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); + + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } +} + +@media (forced-colors: active) { + .spectrum-HelpText { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + + forced-color-adjust: none; + + .spectrum-HelpText-validationIcon, + .spectrum-HelpText-text { + forced-color-adjust: none; } } } diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 58ce63ea185..20d2158b8a1 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -217,6 +217,12 @@ "--spectrum-border-width-100", "--spectrum-clearbutton-fill-background-color", "--spectrum-clearbutton-fill-size", + "--spectrum-component-edge-to-text-100", + "--spectrum-component-edge-to-text-200", + "--spectrum-component-edge-to-text-75", + "--spectrum-component-edge-to-visual-100", + "--spectrum-component-edge-to-visual-200", + "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", @@ -227,6 +233,7 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", + "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -256,6 +263,10 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", + "--spectrum-neutral-subdued-background-color-default", + "--spectrum-neutral-subdued-background-color-down", + "--spectrum-neutral-subdued-background-color-hover", + "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", From f6b30dd031b9770f944a8bb3b72f0aefc1dc2ce0 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 14:46:28 -0400 Subject: [PATCH 02/17] feat(helptext): adding mod for alignment --- components/helptext/dist/metadata.json | 44 ++++++++++++------- components/helptext/index.css | 17 ++++++- .../helptext/stories/helptext.stories.js | 3 ++ components/helptext/stories/template.js | 5 ++- 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 5eab153c21a..2866acda098 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -1,31 +1,34 @@ { "sourceFile": "index.css", "selectors": [ + ".is-disabled", + ".is-disabled .spectrum-HelpText-text", + ".is-disabled .spectrum-HelpText-validationIcon", ".spectrum-HelpText", ".spectrum-HelpText .spectrum-HelpText-text", ".spectrum-HelpText .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.is-disabled", - ".spectrum-HelpText.is-disabled .spectrum-HelpText-text", - ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.spectrum-HelpText--negative", - ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text", - ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.spectrum-HelpText--neutral", - ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", - ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", - ".spectrum-HelpText.spectrum-HelpText--sizeL", - ".spectrum-HelpText.spectrum-HelpText--sizeM", - ".spectrum-HelpText.spectrum-HelpText--sizeS", - ".spectrum-HelpText.spectrum-HelpText--sizeXL", + ".spectrum-HelpText--negative", + ".spectrum-HelpText--negative .spectrum-HelpText-text", + ".spectrum-HelpText--negative .spectrum-HelpText-validationIcon", + ".spectrum-HelpText--neutral", + ".spectrum-HelpText--neutral .spectrum-HelpText-text", + ".spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", + ".spectrum-HelpText--sizeL", + ".spectrum-HelpText--sizeS", + ".spectrum-HelpText--sizeXL", ".spectrum-HelpText:lang(ja)", ".spectrum-HelpText:lang(ko)", ".spectrum-HelpText:lang(zh)" ], "modifiers": [ + "--mod-helptext-align-text", "--mod-helptext-bottom-to-text", "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", + "--mod-helptext-font-family", "--mod-helptext-font-size", + "--mod-helptext-font-style", + "--mod-helptext-font-weight", "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", @@ -36,16 +39,16 @@ "--mod-helptext-top-to-workflow-icon" ], "component": [ - "--spectrum-help-text-top-to-workflow-icon-extra-large", - "--spectrum-help-text-top-to-workflow-icon-large", - "--spectrum-help-text-top-to-workflow-icon-medium", - "--spectrum-help-text-top-to-workflow-icon-small", "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", + "--spectrum-helptext-font-family", "--spectrum-helptext-font-size", + "--spectrum-helptext-font-style", + "--spectrum-helptext-font-weight", "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", + "--spectrum-helptext-line-height", "--spectrum-helptext-min-height", "--spectrum-helptext-text-to-visual", "--spectrum-helptext-top-to-text", @@ -62,6 +65,12 @@ "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-default-font-family", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", @@ -69,6 +78,7 @@ "--spectrum-line-height-100", "--spectrum-negative-color-900", "--spectrum-neutral-subdued-content-color-default", + "--spectrum-regular-font-weight", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-75", diff --git a/components/helptext/index.css b/components/helptext/index.css index da1934bfa30..f73cd00da12 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -15,15 +15,22 @@ --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + /* Spacing */ --spectrum-helptext-min-height: var(--spectrum-component-height-75); --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + /* Typpography */ + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-font-family: var(--spectrum-default-font-family); + --spectrum-helptext-font-style: var(--spectrum-default-font-style); + --spectrum-helptext-line-height: var(--spectrum-line-height-100); + --spectrum-helptext-font-weight: var(--spectrum-regular-font-weight); + &:lang(ja), &:lang(zh), &:lang(ko) { @@ -67,6 +74,9 @@ .spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; + + /* Adjust alignment if one line */ + align-items: var(--mod-helptext-align-text, flex-start); font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); @@ -82,7 +92,10 @@ .spectrum-HelpText-text { padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); - line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100)); + line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); + font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family)); + font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); + font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); } } diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 5274cec9f78..cf3aa9cec45 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -97,6 +97,9 @@ export const Sizing = (args, context) => Sizes({ Sizing.storyName = "Sizing"; Sizing.args = { variant: "negative", + customStyles: { + "--mod-helptext-align-text": "center", + }, }; Sizing.tags = ["!dev"]; Sizing.parameters = { diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 0b19659c9de..894c60745cb 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -85,7 +85,10 @@ export const NegativeTemplate = (args, context) => Container({ }, content: Template({ ...args, - hideIcon + hideIcon, + customStyles: { + "--mod-helptext-align-text": "center", + }, }, context), }, context) )}`, From 873f4116e941767400c3f10bd01fc63764de3c7b Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 16:15:13 -0400 Subject: [PATCH 03/17] feat(helptext): adding changeset --- .changeset/wild-lemons-spend.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/wild-lemons-spend.md diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md new file mode 100644 index 00000000000..dc9b8eeefb2 --- /dev/null +++ b/.changeset/wild-lemons-spend.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/helptext": major +--- + +### Helptext S2 Migration + +The helptext S2 component has some updated spacing and typography tokens. From 43771782134f45737573572af00e71a5625ce6df Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 16:50:34 -0400 Subject: [PATCH 04/17] feat(helptext): updating changeset --- .changeset/wild-lemons-spend.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md index dc9b8eeefb2..170fbf32f2c 100644 --- a/.changeset/wild-lemons-spend.md +++ b/.changeset/wild-lemons-spend.md @@ -4,4 +4,15 @@ ### Helptext S2 Migration -The helptext S2 component has some updated spacing and typography tokens. +The helptext S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated. + +#### Deprecated tokens + +`--spectrum-help-text-top-to-workflow-icon-small` +`--spectrum-help-text-top-to-workflow-icon-medium` +`--spectrum-help-text-top-to-workflow-icon-large` +`--spectrum-help-text-top-to-workflow-icon-extra-large` + +#### New mod + +There is a mod to align the help text label vertically if the message is one line `--mod-helptext-align-text`. The default is `flex-start` which supports multiline wrapped text. From d9af231584a44651109527e67b8482d229137a20 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 17:13:25 -0400 Subject: [PATCH 05/17] chore(helptext): restore some metadata files --- components/actiongroup/dist/metadata.json | 1 - components/checkbox/dist/metadata.json | 1 - components/radio/dist/metadata.json | 1 - components/tag/dist/metadata.json | 11 ----------- 4 files changed, 14 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 499e1ba35f4..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -51,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 6aa0340237c..5f2d712964c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -193,7 +193,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-50", - "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-800", "--spectrum-line-height-100", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 7863677a763..e02a0a46258 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -131,7 +131,6 @@ "--spectrum-accent-content-color-hover", "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", - "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 20d2158b8a1..58ce63ea185 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -217,12 +217,6 @@ "--spectrum-border-width-100", "--spectrum-clearbutton-fill-background-color", "--spectrum-clearbutton-fill-size", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", @@ -233,7 +227,6 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -263,10 +256,6 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", From be8b9138b5ff249318f2c9e323f6a8ce786e7f13 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 13:42:12 -0400 Subject: [PATCH 06/17] feat(helptext): migration WIP --- components/actiongroup/dist/metadata.json | 1 + components/checkbox/dist/metadata.json | 1 + components/helptext/index.css | 3 --- components/tag/dist/metadata.json | 11 +++++++++++ 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..499e1ba35f4 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -51,6 +51,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 5f2d712964c..6aa0340237c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -193,6 +193,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-50", + "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-800", "--spectrum-line-height-100", diff --git a/components/helptext/index.css b/components/helptext/index.css index f73cd00da12..dd69b5d8ccb 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -74,9 +74,6 @@ .spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; - - /* Adjust alignment if one line */ - align-items: var(--mod-helptext-align-text, flex-start); font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 58ce63ea185..20d2158b8a1 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -217,6 +217,12 @@ "--spectrum-border-width-100", "--spectrum-clearbutton-fill-background-color", "--spectrum-clearbutton-fill-size", + "--spectrum-component-edge-to-text-100", + "--spectrum-component-edge-to-text-200", + "--spectrum-component-edge-to-text-75", + "--spectrum-component-edge-to-visual-100", + "--spectrum-component-edge-to-visual-200", + "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", @@ -227,6 +233,7 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", + "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -256,6 +263,10 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", + "--spectrum-neutral-subdued-background-color-default", + "--spectrum-neutral-subdued-background-color-down", + "--spectrum-neutral-subdued-background-color-hover", + "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", From 110d7635aa35941635ca7f712cd9fc76db6d726c Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 14:46:28 -0400 Subject: [PATCH 07/17] feat(helptext): adding mod for alignment --- components/helptext/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/helptext/index.css b/components/helptext/index.css index dd69b5d8ccb..f73cd00da12 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -74,6 +74,9 @@ .spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; + + /* Adjust alignment if one line */ + align-items: var(--mod-helptext-align-text, flex-start); font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); From a3bf036e928b0390b1018078bf9e1045a64ad4bf Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 17 Mar 2025 17:13:25 -0400 Subject: [PATCH 08/17] chore(helptext): restore some metadata files --- components/actiongroup/dist/metadata.json | 1 - components/checkbox/dist/metadata.json | 1 - components/tag/dist/metadata.json | 11 ----------- 3 files changed, 13 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 499e1ba35f4..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -51,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 6aa0340237c..5f2d712964c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -193,7 +193,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-50", - "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-800", "--spectrum-line-height-100", diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 20d2158b8a1..58ce63ea185 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -217,12 +217,6 @@ "--spectrum-border-width-100", "--spectrum-clearbutton-fill-background-color", "--spectrum-clearbutton-fill-size", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", @@ -233,7 +227,6 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -263,10 +256,6 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", From ef74d20293f38ad7df6a4916a5821949eacdd2b5 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 26 Mar 2025 13:32:37 -0400 Subject: [PATCH 09/17] feat(helptext): restoring new s2 changes and remaining metadata files --- .changeset/wild-lemons-spend.md | 4 - components/actiongroup/dist/metadata.json | 6 +- components/combobox/dist/metadata.json | 1 - components/helptext/dist/metadata.json | 44 +++---- components/helptext/index.css | 137 ++++++++++------------ components/picker/dist/metadata.json | 7 -- components/radio/dist/metadata.json | 2 + components/stepper/dist/metadata.json | 1 - components/tooltip/dist/metadata.json | 1 - 9 files changed, 85 insertions(+), 118 deletions(-) diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md index 170fbf32f2c..97f418fb436 100644 --- a/.changeset/wild-lemons-spend.md +++ b/.changeset/wild-lemons-spend.md @@ -12,7 +12,3 @@ The helptext S2 component has some updated spacing and typography tokens. The er `--spectrum-help-text-top-to-workflow-icon-medium` `--spectrum-help-text-top-to-workflow-icon-large` `--spectrum-help-text-top-to-workflow-icon-extra-large` - -#### New mod - -There is a mod to align the help text label vertically if the message is one line `--mod-helptext-align-text`. The default is `flex-start` which supports multiline wrapped text. diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..958af64b5ef 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -20,10 +19,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -35,7 +31,6 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -51,6 +46,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index c0626f6390e..8dd3138302a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 2866acda098..5eab153c21a 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -1,34 +1,31 @@ { "sourceFile": "index.css", "selectors": [ - ".is-disabled", - ".is-disabled .spectrum-HelpText-text", - ".is-disabled .spectrum-HelpText-validationIcon", ".spectrum-HelpText", ".spectrum-HelpText .spectrum-HelpText-text", ".spectrum-HelpText .spectrum-HelpText-validationIcon", - ".spectrum-HelpText--negative", - ".spectrum-HelpText--negative .spectrum-HelpText-text", - ".spectrum-HelpText--negative .spectrum-HelpText-validationIcon", - ".spectrum-HelpText--neutral", - ".spectrum-HelpText--neutral .spectrum-HelpText-text", - ".spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", - ".spectrum-HelpText--sizeL", - ".spectrum-HelpText--sizeS", - ".spectrum-HelpText--sizeXL", + ".spectrum-HelpText.is-disabled", + ".spectrum-HelpText.is-disabled .spectrum-HelpText-text", + ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--negative", + ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text", + ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--neutral", + ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", + ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--sizeL", + ".spectrum-HelpText.spectrum-HelpText--sizeM", + ".spectrum-HelpText.spectrum-HelpText--sizeS", + ".spectrum-HelpText.spectrum-HelpText--sizeXL", ".spectrum-HelpText:lang(ja)", ".spectrum-HelpText:lang(ko)", ".spectrum-HelpText:lang(zh)" ], "modifiers": [ - "--mod-helptext-align-text", "--mod-helptext-bottom-to-text", "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", - "--mod-helptext-font-family", "--mod-helptext-font-size", - "--mod-helptext-font-style", - "--mod-helptext-font-weight", "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", @@ -39,16 +36,16 @@ "--mod-helptext-top-to-workflow-icon" ], "component": [ + "--spectrum-help-text-top-to-workflow-icon-extra-large", + "--spectrum-help-text-top-to-workflow-icon-large", + "--spectrum-help-text-top-to-workflow-icon-medium", + "--spectrum-help-text-top-to-workflow-icon-small", "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", - "--spectrum-helptext-font-family", "--spectrum-helptext-font-size", - "--spectrum-helptext-font-style", - "--spectrum-helptext-font-weight", "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", - "--spectrum-helptext-line-height", "--spectrum-helptext-min-height", "--spectrum-helptext-text-to-visual", "--spectrum-helptext-top-to-text", @@ -65,12 +62,6 @@ "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-component-top-to-workflow-icon-200", - "--spectrum-component-top-to-workflow-icon-300", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-default-font-family", - "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", @@ -78,7 +69,6 @@ "--spectrum-line-height-100", "--spectrum-negative-color-900", "--spectrum-neutral-subdued-content-color-default", - "--spectrum-regular-font-weight", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-75", diff --git a/components/helptext/index.css b/components/helptext/index.css index f73cd00da12..b45940b4f7d 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -16,17 +16,16 @@ --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); /* Spacing */ - --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-min-height: var(--spectrum-component-height-100); --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); /* Typpography */ - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-font-family: var(--spectrum-default-font-family); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-font-family: var(--spectrum-sans-font-family-stack); --spectrum-helptext-font-style: var(--spectrum-default-font-style); --spectrum-helptext-line-height: var(--spectrum-line-height-100); --spectrum-helptext-font-weight: var(--spectrum-regular-font-weight); @@ -38,52 +37,16 @@ } } -.spectrum-HelpText--sizeS { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); -} - -.spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); -} - -.spectrum-HelpText--sizeXL { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); -} - .spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; - - /* Adjust alignment if one line */ - align-items: var(--mod-helptext-align-text, flex-start); font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); .spectrum-HelpText-validationIcon { margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); - padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); + padding-block-start: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + padding-block-end: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); flex-shrink: 0; block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); @@ -97,45 +60,75 @@ font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); } -} -/* Variants -- Neutral, negative, disabled */ -.spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + &.spectrum-HelpText--sizeS { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + } - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + &.spectrum-HelpText--sizeL { + --spectrum-helptext-min-height: var(--spectrum-component-height-200); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-helptext-font-size: var(--spectrum-font-size-200); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); } - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + &.spectrum-HelpText--sizeXL { + --spectrum-helptext-min-height: var(--spectrum-component-height-300); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-300); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300); } -} -.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + /* Variants -- Neutral, negative, disabled */ + &.spectrum-HelpText--neutral { + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } } -} -.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); + &.spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default); - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } } - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + &.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); + + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } } } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..fd54f972ffa 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -278,12 +277,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index e02a0a46258..1772872c846 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -131,6 +131,7 @@ "--spectrum-accent-content-color-hover", "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", + "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -156,6 +157,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", + "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 42b3c76d4e8..50d1fa4eeca 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,7 +115,6 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", - "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 008df5e0cbe..0b5900ba69b 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,7 +324,6 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", - "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", From 063e83bd7b99c8d7fc10d7096e51f3c68f14ef3d Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 26 Mar 2025 13:36:21 -0400 Subject: [PATCH 10/17] chore(helptext): restoring metadata files again --- components/actiongroup/dist/metadata.json | 6 +++++- components/combobox/dist/metadata.json | 1 + components/picker/dist/metadata.json | 7 +++++++ components/radio/dist/metadata.json | 1 - components/stepper/dist/metadata.json | 1 + components/tooltip/dist/metadata.json | 1 + 6 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 958af64b5ef..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -19,7 +20,10 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--sizeL", + ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", + ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -31,6 +35,7 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", + "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -46,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 8dd3138302a..c0626f6390e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index fd54f972ffa..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,12 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", + "--spectrum-gray-500", + "--spectrum-gray-600", + "--spectrum-gray-700", + "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 1772872c846..7863677a763 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,7 +157,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 50d1fa4eeca..42b3c76d4e8 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,6 +115,7 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 0b5900ba69b..008df5e0cbe 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,6 +324,7 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", + "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", From 3c82765f39ed4c2b7a04783f772362612e2ffea4 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 26 Mar 2025 13:42:32 -0400 Subject: [PATCH 11/17] chore(helptext): adding metadata files --- components/actiongroup/dist/metadata.json | 6 +--- components/button/dist/metadata.json | 7 ----- components/combobox/dist/metadata.json | 1 - components/helptext/dist/metadata.json | 36 +++++++++++++++-------- components/picker/dist/metadata.json | 7 ----- components/radio/dist/metadata.json | 1 + components/stepper/dist/metadata.json | 1 - components/tooltip/dist/metadata.json | 1 - 8 files changed, 26 insertions(+), 34 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..958af64b5ef 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -20,10 +19,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -35,7 +31,6 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -51,6 +46,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index c19c2ba9f6c..d09bdf55dcf 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -199,9 +199,6 @@ "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -218,10 +215,6 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index c0626f6390e..8dd3138302a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 5eab153c21a..af07e319e15 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", ".spectrum-HelpText.spectrum-HelpText--sizeL", - ".spectrum-HelpText.spectrum-HelpText--sizeM", ".spectrum-HelpText.spectrum-HelpText--sizeS", ".spectrum-HelpText.spectrum-HelpText--sizeXL", ".spectrum-HelpText:lang(ja)", @@ -23,54 +22,67 @@ ], "modifiers": [ "--mod-helptext-bottom-to-text", - "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", + "--mod-helptext-edge-to-workflow-icon", + "--mod-helptext-font-family", "--mod-helptext-font-size", + "--mod-helptext-font-style", + "--mod-helptext-font-weight", "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", "--mod-helptext-line-height-cjk", "--mod-helptext-min-height", "--mod-helptext-text-to-visual", - "--mod-helptext-top-to-text", - "--mod-helptext-top-to-workflow-icon" + "--mod-helptext-top-to-text" ], "component": [ - "--spectrum-help-text-top-to-workflow-icon-extra-large", - "--spectrum-help-text-top-to-workflow-icon-large", - "--spectrum-help-text-top-to-workflow-icon-medium", - "--spectrum-help-text-top-to-workflow-icon-small", "--spectrum-helptext-bottom-to-text", - "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", + "--spectrum-helptext-edge-to-workflow-icon", + "--spectrum-helptext-font-family", "--spectrum-helptext-font-size", + "--spectrum-helptext-font-style", + "--spectrum-helptext-font-weight", "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", + "--spectrum-helptext-line-height", "--spectrum-helptext-min-height", "--spectrum-helptext-text-to-visual", - "--spectrum-helptext-top-to-text", - "--spectrum-helptext-top-to-workflow-icon" + "--spectrum-helptext-top-to-text" ], "global": [ "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", + "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-line-height-100", - "--spectrum-negative-color-900", + "--spectrum-negative-content-color-default", "--spectrum-neutral-subdued-content-color-default", + "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..fd54f972ffa 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -278,12 +277,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 7863677a763..1772872c846 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,6 +157,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", + "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 42b3c76d4e8..50d1fa4eeca 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,7 +115,6 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", - "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 008df5e0cbe..0b5900ba69b 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,7 +324,6 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", - "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", From 3474262591d39bf34073a2524a4dbd9896c83cba Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 26 Mar 2025 13:45:44 -0400 Subject: [PATCH 12/17] =?UTF-8?q?chore(helptext):=20please=20metadata=20do?= =?UTF-8?q?nt=20come=20back=20=F0=9F=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/actiongroup/dist/metadata.json | 6 +++++- components/combobox/dist/metadata.json | 1 + components/picker/dist/metadata.json | 7 +++++++ components/radio/dist/metadata.json | 1 - components/stepper/dist/metadata.json | 1 + components/tooltip/dist/metadata.json | 1 + 6 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 958af64b5ef..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -19,7 +20,10 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--sizeL", + ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", + ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -31,6 +35,7 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", + "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -46,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 8dd3138302a..c0626f6390e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index fd54f972ffa..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,12 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", + "--spectrum-gray-500", + "--spectrum-gray-600", + "--spectrum-gray-700", + "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 1772872c846..7863677a763 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,7 +157,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 50d1fa4eeca..42b3c76d4e8 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,6 +115,7 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 0b5900ba69b..008df5e0cbe 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,6 +324,7 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", + "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", From 3dd599efbd2bf1c913b9d3cfa3d2278fda9046be Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 26 Mar 2025 13:46:56 -0400 Subject: [PATCH 13/17] chore(helptext): removing button metadata --- components/button/dist/metadata.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index d09bdf55dcf..c19c2ba9f6c 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -199,6 +199,9 @@ "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-400", + "--spectrum-gray-50", + "--spectrum-gray-500", + "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -215,6 +218,10 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-neutral-subdued-background-color-default", + "--spectrum-neutral-subdued-background-color-down", + "--spectrum-neutral-subdued-background-color-hover", + "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", From 16aef514254ff51418fb3e485b722daef030fd04 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Fri, 28 Mar 2025 11:37:58 -0400 Subject: [PATCH 14/17] feat(helptext): restructure css file --- components/actiongroup/dist/metadata.json | 6 +- components/combobox/dist/metadata.json | 1 - components/helptext/index.css | 70 ++++++++++++----------- components/picker/dist/metadata.json | 7 --- components/radio/dist/metadata.json | 1 + components/stepper/dist/metadata.json | 1 - components/tooltip/dist/metadata.json | 1 - components/typography/dist/metadata.json | 4 -- 8 files changed, 40 insertions(+), 51 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..958af64b5ef 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -20,10 +19,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -35,7 +31,6 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -51,6 +46,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index c0626f6390e..8dd3138302a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/helptext/index.css b/components/helptext/index.css index b45940b4f7d..5f3433ef408 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -35,31 +35,6 @@ &:lang(ko) { --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); } -} - -.spectrum-HelpText { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - display: flex; - font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); - min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); - - .spectrum-HelpText-validationIcon { - margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); - padding-block-end: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); - flex-shrink: 0; - block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); - inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); - } - - .spectrum-HelpText-text { - padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); - padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); - line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); - font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family)); - font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); - font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); - } &.spectrum-HelpText--sizeS { --spectrum-helptext-min-height: var(--spectrum-component-height-75); @@ -91,11 +66,48 @@ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300); } - /* Variants -- Neutral, negative, disabled */ &.spectrum-HelpText--neutral { --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + } + + &.spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default); + } + + &.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); + } +} + +.spectrum-HelpText { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + display: flex; + font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); + min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); + + .spectrum-HelpText-validationIcon { + margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); + padding-block-start: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + padding-block-end: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + flex-shrink: 0; + block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + } + .spectrum-HelpText-text { + padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); + padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); + line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); + font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family)); + font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); + font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); + } + + /* Variants -- Neutral, negative, disabled */ + &.spectrum-HelpText--neutral { .spectrum-HelpText-text { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } @@ -106,9 +118,6 @@ } &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default); - .spectrum-HelpText-text { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } @@ -119,9 +128,6 @@ } &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); - .spectrum-HelpText-text { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..fd54f972ffa 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -278,12 +277,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 7863677a763..1772872c846 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,6 +157,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", + "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 42b3c76d4e8..50d1fa4eeca 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,7 +115,6 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", - "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 008df5e0cbe..0b5900ba69b 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,7 +324,6 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", - "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 3ef566f741d..96b80e17f6e 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -18,7 +18,6 @@ ".spectrum-Body--serif strong", ".spectrum-Body--serif strong em", ".spectrum-Body--sizeL", - ".spectrum-Body--sizeM", ".spectrum-Body--sizeS", ".spectrum-Body--sizeXL", ".spectrum-Body--sizeXS", @@ -57,7 +56,6 @@ ".spectrum-Code strong", ".spectrum-Code strong em", ".spectrum-Code--sizeL", - ".spectrum-Code--sizeM", ".spectrum-Code--sizeS", ".spectrum-Code--sizeXL", ".spectrum-Code--sizeXS", @@ -136,7 +134,6 @@ ".spectrum-Detail--serif.spectrum-Detail--light strong", ".spectrum-Detail--serif.spectrum-Detail--light strong em", ".spectrum-Detail--sizeL", - ".spectrum-Detail--sizeM", ".spectrum-Detail--sizeS", ".spectrum-Detail--sizeXL", ".spectrum-Detail:lang(ja)", @@ -260,7 +257,6 @@ ".spectrum-Heading--serif.spectrum-Heading--light strong", ".spectrum-Heading--serif.spectrum-Heading--light strong em", ".spectrum-Heading--sizeL", - ".spectrum-Heading--sizeM", ".spectrum-Heading--sizeS", ".spectrum-Heading--sizeXL", ".spectrum-Heading--sizeXS", From 1318045fa61117d98c0e98d29f1f0e49ad99134f Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Mon, 31 Mar 2025 08:43:05 -0400 Subject: [PATCH 15/17] chore(helptext): remove some metadata files --- components/actiongroup/dist/metadata.json | 6 +++++- components/combobox/dist/metadata.json | 1 + components/picker/dist/metadata.json | 7 +++++++ components/radio/dist/metadata.json | 1 - components/stepper/dist/metadata.json | 1 + components/tooltip/dist/metadata.json | 1 + components/typography/dist/metadata.json | 4 ++++ 7 files changed, 19 insertions(+), 2 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 958af64b5ef..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -19,7 +20,10 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--sizeL", + ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", + ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -31,6 +35,7 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", + "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -46,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 8dd3138302a..c0626f6390e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index fd54f972ffa..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,12 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", + "--spectrum-gray-500", + "--spectrum-gray-600", + "--spectrum-gray-700", + "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 1772872c846..7863677a763 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,7 +157,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 50d1fa4eeca..42b3c76d4e8 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,6 +115,7 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 0b5900ba69b..008df5e0cbe 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,6 +324,7 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", + "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 96b80e17f6e..3ef566f741d 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -18,6 +18,7 @@ ".spectrum-Body--serif strong", ".spectrum-Body--serif strong em", ".spectrum-Body--sizeL", + ".spectrum-Body--sizeM", ".spectrum-Body--sizeS", ".spectrum-Body--sizeXL", ".spectrum-Body--sizeXS", @@ -56,6 +57,7 @@ ".spectrum-Code strong", ".spectrum-Code strong em", ".spectrum-Code--sizeL", + ".spectrum-Code--sizeM", ".spectrum-Code--sizeS", ".spectrum-Code--sizeXL", ".spectrum-Code--sizeXS", @@ -134,6 +136,7 @@ ".spectrum-Detail--serif.spectrum-Detail--light strong", ".spectrum-Detail--serif.spectrum-Detail--light strong em", ".spectrum-Detail--sizeL", + ".spectrum-Detail--sizeM", ".spectrum-Detail--sizeS", ".spectrum-Detail--sizeXL", ".spectrum-Detail:lang(ja)", @@ -257,6 +260,7 @@ ".spectrum-Heading--serif.spectrum-Heading--light strong", ".spectrum-Heading--serif.spectrum-Heading--light strong em", ".spectrum-Heading--sizeL", + ".spectrum-Heading--sizeM", ".spectrum-Heading--sizeS", ".spectrum-Heading--sizeXL", ".spectrum-Heading--sizeXS", From 66013cc126aab7cc76195eed11e3df0864a1f939 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 1 Apr 2025 16:39:39 -0400 Subject: [PATCH 16/17] feat(helptext): final tweaks --- .changeset/wild-lemons-spend.md | 12 ++++++++++++ components/actiongroup/dist/metadata.json | 6 +----- components/combobox/dist/metadata.json | 1 - components/helptext/dist/metadata.json | 3 ++- components/helptext/index.css | 15 +++------------ components/picker/dist/metadata.json | 7 ------- components/radio/dist/metadata.json | 1 + components/stepper/dist/metadata.json | 1 - components/tooltip/dist/metadata.json | 1 - components/typography/dist/metadata.json | 4 ---- 10 files changed, 19 insertions(+), 32 deletions(-) diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md index 97f418fb436..070bdb9cd85 100644 --- a/.changeset/wild-lemons-spend.md +++ b/.changeset/wild-lemons-spend.md @@ -6,6 +6,18 @@ The helptext S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated. +#### New mods + +`--mod-helptext-font-family` +`--mod-helptext-font-style` +`--mod-helptext-font-weight` +`--mod-helptext-top-edge-to-workflow-icon` +`--mod-helptext-bottom-edge-to-workflow-icon` + +#### Renamed mods + +`--mod-helptext-bottom-to-workflow-icon` >> `--mod-helptext-edge-to-workflow-icon` + #### Deprecated tokens `--spectrum-help-text-top-to-workflow-icon-small` diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..958af64b5ef 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -20,10 +19,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -35,7 +31,6 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -51,6 +46,7 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index c0626f6390e..8dd3138302a 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index af07e319e15..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -21,9 +21,9 @@ ".spectrum-HelpText:lang(zh)" ], "modifiers": [ + "--mod-helptext-bottom-edge-to-workflow-icon", "--mod-helptext-bottom-to-text", "--mod-helptext-content-color-default", - "--mod-helptext-edge-to-workflow-icon", "--mod-helptext-font-family", "--mod-helptext-font-size", "--mod-helptext-font-style", @@ -34,6 +34,7 @@ "--mod-helptext-line-height-cjk", "--mod-helptext-min-height", "--mod-helptext-text-to-visual", + "--mod-helptext-top-edge-to-workflow-icon", "--mod-helptext-top-to-text" ], "component": [ diff --git a/components/helptext/index.css b/components/helptext/index.css index 5f3433ef408..ab3051efa3f 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -12,9 +12,6 @@ */ .spectrum-HelpText { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - /* Spacing */ --spectrum-helptext-min-height: var(--spectrum-component-height-100); --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); @@ -66,6 +63,7 @@ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300); } + &, &.spectrum-HelpText--neutral { --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); @@ -90,8 +88,8 @@ .spectrum-HelpText-validationIcon { margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); - padding-block-end: var(--mod-helptext-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); flex-shrink: 0; block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); @@ -142,12 +140,5 @@ .spectrum-HelpText { --highcontrast-helptext-content-color-default: CanvasText; --highcontrast-helptext-icon-color-default: CanvasText; - - forced-color-adjust: none; - - .spectrum-HelpText-validationIcon, - .spectrum-HelpText-text { - forced-color-adjust: none; - } } } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..fd54f972ffa 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -278,12 +277,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 7863677a763..1772872c846 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,6 +157,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", + "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 42b3c76d4e8..50d1fa4eeca 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,7 +115,6 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", - "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 008df5e0cbe..0b5900ba69b 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,7 +324,6 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", - "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 3ef566f741d..96b80e17f6e 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -18,7 +18,6 @@ ".spectrum-Body--serif strong", ".spectrum-Body--serif strong em", ".spectrum-Body--sizeL", - ".spectrum-Body--sizeM", ".spectrum-Body--sizeS", ".spectrum-Body--sizeXL", ".spectrum-Body--sizeXS", @@ -57,7 +56,6 @@ ".spectrum-Code strong", ".spectrum-Code strong em", ".spectrum-Code--sizeL", - ".spectrum-Code--sizeM", ".spectrum-Code--sizeS", ".spectrum-Code--sizeXL", ".spectrum-Code--sizeXS", @@ -136,7 +134,6 @@ ".spectrum-Detail--serif.spectrum-Detail--light strong", ".spectrum-Detail--serif.spectrum-Detail--light strong em", ".spectrum-Detail--sizeL", - ".spectrum-Detail--sizeM", ".spectrum-Detail--sizeS", ".spectrum-Detail--sizeXL", ".spectrum-Detail:lang(ja)", @@ -260,7 +257,6 @@ ".spectrum-Heading--serif.spectrum-Heading--light strong", ".spectrum-Heading--serif.spectrum-Heading--light strong em", ".spectrum-Heading--sizeL", - ".spectrum-Heading--sizeM", ".spectrum-Heading--sizeS", ".spectrum-Heading--sizeXL", ".spectrum-Heading--sizeXS", From 2d0d659768da18b3e0216e93289eee4a7d23d3fe Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Tue, 1 Apr 2025 16:43:58 -0400 Subject: [PATCH 17/17] chore(helptext): restoring metadata files --- components/actiongroup/dist/metadata.json | 6 +++++- components/combobox/dist/metadata.json | 1 + components/picker/dist/metadata.json | 7 +++++++ components/radio/dist/metadata.json | 1 - components/stepper/dist/metadata.json | 1 + components/tooltip/dist/metadata.json | 1 + components/typography/dist/metadata.json | 4 ++++ 7 files changed, 19 insertions(+), 2 deletions(-) diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 958af64b5ef..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", @@ -19,7 +20,10 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--sizeL", + ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", + ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -31,6 +35,7 @@ "--mod-actiongroup-gap-size-compact", "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", + "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ @@ -46,7 +51,6 @@ "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 8dd3138302a..c0626f6390e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index fd54f972ffa..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,12 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", + "--spectrum-gray-500", + "--spectrum-gray-600", + "--spectrum-gray-700", + "--spectrum-gray-800", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 1772872c846..7863677a763 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -157,7 +157,6 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 50d1fa4eeca..42b3c76d4e8 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,6 +115,7 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 0b5900ba69b..008df5e0cbe 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -324,6 +324,7 @@ "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", + "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 96b80e17f6e..3ef566f741d 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -18,6 +18,7 @@ ".spectrum-Body--serif strong", ".spectrum-Body--serif strong em", ".spectrum-Body--sizeL", + ".spectrum-Body--sizeM", ".spectrum-Body--sizeS", ".spectrum-Body--sizeXL", ".spectrum-Body--sizeXS", @@ -56,6 +57,7 @@ ".spectrum-Code strong", ".spectrum-Code strong em", ".spectrum-Code--sizeL", + ".spectrum-Code--sizeM", ".spectrum-Code--sizeS", ".spectrum-Code--sizeXL", ".spectrum-Code--sizeXS", @@ -134,6 +136,7 @@ ".spectrum-Detail--serif.spectrum-Detail--light strong", ".spectrum-Detail--serif.spectrum-Detail--light strong em", ".spectrum-Detail--sizeL", + ".spectrum-Detail--sizeM", ".spectrum-Detail--sizeS", ".spectrum-Detail--sizeXL", ".spectrum-Detail:lang(ja)", @@ -257,6 +260,7 @@ ".spectrum-Heading--serif.spectrum-Heading--light strong", ".spectrum-Heading--serif.spectrum-Heading--light strong em", ".spectrum-Heading--sizeL", + ".spectrum-Heading--sizeM", ".spectrum-Heading--sizeS", ".spectrum-Heading--sizeXL", ".spectrum-Heading--sizeXS",