From 019a2e954f92f2a48334936b34f330a1766b986d Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Tue, 11 Feb 2025 12:05:02 +0100 Subject: [PATCH 1/9] chore: update fields css dependencies --- packages/number-field/package.json | 2 +- .../src/number-field-overrides.css | 66 +- .../src/spectrum-number-field.css | 761 ++++++++++-------- packages/search/package.json | 2 +- packages/search/src/search-overrides.css | 62 -- packages/search/src/spectrum-search.css | 125 ++- packages/textfield/package.json | 2 +- packages/textfield/src/spectrum-textfield.css | 386 ++++++++- .../textfield/src/textfield-overrides.css | 383 --------- .../styles/tokens-v2/system-theme-bridge.css | 477 +---------- .../tokens/express/system-theme-bridge.css | 477 +---------- .../tokens/spectrum/system-theme-bridge.css | 477 +---------- yarn.lock | 26 +- 13 files changed, 879 insertions(+), 2367 deletions(-) diff --git a/packages/number-field/package.json b/packages/number-field/package.json index ab6d9250b18..141f5f13bbf 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -69,7 +69,7 @@ }, "devDependencies": { "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "7.0.0-s2-foundations.18" + "@spectrum-css/stepper": "7.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css index 8f74d06aa34..dbbf3794b16 100644 --- a/packages/number-field/src/number-field-overrides.css +++ b/packages/number-field/src/number-field-overrides.css @@ -13,7 +13,9 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { --spectrum-stepper-border-width: var(--system-stepper-border-width); - --spectrum-stepper-border-color: var(--system-stepper-border-color); + --spectrum-stepper-border-color-default: var( + --system-stepper-border-color-default + ); --spectrum-stepper-border-color-hover: var( --system-stepper-border-color-hover ); @@ -26,13 +28,6 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus: var( --system-stepper-border-color-keyboard-focus ); - --spectrum-stepper-border-radius: var(--system-stepper-border-radius); - --spectrum-stepper-min-width-multiplier: var( - --system-stepper-min-width-multiplier - ); - --spectrum-stepper-animation-duration: var( - --system-stepper-animation-duration - ); --spectrum-stepper-buttons-border-style: var( --system-stepper-buttons-border-style ); @@ -54,25 +49,12 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-color-keyboard-focus: var( --system-stepper-buttons-border-color-keyboard-focus ); - --spectrum-stepper-button-padding: var(--system-stepper-button-padding); - --spectrum-stepper-button-border-radius-reset: var( - --system-stepper-button-border-radius-reset - ); --spectrum-stepper-button-border-width: var( --system-stepper-button-border-width ); - --spectrum-stepper-button-background-color-focus: var( - --system-stepper-button-background-color-focus - ); - --spectrum-stepper-button-background-color-keyboard-focus: var( - --system-stepper-button-background-color-keyboard-focus - ); --spectrum-stepper-border-color-invalid: var( --system-stepper-border-color-invalid ); - --spectrum-stepper-border-color-hover-invalid: var( - --system-stepper-border-color-hover-invalid - ); --spectrum-stepper-border-color-focus-invalid: var( --system-stepper-border-color-focus-invalid ); @@ -82,47 +64,19 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus-invalid: var( --system-stepper-border-color-keyboard-focus-invalid ); - --spectrum-stepper-focus-indicator-width: var( - --system-stepper-focus-indicator-width - ); - --spectrum-stepper-focus-indicator-gap: var( - --system-stepper-focus-indicator-gap - ); - --spectrum-stepper-focus-indicator-color: var( - --system-stepper-focus-indicator-color - ); - --spectrum-stepper-button-border-color-quiet: var( - --system-stepper-button-border-color-quiet - ); - --spectrum-stepper-button-border-color-disabled: var( - --system-stepper-button-border-color-disabled - ); --spectrum-stepper-button-border-width-disabled: var( --system-stepper-button-border-width-disabled ); --spectrum-stepper-buttons-background-color-disabled: var( --system-stepper-buttons-background-color-disabled ); - --spectrum-stepper-button-width: var(--system-stepper-button-width); - --spectrum-stepper-height: var(--system-stepper-height); -} - -:host([size='s']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); - --spectrum-stepper-height: var(--system-stepper-size-s-height); -} - -:host([size='m']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); - --spectrum-stepper-height: var(--system-stepper-size-m-height); } -:host([size='l']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); - --spectrum-stepper-height: var(--system-stepper-size-l-height); -} - -:host([size='xl']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); - --spectrum-stepper-height: var(--system-stepper-size-xl-height); +:host([quiet]) #textfield { + --spectrum-stepper-buttons-border-style: var( + --system-stepper-quiet-buttons-border-style + ); + --spectrum-stepper-button-edge-to-fill: var( + --system-stepper-quiet-button-edge-to-fill + ); } diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index f85c15210c9..49006ea7fea 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -11,361 +11,328 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#textfield { - --spectrum-stepper-width: calc( - var(--mod-stepper-height, var(--spectrum-stepper-height)) * - var( - --mod-stepper-min-width-multiplier, - var(--spectrum-stepper-min-width-multiplier) - ) + - var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ) + - var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ) * 2 - ); - --mod-infield-button-border-color: var( +@media (forced-colors: active) { + :host { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-focus-indicator-color: Highlight; + } + + :host([invalid]) #textfield { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + } + + :host([disabled]) #textfield { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + } + + :host([focused]:not([disabled])) #textfield, + :host(:not([disabled])) #textfield:focus { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-focus + ); + } + + @media (hover: hover) { + :host(:not([disabled]):hover) #textfield { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-hover + ); + } + + :host([focused]:not([disabled]):hover) #textfield, + :host(:not([disabled]):hover) #textfield:focus { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-focus-hover + ); + } + } + + :host([keyboard-focused]:not([disabled])) #textfield, + :host(:not([disabled])) #textfield:focus-visible { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus + ); + } + + .input { + --highcontrast-textfield-border-color: var( + --highcontrast-stepper-border-color + ); + } + + .button { + --highcontrast-infield-button-border-color: var( + --highcontrast-stepper-border-color + ); + --highcontrast-infield-button-border-color-active: var( + --highcontrast-stepper-border-color + ); + } +} + +:host { + --spectrum-stepper-border-color: var( --highcontrast-stepper-border-color, var( - --mod-stepper-buttons-border-color, - var(--spectrum-stepper-buttons-border-color) + --mod-stepper-border-color, + var(--spectrum-stepper-border-color-default) ) ); - --mod-infield-button-border-width: var( - --mod-stepper-button-border-width, - var(--spectrum-stepper-button-border-width) - ); - --mod-infield-button-border-radius-reset: var( - --spectrum-stepper-button-border-radius-reset - ); - --mod-textfield-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - border-radius: var( + --spectrum-stepper-border-radius: var( --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) + var(--spectrum-corner-radius-100) ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - flex-flow: row; - display: inline-flex; - position: relative; -} - -#textfield:before { - content: ''; -} - -#textfield:after { - content: ''; - inline-size: 100%; - block-size: var( + --spectrum-stepper-focus-indicator-width: var( --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) + var(--spectrum-focus-indicator-thickness) ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ) + - var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - ) * -1 + --spectrum-stepper-focus-indicator-gap: var( + --mod-stepper-focus-indicator-gap, + var(--spectrum-focus-indicator-gap) ); - inset-inline-start: 0; -} - -:host([focused]) #textfield, -#textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus, + --spectrum-stepper-focus-indicator-color: var( + --highcontrast-stepper-focus-indicator-color, var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) + --mod-stepper-focus-indicator-color, + var(--spectrum-focus-indicator-color) ) ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-buttons-border-color-focus, - var(--spectrum-stepper-buttons-border-color-focus) - ) + --spectrum-stepper-animation-duration: var( + --mod-stepper-animation-duration, + var(--spectrum-animation-duration-100) ); } -:host([focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus .input { - outline: none; -} - -:host([focused]:not([disabled])) #textfield .buttons, -:host([focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus .buttons, -:host(:not([disabled])) #textfield:focus .input { - border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) +#textfield, +:host([size='m']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-medium) + ); + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-100) ); } -:host([keyboard-focused]) #textfield, -#textfield:focus-visible { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) +:host([size='s']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-small) ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-75) ); } -:host([keyboard-focused]:not([disabled])) #textfield, -:host(:not([disabled])) #textfield:focus-visible { - outline: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) +:host([size='l']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-large) ); - outline-offset: var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-200) ); } -:host([keyboard-focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus-visible .input { - outline: none; +:host([size='xl']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-300) + ); } -:host([keyboard-focused]:not([disabled])) #textfield .buttons, -:host([keyboard-focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus-visible .buttons, -:host(:not([disabled])) #textfield:focus-visible .input { - border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-border-color-keyboard-focus, - var(--spectrum-stepper-border-color-keyboard-focus) - ) +:host([disabled]) #textfield { + --spectrum-stepper-buttons-border-width: var( + --spectrum-stepper-button-border-width-disabled + ); + --spectrum-stepper-buttons-background-color: var( + --spectrum-stepper-buttons-background-color-disabled ); } -:host([invalid]:not([disabled])) #textfield { +:host([invalid]) #textfield { --mod-stepper-border-color: var( --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) + var(--spectrum-negative-border-color-default) ); --mod-stepper-border-color-hover: var( --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) + var(--spectrum-negative-border-color-hover) ); --mod-stepper-border-color-focus: var( --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) + var(--spectrum-negative-border-color-focus) ); --mod-stepper-border-color-focus-hover: var( --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) + var(--spectrum-negative-border-color-focus-hover) ); --mod-stepper-border-color-keyboard-focus: var( --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) + var(--spectrum-negative-border-color-key-focus) ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-textfield-icon-spacing-inline-start-invalid: 0; } -:host([invalid][focused]:not([disabled])) #textfield, -:host([invalid]:not([disabled])) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) +:host([focused]:not([disabled])) #textfield, +:host(:not([disabled])) #textfield:focus { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) + ); + --mod-stepper-buttons-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) ); } -:host([invalid][keyboard-focused]:not([disabled])) #textfield, -:host([invalid]:not([disabled])) #textfield:focus-visible { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) +:host([keyboard-focused]:not([disabled])) #textfield { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-keyboard-focus) + ) ); } -:host([disabled]) #textfield { +:host([quiet]) #textfield { + --mod-stepper-buttons-background-color: transparent; +} + +:host([quiet][keyboard-focused]:not([disabled])) #textfield { + --mod-stepper-focus-indicator-visibility: visible; +} + +:host([quiet][invalid]) #textfield { --mod-stepper-border-color: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-keyboard-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-buttons-background-color: var( - --spectrum-stepper-buttons-background-color-disabled - ); - --mod-infield-button-border-width: var( - --spectrum-stepper-button-border-width-disabled + --mod-stepper-border-color-invalid, + var(--spectrum-negative-border-color-default) ); +} + +:host { --mod-infield-button-border-color: var( - --spectrum-stepper-button-border-color-disabled + --mod-stepper-buttons-border-color, + var(--spectrum-stepper-buttons-border-color) ); - --mod-textfield-border-color-disabled: var( - --spectrum-stepper-button-border-color-disabled + --mod-infield-button-border-color-quiet-disabled: var( + --spectrum-disabled-border-color ); -} - -#textfield .input { - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + --mod-infield-button-border-width: var( + --mod-stepper-button-border-width, + var(--spectrum-stepper-button-border-width) ); - border-inline-end-width: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; -} - -#textfield.hide-stepper .input { - border-inline-end-width: var( + --mod-textfield-border-width: var( --mod-stepper-border-width, var(--spectrum-stepper-border-width) ); - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); + --mod-textfield-border-color: var(--spectrum-stepper-border-color); } -#textfield .buttons { - box-sizing: border-box; - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-style: var( - --mod-stepper-buttons-border-style, - var(--spectrum-stepper-buttons-border-style) - ); - border-width: var( - --highcontrast-stepper-buttons-border-width, +:host(:not([disabled])[focused]) #textfield, +:host(:not([disabled])) #textfield:focus { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus, var( - --mod-stepper-buttons-border-width, - var(--spectrum-stepper-buttons-border-width) + --mod-stepper-buttons-border-color-focus, + var(--spectrum-stepper-buttons-border-color-focus) ) ); - background-color: var( - --highcontrast-stepper-buttons-background-color, + --mod-textfield-focus-indicator-width: 0; +} + +:host([keyboard-focused]:not([disabled])) #textfield, +:host(:not([disabled])) #textfield:focus-visible { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, var( - --mod-stepper-buttons-background-color, - var(--spectrum-stepper-buttons-background-color) + --mod-stepper-buttons-border-color-keyboard-focus, + var(--spectrum-stepper-buttons-border-color-keyboard-focus) ) ); - transition: border-color + --mod-textfield-focus-indicator-width: 0; + --mod-textfield-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, var( - --mod-stepper-animation-duration, - var(--spectrum-stepper-animation-duration) + --mod-stepper-border-color-keyboard-focus, + var(--spectrum-stepper-border-color-keyboard-focus) ) - ease-in-out; - border-inline-start-width: 0; - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) ); - flex-direction: column; - justify-content: center; - display: flex; + outline: var(--spectrum-stepper-focus-indicator-width) solid; + outline-color: var(--spectrum-stepper-focus-indicator-color); + outline-offset: var(--spectrum-stepper-focus-indicator-gap); } -:host([quiet]) #textfield { - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -:host([quiet]) #textfield .input { - --mod-textfield-focus-indicator-color: transparent; +:host([invalid]) #textfield { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ) + ); + --mod-textfield-icon-spacing-inline-start-invalid: 0; } -:host([quiet]) #textfield.hide-stepper .input { - border-inline-end-width: 0; - border-end-end-radius: 0; +:host([invalid][focused]) #textfield, +:host([invalid]) #textfield:focus { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ) + ); } -:host([quiet]) #textfield .buttons { - --mod-infield-button-border-color: transparent; - border-width: 0; - border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - border-block-end-color: var( +:host([invalid][keyboard-focused]) #textfield, +:host([invalid]) #textfield:focus-visible { + --mod-infield-button-border-color: var( --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ) ); - border-block-end-style: solid; - border-end-end-radius: 0; } -:host([quiet]) #textfield .button { +:host([quiet]) #textfield { --mod-infield-button-width-stacked: var( --mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width) ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-quiet, - var(--spectrum-stepper-button-border-color-quiet) + --mod-infield-button-border-color: var(--spectrum-stepper-border-color); + --mod-infield-button-border-color-quiet: var( + --spectrum-stepper-border-color + ); + --mod-infield-button-border-block-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) ); --mod-infield-button-stacked-bottom-border-block-end-width: var( --mod-stepper-border-width, @@ -374,18 +341,27 @@ governing permissions and limitations under the License. --mod-infield-button-stacked-bottom-border-radius-end-end: 0; --mod-infield-button-stacked-bottom-border-radius-end-start: 0; --mod-infield-button-fill-justify-content: flex-end; - padding: 0; -} - -:host([quiet]) #textfield .buttons, -:host([quiet]) #textfield .input { - background-color: initial; + --mod-infield-button-inner-edge-to-fill: var( + --spectrum-stepper-button-edge-to-fill + ); + --mod-infield-button-edge-to-fill: var( + --spectrum-stepper-button-edge-to-fill + ); + --mod-textfield-focus-indicator-color: transparent; + --mod-textfield-background-color: transparent; + --mod-textfield-border-color-hover: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); } -:host([quiet][focused]) #textfield, -:host([quiet]) #textfield:focus { +:host([quiet][focused]:not([disabled])) #textfield, +:host([quiet]:not([disabled])) #textfield:focus { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus) @@ -395,27 +371,16 @@ governing permissions and limitations under the License. :host([quiet][keyboard-focused]:not([disabled])) #textfield { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus) ) ); - outline: none; -} - -:host([quiet][keyboard-focused]:not([disabled])) #textfield:after { - background-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) - ); } @media (hover: hover) { - :host(:hover:not([disabled])) #textfield { + :host(:not([disabled]):hover) #textfield { --mod-stepper-border-color: var( --highcontrast-stepper-border-color-hover, var( @@ -423,38 +388,45 @@ governing permissions and limitations under the License. var(--spectrum-stepper-border-color-hover) ) ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-buttons-border-color-hover, - var(--spectrum-stepper-buttons-border-color-hover) - ) - ); } - :host([focused]:hover) #textfield, - :host(:hover) #textfield:focus { + :host([focused]:not([disabled]):hover) #textfield, + :host(:not([disabled]):hover) #textfield:focus { --mod-stepper-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) + --mod-stepper-border-color-focus-hover, + var(--spectrum-stepper-border-color-focus-hover) ) ); - --mod-infield-button-border-color: var( + --mod-stepper-buttons-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) + --mod-stepper-border-color-focus-hover, + var(--spectrum-stepper-border-color-focus-hover) ) ); } - :host([focused]:hover) #textfield .buttons, - :host([focused]:hover) #textfield .input, - :host(:hover) #textfield:focus .buttons, - :host(:hover) #textfield:focus .input { - border-color: var( + :host([quiet]:not([disabled]):hover) #textfield { + --mod-stepper-buttons-background-color: transparent; + } + + :host(:hover) #textfield:not(.is-invalid, .is-disabled) { + --mod-infield-button-border-color: var( + --mod-stepper-buttons-border-color-hover, + var(--spectrum-stepper-buttons-border-color-hover) + ); + } + + :host(:not([disabled])[focused]:hover) #textfield, + :host(:not([disabled]):hover) #textfield:focus { + --mod-infield-button-border-color: var( + --mod-stepper-buttons-border-color-focus-hover, + var(--spectrum-stepper-buttons-border-color-focus-hover) + ); + --mod-textfield-focus-indicator-width: 0; + --mod-textfield-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --mod-stepper-border-color-focus-hover, @@ -463,24 +435,37 @@ governing permissions and limitations under the License. ); } - :host([invalid]:not([disabled]):hover) #textfield { + :host([invalid]:hover) #textfield { --mod-infield-button-border-color: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-negative-border-color-hover) + ) ); } - :host([invalid][focused]:not([disabled]):hover) #textfield, - :host([invalid]:not([disabled]):hover) #textfield:focus { + :host([invalid][focused]:hover) #textfield, + :host([invalid]:hover) #textfield:focus { --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-focus-hover-invalid, + var(--spectrum-stepper-border-color-focus-hover-invalid) + ) ); } :host([quiet]:not([disabled]):hover) #textfield { + --mod-textfield-border-color-hover: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover) @@ -488,14 +473,10 @@ governing permissions and limitations under the License. ); } - :host([quiet]:not([disabled]):hover) #textfield .buttons { - background-color: initial; - } - - :host([quiet][focused]:hover) #textfield, - :host([quiet]:hover) #textfield:focus { + :host([quiet][focused]:not([disabled]):hover) #textfield, + :host([quiet]:not([disabled]):hover) #textfield:focus { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover) @@ -505,7 +486,7 @@ governing permissions and limitations under the License. :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover) @@ -514,35 +495,109 @@ governing permissions and limitations under the License. } } -@media (forced-colors: active) { - :host { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-button-background-color-default: Canvas; - --highcontrast-stepper-button-background-color-hover: Canvas; - --highcontrast-stepper-button-background-color-focus: Canvas; - --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; - --highcontrast-stepper-focus-indicator-color: Highlight; - } +#textfield { + --spectrum-stepper-width: var( + --mod-stepper-width, + calc( + var(--spectrum-stepper-height) * + var( + --mod-stepper-min-width-multiplier, + var(--spectrum-text-field-minimum-width-multiplier) + ) + var(--spectrum-stepper-button-width) + + var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ) * 2 + ) + ); + inline-size: var(--spectrum-stepper-width); + block-size: var(--spectrum-stepper-height); + border-radius: var(--spectrum-stepper-border-radius); + flex-flow: row; + display: inline-flex; + position: relative; +} - :host([invalid]) #textfield { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - --highcontrast-infield-button-border-color: Highlight; - } +#textfield:before { + content: ''; +} - :host([disabled]) #textfield { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-infield-button-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - } +.input { + border-inline-end-width: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.buttons { + box-sizing: border-box; + block-size: var(--spectrum-stepper-height); + inline-size: var(--spectrum-stepper-button-width); + border-color: var(--spectrum-stepper-border-color); + border-style: var( + --mod-stepper-buttons-border-style, + var(--spectrum-stepper-buttons-border-style) + ); + border-width: var( + --highcontrast-stepper-buttons-border-width, + var( + --mod-stepper-buttons-border-width, + var(--spectrum-stepper-buttons-border-width) + ) + ); + background-color: var( + --mod-stepper-buttons-background-color, + var(--spectrum-stepper-buttons-background-color) + ); + transition: border-color var(--spectrum-stepper-animation-duration) + ease-in-out; + border-inline-start-width: 0; + flex-direction: column; + justify-content: center; + display: flex; +} + +.buttons, +#textfield.hide-stepper .input { + border-start-end-radius: var(--spectrum-stepper-border-radius); + border-end-end-radius: var(--spectrum-stepper-border-radius); +} + +#textfield.hide-stepper .input { + border-inline-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); +} + +:host([quiet]) #textfield { + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; +} + +:host([quiet]) .hide-stepper .input { + border-inline-end-width: 0; + border-end-end-radius: 0; +} + +:host([quiet]):after { + visibility: hidden; + visibility: var(--mod-stepper-focus-indicator-visibility, hidden); + content: ''; + inline-size: 100%; + block-size: var(--spectrum-stepper-focus-indicator-width); + background-color: var(--spectrum-stepper-focus-indicator-color); + position: absolute; + inset-block-end: calc( + ( + var(--spectrum-stepper-focus-indicator-gap) + + var(--spectrum-stepper-focus-indicator-width) + ) * -1 + ); + inset-inline-start: 0; +} + +:host([quiet][keyboard-focused]:not([disabled])) { + outline: none; } diff --git a/packages/search/package.json b/packages/search/package.json index deb5feb80be..57ff395c8c2 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/textfield": "^1.2.0" }, "devDependencies": { - "@spectrum-css/search": "8.0.0-s2-foundations.18" + "@spectrum-css/search": "8.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index df71cbc7e2f..2b5c9e586b5 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -27,45 +27,9 @@ governing permissions and limitations under the License. --spectrum-search-border-color-key-focus: var( --system-search-border-color-key-focus ); - --spectrum-search-inline-size: var(--system-search-inline-size); - --spectrum-search-min-inline-multiplier: var( - --system-search-min-inline-multiplier - ); - --spectrum-search-to-help-text: var(--system-search-to-help-text); - --spectrum-search-top-to-text: var(--system-search-top-to-text); - --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); - --spectrum-search-focus-indicator-thickness: var( - --system-search-focus-indicator-thickness - ); - --spectrum-search-focus-indicator-gap: var( - --system-search-focus-indicator-gap - ); - --spectrum-search-focus-indicator-color: var( - --system-search-focus-indicator-color - ); - --spectrum-search-font-family: var(--system-search-font-family); - --spectrum-search-font-weight: var(--system-search-font-weight); - --spectrum-search-font-style: var(--system-search-font-style); - --spectrum-search-line-height: var(--system-search-line-height); - --spectrum-search-color-default: var(--system-search-color-default); - --spectrum-search-color-hover: var(--system-search-color-hover); - --spectrum-search-color-focus: var(--system-search-color-focus); - --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); - --spectrum-search-color-key-focus: var(--system-search-color-key-focus); - --spectrum-search-border-width: var(--system-search-border-width); --spectrum-search-background-color: var(--system-search-background-color); - --spectrum-search-color-disabled: var(--system-search-color-disabled); - --spectrum-search-background-color-disabled: var( - --system-search-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-border-color-disabled - ); --spectrum-search-border-radius: var(--system-search-border-radius); --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); - --spectrum-search-block-size: var(--system-search-block-size); - --spectrum-search-icon-size: var(--system-search-icon-size); - --spectrum-search-text-to-icon: var(--system-search-text-to-icon); } :host([size='m']) #textfield { @@ -73,9 +37,6 @@ governing permissions and limitations under the License. --spectrum-search-edge-to-visual: var( --system-search-size-m-edge-to-visual ); - --spectrum-search-block-size: var(--system-search-size-m-block-size); - --spectrum-search-icon-size: var(--system-search-size-m-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); } :host([size='s']) #textfield { @@ -83,9 +44,6 @@ governing permissions and limitations under the License. --spectrum-search-edge-to-visual: var( --system-search-size-s-edge-to-visual ); - --spectrum-search-block-size: var(--system-search-size-s-block-size); - --spectrum-search-icon-size: var(--system-search-size-s-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); } :host([size='l']) #textfield { @@ -93,9 +51,6 @@ governing permissions and limitations under the License. --spectrum-search-edge-to-visual: var( --system-search-size-l-edge-to-visual ); - --spectrum-search-block-size: var(--system-search-size-l-block-size); - --spectrum-search-icon-size: var(--system-search-size-l-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); } :host([size='xl']) #textfield { @@ -103,21 +58,4 @@ governing permissions and limitations under the License. --spectrum-search-edge-to-visual: var( --system-search-size-xl-edge-to-visual ); - --spectrum-search-block-size: var(--system-search-size-xl-block-size); - --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); -} - -:host([quiet]) { - --spectrum-search-background-color: var( - --system-search-quiet-background-color - ); - --spectrum-search-background-color-disabled: var( - --system-search-quiet-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-quiet-border-color-disabled - ); - --spectrum-search-border-radius: var(--system-search-quiet-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); } diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 964aed202b1..7c6e4deee6c 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -11,27 +11,51 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -@media (forced-colors: active) { - #textfield #textfield, - #textfield #textfield .input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } - - #textfield #button .spectrum-ClearButton-fill { - forced-color-adjust: none; - background-color: initial; - } -} - #textfield { + --spectrum-search-inline-size: var(--spectrum-field-width); + --spectrum-search-block-size: var(--spectrum-component-height-100); --spectrum-search-button-inline-size: var(--spectrum-search-block-size); --spectrum-search-min-inline-size: calc( - var(--spectrum-search-min-inline-multiplier) * + var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size) ); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); + --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-search-font-weight: var(--spectrum-regular-font-weight); + --spectrum-search-font-style: var(--spectrum-default-font-style); + --spectrum-search-line-height: var(--spectrum-line-height-100); + --spectrum-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); + --spectrum-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-search-border-width: var(--spectrum-border-width-100); + --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); --mod-textfield-font-family: var( --mod-search-font-family, var(--spectrum-search-font-family) @@ -135,6 +159,39 @@ governing permissions and limitations under the License. ); } +:host([size='s']) { + --spectrum-search-block-size: var(--spectrum-component-height-75); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); +} + +:host([size='l']) { + --spectrum-search-block-size: var(--spectrum-component-height-200); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); +} + +:host([size='xl']) { + --spectrum-search-block-size: var(--spectrum-component-height-300); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); +} + +@media (forced-colors: active) { + #textfield #textfield, + #textfield #textfield .input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; + } + + #textfield #button .spectrum-ClearButton-fill { + forced-color-adjust: none; + background-color: initial; + } +} + #button { position: absolute; inset-block-start: 0; @@ -259,31 +316,23 @@ governing permissions and limitations under the License. var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) + padding-inline-end: var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) ); } :host([quiet]) { - --spectrum-search-quiet-button-offset: var( - --mod-search-quiet-button-offset, - calc( - var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / - 2 - ) + --spectrum-search-background-color: transparent; + --spectrum-search-background-color-disabled: transparent; + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-border-color ); + --mod-search-border-radius: 0; + --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); } -:host([quiet]) #button .spectrum-ClearButton-icon { - transform: translateX(var(--spectrum-search-quiet-button-offset)); -} - -:host([quiet]) #textfield .input { +:host([quiet]) .input { border-radius: var( --mod-search-border-radius, var(--spectrum-search-border-radius) @@ -297,10 +346,8 @@ governing permissions and limitations under the License. var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - var(--spectrum-search-quiet-button-offset) + padding-inline-end: var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) ); } diff --git a/packages/textfield/package.json b/packages/textfield/package.json index a2e192355ed..b001834e995 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/shared": "^1.2.0" }, "devDependencies": { - "@spectrum-css/textfield": "8.0.0-s2-foundations.16" + "@spectrum-css/textfield": "8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 88a6b3d23c8..44ac8782921 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -11,8 +11,339 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#textfield { +:host { --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); + --spectrum-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-textfield-width: 240px; + --spectrum-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --spectrum-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --spectrum-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --spectrum-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-textfield-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --spectrum-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --spectrum-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --spectrum-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); + --spectrum-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-icon-color-valid: var( + --spectrum-positive-visual-color + ); + --spectrum-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --spectrum-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); +} + +#textfield, +:host { + --spectrum-textfield-height: var(--spectrum-component-height-100); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-75 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); +} + +:host([size='s']) { + --spectrum-textfield-height: var(--spectrum-component-height-75); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-75 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); +} + +:host([size='l']) { + --spectrum-textfield-height: var(--spectrum-component-height-200); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-100 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); +} + +:host([size='xl']) { + --spectrum-textfield-height: var(--spectrum-component-height-300); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-200 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); +} + +#textfield { text-overflow: ellipsis; inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); grid-template-rows: auto auto auto; @@ -98,11 +429,8 @@ governing permissions and limitations under the License. :host([valid]) #textfield .icon { color: var( - --highcontrast-textfield-icon-color-valid, - var( - --mod-textfield-icon-color-valid, - var(--spectrum-textfield-icon-color-valid) - ) + --mod-textfield-icon-color-valid, + var(--spectrum-textfield-icon-color-valid) ); inset-block-start: var( --mod-textfield-icon-spacing-block-valid, @@ -128,11 +456,8 @@ governing permissions and limitations under the License. var(--spectrum-textfield-icon-size-invalid) ); color: var( - --highcontrast-textfield-icon-color-invalid, - var( - --mod-textfield-icon-color-invalid, - var(--spectrum-textfield-icon-color-invalid) - ) + --mod-textfield-icon-color-invalid, + var(--spectrum-textfield-icon-color-invalid) ); inset-block-start: var( --mod-textfield-icon-spacing-block-invalid, @@ -284,6 +609,11 @@ governing permissions and limitations under the License. --mod-textfield-background-color, var(--spectrum-textfield-background-color) ); + border-width: var( + --mod-textfield-border-width, + var(--spectrum-textfield-border-width) + ); + border-style: solid; border-color: var( --highcontrast-textfield-border-color, var( @@ -291,11 +621,6 @@ governing permissions and limitations under the License. var(--spectrum-textfield-border-color) ) ); - border-style: solid; - border-width: var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ); border-radius: var( --mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius) @@ -397,11 +722,8 @@ governing permissions and limitations under the License. .input:focus, .input:focus::placeholder { color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) + --mod-textfield-text-color-focus, + var(--spectrum-textfield-text-color-focus) ); } @@ -650,11 +972,8 @@ governing permissions and limitations under the License. :host([focused]) .input:hover, .input:focus:hover { border-color: var( - --highcontrast-textfield-border-color-focus-hover, - var( - --mod-textfield-border-color-focus-hover, - var(--spectrum-textfield-border-color-focus-hover) - ) + --mod-textfield-border-color-focus-hover, + var(--spectrum-textfield-border-color-focus-hover) ); } @@ -663,11 +982,8 @@ governing permissions and limitations under the License. .input:focus:hover, .input:focus:hover::placeholder { color: var( - --highcontrast-textfield-text-color-focus-hover, - var( - --mod-textfield-text-color-focus-hover, - var(--spectrum-textfield-text-color-focus-hover) - ) + --mod-textfield-text-color-focus-hover, + var(--spectrum-textfield-text-color-focus-hover) ); } @@ -686,11 +1002,8 @@ governing permissions and limitations under the License. :host([invalid][focused]) .input:hover, :host([invalid]:focus) .input:hover { border-color: var( - --highcontrast-textfield-border-color-invalid-focus-hover, - var( - --mod-textfield-border-color-invalid-focus-hover, - var(--spectrum-textfield-border-color-invalid-focus-hover) - ) + --mod-textfield-border-color-invalid-focus-hover, + var(--spectrum-textfield-border-color-invalid-focus-hover) ); } @@ -826,6 +1139,7 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { + --highcontrast-textfield-border-color: CanvasText; --highcontrast-textfield-border-color-hover: Highlight; --highcontrast-textfield-border-color-focus: Highlight; --highcontrast-textfield-border-color-keyboard-focus: CanvasText; diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css index 76088c0399e..1b2445500d2 100644 --- a/packages/textfield/src/textfield-overrides.css +++ b/packages/textfield/src/textfield-overrides.css @@ -26,390 +26,7 @@ governing permissions and limitations under the License. --system-textfield-border-color-keyboard-focus ); --spectrum-textfield-border-width: var(--system-textfield-border-width); - --spectrum-texfield-animation-duration: var( - --system-textfield-texfield-animation-duration - ); - --spectrum-textfield-width: var(--system-textfield-width); - --spectrum-textfield-min-width: var(--system-textfield-min-width); - --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); - --spectrum-textfield-spacing-inline-quiet: var( - --system-textfield-spacing-inline-quiet - ); - --spectrum-textfield-spacing-block-start: var( - --system-textfield-spacing-block-start - ); - --spectrum-textfield-spacing-block-end: var( - --system-textfield-spacing-block-end - ); - --spectrum-textfield-spacing-block-quiet: var( - --system-textfield-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-block: var( - --system-textfield-label-spacing-block - ); - --spectrum-textfield-helptext-spacing-block: var( - --system-textfield-helptext-spacing-block - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( - --system-textfield-icon-spacing-inline-end-quiet-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( - --system-textfield-icon-spacing-inline-end-quiet-valid - ); - --spectrum-textfield-font-family: var(--system-textfield-font-family); - --spectrum-textfield-font-weight: var(--system-textfield-font-weight); - --spectrum-textfield-character-count-font-family: var( - --system-textfield-character-count-font-family - ); - --spectrum-textfield-character-count-font-weight: var( - --system-textfield-character-count-font-weight - ); - --spectrum-textfield-character-count-spacing-inline: var( - --system-textfield-character-count-spacing-inline - ); - --spectrum-textfield-character-count-spacing-inline-side: var( - --system-textfield-character-count-spacing-inline-side - ); - --spectrum-textfield-focus-indicator-width: var( - --system-textfield-focus-indicator-width - ); - --spectrum-textfield-focus-indicator-gap: var( - --system-textfield-focus-indicator-gap - ); --spectrum-textfield-background-color: var( --system-textfield-background-color ); - --spectrum-textfield-text-color-default: var( - --system-textfield-text-color-default - ); - --spectrum-textfield-text-color-hover: var( - --system-textfield-text-color-hover - ); - --spectrum-textfield-text-color-focus: var( - --system-textfield-text-color-focus - ); - --spectrum-textfield-text-color-focus-hover: var( - --system-textfield-text-color-focus-hover - ); - --spectrum-textfield-text-color-keyboard-focus: var( - --system-textfield-text-color-keyboard-focus - ); - --spectrum-textfield-text-color-readonly: var( - --system-textfield-text-color-readonly - ); - --spectrum-textfield-background-color-disabled: var( - --system-textfield-background-color-disabled - ); - --spectrum-textfield-border-color-disabled: var( - --system-textfield-border-color-disabled - ); - --spectrum-textfield-text-color-disabled: var( - --system-textfield-text-color-disabled - ); - --spectrum-textfield-border-color-invalid-default: var( - --system-textfield-border-color-invalid-default - ); - --spectrum-textfield-border-color-invalid-hover: var( - --system-textfield-border-color-invalid-hover - ); - --spectrum-textfield-border-color-invalid-focus: var( - --system-textfield-border-color-invalid-focus - ); - --spectrum-textfield-border-color-invalid-focus-hover: var( - --system-textfield-border-color-invalid-focus-hover - ); - --spectrum-textfield-border-color-invalid-keyboard-focus: var( - --system-textfield-border-color-invalid-keyboard-focus - ); - --spectrum-textfield-icon-color-invalid: var( - --system-textfield-icon-color-invalid - ); - --spectrum-textfield-text-color-invalid: var( - --system-textfield-text-color-invalid - ); - --spectrum-textfield-text-color-valid: var( - --system-textfield-text-color-valid - ); - --spectrum-textfield-icon-color-valid: var( - --system-textfield-icon-color-valid - ); - --spectrum-textfield-focus-indicator-color: var( - --system-textfield-focus-indicator-color - ); - --spectrum-text-area-min-inline-size: var( - --system-textfield-text-area-min-inline-size - ); - --spectrum-text-area-min-block-size: var( - --system-textfield-text-area-min-block-size - ); - --spectrum-textfield-height: var(--system-textfield-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-text-area-min-block-size-quiet - ); -} - -:host([size='s']) { - --spectrum-textfield-height: var(--system-textfield-size-s-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-s-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-s-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-s-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-s-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-s-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-s-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-s-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-s-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-s-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-s-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-s-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-s-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-s-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-s-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-s-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-s-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-s-text-area-min-block-size-quiet - ); -} - -:host { - --spectrum-textfield-height: var(--system-textfield-size-m-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-m-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-m-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-m-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-m-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-m-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-m-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-m-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-m-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-m-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-m-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-m-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-m-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-m-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-m-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-m-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-m-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-m-text-area-min-block-size-quiet - ); -} - -:host([size='l']) { - --spectrum-textfield-height: var(--system-textfield-size-l-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-l-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-l-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-l-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-l-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-l-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-l-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-l-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-l-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-l-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-l-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-l-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-l-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-l-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-l-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-l-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-l-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-l-text-area-min-block-size-quiet - ); -} - -:host([size='xl']) { - --spectrum-textfield-height: var(--system-textfield-size-xl-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-xl-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-xl-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-xl-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-xl-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-xl-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-xl-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-xl-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-xl-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-xl-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-xl-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-xl-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-xl-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-xl-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-xl-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-xl-text-area-min-block-size-quiet - ); } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index a5d0e83adb5..f037c9c3ed0 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -2544,46 +2544,7 @@ --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); --system-search-background-color: var(--spectrum-gray-25); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); --system-search-border-radius: var(--spectrum-corner-radius-100); --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); --system-search-edge-to-visual: var( @@ -2592,42 +2553,18 @@ --system-search-size-m-edge-to-visual: var( --spectrum-component-edge-to-visual-100 ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); --system-search-size-s-edge-to-visual: var( --spectrum-component-edge-to-visual-75 ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); --system-search-size-l-edge-to-visual: var( --spectrum-component-edge-to-visual-200 ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); --system-search-size-xl-edge-to-visual: var( --spectrum-component-edge-to-visual-300 ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); --system-side-nav-focus-ring-size: var( --spectrum-focus-indicator-thickness ); @@ -2962,16 +2899,11 @@ --spectrum-component-bottom-to-text-300 ); --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-default: var(--spectrum-gray-500); --system-stepper-border-color-hover: var(--spectrum-gray-600); --system-stepper-border-color-focus: var(--spectrum-gray-800); --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); --system-stepper-buttons-border-style: none; --system-stepper-buttons-border-width: 0; --system-stepper-buttons-border-color: var(--spectrum-gray-500); @@ -2981,21 +2913,10 @@ --system-stepper-buttons-border-color-keyboard-focus: var( --spectrum-gray-900 ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-100 - ); --system-stepper-border-color-invalid: var( --spectrum-negative-border-color-default ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); --system-stepper-border-color-focus-invalid: var( --spectrum-negative-border-color-focus ); @@ -3005,39 +2926,12 @@ --system-stepper-border-color-keyboard-focus-invalid: var( --spectrum-negative-border-color-key-focus ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); --system-stepper-button-border-width-disabled: var( --spectrum-border-width-100 ); --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-swatch-focus-indicator-border-radius: var( --spectrum-corner-radius-200 @@ -4147,372 +4041,7 @@ --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-25); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: 2px; --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index 803acf671f8..1fccec84954 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -2550,46 +2550,7 @@ --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); --system-search-border-radius: calc( var(--spectrum-component-height-100) / 2 ); @@ -2602,48 +2563,24 @@ --system-search-size-m-edge-to-visual: var( --spectrum-component-pill-edge-to-visual-100 ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); --system-search-size-s-border-radius: calc( var(--spectrum-component-height-75) / 2 ); --system-search-size-s-edge-to-visual: var( --spectrum-component-pill-edge-to-visual-75 ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); --system-search-size-l-border-radius: calc( var(--spectrum-component-height-200) / 2 ); --system-search-size-l-edge-to-visual: var( --spectrum-component-pill-edge-to-visual-200 ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); --system-search-size-xl-border-radius: calc( var(--spectrum-component-height-300) / 2 ); --system-search-size-xl-edge-to-visual: var( --spectrum-component-pill-edge-to-visual-300 ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); --system-side-nav-focus-ring-size: var( --spectrum-focus-indicator-thickness ); @@ -2978,16 +2915,11 @@ --spectrum-component-bottom-to-text-300 ); --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-default: var(--spectrum-gray-400); --system-stepper-border-color-hover: var(--spectrum-gray-500); --system-stepper-border-color-focus: var(--spectrum-gray-800); --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); --system-stepper-buttons-border-style: solid; --system-stepper-buttons-border-width: var(--spectrum-border-width-200); --system-stepper-buttons-border-color: transparent; @@ -2995,55 +2927,17 @@ --system-stepper-buttons-border-color-hover: transparent; --system-stepper-buttons-border-color-focus: transparent; --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); --system-stepper-button-border-width: 0; - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-300 - ); --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-hover-invalid: transparent; --system-stepper-border-color-focus-invalid: transparent; --system-stepper-border-color-focus-hover-invalid: transparent; --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); --system-stepper-button-border-width-disabled: 0; --system-stepper-buttons-background-color-disabled: var( --spectrum-disabled-background-color ); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-swatch-focus-indicator-border-radius: var( --spectrum-corner-radius-200 @@ -4151,372 +4045,7 @@ --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-200); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-background-color-default diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index b6c05cb3e5a..ec685f4cd9c 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -2550,46 +2550,7 @@ --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); --system-search-border-radius: var(--spectrum-corner-radius-100); --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); --system-search-edge-to-visual: var( @@ -2598,42 +2559,18 @@ --system-search-size-m-edge-to-visual: var( --spectrum-component-edge-to-visual-100 ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); --system-search-size-s-edge-to-visual: var( --spectrum-component-edge-to-visual-75 ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); --system-search-size-l-edge-to-visual: var( --spectrum-component-edge-to-visual-200 ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); --system-search-size-xl-edge-to-visual: var( --spectrum-component-edge-to-visual-300 ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); --system-side-nav-focus-ring-size: var( --spectrum-focus-indicator-thickness ); @@ -2968,16 +2905,11 @@ --spectrum-component-bottom-to-text-300 ); --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-default: var(--spectrum-gray-500); --system-stepper-border-color-hover: var(--spectrum-gray-600); --system-stepper-border-color-focus: var(--spectrum-gray-800); --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); --system-stepper-buttons-border-style: none; --system-stepper-buttons-border-width: 0; --system-stepper-buttons-border-color: var(--spectrum-gray-500); @@ -2987,21 +2919,10 @@ --system-stepper-buttons-border-color-keyboard-focus: var( --spectrum-gray-900 ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 - ); --system-stepper-border-color-invalid: var( --spectrum-negative-border-color-default ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); --system-stepper-border-color-focus-invalid: var( --spectrum-negative-border-color-focus ); @@ -3011,41 +2932,14 @@ --system-stepper-border-color-keyboard-focus-invalid: var( --spectrum-negative-border-color-key-focus ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); --system-stepper-button-border-width-disabled: var( --spectrum-border-width-100 ); --system-stepper-buttons-background-color-disabled: var( --spectrum-gray-100 ); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-swatch-focus-indicator-border-radius: var( --spectrum-corner-radius-200 @@ -4155,372 +4049,7 @@ --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default diff --git a/yarn.lock b/yarn.lock index c028ae4a2f7..f54b1977071 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7950,15 +7950,15 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/search@npm:8.0.0-s2-foundations.18": - version: 8.0.0-s2-foundations.18 - resolution: "@spectrum-css/search@npm:8.0.0-s2-foundations.18" +"@spectrum-css/search@npm:8.0.0-s2-foundations.19": + version: 8.0.0-s2-foundations.19 + resolution: "@spectrum-css/search@npm:8.0.0-s2-foundations.19" peerDependencies: "@spectrum-css/clearbutton": ">=6" "@spectrum-css/icon": ">=7" "@spectrum-css/textfield": ">=7" "@spectrum-css/tokens": ">=14" - checksum: 10c0/d2c8003c1b93df6d8f8308d87bbbe71937b569f9e500dd0ffb94435592482d602b46acaae4f460d3fd2cfe7c4e4761f3cd04d46e97e7c9e91cc77ceef5a5b9e8 + checksum: 10c0/8ee475d3978032a5c66e46eee175bbc80f6b376bcab4fa7abfc63d6b30b392245d949db7f89be028463d20a00ebe5346d951c1ddc6a9e4858a7406841e8ecdfd languageName: node linkType: hard @@ -8003,9 +8003,9 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/stepper@npm:7.0.0-s2-foundations.18": - version: 7.0.0-s2-foundations.18 - resolution: "@spectrum-css/stepper@npm:7.0.0-s2-foundations.18" +"@spectrum-css/stepper@npm:7.0.0-s2-foundations.19": + version: 7.0.0-s2-foundations.19 + resolution: "@spectrum-css/stepper@npm:7.0.0-s2-foundations.19" peerDependencies: "@spectrum-css/actionbutton": ">=6" "@spectrum-css/icon": ">=7" @@ -8015,7 +8015,7 @@ __metadata: peerDependenciesMeta: "@spectrum-css/infieldbutton": optional: true - checksum: 10c0/39e96fed038c89ecb2536a9a835af1b0094c2e40b005b0f46f4446b91bc9d5ce295ab4c3c455d511825d3005ee9d42b7f1b6c5cc3e98f050dcf461b2b22df651 + checksum: 10c0/b1c1eabd00cca8121187d68dfdd155a84b52d3fb6305356a06b2ac8234811587366dad6e1a4b4a20301b02b98dc75c1e11dde4cd547d2fd8928fe1b1e5f5e1c2 languageName: node linkType: hard @@ -8110,16 +8110,16 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/textfield@npm:8.0.0-s2-foundations.16": - version: 8.0.0-s2-foundations.16 - resolution: "@spectrum-css/textfield@npm:8.0.0-s2-foundations.16" +"@spectrum-css/textfield@npm:8.0.0-s2-foundations.17": + version: 8.0.0-s2-foundations.17 + resolution: "@spectrum-css/textfield@npm:8.0.0-s2-foundations.17" peerDependencies: "@spectrum-css/helptext": ">=5" "@spectrum-css/tokens": ">=14" peerDependenciesMeta: "@spectrum-css/helptext": optional: true - checksum: 10c0/a7e80c063497780af470fc6b299a285140c358f84cd15b1b1da186b80b25dbbab5ad6c2dd8e862c79b5ec675c614284ac40ab6fd0c2df6fb5d0e71bf17fedd8c + checksum: 10c0/2c5db59e6a645671897cdb72937c4fde7645b16e9f6812d21953bd90b8ef5b6f46099e8ffd8614cdfcd340a548930e4d0ebf02f4ca6c869c270d2652efeda00f languageName: node linkType: hard @@ -8912,7 +8912,7 @@ __metadata: dependencies: "@formatjs/intl-numberformat": "npm:^8.3.5" "@internationalized/number": "npm:^3.6.0" - "@spectrum-css/stepper": "npm:7.0.0-s2-foundations.18" + "@spectrum-css/stepper": "npm:7.0.0-s2-foundations.19" "@spectrum-web-components/base": "npm:^1.2.0" "@spectrum-web-components/icon": "npm:^1.2.0" "@spectrum-web-components/icons-ui": "npm:^1.2.0" From b38f57d7988104ef8342ba38fdf71938b6aa39f8 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 12 Feb 2025 15:25:30 +0530 Subject: [PATCH 2/9] chore: updated textfield sizes from config --- packages/textfield/src/spectrum-config.js | 42 +++++++++++++++++++ packages/textfield/src/spectrum-textfield.css | 6 +-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js index f856845db03..938929cc71a 100644 --- a/packages/textfield/src/spectrum-config.js +++ b/packages/textfield/src/spectrum-config.js @@ -45,6 +45,48 @@ export default { }, // Default to `size='m'` without needing the attribute converter.classToHost('spectrum-Textfield--sizeM'), + { + find: [ + builder.class('spectrum-Textfield--sizeS'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 's'), + } + + ], + }, + { + find: [ + builder.class('spectrum-Textfield--sizeL'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 'l'), + } + + ], + }, + { + find: [ + builder.class('spectrum-Textfield--sizeXL'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 'xl'), + } + + ], + }, ...converter.enumerateAttributes( [ ['spectrum-Textfield--sizeS', 's'], diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 44ac8782921..c4b7e0d4905 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -184,7 +184,7 @@ governing permissions and limitations under the License. ); } -:host([size='s']) { +:host([size='s']) #textfield { --spectrum-textfield-height: var(--spectrum-component-height-75); --spectrum-textfield-label-spacing-block-quiet: var( --spectrum-field-label-to-component-quiet-small @@ -237,7 +237,7 @@ governing permissions and limitations under the License. ); } -:host([size='l']) { +:host([size='l']) #textfield { --spectrum-textfield-height: var(--spectrum-component-height-200); --spectrum-textfield-label-spacing-block-quiet: var( --spectrum-field-label-to-component-quiet-large @@ -290,7 +290,7 @@ governing permissions and limitations under the License. ); } -:host([size='xl']) { +:host([size='xl']) #textfield { --spectrum-textfield-height: var(--spectrum-component-height-300); --spectrum-textfield-label-spacing-block-quiet: var( --spectrum-field-label-to-component-quiet-extra-large From a2577fd854c7ad62978e6bb2488e581289b557db Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 12 Feb 2025 15:25:30 +0530 Subject: [PATCH 3/9] chore: cleaned up duplicate size css --- packages/number-field/src/number-field.css | 37 ---------------------- 1 file changed, 37 deletions(-) diff --git a/packages/number-field/src/number-field.css b/packages/number-field/src/number-field.css index 3c8404d817a..26309d50f64 100644 --- a/packages/number-field/src/number-field.css +++ b/packages/number-field/src/number-field.css @@ -13,43 +13,6 @@ governing permissions and limitations under the License. @import url('./spectrum-number-field.css'); @import url('./number-field-overrides.css'); -:host { - inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); - - --swc-number-field-width: calc( - var(--mod-stepper-height, var(--spectrum-stepper-height)) * - var( - --mod-stepper-min-width-multiplier, - var(--spectrum-text-field-minimum-width-multiplier) - ) + - var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ) + - var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ) * 2 - ); - --mod-infield-button-border-width: var(--unset-value-resets-inheritance); - --spectrum-stepper-width: var(--swc-number-field-width); -} - -:host([size='s']) { - --spectrum-stepper-width: calc(var(--swc-number-field-width) / 5 * 4); -} - -:host([size='l']) { - --spectrum-stepper-width: calc(var(--swc-number-field-width) * 1.25); -} - -:host([size='xl']) { - --spectrum-stepper-width: calc(var(--swc-number-field-width) * 1.25 * 1.25); -} - -#textfield { - inline-size: 100%; -} .input { font-variant-numeric: tabular-nums; From 512955ccee6e07b20390282cf4bdbde910277e31 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 14 Feb 2025 15:26:39 +0530 Subject: [PATCH 4/9] chore: added specificity in search css --- packages/search/src/search-overrides.css | 6 ++-- packages/search/src/spectrum-config.js | 42 ++++++++++++++++++++++++ packages/search/src/spectrum-search.css | 6 ++-- 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index 2b5c9e586b5..c78638142ec 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -39,21 +39,21 @@ governing permissions and limitations under the License. ); } -:host([size='s']) #textfield { +:host([size='s']) #textfield#textfield { --spectrum-search-border-radius: var(--system-search-size-s-border-radius); --spectrum-search-edge-to-visual: var( --system-search-size-s-edge-to-visual ); } -:host([size='l']) #textfield { +:host([size='l']) #textfield#textfield { --spectrum-search-border-radius: var(--system-search-size-l-border-radius); --spectrum-search-edge-to-visual: var( --system-search-size-l-edge-to-visual ); } -:host([size='xl']) #textfield { +:host([size='xl']) #textfield#textfield { --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); --spectrum-search-edge-to-visual: var( --system-search-size-xl-edge-to-visual diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js index 1fd00aeea3d..ed248b42f6a 100644 --- a/packages/search/src/spectrum-config.js +++ b/packages/search/src/spectrum-config.js @@ -47,6 +47,48 @@ const config = { ], 'size' ), + { + find: [ + builder.class('spectrum-Search--sizeS'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 's'), + } + + ], + }, + { + find: [ + builder.class('spectrum-Search--sizeL'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 'l'), + } + + ], + }, + { + find: [ + builder.class('spectrum-Search--sizeXL'), + ], + replace: [ + { + replace: builder.id('textfield'), + }, + { + replace: builder.attribute('size', 'xl'), + } + + ], + }, { find: { type: 'pseudo-class', diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 7c6e4deee6c..a11058afb8b 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -159,19 +159,19 @@ governing permissions and limitations under the License. ); } -:host([size='s']) { +:host([size='s']) #textfield { --spectrum-search-block-size: var(--spectrum-component-height-75); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); } -:host([size='l']) { +:host([size='l']) #textfield { --spectrum-search-block-size: var(--spectrum-component-height-200); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); } -:host([size='xl']) { +:host([size='xl']) #textfield { --spectrum-search-block-size: var(--spectrum-component-height-300); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); From 5e4ba3f27ed8424899d36b1184a47ce2727f4d25 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 14 Feb 2025 15:32:36 +0530 Subject: [PATCH 5/9] chore: updated yarn lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index f54b1977071..a1d44819226 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9040,7 +9040,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/search@workspace:packages/search" dependencies: - "@spectrum-css/search": "npm:8.0.0-s2-foundations.18" + "@spectrum-css/search": "npm:8.0.0-s2-foundations.19" "@spectrum-web-components/base": "npm:^1.2.0" "@spectrum-web-components/button": "npm:^1.2.0" "@spectrum-web-components/icon": "npm:^1.2.0" @@ -9204,7 +9204,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/textfield@workspace:packages/textfield" dependencies: - "@spectrum-css/textfield": "npm:8.0.0-s2-foundations.16" + "@spectrum-css/textfield": "npm:8.0.0-s2-foundations.17" "@spectrum-web-components/base": "npm:^1.2.0" "@spectrum-web-components/help-text": "npm:^1.2.0" "@spectrum-web-components/icon": "npm:^1.2.0" From 38e3c6188357ff7e00916f1d551253d9c0895f6f Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Fri, 14 Feb 2025 19:01:20 +0530 Subject: [PATCH 6/9] chore: updated config to exclude overrides for size s,l,xl --- packages/search/src/search-overrides.css | 21 -------------- packages/search/src/spectrum-config.js | 36 ++++++++++++++---------- 2 files changed, 21 insertions(+), 36 deletions(-) diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index c78638142ec..793246bcd7e 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -38,24 +38,3 @@ governing permissions and limitations under the License. --system-search-size-m-edge-to-visual ); } - -:host([size='s']) #textfield#textfield { - --spectrum-search-border-radius: var(--system-search-size-s-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-s-edge-to-visual - ); -} - -:host([size='l']) #textfield#textfield { - --spectrum-search-border-radius: var(--system-search-size-l-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-l-edge-to-visual - ); -} - -:host([size='xl']) #textfield#textfield { - --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-xl-edge-to-visual - ); -} diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js index ed248b42f6a..3be3e1e43ab 100644 --- a/packages/search/src/spectrum-config.js +++ b/packages/search/src/spectrum-config.js @@ -28,6 +28,20 @@ const config = { outPackage: 'search', fileName: 'search', hoistCustomPropertiesFrom: 'spectrum-Search', + excludeByWholeSelector: [ + [ + builder.class('spectrum-Search'), + builder.class('spectrum-Search--sizeS'), + ], + [ + builder.class('spectrum-Search'), + builder.class('spectrum-Search--sizeXL'), + ], + [ + builder.class('spectrum-Search'), + builder.class('spectrum-Search--sizeL'), + ], + ], components: [ converter.classToId('spectrum-Search', 'textfield'), converter.classToClass('spectrum-Search-input', 'input'), @@ -48,47 +62,39 @@ const config = { 'size' ), { - find: [ - builder.class('spectrum-Search--sizeS'), - ], + find: [builder.class('spectrum-Search--sizeS')], replace: [ { replace: builder.id('textfield'), }, { replace: builder.attribute('size', 's'), - } - + }, ], }, { - find: [ - builder.class('spectrum-Search--sizeL'), - ], + find: [builder.class('spectrum-Search--sizeL')], replace: [ { replace: builder.id('textfield'), }, { replace: builder.attribute('size', 'l'), - } - + }, ], }, { - find: [ - builder.class('spectrum-Search--sizeXL'), - ], + find: [builder.class('spectrum-Search--sizeXL')], replace: [ { replace: builder.id('textfield'), }, { replace: builder.attribute('size', 'xl'), - } - + }, ], }, + { find: { type: 'pseudo-class', From 487378532fa40eb26a08a9bcb8fe22810b65d761 Mon Sep 17 00:00:00 2001 From: Casey Eickhoff Date: Fri, 21 Feb 2025 13:03:15 -0700 Subject: [PATCH 7/9] chore: empty to force yarn lock to update From a9a30ea08c3785c55c39d0525ee2a9fa14878118 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Mon, 3 Mar 2025 17:31:06 +0100 Subject: [PATCH 8/9] chore: hard-code border radius and search-edge-to-visual in search --- packages/search/src/search.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/search/src/search.css b/packages/search/src/search.css index b8d93fb6cef..679ff50d1f6 100644 --- a/packages/search/src/search.css +++ b/packages/search/src/search.css @@ -23,6 +23,31 @@ input::-webkit-search-cancel-button { display: none; } +/** + * Hardcoded values for the multiple search field sizes. + * Feel free to remove this if you find a better way to handle this on the spectrum-config. + **/ +:host([size='s']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-s-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-s-edge-to-visual + ); +} + +:host([size='l']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-l-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-l-edge-to-visual + ); +} + +:host([size='xl']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-xl-edge-to-visual + ); +} + /** * While overriding the need for `size="m"` in SWC, these values correct the * cascade when attempting to delivery the Clear Button within the Search UI. From 9712be1c3ab28857e75442ba3b84b07178851a41 Mon Sep 17 00:00:00 2001 From: Ruben Carvalho Date: Tue, 4 Mar 2025 17:26:48 +0100 Subject: [PATCH 9/9] chore: update golden images hash --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 08f8e60b60b..2aaa26a76ed 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: 1bec361b0e6920433b2747ede3d303090897df77 + default: b2610a034828e05bd1f5db7912c4fdad088ae725 wireit_cache_name: type: string default: wireit