From b39219cd92f8f17420eadc74a655e0f1d074cae3 Mon Sep 17 00:00:00 2001 From: Megan Logsdon Date: Wed, 19 Jul 2023 08:38:05 -0400 Subject: [PATCH] feat(picker-button): migrate to core tokens --- packages/picker-button/package.json | 2 +- packages/picker-button/src/PickerButton.ts | 21 +- packages/picker-button/src/picker-button.css | 62 +- packages/picker-button/src/spectrum-config.js | 6 + .../src/spectrum-picker-button.css | 1384 ++++------------- .../stories/picker-button.stories.ts | 5 +- scripts/spectrum-tokens.js | 1 + tools/styles/tokens/express/global-vars.css | 27 + tools/styles/tokens/spectrum/global-vars.css | 25 + yarn.lock | 8 +- 10 files changed, 415 insertions(+), 1126 deletions(-) diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 42e9760a18..ec3a815c67 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -56,7 +56,7 @@ "@spectrum-web-components/icons-ui": "^0.35.0" }, "devDependencies": { - "@spectrum-css/pickerbutton": "^3.0.33" + "@spectrum-css/pickerbutton": "^4.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts index ab5afc5af3..9fa2e11305 100644 --- a/packages/picker-button/src/PickerButton.ts +++ b/packages/picker-button/src/PickerButton.ts @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ import { CSSResultArray, + DefaultElementSize, html, SizedMixin, TemplateResult, @@ -18,10 +19,18 @@ import { import { classMap } from '@spectrum-web-components/base/src/directives.js'; import { property } from '@spectrum-web-components/base/src/decorators.js'; import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js'; -import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js'; +import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js'; import styles from './picker-button.css.js'; +import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; + +const chevronClass = { + s: 'spectrum-UIIcon-ChevronDown75', + m: 'spectrum-UIIcon-ChevronDown100', + l: 'spectrum-UIIcon-ChevronDown200', + xl: 'spectrum-UIIcon-ChevronDown300', +}; /** * @element sp-picker-button @@ -30,7 +39,7 @@ export class PickerButton extends SizedMixin( ObserveSlotPresence(ButtonBase, '[slot="label"]') ) { public static override get styles(): CSSResultArray { - return [styles]; + return [styles, chevronStyles]; } @property({ type: Boolean, reflect: true }) @@ -59,9 +68,11 @@ export class PickerButton extends SizedMixin( - + diff --git a/packages/picker-button/src/picker-button.css b/packages/picker-button/src/picker-button.css index 27bd703acd..0abd96a8d4 100644 --- a/packages/picker-button/src/picker-button.css +++ b/packages/picker-button/src/picker-button.css @@ -17,65 +17,5 @@ governing permissions and limitations under the License. } .root { - display: contents; -} - -:host([size='s']) { - --spectrum-icon-tshirt-size-height: var( - --spectrum-alias-workflow-icon-size-s - ); - --spectrum-icon-tshirt-size-width: var( - --spectrum-alias-workflow-icon-size-s - ); - --spectrum-ui-icon-tshirt-size-height: var( - --spectrum-alias-ui-icon-cornertriangle-size-75 - ); - --spectrum-ui-icon-tshirt-size-width: var( - --spectrum-alias-ui-icon-cornertriangle-size-75 - ); -} - -:host([size='m']) { - --spectrum-icon-tshirt-size-height: var( - --spectrum-alias-workflow-icon-size-m - ); - --spectrum-icon-tshirt-size-width: var( - --spectrum-alias-workflow-icon-size-m - ); - --spectrum-ui-icon-tshirt-size-height: var( - --spectrum-alias-ui-icon-cornertriangle-size-100 - ); - --spectrum-ui-icon-tshirt-size-width: var( - --spectrum-alias-ui-icon-cornertriangle-size-100 - ); -} - -:host([size='l']) { - --spectrum-icon-tshirt-size-height: var( - --spectrum-alias-workflow-icon-size-l - ); - --spectrum-icon-tshirt-size-width: var( - --spectrum-alias-workflow-icon-size-l - ); - --spectrum-ui-icon-tshirt-size-height: var( - --spectrum-alias-ui-icon-cornertriangle-size-200 - ); - --spectrum-ui-icon-tshirt-size-width: var( - --spectrum-alias-ui-icon-cornertriangle-size-200 - ); -} - -:host([size='xl']) { - --spectrum-icon-tshirt-size-height: var( - --spectrum-alias-workflow-icon-size-xl - ); - --spectrum-icon-tshirt-size-width: var( - --spectrum-alias-workflow-icon-size-xl - ); - --spectrum-ui-icon-tshirt-size-height: var( - --spectrum-alias-ui-icon-cornertriangle-size-300 - ); - --spectrum-ui-icon-tshirt-size-width: var( - --spectrum-alias-ui-icon-cornertriangle-size-300 - ); + display: flex; } diff --git a/packages/picker-button/src/spectrum-config.js b/packages/picker-button/src/spectrum-config.js index c69d29196b..a672c52563 100644 --- a/packages/picker-button/src/spectrum-config.js +++ b/packages/picker-button/src/spectrum-config.js @@ -38,6 +38,12 @@ const convertSize = (size) => [ selectors: [builder.attribute('size', size)], }, }, + { + replace: builder.combinator(' '), + }, + { + replace: builder.class('root'), + }, ], }, { diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 7e66f4ffb7..a64f29e4f9 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -12,1176 +12,452 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .root { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-appearance: button; - border-style: solid; - box-sizing: border-box; - cursor: pointer; - display: inline-flex; - font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) - ); - line-height: var( - --spectrum-alias-component-text-line-height, - var(--spectrum-global-font-line-height-small) - ); - margin: 0; - overflow: visible; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - text-transform: none; - transition: background var(--spectrum-global-animation-duration-100, 0.13s) - ease-out, - border-color var(--spectrum-global-animation-duration-100, 0.13s) - ease-out, - color var(--spectrum-global-animation-duration-100, 0.13s) ease-out, - box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out; - -webkit-user-select: none; - user-select: none; - vertical-align: top; -} -.root:focus { - outline: none; -} -.root::-moz-focus-inner { - border: 0; - margin-bottom: -2px; - margin-top: -2px; - padding: 0; -} -:host([disabled]) .root { - cursor: default; -} -:host([size='s']) { - --spectrum-PickerButton-label-padding-y: var( - --spectrum-alias-pickerbutton-label-padding-y-s, - var(--spectrum-global-dimension-size-50) + --spectrum-picker-button-height: var(--spectrum-component-height-100); + --spectrum-picker-button-width: var(--spectrum-component-height-100); + --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill ); - --spectrum-PickerButton-icon-margin-y: var( - --spectrum-alias-pickerbutton-icon-margin-y-s, - var(--spectrum-global-dimension-size-85) + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 ); - --spectrum-PickerButton-icononly-padding-x: var( - --spectrum-alias-pickerbutton-icononly-padding-x-s, - var(--spectrum-global-dimension-size-85) + --spectrum-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 ); - padding: var(--spectrum-alias-infieldbutton-padding-s, 0); -} -:host([size='s']) .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var( - --spectrum-alias-infieldbutton-full-height-s, - var(--spectrum-global-dimension-size-300) + --spectrum-picker-button-icon-color: var( + --spectrum-neutral-content-color-default ); - gap: var(--spectrum-global-dimension-size-75); - height: var( - --spectrum-alias-infieldbutton-full-height-s, - var(--spectrum-global-dimension-size-300) + --spectrum-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover ); - width: var( - --spectrum-alias-infieldbutton-full-height-s, - var(--spectrum-global-dimension-size-300) + --spectrum-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down ); -} -:host([size='s']) .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-75); - padding-bottom: var( - --spectrum-alias-pickerbutton-label-padding-y-s, - var(--spectrum-global-dimension-size-50) + --spectrum-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus ); - padding-top: var( - --spectrum-alias-pickerbutton-label-padding-y-s, - var(--spectrum-global-dimension-size-50) + --spectrum-picker-button-font-color: var( + --spectrum-neutral-content-color-default ); -} -:host([size='s']) .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-85); - height: var(--spectrum-global-dimension-size-200); - margin-bottom: var( - --spectrum-alias-infieldbutton-icon-margin-y-s, - var(--spectrum-global-dimension-size-50) - ); - margin-top: var( - --spectrum-alias-infieldbutton-icon-margin-y-s, - var(--spectrum-global-dimension-size-50) - ); - width: var(--spectrum-global-dimension-size-200); -} -:host([size='s']) .spectrum-PickerButton-UIIcon { - height: var(--spectrum-alias-ui-icon-chevron-size-100); - margin-bottom: var( - --spectrum-alias-pickerbutton-icon-margin-y-s, - var(--spectrum-global-dimension-size-85) + --spectrum-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover ); - margin-top: var( - --spectrum-alias-pickerbutton-icon-margin-y-s, - var(--spectrum-global-dimension-size-85) + --spectrum-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down ); - width: var(--spectrum-alias-ui-icon-chevron-size-100); -} -:host([size='m']) { - --spectrum-PickerButton-label-padding-y: var( - --spectrum-alias-pickerbutton-label-padding-y-m, - var(--spectrum-global-dimension-size-75) + --spectrum-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus ); - --spectrum-PickerButton-icon-margin-y: var( - --spectrum-alias-pickerbutton-icon-margin-y-m, - var(--spectrum-global-dimension-size-125) + --spectrum-picker-button-font-family: var( + --spectrum-sans-font-family-stack ); - --spectrum-PickerButton-icononly-padding-x: var( - --spectrum-alias-pickerbutton-icononly-padding-x-m, - var(--spectrum-global-dimension-size-125) + --spectrum-picker-button-font-style: var(--spectrum-default-font-style); + --spectrum-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight ); - padding: var(--spectrum-alias-infieldbutton-padding-m, 0); -} -:host([size='m']) .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var( - --spectrum-alias-infieldbutton-full-height-m, - var(--spectrum-global-dimension-size-400) - ); - gap: var(--spectrum-global-dimension-size-85); - height: var( - --spectrum-alias-infieldbutton-full-height-m, - var(--spectrum-global-dimension-size-400) - ); - width: var( - --spectrum-alias-infieldbutton-full-height-m, - var(--spectrum-global-dimension-size-400) + --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + --spectrum-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 ); } -:host([size='m']) .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-100); - padding-bottom: var( - --spectrum-alias-pickerbutton-label-padding-y-m, - var(--spectrum-global-dimension-size-75) +:host([disabled]) .root { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-disabled, + var(--spectrum-disabled-background-color) ); - padding-top: var( - --spectrum-alias-pickerbutton-label-padding-y-m, - var(--spectrum-global-dimension-size-75) + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) ); -} -:host([size='m']) .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-100); - height: var(--spectrum-global-dimension-size-225); - margin-bottom: var( - --spectrum-alias-infieldbutton-icon-margin-y-m, - var(--spectrum-global-dimension-size-85) - ); - margin-top: var( - --spectrum-alias-infieldbutton-icon-margin-y-m, - var(--spectrum-global-dimension-size-85) - ); - width: var(--spectrum-global-dimension-size-225); -} -:host([size='m']) .spectrum-PickerButton-UIIcon { - height: var(--spectrum-alias-ui-icon-chevron-size-200); - margin-bottom: var( - --spectrum-alias-pickerbutton-icon-margin-y-m, - var(--spectrum-global-dimension-size-125) + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) ); - margin-top: var( - --spectrum-alias-pickerbutton-icon-margin-y-m, - var(--spectrum-global-dimension-size-125) + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-disabled, + var(--spectrum-disabled-background-color) ); - width: var(--spectrum-alias-ui-icon-chevron-size-200); -} -:host([size='l']) { - --spectrum-PickerButton-label-padding-y: var( - --spectrum-alias-pickerbutton-label-padding-y-l, - var(--spectrum-global-dimension-size-115) + --mod-picker-button-font-color: var( + --mod-picker-button-font-color-disabled, + var(--spectrum-disabled-content-color) ); - --spectrum-PickerButton-icon-margin-y: var( - --spectrum-alias-pickerbutton-icon-margin-y-l, - var(--spectrum-global-dimension-size-160) + --mod-picker-button-font-color-hover: var( + --mod-picker-button-font-color-hover-disabled, + var(--spectrum-disabled-content-color) ); - --spectrum-PickerButton-icononly-padding-x: var( - --spectrum-alias-pickerbutton-icononly-padding-x-l, - var(--spectrum-global-dimension-size-160) + --mod-picker-button-font-color-down: var( + --mod-picker-button-font-color-down-disabled, + var(--spectrum-disabled-content-color) ); - padding: var(--spectrum-alias-infieldbutton-padding-l, 0); -} -:host([size='l']) .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var( - --spectrum-alias-infieldbutton-full-height-l, - var(--spectrum-global-dimension-size-500) + --mod-picker-button-icon-color: var( + --mod-picker-button-icon-color-disabled, + var(--spectrum-disabled-content-color) ); - gap: var(--spectrum-global-dimension-size-65); - height: var( - --spectrum-alias-infieldbutton-full-height-l, - var(--spectrum-global-dimension-size-500) + --mod-picker-button-icon-color-hover: var( + --mod-picker-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) ); - width: var( - --spectrum-alias-infieldbutton-full-height-l, - var(--spectrum-global-dimension-size-500) + --mod-picker-button-icon-color-down: var( + --mod-picker-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) ); } -:host([size='l']) .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-200); - padding-bottom: var( - --spectrum-alias-pickerbutton-label-padding-y-l, - var(--spectrum-global-dimension-size-115) - ); - padding-top: var( - --spectrum-alias-pickerbutton-label-padding-y-l, - var(--spectrum-global-dimension-size-115) +.root.spectrum-PickerButton--quiet { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent ); -} -:host([size='l']) .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-115); - margin-bottom: var( - --spectrum-alias-infieldbutton-icon-margin-y-l, - var(--spectrum-global-dimension-size-125) + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-quiet, + transparent ); - margin-top: var( - --spectrum-alias-infieldbutton-icon-margin-y-l, - var(--spectrum-global-dimension-size-125) + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-quiet, + transparent ); -} -:host([size='l']) .spectrum-PickerButton-UIIcon { - height: var(--spectrum-alias-ui-icon-chevron-size-300); - margin-bottom: var( - --spectrum-alias-pickerbutton-icon-margin-y-l, - var(--spectrum-global-dimension-size-160) + --mod-picker-button-background-color-key-focus: var( + --mod-picker-button-background-color-key-focus-quiet, + transparent ); - margin-top: var( - --spectrum-alias-pickerbutton-icon-margin-y-l, - var(--spectrum-global-dimension-size-160) + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet, + transparent ); - width: var(--spectrum-alias-ui-icon-chevron-size-300); } -:host([size='xl']) { - --spectrum-PickerButton-label-padding-y: var( - --spectrum-alias-pickerbutton-label-padding-y-xl, - var(--spectrum-global-dimension-size-150) - ); - --spectrum-PickerButton-icon-margin-y: var( - --spectrum-alias-pickerbutton-icon-margin-y-xl, - var(--spectrum-global-dimension-size-200) - ); - --spectrum-PickerButton-icononly-padding-x: var( - --spectrum-alias-pickerbutton-icononly-padding-x-xl, - var(--spectrum-global-dimension-size-200) +:host([size='s']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-75); + --spectrum-picker-button-width: var(--spectrum-component-height-75); + --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); + --spectrum-picker-button-font-size: var(--spectrum-font-size-75); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 ); - padding: var(--spectrum-alias-infieldbutton-padding-xl, 0); } -:host([size='xl']) .spectrum-PickerButton-fill { - --spectrum-PickerButton-Fill-size: var( - --spectrum-alias-infieldbutton-full-height-xl, - var(--spectrum-global-dimension-size-600) - ); - gap: var(--spectrum-global-dimension-size-85); - height: var( - --spectrum-alias-infieldbutton-full-height-xl, - var(--spectrum-global-dimension-size-600) - ); - width: var( - --spectrum-alias-infieldbutton-full-height-xl, - var(--spectrum-global-dimension-size-600) +:host([size='l']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-200); + --spectrum-picker-button-width: var(--spectrum-component-height-200); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); + --spectrum-picker-button-font-size: var(--spectrum-font-size-200); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 ); } -:host([size='xl']) .spectrum-PickerButton-label { - font-size: var(--spectrum-global-dimension-font-size-300); - padding-bottom: var( - --spectrum-alias-pickerbutton-label-padding-y-xl, - var(--spectrum-global-dimension-size-150) +:host([size='xl']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-300); + --spectrum-picker-button-width: var(--spectrum-component-height-300); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); + --spectrum-picker-button-font-size: var(--spectrum-font-size-300); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 ); - padding-top: var( - --spectrum-alias-pickerbutton-label-padding-y-xl, - var(--spectrum-global-dimension-size-150) - ); -} -:host([size='xl']) .spectrum-PickerButton-icon { - gap: var(--spectrum-global-dimension-size-125); - height: var(--spectrum-global-dimension-size-275); - margin-bottom: var( - --spectrum-alias-infieldbutton-icon-margin-y-xl, - var(--spectrum-global-dimension-size-160) - ); - margin-top: var( - --spectrum-alias-infieldbutton-icon-margin-y-xl, - var(--spectrum-global-dimension-size-160) - ); - width: var(--spectrum-global-dimension-size-275); } -:host([size='xl']) .spectrum-PickerButton-UIIcon { - height: var(--spectrum-alias-ui-icon-chevron-size-400); - margin-bottom: var( - --spectrum-alias-pickerbutton-icon-margin-y-xl, - var(--spectrum-global-dimension-size-200) +.root { + align-items: center; + background-color: #0000; + block-size: var( + --mod-picker-button-width, + var(--spectrum-picker-button-width) ); - margin-top: var( - --spectrum-alias-pickerbutton-icon-margin-y-xl, - var(--spectrum-global-dimension-size-200) + border-style: none; + box-sizing: border-box; + display: flex; + justify-content: center; + padding: var( + --mod-picker-button-padding, + var(--spectrum-picker-button-padding) ); - width: var(--spectrum-alias-ui-icon-chevron-size-400); } -:host([disabled]:not([open])) .root .spectrum-PickerButton-fill { +.root:hover .spectrum-PickerButton-fill { background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled, - var(--spectrum-alias-component-background-color-disabled) + --mod-picker-button-background-color-hover, + var(--spectrum-picker-button-background-color-hover) ); } -:host([disabled]) .root .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled, - var(--spectrum-alias-component-background-color-disabled) - ); -} -:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default, - var(--spectrum-alias-component-background-color-default) +.root:hover .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-hover, + var(--spectrum-picker-button-font-color-hover) ); } -:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover, - var(--spectrum-alias-component-background-color-hover) +.root:hover .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-hover, + var(--spectrum-picker-button-icon-color-hover) ); } -:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-fill { +:host([active]) .root .spectrum-PickerButton-fill, +:host([open]) .root .spectrum-PickerButton-fill { background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down, - var(--spectrum-alias-component-background-color-down) - ); -} -:host([invalid]:not([disabled])) .root .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-default, - var(--spectrum-semantic-negative-color-default) - ); -} -:host([invalid]:not([disabled])) .root:hover .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-hover, - var(--spectrum-semantic-negative-color-hover) - ); -} -:host([invalid]:not([disabled])[active]) .root .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-down, - var(--spectrum-semantic-negative-color-down) - ); -} -:host([invalid]:not([disabled])) .root.is-focused .spectrum-PickerButton-fill, -:host([invalid]:not([disabled])) .root:focus .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-mouse-focus, - var(--spectrum-semantic-negative-color-hover) - ); -} -:host([invalid]:not([disabled])) - .root.focus-visible - .spectrum-PickerButton-fill, -:host([invalid]:not([disabled])) - .root.is-keyboardFocused - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-key-focus, - var(--spectrum-alias-border-color-key-focus) - ); -} -:host([invalid]:not([disabled])) - .root.is-keyboardFocused - .spectrum-PickerButton-fill, -:host([invalid]:not([disabled])) - .root:focus-visible - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-input-border-color-invalid-key-focus, - var(--spectrum-alias-border-color-key-focus) - ); -} -:host(:not([invalid]):not([disabled])) .root .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-default, - var(--spectrum-alias-input-border-color-default) - ); -} -:host(:not([invalid]):not([disabled])) .root:hover .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-hover, - var(--spectrum-alias-input-border-color-hover) + --mod-picker-button-background-color-down, + var(--spectrum-picker-button-background-color-down) ); } -:host(:not([invalid]):not([disabled])[active]) - .root - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-down, - var(--spectrum-alias-input-border-color-down) - ); -} -:host(:not([invalid]):not([disabled])) - .root.is-focused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) .root:focus .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus, - var(--spectrum-alias-input-border-color-mouse-focus) - ); -} -:host(:not([invalid]):not([disabled])) - .root.focus-visible - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.is-keyboardFocused - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-key-focus, - var(--spectrum-alias-input-border-color-key-focus) - ); -} -:host(:not([invalid]):not([disabled])) - .root.is-keyboardFocused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root:focus-visible - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-border-color-key-focus, - var(--spectrum-alias-input-border-color-key-focus) - ); -} -:host([dir='ltr'][position='right']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='rtl'][position='right']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='ltr'][position='right']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='rtl'][position='right']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='ltr'][position='right'][rounded]) - .root - .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 - ); -} -:host([dir='rtl'][position='right'][rounded]) - .root - .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 - ); -} -:host([dir='ltr'][position='right'][rounded]) - .root - .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 - ); -} -:host([dir='rtl'][position='right'][rounded]) - .root - .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 - ); -} -:host([dir='ltr'][position='left']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='rtl'][position='left']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='ltr'][position='left']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 - ); -} -:host([dir='rtl'][position='left']:not([rounded])) - .root - .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-infieldbutton-border-radius-sided, - 0 +:host([active]) .root .spectrum-PickerButton-label, +:host([open]) .root .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-down, + var(--spectrum-picker-button-font-color-down) ); } -:host([dir='ltr'][position='left'][rounded]) .root .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 +:host([active]) .root .spectrum-PickerButton-icon, +:host([open]) .root .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-down, + var(--spectrum-picker-button-icon-color-down) ); } -:host([dir='rtl'][position='left'][rounded]) .root .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 +.root.focus-visible .spectrum-PickerButton-fill, +.root.is-focused .spectrum-PickerButton-fill, +.root.is-keyboardFocused .spectrum-PickerButton-fill, +.root:focus .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-key-focus, + var(--spectrum-picker-button-background-color-key-focus) ); } -:host([dir='ltr'][position='left'][rounded]) .root .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 +.root.is-focused .spectrum-PickerButton-fill, +.root.is-keyboardFocused .spectrum-PickerButton-fill, +.root:focus .spectrum-PickerButton-fill, +.root:focus-visible .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-key-focus, + var(--spectrum-picker-button-background-color-key-focus) ); } -:host([dir='rtl'][position='left'][rounded]) .root .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded-sided, - 0 +.root.focus-visible .spectrum-PickerButton-label, +.root.is-focused .spectrum-PickerButton-label, +.root.is-keyboardFocused .spectrum-PickerButton-label, +.root:focus .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-key-focus, + var(--spectrum-picker-button-font-color-key-focus) ); } -:host([dir='ltr']:not([rounded])) .root .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) +.root.is-focused .spectrum-PickerButton-label, +.root.is-keyboardFocused .spectrum-PickerButton-label, +.root:focus .spectrum-PickerButton-label, +.root:focus-visible .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-key-focus, + var(--spectrum-picker-button-font-color-key-focus) ); } -:host([dir='ltr']:not([rounded])) .root .spectrum-PickerButton-fill, -:host([dir='rtl']:not([rounded])) .root .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) +.root.focus-visible .spectrum-PickerButton-icon, +.root.is-focused .spectrum-PickerButton-icon, +.root.is-keyboardFocused .spectrum-PickerButton-icon, +.root:focus .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-key-focus, + var(--spectrum-picker-button-icon-color-key-focus) ); } -:host([dir='rtl']:not([rounded])) .root .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) +.root.is-focused .spectrum-PickerButton-icon, +.root.is-keyboardFocused .spectrum-PickerButton-icon, +.root:focus .spectrum-PickerButton-icon, +.root:focus-visible .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-key-focus, + var(--spectrum-picker-button-icon-color-key-focus) ); } -:host([dir='ltr']:not([rounded])) .root .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) +:host([position='right']) .spectrum-PickerButton-fill { + border-end-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) ); -} -:host([dir='ltr']:not([rounded])) .root .spectrum-PickerButton-fill, -:host([dir='rtl']:not([rounded])) .root .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) + border-start-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) ); } -:host([dir='rtl']:not([rounded])) .root .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-infieldbutton-border-radius, - var(--spectrum-global-dimension-size-50) +:host([position='right'][rounded]) .spectrum-PickerButton-fill { + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) ); -} -:host([dir='ltr'][rounded]) .root .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) ); } -:host([dir='ltr'][rounded]) .root .spectrum-PickerButton-fill, -:host([dir='rtl'][rounded]) .root .spectrum-PickerButton-fill { - border-bottom-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) +:host([position='left']) .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) ); -} -:host([dir='rtl'][rounded]) .root .spectrum-PickerButton-fill { - border-bottom-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) + border-start-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) ); } -:host([dir='ltr'][rounded]) .root .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) +:host([position='left'][rounded]) .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) ); -} -:host([dir='ltr'][rounded]) .root .spectrum-PickerButton-fill, -:host([dir='rtl'][rounded]) .root .spectrum-PickerButton-fill { - border-top-left-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) ); } -:host([dir='rtl'][rounded]) .root .spectrum-PickerButton-fill { - border-top-right-radius: var( - --spectrum-alias-pickerbutton-border-radius-rounded, - var(--spectrum-global-dimension-size-50) +.spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color, + var(--spectrum-picker-button-font-color) ); -} -:host([dir='ltr']) .root.uiicononly .spectrum-PickerButton-fill { - padding-right: var(--spectrum-PickerButton-icononly-padding-x); -} -:host([dir='ltr']) .root.uiicononly .spectrum-PickerButton-fill, -:host([dir='rtl']) .root.uiicononly .spectrum-PickerButton-fill { - padding-left: var(--spectrum-PickerButton-icononly-padding-x); -} -:host([dir='rtl']) .root.uiicononly .spectrum-PickerButton-fill { - padding-right: var(--spectrum-PickerButton-icononly-padding-x); -} -.root.uiicononly .spectrum-PickerButton-fill { - width: var(--spectrum-PickerButton-Fill-size); -} -:host([dir='ltr'][size='s']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-s, - var(--spectrum-global-dimension-size-85) + flex: auto; + font-family: var( + --mod-picker-button-font-family, + var(--spectrum-picker-button-font-family) ); -} -:host([dir='ltr'][size='s']) .uiicononly .spectrum-PickerButton-fill, -:host([dir='rtl'][size='s']) .uiicononly .spectrum-PickerButton-fill { - padding-left: var( - --spectrum-alias-pickerbutton-icononly-padding-x-s, - var(--spectrum-global-dimension-size-85) + font-size: var( + --mod-picker-button-font-size, + var(--spectrum-picker-button-font-size) ); -} -:host([dir='rtl'][size='s']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-s, - var(--spectrum-global-dimension-size-85) + font-style: var( + --mod-picker-button-font-style, + var(--spectrum-picker-button-font-style) ); -} -:host([size='s']) .uiicononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-s, - var(--spectrum-global-dimension-size-300) + font-weight: var( + --mod-picker-button-font-weight, + var(--spectrum-picker-button-font-weight) ); -} -:host([dir='ltr'][size='m']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-m, - var(--spectrum-global-dimension-size-125) + overflow: hidden; + padding-block-end: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) ); -} -:host([dir='ltr'][size='m']) .uiicononly .spectrum-PickerButton-fill, -:host([dir='rtl'][size='m']) .uiicononly .spectrum-PickerButton-fill { - padding-left: var( - --spectrum-alias-pickerbutton-icononly-padding-x-m, - var(--spectrum-global-dimension-size-125) + padding-block-start: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) ); + white-space: nowrap; } -:host([dir='rtl'][size='m']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-m, - var(--spectrum-global-dimension-size-125) +.spectrum-PickerButton-fill { + align-items: center; + background-color: var( + --mod-picker-button-background-color, + var(--spectrum-picker-button-background-color) ); -} -:host([size='m']) .uiicononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-m, - var(--spectrum-global-dimension-size-400) + block-size: 100%; + border-color: var( + --mod-picker-button-border-color, + var(--spectrum-picker-button-border-color) ); -} -:host([dir='ltr'][size='l']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-l, - var(--spectrum-global-dimension-size-160) + border-end-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) ); -} -:host([dir='ltr'][size='l']) .uiicononly .spectrum-PickerButton-fill, -:host([dir='rtl'][size='l']) .uiicononly .spectrum-PickerButton-fill { - padding-left: var( - --spectrum-alias-pickerbutton-icononly-padding-x-l, - var(--spectrum-global-dimension-size-160) + border-end-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) ); -} -:host([dir='rtl'][size='l']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-l, - var(--spectrum-global-dimension-size-160) + border-start-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) ); -} -:host([size='l']) .uiicononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-l, - var(--spectrum-global-dimension-size-500) + border-start-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) ); -} -:host([dir='ltr'][size='xl']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-xl, - var(--spectrum-global-dimension-size-200) + border-style: solid; + border-width: var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) ); -} -:host([dir='ltr'][size='xl']) .uiicononly .spectrum-PickerButton-fill, -:host([dir='rtl'][size='xl']) .uiicononly .spectrum-PickerButton-fill { - padding-left: var( - --spectrum-alias-pickerbutton-icononly-padding-x-xl, - var(--spectrum-global-dimension-size-200) + box-sizing: border-box; + display: flex; + gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); + inline-size: 100%; + justify-content: center; + padding: calc( + var( + --mod-picker-button-fill-padding, + var(--spectrum-picker-button-fill-padding) + ) - + var( + --mod-picker-button-padding, + var(--spectrum-picker-button-padding) + ) - + var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + ) ); + transition: border-color + var( + --mod-picker-button-background-animation-duration, + var(--spectrum-picker-button-background-animation-duration) + ) + ease-in-out; } -:host([dir='rtl'][size='xl']) .uiicononly .spectrum-PickerButton-fill { - padding-right: var( - --spectrum-alias-pickerbutton-icononly-padding-x-xl, - var(--spectrum-global-dimension-size-200) +.spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color, + var(--spectrum-picker-button-icon-color) ); + flex-shrink: 0; } -:host([size='xl']) .uiicononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-xl, - var(--spectrum-global-dimension-size-600) +:host([rounded]) .spectrum-PickerButton-fill { + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) ); -} -.root.uiicononly .spectrum-PickerButton-icon, -.root.uiicononly .spectrum-PickerButton-label { - display: none; -} -.root.uiicononly .spectrum-PickerButton-UIIcon { - display: initial; -} -.root.spectrum-PickerButton--icononly .spectrum-PickerButton-fill { - width: var(--spectrum-PickerButton-Fill-size); -} -:host([dir='ltr'][size='s']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-50); -} -:host([dir='ltr'][size='s']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill, -:host([dir='rtl'][size='s']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-50); -} -:host([dir='rtl'][size='s']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-50); -} -:host([size='s']) .spectrum-PickerButton--icononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-s, - var(--spectrum-global-dimension-size-300) + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) ); -} -:host([dir='ltr'][size='m']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-85); -} -:host([dir='ltr'][size='m']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill, -:host([dir='rtl'][size='m']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-85); -} -:host([dir='rtl'][size='m']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-85); -} -:host([size='m']) .spectrum-PickerButton--icononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-m, - var(--spectrum-global-dimension-size-400) + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) ); -} -:host([dir='ltr'][size='l']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-125); -} -:host([dir='ltr'][size='l']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill, -:host([dir='rtl'][size='l']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-125); -} -:host([dir='rtl'][size='l']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-125); -} -:host([size='l']) .spectrum-PickerButton--icononly .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-l, - var(--spectrum-global-dimension-size-500) + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) ); } -:host([dir='ltr'][size='xl']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-160); -} -:host([dir='ltr'][size='xl']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill, -:host([dir='rtl'][size='xl']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-160); -} -:host([dir='rtl'][size='xl']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-160); -} -:host([size='xl']) - .spectrum-PickerButton--icononly - .spectrum-PickerButton-fill { - width: var( - --spectrum-alias-infieldbutton-full-height-xl, - var(--spectrum-global-dimension-size-600) +.uiicononly { + inline-size: var( + --mod-picker-button-height, + var(--spectrum-picker-button-height) ); } -.root.spectrum-PickerButton--icononly .spectrum-PickerButton-label { +.uiicononly .spectrum-PickerButton-label { display: none; } -.root.spectrum-PickerButton--icononly .spectrum-PickerButton-icon { - display: initial; -} -.root.spectrum-PickerButton--icononly .spectrum-PickerButton-UIIcon { - display: none; -} -.root.textuiicon .spectrum-PickerButton-fill { - width: auto; -} -:host([dir='ltr'][size='s']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-100); -} -:host([dir='rtl'][size='s']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-100); -} -:host([dir='ltr'][size='s']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-115); -} -:host([dir='rtl'][size='s']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-115); -} -:host([dir='ltr'][size='m']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-125); -} -:host([dir='rtl'][size='m']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-125); -} -:host([dir='ltr'][size='m']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-160); -} -:host([dir='rtl'][size='m']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-160); -} -:host([dir='ltr'][size='l']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-150); -} -:host([dir='rtl'][size='l']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-150); -} -:host([dir='ltr'][size='l']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-185); -} -:host([dir='rtl'][size='l']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-185); -} -:host([dir='ltr'][size='xl']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-200); -} -:host([dir='rtl'][size='xl']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-200); -} -:host([dir='ltr'][size='xl']) .textuiicon .spectrum-PickerButton-fill { - padding-left: var(--spectrum-global-dimension-size-225); -} -:host([dir='rtl'][size='xl']) .textuiicon .spectrum-PickerButton-fill { - padding-right: var(--spectrum-global-dimension-size-225); -} -.root.textuiicon .spectrum-PickerButton-label { - display: initial; -} -.root.textuiicon .spectrum-PickerButton-icon { - display: none; -} -.root.textuiicon .spectrum-PickerButton-UIIcon { - display: initial; -} -:host([disabled]:not([open])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled, - transparent - ); -} -:host([disabled]) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - border-color: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled, - transparent - ); -} -:host(:not([disabled]):not([open])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default, - transparent - ); -} -:host(:not([disabled]):not([open])) - .root.spectrum-PickerButton--quiet:hover - .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover, - transparent - ); -} -:host(:not([disabled]):not([open])[active]) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down, - transparent - ); -} -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet.focus-visible - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet.is-focused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet.is-keyboardFocused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet:focus - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet:hover - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])[active]) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill, -:host([invalid]:not([disabled])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - border-color: #0000; -} -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet.is-focused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet.is-keyboardFocused - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet:focus - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet:focus-visible - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])) - .root.spectrum-PickerButton--quiet:hover - .spectrum-PickerButton-fill, -:host(:not([invalid]):not([disabled])[active]) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill, -:host([invalid]:not([disabled])) - .root.spectrum-PickerButton--quiet - .spectrum-PickerButton-fill { - border-color: #0000; -} -:host([open]) .root .spectrum-PickerButton-fill { - background-color: var( - --spectrum-alias-component-background-color-down, - var(--spectrum-global-color-gray-200) - ); -} -:host([open]) .root .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-down, - var(--spectrum-global-color-gray-900) - ); -} -:host([open]) .root .spectrum-PickerButton-UIIcon, -:host([open]) .root .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color-down, - var(--spectrum-alias-icon-color-down) - ); -} -:host(:not([open])) .root .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color, - var(--spectrum-alias-component-text-color-default) - ); -} -:host(:not([open])) .root .spectrum-PickerButton-UIIcon, -:host(:not([open])) .root .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color, - var(--spectrum-alias-component-icon-color-default) - ); -} -:host([disabled]:not([open])) .root .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); +.uiicononly .spectrum-PickerButton-fill { + padding: 0; } -:host([disabled]:not([open])) .root .spectrum-PickerButton-UIIcon, -:host([disabled]:not([open])) .root .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); +.textuiicon .spectrum-PickerButton-fill { + inline-size: auto; } -:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-default, - var(--spectrum-global-color-gray-800) - ); -} -:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-hover, - var(--spectrum-global-color-gray-900) +.root { + --spectrum-picker-button-background-color: var( + --system-spectrum-pickerbutton-spectrum-picker-button-background-color ); -} -:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-UIIcon, -:host(:not([disabled]):not([open])) .root:hover .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color-hover, - var(--spectrum-alias-icon-color-hover) + --spectrum-picker-button-background-color-hover: var( + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover ); -} -:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-down, - var(--spectrum-global-color-gray-900) + --spectrum-picker-button-background-color-down: var( + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down ); -} -:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-UIIcon, -:host(:not([disabled]):not([open])[active]) .root .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color-down, - var(--spectrum-alias-icon-color-down) + --spectrum-picker-button-background-color-key-focus: var( + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus ); -} -:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-UIIcon, -:host(:not([disabled]):not([open])) .root .spectrum-PickerButton-icon { - color: var( - --spectrum-alias-component-icon-color-default, - var(--spectrum-alias-icon-color) + --spectrum-picker-button-border-color: var( + --system-spectrum-pickerbutton-spectrum-picker-button-border-color ); -} -:host(:not([disabled]):not([open])) - .root.spectrum-PickerButton--error - .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-error-default, - var(--spectrum-semantic-negative-text-color-small) + --spectrum-picker-button-border-radius: var( + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius ); -} -:host(:not([disabled]):not([open])) - .root.spectrum-PickerButton--error:hover - .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-error-hover, - var(--spectrum-semantic-negative-text-color-small-hover) + --spectrum-picker-button-border-radius-rounded-sided: var( + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided ); -} -:host(:not([disabled]):not([open])[active]) - .root.spectrum-PickerButton--error - .spectrum-PickerButton-label { - color: var( - --spectrum-alias-component-text-color-error-down, - var(--spectrum-semantic-negative-text-color-small-down) + --spectrum-picker-button-border-radius-sided: var( + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided ); -} -.spectrum-PickerButton-fill { - border-style: solid; - border-width: var( - --spectrum-alias-infieldbutton-border-size, - var(--spectrum-global-dimension-static-size-10) + --spectrum-picker-button-border-width: var( + --system-spectrum-pickerbutton-spectrum-picker-button-border-width ); - flex-direction: row; -} -.spectrum-PickerButton-label { - font-family: var(--spectrum-global-font-body-text-font-family); - font-style: var(--spectrum-global-font-style-regular, normal); - font-weight: var(--spectrum-global-font-body-text-font-weight); - letter-spacing: var(--spectrum-global-font-letter-spacing-none, 0); - line-height: var(--spectrum-global-font-component-text-line-height); - padding-bottom: var(--spectrum-PickerButton-label-padding-y); - padding-top: var(--spectrum-PickerButton-label-padding-y); - text-transform: none; -} -.spectrum-PickerButton-UIIcon { - margin-bottom: var(--spectrum-PickerButton-icon-margin-y); - margin-top: var(--spectrum-PickerButton-icon-margin-y); - transform: rotate(90deg); -} -.root { - --spectrum-infieldbutton-border-color-override: initial; - align-items: center; - background-color: #0000; - border-style: none; - display: flex; - justify-content: center; -} -.spectrum-PickerButton-label { - flex: auto; - overflow: hidden; - white-space: nowrap; -} -.spectrum-PickerButton-fill { - align-items: center; - border-color: var(--spectrum-infieldbutton-border-color-override); - box-sizing: border-box; - display: flex; - justify-content: center; - transition: border-color - var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; -} -.uiicononly .spectrum-PickerButton-fill { - padding: 0 !important; -} -.spectrum-PickerButton-UIIcon { - margin: 0 !important; -} -.spectrum-PickerButton-icon { - flex-shrink: 0; } diff --git a/packages/picker-button/stories/picker-button.stories.ts b/packages/picker-button/stories/picker-button.stories.ts index 812addbb8e..614e30aac1 100644 --- a/packages/picker-button/stories/picker-button.stories.ts +++ b/packages/picker-button/stories/picker-button.stories.ts @@ -29,7 +29,10 @@ active.args = { active: true }; export const customIcon = (args: StoryArgs): TemplateResult => Template(args); customIcon.args = { icon: html` - + `, }; diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js index b24e10bfd3..c3e103ee6f 100644 --- a/scripts/spectrum-tokens.js +++ b/scripts/spectrum-tokens.js @@ -71,6 +71,7 @@ const tokenPackages = [ 'search', 'tabs', 'actionbar', + 'pickerbutton', ]; const packagePaths = tokenPackages.map((packageName) => { diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index b78df4fe75..d94556a13f 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -1373,3 +1373,30 @@ governing permissions and limitations under the License. :root { --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); } + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px; +} diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 8308272494..d611eb08ae 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -1376,3 +1376,28 @@ governing permissions and limitations under the License. :root { --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); } + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} diff --git a/yarn.lock b/yarn.lock index c29d390638..62564ce204 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5445,10 +5445,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-4.0.21.tgz#09f1263ff4f0cd40698f7c898509640375b15ea9" integrity sha512-dSfk7ksroxdmqPmPXiSSLMAYfkDgRtD935bimQrAmKDf/pXV5Ik6oflmtOaHx0NSTavd3PUISBnkL+rzSprmWQ== -"@spectrum-css/pickerbutton@^3.0.33": - version "3.0.33" - resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-3.0.33.tgz#a52ccac1037217c0c956e47d7e4f839da3e6b1db" - integrity sha512-NGH5gZnkh+F0/wjc7HmJDvRoZocSlizr820z34JUHgn3moHLqvN2lpHnyvxLUqGlLCf5B8nxaCffmRwFmmV/sg== +"@spectrum-css/pickerbutton@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-4.0.0.tgz#74483edff4401c63cc9369b7f097090d978fde8d" + integrity sha512-YknT6EEpDQjVfz1xjpQqB1nBfm1XwVsxWtncXak90w7+noA/YNppk0bOcsJ2d4KNSzeVbdziTE85ga5Lk+qJ+A== "@spectrum-css/popover@^6.0.60": version "6.0.60"