diff --git a/.changeset/breezy-impalas-push.md b/.changeset/breezy-impalas-push.md new file mode 100644 index 00000000000..e39b5117aec --- /dev/null +++ b/.changeset/breezy-impalas-push.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/switch": patch +--- + +### S2 switch fixes + +This work addresses minor regressions in the Switch component. Animation tokens are reimplemented and their usage updated within the style definitions. + +Reference: + +- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) diff --git a/.changeset/cute-pillows-stand.md b/.changeset/cute-pillows-stand.md new file mode 100644 index 00000000000..99bfac2be60 --- /dev/null +++ b/.changeset/cute-pillows-stand.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/statuslight": patch +--- + +### S2 status light fix + +This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web. diff --git a/.changeset/fair-coins-buy.md b/.changeset/fair-coins-buy.md new file mode 100644 index 00000000000..8971c89f310 --- /dev/null +++ b/.changeset/fair-coins-buy.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/link": patch +--- + +### S2 link fix + +This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). diff --git a/.changeset/fresh-spoons-try.md b/.changeset/fresh-spoons-try.md new file mode 100644 index 00000000000..39f9d2e0885 --- /dev/null +++ b/.changeset/fresh-spoons-try.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/logicbutton": patch +--- + +### S2 logic button fix + +Adds `border-style: solid` to the styles to avoid a 3D effect on the border. diff --git a/.changeset/late-worms-reply.md b/.changeset/late-worms-reply.md new file mode 100644 index 00000000000..145328d49ca --- /dev/null +++ b/.changeset/late-worms-reply.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/floatingactionbutton": patch +--- + +## S2 floating action button fix + +Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md new file mode 100644 index 00000000000..0f5c77fc207 --- /dev/null +++ b/.changeset/smart-spoons-sneeze.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/button": patch +--- + +### S2 button fixes + +This work addresses some regressions noticed in the migrated S2 button. Mainly, the borders were gray where they were not supposed to be. Most of the changes are to ensure that the correct S2 tokens are being used appropriately in the styles and button follows the S2 design specs. + +Additionally, there was some missing style support for the `.spectrum-Button--noWrap` option, so this work reimplements a "no wrapping" option for button components, and removes some of the repetitiveness in the no wrap test cases and story. + +PRs used as reference: + +- [S2 button migration](https://github.com/adobe/spectrum-css/pull/2600) +- [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) +- [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) diff --git a/.changeset/warm-loops-guess.md b/.changeset/warm-loops-guess.md new file mode 100644 index 00000000000..80e75cc9e1f --- /dev/null +++ b/.changeset/warm-loops-guess.md @@ -0,0 +1,12 @@ +--- +"@spectrum-css/picker": patch +--- + +### S2 picker fixes + +This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled). + +PRs used as reference: + +- [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) +- [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index c19c2ba9f6c..660dfcc6d96 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Button .spectrum-Icon", ".spectrum-Button .spectrum-Icon + .spectrum-Button-label", ".spectrum-Button .spectrum-ProgressCircle", + ".spectrum-Button--noWrap .spectrum-Button-label", ".spectrum-Button--sizeL", ".spectrum-Button--sizeS", ".spectrum-Button--sizeS.spectrum-Button--iconOnly", @@ -23,7 +24,6 @@ ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", - ".spectrum-Button.spectrum-Button--iconOnly:after", ".spectrum-Button.spectrum-Button--negative", ".spectrum-Button.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--primary", @@ -35,7 +35,6 @@ ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite", - ".spectrum-Button.spectrum-Button--staticWhite.is-selected", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", @@ -91,6 +90,7 @@ "--mod-button-margin-block", "--mod-button-margin-left", "--mod-button-margin-right", + "--mod-button-max-inline-size", "--mod-button-min-width", "--mod-button-padding-label-to-icon", "--mod-button-text-align", @@ -131,7 +131,6 @@ "--spectrum-button-font-size", "--spectrum-button-font-weight", "--spectrum-button-height", - "--spectrum-button-icon-size-difference", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", @@ -177,6 +176,7 @@ "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-full", + "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-disabled-static-black-background-color", @@ -198,10 +198,8 @@ "--spectrum-gray-100", "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-gray-300", "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -218,10 +216,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", @@ -230,21 +224,18 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-1000", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-200", "--spectrum-transparent-black-25", "--spectrum-transparent-black-300", "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-black-600", - "--spectrum-transparent-black-700", "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", - "--spectrum-transparent-white-1000", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-200", "--spectrum-transparent-white-25", "--spectrum-transparent-white-300", "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-transparent-white-600", "--spectrum-transparent-white-800", "--spectrum-transparent-white-900", "--spectrum-white", diff --git a/components/button/index.css b/components/button/index.css index 2e85dfa5f69..73708dafb85 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -103,23 +103,18 @@ /* Variants and colors */ .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; --spectrum-button-content-color-default: var(--spectrum-white); --spectrum-button-content-color-hover: var(--spectrum-white); --spectrum-button-content-color-down: var(--spectrum-white); --spectrum-button-content-color-focus: var(--spectrum-white); - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); &.spectrum-Button--outline { @@ -160,9 +155,9 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); @@ -180,7 +175,7 @@ &.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--spectrum-gray-100); --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-down: var(--spectrum-gray-200); --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); @@ -190,28 +185,23 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); - --spectrum-button-border-color-default: var(--spectrum-gray-200); + --spectrum-button-border-color-default: var(--spectrum-gray-300); --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-400); --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); } } /* ---- Static White ---- */ &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); --spectrum-button-content-color-default: var(--spectrum-black); --spectrum-button-content-color-hover: var(--spectrum-black); @@ -226,19 +216,19 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25); --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); @@ -246,43 +236,36 @@ } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); } } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } } /* ---- Static Black ---- */ &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-1000); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-1000); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-1000); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); --spectrum-button-content-color-default: var(--spectrum-white); --spectrum-button-content-color-hover: var(--spectrum-white); @@ -297,46 +280,46 @@ &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-disabled: transparent; + --spectrum-button-background-color-disabled: var(--spectrum-transparent-black-25); --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); &.spectrum-Button--outline { --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); } } } @@ -351,6 +334,7 @@ font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); + max-inline-size: var(--mod-button-max-inline-size, none); min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-button-height, var(--spectrum-button-height)); @@ -371,11 +355,10 @@ margin-inline-start: var(--mod-button-margin-left); .spectrum-Icon { - /* Any block-size difference between the intended workflow icon size and actual icon used. - Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--spectrum-button-icon-size-difference, 0px) / 2))); + margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); color: inherit; @@ -430,11 +413,6 @@ transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } - &:hover, - &:active { - box-shadow: none; - } - &:disabled, &.is-disabled, &[pending], @@ -444,38 +422,6 @@ color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); } - .spectrum-Icon { - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); - - margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } - .spectrum-Icon, .spectrum-Button-label { visibility: visible; @@ -525,6 +471,13 @@ a.spectrum-Button { text-align: var(--mod-button-text-align, center); } +/* Disable button label wrap */ +.spectrum-Button--noWrap .spectrum-Button-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .spectrum-Button .spectrum-Icon + .spectrum-Button-label { text-align: var(--mod-button-text-align-with-icon, start); } diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 6b0786c7cea..4f3b09d5928 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -320,6 +320,8 @@ DisableWrapping.tags = ["!dev"]; DisableWrapping.storyName = "Text overflow - disabled text wrap"; DisableWrapping.args = { variant: "primary", + label: "Be a premium member", + noWrap: true, }; DisableWrapping.parameters = { diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js index ad83defdf1e..16af7a2fe3a 100644 --- a/components/button/stories/button.test.js +++ b/components/button/stories/button.test.js @@ -109,8 +109,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "480px", }, - iconName: "Edit", - iconSet: "workflow", label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", withStates: false, }, @@ -120,8 +118,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "120px", }, - iconName: "Edit", - iconSet: "workflow", label: "Be a premium member", noWrap: true, withStates: false, diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 1fa73697743..a910cc0ac37 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -181,16 +181,12 @@ export const TextWrapTemplate = (args, context = {}) => Container({ ${Template({ ...args, customStyles: {}, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, customStyles: { "max-inline-size": "100%", }, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, @@ -199,8 +195,6 @@ export const TextWrapTemplate = (args, context = {}) => Container({ }, iconName: "Star", iconSet: "workflow", - label: "Be a premium member", - noWrap: true, }, context)} `, }, context); diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js index 81022516703..85c0c614409 100644 --- a/components/colorarea/stories/template.js +++ b/components/colorarea/stories/template.js @@ -45,6 +45,7 @@ export const Template = ({ > ${ColorHandle({ isDisabled, + isFocused, customClasses: [`${rootClass}-handle`], customStyles: { "--spectrum-picked-color": selectedColor, diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index fc4d7786fd7..bc695d6c109 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -79,7 +79,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); } } @@ -87,7 +87,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + color: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); } } @@ -96,7 +96,7 @@ outline: 0; .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + color: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); } &::after { @@ -114,5 +114,5 @@ .spectrum-Icon.spectrum-FloatingActionButton-icon { block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - fill: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + color: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); } diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 5bebb76f6d0..9c83915a752 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -67,6 +67,8 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", + "--spectrum-static-black-focus-indicator-color", + "--spectrum-static-white-focus-indicator-color", "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness", "--spectrum-white" diff --git a/components/link/index.css b/components/link/index.css index 0cd89349e43..311fc057869 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -99,6 +99,8 @@ --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-Link--staticBlack { @@ -106,6 +108,8 @@ --mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } /* Windows high contrast mode */ diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 8e1c2658fbf..9c61d275d30 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -40,6 +40,7 @@ padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50)); border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200)); + border-style: solid; border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100)); diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9a7aa93bbac..9133755e956 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", @@ -211,7 +210,7 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", + "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -250,6 +249,7 @@ "--spectrum-downstate-width", "--spectrum-field-default-width-extra-large", "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", "--spectrum-field-default-width-small", "--spectrum-field-edge-to-text-quiet", "--spectrum-field-end-edge-to-disclosure-icon-100", @@ -278,12 +278,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/picker/index.css b/components/picker/index.css index 843c9b0fa2a..924bef384d1 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -14,6 +14,7 @@ @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { + /* Color */ --spectrum-picker-background-color-default: var(--spectrum-gray-100); --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); --spectrum-picker-background-color-hover: var(--spectrum-gray-200); @@ -21,14 +22,12 @@ --spectrum-picker-background-color-active: var(--spectrum-gray-200); --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-800); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-picker-border-color-default: transparent; + --spectrum-picker-border-color-default-open: transparent; + --spectrum-picker-border-color-hover: transparent; + --spectrum-picker-border-color-hover-open: transparent; + --spectrum-picker-border-color-active: transparent; + --spectrum-picker-border-color-key-focus: transparent; /* Font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); @@ -39,10 +38,12 @@ /* Dimensions */ --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-medium); --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); /* Border */ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-picker-border-width: var(--spectrum-border-width-200); /* Spacing */ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); @@ -93,7 +94,6 @@ --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color); --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); @@ -182,7 +182,6 @@ --spectrum-picker-background-color-active: transparent; --spectrum-picker-background-color-key-focus: transparent; --spectrum-picker-background-color-disabled: transparent; - --spectrum-picker-border-color-disabled: transparent; --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0); --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto); @@ -448,13 +447,13 @@ } /* Disabled and loading states: - Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves - all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ + Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves + all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ .spectrum-Picker:disabled, .spectrum-Picker.is-disabled { cursor: default; transform: none; - border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled)); + border-color: var(--highcontrast-picker-border-color-disabled, transparent); color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); &:not(.spectrum-Picker--quiet) { diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 78c4b2a4f87..c6224c7c3dd 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -52,6 +52,15 @@ export default { control: "boolean", if: { arg: "labelPosition", eq: "side" }, }, + showWorkflowIcon: { + name: "Show workflow icon", + description: "Display optional workflow icon before the value or placeholder", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, + }, placeholder: { name: "Value or placeholder", description: "The text within the Picker that represents its current value or placeholder.", @@ -62,6 +71,7 @@ export default { }, control: { type: "text" }, }, + currentValue: { table: { disable: true } }, contentIconName: { ...(IconStories?.argTypes?.iconName ?? {}), name: "Icon", diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 0d8bec6d42f..d2713463154 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -22,9 +22,11 @@ export const Picker = ({ size = "m", labelPosition = "top", placeholder, + currentValue, contentIconName, isQuiet = false, isKeyboardFocused = false, + showWorkflowIcon = false, isOpen = false, isInvalid = false, isLoading = false, @@ -37,12 +39,6 @@ export const Picker = ({ } = {}, context = {}) => { const { updateArgs } = context; - // Use the chevron from the UI icon set for each size, as defined in the design spec. - let disclosureIconName = "ChevronDown100"; - if (size == "s") { disclosureIconName = "ChevronDown75"; } - else if (size == "l") { disclosureIconName = "ChevronDown200"; } - else if (size == "xl") { disclosureIconName = "ChevronDown300"; } - return html` @@ -105,15 +121,21 @@ export const Picker = ({ * Picker template used along with other sibling components, such as Field label and Help text. */ export const Template = ({ + rootClass = "spectrum-Picker", size = "m", label, labelPosition = "top", placeholder, + currentValue, helpText, isQuiet = false, isOpen = false, isInvalid = false, isDisabled = false, + showWorkflowIcon = false, + isHovered = false, + isActive = false, + isKeyboardFocused = false, isLoading = false, withSwitch = false, fieldLabelStyle = {}, @@ -128,12 +150,18 @@ export const Template = ({ popoverContent = [], } = {}, context = {}) => { const pickerMarkup = Picker({ + rootClass, size, isQuiet, + currentValue, + showWorkflowIcon, isOpen, isInvalid, isDisabled, isLoading, + isHovered, + isActive, + isKeyboardFocused, placeholder, popoverContent, labelPosition, diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 13c313b8342..07f3510d851 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -154,7 +154,6 @@ "--spectrum-component-top-to-text-75", "--spectrum-corner-radius-full", "--spectrum-cyan-visual-color", - "--spectrum-default-font-family", "--spectrum-default-font-style", "--spectrum-font-size-100", "--spectrum-font-size-200", @@ -179,6 +178,7 @@ "--spectrum-purple-visual-color", "--spectrum-red-visual-color", "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-seafoam-visual-color", "--spectrum-silver-visual-color", "--spectrum-turquoise-visual-color", diff --git a/components/statuslight/index.css b/components/statuslight/index.css index db4a4f57e4d..db810c053b9 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -23,7 +23,7 @@ --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); /* Font */ - --spectrum-statuslight-font-family: var(--spectrum-default-font-family); + --spectrum-statuslight-font-family: var(--spectrum-sans-font-family-stack); --spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight); --spectrum-statuslight-font-style: var(--spectrum-default-font-style); --spectrum-statuslight-font-size: var(--spectrum-font-size-100); diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 57a281d35df..237b576aeff 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -13,7 +13,6 @@ ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", ".spectrum-Switch--disabled", - ".spectrum-Switch--emphasized", ".spectrum-Switch--sizeL", ".spectrum-Switch--sizeS", ".spectrum-Switch--sizeXL", @@ -35,6 +34,7 @@ ".spectrum-Switch-switch", ".spectrum-Switch-switch:after", ".spectrum-Switch-switch:before", + ".spectrum-Switch.spectrum-Switch--emphasized", ".spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch", ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before", ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before", @@ -61,7 +61,7 @@ "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before" ], "modifiers": [ - "--mod-animation-duration-100", + "--mod-switch-animation-duration-switch", "--mod-switch-background-color", "--mod-switch-background-color-disabled", "--mod-switch-background-color-selected-default", @@ -98,7 +98,7 @@ "--mod-switch-handle-selected-size", "--mod-switch-handle-size", "--mod-switch-height", - "--mod-switch-label-color", + "--mod-switch-label-color-default", "--mod-switch-label-color-disabled", "--mod-switch-label-color-down", "--mod-switch-label-color-focus", @@ -109,6 +109,8 @@ "--mod-switch-spacing-top-to-label" ], "component": [ + "--spectrum-switch-animation-duration-label", + "--spectrum-switch-animation-duration-switch", "--spectrum-switch-background-color", "--spectrum-switch-background-color-disabled", "--spectrum-switch-background-color-selected-default", diff --git a/components/switch/index.css b/components/switch/index.css index 2e0a88fe4f1..d82f9629315 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -56,6 +56,9 @@ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium); --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium); + --spectrum-switch-animation-duration-switch: var(--spectrum-animation-duration-100); + --spectrum-switch-animation-duration-label: var(--spectrum-animation-duration-200); + /* Default size - medium */ --spectrum-switch-min-height: var(--spectrum-component-height-100); --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); @@ -76,7 +79,7 @@ --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } -.spectrum-Switch--emphasized { +.spectrum-Switch.spectrum-Switch--emphasized { --spectrum-switch-background-color-selected-default: var(--spectrum-accent-background-color-default); --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-background-color-hover); --spectrum-switch-background-color-selected-down: var(--spectrum-accent-background-color-down); @@ -164,13 +167,13 @@ } .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color, var(--spectrum-switch-label-color-default))); + color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label)); font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height)); - transition: color var(--spectrum-animation-duration-200) ease-in-out; + transition: color var(--spectrum-switch-animation-duration-label) ease-in-out; &:lang(ja), &:lang(zh), @@ -195,7 +198,6 @@ display: inline-block; box-sizing: border-box; - /* positions the pseudo elements relative to this one */ position: relative; inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); @@ -203,15 +205,14 @@ /* Fix vertical alignment when not wrapping since we're flex-start */ margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); margin-inline: 0; - flex-grow: 0; flex-shrink: 0; vertical-align: middle; transition: - background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + background var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out, + border var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out; block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); @@ -263,10 +264,11 @@ content: ""; box-sizing: border-box; - transition: background var(--spectrum-animation-duration-100) ease-in-out, - border var(--spectrum-animation-duration-100) ease-in-out, - transform var(--spectrum-animation-duration-100) ease-in-out, - box-shadow var(--spectrum-animation-duration-100) ease-in-out; + transition: + background var(--spectrum-switch-animation-duration-switch) ease-in-out, + border var(--spectrum-switch-animation-duration-switch) ease-in-out, + transform var(--spectrum-switch-animation-duration-switch) ease-in-out, + box-shadow var(--spectrum-switch-animation-duration-switch) ease-in-out; inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); @@ -338,9 +340,9 @@ margin: 0; transition: - opacity var(--spectrum-animation-duration-100) ease-out, - outline-offset var(--spectrum-animation-duration-100) ease-out, - border var(--spectrum-animation-duration-100) ease-in-out; + opacity var(--spectrum-switch-animation-duration-switch) ease-out, + outline-offset var(--spectrum-switch-animation-duration-switch) ease-out, + border var(--spectrum-switch-animation-duration-switch) ease-in-out; .spectrum-Switch-input:focus-visible + & { outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); @@ -420,5 +422,6 @@ --highcontrast-switch-background-color-selected-disabled: GrayText; --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; } }