diff --git a/.circleci/config.yml b/.circleci/config.yml index 144e90ba2c..15dfc00349 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: a1ca10710680ff347ed0a873d376e4f821a6d493 + default: b2ba0ee6dcde27c136be2afb14a68bec20c6d925 wireit_cache_name: type: string default: wireit diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts index 9d093554e5..d778778cf7 100644 --- a/packages/color-wheel/test/color-wheel.test.ts +++ b/packages/color-wheel/test/color-wheel.test.ts @@ -594,11 +594,9 @@ describe('ColorWheel', () => { expect(el.color).to.equal(hsva); }); it('should flip orientation with dir="rtl"', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 95be22a11e..928de7c1ba 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/textfield": "1.1.2" }, "devDependencies": { - "@spectrum-css/combobox": "4.0.0-s2-foundations.18" + "@spectrum-css/combobox": "4.0.0-s2-foundations.21" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css index 55073103e8..b6ebf775e3 100644 --- a/packages/combobox/src/combobox-overrides.css +++ b/packages/combobox/src/combobox-overrides.css @@ -27,225 +27,7 @@ governing permissions and limitations under the License. --spectrum-combobox-border-color-key-focus: var( --system-combobox-border-color-key-focus ); - --spectrum-combobox-inline-size: var(--system-combobox-inline-size); - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-minimum-width-multiplier - ); - --spectrum-combobox-focus-indicator-thickness: var( - --system-combobox-focus-indicator-thickness - ); - --spectrum-combobox-focus-indicator-gap: var( - --system-combobox-focus-indicator-gap - ); - --spectrum-combobox-focus-indicator-color: var( - --system-combobox-focus-indicator-color - ); - --spectrum-combobox-border-radius: var(--system-combobox-border-radius); - --spectrum-combobox-border-width: var(--system-combobox-border-width); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-spacing-label-to - ); - --spectrum-combobox-font-style: var(--system-combobox-font-style); - --spectrum-combobox-line-height: var(--system-combobox-line-height); - --spectrum-combobox-border-color-invalid-default: var( - --system-combobox-border-color-invalid-default - ); - --spectrum-combobox-border-color-invalid-hover: var( - --system-combobox-border-color-invalid-hover - ); - --spectrum-combobox-border-color-invalid-focus: var( - --system-combobox-border-color-invalid-focus - ); - --spectrum-combobox-border-color-invalid-focus-hover: var( - --system-combobox-border-color-invalid-focus-hover - ); - --spectrum-combobox-border-color-invalid-key-focus: var( - --system-combobox-border-color-invalid-key-focus - ); - --spectrum-combobox-block-size: var(--system-combobox-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-spacing-inline-end-edge-to-text - ); -} - -:host([size='s']) { - --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-s-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-s-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-s-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-s-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-s-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-s-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-s-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-s-spacing-inline-end-edge-to-text - ); -} - -:host { - --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-m-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-m-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-m-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-m-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-m-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-m-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-m-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-m-spacing-inline-end-edge-to-text - ); -} - -:host([size='l']) { - --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-l-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-l-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-l-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-l-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-l-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-l-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-l-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-l-spacing-inline-end-edge-to-text - ); -} - -:host([size='xl']) { - --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-xl-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-xl-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-xl-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-xl-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-xl-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-xl-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-end-edge-to-text - ); -} - -:host([quiet]) { - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-quiet-minimum-width-multiplier - ); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-quiet-spacing-inline-icon-to-button - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-quiet-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-spacing-label-to - ); -} - -:host([quiet][size='s']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-s-spacing-label-to - ); -} - -:host([quiet]) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-m-spacing-label-to - ); -} - -:host([quiet][size='l']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-l-spacing-label-to - ); -} - -:host([quiet][size='xl']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-xl-spacing-label-to + --spectrum-combobox-background-color-disabled: var( + --system-combobox-background-color-disabled ); } diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index 7c2285c886..68f412effc 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -11,28 +11,71 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -@media (forced-colors: active) { - :host { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { - color: initial; - } -} - :host { - --spectrum-combobox-button-inline-offset: 0px; + --spectrum-combobox-inline-size: var(--spectrum-field-width); + --spectrum-combobox-block-size: var(--spectrum-component-height-100); --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * + var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size) ); --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-combobox-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); + --spectrum-combobox-border-width: var(--spectrum-border-width-100); + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component + ); + --spectrum-combobox-font-style: var(--spectrum-default-font-style); + --spectrum-combobox-line-height: var(--spectrum-line-height-100); + --spectrum-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --spectrum-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); --mod-textfield-focus-indicator-gap: var( --mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap) @@ -49,7 +92,8 @@ governing permissions and limitations under the License. --mod-combobox-background-color-default ); --mod-textfield-background-color-disabled: var( - --mod-combobox-background-color-disabled + --mod-combobox-background-color-disabled, + var(--spectrum-combobox-background-color-disabled) ); --mod-textfield-font-family: var(--mod-combobox-font-family); --mod-textfield-font-weight: var(--mod-combobox-font-weight); @@ -130,6 +174,208 @@ governing permissions and limitations under the License. --mod-picker-button-font-color-disabled: var( --mod-combobox-font-color-disabled ); + --spectrum-combobox-readonly-input-background-color: var( + --spectrum-gray-50 + ); + --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); + --spectrum-combobox-readonly-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-combobox-readonly-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-combobox-readonly-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-combobox-border-color-disabled: var( + --spectrum-disabled-border-color + ); +} + +:host, +:host { + --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); +} + +:host([size='s']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-75); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-combobox-font-size: var(--spectrum-font-size-75); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); +} + +:host([size='l']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-200); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-combobox-font-size: var(--spectrum-font-size-200); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); +} + +:host([size='xl']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-300); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-combobox-font-size: var(--spectrum-font-size-300); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); +} + +:host([quiet]) { + --spectrum-combobox-min-inline-size: calc( + var(--spectrum-combo-box-quiet-minimum-width-multiplier) * + var(--spectrum-combobox-block-size) + ); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-combobox-button-inline-offset: calc( + var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / + 2 + ); + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; +} + +:host([quiet][size='s']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-small + ); +} + +:host([quiet]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-medium + ); +} + +:host([quiet][size='l']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-large + ); +} + +:host([quiet][size='xl']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-extra-large + ); +} + +@media (forced-colors: active) { + :host { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { + color: initial; + } +} + +:host { inline-size: var( --mod-combobox-inline-size, var(--spectrum-combobox-inline-size) @@ -164,6 +410,45 @@ governing permissions and limitations under the License. ); } +:host([keyboard-focused]) + .is-readOnly:not(.spectrum-Combobox--quiet) + #textfield + #input { + outline-offset: var(--mod-textfield-focus-indicator-gap); + outline: var(--mod-textfield-focus-indicator-width) solid; + outline-color: var(--mod-textfield-focus-indicator-color); +} + +:host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + background-color: var(--spectrum-combobox-readonly-input-background-color); + border-color: var(--spectrum-combobox-readonly-input-border-color); +} + +:host([invalid]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + border-color: var( + --highcontrast-textfield-border-color-invalid-default, + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-combobox-readonly-border-color-invalid-default) + ) + ); +} + +:host([disabled]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-combobox-readonly-background-color-disabled) + ); + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-combobox-readonly-text-color-disabled) + ) + ); + border-color: #0000; +} + .progress-circle { position: absolute; inset-block-start: var( @@ -206,7 +491,7 @@ governing permissions and limitations under the License. inset-inline-end: calc( var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) * -1 ); } @@ -379,12 +664,28 @@ governing permissions and limitations under the License. #input:focus, :host([focused]) #textfield #input { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-focus + ); --mod-textfield-background-color: var( --mod-combobox-background-color-focus ); } @media (hover: hover) { + :host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only:hover { + background-color: revert; + } + + :host([disabled]) + .is-readOnly:not(.spectrum-Combobox--quiet) + #input:read-only:hover { + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-combobox-readonly-background-color-disabled) + ); + } + .button:not(:disabled, .is-invalid, [quiet]):hover, :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( @@ -453,6 +754,9 @@ governing permissions and limitations under the License. #input:focus:hover, :host([focused]) #textfield #input:hover { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-focus-hover + ); --mod-textfield-background-color: var( --mod-combobox-background-color-focus-hover ); @@ -460,6 +764,9 @@ governing permissions and limitations under the License. } :host([keyboard-focused]) #textfield #input { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-key-focus + ); --mod-textfield-background-color: var( --mod-combobox-background-color-key-focus ); @@ -480,7 +787,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) - var( --mod-combobox-border-width, @@ -525,21 +832,7 @@ governing permissions and limitations under the License. } :host([quiet]) { - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) - ); - --spectrum-combobox-button-inline-offset: calc( - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / - 2 - ); - --spectrum-combobox-border-radius: 0; - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet - ); + border-radius: 0; } :host([quiet][invalid]) #textfield .icon { @@ -549,6 +842,42 @@ governing permissions and limitations under the License. ); } +:host([quiet]) #textfield.is-readOnly #input:read-only { + border-block-end: var( + --mod-combobox-border-width, + var(--spectrum-combobox-border-width) + ) + solid + var( + --mod-combobox-readonly-input-border-color, + var(--spectrum-combobox-readonly-input-border-color) + ); +} + +:host([quiet][invalid]) #textfield.is-readOnly > #input:read-only { + border-color: var( + --highcontrast-textfield-border-color-invalid-default, + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-combobox-readonly-border-color-invalid-default) + ) + ); +} + +:host([quiet][disabled]) #textfield.is-readOnly #input:read-only { + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-combobox-readonly-text-color-disabled) + ) + ); + border-color: var( + --mod-textfield-border-color-disabled, + var(--spectrum-combobox-border-color-disabled) + ); +} + :host([quiet]) #input { border-block-end-width: var( --mod-combobox-border-width, @@ -580,7 +909,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) ); } @@ -600,7 +929,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) ); } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 3a7ef6066f..a5d0e83adb 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -1589,201 +1589,10 @@ ); --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); + --system-combobox-border-color-focus: var(--spectrum-gray-800); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --system-combobox-border-color-key-focus: var(--spectrum-gray-800); + --system-combobox-background-color-disabled: var(--spectrum-gray-25); --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index a663e2d23d..803acf671f 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -1592,197 +1592,8 @@ --system-combobox-border-color-focus: var(--spectrum-gray-900); --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); --system-combobox-border-color-key-focus: var(--spectrum-gray-900); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color ); --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 6454e43927..b6c05cb3e5 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -1598,197 +1598,8 @@ --system-combobox-border-color-focus: var(--spectrum-gray-500); --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color ); --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); diff --git a/yarn.lock b/yarn.lock index b12058e597..3c4ad066d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7644,9 +7644,9 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/combobox@npm:4.0.0-s2-foundations.18": - version: 4.0.0-s2-foundations.18 - resolution: "@spectrum-css/combobox@npm:4.0.0-s2-foundations.18" +"@spectrum-css/combobox@npm:4.0.0-s2-foundations.21": + version: 4.0.0-s2-foundations.21 + resolution: "@spectrum-css/combobox@npm:4.0.0-s2-foundations.21" peerDependencies: "@spectrum-css/menu": ">=7" "@spectrum-css/pickerbutton": ">=5" @@ -7657,7 +7657,7 @@ __metadata: peerDependenciesMeta: "@spectrum-css/progresscircle": optional: true - checksum: 10c0/f5fd1304be11675cd88f33b210286530dba0a4267589d11194dc59a865ba22e9fb1654307c5e73120078c612fb2c194e1ddf920d5c801cd59b01dc998ffa15cf + checksum: 10c0/3837cf52d59a1c641d8020fca6f1592547ee68875a363439e1dd2ae150f268c388a163303d5751249c850e92886f27db4d7df83c37e7d0fe046633a4c4059426 languageName: node linkType: hard @@ -8611,7 +8611,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/combobox@workspace:packages/combobox" dependencies: - "@spectrum-css/combobox": "npm:4.0.0-s2-foundations.18" + "@spectrum-css/combobox": "npm:4.0.0-s2-foundations.21" "@spectrum-web-components/action-button": "npm:1.1.2" "@spectrum-web-components/base": "npm:1.1.2" "@spectrum-web-components/icon": "npm:1.1.2"