diff --git a/documentation/src/components/layout.ts b/documentation/src/components/layout.ts index 8f1e0afa35..5dfa70473e 100644 --- a/documentation/src/components/layout.ts +++ b/documentation/src/components/layout.ts @@ -28,7 +28,7 @@ import { Dropdown } from '@spectrum-web-components/dropdown'; import '@spectrum-web-components/dropdown/sp-dropdown.js'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/button/sp-action-button.js'; +import '@spectrum-web-components/action-button/sp-action-button.js'; import '@spectrum-web-components/toast/sp-toast.js'; const SWC_THEME_COLOR_KEY = 'swc-docs:theme:color'; diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 7ecfce7e01..49703e77ee 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -30,13 +30,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: block; position: absolute; top: calc( - ( - var(--spectrum-accordion-item-height, 40px) - - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) - ) / 2 - + 50% - var( --spectrum-accordion-icon-height, var(--spectrum-global-dimension-size-125) @@ -68,7 +62,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #heading { /* .spectrum-Accordion-itemHeading */ margin: 0; - height: var(--spectrum-accordion-item-height, 40px); + position: relative; box-sizing: border-box; } :host([dir='ltr']) #header { @@ -77,11 +71,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-accordion-item-padding-x, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-accordion-icon-width, - var(--spectrum-global-dimension-size-75) - ) + + ) + var(--spectrum-global-dimension-size-125) + var( --spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100) @@ -98,11 +88,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-accordion-item-padding-x, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-accordion-icon-width, - var(--spectrum-global-dimension-size-75) - ) + + ) + var(--spectrum-global-dimension-size-125) + var( --spectrum-accordion-icon-gap, var(--spectrum-global-dimension-size-100) @@ -146,7 +132,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-bottom: var(--spectrum-global-dimension-size-150); margin: 0; min-height: calc( - var(--spectrum-accordion-item-height, 40px) - + 100% - var( --spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin) @@ -238,7 +224,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([open]) > #header:after { /* .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after */ height: calc( - var(--spectrum-accordion-item-height, 40px) - + 100% - var( --spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin) diff --git a/packages/action-button/README.md b/packages/action-button/README.md new file mode 100644 index 0000000000..ea05df311a --- /dev/null +++ b/packages/action-button/README.md @@ -0,0 +1,127 @@ +## Description + +An `` represents an action a user can take. + +### Usage + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button) + +``` +yarn add @spectrum-web-components/action-button +``` + +Import the side effectful registration of `` via: + +``` +import '@spectrum-web-components/action-button/sp-action-button.js'; +``` + +When looking to leverage the `ActionButton` base class as a type and/or for extension purposes, do so via: + +``` +import { ActionButton } from '@spectrum-web-components/action-button'; +``` + +## Example + +```html demo + + + Do action + + + Do action + + + Do action + + +``` + +## Variants + +### Action button with icon + +```html demo + + + + + This is an action button + +``` + +### Icon only action button + +```html demo + + + + + +``` + +### Emphasized action button + +```html demo + + + + + +``` + +### Action button with hold affordance + +The use of the `hold-affordance` attribute signifies that the `` in question will be delivered with a visual affordance that can be used to outline that additional related content can be acquired via further interaction with the button (e.g. a click, longpress, etc.). + +```html demo + + + + + + + + + + + + + + + + + + + + + +``` + +## Toggles + +With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`: + +```html demo + + Toggle button + +``` diff --git a/packages/action-button/package.json b/packages/action-button/package.json new file mode 100644 index 0000000000..c705f52403 --- /dev/null +++ b/packages/action-button/package.json @@ -0,0 +1,59 @@ +{ + "name": "@spectrum-web-components/action-button", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git", + "directory": "packages/action-button" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, + "homepage": "https://adobe.github.io/spectrum-web-components/components/action-button", + "keywords": [ + "spectrum css", + "web components", + "lit-element", + "lit-html" + ], + "version": "0.0.1", + "description": "", + "main": "src/index.js", + "module": "src/index.js", + "type": "module", + "exports": { + "./src/": "./src/", + "./custom-elements.json": "./custom-elements.json", + "./package.json": "./package.json", + "./sp-action-button": "./sp-action-button.js", + "./sp-action-button.js": "./sp-action-button.js" + }, + "files": [ + "custom-elements.json", + "*.d.ts", + "*.js", + "*.js.map", + "/src/" + ], + "sideEffects": [ + "./sp-*.js", + "./sp-*.ts" + ], + "scripts": { + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + }, + "author": "", + "license": "Apache-2.0", + "devDependencies": { + "@spectrum-css/actionbutton": "^1.0.0-beta.1", + "@spectrum-web-components/icon": "^0.6.3", + "@spectrum-web-components/icons-workflow": "^0.3.6" + }, + "dependencies": { + "@spectrum-web-components/base": "^0.1.0", + "@spectrum-web-components/button": "^0.9.4", + "tslib": "^2.0.0" + } +} diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts new file mode 100644 index 0000000000..880398d022 --- /dev/null +++ b/packages/action-button/sp-action-button.ts @@ -0,0 +1,21 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { ActionButton } from './src/ActionButton.js'; + +customElements.define('sp-action-button', ActionButton); + +declare global { + interface HTMLElementTagNameMap { + 'sp-action-button': ActionButton; + } +} diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts new file mode 100644 index 0000000000..8c814e9610 --- /dev/null +++ b/packages/action-button/src/ActionButton.ts @@ -0,0 +1,99 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { + CSSResultArray, + html, + property, + PropertyValues, + TemplateResult, +} from '@spectrum-web-components/base'; +import { ButtonBase } from '@spectrum-web-components/button'; +import buttonStyles from './action-button.css.js'; +import '@spectrum-web-components/icon/sp-icon.js'; +import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js'; +import { CornerTriangle300Icon } from '@spectrum-web-components/icons-ui'; + +/** + * @element sp-card + * + * @fires change - Announces a change in the `selected` property of an action button + */ +export class ActionButton extends ButtonBase { + public static get styles(): CSSResultArray { + return [buttonStyles, cornerTriangleStyles]; + } + + @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' }) + public holdAffordance = false; + + @property({ type: Boolean, reflect: true }) + public selected = false; + + @property({ type: Boolean, reflect: true }) + public toggles = false; + + @property({ type: Boolean, reflect: true }) + public quiet = false; + + @property({ type: String, reflect: true }) + public size = 'm'; + + @property({ type: Boolean, reflect: true }) + public emphasized = false; + + constructor() { + super(); + this.addEventListener('click', this.onClick); + } + + private onClick = (): void => { + if (!this.toggles) { + return; + } + this.selected = !this.selected; + const applyDefault = this.dispatchEvent( + new Event('change', { + cancelable: true, + }) + ); + if (!applyDefault) { + this.selected = !this.selected; + } + }; + + protected get buttonContent(): TemplateResult[] { + const buttonContent = super.buttonContent; + if (this.holdAffordance) { + buttonContent.unshift(html` + + ${CornerTriangle300Icon()} + + `); + } + return buttonContent; + } + + protected updated(changes: PropertyValues): void { + super.updated(changes); + if (this.toggles && changes.has('selected')) { + this.focusElement.setAttribute( + 'aria-pressed', + this.selected ? 'true' : 'false' + ); + } + } +} diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css new file mode 100644 index 0000000000..fe091c6144 --- /dev/null +++ b/packages/action-button/src/action-button.css @@ -0,0 +1,31 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import './spectrum-action-button.css'; + +:host { + display: inline-flex; + flex-direction: row; +} + +:host(.spectrum-Dropdown-trigger) #button { + text-align: left; +} + +::slotted([slot='icon']) { + flex-shrink: 0; +} + +#label { + flex-grow: var(--spectrum-actionbutton-label-flex-grow); + text-align: var(--spectrum-actionbutton-label-text-align); +} diff --git a/packages/action-button/src/index.ts b/packages/action-button/src/index.ts new file mode 100644 index 0000000000..b847ea7309 --- /dev/null +++ b/packages/action-button/src/index.ts @@ -0,0 +1,13 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +export * from './ActionButton.js'; diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css new file mode 100644 index 0000000000..d0cfb927f4 --- /dev/null +++ b/packages/action-button/src/spectrum-action-button.css @@ -0,0 +1,1093 @@ +/* stylelint-disable */ /* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-ActionButton */ + display: inline-flex; + box-sizing: border-box; + align-items: center; + justify-content: center; + overflow: visible; + margin: 0; + border-style: solid; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-appearance: button; + vertical-align: top; + 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; + text-decoration: none; + font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) + ); + line-height: 1.3; + -moz-user-select: none; + user-select: none; + -webkit-user-select: none; + touch-action: none; + cursor: pointer; +} +:host(:focus) { + /* .spectrum-ActionButton:focus */ + outline: none; +} +:host(::-moz-focus-inner) { + /* .spectrum-ActionButton::-moz-focus-inner */ + border: 0; + border-style: none; + padding: 0; + margin-top: -2px; + margin-bottom: -2px; +} +:host(:disabled) { + /* .spectrum-ActionButton:disabled */ + cursor: default; +} +::slotted([slot='icon']) { + /* .spectrum-ActionButton .spectrum-Icon */ + max-height: 100%; + flex-shrink: 0; +} +#label { + /* .spectrum-ActionButton-label */ + align-self: center; + justify-self: center; + text-align: center; +} +#label:empty { + /* .spectrum-ActionButton-label:empty */ + display: none; +} +:host([size='s']) { + /* .spectrum-ActionButton--sizeS */ + --spectrum-actionbutton-quiet-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-quiet-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-quiet-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-quiet-text-size: var( + --spectrum-alias-item-text-size-s, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-actionbutton-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-min-width: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-actionbutton-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-actionbutton-text-size: var( + --spectrum-alias-item-text-size-s, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-actionbutton-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-s, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-actionbutton-height: var( + --spectrum-alias-item-height-s, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-actionbutton-padding-left: var( + --spectrum-alias-item-workflow-padding-left-s, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-actionbutton-padding-right: var( + --spectrum-alias-item-padding-s, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-actionbutton-icononly-padding-left: var( + --spectrum-alias-item-icononly-padding-s, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-icononly-padding-right: var( + --spectrum-alias-item-icononly-padding-s, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-textonly-padding-left: var( + --spectrum-alias-item-padding-s, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-actionbutton-textonly-padding-right: var( + --spectrum-alias-item-padding-s, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-actionbutton-hold-icon-padding-bottom: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-actionbutton-hold-icon-padding-right: var( + --spectrum-global-dimension-size-25 + ); +} +:host([size='m']) { + /* .spectrum-ActionButton--sizeM */ + --spectrum-actionbutton-quiet-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-quiet-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-quiet-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-quiet-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-actionbutton-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-min-width: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-actionbutton-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-actionbutton-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-actionbutton-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-actionbutton-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-actionbutton-padding-left: var( + --spectrum-alias-item-workflow-padding-left-m + ); + --spectrum-actionbutton-padding-right: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-actionbutton-icononly-padding-left: var( + --spectrum-alias-item-icononly-padding-m, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-actionbutton-icononly-padding-right: var( + --spectrum-alias-item-icononly-padding-m, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-actionbutton-textonly-padding-left: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-actionbutton-textonly-padding-right: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-actionbutton-hold-icon-padding-bottom: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-actionbutton-hold-icon-padding-right: var( + --spectrum-global-dimension-size-40 + ); +} +:host([size='l']) { + /* .spectrum-ActionButton--sizeL */ + --spectrum-actionbutton-quiet-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-quiet-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-quiet-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-quiet-text-size: var( + --spectrum-alias-item-text-size-l, + var(--spectrum-global-dimension-font-size-200) + ); + --spectrum-actionbutton-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-min-width: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-actionbutton-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-actionbutton-text-size: var( + --spectrum-alias-item-text-size-l, + var(--spectrum-global-dimension-font-size-200) + ); + --spectrum-actionbutton-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-l, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-actionbutton-height: var( + --spectrum-alias-item-height-l, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-actionbutton-padding-left: var( + --spectrum-alias-item-workflow-padding-left-l, + var(--spectrum-global-dimension-size-160) + ); + --spectrum-actionbutton-padding-right: var( + --spectrum-alias-item-padding-l, + var(--spectrum-global-dimension-size-185) + ); + --spectrum-actionbutton-icononly-padding-left: var( + --spectrum-alias-item-icononly-padding-l, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-actionbutton-icononly-padding-right: var( + --spectrum-alias-item-icononly-padding-l, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-actionbutton-textonly-padding-left: var( + --spectrum-alias-item-padding-l, + var(--spectrum-global-dimension-size-185) + ); + --spectrum-actionbutton-textonly-padding-right: var( + --spectrum-alias-item-padding-l, + var(--spectrum-global-dimension-size-185) + ); + --spectrum-actionbutton-hold-icon-padding-bottom: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-actionbutton-hold-icon-padding-right: var( + --spectrum-global-dimension-size-50 + ); +} +:host([size='xl']) { + /* .spectrum-ActionButton--sizeXL */ + --spectrum-actionbutton-quiet-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-quiet-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-quiet-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-quiet-text-size: var( + --spectrum-alias-item-text-size-xl, + var(--spectrum-global-dimension-font-size-300) + ); + --spectrum-actionbutton-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-actionbutton-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-actionbutton-min-width: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-actionbutton-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-actionbutton-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-actionbutton-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-l, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-actionbutton-text-size: var( + --spectrum-alias-item-text-size-xl, + var(--spectrum-global-dimension-font-size-300) + ); + --spectrum-actionbutton-height: var( + --spectrum-alias-item-height-xl, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-actionbutton-padding-left: var( + --spectrum-alias-item-workflow-padding-left-xl, + var(--spectrum-global-dimension-size-185) + ); + --spectrum-actionbutton-padding-right: var( + --spectrum-alias-item-padding-xl, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-actionbutton-icononly-padding-left: var( + --spectrum-alias-item-icononly-padding-xl, + var(--spectrum-global-dimension-size-160) + ); + --spectrum-actionbutton-icononly-padding-right: var( + --spectrum-alias-item-icononly-padding-xl, + var(--spectrum-global-dimension-size-160) + ); + --spectrum-actionbutton-textonly-padding-left: var( + --spectrum-alias-item-padding-xl, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-actionbutton-textonly-padding-right: var( + --spectrum-alias-item-padding-xl, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-actionbutton-hold-icon-padding-bottom: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-actionbutton-hold-icon-padding-right: var( + --spectrum-global-dimension-size-65 + ); +} +:host { + /* .spectrum-ActionButton */ + --spectrum-actionbutton-padding-left-adjusted: calc( + var(--spectrum-actionbutton-padding-left) - + var(--spectrum-actionbutton-border-size) + ); + --spectrum-actionbutton-textonly-padding-left-adjusted: calc( + var(--spectrum-actionbutton-textonly-padding-left) - + var(--spectrum-actionbutton-border-size) + ); + --spectrum-actionbutton-textonly-padding-right-adjusted: calc( + var(--spectrum-actionbutton-textonly-padding-right) - + var(--spectrum-actionbutton-border-size) + ); + --spectrum-actionbutton-icononly-padding-left-adjusted: calc( + var(--spectrum-actionbutton-icononly-padding-left) - + var(--spectrum-actionbutton-border-size) + ); + --spectrum-actionbutton-icononly-padding-right-adjusted: calc( + var(--spectrum-actionbutton-icononly-padding-right) - + var(--spectrum-actionbutton-border-size) + ); +} +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-ActionButton */ + padding-left: var(--spectrum-actionbutton-textonly-padding-left-adjusted); + padding-right: var(--spectrum-actionbutton-textonly-padding-right-adjusted); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-ActionButton */ + padding-right: var(--spectrum-actionbutton-textonly-padding-left-adjusted); + padding-left: var(--spectrum-actionbutton-textonly-padding-right-adjusted); +} +:host { + /* .spectrum-ActionButton */ + position: relative; + height: var(--spectrum-actionbutton-height); + min-width: var(--spectrum-actionbutton-min-width); + border-width: var(--spectrum-actionbutton-border-size); + border-radius: var(--spectrum-actionbutton-border-radius); + font-size: var(--spectrum-actionbutton-text-size); + font-weight: var(--spectrum-actionbutton-text-font-weight); + line-height: var(--spectrum-actionbutton-text-line-height); +} +:host([dir='ltr']) ::slotted([slot='icon']) { + /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon */ + margin-left: calc( + -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - + var(--spectrum-actionbutton-padding-left-adjusted)) + ); +} +:host([dir='rtl']) ::slotted([slot='icon']) { + /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon */ + margin-right: calc( + -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - + var(--spectrum-actionbutton-padding-left-adjusted)) + ); +} +:host([dir='ltr']) slot[name='icon'] + #label { + /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + padding-left: var(--spectrum-actionbutton-icon-gap); +} +:host([dir='rtl']) slot[name='icon'] + #label { + /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + padding-right: var(--spectrum-actionbutton-icon-gap); +} +:host([dir='ltr']) slot[name='icon'] + #label { + /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + padding-right: 0; +} +:host([dir='rtl']) slot[name='icon'] + #label { + /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + padding-left: 0; +} +#hold-affordance + ::slotted([slot='icon']), +:host([dir]) slot[icon-only]::slotted([slot='icon']), +:host([dir]) slot[icon-only] sp-icon { + /* .spectrum-ActionButton .spectrum-ActionButton-hold+.spectrum-Icon, + * .spectrum-ActionButton .spectrum-Icon:only-child */ + margin-left: calc( + -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - + var(--spectrum-actionbutton-icononly-padding-left-adjusted)) + ); + margin-right: calc( + -1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - + var(--spectrum-actionbutton-icononly-padding-right-adjusted)) + ); +} +#label { + /* .spectrum-ActionButton-label */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +:host([dir='ltr']) #hold-affordance { + /* [dir=ltr] .spectrum-ActionButton-hold */ + right: var(--spectrum-actionbutton-hold-icon-padding-right); +} +:host([dir='rtl']) #hold-affordance { + /* [dir=rtl] .spectrum-ActionButton-hold */ + left: var(--spectrum-actionbutton-hold-icon-padding-right); + transform: matrix(-1, 0, 0, 1, 0, 0); +} +#hold-affordance { + /* .spectrum-ActionButton-hold */ + position: absolute; + bottom: var(--spectrum-actionbutton-hold-icon-padding-bottom); +} +:host([quiet]) { + /* .spectrum-ActionButton--quiet */ + border-width: var(--spectrum-actionbutton-quiet-border-size); + border-radius: var(--spectrum-actionbutton-quiet-border-radius); + font-size: var(--spectrum-actionbutton-quiet-text-size); + font-weight: var(--spectrum-actionbutton-quiet-text-font-weight); +} +:host { + /* .spectrum-ActionButton */ + background-color: var(--spectrum-global-color-gray-75); + border-color: var( + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) + ); + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); +} +#hold-affordance, +::slotted([slot='icon']) { + /* .spectrum-ActionButton .spectrum-ActionButton-hold, + * .spectrum-ActionButton .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) + ); +} +:host(:hover) { + /* .spectrum-ActionButton:hover */ + background-color: var(--spectrum-global-color-gray-50); + border-color: var( + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) + ); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host(:hover) #hold-affordance, +:host(:hover) ::slotted([slot='icon']) { + /* .spectrum-ActionButton:hover .spectrum-ActionButton-hold, + * .spectrum-ActionButton:hover .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host(:focus-visible) { + /* .spectrum-ActionButton.focus-ring */ + background-color: var(--spectrum-global-color-gray-50); + box-shadow: 0 0 0 1px + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host(:focus-visible), +:host(:focus-visible[active]) { + /* .spectrum-ActionButton.focus-ring, + * .spectrum-ActionButton.focus-ring:active */ + border-color: var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host(:focus-visible) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.focus-ring .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-focus, + var(--spectrum-global-color-gray-900) + ); +} +:host(:focus-visible) #hold-affordance { + /* .spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([active]) { + /* .spectrum-ActionButton:active */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-down, + var(--spectrum-global-color-gray-500) + ); + color: var( + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([active]) #hold-affordance { + /* .spectrum-ActionButton:active .spectrum-ActionButton-hold */ + color: var( + --spectrum-alias-icon-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([disabled]), +:host(:disabled) { + /* .spectrum-ActionButton.is-disabled, + * .spectrum-ActionButton:disabled */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +:host([disabled]) #hold-affordance, +:host([disabled]) ::slotted([slot='icon']), +:host(:disabled) #hold-affordance, +:host(:disabled) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold, + * .spectrum-ActionButton.is-disabled .spectrum-Icon, + * .spectrum-ActionButton:disabled .spectrum-ActionButton-hold, + * .spectrum-ActionButton:disabled .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) + ); +} +:host([selected]) { + /* .spectrum-ActionButton.is-selected */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) + ); + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); +} +:host([selected]) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-selected .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) + ); +} +:host([selected]:focus-visible) { + /* .spectrum-ActionButton.is-selected.focus-ring */ + background-color: var(--spectrum-global-color-gray-200); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected]:focus-visible), +:host([selected]:focus-visible[active]) { + /* .spectrum-ActionButton.is-selected.focus-ring, + * .spectrum-ActionButton.is-selected.focus-ring:active */ + border-color: var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([selected]:focus-visible) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected]:hover) { + /* .spectrum-ActionButton.is-selected:hover */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) + ); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected]:hover) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-selected:hover .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected][active]) { + /* .spectrum-ActionButton.is-selected:active */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-down, + var(--spectrum-global-color-gray-500) + ); + color: var( + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected][active]) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-selected:active .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([selected][disabled]), +:host([selected]:disabled) { + /* .spectrum-ActionButton.is-selected.is-disabled, + * .spectrum-ActionButton.is-selected:disabled */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +:host([selected][disabled]) ::slotted([slot='icon']), +:host([selected]:disabled) ::slotted([slot='icon']) { + /* .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon, + * .spectrum-ActionButton.is-selected:disabled .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) + ); +} +:host([emphasized]) { + /* .spectrum-ActionButton--emphasized */ + background-color: var(--spectrum-global-color-gray-75); + border-color: var( + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) + ); + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); +} +:host([emphasized]) #hold-affordance, +:host([emphasized]) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized .spectrum-ActionButton-hold, + * .spectrum-ActionButton--emphasized .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) + ); +} +:host([emphasized][selected]) #hold-affordance, +:host([emphasized][selected]:hover) #hold-affordance { + /* .spectrum-ActionButton--emphasized.is-selected .spectrum-ActionButton-hold, + * .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-ActionButton-hold */ + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized]:hover) { + /* .spectrum-ActionButton--emphasized:hover */ + background-color: var(--spectrum-global-color-gray-50); + border-color: var( + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) + ); + box-shadow: none; + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]:hover) #hold-affordance, +:host([emphasized]:hover) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold, + * .spectrum-ActionButton--emphasized:hover .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]:focus-visible) { + /* .spectrum-ActionButton--emphasized.focus-ring */ + background-color: var(--spectrum-global-color-gray-50); + border-color: var( + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) + ); + box-shadow: 0 0 0 1px + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]:focus-visible) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-focus, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]:focus-visible) #hold-affordance { + /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold */ + color: var( + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]) .is-active { + /* .spectrum-ActionButton--emphasized.is-active */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-down, + var(--spectrum-global-color-gray-500) + ); + box-shadow: none; + color: var( + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized]) .is-active #hold-affordance { + /* .spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold */ + color: var( + --spectrum-alias-icon-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([emphasized][disabled]), +:host([emphasized]:disabled) { + /* .spectrum-ActionButton--emphasized.is-disabled, + * .spectrum-ActionButton--emphasized:disabled */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +:host([emphasized][disabled]) #hold-affordance, +:host([emphasized][disabled]) ::slotted([slot='icon']), +:host([emphasized]:disabled) #hold-affordance, +:host([emphasized]:disabled) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-disabled .spectrum-ActionButton-hold, + * .spectrum-ActionButton--emphasized.is-disabled .spectrum-Icon, + * .spectrum-ActionButton--emphasized:disabled .spectrum-ActionButton-hold, + * .spectrum-ActionButton--emphasized:disabled .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) + ); +} +:host([emphasized][selected]), +:host([emphasized][quiet][selected]) { + /* .spectrum-ActionButton--emphasized.is-selected, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected */ + background-color: var( + --spectrum-semantic-cta-color-background-default, + var(--spectrum-global-color-static-blue-600) + ); + border-color: var( + --spectrum-semantic-cta-color-background-default, + var(--spectrum-global-color-static-blue-600) + ); + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]) ::slotted([slot='icon']), +:host([emphasized][quiet][selected]) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon */ + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]:focus-visible), +:host([emphasized][quiet][selected]:focus-visible) { + /* .spectrum-ActionButton--emphasized.is-selected.focus-ring, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring */ + background-color: var( + --spectrum-semantic-cta-color-background-key-focus, + var(--spectrum-global-color-static-blue-600) + ); + border-color: var( + --spectrum-semantic-cta-color-background-key-focus, + var(--spectrum-global-color-static-blue-600) + ); + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]:focus-visible) ::slotted([slot='icon']), +:host([emphasized][quiet][selected]:focus-visible) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon */ + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]:hover), +:host([emphasized][quiet][selected]:hover) { + /* .spectrum-ActionButton--emphasized.is-selected:hover, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover */ + background-color: var( + --spectrum-semantic-cta-color-background-hover, + var(--spectrum-global-color-static-blue-700) + ); + border-color: var( + --spectrum-semantic-cta-color-background-hover, + var(--spectrum-global-color-static-blue-700) + ); + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]:hover) ::slotted([slot='icon']), +:host([emphasized][quiet][selected]:hover) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon */ + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]) .is-active, +:host([emphasized][quiet][selected]) .is-active { + /* .spectrum-ActionButton--emphasized.is-selected.is-active, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active */ + background-color: var( + --spectrum-semantic-cta-color-background-down, + var(--spectrum-global-color-static-blue-800) + ); + border-color: var( + --spectrum-semantic-cta-color-background-down, + var(--spectrum-global-color-static-blue-800) + ); + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected]) .is-active ::slotted([slot='icon']), +:host([emphasized][quiet][selected]) .is-active ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon */ + color: var(--spectrum-global-color-static-white, #fff); +} +:host([emphasized][selected][disabled]), +:host([emphasized][selected]:disabled), +:host([emphasized][quiet][selected][disabled]), +:host([emphasized][quiet][selected]:disabled) { + /* .spectrum-ActionButton--emphasized.is-selected.is-disabled, + * .spectrum-ActionButton--emphasized.is-selected:disabled, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +:host([emphasized][selected][disabled]) ::slotted([slot='icon']), +:host([emphasized][selected]:disabled) ::slotted([slot='icon']), +:host([emphasized][quiet][selected][disabled]) ::slotted([slot='icon']), +:host([emphasized][quiet][selected]:disabled) ::slotted([slot='icon']) { + /* .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon, + * .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled .spectrum-Icon, + * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled .spectrum-Icon */ + color: var( + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) + ); +} +:host([quiet]) { + /* .spectrum-ActionButton--quiet */ + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); +} +:host([quiet]), +:host([quiet]:hover) { + /* .spectrum-ActionButton--quiet, + * .spectrum-ActionButton--quiet:hover */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); +} +:host([quiet]:focus-visible), +:host([quiet]:hover) { + /* .spectrum-ActionButton--quiet.focus-ring, + * .spectrum-ActionButton--quiet:hover */ + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet]:focus-visible) { + /* .spectrum-ActionButton--quiet.focus-ring */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + box-shadow: 0 0 0 1px + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + border-color: var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([quiet][active]) { + /* .spectrum-ActionButton--quiet:active */ + background-color: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var( + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet][disabled]), +:host([quiet]:disabled) { + /* .spectrum-ActionButton--quiet.is-disabled, + * .spectrum-ActionButton--quiet:disabled */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +:host([quiet][selected]) { + /* .spectrum-ActionButton--quiet.is-selected */ + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); +} +:host([quiet][selected]), +:host([quiet][selected]:focus-visible) { + /* .spectrum-ActionButton--quiet.is-selected, + * .spectrum-ActionButton--quiet.is-selected.focus-ring */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-alias-border-color-transparent, transparent); +} +:host([quiet][selected]:focus-visible) { + /* .spectrum-ActionButton--quiet.is-selected.focus-ring */ + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet][selected]:hover) { + /* .spectrum-ActionButton--quiet.is-selected:hover */ + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet][selected][active]), +:host([quiet][selected]:hover) { + /* .spectrum-ActionButton--quiet.is-selected:active, + * .spectrum-ActionButton--quiet.is-selected:hover */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-alias-border-color-transparent, transparent); +} +:host([quiet][selected][active]) { + /* .spectrum-ActionButton--quiet.is-selected:active */ + color: var( + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet][selected][disabled]), +:host([quiet][selected]:disabled) { + /* .spectrum-ActionButton--quiet.is-selected.is-disabled, + * .spectrum-ActionButton--quiet.is-selected:disabled */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js new file mode 100644 index 0000000000..205a530d1d --- /dev/null +++ b/packages/action-button/src/spectrum-config.js @@ -0,0 +1,104 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +const config = { + spectrum: 'actionbutton', + components: [ + { + name: 'action-button', + host: { + selector: '.spectrum-ActionButton', + }, + attributes: [ + { + type: 'boolean', + selector: '.spectrum-ActionButton--quiet', + }, + { + type: 'boolean', + selector: '.is-disabled', + name: 'disabled', + }, + { + type: 'boolean', + name: 'selected', + selector: '.is-selected', + }, + { + type: 'boolean', + selector: ':active', + name: 'active', + }, + { + type: 'boolean', + name: 'emphasized', + selector: '.spectrum-ActionButton--emphasized', + }, + { + type: 'enum', + name: 'size', + values: [ + { + name: 's', + selector: '.spectrum-ActionButton--sizeS', + }, + { + name: 'm', + selector: '.spectrum-ActionButton--sizeM', + }, + { + name: 'l', + selector: '.spectrum-ActionButton--sizeL', + }, + { + name: 'xl', + selector: '.spectrum-ActionButton--sizeXL', + }, + ], + }, + ], + ids: [ + '.spectrum-ActionButton-label', + { + name: 'hold-affordance', + selector: '.spectrum-ActionButton-hold', + }, + ], + slots: [ + { + name: 'icon', + selector: '.spectrum-Icon', + }, + ], + complexSelectors: [ + { + replacement: + ":host([dir]) slot[icon-only]::slotted([slot='icon']), :host([dir]) slot[icon-only] sp-icon", + selector: + '.spectrum-ActionButton .spectrum-Icon:only-child', + }, + { + replacement: + ":host([dir=ltr]) slot:not([icon-only])::slotted([slot='icon']), :host([dir=ltr]) slot:not([icon-only]) sp-icon", + selector: /\:host\(\[dir=ltr\]\) \.spectrum-Icon$/, + }, + { + replacement: + ":host([dir=rtl]) slot:not([icon-only])::slotted([slot='icon']), :host([dir=rtl]) slot:not([icon-only]) sp-icon", + selector: /\:host\(\[dir=rtl\]\) \.spectrum-Icon$/, + }, + ], + }, + ], +}; + +export default config; diff --git a/packages/action-button/stories/action-button.stories.ts b/packages/action-button/stories/action-button.stories.ts new file mode 100644 index 0000000000..9854c4f119 --- /dev/null +++ b/packages/action-button/stories/action-button.stories.ts @@ -0,0 +1,149 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { html, action } from '@open-wc/demoing-storybook'; +import { TemplateResult } from '@spectrum-web-components/base'; +import '@spectrum-web-components/icon/sp-icon.js'; +import { + EditIcon, + MoreIcon, + SettingsIcon, +} from '@spectrum-web-components/icons-workflow'; + +import '../'; +import '../sp-action-button.js'; + +interface Properties { + quiet?: boolean; + disabled?: boolean; + selected?: boolean; + toggles?: boolean; + emphasized?: boolean; +} + +function renderButton(properties: Properties): TemplateResult { + return html` + + Action + + `; +} + +function renderButtonsSelected(properties: Properties): TemplateResult { + const disabled = Object.assign({}, properties, { disabled: true }); + const selected = Object.assign({}, properties, { selected: true }); + return html` +
+ ${renderButton(properties)} ${renderButton(selected)} + ${renderButton(disabled)} +
+ `; +} + +export default { + component: 'sp-action-button', + title: 'ActionButton', +}; + +export const Default = (): TemplateResult => { + return renderButtonsSelected({ + quiet: false, + disabled: false, + selected: false, + }); +}; + +export const emphasized = (): TemplateResult => { + return renderButtonsSelected({ + emphasized: true, + disabled: false, + selected: false, + }); +}; + +export const emphasizedAndQuiet = (): TemplateResult => { + return renderButtonsSelected({ + emphasized: true, + quiet: true, + disabled: false, + selected: false, + }); +}; + +export const quiet = (): TemplateResult => { + return renderButtonsSelected({ + quiet: true, + disabled: false, + selected: false, + }); +}; + +export const toggles = (): TemplateResult => { + return renderButtonsSelected({ + toggles: true, + }); +}; + +export const wIconButton = (): TemplateResult => { + return html` + + + ${EditIcon({ hidden: true })} + + This is an action button + + `; +}; + +wIconButton.story = { + name: 'w/ Icon button', +}; + +export const iconOnlyButton = (): TemplateResult => { + return html` + + + ${EditIcon({ hidden: true })} + + + `; +}; + +export const holdAffordance = (): TemplateResult => { + return html` + + + + ${EditIcon({ hidden: true })} + + + + + + ${SettingsIcon({ hidden: true })} + + + + + + ${MoreIcon({ hidden: true })} + + + + `; +}; diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts new file mode 100644 index 0000000000..db9f36a812 --- /dev/null +++ b/packages/action-button/test/action-button.test.ts @@ -0,0 +1,92 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import '../sp-action-button.js'; +import { ActionButton } from '../'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; + +describe('ActionButton', () => { + it('loads default', async () => { + const el = await fixture( + html` + Button + ` + ); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + expect(el.textContent).to.include('Button'); + await expect(el).to.be.accessible(); + }); + it('loads [hold-affordance]', async () => { + const el = await fixture( + html` + Button + ` + ); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + expect(el.textContent).to.include('Button'); + await expect(el).to.be.accessible(); + }); + it(':not([toggles])', async () => { + const el = await fixture( + html` + Button + ` + ); + + await elementUpdated(el); + const button = el.focusElement; + + expect(el.toggles).to.be.false; + expect(el.selected).to.be.false; + expect(button.hasAttribute('aria-pressed')).to.be.false; + + el.click(); + await elementUpdated(el); + + expect(el.toggles).to.be.false; + expect(el.selected).to.be.false; + expect(button.hasAttribute('aria-pressed')).to.be.false; + }); + it('toggles', async () => { + const el = await fixture( + html` + Button + ` + ); + + await elementUpdated(el); + const button = el.focusElement; + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.false; + expect(button.getAttribute('aria-pressed')).to.equal('false'); + + el.click(); + await elementUpdated(el); + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.true; + expect(button.getAttribute('aria-pressed')).to.equal('true'); + + el.addEventListener('change', (event: Event) => event.preventDefault()); + el.click(); + await elementUpdated(el); + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.true; + expect(button.getAttribute('aria-pressed')).to.equal('true'); + }); +}); diff --git a/packages/action-button/test/benchmark/basic-test.ts b/packages/action-button/test/benchmark/basic-test.ts new file mode 100644 index 0000000000..550ad20710 --- /dev/null +++ b/packages/action-button/test/benchmark/basic-test.ts @@ -0,0 +1,19 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import '@spectrum-web-components/action-button/sp-action-button.js'; +import { html } from '@spectrum-web-components/base'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js'; + +measureFixtureCreation(html` + +`); diff --git a/packages/action-button/tsconfig.json b/packages/action-button/tsconfig.json new file mode 100644 index 0000000000..02e5666bbc --- /dev/null +++ b/packages/action-button/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "./" + }, + "include": ["*.ts", "src/*.ts"], + "exclude": ["test/*.ts", "stories/*.ts"], + "references": [{ "path": "../base" }, { "path": "../button" }] +} diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 40f965bcc4..5df3aa80c0 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -119,28 +119,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][compact]:not([quiet])) ::slotted(*:first-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ border-top-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ border-top-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='ltr'][compact]:not([quiet])) ::slotted(*:first-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ border-bottom-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ border-bottom-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -148,7 +148,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ margin-right: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -157,7 +157,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ margin-left: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -165,28 +165,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ border-top-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ border-top-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ border-bottom-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ border-bottom-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -194,7 +194,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-left: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -203,7 +203,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-right: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -232,7 +232,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -243,7 +243,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-right: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -252,7 +252,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -265,13 +265,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-top: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); margin-bottom: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -279,7 +279,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][compact][vertical]:not([quiet])) ::slotted(*:first-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child */ border-top-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -288,14 +288,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child, * [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child */ border-top-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact][vertical]:not([quiet])) ::slotted(*:first-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child */ border-top-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -304,7 +304,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: 0; margin-bottom: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); @@ -312,7 +312,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][compact][vertical]:not([quiet])) ::slotted(*:last-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child */ border-bottom-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -321,14 +321,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child, * [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child */ border-bottom-right-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } :host([dir='rtl'][compact][vertical]:not([quiet])) ::slotted(*:last-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child */ border-bottom-left-radius: var( - --spectrum-actionbutton-border-radius, + --spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular) ); } @@ -337,7 +337,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: 0; margin-top: calc( -1 * var( - --spectrum-actionbutton-border-size, + --spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin) ) / 2 ); diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css index 4228778415..cce19b0889 100644 --- a/packages/bar-loader/src/spectrum-bar-loader.css +++ b/packages/bar-loader/src/spectrum-bar-loader.css @@ -10,6 +10,115 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-ProgressBar--sizeS { + /* .spectrum-ProgressBar--sizeS */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-s-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-50); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2400, + 192px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1700 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-75 + ); +} +.spectrum-ProgressBar--sizeM { + /* .spectrum-ProgressBar--sizeM */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-m-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-75); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2400, + 192px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1700 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-100 + ); +} +.spectrum-ProgressBar--sizeL { + /* .spectrum-ProgressBar--sizeL */ + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-100); + --spectrum-progressbar-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2500, + 200px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1800 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); +} +.spectrum-ProgressBar--sizeXL { + /* .spectrum-ProgressBar--sizeXL */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-xl-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-125); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2800, + 224px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-2000 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-200 + ); +} :host { /* .spectrum-ProgressBar */ position: relative; @@ -17,35 +126,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-flow: row wrap; justify-content: space-between; align-items: center; + width: var(--spectrum-progressbar-width); vertical-align: top; } -:host, -.track { - /* .spectrum-ProgressBar, - * .spectrum-ProgressBar-track */ - width: var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ); -} .track { /* .spectrum-ProgressBar-track */ overflow: hidden; - border-radius: var(--spectrum-progressbar-large-border-radius); + width: 100%; + height: var(--spectrum-progressbar-height); + border-radius: var(--spectrum-progressbar-border-radius); z-index: 1; } -.fill, -.track { - /* .spectrum-ProgressBar-fill, - * .spectrum-ProgressBar-track */ - height: var( - --spectrum-progressbar-large-height, - var(--spectrum-global-dimension-size-75) - ); -} .fill { /* .spectrum-ProgressBar-fill */ border: none; + height: var(--spectrum-progressbar-height); transition: width 1s; } :host([dir='ltr']) .label, @@ -64,22 +159,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .percentage { /* .spectrum-ProgressBar-label, * .spectrum-ProgressBar-percentage */ - font-size: var( - --spectrum-fieldlabel-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-fieldlabel-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); - line-height: var( - --spectrum-fieldlabel-text-line-height, - var(--spectrum-global-font-line-height-small) - ); - margin-bottom: var( - --spectrum-progressbar-large-label-gap-y, - var(--spectrum-global-dimension-size-115) - ); + margin-bottom: var(--spectrum-progressbar-label-gap-y); } .label { /* .spectrum-ProgressBar-label */ @@ -87,17 +167,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .percentage { /* [dir=ltr] .spectrum-ProgressBar-percentage */ - margin-left: var( - --spectrum-progressbar-small-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl']) .percentage { /* [dir=rtl] .spectrum-ProgressBar-percentage */ - margin-right: var( - --spectrum-progressbar-small-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } .percentage { /* .spectrum-ProgressBar-percentage */ @@ -110,22 +184,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ justify-content: space-between; width: auto; } +:host([side-label]) .track { + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track */ + min-width: var(--spectrum-progressbar-width); + flex: 1 1 var(--spectrum-progressbar-width); +} :host([dir='ltr'][side-label]) .label { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ - margin-right: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl'][side-label]) .label { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ - margin-left: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([side-label]) .label { /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ + flex-grow: 0; margin-bottom: 0; } :host([dir='ltr'][side-label]) .percentage { @@ -138,164 +212,101 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][side-label]) .percentage { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - margin-left: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl'][side-label]) .percentage { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - margin-right: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } :host([side-label]) .percentage { /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ order: 3; margin-bottom: 0; } -:host([small]) { - /* .spectrum-ProgressBar--small */ - min-width: var( - --spectrum-progressbar-small-width, - var(--spectrum-global-dimension-size-2400) - ); -} -:host([small]) .fill, -:host([small]) .track { - /* .spectrum-ProgressBar--small .spectrum-ProgressBar-fill, - * .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ - height: var( - --spectrum-progressbar-small-height, - var(--spectrum-global-dimension-size-50) - ); -} -:host([small]) .track { - /* .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ - border-radius: var(--spectrum-progressbar-small-border-radius); -} :host([indeterminate]) .fill { /* .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ - width: var( - --spectrum-progressbar-large-indeterminate-fill-width, - var(--spectrum-global-dimension-size-1700) - ); + width: var(--spectrum-progressbar-indeterminate-fill-width); position: relative; animation-timing-function: var( - --spectrum-progressbar-large-indeterminate-animation-ease, - var(--spectrum-global-animation-ease-in-out) + --spectrum-progressbar-indeterminate-animation-ease ); will-change: transform; } :host([dir='ltr'][indeterminate]) .fill { /* [dir=ltr] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-ltr - var( - --spectrum-progressbar-large-indeterminate-duration, - var(--spectrum-global-animation-duration-2000) - ) - infinite; + var(--spectrum-progressbar-indeterminate-duration) infinite; } :host([dir='rtl'][indeterminate]) .fill { /* [dir=rtl] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-rtl - var( - --spectrum-progressbar-large-indeterminate-duration, - var(--spectrum-global-animation-duration-2000) - ) - infinite; + var(--spectrum-progressbar-indeterminate-duration) infinite; } @keyframes indeterminate-loop-ltr { 0% { transform: translate( - calc( - -1 * var(--spectrum-progressbar-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700)) - ) + calc(-1 * var(--spectrum-progressbar-indeterminate-fill-width)) ); } to { - transform: translate( - var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ) - ); + transform: translate(var(--spectrum-progressbar-width)); } } @keyframes indeterminate-loop-rtl { 0% { - transform: translate( - var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ) - ); + transform: translate(var(--spectrum-progressbar-width)); } to { - transform: translate( - calc( - -1 * var(--spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400)) - ) - ); + transform: translate(calc(-1 * var(--spectrum-progressbar-width))); } } .fill { /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-track-fill-color, - var(--spectrum-global-color-blue-500) - ); + background: var(--spectrum-global-color-blue-500); } .track { /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ background-color: var( - --spectrum-progressbar-large-track-color, - var(--spectrum-alias-track-color-default) + --spectrum-alias-track-color-default, + var(--spectrum-global-color-gray-300) ); } :host([over-background]) .fill { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-over-background-track-fill-color, - var(--spectrum-global-color-static-white) - ); + background: var(--spectrum-global-color-static-white, #fff); } :host([over-background]) .label, :host([over-background]) .percentage { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-label, * .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-percentage */ - color: var( - --spectrum-progressbar-large-over-background-track-fill-color, - var(--spectrum-global-color-static-white) - ); + color: var(--spectrum-global-color-static-white, #fff); } :host([over-background]) .track { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-track */ background-color: var( - --spectrum-progressbar-large-over-background-track-color, - var(--spectrum-alias-track-color-over-background) + --spectrum-alias-track-color-over-background, + hsla(0, 0%, 100%, 0.2) ); } :host([positive]) .fill { /* .spectrum-ProgressBar.is-positive .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-positive, - var(--spectrum-semantic-positive-color-status) + --spectrum-semantic-positive-color-status, + var(--spectrum-global-color-green-400) ); } -:host([warning]) .fill { - /* .spectrum-ProgressBar.is-warning .spectrum-ProgressBar-fill */ +:host(.is-notice) .fill { + /* .spectrum-ProgressBar.is-notice .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-warning, - var(--spectrum-semantic-notice-color-status) + --spectrum-semantic-notice-color-status, + var(--spectrum-global-color-orange-400) ); } -:host([critical]) .fill { - /* .spectrum-ProgressBar.is-critical .spectrum-ProgressBar-fill */ +:host(.is-negative) .fill { + /* .spectrum-ProgressBar.is-negative .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-critical, - var(--spectrum-semantic-negative-color-status) + --spectrum-semantic-negative-color-status, + var(--spectrum-global-color-red-400) ); } .label, @@ -303,7 +314,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ProgressBar-label, * .spectrum-ProgressBar-percentage */ color: var( - --spectrum-fieldlabel-text-color, - var(--spectrum-alias-label-text-color) + --spectrum-alias-label-text-color, + var(--spectrum-global-color-gray-700) ); } diff --git a/packages/bundle/elements.ts b/packages/bundle/elements.ts index 01f1d56a74..47d63e1907 100644 --- a/packages/bundle/elements.ts +++ b/packages/bundle/elements.ts @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/accordion/sp-accordion.js'; import '@spectrum-web-components/accordion/sp-accordion-item.js'; +import '@spectrum-web-components/action-button/sp-action-button.js'; import '@spectrum-web-components/action-group/sp-action-group.js'; import '@spectrum-web-components/action-menu/sp-action-menu.js'; import '@spectrum-web-components/actionbar/sp-actionbar.js'; @@ -19,7 +20,6 @@ import '@spectrum-web-components/avatar/sp-avatar.js'; import '@spectrum-web-components/banner/sp-banner.js'; import '@spectrum-web-components/bar-loader/sp-bar-loader.js'; import '@spectrum-web-components/button/sp-button.js'; -import '@spectrum-web-components/button/sp-action-button.js'; import '@spectrum-web-components/button/sp-clear-button.js'; import '@spectrum-web-components/button-group/sp-button-group.js'; import '@spectrum-web-components/card/sp-card.js'; diff --git a/packages/bundle/package.json b/packages/bundle/package.json index 51b8651f11..4f29c0b53a 100644 --- a/packages/bundle/package.json +++ b/packages/bundle/package.json @@ -50,6 +50,7 @@ "license": "Apache-2.0", "dependencies": { "@spectrum-web-components/accordion": "^0.1.4", + "@spectrum-web-components/action-button": "^0.0.1", "@spectrum-web-components/action-group": "^0.1.4", "@spectrum-web-components/action-menu": "^0.6.5", "@spectrum-web-components/actionbar": "^0.4.3", diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index 5a88369237..d1f9e671cc 100644 --- a/packages/bundle/src/index.ts +++ b/packages/bundle/src/index.ts @@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ export * from '@spectrum-web-components/accordion'; +export * from '@spectrum-web-components/action-button'; export * from '@spectrum-web-components/action-group'; export * from '@spectrum-web-components/action-menu'; export * from '@spectrum-web-components/actionbar'; diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json index d9c3e39aeb..4eb138725c 100644 --- a/packages/bundle/tsconfig.json +++ b/packages/bundle/tsconfig.json @@ -8,6 +8,7 @@ "exclude": ["test/*.ts", "stories/*.ts"], "references": [ { "path": "../accordion" }, + { "path": "../action-button" }, { "path": "../action-group" }, { "path": "../action-menu" }, { "path": "../actionbar" }, diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css index 759f5d9b1d..dd76314e61 100644 --- a/packages/button/src/spectrum-action-button.css +++ b/packages/button/src/spectrum-action-button.css @@ -10,926 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - /* .spectrum-ActionButton */ - position: relative; - height: var( - --spectrum-actionbutton-height, - var(--spectrum-alias-single-line-height) - ); - min-width: var( - --spectrum-actionbutton-min-width, - var(--spectrum-global-dimension-size-400) - ); - padding: 0 - calc( - var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ) - - var( - --spectrum-actionbutton-border-size, - var(--spectrum-alias-border-size-thin) - ) - ); - border-width: var( - --spectrum-actionbutton-border-size, - var(--spectrum-alias-border-size-thin) - ); - border-radius: var( - --spectrum-actionbutton-border-radius, - var(--spectrum-alias-border-radius-regular) - ); - font-size: var( - --spectrum-actionbutton-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-actionbutton-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); -} -:host([dir='ltr']) slot[name='icon'] + #label { - /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ - padding-left: var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ); -} -:host([dir='rtl']) slot[name='icon'] + #label { - /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ - padding-right: var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ); -} -:host([dir='ltr']) slot[name='icon'] + #label { - /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ - padding-right: calc( - var( - --spectrum-actionbutton-text-padding-x, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ) - ); -} -:host([dir='rtl']) slot[name='icon'] + #label { - /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ - padding-left: calc( - var( - --spectrum-actionbutton-text-padding-x, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ) - ); -} -:host([dir='ltr']) .spectrum-Icon--sizeS:only-child { - /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon--sizeS:only-child */ - left: calc( - 50% - - var( - --spectrum-actionbutton-icon-size, - var(--spectrum-alias-workflow-icon-size-m) - ) / 2 - ); -} -:host([dir='rtl']) .spectrum-Icon--sizeS:only-child { - /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon--sizeS:only-child */ - right: calc( - 50% - - var( - --spectrum-actionbutton-icon-size, - var(--spectrum-alias-workflow-icon-size-m) - ) / 2 - ); -} -.spectrum-Icon--sizeS:only-child { - /* .spectrum-ActionButton .spectrum-Icon--sizeS:only-child */ - position: absolute; - top: calc( - 50% - - var( - --spectrum-actionbutton-icon-size, - var(--spectrum-alias-workflow-icon-size-m) - ) / 2 - ); -} -#label:only-child { - /* .spectrum-ActionButton .spectrum-ActionButton-label:only-child */ - padding: 0 - calc( - var( - --spectrum-actionbutton-text-padding-x, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ) - ); -} -:host([dir='ltr']) #hold-affordance { - /* [dir=ltr] .spectrum-ActionButton-hold */ - right: var( - --spectrum-actionbutton-hold-icon-padding-right, - var(--spectrum-global-dimension-size-40) - ); -} -:host([dir='rtl']) #hold-affordance { - /* [dir=rtl] .spectrum-ActionButton-hold */ - left: var( - --spectrum-actionbutton-hold-icon-padding-right, - var(--spectrum-global-dimension-size-40) - ); - transform: matrix(-1, 0, 0, 1, 0, 0); -} -#hold-affordance { - /* .spectrum-ActionButton-hold */ - position: absolute; - bottom: var( - --spectrum-actionbutton-hold-icon-padding-bottom, - var(--spectrum-global-dimension-size-40) - ); -} -#label { - /* .spectrum-ActionButton-label, - * .spectrum-Button-label */ - align-self: center; - justify-self: center; - text-align: center; -} -#label:empty { - /* .spectrum-ActionButton-label:empty, - * .spectrum-Button-label:empty */ - display: none; -} -#label { - /* .spectrum-ActionButton-label */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -:host([quiet]) { - /* .spectrum-ActionButton--quiet */ - border-width: var( - --spectrum-actionbutton-quiet-border-size, - var(--spectrum-alias-border-size-thin) - ); - border-radius: var( - --spectrum-actionbutton-quiet-border-radius, - var(--spectrum-alias-border-radius-regular) - ); - font-size: var( - --spectrum-actionbutton-quiet-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-actionbutton-quiet-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); -} -:host { - /* .spectrum-ActionButton */ - background-color: var( - --spectrum-actionbutton-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-actionbutton-border-color, - var(--spectrum-alias-border-color) - ); - color: var( - --spectrum-actionbutton-text-color, - var(--spectrum-alias-text-color) - ); -} -::slotted([slot='icon']) { - /* .spectrum-ActionButton .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color, - var(--spectrum-alias-icon-color) - ); -} -#hold-affordance { - /* .spectrum-ActionButton .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color, - var(--spectrum-alias-icon-color) - ); -} -:host(:hover) { - /* .spectrum-ActionButton:hover */ - background-color: var( - --spectrum-actionbutton-background-color-hover, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-actionbutton-border-color-hover, - var(--spectrum-alias-border-color-hover) - ); - color: var( - --spectrum-actionbutton-text-color-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host(:hover) ::slotted([slot='icon']) { - /* .spectrum-ActionButton:hover .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host(:hover) #hold-affordance { - /* .spectrum-ActionButton:hover .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host(:focus-visible) { - /* .spectrum-ActionButton.focus-ring */ - background-color: var( - --spectrum-actionbutton-background-color-key-focus, - var(--spectrum-global-color-gray-50) - ); - box-shadow: 0 0 0 - var(--spectrum-button-primary-border-size-increase-key-focus, 1px) - var( - --spectrum-actionbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-actionbutton-text-color-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host(:focus-visible), -:host(:focus-visible[active]) { - /* .spectrum-ActionButton.focus-ring, - * .spectrum-ActionButton.focus-ring:active */ - border-color: var( - --spectrum-actionbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host(:focus-visible) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.focus-ring .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-key-focus, - var(--spectrum-alias-icon-color-focus) - ); -} -:host(:focus-visible) #hold-affordance { - /* .spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color-key-focus, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([active]) { - /* .spectrum-ActionButton:active */ - background-color: var( - --spectrum-actionbutton-background-color-down, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-down, - var(--spectrum-alias-border-color-down) - ); - color: var( - --spectrum-actionbutton-text-color-down, - var(--spectrum-alias-text-color-down) - ); -} -:host([active]) #hold-affordance { - /* .spectrum-ActionButton:active .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color-down, - var(--spectrum-alias-icon-color-down) - ); -} -:host([disabled]), -:host(:disabled) { - /* .spectrum-ActionButton.is-disabled, - * .spectrum-ActionButton:disabled */ - background-color: var( - --spectrum-actionbutton-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-disabled, - var(--spectrum-alias-border-color-disabled) - ); - color: var( - --spectrum-actionbutton-text-color-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host([disabled]) ::slotted([slot='icon']), -:host(:disabled) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-disabled .spectrum-Icon, - * .spectrum-ActionButton:disabled .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([disabled]) #hold-affordance, -:host(:disabled) #hold-affordance { - /* .spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold, - * .spectrum-ActionButton:disabled .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([selected]) { - /* .spectrum-ActionButton.is-selected */ - background-color: var( - --spectrum-actionbutton-background-color-selected, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-selected, - var(--spectrum-alias-border-color) - ); - color: var( - --spectrum-actionbutton-text-color-selected, - var(--spectrum-alias-text-color) - ); -} -:host([selected]) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-selected .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-selected, - var(--spectrum-alias-icon-color) - ); -} -:host([selected]:focus-visible) { - /* .spectrum-ActionButton.is-selected.focus-ring */ - background-color: var( - --spectrum-actionbutton-background-color-selected-key-focus, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-selected-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-actionbutton-text-color-selected-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host([selected]:focus-visible[active]) { - /* .spectrum-ActionButton.is-selected.focus-ring:active */ - border-color: var( - --spectrum-actionbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host([selected]:focus-visible) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-selected-key-focus, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([selected]:hover) { - /* .spectrum-ActionButton.is-selected:hover */ - background-color: var( - --spectrum-actionbutton-background-color-selected-hover, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-selected-hover, - var(--spectrum-alias-border-color-hover) - ); - color: var( - --spectrum-actionbutton-text-color-selected-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host([selected]:hover) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-selected:hover .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-selected-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([selected][active]) { - /* .spectrum-ActionButton.is-selected:active */ - background-color: var( - --spectrum-actionbutton-background-color-selected-down, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-selected-down, - var(--spectrum-alias-border-color-down) - ); - color: var( - --spectrum-actionbutton-text-color-selected-down, - var(--spectrum-alias-text-color-down) - ); -} -:host([selected][active]) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-selected:active .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-selected-down, - var(--spectrum-alias-icon-color-down) - ); -} -:host([selected][disabled]), -:host([selected]:disabled) { - /* .spectrum-ActionButton.is-selected.is-disabled, - * .spectrum-ActionButton.is-selected:disabled */ - background-color: var( - --spectrum-actionbutton-background-color-selected-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-border-color-selected-disabled, - var(--spectrum-alias-border-color-disabled) - ); - color: var( - --spectrum-actionbutton-text-color-selected-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host([selected][disabled]) ::slotted([slot='icon']), -:host([selected]:disabled) ::slotted([slot='icon']) { - /* .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon, - * .spectrum-ActionButton.is-selected:disabled .spectrum-Icon */ - color: var( - --spectrum-actionbutton-icon-color-selected-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([emphasized]) { - /* .spectrum-ActionButton--emphasized */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color, - var(--spectrum-alias-border-color) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color, - var(--spectrum-alias-text-color) - ); -} -:host([emphasized]) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color, - var(--spectrum-alias-icon-color) - ); -} -:host([emphasized]) #hold-affordance { - /* .spectrum-ActionButton--emphasized .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color, - var(--spectrum-alias-icon-color) - ); -} -:host([emphasized][selected]) #hold-affordance { - /* .spectrum-ActionButton--emphasized.is-selected .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color-selected, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]:hover) #hold-affordance { - /* .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-text-color-selected-hover, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized]:hover) { - /* .spectrum-ActionButton--emphasized:hover */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-hover, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-hover, - var(--spectrum-alias-border-color-hover) - ); - box-shadow: none; - color: var( - --spectrum-actionbutton-emphasized-text-color-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host([emphasized]:hover) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized:hover .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([emphasized]:hover) #hold-affordance { - /* .spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([emphasized]:focus-visible) { - /* .spectrum-ActionButton--emphasized.focus-ring */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-key-focus, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - box-shadow: 0 0 0 - var(--spectrum-button-primary-border-size-increase-key-focus, 1px) - var( - --spectrum-actionbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host([emphasized]:focus-visible) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-key-focus, - var(--spectrum-alias-icon-color-focus) - ); -} -:host([emphasized]:focus-visible) #hold-affordance { - /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color-key-focus, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([emphasized]) .is-active { - /* .spectrum-ActionButton--emphasized.is-active */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-down, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-down, - var(--spectrum-alias-border-color-down) - ); - box-shadow: none; - color: var( - --spectrum-actionbutton-emphasized-text-color-down, - var(--spectrum-alias-text-color-down) - ); -} -:host([emphasized]) .is-active #hold-affordance { - /* .spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color-down, - var(--spectrum-alias-icon-color-down) - ); -} -:host([emphasized][disabled]), -:host([emphasized]:disabled) { - /* .spectrum-ActionButton--emphasized.is-disabled, - * .spectrum-ActionButton--emphasized:disabled */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-disabled, - var(--spectrum-alias-border-color-disabled) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host([emphasized][disabled]) ::slotted([slot='icon']), -:host([emphasized]:disabled) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-disabled .spectrum-Icon, - * .spectrum-ActionButton--emphasized:disabled .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([emphasized][disabled]) #hold-affordance, -:host([emphasized]:disabled) #hold-affordance { - /* .spectrum-ActionButton--emphasized.is-disabled .spectrum-ActionButton-hold, - * .spectrum-ActionButton--emphasized:disabled .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-emphasized-hold-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([emphasized][selected]), -:host([emphasized][quiet][selected]) { - /* .spectrum-ActionButton--emphasized.is-selected, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-selected, - var(--spectrum-semantic-cta-color-background-default) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-selected, - var(--spectrum-semantic-cta-color-background-default) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-selected, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]) ::slotted([slot='icon']), -:host([emphasized][quiet][selected]) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-selected, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]:focus-visible), -:host([emphasized][quiet][selected]:focus-visible) { - /* .spectrum-ActionButton--emphasized.is-selected.focus-ring, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-selected-key-focus, - var(--spectrum-semantic-cta-color-background-key-focus) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-selected-key-focus, - var(--spectrum-semantic-cta-color-background-key-focus) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-selected-key-focus, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]:focus-visible) ::slotted([slot='icon']), -:host([emphasized][quiet][selected]:focus-visible) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-selected-key-focus, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]:hover), -:host([emphasized][quiet][selected]:hover) { - /* .spectrum-ActionButton--emphasized.is-selected:hover, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-selected-hover, - var(--spectrum-semantic-cta-color-background-hover) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-selected-hover, - var(--spectrum-semantic-cta-color-background-hover) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-selected-hover, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]:hover) ::slotted([slot='icon']), -:host([emphasized][quiet][selected]:hover) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-selected-hover, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]) .is-active, -:host([emphasized][quiet][selected]) .is-active { - /* .spectrum-ActionButton--emphasized.is-selected.is-active, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-selected-down, - var(--spectrum-semantic-cta-color-background-down) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-selected-down, - var(--spectrum-semantic-cta-color-background-down) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-selected-down, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected]) .is-active ::slotted([slot='icon']), -:host([emphasized][quiet][selected]) .is-active ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-selected-down, - var(--spectrum-global-color-static-white) - ); -} -:host([emphasized][selected][disabled]), -:host([emphasized][selected]:disabled), -:host([emphasized][quiet][selected][disabled]), -:host([emphasized][quiet][selected]:disabled) { - /* .spectrum-ActionButton--emphasized.is-selected.is-disabled, - * .spectrum-ActionButton--emphasized.is-selected:disabled, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled */ - background-color: var( - --spectrum-actionbutton-emphasized-background-color-selected-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-emphasized-border-color-selected-disabled, - var(--spectrum-alias-border-color-disabled) - ); - color: var( - --spectrum-actionbutton-emphasized-text-color-selected-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host([emphasized][selected][disabled]) ::slotted([slot='icon']), -:host([emphasized][selected]:disabled) ::slotted([slot='icon']), -:host([emphasized][quiet][selected][disabled]) ::slotted([slot='icon']), -:host([emphasized][quiet][selected]:disabled) ::slotted([slot='icon']) { - /* .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon, - * .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled .spectrum-Icon, - * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled .spectrum-Icon */ - color: var( - --spectrum-actionbutton-emphasized-icon-color-selected-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([quiet]) { - /* .spectrum-ActionButton--quiet */ - background-color: var( - --spectrum-actionbutton-quiet-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-actionbutton-quiet-text-color, - var(--spectrum-alias-text-color) - ); -} -:host([quiet]:hover) { - /* .spectrum-ActionButton--quiet:hover */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-hover, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host([quiet]:focus-visible) { - /* .spectrum-ActionButton--quiet.focus-ring */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-key-focus, - var(--spectrum-alias-background-color-transparent) - ); - box-shadow: 0 0 0 1px - var( - --spectrum-actionbutton-quiet-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host([quiet][active]) { - /* .spectrum-ActionButton--quiet:active */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-down, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-down, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-down, - var(--spectrum-alias-text-color-down) - ); -} -:host([quiet][disabled]), -:host([quiet]:disabled) { - /* .spectrum-ActionButton--quiet.is-disabled, - * .spectrum-ActionButton--quiet:disabled */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host([quiet][selected]) { - /* .spectrum-ActionButton--quiet.is-selected */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-selected, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-selected, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-selected, - var(--spectrum-alias-text-color) - ); -} -:host([quiet][selected]:focus-visible) { - /* .spectrum-ActionButton--quiet.is-selected.focus-ring */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-selected-key-focus, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-selected-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-selected-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host([quiet][selected]:hover) { - /* .spectrum-ActionButton--quiet.is-selected:hover */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-selected-hover, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-selected-hover, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-selected-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host([quiet][selected][active]) { - /* .spectrum-ActionButton--quiet.is-selected:active */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-selected-down, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-selected-down, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-selected-down, - var(--spectrum-alias-text-color-down) - ); -} -:host([quiet][selected][disabled]), -:host([quiet][selected]:disabled) { - /* .spectrum-ActionButton--quiet.is-selected.is-disabled, - * .spectrum-ActionButton--quiet.is-selected:disabled */ - background-color: var( - --spectrum-actionbutton-quiet-background-color-selected-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-actionbutton-quiet-border-color-selected-disabled, - var(--spectrum-alias-border-color-disabled) - ); - color: var( - --spectrum-actionbutton-quiet-text-color-selected-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} diff --git a/packages/button/src/spectrum-button-base.css b/packages/button/src/spectrum-button-base.css index dab506df4a..dd76314e61 100644 --- a/packages/button/src/spectrum-button-base.css +++ b/packages/button/src/spectrum-button-base.css @@ -10,77 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - /* .spectrum-ActionButton, - * .spectrum-Button, - * .spectrum-ClearButton, - * .spectrum-FieldButton, - * .spectrum-LogicButton */ - position: relative; - display: inline-flex; - box-sizing: border-box; - align-items: center; - justify-content: center; - overflow: visible; - margin: 0; - border-style: solid; - text-transform: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-appearance: button; - vertical-align: top; - 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; - text-decoration: none; - font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) - ); - line-height: 1.3; - -moz-user-select: none; - user-select: none; - -webkit-user-select: none; - touch-action: none; - cursor: pointer; -} -:host(:focus) { - /* .spectrum-ActionButton:focus, - * .spectrum-Button:focus, - * .spectrum-ClearButton:focus, - * .spectrum-FieldButton:focus, - * .spectrum-LogicButton:focus */ - outline: none; -} -:host(::-moz-focus-inner) { - /* .spectrum-ActionButton::-moz-focus-inner, - * .spectrum-Button::-moz-focus-inner, - * .spectrum-ClearButton::-moz-focus-inner, - * .spectrum-FieldButton::-moz-focus-inner, - * .spectrum-LogicButton::-moz-focus-inner */ - border: 0; - border-style: none; - padding: 0; - margin-top: -2px; - margin-bottom: -2px; -} -:host(:disabled) { - /* .spectrum-ActionButton:disabled, - * .spectrum-Button:disabled, - * .spectrum-ClearButton:disabled, - * .spectrum-FieldButton:disabled, - * .spectrum-LogicButton:disabled */ - cursor: default; -} -::slotted([slot='icon']) { - /* .spectrum-ActionButton .spectrum-Icon, - * .spectrum-Button .spectrum-Icon, - * .spectrum-ClearButton .spectrum-Icon, - * .spectrum-FieldButton .spectrum-Icon, - * .spectrum-LogicButton .spectrum-Icon */ - max-height: 100%; - flex-shrink: 0; -} diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 15cc26f126..9eaf0caf73 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -10,15 +10,74 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-Button, + * .spectrum-ClearButton, + * .spectrum-LogicButton */ + position: relative; + display: inline-flex; + box-sizing: border-box; + align-items: center; + justify-content: center; + overflow: visible; + margin: 0; + border-style: solid; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-appearance: button; + vertical-align: top; + 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; + text-decoration: none; + font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) + ); + line-height: 1.3; + -moz-user-select: none; + user-select: none; + -webkit-user-select: none; + touch-action: none; + cursor: pointer; +} +:host(:focus) { + /* .spectrum-Button:focus, + * .spectrum-ClearButton:focus, + * .spectrum-LogicButton:focus */ + outline: none; +} +:host(::-moz-focus-inner) { + /* .spectrum-Button::-moz-focus-inner, + * .spectrum-ClearButton::-moz-focus-inner, + * .spectrum-LogicButton::-moz-focus-inner */ + border: 0; + border-style: none; + padding: 0; + margin-top: -2px; + margin-bottom: -2px; +} +:host(:disabled) { + /* .spectrum-Button:disabled, + * .spectrum-ClearButton:disabled, + * .spectrum-LogicButton:disabled */ + cursor: default; +} +::slotted([slot='icon']) { + /* .spectrum-Button .spectrum-Icon */ + max-height: 100%; + flex-shrink: 0; +} :host:after { /* .spectrum-Button:after, * .spectrum-ClearButton:after, * .spectrum-LogicButton:after */ border-radius: calc( - var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ) + + var(--spectrum-button-primary-border-radius) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) @@ -52,94 +111,329 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) * -2 ); } +#label { + /* .spectrum-Button-label */ + align-self: center; + justify-self: center; + text-align: center; +} +#label:empty { + /* .spectrum-Button-label:empty */ + display: none; +} +.spectrum-Button--sizeS { + /* .spectrum-Button--sizeS */ + --spectrum-button-primary-focus-ring-size-key-focus: var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-font-weight: var( + --spectrum-global-font-weight-bold, + 700 + ); + --spectrum-button-primary-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-button-primary-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-size: var( + --spectrum-alias-item-text-size-s, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-button-primary-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-s, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-button-primary-height: var( + --spectrum-alias-item-height-s, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-button-primary-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-s, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-button-primary-padding-right: var( + --spectrum-alias-item-rounded-padding-s, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-button-primary-border-radius: var( + --spectrum-alias-item-rounded-border-radius-s, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-button-primary-min-width: var( + --spectrum-global-dimension-size-675 + ); + --spectrum-button-primary-textonly-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-s, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-button-primary-textonly-padding-right: var( + --spectrum-alias-item-rounded-workflow-padding-left-s, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-button-primary-text-padding-top: calc( + var( + --spectrum-alias-item-text-padding-top-s, + var(--spectrum-global-dimension-static-size-50) + ) - 3px + ); +} +.spectrum-Button--sizeM { + /* .spectrum-Button--sizeM */ + --spectrum-button-primary-min-width: var( + --spectrum-button-primary-m-min-width + ); + --spectrum-button-primary-focus-ring-size-key-focus: var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-font-weight: var( + --spectrum-global-font-weight-bold, + 700 + ); + --spectrum-button-primary-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-button-primary-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-button-primary-text-padding-top: var( + --spectrum-alias-item-text-padding-top-m, + var(--spectrum-global-dimension-size-75) + ); + --spectrum-button-primary-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-button-primary-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-button-primary-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-m + ); + --spectrum-button-primary-padding-right: var( + --spectrum-alias-item-rounded-padding-m, + var(--spectrum-global-dimension-size-200) + ); + --spectrum-button-primary-border-radius: var( + --spectrum-alias-item-rounded-border-radius-m, + var(--spectrum-global-dimension-size-200) + ); + --spectrum-button-primary-textonly-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-m + ); + --spectrum-button-primary-textonly-padding-right: var( + --spectrum-alias-item-rounded-workflow-padding-left-m + ); +} +.spectrum-Button--sizeL { + /* .spectrum-Button--sizeL */ + --spectrum-button-primary-focus-ring-size-key-focus: var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-font-weight: var( + --spectrum-global-font-weight-bold, + 700 + ); + --spectrum-button-primary-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-button-primary-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-size: var( + --spectrum-alias-item-text-size-l, + var(--spectrum-global-dimension-font-size-200) + ); + --spectrum-button-primary-text-padding-top: var( + --spectrum-alias-item-text-padding-top-l + ); + --spectrum-button-primary-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-l, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-button-primary-height: var( + --spectrum-alias-item-height-l, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-button-primary-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-l, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-button-primary-padding-right: var( + --spectrum-alias-item-rounded-padding-l, + var(--spectrum-global-dimension-size-250) + ); + --spectrum-button-primary-border-radius: var( + --spectrum-alias-item-rounded-border-radius-l, + var(--spectrum-global-dimension-size-250) + ); + --spectrum-button-primary-min-width: var( + --spectrum-global-dimension-size-1125 + ); + --spectrum-button-primary-textonly-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-l, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-button-primary-textonly-padding-right: var( + --spectrum-alias-item-rounded-workflow-padding-left-l, + var(--spectrum-global-dimension-size-225) + ); +} +.spectrum-Button--sizeXL { + /* .spectrum-Button--sizeXL */ + --spectrum-button-primary-focus-ring-size-key-focus: var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-text-font-weight: var( + --spectrum-global-font-weight-bold, + 700 + ); + --spectrum-button-primary-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-button-primary-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-button-primary-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-l, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-button-primary-text-size: var( + --spectrum-alias-item-text-size-xl, + var(--spectrum-global-dimension-font-size-300) + ); + --spectrum-button-primary-text-padding-top: var( + --spectrum-alias-item-text-padding-top-xl, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-button-primary-height: var( + --spectrum-alias-item-height-xl, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-button-primary-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-xl + ); + --spectrum-button-primary-padding-right: var( + --spectrum-alias-item-rounded-padding-xl, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-button-primary-border-radius: var( + --spectrum-alias-item-rounded-border-radius-xl, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-button-primary-min-width: var( + --spectrum-global-dimension-size-1250 + ); + --spectrum-button-primary-textonly-padding-left: var( + --spectrum-alias-item-rounded-workflow-padding-left-xl + ); + --spectrum-button-primary-textonly-padding-right: var( + --spectrum-alias-item-rounded-workflow-padding-left-xl + ); +} :host { /* .spectrum-Button */ - border-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-primary-padding-left-adjusted: calc( + var(--spectrum-button-primary-padding-left) - + var(--spectrum-button-primary-border-size) ); - border-style: solid; - border-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) + --spectrum-button-primary-textonly-padding-left-adjusted: calc( + var(--spectrum-button-primary-textonly-padding-left) - + var(--spectrum-button-primary-border-size) ); - min-height: var( - --spectrum-button-primary-height, - var(--spectrum-alias-single-line-height) + --spectrum-button-primary-textonly-padding-right-adjusted: calc( + var(--spectrum-button-primary-textonly-padding-right) - + var(--spectrum-button-primary-border-size) ); - height: auto; - min-width: var(--spectrum-button-primary-min-width); - padding: var(--spectrum-global-dimension-size-50) - calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); - padding-bottom: calc(var(--spectrum-global-dimension-size-50) + 1px); - padding-top: calc(var(--spectrum-global-dimension-size-50) - 1px); - font-size: var( - --spectrum-button-primary-text-size, - var(--spectrum-alias-pill-button-text-size) + --spectrum-button-padding-y: calc( + var(--spectrum-button-primary-text-padding-top) - 1px + ); +} +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-Button */ + padding-left: var(--spectrum-button-primary-textonly-padding-left-adjusted); + padding-right: var( + --spectrum-button-primary-textonly-padding-right-adjusted + ); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-Button */ + padding-right: var( + --spectrum-button-primary-textonly-padding-left-adjusted ); - font-weight: var( - --spectrum-button-primary-text-font-weight, - var(--spectrum-global-font-weight-bold) + padding-left: var( + --spectrum-button-primary-textonly-padding-right-adjusted ); } +:host { + /* .spectrum-Button */ + border-width: var(--spectrum-button-primary-border-size); + border-style: solid; + border-radius: var(--spectrum-button-primary-border-radius); + min-height: var(--spectrum-button-primary-height); + height: auto; + min-width: var(--spectrum-button-primary-min-width); + padding-bottom: calc(var(--spectrum-button-padding-y) + 1px); + padding-top: calc(var(--spectrum-button-padding-y) - 1px); + font-size: var(--spectrum-button-primary-text-size); + font-weight: var(--spectrum-button-primary-text-font-weight); +} :host([active]), :host(:hover) { /* .spectrum-Button:active, * .spectrum-Button:hover */ box-shadow: none; } +:host([dir='ltr']) ::slotted([slot='icon']) { + /* [dir=ltr] .spectrum-Button .spectrum-Icon */ + margin-left: calc( + -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - + var(--spectrum-button-primary-padding-left-adjusted)) + ); +} +:host([dir='rtl']) ::slotted([slot='icon']) { + /* [dir=rtl] .spectrum-Button .spectrum-Icon */ + margin-right: calc( + -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - + var(--spectrum-button-primary-padding-left-adjusted)) + ); +} :host([dir='ltr']) slot[name='icon'] + #label { /* [dir=ltr] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ - margin-left: var( - --spectrum-button-primary-text-gap, - var(--spectrum-global-dimension-size-100) - ); + padding-left: var(--spectrum-button-primary-icon-gap); } :host([dir='rtl']) slot[name='icon'] + #label { /* [dir=rtl] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ - margin-right: var( - --spectrum-button-primary-text-gap, - var(--spectrum-global-dimension-size-100) - ); + padding-right: var(--spectrum-button-primary-icon-gap); } -:host([dir='ltr']) #label + ::slotted([slot='icon']) { - /* [dir=ltr] .spectrum-Button .spectrum-Button-label+.spectrum-Icon */ - margin-left: calc( - var( - --spectrum-button-primary-text-gap, - var(--spectrum-global-dimension-size-100) - ) / 2 - ); +:host([dir='ltr']) slot[name='icon'] + #label { + /* [dir=ltr] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ + padding-right: 0; } -:host([dir='rtl']) #label + ::slotted([slot='icon']) { - /* [dir=rtl] .spectrum-Button .spectrum-Button-label+.spectrum-Icon */ - margin-right: calc( - var( - --spectrum-button-primary-text-gap, - var(--spectrum-global-dimension-size-100) - ) / 2 - ); +:host([dir='rtl']) slot[name='icon'] + #label { + /* [dir=rtl] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ + padding-left: 0; } #label { - /* .spectrum-ActionButton-label, - * .spectrum-Button-label */ - align-self: center; - justify-self: center; - text-align: center; -} -#label:empty { - /* .spectrum-ActionButton-label:empty, - * .spectrum-Button-label:empty */ - display: none; + /* .spectrum-Button-label */ + line-height: var(--spectrum-button-primary-text-line-height); } :host(:focus-visible):after, :host([focused]):after { @@ -147,351 +441,178 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Button.is-focused:after, * .spectrum-LogicButton.focus-ring:after, * .spectrum-LogicButton.is-focused:after */ - box-shadow: 0 0 0 + box-shadow: 0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus) var( - --spectrum-button-primary-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) - ) - var( - --spectrum-button-primary-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + --spectrum-alias-focus-ring-color, + var(--spectrum-alias-focus-color) ); } :host([variant='cta']) { /* .spectrum-Button--cta */ background-color: var( - --spectrum-button-cta-background-color, - var(--spectrum-semantic-cta-color-background-default) + --spectrum-semantic-cta-color-background-default, + var(--spectrum-global-color-static-blue-600) ); border-color: var( - --spectrum-button-cta-border-color, - var(--spectrum-semantic-cta-color-background-default) - ); - color: var( - --spectrum-button-cta-text-color, - var(--spectrum-global-color-static-white) + --spectrum-semantic-cta-color-background-default, + var(--spectrum-global-color-static-blue-600) ); + color: var(--spectrum-global-color-static-white, #fff); } +:host([variant='cta']:focus-visible), :host([variant='cta']:hover) { - /* .spectrum-Button--cta:hover */ + /* .spectrum-Button--cta.focus-ring, + * .spectrum-Button--cta:hover */ background-color: var( - --spectrum-button-cta-background-color-hover, - var(--spectrum-semantic-cta-color-background-hover) + --spectrum-semantic-cta-color-background-hover, + var(--spectrum-global-color-static-blue-700) ); border-color: var( - --spectrum-button-cta-border-color-hover, - var(--spectrum-semantic-cta-color-background-hover) - ); - color: var( - --spectrum-button-cta-text-color-hover, - var(--spectrum-global-color-static-white) - ); -} -:host([variant='cta']:focus-visible) { - /* .spectrum-Button--cta.focus-ring */ - background-color: var( - --spectrum-button-cta-background-color-key-focus, - var(--spectrum-semantic-cta-color-background-hover) - ); - border-color: var( - --spectrum-button-cta-border-color-key-focus, - var(--spectrum-semantic-cta-color-background-hover) - ); - color: var( - --spectrum-button-cta-text-color-key-focus, - var(--spectrum-global-color-static-white) + --spectrum-semantic-cta-color-background-hover, + var(--spectrum-global-color-static-blue-700) ); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='cta'][active]) { /* .spectrum-Button--cta:active */ background-color: var( - --spectrum-button-cta-background-color-down, - var(--spectrum-semantic-cta-color-background-down) + --spectrum-semantic-cta-color-background-down, + var(--spectrum-global-color-static-blue-800) ); border-color: var( - --spectrum-button-cta-border-color-down, - var(--spectrum-semantic-cta-color-background-down) - ); - color: var( - --spectrum-button-cta-text-color-down, - var(--spectrum-global-color-static-white) + --spectrum-semantic-cta-color-background-down, + var(--spectrum-global-color-static-blue-800) ); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='cta'][disabled]), :host([variant='cta']:disabled) { /* .spectrum-Button--cta.is-disabled, * .spectrum-Button--cta:disabled */ - background-color: var( - --spectrum-button-cta-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-cta-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-cta-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-500); } :host([variant='primary']) { /* .spectrum-Button--primary */ background-color: var( - --spectrum-button-primary-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-primary-border-color, - var(--spectrum-global-color-gray-800) - ); - color: var( - --spectrum-button-primary-text-color, - var(--spectrum-global-color-gray-800) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-global-color-gray-800); + color: var(--spectrum-global-color-gray-800); } +:host([variant='primary']:focus-visible), :host([variant='primary']:hover) { - /* .spectrum-Button--primary:hover */ - background-color: var( - --spectrum-button-primary-background-color-hover, - var(--spectrum-global-color-gray-800) - ); - border-color: var( - --spectrum-button-primary-border-color-hover, - var(--spectrum-global-color-gray-800) - ); - color: var( - --spectrum-button-primary-text-color-hover, - var(--spectrum-global-color-gray-50) - ); -} -:host([variant='primary']:focus-visible) { - /* .spectrum-Button--primary.focus-ring */ - background-color: var( - --spectrum-button-primary-background-color-key-focus, - var(--spectrum-global-color-gray-800) - ); - border-color: var( - --spectrum-button-primary-border-color-key-focus, - var(--spectrum-global-color-gray-800) - ); - color: var( - --spectrum-button-primary-text-color-key-focus, - var(--spectrum-global-color-gray-50) - ); + /* .spectrum-Button--primary.focus-ring, + * .spectrum-Button--primary:hover */ + background-color: var(--spectrum-global-color-gray-800); + border-color: var(--spectrum-global-color-gray-800); + color: var(--spectrum-global-color-gray-50); } :host([variant='primary'][active]) { /* .spectrum-Button--primary:active */ - background-color: var( - --spectrum-button-primary-background-color-down, - var(--spectrum-global-color-gray-900) - ); - border-color: var( - --spectrum-button-primary-border-color-down, - var(--spectrum-global-color-gray-900) - ); - color: var( - --spectrum-button-primary-text-color-down, - var(--spectrum-global-color-gray-50) - ); + background-color: var(--spectrum-global-color-gray-900); + border-color: var(--spectrum-global-color-gray-900); + color: var(--spectrum-global-color-gray-50); } :host([variant='primary'][disabled]), :host([variant='primary']:disabled) { /* .spectrum-Button--primary.is-disabled, * .spectrum-Button--primary:disabled */ - background-color: var( - --spectrum-button-primary-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-primary-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-primary-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-500); } :host([variant='secondary']) { /* .spectrum-Button--secondary */ background-color: var( - --spectrum-button-secondary-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-secondary-border-color, - var(--spectrum-global-color-gray-700) - ); - color: var( - --spectrum-button-secondary-text-color, - var(--spectrum-global-color-gray-700) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-global-color-gray-700); + color: var(--spectrum-global-color-gray-700); } +:host([variant='secondary']:focus-visible), :host([variant='secondary']:hover) { - /* .spectrum-Button--secondary:hover */ - background-color: var( - --spectrum-button-secondary-background-color-hover, - var(--spectrum-global-color-gray-700) - ); - border-color: var( - --spectrum-button-secondary-border-color-hover, - var(--spectrum-global-color-gray-700) - ); - color: var( - --spectrum-button-secondary-text-color-hover, - var(--spectrum-global-color-gray-50) - ); -} -:host([variant='secondary']:focus-visible) { - /* .spectrum-Button--secondary.focus-ring */ - background-color: var( - --spectrum-button-secondary-background-color-key-focus, - var(--spectrum-global-color-gray-700) - ); - border-color: var( - --spectrum-button-secondary-border-color-key-focus, - var(--spectrum-global-color-gray-700) - ); - color: var( - --spectrum-button-secondary-text-color-key-focus, - var(--spectrum-global-color-gray-50) - ); + /* .spectrum-Button--secondary.focus-ring, + * .spectrum-Button--secondary:hover */ + background-color: var(--spectrum-global-color-gray-700); + border-color: var(--spectrum-global-color-gray-700); + color: var(--spectrum-global-color-gray-50); } :host([variant='secondary'][active]) { /* .spectrum-Button--secondary:active */ - background-color: var( - --spectrum-button-secondary-background-color-down, - var(--spectrum-global-color-gray-800) - ); - border-color: var( - --spectrum-button-secondary-border-color-down, - var(--spectrum-global-color-gray-800) - ); - color: var( - --spectrum-button-secondary-text-color-down, - var(--spectrum-global-color-gray-50) - ); + background-color: var(--spectrum-global-color-gray-800); + border-color: var(--spectrum-global-color-gray-800); + color: var(--spectrum-global-color-gray-50); } :host([variant='secondary'][disabled]), :host([variant='secondary']:disabled) { /* .spectrum-Button--secondary.is-disabled, * .spectrum-Button--secondary:disabled */ - background-color: var( - --spectrum-button-secondary-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-secondary-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-secondary-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-500); } :host([variant='negative']) { /* .spectrum-Button--warning */ background-color: var( - --spectrum-button-warning-background-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); border-color: var( - --spectrum-button-warning-border-color, - var(--spectrum-semantic-negative-color-text-small) + --spectrum-semantic-negative-color-text-small, + var(--spectrum-global-color-red-600) ); color: var( - --spectrum-button-warning-text-color, - var(--spectrum-semantic-negative-color-text-small) + --spectrum-semantic-negative-color-text-small, + var(--spectrum-global-color-red-600) ); } +:host([variant='negative']:focus-visible), :host([variant='negative']:hover) { - /* .spectrum-Button--warning:hover */ + /* .spectrum-Button--warning.focus-ring, + * .spectrum-Button--warning:hover */ background-color: var( - --spectrum-button-warning-background-color-hover, - var(--spectrum-semantic-negative-color-text-small) + --spectrum-semantic-negative-color-text-small, + var(--spectrum-global-color-red-600) ); border-color: var( - --spectrum-button-warning-border-color-hover, - var(--spectrum-semantic-negative-color-text-small) - ); - color: var( - --spectrum-button-warning-text-color-hover, - var(--spectrum-global-color-gray-50) - ); -} -:host([variant='negative']:focus-visible) { - /* .spectrum-Button--warning.focus-ring */ - background-color: var( - --spectrum-button-warning-background-color-key-focus, - var(--spectrum-semantic-negative-color-text-small) - ); - border-color: var( - --spectrum-button-warning-border-color-key-focus, - var(--spectrum-semantic-negative-color-text-small) - ); - color: var( - --spectrum-button-warning-text-color-key-focus, - var(--spectrum-global-color-gray-50) + --spectrum-semantic-negative-color-text-small, + var(--spectrum-global-color-red-600) ); + color: var(--spectrum-global-color-gray-50); } :host([variant='negative'][active]) { /* .spectrum-Button--warning:active */ - background-color: var( - --spectrum-button-warning-background-color-down, - var(--spectrum-global-color-red-700) - ); - border-color: var( - --spectrum-button-warning-border-color-down, - var(--spectrum-global-color-red-700) - ); - color: var( - --spectrum-button-warning-text-color-down, - var(--spectrum-global-color-gray-50) - ); + background-color: var(--spectrum-global-color-red-700); + border-color: var(--spectrum-global-color-red-700); + color: var(--spectrum-global-color-gray-50); } :host([variant='negative'][disabled]), :host([variant='negative']:disabled) { /* .spectrum-Button--warning.is-disabled, * .spectrum-Button--warning:disabled */ - background-color: var( - --spectrum-button-warning-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-warning-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-warning-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-500); } :host([variant='overBackground']) { /* .spectrum-Button--overBackground */ background-color: var( - --spectrum-button-over-background-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-over-background-border-color, - var(--spectrum-global-color-static-white) - ); - color: var( - --spectrum-button-over-background-text-color, - var(--spectrum-global-color-static-white) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-global-color-static-white, #fff); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground']:focus-visible), :host([variant='overBackground']:hover) { /* .spectrum-Button--overBackground.focus-ring, * .spectrum-Button--overBackground:hover */ - background-color: var( - --spectrum-button-over-background-background-color-hover, - var(--spectrum-global-color-static-white) - ); - border-color: var( - --spectrum-button-over-background-border-color-hover, - var(--spectrum-global-color-static-white) - ); + background-color: var(--spectrum-global-color-static-white, #fff); + border-color: var(--spectrum-global-color-static-white, #fff); color: inherit; } :host([variant='overBackground']:focus-visible):after { @@ -501,55 +622,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25) ) - var( - --spectrum-button-over-background-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); + var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][active]) { /* .spectrum-Button--overBackground:active */ - background-color: var( - --spectrum-button-over-background-background-color-down, - var(--spectrum-global-color-static-white) - ); - border-color: var( - --spectrum-button-over-background-border-color-down, - var(--spectrum-global-color-static-white) - ); + background-color: var(--spectrum-global-color-static-white, #fff); + border-color: var(--spectrum-global-color-static-white, #fff); color: inherit; } :host([variant='overBackground'][disabled]), :host([variant='overBackground']:disabled) { /* .spectrum-Button--overBackground.is-disabled, * .spectrum-Button--overBackground:disabled */ - background-color: var( - --spectrum-button-over-background-background-color-disabled, - hsla(0, 0%, 100%, 0.1) - ); - border-color: var( - --spectrum-button-over-background-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-over-background-text-color-disabled, - hsla(0, 0%, 100%, 0.35) - ); + background-color: hsla(0, 0%, 100%, 0.1); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: hsla(0, 0%, 100%, 0.35); } :host([variant='overBackground'][quiet]) { /* .spectrum-Button--overBackground.spectrum-Button--quiet, * .spectrum-ClearButton--overBackground */ background-color: var( - --spectrum-button-quiet-over-background-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color, - var(--spectrum-global-color-static-white) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][quiet]:focus-visible), :host([variant='overBackground'][quiet]:hover) { @@ -557,18 +654,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Button--overBackground.spectrum-Button--quiet:hover, * .spectrum-ClearButton--overBackground.focus-ring, * .spectrum-ClearButton--overBackground:hover */ - background-color: var( - --spectrum-button-quiet-over-background-background-color-hover, - hsla(0, 0%, 100%, 0.1) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-hover, - var(--spectrum-global-color-static-white) - ); + background-color: hsla(0, 0%, 100%, 0.1); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][quiet]:focus-visible) { /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, @@ -583,26 +671,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25) ) - var( - --spectrum-button-over-background-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); + var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][quiet][active]) { /* .spectrum-Button--overBackground.spectrum-Button--quiet:active, * .spectrum-ClearButton--overBackground:active */ - background-color: var( - --spectrum-button-quiet-over-background-background-color-down, - hsla(0, 0%, 100%, 0.15) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-down, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-down, - var(--spectrum-global-color-static-white) - ); + background-color: hsla(0, 0%, 100%, 0.2); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][quiet][disabled]), :host([variant='overBackground'][quiet]:disabled) { @@ -611,246 +687,114 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-ClearButton--overBackground.is-disabled, * .spectrum-ClearButton--overBackground:disabled */ background-color: var( - --spectrum-button-quiet-over-background-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-disabled, - hsla(0, 0%, 100%, 0.15) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: hsla(0, 0%, 100%, 0.15); } :host([variant='primary'][quiet]) { /* .spectrum-Button--primary.spectrum-Button--quiet */ background-color: var( - --spectrum-button-quiet-primary-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-primary-border-color, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-primary-text-color, - var(--spectrum-global-color-gray-800) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-gray-800); } +:host([variant='primary'][quiet]:focus-visible), :host([variant='primary'][quiet]:hover) { - /* .spectrum-Button--primary.spectrum-Button--quiet:hover */ - background-color: var( - --spectrum-button-quiet-primary-background-color-hover, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-primary-border-color-hover, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-primary-text-color-hover, - var(--spectrum-global-color-gray-900) - ); -} -:host([variant='primary'][quiet]:focus-visible) { - /* .spectrum-Button--primary.spectrum-Button--quiet.focus-ring */ - background-color: var( - --spectrum-button-quiet-primary-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-primary-border-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-primary-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); + /* .spectrum-Button--primary.spectrum-Button--quiet.focus-ring, + * .spectrum-Button--primary.spectrum-Button--quiet:hover */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-900); } :host([variant='primary'][quiet][active]) { /* .spectrum-Button--primary.spectrum-Button--quiet:active */ - background-color: var( - --spectrum-button-quiet-primary-background-color-down, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-button-quiet-primary-border-color-down, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-button-quiet-primary-text-color-down, - var(--spectrum-global-color-gray-900) - ); + background-color: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-300); + color: var(--spectrum-global-color-gray-900); } :host([variant='primary'][quiet][disabled]), :host([variant='primary'][quiet]:disabled) { /* .spectrum-Button--primary.spectrum-Button--quiet.is-disabled, * .spectrum-Button--primary.spectrum-Button--quiet:disabled */ background-color: var( - --spectrum-button-quiet-primary-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-primary-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-primary-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-gray-500); } :host([variant='secondary'][quiet]) { /* .spectrum-Button--secondary.spectrum-Button--quiet */ background-color: var( - --spectrum-button-quiet-secondary-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-secondary-border-color, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-secondary-text-color, - var(--spectrum-global-color-gray-700) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-gray-700); } +:host([variant='secondary'][quiet]:focus-visible), :host([variant='secondary'][quiet]:hover) { - /* .spectrum-Button--secondary.spectrum-Button--quiet:hover */ - background-color: var( - --spectrum-button-quiet-secondary-background-color-hover, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-secondary-border-color-hover, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-secondary-text-color-hover, - var(--spectrum-global-color-gray-800) - ); -} -:host([variant='secondary'][quiet]:focus-visible) { - /* .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring */ - background-color: var( - --spectrum-button-quiet-secondary-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-secondary-border-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-secondary-text-color-key-focus, - var(--spectrum-global-color-gray-800) - ); + /* .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring, + * .spectrum-Button--secondary.spectrum-Button--quiet:hover */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-gray-800); } :host([variant='secondary'][quiet][active]) { /* .spectrum-Button--secondary.spectrum-Button--quiet:active */ - background-color: var( - --spectrum-button-quiet-secondary-background-color-down, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-button-quiet-secondary-border-color-down, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-button-quiet-secondary-text-color-down, - var(--spectrum-global-color-gray-800) - ); + background-color: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-300); + color: var(--spectrum-global-color-gray-800); } :host([variant='secondary'][quiet][disabled]), :host([variant='secondary'][quiet]:disabled) { /* .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled, * .spectrum-Button--secondary.spectrum-Button--quiet:disabled */ background-color: var( - --spectrum-button-quiet-secondary-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-secondary-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-secondary-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-gray-500); } :host([variant='negative'][quiet]) { /* .spectrum-Button--warning.spectrum-Button--quiet */ background-color: var( - --spectrum-button-quiet-warning-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-warning-border-color, - var(--spectrum-alias-border-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); color: var( - --spectrum-button-quiet-warning-text-color, - var(--spectrum-semantic-negative-color-text-small) + --spectrum-semantic-negative-color-text-small, + var(--spectrum-global-color-red-600) ); } +:host([variant='negative'][quiet]:focus-visible), :host([variant='negative'][quiet]:hover) { - /* .spectrum-Button--warning.spectrum-Button--quiet:hover */ - background-color: var( - --spectrum-button-quiet-warning-background-color-hover, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-warning-border-color-hover, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-warning-text-color-hover, - var(--spectrum-global-color-red-700) - ); -} -:host([variant='negative'][quiet]:focus-visible) { - /* .spectrum-Button--warning.spectrum-Button--quiet.focus-ring */ - background-color: var( - --spectrum-button-quiet-warning-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-button-quiet-warning-border-color-key-focus, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-quiet-warning-text-color-key-focus, - var(--spectrum-global-color-red-700) - ); + /* .spectrum-Button--warning.spectrum-Button--quiet.focus-ring, + * .spectrum-Button--warning.spectrum-Button--quiet:hover */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-global-color-gray-200); + color: var(--spectrum-global-color-red-700); } :host([variant='negative'][quiet][active]) { /* .spectrum-Button--warning.spectrum-Button--quiet:active */ - background-color: var( - --spectrum-button-quiet-warning-background-color-down, - var(--spectrum-global-color-gray-300) - ); - border-color: var( - --spectrum-button-quiet-warning-border-color-down, - var(--spectrum-global-color-gray-300) - ); - color: var( - --spectrum-button-quiet-warning-text-color-down, - var(--spectrum-global-color-red-700) - ); + background-color: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-300); + color: var(--spectrum-global-color-red-700); } :host([variant='negative'][quiet][disabled]), :host([variant='negative'][quiet]:disabled) { /* .spectrum-Button--warning.spectrum-Button--quiet.is-disabled, * .spectrum-Button--warning.spectrum-Button--quiet:disabled */ background-color: var( - --spectrum-button-quiet-warning-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-warning-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-warning-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-gray-500); } diff --git a/packages/button/src/spectrum-clear-button.css b/packages/button/src/spectrum-clear-button.css index b5b9a7feea..82d00e0d00 100644 --- a/packages/button/src/spectrum-clear-button.css +++ b/packages/button/src/spectrum-clear-button.css @@ -10,15 +10,69 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-Button, + * .spectrum-ClearButton, + * .spectrum-LogicButton */ + position: relative; + display: inline-flex; + box-sizing: border-box; + align-items: center; + justify-content: center; + overflow: visible; + margin: 0; + border-style: solid; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-appearance: button; + vertical-align: top; + 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; + text-decoration: none; + font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) + ); + line-height: 1.3; + -moz-user-select: none; + user-select: none; + -webkit-user-select: none; + touch-action: none; + cursor: pointer; +} +:host(:focus) { + /* .spectrum-Button:focus, + * .spectrum-ClearButton:focus, + * .spectrum-LogicButton:focus */ + outline: none; +} +:host(::-moz-focus-inner) { + /* .spectrum-Button::-moz-focus-inner, + * .spectrum-ClearButton::-moz-focus-inner, + * .spectrum-LogicButton::-moz-focus-inner */ + border: 0; + border-style: none; + padding: 0; + margin-top: -2px; + margin-bottom: -2px; +} +:host(:disabled) { + /* .spectrum-Button:disabled, + * .spectrum-ClearButton:disabled, + * .spectrum-LogicButton:disabled */ + cursor: default; +} :host:after { /* .spectrum-Button:after, * .spectrum-ClearButton:after, * .spectrum-LogicButton:after */ border-radius: calc( - var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ) + + var(--spectrum-button-primary-border-radius) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) @@ -52,50 +106,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) * -2 ); } -:host { - /* .spectrum-ClearButton */ - width: var( - --spectrum-clearbutton-medium-width, - var(--spectrum-alias-single-line-height) - ); - height: var( - --spectrum-clearbutton-medium-height, - var(--spectrum-alias-single-line-height) - ); - border-radius: 100%; - padding: 0; - margin: 0; - border: none; -} -:host > .icon { - /* .spectrum-ClearButton>.spectrum-Icon */ - margin: 0 auto; -} -:host([variant='overBackground']:focus-visible):after { - /* .spectrum-ClearButton--overBackground.focus-ring:after */ - margin: calc( - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) * -1 - ); -} -@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) { - :host > .icon { - margin: 0; - } -} -:host([small]) { - /* .spectrum-ClearButton--small */ - width: var( - --spectrum-clearbutton-small-width, - var(--spectrum-global-dimension-size-300) - ); - height: var( - --spectrum-clearbutton-small-height, - var(--spectrum-global-dimension-size-300) - ); -} :host { /* .spectrum-ClearButton */ background-color: var( @@ -153,21 +163,59 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-icon-color-disabled) ); } +:host { + /* .spectrum-ClearButton */ + width: var( + --spectrum-clearbutton-medium-width, + var(--spectrum-alias-single-line-height) + ); + height: var( + --spectrum-clearbutton-medium-height, + var(--spectrum-alias-single-line-height) + ); + border-radius: 100%; + padding: 0; + margin: 0; + border: none; +} +:host > .icon { + /* .spectrum-ClearButton>.spectrum-Icon */ + margin: 0 auto; +} +:host([variant='overBackground']:focus-visible):after { + /* .spectrum-ClearButton--overBackground.focus-ring:after */ + margin: calc( + var( + --spectrum-alias-focus-ring-gap, + var(--spectrum-global-dimension-static-size-25) + ) * -1 + ); +} +@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) { + :host > .icon { + margin: 0; + } +} +:host([small]) { + /* .spectrum-ClearButton--small */ + width: var( + --spectrum-clearbutton-small-width, + var(--spectrum-global-dimension-size-300) + ); + height: var( + --spectrum-clearbutton-small-height, + var(--spectrum-global-dimension-size-300) + ); +} :host([variant='overBackground']) { /* .spectrum-Button--overBackground.spectrum-Button--quiet, * .spectrum-ClearButton--overBackground */ background-color: var( - --spectrum-button-quiet-over-background-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color, - var(--spectrum-global-color-static-white) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground']:focus-visible), :host([variant='overBackground']:hover) { @@ -175,18 +223,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Button--overBackground.spectrum-Button--quiet:hover, * .spectrum-ClearButton--overBackground.focus-ring, * .spectrum-ClearButton--overBackground:hover */ - background-color: var( - --spectrum-button-quiet-over-background-background-color-hover, - hsla(0, 0%, 100%, 0.1) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-hover, - var(--spectrum-global-color-static-white) - ); + background-color: hsla(0, 0%, 100%, 0.1); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground']:focus-visible) { /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, @@ -201,26 +240,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25) ) - var( - --spectrum-button-over-background-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); + var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][active]) { /* .spectrum-Button--overBackground.spectrum-Button--quiet:active, * .spectrum-ClearButton--overBackground:active */ - background-color: var( - --spectrum-button-quiet-over-background-background-color-down, - hsla(0, 0%, 100%, 0.15) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-down, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-down, - var(--spectrum-global-color-static-white) - ); + background-color: hsla(0, 0%, 100%, 0.2); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: var(--spectrum-global-color-static-white, #fff); } :host([variant='overBackground'][disabled]), :host([variant='overBackground']:disabled) { @@ -229,15 +256,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-ClearButton--overBackground.is-disabled, * .spectrum-ClearButton--overBackground:disabled */ background-color: var( - --spectrum-button-quiet-over-background-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-quiet-over-background-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-quiet-over-background-text-color-disabled, - hsla(0, 0%, 100%, 0.15) + --spectrum-alias-background-color-transparent, + transparent ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); + color: hsla(0, 0%, 100%, 0.15); } diff --git a/packages/button/src/spectrum-fieldbutton.css b/packages/button/src/spectrum-fieldbutton.css index 6d3f9911b3..dd76314e61 100644 --- a/packages/button/src/spectrum-fieldbutton.css +++ b/packages/button/src/spectrum-fieldbutton.css @@ -10,320 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.icon { - /* .spectrum-ActionButton .spectrum-Icon, - * .spectrum-Button .spectrum-Icon, - * .spectrum-ClearButton .spectrum-Icon, - * .spectrum-FieldButton .spectrum-Icon, - * .spectrum-LogicButton .spectrum-Icon */ - max-height: 100%; - flex-shrink: 0; -} -:host { - /* .spectrum-FieldButton */ - height: var( - --spectrum-picker-height, - var(--spectrum-global-dimension-size-400) - ); - padding: 0 - var( - --spectrum-picker-padding-x, - var(--spectrum-global-dimension-size-150) - ); - font-family: inherit; - font-weight: 400; - font-size: var( - --spectrum-picker-text-size, - var(--spectrum-alias-font-size-default) - ); - line-height: normal; - -webkit-font-smoothing: initial; - cursor: pointer; - outline: none; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: var( - --spectrum-picker-padding-x, - var(--spectrum-global-dimension-size-150) - ); - padding-right: var( - --spectrum-picker-padding-x, - var(--spectrum-global-dimension-size-150) - ); - border-width: var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ); - border-style: solid; - border-radius: var(--spectrum-global-dimension-size-50); - transition: background-color - var(--spectrum-global-animation-duration-100, 0.13s), - box-shadow var(--spectrum-global-animation-duration-100, 0.13s), - border-color var(--spectrum-global-animation-duration-100, 0.13s); -} -:host(.is-disabled), -:host(:disabled) { - /* .spectrum-FieldButton.is-disabled, - * .spectrum-FieldButton:disabled */ - border-width: 0; - cursor: default; -} -:host(.is-open) { - /* .spectrum-FieldButton.is-open */ - border-width: var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ); -} -:host([quiet]) { - /* .spectrum-FieldButton--quiet */ - margin: 0; - padding: 0; - border-width: 0; - border-radius: var(--spectrum-fieldbutton-quiet-border-radius, 0); -} -:host([quiet]) .is-disabled:focus-visible, -:host([quiet]:disabled:focus-visible) { - /* .spectrum-FieldButton--quiet.is-disabled.focus-ring, - * .spectrum-FieldButton--quiet:disabled.focus-ring */ - box-shadow: none; -} -:host { - /* .spectrum-FieldButton */ - color: var( - --spectrum-fieldbutton-text-color, - var(--spectrum-alias-text-color) - ); - background-color: var( - --spectrum-fieldbutton-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-fieldbutton-border-color, - var(--spectrum-alias-border-color) - ); -} -:host(:hover) { - /* .spectrum-FieldButton:hover */ - color: var( - --spectrum-fieldbutton-text-color-hover, - var(--spectrum-alias-text-color-hover) - ); - background-color: var( - --spectrum-fieldbutton-background-color-hover, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-fieldbutton-border-color-hover, - var(--spectrum-alias-border-color-hover) - ); -} -:host(.is-selected), -:host(:active) { - /* .spectrum-FieldButton.is-selected, - * .spectrum-FieldButton:active */ - background-color: var( - --spectrum-fieldbutton-background-color-down, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-fieldbutton-border-color-down, - var(--spectrum-alias-border-color-down) - ); -} -:host(:focus-visible), -:host([focused]) { - /* .spectrum-FieldButton.focus-ring, - * .spectrum-FieldButton.is-focused */ - background-color: var( - --spectrum-fieldbutton-background-color-key-focus, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-fieldbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - box-shadow: 0 0 0 - var(--spectrum-button-primary-border-size-increase-key-focus, 1px) - var( - --spectrum-fieldbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - color: var( - --spectrum-fieldbutton-text-color-key-focus, - var(--spectrum-alias-text-color-hover) - ); -} -:host(:focus-visible.is-placeholder), -:host([focused].is-placeholder) { - /* .spectrum-FieldButton.focus-ring.is-placeholder, - * .spectrum-FieldButton.is-focused.is-placeholder */ - color: var( - --spectrum-fieldbutton-placeholder-text-color-key-focus, - var(--spectrum-alias-placeholder-text-color-hover) - ); -} -:host([invalid]) { - /* .spectrum-FieldButton.is-invalid */ - border-color: var( - --spectrum-fieldbutton-border-color-error, - var(--spectrum-global-color-red-500) - ); -} -:host([invalid]:hover) { - /* .spectrum-FieldButton.is-invalid:hover */ - border-color: var( - --spectrum-fieldbutton-border-color-error-hover, - var(--spectrum-global-color-red-600) - ); -} -:host([invalid].is-selected), -:host([invalid]:active) { - /* .spectrum-FieldButton.is-invalid.is-selected, - * .spectrum-FieldButton.is-invalid:active */ - border-color: var( - --spectrum-fieldbutton-border-color-error-down, - var(--spectrum-global-color-red-600) - ); -} -:host([invalid]:focus-visible), -:host([invalid][focused]) { - /* .spectrum-FieldButton.is-invalid.focus-ring, - * .spectrum-FieldButton.is-invalid.is-focused */ - border-color: var( - --spectrum-fieldbutton-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) - ); - box-shadow: 0 0 0 - var(--spectrum-button-primary-border-size-increase-key-focus, 1px) - var( - --spectrum-fieldbutton-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host(.is-disabled), -:host(:disabled) { - /* .spectrum-FieldButton.is-disabled, - * .spectrum-FieldButton:disabled */ - background-color: var( - --spectrum-fieldbutton-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-fieldbutton-text-color-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} -:host(.is-disabled) .icon, -:host(:disabled) .icon { - /* .spectrum-FieldButton.is-disabled .spectrum-Icon, - * .spectrum-FieldButton:disabled .spectrum-Icon */ - color: var( - --spectrum-fieldbutton-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) - ); -} -:host([quiet]) { - /* .spectrum-FieldButton--quiet */ - color: var( - --spectrum-fieldbutton-text-color, - var(--spectrum-alias-text-color) - ); - border-color: var( - --spectrum-fieldbutton-quiet-border-color, - var(--spectrum-alias-border-color-transparent) - ); - background-color: var( - --spectrum-fieldbutton-quiet-background-color, - var(--spectrum-alias-background-color-transparent) - ); -} -:host([quiet]:hover) { - /* .spectrum-FieldButton--quiet:hover */ - background-color: var( - --spectrum-fieldbutton-quiet-background-color-hover, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-fieldbutton-text-color-hover, - var(--spectrum-alias-text-color-hover) - ); -} -:host([quiet]:focus-visible), -:host([quiet][focused]) { - /* .spectrum-FieldButton--quiet.focus-ring, - * .spectrum-FieldButton--quiet.is-focused */ - background-color: var( - --spectrum-fieldbutton-quiet-background-color-key-focus, - var(--spectrum-alias-background-color-transparent) - ); - box-shadow: 0 2px 0 0 - var( - --spectrum-fieldbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host([quiet]:focus-visible) .is-placeholder, -:host([quiet][focused]) .is-placeholder { - /* .spectrum-FieldButton--quiet.focus-ring.is-placeholder, - * .spectrum-FieldButton--quiet.is-focused.is-placeholder */ - color: var( - --spectrum-fieldbutton-quiet-placeholder-text-color-key-focus, - var(--spectrum-alias-placeholder-text-color-hover) - ); -} -:host([quiet]) .is-selected, -:host([quiet]:active) { - /* .spectrum-FieldButton--quiet.is-selected, - * .spectrum-FieldButton--quiet:active */ - background-color: var( - --spectrum-fieldbutton-quiet-background-color-down, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-fieldbutton-quiet-border-color-down, - var(--spectrum-alias-border-color-transparent) - ); -} -:host([quiet]) .is-selected:focus-visible, -:host([quiet][focused]) .is-selected, -:host([quiet]:active:focus-visible), -:host([quiet][focused]:active) { - /* .spectrum-FieldButton--quiet.is-selected.focus-ring, - * .spectrum-FieldButton--quiet.is-selected.is-focused, - * .spectrum-FieldButton--quiet:active.focus-ring, - * .spectrum-FieldButton--quiet:active.is-focused */ - background-color: var( - --spectrum-fieldbutton-quiet-background-color-key-focus, - var(--spectrum-alias-background-color-transparent) - ); - box-shadow: 0 2px 0 0 - var( - --spectrum-fieldbutton-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host([quiet][invalid]:focus-visible), -:host([quiet][invalid][focused]) { - /* .spectrum-FieldButton--quiet.is-invalid.focus-ring, - * .spectrum-FieldButton--quiet.is-invalid.is-focused */ - box-shadow: 0 2px 0 0 - var( - --spectrum-fieldbutton-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) - ); -} -:host([quiet]) .is-disabled, -:host([quiet]:disabled) { - /* .spectrum-FieldButton--quiet.is-disabled, - * .spectrum-FieldButton--quiet:disabled */ - background-color: var( - --spectrum-fieldbutton-quiet-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-fieldbutton-text-color-disabled, - var(--spectrum-alias-text-color-disabled) - ); -} diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index 4812862120..2dc122c821 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -12,13 +12,47 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Checkbox */ + --spectrum-checkbox-text-font-style: var( + --spectrum-global-font-style-regular, + normal + ); + --spectrum-checkbox-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-checkbox-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-checkbox-box-border-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); + --spectrum-checkbox-box-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-checkbox-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-checkbox-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-checkbox-box-size: var( + --spectrum-alias-item-control-2-size-m, + var(--spectrum-global-dimension-size-175) + ); + --spectrum-checkbox-text-gap: var( + --spectrum-alias-item-control-gap-m, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-checkbox-label-margin-top: 6px; display: inline-flex; align-items: flex-start; position: relative; - min-height: var( - --spectrum-checkbox-height, - var(--spectrum-global-dimension-size-400) - ); + min-height: var(--spectrum-checkbox-height); max-width: 100%; vertical-align: top; } @@ -44,12 +78,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #input:checked + #box:before { /* .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-width: calc( - var( - --spectrum-checkbox-box-size, - var(--spectrum-global-dimension-size-175) - ) / 2 - ); + border-width: calc(var(--spectrum-checkbox-box-size) / 2); } #input:checked + #box #checkmark { /* .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box .spectrum-Checkbox-checkmark */ @@ -69,12 +98,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([indeterminate]) #input:checked + #box:before { /* .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-width: calc( - var( - --spectrum-checkbox-box-size, - var(--spectrum-global-dimension-size-175) - ) / 2 - ); + border-width: calc(var(--spectrum-checkbox-box-size) / 2); } :host([indeterminate]) #box #checkmark, :host([indeterminate]) #input:checked + #box #checkmark { @@ -100,37 +124,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Checkbox-label */ - margin-left: var( - --spectrum-checkbox-text-gap, - var(--spectrum-global-dimension-size-125) - ); + margin-left: var(--spectrum-checkbox-text-gap); } :host([dir='rtl']) #label { /* [dir=rtl] .spectrum-Checkbox-label */ - margin-right: var( - --spectrum-checkbox-text-gap, - var(--spectrum-global-dimension-size-125) - ); + margin-right: var(--spectrum-checkbox-text-gap); } #label { /* .spectrum-Checkbox-label */ - margin-top: var(--spectrum-global-dimension-size-65); - font-size: var( - --spectrum-checkbox-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-checkbox-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); - font-style: var( - --spectrum-checkbox-text-font-style, - var(--spectrum-global-font-style-regular) - ); - line-height: var( - --spectrum-checkbox-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); + margin-top: var(--spectrum-checkbox-label-margin-top); + font-size: var(--spectrum-checkbox-text-size); + font-weight: var(--spectrum-checkbox-text-font-weight); + font-style: var(--spectrum-checkbox-text-font-style); + line-height: var(--spectrum-checkbox-text-line-height); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; } @@ -139,14 +145,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: relative; margin: calc( ( - var( - --spectrum-checkbox-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-checkbox-box-size, - var(--spectrum-global-dimension-size-175) - ) + var(--spectrum-checkbox-height) - + var(--spectrum-checkbox-box-size) ) / 2 ) 0; @@ -158,14 +158,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Checkbox-box, * .spectrum-Checkbox-box:before */ box-sizing: border-box; - width: var( - --spectrum-checkbox-box-size, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-checkbox-box-size, - var(--spectrum-global-dimension-size-175) - ); + width: var(--spectrum-checkbox-box-size); + height: var(--spectrum-checkbox-box-size); } #box:before { /* .spectrum-Checkbox-box:before */ @@ -173,14 +167,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ z-index: 0; content: ''; position: absolute; - border-radius: var( - --spectrum-checkbox-box-border-radius, - var(--spectrum-alias-border-radius-small) - ); - border-width: var( - --spectrum-checkbox-box-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-radius: var(--spectrum-checkbox-box-border-radius); + border-width: var(--spectrum-checkbox-box-border-size); border-style: solid; transition: border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, @@ -190,10 +178,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #box:after { /* .spectrum-Checkbox-box:after */ border-radius: calc( - var( - --spectrum-checkbox-box-border-radius, - var(--spectrum-alias-border-radius-small) - ) + + var(--spectrum-checkbox-box-border-radius) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) @@ -227,25 +212,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=rtl] .spectrum-Checkbox-partialCheckmark */ right: 50%; } -:host([dir='ltr']) #checkmark, -:host([dir='ltr']) #partialCheckmark { - /* [dir=ltr] .spectrum-Checkbox-checkmark, - * [dir=ltr] .spectrum-Checkbox-partialCheckmark */ - margin-left: calc(var(--spectrum-icon-checkmark-small-width) / -2); -} -:host([dir='rtl']) #checkmark, -:host([dir='rtl']) #partialCheckmark { - /* [dir=rtl] .spectrum-Checkbox-checkmark, - * [dir=rtl] .spectrum-Checkbox-partialCheckmark */ - margin-right: calc(var(--spectrum-icon-checkmark-small-width) / -2); -} #checkmark, #partialCheckmark { /* .spectrum-Checkbox-checkmark, * .spectrum-Checkbox-partialCheckmark */ position: absolute; top: 50%; - margin-top: calc(var(--spectrum-icon-checkmark-small-height) / -2); opacity: 0; transform: scale(0); transition: opacity var(--spectrum-global-animation-duration-100, 0.13s) @@ -253,119 +225,119 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transform var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; } +:host([dir='ltr']) #checkmark { + /* [dir=ltr] .spectrum-Checkbox-checkmark */ + margin-left: calc( + var(--spectrum-global-dimension-static-size-125, 10px) / -2 + ); +} +:host([dir='rtl']) #checkmark { + /* [dir=rtl] .spectrum-Checkbox-checkmark */ + margin-right: calc( + var(--spectrum-global-dimension-static-size-125, 10px) / -2 + ); +} +#checkmark { + /* .spectrum-Checkbox-checkmark */ + margin-top: calc( + var(--spectrum-global-dimension-static-size-125, 10px) / -2 + ); +} +:host([dir='ltr']) #partialCheckmark { + /* [dir=ltr] .spectrum-Checkbox-partialCheckmark */ + margin-left: calc( + var(--spectrum-global-dimension-static-size-100, 8px) / -2 + ); +} +:host([dir='rtl']) #partialCheckmark { + /* [dir=rtl] .spectrum-Checkbox-partialCheckmark */ + margin-right: calc( + var(--spectrum-global-dimension-static-size-100, 8px) / -2 + ); +} #partialCheckmark { /* .spectrum-Checkbox-partialCheckmark */ + margin-top: calc( + var(--spectrum-global-dimension-static-size-100, 8px) / -2 + ); display: none; } :host { /* .spectrum-Checkbox */ color: var( - --spectrum-checkbox-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } #checkmark, #partialCheckmark { /* .spectrum-Checkbox-checkmark, * .spectrum-Checkbox-partialCheckmark */ - color: var( - --spectrum-checkbox-checkmark-color, - var(--spectrum-global-color-gray-75) - ); + color: var(--spectrum-global-color-gray-75); } #box:before { /* .spectrum-Checkbox-box:before */ forced-color-adjust: none; - border-color: var( - --spectrum-checkbox-box-border-color, - var(--spectrum-global-color-gray-600) - ); - background-color: var( - --spectrum-checkbox-box-background-color, - var(--spectrum-global-color-gray-75) - ); + border-color: var(--spectrum-global-color-gray-600); + background-color: var(--spectrum-global-color-gray-75); } #label { /* .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } #input:checked + #box:before, :host([indeterminate]) #box:before { /* .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-selected, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } :host(:hover[indeterminate]) #box:before, :host(:hover) #input:checked + #box:before { /* .spectrum-Checkbox:hover.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox:hover .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-selected-hover, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } :host(:active[indeterminate]) #box:before, :host(:active) #input:checked + #box:before { /* .spectrum-Checkbox:active.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox:active .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-selected-down, - var(--spectrum-global-color-gray-900) - ); + border-color: var(--spectrum-global-color-gray-900); } :host { /* .spectrum-Checkbox */ - border-color: var( - --spectrum-checkbox-box-border-color, - var(--spectrum-global-color-gray-600) - ); + border-color: var(--spectrum-global-color-gray-600); } :host(:hover) #box:before { /* .spectrum-Checkbox:hover .spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-hover, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } :host(:hover) #label { /* .spectrum-Checkbox:hover .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-text-color-hover, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host(:active) #box:before { /* .spectrum-Checkbox:active .spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-down, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } :host(:active) #label { /* .spectrum-Checkbox:active .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-text-color-down, - var(--spectrum-alias-text-color-down) + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) ); } :host([disabled]) #input:checked + #box:before, :host([disabled]) #input + #box:before { /* .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled+.spectrum-Checkbox-box:before, * .spectrum-Checkbox .spectrum-Checkbox-input:disabled+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); - background-color: var( - --spectrum-checkbox-box-background-color-disabled, - var(--spectrum-global-color-gray-75) - ); + border-color: var(--spectrum-global-color-gray-400); + background-color: var(--spectrum-global-color-gray-75); } :host([disabled]) #input:checked ~ #label, :host([disabled]) #input ~ #label { @@ -373,43 +345,37 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Checkbox .spectrum-Checkbox-input:disabled~.spectrum-Checkbox-label */ forced-color-adjust: none; color: var( - --spectrum-checkbox-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } #input:focus-visible + #box:before { /* .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-key-focus, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } #input:focus-visible + #box:after { /* .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:after */ box-shadow: 0 0 0 var( - --spectrum-checkbox-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-checkbox-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + --spectrum-alias-focus-ring-color, + var(--spectrum-alias-focus-color) ); } #input:checked:focus-visible + #box:before, :host([indeterminate]) #input:focus-visible + #box:before { /* .spectrum-Checkbox-input:checked.focus-ring+.spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-selected-key-focus, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } #input:focus-visible ~ #label { /* .spectrum-Checkbox-input.focus-ring~.spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-text-color-key-focus, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host([emphasized][indeterminate]) #box:before, @@ -418,144 +384,77 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before, * .spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-emphasized-box-border-color-selected, - var(--spectrum-global-color-blue-500) - ); + border-color: var(--spectrum-global-color-blue-500); } :host([emphasized][indeterminate]:hover) #box:before, :host([emphasized]:hover) #input:checked + #box:before { /* .spectrum-Checkbox--emphasized:hover.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-emphasized-box-border-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-blue-600); } :host([emphasized][indeterminate]:active) #box:before, :host([emphasized]:active) #input:checked + #box:before { /* .spectrum-Checkbox--emphasized:active.is-indeterminate .spectrum-Checkbox-box:before, * .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-emphasized-box-border-color-selected-down, - var(--spectrum-global-color-blue-700) - ); + border-color: var(--spectrum-global-color-blue-700); } :host([invalid]) #box:before, :host([invalid]) #input:checked + #box:before { /* .spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-error, - var(--spectrum-global-color-red-500) - ); + border-color: var(--spectrum-global-color-red-500); } :host([invalid]) #label { /* .spectrum-Checkbox.is-invalid .spectrum-Checkbox-label */ - color: var( - --spectrum-checkbox-text-color-error, - var(--spectrum-global-color-red-600) - ); + color: var(--spectrum-global-color-red-600); } :host([invalid][indeterminate]) #input:focus-visible + #box:before, :host([invalid]) #input:focus-visible + #box:before { /* .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-error-hover, - var(--spectrum-global-color-red-600) - ); + border-color: var(--spectrum-global-color-red-600); } :host([invalid][indeterminate]) #input:focus-visible ~ #label, :host([invalid]) #input:focus-visible ~ #label { /* .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input.focus-ring~.spectrum-Checkbox-label, * .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input.focus-ring~.spectrum-Checkbox-label */ - color: var( - --spectrum-checkbox-text-color-error-hover, - var(--spectrum-global-color-red-700) - ); + color: var(--spectrum-global-color-red-700); } :host([invalid]:hover) #box:before, :host([invalid]:hover) #input:checked + #box:before { /* .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-error-hover, - var(--spectrum-global-color-red-600) - ); + border-color: var(--spectrum-global-color-red-600); } :host([invalid]:hover) #label { /* .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-label */ - color: var( - --spectrum-checkbox-text-color-error-hover, - var(--spectrum-global-color-red-700) - ); + color: var(--spectrum-global-color-red-700); } :host([invalid]:active) #box:before, :host([invalid]:active) #input:checked + #box:before { /* .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-error-down, - var(--spectrum-global-color-red-700) - ); + border-color: var(--spectrum-global-color-red-700); } :host([invalid]:active) #label { /* .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-label */ - color: var( - --spectrum-checkbox-text-color-error-down, - var(--spectrum-global-color-red-700) - ); + color: var(--spectrum-global-color-red-700); } @media (forced-colors: active) { #input:focus-visible + #box { forced-color-adjust: none; outline-color: var( - --spectrum-checkbox-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + --spectrum-alias-focus-ring-color, + var(--spectrum-alias-focus-color) ); outline-style: auto; outline-offset: var( - --spectrum-checkbox-focus-ring-gap-key-focus, - var(--spectrum-alias-focus-ring-gap) + --spectrum-alias-focus-ring-gap, + var(--spectrum-global-dimension-static-size-25) ); outline-width: var( - --spectrum-checkbox-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) - ); - } - :host { - --spectrum-checkbox-emphasized-box-background-color: var( - --spectrum-alias-background-color-transparent, - transparent - ); - --spectrum-checkbox-emphasized-box-background-color-disabled: var( - --spectrum-alias-background-color-transparent, - transparent - ); - --spectrum-checkbox-emphasized-box-border-color-disabled: GrayText; - --spectrum-checkbox-text-color-disabled: GrayText; - --spectrum-checkbox-box-border-color-key-focus: FieldText; - --spectrum-checkbox-emphasized-box-border-color: FieldText; - --spectrum-checkbox-quiet-box-border-color: FieldText; - --spectrum-checkbox-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected: Highlight; - --spectrum-checkbox-checkmark-color: HighlightText; - --spectrum-checkbox-focus-ring-color-key-focus: Highlight; - --spectrum-checkbox-focus-ring-gap-key-focus: var( - --spectrum-global-dimension-static-size-25, - 2px - ); - --spectrum-checkbox-focus-ring-size-key-focus: var( - --spectrum-global-dimension-static-size-40, - 3px + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) ); - --spectrum-checkbox-box-border-color-error: FieldText; - --spectrum-checkbox-box-border-color-error-hover: FieldText; - --spectrum-checkbox-box-border-color-error-selected: FieldText; - --spectrum-checkbox-text-color-error: FieldText; } } diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 4ea6ae57e5..ce375a8673 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -153,7 +153,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); line-height: var( --spectrum-dialog-confirm-description-text-line-height, - var(--spectrum-alias-body-text-line-height) + var(--spectrum-alias-component-text-line-height) ); padding: 0 var(--spectrum-global-dimension-size-25); margin: 0 calc(var(--spectrum-global-dimension-size-25) * -1); @@ -343,6 +343,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ font-size: var(--spectrum-dialog-confirm-title-text-size); } } +@media (forced-colors: active) { + :host { + border: solid; + } +} ::slotted([slot='heading']) { /* .spectrum-Dialog-heading */ color: var( diff --git a/packages/dropdown/src/spectrum-dropdown.css b/packages/dropdown/src/spectrum-dropdown.css index b54bbf11f4..c219b0f345 100644 --- a/packages/dropdown/src/spectrum-dropdown.css +++ b/packages/dropdown/src/spectrum-dropdown.css @@ -13,61 +13,172 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Picker */ position: relative; - display: inline-block; - max-width: 100%; - width: var(--spectrum-global-dimension-size-2400); - min-width: var( - --spectrum-picker-min-width, + display: inline-flex; + box-sizing: border-box; + overflow: visible; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-appearance: button; + vertical-align: top; + 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; + text-decoration: none; + font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) + ); + line-height: 1.3; + -moz-user-select: none; + user-select: none; + -webkit-user-select: none; + touch-action: none; + cursor: pointer; +} +:host(:focus) { + /* .spectrum-Picker:focus */ + outline: none; +} +:host(::-moz-focus-inner) { + /* .spectrum-Picker::-moz-focus-inner */ + border: 0; + border-style: none; + padding: 0; + margin-top: -2px; + margin-bottom: -2px; +} +:host(:disabled) { + /* .spectrum-Picker:disabled */ + cursor: default; +} +:host { + /* .spectrum-Picker */ + --spectrum-picker-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-picker-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-picker-height: var( + --spectrum-alias-item-height-m, var(--spectrum-global-dimension-size-400) ); -} -select { - /* .spectrum-Picker select */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -ms-appearance: none; -} -select::-ms-expand { - /* .spectrum-Picker select::-ms-expand */ - display: none; -} -select::-ms-value { - /* .spectrum-Picker select::-ms-value */ - background-color: initial; -} -:host([dir='ltr']) select + .dropdown { - /* [dir=ltr] .spectrum-Picker select+.spectrum-Picker-icon */ - right: var( - --spectrum-picker-padding-x, + --spectrum-picker-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-picker-placeholder-text-font-style: var( + --spectrum-global-font-style-italic, + italic + ); + --spectrum-picker-placeholder-text-font-weight: var( + --spectrum-global-font-weight-regular, + 400 + ); + --spectrum-picker-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-picker-ui-icon-gap: var( + --spectrum-alias-item-ui-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-picker-error-icon-margin-left: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-picker-textonly-padding-left: var( + --spectrum-alias-item-padding-m, var(--spectrum-global-dimension-size-150) ); -} -:host([dir='rtl']) select + .dropdown { - /* [dir=rtl] .spectrum-Picker select+.spectrum-Picker-icon */ - left: var( - --spectrum-picker-padding-x, + --spectrum-picker-textonly-padding-right: var( + --spectrum-alias-item-padding-m, var(--spectrum-global-dimension-size-150) ); -} -select + .dropdown { - /* .spectrum-Picker select+.spectrum-Picker-icon */ - position: absolute; - top: 50%; - margin-top: calc( - var( - --spectrum-icon-chevron-down-medium-height, - var(--spectrum-global-dimension-size-75) - ) / -2 + --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400); + --spectrum-picker-disabled-border-size: 0; + --spectrum-picker-popover-max-width: var( + --spectrum-global-dimension-size-3000 ); + --spectrum-picker-width: var(--spectrum-global-dimension-size-2400); + --spectrum-picker-border-size-increase-focus: 1px; } -#button { - /* .spectrum-Picker-trigger */ - position: relative; - width: 100%; +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-Picker */ + padding-left: var(--spectrum-picker-textonly-padding-left); + padding-right: var(--spectrum-picker-textonly-padding-right); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-Picker */ + padding-right: var(--spectrum-picker-textonly-padding-left); + padding-left: var(--spectrum-picker-textonly-padding-right); +} +:host { + /* .spectrum-Picker */ display: flex; - justify-content: space-between; + justify-content: center; align-items: center; + max-width: 100%; + width: var(--spectrum-picker-width); + min-width: var(--spectrum-picker-min-width); + height: var(--spectrum-picker-height); + margin: 0; + padding-top: 0; + padding-bottom: 0; + border-width: var(--spectrum-picker-border-size); + border-style: solid; + border-radius: var(--spectrum-picker-border-radius); + transition: background-color + var(--spectrum-global-animation-duration-100, 0.13s), + box-shadow var(--spectrum-global-animation-duration-100, 0.13s), + border-color var(--spectrum-global-animation-duration-100, 0.13s); +} +:host([disabled]), +:host(:disabled) { + /* .spectrum-Picker.is-disabled, + * .spectrum-Picker:disabled */ + border-width: var(--spectrum-picker-disabled-border-size); + cursor: default; +} +:host([dir='ltr']) .dropdown { + /* [dir=ltr] .spectrum-Picker .spectrum-Picker-icon */ + margin-right: var(--spectrum-picker-icon-gap); +} +:host([dir='rtl']) .dropdown { + /* [dir=rtl] .spectrum-Picker .spectrum-Picker-icon */ + margin-left: var(--spectrum-picker-icon-gap); +} +.dropdown { + /* .spectrum-Picker .spectrum-Picker-icon */ + flex-shrink: 0; +} +:host([dir='ltr']) #label + .dropdown { + /* [dir=ltr] .spectrum-Picker .spectrum-Picker-label+.spectrum-Picker-icon */ + margin-left: var(--spectrum-picker-icon-gap); +} +:host([dir='rtl']) #label + .dropdown { + /* [dir=rtl] .spectrum-Picker .spectrum-Picker-label+.spectrum-Picker-icon */ + margin-right: var(--spectrum-picker-icon-gap); +} +:host([quiet]) { + /* .spectrum-Picker--quiet */ + --spectrum-picker-border-size: 0; + --spectrum-picker-border-radius: 0; + --spectrum-picker-textonly-padding-left: 0; + --spectrum-picker-textonly-padding-right: 0; + width: auto; + min-width: 0; +} +:host([quiet][disabled]:focus-visible), +:host([quiet]:disabled:focus-visible) { + /* .spectrum-Picker--quiet.is-disabled.focus-ring, + * .spectrum-Picker--quiet:disabled.focus-ring */ + box-shadow: none; } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Picker-label */ @@ -83,200 +194,54 @@ select + .dropdown { white-space: nowrap; overflow: hidden; height: calc( - var(--spectrum-picker-height, var(--spectrum-global-dimension-size-400)) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 + var(--spectrum-picker-height) - var(--spectrum-picker-border-size) * 2 ); line-height: calc( - var(--spectrum-picker-height, var(--spectrum-global-dimension-size-400)) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 - ); - font-size: var( - --spectrum-picker-text-size, - var(--spectrum-alias-font-size-default) + var(--spectrum-picker-height) - var(--spectrum-picker-border-size) * 2 ); + font-size: var(--spectrum-picker-text-size); text-overflow: ellipsis; } #label.placeholder { /* .spectrum-Picker-label.is-placeholder */ - font-weight: var( - --spectrum-picker-placeholder-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); - font-style: var( - --spectrum-picker-placeholder-text-font-style, - var(--spectrum-global-font-style-italic) - ); + font-weight: var(--spectrum-picker-placeholder-text-font-weight); + font-style: var(--spectrum-picker-placeholder-text-font-style); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; } -:host([dir='ltr']) #label + .dropdown { - /* [dir=ltr] .spectrum-Picker-label+.spectrum-Picker-icon */ - margin-left: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); -} -:host([dir='rtl']) #label + .dropdown { - /* [dir=rtl] .spectrum-Picker-label+.spectrum-Picker-icon */ - margin-right: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); -} -:host([dir='ltr']) .icon + #label { - /* [dir=ltr] .spectrum-Icon+.spectrum-Picker-label */ - margin-left: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); -} -:host([dir='rtl']) .icon + #label { - /* [dir=rtl] .spectrum-Icon+.spectrum-Picker-label */ - margin-right: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); -} -:host([dir='ltr']) #label ~ .dropdown { - /* [dir=ltr] .spectrum-Picker-label~.spectrum-Picker-icon */ - margin-left: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); -} -:host([dir='rtl']) #label ~ .dropdown { - /* [dir=rtl] .spectrum-Picker-label~.spectrum-Picker-icon */ - margin-right: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); -} -.dropdown { - /* .spectrum-Picker-icon */ +.spectrum-Picker-menuIcon { + /* .spectrum-Picker-menuIcon */ display: inline-block; position: relative; vertical-align: top; transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-out; - margin-top: calc( - ( - var( - --spectrum-picker-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 - - var( - --spectrum-icon-chevron-down-medium-height, - var(--spectrum-global-dimension-size-75) - ) - ) / 2 - ); - margin-bottom: calc( - ( - var( - --spectrum-picker-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 - - var( - --spectrum-icon-chevron-down-medium-height, - var(--spectrum-global-dimension-size-75) - ) - ) / 2 - ); - opacity: 1; -} -#button .icon:not(.dropdown) { - /* .spectrum-Picker-trigger .spectrum-Icon:not(.spectrum-Picker-icon) */ - margin-top: calc( - ( - var( - --spectrum-picker-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 - - var( - --spectrum-picker-icon-size, - var(--spectrum-alias-workflow-icon-size-m) - ) - ) / 2 - ); - margin-bottom: calc( - ( - var( - --spectrum-picker-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-picker-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 - - var( - --spectrum-picker-icon-size, - var(--spectrum-alias-workflow-icon-size-m) - ) - ) / 2 - ); + flex-shrink: 0; } -:host([dir='ltr']) #button #label + .icon:not(.dropdown) { - /* [dir=ltr] .spectrum-Picker-trigger .spectrum-Picker-label+.spectrum-Icon:not(.spectrum-Picker-icon) */ - margin-left: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); +:host([dir='ltr']) .spectrum-Picker-validationIcon { + /* [dir=ltr] .spectrum-Picker-validationIcon */ + margin-left: var(--spectrum-picker-error-icon-margin-left); } -:host([dir='rtl']) #button #label + .icon:not(.dropdown) { - /* [dir=rtl] .spectrum-Picker-trigger .spectrum-Picker-label+.spectrum-Icon:not(.spectrum-Picker-icon) */ - margin-right: var( - --spectrum-picker-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); +:host([dir='rtl']) .spectrum-Picker-validationIcon { + /* [dir=rtl] .spectrum-Picker-validationIcon */ + margin-right: var(--spectrum-picker-error-icon-margin-left); } -:host([dir='ltr']) .icon + .dropdown { - /* [dir=ltr] .spectrum-Icon+.spectrum-Picker-icon */ - margin-left: var( - --spectrum-picker-icon-gap, - var(--spectrum-global-dimension-size-100) - ); +:host([dir='ltr']) #label ~ .spectrum-Picker-menuIcon { + /* [dir=ltr] .spectrum-Picker-label~.spectrum-Picker-menuIcon */ + margin-left: var(--spectrum-picker-ui-icon-gap); } -:host([dir='rtl']) .icon + .dropdown { - /* [dir=rtl] .spectrum-Icon+.spectrum-Picker-icon */ - margin-right: var( - --spectrum-picker-icon-gap, - var(--spectrum-global-dimension-size-100) - ); -} -:host([quiet]) { - /* .spectrum-Picker--quiet */ - width: auto; - min-width: var(--spectrum-picker-quiet-min-width); +:host([dir='rtl']) #label ~ .spectrum-Picker-menuIcon { + /* [dir=rtl] .spectrum-Picker-label~.spectrum-Picker-menuIcon */ + margin-right: var(--spectrum-picker-ui-icon-gap); } #popover { /* .spectrum-Picker-popover */ - max-width: var(--spectrum-global-dimension-size-3000); + max-width: var(--spectrum-picker-popover-max-width); } :host([dir='ltr']) .spectrum-Picker-popover--quiet { /* [dir=ltr] .spectrum-Picker-popover--quiet */ margin-left: calc( - -1 * (var( - --spectrum-picker-quiet-popover-offset-x, - var(--spectrum-global-dimension-size-150) - ) + + -1 * (var(--spectrum-global-dimension-size-150) + var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -286,93 +251,292 @@ select + .dropdown { :host([dir='rtl']) .spectrum-Picker-popover--quiet { /* [dir=rtl] .spectrum-Picker-popover--quiet */ margin-right: calc( - -1 * (var( - --spectrum-picker-quiet-popover-offset-x, - var(--spectrum-global-dimension-size-150) - ) + + -1 * (var(--spectrum-global-dimension-size-150) + var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) )) ); } -#button:hover .dropdown { - /* .spectrum-Picker .spectrum-Picker-trigger:hover .spectrum-Picker-icon */ +:host { + /* .spectrum-Picker */ + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); + background-color: var(--spectrum-global-color-gray-75); + border-color: var( + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) + ); +} +:host(:hover) { + /* .spectrum-Picker:hover */ color: var( - --spectrum-picker-icon-color-hover, - var(--spectrum-alias-icon-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); + background-color: var(--spectrum-global-color-gray-50); + border-color: var( + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) ); } -#button.is-selected .placeholder { - /* .spectrum-Picker .spectrum-Picker-trigger.is-selected .is-placeholder */ +:host(:hover) .spectrum-Picker-menuIcon { + /* .spectrum-Picker:hover .spectrum-Picker-menuIcon */ color: var( - --spectrum-picker-placeholder-text-color-down, - var(--spectrum-alias-placeholder-text-color-down) + --spectrum-alias-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host(.is-open), +:host(:active) { + /* .spectrum-Picker.is-open, + * .spectrum-Picker:active */ + background-color: var(--spectrum-global-color-gray-200); + border-color: var( + --spectrum-alias-border-color-down, + var(--spectrum-global-color-gray-500) ); } -:host([invalid]) .icon:not(.dropdown):not(.checkmark) { - /* .spectrum-Picker.is-invalid .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) */ +:host(.is-open.placeholder) #label, +:host(:active.placeholder) #label { + /* .spectrum-Picker.is-open.is-placeholder .spectrum-Picker-label, + * .spectrum-Picker:active.is-placeholder .spectrum-Picker-label */ color: var( - --spectrum-picker-validation-icon-color-error, - var(--spectrum-semantic-negative-color-icon) + --spectrum-alias-placeholder-text-color-down, + var(--spectrum-global-color-gray-900) + ); +} +:host(:focus-visible), +:host(.is-focused) { + /* .spectrum-Picker.focus-ring, + * .spectrum-Picker.is-focused */ + background-color: var(--spectrum-global-color-gray-50); + border-color: var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host(:focus-visible.placeholder), +:host(.is-focused.placeholder) { + /* .spectrum-Picker.focus-ring.is-placeholder, + * .spectrum-Picker.is-focused.is-placeholder */ + color: var( + --spectrum-alias-placeholder-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([invalid]) { + /* .spectrum-Picker.is-invalid */ + border-color: var(--spectrum-global-color-red-500); +} +:host([invalid]) .spectrum-Picker-validationIcon { + /* .spectrum-Picker.is-invalid .spectrum-Picker-validationIcon */ + color: var( + --spectrum-semantic-negative-color-icon, + var(--spectrum-global-color-red-600) + ); +} +:host([invalid].is-open), +:host([invalid]:active), +:host([invalid]:hover) { + /* .spectrum-Picker.is-invalid.is-open, + * .spectrum-Picker.is-invalid:active, + * .spectrum-Picker.is-invalid:hover */ + border-color: var(--spectrum-global-color-red-600); +} +:host([invalid]:focus-visible), +:host([invalid].is-focused) { + /* .spectrum-Picker.is-invalid.focus-ring, + * .spectrum-Picker.is-invalid.is-focused */ + border-color: var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); + box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([disabled]), +:host(:disabled) { + /* .spectrum-Picker.is-disabled, + * .spectrum-Picker:disabled */ + background-color: var(--spectrum-global-color-gray-200); + color: var( + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([disabled]) .dropdown, -:host([disabled]) #button:hover .dropdown, -:host([invalid][disabled]) .icon, -:host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark) { +:host([disabled]) .spectrum-Picker-menuIcon, +:host([disabled]) .spectrum-Picker-validationIcon, +:host(:disabled) .dropdown, +:host(:disabled) .spectrum-Picker-menuIcon, +:host(:disabled) .spectrum-Picker-validationIcon { /* .spectrum-Picker.is-disabled .spectrum-Picker-icon, - * .spectrum-Picker.is-disabled .spectrum-Picker-trigger:hover .spectrum-Picker-icon, - * .spectrum-Picker.is-invalid.is-disabled .spectrum-Icon, - * .spectrum-Picker.is-invalid.is-disabled .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) */ + * .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, + * .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, + * .spectrum-Picker:disabled .spectrum-Picker-icon, + * .spectrum-Picker:disabled .spectrum-Picker-menuIcon, + * .spectrum-Picker:disabled .spectrum-Picker-validationIcon */ color: var( - --spectrum-picker-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) ); } -:host([disabled]) #label.placeholder { - /* .spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder */ +:host([disabled]) #label.placeholder, +:host(:disabled) #label.placeholder { + /* .spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, + * .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder */ color: var( - --spectrum-picker-placeholder-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } -.dropdown { - /* .spectrum-Picker-icon */ - color: var(--spectrum-picker-icon-color, var(--spectrum-alias-icon-color)); +.spectrum-Picker-menuIcon { + /* .spectrum-Picker-menuIcon */ + color: var( + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) + ); } #label.placeholder { /* .spectrum-Picker-label.is-placeholder */ color: var( - --spectrum-picker-placeholder-text-color, - var(--spectrum-alias-placeholder-text-color) + --spectrum-alias-placeholder-text-color, + var(--spectrum-global-color-gray-800) ); } #label.placeholder:hover { /* .spectrum-Picker-label.is-placeholder:hover */ color: var( - --spectrum-picker-placeholder-text-color-hover, - var(--spectrum-alias-placeholder-text-color-hover) + --spectrum-alias-placeholder-text-color-hover, + var(--spectrum-global-color-gray-900) ); } #label.placeholder:active { /* .spectrum-Picker-label.is-placeholder:active */ color: var( - --spectrum-picker-placeholder-text-color-mouse-focus, - var(--spectrum-alias-placeholder-text-color) + --spectrum-alias-placeholder-text-color, + var(--spectrum-global-color-gray-800) ); } -#button:focus-visible #label.placeholder { - /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-label.is-placeholder */ +:host([quiet]) { + /* .spectrum-Picker--quiet */ + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); +} +:host([quiet]), +:host([quiet]:hover) { + /* .spectrum-Picker--quiet, + * .spectrum-Picker--quiet:hover */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); +} +:host([quiet]:hover) { + /* .spectrum-Picker--quiet:hover */ + color: var( + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet]:focus-visible), +:host([quiet]) .is-focused { + /* .spectrum-Picker--quiet.focus-ring, + * .spectrum-Picker--quiet.is-focused */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + box-shadow: 0 2px 0 0 + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([quiet]:focus-visible) .placeholder, +:host([quiet]) .is-focused.placeholder { + /* .spectrum-Picker--quiet.focus-ring.is-placeholder, + * .spectrum-Picker--quiet.is-focused.is-placeholder */ color: var( - --spectrum-picker-placeholder-text-color-key-focus, - var(--spectrum-alias-placeholder-text-color-hover) + --spectrum-alias-placeholder-text-color-hover, + var(--spectrum-global-color-gray-900) ); } -#button:focus-visible .dropdown { - /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */ +:host([quiet]:focus-visible) .spectrum-Picker-menuIcon, +:host([quiet]) .is-focused .spectrum-Picker-menuIcon { + /* .spectrum-Picker--quiet.focus-ring .spectrum-Picker-menuIcon, + * .spectrum-Picker--quiet.is-focused .spectrum-Picker-menuIcon */ + color: var( + --spectrum-alias-icon-color-focus, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet]) .is-open, +:host([quiet]:active) { + /* .spectrum-Picker--quiet.is-open, + * .spectrum-Picker--quiet:active */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + border-color: var(--spectrum-alias-border-color-transparent, transparent); +} +:host([quiet]) .is-open:focus-visible, +:host([quiet]) .is-open.is-focused, +:host([quiet]:active:focus-visible), +:host([quiet]:active) .is-focused { + /* .spectrum-Picker--quiet.is-open.focus-ring, + * .spectrum-Picker--quiet.is-open.is-focused, + * .spectrum-Picker--quiet:active.focus-ring, + * .spectrum-Picker--quiet:active.is-focused */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); + box-shadow: 0 2px 0 0 + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([quiet][invalid]:focus-visible), +:host([quiet][invalid]) .is-focused { + /* .spectrum-Picker--quiet.is-invalid.focus-ring, + * .spectrum-Picker--quiet.is-invalid.is-focused */ + box-shadow: 0 2px 0 0 + var( + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) + ); +} +:host([quiet][disabled]), +:host([quiet]:disabled) { + /* .spectrum-Picker--quiet.is-disabled, + * .spectrum-Picker--quiet:disabled */ + background-color: var( + --spectrum-alias-background-color-transparent, + transparent + ); color: var( - --spectrum-picker-icon-color-key-focus, - var(--spectrum-alias-icon-color-focus) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index 8be5a5a333..5edff187a3 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -16,9 +16,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ vertical-align: top; flex-wrap: wrap; } -:host([horizontal]) ::slotted(:not(:last-child)) { - /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */ - margin: 0 0 0 var(--spectrum-global-dimension-size-200); +:host([dir='ltr'][horizontal]) .spectrum-FieldGroup-item:not(:last-child) { + /* [dir=ltr] .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item:not(:last-child) */ + margin-right: var(--spectrum-global-dimension-size-200); +} +:host([dir='rtl'][horizontal]) .spectrum-FieldGroup-item:not(:last-child) { + /* [dir=rtl] .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item:not(:last-child) */ + margin-left: var(--spectrum-global-dimension-size-200); } :host([vertical]) { /* .spectrum-FieldGroup--vertical */ diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index 85a8c8c82e..52d7783d75 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -10,33 +10,94 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - /* .spectrum-FieldLabel, - * .spectrum-Form-itemLabel */ - display: block; - box-sizing: border-box; - padding-top: var( - --spectrum-fieldlabel-padding-top, - var(--spectrum-global-dimension-size-50) +.spectrum-FieldLabel--sizeM, +.spectrum-FieldLabel--sizeS { + /* .spectrum-FieldLabel--sizeM, + * .spectrum-FieldLabel--sizeS */ + --spectrum-fieldlabel-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-fieldlabel-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) ); - padding-bottom: var( - --spectrum-fieldlabel-padding-bottom, - var(--spectrum-global-dimension-size-65) + --spectrum-fieldlabel-text-size: var( + --spectrum-global-dimension-font-size-75 ); - padding-left: 0; - padding-right: 0; - font-size: var( - --spectrum-fieldlabel-text-size, - var(--spectrum-global-dimension-font-size-75) + --spectrum-fieldlabel-asterisk-gap: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-fieldlabel-asterisk-margin-y: var( + --spectrum-global-dimension-size-50 ); - font-weight: var( - --spectrum-fieldlabel-text-font-weight, + --spectrum-fieldlabel-padding-top: var(--spectrum-global-dimension-size-50); + --spectrum-fieldlabel-padding-bottom: var( + --spectrum-global-dimension-size-65 + ); +} +.spectrum-FieldLabel--sizeL { + /* .spectrum-FieldLabel--sizeL */ + --spectrum-fieldlabel-text-font-weight: var( + --spectrum-alias-body-text-font-weight, var(--spectrum-global-font-weight-regular) ); - line-height: var( - --spectrum-fieldlabel-text-line-height, + --spectrum-fieldlabel-text-line-height: var( + --spectrum-alias-component-text-line-height, var(--spectrum-global-font-line-height-small) ); + --spectrum-fieldlabel-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-fieldlabel-asterisk-gap: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-fieldlabel-asterisk-margin-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-fieldlabel-padding-top: var(--spectrum-global-dimension-size-75); + --spectrum-fieldlabel-padding-bottom: var( + --spectrum-global-dimension-size-115 + ); +} +.spectrum-FieldLabel--sizeXL { + /* .spectrum-FieldLabel--sizeXL */ + --spectrum-fieldlabel-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-fieldlabel-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-fieldlabel-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-fieldlabel-asterisk-gap: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-fieldlabel-asterisk-margin-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-fieldlabel-padding-top: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-fieldlabel-padding-bottom: var( + --spectrum-global-dimension-size-130 + ); +} +:host { + /* .spectrum-FieldLabel, + * .spectrum-Form-itemLabel */ + display: block; + box-sizing: border-box; + padding-top: var(--spectrum-fieldlabel-padding-top); + padding-bottom: var(--spectrum-fieldlabel-padding-bottom); + padding-left: 0; + padding-right: 0; + font-size: var(--spectrum-fieldlabel-text-size); + font-weight: var(--spectrum-fieldlabel-text-font-weight); + line-height: var(--spectrum-fieldlabel-text-line-height); vertical-align: top; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; @@ -44,72 +105,48 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .requiredIcon { /* [dir=ltr] .spectrum-FieldLabel-requiredIcon */ - margin-left: var( - --spectrum-fieldlabel-asterisk-gap, - var(--spectrum-global-dimension-size-25) - ); + margin-left: var(--spectrum-fieldlabel-asterisk-gap); margin-right: 0; } :host([dir='rtl']) .requiredIcon { /* [dir=rtl] .spectrum-FieldLabel-requiredIcon */ - margin-right: var( - --spectrum-fieldlabel-asterisk-gap, - var(--spectrum-global-dimension-size-25) - ); + margin-right: var(--spectrum-fieldlabel-asterisk-gap); margin-left: 0; } .requiredIcon { /* .spectrum-FieldLabel-requiredIcon */ - margin-top: var( - --spectrum-fieldlabel-asterisk-margin-y, - var(--spectrum-global-dimension-size-50) - ); + margin-top: var(--spectrum-fieldlabel-asterisk-margin-y); margin-bottom: 0; } :host([dir='ltr'][side-aligned='start']) { /* [dir=ltr] .spectrum-FieldLabel--left */ padding-left: 0; - padding-right: var( - --spectrum-fieldlabel-side-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding-right: var(--spectrum-global-dimension-size-100); } :host([dir='rtl'][side-aligned='start']) { /* [dir=rtl] .spectrum-FieldLabel--left */ padding-right: 0; - padding-left: var( - --spectrum-fieldlabel-side-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding-left: var(--spectrum-global-dimension-size-100); } :host([side-aligned='start']) { /* .spectrum-FieldLabel--left */ display: inline-block; - padding-top: var( - --spectrum-fieldlabel-side-padding-top, - var(--spectrum-global-dimension-size-100) - ); + padding-top: var(--spectrum-global-dimension-size-100); padding-bottom: 0; } :host([dir='ltr'][side-aligned='start']) .requiredIcon { /* [dir=ltr] .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon */ - margin-left: var( - --spectrum-fieldlabel-asterisk-gap, - var(--spectrum-global-dimension-size-25) - ); + margin-left: var(--spectrum-fieldlabel-asterisk-gap); margin-right: 0; } :host([dir='rtl'][side-aligned='start']) .requiredIcon { /* [dir=rtl] .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon */ - margin-right: var( - --spectrum-fieldlabel-asterisk-gap, - var(--spectrum-global-dimension-size-25) - ); + margin-right: var(--spectrum-fieldlabel-asterisk-gap); margin-left: 0; } :host([side-aligned='start']) .requiredIcon { /* .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon */ - margin-top: var(--spectrum-fieldlabel-side-asterisk-margin-y, 0); + margin-top: var(--spectrum-global-dimension-size-50); margin-bottom: 0; } :host([dir='ltr'][side-aligned='end']) { @@ -123,56 +160,39 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][side-aligned='end']) { /* [dir=ltr] .spectrum-FieldLabel--right */ padding-left: 0; - padding-right: var( - --spectrum-fieldlabel-side-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding-right: var(--spectrum-global-dimension-size-100); } :host([dir='rtl'][side-aligned='end']) { /* [dir=rtl] .spectrum-FieldLabel--right */ padding-right: 0; - padding-left: var( - --spectrum-fieldlabel-side-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding-left: var(--spectrum-global-dimension-size-100); } :host([side-aligned='end']) { /* .spectrum-FieldLabel--right */ display: inline-block; - padding-top: var( - --spectrum-fieldlabel-side-padding-top, - var(--spectrum-global-dimension-size-100) - ); + padding-top: var(--spectrum-global-dimension-size-100); padding-bottom: 0; } :host { /* .spectrum-FieldLabel, * .spectrum-Form-itemLabel */ color: var( - --spectrum-fieldlabel-text-color, - var(--spectrum-alias-label-text-color) - ); -} -:host([disabled]) { - /* .spectrum-FieldLabel.is-disabled, - * .spectrum-Form-itemLabel.is-disabled */ - color: var( - --spectrum-fieldlabel-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-label-text-color, + var(--spectrum-global-color-gray-700) ); } +:host([disabled]), :host([disabled]) .requiredIcon { - /* .spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon, + /* .spectrum-FieldLabel.is-disabled, + * .spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon, + * .spectrum-Form-itemLabel.is-disabled, * .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon */ color: var( - --spectrum-fieldlabel-asterisk-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } .requiredIcon { /* .spectrum-FieldLabel-requiredIcon */ - color: var( - --spectrum-fieldlabel-asterisk-color, - var(--spectrum-global-color-gray-600) - ); + color: var(--spectrum-global-color-gray-600); } diff --git a/packages/icon/src/spectrum-icon-alert-medium.css b/packages/icon/src/spectrum-icon-alert-medium.css index 2d457d7e10..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-alert-medium.css +++ b/packages/icon/src/spectrum-icon-alert-medium.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.alert-medium { - /* .spectrum-UIIcon-AlertMedium */ - width: var( - --spectrum-icon-alert-medium-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-alert-medium-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-alert-small.css b/packages/icon/src/spectrum-icon-alert-small.css index 8e4521af65..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-alert-small.css +++ b/packages/icon/src/spectrum-icon-alert-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.alert-small { - /* .spectrum-UIIcon-AlertSmall */ - width: var( - --spectrum-icon-alert-small-width, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-icon-alert-small-height, - var(--spectrum-global-dimension-size-175) - ); -} diff --git a/packages/icon/src/spectrum-icon-arrow-down-small.css b/packages/icon/src/spectrum-icon-arrow-down-small.css index 83f4ebeee6..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-arrow-down-small.css +++ b/packages/icon/src/spectrum-icon-arrow-down-small.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.arrow-down-small { - /* .spectrum-UIIcon-ArrowDownSmall */ - width: var( - --spectrum-icon-arrow-down-small-width, - var(--spectrum-global-dimension-size-100) - ); - height: var(--spectrum-icon-arrow-down-small-height); -} diff --git a/packages/icon/src/spectrum-icon-arrow-left-medium.css b/packages/icon/src/spectrum-icon-arrow-left-medium.css index 7e1b52d623..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-arrow-left-medium.css +++ b/packages/icon/src/spectrum-icon-arrow-left-medium.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.arrow-left-medium { - /* .spectrum-UIIcon-ArrowLeftMedium */ - width: var( - --spectrum-icon-arrow-left-medium-width, - var(--spectrum-global-dimension-size-175) - ); - height: var(--spectrum-icon-arrow-left-medium-height); -} diff --git a/packages/icon/src/spectrum-icon-asterick.css b/packages/icon/src/spectrum-icon-asterick.css index aa599c34c2..083181a5af 100644 --- a/packages/icon/src/spectrum-icon-asterick.css +++ b/packages/icon/src/spectrum-icon-asterick.css @@ -10,14 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.asterick { - /* .spectrum-UIIcon-Asterisk */ +.spectrum-UIIcon-Asterisk75 { + /* .spectrum-UIIcon-Asterisk75 */ width: var( - --spectrum-fieldlabel-asterisk-size, + --spectrum-alias-ui-icon-asterisk-size-75, + var(--spectrum-global-dimension-static-size-100) + ); + height: var(--spectrum-alias-ui-icon-asterisk-size-300); +} +.spectrum-UIIcon-Asterisk100 { + /* .spectrum-UIIcon-Asterisk100 */ + width: var( + --spectrum-alias-ui-icon-asterisk-size-100, var(--spectrum-global-dimension-size-100) ); height: var( - --spectrum-fieldlabel-asterisk-size, + --spectrum-alias-ui-icon-asterisk-size-100, var(--spectrum-global-dimension-size-100) ); } +.spectrum-UIIcon-Asterisk200 { + /* .spectrum-UIIcon-Asterisk200 */ + width: var(--spectrum-alias-ui-icon-asterisk-size-200); + height: var(--spectrum-alias-ui-icon-asterisk-size-200); +} +.spectrum-UIIcon-Asterisk300 { + /* .spectrum-UIIcon-Asterisk300 */ + width: var(--spectrum-alias-ui-icon-asterisk-size-300); + height: var(--spectrum-alias-ui-icon-asterisk-size-300); +} diff --git a/packages/icon/src/spectrum-icon-checkmark-medium.css b/packages/icon/src/spectrum-icon-checkmark-medium.css index 73d28b1aa4..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-checkmark-medium.css +++ b/packages/icon/src/spectrum-icon-checkmark-medium.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.checkmark-medium { - /* .spectrum-UIIcon-CheckmarkMedium */ - width: var(--spectrum-icon-checkmark-medium-width); - height: var(--spectrum-icon-checkmark-medium-height); -} diff --git a/packages/icon/src/spectrum-icon-checkmark-small.css b/packages/icon/src/spectrum-icon-checkmark-small.css index 155368bc76..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-checkmark-small.css +++ b/packages/icon/src/spectrum-icon-checkmark-small.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.checkmark-small { - /* .spectrum-UIIcon-CheckmarkSmall */ - width: var(--spectrum-icon-checkmark-small-width); - height: var(--spectrum-icon-checkmark-small-height); -} diff --git a/packages/icon/src/spectrum-icon-chevron-down-medium.css b/packages/icon/src/spectrum-icon-chevron-down-medium.css index a5c6c930df..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-down-medium.css +++ b/packages/icon/src/spectrum-icon-chevron-down-medium.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-down-medium { - /* .spectrum-UIIcon-ChevronDownMedium */ - width: var(--spectrum-icon-chevron-down-medium-width); - height: var( - --spectrum-icon-chevron-down-medium-height, - var(--spectrum-global-dimension-size-75) - ); -} diff --git a/packages/icon/src/spectrum-icon-chevron-down-small.css b/packages/icon/src/spectrum-icon-chevron-down-small.css index 49dfece328..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-down-small.css +++ b/packages/icon/src/spectrum-icon-chevron-down-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-down-small { - /* .spectrum-UIIcon-ChevronDownSmall */ - width: var( - --spectrum-icon-chevron-down-small-width, - var(--spectrum-global-dimension-size-100) - ); - height: var( - --spectrum-icon-chevron-down-small-height, - var(--spectrum-global-dimension-size-75) - ); -} diff --git a/packages/icon/src/spectrum-icon-chevron-left-large.css b/packages/icon/src/spectrum-icon-chevron-left-large.css index a61bd2bb2a..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-left-large.css +++ b/packages/icon/src/spectrum-icon-chevron-left-large.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-left-large { - /* .spectrum-UIIcon-ChevronLeftLarge */ - width: var(--spectrum-icon-chevron-left-large-width); - height: var( - --spectrum-icon-chevron-left-large-height, - var(--spectrum-global-dimension-size-200) - ); -} diff --git a/packages/icon/src/spectrum-icon-chevron-left-medium.css b/packages/icon/src/spectrum-icon-chevron-left-medium.css index 557700d0ad..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-left-medium.css +++ b/packages/icon/src/spectrum-icon-chevron-left-medium.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-left-medium { - /* .spectrum-UIIcon-ChevronLeftMedium */ - width: var( - --spectrum-icon-chevron-left-medium-width, - var(--spectrum-global-dimension-size-75) - ); - height: var(--spectrum-icon-chevron-left-medium-height); -} diff --git a/packages/icon/src/spectrum-icon-chevron-right-large.css b/packages/icon/src/spectrum-icon-chevron-right-large.css index e35086cd0b..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-right-large.css +++ b/packages/icon/src/spectrum-icon-chevron-right-large.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-right-large { - /* .spectrum-UIIcon-ChevronRightLarge */ - width: var(--spectrum-icon-chevron-right-large-width); - height: var( - --spectrum-icon-chevron-right-large-height, - var(--spectrum-global-dimension-size-200) - ); -} diff --git a/packages/icon/src/spectrum-icon-chevron-right-medium.css b/packages/icon/src/spectrum-icon-chevron-right-medium.css index 0507dbd7e1..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-right-medium.css +++ b/packages/icon/src/spectrum-icon-chevron-right-medium.css @@ -10,11 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-right-medium { - /* .spectrum-UIIcon-ChevronRightMedium */ - width: var( - --spectrum-icon-chevron-right-medium-width, - var(--spectrum-global-dimension-size-75) - ); - height: var(--spectrum-icon-chevron-right-medium-height); -} diff --git a/packages/icon/src/spectrum-icon-chevron-right-small.css b/packages/icon/src/spectrum-icon-chevron-right-small.css index 58b18c3386..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-right-small.css +++ b/packages/icon/src/spectrum-icon-chevron-right-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-right-small { - /* .spectrum-UIIcon-ChevronRightSmall */ - width: var( - --spectrum-icon-chevron-right-small-width, - var(--spectrum-global-dimension-size-75) - ); - height: var( - --spectrum-icon-chevron-right-small-height, - var(--spectrum-global-dimension-size-100) - ); -} diff --git a/packages/icon/src/spectrum-icon-chevron-up-small.css b/packages/icon/src/spectrum-icon-chevron-up-small.css index 25afef1c37..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-chevron-up-small.css +++ b/packages/icon/src/spectrum-icon-chevron-up-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.chevron-up-small { - /* .spectrum-UIIcon-ChevronUpSmall */ - width: var( - --spectrum-icon-chevron-up-small-width, - var(--spectrum-global-dimension-size-100) - ); - height: var( - --spectrum-icon-chevron-up-small-height, - var(--spectrum-global-dimension-size-75) - ); -} diff --git a/packages/icon/src/spectrum-icon-corner-triangle.css b/packages/icon/src/spectrum-icon-corner-triangle.css index ea28213b29..03668e3415 100644 --- a/packages/icon/src/spectrum-icon-corner-triangle.css +++ b/packages/icon/src/spectrum-icon-corner-triangle.css @@ -10,14 +10,35 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.corner-triangle { - /* .spectrum-UIIcon-CornerTriangle */ +.spectrum-UIIcon-CornerTriangle75 { + /* .spectrum-UIIcon-CornerTriangle75 */ width: var( - --spectrum-icon-cornertriangle-width, + --spectrum-alias-ui-icon-cornertriangle-size-75, var(--spectrum-global-dimension-size-65) ); height: var( - --spectrum-icon-cornertriangle-height, + --spectrum-alias-ui-icon-cornertriangle-size-75, var(--spectrum-global-dimension-size-65) ); } +.spectrum-UIIcon-CornerTriangle100 { + /* .spectrum-UIIcon-CornerTriangle100 */ + width: var(--spectrum-alias-ui-icon-cornertriangle-size-100); + height: var(--spectrum-alias-ui-icon-cornertriangle-size-100); +} +.spectrum-UIIcon-CornerTriangle200 { + /* .spectrum-UIIcon-CornerTriangle200 */ + width: var( + --spectrum-alias-ui-icon-cornertriangle-size-200, + var(--spectrum-global-dimension-size-75) + ); + height: var( + --spectrum-alias-ui-icon-cornertriangle-size-200, + var(--spectrum-global-dimension-size-75) + ); +} +.spectrum-UIIcon-CornerTriangle300 { + /* .spectrum-UIIcon-CornerTriangle300 */ + width: var(--spectrum-alias-ui-icon-cornertriangle-size-300); + height: var(--spectrum-alias-ui-icon-cornertriangle-size-300); +} diff --git a/packages/icon/src/spectrum-icon-cross-large.css b/packages/icon/src/spectrum-icon-cross-large.css index 28cbf1e2f5..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-cross-large.css +++ b/packages/icon/src/spectrum-icon-cross-large.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.cross-large { - /* .spectrum-UIIcon-CrossLarge */ - width: var(--spectrum-icon-cross-large-width); - height: var(--spectrum-icon-cross-large-height); -} diff --git a/packages/icon/src/spectrum-icon-cross-medium.css b/packages/icon/src/spectrum-icon-cross-medium.css index fcd4881b3e..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-cross-medium.css +++ b/packages/icon/src/spectrum-icon-cross-medium.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.cross-medium { - /* .spectrum-UIIcon-CrossMedium */ - width: var( - --spectrum-icon-cross-medium-width, - var(--spectrum-global-dimension-size-100) - ); - height: var( - --spectrum-icon-cross-medium-height, - var(--spectrum-global-dimension-size-100) - ); -} diff --git a/packages/icon/src/spectrum-icon-cross-small.css b/packages/icon/src/spectrum-icon-cross-small.css index acafd84d3e..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-cross-small.css +++ b/packages/icon/src/spectrum-icon-cross-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.cross-small { - /* .spectrum-UIIcon-CrossSmall */ - width: var( - --spectrum-icon-cross-small-width, - var(--spectrum-global-dimension-size-100) - ); - height: var( - --spectrum-icon-cross-small-height, - var(--spectrum-global-dimension-size-100) - ); -} diff --git a/packages/icon/src/spectrum-icon-dash-small.css b/packages/icon/src/spectrum-icon-dash-small.css index 298f3ffaa8..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-dash-small.css +++ b/packages/icon/src/spectrum-icon-dash-small.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.dash-small { - /* .spectrum-UIIcon-DashSmall */ - width: var(--spectrum-icon-dash-small-width); - height: var(--spectrum-icon-dash-small-height); -} diff --git a/packages/icon/src/spectrum-icon-double-gripper.css b/packages/icon/src/spectrum-icon-double-gripper.css index 808b4739bc..aacb24d30d 100644 --- a/packages/icon/src/spectrum-icon-double-gripper.css +++ b/packages/icon/src/spectrum-icon-double-gripper.css @@ -10,14 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.double-gripper { - /* .spectrum-UIIcon-DoubleGripper */ - width: var( - --spectrum-icon-doublegripper-width, - var(--spectrum-global-dimension-size-200) - ); +.spectrum-UIIcon-DoubleGripper100 { + /* .spectrum-UIIcon-DoubleGripper100 */ + width: var(--spectrum-alias-ui-icon-doublegripper-size-100-height); height: var( - --spectrum-icon-doublegripper-height, - var(--spectrum-global-dimension-size-50) + --spectrum-alias-ui-icon-doublegripper-size-100-width, + var(--spectrum-global-dimension-size-200) ); } diff --git a/packages/icon/src/spectrum-icon-folder-breadcrumb.css b/packages/icon/src/spectrum-icon-folder-breadcrumb.css index bb897ac3f6..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-folder-breadcrumb.css +++ b/packages/icon/src/spectrum-icon-folder-breadcrumb.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.folder-breadcrumb { - /* .spectrum-UIIcon-FolderBreadcrumb */ - width: var( - --spectrum-icon-folderbreadcrumb-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-folderbreadcrumb-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-help-medium.css b/packages/icon/src/spectrum-icon-help-medium.css index ae03ecda09..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-help-medium.css +++ b/packages/icon/src/spectrum-icon-help-medium.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.help-medium { - /* .spectrum-UIIcon-HelpMedium */ - width: var( - --spectrum-icon-info-medium-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-info-medium-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-help-small.css b/packages/icon/src/spectrum-icon-help-small.css index 16f08bfd38..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-help-small.css +++ b/packages/icon/src/spectrum-icon-help-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.help-small { - /* .spectrum-UIIcon-HelpSmall */ - width: var( - --spectrum-icon-info-small-width, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-icon-info-small-height, - var(--spectrum-global-dimension-size-175) - ); -} diff --git a/packages/icon/src/spectrum-icon-info-medium.css b/packages/icon/src/spectrum-icon-info-medium.css index 42f20d99d5..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-info-medium.css +++ b/packages/icon/src/spectrum-icon-info-medium.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.info-medium { - /* .spectrum-UIIcon-InfoMedium */ - width: var( - --spectrum-icon-info-medium-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-info-medium-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-info-small.css b/packages/icon/src/spectrum-icon-info-small.css index 75b470d41b..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-info-small.css +++ b/packages/icon/src/spectrum-icon-info-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.info-small { - /* .spectrum-UIIcon-InfoSmall */ - width: var( - --spectrum-icon-info-small-width, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-icon-info-small-height, - var(--spectrum-global-dimension-size-175) - ); -} diff --git a/packages/icon/src/spectrum-icon-magnifier.css b/packages/icon/src/spectrum-icon-magnifier.css index d816e7f7b2..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-magnifier.css +++ b/packages/icon/src/spectrum-icon-magnifier.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.magnifier { - /* .spectrum-UIIcon-Magnifier */ - width: var( - --spectrum-icon-magnifier-width, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-icon-magnifier-height, - var(--spectrum-global-dimension-size-200) - ); -} diff --git a/packages/icon/src/spectrum-icon-skip-left.css b/packages/icon/src/spectrum-icon-skip-left.css index 888e363d88..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-skip-left.css +++ b/packages/icon/src/spectrum-icon-skip-left.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.skip-left { - /* .spectrum-UIIcon-SkipLeft */ - width: var(--spectrum-icon-skip-left-width); - height: var(--spectrum-icon-skip-left-height); -} diff --git a/packages/icon/src/spectrum-icon-skip-right.css b/packages/icon/src/spectrum-icon-skip-right.css index 006368be4b..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-skip-right.css +++ b/packages/icon/src/spectrum-icon-skip-right.css @@ -10,8 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.skip-right { - /* .spectrum-UIIcon-SkipRight */ - width: var(--spectrum-icon-skip-right-width); - height: var(--spectrum-icon-skip-right-height); -} diff --git a/packages/icon/src/spectrum-icon-star-outline.css b/packages/icon/src/spectrum-icon-star-outline.css index 23f0cd88d7..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-star-outline.css +++ b/packages/icon/src/spectrum-icon-star-outline.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.star-outline { - /* .spectrum-UIIcon-StarOutline */ - width: var( - --spectrum-icon-star-outline-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-star-outline-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-star.css b/packages/icon/src/spectrum-icon-star.css index cff5052db9..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-star.css +++ b/packages/icon/src/spectrum-icon-star.css @@ -10,25 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.star { - /* .spectrum-UIIcon-Star */ - width: var( - --spectrum-icon-star-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-star-height, - var(--spectrum-global-dimension-size-225) - ); -} -.spectrum-UIIcon-StarOutline { - /* .spectrum-UIIcon-StarOutline */ - width: var( - --spectrum-icon-star-outline-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-star-outline-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-success-medium.css b/packages/icon/src/spectrum-icon-success-medium.css index 0be01048ce..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-success-medium.css +++ b/packages/icon/src/spectrum-icon-success-medium.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.success-medium { - /* .spectrum-UIIcon-SuccessMedium */ - width: var( - --spectrum-icon-success-medium-width, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-icon-success-medium-height, - var(--spectrum-global-dimension-size-225) - ); -} diff --git a/packages/icon/src/spectrum-icon-success-small.css b/packages/icon/src/spectrum-icon-success-small.css index 5c4052f0ee..dd76314e61 100644 --- a/packages/icon/src/spectrum-icon-success-small.css +++ b/packages/icon/src/spectrum-icon-success-small.css @@ -10,14 +10,3 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.success-small { - /* .spectrum-UIIcon-SuccessSmall */ - width: var( - --spectrum-icon-success-small-width, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-icon-success-small-height, - var(--spectrum-global-dimension-size-175) - ); -} diff --git a/packages/icon/src/spectrum-icon-triple-gripper.css b/packages/icon/src/spectrum-icon-triple-gripper.css index 728dbfb64c..8307198e09 100644 --- a/packages/icon/src/spectrum-icon-triple-gripper.css +++ b/packages/icon/src/spectrum-icon-triple-gripper.css @@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.triple-gripper { - /* .spectrum-UIIcon-TripleGripper */ - width: var(--spectrum-icon-triplegripper-width); - height: var( - --spectrum-icon-triplegripper-height, - var(--spectrum-global-dimension-size-85) +.spectrum-UIIcon-TripleGripper100 { + /* .spectrum-UIIcon-TripleGripper100 */ + width: var( + --spectrum-alias-ui-icon-triplegripper-size-100-height, + var(--spectrum-global-dimension-size-100) ); + height: var(--spectrum-alias-ui-icon-triplegripper-size-100-width); } diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index edf23f94df..6603bfa654 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -23,44 +23,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-UIIcon:not(:root) */ overflow: hidden; } -:host([size='xxs']), -:host([size='xxs']) img, -:host([size='xxs']) svg { - /* .spectrum-Icon--sizeXXS, - * .spectrum-Icon--sizeXXS img, - * .spectrum-Icon--sizeXXS svg */ - height: calc( - var( - --spectrum-alias-workflow-icon-size-s, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); - width: calc( - var( - --spectrum-alias-workflow-icon-size-s, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); -} -:host([size='xs']), -:host([size='xs']) img, -:host([size='xs']) svg { - /* .spectrum-Icon--sizeXS, - * .spectrum-Icon--sizeXS img, - * .spectrum-Icon--sizeXS svg */ - height: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) / 2 - ); - width: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) / 2 - ); -} :host([size='s']), :host([size='s']) img, :host([size='s']) svg { @@ -97,18 +59,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeL, * .spectrum-Icon--sizeL img, * .spectrum-Icon--sizeL svg */ - height: calc( - var( - --spectrum-alias-workflow-icon-size-s, - var(--spectrum-global-dimension-size-200) - ) * 2 - ); - width: calc( - var( - --spectrum-alias-workflow-icon-size-s, - var(--spectrum-global-dimension-size-200) - ) * 2 - ); + height: var(--spectrum-alias-workflow-icon-size-l); + width: var(--spectrum-alias-workflow-icon-size-l); } :host([size='xl']), :host([size='xl']) img, @@ -116,17 +68,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeXL, * .spectrum-Icon--sizeXL img, * .spectrum-Icon--sizeXL svg */ - height: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) * 2 + height: var( + --spectrum-alias-workflow-icon-size-xl, + var(--spectrum-global-dimension-size-275) ); - width: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) * 2 + width: var( + --spectrum-alias-workflow-icon-size-xl, + var(--spectrum-global-dimension-size-275) ); } :host([size='xxl']), @@ -135,16 +83,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeXXL, * .spectrum-Icon--sizeXXL img, * .spectrum-Icon--sizeXXL svg */ - height: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) * 3 - ); - width: calc( - var( - --spectrum-alias-workflow-icon-size-m, - var(--spectrum-global-dimension-size-225) - ) * 3 - ); + height: var(--spectrum-global-dimension-size-400); + width: var(--spectrum-global-dimension-size-400); } diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index 64f459e797..f4cb7ba662 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; -export default svg``; +export default svg``; diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index 433cbebe38..f4cb7ba662 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; -export default svg``; +export default svg``; diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index 770af15ba3..2436aeece9 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -15,10 +15,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-right: calc( var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-listitem-icon-gap) ); } :host([dir='rtl']) .spectrum-Menu.is-selectable .spectrum-Menu-item { @@ -26,10 +23,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: calc( var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-listitem-icon-gap) ); } :host([dir='ltr']) @@ -37,10 +31,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Menu-item.is-selected { /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-right: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -52,10 +43,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Menu-item.is-selected { /* [dir=rtl] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-left: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -64,27 +52,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .spectrum-Menu-item { /* [dir=ltr] .spectrum-Menu-item */ - border-left: var( - --spectrum-listitem-border-size-key-focus, - var(--spectrum-global-dimension-static-size-25) - ) - solid transparent; + border-left: var(--spectrum-listitem-focus-indicator-size) solid transparent; } :host([dir='rtl']) .spectrum-Menu-item { /* [dir=rtl] .spectrum-Menu-item */ - border-right: var( - --spectrum-listitem-border-size-key-focus, - var(--spectrum-global-dimension-static-size-25) - ) - solid transparent; + border-right: var(--spectrum-listitem-focus-indicator-size) solid + transparent; } :host([dir='ltr']) .spectrum-Menu-item.is-selected { /* [dir=ltr] .spectrum-Menu-item.is-selected */ padding-right: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -94,10 +72,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) .spectrum-Menu-item.is-selected { /* [dir=rtl] .spectrum-Menu-item.is-selected */ padding-left: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -114,10 +89,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + .spectrum-Menu-itemLabel { /* [dir=ltr] .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel, * [dir=ltr] .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel */ - margin-left: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-left: var(--spectrum-listitem-icon-gap); } :host([dir='rtl']) .spectrum-Menu-item @@ -129,28 +101,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + .spectrum-Menu-itemLabel { /* [dir=rtl] .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel, * [dir=rtl] .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel */ - margin-right: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-right: var(--spectrum-listitem-icon-gap); } :host([dir='ltr']) .spectrum-Menu-checkmark, :host([dir='ltr']) .spectrum-Menu-chevron { /* [dir=ltr] .spectrum-Menu-checkmark, * [dir=ltr] .spectrum-Menu-chevron */ - margin-left: var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-listitem-icon-gap); } :host([dir='rtl']) .spectrum-Menu-checkmark, :host([dir='rtl']) .spectrum-Menu-chevron { /* [dir=rtl] .spectrum-Menu-checkmark, * [dir=rtl] .spectrum-Menu-chevron */ - margin-right: var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-listitem-icon-gap); } :host([dir='rtl']) .spectrum-Menu-chevron { /* [dir=rtl] .spectrum-Menu-chevron */ @@ -160,15 +123,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Menu-divider */ box-sizing: initial; overflow: visible; - height: var( - --spectrum-listitem-divider-size, - var(--spectrum-alias-border-size-thick) - ); - margin: calc(var(--spectrum-listitem-divider-padding, 3px) / 2) - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ); + height: var(--spectrum-listitem-divider-size); + margin: calc(var(--spectrum-listitem-divider-padding) / 2) + var(--spectrum-global-dimension-size-85); padding: 0; border: none; } @@ -177,8 +134,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu-item.focus-ring, * [dir=ltr] .spectrum-Menu-item.is-focused */ border-left-color: var( - --spectrum-listitem-option-focus-indicator-color, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([dir='rtl']) .spectrum-Menu-item:focus-visible, @@ -186,14 +143,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu-item.focus-ring, * [dir=rtl] .spectrum-Menu-item.is-focused */ border-right-color: var( - --spectrum-listitem-option-focus-indicator-color, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host { /* .spectrum-Menu-divider */ background-color: var( - --spectrum-listitem-divider-color, - var(--spectrum-alias-border-color-extralight) + --spectrum-alias-border-color-extralight, + var(--spectrum-global-color-gray-100) ); } diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 75aad01e9a..8104221142 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -15,10 +15,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-right: calc( var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-listitem-icon-gap) ); } :host([dir='rtl']) .spectrum-Menu.is-selectable #button { @@ -26,19 +23,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: calc( var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-listitem-icon-gap) ); } :host([dir='ltr'][selected]) .spectrum-Menu.is-selectable #button { /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-right: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -48,10 +39,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl'][selected]) .spectrum-Menu.is-selectable #button { /* [dir=rtl] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-left: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -65,19 +53,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-Menu-item */ - border-left: var( - --spectrum-listitem-border-size-key-focus, - var(--spectrum-global-dimension-static-size-25) - ) - solid transparent; + border-left: var(--spectrum-listitem-focus-indicator-size) solid transparent; } :host([dir='rtl']) #button { /* [dir=rtl] .spectrum-Menu-item */ - border-right: var( - --spectrum-listitem-border-size-key-focus, - var(--spectrum-global-dimension-static-size-25) - ) - solid transparent; + border-right: var(--spectrum-listitem-focus-indicator-size) solid + transparent; } #button { /* .spectrum-Menu-item */ @@ -87,31 +68,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ align-items: center; box-sizing: border-box; padding: var(--spectrum-global-dimension-size-85) - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) + var(--spectrum-listitem-padding-right) var(--spectrum-global-dimension-size-85) - calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - - var( - --spectrum-listitem-border-size-key-focus, - var(--spectrum-global-dimension-static-size-25) - ) - ); + var(--spectrum-listitem-padding-left); margin: 0; - min-height: var(--spectrum-listitem-option-height); - font-size: var( - --spectrum-listitem-option-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-listitem-option-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); + min-height: var(--spectrum-listitem-height); + font-size: var(--spectrum-listitem-text-size); + font-weight: var(--spectrum-listitem-text-font-weight); font-style: normal; text-decoration: none; } @@ -122,10 +85,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][selected]) #button { /* [dir=ltr] .spectrum-Menu-item.is-selected */ padding-right: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -135,10 +95,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl'][selected]) #button { /* [dir=rtl] .spectrum-Menu-item.is-selected */ padding-left: calc( - var( - --spectrum-listitem-option-padding, - var(--spectrum-global-dimension-static-size-150) - ) - + var(--spectrum-listitem-padding-right) - var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) @@ -160,19 +117,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) #button .spectrum-Menu-itemIcon + #label { /* [dir=ltr] .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel, * [dir=ltr] .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel */ - margin-left: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-left: var(--spectrum-listitem-icon-gap); } :host([dir='rtl']) #button slot[name='icon'] + #label, :host([dir='rtl']) #button .spectrum-Menu-itemIcon + #label { /* [dir=rtl] .spectrum-Menu-item .spectrum-Icon+.spectrum-Menu-itemLabel, * [dir=rtl] .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel */ - margin-right: var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-right: var(--spectrum-listitem-icon-gap); } slot[name='icon'] + #label, .spectrum-Menu-itemIcon + #label { @@ -180,14 +131,8 @@ slot[name='icon'] + #label, * .spectrum-Menu-item .spectrum-Menu-itemIcon+.spectrum-Menu-itemLabel */ width: calc( 100% - var(--spectrum-icon-checkmark-medium-width) - - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-listitem-thumbnail-image-padding-x, - var(--spectrum-global-dimension-size-100) - ) - + var(--spectrum-listitem-icon-gap) - + var(--spectrum-listitem-thumbnail-padding-left) - var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) @@ -203,10 +148,7 @@ slot[name='icon'] + #label, overflow-wrap: break-word; width: calc( 100% - var(--spectrum-icon-checkmark-medium-width) - - var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-listitem-icon-gap) ); } .spectrum-Menu-itemLabel--wrapping { @@ -224,19 +166,13 @@ slot[name='icon'] + #label, :host([dir='ltr']) .spectrum-Menu-chevron { /* [dir=ltr] .spectrum-Menu-checkmark, * [dir=ltr] .spectrum-Menu-chevron */ - margin-left: var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-listitem-icon-gap); } :host([dir='rtl']) #selected, :host([dir='rtl']) .spectrum-Menu-chevron { /* [dir=rtl] .spectrum-Menu-checkmark, * [dir=rtl] .spectrum-Menu-chevron */ - margin-right: var( - --spectrum-listitem-option-icon-padding-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-listitem-icon-gap); } #selected { /* .spectrum-Menu-checkmark, @@ -249,14 +185,18 @@ slot[name='icon'] + #label, transform: matrix(-1, 0, 0, 1, 0, 0); } #button { - /* .spectrum-Menu-item */ + /* .spectrum-Menu, + * .spectrum-Menu-item */ background-color: var( - --spectrum-listitem-option-background-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); +} +#button { + /* .spectrum-Menu-item */ color: var( - --spectrum-listitem-option-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } :host([dir='ltr']) #button:focus-visible, @@ -264,8 +204,8 @@ slot[name='icon'] + #label, /* [dir=ltr] .spectrum-Menu-item.focus-ring, * [dir=ltr] .spectrum-Menu-item.is-focused */ border-left-color: var( - --spectrum-listitem-option-focus-indicator-color, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([dir='rtl']) #button:focus-visible, @@ -273,73 +213,58 @@ slot[name='icon'] + #label, /* [dir=rtl] .spectrum-Menu-item.focus-ring, * [dir=rtl] .spectrum-Menu-item.is-focused */ border-right-color: var( - --spectrum-listitem-option-focus-indicator-color, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } #button:focus-visible, -:host([focused]) #button { - /* .spectrum-Menu-item.focus-ring, - * .spectrum-Menu-item.is-focused */ - background-color: var( - --spectrum-listitem-option-background-color-key-focus, - var(--spectrum-alias-background-color-hover-overlay) - ); - color: var( - --spectrum-listitem-option-text-color-key-focus, - var(--spectrum-alias-text-color) - ); -} +:host([focused]) #button, #button.is-highlighted, #button.is-open, #button:focus, #button:hover { - /* .spectrum-Menu-item.is-highlighted, + /* .spectrum-Menu-item.focus-ring, + * .spectrum-Menu-item.is-focused, + * .spectrum-Menu-item.is-highlighted, * .spectrum-Menu-item.is-open, * .spectrum-Menu-item:focus, * .spectrum-Menu-item:hover */ - background-color: var( - --spectrum-listitem-option-background-color-hover, - var(--spectrum-alias-background-color-hover-overlay) - ); + background-color: var(--spectrum-alias-background-color-hover-overlay); color: var( - --spectrum-listitem-option-text-color-hover, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } :host([selected]) #button { /* .spectrum-Menu-item.is-selected */ color: var( - --spectrum-listitem-option-text-color-selected, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } :host([selected]) #button #selected { /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ color: var( - --spectrum-listitem-option-icon-color-selected, - var(--spectrum-alias-icon-color-selected) + --spectrum-alias-icon-color-selected, + var(--spectrum-global-color-blue-500) ); } .is-active, #button:active { /* .spectrum-Menu-item .is-active, * .spectrum-Menu-item:active */ - background-color: var( - --spectrum-listitem-option-background-color-down, - var(--spectrum-alias-background-color-hover-overlay) - ); + background-color: var(--spectrum-alias-background-color-hover-overlay); } :host([disabled]) #button { /* .spectrum-Menu-item.is-disabled */ background-color: var( - --spectrum-listitem-option-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); background-image: none; color: var( - --spectrum-listitem-option-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); cursor: default; } diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index 53e5dd9b8c..bafeacdf10 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -12,6 +12,42 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Menu */ + --spectrum-listitem-divider-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-listitem-divider-padding: 3px; + --spectrum-listitem-focus-indicator-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-listitem-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-listitem-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-listitem-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-listitem-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-listitem-padding-left: var( + --spectrum-alias-item-workflow-padding-left-m + ); + --spectrum-listitem-padding-right: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-listitem-thumbnail-padding-left: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); display: inline-block; box-sizing: border-box; margin-top: var( @@ -33,9 +69,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: block; } :host { - /* .spectrum-Menu */ + /* .spectrum-Menu, + * .spectrum-Menu-item */ background-color: var( - --spectrum-listitem-background-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); } diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 4228778415..cce19b0889 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -10,6 +10,115 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-ProgressBar--sizeS { + /* .spectrum-ProgressBar--sizeS */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-s-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-50); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2400, + 192px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1700 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-75 + ); +} +.spectrum-ProgressBar--sizeM { + /* .spectrum-ProgressBar--sizeM */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-m-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-75); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2400, + 192px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1700 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-100 + ); +} +.spectrum-ProgressBar--sizeL { + /* .spectrum-ProgressBar--sizeL */ + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-100); + --spectrum-progressbar-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2500, + 200px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-1800 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); +} +.spectrum-ProgressBar--sizeXL { + /* .spectrum-ProgressBar--sizeXL */ + --spectrum-progressbar-border-radius: var( + --spectrum-progressbar-xl-border-radius + ); + --spectrum-progressbar-label-gap-y: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-progressbar-height: var(--spectrum-global-dimension-size-125); + --spectrum-progressbar-width: var( + --spectrum-global-dimension-static-size-2800, + 224px + ); + --spectrum-progressbar-indeterminate-fill-width: var( + --spectrum-global-dimension-size-2000 + ); + --spectrum-progressbar-indeterminate-animation-ease: var( + --spectrum-global-animation-ease-in-out, + cubic-bezier(0.45, 0, 0.4, 1) + ); + --spectrum-progressbar-indeterminate-duration: var( + --spectrum-global-animation-duration-2000, + 1000ms + ); + --spectrum-fieldlabel-side-padding-right: var( + --spectrum-global-dimension-size-200 + ); +} :host { /* .spectrum-ProgressBar */ position: relative; @@ -17,35 +126,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-flow: row wrap; justify-content: space-between; align-items: center; + width: var(--spectrum-progressbar-width); vertical-align: top; } -:host, -.track { - /* .spectrum-ProgressBar, - * .spectrum-ProgressBar-track */ - width: var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ); -} .track { /* .spectrum-ProgressBar-track */ overflow: hidden; - border-radius: var(--spectrum-progressbar-large-border-radius); + width: 100%; + height: var(--spectrum-progressbar-height); + border-radius: var(--spectrum-progressbar-border-radius); z-index: 1; } -.fill, -.track { - /* .spectrum-ProgressBar-fill, - * .spectrum-ProgressBar-track */ - height: var( - --spectrum-progressbar-large-height, - var(--spectrum-global-dimension-size-75) - ); -} .fill { /* .spectrum-ProgressBar-fill */ border: none; + height: var(--spectrum-progressbar-height); transition: width 1s; } :host([dir='ltr']) .label, @@ -64,22 +159,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .percentage { /* .spectrum-ProgressBar-label, * .spectrum-ProgressBar-percentage */ - font-size: var( - --spectrum-fieldlabel-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-fieldlabel-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); - line-height: var( - --spectrum-fieldlabel-text-line-height, - var(--spectrum-global-font-line-height-small) - ); - margin-bottom: var( - --spectrum-progressbar-large-label-gap-y, - var(--spectrum-global-dimension-size-115) - ); + margin-bottom: var(--spectrum-progressbar-label-gap-y); } .label { /* .spectrum-ProgressBar-label */ @@ -87,17 +167,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .percentage { /* [dir=ltr] .spectrum-ProgressBar-percentage */ - margin-left: var( - --spectrum-progressbar-small-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl']) .percentage { /* [dir=rtl] .spectrum-ProgressBar-percentage */ - margin-right: var( - --spectrum-progressbar-small-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } .percentage { /* .spectrum-ProgressBar-percentage */ @@ -110,22 +184,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ justify-content: space-between; width: auto; } +:host([side-label]) .track { + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track */ + min-width: var(--spectrum-progressbar-width); + flex: 1 1 var(--spectrum-progressbar-width); +} :host([dir='ltr'][side-label]) .label { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ - margin-right: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl'][side-label]) .label { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ - margin-left: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([side-label]) .label { /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ + flex-grow: 0; margin-bottom: 0; } :host([dir='ltr'][side-label]) .percentage { @@ -138,164 +212,101 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][side-label]) .percentage { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - margin-left: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-left: var(--spectrum-fieldlabel-side-padding-right); } :host([dir='rtl'][side-label]) .percentage { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - margin-right: var( - --spectrum-progressbar-large-label-gap-x, - var(--spectrum-global-dimension-size-150) - ); + margin-right: var(--spectrum-fieldlabel-side-padding-right); } :host([side-label]) .percentage { /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ order: 3; margin-bottom: 0; } -:host([small]) { - /* .spectrum-ProgressBar--small */ - min-width: var( - --spectrum-progressbar-small-width, - var(--spectrum-global-dimension-size-2400) - ); -} -:host([small]) .fill, -:host([small]) .track { - /* .spectrum-ProgressBar--small .spectrum-ProgressBar-fill, - * .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ - height: var( - --spectrum-progressbar-small-height, - var(--spectrum-global-dimension-size-50) - ); -} -:host([small]) .track { - /* .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ - border-radius: var(--spectrum-progressbar-small-border-radius); -} :host([indeterminate]) .fill { /* .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ - width: var( - --spectrum-progressbar-large-indeterminate-fill-width, - var(--spectrum-global-dimension-size-1700) - ); + width: var(--spectrum-progressbar-indeterminate-fill-width); position: relative; animation-timing-function: var( - --spectrum-progressbar-large-indeterminate-animation-ease, - var(--spectrum-global-animation-ease-in-out) + --spectrum-progressbar-indeterminate-animation-ease ); will-change: transform; } :host([dir='ltr'][indeterminate]) .fill { /* [dir=ltr] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-ltr - var( - --spectrum-progressbar-large-indeterminate-duration, - var(--spectrum-global-animation-duration-2000) - ) - infinite; + var(--spectrum-progressbar-indeterminate-duration) infinite; } :host([dir='rtl'][indeterminate]) .fill { /* [dir=rtl] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-rtl - var( - --spectrum-progressbar-large-indeterminate-duration, - var(--spectrum-global-animation-duration-2000) - ) - infinite; + var(--spectrum-progressbar-indeterminate-duration) infinite; } @keyframes indeterminate-loop-ltr { 0% { transform: translate( - calc( - -1 * var(--spectrum-progressbar-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700)) - ) + calc(-1 * var(--spectrum-progressbar-indeterminate-fill-width)) ); } to { - transform: translate( - var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ) - ); + transform: translate(var(--spectrum-progressbar-width)); } } @keyframes indeterminate-loop-rtl { 0% { - transform: translate( - var( - --spectrum-progressbar-large-width, - var(--spectrum-global-dimension-size-2400) - ) - ); + transform: translate(var(--spectrum-progressbar-width)); } to { - transform: translate( - calc( - -1 * var(--spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400)) - ) - ); + transform: translate(calc(-1 * var(--spectrum-progressbar-width))); } } .fill { /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-track-fill-color, - var(--spectrum-global-color-blue-500) - ); + background: var(--spectrum-global-color-blue-500); } .track { /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ background-color: var( - --spectrum-progressbar-large-track-color, - var(--spectrum-alias-track-color-default) + --spectrum-alias-track-color-default, + var(--spectrum-global-color-gray-300) ); } :host([over-background]) .fill { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-over-background-track-fill-color, - var(--spectrum-global-color-static-white) - ); + background: var(--spectrum-global-color-static-white, #fff); } :host([over-background]) .label, :host([over-background]) .percentage { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-label, * .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-percentage */ - color: var( - --spectrum-progressbar-large-over-background-track-fill-color, - var(--spectrum-global-color-static-white) - ); + color: var(--spectrum-global-color-static-white, #fff); } :host([over-background]) .track { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-track */ background-color: var( - --spectrum-progressbar-large-over-background-track-color, - var(--spectrum-alias-track-color-over-background) + --spectrum-alias-track-color-over-background, + hsla(0, 0%, 100%, 0.2) ); } :host([positive]) .fill { /* .spectrum-ProgressBar.is-positive .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-positive, - var(--spectrum-semantic-positive-color-status) + --spectrum-semantic-positive-color-status, + var(--spectrum-global-color-green-400) ); } -:host([warning]) .fill { - /* .spectrum-ProgressBar.is-warning .spectrum-ProgressBar-fill */ +:host(.is-notice) .fill { + /* .spectrum-ProgressBar.is-notice .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-warning, - var(--spectrum-semantic-notice-color-status) + --spectrum-semantic-notice-color-status, + var(--spectrum-global-color-orange-400) ); } -:host([critical]) .fill { - /* .spectrum-ProgressBar.is-critical .spectrum-ProgressBar-fill */ +:host(.is-negative) .fill { + /* .spectrum-ProgressBar.is-negative .spectrum-ProgressBar-fill */ background: var( - --spectrum-meter-large-track-color-critical, - var(--spectrum-semantic-negative-color-status) + --spectrum-semantic-negative-color-status, + var(--spectrum-global-color-red-400) ); } .label, @@ -303,7 +314,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ProgressBar-label, * .spectrum-ProgressBar-percentage */ color: var( - --spectrum-fieldlabel-text-color, - var(--spectrum-alias-label-text-color) + --spectrum-alias-label-text-color, + var(--spectrum-global-color-gray-700) ); } diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 9e74e06982..7fc4768747 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -32,7 +32,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--bottom.is-open */ transform: translateY( var( - --spectrum-picker-popover-offset-y, + --spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -41,7 +41,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--top.is-open */ transform: translateY( calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -49,7 +49,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--right.is-open */ transform: translateX( var( - --spectrum-picker-popover-offset-y, + --spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -58,7 +58,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--left.is-open */ transform: translateX( calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -84,14 +84,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #tip { /* .spectrum-Popover-tip */ position: absolute; - --spectrum-popover-tip-size: var( - --spectrum-popover-tip-width, - var(--spectrum-global-dimension-size-250) - ); - --spectrum-popover-tip-borderWidth: var( - --spectrum-popover-border-size, - var(--spectrum-alias-border-size-thin) - ); -webkit-transform: translate(0); } #tip .triangle { diff --git a/packages/quick-actions/src/spectrum-quick-actions.css b/packages/quick-actions/src/spectrum-quick-actions.css index ac063c26c8..0ed7d95982 100644 --- a/packages/quick-actions/src/spectrum-quick-actions.css +++ b/packages/quick-actions/src/spectrum-quick-actions.css @@ -32,7 +32,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-QuickActions--left.is-open */ transform: translateX( var( - --spectrum-picker-popover-offset-y, + --spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -41,7 +41,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-QuickActions--right.is-open */ transform: translateX( calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 9ae1a1903b..0e59ac6735 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -12,13 +12,54 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Radio */ + --spectrum-radio-circle-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-radio-circle-dot-size: var( + --spectrum-global-dimension-static-size-50, + 4px + ); + --spectrum-radio-text-font-style: var( + --spectrum-global-font-style-regular, + normal + ); + --spectrum-radio-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-radio-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-radio-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-radio-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-radio-circle-diameter: var( + --spectrum-alias-item-control-2-size-m, + var(--spectrum-global-dimension-size-175) + ); + --spectrum-radio-text-gap: var( + --spectrum-alias-item-control-gap-m, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-radio-radius: calc(var(--spectrum-radio-circle-diameter) / 2); + --spectrum-radio-border-width-checked: calc( + var(--spectrum-radio-circle-diameter) / 2 - + var(--spectrum-radio-circle-dot-size) / 2 + ); + --spectrum-radio-labelbelow-label-margin: 4px 0 0 0; + --spectrum-radio-labelbelow-height: auto; + --spectrum-radio-label-margin-top: 6px; display: inline-flex; align-items: flex-start; position: relative; - min-height: var( - --spectrum-radio-height, - var(--spectrum-global-dimension-size-400) - ); + min-height: var(--spectrum-radio-height); max-width: 100%; vertical-align: top; } @@ -44,16 +85,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([checked]) #input + #button:before { /* .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-width: calc( - var( - --spectrum-radio-circle-diameter, - var(--spectrum-global-dimension-size-175) - ) / 2 - - var( - --spectrum-radio-circle-dot-size, - var(--spectrum-global-dimension-static-size-50) - ) / 2 - ); + border-width: var(--spectrum-radio-border-width-checked); } #input:focus-visible + #button:after { /* .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after */ @@ -74,37 +106,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Radio-label */ - margin-left: var( - --spectrum-radio-text-gap, - var(--spectrum-global-dimension-size-125) - ); + margin-left: var(--spectrum-radio-text-gap); } :host([dir='rtl']) #label { /* [dir=rtl] .spectrum-Radio-label */ - margin-right: var( - --spectrum-radio-text-gap, - var(--spectrum-global-dimension-size-125) - ); + margin-right: var(--spectrum-radio-text-gap); } #label { /* .spectrum-Radio-label */ - margin-top: var(--spectrum-global-dimension-size-65); - font-size: var( - --spectrum-radio-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-radio-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - font-style: var( - --spectrum-radio-text-font-style, - var(--spectrum-global-font-style-regular) - ); - line-height: var( - --spectrum-radio-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); + margin-top: var(--spectrum-radio-label-margin-top); + font-size: var(--spectrum-radio-text-size); + font-weight: var(--spectrum-radio-text-font-weight); + font-style: var(--spectrum-radio-text-font-style); + line-height: var(--spectrum-radio-text-line-height); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; } @@ -113,14 +127,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: relative; margin: calc( ( - var( - --spectrum-radio-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-radio-circle-diameter, - var(--spectrum-global-dimension-size-175) - ) + var(--spectrum-radio-height) - + var(--spectrum-radio-circle-diameter) ) / 2 ) 0; @@ -132,14 +140,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Radio-button, * .spectrum-Radio-button:before */ box-sizing: border-box; - width: var( - --spectrum-radio-circle-diameter, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-radio-circle-diameter, - var(--spectrum-global-dimension-size-175) - ); + width: var(--spectrum-radio-circle-diameter); + height: var(--spectrum-radio-circle-diameter); } #button:before { /* .spectrum-Radio-button:before */ @@ -147,16 +149,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ z-index: 0; content: ''; position: absolute; - border-radius: calc( - var( - --spectrum-radio-circle-diameter, - var(--spectrum-global-dimension-size-175) - ) / 2 - ); - border-width: var( - --spectrum-radio-circle-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-radius: var(--spectrum-radio-radius); + border-width: var(--spectrum-radio-circle-border-size); border-style: solid; transition: border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, @@ -186,7 +180,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: inline-flex; flex-direction: column; align-items: center; - height: auto; + height: var(--spectrum-radio-labelbelow-height); } :host([label-below]) #button { /* .spectrum-Radio--labelBelow .spectrum-Radio-button */ @@ -195,132 +189,90 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([label-below]) #label { /* .spectrum-Radio--labelBelow .spectrum-Radio-label */ - margin: var(--spectrum-global-dimension-size-40) 0 0 0; + margin: var(--spectrum-radio-labelbelow-label-margin); } :host([checked]) #input + #button:before { /* .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected, - var(--spectrum-global-color-blue-500) - ); + border-color: var(--spectrum-global-color-gray-700); } #label { /* .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } #button:before { /* .spectrum-Radio-button:before */ - background-color: var( - --spectrum-radio-emphasized-circle-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-radio-emphasized-circle-border-color, - var(--spectrum-global-color-gray-600) - ); + background-color: var(--spectrum-global-color-gray-75); + border-color: var(--spectrum-global-color-gray-600); } :host(:hover) #button:before { /* .spectrum-Radio:hover .spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-hover, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); box-shadow: none; } :host(:hover[checked]) #input + #button:before { /* .spectrum-Radio:hover .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-gray-800); } :host(:hover) #label { /* .spectrum-Radio:hover .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-text-color-hover, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host(:active) #button:before { /* .spectrum-Radio:active .spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-down, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } :host(:active[checked]) #input + #button:before { /* .spectrum-Radio:active .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected-down, - var(--spectrum-global-color-blue-700) - ); + border-color: var(--spectrum-global-color-gray-900); } :host(:active) #label { /* .spectrum-Radio:active .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-text-color-down, - var(--spectrum-alias-text-color-down) + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) ); } :host([emphasized][checked]) #input + #button:before { /* .spectrum-Radio--emphasized .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected, - var(--spectrum-global-color-blue-500) - ); + border-color: var(--spectrum-global-color-blue-500); } :host([emphasized][checked]:hover) #input + #button:before { /* .spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-blue-600); } :host([emphasized][checked]:active) #input + #button:before { /* .spectrum-Radio--emphasized:active .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected-down, - var(--spectrum-global-color-blue-700) - ); + border-color: var(--spectrum-global-color-blue-700); } :host([emphasized][invalid]:hover) #input + #button:before, :host([invalid]:hover) #input + #button:before { /* .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-input+.spectrum-Radio-button:before, * .spectrum-Radio.is-invalid:hover .spectrum-Radio-input+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-error-hover, - var(--spectrum-global-color-red-600) - ); + border-color: var(--spectrum-global-color-red-600); } :host([emphasized][invalid]:hover) #label, :host([invalid]:hover) #label { /* .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-label, * .spectrum-Radio.is-invalid:hover .spectrum-Radio-label */ - color: var( - --spectrum-radio-emphasized-text-color-error-hover, - var(--spectrum-global-color-red-700) - ); + color: var(--spectrum-global-color-red-700); } :host([emphasized][invalid]:active) #input + #button:before, :host([invalid]:active) #input + #button:before { /* .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-input+.spectrum-Radio-button:before, * .spectrum-Radio.is-invalid:active .spectrum-Radio-input+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-error-down, - var(--spectrum-global-color-red-700) - ); + border-color: var(--spectrum-global-color-red-700); } :host([emphasized][invalid]:active) #label, :host([invalid]:active) #label { /* .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-label, * .spectrum-Radio.is-invalid:active .spectrum-Radio-label */ - color: var( - --spectrum-radio-emphasized-text-color-error-down, - var(--spectrum-global-color-red-700) - ); + color: var(--spectrum-global-color-red-700); } :host([emphasized][invalid]) #button:before, :host([emphasized][invalid][checked]) #input + #button:before, @@ -330,36 +282,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-input:checked+.spectrum-Radio-button:before, * .spectrum-Radio.is-invalid .spectrum-Radio-button:before, * .spectrum-Radio.is-invalid .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-error, - var(--spectrum-global-color-red-500) - ); + border-color: var(--spectrum-global-color-red-500); } :host([emphasized][invalid]) #label, :host([invalid]) #label { /* .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-label, * .spectrum-Radio.is-invalid .spectrum-Radio-label */ - color: var( - --spectrum-radio-emphasized-text-color-error, - var(--spectrum-global-color-red-600) - ); + color: var(--spectrum-global-color-red-600); } :host([checked][disabled]) #input + #button:before, :host([disabled]) #input + #button:before { /* .spectrum-Radio .spectrum-Radio-input:checked:disabled+.spectrum-Radio-button:before, * .spectrum-Radio .spectrum-Radio-input:disabled+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-global-color-gray-400); } :host([checked][disabled]) #input ~ #label, :host([disabled]) #input ~ #label { /* .spectrum-Radio .spectrum-Radio-input:checked:disabled~.spectrum-Radio-label, * .spectrum-Radio .spectrum-Radio-input:disabled~.spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([emphasized]) #input:focus-visible + #button:before, @@ -370,10 +313,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before, * .spectrum-Radio .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before, * .spectrum-Radio:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-circle-border-color-key-focus, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } :host([emphasized]) #input:focus-visible + #button:after, :host([emphasized]:hover) #input:focus-visible + #button:after, @@ -385,12 +325,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Radio:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after */ box-shadow: 0 0 0 var( - --spectrum-radio-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-radio-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + --spectrum-alias-focus-ring-color, + var(--spectrum-alias-focus-color) ); } :host([emphasized][checked]) #input:focus-visible + #button:before, @@ -401,8 +341,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before, * .spectrum-Radio .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before, * .spectrum-Radio:hover .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-blue-600); } diff --git a/packages/rule/src/spectrum-rule.css b/packages/rule/src/spectrum-rule.css index fd3060775d..a76d677617 100644 --- a/packages/rule/src/spectrum-rule.css +++ b/packages/rule/src/spectrum-rule.css @@ -10,96 +10,57 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Divider--sizeS { + /* .spectrum-Divider--sizeS */ + --spectrum-divider-height: var(--spectrum-global-dimension-size-10); + --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-10); +} +.spectrum-Divider--sizeM { + /* .spectrum-Divider--sizeM */ + --spectrum-divider-height: var(--spectrum-global-dimension-size-25); + --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-25); +} +.spectrum-Divider--sizeL { + /* .spectrum-Divider--sizeL */ + --spectrum-divider-height: var(--spectrum-global-dimension-size-50); + --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-50); +} :host { /* .spectrum-Divider */ + --spectrum-divider-vertical-height: 100%; width: 100%; + height: var(--spectrum-divider-height); overflow: visible; border: none; - border-width: var( - --spectrum-divider-medium-height, - var(--spectrum-global-dimension-static-size-25) - ); - border-radius: var( - --spectrum-divider-medium-height, - var(--spectrum-global-dimension-static-size-25) - ); -} -:host([size='large']) { - /* .spectrum-Divider--large */ - height: var( - --spectrum-divider-large-height, - var(--spectrum-global-dimension-static-size-50) - ); - border-radius: var( - --spectrum-divider-large-border-radius, - var(--spectrum-global-dimension-static-size-25) - ); -} -:host([size='medium']) { - /* .spectrum-Divider--medium */ - height: var( - --spectrum-divider-medium-height, - var(--spectrum-global-dimension-static-size-25) - ); - border-radius: var( - --spectrum-divider-medium-border-radius, - var(--spectrum-global-dimension-static-size-10) - ); -} -:host([size='small']) { - /* .spectrum-Divider--small */ - height: var( - --spectrum-divider-small-height, - var(--spectrum-global-dimension-static-size-10) - ); - border-radius: var( - --spectrum-divider-small-border-radius, - var(--spectrum-global-dimension-static-size-10) - ); + border-width: var(--spectrum-divider-height); + border-radius: var(--spectrum-divider-height); } :host([vertical]) { /* .spectrum-Divider--vertical */ - height: 100%; + height: var(--spectrum-divider-vertical-height); + width: var(--spectrum-divider-vertical-width); } -:host([vertical][size='large']) { - /* .spectrum-Divider--vertical.spectrum-Divider--large */ - width: var( - --spectrum-divider-large-vertical-width, - var(--spectrum-global-dimension-static-size-50) +:host { + /* .spectrum-Divider */ + --spectrum-divider-l-background-color: var( + --spectrum-global-color-gray-800 ); -} -:host([vertical][size='medium']) { - /* .spectrum-Divider--vertical.spectrum-Divider--medium */ - width: var( - --spectrum-divider-medium-vertical-width, - var(--spectrum-global-dimension-static-size-25) + --spectrum-divider-m-background-color: var( + --spectrum-global-color-gray-300 ); -} -:host([vertical][size='small']) { - /* .spectrum-Divider--vertical.spectrum-Divider--small */ - width: var( - --spectrum-divider-small-vertical-width, - var(--spectrum-global-dimension-static-size-10) + --spectrum-divider-s-background-color: var( + --spectrum-global-color-gray-300 ); } -:host([size='large']) { - /* .spectrum-Divider--large */ - background-color: var( - --spectrum-divider-large-background-color, - var(--spectrum-global-color-gray-800) - ); +.spectrum-Divider--sizeL { + /* .spectrum-Divider--sizeL */ + background-color: var(--spectrum-divider-l-background-color); } -:host([size='medium']) { - /* .spectrum-Divider--medium */ - background-color: var( - --spectrum-divider-medium-background-color, - var(--spectrum-global-color-gray-300) - ); +.spectrum-Divider--sizeM { + /* .spectrum-Divider--sizeM */ + background-color: var(--spectrum-divider-m-background-color); } -:host([size='small']) { - /* .spectrum-Divider--small */ - background-color: var( - --spectrum-divider-small-background-color, - var(--spectrum-global-color-gray-300) - ); +.spectrum-Divider--sizeS { + /* .spectrum-Divider--sizeS */ + background-color: var(--spectrum-divider-s-background-color); } diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index b04849c9f3..0d08389aec 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -44,7 +44,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transform: translateX( calc( var( - --spectrum-fieldbutton-min-width, + --spectrum-actionbutton-m-min-width, var(--spectrum-global-dimension-size-400) ) / 2 - var( @@ -57,35 +57,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .icon { /* .spectrum-Search-icon */ color: var( - --spectrum-textfield-icon-color, + --spectrum-textfield-m-icon-color, var(--spectrum-alias-icon-color) ); } #input:hover ~ .icon { /* .spectrum-Search-input:hover~.spectrum-Search-icon */ color: var( - --spectrum-search-icon-color-hover, + --spectrum-search-m-icon-color-hover, var(--spectrum-global-color-gray-900) ); } #input:active ~ .icon { /* .spectrum-Search-input:active~.spectrum-Search-icon */ color: var( - --spectrum-search-icon-color-down, + --spectrum-search-m-icon-color-down, var(--spectrum-alias-icon-color-down) ); } #input:focus-visible ~ .icon { /* .spectrum-Search-input.focus-ring~.spectrum-Search-icon */ color: var( - --spectrum-search-icon-color-key-focus, + --spectrum-search-m-icon-color-key-focus, var(--spectrum-global-color-gray-900) ); } #input:disabled ~ .icon { /* .spectrum-Search-input:disabled~.spectrum-Search-icon */ color: var( - --spectrum-textfield-text-color-disabled, + --spectrum-textfield-m-text-color-disabled, var(--spectrum-alias-text-color-disabled) ); } diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index d8b1a19eb7..ffd66e31da 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -94,12 +94,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ top: 0; bottom: 0; border-top: var( - --spectrum-tabs-focus-ring-size, + --spectrum-tabs-m-focus-ring-size, var(--spectrum-alias-border-size-thick) ) solid transparent; border-bottom: var( - --spectrum-tabs-focus-ring-size, + --spectrum-tabs-m-focus-ring-size, var(--spectrum-alias-border-size-thick) ) solid transparent; diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 9af05538f3..1b5bbdf705 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -12,38 +12,107 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Slider */ + --spectrum-slider-handle-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-slider-handle-border-size-down: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-slider-track-border-radius: var( + --spectrum-global-dimension-static-size-10, + 1px + ); + --spectrum-slider-track-height: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-slider-handle-gap: var( + --spectrum-alias-border-size-thicker, + var(--spectrum-global-dimension-static-size-50) + ); + --spectrum-slider-animation-duration: var( + --spectrum-global-animation-duration-100, + 130ms + ); + --spectrum-slider-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-slider-min-width: var(--spectrum-global-dimension-size-1250); + --spectrum-slider-handle-width: var( + --spectrum-alias-item-control-2-size-l, + var(--spectrum-global-dimension-size-200) + ); + --spectrum-slider-handle-height: var( + --spectrum-alias-item-control-2-size-l, + var(--spectrum-global-dimension-size-200) + ); + --spectrum-slider-handle-border-radius: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-slider-label-gap-x: var( + --spectrum-alias-item-control-gap-m, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-slider-tick-mark-width: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-slider-tick-mark-border-radius: var( + --spectrum-alias-border-radius-xsmall, + var(--spectrum-global-dimension-size-10) + ); + --spectrum-slider-tick-mark-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-slider-label-gap-y: var(--spectrum-global-dimension-size-85); + --spectrum-slider-controls-margin: calc( + var(--spectrum-slider-handle-width) / 2 + ); + --spectrum-slider-track-margin-offset: calc( + var(--spectrum-slider-controls-margin) * -1 + ); + --spectrum-slider-handle-margin-top: calc( + var(--spectrum-slider-handle-width) / -2 + ); + --spectrum-slider-handle-margin-left: calc( + var(--spectrum-slider-handle-width) / -2 + ); + --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --spectrum-slider-track-middle-handleoffset: calc( + var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width) / + 2 + ); + --spectrum-slider-input-top: calc( + var(--spectrum-slider-handle-margin-top) / 4 + ); + --spectrum-slider-input-left: calc( + var(--spectrum-slider-handle-margin-left) / 4 + ); + --spectrum-slider-ramp-margin-top: 0; + --spectrum-slider-range-track-reset: 0; + --spectrum-label-text-size: var(--spectrum-global-dimension-font-size-75); + --spectrum-label-text-line-height: var( + --spectrum-global-font-line-height-small, + 1.3 + ); position: relative; z-index: 1; display: block; - min-height: var( - --spectrum-slider-height, - var(--spectrum-alias-single-line-height) - ); - min-width: var( - --spectrum-slider-min-width, - var(--spectrum-global-dimension-size-1250) - ); + min-height: var(--spectrum-slider-height); + min-width: var(--spectrum-slider-min-width); -webkit-user-select: none; -moz-user-select: none; user-select: none; } :host([dir='ltr']) #controls { /* [dir=ltr] .spectrum-Slider-controls */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); + margin-left: var(--spectrum-slider-controls-margin); } :host([dir='rtl']) #controls { /* [dir=rtl] .spectrum-Slider-controls */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); + margin-right: var(--spectrum-slider-controls-margin); } #controls { /* .spectrum-Slider-controls */ @@ -51,17 +120,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-sizing: border-box; position: relative; z-index: auto; - width: calc( - 100% - - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * 2 - ); - min-height: var( - --spectrum-slider-height, - var(--spectrum-alias-single-line-height) - ); + width: calc(100% - var(--spectrum-slider-controls-margin) * 2); + min-height: var(--spectrum-slider-height); vertical-align: top; } :host([dir='ltr']) #fill, @@ -92,23 +152,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .track { /* .spectrum-Slider-fill, * .spectrum-Slider-track */ - height: var( - --spectrum-slider-track-height, - var(--spectrum-alias-border-size-thick) - ); + height: var(--spectrum-slider-track-height); box-sizing: border-box; position: absolute; z-index: 1; - top: calc( - var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / - 2 - ); - margin-top: calc( - var( - --spectrum-slider-fill-track-height, - var(--spectrum-alias-border-size-thick) - ) / -2 - ); + top: calc(var(--spectrum-slider-height) / 2); + margin-top: calc(var(--spectrum-slider-track-height) / -2); pointer-events: none; } :host([dir='ltr']) #fill, @@ -116,42 +165,26 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Slider-fill, * [dir=ltr] .spectrum-Slider-track */ padding-left: 0; - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-right: var(--spectrum-slider-track-handleoffset); } :host([dir='rtl']) #fill, :host([dir='rtl']) .track { /* [dir=rtl] .spectrum-Slider-fill, * [dir=rtl] .spectrum-Slider-track */ padding-right: 0; - padding-left: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-left: var(--spectrum-slider-track-handleoffset); } :host([dir='ltr']) #fill, :host([dir='ltr']) .track { /* [dir=ltr] .spectrum-Slider-fill, * [dir=ltr] .spectrum-Slider-track */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-left: var(--spectrum-slider-track-margin-offset); } :host([dir='rtl']) #fill, :host([dir='rtl']) .track { /* [dir=rtl] .spectrum-Slider-fill, * [dir=rtl] .spectrum-Slider-track */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-right: var(--spectrum-slider-track-margin-offset); } #fill, .track { @@ -167,10 +200,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ content: ''; display: block; height: 100%; - border-radius: var( - --spectrum-slider-track-border-radius, - var(--spectrum-global-dimension-static-size-10) - ); + border-radius: var(--spectrum-slider-track-border-radius); } :host([dir='ltr']) #fill { /* [dir=ltr] .spectrum-Slider-fill */ @@ -183,28 +213,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) #fill { /* [dir=ltr] .spectrum-Slider-fill */ padding-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 + - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + var(--spectrum-slider-controls-margin) + + var(--spectrum-slider-track-handleoffset) ); padding-right: 0; } :host([dir='rtl']) #fill { /* [dir=rtl] .spectrum-Slider-fill */ padding-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 + - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + var(--spectrum-slider-controls-margin) + + var(--spectrum-slider-track-handleoffset) ); padding-left: 0; } @@ -217,28 +235,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Slider-fill--right */ padding-left: 0; padding-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 + - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + var(--spectrum-slider-controls-margin) + + var(--spectrum-slider-track-handleoffset) ); } :host([dir='rtl']) .spectrum-Slider-fill--right { /* [dir=rtl] .spectrum-Slider-fill--right */ padding-right: 0; padding-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 + - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + var(--spectrum-slider-controls-margin) + + var(--spectrum-slider-track-handleoffset) ); } .spectrum-Slider-fill--right { @@ -256,53 +262,37 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .track ~ .track { /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - right: 0; + right: var(--spectrum-slider-range-track-reset); } :host([dir='rtl']) .track ~ .track { /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - left: 0; + left: var(--spectrum-slider-range-track-reset); } :host([dir='ltr']) .track ~ .track { /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - padding-left: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-left: var(--spectrum-slider-track-handleoffset); padding-right: 0; } :host([dir='rtl']) .track ~ .track { /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-right: var(--spectrum-slider-track-handleoffset); padding-left: 0; } :host([dir='ltr']) .track ~ .track { /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-left: 0; + margin-left: var(--spectrum-slider-range-track-reset); } :host([dir='rtl']) .track ~ .track { /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-right: 0; + margin-right: var(--spectrum-slider-range-track-reset); } :host([dir='ltr']) .track ~ .track { /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-right: var(--spectrum-slider-track-margin-offset); } :host([dir='rtl']) .track ~ .track { /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-left: var(--spectrum-slider-track-margin-offset); } .track ~ .track { /* .spectrum-Slider-track~.spectrum-Slider-track */ @@ -318,26 +308,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][variant='range']) .track:first-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ padding-left: 0; - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-right: var(--spectrum-slider-track-handleoffset); } :host([dir='rtl'][variant='range']) .track:first-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ padding-right: 0; - padding-left: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-left: var(--spectrum-slider-track-handleoffset); } :host([dir='ltr'][variant='range']) .track:first-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - left: 0; + left: var(--spectrum-slider-range-track-reset); } :host([dir='rtl'][variant='range']) .track:first-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - right: 0; + right: var(--spectrum-slider-range-track-reset); } :host([dir='ltr'][variant='range']) .track:first-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ @@ -349,21 +333,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][variant='range']) .track:first-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-left: var(--spectrum-slider-track-margin-offset); } :host([dir='rtl'][variant='range']) .track:first-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-right: var(--spectrum-slider-track-margin-offset); } :host([variant='range']) .track:first-of-type { /* .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ @@ -398,42 +372,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track */ padding-top: 0; padding-bottom: 0; - padding-left: calc( - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); - padding-right: calc( - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) + - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); - margin: 0; + padding-left: var(--spectrum-slider-track-middle-handleoffset); + padding-right: var(--spectrum-slider-track-middle-handleoffset); + margin: var(--spectrum-slider-range-track-reset); } :host([dir='ltr'][variant='range']) .track:last-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - padding-left: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-left: var(--spectrum-slider-track-handleoffset); padding-right: 0; } :host([dir='rtl'][variant='range']) .track:last-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); + padding-right: var(--spectrum-slider-track-handleoffset); padding-left: 0; } :host([dir='ltr'][variant='range']) .track:last-of-type { @@ -446,29 +396,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][variant='range']) .track:last-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - right: 0; + right: var(--spectrum-slider-range-track-reset); } :host([dir='rtl'][variant='range']) .track:last-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - left: 0; + left: var(--spectrum-slider-range-track-reset); } :host([dir='ltr'][variant='range']) .track:last-of-type { /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-right: var(--spectrum-slider-track-margin-offset); } :host([dir='rtl'][variant='range']) .track:last-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin-left: var(--spectrum-slider-track-margin-offset); } :host([variant='range']) .track:last-of-type { /* .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ @@ -477,47 +417,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #ramp { /* [dir=ltr] .spectrum-Slider-ramp */ - left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + left: var(--spectrum-slider-track-margin-offset); } :host([dir='ltr']) #ramp, :host([dir='rtl']) #ramp { /* [dir=ltr] .spectrum-Slider-ramp, * [dir=rtl] .spectrum-Slider-ramp */ - right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + right: var(--spectrum-slider-track-margin-offset); } :host([dir='rtl']) #ramp { /* [dir=rtl] .spectrum-Slider-ramp */ - left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + left: var(--spectrum-slider-track-margin-offset); } #ramp { /* .spectrum-Slider-ramp */ - margin-top: 0; - height: var( - --spectrum-slider-ramp-track-height, - var(--spectrum-global-dimension-static-size-200) - ); + margin-top: var(--spectrum-slider-ramp-margin-top); + height: var(--spectrum-global-dimension-static-size-200, 16px); position: absolute; - top: calc( - var( - --spectrum-slider-ramp-track-height, - var(--spectrum-global-dimension-static-size-200) - ) / 2 - ); + top: calc(var(--spectrum-global-dimension-static-size-200, 16px) / 2); } :host([dir='rtl']) #ramp svg { /* [dir=rtl] .spectrum-Slider-ramp svg */ @@ -538,63 +455,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #handle { /* [dir=ltr] .spectrum-Slider-handle */ - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 - ); + margin-left: calc(var(--spectrum-slider-handle-width) / -2); margin-right: 0; } :host([dir='rtl']) #handle { /* [dir=rtl] .spectrum-Slider-handle */ - margin-right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 - ); + margin-right: calc(var(--spectrum-slider-handle-width) / -2); margin-left: 0; } #handle { /* .spectrum-Slider-handle */ position: absolute; - top: calc( - var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / - 2 - ); + top: calc(var(--spectrum-slider-height) / 2); z-index: 2; display: inline-block; box-sizing: border-box; - width: var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-slider-handle-height, - var(--spectrum-global-dimension-size-200) - ); - margin-top: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 - ); + width: var(--spectrum-slider-handle-width); + height: var(--spectrum-slider-handle-height); + margin-top: var(--spectrum-slider-handle-margin-top); margin-bottom: 0; - border-width: var( - --spectrum-slider-handle-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-width: var(--spectrum-slider-handle-border-size); border-style: solid; - border-radius: var( - --spectrum-slider-handle-border-radius, - var(--spectrum-alias-border-radius-medium) - ); - transition: border-width - var( - --spectrum-slider-animation-duration, - var(--spectrum-global-animation-duration-100) - ) + border-radius: var(--spectrum-slider-handle-border-radius); + transition: border-width var(--spectrum-slider-animation-duration) ease-in-out; outline: none; } @@ -604,10 +487,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Slider-handle.is-dragged, * .spectrum-Slider-handle.is-focused, * .spectrum-Slider-handle:active */ - border-width: var( - --spectrum-slider-handle-border-size-down, - var(--spectrum-global-dimension-size-75) - ); + border-width: var(--spectrum-slider-handle-border-size-down); } :host([dragging]) #handle, :host([handle-highlight]) #handle, @@ -630,34 +510,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ease-out, width var(--spectrum-global-animation-duration-100, 0.13s) ease-out, height var(--spectrum-global-animation-duration-100, 0.13s) ease-out; - width: var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-slider-handle-height, - var(--spectrum-global-dimension-size-200) - ); + width: var(--spectrum-slider-handle-width); + height: var(--spectrum-slider-handle-height); transform: translate(-50%, -50%); border-radius: 100%; } :host([handle-highlight]) #handle:before { /* .spectrum-Slider-handle.is-focused:before */ width: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) + + var(--spectrum-slider-handle-width) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * 2 ); height: calc( - var( - --spectrum-slider-handle-height, - var(--spectrum-global-dimension-size-200) - ) + + var(--spectrum-slider-handle-height) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) @@ -666,41 +534,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #input { /* [dir=ltr] .spectrum-Slider-input */ - left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 / 4 - ); + left: var(--spectrum-slider-input-left); } :host([dir='rtl']) #input { /* [dir=rtl] .spectrum-Slider-input */ - right: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 / 4 - ); + right: var(--spectrum-slider-input-left); } #input { /* .spectrum-Slider-input */ margin: 0; - width: var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-slider-handle-height, - var(--spectrum-global-dimension-size-200) - ); + width: var(--spectrum-slider-handle-width); + height: var(--spectrum-slider-handle-height); padding: 0; position: absolute; - top: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 / 4 - ); + top: var(--spectrum-slider-input-top); overflow: hidden; opacity: 0.000001; cursor: default; @@ -718,11 +565,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: relative; width: auto; padding-top: var( - --spectrum-fieldlabel-padding-top, + --spectrum-fieldlabel-m-padding-top, var(--spectrum-global-dimension-size-50) ); - font-size: var(--spectrum-global-dimension-font-size-75); - line-height: var(--spectrum-global-font-line-height-small, 1.3); + font-size: var(--spectrum-label-text-size); + line-height: var(--spectrum-label-text-line-height); } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Slider-label */ @@ -760,65 +607,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #value { /* [dir=ltr] .spectrum-Slider-value */ - margin-left: var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) - ); + margin-left: var(--spectrum-slider-label-gap-x); } :host([dir='rtl']) #value { /* [dir=rtl] .spectrum-Slider-value */ - margin-right: var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) - ); + margin-right: var(--spectrum-slider-label-gap-x); } .ticks { /* .spectrum-Slider-ticks */ display: flex; justify-content: space-between; z-index: 0; - margin: 0 - calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); + margin: 0 var(--spectrum-slider-track-margin-offset); margin-top: calc( - var(--spectrum-slider-tick-mark-height, 10px) + - var( - --spectrum-slider-track-height, - var(--spectrum-alias-border-size-thick) - ) / 2 + var(--spectrum-slider-tick-mark-height) + + var(--spectrum-slider-track-height) / 2 ); } .tick { /* .spectrum-Slider-tick */ position: relative; - width: var( - --spectrum-slider-tick-mark-width, - var(--spectrum-alias-border-size-thick) - ); + width: var(--spectrum-slider-tick-mark-width); } :host([dir='ltr']) .tick:after { /* [dir=ltr] .spectrum-Slider-tick:after */ - left: calc( - 50% - - var( - --spectrum-slider-tick-mark-width, - var(--spectrum-alias-border-size-thick) - ) / 2 - ); + left: calc(50% - var(--spectrum-slider-tick-mark-width) / 2); } :host([dir='rtl']) .tick:after { /* [dir=rtl] .spectrum-Slider-tick:after */ - right: calc( - 50% - - var( - --spectrum-slider-tick-mark-width, - var(--spectrum-alias-border-size-thick) - ) / 2 - ); + right: calc(50% - var(--spectrum-slider-tick-mark-width) / 2); } .tick:after { /* .spectrum-Slider-tick:after */ @@ -826,40 +643,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: absolute; top: 0; content: ''; - width: var( - --spectrum-slider-tick-mark-width, - var(--spectrum-alias-border-size-thick) - ); - height: var(--spectrum-slider-tick-mark-height, 10px); - border-radius: var( - --spectrum-slider-tick-mark-border-radius, - var(--spectrum-alias-border-radius-xsmall) - ); + width: var(--spectrum-slider-tick-mark-width); + height: var(--spectrum-slider-tick-mark-height); + border-radius: var(--spectrum-slider-tick-mark-border-radius); } .tick .tickLabel { /* .spectrum-Slider-tick .spectrum-Slider-tickLabel */ display: flex; align-items: center; justify-content: center; - margin-top: var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) + margin-top: calc( + var(--spectrum-slider-label-gap-y) + + var(--spectrum-slider-tick-mark-height) ); margin-bottom: 0; - margin-left: calc( - var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) - ) * -1 - ); - margin-right: calc( - var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) - ) * -1 - ); - font-size: var(--spectrum-global-dimension-font-size-75); - line-height: var(--spectrum-global-font-line-height-small, 1.3); + margin-left: calc(var(--spectrum-slider-label-gap-x) * -1); + margin-right: calc(var(--spectrum-slider-label-gap-x) * -1); + font-size: var(--spectrum-label-text-size); + line-height: var(--spectrum-label-text-line-height); } .tick:first-of-type .tickLabel, .tick:last-of-type .tickLabel { @@ -867,11 +668,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel */ display: block; position: absolute; - margin-top: var( - --spectrum-slider-label-gap-x, - var(--spectrum-global-dimension-size-200) - ); - margin-bottom: 0; margin-left: 0; margin-right: 0; } @@ -900,10 +696,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } .track:before { /* .spectrum-Slider-track:before */ - background: var( - --spectrum-slider-track-color, - var(--spectrum-global-color-gray-300) - ); + background: var(--spectrum-global-color-gray-400); } #labelContainer { /* .spectrum-Slider-labelContainer */ @@ -916,38 +709,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #fill:before { /* .spectrum-Slider--filled .spectrum-Slider-track:first-child:before, * .spectrum-Slider-fill:before */ - background: var( - --spectrum-slider-fill-track-color, - var(--spectrum-global-color-gray-700) - ); + background: var(--spectrum-global-color-gray-700); } #ramp path { /* .spectrum-Slider-ramp path */ - fill: var( - --spectrum-slider-track-color, - var(--spectrum-global-color-gray-300) - ); + fill: var(--spectrum-global-color-gray-400); } #handle { /* .spectrum-Slider-handle */ - border-color: var( - --spectrum-slider-handle-border-color, - var(--spectrum-global-color-gray-700) - ); - background: var( - --spectrum-slider-handle-background-color, - var(--spectrum-alias-background-color-transparent) - ); + border-color: var(--spectrum-global-color-gray-700); + background: var(--spectrum-alias-background-color-transparent, transparent); } +:host([handle-highlight]) #handle, #handle:hover { - /* .spectrum-Slider-handle:hover */ - border-color: var( - --spectrum-slider-handle-border-color-hover, - var(--spectrum-global-color-gray-800) - ); -} -:host([handle-highlight]) #handle { - /* .spectrum-Slider-handle.is-focused */ + /* .spectrum-Slider-handle.is-focused, + * .spectrum-Slider-handle:hover */ border-color: var(--spectrum-global-color-gray-800); } :host([handle-highlight]) #handle:before { @@ -963,10 +739,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #handle:active { /* .spectrum-Slider-handle.is-dragged, * .spectrum-Slider-handle:active */ - border-color: var( - --spectrum-slider-handle-border-color-down, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } :host([variant='ramp']) #handle { /* .spectrum-Slider--ramp .spectrum-Slider-handle */ @@ -983,27 +756,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .tick:after { /* .spectrum-Slider-tick:after */ background-color: var( - --spectrum-slider-tick-mark-color, - var(--spectrum-alias-track-color-default) + --spectrum-alias-track-color-default, + var(--spectrum-global-color-gray-300) ); } :host([dragging]) #handle { /* .spectrum-Slider-handle.is-dragged */ - border-color: var( - --spectrum-slider-handle-border-color-down, - var(--spectrum-global-color-gray-800) - ); - background: var( - --spectrum-slider-handle-background-color-down, - var(--spectrum-alias-background-color-transparent) - ); + border-color: var(--spectrum-global-color-gray-800); + background: var(--spectrum-alias-background-color-transparent, transparent); } :host([variant='range']) .track:not(:first-of-type):not(:last-of-type):before { /* .spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before */ - background: var( - --spectrum-slider-fill-track-color, - var(--spectrum-global-color-gray-700) - ); + background: var(--spectrum-global-color-gray-700); } :host([disabled]) #labelContainer { /* .spectrum-Slider.is-disabled .spectrum-Slider-labelContainer */ @@ -1014,10 +778,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([disabled]) #handle { /* .spectrum-Slider.is-disabled .spectrum-Slider-handle */ - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-global-color-gray-400); background: var( --spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100) @@ -1027,43 +788,23 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([disabled]) #handle:hover { /* .spectrum-Slider.is-disabled .spectrum-Slider-handle:active, * .spectrum-Slider.is-disabled .spectrum-Slider-handle:hover */ - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); - background: var( - --spectrum-slider-handle-background-color, - var(--spectrum-alias-background-color-transparent) - ); -} -:host([disabled]) .track:before { - /* .spectrum-Slider.is-disabled .spectrum-Slider-track:before */ - background: var( - --spectrum-slider-track-color-disabled, - var(--spectrum-global-color-gray-300) - ); + border-color: var(--spectrum-global-color-gray-400); + background: var(--spectrum-alias-background-color-transparent, transparent); } :host([disabled][variant='filled']) .track:first-child:before, -:host([disabled]) #fill:before { +:host([disabled]) #fill:before, +:host([disabled]) .track:before { /* .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, - * .spectrum-Slider.is-disabled .spectrum-Slider-fill:before */ - background: var( - --spectrum-slider-fill-track-color-disabled, - var(--spectrum-global-color-gray-300) - ); + * .spectrum-Slider.is-disabled .spectrum-Slider-fill:before, + * .spectrum-Slider.is-disabled .spectrum-Slider-track:before */ + background: var(--spectrum-global-color-gray-300); } :host([disabled]) #ramp path { /* .spectrum-Slider.is-disabled .spectrum-Slider-ramp path */ - fill: var( - --spectrum-slider-ramp-track-color-disabled, - var(--spectrum-global-color-gray-200) - ); + fill: var(--spectrum-global-color-gray-200); } :host([disabled][variant='range']) .track:not(:first-of-type):not(:last-of-type):before { /* .spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before */ - background: var( - --spectrum-slider-fill-track-color-disabled, - var(--spectrum-global-color-gray-300) - ); + background: var(--spectrum-global-color-gray-300); } diff --git a/packages/split-button/src/spectrum-split-button.css b/packages/split-button/src/spectrum-split-button.css index 125ad5bd09..41b47e15b9 100644 --- a/packages/split-button/src/spectrum-split-button.css +++ b/packages/split-button/src/spectrum-split-button.css @@ -10,6 +10,44 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-SplitButton */ + --spectrum-splitbutton-trigger-border-left: 0; + --spectrum-splitbutton-trigger-min-width: 0; + --spectrum-spltibutton-margin-left: 0; + --spectrum-splitbutton-icon-gap: var(--spectrum-global-dimension-size-150); + --spectrum-splitbutton-border-radius-edge: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +.trigger { + /* .spectrum-SplitButton-trigger */ + --spectrum-splitbutton-trigger-round-edge-padding: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-splitbutton-trigger-flat-edge-padding: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc( + var(--spectrum-splitbutton-trigger-flat-edge-padding) - + var(--spectrum-button-primary-border-size) + ); +} +#button { + /* .spectrum-SplitButton-action */ + --spectrum-splitbutton-flat-edge-padding: calc( + var(--spectrum-button-primary-padding-left) - + var(--spectrum-button-primary-border-size) * 2 + ); + --spectrum-splitbutton-round-edge-padding: var( + --spectrum-button-primary-padding-right + ); + --spectrum-splitbutton-cta-flat-edge-padding: calc( + var(--spectrum-button-primary-padding-left) - + var(--spectrum-button-primary-border-size) * 3 + ); +} :host { /* .spectrum-SplitButton */ position: relative; @@ -35,17 +73,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-SplitButton-action */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl']) #button { /* [dir=rtl] .spectrum-SplitButton-action */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-SplitButton-action */ @@ -65,59 +97,59 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-SplitButton-action */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl']) #button { /* [dir=rtl] .spectrum-SplitButton-action */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); +} +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ + padding-right: var(--spectrum-splitbutton-flat-edge-padding); +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ + padding-left: var(--spectrum-splitbutton-flat-edge-padding); +} +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ + padding-left: var(--spectrum-splitbutton-round-edge-padding); +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ + padding-right: var(--spectrum-splitbutton-round-edge-padding); } :host([dir='ltr'][variant='cta']) #button { /* [dir=ltr] .spectrum-SplitButton-action.spectrum-Button--cta */ - margin-right: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-right: var(--spectrum-splitbutton-cta-flat-edge-padding); } :host([dir='rtl'][variant='cta']) #button { /* [dir=rtl] .spectrum-SplitButton-action.spectrum-Button--cta */ - margin-left: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-left: var(--spectrum-splitbutton-cta-flat-edge-padding); +} +:host([dir='ltr'][variant='cta']) #button { + /* [dir=ltr] .spectrum-SplitButton-action.spectrum-Button--cta */ + margin-right: var(--spectrum-button-primary-border-size); +} +:host([dir='rtl'][variant='cta']) #button { + /* [dir=rtl] .spectrum-SplitButton-action.spectrum-Button--cta */ + margin-left: var(--spectrum-button-primary-border-size); } :host([dir='ltr']) #button:after { /* [dir=ltr] .spectrum-SplitButton-action:after */ - border-top-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl']) #button:after { /* [dir=rtl] .spectrum-SplitButton-action:after */ - border-top-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr']) #button:after { /* [dir=ltr] .spectrum-SplitButton-action:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl']) #button:after { /* [dir=rtl] .spectrum-SplitButton-action:after */ - border-bottom-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ @@ -137,31 +169,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ @@ -173,75 +193,47 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-left-width: 0; + border-left-width: var(--spectrum-splitbutton-trigger-border-left); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-right-width: 0; + border-right-width: var(--spectrum-splitbutton-trigger-border-left); } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - padding-left: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) * 4 - ); + padding-left: var(--spectrum-splitbutton-trigger-flat-edge-padding); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - padding-right: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) * 4 - ); + padding-right: var(--spectrum-splitbutton-trigger-flat-edge-padding); } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - padding-right: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-right: var(--spectrum-splitbutton-trigger-round-edge-padding); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - padding-left: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-left: var(--spectrum-splitbutton-trigger-round-edge-padding); } .trigger { /* .spectrum-SplitButton-trigger */ - min-width: 0; + min-width: var(--spectrum-splitbutton-trigger-min-width); } :host([dir='ltr'][variant='cta']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger.spectrum-Button--cta */ - border-left-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-left: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); } :host([dir='rtl'][variant='cta']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger.spectrum-Button--cta */ - border-right-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-right: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); +} +:host([dir='ltr'][variant='cta']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger.spectrum-Button--cta */ + border-left-width: var(--spectrum-button-primary-border-size); +} +:host([dir='rtl'][variant='cta']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger.spectrum-Button--cta */ + border-right-width: var(--spectrum-button-primary-border-size); } .trigger:focus-visible { /* .spectrum-SplitButton-trigger.focus-ring */ @@ -249,31 +241,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .trigger:after { /* [dir=ltr] .spectrum-SplitButton-trigger:after */ - border-top-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl']) .trigger:after { /* [dir=rtl] .spectrum-SplitButton-trigger:after */ - border-top-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr']) .trigger:after { /* [dir=ltr] .spectrum-SplitButton-trigger:after */ - border-bottom-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl']) .trigger:after { /* [dir=rtl] .spectrum-SplitButton-trigger:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge); } .icon { /* .spectrum-SplitButton-icon */ @@ -294,11 +274,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #button .label + .spectrum-Icon { /* [dir=ltr] .spectrum-SplitButton-action .spectrum-Button-label+.spectrum-Icon */ - margin-left: var(--spectrum-global-dimension-size-150); + margin-left: var(--spectrum-splitbutton-icon-gap); } :host([dir='rtl']) #button .label + .spectrum-Icon { /* [dir=rtl] .spectrum-SplitButton-action .spectrum-Button-label+.spectrum-Icon */ - margin-right: var(--spectrum-global-dimension-size-150); + margin-right: var(--spectrum-splitbutton-icon-gap); } :host([dir='ltr'][left]) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ @@ -310,31 +290,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][left]) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ @@ -348,119 +316,81 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ margin-right: 0; } -:host([dir='ltr'][left]) #button, :host([dir='rtl'][left]) #button { - /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action, - * [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ margin-left: 0; } +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + margin-left: var(--spectrum-spltibutton-margin-left); +} :host([dir='rtl'][left]) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - margin-right: 0; + margin-right: var(--spectrum-spltibutton-margin-left); +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + padding-left: var(--spectrum-splitbutton-flat-edge-padding); +} +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + padding-right: var(--spectrum-splitbutton-flat-edge-padding); +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + padding-right: var(--spectrum-splitbutton-round-edge-padding); +} +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + padding-left: var(--spectrum-splitbutton-round-edge-padding); } :host([dir='ltr'][left][variant='cta']) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ - padding-left: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-left: var(--spectrum-splitbutton-cta-flat-edge-padding); } :host([dir='rtl'][left][variant='cta']) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ - padding-right: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-right: var(--spectrum-splitbutton-cta-flat-edge-padding); } :host([dir='ltr'][left][variant='cta']) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ - margin-left: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + margin-left: var(--spectrum-button-primary-border-size); } :host([dir='rtl'][left][variant='cta']) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ - margin-right: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + margin-right: var(--spectrum-button-primary-border-size); } :host([dir='ltr'][left]) #button:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-top-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl'][left]) #button:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-top-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr'][left]) #button:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) #button:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) #button:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) #button:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) #button:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl'][left]) #button:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ @@ -472,17 +402,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ @@ -502,153 +426,89 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-left-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-left-width: var(--spectrum-button-primary-border-size); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-right-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-right-width: var(--spectrum-button-primary-border-size); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-right-width: 0; + border-right-width: var(--spectrum-splitbutton-trigger-border-left); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-left-width: 0; + border-left-width: var(--spectrum-splitbutton-trigger-border-left); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - padding-right: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) * 4 - ); + padding-right: var(--spectrum-splitbutton-trigger-flat-edge-padding); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - padding-left: calc( - var( - --spectrum-button-primary-text-padding-x, - var(--spectrum-global-dimension-size-200) - ) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) * 4 - ); + padding-left: var(--spectrum-splitbutton-trigger-flat-edge-padding); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - padding-left: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-left: var(--spectrum-splitbutton-trigger-round-edge-padding); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - padding-right: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) - ); + padding-right: var(--spectrum-splitbutton-trigger-round-edge-padding); } :host([dir='ltr'][left][variant='cta']) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta */ - border-right-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-right: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); } :host([dir='rtl'][left][variant='cta']) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta */ - border-left-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); + padding-left: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); +} +:host([dir='ltr'][left][variant='cta']) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta */ + border-right-width: var(--spectrum-button-primary-border-size); +} +:host([dir='rtl'][left][variant='cta']) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta */ + border-left-width: var(--spectrum-button-primary-border-size); } :host([dir='ltr'][left]) .trigger:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) .trigger:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-top-right-radius: var(--spectrum-button-primary-border-radius); } :host([dir='ltr'][left]) .trigger:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-top-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl'][left]) .trigger:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-top-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr'][left]) .trigger:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='rtl'][left]) .trigger:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); + border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge); } :host([dir='ltr'][left]) .trigger:after { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-left-radius: var(--spectrum-button-primary-border-radius); } :host([dir='rtl'][left]) .trigger:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); + border-bottom-right-radius: var(--spectrum-button-primary-border-radius); } diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 3123edb68a..333d922163 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -10,29 +10,137 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-StatusLight--sizeS { + /* .spectrum-StatusLight--sizeS */ + --spectrum-statuslight-info-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-statuslight-info-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-statuslight-info-text-size: var( + --spectrum-alias-item-text-size-s, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-statuslight-info-dot-size: var( + --spectrum-alias-item-control-1-size-s, + var(--spectrum-global-dimension-static-size-100) + ); + --spectrum-statuslight-info-text-gap: var( + --spectrum-alias-item-control-gap-s, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-statuslight-info-height: var( + --spectrum-alias-item-height-s, + var(--spectrum-global-dimension-size-300) + ); +} +.spectrum-StatusLight--sizeM { + /* .spectrum-StatusLight--sizeM */ + --spectrum-statuslight-info-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-statuslight-info-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-statuslight-info-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-statuslight-info-dot-size: var( + --spectrum-alias-item-control-1-size-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-statuslight-info-text-gap: var( + --spectrum-alias-item-control-gap-m, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-statuslight-info-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); +} +.spectrum-StatusLight--sizeL { + /* .spectrum-StatusLight--sizeL */ + --spectrum-statuslight-info-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-statuslight-info-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-statuslight-info-text-size: var( + --spectrum-alias-item-text-size-l, + var(--spectrum-global-dimension-font-size-200) + ); + --spectrum-statuslight-info-dot-size: var( + --spectrum-alias-item-control-1-size-l + ); + --spectrum-statuslight-info-text-gap: var( + --spectrum-alias-item-control-gap-l, + var(--spectrum-global-dimension-size-130) + ); + --spectrum-statuslight-info-height: var( + --spectrum-alias-item-height-l, + var(--spectrum-global-dimension-size-500) + ); +} +.spectrum-StatusLight--sizeXL { + /* .spectrum-StatusLight--sizeXL */ + --spectrum-statuslight-info-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-statuslight-info-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-statuslight-info-text-size: var( + --spectrum-alias-item-text-size-xl, + var(--spectrum-global-dimension-font-size-300) + ); + --spectrum-statuslight-info-dot-size: var( + --spectrum-alias-item-control-1-size-xl + ); + --spectrum-statuslight-info-text-gap: var( + --spectrum-alias-item-control-gap-xl, + var(--spectrum-global-dimension-size-160) + ); + --spectrum-statuslight-info-height: var( + --spectrum-alias-item-height-xl, + var(--spectrum-global-dimension-size-600) + ); + cxow: 1; +} #root { /* .spectrum-StatusLight */ - min-height: var( - --spectrum-statuslight-info-height, - var(--spectrum-alias-single-line-height) + --spectrum-statuslight-info-padding-y: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-statuslight-info-text-line-height: 1.44; + --spectrum-statuslight-info-padding-top: calc( + var(--spectrum-statuslight-info-padding-y) - 1px ); + --spectrum-statuslight-info-padding-bottom: calc( + var(--spectrum-statuslight-info-padding-y) + 1px + ); + min-height: var(--spectrum-statuslight-info-height); display: flex; flex-direction: row; align-items: flex-start; - padding-top: calc(var(--spectrum-global-dimension-size-65) - 1px); - padding-bottom: calc(var(--spectrum-global-dimension-size-65) + 1px); + padding-top: var(--spectrum-statuslight-info-padding-top); + padding-bottom: var(--spectrum-statuslight-info-padding-bottom); padding-left: 0; padding-right: 0; box-sizing: border-box; - font-size: var( - --spectrum-statuslight-info-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-statuslight-info-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: 1.44; + font-size: var(--spectrum-statuslight-info-text-size); + font-weight: var(--spectrum-statuslight-info-text-font-weight); + line-height: var(--spectrum-statuslight-info-text-line-height); } #root:before { /* .spectrum-StatusLight:before */ @@ -40,21 +148,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-grow: 0; flex-shrink: 0; display: inline-block; - width: var( - --spectrum-statuslight-info-dot-size, - var(--spectrum-global-dimension-size-100) - ); - height: var( - --spectrum-statuslight-info-dot-size, - var(--spectrum-global-dimension-size-100) - ); + width: var(--spectrum-statuslight-info-dot-size); + height: var(--spectrum-statuslight-info-dot-size); border-radius: 50%; - margin: calc(var(--spectrum-global-dimension-size-65) + 1px) - var( - --spectrum-statuslight-info-text-gap, - var(--spectrum-global-dimension-size-150) - ) - calc(var(--spectrum-global-dimension-size-65) - 1px); + margin: var(--spectrum-statuslight-info-padding-bottom) + var(--spectrum-statuslight-info-text-gap) + var(--spectrum-statuslight-info-padding-top); -ms-high-contrast-adjust: none; forced-color-adjust: none; } @@ -65,8 +164,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #root { /* .spectrum-StatusLight */ color: var( - --spectrum-statuslight-info-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } :host([disabled]) #root, @@ -74,38 +173,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-StatusLight.is-disabled, * .spectrum-StatusLight[disabled] */ color: var( - --spectrum-statuslight-info-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([disabled]) #root:before, #root[disabled]:before { /* .spectrum-StatusLight.is-disabled:before, * .spectrum-StatusLight[disabled]:before */ - background-color: var( - --spectrum-statuslight-info-dot-color-disabled, - var(--spectrum-global-color-gray-400) - ); + background-color: var(--spectrum-global-color-gray-400); } :host([variant='negative']) #root:before { /* .spectrum-StatusLight--negative:before */ background-color: var( - --spectrum-statuslight-negative-dot-color, - var(--spectrum-semantic-negative-color-status) + --spectrum-semantic-negative-color-status, + var(--spectrum-global-color-red-400) ); } :host([variant='notice']) #root:before { /* .spectrum-StatusLight--notice:before */ background-color: var( - --spectrum-statuslight-notice-dot-color, - var(--spectrum-semantic-notice-color-status) + --spectrum-semantic-notice-color-status, + var(--spectrum-global-color-orange-400) ); } :host([variant='positive']) #root:before { /* .spectrum-StatusLight--positive:before */ background-color: var( - --spectrum-statuslight-positive-dot-color, - var(--spectrum-semantic-positive-color-status) + --spectrum-semantic-positive-color-status, + var(--spectrum-global-color-green-400) ); } .spectrum-StatusLight--active:before, @@ -113,77 +209,50 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-StatusLight--active:before, * .spectrum-StatusLight--info:before */ background-color: var( - --spectrum-statuslight-info-dot-color, - var(--spectrum-semantic-informative-color-status) + --spectrum-semantic-informative-color-status, + var(--spectrum-global-color-blue-400) ); } :host([variant='neutral']) #root { /* .spectrum-StatusLight--neutral */ color: var( - --spectrum-statuslight-neutral-text-color, + --spectrum-alias-label-text-color, var(--spectrum-global-color-gray-700) ); } :host([variant='neutral']) #root:before { /* .spectrum-StatusLight--neutral:before */ - background-color: var( - --spectrum-statuslight-neutral-dot-color, - var(--spectrum-global-color-gray-500) - ); + background-color: var(--spectrum-global-color-gray-500); } :host([variant='celery']) #root:before { /* .spectrum-StatusLight--celery:before */ - background-color: var( - --spectrum-statuslight-celery-dot-color, - var(--spectrum-global-color-celery-400) - ); + background-color: var(--spectrum-global-color-celery-400); } :host([variant='yellow']) #root:before { /* .spectrum-StatusLight--yellow:before */ - background-color: var( - --spectrum-statuslight-yellow-dot-color, - var(--spectrum-global-color-yellow-400) - ); + background-color: var(--spectrum-global-color-yellow-400); } :host([variant='fuchsia']) #root:before { /* .spectrum-StatusLight--fuchsia:before */ - background-color: var( - --spectrum-statuslight-fuchsia-dot-color, - var(--spectrum-global-color-fuchsia-400) - ); + background-color: var(--spectrum-global-color-fuchsia-400); } :host([variant='indigo']) #root:before { /* .spectrum-StatusLight--indigo:before */ - background-color: var( - --spectrum-statuslight-indigo-dot-color, - var(--spectrum-global-color-indigo-400) - ); + background-color: var(--spectrum-global-color-indigo-400); } :host([variant='seafoam']) #root:before { /* .spectrum-StatusLight--seafoam:before */ - background-color: var( - --spectrum-statuslight-seafoam-dot-color, - var(--spectrum-global-color-seafoam-400) - ); + background-color: var(--spectrum-global-color-seafoam-400); } :host([variant='chartreuse']) #root:before { /* .spectrum-StatusLight--chartreuse:before */ - background-color: var( - --spectrum-statuslight-chartreuse-dot-color, - var(--spectrum-global-color-chartreuse-400) - ); + background-color: var(--spectrum-global-color-chartreuse-400); } :host([variant='magenta']) #root:before { /* .spectrum-StatusLight--magenta:before */ - background-color: var( - --spectrum-statuslight-magenta-dot-color, - var(--spectrum-global-color-magenta-400) - ); + background-color: var(--spectrum-global-color-magenta-400); } :host([variant='purple']) #root:before { /* .spectrum-StatusLight--purple:before */ - background-color: var( - --spectrum-statuslight-purple-dot-color, - var(--spectrum-global-color-purple-400) - ); + background-color: var(--spectrum-global-color-purple-400); } diff --git a/packages/styles/core-global.css b/packages/styles/core-global.css index c2f872d2e5..c645dd8b0d 100644 --- a/packages/styles/core-global.css +++ b/packages/styles/core-global.css @@ -350,9 +350,11 @@ governing permissions and limitations under the License. --spectrum-global-dimension-static-size-0: 0px; --spectrum-global-dimension-static-size-10: 1px; --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-50: 4px; --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; --spectrum-global-dimension-static-size-100: 8px; --spectrum-global-dimension-static-size-115: 9px; --spectrum-global-dimension-static-size-125: 10px; @@ -363,6 +365,7 @@ governing permissions and limitations under the License. --spectrum-global-dimension-static-size-200: 16px; --spectrum-global-dimension-static-size-225: 18px; --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; --spectrum-global-dimension-static-size-300: 24px; --spectrum-global-dimension-static-size-325: 26px; --spectrum-global-dimension-static-size-400: 32px; @@ -377,12 +380,18 @@ governing permissions and limitations under the License. --spectrum-global-dimension-static-size-1200: 96px; --spectrum-global-dimension-static-size-1700: 136px; --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; --spectrum-global-dimension-static-size-4600: 368px; --spectrum-global-dimension-static-size-5000: 400px; --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; --spectrum-global-dimension-static-font-size-50: 11px; --spectrum-global-dimension-static-font-size-75: 12px; --spectrum-global-dimension-static-font-size-100: 14px; @@ -544,6 +553,12 @@ governing permissions and limitations under the License. --spectrum-alias-button-text-line-height: var( --spectrum-global-font-line-height-small ); + --spectrum-alias-component-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-han-component-text-line-height: var( + --spectrum-global-font-line-height-medium + ); --spectrum-alias-heading-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -747,6 +762,18 @@ governing permissions and limitations under the License. --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-border-radius-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-border-radius-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-border-radius-xl: var( + --spectrum-global-dimension-size-300 + ); --spectrum-alias-item-text-size-s: var( --spectrum-global-dimension-font-size-75 ); @@ -759,6 +786,66 @@ governing permissions and limitations under the License. --spectrum-alias-item-text-size-xl: var( --spectrum-global-dimension-font-size-300 ); + --spectrum-alias-item-text-padding-top-s: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-item-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-text-padding-top-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-text-padding-bottom-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-text-padding-bottom-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-icon-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-top-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-icon-padding-bottom-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-bottom-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-bottom-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-bottom-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-mark-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-top-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-bottom-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-bottom-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-bottom-xl: var( + --spectrum-global-dimension-size-130 + ); --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); @@ -779,7 +866,7 @@ governing permissions and limitations under the License. --spectrum-global-dimension-size-50 ); --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-75 + --spectrum-global-dimension-size-85 ); --spectrum-alias-item-icononly-padding-l: var( --spectrum-global-dimension-size-125 @@ -826,6 +913,9 @@ governing permissions and limitations under the License. --spectrum-alias-item-control-2-size-xl: var( --spectrum-global-dimension-size-225 ); + --spectrum-alias-item-control-2-size-xxl: var( + --spectrum-global-dimension-size-250 + ); --spectrum-alias-item-control-3-height-m: var( --spectrum-global-dimension-size-175 ); @@ -853,6 +943,39 @@ governing permissions and limitations under the License. --spectrum-alias-workflow-icon-size-xl: var( --spectrum-global-dimension-size-275 ); + --spectrum-alias-ui-icon-alert-size-75: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-alert-size-100: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-ui-icon-alert-size-200: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-ui-icon-alert-size-300: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-ui-icon-cornertriangle-size-75: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-200: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-ui-icon-asterisk-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-100: var( + --spectrum-global-dimension-size-100 + ); --spectrum-alias-item-control-gap-s: var( --spectrum-global-dimension-size-115 ); @@ -895,6 +1018,18 @@ governing permissions and limitations under the License. --spectrum-alias-item-ui-icon-gap-xl: var( --spectrum-global-dimension-size-125 ); + --spectrum-alias-item-clearbutton-gap-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-clearbutton-gap-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-clearbutton-gap-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-xl: var( + --spectrum-global-dimension-size-150 + ); --spectrum-alias-heading-xxxl-text-size: var( --spectrum-global-dimension-font-size-1300 ); @@ -986,9 +1121,15 @@ governing permissions and limitations under the License. --spectrum-global-color-gray-200 ); --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-over-background-down: hsla( + 0, + 0%, + 100%, + 0.2 + ); --spectrum-alias-background-color-quickactions-overlay: rgba(0, 0, 0, 0.2); --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-600 + --spectrum-global-color-gray-800 ); --spectrum-alias-placeholder-text-color-hover: var( --spectrum-global-color-gray-900 @@ -1015,6 +1156,15 @@ governing permissions and limitations under the License. --spectrum-alias-text-color-selected-neutral: var( --spectrum-global-color-gray-900 ); + --spectrum-alias-text-color-over-background: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-text-color-over-background-disabled: hsla( + 0, + 0%, + 100%, + 0.2 + ); --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); @@ -1032,6 +1182,15 @@ governing permissions and limitations under the License. --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var( + --spectrum-global-color-gray-600 + ); + --spectrum-alias-border-color-darker-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-darker-down: var( + --spectrum-global-color-gray-900 + ); --spectrum-alias-border-color-transparent: transparent; --spectrum-alias-border-color-translucent-dark: rgba(0, 0, 0, 0.05); --spectrum-alias-border-color-translucent-darker: rgba(0, 0, 0, 0.1); @@ -1050,6 +1209,12 @@ governing permissions and limitations under the License. --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-over-background-disabled: hsla( + 0, + 0%, + 100%, + 0.2 + ); --spectrum-alias-icon-color-selected-neutral: var( --spectrum-global-color-gray-900 ); @@ -1063,6 +1228,9 @@ governing permissions and limitations under the License. --spectrum-alias-icon-color-selected-focus: var( --spectrum-global-color-blue-600 ); + --spectrum-alias-image-opacity-disabled: var( + --spectrum-global-color-opacity-30 + ); --spectrum-alias-toolbar-background-color: var( --spectrum-global-color-gray-100 ); diff --git a/packages/styles/scale-large.css b/packages/styles/scale-large.css index 0421d70de9..a01e33c65d 100644 --- a/packages/styles/scale-large.css +++ b/packages/styles/scale-large.css @@ -42,17 +42,22 @@ governing permissions and limitations under the License. --spectrum-global-dimension-size-500: 50px; --spectrum-global-dimension-size-550: 56px; --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; --spectrum-global-dimension-size-675: 68px; --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; --spectrum-global-dimension-size-800: 80px; --spectrum-global-dimension-size-900: 90px; --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; --spectrum-global-dimension-size-1200: 120px; --spectrum-global-dimension-size-1250: 125px; --spectrum-global-dimension-size-1600: 160px; --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; --spectrum-global-dimension-size-2000: 200px; --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; --spectrum-global-dimension-size-3000: 300px; --spectrum-global-dimension-size-3400: 340px; --spectrum-global-dimension-size-3600: 360px; @@ -76,6 +81,21 @@ governing permissions and limitations under the License. --spectrum-global-dimension-font-size-1100: 55px; --spectrum-global-dimension-font-size-1200: 62px; --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-85 + ); --spectrum-alias-item-workflow-padding-left-m: var( --spectrum-global-dimension-static-size-150 ); @@ -110,432 +130,1344 @@ governing permissions and limitations under the License. --spectrum-alias-workflow-icon-size-l: var( --spectrum-global-dimension-static-size-300 ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-actionbutton-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-actionbutton-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-actionbutton-emphasized-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-actionbutton-emphasized-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-actionbutton-quiet-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-actionbutton-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-250 ); - --spectrum-actionbutton-quiet-emphasized-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-breadcrumb-compact-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-breadcrumb-compact-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-breadcrumb-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-breadcrumb-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-breadcrumb-multiline-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-250 ); - --spectrum-breadcrumb-multiline-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-300 ); - --spectrum-button-cta-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-cta-min-width: 90px; - --spectrum-button-cta-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-cta-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-over-background-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-over-background-min-width: 90px; - --spectrum-button-over-background-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-over-background-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-primary-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-250 ); - --spectrum-button-primary-min-width: 90px; - --spectrum-button-primary-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-275 ); - --spectrum-button-primary-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-over-background-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-over-background-min-width: 90px; - --spectrum-button-quiet-over-background-touch-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-quiet-over-background-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-quiet-over-background-cursor-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-primary-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-primary-min-width: 90px; - --spectrum-button-quiet-primary-touch-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-quiet-primary-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-quiet-primary-cursor-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-secondary-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-secondary-min-width: 90px; - --spectrum-button-quiet-secondary-touch-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-quiet-secondary-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-275 ); - --spectrum-button-quiet-secondary-cursor-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-300 ); - --spectrum-button-quiet-warning-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-quiet-warning-min-width: 90px; - --spectrum-button-quiet-warning-touch-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-75 ); - --spectrum-button-quiet-warning-touch-hit-y: var( + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-button-quiet-warning-cursor-hit-x: var( - --spectrum-global-dimension-static-size-250 + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-secondary-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-secondary-min-width: 90px; - --spectrum-button-secondary-touch-hit-x: var( + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-actionbutton-l-emphasized-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-button-secondary-touch-hit-y: var( + --spectrum-actionbutton-l-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-button-warning-text-padding-bottom: var( - --spectrum-global-dimension-size-100 + --spectrum-actionbutton-l-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-button-warning-min-width: 90px; - --spectrum-button-warning-touch-hit-x: var( + --spectrum-actionbutton-l-emphasized-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-button-warning-touch-hit-y: var( + --spectrum-actionbutton-l-emphasized-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-l-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-m-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-m-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-m-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-m-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-touch-hit-y: var( + --spectrum-actionbutton-m-emphasized-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-emphasized-touch-hit-y: var( + --spectrum-actionbutton-xl-emphasized-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-colorloupe-colorhandle-gap: var( - --spectrum-global-dimension-static-size-100 + --spectrum-actionbutton-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-colorslider-touch-hit-y: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-colorslider-vertical-touch-hit-x: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-colorwheel-min-size: var( - --spectrum-global-dimension-static-size-2600 + --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-colorwheel-touch-hit-outer: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-colorwheel-touch-hit-inner: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-l-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-cyclebutton-touch-hit-x: var( + --spectrum-actionbutton-l-quiet-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-cyclebutton-touch-hit-y: var( + --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-confirm-max-width: var( - --spectrum-global-dimension-static-size-5000 + --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-global-dimension-font-size-200 + --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 + --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-confirm-padding: var( - --spectrum-global-dimension-static-size-300 + --spectrum-actionbutton-m-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-confirm-description-margin-bottom: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-m-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-destructive-max-width: var( - --spectrum-global-dimension-static-size-5000 + --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-destructive-title-text-size: var( - --spectrum-global-dimension-font-size-200 + --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-destructive-description-text-size: var( - --spectrum-global-dimension-font-size-75 + --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-destructive-padding: var( - --spectrum-global-dimension-static-size-300 + --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-destructive-description-margin-bottom: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-s-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-error-max-width: var( - --spectrum-global-dimension-static-size-5000 + --spectrum-actionbutton-s-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-error-title-text-size: var( - --spectrum-global-dimension-font-size-200 + --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-error-description-text-size: var( - --spectrum-global-dimension-font-size-75 + --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-error-padding: var( - --spectrum-global-dimension-static-size-300 + --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-error-description-margin-bottom: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-info-max-width: var( - --spectrum-global-dimension-static-size-5000 + --spectrum-actionbutton-xl-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-info-title-text-size: var( - --spectrum-global-dimension-font-size-200 + --spectrum-actionbutton-xl-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-info-description-text-size: var( - --spectrum-global-dimension-font-size-75 + --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-info-padding: var( - --spectrum-global-dimension-static-size-300 + --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-dialog-info-description-margin-bottom: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-fieldbutton-quiet-min-width: var( - --spectrum-global-dimension-size-200 + --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-icon-arrow-down-small-height: 12px; - --spectrum-icon-arrow-left-medium-height: 12px; - --spectrum-icon-checkmark-medium-width: 16px; - --spectrum-icon-checkmark-medium-height: 16px; - --spectrum-icon-checkmark-small-width: 12px; - --spectrum-icon-checkmark-small-height: 12px; - --spectrum-icon-chevron-down-medium-width: 12px; - --spectrum-icon-chevron-left-large-width: 16px; - --spectrum-icon-chevron-left-medium-height: 12px; - --spectrum-icon-chevron-right-large-width: 16px; - --spectrum-icon-chevron-right-medium-height: 12px; - --spectrum-icon-cross-large-width: 16px; - --spectrum-icon-cross-large-height: 16px; - --spectrum-icon-dash-small-width: 12px; - --spectrum-icon-dash-small-height: 12px; - --spectrum-icon-skip-left-width: 10px; - --spectrum-icon-skip-left-height: 12px; - --spectrum-icon-skip-right-width: 10px; - --spectrum-icon-skip-right-height: 12px; - --spectrum-icon-triplegripper-width: 12px; - --spectrum-listitem-option-icon-size: var( - --spectrum-global-dimension-static-size-200 + --spectrum-actionbutton-l-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-listitem-option-icon-margin-top: var( + --spectrum-actionbutton-l-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-listitem-option-height: var( - --spectrum-global-dimension-static-size-600 + --spectrum-actionbutton-l-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-listitem-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-200 + --spectrum-actionbutton-l-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-listitem-thumbnail-option-icon-margin-top: var( + --spectrum-actionbutton-l-quiet-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-listitem-thumbnail-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-200 + --spectrum-actionbutton-l-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-selectlist-thumbnail-small-option-icon-margin-top: var( + --spectrum-actionbutton-m-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-200 + --spectrum-actionbutton-m-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-meter-large-border-radius: 4px; - --spectrum-meter-small-border-radius: 3px; - --spectrum-pagination-page-button-line-height: 32px; - --spectrum-picker-touch-hit-x: var( + --spectrum-actionbutton-m-quiet-icononly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-picker-touch-hit-y: var( + --spectrum-actionbutton-m-quiet-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-picker-quiet-min-width: var( - --spectrum-global-dimension-size-200 + --spectrum-actionbutton-m-quiet-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-picker-quiet-touch-hit-y: var( + --spectrum-actionbutton-m-quiet-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-picker-thumbnail-small-touch-hit-x: var( + --spectrum-actionbutton-s-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-picker-thumbnail-small-touch-hit-y: var( + --spectrum-actionbutton-s-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-progressbar-large-border-radius: 4px; - --spectrum-progressbar-large-indeterminate-border-radius: 4px; - --spectrum-progressbar-large-over-background-border-radius: 4px; - --spectrum-progressbar-small-border-radius: 3px; - --spectrum-progressbar-small-indeterminate-border-radius: 3px; - --spectrum-progressbar-small-over-background-border-radius: 3px; - --spectrum-progresscircle-medium-border-size: var( + --spectrum-actionbutton-s-quiet-icononly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-progresscircle-medium-over-background-border-size: var( + --spectrum-actionbutton-s-quiet-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-progresscircle-small-border-size: 3px; - --spectrum-progresscircle-small-indeterminate-border-size: 3px; - --spectrum-progresscircle-small-over-background-border-size: 3px; - --spectrum-progresscircle-medium-indeterminate-border-size: var( + --spectrum-actionbutton-s-quiet-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-s-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-xl-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-xl-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-xl-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-margin-bottom: var( - --spectrum-global-dimension-static-size-100 + --spectrum-actionbutton-xl-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-touch-hit-y: var( + --spectrum-actionbutton-xl-quiet-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-xl-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-l-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-margin-bottom: var( - --spectrum-global-dimension-static-size-100 + --spectrum-actionbutton-l-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-emphasized-touch-hit-y: var( + --spectrum-actionbutton-l-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-rating-icon-width: 30px; - --spectrum-rating-indicator-width: 20px; - --spectrum-rating-touch-hit-y: var( + --spectrum-actionbutton-l-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-rating-emphasized-icon-width: 30px; - --spectrum-rating-emphasized-indicator-width: 20px; - --spectrum-rating-emphasized-touch-hit-y: var( + --spectrum-actionbutton-m-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-touch-hit-x: var( + --spectrum-actionbutton-m-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-touch-hit-y: var( + --spectrum-actionbutton-m-icononly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-quiet-touch-hit-x: var( + --spectrum-actionbutton-m-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-quiet-touch-hit-y: var( + --spectrum-actionbutton-m-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-sidenav-item-touch-hit-bottom: 3px; - --spectrum-sidenav-multilevel-item-touch-hit-bottom: 3px; - --spectrum-slider-track-touch-hit-y: var( + --spectrum-actionbutton-m-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-slider-handle-touch-hit-x: var( - --spectrum-global-dimension-static-size-175 + --spectrum-actionbutton-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-slider-handle-touch-hit-y: var( + --spectrum-actionbutton-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-s-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-s-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-actionbutton-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-compact-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-compact-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-multiline-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-breadcrumb-multiline-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-m-min-width: 90px; + --spectrum-button-cta-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-m-textonly-min-width: 90px; + --spectrum-button-cta-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-cta-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-m-min-width: 90px; + --spectrum-button-over-background-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-m-textonly-min-width: 90px; + --spectrum-button-over-background-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-over-background-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-m-min-width: 90px; + --spectrum-button-quiet-over-background-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-m-textonly-min-width: 90px; + --spectrum-button-quiet-over-background-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-over-background-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-m-min-width: 90px; + --spectrum-button-primary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-m-textonly-min-width: 90px; + --spectrum-button-primary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-primary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-m-min-width: 90px; + --spectrum-button-quiet-primary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-m-textonly-min-width: 90px; + --spectrum-button-quiet-primary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-primary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-m-min-width: 90px; + --spectrum-button-quiet-secondary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-m-textonly-min-width: 90px; + --spectrum-button-quiet-secondary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-secondary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-m-min-width: 90px; + --spectrum-button-secondary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-m-textonly-min-width: 90px; + --spectrum-button-secondary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-secondary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-m-min-width: 90px; + --spectrum-button-quiet-warning-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-m-textonly-min-width: 90px; + --spectrum-button-quiet-warning-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-quiet-warning-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-m-min-width: 90px; + --spectrum-button-warning-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-m-textonly-min-width: 90px; + --spectrum-button-warning-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-button-warning-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-checkbox-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-colorloupe-colorhandle-gap: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-colorslider-touch-hit-y: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-colorslider-vertical-touch-hit-x: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-colorwheel-min-size: var( + --spectrum-global-dimension-static-size-2600 + ); + --spectrum-colorwheel-touch-hit-outer: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-colorwheel-touch-hit-inner: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-cyclebutton-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-cyclebutton-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-dialog-confirm-max-width: var( + --spectrum-global-dimension-static-size-5000 + ); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-dialog-confirm-padding: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-dialog-confirm-description-margin-bottom: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-destructive-max-width: var( + --spectrum-global-dimension-static-size-5000 + ); + --spectrum-dialog-destructive-title-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-dialog-destructive-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-dialog-destructive-padding: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-dialog-destructive-description-margin-bottom: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-error-max-width: var( + --spectrum-global-dimension-static-size-5000 + ); + --spectrum-dialog-error-title-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-dialog-error-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-dialog-error-padding: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-dialog-error-description-margin-bottom: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-info-max-width: var( + --spectrum-global-dimension-static-size-5000 + ); + --spectrum-dialog-info-title-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-dialog-info-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-dialog-info-padding: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-dialog-info-description-margin-bottom: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-icon-arrow-down-small-height: 12px; + --spectrum-icon-arrow-left-medium-height: 12px; + --spectrum-icon-checkmark-medium-width: 16px; + --spectrum-icon-checkmark-medium-height: 16px; + --spectrum-icon-checkmark-small-width: 12px; + --spectrum-icon-checkmark-small-height: 12px; + --spectrum-icon-chevron-down-medium-width: 12px; + --spectrum-icon-chevron-left-large-width: 16px; + --spectrum-icon-chevron-left-medium-height: 12px; + --spectrum-icon-chevron-right-large-width: 16px; + --spectrum-icon-chevron-right-medium-height: 12px; + --spectrum-icon-cross-large-width: 16px; + --spectrum-icon-cross-large-height: 16px; + --spectrum-icon-dash-small-width: 12px; + --spectrum-icon-dash-small-height: 12px; + --spectrum-icon-skip-left-width: 10px; + --spectrum-icon-skip-left-height: 12px; + --spectrum-icon-skip-right-width: 10px; + --spectrum-icon-skip-right-height: 12px; + --spectrum-icon-triplegripper-width: 12px; + --spectrum-meter-negative-m-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-negative-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-negative-s-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-negative-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-negative-xl-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-meter-negative-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-meter-notice-m-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-notice-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-notice-s-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-notice-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-notice-xl-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-meter-notice-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-meter-positive-m-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-positive-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-meter-positive-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-positive-xl-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-meter-positive-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-pagination-page-button-line-height: 32px; + --spectrum-panel-l-header-height: var(--spectrum-global-dimension-size-550); + --spectrum-panel-l-collapsible-header-height: var( + --spectrum-global-dimension-size-550 + ); + --spectrum-panel-s-header-height: var(--spectrum-global-dimension-size-550); + --spectrum-panel-s-collapsible-header-height: var( + --spectrum-global-dimension-size-550 + ); + --spectrum-picker-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-l-min-width: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-picker-quiet-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-l-textonly-min-width: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-picker-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-m-min-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-picker-quiet-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-m-textonly-min-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-picker-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-s-min-width: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-picker-quiet-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-s-textonly-min-width: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-picker-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-xl-min-width: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-picker-quiet-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-quiet-xl-textonly-min-width: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-picker-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-picker-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progressbar-m-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progressbar-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progressbar-s-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-xl-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-progressbar-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-progressbar-m-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progressbar-m-indeterminate-over-background-border-radius: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progressbar-s-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-s-indeterminate-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-xl-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-progressbar-xl-indeterminate-over-background-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-progresscircle-medium-border-size: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progresscircle-medium-over-background-border-size: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-progresscircle-small-border-size: 3px; + --spectrum-progresscircle-small-indeterminate-border-size: 3px; + --spectrum-progresscircle-small-over-background-border-size: 3px; + --spectrum-progresscircle-medium-indeterminate-border-size: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-radio-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-rating-icon-width: 30px; + --spectrum-rating-indicator-width: 20px; + --spectrum-rating-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-rating-emphasized-icon-width: 30px; + --spectrum-rating-emphasized-indicator-width: 20px; + --spectrum-rating-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-search-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-sidenav-item-touch-hit-bottom: 3px; + --spectrum-sidenav-multilevel-item-touch-hit-bottom: 3px; + --spectrum-slider-l-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-l-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-l-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-m-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-m-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-m-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-s-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-s-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-s-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-xl-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-xl-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-xl-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-175 ); --spectrum-slider-editable-track-touch-hit-y: var( @@ -547,126 +1479,392 @@ governing permissions and limitations under the License. --spectrum-slider-editable-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-175 ); - --spectrum-slider-fill-track-touch-hit-y: var( + --spectrum-slider-tick-l-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-tick-l-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-l-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-m-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-tick-m-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-m-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-s-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-slider-tick-s-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-s-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-slider-tick-xl-track-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-slider-fill-handle-touch-hit-x: var( + --spectrum-slider-tick-xl-handle-touch-hit-x: var( --spectrum-global-dimension-static-size-175 ); - --spectrum-slider-fill-handle-touch-hit-y: var( + --spectrum-slider-tick-xl-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-175 ); - --spectrum-switch-focus-ring-border-radius-key-focus: var( + --spectrum-switch-l-emphasized-focus-ring-border-radius-key-focus: var( --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-l-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-l-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-l-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-switch-track-width: var( - --spectrum-global-dimension-static-size-450 + --spectrum-switch-l-emphasized-handle-border-radius: 9px; + --spectrum-switch-m-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-handle-border-radius: 9px; - --spectrum-switch-touch-hit-y: var( + --spectrum-switch-m-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-switch-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-switch-m-emphasized-handle-border-radius: 9px; + --spectrum-switch-s-emphasized-focus-ring-border-radius-key-focus: var( --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-s-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-s-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-s-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 + --spectrum-switch-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-switch-emphasized-track-width: var( - --spectrum-global-dimension-static-size-450 + --spectrum-switch-s-emphasized-handle-border-radius: 9px; + --spectrum-switch-xl-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-switch-emphasized-handle-border-radius: 9px; - --spectrum-switch-emphasized-touch-hit-y: var( + --spectrum-switch-xl-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-tabs-compact-focus-ring-border-radius: 6px; - --spectrum-tabs-compact-margin-left: -11px; - --spectrum-tabs-compact-margin-right: -11px; - --spectrum-tabs-compact-vertical-focus-ring-border-radius: 6px; - --spectrum-tabs-compact-vertical-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-baseline: var(--spectrum-global-dimension-size-250); - --spectrum-tabs-focus-ring-border-radius: 6px; - --spectrum-tabs-margin-left: -11px; - --spectrum-tabs-margin-right: -11px; - --spectrum-tabs-emphasized-baseline: var( - --spectrum-global-dimension-size-250 + --spectrum-switch-xl-emphasized-handle-border-radius: 9px; + --spectrum-switch-l-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-tabs-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-emphasized-margin-left: -11px; - --spectrum-tabs-emphasized-margin-right: -11px; - --spectrum-tabs-quiet-baseline: var(--spectrum-global-dimension-size-250); - --spectrum-tabs-quiet-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-margin-left: -11px; - --spectrum-tabs-quiet-margin-right: -11px; - --spectrum-tabs-quiet-compact-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-compact-margin-left: -11px; - --spectrum-tabs-quiet-compact-margin-right: -11px; - --spectrum-tabs-quiet-compact-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-compact-emphasized-margin-left: -11px; - --spectrum-tabs-quiet-compact-emphasized-margin-right: -11px; - --spectrum-tabs-quiet-compact-vertical-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-compact-vertical-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-emphasized-baseline: var( - --spectrum-global-dimension-size-250 + --spectrum-switch-l-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-tabs-quiet-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-emphasized-margin-left: -11px; - --spectrum-tabs-quiet-emphasized-margin-right: -11px; - --spectrum-tabs-quiet-vertical-baseline: var( - --spectrum-global-dimension-size-250 + --spectrum-switch-l-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-tabs-quiet-vertical-focus-ring-border-radius: 6px; - --spectrum-tabs-quiet-vertical-emphasized-baseline: var( - --spectrum-global-dimension-size-250 + --spectrum-switch-l-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 ); - --spectrum-tabs-quiet-vertical-emphasized-focus-ring-border-radius: 6px; - --spectrum-tabs-vertical-baseline: var( - --spectrum-global-dimension-size-250 + --spectrum-switch-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-switch-l-handle-border-radius: 9px; + --spectrum-switch-m-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-switch-m-handle-border-radius: 9px; + --spectrum-switch-s-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-s-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-s-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-s-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-switch-s-handle-border-radius: 9px; + --spectrum-switch-xl-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-160 + ); + --spectrum-switch-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-switch-xl-handle-border-radius: 9px; + --spectrum-tabs-quiet-s-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-compact-emphasized-margin-left: -9px; + --spectrum-tabs-quiet-s-compact-emphasized-margin-right: -9px; + --spectrum-tabs-quiet-s-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-compact-margin-left: -9px; + --spectrum-tabs-quiet-s-compact-margin-right: -9px; + --spectrum-tabs-quiet-s-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-emphasized-margin-left: -9px; + --spectrum-tabs-quiet-s-emphasized-margin-right: -9px; + --spectrum-tabs-quiet-s-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-margin-left: -9px; + --spectrum-tabs-quiet-s-margin-right: -9px; + --spectrum-tabs-quiet-s-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-s-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-compact-emphasized-margin-left: -11px; + --spectrum-tabs-quiet-m-compact-emphasized-margin-right: -11px; + --spectrum-tabs-quiet-m-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-compact-margin-left: -11px; + --spectrum-tabs-quiet-m-compact-margin-right: -11px; + --spectrum-tabs-quiet-m-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-emphasized-margin-left: -11px; + --spectrum-tabs-quiet-m-emphasized-margin-right: -11px; + --spectrum-tabs-quiet-m-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-margin-left: -11px; + --spectrum-tabs-quiet-m-margin-right: -11px; + --spectrum-tabs-quiet-m-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-m-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-compact-emphasized-margin-left: -11px; + --spectrum-tabs-quiet-l-compact-emphasized-margin-right: -11px; + --spectrum-tabs-quiet-l-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-compact-margin-left: -11px; + --spectrum-tabs-quiet-l-compact-margin-right: -11px; + --spectrum-tabs-quiet-l-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-emphasized-margin-left: -11px; + --spectrum-tabs-quiet-l-emphasized-margin-right: -11px; + --spectrum-tabs-quiet-l-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-margin-left: -11px; + --spectrum-tabs-quiet-l-margin-right: -11px; + --spectrum-tabs-quiet-l-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-l-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-compact-emphasized-margin-left: -12px; + --spectrum-tabs-quiet-xl-compact-emphasized-margin-right: -12px; + --spectrum-tabs-quiet-xl-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-compact-margin-left: -12px; + --spectrum-tabs-quiet-xl-compact-margin-right: -12px; + --spectrum-tabs-quiet-xl-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-emphasized-margin-left: -12px; + --spectrum-tabs-quiet-xl-emphasized-margin-right: -12px; + --spectrum-tabs-quiet-xl-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-margin-left: -12px; + --spectrum-tabs-quiet-xl-margin-right: -12px; + --spectrum-tabs-quiet-xl-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-quiet-xl-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-s-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-s-compact-emphasized-margin-left: -9px; + --spectrum-tabs-s-compact-emphasized-margin-right: -9px; + --spectrum-tabs-s-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-s-compact-margin-left: -9px; + --spectrum-tabs-s-compact-margin-right: -9px; + --spectrum-tabs-s-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-s-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-s-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-s-emphasized-margin-left: -9px; + --spectrum-tabs-s-emphasized-margin-right: -9px; + --spectrum-tabs-s-focus-ring-border-radius: 6px; + --spectrum-tabs-s-margin-left: -9px; + --spectrum-tabs-s-margin-right: -9px; + --spectrum-tabs-s-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-s-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-m-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-m-compact-emphasized-margin-left: -11px; + --spectrum-tabs-m-compact-emphasized-margin-right: -11px; + --spectrum-tabs-m-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-m-compact-margin-left: -11px; + --spectrum-tabs-m-compact-margin-right: -11px; + --spectrum-tabs-m-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-m-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-m-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-m-emphasized-margin-left: -11px; + --spectrum-tabs-m-emphasized-margin-right: -11px; + --spectrum-tabs-m-focus-ring-border-radius: 6px; + --spectrum-tabs-m-margin-left: -11px; + --spectrum-tabs-m-margin-right: -11px; + --spectrum-tabs-m-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-m-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-l-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-l-compact-emphasized-margin-left: -11px; + --spectrum-tabs-l-compact-emphasized-margin-right: -11px; + --spectrum-tabs-l-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-l-compact-margin-left: -11px; + --spectrum-tabs-l-compact-margin-right: -11px; + --spectrum-tabs-l-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-l-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-l-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-l-emphasized-margin-left: -11px; + --spectrum-tabs-l-emphasized-margin-right: -11px; + --spectrum-tabs-l-focus-ring-border-radius: 6px; + --spectrum-tabs-l-margin-left: -11px; + --spectrum-tabs-l-margin-right: -11px; + --spectrum-tabs-l-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-l-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-compact-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-compact-emphasized-margin-left: -12px; + --spectrum-tabs-xl-compact-emphasized-margin-right: -12px; + --spectrum-tabs-xl-compact-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-compact-margin-left: -12px; + --spectrum-tabs-xl-compact-margin-right: -12px; + --spectrum-tabs-xl-compact-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-compact-vertical-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-emphasized-margin-left: -12px; + --spectrum-tabs-xl-emphasized-margin-right: -12px; + --spectrum-tabs-xl-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-margin-left: -12px; + --spectrum-tabs-xl-margin-right: -12px; + --spectrum-tabs-xl-vertical-emphasized-focus-ring-border-radius: 6px; + --spectrum-tabs-xl-vertical-focus-ring-border-radius: 6px; + --spectrum-textarea-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textarea-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-textfield-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-tabs-vertical-focus-ring-border-radius: 6px; - --spectrum-textarea-touch-hit-x: var( + --spectrum-textfield-l-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textarea-touch-hit-y: var( + --spectrum-textfield-l-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textarea-quiet-touch-hit-x: var( + --spectrum-textfield-m-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textarea-quiet-touch-hit-y: var( + --spectrum-textfield-m-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-touch-hit-x: var( + --spectrum-textfield-s-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-touch-hit-y: var( + --spectrum-textfield-s-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-quiet-touch-hit-x: var( + --spectrum-textfield-xl-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-quiet-touch-hit-y: var( + --spectrum-textfield-xl-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); --spectrum-tooltip-info-padding-bottom: 6px; diff --git a/packages/styles/scale-medium.css b/packages/styles/scale-medium.css index f5c5dc26bd..cd53dfa28d 100644 --- a/packages/styles/scale-medium.css +++ b/packages/styles/scale-medium.css @@ -42,17 +42,22 @@ governing permissions and limitations under the License. --spectrum-global-dimension-size-500: 40px; --spectrum-global-dimension-size-550: 44px; --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; --spectrum-global-dimension-size-675: 54px; --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; --spectrum-global-dimension-size-800: 64px; --spectrum-global-dimension-size-900: 72px; --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; --spectrum-global-dimension-size-1200: 96px; --spectrum-global-dimension-size-1250: 100px; --spectrum-global-dimension-size-1600: 128px; --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; --spectrum-global-dimension-size-2000: 160px; --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; --spectrum-global-dimension-size-3000: 240px; --spectrum-global-dimension-size-3400: 272px; --spectrum-global-dimension-size-3600: 288px; @@ -76,6 +81,21 @@ governing permissions and limitations under the License. --spectrum-global-dimension-font-size-1100: 45px; --spectrum-global-dimension-font-size-1200: 50px; --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-75 + ); --spectrum-alias-item-workflow-padding-left-m: var( --spectrum-global-dimension-size-125 ); @@ -110,407 +130,1280 @@ governing permissions and limitations under the License. --spectrum-alias-workflow-icon-size-l: var( --spectrum-global-dimension-static-size-250 ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-actionbutton-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-actionbutton-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-actionbutton-emphasized-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-actionbutton-emphasized-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-actionbutton-quiet-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-actionbutton-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-actionbutton-quiet-emphasized-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-breadcrumb-compact-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-breadcrumb-compact-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-breadcrumb-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-breadcrumb-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-breadcrumb-multiline-item-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-breadcrumb-multiline-button-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-cta-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-cta-min-width: var(--spectrum-global-dimension-size-900); - --spectrum-button-cta-touch-hit-x: var( + --spectrum-alias-ui-icon-dash-size-50: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-cta-touch-hit-y: var( + --spectrum-alias-ui-icon-dash-size-75: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-over-background-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-over-background-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-over-background-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-over-background-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-primary-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-200 ); - --spectrum-button-primary-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-primary-touch-hit-x: var( + --spectrum-alias-ui-icon-cross-size-75: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-primary-touch-hit-y: var( + --spectrum-alias-ui-icon-cross-size-100: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-quiet-over-background-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-over-background-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-quiet-over-background-touch-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-quiet-over-background-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-quiet-over-background-cursor-hit-x: var( + --spectrum-alias-ui-icon-cross-size-600: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-primary-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-primary-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-primary-touch-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-150 ); - --spectrum-button-quiet-primary-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-175 ); - --spectrum-button-quiet-primary-cursor-hit-x: var( + --spectrum-alias-ui-icon-arrow-size-400: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-button-quiet-secondary-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-225 ); - --spectrum-button-quiet-secondary-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-250 ); - --spectrum-button-quiet-secondary-touch-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-secondary-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 ); - --spectrum-button-quiet-secondary-cursor-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-25 ); - --spectrum-button-quiet-warning-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-65 ); - --spectrum-button-quiet-warning-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-85 ); - --spectrum-button-quiet-warning-touch-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-125 ); - --spectrum-button-quiet-warning-touch-hit-y: var( + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-actionbutton-l-emphasized-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-quiet-warning-cursor-hit-x: var( - --spectrum-global-dimension-static-size-200 + --spectrum-actionbutton-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-button-secondary-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-l-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-button-secondary-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-actionbutton-l-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-button-secondary-touch-hit-x: var( + --spectrum-actionbutton-l-emphasized-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-secondary-touch-hit-y: var( + --spectrum-actionbutton-l-emphasized-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-warning-text-padding-bottom: var( - --spectrum-global-dimension-size-85 + --spectrum-actionbutton-m-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-button-warning-min-width: var( - --spectrum-global-dimension-size-900 + --spectrum-actionbutton-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-button-warning-touch-hit-x: var( + --spectrum-actionbutton-m-emphasized-icononly-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-button-warning-touch-hit-y: var( + --spectrum-actionbutton-m-emphasized-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-m-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-m-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-s-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-s-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-s-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-touch-hit-y: var( + --spectrum-actionbutton-s-emphasized-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-s-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-xl-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-emphasized-touch-hit-y: var( + --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-colorloupe-colorhandle-gap: var( - --spectrum-global-dimension-static-size-125 + --spectrum-actionbutton-l-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-colorslider-touch-hit-y: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-l-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-colorslider-vertical-touch-hit-x: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-colorwheel-min-size: var(--spectrum-global-dimension-size-2400); - --spectrum-colorwheel-touch-hit-outer: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-colorwheel-touch-hit-inner: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-cyclebutton-touch-hit-x: var( + --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-cyclebutton-touch-hit-y: var( + --spectrum-actionbutton-m-quiet-emphasized-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-confirm-max-width: var( - --spectrum-global-dimension-static-size-6000 + --spectrum-actionbutton-m-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-global-dimension-font-size-300 + --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 + --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-confirm-padding: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-confirm-description-margin-bottom: var( - --spectrum-global-dimension-static-size-600 + --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-destructive-max-width: var( - --spectrum-global-dimension-static-size-6000 + --spectrum-actionbutton-s-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-destructive-title-text-size: var( - --spectrum-global-dimension-font-size-300 + --spectrum-actionbutton-s-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-destructive-description-text-size: var( - --spectrum-global-dimension-font-size-100 + --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-destructive-padding: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-destructive-description-margin-bottom: var( - --spectrum-global-dimension-static-size-600 + --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-error-max-width: var( - --spectrum-global-dimension-static-size-6000 + --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-error-title-text-size: var( - --spectrum-global-dimension-font-size-300 + --spectrum-actionbutton-xl-quiet-emphasized-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-error-description-text-size: var( - --spectrum-global-dimension-font-size-100 + --spectrum-actionbutton-xl-quiet-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-error-padding: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-error-description-margin-bottom: var( - --spectrum-global-dimension-static-size-600 + --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-info-max-width: var( - --spectrum-global-dimension-static-size-6000 + --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-info-title-text-size: var( - --spectrum-global-dimension-font-size-300 + --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-info-description-text-size: var( - --spectrum-global-dimension-font-size-100 + --spectrum-actionbutton-l-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-info-padding: var( - --spectrum-global-dimension-static-size-500 + --spectrum-actionbutton-l-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-dialog-info-description-margin-bottom: var( - --spectrum-global-dimension-static-size-600 + --spectrum-actionbutton-l-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-fieldbutton-quiet-min-width: var( - --spectrum-global-dimension-size-225 + --spectrum-actionbutton-l-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-arrow-down-small-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-l-quiet-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-arrow-left-medium-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-l-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-checkmark-medium-width: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-m-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-checkmark-medium-height: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-m-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-checkmark-small-width: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-m-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-checkmark-small-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-m-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-chevron-down-medium-width: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-m-quiet-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-chevron-left-large-width: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-m-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-chevron-left-medium-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-s-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-chevron-right-large-width: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-s-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-chevron-right-medium-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-s-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-cross-large-width: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-s-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-cross-large-height: var( - --spectrum-global-dimension-size-150 + --spectrum-actionbutton-s-quiet-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-dash-small-width: var(--spectrum-global-dimension-size-125); - --spectrum-icon-dash-small-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-s-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-skip-left-width: 9px; - --spectrum-icon-skip-left-height: var(--spectrum-global-dimension-size-125); - --spectrum-icon-skip-right-width: 9px; - --spectrum-icon-skip-right-height: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-xl-quiet-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-icon-triplegripper-width: var( - --spectrum-global-dimension-size-125 + --spectrum-actionbutton-xl-quiet-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-option-icon-size: var( - --spectrum-global-dimension-static-size-150 + --spectrum-actionbutton-xl-quiet-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-option-icon-margin-top: var( - --spectrum-global-dimension-static-size-65 + --spectrum-actionbutton-xl-quiet-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-option-height: var( - --spectrum-global-dimension-static-size-400 + --spectrum-actionbutton-xl-quiet-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-125 + --spectrum-actionbutton-xl-quiet-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-thumbnail-option-icon-margin-top: var( - --spectrum-global-dimension-static-size-65 + --spectrum-actionbutton-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-listitem-thumbnail-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-125 + --spectrum-actionbutton-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-selectlist-thumbnail-small-option-icon-margin-top: var( - --spectrum-global-dimension-static-size-65 + --spectrum-actionbutton-l-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-125 + --spectrum-actionbutton-l-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-meter-large-border-radius: 3px; - --spectrum-meter-small-border-radius: var( - --spectrum-global-dimension-static-size-25 + --spectrum-actionbutton-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-pagination-page-button-line-height: 26px; - --spectrum-picker-touch-hit-x: var( + --spectrum-actionbutton-l-textonly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-picker-touch-hit-y: var( + --spectrum-actionbutton-m-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-picker-quiet-min-width: var( - --spectrum-global-dimension-size-225 + --spectrum-actionbutton-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-picker-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-400 + --spectrum-actionbutton-m-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-picker-thumbnail-small-touch-hit-x: var( + --spectrum-actionbutton-m-icononly-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-picker-thumbnail-small-touch-hit-y: var( + --spectrum-actionbutton-m-textonly-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-progressbar-large-border-radius: 3px; - --spectrum-progressbar-large-indeterminate-border-radius: 3px; - --spectrum-progressbar-large-over-background-border-radius: 3px; - --spectrum-progressbar-small-border-radius: var( - --spectrum-global-dimension-static-size-25 + --spectrum-actionbutton-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-progressbar-small-indeterminate-border-radius: var( - --spectrum-global-dimension-static-size-25 + --spectrum-actionbutton-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-s-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-s-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-icononly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-icononly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-actionbutton-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-compact-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-compact-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-multiline-item-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-breadcrumb-multiline-button-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-cta-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-cta-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-cta-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-over-background-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-over-background-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-over-background-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-over-background-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-over-background-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-over-background-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-primary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-primary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-primary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-primary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-primary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-primary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-secondary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-secondary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-secondary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-secondary-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-secondary-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-secondary-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-warning-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-quiet-warning-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-quiet-warning-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-m-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-warning-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-m-textonly-min-width: var( + --spectrum-global-dimension-size-900 + ); + --spectrum-button-warning-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-button-warning-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-s-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-checkbox-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-colorloupe-colorhandle-gap: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-colorslider-touch-hit-y: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-colorslider-vertical-touch-hit-x: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-colorwheel-min-size: var(--spectrum-global-dimension-size-2400); + --spectrum-colorwheel-touch-hit-outer: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-colorwheel-touch-hit-inner: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-cyclebutton-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-cyclebutton-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-dialog-confirm-max-width: var( + --spectrum-global-dimension-static-size-6000 + ); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-dialog-confirm-padding: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-confirm-description-margin-bottom: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-dialog-destructive-max-width: var( + --spectrum-global-dimension-static-size-6000 + ); + --spectrum-dialog-destructive-title-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-dialog-destructive-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-dialog-destructive-padding: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-destructive-description-margin-bottom: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-dialog-error-max-width: var( + --spectrum-global-dimension-static-size-6000 + ); + --spectrum-dialog-error-title-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-dialog-error-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-dialog-error-padding: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-error-description-margin-bottom: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-dialog-info-max-width: var( + --spectrum-global-dimension-static-size-6000 + ); + --spectrum-dialog-info-title-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-dialog-info-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-dialog-info-padding: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-dialog-info-description-margin-bottom: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-icon-arrow-down-small-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-arrow-left-medium-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-checkmark-medium-width: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-checkmark-medium-height: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-checkmark-small-width: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-checkmark-small-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-chevron-down-medium-width: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-chevron-left-large-width: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-chevron-left-medium-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-chevron-right-large-width: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-chevron-right-medium-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-cross-large-width: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-cross-large-height: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-icon-dash-small-width: var(--spectrum-global-dimension-size-125); + --spectrum-icon-dash-small-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-skip-left-width: 9px; + --spectrum-icon-skip-left-height: var(--spectrum-global-dimension-size-125); + --spectrum-icon-skip-right-width: 9px; + --spectrum-icon-skip-right-height: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-icon-triplegripper-width: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-meter-negative-m-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-negative-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-negative-s-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-meter-negative-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-meter-negative-xl-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-meter-negative-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-meter-notice-m-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-notice-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-notice-s-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-meter-notice-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-meter-notice-xl-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-meter-notice-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-meter-positive-m-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-positive-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-meter-positive-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-meter-positive-xl-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-meter-positive-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-pagination-page-button-line-height: 26px; + --spectrum-panel-l-header-height: var(--spectrum-global-dimension-size-600); + --spectrum-panel-l-collapsible-header-height: var( + --spectrum-global-dimension-size-600 + ); + --spectrum-panel-s-header-height: var(--spectrum-global-dimension-size-600); + --spectrum-panel-s-collapsible-header-height: var( + --spectrum-global-dimension-size-600 + ); + --spectrum-picker-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 ); - --spectrum-progressbar-small-over-background-border-radius: var( + --spectrum-picker-quiet-l-min-width: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-picker-quiet-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-l-textonly-min-width: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-picker-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-m-min-width: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-picker-quiet-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-m-textonly-min-width: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-picker-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-s-min-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-picker-quiet-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-s-textonly-min-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-picker-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-xl-min-width: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-picker-quiet-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-picker-quiet-xl-textonly-min-width: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-picker-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-l-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-l-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-m-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-m-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-s-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-s-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-xl-textonly-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-picker-xl-textonly-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-progressbar-m-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-m-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-s-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-progressbar-s-over-background-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-progressbar-xl-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-progressbar-xl-over-background-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-progressbar-m-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-m-indeterminate-over-background-border-radius: var( + --spectrum-global-dimension-static-size-40 + ); + --spectrum-progressbar-s-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-progressbar-s-indeterminate-over-background-border-radius: var( --spectrum-global-dimension-static-size-25 ); + --spectrum-progressbar-xl-indeterminate-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-progressbar-xl-indeterminate-over-background-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); --spectrum-progresscircle-medium-border-size: 3px; --spectrum-progresscircle-medium-over-background-border-size: 3px; --spectrum-progresscircle-small-border-size: var( @@ -523,36 +1416,28 @@ governing permissions and limitations under the License. --spectrum-global-dimension-static-size-25 ); --spectrum-progresscircle-medium-indeterminate-border-size: 3px; - --spectrum-radio-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-margin-bottom: 0px; - --spectrum-radio-touch-hit-y: var( + --spectrum-radio-s-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-radio-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-emphasized-margin-bottom: 0px; - --spectrum-radio-emphasized-touch-hit-y: var( + --spectrum-radio-xl-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); --spectrum-rating-icon-width: 24px; @@ -565,16 +1450,52 @@ governing permissions and limitations under the License. --spectrum-rating-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-touch-hit-x: var( + --spectrum-search-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-quiet-xl-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-touch-hit-y: var( + --spectrum-search-quiet-xl-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-quiet-touch-hit-x: var( + --spectrum-search-l-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-quiet-touch-hit-y: var( + --spectrum-search-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-search-xl-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); --spectrum-sidenav-item-touch-hit-bottom: var( @@ -583,13 +1504,40 @@ governing permissions and limitations under the License. --spectrum-sidenav-multilevel-item-touch-hit-bottom: var( --spectrum-global-dimension-static-size-25 ); - --spectrum-slider-track-touch-hit-y: var( + --spectrum-slider-l-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-l-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-l-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-m-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-m-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-m-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-s-track-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-slider-handle-touch-hit-x: var( + --spectrum-slider-s-handle-touch-hit-x: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-slider-handle-touch-hit-y: var( + --spectrum-slider-s-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-xl-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-xl-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-xl-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-200 ); --spectrum-slider-editable-track-touch-hit-y: var( @@ -601,122 +1549,392 @@ governing permissions and limitations under the License. --spectrum-slider-editable-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-slider-fill-track-touch-hit-y: var( + --spectrum-slider-tick-l-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-tick-l-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-l-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-m-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-tick-m-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-m-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-s-track-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-slider-tick-s-handle-touch-hit-x: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-s-handle-touch-hit-y: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-slider-tick-xl-track-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-slider-fill-handle-touch-hit-x: var( + --spectrum-slider-tick-xl-handle-touch-hit-x: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-slider-fill-handle-touch-hit-y: var( + --spectrum-slider-tick-xl-handle-touch-hit-y: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-switch-focus-ring-border-radius-key-focus: var( + --spectrum-switch-l-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-l-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-l-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-l-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-l-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-l-emphasized-handle-border-radius: 7px; + --spectrum-switch-m-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-m-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-m-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-m-emphasized-focus-ring-border-radius-error-selected-key-focus: var( --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-m-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-m-emphasized-handle-border-radius: 7px; + --spectrum-switch-s-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-s-emphasized-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-s-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-s-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-track-width: 26px; - --spectrum-switch-handle-border-radius: 7px; - --spectrum-switch-touch-hit-y: var( + --spectrum-switch-s-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-switch-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-switch-s-emphasized-handle-border-radius: 7px; + --spectrum-switch-xl-emphasized-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-emphasized-focus-ring-border-radius-selected-key-focus: var( --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-emphasized-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-xl-emphasized-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-emphasized-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-emphasized-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-xl-emphasized-handle-border-radius: 7px; + --spectrum-switch-l-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-emphasized-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-l-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-emphasized-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-l-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-emphasized-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 + --spectrum-switch-l-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-switch-emphasized-track-width: 26px; - --spectrum-switch-emphasized-handle-border-radius: 7px; - --spectrum-switch-emphasized-touch-hit-y: var( + --spectrum-switch-l-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-tabs-compact-focus-ring-border-radius: 5px; - --spectrum-tabs-compact-margin-left: -8px; - --spectrum-tabs-compact-margin-right: -8px; - --spectrum-tabs-compact-vertical-focus-ring-border-radius: 5px; - --spectrum-tabs-compact-vertical-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-baseline: var(--spectrum-global-dimension-size-225); - --spectrum-tabs-focus-ring-border-radius: 5px; - --spectrum-tabs-margin-left: -8px; - --spectrum-tabs-margin-right: -8px; - --spectrum-tabs-emphasized-baseline: var( - --spectrum-global-dimension-size-225 + --spectrum-switch-l-handle-border-radius: 7px; + --spectrum-switch-m-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-tabs-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-emphasized-margin-left: -8px; - --spectrum-tabs-emphasized-margin-right: -8px; - --spectrum-tabs-quiet-baseline: var(--spectrum-global-dimension-size-225); - --spectrum-tabs-quiet-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-margin-left: -8px; - --spectrum-tabs-quiet-margin-right: -8px; - --spectrum-tabs-quiet-compact-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-compact-margin-left: -8px; - --spectrum-tabs-quiet-compact-margin-right: -8px; - --spectrum-tabs-quiet-compact-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-compact-emphasized-margin-left: -8px; - --spectrum-tabs-quiet-compact-emphasized-margin-right: -8px; - --spectrum-tabs-quiet-compact-vertical-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-compact-vertical-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-emphasized-baseline: var( - --spectrum-global-dimension-size-225 + --spectrum-switch-m-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-tabs-quiet-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-emphasized-margin-left: -8px; - --spectrum-tabs-quiet-emphasized-margin-right: -8px; - --spectrum-tabs-quiet-vertical-baseline: var( - --spectrum-global-dimension-size-225 + --spectrum-switch-m-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-tabs-quiet-vertical-focus-ring-border-radius: 5px; - --spectrum-tabs-quiet-vertical-emphasized-baseline: var( - --spectrum-global-dimension-size-225 + --spectrum-switch-m-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 ); - --spectrum-tabs-quiet-vertical-emphasized-focus-ring-border-radius: 5px; - --spectrum-tabs-vertical-baseline: var( - --spectrum-global-dimension-size-225 + --spectrum-switch-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-m-handle-border-radius: 7px; + --spectrum-switch-s-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-s-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-s-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-s-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-s-handle-border-radius: 7px; + --spectrum-switch-xl-focus-ring-border-radius-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-focus-ring-border-radius-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-focus-ring-border-radius-error-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-focus-ring-border-radius-error-selected-key-focus: var( + --spectrum-global-dimension-static-size-130 + ); + --spectrum-switch-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-switch-xl-handle-border-radius: 7px; + --spectrum-tabs-quiet-s-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-compact-emphasized-margin-left: -7px; + --spectrum-tabs-quiet-s-compact-emphasized-margin-right: -7px; + --spectrum-tabs-quiet-s-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-compact-margin-left: -7px; + --spectrum-tabs-quiet-s-compact-margin-right: -7px; + --spectrum-tabs-quiet-s-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-emphasized-margin-left: -7px; + --spectrum-tabs-quiet-s-emphasized-margin-right: -7px; + --spectrum-tabs-quiet-s-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-margin-left: -7px; + --spectrum-tabs-quiet-s-margin-right: -7px; + --spectrum-tabs-quiet-s-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-s-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-compact-emphasized-margin-left: -8px; + --spectrum-tabs-quiet-m-compact-emphasized-margin-right: -8px; + --spectrum-tabs-quiet-m-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-compact-margin-left: -8px; + --spectrum-tabs-quiet-m-compact-margin-right: -8px; + --spectrum-tabs-quiet-m-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-emphasized-margin-left: -8px; + --spectrum-tabs-quiet-m-emphasized-margin-right: -8px; + --spectrum-tabs-quiet-m-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-margin-left: -8px; + --spectrum-tabs-quiet-m-margin-right: -8px; + --spectrum-tabs-quiet-m-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-m-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-compact-emphasized-margin-left: -9px; + --spectrum-tabs-quiet-l-compact-emphasized-margin-right: -9px; + --spectrum-tabs-quiet-l-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-compact-margin-left: -9px; + --spectrum-tabs-quiet-l-compact-margin-right: -9px; + --spectrum-tabs-quiet-l-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-emphasized-margin-left: -9px; + --spectrum-tabs-quiet-l-emphasized-margin-right: -9px; + --spectrum-tabs-quiet-l-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-margin-left: -9px; + --spectrum-tabs-quiet-l-margin-right: -9px; + --spectrum-tabs-quiet-l-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-l-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-compact-emphasized-margin-left: -10px; + --spectrum-tabs-quiet-xl-compact-emphasized-margin-right: -10px; + --spectrum-tabs-quiet-xl-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-compact-margin-left: -10px; + --spectrum-tabs-quiet-xl-compact-margin-right: -10px; + --spectrum-tabs-quiet-xl-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-emphasized-margin-left: -10px; + --spectrum-tabs-quiet-xl-emphasized-margin-right: -10px; + --spectrum-tabs-quiet-xl-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-margin-left: -10px; + --spectrum-tabs-quiet-xl-margin-right: -10px; + --spectrum-tabs-quiet-xl-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-quiet-xl-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-s-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-s-compact-emphasized-margin-left: -7px; + --spectrum-tabs-s-compact-emphasized-margin-right: -7px; + --spectrum-tabs-s-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-s-compact-margin-left: -7px; + --spectrum-tabs-s-compact-margin-right: -7px; + --spectrum-tabs-s-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-s-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-s-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-s-emphasized-margin-left: -7px; + --spectrum-tabs-s-emphasized-margin-right: -7px; + --spectrum-tabs-s-focus-ring-border-radius: 5px; + --spectrum-tabs-s-margin-left: -7px; + --spectrum-tabs-s-margin-right: -7px; + --spectrum-tabs-s-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-s-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-m-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-m-compact-emphasized-margin-left: -8px; + --spectrum-tabs-m-compact-emphasized-margin-right: -8px; + --spectrum-tabs-m-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-m-compact-margin-left: -8px; + --spectrum-tabs-m-compact-margin-right: -8px; + --spectrum-tabs-m-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-m-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-m-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-m-emphasized-margin-left: -8px; + --spectrum-tabs-m-emphasized-margin-right: -8px; + --spectrum-tabs-m-focus-ring-border-radius: 5px; + --spectrum-tabs-m-margin-left: -8px; + --spectrum-tabs-m-margin-right: -8px; + --spectrum-tabs-m-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-m-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-l-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-l-compact-emphasized-margin-left: -9px; + --spectrum-tabs-l-compact-emphasized-margin-right: -9px; + --spectrum-tabs-l-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-l-compact-margin-left: -9px; + --spectrum-tabs-l-compact-margin-right: -9px; + --spectrum-tabs-l-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-l-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-l-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-l-emphasized-margin-left: -9px; + --spectrum-tabs-l-emphasized-margin-right: -9px; + --spectrum-tabs-l-focus-ring-border-radius: 5px; + --spectrum-tabs-l-margin-left: -9px; + --spectrum-tabs-l-margin-right: -9px; + --spectrum-tabs-l-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-l-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-compact-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-compact-emphasized-margin-left: -10px; + --spectrum-tabs-xl-compact-emphasized-margin-right: -10px; + --spectrum-tabs-xl-compact-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-compact-margin-left: -10px; + --spectrum-tabs-xl-compact-margin-right: -10px; + --spectrum-tabs-xl-compact-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-compact-vertical-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-emphasized-margin-left: -10px; + --spectrum-tabs-xl-emphasized-margin-right: -10px; + --spectrum-tabs-xl-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-margin-left: -10px; + --spectrum-tabs-xl-margin-right: -10px; + --spectrum-tabs-xl-vertical-emphasized-focus-ring-border-radius: 5px; + --spectrum-tabs-xl-vertical-focus-ring-border-radius: 5px; + --spectrum-textarea-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textarea-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-l-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-l-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-m-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-m-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-s-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-s-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-xl-touch-hit-x: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-textfield-quiet-xl-touch-hit-y: var( + --spectrum-global-dimension-static-size-100 ); - --spectrum-tabs-vertical-focus-ring-border-radius: 5px; - --spectrum-textarea-touch-hit-x: var( + --spectrum-textfield-l-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textarea-touch-hit-y: var( + --spectrum-textfield-l-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textarea-quiet-touch-hit-x: var( + --spectrum-textfield-m-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textarea-quiet-touch-hit-y: var( + --spectrum-textfield-m-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-touch-hit-x: var( + --spectrum-textfield-s-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-touch-hit-y: var( + --spectrum-textfield-s-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-quiet-touch-hit-x: var( + --spectrum-textfield-xl-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-quiet-touch-hit-y: var( + --spectrum-textfield-xl-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); --spectrum-tooltip-info-padding-bottom: 5px; diff --git a/packages/styles/theme-dark.css b/packages/styles/theme-dark.css index e9fc324352..41e526a9c2 100644 --- a/packages/styles/theme-dark.css +++ b/packages/styles/theme-dark.css @@ -92,6 +92,9 @@ governing permissions and limitations under the License. --spectrum-alias-highlight-selected-hover: rgba(55, 142, 240, 0.25); --spectrum-alias-text-highlight-color: rgba(55, 142, 240, 0.25); --spectrum-alias-background-color-quickactions: rgba(50, 50, 50, 0.9); + --spectrum-alias-border-color-selected: var( + --spectrum-global-color-blue-600 + ); --spectrum-alias-radial-reaction-color-default: hsla(0, 0%, 89%, 0.6); --spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-50 @@ -102,6 +105,12 @@ governing permissions and limitations under the License. --spectrum-alias-appframe-separator-color: var( --spectrum-global-color-gray-50 ); + --spectrum-divider-s-background-color: colorStopData.dark.colorTokens.gray-300; + --spectrum-divider-s-vertical-background-color: colorStopData.dark.colorTokens.gray-300; + --spectrum-divider-m-background-color: colorStopData.dark.colorTokens.gray-300; + --spectrum-divider-m-vertical-background-color: colorStopData.dark.colorTokens.gray-300; + --spectrum-divider-l-background-color: colorStopData.dark.colorTokens.gray-800; + --spectrum-divider-l-vertical-background-color: colorStopData.dark.colorTokens.gray-800; --spectrum-miller-column-item-background-color-selected: rgba( 55, 142, @@ -114,33 +123,10 @@ governing permissions and limitations under the License. 240, 0.2 ); - --spectrum-tabs-compact-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-emphasized-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); + --spectrum-panel-l-divider-color: colorStopData.dark.colorAliases.appframe-border-color; + --spectrum-panel-l-collapsible-divider-color: colorStopData.dark.colorAliases.appframe-border-color; + --spectrum-panel-s-divider-color: colorStopData.dark.colorAliases.appframe-border-color; + --spectrum-panel-s-collapsible-divider-color: colorStopData.dark.colorAliases.appframe-border-color; --spectrum-well-background-color: hsla(0, 0%, 89%, 0.02); --spectrum-colorarea-border-color: hsla(0, 0%, 100%, 0.1); --spectrum-colorarea-border-color-hover: hsla(0, 0%, 100%, 0.1); diff --git a/packages/styles/theme-darkest.css b/packages/styles/theme-darkest.css index 29570df7ff..b7c528604a 100644 --- a/packages/styles/theme-darkest.css +++ b/packages/styles/theme-darkest.css @@ -92,6 +92,9 @@ governing permissions and limitations under the License. --spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.3); --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.3); --spectrum-alias-background-color-quickactions: rgba(30, 30, 30, 0.9); + --spectrum-alias-border-color-selected: var( + --spectrum-global-color-blue-600 + ); --spectrum-alias-radial-reaction-color-default: hsla(0, 0%, 78.4%, 0.6); --spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-50 @@ -123,6 +126,12 @@ governing permissions and limitations under the License. --spectrum-colorwheel-border-color-hover: hsla(0, 0%, 93.7%, 0.1); --spectrum-colorwheel-border-color-down: hsla(0, 0%, 93.7%, 0.1); --spectrum-colorwheel-border-color-key-focus: hsla(0, 0%, 93.7%, 0.1); + --spectrum-divider-s-background-color: colorStopData.darkest.colorTokens.gray-300; + --spectrum-divider-s-vertical-background-color: colorStopData.darkest.colorTokens.gray-300; + --spectrum-divider-m-background-color: colorStopData.darkest.colorTokens.gray-300; + --spectrum-divider-m-vertical-background-color: colorStopData.darkest.colorTokens.gray-300; + --spectrum-divider-l-background-color: colorStopData.darkest.colorTokens.gray-800; + --spectrum-divider-l-vertical-background-color: colorStopData.darkest.colorTokens.gray-800; --spectrum-miller-column-item-background-color-selected: rgba( 38, 128, @@ -135,33 +144,10 @@ governing permissions and limitations under the License. 235, 0.2 ); - --spectrum-tabs-compact-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-emphasized-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); + --spectrum-panel-l-divider-color: colorStopData.darkest.colorAliases.appframe-border-color; + --spectrum-panel-l-collapsible-divider-color: colorStopData.darkest.colorAliases.appframe-border-color; + --spectrum-panel-s-divider-color: colorStopData.darkest.colorAliases.appframe-border-color; + --spectrum-panel-s-collapsible-divider-color: colorStopData.darkest.colorAliases.appframe-border-color; --spectrum-well-background-color: hsla(0, 0%, 78.4%, 0.02); --spectrum-well-border-color: hsla(0, 0%, 93.7%, 0.05); } diff --git a/packages/styles/theme-light.css b/packages/styles/theme-light.css index b9c77d1ead..53bce376ff 100644 --- a/packages/styles/theme-light.css +++ b/packages/styles/theme-light.css @@ -92,6 +92,9 @@ governing permissions and limitations under the License. --spectrum-alias-highlight-selected-hover: rgba(20, 115, 230, 0.2); --spectrum-alias-text-highlight-color: rgba(20, 115, 230, 0.2); --spectrum-alias-background-color-quickactions: hsla(0, 0%, 96.1%, 0.9); + --spectrum-alias-border-color-selected: var( + --spectrum-global-color-blue-500 + ); --spectrum-alias-radial-reaction-color-default: rgba(75, 75, 75, 0.6); --spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-300 @@ -123,6 +126,12 @@ governing permissions and limitations under the License. --spectrum-colorwheel-border-color-hover: rgba(44, 44, 44, 0.1); --spectrum-colorwheel-border-color-down: rgba(44, 44, 44, 0.1); --spectrum-colorwheel-border-color-key-focus: rgba(44, 44, 44, 0.1); + --spectrum-divider-s-background-color: colorStopData.light.colorTokens.gray-300; + --spectrum-divider-s-vertical-background-color: colorStopData.light.colorTokens.gray-300; + --spectrum-divider-m-background-color: colorStopData.light.colorTokens.gray-300; + --spectrum-divider-m-vertical-background-color: colorStopData.light.colorTokens.gray-300; + --spectrum-divider-l-background-color: colorStopData.light.colorTokens.gray-800; + --spectrum-divider-l-vertical-background-color: colorStopData.light.colorTokens.gray-800; --spectrum-miller-column-item-background-color-selected: rgba( 20, 115, @@ -135,33 +144,10 @@ governing permissions and limitations under the License. 230, 0.2 ); - --spectrum-tabs-compact-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-emphasized-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); + --spectrum-panel-l-divider-color: colorStopData.light.colorAliases.appframe-border-color; + --spectrum-panel-l-collapsible-divider-color: colorStopData.light.colorAliases.appframe-border-color; + --spectrum-panel-s-divider-color: colorStopData.light.colorAliases.appframe-border-color; + --spectrum-panel-s-collapsible-divider-color: colorStopData.light.colorAliases.appframe-border-color; --spectrum-well-background-color: rgba(75, 75, 75, 0.02); --spectrum-well-border-color: rgba(44, 44, 44, 0.05); } diff --git a/packages/styles/theme-lightest.css b/packages/styles/theme-lightest.css index f77f3e50f2..6594341b74 100644 --- a/packages/styles/theme-lightest.css +++ b/packages/styles/theme-lightest.css @@ -92,6 +92,9 @@ governing permissions and limitations under the License. --spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.2); --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.2); --spectrum-alias-background-color-quickactions: hsla(0, 0%, 100%, 0.9); + --spectrum-alias-border-color-selected: var( + --spectrum-global-color-blue-500 + ); --spectrum-alias-radial-reaction-color-default: rgba(80, 80, 80, 0.6); --spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-300 @@ -102,33 +105,6 @@ governing permissions and limitations under the License. --spectrum-alias-appframe-separator-color: var( --spectrum-global-color-gray-300 ); - --spectrum-tabs-compact-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-compact-vertical-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-compact-vertical-emphasized-rule-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); - --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( - --spectrum-global-color-blue-500 - ); --spectrum-colorarea-border-color: rgba(50, 50, 50, 0.1); --spectrum-colorarea-border-color-hover: rgba(50, 50, 50, 0.1); --spectrum-colorarea-border-color-down: rgba(50, 50, 50, 0.1); @@ -150,6 +126,12 @@ governing permissions and limitations under the License. --spectrum-colorwheel-border-color-hover: rgba(50, 50, 50, 0.1); --spectrum-colorwheel-border-color-down: rgba(50, 50, 50, 0.1); --spectrum-colorwheel-border-color-key-focus: rgba(50, 50, 50, 0.1); + --spectrum-divider-s-background-color: colorStopData.lightest.colorTokens.gray-300; + --spectrum-divider-s-vertical-background-color: colorStopData.lightest.colorTokens.gray-300; + --spectrum-divider-m-background-color: colorStopData.lightest.colorTokens.gray-300; + --spectrum-divider-m-vertical-background-color: colorStopData.lightest.colorTokens.gray-300; + --spectrum-divider-l-background-color: colorStopData.lightest.colorTokens.gray-800; + --spectrum-divider-l-vertical-background-color: colorStopData.lightest.colorTokens.gray-800; --spectrum-miller-column-item-background-color-selected: rgba( 38, 128, @@ -162,6 +144,10 @@ governing permissions and limitations under the License. 235, 0.2 ); + --spectrum-panel-l-divider-color: colorStopData.lightest.colorAliases.appframe-border-color; + --spectrum-panel-l-collapsible-divider-color: colorStopData.lightest.colorAliases.appframe-border-color; + --spectrum-panel-s-divider-color: colorStopData.lightest.colorAliases.appframe-border-color; + --spectrum-panel-s-collapsible-divider-color: colorStopData.lightest.colorAliases.appframe-border-color; --spectrum-well-background-color: rgba(80, 80, 80, 0.02); --spectrum-well-border-color: rgba(50, 50, 50, 0.05); } diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index c5c1bd6690..5f9e2a7880 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -10,33 +10,55 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + /* .spectrum-Switch */ + --spectrum-switch-handle-border-radius: 7px; + --spectrum-switch-handle-border-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-switch-cursor-hit-x: 8px; + --spectrum-switch-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-switch-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-switch-track-height: var( + --spectrum-alias-item-control-3-height-m, + var(--spectrum-global-dimension-size-175) + ); + --spectrum-switch-track-width: var( + --spectrum-global-dimension-static-size-325, + 26px + ); + --spectrum-switch-handle-size: var( + --spectrum-alias-item-control-2-size-m, + var(--spectrum-global-dimension-size-175) + ); + --spectrum-switch-text-gap: var( + --spectrum-alias-item-control-gap-m, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-switch-label-margin-top: 5px; + --spectrum-switch-label-line-height: 1.49; +} :host([dir='ltr']) { /* [dir=ltr] .spectrum-Switch */ - margin-right: calc( - var( - --spectrum-switch-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); + margin-right: calc(var(--spectrum-switch-cursor-hit-x) * 2); } :host([dir='rtl']) { /* [dir=rtl] .spectrum-Switch */ - margin-left: calc( - var( - --spectrum-switch-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); + margin-left: calc(var(--spectrum-switch-cursor-hit-x) * 2); } :host { /* .spectrum-Switch */ display: inline-flex; align-items: flex-start; position: relative; - min-height: var( - --spectrum-switch-height, - var(--spectrum-global-dimension-size-400) - ); + min-height: var(--spectrum-switch-height); max-width: 100%; vertical-align: top; } @@ -64,21 +86,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][checked]) #input + #switch:before { /* [dir=ltr] .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */ transform: translateX( - calc( - 100% - - var( - --spectrum-switch-handle-border-size, - var(--spectrum-alias-border-size-thick) - ) - ) + calc(100% - var(--spectrum-switch-handle-border-size)) ); } :host([dir='rtl'][checked]) #input + #switch:before { /* [dir=rtl] .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */ transform: translateX( - calc( - -100% + var(--spectrum-switch-handle-border-size, var(--spectrum-alias-border-size-thick)) - ) + calc(-100% + var(--spectrum-switch-handle-border-size)) ); } :host([disabled]) #input, @@ -98,21 +112,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #label { /* .spectrum-Switch-label */ - margin-left: var( - --spectrum-switch-text-gap, - var(--spectrum-global-dimension-size-125) - ); - margin-right: var( - --spectrum-switch-text-gap, - var(--spectrum-global-dimension-size-125) - ); - margin-top: var(--spectrum-global-dimension-size-65); + margin-left: var(--spectrum-switch-text-gap); + margin-right: var(--spectrum-switch-text-gap); + margin-top: var(--spectrum-switch-label-margin-top); margin-bottom: 0; - font-size: var( - --spectrum-switch-text-size, - var(--spectrum-alias-font-size-default) - ); - line-height: 1.49; + font-size: var(--spectrum-switch-text-size); + line-height: var(--spectrum-switch-label-line-height); transition: color var(--spectrum-global-animation-duration-200, 0.16s) ease-in-out; } @@ -137,28 +142,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: relative; width: var(--spectrum-switch-track-width); margin-top: calc( - ( - var( - --spectrum-switch-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-switch-track-height, - var(--spectrum-global-dimension-size-175) - ) - ) / 2 + (var(--spectrum-switch-height) - var(--spectrum-switch-track-height)) / + 2 ); margin-bottom: calc( - ( - var( - --spectrum-switch-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-switch-track-height, - var(--spectrum-global-dimension-size-175) - ) - ) / 2 + (var(--spectrum-switch-height) - var(--spectrum-switch-track-height)) / + 2 ); margin-left: 0; margin-right: 0; @@ -168,16 +157,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transition: background var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; - height: var( - --spectrum-switch-track-height, - var(--spectrum-global-dimension-size-175) - ); - border-radius: calc( - var( - --spectrum-switch-track-height, - var(--spectrum-global-dimension-size-175) - ) / 2 - ); + height: var(--spectrum-switch-track-height); + border-radius: calc(var(--spectrum-switch-track-height) / 2); } #switch:before { /* .spectrum-Switch-switch:before */ @@ -203,19 +184,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; - width: var( - --spectrum-switch-handle-size, - var(--spectrum-global-dimension-size-175) - ); - height: var( - --spectrum-switch-handle-size, - var(--spectrum-global-dimension-size-175) - ); + width: var(--spectrum-switch-handle-size); + height: var(--spectrum-switch-handle-size); top: 0; - border-width: var( - --spectrum-switch-handle-border-size, - var(--spectrum-alias-border-size-thick) - ); + border-width: var(--spectrum-switch-handle-border-size); border-radius: var(--spectrum-switch-handle-border-radius); border-style: solid; } @@ -236,10 +208,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #switch:after { /* .spectrum-Switch-switch:after */ border-radius: calc( - var( - --spectrum-switch-track-height, - var(--spectrum-global-dimension-size-175) - ) + + var(--spectrum-switch-track-height) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) @@ -257,180 +226,118 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #switch { /* .spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color, - var(--spectrum-global-color-gray-300) - ); + background-color: var(--spectrum-global-color-gray-300); } #switch:before { /* .spectrum-Switch-switch:before */ - background-color: var( - --spectrum-switch-handle-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-switch-handle-border-color, - var(--spectrum-global-color-gray-600) - ); + background-color: var(--spectrum-global-color-gray-75); + border-color: var(--spectrum-global-color-gray-600); } #input ~ #label { /* .spectrum-Switch-input~.spectrum-Switch-label */ - color: var(--spectrum-switch-text-color, var(--spectrum-alias-text-color)); + color: var( + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) + ); } :host([checked]) #input + #switch { /* .spectrum-Switch-input:checked+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-selected, - var(--spectrum-global-color-gray-700) - ); + background-color: var(--spectrum-global-color-gray-700); } :host([checked]) #input + #switch:before { /* .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-selected, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } :host(:hover) #input + #switch:before { /* .spectrum-Switch:hover .spectrum-Switch-input+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-hover, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); box-shadow: none; } :host(:hover) #input ~ #label { /* .spectrum-Switch:hover .spectrum-Switch-input~.spectrum-Switch-label */ color: var( - --spectrum-switch-text-color-hover, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host(:hover[checked]) #input:enabled + #switch { /* .spectrum-Switch:hover .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-selected-hover, - var(--spectrum-global-color-gray-800) - ); + background-color: var(--spectrum-global-color-gray-800); } +:host(:active) #input + #switch:before, :host(:hover[checked]) #input:enabled + #switch:before { - /* .spectrum-Switch:hover .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-selected-hover, - var(--spectrum-global-color-gray-800) - ); -} -:host(:active) #input + #switch:before { - /* .spectrum-Switch:active .spectrum-Switch-input+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-down, - var(--spectrum-global-color-gray-800) - ); + /* .spectrum-Switch:active .spectrum-Switch-input+.spectrum-Switch-switch:before, + * .spectrum-Switch:hover .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch:before */ + border-color: var(--spectrum-global-color-gray-800); } :host(:active) #input ~ #label { /* .spectrum-Switch:active .spectrum-Switch-input~.spectrum-Switch-label */ color: var( - --spectrum-switch-text-color-down, - var(--spectrum-alias-text-color-down) + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) ); } :host(:active[checked]) #input:enabled + #switch { /* .spectrum-Switch:active .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-selected-down, - var(--spectrum-global-color-gray-900) - ); + background-color: var(--spectrum-global-color-gray-900); } :host(:active[checked]) #input:enabled + #switch:before { /* .spectrum-Switch:active .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-selected-down, - var(--spectrum-global-color-gray-900) - ); + border-color: var(--spectrum-global-color-gray-900); } :host([disabled]) #input + #switch { /* .spectrum-Switch .spectrum-Switch-input:disabled+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-disabled, - var(--spectrum-global-color-gray-300) - ); + background-color: var(--spectrum-global-color-gray-300); } :host([disabled]) #input + #switch:before { /* .spectrum-Switch .spectrum-Switch-input:disabled+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-global-color-gray-400); } :host([disabled]) #input ~ #label { /* .spectrum-Switch .spectrum-Switch-input:disabled~.spectrum-Switch-label */ color: var( - --spectrum-switch-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([disabled][checked]) #input + #switch { /* .spectrum-Switch .spectrum-Switch-input:disabled:checked+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-selected-disabled, - var(--spectrum-global-color-gray-400) - ); + background-color: var(--spectrum-global-color-gray-400); } :host([disabled][checked]) #input + #switch:before { /* .spectrum-Switch .spectrum-Switch-input:disabled:checked+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-selected-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-global-color-gray-400); } :host([disabled][checked]) #input ~ #label { /* .spectrum-Switch .spectrum-Switch-input:disabled:checked~.spectrum-Switch-label */ color: var( - --spectrum-switch-text-color-selected-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([emphasized][checked]) #input + #switch { /* .spectrum-Switch--emphasized .spectrum-Switch-input:checked+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-emphasized-track-color-selected, - var(--spectrum-global-color-blue-500) - ); + background-color: var(--spectrum-global-color-blue-500); } :host([emphasized][checked]) #input + #switch:before { /* .spectrum-Switch--emphasized .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-emphasized-handle-border-color-selected, - var(--spectrum-global-color-blue-500) - ); + border-color: var(--spectrum-global-color-blue-500); } :host([emphasized][checked]:hover) #input:enabled + #switch { /* .spectrum-Switch--emphasized:hover .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-emphasized-track-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + background-color: var(--spectrum-global-color-blue-600); } :host([emphasized][checked]:hover) #input:enabled + #switch:before { /* .spectrum-Switch--emphasized:hover .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-emphasized-handle-border-color-selected-hover, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-blue-600); } :host([emphasized]:active[checked]) #input:enabled + #switch { /* .spectrum-Switch.spectrum-Switch--emphasized:active .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-emphasized-track-color-selected-down, - var(--spectrum-global-color-blue-700) - ); + background-color: var(--spectrum-global-color-blue-700); } :host([emphasized]:active[checked]) #input:enabled + #switch:before { /* .spectrum-Switch.spectrum-Switch--emphasized:active .spectrum-Switch-input:checked:enabled+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-emphasized-handle-border-color-selected-down, - var(--spectrum-global-color-blue-700) - ); + border-color: var(--spectrum-global-color-blue-700); } #input:focus-visible + #switch:after, :host(:hover) #input:focus-visible + #switch:after { @@ -438,56 +345,41 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Switch:hover .spectrum-Switch-input.focus-ring+.spectrum-Switch-switch:after */ box-shadow: 0 0 0 var( - --spectrum-switch-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-switch-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + --spectrum-alias-focus-ring-color, + var(--spectrum-alias-focus-color) ); } #input:focus-visible + #switch:before, :host(:hover) #input:focus-visible + #switch:before { /* .spectrum-Switch .spectrum-Switch-input.focus-ring+.spectrum-Switch-switch:before, * .spectrum-Switch:hover .spectrum-Switch-input.focus-ring+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-key-focus, - var(--spectrum-global-color-gray-700) - ); + border-color: var(--spectrum-global-color-gray-700); } :host([checked]) #input:focus-visible + #switch, :host(:hover[checked]) #input:focus-visible + #switch { /* .spectrum-Switch .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch, * .spectrum-Switch:hover .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color-selected-key-focus, - var(--spectrum-global-color-gray-800) - ); + background-color: var(--spectrum-global-color-gray-800); } :host([checked]) #input:focus-visible + #switch:before, :host(:hover[checked]) #input:focus-visible + #switch:before { /* .spectrum-Switch .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch:before, * .spectrum-Switch:hover .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-handle-border-color-selected-key-focus, - var(--spectrum-global-color-gray-800) - ); + border-color: var(--spectrum-global-color-gray-800); } :host([emphasized][checked]) #input:focus-visible + #switch, :host([emphasized][checked]:hover) #input:focus-visible + #switch { /* .spectrum-Switch--emphasized .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch, * .spectrum-Switch--emphasized:hover .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-emphasized-track-color-selected-key-focus, - var(--spectrum-global-color-blue-600) - ); + background-color: var(--spectrum-global-color-blue-600); } :host([emphasized][checked]) #input:focus-visible + #switch:before, :host([emphasized][checked]:hover) #input:focus-visible + #switch:before { /* .spectrum-Switch--emphasized .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch:before, * .spectrum-Switch--emphasized:hover .spectrum-Switch-input.focus-ring:checked+.spectrum-Switch-switch:before */ - border-color: var( - --spectrum-switch-emphasized-handle-border-color-selected-key-focus, - var(--spectrum-global-color-blue-600) - ); + border-color: var(--spectrum-global-color-blue-600); } diff --git a/packages/tabs/src/spectrum-tab.css b/packages/tabs/src/spectrum-tab.css index ab069d15a0..f1add4a9a7 100644 --- a/packages/tabs/src/spectrum-tab.css +++ b/packages/tabs/src/spectrum-tab.css @@ -14,19 +14,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tabs-item */ position: relative; box-sizing: border-box; - height: calc( - var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) - ); + height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size)); line-height: calc( - var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) + var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size) ); z-index: 1; text-decoration: none; @@ -44,47 +34,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } ::slotted([slot='icon']) { /* .spectrum-Tabs-item .spectrum-Icon */ - height: calc( - var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) - ); + height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size)); } :host([dir='ltr']) slot[name='icon'] + #itemLabel { /* [dir=ltr] .spectrum-Tabs-item .spectrum-Icon+.spectrum-Tabs-itemLabel */ - margin-left: calc( - var(--spectrum-tabs-icon-gap, var(--spectrum-global-dimension-size-100)) - - var(--spectrum-global-dimension-size-40) - ); + margin-left: calc(var(--spectrum-tabs-icon-gap) - 3px); } :host([dir='rtl']) slot[name='icon'] + #itemLabel { /* [dir=rtl] .spectrum-Tabs-item .spectrum-Icon+.spectrum-Tabs-itemLabel */ - margin-right: calc( - var(--spectrum-tabs-icon-gap, var(--spectrum-global-dimension-size-100)) - - var(--spectrum-global-dimension-size-40) - ); + margin-right: calc(var(--spectrum-tabs-icon-gap) - 3px); } :host([dir='ltr']):before { /* [dir=ltr] .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host([dir='ltr']):before, :host([dir='rtl']):before { /* [dir=ltr] .spectrum-Tabs-item:before, * [dir=rtl] .spectrum-Tabs-item:before */ - right: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + right: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host([dir='rtl']):before { /* [dir=rtl] .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host:before { /* .spectrum-Tabs-item:before */ @@ -92,25 +64,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: absolute; top: 50%; box-sizing: border-box; - height: var( - --spectrum-tabs-focus-ring-height, - var(--spectrum-alias-single-line-height) - ); + height: var(--spectrum-tabs-focus-ring-height); margin-top: calc( - var( - --spectrum-tabs-focus-ring-height, - var(--spectrum-alias-single-line-height) - ) / -2 + - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) / 2 + var(--spectrum-tabs-focus-ring-height) / -2 + + var(--spectrum-tabs-rule-size) / 2 ); - border: var( - --spectrum-tabs-focus-ring-size, - var(--spectrum-alias-border-size-thick) - ) - solid transparent; + border: var(--spectrum-tabs-focus-ring-size) solid transparent; border-radius: var(--spectrum-tabs-focus-ring-border-radius); pointer-events: none; } @@ -120,13 +79,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ vertical-align: top; display: inline-block; font-size: var( - --spectrum-tabs-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-tabs-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-alias-font-size-default, + var(--spectrum-global-dimension-font-size-100) ); + font-weight: var(--spectrum-tabs-text-font-weight); text-decoration: none; } #itemLabel:empty { @@ -136,74 +92,69 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Tabs-item */ color: var( - --spectrum-tabs-text-color, - var(--spectrum-alias-label-text-color) + --spectrum-alias-label-text-color, + var(--spectrum-global-color-gray-700) ); } ::slotted([slot='icon']) { /* .spectrum-Tabs-item .spectrum-Icon */ - color: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color)); + color: var( + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) + ); } :host(:hover) { /* .spectrum-Tabs-item:hover */ color: var( - --spectrum-tabs-text-color-hover, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host(:hover) ::slotted([slot='icon']) { /* .spectrum-Tabs-item:hover .spectrum-Icon */ color: var( - --spectrum-tabs-icon-color-hover, - var(--spectrum-alias-icon-color-hover) - ); -} -:host([selected]) { - /* .spectrum-Tabs-item.is-selected */ - color: var( - --spectrum-tabs-text-color-selected, + --spectrum-alias-icon-color-hover, var(--spectrum-global-color-gray-900) ); } +:host([selected]), :host([selected]) ::slotted([slot='icon']) { - /* .spectrum-Tabs-item.is-selected .spectrum-Icon */ - color: var( - --spectrum-tabs-icon-color-selected, - var(--spectrum-global-color-gray-900) - ); + /* .spectrum-Tabs-item.is-selected, + * .spectrum-Tabs-item.is-selected .spectrum-Icon */ + color: var(--spectrum-global-color-gray-900); } :host(:focus-visible) { /* .spectrum-Tabs-item.focus-ring */ color: var( - --spectrum-tabs-text-color-key-focus, - var(--spectrum-alias-text-color-hover) + --spectrum-alias-text-color-key-focus, + var(--spectrum-global-color-blue-600) ); } :host(:focus-visible):before { /* .spectrum-Tabs-item.focus-ring:before */ border-color: var( - --spectrum-tabs-focus-ring-color, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host(:focus-visible) ::slotted([slot='icon']) { /* .spectrum-Tabs-item.focus-ring .spectrum-Icon */ color: var( - --spectrum-tabs-icon-color-key-focus, - var(--spectrum-alias-icon-color-focus) + --spectrum-alias-icon-color-focus, + var(--spectrum-global-color-gray-900) ); } :host([disabled]) { /* .spectrum-Tabs-item.is-disabled */ color: var( - --spectrum-tabs-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([disabled]) ::slotted([slot='icon']) { /* .spectrum-Tabs-item.is-disabled .spectrum-Icon */ color: var( - --spectrum-tabs-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) ); } diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index 2a5ef66ffe..38c2762cc0 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -12,41 +12,77 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Tabs */ + --spectrum-tabs-focus-ring-border-radius: 5px; + --spectrum-tabs-compact-vertical-item-height: 32px; + --spectrum-tabs-compact-vertical-item-gap: 4px; + --spectrum-tabs-text-font-weight: var( + --spectrum-alias-body-text-font-weight, + var(--spectrum-global-font-weight-regular) + ); + --spectrum-tabs-rule-border-radius: var( + --spectrum-global-dimension-static-size-10, + 1px + ); + --spectrum-tabs-rule-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-tabs-focus-ring-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-tabs-height: 48px; + --spectrum-tabs-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-m, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-tabs-focus-ring-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-tabs-focus-ring-padding-x: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-tabs-item-gap: 24px; + --spectrum-tabs-selection-indicator-animation-duration: var( + --spectrum-global-animation-duration-100, + 130ms + ); + --spectrum-tabs-vertical-rule-size: var( + --spectrum-alias-border-size-thick, + var(--spectrum-global-dimension-static-size-25) + ); + --spectrum-tabs-vertical-item-height: 44px; + --spectrum-tabs-vertical-item-gap: 4px; + --spectrum-tabs-vertical-item-margin-left: 12px; + --spectrum-tabs-quiet-compact-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); display: flex; position: relative; z-index: 0; margin: 0; padding-top: 0; padding-bottom: 0; - padding-left: var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ); - padding-right: var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding-left: var(--spectrum-tabs-focus-ring-padding-x); + padding-right: var(--spectrum-tabs-focus-ring-padding-x); vertical-align: top; } :host([dir='ltr']) ::slotted(*):before { /* [dir=ltr] .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host([dir='ltr']) ::slotted(*):before, :host([dir='rtl']) ::slotted(*):before { /* [dir=ltr] .spectrum-Tabs-item:before, * [dir=rtl] .spectrum-Tabs-item:before */ - right: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + right: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host([dir='rtl']) ::slotted(*):before { /* [dir=rtl] .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); } :host([dir='ltr']) #selectionIndicator { /* [dir=ltr] .spectrum-Tabs-selectionIndicator */ @@ -61,52 +97,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: absolute; z-index: 0; transition: transform - var( - --spectrum-tabs-selection-indicator-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - ease-in-out; + var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out; transform-origin: top left; - border-radius: var( - --spectrum-tabs-rule-border-radius, - var(--spectrum-global-dimension-static-size-10) - ); + border-radius: var(--spectrum-tabs-rule-border-radius); } :host([compact]) ::slotted(*) { /* .spectrum-Tabs--compact .spectrum-Tabs-item */ line-height: calc( - var( - --spectrum-tabs-quiet-compact-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) + var(--spectrum-tabs-quiet-compact-height) - + var(--spectrum-tabs-rule-size) ); } :host([compact]) ::slotted(*) { /* .spectrum-Tabs--compact .spectrum-Tabs-item, * .spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon */ height: calc( - var( - --spectrum-tabs-quiet-compact-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) + var(--spectrum-tabs-quiet-compact-height) - + var(--spectrum-tabs-rule-size) ); } :host([direction='horizontal']) { /* .spectrum-Tabs--horizontal */ align-items: center; - border-bottom: var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) - solid; + border-bottom: var(--spectrum-tabs-rule-size) solid; } :host([direction='horizontal']) ::slotted(*) { /* .spectrum-Tabs--horizontal .spectrum-Tabs-item */ @@ -114,42 +127,25 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][direction='horizontal']) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-Tabs--horizontal .spectrum-Tabs-item+:not(.spectrum-Tabs-selectionIndicator) */ - margin-left: var( - --spectrum-tabs-item-gap, - var(--spectrum-global-dimension-size-300) - ); + margin-left: var(--spectrum-tabs-item-gap); } :host([dir='rtl'][direction='horizontal']) ::slotted(:not(:first-child)) { /* [dir=rtl] .spectrum-Tabs--horizontal .spectrum-Tabs-item+:not(.spectrum-Tabs-selectionIndicator) */ - margin-right: var( - --spectrum-tabs-item-gap, - var(--spectrum-global-dimension-size-300) - ); + margin-right: var(--spectrum-tabs-item-gap); } :host([direction='horizontal']) #selectionIndicator { /* .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator */ position: absolute; bottom: 0; - height: var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ); - bottom: calc( - -1 * var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) - ); + height: var(--spectrum-tabs-rule-size); + bottom: calc(-1 * var(--spectrum-tabs-rule-size)); } :host([direction='horizontal'][compact]) { /* .spectrum-Tabs--horizontal.spectrum-Tabs--compact */ box-sizing: initial; height: calc( - var( - --spectrum-tabs-quiet-compact-height, - var(--spectrum-global-dimension-size-400) - ) - - var( - --spectrum-tabs-rule-height, - var(--spectrum-alias-border-size-thick) - ) + var(--spectrum-tabs-quiet-compact-height) - + var(--spectrum-tabs-rule-size) ); align-items: end; } @@ -159,19 +155,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][direction='vertical']) { /* [dir=ltr] .spectrum-Tabs--vertical */ - border-left: var( - --spectrum-tabs-vertical-rule-width, - var(--spectrum-alias-border-size-thick) - ) - solid; + border-left: var(--spectrum-tabs-vertical-rule-size) solid; } :host([dir='rtl'][direction='vertical']) { /* [dir=rtl] .spectrum-Tabs--vertical */ - border-right: var( - --spectrum-tabs-vertical-rule-width, - var(--spectrum-alias-border-size-thick) - ) - solid; + border-right: var(--spectrum-tabs-vertical-rule-size) solid; } :host([direction='vertical']) { /* .spectrum-Tabs--vertical */ @@ -182,97 +170,49 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][direction='vertical']) ::slotted(*) { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-item */ margin-left: calc( - var( - --spectrum-tabs-vertical-item-margin-left, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ) + var(--spectrum-tabs-vertical-item-margin-left) - + var(--spectrum-tabs-focus-ring-padding-x) ); } :host([dir='rtl'][direction='vertical']) ::slotted(*) { /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-item */ margin-right: calc( - var( - --spectrum-tabs-vertical-item-margin-left, - var(--spectrum-global-dimension-size-150) - ) - - var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ) + var(--spectrum-tabs-vertical-item-margin-left) - + var(--spectrum-tabs-focus-ring-padding-x) ); } :host([direction='vertical']) ::slotted(*) { /* .spectrum-Tabs--vertical .spectrum-Tabs-item */ - height: var( - --spectrum-tabs-vertical-item-height, - var(--spectrum-global-dimension-size-550) - ); + height: var(--spectrum-tabs-vertical-item-height); padding-top: 0; padding-bottom: 0; - padding-left: var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ); - padding-right: var( - --spectrum-tabs-focus-ring-padding-x, - var(--spectrum-global-dimension-size-100) - ); - margin-bottom: var( - --spectrum-tabs-vertical-item-gap, - var(--spectrum-global-dimension-size-50) - ); + padding-left: var(--spectrum-tabs-focus-ring-padding-x); + padding-right: var(--spectrum-tabs-focus-ring-padding-x); + margin-bottom: var(--spectrum-tabs-vertical-item-gap); } :host([dir='ltr'][direction='vertical']) ::slotted(*):before { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-size)); } :host([dir='ltr'][direction='vertical']) ::slotted(*):before, :host([dir='rtl'][direction='vertical']) ::slotted(*):before { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-item:before, * [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-item:before */ - right: calc( - -1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) - ); + right: calc(-1 * var(--spectrum-tabs-focus-ring-size)); } :host([dir='rtl'][direction='vertical']) ::slotted(*):before { /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-item:before */ - left: calc( - -1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) - ); + left: calc(-1 * var(--spectrum-tabs-focus-ring-size)); } :host([direction='vertical']) ::slotted(*):before { /* .spectrum-Tabs--vertical .spectrum-Tabs-item:before */ - margin-top: calc( - var( - --spectrum-tabs-focus-ring-height, - var(--spectrum-alias-single-line-height) - ) / -2 - ); + margin-top: calc(var(--spectrum-tabs-focus-ring-height) / -2); } :host([direction='vertical'][compact]) ::slotted(*) { /* .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item */ - line-height: var( - --spectrum-tabs-compact-vertical-item-height, - var(--spectrum-global-dimension-size-400) - ); - margin-bottom: var( - --spectrum-tabs-compact-vertical-item-gap, - var(--spectrum-global-dimension-size-50) - ); -} -:host([direction='vertical'][compact]) ::slotted(*) { - /* .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item, - * .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon */ - height: var( - --spectrum-tabs-compact-vertical-item-height, - var(--spectrum-global-dimension-size-400) - ); + height: var(--spectrum-tabs-compact-vertical-item-height); + line-height: var(--spectrum-tabs-compact-vertical-item-height); + margin-bottom: var(--spectrum-tabs-compact-vertical-item-gap); } :host([dir='ltr'][direction='vertical']) #selectionIndicator { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ @@ -284,73 +224,60 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][direction='vertical']) #selectionIndicator { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ - left: calc( - -1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) - ); + left: calc(-1 * var(--spectrum-tabs-vertical-rule-size)); } :host([dir='rtl'][direction='vertical']) #selectionIndicator { /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ - right: calc( - -1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) - ); + right: calc(-1 * var(--spectrum-tabs-vertical-rule-size)); } :host([direction='vertical']) #selectionIndicator { /* .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ position: absolute; - width: var( - --spectrum-tabs-vertical-rule-width, - var(--spectrum-alias-border-size-thick) - ); + width: var(--spectrum-tabs-vertical-rule-size); } :host { /* .spectrum-Tabs */ border-bottom-color: var( - --spectrum-tabs-rule-color, + --spectrum-alias-border-color-light, var(--spectrum-global-color-gray-200) ); } :host([dir='ltr'][direction='vertical']) { /* [dir=ltr] .spectrum-Tabs--vertical */ border-left-color: var( - --spectrum-tabs-vertical-rule-color, + --spectrum-alias-border-color-light, var(--spectrum-global-color-gray-200) ); } :host([dir='rtl'][direction='vertical']) { /* [dir=rtl] .spectrum-Tabs--vertical */ border-right-color: var( - --spectrum-tabs-vertical-rule-color, + --spectrum-alias-border-color-light, var(--spectrum-global-color-gray-200) ); } #selectionIndicator { /* .spectrum-Tabs-selectionIndicator */ - background-color: var( - --spectrum-tabs-selection-indicator-color, - var(--spectrum-global-color-gray-900) - ); + background-color: var(--spectrum-global-color-gray-900); } :host([quiet]) { /* .spectrum-Tabs--quiet */ border-bottom-color: var( - --spectrum-tabs-quiet-rule-color, - var(--spectrum-alias-border-color-transparent) + --spectrum-alias-border-color-transparent, + transparent ); } :host([quiet]) #selectionIndicator { /* .spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator */ - background-color: var( - --spectrum-tabs-quiet-selection-indicator-color, - var(--spectrum-global-color-gray-900) - ); + background-color: var(--spectrum-global-color-gray-900); } :host([dir='ltr'][direction='vertical'][compact]), :host([dir='ltr'][direction='vertical'][quiet]) { /* [dir=ltr] .spectrum-Tabs--vertical.spectrum-Tabs--compact, * [dir=ltr] .spectrum-Tabs--vertical.spectrum-Tabs--quiet */ border-left-color: var( - --spectrum-tabs-quiet-vertical-rule-color, - var(--spectrum-alias-border-color-transparent) + --spectrum-alias-border-color-transparent, + transparent ); } :host([dir='rtl'][direction='vertical'][compact]), @@ -358,16 +285,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Tabs--vertical.spectrum-Tabs--compact, * [dir=rtl] .spectrum-Tabs--vertical.spectrum-Tabs--quiet */ border-right-color: var( - --spectrum-tabs-quiet-vertical-rule-color, - var(--spectrum-alias-border-color-transparent) + --spectrum-alias-border-color-transparent, + transparent ); } :host([direction='vertical'][compact]) #selectionIndicator, :host([direction='vertical'][quiet]) #selectionIndicator { /* .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-selectionIndicator, * .spectrum-Tabs--vertical.spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator */ - background-color: var( - --spectrum-tabs-quiet-selection-indicator-color, - var(--spectrum-global-color-gray-900) - ); + background-color: var(--spectrum-global-color-gray-900); } diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 92b28b3c20..8296e1a273 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -10,48 +10,42 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-Tags-item */ + padding-left: calc( + var(--spectrum-tag-padding-left) - var(--spectrum-tag-border-size) + ); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-Tags-item */ + padding-right: calc( + var(--spectrum-tag-padding-left) - var(--spectrum-tag-border-size) + ); +} +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-Tags-item */ + padding-right: calc( + var(--spectrum-tag-padding-right) - var(--spectrum-tag-border-size) + ); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-Tags-item */ + padding-left: calc( + var(--spectrum-tag-padding-right) - var(--spectrum-tag-border-size) + ); +} :host { /* .spectrum-Tags-item */ display: inline-flex; align-items: center; box-sizing: border-box; - margin: calc( - var( - --spectrum-taggroup-tag-gap-y, - var(--spectrum-global-dimension-size-100) - ) / 2 - ) - calc( - var( - --spectrum-taggroup-tag-gap-x, - var(--spectrum-global-dimension-size-100) - ) / 2 - ); + margin: calc(var(--spectrum-taggroup-tag-gap-y) / 2) + calc(var(--spectrum-taggroup-tag-gap-x) / 2); padding-top: 0; padding-bottom: 0; - padding-left: calc( - var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - - var( - --spectrum-tag-border-size, - var(--spectrum-alias-border-size-thin) - ) - ); - padding-right: calc( - var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - - var( - --spectrum-tag-border-size, - var(--spectrum-alias-border-size-thin) - ) - ); - height: var( - --spectrum-tag-height, - var(--spectrum-global-dimension-size-300) - ); + height: var(--spectrum-tag-height); max-width: 100%; - border-width: var( - --spectrum-tag-border-size, - var(--spectrum-alias-border-size-thin) - ); + border-width: var(--spectrum-tag-border-size); border-style: solid; border-radius: var(--spectrum-global-dimension-size-50); outline: none; @@ -74,52 +68,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) > ::slotted([slot='icon']) { /* [dir=ltr] .spectrum-Tags-item>.spectrum-Avatar, * [dir=ltr] .spectrum-Tags-item>.spectrum-Icon */ - margin-right: var( - --spectrum-tag-icon-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-right: var(--spectrum-tag-icon-gap); } :host([dir='rtl']) > ::slotted([slot='avatar']), :host([dir='rtl']) > ::slotted([slot='icon']) { /* [dir=rtl] .spectrum-Tags-item>.spectrum-Avatar, * [dir=rtl] .spectrum-Tags-item>.spectrum-Icon */ - margin-left: var( - --spectrum-tag-icon-padding-x, - var(--spectrum-global-dimension-size-100) - ); + margin-left: var(--spectrum-tag-icon-gap); } :host([dir='ltr']) > ::slotted([slot='avatar']), :host([dir='ltr']) > ::slotted([slot='icon']) { /* [dir=ltr] .spectrum-Tags-item>.spectrum-Avatar, * [dir=ltr] .spectrum-Tags-item>.spectrum-Icon */ margin-left: calc( - var( - --spectrum-tag-avatar-padding-x, - var(--spectrum-global-dimension-size-100) - ) - - var( - --spectrum-tag-padding-x, - var(--spectrum-global-dimension-size-125) - ) + var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-left) ); } -:host([dir='ltr']) > slot[name='avatar'] ~ .label, -:host([dir='ltr']) > slot[name='icon'] ~ .label, :host([dir='rtl']) > ::slotted([slot='avatar']), :host([dir='rtl']) > ::slotted([slot='icon']) { - /* [dir=ltr] .spectrum-Tags-item>.spectrum-Avatar~.spectrum-Tags-itemLabel, - * [dir=ltr] .spectrum-Tags-item>.spectrum-Icon~.spectrum-Tags-itemLabel, - * [dir=rtl] .spectrum-Tags-item>.spectrum-Avatar, + /* [dir=rtl] .spectrum-Tags-item>.spectrum-Avatar, * [dir=rtl] .spectrum-Tags-item>.spectrum-Icon */ margin-right: calc( - var( - --spectrum-tag-avatar-padding-x, - var(--spectrum-global-dimension-size-100) - ) - - var( - --spectrum-tag-padding-x, - var(--spectrum-global-dimension-size-125) - ) + var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-left) + ); +} +:host([dir='ltr']) > slot[name='avatar'] ~ .label, +:host([dir='ltr']) > slot[name='icon'] ~ .label { + /* [dir=ltr] .spectrum-Tags-item>.spectrum-Avatar~.spectrum-Tags-itemLabel, + * [dir=ltr] .spectrum-Tags-item>.spectrum-Icon~.spectrum-Tags-itemLabel */ + margin-right: calc( + var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-right) ); } :host([dir='rtl']) > slot[name='avatar'] ~ .label, @@ -127,43 +105,25 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Tags-item>.spectrum-Avatar~.spectrum-Tags-itemLabel, * [dir=rtl] .spectrum-Tags-item>.spectrum-Icon~.spectrum-Tags-itemLabel */ margin-left: calc( - var( - --spectrum-tag-avatar-padding-x, - var(--spectrum-global-dimension-size-100) - ) - - var( - --spectrum-tag-padding-x, - var(--spectrum-global-dimension-size-125) - ) + var(--spectrum-tag-avatar-padding-x) - var(--spectrum-tag-padding-right) ); } :host([dir='ltr']) .clear-button { /* [dir=ltr] .spectrum-Tags-item .spectrum-ClearButton */ - margin-right: calc( - -1 * var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - ); + margin-right: calc(-1 * var(--spectrum-tag-padding-right)); } :host([dir='rtl']) .clear-button { /* [dir=rtl] .spectrum-Tags-item .spectrum-ClearButton */ - margin-left: calc( - -1 * var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - ); + margin-left: calc(-1 * var(--spectrum-tag-padding-right)); } .label { /* .spectrum-Tags-itemLabel */ height: 100%; line-height: calc( - var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) - - var( - --spectrum-tag-border-size, - var(--spectrum-alias-border-size-thin) - ) * 2 + var(--spectrum-tag-height) - var(--spectrum-tag-border-size) * 2 ); flex: 1 1 auto; - font-size: var( - --spectrum-tag-text-size, - var(--spectrum-global-dimension-font-size-75) - ); + font-size: var(--spectrum-tag-text-size); cursor: default; overflow: hidden; white-space: nowrap; @@ -172,60 +132,51 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Tags-item */ color: var( - --spectrum-tag-text-color, + --spectrum-alias-label-text-color, var(--spectrum-global-color-gray-700) ); - background-color: var( - --spectrum-tag-background-color, - var(--spectrum-global-color-gray-75) - ); + background-color: var(--spectrum-global-color-gray-75); border-color: var( - --spectrum-tag-border-color, + --spectrum-alias-border-color-darker-default, var(--spectrum-global-color-gray-600) ); } .clear-button { /* .spectrum-Tags-item .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color, - var(--spectrum-global-color-gray-600) + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) ); } :host(:hover) { /* .spectrum-Tags-item:hover */ - background-color: var( - --spectrum-tag-background-color-hover, - var(--spectrum-global-color-gray-75) - ); + background-color: var(--spectrum-global-color-gray-75); color: var( - --spectrum-tag-text-color-hover, + --spectrum-alias-text-color-hover, var(--spectrum-global-color-gray-900) ); border-color: var( - --spectrum-tag-border-color-hover, + --spectrum-alias-border-color-darker-hover, var(--spectrum-global-color-gray-900) ); } :host(:hover) .clear-button { /* .spectrum-Tags-item:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-hover, + --spectrum-alias-icon-color-hover, var(--spectrum-global-color-gray-900) ); } :host(:focus-visible) { /* .spectrum-Tags-item.focus-ring */ - background-color: var( - --spectrum-tag-background-color-key-focus, - var(--spectrum-global-color-gray-75) - ); + background-color: var(--spectrum-global-color-gray-75); color: var( - --spectrum-tag-text-color-key-focus, + --spectrum-alias-text-color-hover, var(--spectrum-global-color-gray-900) ); border-color: var( - --spectrum-tag-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 0 0 var( @@ -233,45 +184,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-tag-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host(:focus-visible) .clear-button { /* .spectrum-Tags-item.focus-ring .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-key-focus, + --spectrum-alias-icon-color-focus, var(--spectrum-global-color-gray-900) ); } :host([selected]) { /* .spectrum-Tags-item.is-selected */ - background-color: var( - --spectrum-tag-background-color-selected, - var(--spectrum-global-color-gray-700) - ); + background-color: var(--spectrum-global-color-gray-700); color: var( - --spectrum-tag-text-color-selected, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-tag-border-color-selected, - var(--spectrum-alias-border-color-transparent) + --spectrum-alias-text-color-over-background, + var(--spectrum-global-color-static-white) ); + border-color: var(--spectrum-global-color-gray-700); } :host([selected]) .itemIcon { /* .spectrum-Tags-item.is-selected .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-selected, - var(--spectrum-global-color-gray-50) + --spectrum-alias-icon-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([selected]:hover) { /* .spectrum-Tags-item.is-selected:hover */ - background-color: var( - --spectrum-tag-background-color-selected-hover, - var(--spectrum-global-color-gray-800) - ); + background-color: var(--spectrum-global-color-gray-800); } :host([selected]:focus-visible) { /* .spectrum-Tags-item.is-selected.focus-ring */ @@ -280,24 +222,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25) ) - var( - --spectrum-tag-border-color-selected-key-focus, - var(--spectrum-alias-border-color-focus) - ); + var(--spectrum-global-color-gray-800); border-color: var( - --spectrum-tag-text-color-selected-key-focus, - var(--spectrum-global-color-gray-50) + --spectrum-alias-text-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([selected][invalid]) { /* .spectrum-Tags-item.is-selected.is-invalid */ border-color: var( - --spectrum-tag-border-color-error-selected, - var(--spectrum-alias-border-color-transparent) + --spectrum-semantic-negative-background-color-default, + var(--spectrum-global-color-static-red-600) ); background-color: var( - --spectrum-tag-background-color-error-selected, - var(--spectrum-global-color-gray-700) + --spectrum-semantic-negative-background-color-default, + var(--spectrum-global-color-static-red-600) ); } :host([selected][invalid]) .spectrum-Tags-itemClearButton, @@ -307,8 +246,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Tags-item.is-selected.is-invalid .spectrum-Tags-itemIcon, * .spectrum-Tags-item.is-selected.is-invalid .spectrum-Tags-itemLabel */ color: var( - --spectrum-tag-text-color-error-selected, - var(--spectrum-global-color-gray-50) + --spectrum-alias-text-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([selected][invalid]:focus-visible) { @@ -319,68 +258,68 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-tag-border-color-error-selected-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-semantic-negative-background-color-key-focus, + var(--spectrum-global-color-static-red-700) ); border-color: var( - --spectrum-tag-text-color-selected-key-focus, - var(--spectrum-global-color-gray-50) + --spectrum-alias-text-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([selected][invalid]:hover) { /* .spectrum-Tags-item.is-selected.is-invalid:hover */ - border-color: var( - --spectrum-tag-border-color-selected, - var(--spectrum-alias-border-color-transparent) - ); + border-color: var(--spectrum-global-color-gray-700); background-color: var( - --spectrum-tag-background-color-error-selected-hover, - var(--spectrum-global-color-gray-800) + --spectrum-semantic-negative-background-color-hover, + var(--spectrum-global-color-static-red-700) ); } :host([selected][invalid]:hover) .itemIcon { /* .spectrum-Tags-item.is-selected.is-invalid:hover .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-selected, - var(--spectrum-global-color-gray-50) + --spectrum-alias-icon-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([invalid]) { /* .spectrum-Tags-item.is-invalid */ - color: var( - --spectrum-tag-icon-color-error, - var(--spectrum-global-color-red-500) - ); border-color: var( - --spectrum-tag-border-color-error, + --spectrum-semantic-negative-color-default, var(--spectrum-global-color-red-500) ); } +:host([invalid]), +:host([invalid]:hover) { + /* .spectrum-Tags-item.is-invalid, + * .spectrum-Tags-item.is-invalid:hover */ + color: var( + --spectrum-semantic-negative-color-icon, + var(--spectrum-global-color-red-600) + ); +} :host([invalid]:hover) { /* .spectrum-Tags-item.is-invalid:hover */ border-color: var( - --spectrum-tag-border-color-error-hover, + --spectrum-semantic-negative-color-state-hover, var(--spectrum-global-color-red-600) ); } :host([invalid]:focus-visible), -:host([invalid]:hover), :host([invalid]:hover) .spectrum-Tags-itemClearButton, :host([invalid]:hover) .itemIcon { /* .spectrum-Tags-item.is-invalid.focus-ring, - * .spectrum-Tags-item.is-invalid:hover, * .spectrum-Tags-item.is-invalid:hover .spectrum-Tags-itemClearButton, * .spectrum-Tags-item.is-invalid:hover .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-error-hover, + --spectrum-semantic-negative-color-icon, var(--spectrum-global-color-red-600) ); } :host([invalid]:focus-visible) { /* .spectrum-Tags-item.is-invalid.focus-ring */ border-color: var( - --spectrum-tag-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 0 0 var( @@ -388,8 +327,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-static-size-25) ) var( - --spectrum-tag-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([invalid]) .spectrum-Tags-itemClearButton, @@ -397,22 +336,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tags-item.is-invalid .spectrum-Tags-itemClearButton, * .spectrum-Tags-item.is-invalid .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-error, - var(--spectrum-global-color-red-500) + --spectrum-semantic-negative-color-icon, + var(--spectrum-global-color-red-600) ); } :host([disabled]) { /* .spectrum-Tags-item.is-disabled */ color: var( - --spectrum-tag-text-color-disabled, + --spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500) ); background-color: var( - --spectrum-tag-background-color-disabled, + --spectrum-alias-background-color-disabled, var(--spectrum-global-color-gray-200) ); border-color: var( - --spectrum-tag-border-color-disabled, + --spectrum-alias-border-color-disabled, var(--spectrum-global-color-gray-200) ); } @@ -423,149 +362,133 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([disabled]) .itemIcon { /* .spectrum-Tags-item.is-disabled .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-alias-icon-color-disabled, + var(--spectrum-global-color-gray-400) ); } :host([removable]:hover) { /* .spectrum-Tags-item--removable:hover */ color: var( - --spectrum-tag-removable-text-color-hover, + --spectrum-alias-text-color-hover, var(--spectrum-global-color-gray-900) ); } :host([removable]:hover) .clear-button { /* .spectrum-Tags-item--removable:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-hover, + --spectrum-alias-icon-color-hover, var(--spectrum-global-color-gray-900) ); } :host([removable]:active) { /* .spectrum-Tags-item--removable:active */ color: var( - --spectrum-tag-removable-text-color-down, - var(--spectrum-global-color-gray-700) + --spectrum-alias-text-color-down, + var(--spectrum-global-color-gray-900) ); } :host([removable]:active) .clear-button { /* .spectrum-Tags-item--removable:active .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-down, + --spectrum-alias-icon-color-down, var(--spectrum-global-color-gray-900) ); } :host([removable][invalid]:hover) { /* .spectrum-Tags-item--removable.is-invalid:hover */ border-color: var( - --spectrum-tag-removable-border-color-error-hover, + --spectrum-semantic-negative-color-state-hover, var(--spectrum-global-color-red-600) ); color: var( - --spectrum-tag-removable-text-color-error-hover, - var(--spectrum-global-color-gray-700) + --spectrum-semantic-negative-color-state-down, + var(--spectrum-global-color-red-700) ); } :host([removable][invalid]:hover) .clear-button { /* .spectrum-Tags-item--removable.is-invalid:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-error-hover, + --spectrum-semantic-negative-color-icon, var(--spectrum-global-color-red-600) ); } :host([removable][invalid]:active) { /* .spectrum-Tags-item--removable.is-invalid:active */ border-color: var( - --spectrum-tag-removable-border-color-error-down, + --spectrum-semantic-negative-color-state-down, var(--spectrum-global-color-red-700) ); color: var( - --spectrum-tag-removable-text-color-error-down, - var(--spectrum-global-color-gray-700) + --spectrum-semantic-negative-color-state-down, + var(--spectrum-global-color-red-700) ); } :host([removable][invalid]:active) .clear-button { /* .spectrum-Tags-item--removable.is-invalid:active .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-error-down, - var(--spectrum-global-color-red-700) + --spectrum-semantic-negative-color-icon, + var(--spectrum-global-color-red-600) ); } :host([removable]:focus-visible) { /* .spectrum-Tags-item--removable.focus-ring */ color: var( - --spectrum-tag-removable-text-color-key-focus, - var(--spectrum-global-color-gray-700) + --spectrum-alias-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host([removable]:focus-visible) .clear-button { /* .spectrum-Tags-item--removable.focus-ring .spectrum-ClearButton */ color: var( - --spectrum-tag-removable-icon-color-key-focus, + --spectrum-alias-icon-color-focus, var(--spectrum-global-color-gray-900) ); } -:host([removable][selected]) { - /* .spectrum-Tags-item--removable.is-selected */ - color: var( - --spectrum-tag-removable-text-color-selected, - var(--spectrum-global-color-gray-50) - ); -} +:host([removable][selected]), :host([removable][selected]) .is-focused { - /* .spectrum-Tags-item--removable.is-selected.is-focused */ - color: var( - --spectrum-tag-removable-text-color-selected-key-focus, - var(--spectrum-global-color-gray-50) - ); -} -:host([removable][selected]) .spectrum-Tags-itemClearButton { - /* .spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton */ + /* .spectrum-Tags-item--removable.is-selected, + * .spectrum-Tags-item--removable.is-selected.is-focused */ color: var( - --spectrum-tag-removable-button-icon-color-selected, - var(--spectrum-global-color-gray-50) + --spectrum-alias-text-color-over-background, + var(--spectrum-global-color-static-white) ); } +:host([removable][selected]) .spectrum-Tags-itemClearButton, :host([removable][selected]) .spectrum-Tags-itemClearButton:hover { - /* .spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton:hover */ + /* .spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton, + * .spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton:hover */ color: var( - --spectrum-tag-removable-button-icon-color-selected-hover, - var(--spectrum-global-color-gray-50) + --spectrum-alias-icon-color-over-background, + var(--spectrum-global-color-static-white) ); } :host([removable][selected][invalid]) { /* .spectrum-Tags-item--removable.is-selected.is-invalid */ color: var( - --spectrum-tag-removable-text-color-error-key-focus, - var(--spectrum-global-color-gray-700) + --spectrum-semantic-negative-color-state-down, + var(--spectrum-global-color-red-700) ); } :host([removable]) .spectrum-Tags-itemClearButton.is-focused { /* .spectrum-Tags-item--removable .spectrum-Tags-itemClearButton.is-focused */ border-color: var( - --spectrum-tag-removable-border-color-key-focus, - var(--spectrum-alias-border-color-focus) - ); - background-color: var( - --spectrum-tag-removable-button-background-color-key-focus, - var(--spectrum-global-color-gray-600) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); + background-color: var(--spectrum-global-color-gray-75); color: var( - --spectrum-tag-removable-button-icon-color-key-focus, + --spectrum-alias-icon-color-focus, var(--spectrum-global-color-gray-900) ); } :host([removable]) .spectrum-Tags-itemClearButton:hover { /* .spectrum-Tags-item--removable .spectrum-Tags-itemClearButton:hover */ color: var( - --spectrum-tag-removable-button-icon-color-hover, + --spectrum-alias-icon-color-hover, var(--spectrum-global-color-gray-900) ); } :host([removable]) .spectrum-Tags-itemClearButton:active { /* .spectrum-Tags-item--removable .spectrum-Tags-itemClearButton:active */ - background-color: var( - --spectrum-tag-removable-button-background-color-hover, - var(--spectrum-global-color-gray-300) - ); + background-color: var(--spectrum-global-color-gray-75); } diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css index c5c70aadd1..9c162e9f59 100644 --- a/packages/tags/src/spectrum-tags.css +++ b/packages/tags/src/spectrum-tags.css @@ -12,6 +12,33 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Tags */ + --spectrum-tag-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-tag-icon-gap: var( + --spectrum-alias-item-workflow-icon-gap-s, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tag-text-size: var( + --spectrum-alias-item-text-size-s, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-tag-height: var( + --spectrum-alias-item-height-s, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tag-padding-left: var( + --spectrum-alias-item-workflow-padding-left-s, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tag-padding-right: var( + --spectrum-alias-item-padding-s, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-tag-avatar-padding-x: var(--spectrum-tag-icon-gap); + --spectrum-taggroup-tag-gap-x: var(--spectrum-global-dimension-size-100); + --spectrum-taggroup-tag-gap-y: var(--spectrum-global-dimension-size-100); display: inline-block; margin: 0; padding: 0; diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 8a898277d2..d3ff643c76 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -12,12 +12,115 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Textfield */ + --spectrum-textfield-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-textfield-text-line-height: var( + --spectrum-alias-component-text-line-height, + var(--spectrum-global-font-line-height-small) + ); + --spectrum-textfield-text-size: var( + --spectrum-alias-item-text-size-m, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-textfield-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-textfield-padding-left: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-textfield-padding-right: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-textfield-min-width: var(--spectrum-global-dimension-size-600); + --spectrum-textfield-success-icon-height: var( + --spectrum-alias-ui-icon-checkmark-size-100 + ); + --spectrum-textfield-success-icon-width: var( + --spectrum-alias-ui-icon-checkmark-size-100 + ); + --spectrum-textfield-success-icon-margin-left: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-textfield-error-icon-height: var( + --spectrum-alias-ui-icon-alert-size-100, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-textfield-error-icon-width: var( + --spectrum-alias-ui-icon-alert-size-100, + var(--spectrum-global-dimension-size-225) + ); + --spectrum-textfield-error-icon-margin-left: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-textfield-placeholder-text-font-style: var( + --spectrum-global-font-style-italic, + italic + ); + --spectrum-textfield-placeholder-text-font-weight: var( + --spectrum-global-font-weight-regular, + 400 + ); + --spectrum-textfield-border-radius: var( + --spectrum-alias-border-radius-regular, + var(--spectrum-global-dimension-size-50) + ); + --spectrum-textfield-quiet-border-size: var( + --spectrum-alias-border-size-thin, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-textfield-quiet-padding-left: 0; + --spectrum-textfield-quiet-padding-right: 0; + --spectrum-textfield-quiet-success-icon-margin-left: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-textfield-quiet-error-icon-margin-left: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-textfield-quiet-border-radius: 0px; + --spectrum-textarea-text-padding-top: var( + --spectrum-alias-item-text-padding-top-m, + var(--spectrum-global-dimension-size-75) + ); + --spectrum-textarea-text-padding-bottom: var( + --spectrum-alias-item-text-padding-bottom-m, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-textarea-height: var( + --spectrum-alias-item-height-m, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-textarea-padding-left: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-textarea-padding-right: var( + --spectrum-alias-item-padding-m, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-textfield-padding-top: 3px; + --spectrum-textfield-padding-bottom: 5px; + --spectrum-textfield-text-font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) + ); + --spectrum-textfield-icon-gap: var(--spectrum-global-dimension-size-65); + --spectrum-textfield-quiet-icon-gap: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-textarea-min-height: var(--spectrum-textarea-height); + --spectrum-textarea-height-adjusted: auto; + --spectrum-textarea-padding-top: var(--spectrum-textarea-text-padding-top); + --spectrum-textarea-padding-bottom: var( + --spectrum-textarea-text-padding-bottom + ); display: inline-flex; position: relative; - min-width: var( - --spectrum-textfield-min-width, - var(--spectrum-global-dimension-size-600) - ); + min-width: var(--spectrum-textfield-min-width); width: var( --spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400) @@ -25,60 +128,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([quiet][multiline]) #input { /* .spectrum-Textfield.spectrum-Textfield--quiet.spectrum-Textfield--multiline .spectrum-Textfield-input */ - height: var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ); - min-height: var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ); + height: var(--spectrum-textfield-height); + min-height: var(--spectrum-textfield-height); } #input { /* .spectrum-Textfield-input */ box-sizing: border-box; - border: var( - --spectrum-textfield-border-size, - var(--spectrum-alias-border-size-thin) - ) - solid; - border-radius: var( - --spectrum-textfield-border-radius, - var(--spectrum-alias-border-radius-regular) - ); - padding: 3px - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) - 5px - calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) - 1px - ); + border: var(--spectrum-textfield-border-size) solid; + border-radius: var(--spectrum-textfield-border-radius); + padding: var(--spectrum-textfield-padding-top) + var(--spectrum-textfield-padding-right) + var(--spectrum-textfield-padding-bottom) + calc(var(--spectrum-textfield-padding-left) - 1px); text-indent: 0; width: 100%; - height: var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ); + height: var(--spectrum-textfield-height); vertical-align: top; margin: 0; overflow: visible; - font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) - ); - font-size: var( - --spectrum-textfield-text-size, - var(--spectrum-alias-font-size-default) - ); - line-height: var( - --spectrum-textfield-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); + font-family: var(--spectrum-textfield-text-font-family); + font-size: var(--spectrum-textfield-text-size); + line-height: var(--spectrum-textfield-text-line-height); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, @@ -90,14 +160,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #input::placeholder { /* .spectrum-Textfield-input::placeholder */ - font-weight: var( - --spectrum-textfield-placeholder-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); - font-style: var( - --spectrum-textfield-placeholder-text-font-style, - var(--spectrum-global-font-style-italic) - ); + font-weight: var(--spectrum-textfield-placeholder-text-font-weight); + font-style: var(--spectrum-textfield-placeholder-text-font-style); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; opacity: 1; @@ -112,10 +176,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #input:hover::placeholder { /* .spectrum-Textfield-input:hover::placeholder */ - font-weight: var( - --spectrum-textfield-placeholder-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); + font-weight: var(--spectrum-textfield-placeholder-text-font-weight); } #input:disabled { /* .spectrum-Textfield-input:disabled */ @@ -124,10 +185,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #input:disabled::placeholder { /* .spectrum-Textfield-input:disabled::placeholder */ - font-weight: var( - --spectrum-textfield-placeholder-text-font-weight, - var(--spectrum-global-font-weight-regular) - ); + font-weight: var(--spectrum-textfield-placeholder-text-font-weight); } #input::-ms-clear { /* .spectrum-Textfield-input::-ms-clear */ @@ -148,103 +206,70 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr'][valid]) #input { /* [dir=ltr] .spectrum-Textfield.is-valid .spectrum-Textfield-input */ padding-right: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-textfield-padding-right) + + var(--spectrum-icon-checkmark-medium-width) + + var(--spectrum-textfield-success-icon-margin-left) ); } :host([dir='rtl'][valid]) #input { /* [dir=rtl] .spectrum-Textfield.is-valid .spectrum-Textfield-input */ padding-left: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-textfield-padding-right) + + var(--spectrum-icon-checkmark-medium-width) + + var(--spectrum-textfield-success-icon-margin-left) ); } :host([dir='ltr'][invalid]) #input { /* [dir=ltr] .spectrum-Textfield.is-invalid .spectrum-Textfield-input */ padding-right: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) + + var(--spectrum-textfield-padding-right) + var( --spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + ) + var(--spectrum-textfield-error-icon-margin-left) ); } :host([dir='rtl'][invalid]) #input { /* [dir=rtl] .spectrum-Textfield.is-invalid .spectrum-Textfield-input */ padding-left: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) + + var(--spectrum-textfield-padding-right) + var( --spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + ) + var(--spectrum-textfield-error-icon-margin-left) ); } :host([multiline]) #input { /* .spectrum-Textfield--multiline .spectrum-Textfield-input */ - height: auto; - min-height: var(--spectrum-global-dimension-size-700); - padding: 3px - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) - 5px - calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) - 1px - ); + height: var(--spectrum-textarea-height-adjusted); + min-height: var(--spectrum-textarea-min-height); + padding: var(--spectrum-textarea-padding-top) + var(--spectrum-textarea-padding-right) + var(--spectrum-textarea-padding-bottom) + calc(var(--spectrum-textarea-padding-left) - 1px); overflow: auto; } :host([dir='ltr'][quiet]) #input { /* [dir=ltr] .spectrum-Textfield--quiet .spectrum-Textfield-input */ - padding-left: var(--spectrum-textfield-quiet-padding-x, 0); + padding-left: var(--spectrum-textfield-quiet-padding-left); } -:host([dir='ltr'][quiet]) #input, :host([dir='rtl'][quiet]) #input { - /* [dir=ltr] .spectrum-Textfield--quiet .spectrum-Textfield-input, - * [dir=rtl] .spectrum-Textfield--quiet .spectrum-Textfield-input */ - padding-right: var(--spectrum-textfield-quiet-padding-x, 0); + /* [dir=rtl] .spectrum-Textfield--quiet .spectrum-Textfield-input */ + padding-right: var(--spectrum-textfield-quiet-padding-left); +} +:host([dir='ltr'][quiet]) #input { + /* [dir=ltr] .spectrum-Textfield--quiet .spectrum-Textfield-input */ + padding-right: var(--spectrum-textfield-quiet-padding-right); } :host([dir='rtl'][quiet]) #input { /* [dir=rtl] .spectrum-Textfield--quiet .spectrum-Textfield-input */ - padding-left: var(--spectrum-textfield-quiet-padding-x, 0); + padding-left: var(--spectrum-textfield-quiet-padding-right); } :host([quiet]) #input { /* .spectrum-Textfield--quiet .spectrum-Textfield-input */ - border-radius: 0; + border-radius: var(--spectrum-textfield-quiet-border-radius); border-top-width: 0; - border-bottom-width: var( - --spectrum-textfield-quiet-border-size, - var(--spectrum-alias-border-size-thin) - ); + border-bottom-width: var(--spectrum-textfield-quiet-border-size); border-left-width: 0; border-right-width: 0; resize: none; @@ -256,11 +281,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-textfield-quiet-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + ) + var(--spectrum-textfield-quiet-error-icon-margin-left) ); } :host([dir='rtl'][invalid][quiet]) #input { @@ -269,31 +290,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-textfield-quiet-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + ) + var(--spectrum-textfield-quiet-error-icon-margin-left) ); } :host([dir='ltr'][valid][quiet]) #input { /* [dir=ltr] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input */ padding-right: calc( var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-textfield-quiet-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-textfield-quiet-success-icon-margin-left) ); } :host([dir='rtl'][valid][quiet]) #input { /* [dir=rtl] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input */ padding-left: calc( var(--spectrum-icon-checkmark-medium-width) + - var( - --spectrum-textfield-quiet-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + var(--spectrum-textfield-quiet-success-icon-margin-left) ); } .icon { @@ -311,37 +322,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][invalid]) .icon { /* [dir=ltr] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - right: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + right: var(--spectrum-textfield-error-icon-margin-left); } :host([dir='rtl'][invalid]) .icon { /* [dir=rtl] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - left: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + left: var(--spectrum-textfield-error-icon-margin-left); } :host([invalid]) .icon { /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - width: var( - --spectrum-textfield-validation-icon-width-error, - var(--spectrum-global-dimension-size-225) - ); - height: var( - --spectrum-textfield-validation-icon-height-error, - var(--spectrum-global-dimension-size-225) - ); + width: var(--spectrum-textfield-error-icon-width); + height: var(--spectrum-textfield-error-icon-height); bottom: calc( - var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ) / 2 - - var( - --spectrum-textfield-validation-icon-height-error, - var(--spectrum-global-dimension-size-225) - ) / 2 + var(--spectrum-textfield-height) / 2 - + var(--spectrum-textfield-error-icon-height) / 2 ); } :host([dir='ltr'][quiet][invalid]) .icon { @@ -354,37 +347,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][valid]) .icon { /* [dir=ltr] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ - right: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + right: var(--spectrum-textfield-success-icon-margin-left); } :host([dir='rtl'][valid]) .icon { /* [dir=rtl] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ - left: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + left: var(--spectrum-textfield-success-icon-margin-left); } :host([valid]) .icon { /* .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ - width: var( - --spectrum-textfield-validation-icon-width-valid, - var(--spectrum-global-dimension-size-150) - ); - height: var( - --spectrum-textfield-validation-icon-height-valid, - var(--spectrum-global-dimension-size-150) - ); + width: var(--spectrum-textfield-success-icon-width); + height: var(--spectrum-textfield-success-icon-height); bottom: calc( - var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ) / 2 - - var( - --spectrum-textfield-validation-icon-height-valid, - var(--spectrum-global-dimension-size-150) - ) / 2 + var(--spectrum-textfield-height) / 2 - + var(--spectrum-textfield-success-icon-height) / 2 ); } :host([dir='ltr'][quiet][valid]) .icon { @@ -397,17 +372,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .icon-workflow { /* [dir=ltr] .spectrum-Textfield-icon */ - left: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + left: var(--spectrum-textfield-error-icon-margin-left); } :host([dir='rtl']) .icon-workflow { /* [dir=rtl] .spectrum-Textfield-icon */ - right: var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ); + right: var(--spectrum-textfield-error-icon-margin-left); } .icon-workflow { /* .spectrum-Textfield-icon */ @@ -422,10 +391,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-225) ); top: calc( - var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ) / 2 - + var(--spectrum-textfield-height) / 2 - var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) @@ -446,7 +412,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) - ) + var(--spectrum-global-dimension-size-75) + ) + var(--spectrum-textfield-quiet-icon-gap) ); } :host([dir='rtl'][quiet]) .icon-workflow ~ #input { @@ -455,80 +421,65 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) - ) + var(--spectrum-global-dimension-size-75) + ) + var(--spectrum-textfield-quiet-icon-gap) ); } :host([dir='ltr']) .icon-workflow + #input { /* [dir=ltr] .spectrum-Textfield-icon+.spectrum-Textfield-input */ padding-left: calc( - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + + var(--spectrum-textfield-error-icon-margin-left) + var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) - ) + var(--spectrum-global-dimension-size-65) + ) + var(--spectrum-textfield-icon-gap) ); } :host([dir='rtl']) .icon-workflow + #input { /* [dir=rtl] .spectrum-Textfield-icon+.spectrum-Textfield-input */ padding-right: calc( - var( - --spectrum-textfield-icon-margin-left, - var(--spectrum-global-dimension-size-150) - ) + + var(--spectrum-textfield-error-icon-margin-left) + var( --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) - ) + var(--spectrum-global-dimension-size-65) + ) + var(--spectrum-textfield-icon-gap) ); } :host([multiline]) .icon-workflow ~ #input { /* .spectrum-Textfield--multiline .spectrum-Textfield-icon~.spectrum-Textfield-input */ - height: var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ); - min-height: var( - --spectrum-textfield-height, - var(--spectrum-alias-single-line-height) - ); + height: var(--spectrum-textfield-height); + min-height: var(--spectrum-textfield-height); } :host(:hover) #input { /* .spectrum-Textfield:hover .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-hover, - var(--spectrum-alias-border-color-hover) + --spectrum-alias-border-color-hover, + var(--spectrum-global-color-gray-500) ); box-shadow: none; } :host(:hover) #input::placeholder { /* .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder */ color: var( - --spectrum-textfield-placeholder-text-color-hover, - var(--spectrum-alias-placeholder-text-color-hover) + --spectrum-alias-placeholder-text-color-hover, + var(--spectrum-global-color-gray-900) ); } :host(:hover) .icon-workflow { /* .spectrum-Textfield:hover .spectrum-Textfield-icon */ - color: var( - --spectrum-textfield-icon-color-hover, - var(--spectrum-global-color-gray-900) - ); + color: var(--spectrum-global-color-gray-900); } :host(:active) #input { /* .spectrum-Textfield:active .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-down, - var(--spectrum-alias-border-color-mouse-focus) + --spectrum-alias-border-color-mouse-focus, + var(--spectrum-global-color-blue-500) ); } :host(:active) .icon-workflow { /* .spectrum-Textfield:active .spectrum-Textfield-icon */ color: var( - --spectrum-textfield-icon-color-down, - var(--spectrum-alias-icon-color-down) + --spectrum-alias-icon-color-down, + var(--spectrum-global-color-gray-900) ); } :host([valid]) .icon { @@ -541,67 +492,53 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([invalid]) .icon { /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ color: var( - --spectrum-textfield-validation-icon-color-error, - var(--spectrum-semantic-negative-color-icon) + --spectrum-semantic-negative-color-icon, + var(--spectrum-global-color-red-600) ); } :host([invalid]:hover) #input { /* .spectrum-Textfield.is-invalid:hover .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-error-hover, - var(--spectrum-semantic-negative-color-state-hover) + --spectrum-semantic-negative-color-state-hover, + var(--spectrum-global-color-red-600) ); } +:host([disabled]) .icon-workflow, :host([disabled]) .icon { - /* .spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon */ - color: var( - --spectrum-textfield-validation-icon-color-disabled, - var(--spectrum-global-color-gray-500) - ); -} -:host([disabled]) .icon-workflow { - /* .spectrum-Textfield.is-disabled .spectrum-Textfield-icon */ - color: var( - --spectrum-textfield-icon-color-disabled, - var(--spectrum-global-color-gray-500) - ); + /* .spectrum-Textfield.is-disabled .spectrum-Textfield-icon, + * .spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon */ + color: var(--spectrum-global-color-gray-500); } .icon-workflow { /* .spectrum-Textfield-icon */ color: var( - --spectrum-textfield-icon-color, - var(--spectrum-alias-icon-color) + --spectrum-alias-icon-color, + var(--spectrum-global-color-gray-700) ); } #input { /* .spectrum-Textfield-input */ - background-color: var( - --spectrum-textfield-background-color, - var(--spectrum-global-color-gray-50) - ); + background-color: var(--spectrum-global-color-gray-50); border-color: var( - --spectrum-textfield-border-color, - var(--spectrum-alias-border-color) + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) ); color: var( - --spectrum-textfield-text-color, - var(--spectrum-alias-text-color) + --spectrum-alias-text-color, + var(--spectrum-global-color-gray-800) ); } #input::placeholder { /* .spectrum-Textfield-input::placeholder */ - color: var( - --spectrum-textfield-placeholder-text-color, - var(--spectrum-alias-placeholder-text-color) - ); + color: var(--spectrum-global-color-gray-600); } #input:focus, :host([focused]) #input { /* .spectrum-Textfield-input:focus, * .spectrum-Textfield.is-focused .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-down, - var(--spectrum-alias-border-color-mouse-focus) + --spectrum-alias-border-color-mouse-focus, + var(--spectrum-global-color-blue-500) ); } #input:focus-visible, @@ -609,20 +546,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Textfield-input.focus-ring, * .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 0 0 1px var( - --spectrum-textfield-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([invalid]) #input { /* .spectrum-Textfield.is-invalid .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-border-color-error, - var(--spectrum-semantic-negative-color-default) + --spectrum-semantic-negative-color-default, + var(--spectrum-global-color-red-500) ); } :host([focused][invalid]) #input, @@ -630,67 +567,62 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .is-keyboardFocused.spectrum-Textfield.is-invalid .spectrum-Textfield-input, * .spectrum-Textfield.is-invalid .spectrum-Textfield-input.focus-ring */ border-color: var( - --spectrum-textfield-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 0 0 1px var( - --spectrum-textfield-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } -#input [disabled], +#input :disabled, :host([disabled]) #input, :host([disabled]:hover) #input { - /* .spectrum-Textfield-input [disabled], + /* .spectrum-Textfield-input :disabled, * .spectrum-Textfield.is-disabled .spectrum-Textfield-input, * .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input */ - background-color: var( - --spectrum-textfield-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-textfield-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); + background-color: var(--spectrum-global-color-gray-200); + border-color: var(--spectrum-alias-border-color-transparent, transparent); color: var( - --spectrum-textfield-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); -webkit-text-fill-color: var( - --spectrum-textfield-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } -#input [disabled]::placeholder, +#input :disabled::placeholder, :host([disabled]) #input::placeholder, :host([disabled]:hover) #input::placeholder { - /* .spectrum-Textfield-input [disabled]::placeholder, + /* .spectrum-Textfield-input :disabled::placeholder, * .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder, * .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder */ color: var( - --spectrum-textfield-placeholder-text-color-disabled, - var(--spectrum-alias-text-color-disabled) + --spectrum-alias-text-color-disabled, + var(--spectrum-global-color-gray-500) ); } :host([quiet]) #input { /* .spectrum-Textfield--quiet .spectrum-Textfield-input */ background-color: var( - --spectrum-textfield-quiet-background-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); border-color: var( - --spectrum-textfield-quiet-border-color, - var(--spectrum-alias-border-color) + --spectrum-alias-border-color, + var(--spectrum-global-color-gray-400) ); } :host([focused][quiet]) #input, :host([quiet]) #input:focus { /* .is-focused.spectrum-Textfield--quiet .spectrum-Textfield-input, - * .spectrum-Textfield--quiet .spectrum-Textfield-input:focus */ + * .spectrum-Textfield--quiet .spectrum-Textfield-input:focus, + * :active.spectrum-Textfield--quiet .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-quiet-border-color-mouse-focus, - var(--spectrum-alias-border-color-mouse-focus) + --spectrum-alias-border-color-mouse-focus, + var(--spectrum-global-color-blue-500) ); } :host([focused][quiet]) #input, @@ -698,20 +630,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .is-keyboardFocused.spectrum-Textfield--quiet .spectrum-Textfield-input, * .spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring */ border-color: var( - --spectrum-textfield-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 1px 0 var( - --spectrum-textfield-border-color-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([invalid][quiet]) #input { /* .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-quiet-border-color-error, - var(--spectrum-semantic-negative-color-default) + --spectrum-semantic-negative-color-default, + var(--spectrum-global-color-red-500) ); } :host([focused][invalid][quiet]) #input, @@ -719,8 +651,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .is-focused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input, * .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input:focus */ border-color: var( - --spectrum-textfield-quiet-border-color-error-mouse-focus, - var(--spectrum-semantic-negative-color-state-hover) + --spectrum-semantic-negative-color-state-hover, + var(--spectrum-global-color-red-600) ); } :host([invalid][quiet]) #input:focus-visible, @@ -728,27 +660,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring, * .is-keyboardFocused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input */ border-color: var( - --spectrum-textfield-quiet-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); box-shadow: 0 1px 0 var( - --spectrum-textfield-quiet-border-color-error-key-focus, - var(--spectrum-alias-border-color-focus) + --spectrum-alias-border-color-focus, + var(--spectrum-global-color-blue-400) ); } :host([disabled][quiet]) #input, :host([disabled][quiet]:hover) #input, -:host([quiet]) #input [disabled] { +:host([quiet]) #input :disabled { /* .is-disabled.spectrum-Textfield--quiet .spectrum-Textfield-input, * .is-disabled:hover.spectrum-Textfield--quiet .spectrum-Textfield-input, - * .spectrum-Textfield--quiet .spectrum-Textfield-input [disabled] */ + * .spectrum-Textfield--quiet .spectrum-Textfield-input :disabled */ background-color: var( - --spectrum-textfield-quiet-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --spectrum-alias-background-color-transparent, + transparent ); border-color: var( - --spectrum-textfield-quiet-border-color-disabled, - var(--spectrum-alias-border-color-mid) + --spectrum-alias-border-color-mid, + var(--spectrum-global-color-gray-300) ); } diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index 040d360689..f1ae5a2064 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -232,11 +232,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Toast */ background-color: var( --spectrum-toast-neutral-background-color, - var(--spectrum-global-color-static-gray-700) + var(--spectrum-semantic-neutral-background-color-default) ); color: var( --spectrum-toast-neutral-background-color, - var(--spectrum-global-color-static-gray-700) + var(--spectrum-semantic-neutral-background-color-default) ); } .content { @@ -280,7 +280,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--negative */ background-color: var( --spectrum-toast-negative-background-color, - var(--spectrum-global-color-static-red-700) + var(--spectrum-semantic-negative-color-background) ); } :host([variant='error']), @@ -293,14 +293,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--negative .spectrum-Toast-closeButton.focus-ring:not(:active) */ color: var( --spectrum-toast-negative-background-color, - var(--spectrum-global-color-static-red-700) + var(--spectrum-semantic-negative-color-background) ); } :host([variant='info']) { /* .spectrum-Toast--info */ background-color: var( --spectrum-toast-info-background-color, - var(--spectrum-global-color-static-blue-700) + var(--spectrum-semantic-informative-color-background) ); } :host([variant='info']), @@ -309,7 +309,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--info .spectrum-Toast-closeButton.focus-ring:not(:active) */ color: var( --spectrum-toast-info-background-color, - var(--spectrum-global-color-static-blue-700) + var(--spectrum-semantic-informative-color-background) ); } :host([variant='positive']), @@ -318,7 +318,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--success */ background-color: var( --spectrum-toast-positive-background-color, - var(--spectrum-global-color-static-green-700) + var(--spectrum-semantic-positive-color-background) ); } :host([variant='positive']), @@ -331,6 +331,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--success .spectrum-Toast-closeButton.focus-ring:not(:active) */ color: var( --spectrum-toast-positive-background-color, - var(--spectrum-global-color-static-green-700) + var(--spectrum-semantic-positive-color-background) ); } diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index aa3b4297a5..2a5d0ccf60 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -32,7 +32,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--bottom.is-open */ transform: translateY( var( - --spectrum-picker-popover-offset-y, + --spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -41,7 +41,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--top.is-open */ transform: translateY( calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -49,7 +49,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--right.is-open */ transform: translateX( var( - --spectrum-picker-popover-offset-y, + --spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -58,7 +58,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--left.is-open */ transform: translateX( calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -103,7 +103,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); line-height: var( --spectrum-tooltip-text-line-height, - var(--spectrum-global-dimension-font-size-200) + var(--spectrum-alias-component-text-line-height) ); word-break: break-word; -webkit-font-smoothing: antialiased; @@ -253,7 +253,7 @@ p { /* .spectrum-Tooltip-label */ line-height: var( --spectrum-tooltip-text-line-height, - var(--spectrum-global-dimension-font-size-200) + var(--spectrum-alias-component-text-line-height) ); } :host { diff --git a/yarn.lock b/yarn.lock index dc6f406d8e..d7c318b648 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3433,29 +3433,34 @@ integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ== "@spectrum-css/accordion@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.0-beta.4.tgz#132648caed121627948c91b4d8da574ff92fc3ea" - integrity sha512-/NAwGpQdqEJASmOGEcGf0bpudhBxld0bImYufBiEjeS/DH3/2AE1L7DV4UOLm7SV7bqzs3ED+AbyjfFKcXuH1w== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.0-beta.5.tgz#8a927c53f954ddf3b40b9af665c2b1e4b3cc1e95" + integrity sha512-lE136EoYH0BzrawgwB4bae+4ITffpCp/I/C1aJIQhWlZm4+pMBeOjOfSo+6r4N9wgiph8genUTQHP5Kdgblmjg== "@spectrum-css/actionbar@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-3.0.0-beta.5.tgz#1a249fa905dc329d4fdb13473dc07959b3ad4b65" - integrity sha512-70smG9RQia1epPLZ3r3WljwrQQNKbVtOAN18fzWiMQiOrWdW8JWGAsjR0WMQerTxuwQ0wRMoQhxbY8wVtSarlg== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-3.0.0-beta.6.tgz#d9084d64db5de9a1b3659781ebced6f92c698f50" + integrity sha512-R3x5lRIbVm1Z6Bpa9pFpM0Y9X5eKYX/kZRQz1R3VN9mZSMTABe1SLmpSele21/N5Vn1vEsY/63y93ycJCNBQ1w== + +"@spectrum-css/actionbutton@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6" + integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ== "@spectrum-css/actiongroup@^1.0.0-beta.4": - version "1.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.0-beta.4.tgz#7d898978c973d63c24693ea431727fe7f18b8639" - integrity sha512-dTyRUBRbjRgigE5QTmaSSoiTAuw7fmVpAq2tHuJAR1u2TCSc1UQ3WL6g+DXOHWKcqzkGSVvywgnqqX08AssbEQ== + version "1.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.0-beta.5.tgz#0aebe606bc4b5fad9a1dc40195e3cb90f44741eb" + integrity sha512-wcs/Vod6yv96V+AS+F6/sGs2VkCmBLDqUulqJdEZSv8xHZ48OYxtVey70gwgqB1KV0p899zYJbH3CYibNDt8Fg== "@spectrum-css/asset@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-3.0.0-beta.4.tgz#92548525b7753df625950f61c3fc64be7d4d1654" - integrity sha512-fGU6jSiJ7+3RWXk0HW3OxLst9i8iQYQmQIbiv6vRkKi11pzs6slOLM1M3gJ5ZEFDLn1M9Q9rZ4+jy0oCQ8/Pkw== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-3.0.0-beta.5.tgz#c63454add8a7ed1c70bba01d2afbbb24cb20fd3c" + integrity sha512-9YSso7Mc/wWvIi5OPjxlrfA5yEHdjhXgqdV4AWSSshAZ4zrMC6jrNI6wINoUM8sLMMt6nJW2qzDG8kackGV9Zg== "@spectrum-css/avatar@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.0-beta.4.tgz#c64ae89d81380ef1b5ee2c20d769d622c8b72446" - integrity sha512-Old6LTTfYWV9ZEaOSin4oep1V9A2QCj0x56CPv9OejUSyW20t9FRMnRDGuq2Ov8TaOMbiNXPrmOJMZXs8Rx7Jw== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.0-beta.5.tgz#5159c2621bb9aa6f58f6d2ff821207a30b1394d7" + integrity sha512-v8G5NJQReIQOdBfN+5obWLhRnSkCJWriyv4suSb9IHTZsgQk8lQriB3GiY/YkcU2N1mFfj3FifFPCH5x8ty1/w== "@spectrum-css/banner@^3.0.0-beta.2": version "3.0.0-beta.2" @@ -3463,29 +3468,29 @@ integrity sha512-NqrT03ItWzj+L0dtqjedhop6wKOspBmaowzp9IOY/2kL561kRqYTLKR9vTteZ3cEDVD3ajKA8y+bKIW0eN+X7A== "@spectrum-css/button@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.5.tgz#dd1cf1651c665d2d787fa18ef53cdc68cd625221" - integrity sha512-z/5NWXZWhoZy5Go5SYwgfo6xcPCIZJPGjevIA9Q30/O+DcrJrwwt9iuMRCJYJ35Gs8mUAX1Oa650eBT7yoW1cQ== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a" + integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg== "@spectrum-css/buttongroup@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.0-beta.5.tgz#2b2eea97a5ccb821b2ae979ec6a49782bfa25c7e" - integrity sha512-gPmieyHUI/GJomaWbW/GXzcT2GNiRA05+Y60gO7ElUJJkV+hptH+nPyjztqcV2YQkrx0AoH9BhP2t39CDK5P0w== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.0-beta.6.tgz#c810b8873cd128b9ac0c0e0e63b6757706110c2e" + integrity sha512-7c/RGqw2kNOuef17wiAmAPPL5FZMFZongFexc7uOqjlZjLGirhc9hnyYZXjU44v3ii1+zBztuVpVmfeqZlHr8A== "@spectrum-css/card@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.0-beta.5.tgz#08766077a0a63b7e22274667a26e64495a9d168c" - integrity sha512-A0jx8/ZLem3q5NR44MUHscKPChpje1SSQ2jp0czMwcDqaPCc3QP0h+AeQXQ+tdUjZOUgzwyG9aeGKqj0uUEjgQ== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.0-beta.6.tgz#049d7a1e9cd41567e22ff56e8bb98098e52e8d7f" + integrity sha512-L1nuBPOAGc3gt2c81WNBVp7oPWq8V+a4gr1aPoXmcFMjMhGNVZSVt93kP3Dnr4ALabRG4+gdMJJylP/CGx0e9w== "@spectrum-css/checkbox@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.5.tgz#b97558a0377ef96415205930f56cc29d3ce713ba" - integrity sha512-OJHDijFh2DwWfq7BSAAYyZiC84wxFLWrJ/wiB7QU2EtKaCzb8VZui0NKFD9+eAuoqscJoEfC8g7LaLK0T09Ing== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374" + integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ== "@spectrum-css/coachmark@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-3.0.0-beta.5.tgz#4c7cbefedb31ad00871221a48da7700dedea283b" - integrity sha512-V3gpoesKsjtH+soZv03EzyYivLEcXniTvWsTPhiqEbnocCVkbXJiop8t9ClzWzukKE1GvOGwyBTDGR7sQuv7mw== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-3.0.0-beta.6.tgz#607b7f8403689780d54487041ab7bbdcfe448979" + integrity sha512-KpqBYgQ2AiZRvQWQAZkznwprdv1yEeAhSPORtneVZoo5Sb5mA3wzJiwimPesOM37kDHx6l4swRrAA8IqWSEWHA== "@spectrum-css/commons@^2.1.0": version "2.1.0" @@ -3493,41 +3498,41 @@ integrity sha512-43bFaOOdV312vIo6K/5PI/gAnLoBKWQDRh3M04A2GIBSdSW7ItpqxXgwvlLsMy6cYkQGjcpb/usOBEr83lMIfA== "@spectrum-css/dialog@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.0-beta.5.tgz#648b19fa6ab207e076e59ed2277bbfccea2c0997" - integrity sha512-fvzGjiv0XRKjaY6rg128kxLHcZ87IMW0c/+fix9udo3uyfG0BARygALM5R10daHXFYnwcRDSQsu3VhkUcAqBMg== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.0-beta.6.tgz#b88e5cc8796d94b395e9c3dbe90d621e9848b6a1" + integrity sha512-Xg8u1sIjXkIsaSeC/ZlQ3KNfpehVBtEvV7etVa8Gp1sTFoKiDIUI1CV7sWcjMN3LoSgL5Hu2OmNo8FdOU9jKag== "@spectrum-css/divider@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.0-beta.2.tgz#0dfd2b854d2da7be237d2b9bebca2f5824bbd61a" - integrity sha512-DnSNBrizwvQNocWzR+HO3AoMSIjXQS81AtSHDMhuvXQTZMcINjEFcY5jtMqURXfZh4g0QkttzOdQ5Kh8l/8YIw== + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.0-beta.3.tgz#a1dcb7041cf0c2e6fa4f9dbba31305e48948a686" + integrity sha512-CGptbdjLDndc6VQDkVzLqOAKvPT8IvCnR6dEneJC2O+5BO1MFEeZlEgMzXCQ3OfR5tEq2blPR1PJv5ASAYeK9w== dependencies: - "@spectrum-css/vars" "^2.3.0" + "@spectrum-css/vars" "^3.0.0-beta.2" "@spectrum-css/dropzone@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.0-beta.4.tgz#9512275673f4a8ba4bcab05155d2f4d072f6a75b" - integrity sha512-praaypm+Ev8YZWAFnM++BLXUKGZ8vfweBHrgJTOCLGEcv4/gXq+pzJtg2fBFE05OTolwXImFdi246jf8aHjYXw== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.0-beta.5.tgz#b0be9e57fabf9796b30cfa81036d6f8406cfa8b4" + integrity sha512-S9ZqXdFCQ7raDX+U2+nkvjAq10bp4mTnKHv3jCwI1Tnp7TFj7I69FPdsbjjhI8BEERgRhNHO9njW1R7LsAVLuw== "@spectrum-css/fieldgroup@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.0-beta.5.tgz#2df6116a5c9131a1b30b6cc51b9fdf9bfa1a22ab" - integrity sha512-P8w2ASt4Z47vsnaOxkGOKBzfXE7B/3x//awkaKUFf7fDjGUmGkuyPtUt5Pd1YxzQ57jGMpyL/8fZmFmn3UiDRw== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.0-beta.6.tgz#ee9bd3ee46fda89c8187335be97e7233a139db38" + integrity sha512-73h4lN2VeYRE0ziKTSZFCR0Tec9pes4aFryz/dlUvCdZv05yfbdoOmJeDTQJW/sDTR2LdeKEJC/MpjkzpYch9A== "@spectrum-css/fieldlabel@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.6.tgz#e72aa90f3eb03d7e5f3e7da5594c18c680206918" - integrity sha512-AeGmqMJczwTgHn/YTQ++tdTSS/4eBaFXJwW43LxJBI9U1aj68OB1dj/rmfuJCvsbr4yfmTEM+EszcLrZgEx7Xw== + version "3.0.0-beta.7" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114" + integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog== "@spectrum-css/icon@^3.0.0-beta.1": - version "3.0.0-beta.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.1.tgz#62e18e5a83fdfc9ad638ade68e6f2e6457114495" - integrity sha512-mPNww7ZHGQD7XcauKrrBt2tiyjpUg6RFGtw3xtMswM3GNahwiFHGMcCmvyGgYFHmpuDFhd5SEDRHpxF/aDeoqw== + version "3.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb" + integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA== "@spectrum-css/illustratedmessage@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.0-beta.4.tgz#b7fc685c0dc05fe497b69abed56f6a2c98d103fc" - integrity sha512-0pq6OVjnus9l+vK5sWPniXMOcrSfpKealnpE/WPlIdMd7dzdQgWM1O3KWki2k/fK2qhNWPX8xRglcfJ1vao+qA== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.0-beta.5.tgz#64a16c0bcb489fcee3fa3cfec361cf233a535c18" + integrity sha512-mj8C9LYnRLvulPos6SLR/cGx8VgOhJCrRkEdLZIrEooowJEoNksVBm1IqzYfiyKu/JGX5HUeMc6pBtZXsAXubQ== "@spectrum-css/link@^3.0.1-beta.1": version "3.0.1-beta.1" @@ -3535,124 +3540,119 @@ integrity sha512-Z2OjRhVRwchdd8qI6ECfoEoQ9ZQBQUGcpGjb4lJjjuOloRycEP+iqLhp2DAJOKNuyex0J92asNUNNCuhRfNPYg== "@spectrum-css/menu@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.4.tgz#6802be2edd64eb168b001cf90c447920b1b2dd7a" - integrity sha512-f5aBUlk/8FRtf0JS9SuwE7KIhIFVTFLpWxlFKdtWIK+qzz7frNQBcXQUCpd7+t7vNQ46lGmCEDUohhQVMe8h5Q== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74" + integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw== "@spectrum-css/modal@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.0-beta.2.tgz#cc594c89b2192a578cf6fbd7a4e12bc50ac1070a" - integrity sha512-HlVkNHcYnWTLtWd1X5b7KdZRCJFKz9Y2a1DgrM51PgFqQOhUF0aalAmXgdqpCINF8/H6fAC6LCZmrBNWt7WtwQ== + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.0-beta.3.tgz#f6dc835e12c507728627ba5c7687b9da370ccf05" + integrity sha512-OjOTHESisbAgsuEQAe2A2faQuFoY9Fr1qbOimKDsJb7WYvmPdZ3y11mwT7NuLjk+wehfwu4tebB74Yp7Cafqsg== "@spectrum-css/picker@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.2.tgz#c42e749ae2d37c5f3d4fc8b5ac8ca992c9190ff0" - integrity sha512-b6AJ38f5ushn0bEvRRn3rO+vfYlMuJikngDblpX/0H3flgMuq67vlpexsrBl6AoGdoUu8KZ/r0qixIZTYriTgw== + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965" + integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ== "@spectrum-css/popover@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.5.tgz#fb5f0b399b8a8cd55a38b8308d48d9129dd8b996" - integrity sha512-WoKM2oY7O6UOTfb8hpjT8LzEW8mOrHSt79WNMLKlTB+yKHf62QOIT/zuXqSq4neBraBnxdHsCLbKGJw0yVW8Xg== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2" + integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ== "@spectrum-css/progressbar@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.0-beta.2.tgz#fc22417feb6c2fc1a7a0f72b13e037944c305dac" - integrity sha512-OJBik7WAd49JZE/z/pPy0RRySwf+1i+mgH9VVvDjoYxzzN6eKS3rvFX5FQzlHUtDYSlyaqnyoydtUkMeFQg5pA== + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.0-beta.3.tgz#402e07b0b4387b9c23bec8bd2cd1b1fbbeb8738b" + integrity sha512-NIE9zoG0njCKCRMX79Xl2NVK1a3kJ3MHbkhk6MA1A03VhMXcmxR+Ono3FIwqcrI8h9xRQUVGOvZc3T7bLbAf1w== "@spectrum-css/progresscircle@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.0-beta.2.tgz#4df1006f54478ba263fe0e36b5142073bde3ebb2" - integrity sha512-o7EgUN5k+Fx1JcUEZEUI9WtTW1pX1JJIunU8/vozOK7Nb67oAX7YEPZ41yLQW3WWgzEw0zRu+bn/V8aF5V9ycw== + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.0-beta.3.tgz#3ad7f9bd4dfd7c149a662ccbc43c5f745e054846" + integrity sha512-2zCpdlcya1Y5Q2V1pK1u6tTpG2s1KAt7GCvSKpyPtViWjcW0QiVXktRn4hvsgHNG4tzH8/KdiwlN8IqXdyRP1A== "@spectrum-css/quickaction@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/quickaction/-/quickaction-3.0.0-beta.5.tgz#68cf876296bc9714cdb0eaa523b977d50529e8ce" - integrity sha512-83YOlkPKJJZulenYRgGLOgcIEvDEmJUjlnrrEze7JdIk7m194YQg1QWGPJEWvFjNyCG5/YVvhNT98t1mbHnt+g== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/quickaction/-/quickaction-3.0.0-beta.6.tgz#1dc95825eb25c0ab35a1176a28b2023d13d8a450" + integrity sha512-pSBOHZf0po2zl+tIwCOrSJQYtCvudrNrhATTEY6bXzWs/rkSQQnSeU2bnUS1U2oV7NJ/KzFwXFHOmjNgqAUqUQ== "@spectrum-css/radio@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.0-beta.4.tgz#30d3bd468bbecdcdefcfd5959b8fe8966869bf3c" - integrity sha512-sZXSY4IU0WD7fZ5hVSgrR228wKeQ/vngujcq2s0bjCricsdbZ5EwsSmyLadnThlQcDAj+o0C86UsDPa95nNZJA== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.0-beta.5.tgz#ab67d5b5681c4fa3bc7b3ec62146a1b788a94d42" + integrity sha512-sNb6fzYjpD59Te7e2F6yHxHynYgY8PxKJldLxbYu+TGdmrZ180cjJL5ac0EUpwg1U0yaPgEsy9FRpZ20DxuxFA== "@spectrum-css/search@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.0-beta.6.tgz#ba285820120b06298f38eeb8b5f5f8075f6daa5f" - integrity sha512-IFIRNyVfFlWxN4c0iGtkPk+mW3SUU8yfKDRXowRh+DPMFfetSITdf5LM0oVwsO/O2Je6RgAR8M5a8SGGirw/4g== + version "3.0.0-beta.7" + resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.0-beta.7.tgz#0b3ed9cf4ea84ca045979cf0e54248694f207155" + integrity sha512-T5lnVS7T9mif1gcKOPjNlDZ2smw+vdzKRsScxvRYySKyXBEFXkCQT/N81v2ffjSx4reUsL3PL+jFSakHs5A3Tw== "@spectrum-css/sidenav@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.0-beta.4.tgz#445e5a7187154e93b6b42308c7e645eb8df6653a" - integrity sha512-yFS//rqqCSLC7wZC8M3+AAuP64fR6l6ABmHlXSLZfeNw1ceQCLGf2gTd2Ecyahm5afbtn9cHhCfL1qmf3Mx6Tg== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.0-beta.5.tgz#38613efe94ae0b9166e209a194967e17278a48b5" + integrity sha512-Qo6p4smYdYRJgKxCj5LD9WTvjj8n3Bli7XIw6nZMPovv9W+3bqEOUMEtQ+VmZgbtVFKaTztnDr2WVHfn7j/pdg== "@spectrum-css/slider@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.0-beta.4.tgz#eac7e33820b7d021f137cc7ada511f73e8999c14" - integrity sha512-gjtY3y6GDAEU1lEi+HllcgA1EAItqhFa7fgNPTNwgmBJ1XQpwAMPfNPawpYN6IcL4uRLaWNKrPKGbux+2tZUUQ== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.0-beta.5.tgz#cc1e19b61668eefc2fb1b315097a6b73fdaa362c" + integrity sha512-LjdxleuXN+iyRjPIpxS58VYJ9Bh9NJLspmsViytrItCgc02jKlMob/OkbkajUVDSM13u/KmA/pNrgmZDx1FqxQ== "@spectrum-css/splitbutton@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-3.0.0-beta.5.tgz#e0bce3cb371158e54f8fa121c4731c4d465ddddc" - integrity sha512-t7WWRs6uK2537M29ww5E5xkghXOtw5eyd1L9HqzgyZimbOE/iFSytuPWkB12PQgD6fB1d/kt2uUCepmFPxM9PA== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-3.0.0-beta.6.tgz#abe83fa92c3414874af196dbee1bc97f5ec68b26" + integrity sha512-oqfHuydzs++1q/36neyQwUlFE1wbPPPO5tYrXBHWlmu9JLjLlOIntIxkYfJw6Br3zdbwXNRm8RqJM9SzRinMpw== "@spectrum-css/statuslight@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.0-beta.4.tgz#dbae5cab5fbd997015f0c5675a7a8e1b7ae60c8d" - integrity sha512-hTK1UmZhtgJi4RHHJ9kN/0ySPDm9yK08cYdxGvN9dODkhsv/taLDLotDYaRX50N3eY8A+PwLRj+dNFz5OnR2nQ== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.0-beta.5.tgz#b1ec3144db6531a353caa5872f6b5d4d46d42035" + integrity sha512-xVp4KBp+WKGohAinSwthZT1cE7QDcqEWLReYrHI6B0ZKZyGBD9Aio++yzpzCtOUHJUogPkj00Huux9iXsNhcug== "@spectrum-css/switch@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.0-beta.2.tgz#7e88944e978784bf21109e524542bd330323ddf5" - integrity sha512-3ilpTx3DVRGJJud6Cz/SXtDAQwmQTZFubUq3Mf0NrOgUV+vfGu69sIwcfCRGp2xhKOUt0F/q1znqaIRGk2fZ4g== + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.0-beta.3.tgz#7a2c73740924e7c6bba194bc25f56199fdd6cafa" + integrity sha512-oEmAHfHxUyNeG3hDug8G5aSKstykDWe+36PhcJtyH23QShsnauDf+W7KSgdHoLveI8mMLUSrDYc4m/s6RxcOYw== "@spectrum-css/table@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.0-beta.5.tgz#92f0d98db2cf43cd523d9560ba6aca95650be8ee" - integrity sha512-hJwNPK2T7bz4mLMXSjeZN2X2RlRXoJIP6KJIsuky5s88VY5TUsqGvM7tnl7Vf8rLBQ6ZMcf/vVfDY1Oz6lnq2g== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.0-beta.6.tgz#6eead0a72d9435fd07062507eb5cf3370dbae643" + integrity sha512-PXSxcensLUUNphHQXC/GMwOo8lptR8kU229GflZq2gjsxvsy3V1eaEPAi54vC8xzLnxQsAMsYpDz97QmZ0pXFQ== "@spectrum-css/tabs@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.0-beta.5.tgz#ccad06c23c5c658042060c58f586fd7d92e25a2a" - integrity sha512-YoLD/8xsyNbWLdmkhoBn/SL6xp0G3VKx61UpTD8xXBHqQDv6yOqKj2WkN5jws4/2F0e82jE9wkxldpkTg8sETw== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.0-beta.6.tgz#adc473e98a7fd8988a50eae9b6c5ea2132b992d6" + integrity sha512-1BNaGP7SMoB16Qer7J6UrVY4op1rBzWWPWjyJXIkKOsJfsyRRtJlKAZRWHwKG+ZQXKjSyyZIr++8KPwvQprEjQ== "@spectrum-css/tags@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.0-beta.5.tgz#08fd0cf210fd3d598f42c2d68c0249451bd3d783" - integrity sha512-6er7g661HDzUe9z3hoh197VsCf0VxuVq66dD/3NlYZ2pxA4qVC1zYFvmwh9j3IQD89SFofJc2wvEpdxZxEe7OQ== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.0-beta.6.tgz#a9d7fd1f2341f8b286b4b6d51a6ef15bb9527eee" + integrity sha512-EkCjA7jwVwqn/neWrIHKLmHxHW+hXNU0t1xmdtNXHyAWQtCRy8/VHoKW3nGxZ1RvEtBFlkvXzP5H6wfOkgq12Q== "@spectrum-css/textfield@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.5.tgz#d1b7f78f705f121b6fac29625f83e3692c668eac" - integrity sha512-BKB7YQuTSwUWpJmIzUy0v1EG06u0M/uMDNLlTRj7sCmRp3kk6xJlYLLzXfDZGI2aGcSTlL+NhQLKLZv2p6P1OA== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6" + integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ== "@spectrum-css/toast@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.0-beta.5.tgz#5208a57a3a2622ccf8b5ab324e80dc01b5af59b9" - integrity sha512-OPfJ3j0BHYhAu1wPAhbh0wzt+U8ja+awpKz73R5a+jEUU2B/4wnJtOhF9qAMAFE/fZq6wmOQsiUfuf34cKi4Yw== + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.0-beta.6.tgz#bd3f27d30023cc254b6b421e904d8fc6ab73ff1e" + integrity sha512-nEAbQVFxvwy5Ecgi/ffYv/ZlVSDVkKIx1eZndWRvtKW8MykaPk4FKVIEeozNyT+dmEV1QEDOd2q0Cgk4gosSPA== "@spectrum-css/tooltip@^3.0.0-beta.4": - version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.0-beta.4.tgz#4886c901d106c2654b02dc59b12f80d37949b778" - integrity sha512-yhcXpDNoNz4xg5Nl4GRQU8/1dgZfacfzzC7xFkP+6qtMoW7jF9qhe2FDC8G4OO/f/h7RXftXp8R13MNYRv1DMw== + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.0-beta.5.tgz#b56fb4b6565a7ea1befb5dc6f299a5037c4f9d63" + integrity sha512-JFNAwlpjoRxMIR0kWmKcjsQvDKArLlepAAlQ1V2KXaSg64DRFtWwfUsR86sReqJUWD6nrpmFdPZQhNls/IrIJA== "@spectrum-css/typography@^3.0.0-beta.0": - version "3.0.0-beta.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.0-beta.0.tgz#62dc8ee5026944afe157151dd8986fe8ff191df1" - integrity sha512-nKpjXTTlrz7MJig/E5FRoa0UynfHXPKPpLCleiX/LApzAs8gEL2C0WJem+LDexSad72HL1JhxYVrbqjQhaWZdw== + version "3.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.0-beta.1.tgz#c2c2097c49e2711e8d048afcbaa5ccfe1a6ea7f1" + integrity sha512-NnRvEnrTdt53ZUYh42v+ff6bUTUjG1qHctVJrIv8XrivFSc4L475x3lJgHmSVQeDoDLAsVOtISlJBXKrqK5eRQ== "@spectrum-css/underlay@^2.0.8-beta.1": - version "2.0.8-beta.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.8-beta.1.tgz#f6b9565dc57c7c979130b4e9f2ef41aaf3ad9a0f" - integrity sha512-DfM+COQ5MS0evewA34LOcC2ITTXHsehCHlPVgkGeioWMhVMt6EYmO3uL228Ba0+EkpTB+HLr178GXT3Ahfx6Fw== - -"@spectrum-css/vars@^2.3.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-2.3.0.tgz#0ce716fb5ee65f4af9e2d2a7aaae55e8ba4d4c8f" - integrity sha512-k4YwFbv9+7QzBrc3ezvGuHxI3nDTG/6qJsAmhYS1vEyxpxjKmRfiz59P+fqT12PQNjxeNYHyVz1kRgaLA6gw2w== + version "2.0.8-beta.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.8-beta.2.tgz#e16c2db9aba6c00f6d3cd4e3361760c7728fea9f" + integrity sha512-cfOQnxVcDk9D9tdd65rUwNUIcwMbP2WsakDcIWDfROt1yXlt8KifaoWY6aP3vOXjcxr5a3Af8hsih5iggh7GrQ== -"@spectrum-css/vars@^3.0.0-beta.1": - version "3.0.0-beta.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.1.tgz#1d9b1bbbf088f4fea49c806df0588c67b5ca93e5" - integrity sha512-Cn94PP1qimb7Efu1g+/R5i/aWHm083gkLaItNNYUEzVQ0qBAEQi6cI2rKTC20aKTewq3vO0E5PAPXQEM6utm6g== +"@spectrum-css/vars@^3.0.0-beta.1", "@spectrum-css/vars@^3.0.0-beta.2": + version "3.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157" + integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA== "@stylelint/postcss-css-in-js@^0.37.1": version "0.37.1" @@ -7230,7 +7230,7 @@ chokidar@^3.0.0, chokidar@^3.0.2: optionalDependencies: fsevents "~2.1.2" -chokidar@^3.4.3: +chokidar@^3.4.0: version "3.4.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== @@ -9774,7 +9774,7 @@ es-module-lexer@^0.3.13: resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.24.tgz#e6b2900758e9e210d23aec2092efc13ca235adea" integrity sha512-jm/i7KdJtaMDle921xIsA/MQQOGuZ6goYxhlV+k+gQNI7FtP4N6jknrmJvj++3ODpiyFGwQ4PIstJfHJQJNc+g== -es-module-lexer@^0.3.26: +es-module-lexer@^0.3.24: version "0.3.26" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b" integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA== @@ -10327,7 +10327,7 @@ esutils@^2.0.2: resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== -etag@^1.3.0, etag@^1.8.1, etag@~1.8.1: +etag@^1.3.0, etag@~1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= @@ -12612,17 +12612,6 @@ http-errors@1.7.3, http-errors@^1.6.3, http-errors@~1.7.2: statuses ">= 1.5.0 < 2" toidentifier "1.0.0" -http-errors@^1.7.3, http-errors@~1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.0.tgz#75d1bbe497e1044f51e4ee9e704a62f28d336507" - integrity sha512-4I8r0C5JDhT5VkvI47QktDW75rNlGVsUf/8hzjCC/wkWI/jdTRmBb9aI7erSG82r1bjKY3F6k28WnsVxB1C73A== - dependencies: - depd "~1.1.2" - inherits "2.0.4" - setprototypeof "1.2.0" - statuses ">= 1.5.0 < 2" - toidentifier "1.0.0" - http-errors@~1.6.2: version "1.6.3" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d" @@ -12633,6 +12622,17 @@ http-errors@~1.6.2: setprototypeof "1.1.0" statuses ">= 1.4.0 < 2" +http-errors@~1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.0.tgz#75d1bbe497e1044f51e4ee9e704a62f28d336507" + integrity sha512-4I8r0C5JDhT5VkvI47QktDW75rNlGVsUf/8hzjCC/wkWI/jdTRmBb9aI7erSG82r1bjKY3F6k28WnsVxB1C73A== + dependencies: + depd "~1.1.2" + inherits "2.0.4" + setprototypeof "1.2.0" + statuses ">= 1.5.0 < 2" + toidentifier "1.0.0" + "http-parser-js@>=0.4.0 <0.4.11": version "0.4.10" resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4" @@ -14154,13 +14154,6 @@ koa-etag@^3.0.0: etag "^1.3.0" mz "^2.1.0" -koa-etag@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/koa-etag/-/koa-etag-4.0.0.tgz#2c2bb7ae69ca1ac6ced09ba28dcb78523c810414" - integrity sha512-1cSdezCkBWlyuB9l6c/IFoe1ANCDdPBxkDkRiaIup40xpUub6U/wwRXoKBZw/O5BifX9OlqAjYnDyzM6+l+TAg== - dependencies: - etag "^1.8.1" - koa-is-json@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/koa-is-json/-/koa-is-json-1.0.0.tgz#273c07edcdcb8df6a2c1ab7d59ee76491451ec14" @@ -14198,15 +14191,6 @@ koa-send@^5.0.0: mz "^2.7.0" resolve-path "^1.4.0" -koa-send@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/koa-send/-/koa-send-5.0.1.tgz#39dceebfafb395d0d60beaffba3a70b4f543fe79" - integrity sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ== - dependencies: - debug "^4.1.1" - http-errors "^1.7.3" - resolve-path "^1.4.0" - koa-static@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/koa-static/-/koa-static-5.0.0.tgz#5e92fc96b537ad5219f425319c95b64772776943" @@ -23837,11 +23821,6 @@ ws@^7.3.1: resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8" integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA== -ws@^7.4.1: - version "7.4.2" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd" - integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA== - xdg-basedir@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"