From cd076bf68620f6a24a8591c63cbf6929df278555 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 12 Feb 2025 15:34:27 +0100 Subject: [PATCH 1/2] chore(picker): update css version to latest foundations --- packages/picker/package.json | 2 +- packages/picker/src/picker-overrides.css | 242 +---------------- packages/picker/src/spectrum-picker.css | 241 ++++++++++++++++- .../styles/tokens-v2/system-theme-bridge.css | 245 +----------------- .../tokens/express/system-theme-bridge.css | 233 +---------------- .../tokens/spectrum/system-theme-bridge.css | 233 +---------------- yarn.lock | 10 +- 7 files changed, 263 insertions(+), 943 deletions(-) diff --git a/packages/picker/package.json b/packages/picker/package.json index f50043a6a1..69e5adfbdf 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -98,7 +98,7 @@ "@spectrum-web-components/tray": "^1.1.1" }, "devDependencies": { - "@spectrum-css/picker": "9.0.0-s2-foundations.15" + "@spectrum-css/picker": "9.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css index 13038cedb9..cc8ab6d82d 100644 --- a/packages/picker/src/picker-overrides.css +++ b/packages/picker/src/picker-overrides.css @@ -18,15 +18,15 @@ governing permissions and limitations under the License. --spectrum-picker-background-color-default-open: var( --system-picker-background-color-default-open ); - --spectrum-picker-background-color-active: var( - --system-picker-background-color-active - ); --spectrum-picker-background-color-hover: var( --system-picker-background-color-hover ); --spectrum-picker-background-color-hover-open: var( --system-picker-background-color-hover-open ); + --spectrum-picker-background-color-active: var( + --system-picker-background-color-active + ); --spectrum-picker-background-color-key-focus: var( --system-picker-background-color-key-focus ); @@ -48,238 +48,8 @@ governing permissions and limitations under the License. --spectrum-picker-border-color-key-focus: var( --system-picker-border-color-key-focus ); - --spectrum-picker-border-width: var(--system-picker-border-width); - --spectrum-picker-font-size: var(--system-picker-font-size); - --spectrum-picker-font-weight: var(--system-picker-font-weight); - --spectrum-picker-placeholder-font-style: var( - --system-picker-placeholder-font-style - ); - --spectrum-picker-line-height: var(--system-picker-line-height); - --spectrum-picker-block-size: var(--system-picker-block-size); - --spectrum-picker-inline-size: var(--system-picker-inline-size); - --spectrum-picker-border-radius: var(--system-picker-border-radius); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-spacing-edge-to-text - ); - --spectrum-picker-spacing-edge-to-text-quiet: var( - --system-picker-spacing-edge-to-text-quiet - ); - --spectrum-picker-spacing-label-to-picker: var( - --system-picker-spacing-label-to - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-spacing-edge-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( - --system-picker-spacing-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-animation-duration: var( - --system-picker-animation-duration - ); - --spectrum-picker-font-color-default: var( - --system-picker-font-color-default - ); - --spectrum-picker-font-color-default-open: var( - --system-picker-font-color-default-open - ); - --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); - --spectrum-picker-font-color-hover-open: var( - --system-picker-font-color-hover-open - ); - --spectrum-picker-font-color-active: var(--system-picker-font-color-active); - --spectrum-picker-font-color-key-focus: var( - --system-picker-font-color-key-focus - ); - --spectrum-picker-icon-color-default: var( - --system-picker-icon-color-default - ); - --spectrum-picker-icon-color-default-open: var( - --system-picker-icon-color-default-open - ); - --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); - --spectrum-picker-icon-color-hover-open: var( - --system-picker-icon-color-hover-open - ); - --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); - --spectrum-picker-icon-color-key-focus: var( - --system-picker-icon-color-key-focus - ); - --spectrum-picker-border-color-error-default: var( - --system-picker-border-color-error-default - ); - --spectrum-picker-border-color-error-default-open: var( - --system-picker-border-color-error-default-open - ); - --spectrum-picker-border-color-error-hover: var( - --system-picker-border-color-error-hover - ); - --spectrum-picker-border-color-error-hover-open: var( - --system-picker-border-color-error-hover-open - ); - --spectrum-picker-border-color-error-active: var( - --system-picker-border-color-error-active - ); - --spectrum-picker-border-color-error-key-focus: var( - --system-picker-border-color-error-key-focus - ); - --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); - --spectrum-picker-background-color-disabled: var( - --system-picker-background-color-disabled - ); - --spectrum-picker-font-color-disabled: var( - --system-picker-font-color-disabled - ); - --spectrum-picker-icon-color-disabled: var( - --system-picker-icon-color-disabled - ); - --spectrum-picker-focus-indicator-gap: var( - --system-picker-focus-indicator-gap - ); - --spectrum-picker-focus-indicator-thickness: var( - --system-picker-focus-indicator-thickness - ); - --spectrum-picker-focus-indicator-color: var( - --system-picker-focus-indicator-color - ); -} - -:host([size='s']) { - --spectrum-picker-font-size: var(--system-picker-size-s-font-size); - --spectrum-picker-block-size: var(--system-picker-size-s-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-s-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-s-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-s-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-s-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-s-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-s-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-s-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-s-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-s-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-s-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-s-spacing-edge-to-disclosure-icon - ); -} - -:host([size='l']) { - --spectrum-picker-font-size: var(--system-picker-size-l-font-size); - --spectrum-picker-block-size: var(--system-picker-size-l-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-l-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-l-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-l-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-l-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-l-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-l-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-l-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-l-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-l-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-l-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-l-spacing-edge-to-disclosure-icon - ); -} - -:host([size='xl']) { - --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); - --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-xl-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-xl-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-xl-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-xl-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-xl-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-xl-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-xl-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-xl-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-xl-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-xl-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-xl-spacing-edge-to-disclosure-icon + --spectrum-picker-border-color-disabled: var( + --system-picker-border-color-disabled ); + --spectrum-picker-border-width: var(--system-picker-border-width); } diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index 278f7253f2..394c06df98 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -87,6 +87,240 @@ governing permissions and limitations under the License. outline: none; } +:host { + --spectrum-picker-font-size: var(--spectrum-font-size-100); + --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); + --spectrum-picker-placeholder-font-style: var( + --spectrum-default-font-style + ); + --spectrum-picker-line-height: var(--spectrum-line-height-100); + --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-width); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-picker-spacing-label-to-picker: var( + --spectrum-field-label-to-component + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --spectrum-picker-animation-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --spectrum-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --spectrum-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); + --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 + ); + --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + +:host([size='s']) { + --spectrum-picker-font-size: var(--spectrum-font-size-75); + --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); +} + +:host([size='l']) { + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); +} + +:host([size='xl']) { + --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); +} + @media (forced-colors: active) { :host { --highcontrast-picker-focus-indicator-color: Highlight; @@ -563,6 +797,7 @@ governing permissions and limitations under the License. } .validation-icon { + flex-shrink: 0; margin-block-start: calc( var( --mod-picker-spacing-top-to-alert-icon, @@ -818,8 +1053,10 @@ governing permissions and limitations under the License. var(--spectrum-picker-background-color-disabled) ) ); - border-color: #0000; - border-color: var(--highcontrast-picker-border-color-disabled, transparent); + border-color: var( + --highcontrast-picker-border-color-disabled, + var(--spectrum-picker-border-color-disabled) + ); color: var( --highcontrast-picker-content-color-disabled, var( diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index cf5c420412..e668355477 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -3561,249 +3561,20 @@ --system-modal-transition-animation-duration: var( --spectrum-animation-duration-100 ); - --system-picker-background-color-default: var(--spectrum-gray-50); + --system-picker-background-color-default: var(--spectrum-gray-100); --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); --system-picker-background-color-active: var(--spectrum-gray-200); - --system-picker-background-color-hover: var(--spectrum-gray-100); - --system-picker-background-color-hover-open: var(--spectrum-gray-100); - --system-picker-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-800); --system-picker-border-color-default-open: var(--spectrum-gray-500); --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-900); --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-color-key-focus: var(--spectrum-gray-900); + --system-picker-border-color-disabled: var(--spectrum-gray-300); --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); --system-picker-button-background-color: var(--spectrum-gray-50); --system-picker-button-background-color-hover: var(--spectrum-gray-100); --system-picker-button-background-color-down: var(--spectrum-gray-200); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index 740574617d..ad397700d7 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -3557,9 +3557,9 @@ ); --system-picker-background-color-default: var(--spectrum-gray-200); --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); --system-picker-background-color-hover: var(--spectrum-gray-300); --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); --system-picker-background-color-key-focus: var(--spectrum-gray-300); --system-picker-border-color-default: transparent; --system-picker-border-color-default-open: transparent; @@ -3567,237 +3567,8 @@ --system-picker-border-color-hover-open: transparent; --system-picker-border-color-active: transparent; --system-picker-border-color-key-focus: transparent; + --system-picker-border-color-disabled: transparent; --system-picker-border-width: 0px; - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); --system-picker-button-background-color: var(--spectrum-gray-200); --system-picker-button-background-color-hover: var(--spectrum-gray-300); --system-picker-button-background-color-down: var(--spectrum-gray-400); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index e455d14772..592b74d517 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -3563,9 +3563,9 @@ ); --system-picker-background-color-default: var(--spectrum-gray-75); --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); --system-picker-background-color-hover: var(--spectrum-gray-200); --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); --system-picker-background-color-key-focus: var(--spectrum-gray-200); --system-picker-border-color-default: var(--spectrum-gray-500); --system-picker-border-color-default-open: var(--spectrum-gray-500); @@ -3573,237 +3573,8 @@ --system-picker-border-color-hover-open: var(--spectrum-gray-600); --system-picker-border-color-active: var(--spectrum-gray-700); --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-color-disabled: transparent; --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); --system-picker-button-background-color: var(--spectrum-gray-75); --system-picker-button-background-color-hover: var(--spectrum-gray-200); --system-picker-button-background-color-down: var(--spectrum-gray-300); diff --git a/yarn.lock b/yarn.lock index 59849b3ebc..b20327c52a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7863,9 +7863,9 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/picker@npm:9.0.0-s2-foundations.15": - version: 9.0.0-s2-foundations.15 - resolution: "@spectrum-css/picker@npm:9.0.0-s2-foundations.15" +"@spectrum-css/picker@npm:9.0.0-s2-foundations.17": + version: 9.0.0-s2-foundations.17 + resolution: "@spectrum-css/picker@npm:9.0.0-s2-foundations.17" peerDependencies: "@spectrum-css/helptext": ">=5" "@spectrum-css/icon": ">=7" @@ -7878,7 +7878,7 @@ __metadata: optional: true "@spectrum-css/progresscircle": optional: true - checksum: 10c0/bf1a92745024fa995a783ca7dbdfa8011fa22340dba0e3c82084177c3d8ca94f88915f7449a8bf39d3dbeab9d3b20e8eca4023d5234ae191c31a3e0811a2d99a + checksum: 10c0/df2a841bc6e42d5d3cd25ea5c3b0a2b4188d505a62ea6119dd5bd8827dc951e57bc9d42528bbea36b23ec8beda6b6dc5e50545d6aef978c10381d79575882361 languageName: node linkType: hard @@ -8961,7 +8961,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/picker@workspace:packages/picker" dependencies: - "@spectrum-css/picker": "npm:9.0.0-s2-foundations.15" + "@spectrum-css/picker": "npm:9.0.0-s2-foundations.17" "@spectrum-web-components/base": "npm:^1.1.1" "@spectrum-web-components/button": "npm:^1.1.1" "@spectrum-web-components/field-label": "npm:^1.1.1" From 3725140a97b8021104562da7b3d8562fb56a7a07 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Wed, 12 Feb 2025 16:01:48 +0100 Subject: [PATCH 2/2] chore: update golden images cache --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index a0e38a62ec..b14e4349bb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -14,7 +14,7 @@ parameters: # 3. Commit this change to the PR branch where the changes exist. current_golden_images_hash: type: string - default: 65776e325781bdcf3c97758d8faf300cf9b0b8b8 + default: cd076bf68620f6a24a8591c63cbf6929df278555 wireit_cache_name: type: string default: wireit