diff --git a/package.json b/package.json index 6262ef931c..6825eef3f2 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "@open-wc/demoing-storybook": "^2.4.4", "@open-wc/polyfills-loader": "^0.3.3", "@open-wc/testing": "^2.5.29", - "@spectrum-css/table": "^3.0.0-beta.3", + "@spectrum-css/table": "^3.0.0-beta.4", "@types/chai": "^4.1.7", "@types/command-line-args": "^5.0.0", "@types/command-line-usage": "^5.0.1", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index c521ea4b28..c683e31148 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -50,10 +50,11 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/accordion": "^3.0.0-beta.2" + "@spectrum-css/accordion": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", + "@spectrum-web-components/icon": "^0.6.3", "@spectrum-web-components/icons-ui": "^0.3.3", "@spectrum-web-components/shared": "^0.7.4", "tslib": "^2.0.0" diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index 013defdf76..051ae00ef2 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/packages/accordion/src/AccordionItem.ts @@ -19,8 +19,9 @@ import { ifDefined, } from '@spectrum-web-components/base'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; - +import '@spectrum-web-components/icon/sp-icon.js'; import { ChevronRightMediumIcon } from '@spectrum-web-components/icons-ui'; +import chevronRightMediumIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js'; import styles from './accordion-item.css.js'; @@ -30,7 +31,7 @@ import styles from './accordion-item.css.js'; */ export class AccordionItem extends Focusable { public static get styles(): CSSResultArray { - return [styles]; + return [styles, chevronRightMediumIconStyles]; } @property({ type: Boolean, reflect: true }) @@ -92,7 +93,7 @@ export class AccordionItem extends Focusable { > ${this.label} - + ${ChevronRightMediumIcon({ hidden: true })} diff --git a/packages/accordion/src/accordion-item.css b/packages/accordion/src/accordion-item.css index f9181c10f0..a5d69d51a1 100644 --- a/packages/accordion/src/accordion-item.css +++ b/packages/accordion/src/accordion-item.css @@ -11,3 +11,49 @@ governing permissions and limitations under the License. */ @import './spectrum-accordion-item.css'; + +:host { + --spectrum-accordion-item-header-height: 46px; +} + +/** + * What follows are styles working around: https://github.com/adobe/spectrum-css/issues/1033 + */ +#indicator { + /* .spectrum-Accordion-itemIndicator */ + top: calc( + 50% - + var( + --spectrum-accordion-icon-height, + var(--spectrum-global-dimension-size-125) + ) / 2 + ); +} + +#heading { + /* .spectrum-Accordion-itemHeading */ + height: auto; + position: relative; +} + +#header { + /* .spectrum-Accordion-itemHeader */ + min-height: calc( + 100% - + var( + --spectrum-accordion-item-border-size, + var(--spectrum-alias-border-size-thin) + ) + ); +} + +:host([open]) > #header:after { + /* .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after */ + height: calc( + 100% - + var( + --spectrum-accordion-item-border-size, + var(--spectrum-alias-border-size-thin) + ) + ); +} diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 640d024717..8300f2ae64 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -12,11 +12,17 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) #indicator { /* [dir=ltr] .spectrum-Accordion-itemIndicator */ - left: var(--spectrum-accordion-icon-spacing, 16px); + left: var( + --spectrum-accordion-item-padding-x, + var(--spectrum-global-dimension-size-225) + ); } :host([dir='rtl']) #indicator { /* [dir=rtl] .spectrum-Accordion-itemIndicator */ - right: var(--spectrum-accordion-icon-spacing, 16px); + right: var( + --spectrum-accordion-item-padding-x, + var(--spectrum-global-dimension-size-225) + ); transform: matrix(-1, 0, 0, 1, 0, 0); } #indicator { @@ -30,7 +36,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin) ) - ) / 2 - 5px + ) / 2 - + var( + --spectrum-accordion-icon-height, + var(--spectrum-global-dimension-size-125) + ) / 2 ); transition: transform ease var(--spectrum-global-animation-duration-100, 0.13s); /* .spectrum-Accordion-itemIndicator */ @@ -66,22 +76,58 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #heading { /* .spectrum-Accordion-itemHeading */ margin: 0; + height: var(--spectrum-accordion-item-height, 40px); + box-sizing: border-box; } :host([dir='ltr']) #header { /* [dir=ltr] .spectrum-Accordion-itemHeader */ - padding-left: calc(var(--spectrum-accordion-item-padding, 16px) * 2 + 2px); + padding-left: calc( + 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-accordion-icon-gap, + var(--spectrum-global-dimension-size-100) + ) + + var( + --spectrum-accordion-item-border-left-size-key-focus, + var(--spectrum-alias-border-size-thick) + ) + ); /* [dir=ltr] .spectrum-Accordion-itemHeader */ padding-right: var( - --spectrum-accordion-item-padding, - 16px + --spectrum-accordion-item-padding-x, + var(--spectrum-global-dimension-size-225) ); /* [dir=ltr] .spectrum-Accordion-itemHeader */ text-align: left; } :host([dir='rtl']) #header { /* [dir=rtl] .spectrum-Accordion-itemHeader */ - padding-right: calc(var(--spectrum-accordion-item-padding, 16px) * 2 + 2px); + padding-right: calc( + 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-accordion-icon-gap, + var(--spectrum-global-dimension-size-100) + ) + + var( + --spectrum-accordion-item-border-left-size-key-focus, + var(--spectrum-alias-border-size-thick) + ) + ); /* [dir=rtl] .spectrum-Accordion-itemHeader */ padding-left: var( - --spectrum-accordion-item-padding, - 16px + --spectrum-accordion-item-padding-x, + var(--spectrum-global-dimension-size-225) ); /* [dir=rtl] .spectrum-Accordion-itemHeader */ text-align: right; } @@ -151,7 +197,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ bottom: calc( -1 * var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)) ); - width: var(--spectrum-accordion-item-border-size-key-focus, 2px); + width: var( + --spectrum-accordion-item-border-left-size-key-focus, + var(--spectrum-alias-border-size-thick) + ); } #content { /* .spectrum-Accordion-itemContent */ @@ -225,7 +274,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #header:focus-visible:after { /* .spectrum-Accordion-itemHeader.focus-ring:after */ background-color: var( - --spectrum-accordion-border-left-color-key-focus, + --spectrum-accordion-item-border-left-color-key-focus, var(--spectrum-alias-border-color-focus) ); } diff --git a/packages/action-group/package.json b/packages/action-group/package.json index 1633558af2..a6f73bfbb4 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/actiongroup": "^1.0.0-beta.2", + "@spectrum-css/actiongroup": "^1.0.0-beta.3", "@spectrum-web-components/button": "^0.9.4", "@spectrum-web-components/icon": "^0.6.3", "@spectrum-web-components/icons-workflow": "^0.3.6" diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 5081cf7d60..b1e3cec909 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -19,17 +19,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ActionGroup .spectrum-ActionGroup-item */ flex-shrink: 0; } -:host([dir='ltr']) ::slotted(*:not(:first-of-type)) { - /* [dir=ltr] .spectrum-ActionGroup .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ - margin-left: var( - --spectrum-actionbuttongroup-text-button-gap-x, +:host(:not([vertical]):not([compact])) { + /* .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) */ + margin-top: calc( + -1 * var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)) + ); +} +:host(:not([vertical]):not([compact])) ::slotted(*) { + /* .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item */ + flex-shrink: 0; + margin-top: var( + --spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100) ); } -:host([dir='rtl']) ::slotted(*:not(:first-of-type)) { - /* [dir=rtl] .spectrum-ActionGroup .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ +:host([dir='ltr']:not([vertical]):not([compact])) ::slotted(:not(:last-child)) { + /* [dir=ltr] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) */ margin-right: var( - --spectrum-actionbuttongroup-text-button-gap-x, + --spectrum-actiongroup-button-gap-x, + var(--spectrum-global-dimension-size-100) + ); +} +:host([dir='rtl']:not([vertical]):not([compact])) ::slotted(:not(:last-child)) { + /* [dir=rtl] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) */ + margin-left: var( + --spectrum-actiongroup-button-gap-x, var(--spectrum-global-dimension-size-100) ); } @@ -38,18 +52,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: inline-flex; flex-direction: column; } -:host([dir='ltr'][vertical]) ::slotted(*:not(:first-of-type)) { +:host([dir='ltr'][vertical]) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: 0; } -:host([dir='rtl'][vertical]) ::slotted(*:not(:first-of-type)) { +:host([dir='rtl'][vertical]) ::slotted(:not(:first-child)) { /* [dir=rtl] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-right: 0; } -:host([vertical]) ::slotted(*:not(:first-of-type)) { +:host([vertical]) ::slotted(:not(:first-child)) { /* .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-top: var( - --spectrum-actionbuttongroup-text-button-gap-y, + --spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100) ); } @@ -64,31 +78,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([vertical][vertical]) { /* .spectrum-ActionGroup--vertical.spectrum-ActionGroup--vertical */ margin-top: var( - --spectrum-actionbuttongroup-text-button-gap-y, + --spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100) ); } -:host([dir='ltr'][compact][quiet]) ::slotted(*:not(:first-of-type)) { +:host([dir='ltr'][compact][quiet]) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: var(--spectrum-global-dimension-size-25); } -:host([dir='rtl'][compact][quiet]) ::slotted(*:not(:first-of-type)) { +:host([dir='rtl'][compact][quiet]) ::slotted(:not(:first-child)) { /* [dir=rtl] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-right: var(--spectrum-global-dimension-size-25); } -:host([compact][quiet]) ::slotted(*:not(:first-of-type)) { +:host([compact][quiet]) ::slotted(:not(:first-child)) { /* .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-top: 0; } -:host([dir='ltr'][compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) { +:host([dir='ltr'][compact][quiet][vertical]) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: 0; } -:host([dir='rtl'][compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) { +:host([dir='rtl'][compact][quiet][vertical]) ::slotted(:not(:first-child)) { /* [dir=rtl] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-right: 0; } -:host([compact][quiet][vertical]) ::slotted(*:not(:first-of-type)) { +:host([compact][quiet][vertical]) ::slotted(:not(:first-child)) { /* .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-top: var(--spectrum-global-dimension-size-25); } @@ -172,11 +186,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-left: 0; } -:host([compact]:not([quiet])) ::slotted(*):hover { +:host([compact]:not([quiet])) ::slotted([selected]) { + /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected */ + z-index: 1; +} +:host([compact]:not([quiet])) ::slotted(:hover) { /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover */ z-index: 2; } -:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) { +:host([compact]:not([quiet])) ::slotted(:focus-visible) { + /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.focus-ring */ + z-index: 3; +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: calc( -1 * var( @@ -185,8 +207,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) / 2 ); } -:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)), -:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) { +:host([dir='ltr'][compact]:not([quiet])) ::slotted(:not(:first-child)), +:host([dir='rtl'][compact]:not([quiet])) ::slotted(:not(:first-child)) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item, * [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-right: calc( @@ -196,7 +218,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) / 2 ); } -:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:not(:first-of-type)) { +:host([dir='rtl'][compact]:not([quiet])) ::slotted(:not(:first-child)) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-left: calc( -1 * var( @@ -209,7 +231,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item */ border-radius: 0; } -:host([compact][vertical]:not([quiet])) ::slotted(*:not(:first-of-type)) { +:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)) { /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item+.spectrum-ActionGroup-item */ margin-top: calc( -1 * var( diff --git a/packages/action-group/src/spectrum-config.js b/packages/action-group/src/spectrum-config.js index b44d2c09ff..474d0046bd 100644 --- a/packages/action-group/src/spectrum-config.js +++ b/packages/action-group/src/spectrum-config.js @@ -44,10 +44,26 @@ const config = { ], complexSelectors: [ { - replacement: '::slotted(*:not(:first-of-type))', + replacement: '::slotted(:not(:last-child))', + selector: '.spectrum-ActionGroup-item:not(:last-child)', + }, + { + replacement: '::slotted(:not(:first-child))', selector: '.spectrum-ActionGroup-item+.spectrum-ActionGroup-item', }, + { + replacement: '::slotted([selected])', + selector: '.spectrum-ActionGroup-item.is-selected', + }, + { + replacement: '::slotted(:hover)', + selector: '.spectrum-ActionGroup-item:hover', + }, + { + replacement: '::slotted(:focus-visible)', + selector: '.spectrum-ActionGroup-item.focus-ring', + }, ], }, ], diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index afcc7b0b0d..07397fad2f 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/packages/action-menu/src/ActionMenu.ts @@ -46,7 +46,7 @@ export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') { return [ html` - + ${MoreIcon({ hidden: this.hasLabel })} diff --git a/packages/actionbar/package.json b/packages/actionbar/package.json index a6a20ece1c..befb48c7d7 100644 --- a/packages/actionbar/package.json +++ b/packages/actionbar/package.json @@ -48,7 +48,8 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/actionbar": "^3.0.0-beta.3" + "@spectrum-css/actionbar": "^3.0.0-beta.4", + "@spectrum-web-components/icon": "^0.6.1" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/actionbar/src/actionbar.css b/packages/actionbar/src/actionbar.css index ea75439f8d..bf18b04476 100644 --- a/packages/actionbar/src/actionbar.css +++ b/packages/actionbar/src/actionbar.css @@ -11,3 +11,8 @@ governing permissions and limitations under the License. */ @import './spectrum-actionbar.css'; + +:host([dir='rtl']) #popover { + padding: 0 var(--spectrum-global-dimension-size-200) 0 + calc(var(--spectrum-global-dimension-size-200) / 2); +} diff --git a/packages/actionbar/src/spectrum-actionbar.css b/packages/actionbar/src/spectrum-actionbar.css index f572256feb..34dee8331e 100644 --- a/packages/actionbar/src/spectrum-actionbar.css +++ b/packages/actionbar/src/spectrum-actionbar.css @@ -70,7 +70,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ height: var(--spectrum-global-dimension-size-600); min-width: 280px; max-width: 960px; - padding: 0 var(--spectrum-global-dimension-size-200); + padding: 0 calc(var(--spectrum-global-dimension-size-200) / 2) 0 + var(--spectrum-global-dimension-size-200); flex-direction: row; align-items: center; justify-content: space-between; diff --git a/packages/asset/package.json b/packages/asset/package.json index 6aa9b8f961..eeae5f726b 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/asset": "^3.0.0-beta.2" + "@spectrum-css/asset": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 9b30d5485f..d08d96de9e 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/avatar": "^3.0.0-beta.2" + "@spectrum-css/avatar": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index 8f1f53255a..cdaa1aac3d 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -13,22 +13,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { /* .spectrum-Avatar */ width: var( - --spectrum-avatar-small-width, - var(--spectrum-global-dimension-size-200) + --spectrum-avatar-size-50-width, + var(--spectrum-alias-avatar-size-50) ); height: var( - --spectrum-avatar-small-height, - var(--spectrum-global-dimension-size-200) + --spectrum-avatar-size-50-height, + var(--spectrum-alias-avatar-size-50) ); - border-radius: var(--spectrum-avatar-small-border-radius, 50%); + border-radius: var(--spectrum-avatar-size-50-border-radius, 50%); border-style: none; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; - opacity: var(--spectrum-avatar-small-opacity, 1); + opacity: var(--spectrum-avatar-size-100-opacity, 1); } :host([disabled]) { /* .spectrum-Avatar.is-disabled */ - opacity: var(--spectrum-avatar-small-opacity-disabled, 0.3); + opacity: var(--spectrum-avatar-size-100-opacity-disabled, 0.3); } diff --git a/packages/bar-loader/package.json b/packages/bar-loader/package.json index 12081a6b4a..dc95a5be63 100644 --- a/packages/bar-loader/package.json +++ b/packages/bar-loader/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/barloader": "^3.0.0-beta.2" + "@spectrum-css/progressbar": "^1.0.0-beta.1" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css index 9e8b2ab79a..11d9d5ea94 100644 --- a/packages/bar-loader/src/spectrum-bar-loader.css +++ b/packages/bar-loader/src/spectrum-bar-loader.css @@ -14,14 +14,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 0% { transform: translate( calc( - -1 * var(--spectrum-barloader-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700)) + -1 * var(--spectrum-progressbar-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700)) ) ); } to { transform: translate( var( - --spectrum-barloader-large-width, + --spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400) ) ); @@ -31,7 +31,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 0% { transform: translate( var( - --spectrum-barloader-large-width, + --spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400) ) ); @@ -39,13 +39,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ to { transform: translate( calc( - -1 * var(--spectrum-barloader-large-width, var(--spectrum-global-dimension-size-2400)) + -1 * var(--spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400)) ) ); } } :host { - /* .spectrum-BarLoader */ + /* .spectrum-ProgressBar */ position: relative; display: inline-flex; flex-flow: row wrap; @@ -55,57 +55,57 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host, .track { - /* .spectrum-BarLoader, - * .spectrum-BarLoader-track */ + /* .spectrum-ProgressBar, + * .spectrum-ProgressBar-track */ width: var( - --spectrum-barloader-large-width, + --spectrum-progressbar-large-width, var(--spectrum-global-dimension-size-2400) ); } .track { - /* .spectrum-BarLoader-track */ + /* .spectrum-ProgressBar-track */ overflow: hidden; - border-radius: var(--spectrum-barloader-large-border-radius); - z-index: 1; /* .spectrum-BarLoader .spectrum-BarLoader-track */ + border-radius: var(--spectrum-progressbar-large-border-radius); + z-index: 1; /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ background-color: var( - --spectrum-barloader-large-track-color, + --spectrum-progressbar-large-track-color, var(--spectrum-alias-track-color-default) ); } .fill, .track { - /* .spectrum-BarLoader-fill, - * .spectrum-BarLoader-track */ + /* .spectrum-ProgressBar-fill, + * .spectrum-ProgressBar-track */ height: var( - --spectrum-barloader-large-height, + --spectrum-progressbar-large-height, var(--spectrum-global-dimension-size-75) ); } .fill { - /* .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar-fill */ border: none; - transition: width 1s; /* .spectrum-BarLoader .spectrum-BarLoader-fill */ + transition: width 1s; /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ background: var( - --spectrum-barloader-large-track-fill-color, + --spectrum-progressbar-large-track-fill-color, var(--spectrum-global-color-blue-500) ); } :host([dir='ltr']) .label, :host([dir='ltr']) .percentage { - /* [dir=ltr] .spectrum-BarLoader-label, - * [dir=ltr] .spectrum-BarLoader-percentage */ + /* [dir=ltr] .spectrum-ProgressBar-label, + * [dir=ltr] .spectrum-ProgressBar-percentage */ text-align: left; } :host([dir='rtl']) .label, :host([dir='rtl']) .percentage { - /* [dir=rtl] .spectrum-BarLoader-label, - * [dir=rtl] .spectrum-BarLoader-percentage */ + /* [dir=rtl] .spectrum-ProgressBar-label, + * [dir=rtl] .spectrum-ProgressBar-percentage */ text-align: right; } .label, .percentage { - /* .spectrum-BarLoader-label, - * .spectrum-BarLoader-percentage */ + /* .spectrum-ProgressBar-label, + * .spectrum-ProgressBar-percentage */ font-size: var( --spectrum-fieldlabel-text-size, var(--spectrum-global-dimension-font-size-75) @@ -119,168 +119,168 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-font-line-height-small) ); margin-bottom: var( - --spectrum-barloader-large-label-gap-y, + --spectrum-progressbar-large-label-gap-y, var(--spectrum-global-dimension-size-115) ); } .label { - /* .spectrum-BarLoader-label */ + /* .spectrum-ProgressBar-label */ flex: 1 1 0%; } :host([dir='ltr']) .percentage { - /* [dir=ltr] .spectrum-BarLoader-percentage */ + /* [dir=ltr] .spectrum-ProgressBar-percentage */ margin-left: var( - --spectrum-barloader-small-label-gap-x, + --spectrum-progressbar-small-label-gap-x, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl']) .percentage { - /* [dir=rtl] .spectrum-BarLoader-percentage */ + /* [dir=rtl] .spectrum-ProgressBar-percentage */ margin-right: var( - --spectrum-barloader-small-label-gap-x, + --spectrum-progressbar-small-label-gap-x, var(--spectrum-global-dimension-size-150) ); } .percentage { - /* .spectrum-BarLoader-percentage */ + /* .spectrum-ProgressBar-percentage */ align-self: flex-start; } :host([side-label]) { - /* .spectrum-BarLoader--sideLabel */ + /* .spectrum-ProgressBar--sideLabel */ display: inline-flex; flex-flow: row; justify-content: space-between; width: auto; } :host([dir='ltr'][side-label]) .label { - /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */ + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ margin-right: var( - --spectrum-barloader-large-label-gap-x, + --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl'][side-label]) .label { - /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */ + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ margin-left: var( - --spectrum-barloader-large-label-gap-x, + --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) ); } :host([side-label]) .label { - /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */ + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label */ margin-bottom: 0; } :host([dir='ltr'][side-label]) .percentage { - /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */ - text-align: right; /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */ + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: right; /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-left: var( - --spectrum-barloader-large-label-gap-x, + --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl'][side-label]) .percentage { - /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */ - text-align: left; /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */ + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: left; /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-right: var( - --spectrum-barloader-large-label-gap-x, + --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) ); } :host([side-label]) .percentage { - /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */ + /* .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ order: 3; margin-bottom: 0; } :host([small]) { - /* .spectrum-BarLoader--small */ + /* .spectrum-ProgressBar--small */ min-width: var( - --spectrum-barloader-small-width, + --spectrum-progressbar-small-width, var(--spectrum-global-dimension-size-2400) ); } :host([small]) .fill, :host([small]) .track { - /* .spectrum-BarLoader--small .spectrum-BarLoader-fill, - * .spectrum-BarLoader--small .spectrum-BarLoader-track */ + /* .spectrum-ProgressBar--small .spectrum-ProgressBar-fill, + * .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ height: var( - --spectrum-barloader-small-height, + --spectrum-progressbar-small-height, var(--spectrum-global-dimension-size-50) ); } :host([small]) .track { - /* .spectrum-BarLoader--small .spectrum-BarLoader-track */ - border-radius: var(--spectrum-barloader-small-border-radius); + /* .spectrum-ProgressBar--small .spectrum-ProgressBar-track */ + border-radius: var(--spectrum-progressbar-small-border-radius); } :host([indeterminate]) .fill { - /* .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ width: var( - --spectrum-barloader-large-indeterminate-fill-width, + --spectrum-progressbar-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700) ); position: relative; animation-timing-function: var( - --spectrum-barloader-large-indeterminate-animation-ease, + --spectrum-progressbar-large-indeterminate-animation-ease, var(--spectrum-global-animation-ease-in-out) ); will-change: transform; } :host([dir='ltr'][indeterminate]) .fill { - /* [dir=ltr] .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill */ + /* [dir=ltr] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-ltr var( - --spectrum-barloader-large-indeterminate-duration, + --spectrum-progressbar-large-indeterminate-duration, var(--spectrum-global-animation-duration-2000) ) infinite; } :host([dir='rtl'][indeterminate]) .fill { - /* [dir=rtl] .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill */ + /* [dir=rtl] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill */ animation: indeterminate-loop-rtl var( - --spectrum-barloader-large-indeterminate-duration, + --spectrum-progressbar-large-indeterminate-duration, var(--spectrum-global-animation-duration-2000) ) infinite; } :host([over-background]) .fill { - /* .spectrum-BarLoader.spectrum-BarLoader--overBackground .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ background: var( - --spectrum-barloader-large-over-background-track-fill-color, + --spectrum-progressbar-large-over-background-track-fill-color, var(--spectrum-global-color-static-white) ); } :host([over-background]) .label, :host([over-background]) .percentage { - /* .spectrum-BarLoader.spectrum-BarLoader--overBackground .spectrum-BarLoader-label, - * .spectrum-BarLoader.spectrum-BarLoader--overBackground .spectrum-BarLoader-percentage */ + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-label, + * .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-percentage */ color: var( - --spectrum-barloader-large-over-background-track-fill-color, + --spectrum-progressbar-large-over-background-track-fill-color, var(--spectrum-global-color-static-white) ); } :host([over-background]) .track { - /* .spectrum-BarLoader.spectrum-BarLoader--overBackground .spectrum-BarLoader-track */ + /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-track */ background-color: var( - --spectrum-barloader-large-over-background-track-color, + --spectrum-progressbar-large-over-background-track-color, var(--spectrum-alias-track-color-over-background) ); } :host([positive]) .fill { - /* .spectrum-BarLoader.is-positive .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar.is-positive .spectrum-ProgressBar-fill */ background: var( --spectrum-meter-large-track-color-positive, var(--spectrum-semantic-positive-color-status) ); } :host([warning]) .fill { - /* .spectrum-BarLoader.is-warning .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar.is-warning .spectrum-ProgressBar-fill */ background: var( --spectrum-meter-large-track-color-warning, var(--spectrum-semantic-notice-color-status) ); } :host([critical]) .fill { - /* .spectrum-BarLoader.is-critical .spectrum-BarLoader-fill */ + /* .spectrum-ProgressBar.is-critical .spectrum-ProgressBar-fill */ background: var( --spectrum-meter-large-track-color-critical, var(--spectrum-semantic-negative-color-status) @@ -288,8 +288,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } .label, .percentage { - /* .spectrum-BarLoader-label, - * .spectrum-BarLoader-percentage */ + /* .spectrum-ProgressBar-label, + * .spectrum-ProgressBar-percentage */ color: var( --spectrum-fieldlabel-text-color, var(--spectrum-alias-label-text-color) diff --git a/packages/bar-loader/src/spectrum-config.js b/packages/bar-loader/src/spectrum-config.js index 859cb473e7..0cf20faf33 100644 --- a/packages/bar-loader/src/spectrum-config.js +++ b/packages/bar-loader/src/spectrum-config.js @@ -11,33 +11,33 @@ governing permissions and limitations under the License. */ const config = { - spectrum: 'barloader', + spectrum: 'progressbar', components: [ { name: 'bar-loader', host: { - selector: '.spectrum-BarLoader', + selector: '.spectrum-ProgressBar', }, attributes: [ { type: 'boolean', - selector: '.spectrum-BarLoader--sideLabel', + selector: '.spectrum-ProgressBar--sideLabel', name: 'side-label', }, { type: 'boolean', - selector: '.spectrum-BarLoader--small', + selector: '.spectrum-ProgressBar--small', name: 'small', }, { type: 'boolean', - selector: '.spectrum-BarLoader--indeterminate', + selector: '.spectrum-ProgressBar--indeterminate', name: 'indeterminate', }, { type: 'boolean', name: 'over-background', - selector: '.spectrum-BarLoader--overBackground', + selector: '.spectrum-ProgressBar--overBackground', }, { type: 'boolean', @@ -57,19 +57,19 @@ const config = { ], classes: [ { - selector: '.spectrum-BarLoader-track', + selector: '.spectrum-ProgressBar-track', name: 'track', }, { - selector: '.spectrum-BarLoader-fill', + selector: '.spectrum-ProgressBar-fill', name: 'fill', }, { - selector: '.spectrum-BarLoader-label', + selector: '.spectrum-ProgressBar-label', name: 'label', }, { - selector: '.spectrum-BarLoader-percentage', + selector: '.spectrum-ProgressBar-percentage', name: 'percentage', }, ], diff --git a/packages/button-group/package.json b/packages/button-group/package.json index 3ab8339375..8e181b0514 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/buttongroup": "^3.0.0-beta.3", + "@spectrum-css/buttongroup": "^3.0.0-beta.4", "@spectrum-web-components/button": "^0.9.4" }, "dependencies": { diff --git a/packages/card/package.json b/packages/card/package.json index ca1f7d43b1..4a70124779 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/card": "^3.0.0-beta.2" + "@spectrum-css/card": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/asset": "^0.1.5", diff --git a/packages/card/src/card.css b/packages/card/src/card.css index b5bbda4adb..2f157d776c 100644 --- a/packages/card/src/card.css +++ b/packages/card/src/card.css @@ -55,4 +55,67 @@ sp-quick-actions { **/ .heading { width: var(--spectrum-card-title-width); + + /* Appliction of typography "classes" */ + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); + font-weight: var( + --spectrum-heading-m-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) + ); + line-height: var( + --spectrum-heading-xs-text-line-height, + var(--spectrum-alias-heading-text-line-height) + ); + font-style: var( + --spectrum-heading-xs-text-font-style, + var(--spectrum-global-font-style-regular) + ); + font-size: var( + --spectrum-heading-xs-text-size, + var(--spectrum-alias-heading-xs-text-size) + ); + letter-spacing: var( + --spectrum-heading-xs-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) + ); + color: var( + --spectrum-heading-xs-text-color, + var(--spectrum-alias-heading-text-color) + ); + text-transform: var(--spectrum-heading-xs-text-transform, none); + margin-top: 0; + margin-bottom: 0; +} + +.subtitle { + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); + font-size: var( + --spectrum-detail-s-text-size, + var(--spectrum-global-dimension-font-size-50) + ); + font-weight: var( + --spectrum-detail-s-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) + ); + line-height: var( + --spectrum-detail-s-text-line-height, + var(--spectrum-alias-body-text-line-height) + ); + font-style: var( + --spectrum-detail-s-text-font-style, + var(--spectrum-global-font-style-regular) + ); + letter-spacing: var( + --spectrum-detail-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) + ); + text-transform: var(--spectrum-detail-s-text-transform, uppercase); + margin-top: 0; + margin-bottom: 0; } diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 25b5614cd8..d02f8ab5f9 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -268,17 +268,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } .title { /* .spectrum-Card-title */ - font-size: var( - --spectrum-card-title-text-size, - var(--spectrum-global-dimension-font-size-100) - ); white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; /* .spectrum-Card .spectrum-Card-title */ - color: var( - --spectrum-alias-text-color, - var(--spectrum-global-color-gray-800) - ); + text-overflow: ellipsis; } :host([dir='ltr']) .subtitle { /* [dir=ltr] .spectrum-Card-subtitle */ @@ -294,18 +286,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) ); } -.subtitle { - /* .spectrum-Card-subtitle */ - letter-spacing: var( - --spectrum-card-subtitle-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: uppercase; -} -::slotted([slot='description']), -.subtitle { - /* .spectrum-Card-description, - * .spectrum-Card-subtitle */ +::slotted([slot='description']) { + /* .spectrum-Card-description */ font-size: var( --spectrum-card-subtitle-text-size, var(--spectrum-global-dimension-font-size-50) diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index a58edc4e48..dce9908417 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/checkbox": "^3.0.0-beta.3" + "@spectrum-css/checkbox": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css index 7643deae2c..44fe8f2248 100644 --- a/packages/checkbox/src/checkbox.css +++ b/packages/checkbox/src/checkbox.css @@ -47,3 +47,14 @@ governing permissions and limitations under the License. ); } /* stylelint-enable no-descending-specificity */ + +/** + * Partial work around until FieldGroup is implemented + */ +:host([dir='ltr']:not(:first-of-type)) { + margin: 0 0 0 var(--spectrum-global-dimension-size-200); +} + +:host([dir='rtl']:not(:first-of-type)) { + margin: 0 var(--spectrum-global-dimension-size-200) 0 0; +} diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index 1c18bcf455..45606e4832 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -10,24 +10,6 @@ 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-Checkbox */ - margin-right: calc( - var( - --spectrum-checkbox-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); -} -:host([dir='rtl']) { - /* [dir=rtl] .spectrum-Checkbox */ - margin-left: calc( - var( - --spectrum-checkbox-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); -} :host { /* .spectrum-Checkbox */ display: inline-flex; @@ -44,28 +26,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-text-color) ); /* .spectrum-Checkbox */ border-color: var( - --spectrum-checkbox-emphasized-box-border-color, + --spectrum-checkbox-box-border-color, var(--spectrum-global-color-gray-600) ); } -:host([dir='ltr']) #input { - /* [dir=ltr] .spectrum-Checkbox-input */ - left: calc( - var( - --spectrum-checkbox-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * -1 - ); -} -:host([dir='rtl']) #input { - /* [dir=rtl] .spectrum-Checkbox-input */ - right: calc( - var( - --spectrum-checkbox-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * -1 - ); -} #input { /* .spectrum-Checkbox-input */ font-family: inherit; @@ -76,14 +40,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-sizing: border-box; padding: 0; position: absolute; - top: 0; - width: calc( - 100% + - var( - --spectrum-checkbox-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); + width: 100%; height: 100%; opacity: 0.0001; z-index: 1; @@ -177,9 +134,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-checkbox-text-font-weight, var(--spectrum-global-font-weight-regular) ); - line-height: 1.49; /* .spectrum-Checkbox-label */ + 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) + ); + transition: color var(--spectrum-global-animation-duration-100, 0.13s) + ease-in-out; /* .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-emphasized-text-color, + --spectrum-checkbox-text-color, var(--spectrum-alias-text-color) ); } @@ -235,12 +201,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; /* .spectrum-Checkbox-box:before */ + forced-color-adjust: none; border-color: var( - --spectrum-checkbox-emphasized-box-border-color, + --spectrum-checkbox-box-border-color, var(--spectrum-global-color-gray-600) ); background-color: var( - --spectrum-checkbox-emphasized-box-background-color, + --spectrum-checkbox-box-background-color, var(--spectrum-global-color-gray-75) ); } @@ -328,8 +295,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before, * .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before */ border-color: var( - --spectrum-checkbox-emphasized-box-border-color-selected, - var(--spectrum-global-color-blue-500) + --spectrum-checkbox-box-border-color-selected, + var(--spectrum-global-color-gray-700) ); } :host(:hover[indeterminate]) #box:before, @@ -337,8 +304,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .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-emphasized-box-border-color-selected-hover, - var(--spectrum-global-color-blue-600) + --spectrum-checkbox-box-border-color-selected-hover, + var(--spectrum-global-color-gray-800) ); } :host(:active[indeterminate]) #box:before, @@ -346,35 +313,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .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-emphasized-box-border-color-selected-down, - var(--spectrum-global-color-blue-700) + --spectrum-checkbox-box-border-color-selected-down, + var(--spectrum-global-color-gray-900) ); } :host(:hover) #box:before { /* .spectrum-Checkbox:hover .spectrum-Checkbox-box:before */ border-color: var( - --spectrum-checkbox-emphasized-box-border-color-hover, + --spectrum-checkbox-box-border-color-hover, var(--spectrum-global-color-gray-700) ); } :host(:hover) #label { /* .spectrum-Checkbox:hover .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-emphasized-text-color-hover, + --spectrum-checkbox-text-color-hover, var(--spectrum-alias-text-color-hover) ); } :host(:active) #box:before { /* .spectrum-Checkbox:active .spectrum-Checkbox-box:before */ border-color: var( - --spectrum-checkbox-emphasized-box-border-color-down, + --spectrum-checkbox-box-border-color-down, var(--spectrum-global-color-gray-800) ); } :host(:active) #label { /* .spectrum-Checkbox:active .spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-emphasized-text-color-down, + --spectrum-checkbox-text-color-down, var(--spectrum-alias-text-color-down) ); } @@ -383,11 +350,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .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-emphasized-box-border-color-disabled, + --spectrum-checkbox-box-border-color-disabled, var(--spectrum-global-color-gray-400) ); background-color: var( - --spectrum-checkbox-emphasized-box-background-color-disabled, + --spectrum-checkbox-box-background-color-disabled, var(--spectrum-global-color-gray-75) ); } @@ -395,6 +362,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([disabled]) #input ~ #label { /* .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled~.spectrum-Checkbox-label, * .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) @@ -412,44 +380,47 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .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-emphasized-box-border-color-selected-hover, - var(--spectrum-global-color-blue-600) + --spectrum-checkbox-box-border-color-selected-key-focus, + var(--spectrum-global-color-gray-800) ); } #input:focus-visible ~ #label { /* .spectrum-Checkbox-input.focus-ring~.spectrum-Checkbox-label */ color: var( - --spectrum-checkbox-emphasized-text-color-hover, + --spectrum-checkbox-text-color-key-focus, var(--spectrum-alias-text-color-hover) ); } -:host([quiet][indeterminate]) #box:before, -:host([quiet][indeterminate]) #input:focus-visible + #box:before, -:host([quiet]) #input:checked + #box:before { - /* .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-box:before, - * .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:before, - * .spectrum-Checkbox--quiet .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ +:host([indeterminate]) .spectrum-Checkbox--emphasized #box:before, +:host([indeterminate]) + .spectrum-Checkbox--emphasized + #input:focus-visible + + #box:before, +.spectrum-Checkbox--emphasized #input:checked + #box:before { + /* .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-quiet-box-border-color-selected, - var(--spectrum-global-color-gray-700) + --spectrum-checkbox-emphasized-box-border-color-selected, + var(--spectrum-global-color-blue-500) ); } -:host([quiet][indeterminate]:hover) #box:before, -:host([quiet]:hover) #input:checked + #box:before { - /* .spectrum-Checkbox--quiet:hover.is-indeterminate .spectrum-Checkbox-box:before, - * .spectrum-Checkbox--quiet:hover .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ +:host([indeterminate]) .spectrum-Checkbox--emphasized:hover #box:before, +.spectrum-Checkbox--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-quiet-box-border-color-selected-hover, - var(--spectrum-global-color-gray-800) + --spectrum-checkbox-emphasized-box-border-color-selected-hover, + var(--spectrum-global-color-blue-600) ); } -:host([quiet][indeterminate]:active) #box:before, -:host([quiet]:active) #input:checked + #box:before { - /* .spectrum-Checkbox--quiet:active.is-indeterminate .spectrum-Checkbox-box:before, - * .spectrum-Checkbox--quiet:active .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ +:host([indeterminate]) .spectrum-Checkbox--emphasized:active #box:before, +.spectrum-Checkbox--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-quiet-box-border-color-selected-down, - var(--spectrum-global-color-gray-900) + --spectrum-checkbox-emphasized-box-border-color-selected-down, + var(--spectrum-global-color-blue-700) ); } :host([invalid]) #box:before, @@ -518,3 +489,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-red-700) ); } +#input:focus-visible + #box { + /* .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box */ + forced-color-adjust: none; + outline-color: var( + --spectrum-checkbox-focus-ring-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + outline-style: auto; + outline-offset: var( + --spectrum-checkbox-focus-ring-gap-key-focus, + var(--spectrum-alias-focus-ring-gap) + ); + outline-width: var( + --spectrum-checkbox-focus-ring-size-key-focus, + var(--spectrum-alias-focus-ring-size) + ); +} diff --git a/packages/circle-loader/package.json b/packages/circle-loader/package.json index 1480012788..5e7165f782 100644 --- a/packages/circle-loader/package.json +++ b/packages/circle-loader/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/circleloader": "^3.0.0-beta.2" + "@spectrum-css/progresscircle": "^1.0.0-beta.1" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/circle-loader/src/spectrum-circle-loader.css b/packages/circle-loader/src/spectrum-circle-loader.css index fa3f73e8f5..e9cf9bc218 100644 --- a/packages/circle-loader/src/spectrum-circle-loader.css +++ b/packages/circle-loader/src/spectrum-circle-loader.css @@ -383,83 +383,83 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } } .fill-submask-2 { - /* .spectrum-CircleLoader--indeterminate-fill-submask-2 */ + /* .spectrum-ProgressCircle--indeterminate-fill-submask-2 */ animation: spectrum-fill-mask-2 1s linear infinite; } :host { - /* .spectrum-CircleLoader */ + /* .spectrum-ProgressCircle */ display: inline-block; position: relative; direction: ltr; } :host, .track { - /* .spectrum-CircleLoader, - * .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle, + * .spectrum-ProgressCircle-track */ width: var( - --spectrum-loader-circle-medium-width, - var(--spectrum-global-dimension-static-size-400) + --spectrum-progresscircle-medium-width, + var(--spectrum-global-dimension-size-400) ); height: var( - --spectrum-loader-circle-medium-height, - var(--spectrum-global-dimension-static-size-400) + --spectrum-progresscircle-medium-height, + var(--spectrum-global-dimension-size-400) ); } .track { - /* .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle-track */ box-sizing: border-box; border-style: solid; - border-width: var(--spectrum-loader-circle-medium-border-size); + border-width: var(--spectrum-progresscircle-medium-border-size); border-radius: var( - --spectrum-loader-circle-medium-width, - var(--spectrum-global-dimension-static-size-400) - ); /* .spectrum-CircleLoader-track */ + --spectrum-progresscircle-medium-width, + var(--spectrum-global-dimension-size-400) + ); /* .spectrum-ProgressCircle-track */ border-color: var( - --spectrum-loader-circle-medium-track-color, + --spectrum-progresscircle-medium-track-color, var(--spectrum-alias-track-color-default) ); } :host([dir='ltr']) .fills { - /* [dir=ltr] .spectrum-CircleLoader-fills */ + /* [dir=ltr] .spectrum-ProgressCircle-fills */ left: 0; } :host([dir='rtl']) .fills { - /* [dir=rtl] .spectrum-CircleLoader-fills */ + /* [dir=rtl] .spectrum-ProgressCircle-fills */ right: 0; } .fills { - /* .spectrum-CircleLoader-fills */ + /* .spectrum-ProgressCircle-fills */ position: absolute; top: 0; width: 100%; height: 100%; } .fill { - /* .spectrum-CircleLoader-fill */ + /* .spectrum-ProgressCircle-fill */ box-sizing: border-box; width: var( - --spectrum-loader-circle-medium-width, - var(--spectrum-global-dimension-static-size-400) + --spectrum-progresscircle-medium-width, + var(--spectrum-global-dimension-size-400) ); height: var( - --spectrum-loader-circle-medium-height, - var(--spectrum-global-dimension-static-size-400) + --spectrum-progresscircle-medium-height, + var(--spectrum-global-dimension-size-400) ); border-style: solid; - border-width: var(--spectrum-loader-circle-medium-border-size); + border-width: var(--spectrum-progresscircle-medium-border-size); border-radius: var( - --spectrum-loader-circle-medium-width, - var(--spectrum-global-dimension-static-size-400) - ); /* .spectrum-CircleLoader-fill */ + --spectrum-progresscircle-medium-width, + var(--spectrum-global-dimension-size-400) + ); /* .spectrum-ProgressCircle-fill */ border-color: var( - --spectrum-loader-circle-medium-track-fill-color, + --spectrum-progresscircle-medium-track-fill-color, var(--spectrum-global-color-blue-500) ); } .fillMask1, .fillMask2 { - /* .spectrum-CircleLoader-fillMask1, - * .spectrum-CircleLoader-fillMask2 */ + /* .spectrum-ProgressCircle-fillMask1, + * .spectrum-ProgressCircle-fillMask2 */ width: 50%; height: 100%; transform-origin: 100% center; @@ -469,8 +469,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } .fillSubMask1, .fillSubMask2 { - /* .spectrum-CircleLoader-fillSubMask1, - * .spectrum-CircleLoader-fillSubMask2 */ + /* .spectrum-ProgressCircle-fillSubMask1, + * .spectrum-ProgressCircle-fillSubMask2 */ width: 100%; height: 100%; transform-origin: 100% center; @@ -478,74 +478,74 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transform: rotate(-180deg); } .fillMask2 { - /* .spectrum-CircleLoader-fillMask2 */ + /* .spectrum-ProgressCircle-fillMask2 */ transform: rotate(0deg); } :host([size='small']) { - /* .spectrum-CircleLoader--small */ + /* .spectrum-ProgressCircle--small */ width: var( - --spectrum-loader-circle-small-width, - var(--spectrum-global-dimension-static-size-200) + --spectrum-progresscircle-small-width, + var(--spectrum-global-dimension-size-200) ); height: var( - --spectrum-loader-circle-small-height, - var(--spectrum-global-dimension-static-size-200) + --spectrum-progresscircle-small-height, + var(--spectrum-global-dimension-size-200) ); } :host([size='small']) .fill, :host([size='small']) .track { - /* .spectrum-CircleLoader--small .spectrum-CircleLoader-fill, - * .spectrum-CircleLoader--small .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle--small .spectrum-ProgressCircle-fill, + * .spectrum-ProgressCircle--small .spectrum-ProgressCircle-track */ width: var( - --spectrum-loader-circle-small-width, - var(--spectrum-global-dimension-static-size-200) + --spectrum-progresscircle-small-width, + var(--spectrum-global-dimension-size-200) ); height: var( - --spectrum-loader-circle-small-height, - var(--spectrum-global-dimension-static-size-200) + --spectrum-progresscircle-small-height, + var(--spectrum-global-dimension-size-200) ); border-style: solid; - border-width: var(--spectrum-loader-circle-small-border-size); + border-width: var(--spectrum-progresscircle-small-border-size); border-radius: var( - --spectrum-loader-circle-small-width, - var(--spectrum-global-dimension-static-size-200) + --spectrum-progresscircle-small-width, + var(--spectrum-global-dimension-size-200) ); } :host([size='large']) { - /* .spectrum-CircleLoader--large */ + /* .spectrum-ProgressCircle--large */ width: var( - --spectrum-loader-circle-large-width, + --spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800) ); height: var( - --spectrum-loader-circle-large-height, + --spectrum-progresscircle-large-height, var(--spectrum-global-dimension-size-800) ); } :host([size='large']) .fill, :host([size='large']) .track { - /* .spectrum-CircleLoader--large .spectrum-CircleLoader-fill, - * .spectrum-CircleLoader--large .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle--large .spectrum-ProgressCircle-fill, + * .spectrum-ProgressCircle--large .spectrum-ProgressCircle-track */ width: var( - --spectrum-loader-circle-large-width, + --spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800) ); height: var( - --spectrum-loader-circle-large-height, + --spectrum-progresscircle-large-height, var(--spectrum-global-dimension-size-800) ); border-style: solid; border-width: var( - --spectrum-loader-circle-large-border-size, + --spectrum-progresscircle-large-border-size, var(--spectrum-global-dimension-size-50) ); border-radius: var( - --spectrum-loader-circle-large-width, + --spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800) ); } :host([indeterminate]) .fills { - /* .spectrum-CircleLoader--indeterminate .spectrum-CircleLoader-fills */ + /* .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills */ will-change: transform; transform: translateZ(0); animation: spectrum-fills-rotate 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) @@ -553,42 +553,42 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transform-origin: center; } :host([indeterminate]) .fillSubMask1 { - /* .spectrum-CircleLoader--indeterminate .spectrum-CircleLoader-fillSubMask1 */ + /* .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1 */ will-change: transform; transform: translateZ(0); animation: spectrum-fill-mask-1 1s linear infinite; } :host([indeterminate]) .fillSubMask2 { - /* .spectrum-CircleLoader--indeterminate .spectrum-CircleLoader-fillSubMask2 */ + /* .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2 */ will-change: transform; transform: translateZ(0); animation: spectrum-fill-mask-2 1s linear infinite; } :host([over-background]) .track { - /* .spectrum-CircleLoader--overBackground .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track */ border-color: var( - --spectrum-loader-circle-medium-over-background-track-color, + --spectrum-progresscircle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background) ); } :host([over-background]) .fill { - /* .spectrum-CircleLoader--overBackground .spectrum-CircleLoader-fill */ + /* .spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill */ border-color: var( - --spectrum-loader-circle-medium-over-background-track-fill-color, + --spectrum-progresscircle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white) ); } :host([indeterminate][over-background]) .track { - /* .spectrum-CircleLoader--indeterminate.spectrum-CircleLoader--overBackground .spectrum-CircleLoader-track */ + /* .spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track */ border-color: var( - --spectrum-loader-circle-medium-over-background-track-color, + --spectrum-progresscircle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background) ); } :host([indeterminate][over-background]) .fill { - /* .spectrum-CircleLoader--indeterminate.spectrum-CircleLoader--overBackground .spectrum-CircleLoader-fill */ + /* .spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill */ border-color: var( - --spectrum-loader-circle-medium-over-background-track-fill-color, + --spectrum-progresscircle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white) ); } diff --git a/packages/circle-loader/src/spectrum-config.js b/packages/circle-loader/src/spectrum-config.js index 9a49c16e3f..7339bcf678 100644 --- a/packages/circle-loader/src/spectrum-config.js +++ b/packages/circle-loader/src/spectrum-config.js @@ -10,63 +10,63 @@ governing permissions and limitations under the License. */ const config = { - spectrum: 'circleloader', + spectrum: 'progresscircle', components: [ { name: 'circle-loader', - host: '.spectrum-CircleLoader', + host: '.spectrum-ProgressCircle', attributes: [ { type: 'boolean', - selector: '.spectrum-CircleLoader--indeterminate', + selector: '.spectrum-ProgressCircle--indeterminate', name: 'indeterminate', }, { type: 'enum', name: 'size', values: [ - '.spectrum-CircleLoader--small', - '.spectrum-CircleLoader--large', + '.spectrum-ProgressCircle--small', + '.spectrum-ProgressCircle--large', ], }, { type: 'boolean', name: 'over-background', - selector: '.spectrum-CircleLoader--overBackground', + selector: '.spectrum-ProgressCircle--overBackground', }, ], classes: [ { - selector: '.spectrum-CircleLoader-track', + selector: '.spectrum-ProgressCircle-track', name: 'track', }, { - selector: '.spectrum-CircleLoader-fills', + selector: '.spectrum-ProgressCircle-fills', name: 'fills', }, { - selector: '.spectrum-CircleLoader-fill', + selector: '.spectrum-ProgressCircle-fill', name: 'fill', }, { - selector: '.spectrum-CircleLoader-fillMask1', + selector: '.spectrum-ProgressCircle-fillMask1', name: 'fillMask1', }, { - selector: '.spectrum-CircleLoader-fillMask2', + selector: '.spectrum-ProgressCircle-fillMask2', name: 'fillMask2', }, { - selector: '.spectrum-CircleLoader-fillSubMask1', + selector: '.spectrum-ProgressCircle-fillSubMask1', name: 'fillSubMask1', }, { - selector: '.spectrum-CircleLoader-fillSubMask2', + selector: '.spectrum-ProgressCircle-fillSubMask2', name: 'fillSubMask2', }, { selector: - '.spectrum-CircleLoader--indeterminate-fill-submask-2', + '.spectrum-ProgressCircle--indeterminate-fill-submask-2', name: 'fill-submask-2', }, ], diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index b3ffa486aa..32bc1e064e 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/coachmark": "^3.0.0-beta.3" + "@spectrum-css/coachmark": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json index 530ba7391e..e0f2c7051c 100644 --- a/packages/dropdown/package.json +++ b/packages/dropdown/package.json @@ -53,7 +53,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/dropdown": "^3.0.0-beta.3" + "@spectrum-css/picker": "^1.0.0-beta.1" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/dropdown/src/spectrum-config.js b/packages/dropdown/src/spectrum-config.js index f493c6b628..6feef9f101 100644 --- a/packages/dropdown/src/spectrum-config.js +++ b/packages/dropdown/src/spectrum-config.js @@ -10,17 +10,17 @@ governing permissions and limitations under the License. */ const config = { - spectrum: 'dropdown', + spectrum: 'picker', components: [ { name: 'dropdown', host: { - selector: '.spectrum-Dropdown', + selector: '.spectrum-Picker', }, attributes: [ { type: 'boolean', - selector: '.spectrum-Dropdown--quiet', + selector: '.spectrum-Picker--quiet', }, { type: 'boolean', @@ -39,7 +39,7 @@ const config = { name: 'icon', }, { - selector: '.spectrum-Dropdown-icon', + selector: '.spectrum-Picker-icon', name: 'dropdown', }, { @@ -53,15 +53,15 @@ const config = { ], ids: [ { - selector: '.spectrum-Dropdown-trigger', + selector: '.spectrum-Picker-trigger', name: 'button', }, { - selector: '.spectrum-Dropdown-label', + selector: '.spectrum-Picker-label', name: 'label', }, { - selector: '.spectrum-Dropdown-popover', + selector: '.spectrum-Picker-popover', name: 'popover', }, ], diff --git a/packages/dropdown/src/spectrum-dropdown.css b/packages/dropdown/src/spectrum-dropdown.css index 3a07445762..3bb7f13675 100644 --- a/packages/dropdown/src/spectrum-dropdown.css +++ b/packages/dropdown/src/spectrum-dropdown.css @@ -11,47 +11,47 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - /* .spectrum-Dropdown */ + /* .spectrum-Picker */ position: relative; display: inline-block; max-width: 100%; width: var(--spectrum-global-dimension-size-2400); min-width: var( - --spectrum-dropdown-min-width, - var(--spectrum-global-dimension-size-600) + --spectrum-picker-min-width, + var(--spectrum-global-dimension-size-400) ); } select { - /* .spectrum-Dropdown select */ + /* .spectrum-Picker select */ -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; } select::-ms-expand { - /* .spectrum-Dropdown select::-ms-expand */ + /* .spectrum-Picker select::-ms-expand */ display: none; } select::-ms-value { - /* .spectrum-Dropdown select::-ms-value */ + /* .spectrum-Picker select::-ms-value */ background-color: initial; } :host([dir='ltr']) select + .dropdown { - /* [dir=ltr] .spectrum-Dropdown select+.spectrum-Dropdown-icon */ + /* [dir=ltr] .spectrum-Picker select+.spectrum-Picker-icon */ right: var( - --spectrum-dropdown-padding-x, + --spectrum-picker-padding-x, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl']) select + .dropdown { - /* [dir=rtl] .spectrum-Dropdown select+.spectrum-Dropdown-icon */ + /* [dir=rtl] .spectrum-Picker select+.spectrum-Picker-icon */ left: var( - --spectrum-dropdown-padding-x, + --spectrum-picker-padding-x, var(--spectrum-global-dimension-size-150) ); } select + .dropdown { - /* .spectrum-Dropdown select+.spectrum-Dropdown-icon */ + /* .spectrum-Picker select+.spectrum-Picker-icon */ position: absolute; top: 50%; margin-top: calc( @@ -62,7 +62,7 @@ select + .dropdown { ); } #button { - /* .spectrum-Dropdown-trigger */ + /* .spectrum-Picker-trigger */ position: relative; width: 100%; display: flex; @@ -70,105 +70,99 @@ select + .dropdown { align-items: center; } :host([dir='ltr']) #label { - /* [dir=ltr] .spectrum-Dropdown-label */ + /* [dir=ltr] .spectrum-Picker-label */ text-align: left; } :host([dir='rtl']) #label { - /* [dir=rtl] .spectrum-Dropdown-label */ + /* [dir=rtl] .spectrum-Picker-label */ text-align: right; } #label { - /* .spectrum-Dropdown-label */ + /* .spectrum-Picker-label */ flex: 1 1 auto; white-space: nowrap; overflow: hidden; height: calc( - var( - --spectrum-dropdown-height, - var(--spectrum-global-dimension-size-400) - ) - + var(--spectrum-picker-height, var(--spectrum-global-dimension-size-400)) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 ); line-height: calc( - var( - --spectrum-dropdown-height, - var(--spectrum-global-dimension-size-400) - ) - + var(--spectrum-picker-height, var(--spectrum-global-dimension-size-400)) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 ); font-size: var( - --spectrum-dropdown-text-size, + --spectrum-picker-text-size, var(--spectrum-alias-font-size-default) ); text-overflow: ellipsis; } #label.placeholder { - /* .spectrum-Dropdown-label.is-placeholder */ + /* .spectrum-Picker-label.is-placeholder */ font-weight: var( - --spectrum-dropdown-placeholder-text-font-weight, + --spectrum-picker-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular) ); font-style: var( - --spectrum-dropdown-placeholder-text-font-style, + --spectrum-picker-placeholder-text-font-style, var(--spectrum-global-font-style-italic) ); transition: color var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; /* .spectrum-Dropdown-label.is-placeholder */ + ease-in-out; /* .spectrum-Picker-label.is-placeholder */ color: var( - --spectrum-dropdown-placeholder-text-color, + --spectrum-picker-placeholder-text-color, var(--spectrum-alias-placeholder-text-color) ); } :host([dir='ltr']) #label + .dropdown { - /* [dir=ltr] .spectrum-Dropdown-label+.spectrum-Dropdown-icon */ + /* [dir=ltr] .spectrum-Picker-label+.spectrum-Picker-icon */ margin-left: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl']) #label + .dropdown { - /* [dir=rtl] .spectrum-Dropdown-label+.spectrum-Dropdown-icon */ + /* [dir=rtl] .spectrum-Picker-label+.spectrum-Picker-icon */ margin-right: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } :host([dir='ltr']) .icon + #label { - /* [dir=ltr] .spectrum-Icon+.spectrum-Dropdown-label */ + /* [dir=ltr] .spectrum-Icon+.spectrum-Picker-label */ margin-left: var( - --spectrum-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } :host([dir='rtl']) .icon + #label { - /* [dir=rtl] .spectrum-Icon+.spectrum-Dropdown-label */ + /* [dir=rtl] .spectrum-Icon+.spectrum-Picker-label */ margin-right: var( - --spectrum-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } :host([dir='ltr']) #label ~ .dropdown { - /* [dir=ltr] .spectrum-Dropdown-label~.spectrum-Dropdown-icon */ + /* [dir=ltr] .spectrum-Picker-label~.spectrum-Picker-icon */ margin-left: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl']) #label ~ .dropdown { - /* [dir=rtl] .spectrum-Dropdown-label~.spectrum-Dropdown-icon */ + /* [dir=rtl] .spectrum-Picker-label~.spectrum-Picker-icon */ margin-right: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } .dropdown { - /* .spectrum-Dropdown-icon */ + /* .spectrum-Picker-icon */ display: inline-block; position: relative; vertical-align: top; @@ -177,11 +171,11 @@ select + .dropdown { margin-top: calc( ( var( - --spectrum-dropdown-height, + --spectrum-picker-height, var(--spectrum-global-dimension-size-400) ) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 - var( @@ -193,11 +187,11 @@ select + .dropdown { margin-bottom: calc( ( var( - --spectrum-dropdown-height, + --spectrum-picker-height, var(--spectrum-global-dimension-size-400) ) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 - var( @@ -206,92 +200,86 @@ select + .dropdown { ) ) / 2 ); - opacity: 1; /* .spectrum-Dropdown-icon */ - color: var( - --spectrum-dropdown-icon-color, - var(--spectrum-alias-icon-color) - ); + opacity: 1; /* .spectrum-Picker-icon */ + color: var(--spectrum-picker-icon-color, var(--spectrum-alias-icon-color)); } #button .icon:not(.dropdown) { - /* .spectrum-Dropdown-trigger .spectrum-Icon:not(.spectrum-Dropdown-icon) */ + /* .spectrum-Picker-trigger .spectrum-Icon:not(.spectrum-Picker-icon) */ margin-top: calc( ( var( - --spectrum-dropdown-height, + --spectrum-picker-height, var(--spectrum-global-dimension-size-400) ) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 - var( - --spectrum-dropdown-icon-size, - var(--spectrum-alias-workflow-icon-size) + --spectrum-picker-icon-size, + var(--spectrum-alias-workflow-icon-size-m) ) ) / 2 ); margin-bottom: calc( ( var( - --spectrum-dropdown-height, + --spectrum-picker-height, var(--spectrum-global-dimension-size-400) ) - var( - --spectrum-dropdown-border-size, + --spectrum-picker-border-size, var(--spectrum-alias-border-size-thin) ) * 2 - var( - --spectrum-dropdown-icon-size, - var(--spectrum-alias-workflow-icon-size) + --spectrum-picker-icon-size, + var(--spectrum-alias-workflow-icon-size-m) ) ) / 2 ); } :host([dir='ltr']) #button #label + .icon:not(.dropdown) { - /* [dir=ltr] .spectrum-Dropdown-trigger .spectrum-Dropdown-label+.spectrum-Icon:not(.spectrum-Dropdown-icon) */ + /* [dir=ltr] .spectrum-Picker-trigger .spectrum-Picker-label+.spectrum-Icon:not(.spectrum-Picker-icon) */ margin-left: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl']) #button #label + .icon:not(.dropdown) { - /* [dir=rtl] .spectrum-Dropdown-trigger .spectrum-Dropdown-label+.spectrum-Icon:not(.spectrum-Dropdown-icon) */ + /* [dir=rtl] .spectrum-Picker-trigger .spectrum-Picker-label+.spectrum-Icon:not(.spectrum-Picker-icon) */ margin-right: var( - --spectrum-dropdown-icon-margin-left, + --spectrum-picker-icon-margin-left, var(--spectrum-global-dimension-size-150) ); } :host([dir='ltr']) .icon + .dropdown { - /* [dir=ltr] .spectrum-Icon+.spectrum-Dropdown-icon */ + /* [dir=ltr] .spectrum-Icon+.spectrum-Picker-icon */ margin-left: var( - --spectrum-dropdown-icon-gap, + --spectrum-picker-icon-gap, var(--spectrum-global-dimension-size-100) ); } :host([dir='rtl']) .icon + .dropdown { - /* [dir=rtl] .spectrum-Icon+.spectrum-Dropdown-icon */ + /* [dir=rtl] .spectrum-Icon+.spectrum-Picker-icon */ margin-right: var( - --spectrum-dropdown-icon-gap, + --spectrum-picker-icon-gap, var(--spectrum-global-dimension-size-100) ); } :host([quiet]) { - /* .spectrum-Dropdown--quiet */ + /* .spectrum-Picker--quiet */ width: auto; - min-width: var( - --spectrum-dropdown-quiet-min-width, - var(--spectrum-global-dimension-size-600) - ); + min-width: var(--spectrum-picker-quiet-min-width); } #popover { - /* .spectrum-Dropdown-popover */ + /* .spectrum-Picker-popover */ max-width: var(--spectrum-global-dimension-size-3000); } -:host([dir='ltr']) .spectrum-Dropdown-popover--quiet { - /* [dir=ltr] .spectrum-Dropdown-popover--quiet */ +:host([dir='ltr']) .spectrum-Picker-popover--quiet { + /* [dir=ltr] .spectrum-Picker-popover--quiet */ margin-left: calc( -1 * (var( - --spectrum-dropdown-quiet-popover-offset-x, + --spectrum-picker-quiet-popover-offset-x, var(--spectrum-global-dimension-size-150) ) + var( @@ -300,11 +288,11 @@ select + .dropdown { )) ); } -:host([dir='rtl']) .spectrum-Dropdown-popover--quiet { - /* [dir=rtl] .spectrum-Dropdown-popover--quiet */ +:host([dir='rtl']) .spectrum-Picker-popover--quiet { + /* [dir=rtl] .spectrum-Picker-popover--quiet */ margin-right: calc( -1 * (var( - --spectrum-dropdown-quiet-popover-offset-x, + --spectrum-picker-quiet-popover-offset-x, var(--spectrum-global-dimension-size-150) ) + var( @@ -314,23 +302,23 @@ select + .dropdown { ); } #button:hover .dropdown { - /* .spectrum-Dropdown .spectrum-Dropdown-trigger:hover .spectrum-Dropdown-icon */ + /* .spectrum-Picker .spectrum-Picker-trigger:hover .spectrum-Picker-icon */ color: var( - --spectrum-dropdown-icon-color-hover, + --spectrum-picker-icon-color-hover, var(--spectrum-alias-icon-color-hover) ); } #button.is-selected .placeholder { - /* .spectrum-Dropdown .spectrum-Dropdown-trigger.is-selected .is-placeholder */ + /* .spectrum-Picker .spectrum-Picker-trigger.is-selected .is-placeholder */ color: var( - --spectrum-dropdown-placeholder-text-color-down, - var(--spectrum-global-color-gray-900) + --spectrum-picker-placeholder-text-color-down, + var(--spectrum-alias-placeholder-text-color-down) ); } :host([invalid]) .icon:not(.dropdown):not(.checkmark) { - /* .spectrum-Dropdown.is-invalid .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) */ + /* .spectrum-Picker.is-invalid .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) */ color: var( - --spectrum-dropdown-validation-icon-color-error, + --spectrum-picker-validation-icon-color-error, var(--spectrum-semantic-negative-color-icon) ); } @@ -338,47 +326,47 @@ select + .dropdown { :host([disabled]) #button:hover .dropdown, :host([invalid][disabled]) .icon, :host([invalid][disabled]) .icon:not(.dropdown):not(.checkmark) { - /* .spectrum-Dropdown.is-disabled .spectrum-Dropdown-icon, - * .spectrum-Dropdown.is-disabled .spectrum-Dropdown-trigger:hover .spectrum-Dropdown-icon, - * .spectrum-Dropdown.is-invalid.is-disabled .spectrum-Icon, - * .spectrum-Dropdown.is-invalid.is-disabled .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) */ + /* .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) */ color: var( - --spectrum-dropdown-icon-color-disabled, + --spectrum-picker-icon-color-disabled, var(--spectrum-alias-icon-color-disabled) ); } :host([disabled]) #label.placeholder { - /* .spectrum-Dropdown.is-disabled .spectrum-Dropdown-label.is-placeholder */ + /* .spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder */ color: var( - --spectrum-dropdown-placeholder-text-color-disabled, + --spectrum-picker-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled) ); } #label.placeholder:hover { - /* .spectrum-Dropdown-label.is-placeholder:hover */ + /* .spectrum-Picker-label.is-placeholder:hover */ color: var( - --spectrum-dropdown-placeholder-text-color-hover, + --spectrum-picker-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover) ); } #label.placeholder:active { - /* .spectrum-Dropdown-label.is-placeholder:active */ + /* .spectrum-Picker-label.is-placeholder:active */ color: var( - --spectrum-dropdown-placeholder-text-color-mouse-focus, - var(--spectrum-global-color-gray-900) + --spectrum-picker-placeholder-text-color-mouse-focus, + var(--spectrum-alias-placeholder-text-color) ); } #button:focus-visible #label.placeholder { - /* .spectrum-Dropdown-trigger.focus-ring .spectrum-Dropdown-label.is-placeholder */ + /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-label.is-placeholder */ color: var( - --spectrum-dropdown-placeholder-text-color-key-focus, + --spectrum-picker-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover) ); } #button:focus-visible .dropdown { - /* .spectrum-Dropdown-trigger.focus-ring .spectrum-Dropdown-icon */ + /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */ color: var( - --spectrum-dropdown-icon-color-key-focus, + --spectrum-picker-icon-color-key-focus, var(--spectrum-alias-icon-color-focus) ); } diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index c88fa13b39..a619633fc6 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/dropzone": "^3.0.0-beta.2" + "@spectrum-css/dropzone": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/dropzone/src/dropzone.css b/packages/dropzone/src/dropzone.css index fbf72b0500..658ee1b10a 100644 --- a/packages/dropzone/src/dropzone.css +++ b/packages/dropzone/src/dropzone.css @@ -23,6 +23,36 @@ governing permissions and limitations under the License. ); } +::slotted(*) { + font-family: var( + --spectrum-body-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); + font-size: var( + --spectrum-body-s-text-size, + var(--spectrum-alias-font-size-default) + ); + font-weight: var( + --spectrum-body-s-text-font-weight, + var(--spectrum-alias-body-text-font-weight) + ); + line-height: var( + --spectrum-body-s-text-line-height, + var(--spectrum-alias-body-text-line-height) + ); + font-style: var( + --spectrum-body-s-text-font-style, + var(--spectrum-global-font-style-regular) + ); + letter-spacing: var( + --spectrum-body-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) + ); + text-transform: var(--spectrum-body-s-text-transform, none); + margin-top: 0; + margin-bottom: 0; +} + /* * IllustratedMessage in spectrum-css has a rule that sets the illustration * color to (--spectrum-global-color-gray-500) instead of a unique diff --git a/packages/icon/package.json b/packages/icon/package.json index 30e8236b6e..3ac8847867 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/icon": "^2.1.1" + "@spectrum-css/icon": "3.0.0-beta.0" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index 72cc72d73d..edf23f94df 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -31,14 +31,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Icon--sizeXXS svg */ height: calc( var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ) / 2 ); width: calc( var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ) / 2 ); } @@ -48,8 +48,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeXS, * .spectrum-Icon--sizeXS img, * .spectrum-Icon--sizeXS svg */ - height: calc(var(--spectrum-global-dimension-size-300) / 2); - width: calc(var(--spectrum-global-dimension-size-300) / 2); + 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, @@ -58,12 +68,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Icon--sizeS img, * .spectrum-Icon--sizeS svg */ height: var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ); width: var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ); } :host([size='m']), @@ -72,8 +82,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeM, * .spectrum-Icon--sizeM img, * .spectrum-Icon--sizeM svg */ - height: var(--spectrum-global-dimension-size-300); - width: var(--spectrum-global-dimension-size-300); + height: var( + --spectrum-alias-workflow-icon-size-m, + var(--spectrum-global-dimension-size-225) + ); + width: var( + --spectrum-alias-workflow-icon-size-m, + var(--spectrum-global-dimension-size-225) + ); } :host([size='l']), :host([size='l']) img, @@ -83,14 +99,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Icon--sizeL svg */ height: calc( var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ) * 2 ); width: calc( var( - --spectrum-alias-workflow-icon-size, - var(--spectrum-global-dimension-size-225) + --spectrum-alias-workflow-icon-size-s, + var(--spectrum-global-dimension-size-200) ) * 2 ); } @@ -100,8 +116,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeXL, * .spectrum-Icon--sizeXL img, * .spectrum-Icon--sizeXL svg */ - height: calc(var(--spectrum-global-dimension-size-300) * 2); - width: calc(var(--spectrum-global-dimension-size-300) * 2); + 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='xxl']), :host([size='xxl']) img, @@ -109,6 +135,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Icon--sizeXXL, * .spectrum-Icon--sizeXXL img, * .spectrum-Icon--sizeXXL svg */ - height: calc(var(--spectrum-global-dimension-size-300) * 3); - width: calc(var(--spectrum-global-dimension-size-300) * 3); + 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 + ); } diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index d6856c4416..67e726ae01 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -43,7 +43,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/icon": "^2.1.1", + "@spectrum-css/icon": "^3.0.0-beta.0", "@spectrum-web-components/icon": "^0.6.3", "@spectrum-web-components/iconset": "^0.1.7", "case": "^1.6.1", diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index 9214b3b170..be3c9b572a 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/illustratedmessage": "^3.0.0-beta.2" + "@spectrum-css/illustratedmessage": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/illustrated-message/src/IllustratedMessage.ts b/packages/illustrated-message/src/IllustratedMessage.ts index a16361e122..39c2927729 100644 --- a/packages/illustrated-message/src/IllustratedMessage.ts +++ b/packages/illustrated-message/src/IllustratedMessage.ts @@ -40,8 +40,10 @@ export class IllustratedMessage extends SpectrumElement { protected render(): TemplateResult { return html`
-

${this.heading}

-

${this.description}

+

${this.heading}

+
+ ${this.description} +
`; } } diff --git a/packages/illustrated-message/src/illustrated-message.css b/packages/illustrated-message/src/illustrated-message.css index 458e0830f3..fc3c20f381 100644 --- a/packages/illustrated-message/src/illustrated-message.css +++ b/packages/illustrated-message/src/illustrated-message.css @@ -24,21 +24,37 @@ governing permissions and limitations under the License. These components need to be implemented in another pass */ #heading { + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); font-size: var( - --spectrum-heading-quiet-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-heading-l-text-size, + var(--spectrum-alias-heading-l-text-size) ); - font-weight: var(--spectrum-heading-quiet-2-text-font-weight, 300); - line-height: var(--spectrum-heading-quiet-2-text-line-height, 1.3); - font-style: var(--spectrum-heading-quiet-2-text-font-style, normal); - letter-spacing: var(--spectrum-heading-quiet-2-text-letter-spacing, 0); - text-transform: var(--spectrum-heading-quiet-2-text-transform, none); - margin-top: 0; - margin-bottom: 0; color: var( - --spectrum-heading-page-title-text-color, - var(--spectrum-global-color-gray-700) + --spectrum-heading-l-text-color, + var(--spectrum-alias-heading-text-color) + ); + line-height: var( + --spectrum-heading-l-text-line-height, + var(--spectrum-alias-heading-text-line-height) + ); + font-style: var( + --spectrum-heading-l-text-font-style, + var(--spectrum-global-font-style-regular) ); + letter-spacing: var( + --spectrum-heading-l-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) + ); + text-transform: var(--spectrum-heading-l-text-transform, none); + font-weight: var( + --spectrum-heading-light-m-emphasis-text-font-weight, + var(--spectrum-global-font-weight-light) + ); + margin-top: 0; + margin-bottom: 0; } /* @@ -72,10 +88,7 @@ governing permissions and limitations under the License. text-transform: var(--spectrum-body-4-text-transform, none); margin-top: 0; margin-bottom: 0; - color: var( - --spectrum-body-secondary-text-color, - var(--spectrum-global-color-gray-700) - ); + color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); } /* Ensure that SVGs with viewBox attributes size correctly. */ diff --git a/packages/link/package.json b/packages/link/package.json index a6a9b96727..3d3b9e194a 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/link": "^3.0.0" + "@spectrum-css/link": "^3.0.1-beta.0" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index 806d6ae8fc..a597081bae 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -20,7 +20,7 @@ a { outline: none; cursor: pointer; /* .spectrum-Link */ color: var( - --spectrum-link-text-color, + --spectrum-link-primary-text-color, var(--spectrum-global-color-blue-600) ); } @@ -32,7 +32,7 @@ a:focus-visible { -webkit-text-decoration-style: double; text-decoration-style: double; /* .spectrum-Link.focus-ring */ color: var( - --spectrum-link-text-color-key-focus, + --spectrum-link-primary-text-color-key-focus, var(--spectrum-alias-text-color-key-focus) ); } @@ -47,14 +47,14 @@ a:focus-visible { a:hover { /* .spectrum-Link:hover */ color: var( - --spectrum-link-text-color-hover, + --spectrum-link-primary-text-color-hover, var(--spectrum-global-color-blue-600) ); } a:active { /* .spectrum-Link:active */ color: var( - --spectrum-link-text-color-down, + --spectrum-link-primary-text-color-down, var(--spectrum-global-color-blue-700) ); } diff --git a/packages/menu/package.json b/packages/menu/package.json index 471b435e39..6374b338d1 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -54,7 +54,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/menu": "^3.0.0-beta.2" + "@spectrum-css/menu": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index 68bce3fc81..f9016db12c 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -16,7 +16,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) ); @@ -27,7 +27,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) ); @@ -38,7 +38,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-right: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -53,7 +53,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-left: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -65,7 +65,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) .spectrum-Menu-item { /* [dir=ltr] .spectrum-Menu-item */ border-left: var( - --spectrum-selectlist-border-size-key-focus, + --spectrum-listitem-border-size-key-focus, var(--spectrum-global-dimension-static-size-25) ) solid transparent; @@ -73,7 +73,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) .spectrum-Menu-item { /* [dir=rtl] .spectrum-Menu-item */ border-right: var( - --spectrum-selectlist-border-size-key-focus, + --spectrum-listitem-border-size-key-focus, var(--spectrum-global-dimension-static-size-25) ) solid transparent; @@ -82,7 +82,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu-item.is-selected */ padding-right: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -95,7 +95,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu-item.is-selected */ padding-left: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -115,7 +115,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [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-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } @@ -130,7 +130,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [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-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } @@ -139,7 +139,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu-checkmark, * [dir=ltr] .spectrum-Menu-chevron */ margin-left: var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ); } @@ -148,7 +148,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu-checkmark, * [dir=rtl] .spectrum-Menu-chevron */ margin-right: var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ); } @@ -161,18 +161,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-sizing: initial; overflow: visible; height: var( - --spectrum-selectlist-divider-size, + --spectrum-listitem-divider-size, var(--spectrum-alias-border-size-thick) ); - margin: calc(var(--spectrum-selectlist-divider-padding, 3px) / 2) + margin: calc(var(--spectrum-listitem-divider-padding, 3px) / 2) var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ); padding: 0; border: none; /* .spectrum-Menu-divider */ background-color: var( - --spectrum-selectlist-divider-color, + --spectrum-listitem-divider-color, var(--spectrum-alias-border-color-extralight) ); } @@ -181,7 +181,7 @@ 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-selectlist-option-focus-indicator-color, + --spectrum-listitem-option-focus-indicator-color, var(--spectrum-alias-border-color-focus) ); } @@ -190,7 +190,7 @@ 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-selectlist-option-focus-indicator-color, + --spectrum-listitem-option-focus-indicator-color, var(--spectrum-alias-border-color-focus) ); } diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index e574fa073e..442c416489 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -16,7 +16,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) ); @@ -27,7 +27,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) ); @@ -36,7 +36,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-right: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -49,7 +49,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ padding-left: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -71,7 +71,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-Menu-item */ border-left: var( - --spectrum-selectlist-border-size-key-focus, + --spectrum-listitem-border-size-key-focus, var(--spectrum-global-dimension-static-size-25) ) solid transparent; @@ -79,7 +79,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) #button { /* [dir=rtl] .spectrum-Menu-item */ border-right: var( - --spectrum-selectlist-border-size-key-focus, + --spectrum-listitem-border-size-key-focus, var(--spectrum-global-dimension-static-size-25) ) solid transparent; @@ -93,38 +93,38 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-sizing: border-box; padding: var(--spectrum-global-dimension-size-85) var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) var(--spectrum-global-dimension-size-85) calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( - --spectrum-selectlist-border-size-key-focus, + --spectrum-listitem-border-size-key-focus, var(--spectrum-global-dimension-static-size-25) ) ); margin: 0; - min-height: var(--spectrum-selectlist-option-height); + min-height: var(--spectrum-listitem-option-height); font-size: var( - --spectrum-selectlist-option-text-size, + --spectrum-listitem-option-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-selectlist-option-text-font-weight, + --spectrum-listitem-option-text-font-weight, var(--spectrum-global-font-weight-regular) ); font-style: normal; text-decoration: none; /* .spectrum-Menu-item */ background-color: var( - --spectrum-selectlist-option-background-color, + --spectrum-listitem-option-background-color, var(--spectrum-alias-background-color-transparent) ); color: var( - --spectrum-selectlist-option-text-color, + --spectrum-listitem-option-text-color, var(--spectrum-alias-text-color) ); } @@ -136,7 +136,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Menu-item.is-selected */ padding-right: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -149,7 +149,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Menu-item.is-selected */ padding-left: calc( var( - --spectrum-selectlist-option-padding, + --spectrum-listitem-option-padding, var(--spectrum-global-dimension-static-size-150) ) - var( @@ -162,7 +162,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ display: block; /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ color: var( - --spectrum-selectlist-option-icon-color-selected, + --spectrum-listitem-option-icon-color-selected, var(--spectrum-alias-icon-color-selected) ); } @@ -178,7 +178,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [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-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } @@ -187,7 +187,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [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-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ); } @@ -198,15 +198,15 @@ slot[name='icon'] + #label, width: calc( 100% - var(--spectrum-icon-checkmark-medium-width) - var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) - var( - --spectrum-selectlist-thumbnail-image-padding-x, + --spectrum-listitem-thumbnail-image-padding-x, var(--spectrum-global-dimension-size-100) ) - var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) ); @@ -221,7 +221,7 @@ slot[name='icon'] + #label, width: calc( 100% - var(--spectrum-icon-checkmark-medium-width) - var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ) ); @@ -237,7 +237,7 @@ slot[name='icon'] + #label, /* [dir=ltr] .spectrum-Menu-checkmark, * [dir=ltr] .spectrum-Menu-chevron */ margin-left: var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ); } @@ -246,7 +246,7 @@ slot[name='icon'] + #label, /* [dir=rtl] .spectrum-Menu-checkmark, * [dir=rtl] .spectrum-Menu-chevron */ margin-right: var( - --spectrum-selectlist-option-icon-padding-x, + --spectrum-listitem-option-icon-padding-x, var(--spectrum-global-dimension-size-150) ); } @@ -259,7 +259,7 @@ slot[name='icon'] + #label, /* [dir=ltr] .spectrum-Menu-item.focus-ring, * [dir=ltr] .spectrum-Menu-item.is-focused */ border-left-color: var( - --spectrum-selectlist-option-focus-indicator-color, + --spectrum-listitem-option-focus-indicator-color, var(--spectrum-alias-border-color-focus) ); } @@ -268,7 +268,7 @@ slot[name='icon'] + #label, /* [dir=rtl] .spectrum-Menu-item.focus-ring, * [dir=rtl] .spectrum-Menu-item.is-focused */ border-right-color: var( - --spectrum-selectlist-option-focus-indicator-color, + --spectrum-listitem-option-focus-indicator-color, var(--spectrum-alias-border-color-focus) ); } @@ -277,11 +277,11 @@ slot[name='icon'] + #label, /* .spectrum-Menu-item.focus-ring, * .spectrum-Menu-item.is-focused */ background-color: var( - --spectrum-selectlist-option-background-color-key-focus, + --spectrum-listitem-option-background-color-key-focus, var(--spectrum-alias-background-color-hover-overlay) ); color: var( - --spectrum-selectlist-option-text-color-key-focus, + --spectrum-listitem-option-text-color-key-focus, var(--spectrum-alias-text-color) ); } @@ -294,18 +294,18 @@ slot[name='icon'] + #label, * .spectrum-Menu-item:focus, * .spectrum-Menu-item:hover */ background-color: var( - --spectrum-selectlist-option-background-color-hover, + --spectrum-listitem-option-background-color-hover, var(--spectrum-alias-background-color-hover-overlay) ); color: var( - --spectrum-selectlist-option-text-color-hover, + --spectrum-listitem-option-text-color-hover, var(--spectrum-alias-text-color) ); } :host([selected]) #button { /* .spectrum-Menu-item.is-selected */ color: var( - --spectrum-selectlist-option-text-color-selected, + --spectrum-listitem-option-text-color-selected, var(--spectrum-alias-text-color) ); } @@ -314,19 +314,19 @@ slot[name='icon'] + #label, /* .spectrum-Menu-item .is-active, * .spectrum-Menu-item:active */ background-color: var( - --spectrum-selectlist-option-background-color-down, + --spectrum-listitem-option-background-color-down, var(--spectrum-alias-background-color-hover-overlay) ); } :host([disabled]) #button { /* .spectrum-Menu-item.is-disabled */ background-color: var( - --spectrum-selectlist-option-background-color-disabled, + --spectrum-listitem-option-background-color-disabled, var(--spectrum-alias-background-color-transparent) ); background-image: none; color: var( - --spectrum-selectlist-option-text-color-disabled, + --spectrum-listitem-option-text-color-disabled, var(--spectrum-alias-text-color-disabled) ); cursor: default; diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index f972977b8e..5b06f57ba5 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -19,13 +19,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ font-size: var(--spectrum-global-dimension-font-size-50); font-weight: 400; line-height: var( - --spectrum-alias-line-height-medium, - var(--spectrum-global-dimension-size-250) + --spectrum-alias-body-text-line-height, + var(--spectrum-global-font-line-height-medium) ); text-transform: uppercase; letter-spacing: 0.06em; /* .spectrum-Menu-sectionHeading */ - color: var( - --spectrum-heading-subtitle3-text-color, - var(--spectrum-global-color-gray-700) - ); + color: var(--spectrum-global-color-gray-700); } diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index bf28f5023a..fce8cf3908 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -29,7 +29,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ overflow: auto; /* .spectrum-Menu .spectrum-Menu */ display: block; /* .spectrum-Menu */ background-color: var( - --spectrum-selectlist-background-color, + --spectrum-listitem-background-color, var(--spectrum-alias-background-color-transparent) ); } diff --git a/packages/overlay/src/popper-arrow-rotate.ts b/packages/overlay/src/popper-arrow-rotate.ts index b007eeeda3..75d02f7e35 100644 --- a/packages/overlay/src/popper-arrow-rotate.ts +++ b/packages/overlay/src/popper-arrow-rotate.ts @@ -21,33 +21,39 @@ function computeArrowRotateStylesFn( /* c8 ignore next */ if (!ref.state.styles || !ref.state.styles.arrow) return; - let rotation: number; + let scaleType!: string; + let scale!: number; switch (ref.state.placement) { case 'bottom': case 'bottom-start': case 'bottom-end': - rotation = 180; + scaleType = 'scaleY'; + scale = -1; break; case 'top': case 'top-start': case 'top-end': - return; + break; case 'left': case 'left-start': case 'left-end': - rotation = 270; break; case 'right': case 'right-start': case 'right-end': - rotation = 90; + scaleType = 'scaleX'; + scale = -1; break; + // Should never go to default as all possible placement values are listed above. + // Don't alter the arrow in the case that it ever did as we don't know what changes to apply. /* c8 ignore next 2 */ default: return; } - ref.state.styles.arrow.transform += ` rotate(${rotation}deg)`; + if (!!scaleType && !!scale) { + ref.state.styles.arrow.transform += ` ${scaleType}(${scale})`; + } // Manage Spectrum CSS usage of negative left margin for centering. ref.state.styles.arrow.marginLeft = '0'; // Manage Spectrum CSS usage of negative top margin for centering. diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts index 173f803eff..8e9236319e 100644 --- a/packages/overlay/test/overlay.test.ts +++ b/packages/overlay/test/overlay.test.ts @@ -357,7 +357,7 @@ describe('Overlays', () => { it('closes via events', async () => { const el = await fixture(html`
- +
`); diff --git a/packages/popover/package.json b/packages/popover/package.json index c212905933..ba1e5bedd6 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/popover": "^3.0.0-beta.3" + "@spectrum-css/popover": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts index 3754fa1ba4..879ae31173 100644 --- a/packages/popover/src/Popover.ts +++ b/packages/popover/src/Popover.ts @@ -47,7 +47,28 @@ export class Popover extends SpectrumElement { protected renderTip(): TemplateResult { return html` -
+
+ + + + + + +
`; } diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css index 8c2a152889..a5f62be97b 100644 --- a/packages/popover/src/popover.css +++ b/packages/popover/src/popover.css @@ -59,3 +59,29 @@ governing permissions and limitations under the License. ) ); } + +.tip { + display: flex; +} + +:host([placement*='bottom']) .tip, +:host([placement*='top']) .tip { + width: var(--spectrum-popover-tip-size); + height: calc(var(--spectrum-popover-tip-size) / 2); +} + +:host([placement*='right']) .tip, +:host([placement*='left']) .tip { + height: var(--spectrum-popover-tip-size); + width: calc(var(--spectrum-popover-tip-size) / 2); +} + +:host([placement*='bottom']) .triangle-left-right, +:host([placement*='top']) .triangle-left-right { + display: none; +} + +:host([placement*='right']) .triangle-top-bottom, +:host([placement*='left']) .triangle-top-bottom { + display: none; +} diff --git a/packages/popover/src/spectrum-config.js b/packages/popover/src/spectrum-config.js index c2934c57d8..c71cc5bb8a 100644 --- a/packages/popover/src/spectrum-config.js +++ b/packages/popover/src/spectrum-config.js @@ -49,6 +49,12 @@ const config = { name: 'tip', }, ], + classes: [ + { + selector: '.spectrum-Popover-tip-triangle', + name: 'triangle', + }, + ], }, ], }; diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 84c57a1034..eb5063218d 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -22,7 +22,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ pointer-events: none; /* .spectrum-Popover */ display: inline-flex; flex-direction: column; - box-sizing: border-box; min-width: var(--spectrum-global-dimension-size-400); min-height: var(--spectrum-global-dimension-size-400); position: absolute; @@ -35,7 +34,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) ); - outline: none; /* .spectrum-Popover */ + outline: none; + box-sizing: border-box; /* .spectrum-Popover */ background-color: var( --spectrum-popover-background-color, var(--spectrum-global-color-gray-50) @@ -44,11 +44,23 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-popover-border-color, var(--spectrum-alias-border-color-dark) ); - box-shadow: 0 1px 4px - var( - --spectrum-popover-shadow-color, - var(--spectrum-alias-dropshadow-color) - ); + filter: drop-shadow( + 0 1px 4px + var( + --spectrum-popover-shadow-color, + var(--spectrum-alias-dropshadow-color) + ) + ); + -webkit-filter: drop-shadow( + 0 1px 4px + var( + --spectrum-popover-shadow-color, + var(--spectrum-alias-dropshadow-color) + ) + ); + will-change: filter; + -webkit-clip-path: inset(-30px -30px); + clip-path: inset(-30px -30px); } :host([open]) { /* .spectrum-Popover.is-open */ @@ -61,7 +73,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--bottom.is-open */ transform: translateY( var( - --spectrum-dropdown-flyout-menu-offset-y, + --spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -70,7 +82,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--top.is-open */ transform: translateY( calc( - -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -78,7 +90,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--right.is-open */ transform: translateX( var( - --spectrum-dropdown-flyout-menu-offset-y, + --spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -87,119 +99,68 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Popover--left.is-open */ transform: translateX( calc( - -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } #tip { /* .spectrum-Popover-tip */ position: absolute; - overflow: hidden; - width: calc( - var( - --spectrum-popover-tip-width, - var(--spectrum-global-dimension-size-250) - ) + 1px - ); - height: calc( - var( - --spectrum-popover-tip-width, - var(--spectrum-global-dimension-size-250) - ) / 2 + - var( - --spectrum-popover-border-size, - var(--spectrum-alias-border-size-thin) - ) - ); -} -:host([dir='ltr']) #tip:after { - /* [dir=ltr] .spectrum-Popover-tip:after */ - left: -1px; -} -:host([dir='rtl']) #tip:after { - /* [dir=rtl] .spectrum-Popover-tip:after */ - right: -1px; -} -#tip:after { - /* .spectrum-Popover-tip:after */ - content: ''; - width: var( + --spectrum-popover-tip-size: var( --spectrum-popover-tip-width, var(--spectrum-global-dimension-size-250) ); - height: var( - --spectrum-popover-tip-width, - var(--spectrum-global-dimension-size-250) - ); - border-width: var( + --spectrum-popover-tip-borderWidth: var( --spectrum-popover-border-size, var(--spectrum-alias-border-size-thin) ); - border-style: solid; - position: absolute; - transform: rotate(45deg); - top: -18px; /* .spectrum-Popover .spectrum-Popover-tip:after */ - background-color: var( + -webkit-transform: translate(0); +} +#tip .triangle { + /* .spectrum-Popover-tip .spectrum-Popover-tip-triangle */ + stroke-linecap: square; + stroke-linejoin: miter; + stroke-width: var( + --spectrum-popover-border-size, + var(--spectrum-alias-border-size-thin) + ); /* .spectrum-Popover .spectrum-Popover-tip .spectrum-Popover-tip-triangle */ + fill: var( --spectrum-popover-background-color, var(--spectrum-global-color-gray-50) ); - border-color: var( + stroke: var( --spectrum-popover-border-color, var(--spectrum-alias-border-color-dark) ); - box-shadow: -1px -1px 4px var(--spectrum-popover-shadow-color, var(--spectrum-alias-dropshadow-color)); } :host([dialog]) { /* .spectrum-Popover--dialog */ min-width: 270px; padding: 30px 29px; } -:host([dir='ltr'][placement*='left'][tip]) { - /* [dir=ltr] .spectrum-Popover--left.spectrum-Popover--withTip */ +:host([placement*='left'][tip]) { + /* .spectrum-Popover--left.spectrum-Popover--withTip */ margin-right: 13px; } -:host([dir='rtl'][placement*='left'][tip]) { - /* [dir=rtl] .spectrum-Popover--left.spectrum-Popover--withTip */ - margin-left: 13px; -} -:host([dir='ltr'][placement*='left']) #tip { - /* [dir=ltr] .spectrum-Popover--left .spectrum-Popover-tip */ - right: -16px; -} -:host([dir='rtl'][placement*='left']) #tip { - /* [dir=rtl] .spectrum-Popover--left .spectrum-Popover-tip */ - left: -16px; -} :host([placement*='left']) #tip { /* .spectrum-Popover--left .spectrum-Popover-tip */ - transform: rotate(-90deg); + left: 100%; } -:host([dir='ltr'][placement*='right'][tip]) { - /* [dir=ltr] .spectrum-Popover--right.spectrum-Popover--withTip */ +:host([placement*='right'][tip]) { + /* .spectrum-Popover--right.spectrum-Popover--withTip */ margin-left: 13px; } -:host([dir='rtl'][placement*='right'][tip]) { - /* [dir=rtl] .spectrum-Popover--right.spectrum-Popover--withTip */ - margin-right: 13px; -} -:host([dir='ltr'][placement*='right']) #tip { - /* [dir=ltr] .spectrum-Popover--right .spectrum-Popover-tip */ - left: -16px; -} -:host([dir='rtl'][placement*='right']) #tip { - /* [dir=rtl] .spectrum-Popover--right .spectrum-Popover-tip */ - right: -16px; -} :host([placement*='right']) #tip { /* .spectrum-Popover--right .spectrum-Popover-tip */ - transform: rotate(90deg); + right: 100%; + transform: scaleX(-1); } :host([placement*='left']) #tip, :host([placement*='right']) #tip { /* .spectrum-Popover--left .spectrum-Popover-tip, * .spectrum-Popover--right .spectrum-Popover-tip */ top: 50%; - margin-top: -6px; + margin-top: calc(var(--spectrum-global-dimension-size-150) * -1); } :host([placement*='bottom'][tip]) { /* .spectrum-Popover--bottom.spectrum-Popover--withTip */ @@ -207,8 +168,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([placement*='bottom']) #tip { /* .spectrum-Popover--bottom .spectrum-Popover-tip */ - top: -11px; - transform: rotate(180deg); + bottom: 100%; + transform: scaleY(-1); } :host([placement*='top'][tip]) { /* .spectrum-Popover--top.spectrum-Popover--withTip */ @@ -216,45 +177,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([placement*='top']) #tip { /* .spectrum-Popover--top .spectrum-Popover-tip */ - bottom: -11px; + top: 100%; } -:host([dir='ltr'][placement*='bottom']) #tip, -:host([dir='ltr'][placement*='top']) #tip { - /* [dir=ltr] .spectrum-Popover--bottom .spectrum-Popover-tip, - * [dir=ltr] .spectrum-Popover--top .spectrum-Popover-tip */ +:host([placement*='bottom']) #tip, +:host([placement*='top']) #tip { + /* .spectrum-Popover--bottom .spectrum-Popover-tip, + * .spectrum-Popover--top .spectrum-Popover-tip */ left: 50%; -} -:host([dir='rtl'][placement*='bottom']) #tip, -:host([dir='rtl'][placement*='top']) #tip { - /* [dir=rtl] .spectrum-Popover--bottom .spectrum-Popover-tip, - * [dir=rtl] .spectrum-Popover--top .spectrum-Popover-tip */ - right: 50%; -} -:host([dir='ltr'][placement*='bottom']) #tip, -:host([dir='ltr'][placement*='top']) #tip { - /* [dir=ltr] .spectrum-Popover--bottom .spectrum-Popover-tip, - * [dir=ltr] .spectrum-Popover--top .spectrum-Popover-tip */ - margin-left: -12px; -} -:host([dir='rtl'][placement*='bottom']) #tip, -:host([dir='rtl'][placement*='top']) #tip { - /* [dir=rtl] .spectrum-Popover--bottom .spectrum-Popover-tip, - * [dir=rtl] .spectrum-Popover--top .spectrum-Popover-tip */ - margin-right: -12px; -} -:host([dir='ltr'][dialog]) .spectrum-Dialog-typeIcon { - /* [dir=ltr] .spectrum-Popover.spectrum-Popover--dialog .spectrum-Dialog-typeIcon */ - margin-left: var(--spectrum-global-dimension-size-200); -} -:host([dir='rtl'][dialog]) .spectrum-Dialog-typeIcon { - /* [dir=rtl] .spectrum-Popover.spectrum-Popover--dialog .spectrum-Dialog-typeIcon */ - margin-right: var(--spectrum-global-dimension-size-200); -} -.spectrum-Dialog-footer, -.spectrum-Dialog-header, -.spectrum-Dialog-wrapper { - /* .spectrum-Popover .spectrum-Dialog-footer, - * .spectrum-Popover .spectrum-Dialog-header, - * .spectrum-Popover .spectrum-Dialog-wrapper */ - background-color: initial; + margin-left: calc(var(--spectrum-global-dimension-size-150) * -1); } diff --git a/packages/quick-actions/package.json b/packages/quick-actions/package.json index ff57308a55..9db0d2e462 100644 --- a/packages/quick-actions/package.json +++ b/packages/quick-actions/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/quickaction": "^3.0.0-beta.3" + "@spectrum-css/quickaction": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/quick-actions/src/spectrum-quick-actions.css b/packages/quick-actions/src/spectrum-quick-actions.css index 0d6ea60ec3..b0d20b49a4 100644 --- a/packages/quick-actions/src/spectrum-quick-actions.css +++ b/packages/quick-actions/src/spectrum-quick-actions.css @@ -56,7 +56,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-QuickActions--left.is-open */ transform: translateX( var( - --spectrum-dropdown-flyout-menu-offset-y, + --spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -65,21 +65,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-QuickActions--right.is-open */ transform: translateX( calc( - -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } :host([dir='ltr']) slot[name='action'] + ::slotted([slot='action']) { /* [dir=ltr] .spectrum-QuickActions .spectrum-ActionButton+.spectrum-ActionButton */ margin-left: var( - --spectrum-quickactions-icon-button-gap-x, + --spectrum-quickactions-button-gap-x, var(--spectrum-global-dimension-size-100) ); } :host([dir='rtl']) slot[name='action'] + ::slotted([slot='action']) { /* [dir=rtl] .spectrum-QuickActions .spectrum-ActionButton+.spectrum-ActionButton */ margin-right: var( - --spectrum-quickactions-icon-button-gap-x, + --spectrum-quickactions-button-gap-x, var(--spectrum-global-dimension-size-100) ); } diff --git a/packages/radio/package.json b/packages/radio/package.json index 96a2a132ca..cec57c14fb 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -50,7 +50,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/radio": "^3.0.0-beta.2" + "@spectrum-css/radio": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/radio/src/radio-group.css b/packages/radio/src/radio-group.css index 548c3d8f47..3cfe8eb96a 100644 --- a/packages/radio/src/radio-group.css +++ b/packages/radio/src/radio-group.css @@ -18,3 +18,14 @@ governing permissions and limitations under the License. :host([column]) { flex-direction: column; } + +/** + * Partial work around until FieldGroup is implemented + */ +:host([dir='ltr']:not([column])) ::slotted(:not(:first-child)) { + margin: 0 0 0 var(--spectrum-global-dimension-size-200); +} + +:host([dir='rtl']:not([column])) ::slotted(:not(:first-child)) { + margin: 0 var(--spectrum-global-dimension-size-200) 0 0; +} diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index db0c0e2c8a..dc70ddc7a6 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -10,24 +10,6 @@ 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-Radio */ - margin-right: calc( - var( - --spectrum-radio-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); -} -:host([dir='rtl']) { - /* [dir=rtl] .spectrum-Radio */ - margin-left: calc( - var( - --spectrum-radio-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); -} :host { /* .spectrum-Radio */ display: inline-flex; @@ -40,24 +22,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ max-width: 100%; vertical-align: top; } -:host([dir='ltr']) #input { - /* [dir=ltr] .spectrum-Radio-input */ - left: calc( - var( - --spectrum-radio-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * -1 - ); -} -:host([dir='rtl']) #input { - /* [dir=rtl] .spectrum-Radio-input */ - right: calc( - var( - --spectrum-radio-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * -1 - ); -} #input { /* .spectrum-Radio-input */ font-family: inherit; @@ -68,14 +32,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-sizing: border-box; padding: 0; position: absolute; - top: 0; - width: calc( - 100% + - var( - --spectrum-radio-cursor-hit-x, - var(--spectrum-global-dimension-size-100) - ) * 2 - ); + width: 100%; height: 100%; opacity: 0.0001; z-index: 1; @@ -134,7 +91,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-radio-text-size, var(--spectrum-alias-font-size-default) ); - line-height: 1.49; + 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) + ); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; /* .spectrum-Radio-label */ color: var( @@ -219,7 +187,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ); - transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s) + transition: opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-out, margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out; } @@ -282,69 +250,69 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-text-color-down) ); } -:host([quiet][checked]) #input + #button:before { - /* .spectrum-Radio--quiet .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ +:host([checked]) .spectrum-Radio--emphasized #input + #button:before { + /* .spectrum-Radio--emphasized .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ border-color: var( - --spectrum-radio-quiet-circle-border-color-selected, - var(--spectrum-global-color-gray-700) + --spectrum-radio-emphasized-circle-border-color-selected, + var(--spectrum-global-color-blue-500) ); } -:host([quiet][checked]:hover) #input + #button:before { - /* .spectrum-Radio--quiet:hover .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ +:host([checked]) .spectrum-Radio--emphasized:hover #input + #button:before { + /* .spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ border-color: var( - --spectrum-radio-quiet-circle-border-color-selected-hover, - var(--spectrum-global-color-gray-800) + --spectrum-radio-emphasized-circle-border-color-selected-hover, + var(--spectrum-global-color-blue-600) ); } -:host([quiet][checked]:active) #input + #button:before { - /* .spectrum-Radio--quiet:active .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ +:host([checked]) .spectrum-Radio--emphasized:active #input + #button:before { + /* .spectrum-Radio--emphasized:active .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ border-color: var( - --spectrum-radio-quiet-circle-border-color-selected-down, - var(--spectrum-global-color-gray-900) + --spectrum-radio-emphasized-circle-border-color-selected-down, + var(--spectrum-global-color-blue-700) ); } -:host([quiet][invalid]:hover) #input + #button:before, +:host([invalid]) .spectrum-Radio--emphasized:hover #input + #button:before, :host([invalid]:hover) #input + #button:before { - /* .spectrum-Radio--quiet.is-invalid:hover .spectrum-Radio-input+.spectrum-Radio-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) ); } -:host([quiet][invalid]:hover) #label, +:host([invalid]) .spectrum-Radio--emphasized:hover #label, :host([invalid]:hover) #label { - /* .spectrum-Radio--quiet.is-invalid:hover .spectrum-Radio-label, + /* .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-label, * .spectrum-Radio.is-invalid:hover .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-circle-border-color-error-hover, - var(--spectrum-global-color-red-600) + --spectrum-radio-emphasized-text-color-error-hover, + var(--spectrum-global-color-red-700) ); } -:host([quiet][invalid]:active) #input + #button:before, +:host([invalid]) .spectrum-Radio--emphasized:active #input + #button:before, :host([invalid]:active) #input + #button:before { - /* .spectrum-Radio--quiet.is-invalid:active .spectrum-Radio-input+.spectrum-Radio-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) ); } -:host([quiet][invalid]:active) #label, +:host([invalid]) .spectrum-Radio--emphasized:active #label, :host([invalid]:active) #label { - /* .spectrum-Radio--quiet.is-invalid:active .spectrum-Radio-label, + /* .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-label, * .spectrum-Radio.is-invalid:active .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-circle-border-color-error-down, + --spectrum-radio-emphasized-text-color-error-down, var(--spectrum-global-color-red-700) ); } -:host([quiet][invalid]) #button:before, -:host([quiet][invalid][checked]) #input + #button:before, +:host([invalid]) .spectrum-Radio--emphasized #button:before, +:host([invalid][checked]) .spectrum-Radio--emphasized #input + #button:before, :host([invalid]) #button:before, :host([invalid][checked]) #input + #button:before { - /* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-button:before, - * .spectrum-Radio--quiet.is-invalid .spectrum-Radio-input:checked+.spectrum-Radio-button:before, + /* .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-button:before, + * .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( @@ -352,13 +320,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-red-500) ); } -:host([quiet][invalid]) #label, +:host([invalid]) .spectrum-Radio--emphasized #label, :host([invalid]) #label { - /* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-label, + /* .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-label, * .spectrum-Radio.is-invalid .spectrum-Radio-label */ color: var( - --spectrum-radio-emphasized-circle-border-color-error, - var(--spectrum-global-color-red-500) + --spectrum-radio-emphasized-text-color-error, + var(--spectrum-global-color-red-600) ); } :host([checked][disabled]) #input + #button:before, @@ -379,12 +347,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-text-color-disabled) ); } -:host([quiet]) #input:focus-visible + #button:before, -:host([quiet]:hover) #input:focus-visible + #button:before, +.spectrum-Radio--emphasized #input:focus-visible + #button:before, +.spectrum-Radio--emphasized:hover #input:focus-visible + #button:before, #input:focus-visible + #button:before, :host(:hover) #input:focus-visible + #button:before { - /* .spectrum-Radio--quiet .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before, - * .spectrum-Radio--quiet:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before, + /* .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:before, + * .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( @@ -392,12 +360,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-700) ); } -:host([quiet]) #input:focus-visible + #button:after, -:host([quiet]:hover) #input:focus-visible + #button:after, +.spectrum-Radio--emphasized #input:focus-visible + #button:after, +.spectrum-Radio--emphasized:hover #input:focus-visible + #button:after, #input:focus-visible + #button:after, :host(:hover) #input:focus-visible + #button:after { - /* .spectrum-Radio--quiet .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after, - * .spectrum-Radio--quiet:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after, + /* .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after, + * .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after, * .spectrum-Radio .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after, * .spectrum-Radio:hover .spectrum-Radio-input.focus-ring+.spectrum-Radio-button:after */ box-shadow: 0 0 0 @@ -410,12 +378,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-focus-ring-color) ); } -:host([quiet][checked]) #input:focus-visible + #button:before, -:host([quiet][checked]:hover) #input:focus-visible + #button:before, +:host([checked]) + .spectrum-Radio--emphasized + #input:focus-visible + + #button:before, +:host([checked]) + .spectrum-Radio--emphasized:hover + #input:focus-visible + + #button:before, :host([checked]) #input:focus-visible + #button:before, :host(:hover[checked]) #input:focus-visible + #button:before { - /* .spectrum-Radio--quiet .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before, - * .spectrum-Radio--quiet:hover .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before, + /* .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring:checked+.spectrum-Radio-button:before, + * .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( diff --git a/packages/rule/package.json b/packages/rule/package.json index 0aad7abe91..3ff5ae5d51 100644 --- a/packages/rule/package.json +++ b/packages/rule/package.json @@ -50,7 +50,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/rule": "^3.0.0-beta.3" + "@spectrum-css/divider": "^1.0.0-beta.1" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/rule/src/spectrum-config.js b/packages/rule/src/spectrum-config.js index d5b4bac13a..95675b746c 100644 --- a/packages/rule/src/spectrum-config.js +++ b/packages/rule/src/spectrum-config.js @@ -11,16 +11,16 @@ governing permissions and limitations under the License. */ const config = { - spectrum: 'rule', + spectrum: 'divider', components: [ { name: 'rule', host: { - selector: '.spectrum-Rule', + selector: '.spectrum-Divider', }, attributes: [ { - selector: '.spectrum-Rule--vertical', + selector: '.spectrum-Divider--vertical', type: 'boolean', name: 'vertical', }, @@ -28,9 +28,9 @@ const config = { type: 'enum', name: 'size', values: [ - '.spectrum-Rule--small', - '.spectrum-Rule--medium', - '.spectrum-Rule--large', + '.spectrum-Divider--small', + '.spectrum-Divider--medium', + '.spectrum-Divider--large', ], }, ], diff --git a/packages/rule/src/spectrum-rule.css b/packages/rule/src/spectrum-rule.css index 15f07896ba..8e30438bdc 100644 --- a/packages/rule/src/spectrum-rule.css +++ b/packages/rule/src/spectrum-rule.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - /* .spectrum-Rule */ + /* .spectrum-Divider */ width: 100%; overflow: visible; border: none; @@ -25,7 +25,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); } :host([size='large']) { - /* .spectrum-Rule--large */ + /* .spectrum-Divider--large */ height: var( --spectrum-divider-large-height, var(--spectrum-global-dimension-static-size-50) @@ -33,14 +33,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-large-border-radius, var(--spectrum-global-dimension-static-size-25) - ); /* .spectrum-Rule--large */ + ); /* .spectrum-Divider--large */ background-color: var( - --spectrum-rule-large-background-color, + --spectrum-divider-large-background-color, var(--spectrum-global-color-gray-800) ); } :host([size='medium']) { - /* .spectrum-Rule--medium */ + /* .spectrum-Divider--medium */ height: var( --spectrum-divider-medium-height, var(--spectrum-global-dimension-static-size-25) @@ -48,14 +48,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-medium-border-radius, var(--spectrum-global-dimension-static-size-10) - ); /* .spectrum-Rule--medium */ + ); /* .spectrum-Divider--medium */ background-color: var( - --spectrum-rule-medium-background-color, + --spectrum-divider-medium-background-color, var(--spectrum-global-color-gray-300) ); } :host([size='small']) { - /* .spectrum-Rule--small */ + /* .spectrum-Divider--small */ height: var( --spectrum-divider-small-height, var(--spectrum-global-dimension-static-size-10) @@ -63,34 +63,34 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-small-border-radius, var(--spectrum-global-dimension-static-size-10) - ); /* .spectrum-Rule--small */ + ); /* .spectrum-Divider--small */ background-color: var( - --spectrum-rule-small-background-color, + --spectrum-divider-small-background-color, var(--spectrum-global-color-gray-300) ); } :host([vertical]) { - /* .spectrum-Rule--vertical */ + /* .spectrum-Divider--vertical */ height: 100%; } :host([vertical][size='large']) { - /* .spectrum-Rule--vertical.spectrum-Rule--large */ + /* .spectrum-Divider--vertical.spectrum-Divider--large */ width: var( --spectrum-divider-large-vertical-width, var(--spectrum-global-dimension-static-size-50) ); } :host([vertical][size='medium']) { - /* .spectrum-Rule--vertical.spectrum-Rule--medium */ + /* .spectrum-Divider--vertical.spectrum-Divider--medium */ width: var( --spectrum-divider-medium-vertical-width, var(--spectrum-global-dimension-static-size-25) ); } :host([vertical][size='small']) { - /* .spectrum-Rule--vertical.spectrum-Rule--small */ + /* .spectrum-Divider--vertical.spectrum-Divider--small */ width: var( - --spectrum-divider-small-veritcal-width, + --spectrum-divider-small-vertical-width, var(--spectrum-global-dimension-static-size-10) ); } diff --git a/packages/search/package.json b/packages/search/package.json index daa482d194..2449d658aa 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/search": "^3.0.0-beta.4" + "@spectrum-css/search": "^3.0.0-beta.5" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/shared/src/focusable.ts b/packages/shared/src/focusable.ts index 7adbe987bc..1b9586386e 100644 --- a/packages/shared/src/focusable.ts +++ b/packages/shared/src/focusable.ts @@ -56,7 +56,7 @@ export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) { } // When `focusElement` isn't available yet, // use host tabindex as the cache. - if (!this.focusElement) { + if (!this.focusElement || this.focusElement.isSameNode(this)) { return tabIndexAttribute; } // All other times, use the tabindex of `focusElement` diff --git a/packages/shared/src/observe-slot-presence.ts b/packages/shared/src/observe-slot-presence.ts index d9674f8a57..d464951e93 100644 --- a/packages/shared/src/observe-slot-presence.ts +++ b/packages/shared/src/observe-slot-presence.ts @@ -8,10 +8,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { UpdatingElement, property } from '@spectrum-web-components/base'; +import { UpdatingElement } from '@spectrum-web-components/base'; const slotElementObserver = Symbol('slotElementObserver'); const startObserving = Symbol('startObserving'); +const slotContentIsPresent = Symbol('slotContentIsPresent'); type Constructor> = { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -21,22 +22,55 @@ type Constructor> = { export interface SlotPresenceObservingInterface { slotContentIsPresent: boolean; + getSlotContentPresence(selector: string): boolean; managePresenceObservedSlot(): void; } export function ObserveSlotPresence>( constructor: T, - lightDomSelector: string + lightDomSelector: string | string[] ): T & Constructor { + const lightDomSelectors = Array.isArray(lightDomSelector) + ? lightDomSelector + : [lightDomSelector]; class SlotPresenceObservingElement extends constructor implements SlotPresenceObservingInterface { private [slotElementObserver]!: MutationObserver; - @property({ type: Boolean, attribute: false }) - public slotContentIsPresent = false; + /** + * @private + */ + public get slotContentIsPresent(): boolean { + if (lightDomSelectors.length === 1) { + return ( + this[slotContentIsPresent].get(lightDomSelectors[0]) || + false + ); + } else { + throw new Error( + 'Multiple selectors provided to `ObserveSlotPresence` use `getSlotContentPresence(selector: string)` instead.' + ); + } + } + private [slotContentIsPresent]: Map = new Map(); + + public getSlotContentPresence(selector: string): boolean { + if (this[slotContentIsPresent].has(selector)) { + return this[slotContentIsPresent].get(selector) || false; + } + throw new Error( + `The provided selector \`\` is not being observed.` + ); + } public managePresenceObservedSlot = (): void => { - this.slotContentIsPresent = !!this.querySelector(lightDomSelector); + lightDomSelectors.forEach((selector) => { + this[slotContentIsPresent].set( + selector, + !!this.querySelector(selector) + ); + }); + this.requestUpdate(); }; private [startObserving](): void { diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 5da4da62b1..92810b8797 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -52,7 +52,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/sidenav": "^3.0.0-beta.2" + "@spectrum-css/sidenav": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index 04cfa3c197..4e74bb0788 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -61,51 +61,51 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #heading { /* .spectrum-SideNav-heading */ height: var( - --spectrum-sidenav-header-height, + --spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height) ); line-height: var( - --spectrum-sidenav-header-height, + --spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height) ); margin-top: var( - --spectrum-sidenav-header-gap-top, + --spectrum-sidenav-heading-gap-top, var(--spectrum-global-dimension-size-200) ); margin-bottom: var( - --spectrum-sidenav-header-gap-bottom, + --spectrum-sidenav-heading-gap-bottom, var(--spectrum-global-dimension-size-50) ); padding-top: 0; padding-bottom: 0; padding-left: var( - --spectrum-sidenav-header-padding-x, + --spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150) ); padding-right: var( - --spectrum-sidenav-header-padding-x, + --spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150) ); border-radius: var( - --spectrum-sidenav-header-border-radius, + --spectrum-sidenav-heading-border-radius, var(--spectrum-alias-border-radius-regular) ); font-size: var( - --spectrum-sidenav-header-text-size, + --spectrum-sidenav-heading-text-size, var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-sidenav-header-font-weight, + --spectrum-sidenav-heading-text-font-weight, var(--spectrum-global-font-weight-medium) ); font-style: normal; letter-spacing: var( - --spectrum-sidenav-header-letter-spacing, + --spectrum-sidenav-heading-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); text-transform: uppercase; /* .spectrum-SideNav-heading */ color: var( - --spectrum-sidenav-header-text-color, + --spectrum-sidenav-heading-text-color, var(--spectrum-global-color-gray-700) ); } @@ -116,7 +116,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-left: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level1, + --spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150) ) + var( @@ -132,7 +132,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-right: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level1, + --spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150) ) + var( @@ -149,8 +149,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-left: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level2, - var(--spectrum-global-dimension-size-300) + --spectrum-sidenav-multilevel-item-indentation, + var(--spectrum-global-dimension-size-150) ) + var( --spectrum-sidenav-item-padding-x, @@ -166,8 +166,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-right: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level2, - var(--spectrum-global-dimension-size-300) + --spectrum-sidenav-multilevel-item-indentation, + var(--spectrum-global-dimension-size-150) ) + var( --spectrum-sidenav-item-padding-x, diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index b153dd2e0e..9da6d5deac 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -56,7 +56,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-sidenav-item-font-weight, + --spectrum-sidenav-item-text-font-weight, var(--spectrum-global-font-weight-regular) ); font-style: normal; @@ -134,6 +134,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-100) ); } +#itemLink ::slotted([slot='icon']) { + /* .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon */ + flex-shrink: 0; +} :host([dir='ltr']) .spectrum-SideNav-heading { /* [dir=ltr] .spectrum-SideNav-heading */ margin-right: 0; @@ -152,7 +156,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-left: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level1, + --spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150) ) + var( @@ -165,7 +169,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-right: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level1, + --spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150) ) + var( @@ -178,8 +182,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-left: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level2, - var(--spectrum-global-dimension-size-300) + --spectrum-sidenav-multilevel-item-indentation, + var(--spectrum-global-dimension-size-150) ) + var( --spectrum-sidenav-item-padding-x, @@ -191,8 +195,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink */ padding-right: calc( var( - --spectrum-sidenav-multilevel-item-indentation-level2, - var(--spectrum-global-dimension-size-300) + --spectrum-sidenav-multilevel-item-indentation, + var(--spectrum-global-dimension-size-150) ) + var( --spectrum-sidenav-item-padding-x, diff --git a/packages/split-button/package.json b/packages/split-button/package.json index 4a28392ce0..2c7099fc5d 100644 --- a/packages/split-button/package.json +++ b/packages/split-button/package.json @@ -40,7 +40,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/splitbutton": "^3.0.0-beta.3", + "@spectrum-css/splitbutton": "^3.0.0-beta.4", "@spectrum-web-components/menu": "^0.4.4" }, "dependencies": { diff --git a/packages/split-button/src/spectrum-split-button.css b/packages/split-button/src/spectrum-split-button.css index 4d5f656a37..81974a9ab3 100644 --- a/packages/split-button/src/spectrum-split-button.css +++ b/packages/split-button/src/spectrum-split-button.css @@ -105,7 +105,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-left-width: 0; /* [dir=ltr] .spectrum-SplitButton-trigger */ padding-left: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( @@ -137,7 +137,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-right-width: 0; /* [dir=rtl] .spectrum-SplitButton-trigger */ padding-right: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( @@ -260,7 +260,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ padding-left: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( @@ -281,7 +281,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ padding-right: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( @@ -356,7 +356,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-right-width: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ padding-right: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( @@ -392,7 +392,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-left-width: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ padding-left: calc( var( - --spectrum-button-primary-padding-x, + --spectrum-button-primary-text-padding-x, var(--spectrum-global-dimension-size-200) ) - var( diff --git a/packages/status-light/package.json b/packages/status-light/package.json index d75f325e6d..4362828eaa 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/statuslight": "^3.0.0-beta.2" + "@spectrum-css/statuslight": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 5ae46f2fe5..5ed344e104 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -13,7 +13,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #root { /* .spectrum-StatusLight */ min-height: var( - --spectrum-statuslight-height, + --spectrum-statuslight-info-height, var(--spectrum-alias-single-line-height) ); display: flex; @@ -25,16 +25,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-right: 0; box-sizing: border-box; font-size: var( - --spectrum-statuslight-text-size, + --spectrum-statuslight-info-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-statuslight-text-font-weight, + --spectrum-statuslight-info-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); line-height: 1.44; /* .spectrum-StatusLight */ color: var( - --spectrum-statuslight-text-color, + --spectrum-statuslight-info-text-color, var(--spectrum-alias-text-color) ); } @@ -45,17 +45,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-shrink: 0; display: inline-block; width: var( - --spectrum-statuslight-dot-size, + --spectrum-statuslight-info-dot-size, var(--spectrum-global-dimension-size-100) ); height: var( - --spectrum-statuslight-dot-size, + --spectrum-statuslight-info-dot-size, var(--spectrum-global-dimension-size-100) ); border-radius: 50%; margin: calc(var(--spectrum-global-dimension-size-65) + 1px) var( - --spectrum-statuslight-text-gap, + --spectrum-statuslight-info-text-gap, var(--spectrum-global-dimension-size-150) ) calc(var(--spectrum-global-dimension-size-65) - 1px); @@ -75,7 +75,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-StatusLight.is-disabled, * .spectrum-StatusLight[disabled] */ color: var( - --spectrum-statuslight-text-color-disabled, + --spectrum-statuslight-info-text-color-disabled, var(--spectrum-alias-text-color-disabled) ); } @@ -84,7 +84,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-StatusLight.is-disabled:before, * .spectrum-StatusLight[disabled]:before */ background-color: var( - --spectrum-statuslight-dot-color-disabled, + --spectrum-statuslight-info-dot-color-disabled, var(--spectrum-global-color-gray-400) ); } @@ -128,56 +128,56 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([variant='celery']) #root:before { /* .spectrum-StatusLight--celery:before */ background-color: var( - --spectrum-statuslight-dot-color-label-celery, + --spectrum-statuslight-celery-dot-color, var(--spectrum-global-color-celery-400) ); } :host([variant='yellow']) #root:before { /* .spectrum-StatusLight--yellow:before */ background-color: var( - --spectrum-statuslight-dot-color-label-yellow, + --spectrum-statuslight-yellow-dot-color, var(--spectrum-global-color-yellow-400) ); } :host([variant='fuchsia']) #root:before { /* .spectrum-StatusLight--fuchsia:before */ background-color: var( - --spectrum-statuslight-dot-color-label-fuchsia, + --spectrum-statuslight-fuchsia-dot-color, var(--spectrum-global-color-fuchsia-400) ); } :host([variant='indigo']) #root:before { /* .spectrum-StatusLight--indigo:before */ background-color: var( - --spectrum-statuslight-dot-color-label-indigo, + --spectrum-statuslight-indigo-dot-color, var(--spectrum-global-color-indigo-400) ); } :host([variant='seafoam']) #root:before { /* .spectrum-StatusLight--seafoam:before */ background-color: var( - --spectrum-statuslight-dot-color-label-seafoam, + --spectrum-statuslight-seafoam-dot-color, var(--spectrum-global-color-seafoam-400) ); } :host([variant='chartreuse']) #root:before { /* .spectrum-StatusLight--chartreuse:before */ background-color: var( - --spectrum-statuslight-dot-color-label-chartreuse, + --spectrum-statuslight-chartreuse-dot-color, var(--spectrum-global-color-chartreuse-400) ); } :host([variant='magenta']) #root:before { /* .spectrum-StatusLight--magenta:before */ background-color: var( - --spectrum-statuslight-dot-color-label-magenta, + --spectrum-statuslight-magenta-dot-color, var(--spectrum-global-color-magenta-400) ); } :host([variant='purple']) #root:before { /* .spectrum-StatusLight--purple:before */ background-color: var( - --spectrum-statuslight-dot-color-label-purple, + --spectrum-statuslight-purple-dot-color, var(--spectrum-global-color-purple-400) ); } diff --git a/packages/styles/core-global.css b/packages/styles/core-global.css index 356a07577a..d6507ce40d 100644 --- a/packages/styles/core-global.css +++ b/packages/styles/core-global.css @@ -60,41 +60,49 @@ governing permissions and limitations under the License. --spectrum-global-color-static-red-500: rgb(227, 72, 80); --spectrum-global-color-static-red-600: rgb(215, 55, 63); --spectrum-global-color-static-red-700: rgb(201, 37, 45); + --spectrum-global-color-static-red-800: rgb(187, 18, 26); --spectrum-global-color-static-orange-400: rgb(242, 148, 35); --spectrum-global-color-static-orange-500: rgb(230, 134, 25); --spectrum-global-color-static-orange-600: rgb(218, 123, 17); --spectrum-global-color-static-orange-700: rgb(203, 111, 16); + --spectrum-global-color-static-orange-800: rgb(189, 100, 13); --spectrum-global-color-static-green-400: rgb(51, 171, 132); --spectrum-global-color-static-green-500: rgb(45, 157, 120); --spectrum-global-color-static-green-600: rgb(38, 142, 108); --spectrum-global-color-static-green-700: rgb(18, 128, 92); + --spectrum-global-color-static-green-800: rgb(16, 113, 84); --spectrum-global-color-static-celery-200: rgb(88, 224, 111); --spectrum-global-color-static-celery-300: rgb(81, 210, 103); --spectrum-global-color-static-celery-400: rgb(75, 195, 95); --spectrum-global-color-static-celery-500: rgb(68, 181, 86); --spectrum-global-color-static-celery-600: rgb(61, 167, 78); --spectrum-global-color-static-celery-700: rgb(55, 153, 71); + --spectrum-global-color-static-celery-800: rgb(49, 139, 64); --spectrum-global-color-static-chartreuse-300: rgb(155, 236, 84); --spectrum-global-color-static-chartreuse-400: rgb(142, 222, 73); --spectrum-global-color-static-chartreuse-500: rgb(133, 208, 68); --spectrum-global-color-static-chartreuse-600: rgb(124, 195, 63); --spectrum-global-color-static-chartreuse-700: rgb(115, 181, 58); + --spectrum-global-color-static-chartreuse-800: rgb(106, 168, 52); --spectrum-global-color-static-yellow-200: rgb(255, 226, 46); --spectrum-global-color-static-yellow-300: rgb(250, 217, 0); --spectrum-global-color-static-yellow-400: rgb(237, 204, 0); --spectrum-global-color-static-yellow-500: rgb(223, 191, 0); --spectrum-global-color-static-yellow-600: rgb(210, 178, 0); --spectrum-global-color-static-yellow-700: rgb(196, 166, 0); + --spectrum-global-color-static-yellow-800: rgb(183, 153, 0); --spectrum-global-color-static-magenta-200: rgb(245, 107, 183); --spectrum-global-color-static-magenta-300: rgb(236, 90, 170); --spectrum-global-color-static-magenta-400: rgb(226, 73, 157); --spectrum-global-color-static-magenta-500: rgb(216, 55, 144); --spectrum-global-color-static-magenta-600: rgb(202, 41, 130); --spectrum-global-color-static-magenta-700: rgb(188, 28, 116); + --spectrum-global-color-static-magenta-800: rgb(174, 14, 102); --spectrum-global-color-static-fuchsia-400: rgb(207, 62, 220); --spectrum-global-color-static-fuchsia-500: rgb(192, 56, 204); --spectrum-global-color-static-fuchsia-600: rgb(177, 48, 189); --spectrum-global-color-static-fuchsia-700: rgb(162, 40, 173); + --spectrum-global-color-static-fuchsia-800: rgb(147, 33, 158); --spectrum-global-color-static-purple-400: rgb(157, 100, 225); --spectrum-global-color-static-purple-500: rgb(146, 86, 217); --spectrum-global-color-static-purple-600: rgb(134, 76, 204); @@ -106,12 +114,14 @@ governing permissions and limitations under the License. --spectrum-global-color-static-indigo-500: rgb(103, 103, 236); --spectrum-global-color-static-indigo-600: rgb(92, 92, 224); --spectrum-global-color-static-indigo-700: rgb(81, 81, 211); + --spectrum-global-color-static-indigo-800: rgb(70, 70, 198); --spectrum-global-color-static-seafoam-200: rgb(38, 192, 199); --spectrum-global-color-static-seafoam-300: rgb(35, 178, 184); --spectrum-global-color-static-seafoam-400: rgb(32, 163, 168); --spectrum-global-color-static-seafoam-500: rgb(27, 149, 154); --spectrum-global-color-static-seafoam-600: rgb(22, 135, 140); --spectrum-global-color-static-seafoam-700: rgb(15, 121, 125); + --spectrum-global-color-static-seafoam-800: rgb(9, 108, 111); --spectrum-global-color-opacity-100: 1; --spectrum-global-color-opacity-90: 0.9; --spectrum-global-color-opacity-80: 0.8; @@ -164,6 +174,18 @@ governing permissions and limitations under the License. --spectrum-semantic-negative-color-state-focus: var( --spectrum-global-color-red-400 ); + --spectrum-semantic-negative-background-color-default: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-background-color-hover: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-negative-background-color-down: var( + --spectrum-global-color-static-red-800 + ); + --spectrum-semantic-negative-background-color-key-focus: var( + --spectrum-global-color-static-red-700 + ); --spectrum-semantic-notice-color-background: var( --spectrum-global-color-static-orange-700 ); @@ -194,6 +216,18 @@ governing permissions and limitations under the License. --spectrum-semantic-notice-color-state-focus: var( --spectrum-global-color-orange-400 ); + --spectrum-semantic-notice-background-color-default: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-background-color-hover: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-notice-background-color-down: var( + --spectrum-global-color-static-orange-800 + ); + --spectrum-semantic-notice-background-color-key-focus: var( + --spectrum-global-color-static-orange-700 + ); --spectrum-semantic-positive-color-background: var( --spectrum-global-color-static-green-700 ); @@ -224,6 +258,18 @@ governing permissions and limitations under the License. --spectrum-semantic-positive-color-state-focus: var( --spectrum-global-color-green-400 ); + --spectrum-semantic-positive-background-color-default: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-background-color-hover: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-positive-background-color-down: var( + --spectrum-global-color-static-green-800 + ); + --spectrum-semantic-positive-background-color-key-focus: var( + --spectrum-global-color-static-green-700 + ); --spectrum-semantic-informative-color-background: var( --spectrum-global-color-static-blue-700 ); @@ -254,6 +300,18 @@ governing permissions and limitations under the License. --spectrum-semantic-informative-color-state-focus: var( --spectrum-global-color-blue-400 ); + --spectrum-semantic-informative-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-informative-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-informative-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); --spectrum-semantic-cta-color-background-default: var( --spectrum-global-color-static-blue-600 ); @@ -266,12 +324,18 @@ governing permissions and limitations under the License. --spectrum-semantic-cta-color-background-key-focus: var( --spectrum-global-color-static-blue-600 ); - --spectrum-semantic-background-color-key-focus: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-neutral-color-background: var( + --spectrum-semantic-neutral-background-color-default: var( --spectrum-global-color-static-gray-700 ); + --spectrum-semantic-neutral-background-color-hover: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-neutral-background-color-down: var( + --spectrum-global-color-static-gray-900 + ); + --spectrum-semantic-neutral-background-color-key-focus: var( + --spectrum-global-color-static-gray-800 + ); --spectrum-semantic-presence-color-1: var( --spectrum-global-color-static-red-500 ); @@ -307,6 +371,7 @@ governing permissions and limitations under the License. --spectrum-global-dimension-static-size-225: 18px; --spectrum-global-dimension-static-size-250: 20px; --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; --spectrum-global-dimension-static-size-400: 32px; --spectrum-global-dimension-static-size-450: 36px; --spectrum-global-dimension-static-size-500: 40px; @@ -475,15 +540,6 @@ governing permissions and limitations under the License. source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-line-height-body: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-line-height-title: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-body-han-text-line-height: var( - --spectrum-global-font-line-height-large - ); --spectrum-alias-body-text-font-family: var( --spectrum-global-font-family-base ); @@ -499,9 +555,6 @@ governing permissions and limitations under the License. --spectrum-alias-button-text-line-height: var( --spectrum-global-font-line-height-small ); - --spectrum-alias-heading-han-text-line-height: var( - --spectrum-global-font-line-height-medium - ); --spectrum-alias-heading-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -541,9 +594,6 @@ governing permissions and limitations under the License. --spectrum-alias-serif-text-font-family: var( --spectrum-global-font-family-serif ); - --spectrum-alias-article-text-font-family: var( - --spectrum-global-font-family-serif - ); --spectrum-alias-article-body-text-font-weight: var( --spectrum-global-font-weight-regular ); @@ -577,6 +627,9 @@ governing permissions and limitations under the License. --spectrum-alias-code-text-font-family: var( --spectrum-global-font-family-code ); + --spectrum-alias-han-heading-text-line-height: var( + --spectrum-global-font-line-height-medium + ); --spectrum-alias-han-heading-text-font-weight-regular: var( --spectrum-global-font-weight-bold ); @@ -586,12 +639,6 @@ governing permissions and limitations under the License. --spectrum-alias-han-heading-text-font-weight-regular-strong: var( --spectrum-global-font-weight-black ); - --spectrum-alias-han-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-quiet-emphasis: var( - --spectrum-global-font-weight-regular - ); --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( --spectrum-global-font-weight-bold ); @@ -604,15 +651,6 @@ governing permissions and limitations under the License. --spectrum-alias-han-heading-text-font-weight-light-strong: var( --spectrum-global-font-weight-bold ); - --spectrum-alias-han-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-strong-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); --spectrum-alias-han-heading-text-font-weight-heavy: var( --spectrum-global-font-weight-black ); @@ -622,6 +660,9 @@ governing permissions and limitations under the License. --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( --spectrum-global-font-weight-black ); + --spectrum-alias-han-body-text-line-height: var( + --spectrum-global-font-line-height-large + ); --spectrum-alias-han-body-text-font-weight-regular: var( --spectrum-global-font-weight-regular ); @@ -688,21 +729,6 @@ governing permissions and limitations under the License. --spectrum-alias-font-size-default: var( --spectrum-global-dimension-font-size-100 ); - --spectrum-alias-line-height-small: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-line-height-medium: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-line-height-large: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-line-height-xlarge: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-line-height-xxlarge: var( - --spectrum-global-dimension-size-600 - ); --spectrum-alias-layout-label-gap-size: var( --spectrum-global-dimension-size-100 ); @@ -733,165 +759,242 @@ governing permissions and limitations under the License. --spectrum-alias-single-line-width: var( --spectrum-global-dimension-size-2400 ); - --spectrum-alias-workflow-icon-size: var( + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --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-text-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-item-text-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-item-text-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-item-text-size-xl: var( + --spectrum-global-dimension-font-size-300 + ); + --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); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-padding-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-padding-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-padding-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-icononly-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icononly-padding-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-icononly-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icononly-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-rounded-workflow-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-l: var( --spectrum-global-dimension-size-225 ); - --spectrum-alias-heading-display1-text-size: var( - --spectrum-global-dimension-font-size-1300 + --spectrum-alias-item-mark-padding-left-s: var( + --spectrum-global-dimension-size-85 ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 + --spectrum-alias-item-mark-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-mark-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-1-size-s: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-item-control-1-size-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-2-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-2-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-3-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-3-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-3-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-mark-size-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-mark-size-l: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-item-mark-size-xl: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-workflow-icon-size-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-workflow-icon-size-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-workflow-icon-size-xl: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-item-control-gap-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-gap-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-gap-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-control-gap-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-icon-gap-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-workflow-icon-gap-l: var( + --spectrum-global-dimension-size-115 ); - --spectrum-alias-heading-han-display1-text-size: var( + --spectrum-alias-item-workflow-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-ui-icon-gap-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-ui-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-ui-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-ui-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-heading-xxxl-text-size: var( --spectrum-global-dimension-font-size-1300 ); --spectrum-alias-heading-han-xxxl-text-size: var( --spectrum-global-dimension-font-size-1300 ); - --spectrum-alias-heading-han-display1-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); --spectrum-alias-heading-han-xxxl-margin-top: var( --spectrum-global-dimension-font-size-1200 ); - --spectrum-alias-heading-display1-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); --spectrum-alias-heading-xxxl-margin-top: var( --spectrum-global-dimension-font-size-1200 ); - --spectrum-alias-heading-display2-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); --spectrum-alias-heading-xxl-text-size: var( --spectrum-global-dimension-font-size-1100 ); - --spectrum-alias-heading-display2-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); --spectrum-alias-heading-xxl-margin-top: var( --spectrum-global-dimension-font-size-900 ); - --spectrum-alias-heading-han-display2-text-size: var( - --spectrum-global-dimension-font-size-900 - ); --spectrum-alias-heading-han-xxl-text-size: var( --spectrum-global-dimension-font-size-900 ); - --spectrum-alias-heading-han-display2-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); --spectrum-alias-heading-han-xxl-margin-top: var( --spectrum-global-dimension-font-size-800 ); - --spectrum-alias-heading1-text-size: var( - --spectrum-global-dimension-font-size-900 - ); --spectrum-alias-heading-xl-text-size: var( --spectrum-global-dimension-font-size-900 ); - --spectrum-alias-heading1-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); --spectrum-alias-heading-xl-margin-top: var( --spectrum-global-dimension-font-size-800 ); - --spectrum-alias-heading1-han-text-size: var( - --spectrum-global-dimension-font-size-800 - ); --spectrum-alias-heading-han-xl-text-size: var( --spectrum-global-dimension-font-size-800 ); - --spectrum-alias-heading1-han-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); --spectrum-alias-heading-han-xl-margin-top: var( --spectrum-global-dimension-font-size-700 ); - --spectrum-alias-heading2-text-size: var( - --spectrum-global-dimension-font-size-700 - ); --spectrum-alias-heading-l-text-size: var( --spectrum-global-dimension-font-size-700 ); - --spectrum-alias-heading2-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); --spectrum-alias-heading-l-margin-top: var( --spectrum-global-dimension-font-size-600 ); - --spectrum-alias-heading2-han-text-size: var( - --spectrum-global-dimension-font-size-600 - ); --spectrum-alias-heading-han-l-text-size: var( --spectrum-global-dimension-font-size-600 ); - --spectrum-alias-heading2-han-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); --spectrum-alias-heading-han-l-margin-top: var( --spectrum-global-dimension-font-size-500 ); - --spectrum-alias-heading3-text-size: var( - --spectrum-global-dimension-font-size-500 - ); --spectrum-alias-heading-m-text-size: var( --spectrum-global-dimension-font-size-500 ); - --spectrum-alias-heading3-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); --spectrum-alias-heading-m-margin-top: var( --spectrum-global-dimension-font-size-400 ); - --spectrum-alias-heading3-han-text-size: var( - --spectrum-global-dimension-font-size-400 - ); --spectrum-alias-heading-han-m-text-size: var( --spectrum-global-dimension-font-size-400 ); - --spectrum-alias-heading3-han-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); --spectrum-alias-heading-han-m-margin-top: var( --spectrum-global-dimension-font-size-300 ); - --spectrum-alias-heading4-text-size: var( - --spectrum-global-dimension-font-size-300 - ); --spectrum-alias-heading-s-text-size: var( --spectrum-global-dimension-font-size-300 ); - --spectrum-alias-heading4-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); --spectrum-alias-heading-s-margin-top: var( --spectrum-global-dimension-font-size-200 ); - --spectrum-alias-heading5-text-size: var( - --spectrum-global-dimension-font-size-200 - ); --spectrum-alias-heading-xs-text-size: var( --spectrum-global-dimension-font-size-200 ); - --spectrum-alias-heading5-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); --spectrum-alias-heading-xs-margin-top: var( --spectrum-global-dimension-font-size-100 ); - --spectrum-alias-heading6-text-size: var( - --spectrum-global-dimension-font-size-100 - ); --spectrum-alias-heading-xxs-text-size: var( --spectrum-global-dimension-font-size-100 ); - --spectrum-alias-heading6-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); --spectrum-alias-heading-xxs-margin-top: var( --spectrum-global-dimension-font-size-75 ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); } :root, @@ -900,8 +1003,10 @@ governing permissions and limitations under the License. --spectrum-alias-background-color-default: var( --spectrum-global-color-gray-100 ); + --spectrum-alias-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-label-gray: rgb(112, 112, 112); --spectrum-alias-background-color-quickactions-overlay: rgba(0, 0, 0, 0.2); --spectrum-alias-placeholder-text-color: var( --spectrum-global-color-gray-600 @@ -931,7 +1036,6 @@ governing permissions and limitations under the License. --spectrum-alias-text-color-selected-neutral: var( --spectrum-global-color-gray-900 ); - --spectrum-alias-title-text-color: var(--spectrum-global-color-gray-900); --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); @@ -980,11 +1084,46 @@ governing permissions and limitations under the License. --spectrum-alias-icon-color-selected-focus: var( --spectrum-global-color-blue-600 ); - --spectrum-alias-icon-color-error: var(--spectrum-global-color-red-400); --spectrum-alias-toolbar-background-color: var( --spectrum-global-color-gray-100 ); --spectrum-alias-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42); + --spectrum-alias-code-highlight-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-code-highlight-color-background: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-code-highlight-color-keyword: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-section: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-code-highlight-color-literal: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-attribute: var( + --spectrum-global-color-seafoam-600 + ); + --spectrum-alias-code-highlight-color-class: var( + --spectrum-global-color-magenta-600 + ); + --spectrum-alias-code-highlight-color-variable: var( + --spectrum-global-color-purple-600 + ); + --spectrum-alias-code-highlight-color-title: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-code-highlight-color-string: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-function: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-comment: var( + --spectrum-global-color-gray-700 + ); --spectrum-alias-categorical-color-1: var( --spectrum-global-color-static-seafoam-200 ); diff --git a/packages/styles/package.json b/packages/styles/package.json index 7cedfa3214..45828a0f71 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -38,7 +38,7 @@ "license": "Apache-2.0", "devDependencies": { "@spectrum-css/commons": "^2.1.0", - "@spectrum-css/typography": "^2.1.3", - "@spectrum-css/vars": "^2.3.0" + "@spectrum-css/typography": "^2.1.4-beta.0", + "@spectrum-css/vars": "^3.0.0-beta.1" } } diff --git a/packages/styles/scale-large.css b/packages/styles/scale-large.css index cd4a1e44a8..997962d1ee 100644 --- a/packages/styles/scale-large.css +++ b/packages/styles/scale-large.css @@ -29,10 +29,13 @@ governing permissions and limitations under the License. --spectrum-global-dimension-size-150: 15px; --spectrum-global-dimension-size-160: 16px; --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; --spectrum-global-dimension-size-200: 20px; --spectrum-global-dimension-size-225: 22px; --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; --spectrum-global-dimension-size-350: 35px; --spectrum-global-dimension-size-400: 40px; --spectrum-global-dimension-size-450: 45px; @@ -73,6 +76,43 @@ 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-item-workflow-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var( + --spectrum-global-dimension-static-size-325 + ); + --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 ); @@ -97,12 +137,6 @@ governing permissions and limitations under the License. --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-barloader-large-border-radius: 4px; - --spectrum-barloader-large-indeterminate-border-radius: 4px; - --spectrum-barloader-large-over-background-border-radius: 4px; - --spectrum-barloader-small-border-radius: 3px; - --spectrum-barloader-small-indeterminate-border-radius: 3px; - --spectrum-barloader-small-over-background-border-radius: 3px; --spectrum-breadcrumb-compact-item-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); @@ -265,38 +299,6 @@ governing permissions and limitations under the License. --spectrum-checkbox-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-checkbox-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-checkbox-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-circleloader-medium-border-size: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-circleloader-medium-over-background-border-size: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-circleloader-small-border-size: 3px; - --spectrum-circleloader-small-over-background-border-size: 3px; - --spectrum-colorhandle-loupe-margin: var( - --spectrum-global-dimension-static-size-100 - ); --spectrum-colorloupe-colorhandle-gap: var( --spectrum-global-dimension-static-size-100 ); @@ -336,19 +338,6 @@ governing permissions and limitations under the License. --spectrum-dialog-confirm-description-margin-bottom: var( --spectrum-global-dimension-static-size-500 ); - --spectrum-dialog-max-width: var( - --spectrum-global-dimension-static-size-5000 - ); - --spectrum-dialog-title-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-dialog-content-text-size: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-dialog-padding: var(--spectrum-global-dimension-static-size-300); - --spectrum-dialog-content-margin-bottom: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-dialog-destructive-max-width: var( --spectrum-global-dimension-static-size-5000 ); @@ -394,21 +383,6 @@ governing permissions and limitations under the License. --spectrum-dialog-info-description-margin-bottom: var( --spectrum-global-dimension-static-size-500 ); - --spectrum-dropdown-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-dropdown-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-dropdown-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-dropdown-thumbnail-small-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-dropdown-thumbnail-small-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); --spectrum-fieldbutton-quiet-min-width: var( --spectrum-global-dimension-size-200 ); @@ -456,33 +430,6 @@ governing permissions and limitations under the License. --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var( --spectrum-global-dimension-static-size-200 ); - --spectrum-selectlist-option-icon-size: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-selectlist-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-selectlist-option-icon-margin-top: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-selectlist-option-height: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-selectlist-thumbnail-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-loader-bar-large-border-radius: 4px; - --spectrum-loader-bar-large-over-background-border-radius: 4px; - --spectrum-loader-bar-small-border-radius: 3px; - --spectrum-loader-bar-small-over-background-border-radius: 3px; - --spectrum-loader-circle-medium-border-size: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-loader-circle-medium-over-background-border-size: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-loader-circle-small-border-size: 3px; - --spectrum-loader-circle-small-over-background-border-size: 3px; --spectrum-meter-large-border-radius: 4px; --spectrum-meter-small-border-radius: 3px; --spectrum-pagination-page-button-line-height: 32px; @@ -558,24 +505,6 @@ governing permissions and limitations under the License. --spectrum-radio-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-radio-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-radio-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-radio-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-radio-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-radio-quiet-margin-bottom: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-radio-quiet-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( @@ -586,29 +515,18 @@ governing permissions and limitations under the License. --spectrum-rating-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-rating-quiet-icon-width: 30px; - --spectrum-rating-quiet-indicator-width: 20px; - --spectrum-rating-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); --spectrum-search-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); --spectrum-search-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-search-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); --spectrum-search-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-search-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-sidenav-item-touch-hit-bottom: 3px; --spectrum-sidenav-multilevel-item-touch-hit-bottom: 3px; --spectrum-slider-track-touch-hit-y: var( @@ -682,28 +600,6 @@ governing permissions and limitations under the License. --spectrum-switch-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-switch-quiet-focus-ring-border-radius-key-focus: var( - --spectrum-global-dimension-static-size-160 - ); - --spectrum-switch-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-switch-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-switch-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-switch-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-switch-quiet-track-width: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-switch-quiet-handle-border-radius: 9px; - --spectrum-switch-quiet-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; @@ -755,56 +651,28 @@ governing permissions and limitations under the License. --spectrum-textarea-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textarea-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-textarea-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); --spectrum-textarea-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textarea-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-textfield-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); --spectrum-textfield-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); --spectrum-textfield-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-50 ); --spectrum-textfield-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-50 ); - --spectrum-textfield-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-tool-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-tool-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-tool-high-emphasis-touch-hit-x: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-tool-high-emphasis-touch-hit-y: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-tooltip-padding-bottom: 6px; - --spectrum-tooltip-content-max-width: 126px; --spectrum-tooltip-info-padding-bottom: 6px; - --spectrum-tooltip-info-content-max-width: 126px; --spectrum-tooltip-negative-padding-bottom: 6px; - --spectrum-tooltip-negative-content-max-width: 126px; + --spectrum-tooltip-padding-bottom: 6px; --spectrum-tooltip-positive-padding-bottom: 6px; - --spectrum-tooltip-positive-content-max-width: 126px; } /* stylelint-enable */ diff --git a/packages/styles/scale-medium.css b/packages/styles/scale-medium.css index 42d008b351..e1982eb716 100644 --- a/packages/styles/scale-medium.css +++ b/packages/styles/scale-medium.css @@ -29,10 +29,13 @@ governing permissions and limitations under the License. --spectrum-global-dimension-size-150: 12px; --spectrum-global-dimension-size-160: 13px; --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; --spectrum-global-dimension-size-200: 16px; --spectrum-global-dimension-size-225: 18px; --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; --spectrum-global-dimension-size-350: 28px; --spectrum-global-dimension-size-400: 32px; --spectrum-global-dimension-size-450: 36px; @@ -73,6 +76,43 @@ 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-item-workflow-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var( + --spectrum-global-dimension-size-250 + ); + --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 ); @@ -97,18 +137,6 @@ governing permissions and limitations under the License. --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-barloader-large-border-radius: 3px; - --spectrum-barloader-large-indeterminate-border-radius: 3px; - --spectrum-barloader-large-over-background-border-radius: 3px; - --spectrum-barloader-small-border-radius: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-barloader-small-indeterminate-border-radius: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-barloader-small-over-background-border-radius: var( - --spectrum-global-dimension-static-size-25 - ); --spectrum-breadcrumb-compact-item-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); @@ -287,38 +315,6 @@ governing permissions and limitations under the License. --spectrum-checkbox-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-checkbox-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-text-gap-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-text-gap-error-indeterminate-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-checkbox-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-circleloader-medium-border-size: 3px; - --spectrum-circleloader-medium-over-background-border-size: 3px; - --spectrum-circleloader-small-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-circleloader-small-over-background-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-colorhandle-loupe-margin: var( - --spectrum-global-dimension-static-size-125 - ); --spectrum-colorloupe-colorhandle-gap: var( --spectrum-global-dimension-static-size-125 ); @@ -356,19 +352,6 @@ governing permissions and limitations under the License. --spectrum-dialog-confirm-description-margin-bottom: var( --spectrum-global-dimension-static-size-600 ); - --spectrum-dialog-max-width: var( - --spectrum-global-dimension-static-size-6000 - ); - --spectrum-dialog-title-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-dialog-content-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-dialog-padding: var(--spectrum-global-dimension-static-size-500); - --spectrum-dialog-content-margin-bottom: var( - --spectrum-global-dimension-static-size-600 - ); --spectrum-dialog-destructive-max-width: var( --spectrum-global-dimension-static-size-6000 ); @@ -414,21 +397,6 @@ governing permissions and limitations under the License. --spectrum-dialog-info-description-margin-bottom: var( --spectrum-global-dimension-static-size-600 ); - --spectrum-dropdown-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-dropdown-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-dropdown-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-dropdown-thumbnail-small-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-dropdown-thumbnail-small-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); --spectrum-fieldbutton-quiet-min-width: var( --spectrum-global-dimension-size-225 ); @@ -508,37 +476,6 @@ governing permissions and limitations under the License. --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var( --spectrum-global-dimension-static-size-125 ); - --spectrum-selectlist-option-icon-size: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-selectlist-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-selectlist-option-icon-margin-top: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-selectlist-option-height: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-selectlist-thumbnail-option-icon-padding-y: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-loader-bar-large-border-radius: 3px; - --spectrum-loader-bar-large-over-background-border-radius: 3px; - --spectrum-loader-bar-small-border-radius: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-loader-bar-small-over-background-border-radius: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-loader-circle-medium-border-size: 3px; - --spectrum-loader-circle-medium-over-background-border-size: 3px; - --spectrum-loader-circle-small-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-loader-circle-small-over-background-border-size: var( - --spectrum-global-dimension-static-size-25 - ); --spectrum-meter-large-border-radius: 3px; --spectrum-meter-small-border-radius: var( --spectrum-global-dimension-static-size-25 @@ -618,22 +555,6 @@ governing permissions and limitations under the License. --spectrum-radio-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-radio-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-radio-quiet-margin-bottom: 0px; - --spectrum-radio-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); --spectrum-rating-icon-width: 24px; --spectrum-rating-indicator-width: 16px; --spectrum-rating-touch-hit-y: var( @@ -644,29 +565,18 @@ governing permissions and limitations under the License. --spectrum-rating-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-rating-quiet-icon-width: 24px; - --spectrum-rating-quiet-indicator-width: 16px; - --spectrum-rating-quiet-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); --spectrum-search-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); --spectrum-search-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); --spectrum-search-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); --spectrum-search-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-search-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); --spectrum-sidenav-item-touch-hit-bottom: var( --spectrum-global-dimension-static-size-25 ); @@ -740,26 +650,6 @@ governing permissions and limitations under the License. --spectrum-switch-emphasized-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-switch-quiet-focus-ring-border-radius-key-focus: var( - --spectrum-global-dimension-static-size-130 - ); - --spectrum-switch-quiet-text-gap-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-switch-quiet-text-gap-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-switch-quiet-text-gap-error-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-switch-quiet-text-gap-error-selected-key-focus: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-switch-quiet-track-width: 26px; - --spectrum-switch-quiet-handle-border-radius: 7px; - --spectrum-switch-quiet-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; @@ -811,56 +701,28 @@ governing permissions and limitations under the License. --spectrum-textarea-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textarea-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); --spectrum-textarea-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); --spectrum-textarea-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textarea-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); --spectrum-textfield-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); --spectrum-textfield-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); --spectrum-textfield-quiet-touch-hit-x: var( --spectrum-global-dimension-static-size-100 ); --spectrum-textfield-quiet-touch-hit-y: var( --spectrum-global-dimension-static-size-100 ); - --spectrum-textfield-quiet-icon-frame: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-tool-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-tool-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-tool-high-emphasis-touch-hit-x: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-tool-high-emphasis-touch-hit-y: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-tooltip-padding-bottom: 5px; - --spectrum-tooltip-content-max-width: 101px; --spectrum-tooltip-info-padding-bottom: 5px; - --spectrum-tooltip-info-content-max-width: 101px; --spectrum-tooltip-negative-padding-bottom: 5px; - --spectrum-tooltip-negative-content-max-width: 101px; + --spectrum-tooltip-padding-bottom: 5px; --spectrum-tooltip-positive-padding-bottom: 5px; - --spectrum-tooltip-positive-content-max-width: 101px; } /* stylelint-enable */ diff --git a/packages/styles/theme-dark.css b/packages/styles/theme-dark.css index 45e8ba50ad..fc93f44fc7 100644 --- a/packages/styles/theme-dark.css +++ b/packages/styles/theme-dark.css @@ -74,6 +74,15 @@ governing permissions and limitations under the License. --spectrum-global-color-gray-700: rgb(185, 185, 185); --spectrum-global-color-gray-800: rgb(227, 227, 227); --spectrum-global-color-gray-900: rgb(255, 255, 255); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.5); --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.5); --spectrum-alias-background-color-hover-overlay: rgba(255, 255, 255, 0.06); @@ -93,32 +102,6 @@ governing permissions and limitations under the License. --spectrum-alias-appframe-separator-color: var( --spectrum-global-color-gray-50 ); - --spectrum-colorarea-border-color: rgba(255, 255, 255, 0.1); - --spectrum-colorarea-border-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-colorarea-border-color-down: rgba(255, 255, 255, 0.1); - --spectrum-colorarea-border-color-key-focus: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-border-color: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-border-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-border-color-down: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-border-color-key-focus: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-vertical-border-color: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-vertical-border-color-hover: rgba( - 255, - 255, - 255, - 0.1 - ); - --spectrum-colorslider-vertical-border-color-down: rgba(255, 255, 255, 0.1); - --spectrum-colorslider-vertical-border-color-key-focus: rgba( - 255, - 255, - 255, - 0.1 - ); - --spectrum-colorwheel-border-color: rgba(255, 255, 255, 0.1); - --spectrum-colorwheel-border-color-hover: rgba(255, 255, 255, 0.1); - --spectrum-colorwheel-border-color-down: rgba(255, 255, 255, 0.1); - --spectrum-colorwheel-border-color-key-focus: rgba(255, 255, 255, 0.1); --spectrum-miller-column-item-background-color-selected: rgba( 55, 142, @@ -158,8 +141,33 @@ governing permissions and limitations under the License. --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 ); - --spectrum-tray-background-color: var(--spectrum-global-color-gray-100); --spectrum-well-background-color: rgba(227, 227, 227, 0.02); + --spectrum-colorarea-border-color: rgba(255, 255, 255, 0.1); + --spectrum-colorarea-border-color-hover: rgba(255, 255, 255, 0.1); + --spectrum-colorarea-border-color-down: rgba(255, 255, 255, 0.1); + --spectrum-colorarea-border-color-key-focus: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-border-color: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-border-color-hover: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-border-color-down: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-border-color-key-focus: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-vertical-border-color: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-vertical-border-color-hover: rgba( + 255, + 255, + 255, + 0.1 + ); + --spectrum-colorslider-vertical-border-color-down: rgba(255, 255, 255, 0.1); + --spectrum-colorslider-vertical-border-color-key-focus: rgba( + 255, + 255, + 255, + 0.1 + ); + --spectrum-colorwheel-border-color: rgba(255, 255, 255, 0.1); + --spectrum-colorwheel-border-color-hover: rgba(255, 255, 255, 0.1); + --spectrum-colorwheel-border-color-down: rgba(255, 255, 255, 0.1); + --spectrum-colorwheel-border-color-key-focus: rgba(255, 255, 255, 0.1); --spectrum-well-border-color: rgba(255, 255, 255, 0.05); } diff --git a/packages/styles/theme-darkest.css b/packages/styles/theme-darkest.css index 49007886cb..603a62a582 100644 --- a/packages/styles/theme-darkest.css +++ b/packages/styles/theme-darkest.css @@ -74,6 +74,15 @@ governing permissions and limitations under the License. --spectrum-global-color-gray-700: rgb(162, 162, 162); --spectrum-global-color-gray-800: rgb(200, 200, 200); --spectrum-global-color-gray-900: rgb(239, 239, 239); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.6); --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.8); --spectrum-alias-background-color-hover-overlay: rgba(239, 239, 239, 0.08); diff --git a/packages/styles/theme-light.css b/packages/styles/theme-light.css index 4aca3754de..7322124880 100644 --- a/packages/styles/theme-light.css +++ b/packages/styles/theme-light.css @@ -74,6 +74,15 @@ governing permissions and limitations under the License. --spectrum-global-color-gray-700: rgb(110, 110, 110); --spectrum-global-color-gray-800: rgb(75, 75, 75); --spectrum-global-color-gray-900: rgb(44, 44, 44); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.4); --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.15); --spectrum-alias-background-color-hover-overlay: rgba(44, 44, 44, 0.04); @@ -155,7 +164,6 @@ governing permissions and limitations under the License. ); --spectrum-well-background-color: rgba(75, 75, 75, 0.02); --spectrum-well-border-color: rgba(44, 44, 44, 0.05); - --spectrum-tray-background-color: var(--spectrum-global-color-gray-50); } /* stylelint-enable */ diff --git a/packages/styles/theme-lightest.css b/packages/styles/theme-lightest.css index 110040436c..cef2b1dc49 100644 --- a/packages/styles/theme-lightest.css +++ b/packages/styles/theme-lightest.css @@ -74,6 +74,15 @@ governing permissions and limitations under the License. --spectrum-global-color-gray-700: rgb(116, 116, 116); --spectrum-global-color-gray-800: rgb(80, 80, 80); --spectrum-global-color-gray-900: rgb(50, 50, 50); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.4); --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.15); --spectrum-alias-background-color-hover-overlay: rgba(50, 50, 50, 0.04); diff --git a/packages/styles/typography.css b/packages/styles/typography.css index d69f1fd148..fabf5314ac 100644 --- a/packages/styles/typography.css +++ b/packages/styles/typography.css @@ -117,5598 +117,2773 @@ governing permissions and limitations under the License. ); } -.spectrum, -.spectrum.spectrum-Body, -.spectrum-Body { - font-size: var( - --spectrum-body-4-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-body-4-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-4-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-4-text-font-style, - var(--spectrum-global-font-style-regular) - ); -} - -.spectrum-Body--italic { - font-style: var( - --spectrum-body-4-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Body1 { +.spectrum-Heading--XXXL { font-size: var( - --spectrum-body-1-text-size, - var(--spectrum-global-dimension-font-size-400) + --spectrum-heading-xxxl-text-size, + var(--spectrum-alias-heading-xxxl-text-size) ); font-weight: var( - --spectrum-body-1-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-heading-xxxl-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-1-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-heading-xxxl-text-line-height, + var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-body-1-text-font-style, + --spectrum-heading-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-1-text-letter-spacing, + --spectrum-heading-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-1-text-transform, none); + text-transform: var(--spectrum-heading-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Body2, -.spectrum-Body--large { +.spectrum-Heading--XXL { font-size: var( - --spectrum-body-2-text-size, - var(--spectrum-global-dimension-font-size-300) + --spectrum-heading-xxl-text-size, + var(--spectrum-alias-heading-xxl-text-size) ); font-weight: var( - --spectrum-body-2-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-heading-xxl-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-2-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-heading-xxl-text-line-height, + var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-body-2-text-font-style, + --spectrum-heading-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-2-text-letter-spacing, + --spectrum-heading-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-2-text-transform, none); + text-transform: var(--spectrum-heading-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Body3 { +.spectrum-Heading--XL { font-size: var( - --spectrum-body-3-text-size, - var(--spectrum-global-dimension-font-size-200) + --spectrum-heading-xl-text-size, + var(--spectrum-alias-heading-xl-text-size) ); font-weight: var( - --spectrum-body-3-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-heading-xl-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-3-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-heading-xl-text-line-height, + var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-body-3-text-font-style, + --spectrum-heading-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-3-text-letter-spacing, + --spectrum-heading-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-3-text-transform, none); + text-transform: var(--spectrum-heading-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Body4, -.spectrum-Body--secondary { +.spectrum-Heading--L { font-size: var( - --spectrum-body-4-text-size, - var(--spectrum-alias-font-size-default) + --spectrum-heading-l-text-size, + var(--spectrum-alias-heading-l-text-size) ); font-weight: var( - --spectrum-body-4-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-heading-l-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-4-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-heading-l-text-line-height, + var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-body-4-text-font-style, + --spectrum-heading-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-4-text-letter-spacing, + --spectrum-heading-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-4-text-transform, none); + text-transform: var(--spectrum-heading-l-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Body5, -.spectrum-Body--small { +.spectrum-Heading--M { font-size: var( - --spectrum-body-5-text-size, - var(--spectrum-global-dimension-font-size-75) + --spectrum-heading-m-text-size, + var(--spectrum-alias-heading-m-text-size) ); font-weight: var( - --spectrum-body-5-text-font-weight, - var(--spectrum-alias-body-text-font-weight) + --spectrum-heading-m-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-5-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-heading-m-text-line-height, + var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-body-5-text-font-style, + --spectrum-heading-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-5-text-letter-spacing, + --spectrum-heading-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-5-text-transform, none); + text-transform: var(--spectrum-heading-m-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1 { +.spectrum-Heading--S { font-size: var( - --spectrum-heading-1-text-size, - var(--spectrum-alias-heading1-text-size) + --spectrum-heading-s-text-size, + var(--spectrum-alias-heading-s-text-size) ); font-weight: var( - --spectrum-heading-1-text-font-weight, + --spectrum-heading-s-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-heading-1-text-line-height, + --spectrum-heading-s-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-heading-1-text-font-style, + --spectrum-heading-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-1-text-letter-spacing, + --spectrum-heading-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-1-text-transform, none); + text-transform: var(--spectrum-heading-s-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2 { +.spectrum-Heading--XS { font-size: var( - --spectrum-heading-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-heading-xs-text-size, + var(--spectrum-alias-heading-xs-text-size) ); font-weight: var( - --spectrum-heading-2-text-font-weight, + --spectrum-heading-xs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-heading-2-text-line-height, + --spectrum-heading-xs-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-heading-2-text-font-style, + --spectrum-heading-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-2-text-letter-spacing, + --spectrum-heading-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-2-text-transform, none); + text-transform: var(--spectrum-heading-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading3 { +.spectrum-Heading--XXS { font-size: var( - --spectrum-heading-3-text-size, - var(--spectrum-alias-heading3-text-size) + --spectrum-heading-xxs-text-size, + var(--spectrum-alias-heading-xxs-text-size) ); font-weight: var( - --spectrum-heading-3-text-font-weight, + --spectrum-heading-xxs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); line-height: var( - --spectrum-heading-3-text-line-height, + --spectrum-heading-xxs-text-line-height, var(--spectrum-alias-heading-text-line-height) ); font-style: var( - --spectrum-heading-3-text-font-style, + --spectrum-heading-xxs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-3-text-letter-spacing, + --spectrum-heading-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-3-text-transform, none); + text-transform: var(--spectrum-heading-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading4, -.spectrum-Heading--subtitle1 { - font-size: var( - --spectrum-heading-4-text-size, - var(--spectrum-alias-heading4-text-size) +.spectrum-Heading { + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) ); font-weight: var( - --spectrum-heading-4-text-font-weight, + --spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular) ); - line-height: var( - --spectrum-heading-4-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); +} + +.spectrum-Heading em, +.spectrum-Heading .spectrum-Heading-emphasis { font-style: var( - --spectrum-heading-4-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-heading-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); - letter-spacing: var( - --spectrum-heading-4-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) +} + +.spectrum-Heading strong, +.spectrum-Heading .spectrum-Heading-strong { + font-weight: var( + --spectrum-heading-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); - text-transform: var(--spectrum-heading-4-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Heading5 { - font-size: var( - --spectrum-heading-5-text-size, - var(--spectrum-alias-heading5-text-size) +.spectrum-Heading--serif { + font-family: var( + --spectrum-body-serif-m-text-font-family, + var(--spectrum-alias-serif-text-font-family) ); +} + +.spectrum-Heading--heavy { font-weight: var( - --spectrum-heading-5-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-heading-heavy-m-text-font-weight, + var(--spectrum-global-font-weight-black) ); - line-height: var( - --spectrum-heading-5-text-line-height, - var(--spectrum-alias-heading-text-line-height) +} + +.spectrum-Heading--heavy em, +.spectrum-Heading--heavy .spectrum-Heading-emphasis { + font-style: var( + --spectrum-heading-heavy-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) + ); +} + +.spectrum-Heading--heavy strong, +.spectrum-Heading--heavy .spectrum-Heading-strong { + font-weight: var( + --spectrum-heading-heavy-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) + ); +} + +.spectrum-Heading--light { + font-weight: var( + --spectrum-heading-light-m-emphasis-text-font-weight, + var(--spectrum-global-font-weight-light) ); +} + +.spectrum-Heading--light em, +.spectrum-Heading--light .spectrum-Heading-emphasis { font-style: var( - --spectrum-heading-5-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-heading-light-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); - letter-spacing: var( - --spectrum-heading-5-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) +} + +.spectrum-Heading--light strong, +.spectrum-Heading--light .spectrum-Heading-strong { + font-weight: var( + --spectrum-heading-light-m-strong-text-font-weight, + var(--spectrum-global-font-weight-bold) ); - text-transform: var(--spectrum-heading-5-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Heading6, -.spectrum-Heading--subtitle2 { +.spectrum-Body--XXXL { font-size: var( - --spectrum-heading-6-text-size, - var(--spectrum-alias-heading6-text-size) + --spectrum-body-xxxl-text-size, + var(--spectrum-global-dimension-font-size-600) ); font-weight: var( - --spectrum-heading-6-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-body-xxxl-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-heading-6-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-xxxl-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-heading-6-text-font-style, + --spectrum-body-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-6-text-letter-spacing, + --spectrum-body-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-6-text-transform, none); + text-transform: var(--spectrum-body-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Subheading, -.spectrum-Heading--subtitle3 { +.spectrum-Body--XXL { font-size: var( - --spectrum-subheading-text-size, - var(--spectrum-global-dimension-font-size-50) + --spectrum-body-xxl-text-size, + var(--spectrum-global-dimension-font-size-500) ); font-weight: var( - --spectrum-subheading-text-font-weight, - var(--spectrum-alias-subheading-text-font-weight) + --spectrum-body-xxl-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-subheading-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-xxl-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-subheading-text-font-style, + --spectrum-body-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-subheading-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) + --spectrum-body-xxl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-subheading-text-transform, uppercase); + text-transform: var(--spectrum-body-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Detail { +.spectrum-Body--XL { font-size: var( - --spectrum-detail-text-size, - var(--spectrum-global-dimension-font-size-50) + --spectrum-body-xl-text-size, + var(--spectrum-global-dimension-font-size-400) ); font-weight: var( - --spectrum-detail-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) + --spectrum-body-xl-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-detail-text-line-height, + --spectrum-body-xl-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-detail-text-font-style, + --spectrum-body-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-detail-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) + --spectrum-body-xl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-detail-text-transform, uppercase); + text-transform: var(--spectrum-body-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1--quiet { +.spectrum-Body--L { font-size: var( - --spectrum-heading-quiet-1-text-size, - var(--spectrum-alias-heading1-text-size) + --spectrum-body-l-text-size, + var(--spectrum-global-dimension-font-size-300) ); font-weight: var( - --spectrum-heading-quiet-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-quiet) + --spectrum-body-l-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-heading-quiet-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-l-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-heading-quiet-1-text-font-style, + --spectrum-body-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-1-text-letter-spacing, + --spectrum-body-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-quiet-1-text-transform, none); + text-transform: var(--spectrum-body-l-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2--quiet, -.spectrum-Heading--pageTitle { +.spectrum-Body--M { font-size: var( - --spectrum-heading-quiet-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-body-m-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-heading-quiet-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-quiet) + --spectrum-body-m-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-heading-quiet-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-m-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-heading-quiet-2-text-font-style, + --spectrum-body-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-2-text-letter-spacing, + --spectrum-body-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-quiet-2-text-transform, none); + text-transform: var(--spectrum-body-m-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1--strong { +.spectrum-Body--S { font-size: var( - --spectrum-heading-strong-1-text-size, - var(--spectrum-alias-heading1-text-size) + --spectrum-body-s-text-size, + var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-heading-strong-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-strong) + --spectrum-body-s-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-heading-strong-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-s-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-heading-strong-1-text-font-style, + --spectrum-body-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-strong-1-text-letter-spacing, + --spectrum-body-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-strong-1-text-transform, none); + text-transform: var(--spectrum-body-s-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2--strong { +.spectrum-Body--XS { font-size: var( - --spectrum-heading-strong-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-body-xs-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-heading-strong-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-strong) + --spectrum-body-xs-text-font-weight, + var(--spectrum-alias-body-text-font-weight) ); line-height: var( - --spectrum-heading-strong-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-body-xs-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-heading-strong-2-text-font-style, + --spectrum-body-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-strong-2-text-letter-spacing, + --spectrum-body-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-strong-2-text-transform, none); + text-transform: var(--spectrum-body-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1--display { +.spectrum-Body { + font-family: var( + --spectrum-body-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); +} + +.spectrum-Body strong, +.spectrum-Body .spectrum-Body-strong { + font-weight: var( + --spectrum-body-m-strong-text-font-weight, + var(--spectrum-global-font-weight-bold) + ); +} + +.spectrum-Body em, +.spectrum-Body .spectrum-Body-emphasis { + font-style: var( + --spectrum-body-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) + ); +} + +.spectrum-Body--serif { + font-family: var( + --spectrum-body-serif-m-text-font-family, + var(--spectrum-alias-serif-text-font-family) + ); +} + +.spectrum-Detail { + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) + ); +} + +.spectrum-Detail strong, +.spectrum-Detail .spectrum-Detail-strong { + font-weight: var( + --spectrum-detail-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) + ); +} + +.spectrum-Detail em, +.spectrum-Detail .spectrum-Detail-emphasis { + font-style: var( + --spectrum-detail-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) + ); +} + +.spectrum-Detail--light { + font-style: var( + --spectrum-detail-light-m-text-font-style, + var(--spectrum-global-font-style-regular) + ); + font-weight: var( + --spectrum-detail-light-m-text-font-weight, + var(--spectrum-alias-detail-text-font-weight-light) + ); +} + +.spectrum-Detail--serif { + font-family: var( + --spectrum-body-serif-m-text-font-family, + var(--spectrum-alias-serif-text-font-family) + ); +} + +.spectrum-Detail--XL { font-size: var( - --spectrum-display-1-text-size, - var(--spectrum-alias-heading-display1-text-size) + --spectrum-detail-xl-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-display-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-detail-xl-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-xl-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-1-text-font-style, + --spectrum-detail-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-xl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-display-1-text-transform, none); + text-transform: var(--spectrum-detail-xl-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2--display { +.spectrum-Detail--XL em { font-size: var( - --spectrum-display-2-text-size, - var(--spectrum-alias-heading-display2-text-size) + --spectrum-detail-xl-emphasis-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-display-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-detail-xl-emphasis-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-xl-emphasis-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-2-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-detail-xl-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); letter-spacing: var( - --spectrum-display-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-xl-emphasis-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) + ); + text-transform: var( + --spectrum-detail-xl-emphasis-text-transform, + uppercase ); - text-transform: var(--spectrum-display-2-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1--display.spectrum-Heading1--strong { +.spectrum-Detail--XL strong { font-size: var( - --spectrum-display-strong-1-text-size, - var(--spectrum-alias-heading-display1-text-size) + --spectrum-detail-xl-strong-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-display-strong-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-strong) + --spectrum-detail-xl-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-display-strong-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-xl-strong-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-strong-1-text-font-style, + --spectrum-detail-xl-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-strong-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-xl-strong-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-display-strong-1-text-transform, none); + text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2--display.spectrum-Heading2--strong { +.spectrum-Detail--L { font-size: var( - --spectrum-display-strong-2-text-size, - var(--spectrum-alias-heading-display2-text-size) + --spectrum-detail-l-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-display-strong-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-strong) + --spectrum-detail-l-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-strong-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-l-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-strong-2-text-font-style, + --spectrum-detail-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-strong-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-l-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-display-strong-2-text-transform, none); + text-transform: var(--spectrum-detail-l-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum-Detail--L em { font-size: var( - --spectrum-display-quiet-1-text-size, - var(--spectrum-alias-heading-display1-text-size) + --spectrum-detail-l-emphasis-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-display-quiet-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-quiet) + --spectrum-detail-l-emphasis-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-quiet-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-l-emphasis-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-quiet-1-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-detail-l-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); letter-spacing: var( - --spectrum-display-quiet-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-l-emphasis-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-display-quiet-1-text-transform, none); + text-transform: var(--spectrum-detail-l-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum-Heading--display { +.spectrum-Detail--L strong { font-size: var( - --spectrum-display-quiet-2-text-size, - var(--spectrum-alias-heading-display2-text-size) + --spectrum-detail-l-strong-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-display-quiet-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-quiet) + --spectrum-detail-l-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-display-quiet-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-detail-l-strong-text-line-height, + var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-display-quiet-2-text-font-style, + --spectrum-detail-l-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-quiet-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-l-strong-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-display-quiet-2-text-transform, none); + text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Typography .spectrum-Body1 { - margin-top: var(--spectrum-body-1-margin-top, 0px); - margin-bottom: var( - --spectrum-body-1-margin-bottom, - var(--spectrum-global-dimension-size-200) +.spectrum-Detail--M { + font-size: var( + --spectrum-detail-m-text-size, + var(--spectrum-global-dimension-font-size-75) ); -} - -.spectrum-Typography .spectrum-Body2, -.spectrum-Typography .spectrum-Body--large { - margin-top: var(--spectrum-body-2-margin-top, 0px); - margin-bottom: var( - --spectrum-body-2-margin-bottom, - var(--spectrum-global-dimension-size-160) + font-weight: var( + --spectrum-detail-m-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); -} - -.spectrum-Typography .spectrum-Body3 { - margin-top: var(--spectrum-body-3-margin-top, 0px); - margin-bottom: var( - --spectrum-body-3-margin-bottom, - var(--spectrum-global-dimension-size-150) + line-height: var( + --spectrum-detail-m-text-line-height, + var(--spectrum-alias-body-text-line-height) ); -} - -.spectrum-Typography .spectrum-Body4, -.spectrum-Typography .spectrum-Body--secondary { - margin-top: var(--spectrum-body-4-margin-top, 0px); - margin-bottom: var( - --spectrum-body-4-margin-bottom, - var(--spectrum-global-dimension-size-125) + font-style: var( + --spectrum-detail-m-text-font-style, + var(--spectrum-global-font-style-regular) ); -} - -.spectrum-Typography .spectrum-Body5, -.spectrum-Typography .spectrum-Body--small { - margin-top: var(--spectrum-body-5-margin-top, 0px); - margin-bottom: var( - --spectrum-body-5-margin-bottom, - var(--spectrum-global-dimension-size-115) + letter-spacing: var( + --spectrum-detail-m-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); + text-transform: var(--spectrum-detail-m-text-transform, uppercase); + margin-top: 0; + margin-bottom: 0; } -.spectrum-Typography .spectrum-Heading1 { - margin-top: var( - --spectrum-heading-1-margin-top, - var(--spectrum-alias-heading1-margin-top) - ); - margin-bottom: var( - --spectrum-heading-1-margin-bottom, - var(--spectrum-global-dimension-size-115) +.spectrum-Detail--M em { + font-size: var( + --spectrum-detail-m-emphasis-text-size, + var(--spectrum-global-dimension-font-size-75) ); -} - -.spectrum-Typography .spectrum-Heading2 { - margin-top: var( - --spectrum-heading-2-margin-top, - var(--spectrum-alias-heading2-margin-top) + font-weight: var( + --spectrum-detail-m-emphasis-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); - margin-bottom: var( - --spectrum-heading-2-margin-bottom, - var(--spectrum-global-dimension-size-85) + line-height: var( + --spectrum-detail-m-emphasis-text-line-height, + var(--spectrum-alias-body-text-line-height) ); -} - -.spectrum-Typography .spectrum-Heading3 { - margin-top: var( - --spectrum-heading-3-margin-top, - var(--spectrum-alias-heading3-margin-top) + font-style: var( + --spectrum-detail-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); - margin-bottom: var( - --spectrum-heading-3-margin-bottom, - var(--spectrum-global-dimension-size-75) + letter-spacing: var( + --spectrum-detail-m-emphasis-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); + text-transform: var(--spectrum-detail-m-emphasis-text-transform, uppercase); + margin-top: 0; + margin-bottom: 0; } -.spectrum-Typography .spectrum-Heading4, -.spectrum-Typography .spectrum-Heading--subtitle1 { - margin-top: var( - --spectrum-heading-4-margin-top, - var(--spectrum-alias-heading4-margin-top) +.spectrum-Detail--M strong { + font-size: var( + --spectrum-detail-m-strong-text-size, + var(--spectrum-global-dimension-font-size-75) ); - margin-bottom: var( - --spectrum-heading-4-margin-bottom, - var(--spectrum-global-dimension-size-65) + font-weight: var( + --spectrum-detail-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); -} - -.spectrum-Typography .spectrum-Heading5 { - margin-top: var( - --spectrum-heading-5-margin-top, - var(--spectrum-alias-heading5-margin-top) + line-height: var( + --spectrum-detail-m-strong-text-line-height, + var(--spectrum-alias-body-text-line-height) ); - margin-bottom: var( - --spectrum-heading-5-margin-bottom, - var(--spectrum-global-dimension-size-50) + font-style: var( + --spectrum-detail-m-strong-text-font-style, + var(--spectrum-global-font-style-regular) + ); + letter-spacing: var( + --spectrum-detail-m-strong-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); + text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase); + margin-top: 0; + margin-bottom: 0; } -.spectrum-Typography .spectrum-Heading6, -.spectrum-Typography .spectrum-Heading--subtitle2 { - margin-top: var( - --spectrum-heading-6-margin-top, - var(--spectrum-alias-heading6-margin-top) - ); - margin-bottom: var( - --spectrum-heading-6-margin-bottom, - var(--spectrum-global-dimension-size-40) - ); -} - -.spectrum-Typography .spectrum-Subheading, -.spectrum-Typography .spectrum-Heading--subtitle3 { - margin-top: var( - --spectrum-subheading-margin-top, - var(--spectrum-global-dimension-font-size-75) - ); - margin-bottom: var( - --spectrum-subheading-margin-bottom, - var(--spectrum-global-dimension-size-40) - ); -} - -.spectrum-Typography .spectrum-Detail { - margin-top: var(--spectrum-detail-margin-top, 0px); - margin-bottom: var( - --spectrum-detail-margin-bottom, - var(--spectrum-global-dimension-size-100) - ); -} - -.spectrum-Typography .spectrum-Heading1--quiet { - margin-top: var( - --spectrum-heading-quiet-1-margin-top, - var(--spectrum-alias-heading1-margin-top) - ); - margin-bottom: var( - --spectrum-heading-quiet-1-margin-bottom, - var(--spectrum-global-dimension-size-115) - ); -} - -.spectrum-Typography .spectrum-Heading2--quiet, -.spectrum-Typography .spectrum-Heading--pageTitle { - margin-top: var( - --spectrum-heading-quiet-2-margin-top, - var(--spectrum-alias-heading2-margin-top) - ); - margin-bottom: var( - --spectrum-heading-quiet-2-margin-bottom, - var(--spectrum-global-dimension-size-85) - ); -} - -.spectrum-Typography .spectrum-Heading1--strong { - margin-top: var( - --spectrum-heading-strong-1-margin-top, - var(--spectrum-alias-heading1-margin-top) - ); - margin-bottom: var( - --spectrum-heading-strong-1-margin-bottom, - var(--spectrum-global-dimension-size-115) - ); -} - -.spectrum-Typography .spectrum-Heading2--strong { - margin-top: var( - --spectrum-heading-strong-2-margin-top, - var(--spectrum-alias-heading2-margin-top) - ); - margin-bottom: var( - --spectrum-heading-strong-2-margin-bottom, - var(--spectrum-global-dimension-size-85) - ); -} - -.spectrum-Typography .spectrum-Heading1--display { - margin-top: var( - --spectrum-display-1-margin-top, - var(--spectrum-alias-heading-display1-margin-top) - ); - margin-bottom: var( - --spectrum-display-1-margin-bottom, - var(--spectrum-global-dimension-size-130) - ); -} - -.spectrum-Typography .spectrum-Heading2--display { - margin-top: var( - --spectrum-display-2-margin-top, - var(--spectrum-alias-heading-display2-margin-top) - ); - margin-bottom: var( - --spectrum-display-2-margin-bottom, - var(--spectrum-global-dimension-size-125) - ); -} - -.spectrum-Typography .spectrum-Heading1--display.spectrum-Heading1--strong { - margin-top: var( - --spectrum-display-strong-1-margin-top, - var(--spectrum-alias-heading-display1-margin-top) - ); - margin-bottom: var( - --spectrum-display-strong-1-margin-bottom, - var(--spectrum-global-dimension-size-130) - ); -} - -.spectrum-Typography .spectrum-Heading2--display.spectrum-Heading2--strong { - margin-top: var( - --spectrum-display-strong-2-margin-top, - var(--spectrum-alias-heading-display2-margin-top) - ); - margin-bottom: var( - --spectrum-display-strong-2-margin-bottom, - var(--spectrum-global-dimension-size-125) - ); -} - -.spectrum-Typography .spectrum-Heading1--display.spectrum-Heading1--quiet { - margin-top: var( - --spectrum-display-quiet-1-margin-top, - var(--spectrum-alias-heading-display1-margin-top) - ); - margin-bottom: var( - --spectrum-display-quiet-1-margin-bottom, - var(--spectrum-global-dimension-size-130) - ); -} - -.spectrum-Typography .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum-Typography .spectrum-Heading--display { - margin-top: var( - --spectrum-display-quiet-2-margin-top, - var(--spectrum-alias-heading-display2-margin-top) - ); - margin-bottom: var( - --spectrum-display-quiet-2-margin-bottom, - var(--spectrum-global-dimension-size-125) - ); -} - -.spectrum-Article { - font-family: var( - --spectrum-body-article-1-text-font-family, - var(--spectrum-alias-article-text-font-family) - ); -} - -.spectrum-Article .spectrum-Body1 { +.spectrum-Detail--S { font-size: var( - --spectrum-body-article-1-text-size, - var(--spectrum-global-dimension-font-size-400) + --spectrum-detail-s-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-body-article-1-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) + --spectrum-detail-s-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-body-article-1-text-line-height, + --spectrum-detail-s-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-body-article-1-text-font-style, + --spectrum-detail-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-article-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-body-article-1-text-transform, none); + text-transform: var(--spectrum-detail-s-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Body2, -.spectrum-Article .spectrum-Body--large { +.spectrum-Detail--S em { font-size: var( - --spectrum-body-article-2-text-size, - var(--spectrum-global-dimension-font-size-300) + --spectrum-detail-s-emphasis-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-body-article-2-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) + --spectrum-detail-s-emphasis-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-body-article-2-text-line-height, + --spectrum-detail-s-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-body-article-2-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-detail-s-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); letter-spacing: var( - --spectrum-body-article-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-s-emphasis-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-body-article-2-text-transform, none); + text-transform: var(--spectrum-detail-s-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Body3 { +.spectrum-Detail--S strong { font-size: var( - --spectrum-body-article-3-text-size, - var(--spectrum-global-dimension-font-size-200) + --spectrum-detail-s-strong-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-body-article-3-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) + --spectrum-detail-s-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-body-article-3-text-line-height, + --spectrum-detail-s-strong-text-line-height, var(--spectrum-alias-body-text-line-height) ); font-style: var( - --spectrum-body-article-3-text-font-style, + --spectrum-detail-s-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-article-3-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-detail-s-strong-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: var(--spectrum-body-article-3-text-transform, none); + text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Body4, -.spectrum-Article .spectrum-Body--secondary { - font-size: var( - --spectrum-body-article-4-text-size, - var(--spectrum-alias-font-size-default) +.spectrum-Code { + font-family: var( + --spectrum-heading-m-text-font-family, + var(--spectrum-alias-body-text-font-family) ); +} + +.spectrum-Code strong, +.spectrum-Code .spectrum-Code-strong { font-weight: var( - --spectrum-body-article-4-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) - ); - line-height: var( - --spectrum-body-article-4-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-code-m-strong-text-font-weight, + var(--spectrum-global-font-weight-bold) ); +} + +.spectrum-Code em, +.spectrum-Code .spectrum-Code-emphasis { font-style: var( - --spectrum-body-article-4-text-font-style, - var(--spectrum-global-font-style-regular) + --spectrum-code-m-emphasis-text-font-style, + var(--spectrum-global-font-style-italic) ); - letter-spacing: var( - --spectrum-body-article-4-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) +} + +.spectrum-Code--serif { + font-family: var( + --spectrum-body-serif-m-text-font-family, + var(--spectrum-alias-serif-text-font-family) ); - text-transform: var(--spectrum-body-article-4-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Article .spectrum-Body5, -.spectrum-Article .spectrum-Body--small { +.spectrum-Code--XL { font-size: var( - --spectrum-body-article-5-text-size, - var(--spectrum-global-dimension-font-size-75) + --spectrum-code-xl-text-size, + var(--spectrum-global-dimension-font-size-400) ); font-weight: var( - --spectrum-body-article-5-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) + --spectrum-code-xl-text-font-weight, + var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( - --spectrum-body-article-5-text-line-height, - var(--spectrum-alias-body-text-line-height) + --spectrum-code-xl-text-line-height, + var(--spectrum-alias-code-text-line-height) ); font-style: var( - --spectrum-body-article-5-text-font-style, + --spectrum-code-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-article-5-text-letter-spacing, + --spectrum-code-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-body-article-5-text-transform, none); margin-top: 0; margin-bottom: 0; + font-family: var( + --spectrum-code-xl-text-font-family, + var(--spectrum-alias-code-text-font-family) + ); } -.spectrum-Article .spectrum-Heading1 { +.spectrum-Code--L { font-size: var( - --spectrum-heading-article-1-text-size, - var(--spectrum-alias-heading1-text-size) + --spectrum-code-l-text-size, + var(--spectrum-global-dimension-font-size-300) ); font-weight: var( - --spectrum-heading-article-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-code-l-text-font-weight, + var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( - --spectrum-heading-article-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-code-l-text-line-height, + var(--spectrum-alias-code-text-line-height) ); font-style: var( - --spectrum-heading-article-1-text-font-style, + --spectrum-code-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-article-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-code-l-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-article-1-text-transform, none); margin-top: 0; margin-bottom: 0; + font-family: var( + --spectrum-code-l-text-font-family, + var(--spectrum-alias-code-text-font-family) + ); } -.spectrum-Article .spectrum-Heading2 { +.spectrum-Code--M { font-size: var( - --spectrum-heading-article-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-code-m-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-heading-article-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-code-m-text-font-weight, + var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( - --spectrum-heading-article-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-code-m-text-line-height, + var(--spectrum-alias-code-text-line-height) ); font-style: var( - --spectrum-heading-article-2-text-font-style, + --spectrum-code-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-article-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-code-m-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-article-2-text-transform, none); margin-top: 0; margin-bottom: 0; + font-family: var( + --spectrum-code-m-text-font-family, + var(--spectrum-alias-code-text-font-family) + ); } -.spectrum-Article .spectrum-Heading3 { +.spectrum-Code--S { font-size: var( - --spectrum-heading-article-3-text-size, - var(--spectrum-alias-heading3-text-size) + --spectrum-code-s-text-size, + var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-heading-article-3-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-code-s-text-font-weight, + var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( - --spectrum-heading-article-3-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-code-s-text-line-height, + var(--spectrum-alias-code-text-line-height) ); font-style: var( - --spectrum-heading-article-3-text-font-style, + --spectrum-code-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-article-3-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-code-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-article-3-text-transform, none); margin-top: 0; margin-bottom: 0; + font-family: var( + --spectrum-code-s-text-font-family, + var(--spectrum-alias-code-text-font-family) + ); } -.spectrum-Article .spectrum-Heading4, -.spectrum-Article .spectrum-Heading--subtitle1 { +.spectrum-Code--XS { font-size: var( - --spectrum-heading-article-4-text-size, - var(--spectrum-alias-heading4-text-size) + --spectrum-code-xs-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-heading-article-4-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-code-xs-text-font-weight, + var(--spectrum-alias-code-text-font-weight-regular) ); line-height: var( - --spectrum-heading-article-4-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-code-xs-text-line-height, + var(--spectrum-alias-code-text-line-height) ); font-style: var( - --spectrum-heading-article-4-text-font-style, + --spectrum-code-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-article-4-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-code-xs-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-none) ); - text-transform: var(--spectrum-heading-article-4-text-transform, none); margin-top: 0; margin-bottom: 0; + font-family: var( + --spectrum-code-xs-text-font-family, + var(--spectrum-alias-code-text-font-family) + ); } -.spectrum-Article .spectrum-Heading5 { - font-size: var( - --spectrum-heading-article-5-text-size, - var(--spectrum-alias-heading5-text-size) +.spectrum-Typography .spectrum-Heading--XXXL { + margin-top: var( + --spectrum-heading-xxxl-margin-top, + var(--spectrum-alias-heading-xxxl-margin-top) ); - font-weight: var( - --spectrum-heading-article-5-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + margin-bottom: var( + --spectrum-heading-xxxl-margin-bottom, + var(--spectrum-global-dimension-size-130) ); - line-height: var( - --spectrum-heading-article-5-text-line-height, - var(--spectrum-alias-heading-text-line-height) +} + +.spectrum-Typography .spectrum-Heading--XXL { + margin-top: var( + --spectrum-heading-xxl-margin-top, + var(--spectrum-alias-heading-xxl-margin-top) ); - font-style: var( - --spectrum-heading-article-5-text-font-style, - var(--spectrum-global-font-style-regular) + margin-bottom: var( + --spectrum-heading-xxl-margin-bottom, + var(--spectrum-global-dimension-size-125) ); - letter-spacing: var( - --spectrum-heading-article-5-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) +} + +.spectrum-Typography .spectrum-Heading--XL { + margin-top: var( + --spectrum-heading-xl-margin-top, + var(--spectrum-alias-heading-xl-margin-top) + ); + margin-bottom: var( + --spectrum-heading-xl-margin-bottom, + var(--spectrum-global-dimension-size-115) ); - text-transform: var(--spectrum-heading-article-5-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Article .spectrum-Heading6, -.spectrum-Article .spectrum-Heading--subtitle2 { - font-size: var( - --spectrum-heading-article-6-text-size, - var(--spectrum-alias-heading6-text-size) +.spectrum-Typography .spectrum-Heading--L { + margin-top: var( + --spectrum-heading-l-margin-top, + var(--spectrum-alias-heading-l-margin-top) ); - font-weight: var( - --spectrum-heading-article-6-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + margin-bottom: var( + --spectrum-heading-l-margin-bottom, + var(--spectrum-global-dimension-size-85) ); - line-height: var( - --spectrum-heading-article-6-text-line-height, - var(--spectrum-alias-heading-text-line-height) +} + +.spectrum-Typography .spectrum-Heading--M { + margin-top: var( + --spectrum-heading-m-margin-top, + var(--spectrum-alias-heading-m-margin-top) ); - font-style: var( - --spectrum-heading-article-6-text-font-style, - var(--spectrum-global-font-style-regular) + margin-bottom: var( + --spectrum-heading-m-margin-bottom, + var(--spectrum-global-dimension-size-75) ); - letter-spacing: var( - --spectrum-heading-article-6-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) +} + +.spectrum-Typography .spectrum-Heading--S { + margin-top: var( + --spectrum-heading-s-margin-top, + var(--spectrum-alias-heading-s-margin-top) + ); + margin-bottom: var( + --spectrum-heading-s-margin-bottom, + var(--spectrum-global-dimension-size-65) ); - text-transform: var(--spectrum-heading-article-6-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Article .spectrum-Subheading, -.spectrum-Article .spectrum-Heading--subtitle3 { - font-size: var( - --spectrum-subheading-article-text-size, - var(--spectrum-global-dimension-font-size-50) +.spectrum-Typography .spectrum-Heading--XS { + margin-top: var( + --spectrum-heading-xs-margin-top, + var(--spectrum-alias-heading-xs-margin-top) ); - font-weight: var( - --spectrum-subheading-article-text-font-weight, - var(--spectrum-alias-article-subheading-text-font-weight) + margin-bottom: var( + --spectrum-heading-xs-margin-bottom, + var(--spectrum-global-dimension-size-50) ); - line-height: var( - --spectrum-subheading-article-text-line-height, - var(--spectrum-alias-heading-text-line-height) +} + +.spectrum-Typography .spectrum-Heading--XXS { + margin-top: var( + --spectrum-heading-xxs-margin-top, + var(--spectrum-alias-heading-xxs-margin-top) ); - font-style: var( - --spectrum-subheading-article-text-font-style, - var(--spectrum-global-font-style-regular) + margin-bottom: var( + --spectrum-heading-xxs-margin-bottom, + var(--spectrum-global-dimension-size-40) ); - letter-spacing: var( - --spectrum-subheading-article-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) +} + +.spectrum-Typography .spectrum-Body--XXXL { + margin-top: var(--spectrum-body-xxxl-margin-top, 0px); + margin-bottom: var( + --spectrum-body-xxxl-margin-bottom, + var(--spectrum-global-dimension-size-400) ); - text-transform: var(--spectrum-subheading-article-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Article .spectrum-Detail { - font-size: var( - --spectrum-detail-article-text-size, - var(--spectrum-global-dimension-font-size-50) +.spectrum-Typography .spectrum-Body--XXL { + margin-top: var(--spectrum-body-xxl-margin-top, 0px); + margin-bottom: var( + --spectrum-body-xxl-margin-bottom, + var(--spectrum-global-dimension-size-300) ); - font-weight: var( - --spectrum-detail-article-text-font-weight, - var(--spectrum-alias-article-body-text-font-weight) +} + +.spectrum-Typography .spectrum-Body--XL { + margin-top: var(--spectrum-body-xl-margin-top, 0px); + margin-bottom: var( + --spectrum-body-xl-margin-bottom, + var(--spectrum-global-dimension-size-200) ); - line-height: var( - --spectrum-detail-article-text-line-height, - var(--spectrum-alias-body-text-line-height) +} + +.spectrum-Typography .spectrum-Body--L { + margin-top: var(--spectrum-body-l-margin-top, 0px); + margin-bottom: var( + --spectrum-body-l-margin-bottom, + var(--spectrum-global-dimension-size-160) ); - font-style: var( - --spectrum-detail-article-text-font-style, - var(--spectrum-global-font-style-regular) +} + +.spectrum-Typography .spectrum-Body--M { + margin-top: var(--spectrum-body-m-margin-top, 0px); + margin-bottom: var( + --spectrum-body-m-margin-bottom, + var(--spectrum-global-dimension-size-150) ); - letter-spacing: var( - --spectrum-detail-article-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) +} + +.spectrum-Typography .spectrum-Body--S { + margin-top: var(--spectrum-body-s-margin-top, 0px); + margin-bottom: var( + --spectrum-body-s-margin-bottom, + var(--spectrum-global-dimension-size-125) + ); +} + +.spectrum-Typography .spectrum-Body--XS { + margin-top: var(--spectrum-body-xs-margin-top, 0px); + margin-bottom: var( + --spectrum-body-xs-margin-bottom, + var(--spectrum-global-dimension-size-115) ); - text-transform: var(--spectrum-detail-article-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum-Article .spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Heading--XXXL, +.spectrum:lang(ko) .spectrum-Heading--XXXL, +.spectrum:lang(zh) .spectrum-Heading--XXXL { font-size: var( - --spectrum-heading-quiet-article-1-text-size, - var(--spectrum-alias-heading1-text-size) + --spectrum-heading-han-xxxl-text-size, + var(--spectrum-alias-heading-xxxl-text-size) ); font-weight: var( - --spectrum-heading-quiet-article-1-text-font-weight, - var(--spectrum-alias-article-heading-text-font-weight-quiet) + --spectrum-heading-han-xxxl-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-heading-quiet-article-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-xxxl-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-quiet-article-1-text-font-style, + --spectrum-heading-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-article-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) - ); - text-transform: var( - --spectrum-heading-quiet-article-1-text-transform, - none + --spectrum-heading-han-xxxl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); + text-transform: var(--spectrum-heading-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Heading2--quiet, -.spectrum-Article .spectrum-Heading--pageTitle { +.spectrum:lang(ja) .spectrum-Heading--XXL, +.spectrum:lang(ko) .spectrum-Heading--XXL, +.spectrum:lang(zh) .spectrum-Heading--XXL { font-size: var( - --spectrum-heading-quiet-article-2-text-size, - var(--spectrum-alias-heading2-text-size) + --spectrum-heading-han-xxl-text-size, + var(--spectrum-alias-heading-han-xxl-text-size) ); font-weight: var( - --spectrum-heading-quiet-article-2-text-font-weight, - var(--spectrum-alias-article-heading-text-font-weight-quiet) + --spectrum-heading-han-xxl-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-heading-quiet-article-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-xxl-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-quiet-article-2-text-font-style, + --spectrum-heading-han-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-article-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) - ); - text-transform: var( - --spectrum-heading-quiet-article-2-text-transform, - none + --spectrum-heading-han-xxl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); + text-transform: var(--spectrum-heading-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Heading1--display { +.spectrum:lang(ja) .spectrum-Heading--XL, +.spectrum:lang(ko) .spectrum-Heading--XL, +.spectrum:lang(zh) .spectrum-Heading--XL { font-size: var( - --spectrum-display-article-1-text-size, - var(--spectrum-alias-heading-display1-text-size) + --spectrum-heading-han-xl-text-size, + var(--spectrum-alias-heading-han-xl-text-size) ); font-weight: var( - --spectrum-display-article-1-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-heading-han-xl-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-display-article-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-xl-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-article-1-text-font-style, + --spectrum-heading-han-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-article-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-heading-han-xl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-article-1-text-transform, none); + text-transform: var(--spectrum-heading-han-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Heading2--display { +.spectrum:lang(ja) .spectrum-Heading--L, +.spectrum:lang(ko) .spectrum-Heading--L, +.spectrum:lang(zh) .spectrum-Heading--L { font-size: var( - --spectrum-display-article-2-text-size, - var(--spectrum-alias-heading-display2-text-size) + --spectrum-heading-han-l-text-size, + var(--spectrum-alias-heading-han-l-text-size) ); font-weight: var( - --spectrum-display-article-2-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --spectrum-heading-han-l-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-display-article-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-l-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-article-2-text-font-style, + --spectrum-heading-han-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-article-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) + --spectrum-heading-han-l-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-article-2-text-transform, none); + text-transform: var(--spectrum-heading-han-l-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Heading--M, +.spectrum:lang(ko) .spectrum-Heading--M, +.spectrum:lang(zh) .spectrum-Heading--M { font-size: var( - --spectrum-display-quiet-article-1-text-size, - var(--spectrum-alias-heading-display1-text-size) + --spectrum-heading-han-m-text-size, + var(--spectrum-alias-heading-han-m-text-size) ); font-weight: var( - --spectrum-display-quiet-article-1-text-font-weight, - var(--spectrum-alias-article-heading-text-font-weight-quiet) + --spectrum-heading-han-m-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-display-quiet-article-1-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-m-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-quiet-article-1-text-font-style, + --spectrum-heading-han-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-quiet-article-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) - ); - text-transform: var( - --spectrum-display-quiet-article-1-text-transform, - none + --spectrum-heading-han-m-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); + text-transform: var(--spectrum-heading-han-m-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum-Article .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum-Article .spectrum-Heading--display { +.spectrum:lang(ja) .spectrum-Heading--S, +.spectrum:lang(ko) .spectrum-Heading--S, +.spectrum:lang(zh) .spectrum-Heading--S { font-size: var( - --spectrum-display-quiet-article-2-text-size, - var(--spectrum-alias-heading-display2-text-size) + --spectrum-heading-han-s-text-size, + var(--spectrum-alias-heading-s-text-size) ); font-weight: var( - --spectrum-display-quiet-article-2-text-font-weight, - var(--spectrum-alias-article-heading-text-font-weight-quiet) + --spectrum-heading-han-s-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-display-quiet-article-2-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --spectrum-heading-han-s-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-quiet-article-2-text-font-style, + --spectrum-heading-han-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-quiet-article-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-small) - ); - text-transform: var( - --spectrum-display-quiet-article-2-text-transform, - none + --spectrum-heading-han-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); + text-transform: var(--spectrum-heading-han-s-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Body1, -.spectrum:lang(ko) .spectrum-Body1, -.spectrum:lang(zh) .spectrum-Body1 { +.spectrum:lang(ja) .spectrum-Heading--XS, +.spectrum:lang(ko) .spectrum-Heading--XS, +.spectrum:lang(zh) .spectrum-Heading--XS { font-size: var( - --spectrum-body-han-1-text-size, - var(--spectrum-global-dimension-font-size-400) + --spectrum-heading-han-xs-text-size, + var(--spectrum-alias-heading-xs-text-size) ); font-weight: var( - --spectrum-body-han-1-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) + --spectrum-heading-han-xs-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-han-1-text-line-height, - var(--spectrum-alias-body-han-text-line-height) + --spectrum-heading-han-xs-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-body-han-1-text-font-style, + --spectrum-heading-han-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-han-1-text-letter-spacing, + --spectrum-heading-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-body-han-1-text-transform, none); + text-transform: var(--spectrum-heading-han-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Body2, -.spectrum:lang(ko) .spectrum-Body2, -.spectrum:lang(zh) .spectrum-Body2, -.spectrum:lang(ja) .spectrum-Body--large, -.spectrum:lang(ko) .spectrum-Body--large, -.spectrum:lang(zh) .spectrum-Body--large { +.spectrum:lang(ja) .spectrum-Heading--XXS, +.spectrum:lang(ko) .spectrum-Heading--XXS, +.spectrum:lang(zh) .spectrum-Heading--XXS { font-size: var( - --spectrum-body-han-2-text-size, - var(--spectrum-global-dimension-font-size-300) + --spectrum-heading-han-xxs-text-size, + var(--spectrum-alias-heading-xxs-text-size) ); font-weight: var( - --spectrum-body-han-2-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) + --spectrum-heading-han-xxs-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); line-height: var( - --spectrum-body-han-2-text-line-height, - var(--spectrum-alias-body-han-text-line-height) + --spectrum-heading-han-xxs-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-body-han-2-text-font-style, + --spectrum-heading-han-xxs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-han-2-text-letter-spacing, + --spectrum-heading-han-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-body-han-2-text-transform, none); + text-transform: var(--spectrum-heading-han-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Body3, -.spectrum:lang(ko) .spectrum-Body3, -.spectrum:lang(zh) .spectrum-Body3 { - font-size: var( - --spectrum-body-han-3-text-size, - var(--spectrum-global-dimension-font-size-200) - ); +.spectrum:lang(ja) .spectrum-Heading--heavy, +.spectrum:lang(ko) .spectrum-Heading--heavy, +.spectrum:lang(zh) .spectrum-Heading--heavy { font-weight: var( - --spectrum-body-han-3-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-3-text-line-height, - var(--spectrum-alias-body-han-text-line-height) + --spectrum-heading-han-m-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); +} + +.spectrum:lang(ja) .spectrum-Heading--heavy em, +.spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--emphasis, +.spectrum:lang(ko) .spectrum-Heading--heavy em, +.spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--emphasis, +.spectrum:lang(zh) .spectrum-Heading--heavy em, +.spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--emphasis { font-style: var( - --spectrum-body-han-3-text-font-style, + --spectrum-heading-han-heavy-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); - letter-spacing: var( - --spectrum-body-han-3-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) + font-weight: var( + --spectrum-heading-han-heavy-m-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-heavy-emphasis) ); - text-transform: var(--spectrum-body-han-3-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Body4, -.spectrum:lang(ko) .spectrum-Body4, -.spectrum:lang(zh) .spectrum-Body4, -.spectrum:lang(ja) .spectrum-Body--secondary, -.spectrum:lang(ko) .spectrum-Body--secondary, -.spectrum:lang(zh) .spectrum-Body--secondary { - font-size: var( - --spectrum-body-han-4-text-size, - var(--spectrum-alias-font-size-default) +.spectrum:lang(ja) .spectrum-Heading--heavy strong, +.spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--strong, +.spectrum:lang(ko) .spectrum-Heading--heavy strong, +.spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--strong, +.spectrum:lang(zh) .spectrum-Heading--heavy strong, +.spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--strong { + font-style: var( + --spectrum-heading-heavy-m-strong-text-font-style, + var(--spectrum-global-font-style-regular) ); font-weight: var( - --spectrum-body-han-4-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) + --spectrum-heading-heavy-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); - line-height: var( - --spectrum-body-han-4-text-line-height, - var(--spectrum-alias-body-han-text-line-height) +} + +.spectrum:lang(ja) .spectrum-Heading--light, +.spectrum:lang(ko) .spectrum-Heading--light, +.spectrum:lang(zh) .spectrum-Heading--light { + font-weight: var( + --spectrum-heading-han-m-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular) ); +} + +.spectrum:lang(ja) .spectrum-Heading--light em, +.spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--emphasis, +.spectrum:lang(ko) .spectrum-Heading--light em, +.spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--emphasis, +.spectrum:lang(zh) .spectrum-Heading--light em, +.spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--emphasis { font-style: var( - --spectrum-body-han-4-text-font-style, + --spectrum-heading-han-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); - letter-spacing: var( - --spectrum-body-han-4-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) + font-weight: var( + --spectrum-heading-han-light-m-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-light-emphasis) + ); +} + +.spectrum:lang(ja) .spectrum-Heading--light strong, +.spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--strong, +.spectrum:lang(ko) .spectrum-Heading--light strong, +.spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--strong, +.spectrum:lang(zh) .spectrum-Heading--light strong, +.spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--strong { + font-style: var( + --spectrum-heading-han-light-m-strong-text-font-style, + var(--spectrum-global-font-style-regular) + ); + font-weight: var( + --spectrum-heading-han-light-m-strong-text-font-weight, + var(--spectrum-global-font-weight-bold) ); - text-transform: var(--spectrum-body-han-4-text-transform, none); - margin-top: 0; - margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Body5, -.spectrum:lang(ko) .spectrum-Body5, -.spectrum:lang(zh) .spectrum-Body5, -.spectrum:lang(ja) .spectrum-Body--small, -.spectrum:lang(ko) .spectrum-Body--small, -.spectrum:lang(zh) .spectrum-Body--small { +.spectrum:lang(ja) .spectrum-Body--XXXL, +.spectrum:lang(ko) .spectrum-Body--XXXL, +.spectrum:lang(zh) .spectrum-Body--XXXL { font-size: var( - --spectrum-body-han-5-text-size, - var(--spectrum-global-dimension-font-size-75) + --spectrum-body-han-xxxl-text-size, + var(--spectrum-global-dimension-font-size-600) ); font-weight: var( - --spectrum-body-han-5-text-font-weight, + --spectrum-body-han-xxxl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-han-5-text-line-height, - var(--spectrum-alias-body-han-text-line-height) + --spectrum-body-han-xxxl-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-han-5-text-font-style, + --spectrum-body-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-han-5-text-letter-spacing, + --spectrum-body-han-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-body-han-5-text-transform, none); + text-transform: var(--spectrum-body-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1, -.spectrum:lang(ko) .spectrum-Heading1, -.spectrum:lang(zh) .spectrum-Heading1 { +.spectrum:lang(ja) .spectrum-Body--XXL, +.spectrum:lang(ko) .spectrum-Body--XXL, +.spectrum:lang(zh) .spectrum-Body--XXL { font-size: var( - --spectrum-heading-han-1-text-size, - var(--spectrum-alias-heading1-han-text-size) + --spectrum-body-han-xxl-text-size, + var(--spectrum-global-dimension-font-size-500) ); font-weight: var( - --spectrum-heading-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-xxl-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-xxl-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-1-text-font-style, + --spectrum-body-han-xxl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-1-text-letter-spacing, + --spectrum-body-han-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-1-text-transform, none); + text-transform: var(--spectrum-body-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2, -.spectrum:lang(ko) .spectrum-Heading2, -.spectrum:lang(zh) .spectrum-Heading2 { +.spectrum:lang(ja) .spectrum-Body--XL, +.spectrum:lang(ko) .spectrum-Body--XL, +.spectrum:lang(zh) .spectrum-Body--XL { font-size: var( - --spectrum-heading-han-2-text-size, - var(--spectrum-alias-heading2-han-text-size) + --spectrum-body-han-xl-text-size, + var(--spectrum-global-dimension-font-size-400) ); font-weight: var( - --spectrum-heading-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-xl-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-xl-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-2-text-font-style, + --spectrum-body-han-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-2-text-letter-spacing, + --spectrum-body-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-2-text-transform, none); + text-transform: var(--spectrum-body-han-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading3, -.spectrum:lang(ko) .spectrum-Heading3, -.spectrum:lang(zh) .spectrum-Heading3 { +.spectrum:lang(ja) .spectrum-Body--L, +.spectrum:lang(ko) .spectrum-Body--L, +.spectrum:lang(zh) .spectrum-Body--L { font-size: var( - --spectrum-heading-han-3-text-size, - var(--spectrum-alias-heading3-han-text-size) + --spectrum-body-han-l-text-size, + var(--spectrum-global-dimension-font-size-300) ); font-weight: var( - --spectrum-heading-han-3-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-l-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-3-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-l-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-3-text-font-style, + --spectrum-body-han-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-3-text-letter-spacing, + --spectrum-body-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-3-text-transform, none); + text-transform: var(--spectrum-body-han-l-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading4, -.spectrum:lang(ko) .spectrum-Heading4, -.spectrum:lang(zh) .spectrum-Heading4, -.spectrum:lang(ja) .spectrum-Heading--subtitle1, -.spectrum:lang(ko) .spectrum-Heading--subtitle1, -.spectrum:lang(zh) .spectrum-Heading--subtitle1 { +.spectrum:lang(ja) .spectrum-Body--M, +.spectrum:lang(ko) .spectrum-Body--M, +.spectrum:lang(zh) .spectrum-Body--M { font-size: var( - --spectrum-heading-han-4-text-size, - var(--spectrum-alias-heading4-text-size) + --spectrum-body-han-m-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-heading-han-4-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-m-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-4-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-m-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-4-text-font-style, + --spectrum-body-han-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-4-text-letter-spacing, + --spectrum-body-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-4-text-transform, none); + text-transform: var(--spectrum-body-han-m-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading5, -.spectrum:lang(ko) .spectrum-Heading5, -.spectrum:lang(zh) .spectrum-Heading5 { +.spectrum:lang(ja) .spectrum-Body--S, +.spectrum:lang(ko) .spectrum-Body--S, +.spectrum:lang(zh) .spectrum-Body--S { font-size: var( - --spectrum-heading-han-5-text-size, - var(--spectrum-alias-heading5-text-size) + --spectrum-body-han-s-text-size, + var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-heading-han-5-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-s-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-5-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-s-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-5-text-font-style, + --spectrum-body-han-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-5-text-letter-spacing, + --spectrum-body-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-5-text-transform, none); + text-transform: var(--spectrum-body-han-s-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading6, -.spectrum:lang(ko) .spectrum-Heading6, -.spectrum:lang(zh) .spectrum-Heading6, -.spectrum:lang(ja) .spectrum-Heading--subtitle2, -.spectrum:lang(ko) .spectrum-Heading--subtitle2, -.spectrum:lang(zh) .spectrum-Heading--subtitle2 { +.spectrum:lang(ja) .spectrum-Body--XS, +.spectrum:lang(ko) .spectrum-Body--XS, +.spectrum:lang(zh) .spectrum-Body--XS { font-size: var( - --spectrum-heading-han-6-text-size, - var(--spectrum-alias-heading6-text-size) + --spectrum-body-han-xs-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-heading-han-6-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-body-han-xs-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-heading-han-6-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-body-han-xs-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-heading-han-6-text-font-style, + --spectrum-body-han-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-han-6-text-letter-spacing, + --spectrum-body-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-han-6-text-transform, none); + text-transform: var(--spectrum-body-han-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Subheading, -.spectrum:lang(ko) .spectrum-Subheading, -.spectrum:lang(zh) .spectrum-Subheading, -.spectrum:lang(ja) .spectrum-Heading--subtitle3, -.spectrum:lang(ko) .spectrum-Heading--subtitle3, -.spectrum:lang(zh) .spectrum-Heading--subtitle3 { +.spectrum:lang(ja) .spectrum-Detail--XL, +.spectrum:lang(ko) .spectrum-Detail--XL, +.spectrum:lang(zh) .spectrum-Detail--XL { font-size: var( - --spectrum-subheading-han-text-size, - var(--spectrum-global-dimension-font-size-50) + --spectrum-detail-han-xl-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-subheading-han-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-detail-han-xl-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-subheading-han-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-xl-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-subheading-han-text-font-style, + --spectrum-detail-han-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-subheading-han-text-letter-spacing, + --spectrum-detail-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-subheading-han-text-transform, none); + text-transform: var(--spectrum-detail-han-xl-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Detail, -.spectrum:lang(ko) .spectrum-Detail, -.spectrum:lang(zh) .spectrum-Detail { +.spectrum:lang(ja) .spectrum-Detail--XL em, +.spectrum:lang(ko) .spectrum-Detail--XL em, +.spectrum:lang(zh) .spectrum-Detail--XL em { font-size: var( - --spectrum-detail-han-text-size, - var(--spectrum-global-dimension-font-size-50) + --spectrum-detail-han-xl-emphasis-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-detail-han-text-font-weight, - var(--spectrum-alias-han-detail-text-font-weight) + --spectrum-detail-han-xl-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) ); line-height: var( - --spectrum-detail-han-text-line-height, - var(--spectrum-alias-body-han-text-line-height) + --spectrum-detail-han-xl-emphasis-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-detail-han-text-font-style, + --spectrum-detail-han-xl-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-detail-han-text-letter-spacing, + --spectrum-detail-han-xl-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-detail-han-text-transform, none); + text-transform: var( + --spectrum-detail-han-xl-emphasis-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1--quiet, -.spectrum:lang(ko) .spectrum-Heading1--quiet, -.spectrum:lang(zh) .spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Detail--XL strong, +.spectrum:lang(ko) .spectrum-Detail--XL strong, +.spectrum:lang(zh) .spectrum-Detail--XL strong { font-size: var( - --spectrum-heading-quiet-han-1-text-size, - var(--spectrum-alias-heading1-han-text-size) + --spectrum-detail-han-xl-strong-text-size, + var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-heading-quiet-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-quiet) + --spectrum-detail-han-xl-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-heading-quiet-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-xl-strong-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-quiet-han-1-text-font-style, + --spectrum-detail-han-xl-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-han-1-text-letter-spacing, + --spectrum-detail-han-xl-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-quiet-han-1-text-transform, none); + text-transform: var( + --spectrum-detail-han-xl-strong-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2--quiet, -.spectrum:lang(ko) .spectrum-Heading2--quiet, -.spectrum:lang(zh) .spectrum-Heading2--quiet, -.spectrum:lang(ja) .spectrum-Heading--pageTitle, -.spectrum:lang(ko) .spectrum-Heading--pageTitle, -.spectrum:lang(zh) .spectrum-Heading--pageTitle { +.spectrum:lang(ja) .spectrum-Detail--L, +.spectrum:lang(ko) .spectrum-Detail--L, +.spectrum:lang(zh) .spectrum-Detail--L { font-size: var( - --spectrum-heading-quiet-han-2-text-size, - var(--spectrum-alias-heading2-han-text-size) + --spectrum-detail-han-l-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-heading-quiet-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-quiet) + --spectrum-detail-han-l-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-heading-quiet-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-l-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-quiet-han-2-text-font-style, + --spectrum-detail-han-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-quiet-han-2-text-letter-spacing, + --spectrum-detail-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-quiet-han-2-text-transform, none); + text-transform: var(--spectrum-detail-han-l-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1--strong, -.spectrum:lang(ko) .spectrum-Heading1--strong, -.spectrum:lang(zh) .spectrum-Heading1--strong { +.spectrum:lang(ja) .spectrum-Detail--L em, +.spectrum:lang(ko) .spectrum-Detail--L em, +.spectrum:lang(zh) .spectrum-Detail--L em { font-size: var( - --spectrum-heading-strong-han-1-text-size, - var(--spectrum-alias-heading1-han-text-size) + --spectrum-detail-han-l-emphasis-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-heading-strong-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-strong) + --spectrum-detail-han-l-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) ); line-height: var( - --spectrum-heading-strong-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-l-emphasis-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-strong-han-1-text-font-style, + --spectrum-detail-han-l-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-strong-han-1-text-letter-spacing, + --spectrum-detail-han-l-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-strong-han-1-text-transform, none); + text-transform: var( + --spectrum-detail-han-l-emphasis-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2--strong, -.spectrum:lang(ko) .spectrum-Heading2--strong, -.spectrum:lang(zh) .spectrum-Heading2--strong { +.spectrum:lang(ja) .spectrum-Detail--L strong, +.spectrum:lang(ko) .spectrum-Detail--L strong, +.spectrum:lang(zh) .spectrum-Detail--L strong { font-size: var( - --spectrum-heading-strong-han-2-text-size, - var(--spectrum-alias-heading2-han-text-size) + --spectrum-detail-han-l-strong-text-size, + var(--spectrum-global-dimension-font-size-100) ); font-weight: var( - --spectrum-heading-strong-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-strong) + --spectrum-detail-han-l-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-heading-strong-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-l-strong-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-heading-strong-han-2-text-font-style, + --spectrum-detail-han-l-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-heading-strong-han-2-text-letter-spacing, + --spectrum-detail-han-l-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-heading-strong-han-2-text-transform, none); + text-transform: var( + --spectrum-detail-han-l-strong-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1--display, -.spectrum:lang(ko) .spectrum-Heading1--display, -.spectrum:lang(zh) .spectrum-Heading1--display { +.spectrum:lang(ja) .spectrum-Detail--M, +.spectrum:lang(ko) .spectrum-Detail--M, +.spectrum:lang(zh) .spectrum-Detail--M { font-size: var( - --spectrum-display-han-1-text-size, - var(--spectrum-alias-heading-han-display1-text-size) + --spectrum-detail-han-m-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-display-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-detail-han-m-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-m-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-han-1-text-font-style, + --spectrum-detail-han-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-han-1-text-letter-spacing, + --spectrum-detail-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-han-1-text-transform, none); + text-transform: var(--spectrum-detail-han-m-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2--display, -.spectrum:lang(ko) .spectrum-Heading2--display, -.spectrum:lang(zh) .spectrum-Heading2--display { +.spectrum:lang(ja) .spectrum-Detail--M em, +.spectrum:lang(ko) .spectrum-Detail--M em, +.spectrum:lang(zh) .spectrum-Detail--M em { font-size: var( - --spectrum-display-han-2-text-size, - var(--spectrum-alias-heading-han-display2-text-size) + --spectrum-detail-han-m-emphasis-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-display-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) + --spectrum-detail-han-m-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) ); line-height: var( - --spectrum-display-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-m-emphasis-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-han-2-text-font-style, + --spectrum-detail-han-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-han-2-text-letter-spacing, + --spectrum-detail-han-m-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-han-2-text-transform, none); + text-transform: var( + --spectrum-detail-han-m-emphasis-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1--display.spectrum-Heading1--strong, -.spectrum:lang(ko) .spectrum-Heading1--display.spectrum-Heading1--strong, -.spectrum:lang(zh) .spectrum-Heading1--display.spectrum-Heading1--strong { +.spectrum:lang(ja) .spectrum-Detail--M strong, +.spectrum:lang(ko) .spectrum-Detail--M strong, +.spectrum:lang(zh) .spectrum-Detail--M strong { font-size: var( - --spectrum-display-strong-han-1-text-size, - var(--spectrum-alias-heading-han-display1-text-size) + --spectrum-detail-han-m-strong-text-size, + var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-display-strong-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-strong) + --spectrum-detail-han-m-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-display-strong-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-m-strong-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-strong-han-1-text-font-style, + --spectrum-detail-han-m-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-strong-han-1-text-letter-spacing, + --spectrum-detail-han-m-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-strong-han-1-text-transform, none); + text-transform: var( + --spectrum-detail-han-m-strong-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2--display.spectrum-Heading2--strong, -.spectrum:lang(ko) .spectrum-Heading2--display.spectrum-Heading2--strong, -.spectrum:lang(zh) .spectrum-Heading2--display.spectrum-Heading2--strong { +.spectrum:lang(ja) .spectrum-Detail--S, +.spectrum:lang(ko) .spectrum-Detail--S, +.spectrum:lang(zh) .spectrum-Detail--S { font-size: var( - --spectrum-display-strong-han-2-text-size, - var(--spectrum-alias-heading-han-display2-text-size) + --spectrum-detail-han-s-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-display-strong-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-strong) + --spectrum-detail-han-s-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) ); line-height: var( - --spectrum-display-strong-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-s-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-strong-han-2-text-font-style, + --spectrum-detail-han-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-strong-han-2-text-letter-spacing, + --spectrum-detail-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-strong-han-2-text-transform, none); + text-transform: var(--spectrum-detail-han-s-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading1--display.spectrum-Heading1--quiet, -.spectrum:lang(ko) .spectrum-Heading1--display.spectrum-Heading1--quiet, -.spectrum:lang(zh) .spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Detail--S em, +.spectrum:lang(ko) .spectrum-Detail--S em, +.spectrum:lang(zh) .spectrum-Detail--S em { font-size: var( - --spectrum-display-quiet-han-1-text-size, - var(--spectrum-alias-heading-han-display1-text-size) + --spectrum-detail-han-s-emphasis-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-display-quiet-han-1-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-quiet) + --spectrum-detail-han-s-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) ); line-height: var( - --spectrum-display-quiet-han-1-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-s-emphasis-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-quiet-han-1-text-font-style, + --spectrum-detail-han-s-emphasis-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-quiet-han-1-text-letter-spacing, + --spectrum-detail-han-s-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-quiet-han-1-text-transform, none); + text-transform: var( + --spectrum-detail-han-s-emphasis-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum:lang(ja) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(ko) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(zh) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(ja) .spectrum-Heading--display, -.spectrum:lang(ko) .spectrum-Heading--display, -.spectrum:lang(zh) .spectrum-Heading--display { +.spectrum:lang(ja) .spectrum-Detail--S strong, +.spectrum:lang(ko) .spectrum-Detail--S strong, +.spectrum:lang(zh) .spectrum-Detail--S strong { font-size: var( - --spectrum-display-quiet-han-2-text-size, - var(--spectrum-alias-heading-han-display2-text-size) + --spectrum-detail-han-s-strong-text-size, + var(--spectrum-global-dimension-font-size-50) ); font-weight: var( - --spectrum-display-quiet-han-2-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-quiet) + --spectrum-detail-han-s-strong-text-font-weight, + var(--spectrum-global-font-weight-black) ); line-height: var( - --spectrum-display-quiet-han-2-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) + --spectrum-detail-han-s-strong-text-line-height, + var(--spectrum-alias-han-heading-text-line-height) ); font-style: var( - --spectrum-display-quiet-han-2-text-font-style, + --spectrum-detail-han-s-strong-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-display-quiet-han-2-text-letter-spacing, + --spectrum-detail-han-s-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han) ); - text-transform: var(--spectrum-display-quiet-han-2-text-transform, none); + text-transform: var( + --spectrum-detail-han-s-strong-text-transform, + uppercase + ); margin-top: 0; margin-bottom: 0; } -.spectrum-Code1 { +.spectrum:lang(ja) .spectrum-Detail--light, +.spectrum:lang(ko) .spectrum-Detail--light, +.spectrum:lang(zh) .spectrum-Detail--light { + font-weight: var( + --spectrum-detail-han-m-text-font-weight, + var(--spectrum-alias-detail-text-font-weight) + ); +} + +.spectrum:lang(ja) .spectrum-Detail--light em, +.spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--emphasis, +.spectrum:lang(ko) .spectrum-Detail--light em, +.spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--emphasis, +.spectrum:lang(zh) .spectrum-Detail--light em, +.spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--emphasis { + font-style: var( + --spectrum-detail-han-light-m-emphasis-text-font-style, + var(--spectrum-global-font-style-regular) + ); + font-weight: var( + --spectrum-detail-han-light-m-emphasis-text-font-weight, + var(--spectrum-alias-han-heading-text-font-weight-light-emphasis) + ); +} + +.spectrum:lang(ja) .spectrum-Detail--light strong, +.spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--strong, +.spectrum:lang(ko) .spectrum-Detail--light strong, +.spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--strong, +.spectrum:lang(zh) .spectrum-Detail--light strong, +.spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--strong { + font-style: var( + --spectrum-detail-han-light-m-strong-text-font-style, + var(--spectrum-global-font-style-regular) + ); + font-weight: var( + --spectrum-detail-han-light-m-strong-text-font-weight, + var(--spectrum-alias-heading-text-font-weight-regular) + ); +} + +.spectrum:lang(ja) .spectrum-Code--XL, +.spectrum:lang(ko) .spectrum-Code--XL, +.spectrum:lang(zh) .spectrum-Code--XL { font-size: var( - --spectrum-body-code-1-text-size, + --spectrum-code-han-xl-text-size, var(--spectrum-global-dimension-font-size-400) ); font-weight: var( - --spectrum-body-code-1-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) + --spectrum-code-han-xl-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-code-1-text-line-height, - var(--spectrum-alias-code-text-line-height) + --spectrum-code-han-xl-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-code-1-text-font-style, + --spectrum-code-han-xl-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-code-1-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-code-han-xl-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); margin-top: 0; margin-bottom: 0; font-family: var( - --spectrum-body-code-1-text-font-family, - var(--spectrum-alias-code-text-font-family) + --spectrum-code-han-xl-text-font-family, + var(--spectrum-alias-font-family-zh) ); } -.spectrum-Code2 { +.spectrum:lang(ja) .spectrum-Code--L, +.spectrum:lang(ko) .spectrum-Code--L, +.spectrum:lang(zh) .spectrum-Code--L { font-size: var( - --spectrum-body-code-2-text-size, + --spectrum-code-han-l-text-size, var(--spectrum-global-dimension-font-size-300) ); font-weight: var( - --spectrum-body-code-2-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) + --spectrum-code-han-l-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-code-2-text-line-height, - var(--spectrum-alias-code-text-line-height) + --spectrum-code-han-l-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-code-2-text-font-style, + --spectrum-code-han-l-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-code-2-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-code-han-l-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); margin-top: 0; margin-bottom: 0; font-family: var( - --spectrum-body-code-2-text-font-family, - var(--spectrum-alias-code-text-font-family) + --spectrum-code-han-l-text-font-family, + var(--spectrum-alias-font-family-zh) ); } -.spectrum-Code3 { +.spectrum:lang(ja) .spectrum-Code--M, +.spectrum:lang(ko) .spectrum-Code--M, +.spectrum:lang(zh) .spectrum-Code--M { font-size: var( - --spectrum-body-code-3-text-size, + --spectrum-code-han-m-text-size, var(--spectrum-global-dimension-font-size-200) ); font-weight: var( - --spectrum-body-code-3-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) + --spectrum-code-han-m-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-code-3-text-line-height, - var(--spectrum-alias-code-text-line-height) + --spectrum-code-han-m-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-code-3-text-font-style, + --spectrum-code-han-m-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-code-3-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-code-han-m-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); margin-top: 0; margin-bottom: 0; font-family: var( - --spectrum-body-code-3-text-font-family, - var(--spectrum-alias-code-text-font-family) + --spectrum-code-han-m-text-font-family, + var(--spectrum-alias-font-family-zh) ); } -.spectrum-Code4 { +.spectrum:lang(ja) .spectrum-Code--S, +.spectrum:lang(ko) .spectrum-Code--S, +.spectrum:lang(zh) .spectrum-Code--S { font-size: var( - --spectrum-body-code-4-text-size, + --spectrum-code-han-s-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-body-code-4-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) + --spectrum-code-han-s-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-code-4-text-line-height, - var(--spectrum-alias-code-text-line-height) + --spectrum-code-han-s-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-code-4-text-font-style, + --spectrum-code-han-s-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-code-4-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-code-han-s-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); margin-top: 0; margin-bottom: 0; font-family: var( - --spectrum-body-code-4-text-font-family, - var(--spectrum-alias-code-text-font-family) + --spectrum-code-han-s-text-font-family, + var(--spectrum-alias-font-family-zh) ); } -.spectrum-Code5 { +.spectrum:lang(ja) .spectrum-Code--XS, +.spectrum:lang(ko) .spectrum-Code--XS, +.spectrum:lang(zh) .spectrum-Code--XS { font-size: var( - --spectrum-body-code-5-text-size, + --spectrum-code-han-xs-text-size, var(--spectrum-global-dimension-font-size-75) ); font-weight: var( - --spectrum-body-code-5-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) + --spectrum-code-han-xs-text-font-weight, + var(--spectrum-alias-han-body-text-font-weight-regular) ); line-height: var( - --spectrum-body-code-5-text-line-height, - var(--spectrum-alias-code-text-line-height) + --spectrum-code-han-xs-text-line-height, + var(--spectrum-alias-han-body-text-line-height) ); font-style: var( - --spectrum-body-code-5-text-font-style, + --spectrum-code-han-xs-text-font-style, var(--spectrum-global-font-style-regular) ); letter-spacing: var( - --spectrum-body-code-5-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + --spectrum-code-han-xs-text-letter-spacing, + var(--spectrum-global-font-letter-spacing-han) ); margin-top: 0; margin-bottom: 0; font-family: var( - --spectrum-body-code-5-text-font-family, - var(--spectrum-alias-code-text-font-family) + --spectrum-code-han-xs-text-font-family, + var(--spectrum-alias-font-family-zh) ); } .spectrum-Heading--XXXL { - font-size: var( - --spectrum-heading-xxxl-text-size, - var(--spectrum-alias-heading-xxxl-text-size) - ); - font-weight: var( - --spectrum-heading-xxxl-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-xxxl-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-xxxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-xxxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + color: var( + --spectrum-heading-xxxl-text-color, + var(--spectrum-alias-heading-text-color) ); - text-transform: var(--spectrum-heading-xxxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; } .spectrum-Heading--XXL { - font-size: var( - --spectrum-heading-xxl-text-size, - var(--spectrum-alias-heading-xxl-text-size) - ); - font-weight: var( - --spectrum-heading-xxl-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-xxl-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-xxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-xxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + color: var( + --spectrum-heading-xxl-text-color, + var(--spectrum-alias-heading-text-color) ); - text-transform: var(--spectrum-heading-xxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; } .spectrum-Heading--XL { - font-size: var( - --spectrum-heading-xl-text-size, - var(--spectrum-alias-heading-xl-text-size) - ); - font-weight: var( - --spectrum-heading-xl-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-xl-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) + color: var( + --spectrum-heading-xl-text-color, + var(--spectrum-alias-heading-text-color) ); - text-transform: var(--spectrum-heading-xl-text-transform, none); - margin-top: 0; - margin-bottom: 0; } .spectrum-Heading--L { - font-size: var( - --spectrum-heading-l-text-size, - var(--spectrum-alias-heading-l-text-size) - ); - font-weight: var( - --spectrum-heading-l-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-l-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-heading-l-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Heading--M { - font-size: var( - --spectrum-heading-m-text-size, - var(--spectrum-alias-heading-m-text-size) - ); - font-weight: var( - --spectrum-heading-m-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-m-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-heading-m-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Heading--S { - font-size: var( - --spectrum-heading-s-text-size, - var(--spectrum-alias-heading-s-text-size) - ); - font-weight: var( - --spectrum-heading-s-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-s-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-heading-s-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Heading--XS { - font-size: var( - --spectrum-heading-xs-text-size, - var(--spectrum-alias-heading-xs-text-size) - ); - font-weight: var( - --spectrum-heading-xs-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-xs-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-heading-xs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Heading--XXS { - font-size: var( - --spectrum-heading-xxs-text-size, - var(--spectrum-alias-heading-xxs-text-size) - ); - font-weight: var( - --spectrum-heading-xxs-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-xxs-text-line-height, - var(--spectrum-alias-heading-text-line-height) - ); - font-style: var( - --spectrum-heading-xxs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-xxs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-heading-xxs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Heading { - font-family: var( - --spectrum-heading-xl-text-font-family, - var(--spectrum-alias-body-text-font-family) - ); - font-weight: var( - --spectrum-heading-xl-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); -} - -.spectrum-Heading em, -.spectrum-Heading .spectrum-Heading-emphasis { - font-style: var( - --spectrum-heading-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Heading strong, -.spectrum-Heading .spectrum-Heading-strong { - font-weight: var( - --spectrum-heading-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); -} - -.spectrum-Heading--serif { - font-family: var( - --spectrum-body-serif-xl-text-font-family, - var(--spectrum-alias-serif-text-font-family) - ); -} - -.spectrum-Heading--heavy { - font-weight: var( - --spectrum-heading-heavy-xl-text-font-weight, - var(--spectrum-global-font-weight-black) - ); -} - -.spectrum-Heading--heavy em, -.spectrum-Heading--heavy .spectrum-Heading-emphasis { - font-style: var( - --spectrum-heading-heavy-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Heading--heavy strong, -.spectrum-Heading--heavy .spectrum-Heading-strong { - font-weight: var( - --spectrum-heading-heavy-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); -} - -.spectrum-Heading--light { - font-weight: var( - --spectrum-heading-light-xl-emphasis-text-font-weight, - var(--spectrum-global-font-weight-light) - ); -} - -.spectrum-Heading--light em, -.spectrum-Heading--light .spectrum-Heading-emphasis { - font-style: var( - --spectrum-heading-light-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Heading--light strong, -.spectrum-Heading--light .spectrum-Heading-strong { - font-weight: var( - --spectrum-heading-light-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); -} - -.spectrum-Body--XXXL { - font-size: var( - --spectrum-body-xxxl-text-size, - var(--spectrum-global-dimension-font-size-600) - ); - font-weight: var( - --spectrum-body-xxxl-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-xxxl-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-xxxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-xxxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-xxxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--XXL { - font-size: var( - --spectrum-body-xxl-text-size, - var(--spectrum-global-dimension-font-size-500) - ); - font-weight: var( - --spectrum-body-xxl-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-xxl-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-xxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-xxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-xxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--XL { - font-size: var( - --spectrum-body-xl-text-size, - var(--spectrum-global-dimension-font-size-400) - ); - font-weight: var( - --spectrum-body-xl-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-xl-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-xl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--L { - font-size: var( - --spectrum-body-l-text-size, - var(--spectrum-global-dimension-font-size-300) - ); - font-weight: var( - --spectrum-body-l-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-l-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-l-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--M { - font-size: var( - --spectrum-body-m-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-body-m-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-m-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-m-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--S { - font-size: var( - --spectrum-body-s-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-body-s-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-s-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-s-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body--XS { - font-size: var( - --spectrum-body-xs-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-body-xs-text-font-weight, - var(--spectrum-alias-body-text-font-weight) - ); - line-height: var( - --spectrum-body-xs-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-body-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - text-transform: var(--spectrum-body-xs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Body { - font-family: var( - --spectrum-body-xl-text-font-family, - var(--spectrum-alias-body-text-font-family) - ); -} - -.spectrum-Body strong, -.spectrum-Body .spectrum-Body-strong { - font-weight: var( - --spectrum-body-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); -} - -.spectrum-Body em, -.spectrum-Body .spectrum-Body-emphasis { - font-style: var( - --spectrum-body-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Body--serif { - font-family: var( - --spectrum-body-serif-xl-text-font-family, - var(--spectrum-alias-serif-text-font-family) - ); -} - -.spectrum-Detail { - font-family: var( - --spectrum-heading-xl-text-font-family, - var(--spectrum-alias-body-text-font-family) - ); -} - -.spectrum-Detail strong, -.spectrum-Detail .spectrum-Detail-strong { - font-weight: var( - --spectrum-detail-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); -} - -.spectrum-Detail em, -.spectrum-Detail .spectrum-Detail-emphasis { - font-style: var( - --spectrum-detail-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Detail--light { - font-style: var( - --spectrum-detail-light-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-detail-light-xl-text-font-weight, - var(--spectrum-alias-detail-text-font-weight-light) - ); -} - -.spectrum-Detail--serif { - font-family: var( - --spectrum-body-serif-xl-text-font-family, - var(--spectrum-alias-serif-text-font-family) - ); -} - -.spectrum-Detail--XL { - font-size: var( - --spectrum-detail-xl-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-xl-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-xl-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-xl-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--XL em { - font-size: var( - --spectrum-detail-xl-emphasis-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-xl-emphasis-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-xl-emphasis-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); - letter-spacing: var( - --spectrum-detail-xl-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var( - --spectrum-detail-xl-emphasis-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--XL strong { - font-size: var( - --spectrum-detail-xl-strong-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-xl-strong-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-xl-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-xl-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--L { - font-size: var( - --spectrum-detail-l-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-l-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-l-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-l-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--L em { - font-size: var( - --spectrum-detail-l-emphasis-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-l-emphasis-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-l-emphasis-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-l-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); - letter-spacing: var( - --spectrum-detail-l-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-l-emphasis-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--L strong { - font-size: var( - --spectrum-detail-l-strong-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-l-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-l-strong-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-l-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-l-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--M { - font-size: var( - --spectrum-detail-m-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-m-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-m-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-m-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--M em { - font-size: var( - --spectrum-detail-m-emphasis-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-m-emphasis-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-m-emphasis-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-m-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); - letter-spacing: var( - --spectrum-detail-m-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-m-emphasis-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--M strong { - font-size: var( - --spectrum-detail-m-strong-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-m-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-m-strong-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-m-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-m-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--S { - font-size: var( - --spectrum-detail-s-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-s-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-s-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-s-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--S em { - font-size: var( - --spectrum-detail-s-emphasis-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-s-emphasis-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-s-emphasis-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-s-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); - letter-spacing: var( - --spectrum-detail-s-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-s-emphasis-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Detail--S strong { - font-size: var( - --spectrum-detail-s-strong-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-s-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-s-strong-text-line-height, - var(--spectrum-alias-body-text-line-height) - ); - font-style: var( - --spectrum-detail-s-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-s-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-medium) - ); - text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum-Code { - font-family: var( - --spectrum-heading-xl-text-font-family, - var(--spectrum-alias-body-text-font-family) - ); -} - -.spectrum-Code strong, -.spectrum-Code .spectrum-Code-strong { - font-weight: var( - --spectrum-code-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); -} - -.spectrum-Code em, -.spectrum-Code .spectrum-Code-emphasis { - font-style: var( - --spectrum-code-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-italic) - ); -} - -.spectrum-Code--serif { - font-family: var( - --spectrum-body-serif-xl-text-font-family, - var(--spectrum-alias-serif-text-font-family) - ); -} - -.spectrum-Code--XL { - font-size: var( - --spectrum-code-xl-text-size, - var(--spectrum-global-dimension-font-size-400) - ); - font-weight: var( - --spectrum-code-xl-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-xl-text-line-height, - var(--spectrum-alias-code-text-line-height) - ); - font-style: var( - --spectrum-code-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-xl-text-font-family, - var(--spectrum-alias-code-text-font-family) - ); -} - -.spectrum-Code--L { - font-size: var( - --spectrum-code-l-text-size, - var(--spectrum-global-dimension-font-size-300) - ); - font-weight: var( - --spectrum-code-l-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-l-text-line-height, - var(--spectrum-alias-code-text-line-height) - ); - font-style: var( - --spectrum-code-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-l-text-font-family, - var(--spectrum-alias-code-text-font-family) - ); -} - -.spectrum-Code--M { - font-size: var( - --spectrum-code-m-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-code-m-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-m-text-line-height, - var(--spectrum-alias-code-text-line-height) - ); - font-style: var( - --spectrum-code-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-m-text-font-family, - var(--spectrum-alias-code-text-font-family) - ); -} - -.spectrum-Code--S { - font-size: var( - --spectrum-code-s-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-code-s-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-s-text-line-height, - var(--spectrum-alias-code-text-line-height) - ); - font-style: var( - --spectrum-code-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-s-text-font-family, - var(--spectrum-alias-code-text-font-family) - ); -} - -.spectrum-Code--XS { - font-size: var( - --spectrum-code-xs-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-code-xs-text-font-weight, - var(--spectrum-alias-code-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-xs-text-line-height, - var(--spectrum-alias-code-text-line-height) - ); - font-style: var( - --spectrum-code-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-none) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-xs-text-font-family, - var(--spectrum-alias-code-text-font-family) - ); -} - -.spectrum-Typography .spectrum-Heading--XXXL { - margin-top: var( - --spectrum-heading-xxxl-margin-top, - var(--spectrum-alias-heading-xxxl-margin-top) - ); - margin-bottom: var( - --spectrum-heading-xxxl-margin-bottom, - var(--spectrum-global-dimension-size-130) - ); -} - -.spectrum-Typography .spectrum-Heading--XXL { - margin-top: var( - --spectrum-heading-xxl-margin-top, - var(--spectrum-alias-heading-xxl-margin-top) - ); - margin-bottom: var( - --spectrum-heading-xxl-margin-bottom, - var(--spectrum-global-dimension-size-125) - ); -} - -.spectrum-Typography .spectrum-Heading--XL { - margin-top: var( - --spectrum-heading-xl-margin-top, - var(--spectrum-alias-heading-xl-margin-top) - ); - margin-bottom: var( - --spectrum-heading-xl-margin-bottom, - var(--spectrum-global-dimension-size-115) - ); -} - -.spectrum-Typography .spectrum-Heading--L { - margin-top: var( - --spectrum-heading-l-margin-top, - var(--spectrum-alias-heading-l-margin-top) - ); - margin-bottom: var( - --spectrum-heading-l-margin-bottom, - var(--spectrum-global-dimension-size-85) - ); -} - -.spectrum-Typography .spectrum-Heading--M { - margin-top: var( - --spectrum-heading-m-margin-top, - var(--spectrum-alias-heading-m-margin-top) - ); - margin-bottom: var( - --spectrum-heading-m-margin-bottom, - var(--spectrum-global-dimension-size-75) - ); -} - -.spectrum-Typography .spectrum-Heading--S { - margin-top: var( - --spectrum-heading-s-margin-top, - var(--spectrum-alias-heading-s-margin-top) - ); - margin-bottom: var( - --spectrum-heading-s-margin-bottom, - var(--spectrum-global-dimension-size-65) - ); -} - -.spectrum-Typography .spectrum-Heading--XS { - margin-top: var( - --spectrum-heading-xs-margin-top, - var(--spectrum-alias-heading-xs-margin-top) - ); - margin-bottom: var( - --spectrum-heading-xs-margin-bottom, - var(--spectrum-global-dimension-size-50) - ); -} - -.spectrum-Typography .spectrum-Heading--XXS { - margin-top: var( - --spectrum-heading-xxs-margin-top, - var(--spectrum-alias-heading-xxs-margin-top) - ); - margin-bottom: var( - --spectrum-heading-xxs-margin-bottom, - var(--spectrum-global-dimension-size-40) - ); -} - -.spectrum-Typography .spectrum-Body--XXXL { - margin-top: var(--spectrum-body-xxxl-margin-top, 0px); - margin-bottom: var( - --spectrum-body-xxxl-margin-bottom, - var(--spectrum-global-dimension-size-400) - ); -} - -.spectrum-Typography .spectrum-Body--XXL { - margin-top: var(--spectrum-body-xxl-margin-top, 0px); - margin-bottom: var( - --spectrum-body-xxl-margin-bottom, - var(--spectrum-global-dimension-size-300) - ); -} - -.spectrum-Typography .spectrum-Body--XL { - margin-top: var(--spectrum-body-xl-margin-top, 0px); - margin-bottom: var( - --spectrum-body-xl-margin-bottom, - var(--spectrum-global-dimension-size-200) - ); -} - -.spectrum-Typography .spectrum-Body--L { - margin-top: var(--spectrum-body-l-margin-top, 0px); - margin-bottom: var( - --spectrum-body-l-margin-bottom, - var(--spectrum-global-dimension-size-160) - ); -} - -.spectrum-Typography .spectrum-Body--M { - margin-top: var(--spectrum-body-m-margin-top, 0px); - margin-bottom: var( - --spectrum-body-m-margin-bottom, - var(--spectrum-global-dimension-size-150) - ); -} - -.spectrum-Typography .spectrum-Body--S { - margin-top: var(--spectrum-body-s-margin-top, 0px); - margin-bottom: var( - --spectrum-body-s-margin-bottom, - var(--spectrum-global-dimension-size-125) - ); -} - -.spectrum-Typography .spectrum-Body--XS { - margin-top: var(--spectrum-body-xs-margin-top, 0px); - margin-bottom: var( - --spectrum-body-xs-margin-bottom, - var(--spectrum-global-dimension-size-115) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XXXL, -.spectrum:lang(ko) .spectrum-Heading--XXXL, -.spectrum:lang(zh) .spectrum-Heading--XXXL { - font-size: var( - --spectrum-heading-han-xxxl-text-size, - var(--spectrum-alias-heading-xxxl-text-size) - ); - font-weight: var( - --spectrum-heading-han-xxxl-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-xxxl-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-xxxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-xxxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-xxxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--XXL, -.spectrum:lang(ko) .spectrum-Heading--XXL, -.spectrum:lang(zh) .spectrum-Heading--XXL { - font-size: var( - --spectrum-heading-han-xxl-text-size, - var(--spectrum-alias-heading-han-xxl-text-size) - ); - font-weight: var( - --spectrum-heading-han-xxl-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-xxl-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-xxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-xxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-xxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--XL, -.spectrum:lang(ko) .spectrum-Heading--XL, -.spectrum:lang(zh) .spectrum-Heading--XL { - font-size: var( - --spectrum-heading-han-xl-text-size, - var(--spectrum-alias-heading-han-xl-text-size) - ); - font-weight: var( - --spectrum-heading-han-xl-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-xl-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-xl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--L, -.spectrum:lang(ko) .spectrum-Heading--L, -.spectrum:lang(zh) .spectrum-Heading--L { - font-size: var( - --spectrum-heading-han-l-text-size, - var(--spectrum-alias-heading-han-l-text-size) - ); - font-weight: var( - --spectrum-heading-han-l-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-l-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-l-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--M, -.spectrum:lang(ko) .spectrum-Heading--M, -.spectrum:lang(zh) .spectrum-Heading--M { - font-size: var( - --spectrum-heading-han-m-text-size, - var(--spectrum-alias-heading-han-m-text-size) - ); - font-weight: var( - --spectrum-heading-han-m-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-m-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-m-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--S, -.spectrum:lang(ko) .spectrum-Heading--S, -.spectrum:lang(zh) .spectrum-Heading--S { - font-size: var( - --spectrum-heading-han-s-text-size, - var(--spectrum-alias-heading-s-text-size) - ); - font-weight: var( - --spectrum-heading-han-s-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-s-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-s-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--XS, -.spectrum:lang(ko) .spectrum-Heading--XS, -.spectrum:lang(zh) .spectrum-Heading--XS { - font-size: var( - --spectrum-heading-han-xs-text-size, - var(--spectrum-alias-heading-xs-text-size) - ); - font-weight: var( - --spectrum-heading-han-xs-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-xs-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-xs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--XXS, -.spectrum:lang(ko) .spectrum-Heading--XXS, -.spectrum:lang(zh) .spectrum-Heading--XXS { - font-size: var( - --spectrum-heading-han-xxs-text-size, - var(--spectrum-alias-heading-xxs-text-size) - ); - font-weight: var( - --spectrum-heading-han-xxs-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); - line-height: var( - --spectrum-heading-han-xxs-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-heading-han-xxs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-heading-han-xxs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-heading-han-xxs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Heading--heavy, -.spectrum:lang(ko) .spectrum-Heading--heavy, -.spectrum:lang(zh) .spectrum-Heading--heavy { - font-weight: var( - --spectrum-heading-han-xl-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--heavy em, -.spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--emphasis, -.spectrum:lang(ko) .spectrum-Heading--heavy em, -.spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--emphasis, -.spectrum:lang(zh) .spectrum-Heading--heavy em, -.spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--emphasis { - font-style: var( - --spectrum-heading-han-heavy-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-heading-han-heavy-xl-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-heavy-emphasis) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--heavy strong, -.spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--strong, -.spectrum:lang(ko) .spectrum-Heading--heavy strong, -.spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--strong, -.spectrum:lang(zh) .spectrum-Heading--heavy strong, -.spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--strong { - font-style: var( - --spectrum-heading-heavy-xl-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-heading-heavy-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--light, -.spectrum:lang(ko) .spectrum-Heading--light, -.spectrum:lang(zh) .spectrum-Heading--light { - font-weight: var( - --spectrum-heading-han-xl-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--light em, -.spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--emphasis, -.spectrum:lang(ko) .spectrum-Heading--light em, -.spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--emphasis, -.spectrum:lang(zh) .spectrum-Heading--light em, -.spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--emphasis { - font-style: var( - --spectrum-heading-han-light-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-heading-han-light-xl-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-light-emphasis) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--light strong, -.spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--strong, -.spectrum:lang(ko) .spectrum-Heading--light strong, -.spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--strong, -.spectrum:lang(zh) .spectrum-Heading--light strong, -.spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--strong { - font-style: var( - --spectrum-heading-han-light-xl-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-heading-han-light-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); -} - -.spectrum:lang(ja) .spectrum-Body--XXXL, -.spectrum:lang(ko) .spectrum-Body--XXXL, -.spectrum:lang(zh) .spectrum-Body--XXXL { - font-size: var( - --spectrum-body-han-xxxl-text-size, - var(--spectrum-global-dimension-font-size-600) - ); - font-weight: var( - --spectrum-body-han-xxxl-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-xxxl-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-xxxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-xxxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-xxxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--XXL, -.spectrum:lang(ko) .spectrum-Body--XXL, -.spectrum:lang(zh) .spectrum-Body--XXL { - font-size: var( - --spectrum-body-han-xxl-text-size, - var(--spectrum-global-dimension-font-size-500) - ); - font-weight: var( - --spectrum-body-han-xxl-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-xxl-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-xxl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-xxl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-xxl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--XL, -.spectrum:lang(ko) .spectrum-Body--XL, -.spectrum:lang(zh) .spectrum-Body--XL { - font-size: var( - --spectrum-body-han-xl-text-size, - var(--spectrum-global-dimension-font-size-400) - ); - font-weight: var( - --spectrum-body-han-xl-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-xl-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-xl-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--L, -.spectrum:lang(ko) .spectrum-Body--L, -.spectrum:lang(zh) .spectrum-Body--L { - font-size: var( - --spectrum-body-han-l-text-size, - var(--spectrum-global-dimension-font-size-300) - ); - font-weight: var( - --spectrum-body-han-l-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-l-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-l-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--M, -.spectrum:lang(ko) .spectrum-Body--M, -.spectrum:lang(zh) .spectrum-Body--M { - font-size: var( - --spectrum-body-han-m-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-body-han-m-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-m-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-m-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--S, -.spectrum:lang(ko) .spectrum-Body--S, -.spectrum:lang(zh) .spectrum-Body--S { - font-size: var( - --spectrum-body-han-s-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-body-han-s-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-s-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-s-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Body--XS, -.spectrum:lang(ko) .spectrum-Body--XS, -.spectrum:lang(zh) .spectrum-Body--XS { - font-size: var( - --spectrum-body-han-xs-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-body-han-xs-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-body-han-xs-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-body-han-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-body-han-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-body-han-xs-text-transform, none); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--XL, -.spectrum:lang(ko) .spectrum-Detail--XL, -.spectrum:lang(zh) .spectrum-Detail--XL { - font-size: var( - --spectrum-detail-han-xl-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-han-xl-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-han-xl-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-detail-han-xl-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--XL em, -.spectrum:lang(ko) .spectrum-Detail--XL em, -.spectrum:lang(zh) .spectrum-Detail--XL em { - font-size: var( - --spectrum-detail-han-xl-emphasis-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-han-xl-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) - ); - line-height: var( - --spectrum-detail-han-xl-emphasis-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-xl-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-xl-emphasis-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--XL strong, -.spectrum:lang(ko) .spectrum-Detail--XL strong, -.spectrum:lang(zh) .spectrum-Detail--XL strong { - font-size: var( - --spectrum-detail-han-xl-strong-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-detail-han-xl-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-han-xl-strong-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-xl-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-xl-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-xl-strong-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--L, -.spectrum:lang(ko) .spectrum-Detail--L, -.spectrum:lang(zh) .spectrum-Detail--L { - font-size: var( - --spectrum-detail-han-l-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-han-l-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-han-l-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-detail-han-l-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--L em, -.spectrum:lang(ko) .spectrum-Detail--L em, -.spectrum:lang(zh) .spectrum-Detail--L em { - font-size: var( - --spectrum-detail-han-l-emphasis-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-han-l-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) - ); - line-height: var( - --spectrum-detail-han-l-emphasis-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-l-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-l-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-l-emphasis-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--L strong, -.spectrum:lang(ko) .spectrum-Detail--L strong, -.spectrum:lang(zh) .spectrum-Detail--L strong { - font-size: var( - --spectrum-detail-han-l-strong-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - font-weight: var( - --spectrum-detail-han-l-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-han-l-strong-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-l-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-l-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-l-strong-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--M, -.spectrum:lang(ko) .spectrum-Detail--M, -.spectrum:lang(zh) .spectrum-Detail--M { - font-size: var( - --spectrum-detail-han-m-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-han-m-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-han-m-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-detail-han-m-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--M em, -.spectrum:lang(ko) .spectrum-Detail--M em, -.spectrum:lang(zh) .spectrum-Detail--M em { - font-size: var( - --spectrum-detail-han-m-emphasis-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-han-m-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) - ); - line-height: var( - --spectrum-detail-han-m-emphasis-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-m-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-m-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-m-emphasis-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--M strong, -.spectrum:lang(ko) .spectrum-Detail--M strong, -.spectrum:lang(zh) .spectrum-Detail--M strong { - font-size: var( - --spectrum-detail-han-m-strong-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-detail-han-m-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-han-m-strong-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-m-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-m-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-m-strong-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--S, -.spectrum:lang(ko) .spectrum-Detail--S, -.spectrum:lang(zh) .spectrum-Detail--S { - font-size: var( - --spectrum-detail-han-s-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-han-s-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); - line-height: var( - --spectrum-detail-han-s-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var(--spectrum-detail-han-s-text-transform, uppercase); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--S em, -.spectrum:lang(ko) .spectrum-Detail--S em, -.spectrum:lang(zh) .spectrum-Detail--S em { - font-size: var( - --spectrum-detail-han-s-emphasis-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-han-s-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis) - ); - line-height: var( - --spectrum-detail-han-s-emphasis-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-s-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-s-emphasis-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-s-emphasis-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--S strong, -.spectrum:lang(ko) .spectrum-Detail--S strong, -.spectrum:lang(zh) .spectrum-Detail--S strong { - font-size: var( - --spectrum-detail-han-s-strong-text-size, - var(--spectrum-global-dimension-font-size-50) - ); - font-weight: var( - --spectrum-detail-han-s-strong-text-font-weight, - var(--spectrum-global-font-weight-black) - ); - line-height: var( - --spectrum-detail-han-s-strong-text-line-height, - var(--spectrum-alias-heading-han-text-line-height) - ); - font-style: var( - --spectrum-detail-han-s-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-detail-han-s-strong-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - text-transform: var( - --spectrum-detail-han-s-strong-text-transform, - uppercase - ); - margin-top: 0; - margin-bottom: 0; -} - -.spectrum:lang(ja) .spectrum-Detail--light, -.spectrum:lang(ko) .spectrum-Detail--light, -.spectrum:lang(zh) .spectrum-Detail--light { - font-weight: var( - --spectrum-detail-han-xl-text-font-weight, - var(--spectrum-alias-detail-text-font-weight) - ); -} - -.spectrum:lang(ja) .spectrum-Detail--light em, -.spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--emphasis, -.spectrum:lang(ko) .spectrum-Detail--light em, -.spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--emphasis, -.spectrum:lang(zh) .spectrum-Detail--light em, -.spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--emphasis { - font-style: var( - --spectrum-detail-han-light-xl-emphasis-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-detail-han-light-xl-emphasis-text-font-weight, - var(--spectrum-alias-han-heading-text-font-weight-light-emphasis) - ); -} - -.spectrum:lang(ja) .spectrum-Detail--light strong, -.spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--strong, -.spectrum:lang(ko) .spectrum-Detail--light strong, -.spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--strong, -.spectrum:lang(zh) .spectrum-Detail--light strong, -.spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--strong { - font-style: var( - --spectrum-detail-han-light-xl-strong-text-font-style, - var(--spectrum-global-font-style-regular) - ); - font-weight: var( - --spectrum-detail-han-light-xl-strong-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); -} - -.spectrum:lang(ja) .spectrum-Code--XL, -.spectrum:lang(ko) .spectrum-Code--XL, -.spectrum:lang(zh) .spectrum-Code--XL { - font-size: var( - --spectrum-code-han-xl-text-size, - var(--spectrum-global-dimension-font-size-400) - ); - font-weight: var( - --spectrum-code-han-xl-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-han-xl-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-code-han-xl-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-han-xl-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-han-xl-text-font-family, - var(--spectrum-alias-font-family-zh) - ); -} - -.spectrum:lang(ja) .spectrum-Code--L, -.spectrum:lang(ko) .spectrum-Code--L, -.spectrum:lang(zh) .spectrum-Code--L { - font-size: var( - --spectrum-code-han-l-text-size, - var(--spectrum-global-dimension-font-size-300) - ); - font-weight: var( - --spectrum-code-han-l-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-han-l-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-code-han-l-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-han-l-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-han-l-text-font-family, - var(--spectrum-alias-font-family-zh) - ); -} - -.spectrum:lang(ja) .spectrum-Code--M, -.spectrum:lang(ko) .spectrum-Code--M, -.spectrum:lang(zh) .spectrum-Code--M { - font-size: var( - --spectrum-code-han-m-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - font-weight: var( - --spectrum-code-han-m-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-han-m-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-code-han-m-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-han-m-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-han-m-text-font-family, - var(--spectrum-alias-font-family-zh) - ); -} - -.spectrum:lang(ja) .spectrum-Code--S, -.spectrum:lang(ko) .spectrum-Code--S, -.spectrum:lang(zh) .spectrum-Code--S { - font-size: var( - --spectrum-code-han-s-text-size, - var(--spectrum-alias-font-size-default) - ); - font-weight: var( - --spectrum-code-han-s-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-han-s-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-code-han-s-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-han-s-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-han-s-text-font-family, - var(--spectrum-alias-font-family-zh) - ); -} - -.spectrum:lang(ja) .spectrum-Code--XS, -.spectrum:lang(ko) .spectrum-Code--XS, -.spectrum:lang(zh) .spectrum-Code--XS { - font-size: var( - --spectrum-code-han-xs-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - font-weight: var( - --spectrum-code-han-xs-text-font-weight, - var(--spectrum-alias-han-body-text-font-weight-regular) - ); - line-height: var( - --spectrum-code-han-xs-text-line-height, - var(--spectrum-alias-body-han-text-line-height) - ); - font-style: var( - --spectrum-code-han-xs-text-font-style, - var(--spectrum-global-font-style-regular) - ); - letter-spacing: var( - --spectrum-code-han-xs-text-letter-spacing, - var(--spectrum-global-font-letter-spacing-han) - ); - margin-top: 0; - margin-bottom: 0; - font-family: var( - --spectrum-code-han-xs-text-font-family, - var(--spectrum-alias-font-family-zh) - ); -} - -.spectrum-Heading--XXXL { - color: var( - --spectrum-heading-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--XXL { - color: var( - --spectrum-heading-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--XL { - color: var( - --spectrum-heading-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--L { - color: var( - --spectrum-heading-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--M { - color: var( - --spectrum-heading-m-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--S { - color: var( - --spectrum-heading-s-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--XS { - color: var( - --spectrum-heading-xs-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading--XXS { - color: var( - --spectrum-heading-xxs-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXXL--light { - color: var( - --spectrum-heading-light-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXL--light { - color: var( - --spectrum-heading-light-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XL--light { - color: var( - --spectrum-heading-light-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-L--light { - color: var( - --spectrum-heading-light-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXXL--heavy { - color: var( - --spectrum-heading-heavy-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXL--heavy { - color: var( - --spectrum-heading-heavy-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XL--heavy { - color: var( - --spectrum-heading-heavy-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-L--heavy { - color: var( - --spectrum-heading-heavy-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXXL--heading { - color: var( - --spectrum-heading-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XXL--heading { - color: var( - --spectrum-heading-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-XL--heading { - color: var( - --spectrum-heading-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading-L--heading { - color: var( - --spectrum-heading-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Body--XXXL { - color: var( - --spectrum-body-xxxl-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Body--XXL { - color: var( - --spectrum-body-xxl-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Body--XL { - color: var(--spectrum-body-xl-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body--L { - color: var(--spectrum-body-l-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body--M { - color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body--S { - color: var(--spectrum-body-s-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body--XS { - color: var(--spectrum-body-xs-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Detail--XL { - color: var( - --spectrum-detail-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Detail--L { - color: var( - --spectrum-detail-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Detail--M { - color: var( - --spectrum-detail-m-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Detail--S { - color: var( - --spectrum-detail-s-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Code--XL { - color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Code--L { - color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Code--M { - color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Code--S { - color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Code--XS { - color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum:lang(ja) .spectrum-Body--XXXL, -.spectrum:lang(ko) .spectrum-Body--XXXL, -.spectrum:lang(zh) .spectrum-Body--XXXL { - color: var( - --spectrum-body-han-xxxl-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--XXL, -.spectrum:lang(ko) .spectrum-Body--XXL, -.spectrum:lang(zh) .spectrum-Body--XXL { - color: var( - --spectrum-body-han-xxl-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--XL, -.spectrum:lang(ko) .spectrum-Body--XL, -.spectrum:lang(zh) .spectrum-Body--XL { - color: var( - --spectrum-body-han-xl-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--L, -.spectrum:lang(ko) .spectrum-Body--L, -.spectrum:lang(zh) .spectrum-Body--L { - color: var( - --spectrum-body-han-l-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--M, -.spectrum:lang(ko) .spectrum-Body--M, -.spectrum:lang(zh) .spectrum-Body--M { - color: var( - --spectrum-body-han-m-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--S, -.spectrum:lang(ko) .spectrum-Body--S, -.spectrum:lang(zh) .spectrum-Body--S { - color: var( - --spectrum-body-han-s-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Body--XS, -.spectrum:lang(ko) .spectrum-Body--XS, -.spectrum:lang(zh) .spectrum-Body--XS { - color: var( - --spectrum-body-han-xs-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XXXL, -.spectrum:lang(ko) .spectrum-Heading--XXXL, -.spectrum:lang(zh) .spectrum-Heading--XXXL { - color: var( - --spectrum-heading-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XXL, -.spectrum:lang(ko) .spectrum-Heading--XXL, -.spectrum:lang(zh) .spectrum-Heading--XXL { - color: var( - --spectrum-heading-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XL, -.spectrum:lang(ko) .spectrum-Heading--XL, -.spectrum:lang(zh) .spectrum-Heading--XL { - color: var( - --spectrum-heading-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--L, -.spectrum:lang(ko) .spectrum-Heading--L, -.spectrum:lang(zh) .spectrum-Heading--L { - color: var( - --spectrum-heading-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--M, -.spectrum:lang(ko) .spectrum-Heading--M, -.spectrum:lang(zh) .spectrum-Heading--M { - color: var( - --spectrum-heading-m-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--S, -.spectrum:lang(ko) .spectrum-Heading--S, -.spectrum:lang(zh) .spectrum-Heading--S { - color: var( - --spectrum-heading-s-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XS, -.spectrum:lang(ko) .spectrum-Heading--XS, -.spectrum:lang(zh) .spectrum-Heading--XS { - color: var( - --spectrum-heading-xs-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading--XXS, -.spectrum:lang(ko) .spectrum-Heading--XXS, -.spectrum:lang(zh) .spectrum-Heading--XXS { - color: var( - --spectrum-heading-xxs-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXXL--light, -.spectrum:lang(ko) .spectrum-Heading-XXXL--light, -.spectrum:lang(zh) .spectrum-Heading-XXXL--light { - color: var( - --spectrum-heading-light-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXL--light, -.spectrum:lang(ko) .spectrum-Heading-XXL--light, -.spectrum:lang(zh) .spectrum-Heading-XXL--light { - color: var( - --spectrum-heading-light-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XL--light, -.spectrum:lang(ko) .spectrum-Heading-XL--light, -.spectrum:lang(zh) .spectrum-Heading-XL--light { - color: var( - --spectrum-heading-light-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-L--light, -.spectrum:lang(ko) .spectrum-Heading-L--light, -.spectrum:lang(zh) .spectrum-Heading-L--light { - color: var( - --spectrum-heading-light-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXXL--heavy, -.spectrum:lang(ko) .spectrum-Heading-XXXL--heavy, -.spectrum:lang(zh) .spectrum-Heading-XXXL--heavy { - color: var( - --spectrum-heading-heavy-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXL--heavy, -.spectrum:lang(ko) .spectrum-Heading-XXL--heavy, -.spectrum:lang(zh) .spectrum-Heading-XXL--heavy { - color: var( - --spectrum-heading-heavy-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XL--heavy, -.spectrum:lang(ko) .spectrum-Heading-XL--heavy, -.spectrum:lang(zh) .spectrum-Heading-XL--heavy { - color: var( - --spectrum-heading-heavy-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-L--heavy, -.spectrum:lang(ko) .spectrum-Heading-L--heavy, -.spectrum:lang(zh) .spectrum-Heading-L--heavy { - color: var( - --spectrum-heading-heavy-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXXL--heading, -.spectrum:lang(ko) .spectrum-Heading-XXXL--heading, -.spectrum:lang(zh) .spectrum-Heading-XXXL--heading { - color: var( - --spectrum-heading-xxxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XXL--heading, -.spectrum:lang(ko) .spectrum-Heading-XXL--heading, -.spectrum:lang(zh) .spectrum-Heading-XXL--heading { - color: var( - --spectrum-heading-xxl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-XL--heading, -.spectrum:lang(ko) .spectrum-Heading-XL--heading, -.spectrum:lang(zh) .spectrum-Heading-XL--heading { - color: var( - --spectrum-heading-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Heading-L--heading, -.spectrum:lang(ko) .spectrum-Heading-L--heading, -.spectrum:lang(zh) .spectrum-Heading-L--heading { color: var( --spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Detail--XL, -.spectrum:lang(ko) .spectrum-Detail--XL, -.spectrum:lang(zh) .spectrum-Detail--XL { - color: var( - --spectrum-detail-xl-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Detail--L, -.spectrum:lang(ko) .spectrum-Detail--L, -.spectrum:lang(zh) .spectrum-Detail--L { - color: var( - --spectrum-detail-l-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Detail--M, -.spectrum:lang(ko) .spectrum-Detail--M, -.spectrum:lang(zh) .spectrum-Detail--M { - color: var( - --spectrum-detail-m-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Detail--S, -.spectrum:lang(ko) .spectrum-Detail--S, -.spectrum:lang(zh) .spectrum-Detail--S { - color: var( - --spectrum-detail-s-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum:lang(ja) .spectrum-Code--XL, -.spectrum:lang(ko) .spectrum-Code--XL, -.spectrum:lang(zh) .spectrum-Code--XL { - color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum:lang(ja) .spectrum-Code--L, -.spectrum:lang(ko) .spectrum-Code--L, -.spectrum:lang(zh) .spectrum-Code--L { - color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum:lang(ja) .spectrum-Code--M, -.spectrum:lang(ko) .spectrum-Code--M, -.spectrum:lang(zh) .spectrum-Code--M { - color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum:lang(ja) .spectrum-Code--S, -.spectrum:lang(ko) .spectrum-Code--S, -.spectrum:lang(zh) .spectrum-Code--S { - color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum:lang(ja) .spectrum-Code--XS, -.spectrum:lang(ko) .spectrum-Code--XS, -.spectrum:lang(zh) .spectrum-Code--XS { - color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body1 { - color: var(--spectrum-body-1-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body2, -.spectrum-Body--large { - color: var(--spectrum-body-2-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body3 { - color: var(--spectrum-body-3-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body4, -.spectrum-Body--secondary { - color: var(--spectrum-body-4-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body5, -.spectrum-Body--small { - color: var(--spectrum-body-5-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Heading1 { - color: var( - --spectrum-heading-1-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading2 { - color: var( - --spectrum-heading-2-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading3 { - color: var( - --spectrum-heading-3-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading4, -.spectrum-Heading--subtitle1 { - color: var( - --spectrum-heading-4-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading5 { - color: var( - --spectrum-heading-5-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading6, -.spectrum-Heading--subtitle2 { - color: var( - --spectrum-heading-6-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Subheading, -.spectrum-Heading--subtitle3 { - color: var( - --spectrum-subheading-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Detail { - color: var(--spectrum-detail-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Heading1--quiet { - color: var( - --spectrum-heading-quiet-1-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading2--quiet, -.spectrum-Heading--pageTitle { - color: var( - --spectrum-heading-quiet-2-text-color, - var(--spectrum-alias-heading-text-color) - ); -} - -.spectrum-Heading1--strong { +.spectrum-Heading--M { color: var( - --spectrum-heading-strong-1-text-color, + --spectrum-heading-m-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading2--strong { +.spectrum-Heading--S { color: var( - --spectrum-heading-strong-2-text-color, + --spectrum-heading-s-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading1--display { +.spectrum-Heading--XS { color: var( - --spectrum-display-1-text-color, + --spectrum-heading-xs-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading2--display { +.spectrum-Heading--XXS { color: var( - --spectrum-display-2-text-color, + --spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading1--display.spectrum-Heading1--strong { +.spectrum-Heading-XXXL--light { color: var( - --spectrum-display-strong-1-text-color, + --spectrum-heading-light-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading2--display.spectrum-Heading2--strong { +.spectrum-Heading-XXL--light { color: var( - --spectrum-display-strong-2-text-color, + --spectrum-heading-light-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum-Heading-XL--light { color: var( - --spectrum-display-quiet-1-text-color, + --spectrum-heading-light-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum-Heading--display { +.spectrum-Heading-L--light { color: var( - --spectrum-display-quiet-2-text-color, + --spectrum-heading-light-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Body1 { - color: var( - --spectrum-body-article-1-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Article .spectrum-Body2, -.spectrum-Article .spectrum-Body--large { - color: var( - --spectrum-body-article-2-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Article .spectrum-Body3 { - color: var( - --spectrum-body-article-3-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Article .spectrum-Body4, -.spectrum-Article .spectrum-Body--secondary { - color: var( - --spectrum-body-article-4-text-color, - var(--spectrum-alias-text-color) - ); -} - -.spectrum-Article .spectrum-Body5, -.spectrum-Article .spectrum-Body--small { +.spectrum-Heading-XXXL--heavy { color: var( - --spectrum-body-article-5-text-color, - var(--spectrum-alias-text-color) + --spectrum-heading-heavy-xxxl-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading1 { +.spectrum-Heading-XXL--heavy { color: var( - --spectrum-heading-article-1-text-color, + --spectrum-heading-heavy-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading2 { +.spectrum-Heading-XL--heavy { color: var( - --spectrum-heading-article-2-text-color, + --spectrum-heading-heavy-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading3 { +.spectrum-Heading-L--heavy { color: var( - --spectrum-heading-article-3-text-color, + --spectrum-heading-heavy-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading4, -.spectrum-Article .spectrum-Heading--subtitle1 { +.spectrum-Heading-XXXL--heading { color: var( - --spectrum-heading-article-4-text-color, + --spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading5 { +.spectrum-Heading-XXL--heading { color: var( - --spectrum-heading-article-5-text-color, + --spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading6, -.spectrum-Article .spectrum-Heading--subtitle2 { +.spectrum-Heading-XL--heading { color: var( - --spectrum-heading-article-6-text-color, + --spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Subheading, -.spectrum-Article .spectrum-Heading--subtitle3 { +.spectrum-Heading-L--heading { color: var( - --spectrum-subheading-article-text-color, + --spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Detail { +.spectrum-Body--XXXL { color: var( - --spectrum-detail-article-text-color, + --spectrum-body-xxxl-text-color, var(--spectrum-alias-text-color) ); } -.spectrum-Article .spectrum-Heading1--quiet { +.spectrum-Body--XXL { color: var( - --spectrum-heading-quiet-article-1-text-color, - var(--spectrum-alias-heading-text-color) + --spectrum-body-xxl-text-color, + var(--spectrum-alias-text-color) ); } -.spectrum-Article .spectrum-Heading2--quiet, -.spectrum-Article .spectrum-Heading--pageTitle { +.spectrum-Body--XL { + color: var(--spectrum-body-xl-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Body--L { + color: var(--spectrum-body-l-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Body--M { + color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Body--S { + color: var(--spectrum-body-s-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Body--XS { + color: var(--spectrum-body-xs-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Detail--XL { color: var( - --spectrum-heading-quiet-article-2-text-color, + --spectrum-detail-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading1--display { +.spectrum-Detail--L { color: var( - --spectrum-display-article-1-text-color, + --spectrum-detail-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading2--display { +.spectrum-Detail--M { color: var( - --spectrum-display-article-2-text-color, + --spectrum-detail-m-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum-Detail--S { color: var( - --spectrum-display-quiet-article-1-text-color, + --spectrum-detail-s-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Article .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum-Article .spectrum-Heading--display { +.spectrum-Code--XL { + color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Code--L { + color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Code--M { + color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Code--S { + color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum-Code--XS { + color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); +} + +.spectrum:lang(ja) .spectrum-Body--XXXL, +.spectrum:lang(ko) .spectrum-Body--XXXL, +.spectrum:lang(zh) .spectrum-Body--XXXL { color: var( - --spectrum-display-quiet-article-2-text-color, - var(--spectrum-alias-heading-text-color) + --spectrum-body-han-xxxl-text-color, + var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Body1, -.spectrum:lang(ko) .spectrum-Body1, -.spectrum:lang(zh) .spectrum-Body1 { +.spectrum:lang(ja) .spectrum-Body--XXL, +.spectrum:lang(ko) .spectrum-Body--XXL, +.spectrum:lang(zh) .spectrum-Body--XXL { color: var( - --spectrum-body-han-1-text-color, + --spectrum-body-han-xxl-text-color, var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Body2, -.spectrum:lang(ko) .spectrum-Body2, -.spectrum:lang(zh) .spectrum-Body2, -.spectrum:lang(ja) .spectrum-Body--large, -.spectrum:lang(ko) .spectrum-Body--large, -.spectrum:lang(zh) .spectrum-Body--large { +.spectrum:lang(ja) .spectrum-Body--XL, +.spectrum:lang(ko) .spectrum-Body--XL, +.spectrum:lang(zh) .spectrum-Body--XL { color: var( - --spectrum-body-han-2-text-color, + --spectrum-body-han-xl-text-color, var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Body3, -.spectrum:lang(ko) .spectrum-Body3, -.spectrum:lang(zh) .spectrum-Body3 { +.spectrum:lang(ja) .spectrum-Body--L, +.spectrum:lang(ko) .spectrum-Body--L, +.spectrum:lang(zh) .spectrum-Body--L { color: var( - --spectrum-body-han-3-text-color, + --spectrum-body-han-l-text-color, var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Body4, -.spectrum:lang(ko) .spectrum-Body4, -.spectrum:lang(zh) .spectrum-Body4, -.spectrum:lang(ja) .spectrum-Body--secondary, -.spectrum:lang(ko) .spectrum-Body--secondary, -.spectrum:lang(zh) .spectrum-Body--secondary { +.spectrum:lang(ja) .spectrum-Body--M, +.spectrum:lang(ko) .spectrum-Body--M, +.spectrum:lang(zh) .spectrum-Body--M { color: var( - --spectrum-body-han-4-text-color, + --spectrum-body-han-m-text-color, var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Body5, -.spectrum:lang(ko) .spectrum-Body5, -.spectrum:lang(zh) .spectrum-Body5, -.spectrum:lang(ja) .spectrum-Body--small, -.spectrum:lang(ko) .spectrum-Body--small, -.spectrum:lang(zh) .spectrum-Body--small { +.spectrum:lang(ja) .spectrum-Body--S, +.spectrum:lang(ko) .spectrum-Body--S, +.spectrum:lang(zh) .spectrum-Body--S { color: var( - --spectrum-body-han-5-text-color, + --spectrum-body-han-s-text-color, var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1, -.spectrum:lang(ko) .spectrum-Heading1, -.spectrum:lang(zh) .spectrum-Heading1 { +.spectrum:lang(ja) .spectrum-Body--XS, +.spectrum:lang(ko) .spectrum-Body--XS, +.spectrum:lang(zh) .spectrum-Body--XS { color: var( - --spectrum-heading-han-1-text-color, - var(--spectrum-alias-heading-text-color) + --spectrum-body-han-xs-text-color, + var(--spectrum-alias-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2, -.spectrum:lang(ko) .spectrum-Heading2, -.spectrum:lang(zh) .spectrum-Heading2 { +.spectrum:lang(ja) .spectrum-Heading--XXXL, +.spectrum:lang(ko) .spectrum-Heading--XXXL, +.spectrum:lang(zh) .spectrum-Heading--XXXL { color: var( - --spectrum-heading-han-2-text-color, + --spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading3, -.spectrum:lang(ko) .spectrum-Heading3, -.spectrum:lang(zh) .spectrum-Heading3 { +.spectrum:lang(ja) .spectrum-Heading--XXL, +.spectrum:lang(ko) .spectrum-Heading--XXL, +.spectrum:lang(zh) .spectrum-Heading--XXL { color: var( - --spectrum-heading-han-3-text-color, + --spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading4, -.spectrum:lang(ko) .spectrum-Heading4, -.spectrum:lang(zh) .spectrum-Heading4, -.spectrum:lang(ja) .spectrum-Heading--subtitle1, -.spectrum:lang(ko) .spectrum-Heading--subtitle1, -.spectrum:lang(zh) .spectrum-Heading--subtitle1 { +.spectrum:lang(ja) .spectrum-Heading--XL, +.spectrum:lang(ko) .spectrum-Heading--XL, +.spectrum:lang(zh) .spectrum-Heading--XL { color: var( - --spectrum-heading-han-4-text-color, + --spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading5, -.spectrum:lang(ko) .spectrum-Heading5, -.spectrum:lang(zh) .spectrum-Heading5 { +.spectrum:lang(ja) .spectrum-Heading--L, +.spectrum:lang(ko) .spectrum-Heading--L, +.spectrum:lang(zh) .spectrum-Heading--L { color: var( - --spectrum-heading-han-5-text-color, + --spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading6, -.spectrum:lang(ko) .spectrum-Heading6, -.spectrum:lang(zh) .spectrum-Heading6, -.spectrum:lang(ja) .spectrum-Heading--subtitle2, -.spectrum:lang(ko) .spectrum-Heading--subtitle2, -.spectrum:lang(zh) .spectrum-Heading--subtitle2 { +.spectrum:lang(ja) .spectrum-Heading--M, +.spectrum:lang(ko) .spectrum-Heading--M, +.spectrum:lang(zh) .spectrum-Heading--M { color: var( - --spectrum-heading-han-6-text-color, + --spectrum-heading-m-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Subheading, -.spectrum:lang(ko) .spectrum-Subheading, -.spectrum:lang(zh) .spectrum-Subheading, -.spectrum:lang(ja) .spectrum-Heading--subtitle3, -.spectrum:lang(ko) .spectrum-Heading--subtitle3, -.spectrum:lang(zh) .spectrum-Heading--subtitle3 { +.spectrum:lang(ja) .spectrum-Heading--S, +.spectrum:lang(ko) .spectrum-Heading--S, +.spectrum:lang(zh) .spectrum-Heading--S { color: var( - --spectrum-subheading-han-text-color, + --spectrum-heading-s-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Detail, -.spectrum:lang(ko) .spectrum-Detail, -.spectrum:lang(zh) .spectrum-Detail { +.spectrum:lang(ja) .spectrum-Heading--XS, +.spectrum:lang(ko) .spectrum-Heading--XS, +.spectrum:lang(zh) .spectrum-Heading--XS { color: var( - --spectrum-detail-han-text-color, - var(--spectrum-alias-text-color) + --spectrum-heading-xs-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1--quiet, -.spectrum:lang(ko) .spectrum-Heading1--quiet, -.spectrum:lang(zh) .spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Heading--XXS, +.spectrum:lang(ko) .spectrum-Heading--XXS, +.spectrum:lang(zh) .spectrum-Heading--XXS { color: var( - --spectrum-heading-quiet-han-1-text-color, + --spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2--quiet, -.spectrum:lang(ko) .spectrum-Heading2--quiet, -.spectrum:lang(zh) .spectrum-Heading2--quiet, -.spectrum:lang(ja) .spectrum-Heading--pageTitle, -.spectrum:lang(ko) .spectrum-Heading--pageTitle, -.spectrum:lang(zh) .spectrum-Heading--pageTitle { +.spectrum:lang(ja) .spectrum-Heading-XXXL--light, +.spectrum:lang(ko) .spectrum-Heading-XXXL--light, +.spectrum:lang(zh) .spectrum-Heading-XXXL--light { color: var( - --spectrum-heading-quiet-han-2-text-color, + --spectrum-heading-light-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1--strong, -.spectrum:lang(ko) .spectrum-Heading1--strong, -.spectrum:lang(zh) .spectrum-Heading1--strong { +.spectrum:lang(ja) .spectrum-Heading-XXL--light, +.spectrum:lang(ko) .spectrum-Heading-XXL--light, +.spectrum:lang(zh) .spectrum-Heading-XXL--light { color: var( - --spectrum-heading-strong-han-1-text-color, + --spectrum-heading-light-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2--strong, -.spectrum:lang(ko) .spectrum-Heading2--strong, -.spectrum:lang(zh) .spectrum-Heading2--strong { +.spectrum:lang(ja) .spectrum-Heading-XL--light, +.spectrum:lang(ko) .spectrum-Heading-XL--light, +.spectrum:lang(zh) .spectrum-Heading-XL--light { color: var( - --spectrum-heading-strong-han-2-text-color, + --spectrum-heading-light-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1--display, -.spectrum:lang(ko) .spectrum-Heading1--display, -.spectrum:lang(zh) .spectrum-Heading1--display { +.spectrum:lang(ja) .spectrum-Heading-L--light, +.spectrum:lang(ko) .spectrum-Heading-L--light, +.spectrum:lang(zh) .spectrum-Heading-L--light { color: var( - --spectrum-display-han-1-text-color, + --spectrum-heading-light-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2--display, -.spectrum:lang(ko) .spectrum-Heading2--display, -.spectrum:lang(zh) .spectrum-Heading2--display { +.spectrum:lang(ja) .spectrum-Heading-XXXL--heavy, +.spectrum:lang(ko) .spectrum-Heading-XXXL--heavy, +.spectrum:lang(zh) .spectrum-Heading-XXXL--heavy { color: var( - --spectrum-display-han-2-text-color, + --spectrum-heading-heavy-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1--display.spectrum-Heading1--strong, -.spectrum:lang(ko) .spectrum-Heading1--display.spectrum-Heading1--strong, -.spectrum:lang(zh) .spectrum-Heading1--display.spectrum-Heading1--strong { +.spectrum:lang(ja) .spectrum-Heading-XXL--heavy, +.spectrum:lang(ko) .spectrum-Heading-XXL--heavy, +.spectrum:lang(zh) .spectrum-Heading-XXL--heavy { color: var( - --spectrum-display-strong-han-1-text-color, + --spectrum-heading-heavy-xxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2--display.spectrum-Heading2--strong, -.spectrum:lang(ko) .spectrum-Heading2--display.spectrum-Heading2--strong, -.spectrum:lang(zh) .spectrum-Heading2--display.spectrum-Heading2--strong { +.spectrum:lang(ja) .spectrum-Heading-XL--heavy, +.spectrum:lang(ko) .spectrum-Heading-XL--heavy, +.spectrum:lang(zh) .spectrum-Heading-XL--heavy { color: var( - --spectrum-display-strong-han-2-text-color, + --spectrum-heading-heavy-xl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading1--display.spectrum-Heading1--quiet, -.spectrum:lang(ko) .spectrum-Heading1--display.spectrum-Heading1--quiet, -.spectrum:lang(zh) .spectrum-Heading1--display.spectrum-Heading1--quiet { +.spectrum:lang(ja) .spectrum-Heading-L--heavy, +.spectrum:lang(ko) .spectrum-Heading-L--heavy, +.spectrum:lang(zh) .spectrum-Heading-L--heavy { color: var( - --spectrum-display-quiet-han-1-text-color, + --spectrum-heading-heavy-l-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum:lang(ja) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(ko) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(zh) .spectrum-Heading2--display.spectrum-Heading2--quiet, -.spectrum:lang(ja) .spectrum-Heading--display, -.spectrum:lang(ko) .spectrum-Heading--display, -.spectrum:lang(zh) .spectrum-Heading--display { +.spectrum:lang(ja) .spectrum-Heading-XXXL--heading, +.spectrum:lang(ko) .spectrum-Heading-XXXL--heading, +.spectrum:lang(zh) .spectrum-Heading-XXXL--heading { color: var( - --spectrum-display-quiet-han-2-text-color, + --spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color) ); } -.spectrum-Code1 { +.spectrum:lang(ja) .spectrum-Heading-XXL--heading, +.spectrum:lang(ko) .spectrum-Heading-XXL--heading, +.spectrum:lang(zh) .spectrum-Heading-XXL--heading { color: var( - --spectrum-body-code-1-text-color, - var(--spectrum-alias-text-color) + --spectrum-heading-xxl-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Code2 { +.spectrum:lang(ja) .spectrum-Heading-XL--heading, +.spectrum:lang(ko) .spectrum-Heading-XL--heading, +.spectrum:lang(zh) .spectrum-Heading-XL--heading { color: var( - --spectrum-body-code-2-text-color, - var(--spectrum-alias-text-color) + --spectrum-heading-xl-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Code3 { +.spectrum:lang(ja) .spectrum-Heading-L--heading, +.spectrum:lang(ko) .spectrum-Heading-L--heading, +.spectrum:lang(zh) .spectrum-Heading-L--heading { color: var( - --spectrum-body-code-3-text-color, - var(--spectrum-alias-text-color) + --spectrum-heading-l-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Code4 { +.spectrum:lang(ja) .spectrum-Detail--XL, +.spectrum:lang(ko) .spectrum-Detail--XL, +.spectrum:lang(zh) .spectrum-Detail--XL { color: var( - --spectrum-body-code-4-text-color, - var(--spectrum-alias-text-color) + --spectrum-detail-xl-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Code5 { +.spectrum:lang(ja) .spectrum-Detail--L, +.spectrum:lang(ko) .spectrum-Detail--L, +.spectrum:lang(zh) .spectrum-Detail--L { color: var( - --spectrum-body-code-5-text-color, - var(--spectrum-alias-text-color) + --spectrum-detail-l-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum, -.spectrum-Body { - color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color)); -} - -.spectrum-Body--large { +.spectrum:lang(ja) .spectrum-Detail--M, +.spectrum:lang(ko) .spectrum-Detail--M, +.spectrum:lang(zh) .spectrum-Detail--M { color: var( - --spectrum-body-large-text-color, - var(--spectrum-alias-text-color) + --spectrum-detail-m-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Body--small { +.spectrum:lang(ja) .spectrum-Detail--S, +.spectrum:lang(ko) .spectrum-Detail--S, +.spectrum:lang(zh) .spectrum-Detail--S { color: var( - --spectrum-body-small-text-color, - var(--spectrum-alias-text-color) + --spectrum-detail-s-text-color, + var(--spectrum-alias-heading-text-color) ); } -.spectrum-Body--secondary { - color: var( - --spectrum-body-secondary-text-color, - var(--spectrum-global-color-gray-700) - ); +.spectrum:lang(ja) .spectrum-Code--XL, +.spectrum:lang(ko) .spectrum-Code--XL, +.spectrum:lang(zh) .spectrum-Code--XL { + color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); } -.spectrum-Heading--display { - color: var( - --spectrum-heading-display-text-color, - var(--spectrum-alias-heading-text-color) - ); +.spectrum:lang(ja) .spectrum-Code--L, +.spectrum:lang(ko) .spectrum-Code--L, +.spectrum:lang(zh) .spectrum-Code--L { + color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); } -.spectrum-Heading--pageTitle { - color: var( - --spectrum-heading-page-title-text-color, - var(--spectrum-global-color-gray-700) - ); +.spectrum:lang(ja) .spectrum-Code--M, +.spectrum:lang(ko) .spectrum-Code--M, +.spectrum:lang(zh) .spectrum-Code--M { + color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); } -.spectrum-Heading--subtitle1 { - color: var( - --spectrum-heading-subtitle1-text-color, - var(--spectrum-alias-heading-text-color) - ); +.spectrum:lang(ja) .spectrum-Code--S, +.spectrum:lang(ko) .spectrum-Code--S, +.spectrum:lang(zh) .spectrum-Code--S { + color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); } -.spectrum-Heading--subtitle2 { - color: var( - --spectrum-heading-subtitle2-text-color, - var(--spectrum-alias-heading-text-color) - ); +.spectrum:lang(ja) .spectrum-Code--XS, +.spectrum:lang(ko) .spectrum-Code--XS, +.spectrum:lang(zh) .spectrum-Code--XS { + color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); } -.spectrum-Heading--subtitle3 { - color: var( - --spectrum-heading-subtitle3-text-color, - var(--spectrum-global-color-gray-700) - ); +.spectrum, +.spectrum-Body { + color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); } /* stylelint-enable */ diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 3e223da5fb..04df9e3ef1 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -50,7 +50,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/tabs": "^3.0.0-beta.3" + "@spectrum-css/tabs": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts index 19fda70888..4f12f74a8a 100644 --- a/packages/tabs/src/Tabs.ts +++ b/packages/tabs/src/Tabs.ts @@ -75,14 +75,14 @@ export class Tabs extends Focusable { private tabs: Tab[] = []; - public get focusElement(): Tab | Tabs { + public get focusElement(): Tab { const focusElement = this.tabs.find( (tab) => tab.selected || tab.value === this.selected ); if (focusElement) { return focusElement; } - return this.tabs[0] || this; + return this.tabs[0]; } constructor() { diff --git a/packages/tabs/src/spectrum-config.js b/packages/tabs/src/spectrum-config.js index 4e960edfb9..a8bb04bd3f 100644 --- a/packages/tabs/src/spectrum-config.js +++ b/packages/tabs/src/spectrum-config.js @@ -52,7 +52,10 @@ const config = { '.spectrum-Tabs-item+:not(.spectrum-Tabs-selectionIndicator)', }, ], - exclude: [/^\.spectrum-Tabs-item/], + exclude: [ + /^\.spectrum-Tabs-item/, + /\.spectrum-Tabs-item \.spectrum/, + ], }, { name: 'tab', diff --git a/packages/tags/package.json b/packages/tags/package.json index f461a42abc..b2715c053a 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -50,7 +50,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/tags": "^3.0.0-beta.3" + "@spectrum-css/tags": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 2cdc75523f..3f14fe4369 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -196,7 +196,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .clear-button { /* .spectrum-Tags-item .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color, + --spectrum-tag-removable-icon-color, var(--spectrum-global-color-gray-600) ); } @@ -218,7 +218,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host(:hover) .clear-button { /* .spectrum-Tags-item:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-hover, + --spectrum-tag-removable-icon-color-hover, var(--spectrum-global-color-gray-900) ); } @@ -236,7 +236,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tag-border-color-key-focus, var(--spectrum-alias-border-color-focus) ); - box-shadow: 0 0 0 1px + box-shadow: 0 0 0 + var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ) var( --spectrum-tag-border-color-key-focus, var(--spectrum-alias-border-color-focus) @@ -245,41 +249,137 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host(:focus-visible) .clear-button { /* .spectrum-Tags-item.focus-ring .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-key-focus, + --spectrum-tag-removable-icon-color-key-focus, var(--spectrum-global-color-gray-900) ); } -:host([invalid]) { - /* .spectrum-Tags-item.is-invalid */ +:host(.is-selected) { + /* .spectrum-Tags-item.is-selected */ + background-color: var( + --spectrum-tag-background-color-selected, + var(--spectrum-global-color-gray-700) + ); color: var( - --spectrum-tag-text-color-error, + --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) + ); +} +:host(.is-selected) .spectrum-Tags-itemIcon { + /* .spectrum-Tags-item.is-selected .spectrum-Tags-itemIcon */ + color: var( + --spectrum-tag-icon-color-selected, + var(--spectrum-global-color-gray-50) + ); +} +:host(.is-selected:hover) { + /* .spectrum-Tags-item.is-selected:hover */ + background-color: var( + --spectrum-tag-background-color-selected-hover, + var(--spectrum-global-color-gray-800) + ); +} +:host(.is-selected:focus-visible) { + /* .spectrum-Tags-item.is-selected.focus-ring */ + box-shadow: 0 0 0 + var( + --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) + ); + border-color: var( + --spectrum-tag-text-color-selected-key-focus, + var(--spectrum-global-color-gray-50) + ); +} +:host(.is-selected[invalid]) { + /* .spectrum-Tags-item.is-selected.is-invalid */ + border-color: var( + --spectrum-tag-border-color-error-selected, + var(--spectrum-alias-border-color-transparent) + ); + background-color: var( + --spectrum-tag-background-color-error-selected, var(--spectrum-global-color-gray-700) ); +} +:host(.is-selected[invalid]) .spectrum-Tags-itemClearButton, +:host(.is-selected[invalid]) .spectrum-Tags-itemIcon, +:host(.is-selected[invalid]) .label { + /* .spectrum-Tags-item.is-selected.is-invalid .spectrum-Tags-itemClearButton, + * .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) + ); +} +:host(.is-selected[invalid]:focus-visible) { + /* .spectrum-Tags-item.is-selected.is-invalid.focus-ring */ + box-shadow: 0 0 0 + var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ) + var( + --spectrum-tag-border-color-error-selected-key-focus, + var(--spectrum-alias-border-color-focus) + ); border-color: var( - --spectrum-tag-border-color-error, - var(--spectrum-global-color-red-500) + --spectrum-tag-text-color-selected-key-focus, + var(--spectrum-global-color-gray-50) + ); +} +:host(.is-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) + ); + background-color: var( + --spectrum-tag-background-color-error-selected-hover, + var(--spectrum-global-color-gray-800) ); } -:host([invalid]) .clear-button { - /* .spectrum-Tags-item.is-invalid .spectrum-ClearButton */ +:host(.is-selected[invalid]:hover) .spectrum-Tags-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) + ); +} +: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, + var(--spectrum-global-color-red-500) + ); } :host([invalid]:hover) { /* .spectrum-Tags-item.is-invalid:hover */ - color: var( - --spectrum-tag-text-color-error-hover, - var(--spectrum-global-color-gray-900) - ); border-color: var( --spectrum-tag-border-color-error-hover, var(--spectrum-global-color-red-600) ); } -:host([invalid]:hover) .clear-button { - /* .spectrum-Tags-item.is-invalid:hover .spectrum-ClearButton */ +:host([invalid]:focus-visible), +:host([invalid]:hover), +:host([invalid]:hover) .spectrum-Tags-itemClearButton, +:host([invalid]:hover) .spectrum-Tags-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, var(--spectrum-global-color-red-600) @@ -287,113 +387,180 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([invalid]:focus-visible) { /* .spectrum-Tags-item.is-invalid.focus-ring */ - color: var( - --spectrum-tag-text-color-error-key-focus, - var(--spectrum-global-color-gray-900) - ); border-color: var( --spectrum-tag-border-color-key-focus, var(--spectrum-alias-border-color-focus) ); - box-shadow: 0 0 0 1px + box-shadow: 0 0 0 + var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ) var( --spectrum-tag-border-color-key-focus, var(--spectrum-alias-border-color-focus) ); } -:host([invalid]:focus-visible) .clear-button { - /* .spectrum-Tags-item.is-invalid.focus-ring .spectrum-ClearButton */ +:host([invalid]) .spectrum-Tags-itemClearButton, +:host([invalid]) .spectrum-Tags-itemIcon { + /* .spectrum-Tags-item.is-invalid .spectrum-Tags-itemClearButton, + * .spectrum-Tags-item.is-invalid .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-icon-color-error-key-focus, - var(--spectrum-global-color-red-600) + --spectrum-tag-icon-color-error, + var(--spectrum-global-color-red-500) ); } :host([disabled]) ::slotted([slot='avatar']) { /* .spectrum-Tags-item.is-disabled .spectrum-Avatar */ - opacity: var(--spectrum-avatar-small-opacity-disabled, 0.3); + opacity: var(--spectrum-avatar-size-100-opacity-disabled, 0.3); } -:host([deletable]:hover) { - /* .spectrum-Tags-item--deletable:hover */ +:host([disabled]) .spectrum-Tags-itemIcon { + /* .spectrum-Tags-item.is-disabled .spectrum-Tags-itemIcon */ color: var( - --spectrum-tag-deletable-text-color-hover, - var(--spectrum-global-color-gray-700) + --spectrum-tag-icon-color-disabled, + var(--spectrum-global-color-gray-500) + ); +} +.spectrum-Tags-item--removable:hover { + /* .spectrum-Tags-item--removable:hover */ + color: var( + --spectrum-tag-removable-text-color-hover, + var(--spectrum-global-color-gray-900) ); } -:host([deletable]:hover) .clear-button { - /* .spectrum-Tags-item--deletable:hover .spectrum-ClearButton */ +.spectrum-Tags-item--removable:hover .clear-button { + /* .spectrum-Tags-item--removable:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-hover, + --spectrum-tag-removable-icon-color-hover, var(--spectrum-global-color-gray-900) ); } -:host([deletable]:active) { - /* .spectrum-Tags-item--deletable:active */ +.spectrum-Tags-item--removable:active { + /* .spectrum-Tags-item--removable:active */ color: var( - --spectrum-tag-deletable-text-color-down, + --spectrum-tag-removable-text-color-down, var(--spectrum-global-color-gray-700) ); } -:host([deletable]:active) .clear-button { - /* .spectrum-Tags-item--deletable:active .spectrum-ClearButton */ +.spectrum-Tags-item--removable:active .clear-button { + /* .spectrum-Tags-item--removable:active .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-down, + --spectrum-tag-removable-icon-color-down, var(--spectrum-global-color-gray-900) ); } -:host([deletable][invalid]:hover) { - /* .spectrum-Tags-item--deletable.is-invalid:hover */ +:host([invalid]) .spectrum-Tags-item--removable:hover { + /* .spectrum-Tags-item--removable.is-invalid:hover */ border-color: var( - --spectrum-tag-deletable-border-color-error-hover, + --spectrum-tag-removable-border-color-error-hover, var(--spectrum-global-color-red-600) ); color: var( - --spectrum-tag-deletable-text-color-error-hover, + --spectrum-tag-removable-text-color-error-hover, var(--spectrum-global-color-gray-700) ); } -:host([deletable][invalid]:hover) .clear-button { - /* .spectrum-Tags-item--deletable.is-invalid:hover .spectrum-ClearButton */ +:host([invalid]) .spectrum-Tags-item--removable:hover .clear-button { + /* .spectrum-Tags-item--removable.is-invalid:hover .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-error-hover, + --spectrum-tag-removable-icon-color-error-hover, var(--spectrum-global-color-red-600) ); } -:host([deletable][invalid]:active) { - /* .spectrum-Tags-item--deletable.is-invalid:active */ +:host([invalid]) .spectrum-Tags-item--removable:active { + /* .spectrum-Tags-item--removable.is-invalid:active */ border-color: var( - --spectrum-tag-deletable-border-color-error-down, + --spectrum-tag-removable-border-color-error-down, var(--spectrum-global-color-red-700) ); color: var( - --spectrum-tag-deletable-text-color-error-down, + --spectrum-tag-removable-text-color-error-down, var(--spectrum-global-color-gray-700) ); } -:host([deletable][invalid]:active) .clear-button { - /* .spectrum-Tags-item--deletable.is-invalid:active .spectrum-ClearButton */ +:host([invalid]) .spectrum-Tags-item--removable:active .clear-button { + /* .spectrum-Tags-item--removable.is-invalid:active .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-error-down, + --spectrum-tag-removable-icon-color-error-down, var(--spectrum-global-color-red-700) ); } -:host([deletable]:focus-visible) { - /* .spectrum-Tags-item--deletable.focus-ring */ +.spectrum-Tags-item--removable:focus-visible { + /* .spectrum-Tags-item--removable.focus-ring */ color: var( - --spectrum-tag-deletable-text-color-key-focus, + --spectrum-tag-removable-text-color-key-focus, var(--spectrum-global-color-gray-700) ); } -:host([deletable]:focus-visible) .clear-button { - /* .spectrum-Tags-item--deletable.focus-ring .spectrum-ClearButton */ +.spectrum-Tags-item--removable:focus-visible .clear-button { + /* .spectrum-Tags-item--removable.focus-ring .spectrum-ClearButton */ color: var( - --spectrum-tag-deletable-icon-color-key-focus, + --spectrum-tag-removable-icon-color-key-focus, var(--spectrum-global-color-gray-900) ); } -:host([deletable][invalid]:focus-visible) { - /* .spectrum-Tags-item--deletable.focus-ring.is-invalid */ +.spectrum-Tags-item--removable.is-selected { + /* .spectrum-Tags-item--removable.is-selected */ + color: var( + --spectrum-tag-removable-text-color-selected, + var(--spectrum-global-color-gray-50) + ); +} +.spectrum-Tags-item--removable.is-selected.is-focused { + /* .spectrum-Tags-item--removable.is-selected.is-focused */ color: var( - --spectrum-tag-deletable-text-color-error-key-focus, + --spectrum-tag-removable-text-color-selected-key-focus, + var(--spectrum-global-color-gray-50) + ); +} +.spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton { + /* .spectrum-Tags-item--removable.is-selected .spectrum-Tags-itemClearButton */ + color: var( + --spectrum-tag-removable-button-icon-color-selected, + var(--spectrum-global-color-gray-50) + ); +} +.spectrum-Tags-item--removable.is-selected + .spectrum-Tags-itemClearButton:hover { + /* .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) + ); +} +:host([invalid]) .spectrum-Tags-item--removable.is-selected { + /* .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-Tags-item--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) + ); + color: var( + --spectrum-tag-removable-button-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); +} +.spectrum-Tags-item--removable .spectrum-Tags-itemClearButton:hover { + /* .spectrum-Tags-item--removable .spectrum-Tags-itemClearButton:hover */ + color: var( + --spectrum-tag-removable-button-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); +} +.spectrum-Tags-item--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) + ); +} diff --git a/packages/textfield/package.json b/packages/textfield/package.json index 5d4fe25042..74ab76d950 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/textfield": "^3.0.0-beta.3" + "@spectrum-css/textfield": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts index b52a4f194c..06f18e5c2d 100644 --- a/packages/textfield/src/Textfield.ts +++ b/packages/textfield/src/Textfield.ts @@ -24,17 +24,17 @@ import { import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import '@spectrum-web-components/icon/sp-icon.js'; import { - AlertSmallIcon, - CheckmarkSmallIcon, + AlertMediumIcon, + CheckmarkMediumIcon, } from '@spectrum-web-components/icons-ui'; import textfieldStyles from './textfield.css.js'; -import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js'; -import alertSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.js'; +import checkmarkMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.js'; +import alertMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js'; export class Textfield extends Focusable { public static get styles(): CSSResultArray { - return [textfieldStyles, checkmarkSmallStyles, alertSmallStyles]; + return [textfieldStyles, checkmarkMediumStyles, alertMediumStyles]; } @property({ attribute: 'allowed-keys' }) @@ -122,14 +122,14 @@ export class Textfield extends Focusable { protected renderStateIcons(): TemplateResult | typeof nothing { if (this.invalid) { return html` - - ${AlertSmallIcon({ hidden: true })} + + ${AlertMediumIcon({ hidden: true })} `; } else if (this.valid) { return html` - - ${CheckmarkSmallIcon({ hidden: true })} + + ${CheckmarkMediumIcon({ hidden: true })} `; } @@ -138,7 +138,7 @@ export class Textfield extends Focusable { private get renderMultiline(): TemplateResult { return html` - ${this.grows + ${this.grows && !this.quiet ? html`
${this.value}
` diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 2ec43985e4..9cd00c22a3 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -335,50 +335,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][invalid]) .icon { /* [dir=ltr] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - right: calc( - var(--spectrum-textfield-icon-frame) / 2 - - var( - --spectrum-icon-alert-medium-width, - var(--spectrum-global-dimension-size-225) - ) / 2 - ); /* [dir=ltr] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - padding-right: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) / 2 - var(--spectrum-global-dimension-size-10) + right: var( + --spectrum-textfield-icon-margin-left, + var(--spectrum-global-dimension-size-150) ); } :host([dir='rtl'][invalid]) .icon { /* [dir=rtl] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - left: calc( - var(--spectrum-textfield-icon-frame) / 2 - - var( - --spectrum-icon-alert-medium-width, - var(--spectrum-global-dimension-size-225) - ) / 2 - ); /* [dir=rtl] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - padding-left: calc( - var( - --spectrum-textfield-padding-x, - var(--spectrum-global-dimension-size-150) - ) / 2 - var(--spectrum-global-dimension-size-10) + left: var( + --spectrum-textfield-icon-margin-left, + var(--spectrum-global-dimension-size-150) ); } :host([invalid]) .icon { /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ width: var( - --spectrum-icon-alert-medium-width, + --spectrum-textfield-validation-icon-width-error, var(--spectrum-global-dimension-size-225) ); height: var( - --spectrum-icon-alert-medium-height, + --spectrum-textfield-validation-icon-height-error, var(--spectrum-global-dimension-size-225) ); bottom: calc( - var(--spectrum-textfield-icon-frame) / 2 - + var( + --spectrum-textfield-height, + var(--spectrum-alias-single-line-height) + ) / 2 - var( - --spectrum-icon-alert-medium-height, + --spectrum-textfield-validation-icon-height-error, var(--spectrum-global-dimension-size-225) ) / 2 ); /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ @@ -397,19 +382,37 @@ 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-global-dimension-size-150); + right: var( + --spectrum-textfield-icon-margin-left, + var(--spectrum-global-dimension-size-150) + ); } :host([dir='rtl'][valid]) .icon { /* [dir=rtl] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ - left: var(--spectrum-global-dimension-size-150); + left: var( + --spectrum-textfield-icon-margin-left, + var(--spectrum-global-dimension-size-150) + ); } :host([valid]) .icon { /* .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ - width: var(--spectrum-icon-checkmark-medium-width); - height: var(--spectrum-icon-checkmark-medium-height); + 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) + ); bottom: calc( - var(--spectrum-textfield-icon-frame) / 2 - - var(--spectrum-icon-checkmark-medium-height) / 2 + 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 ); /* .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ color: var( --spectrum-semantic-positive-color-icon, @@ -443,11 +446,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: block; position: absolute; height: var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ); width: var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ); top: calc( @@ -456,7 +459,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-single-line-height) ) / 2 - var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) / 2 ); /* .spectrum-Textfield-icon */ @@ -477,7 +480,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=ltr] .spectrum-Textfield--quiet .spectrum-Textfield-icon~.spectrum-Textfield-input */ padding-left: calc( var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) + var(--spectrum-global-dimension-size-75) ); @@ -486,7 +489,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* [dir=rtl] .spectrum-Textfield--quiet .spectrum-Textfield-icon~.spectrum-Textfield-input */ padding-right: calc( var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) + var(--spectrum-global-dimension-size-75) ); @@ -499,7 +502,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-150) ) + var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) + var(--spectrum-global-dimension-size-65) ); @@ -512,7 +515,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-150) ) + var( - --spectrum-alias-workflow-icon-size, + --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) + var(--spectrum-global-dimension-size-65) ); @@ -615,7 +618,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-semantic-negative-color-default) ); } -:host([invalid]) .is-keyboardFocused.spectrum-Textfield #input, +:host([invalid]) .is-keyboardFocused #input, :host([invalid]) #input:focus-visible { /* .is-keyboardFocused.spectrum-Textfield.is-invalid .spectrum-Textfield-input, * .spectrum-Textfield.is-invalid .spectrum-Textfield-input.focus-ring */ diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css index 33853d550b..6eebb0826a 100644 --- a/packages/textfield/src/textfield.css +++ b/packages/textfield/src/textfield.css @@ -17,31 +17,47 @@ governing permissions and limitations under the License. top: 0; left: 0; height: 100%; + resize: none; } :host([grows]) #sizer { box-sizing: border-box; - padding: 4px 8px; - min-width: var( - --spectrum-textfield-min-width, - var(--spectrum-global-dimension-size-600) + 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) ); - width: var( - --spectrum-alias-single-line-width, - var(--spectrum-global-dimension-size-2400) + 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 + ); + text-indent: 0; + width: 100%; + vertical-align: top; + margin: 0; + font-family: var( + --spectrum-alias-body-text-font-family, + var(--spectrum-global-font-family-base) ); - min-height: 50px; - border: 1px solid transparent; - pointer-events: none; - opacity: 0; - font-family: adobe-clean, Helvetica, Arial, sans-serif; font-size: var( --spectrum-textfield-text-size, - var(--spectrum-global-dimension-font-size-100) + var(--spectrum-alias-font-size-default) ); line-height: var( - --spectrum-alias-line-height-medium, - var(--spectrum-global-dimension-size-250) + --spectrum-textfield-text-line-height, + var(--spectrum-alias-body-text-line-height) ); } diff --git a/packages/textfield/textarea.md b/packages/textfield/textarea.md index e02e7ed474..6bb925c0a2 100644 --- a/packages/textfield/textarea.md +++ b/packages/textfield/textarea.md @@ -59,6 +59,8 @@ The quiet style works best when a clear layout (vertical stack, table, grid) ass By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accomidate the full content of the element. +Note: When leveraging the `quiet` attribute, the `grows` attribute does not effect the final delivery of the element. + ```html + ``` diff --git a/packages/theme/package.json b/packages/theme/package.json index bc4b8cda33..7407554e69 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -65,6 +65,12 @@ }, "author": "", "license": "ISC", + "devDependencies": { + "@spectrum-web-components/button": "^0.9.2", + "@spectrum-web-components/button-group": "^0.3.2", + "@spectrum-web-components/slider": "^0.6.2", + "@spectrum-web-components/switch": "^0.4.2" + }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", "@spectrum-web-components/styles": "^0.6.1", diff --git a/packages/toast/package.json b/packages/toast/package.json index 584c03f966..c2e0065d56 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/toast": "^3.0.0-beta.3" + "@spectrum-css/toast": "^3.0.0-beta.4" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/toast/src/Toast.ts b/packages/toast/src/Toast.ts index b95c42ed2c..25f165030b 100644 --- a/packages/toast/src/Toast.ts +++ b/packages/toast/src/Toast.ts @@ -20,6 +20,9 @@ import { } from '@spectrum-web-components/base'; import '@spectrum-web-components/button/sp-clear-button.js'; import '@spectrum-web-components/icon/sp-icon.js'; +import alertIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js'; +import infoIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-info-medium.css.js'; +import successIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-success-medium.css.js'; import { AlertSmallIcon, InfoSmallIcon, @@ -50,7 +53,12 @@ export type ToastVariants = export class Toast extends SpectrumElement { public static get styles(): CSSResultArray { - return [toastStyles]; + return [ + toastStyles, + alertIconStyles, + infoIconStyles, + successIconStyles, + ]; } @property({ type: Boolean, reflect: true }) @@ -107,19 +115,23 @@ export class Toast extends SpectrumElement { private renderIcon(variant: string): TemplateResult { let label = ''; let icon; + let className = ''; switch (variant) { case 'info': + className = 'alert-medium'; label = 'Information'; icon = InfoSmallIcon; break; case 'negative': case 'error': // deprecated case 'warning': // deprecated + className = 'alert-medium'; label = 'Error'; icon = AlertSmallIcon; break; case 'positive': case 'success': // deprecated + className = 'success-medium'; label = 'Success'; icon = SuccessSmallIcon; break; @@ -127,7 +139,7 @@ export class Toast extends SpectrumElement { return html``; } return html` - + ${icon({ hidden: true })} `; diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index c1074a36c5..ec3605439c 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -13,22 +13,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) { /* [dir=ltr] .spectrum-Toast */ padding-right: var( - --spectrum-toast-padding-right, + --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) ); /* [dir=ltr] .spectrum-Toast */ padding-left: var( - --spectrum-toast-padding-left, + --spectrum-toast-neutral-padding-left, var(--spectrum-global-dimension-size-200) ); } :host([dir='rtl']) { /* [dir=rtl] .spectrum-Toast */ padding-left: var( - --spectrum-toast-padding-right, + --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) ); /* [dir=rtl] .spectrum-Toast */ padding-right: var( - --spectrum-toast-padding-left, + --spectrum-toast-neutral-padding-left, var(--spectrum-global-dimension-size-200) ); } @@ -39,39 +39,39 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-direction: row; align-items: stretch; border-radius: var( - --spectrum-toast-border-radius, + --spectrum-toast-neutral-border-radius, var(--spectrum-global-dimension-static-size-50) ); padding-top: var( - --spectrum-toast-padding-y, + --spectrum-toast-neutral-padding-y, var(--spectrum-global-dimension-size-100) ); padding-bottom: var( - --spectrum-toast-padding-y, + --spectrum-toast-neutral-padding-y, var(--spectrum-global-dimension-size-100) ); font-size: var( - --spectrum-toast-text-size, + --spectrum-toast-neutral-text-size, var(--spectrum-alias-font-size-default) ); font-weight: var( - --spectrum-toast-text-font-weight, + --spectrum-toast-neutral-text-font-weight, var(--spectrum-global-font-weight-bold) ); -webkit-font-smoothing: antialiased; /* .spectrum-Toast */ background-color: var( - --spectrum-toast-background-color, + --spectrum-toast-neutral-background-color, var(--spectrum-global-color-static-gray-700) ); color: var( - --spectrum-toast-background-color, + --spectrum-toast-neutral-background-color, var(--spectrum-global-color-static-gray-700) ); } :host([dir='ltr']) .type { /* [dir=ltr] .spectrum-Toast-typeIcon */ margin-right: var( - --spectrum-toast-icon-padding-right, + --spectrum-toast-neutral-icon-padding-right, var(--spectrum-global-dimension-size-150) ); /* [dir=ltr] .spectrum-Toast-typeIcon */ margin-left: 0; @@ -79,7 +79,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) .type { /* [dir=rtl] .spectrum-Toast-typeIcon */ margin-left: var( - --spectrum-toast-icon-padding-right, + --spectrum-toast-neutral-icon-padding-right, var(--spectrum-global-dimension-size-150) ); /* [dir=rtl] .spectrum-Toast-typeIcon */ margin-right: 0; @@ -97,7 +97,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) .content { /* [dir=ltr] .spectrum-Toast-content */ padding-right: var( - --spectrum-toast-content-padding-right, + --spectrum-toast-neutral-content-padding-right, var(--spectrum-global-dimension-size-200) ); /* [dir=ltr] .spectrum-Toast-content */ padding-left: 0; /* [dir=ltr] .spectrum-Toast-content */ @@ -106,7 +106,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) .content { /* [dir=rtl] .spectrum-Toast-content */ padding-left: var( - --spectrum-toast-content-padding-right, + --spectrum-toast-neutral-content-padding-right, var(--spectrum-global-dimension-size-200) ); /* [dir=rtl] .spectrum-Toast-content */ padding-right: 0; /* [dir=rtl] .spectrum-Toast-content */ @@ -118,11 +118,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: inline-block; box-sizing: border-box; padding-top: var(--spectrum-global-dimension-size-65); - padding-bottom: var( - --spectrum-global-dimension-size-65 + padding-bottom: var(--spectrum-global-dimension-size-65); + font-size: var( + --spectrum-toast-info-text-size, + var(--spectrum-alias-font-size-default) + ); + font-weight: var( + --spectrum-toast-info-text-font-weight, + var(--spectrum-global-font-weight-bold) + ); + line-height: var( + --spectrum-toast-info-text-line-height, + var(--spectrum-alias-body-text-line-height) ); /* .spectrum-Toast-content */ color: var( - --spectrum-toast-text-color, + --spectrum-toast-neutral-text-color, var(--spectrum-global-color-static-white) ); } @@ -141,7 +151,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=ltr] .spectrum-Toast-buttons .spectrum-ClearButton+.spectrum-Button, * [dir=ltr] .spectrum-Toast-buttons .spectrum-ClearButton+.spectrum-ClearButton */ margin-left: var( - --spectrum-toast-button-gap, + --spectrum-toast-neutral-button-gap-x, var(--spectrum-global-dimension-size-100) ); } @@ -154,7 +164,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=rtl] .spectrum-Toast-buttons .spectrum-ClearButton+.spectrum-Button, * [dir=rtl] .spectrum-Toast-buttons .spectrum-ClearButton+.spectrum-ClearButton */ margin-right: var( - --spectrum-toast-button-gap, + --spectrum-toast-neutral-button-gap-x, var(--spectrum-global-dimension-size-100) ); } @@ -176,7 +186,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) .body + .buttons { /* [dir=ltr] .spectrum-Toast-body+.spectrum-Toast-buttons */ padding-left: var( - --spectrum-toast-padding-right, + --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) ); /* [dir=ltr] .spectrum-Toast-body+.spectrum-Toast-buttons */ border-left-width: 1px; /* [dir=ltr] .spectrum-Toast-body+.spectrum-Toast-buttons */ @@ -185,7 +195,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) .body + .buttons { /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ padding-right: var( - --spectrum-toast-padding-right, + --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) ); /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ border-right-width: 1px; /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ @@ -220,7 +230,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Toast--error, * .spectrum-Toast--negative */ background-color: var( - --spectrum-toast-error-background-color, + --spectrum-toast-negative-background-color, var(--spectrum-global-color-static-red-700) ); } @@ -233,7 +243,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Toast--negative, * .spectrum-Toast--negative .spectrum-Toast-closeButton.focus-ring:not(:active) */ color: var( - --spectrum-toast-error-background-color, + --spectrum-toast-negative-background-color, var(--spectrum-global-color-static-red-700) ); } diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index d851f48156..cb5da10527 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/tooltip": "^3.0.0-beta.2" + "@spectrum-css/tooltip": "^3.0.0-beta.3" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 2c25859b36..9ef043904b 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -45,6 +45,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tooltip-min-height, var(--spectrum-global-dimension-size-300) ); + max-width: var( + --spectrum-tooltip-max-width, + var(--spectrum-global-dimension-size-2000) + ); font-size: var( --spectrum-tooltip-text-size, var(--spectrum-global-dimension-font-size-75) @@ -83,7 +87,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--bottom.is-open */ transform: translateY( var( - --spectrum-dropdown-flyout-menu-offset-y, + --spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -92,7 +96,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--top.is-open */ transform: translateY( calc( - -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -100,7 +104,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--right.is-open */ transform: translateX( var( - --spectrum-dropdown-flyout-menu-offset-y, + --spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75) ) ); @@ -109,7 +113,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tooltip--left.is-open */ transform: translateX( calc( - -1 * var(--spectrum-dropdown-flyout-menu-offset-y, var(--spectrum-global-dimension-size-75)) + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) ) ); } @@ -245,11 +249,11 @@ p { var(--spectrum-global-dimension-size-175) ); align-self: flex-start; + flex-shrink: 0; margin-top: 1px; } #label { /* .spectrum-Tooltip-label */ - max-width: var(--spectrum-tooltip-content-max-width); line-height: var( --spectrum-tooltip-text-line-height, var(--spectrum-global-dimension-font-size-200) diff --git a/packages/underlay/package.json b/packages/underlay/package.json index 4ab4569fb2..9110441400 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -48,7 +48,7 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/underlay": "^2.0.7" + "@spectrum-css/underlay": "^2.0.8-beta.0" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index 96fe9b11d4..524c8ae88b 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -29,27 +29,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ overflow: hidden; transition: opacity var( - --spectrum-dialog-background-exit-animation-duration, + --spectrum-dialog-confirm-background-exit-animation-duration, var(--spectrum-global-animation-duration-300) ) cubic-bezier(0.5, 0, 1, 1) var( - --spectrum-dialog-background-exit-animation-delay, + --spectrum-dialog-confirm-background-exit-animation-delay, var(--spectrum-global-animation-duration-200) ), visibility 0ms linear calc( var( - --spectrum-dialog-background-exit-animation-delay, + --spectrum-dialog-confirm-background-exit-animation-delay, var(--spectrum-global-animation-duration-200) ) + var( - --spectrum-dialog-background-exit-animation-duration, + --spectrum-dialog-confirm-background-exit-animation-duration, var(--spectrum-global-animation-duration-300) ) ); /* .spectrum-Underlay */ background: var( - --spectrum-dialog-underlay-background-color, + --spectrum-dialog-confirm-overlay-background-color, var(--spectrum-alias-background-color-modal-overlay) ); } @@ -61,7 +61,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ pointer-events: auto; /* .spectrum-Underlay.is-open */ transition: opacity var( - --spectrum-dialog-background-entry-animation-duration, + --spectrum-dialog-confirm-background-entry-animation-duration, var(--spectrum-global-animation-duration-600) ) cubic-bezier(0, 0, 0.4, 1) 0ms; diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js index 6c51dde4a1..fffae24790 100644 --- a/scripts/process-spectrum-postcss-plugin.js +++ b/scripts/process-spectrum-postcss-plugin.js @@ -408,6 +408,7 @@ class SpectrumProcessor { const startsWithHost = re`^${this.component.hostSelector}`; const startsWithModifier = re`^.is-`; const hasHost = re`${this.component.hostSelector}(?![a-zA-Z\-])`; + const getAllHosts = re`/${this.component.hostSelector}(?![a-zA-Z\-])/g`; const startsWithDir = new RegExp(/\[dir\=/); const selectorTransform = this.selectorTransform; let skipAll = false; @@ -470,6 +471,31 @@ class SpectrumProcessor { } if (skip) continue; } + // Heal the use of multiple instance of a selector in a row: + // .selector.selector => .selector + const firstPart = selector.split(' ')[0]; + let match = getAllHosts.exec(firstPart); + if (match) { + let indices = []; + while (match) { + indices.push(match.index); + match = getAllHosts.exec(firstPart); + } + if (indices.length) { + let i = indices.length; + while (i) { + i -= 1; + if (indices[i] > 0) { + selector = + selector.slice(0, indices[i]) + + selector.slice( + indices[i] + + this.component.hostSelector.length + ); + } + } + } + } this.component.complexSelectors.map((complexSelector) => { selector = selector.replace( complexSelector.selector, diff --git a/web-test-runner.config.js b/web-test-runner.config.js index 96b30d2e4e..952a331373 100644 --- a/web-test-runner.config.js +++ b/web-test-runner.config.js @@ -19,7 +19,7 @@ module.exports = { threshold: { statements: 98, branches: 94, - functions: 95, + functions: 94, lines: 98, }, }, diff --git a/yarn.lock b/yarn.lock index c765613f9f..680f17cf29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3248,67 +3248,57 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5" integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ== -"@spectrum-css/accordion@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.0-beta.2.tgz#54b987d0532dcc6b1888431b956c2790ce650227" - integrity sha512-nRcsZHnjfrNsB7lPKS3mAS3ZeF8fdjWUBGQXM79rnll65HY5yDl+pFBxYXhZ3h/zxq4pLssFS+GtJN0jynvf+w== - -"@spectrum-css/actionbar@^3.0.0-beta.3": +"@spectrum-css/accordion@^3.0.0-beta.3": version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-3.0.0-beta.3.tgz#6438b1097a56b53fdaa71e2623053b1eac8549f2" - integrity sha512-I8temHdEfT1pRgk2I3hx5Db83E/WEx+qfQgAqdwvjP9OpWfgz2SU8/rIcmuFBv19hQyQF1ot+Q4l4EjftE824A== + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.0-beta.3.tgz#b2d7d0e9de2cf09510f480182b4f6bbe36cfaf4a" + integrity sha512-x4L1eASnNl1R+PiWw4X+L8yOGi55Hj+S99nReDm02p0ju9SQ02KWo1LuKVdiKeGCyLsw89v41UsngrYdZxojxQ== -"@spectrum-css/actiongroup@^1.0.0-beta.2": - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.0-beta.2.tgz#57676f84ea9999b700cdc4b3ffc956fd85f8bc05" - integrity sha512-lD/jFcSZT3ksIj70CfOOp7+XS3yW/4CiuVT+mpVodyYXFdmFrOp/1sfdR2+hfmq2vsUtSKF2ybuWtwcttK1wWQ== +"@spectrum-css/actionbar@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-3.0.0-beta.4.tgz#d30249ff5387180a86cd67da2fbcc4e7a2f48ae6" + integrity sha512-YvsvHh6LUii7AeY8FOZIm3+Kknoadhzx6aLlc0gdwH3xYEUd+YWbPOGkzCA3JGbxRvWj9LpG0YoiqI3SZRj9Zw== -"@spectrum-css/asset@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-3.0.0-beta.2.tgz#9cf43a1fcf02312da9e45a2849a38d83fe05b262" - integrity sha512-Vr5MlLUozF93BxIcxpj7Z6ob1B6MrOn/kZzsV0XPPq1DAI4F06glKLtGP1INrD2JndW2YWvuooaa6iWw8Bd0IQ== +"@spectrum-css/actiongroup@^1.0.0-beta.3": + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.0-beta.3.tgz#4d341a255f7d34c38165f7dc39d66a7b029a0364" + integrity sha512-wZ5Mlw8F4JElnBOP/kNjnoQew0EyOHgEi3pB8cJmilEMygF6v8nSF1faWFnteEuUQBrDCRuBG8RooAqD2sEpPQ== -"@spectrum-css/avatar@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.0-beta.2.tgz#38cc761eba57a0176b25610feb6a22d14f729e9f" - integrity sha512-r7GwVGwVtGOUDXQRg1GuQhu6vHN7OpvudRpEbFsdh79rBRtbyWCtwWi0rhNV8Z1s5BiMcKVvy7OExJzWFbT6UQ== +"@spectrum-css/asset@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-3.0.0-beta.3.tgz#5011da0cadbee3381c0fe4d3fe908511f12cba1f" + integrity sha512-qe0TjzlP5/tDQB/nwbKkWhBMRYJKdEylmQzD/maYjw6ZLdQf0bJA7if8lxgBY4NdNiWAYCVgZtuBwAa2L54GrA== + +"@spectrum-css/avatar@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.0-beta.3.tgz#25e3879a50eca3372fef977bbcdd7583d4f70728" + integrity sha512-bTlHtkdN3XzhAmHVmJetNdu9/4a9w/C5mNp108GY5USBie9TlmYYaWfspmOmmcx+7XRPO3+FfCzL59ajq2QCfw== "@spectrum-css/banner@^3.0.0-beta.2": version "3.0.0-beta.2" resolved "https://registry.yarnpkg.com/@spectrum-css/banner/-/banner-3.0.0-beta.2.tgz#df448a3dcb8ac63448bd628843a2895cec305780" integrity sha512-NqrT03ItWzj+L0dtqjedhop6wKOspBmaowzp9IOY/2kL561kRqYTLKR9vTteZ3cEDVD3ajKA8y+bKIW0eN+X7A== -"@spectrum-css/barloader@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/barloader/-/barloader-3.0.0-beta.2.tgz#69d3b028f1c29cf65f5c95db7ac7e7ef43ffc347" - integrity sha512-q+XWjIlSce81TCDxlhxwGgvixtvPzNBV8UrJojNDrtWHosMFGTpY0cGBOwzZjEli1X8WnF4KZFgJE6+C0QL2mg== - -"@spectrum-css/button@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.3.tgz#52ceb42f76fef170f7cd3010df56c1247a80e6b2" - integrity sha512-C9g1ZJrq0fGs9Vu5z/Ft+Cr/plnSWtsk8rK394yAyOrQQym0zajiTvIMJLDlu764ah6k/4PkyPXmN+28/8vJSw== +"@spectrum-css/button@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.4.tgz#31000c0158d6a399654df94be4d792ff07dddf7b" + integrity sha512-Yr/PZxhqOLe94cZkv9UowjrVVcIEWXAYUwnAZMQvYbFrYK8hRlM5vOF8WV7IRF8k2UspXTZAPd28PBn5tv0ltg== -"@spectrum-css/buttongroup@^3.0.0-beta.3": +"@spectrum-css/buttongroup@^3.0.0-beta.4": version "3.0.0-beta.4" resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.0-beta.4.tgz#f777d92a37ce6499b8ecffbe276971d6370ecd97" integrity sha512-Vg/gWcf+czb5A6RWI3yV24xDNDiqyPk1AVPxQzQ9QulAtZfMUS+P/FVZGgCjMT9fDlCHeFLmdcXB5AUt/UXI7g== -"@spectrum-css/card@^3.0.0-beta.2": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.0-beta.3.tgz#3b48763854c0284528b0e38f9fd96b21b8334f3a" - integrity sha512-deOx4ldZJyNlKAAjwRXQ1LsmrAQJrBaKIEaso0J7PQQ0fLM4qmo+LW2Vli1lPY4fedY2F4LBb9nf0WQ6uE4Mdg== - -"@spectrum-css/checkbox@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.3.tgz#7789ba8be60b1edb3db99e8e5c94e7122366ab9c" - integrity sha512-z+BZzGr2/l4g3uZ/Yn/u7gSfKXSLi3MMTKOfSxDBIGbL+3GBVXCMw5iBSrouepAomWCH82nRYl1mqSKWod6pLQ== +"@spectrum-css/card@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.0-beta.4.tgz#bce111fefc21bb3433aec407aa1898492e391d4c" + integrity sha512-xAqRO372xiAFz5N9KR35yTNKv6z3PZFdvZawRkOtipueuJbyVVFyWlAXNzNQLLx+zIhD0Eg1r2lr9igFP5EyGQ== -"@spectrum-css/circleloader@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/circleloader/-/circleloader-3.0.0-beta.2.tgz#bd037b15651db9945eb89727b989ae4f3b60c26b" - integrity sha512-iifUWDJkp4TpcPgJBpYsM1Z6pONNKDXGb2osBc8cZtQ0i87QX0EssFp9AkdyTObQvQh7wCUrOYLIg7FZTAGLaw== +"@spectrum-css/checkbox@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.4.tgz#e28b2fbe303e4e2e5635ad0a8782e47d100f331f" + integrity sha512-dZEHhspcGa8bwz6b0iM4UbUW/WgKrOksqiC2E3IH6UkH23MmdwyTSLyPN6WQAnkAfdP/tIDzCGptYsKrInGikg== -"@spectrum-css/coachmark@^3.0.0-beta.3": +"@spectrum-css/coachmark@^3.0.0-beta.4": version "3.0.0-beta.4" resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-3.0.0-beta.4.tgz#4b2009e0b2600d84ec6d9139e48b194a54ddaed6" integrity sha512-cNyLJgkE2N2v/OF+8/m0J0oAqWhjDW0WwndE9tN0Hqtk3e3qE15RA7qfR7KwfUuPnx7Kiw15z73a+O9M0Lwiyg== @@ -3318,138 +3308,158 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-2.1.0.tgz#d50726a31631e10fad0d697ac7c0a918b005ec6f" integrity sha512-43bFaOOdV312vIo6K/5PI/gAnLoBKWQDRh3M04A2GIBSdSW7ItpqxXgwvlLsMy6cYkQGjcpb/usOBEr83lMIfA== -"@spectrum-css/dialog@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.0-beta.3.tgz#c0d1cd212e7c3fbf8fe742ab1abfc8acf572f55e" - integrity sha512-76NMrLqhufI3Y1gv0elCGBZcLryP9ePEGX0mwIgP33sgbypfowkgutBi6agrNb/d7bJT11OIogDLIeDNkOhGMA== +"@spectrum-css/dialog@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.0-beta.4.tgz#a6bc74656c91955f2645d39e9b738789dc580884" + integrity sha512-K7ZR6aQ/5qljuTE2quczbfsz0/WVTUvVZVObmbaTmY16IACbZ1BAk9xZaJxrrRfUaOGFZwV5/P4wV0NV200YGA== -"@spectrum-css/dropdown@^3.0.0-beta.3": +"@spectrum-css/divider@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.0-beta.1.tgz#c2b26624d82cb21c241379239e676e616c9f5a68" + integrity sha512-38a6X+LSqb33AT2fJd5UEUTYl0U+yEzu7Jq9bN2pgwigboY65SduzSG0u7w59nHIv96o4gn1vwmNx0FOihmbag== + dependencies: + "@spectrum-css/vars" "^2.3.0" + +"@spectrum-css/dropzone@^3.0.0-beta.3": version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/dropdown/-/dropdown-3.0.0-beta.3.tgz#2195714d6aeaafcc43b3ff2984481116de84f537" - integrity sha512-KYpcLl/cnxK208hY9tpqoISk3A2piUlqggSu3kS7qNGbIZQgizpT0YxYvN8F2BqnlAI1NL2KYZ8loMiI7sfQgA== + resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.0-beta.3.tgz#dc9f3c1654096c571fdbd1baec7a00678c8c10fd" + integrity sha512-pNhE7dDkz0DP5J6Ybf4Ztg+4nENAnf4yn5pVgaNpaRNVBps9wnYjJ01epcmh6OQUADwMjOH10lZpc/bkLHY+Yg== -"@spectrum-css/dropzone@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.0-beta.2.tgz#cf8000fdb1b620f698b92aea0556c73044cddcfb" - integrity sha512-mVw9iv9WFx6HOfE0lY3UtZdQiobgHtLnV5JElp+WFi3GM65iNmxfzmdTgaOqFYllpqzjAacnTN5EVXyDjzENlw== +"@spectrum-css/icon@3.0.0-beta.0", "@spectrum-css/icon@^3.0.0-beta.0": + version "3.0.0-beta.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.0.tgz#fa14efab1d451445cfddf5d03608cc570d435edb" + integrity sha512-Lb+0fkDeVum0lzaq8eSoA4iE8ccTDnU/GO9MMt2fFkAeo7JCH8hJV4MGv/tndNbVCB94oECiL1FpH7304AZTJg== -"@spectrum-css/icon@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-2.1.1.tgz#53b371b293833e501898472dda8661a07db09fd8" - integrity sha512-Ddnjw3YTZiuJC8uVJ9x6i+ufQN+Vp4vibc+YxE7nXn8tWzT8zTRzwv6oHwSG9m+KzonTfnwqPuQx6ZA8vbK9xA== +"@spectrum-css/illustratedmessage@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.0-beta.3.tgz#b9d9efe58877324f5059f1e38f2a98756e2dd637" + integrity sha512-XBECOTRCkdud1r92d268kZvWWkZDpF4fMk7UIl7yJVEeWIKL6RQdHmlw4WSINN4evdjlCQxJL8Zo8lZDppaGEw== -"@spectrum-css/illustratedmessage@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.0-beta.2.tgz#f27ca6fb80f250b3a86775436376ee51f5d348a2" - integrity sha512-LHHhD2Ydj7lg+Dn3F+5SnXJICSE2MQN5RVKIV7ry4KYDJkSIHfMeu97J6DqBTZivyMMl+CLKHhRNxMyJjxGhOQ== +"@spectrum-css/link@^3.0.1-beta.0": + version "3.0.1-beta.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.0.1-beta.0.tgz#229856f0c13678499fbddef9e75f02dfc925ef4a" + integrity sha512-iN87af1aQWj5uJMXrG774YrDc1PfTbp9EU7d9r1SR95LGv+NQx+S2oQNBv1ivQO7kI4pbLNFbXy49UUvdcIKiA== -"@spectrum-css/link@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.0.0.tgz#544821b3eafec7e89b86254bb42e3d01024095e4" - integrity sha512-TPWFopMTGWxxO4+Ush9L0dowI+tWRyxdWG8Gqy7/Q9c3emdJ7SA3hCQV9MRBoRRQHlx9lKFPfjZJ+/ErbTW++A== +"@spectrum-css/menu@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.3.tgz#3b77d0a03fd9d75072f98426f6e09303c4f80f51" + integrity sha512-nwSbzRNRfEE0JqpnrHZlrGAlslqlL8s1sv7l3L+E9g73b4ajrwGVin/Ni3oUQRh/Wdd3ISmoeaH6U85vwoG4Eg== -"@spectrum-css/menu@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.2.tgz#5f412c9233a53050f52f5410f36bc26a9013f9c1" - integrity sha512-ngUWriDHuqa3r3djBgdV9NjZkzabg8Phw9deq6tdhJkGJHKp6nd8K3nZhLAxCpdcTJBLJBmqatIXgD5xXovDCw== +"@spectrum-css/modal@^3.0.0-beta.1": + version "3.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.0-beta.1.tgz#e4a8c4a40b4eafec47239ff6e6127feab88615da" + integrity sha512-hJQBOJBOfPUy2xmaOM3E9CLaGNWm6wuBLZbHUsZ8lDDotB/k2NMzy/LeG7EgiLivGphb1AAhHzPYEBjtLU/z9A== -"@spectrum-css/popover@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.3.tgz#09a1662935b88a57012db5782a7198c2b0d9b531" - integrity sha512-0qoQFbVcGeaqdaKx8KQS5y+7nLZiqR8vIvSkhb86iNBQ8DXEKPEqK7a0Z3iyi63Xtlx04j5y+Z4F3DWd+EEKHQ== +"@spectrum-css/picker@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.1.tgz#7131229934409902b1fb007cb1963d24ec6911b8" + integrity sha512-WyMrdVcn+V+nvXnYOn+alDF+A1+I8dYkvMgeYgXhUqsGiKKvm3XSlvEnr7d+2sN4Jzg9hntZ2myw78mmgQpAhg== -"@spectrum-css/quickaction@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/quickaction/-/quickaction-3.0.0-beta.3.tgz#cd85a2bc0b7dd272382423dbeff7a7ef4afc5352" - integrity sha512-tTTX5ne+zEjicL0/d6tXtzYf1b/TDrBE6rr3az3e4g3Y3yprORUT2CyTi/P0MsJMO5AhWCU3kxlFQ1MzGpVVFw== +"@spectrum-css/popover@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.4.tgz#fbc9cd048bbdc0ef458086127ec65e3e3fd95e42" + integrity sha512-3mZiJVQNvZTd0CYecqx+s59g980VSUVXLWyqNIc6RxNskVfK1yhcONYJVMeqt8TXUQD2DgNnSznqd8A7GAFgPQ== -"@spectrum-css/radio@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.0-beta.2.tgz#35e39b49d7f7ed4766e76dc6e43e8a021257b6d9" - integrity sha512-4aehv3R5lQVxjfMV5nz3eWdzTzPdwBs90QOYSwAYADoQnR3slJx+YPW9EvoEsNzcZ4bootv7tBT0xxFc+vznIA== +"@spectrum-css/progressbar@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.0-beta.1.tgz#db60f7fe626159e0985e3c41466572367912e780" + integrity sha512-JDxwPwLwTN/dczOtOOiEy/MGtiHGmGbpTl/Pso7BFG7wyyLqkVk+83KvC88v+AV7ObndOgPDjzBNhhUNOFc36w== -"@spectrum-css/rule@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/rule/-/rule-3.0.0-beta.3.tgz#c4999c4b2fc5a39485782dd2b461d9eb7c3ce3fd" - integrity sha512-8PRdIsz+V+BFhrug/iGDUwMkvrnwqvsPy71QqxIQZ2P14y9Mw8thI1nuyjPYveFqX859gh0n8JWPGIC9XF+xXw== - dependencies: - "@spectrum-css/vars" "^2.3.0" +"@spectrum-css/progresscircle@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.0-beta.1.tgz#7091c3807649e92c9a99612e2714ff54683492fe" + integrity sha512-CwoZcDMyTlA0sXXvne13iQU9iNEgfM09MeHRnqlniluhGqnp3ycPFKnXWw/noLqHehyzYbyvXadwm1FCdJb5hA== -"@spectrum-css/search@^3.0.0-beta.4": +"@spectrum-css/quickaction@^3.0.0-beta.4": version "3.0.0-beta.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.0-beta.4.tgz#4e39f4966c346778c452fe03fe9597e2bcb310b1" - integrity sha512-s1jJ675+3H64+flXTcVacvdMaavTXEZ0qBRBCbKVk/1iH8iCoMMWjJjQlr5tWZZsilpnzU2QUaB8D3MSa5HU7g== + resolved "https://registry.yarnpkg.com/@spectrum-css/quickaction/-/quickaction-3.0.0-beta.4.tgz#03ba47f66c74e181a2a39f1197da32f479b4b414" + integrity sha512-FcPZmvFS7bF48ODGr/PeYVDvBMWFPUNVDdGcLN0+T9wp21/Zh8CEvRPGS5kz6k5ZH7tY4EtuqHikbXKO5iX9sg== -"@spectrum-css/sidenav@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.0-beta.2.tgz#b2431fdaaf8ef06d2c4bfbd3c85fb2ebe6eb7816" - integrity sha512-0/g/3lROiRnF4fSMBOQyG9V18x8yr49uWFpMeLGTY3pw8dv2LlfQNULAJs3HxXG/egxHmwjVcIlwLbQAziBP1Q== +"@spectrum-css/radio@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.0-beta.3.tgz#3926a52ec725981061d7e23d18a03f5529f5076c" + integrity sha512-Rs1Xcp1bKcRaO5MrflAUsxeaYA4fKjaEvXqGhEOFeCrLXtU0A5YUyVOXpCNFzi7AL65mIcAAbhEChbGC8oHQNw== -"@spectrum-css/slider@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.0-beta.2.tgz#dc4be304b3541b9647fc70a48ba81b6a693dba95" - integrity sha512-TZ6qcCsV+VhCF3JvBiM2BXRzoUTlqIS3yOMNkF665pwtVASPRmCXA1WtmJzrEZZT+Lad3MIGncZ5F85fa4/FgQ== +"@spectrum-css/search@^3.0.0-beta.5": + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.0-beta.5.tgz#ccad410b64b021a38a954e4fc7ee637dbd219300" + integrity sha512-gNN8h22gVg3gB538a6tMo9EiDe8RZXL/m3DadpbmzlVR/+DvKMChtMAZTImWyQ5wBdDvlFN2A456AB7xT1L6UQ== -"@spectrum-css/splitbutton@^3.0.0-beta.3": +"@spectrum-css/sidenav@^3.0.0-beta.3": version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-3.0.0-beta.3.tgz#22fc6ea20cd5848c67a3a470952a2351915ad77c" - integrity sha512-W+7mV1G6xeoGI6N6rd4C7BgyaSiVZsR66XUGICgR9SWA52yoNyjkX99ouQf/uHMy0O6oM++Nl1XzZSzoEm3mGw== + resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.0-beta.3.tgz#88fc9dfc0d02517f00fcf7ab891f51a679aba9c5" + integrity sha512-YL78vrMg9wSiVjzgFF27Vrxo9XulQmHonoHddhDOmzGqq/ordo/La5bHdMhTe8i4V8ZcfpjJkWl+furRc+EvbQ== -"@spectrum-css/statuslight@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.0-beta.2.tgz#3e71e38621e46502fcff8cc64001d916f0eb5d9c" - integrity sha512-5v5tnBy4Ypdm52JwmESsGPWP3aqniWaD6WqHGVik3k4es4yjkVNraQxvkj3ExzT/K3shYrM8mFPf2sEeiZ83cg== +"@spectrum-css/slider@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.0-beta.3.tgz#96981a21217fe4ad94025024589219f715d86009" + integrity sha512-yU1WMIITkmIRCoztKlkaDEUCk6wlI3fOmmK0DPcfQNDxZ7eBqo7AKi/yOfyUMzYO8ao9eUcTRUSjgswDPMPn2A== -"@spectrum-css/table@^3.0.0-beta.3": +"@spectrum-css/splitbutton@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-3.0.0-beta.4.tgz#125c839437bef6d2fcd6bcf56919734a3dd67675" + integrity sha512-BX1kXf1gmxqJvpIMoqChUik91iaFqgFb7g+uv+k/XlGTT8Bxa0layxuITwHoz3oliJBLZhSGt7nBhZlF/QHFwQ== + +"@spectrum-css/statuslight@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.0-beta.3.tgz#cd6951bf44203dfd76d00eb8aa443a5de02d9773" + integrity sha512-JTkVUpGIVS6ddOeyiHDSzL45fw5zjx0fbVA7Kw3QzsGGxixIPgurDOz/Q3loLaxfQ4S3+oF3z/rGWs2bbsUWbg== + +"@spectrum-css/table@^3.0.0-beta.4": version "3.0.0-beta.4" resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.0-beta.4.tgz#43078dc62b80aa2d99902a54922f6e98df2c8f86" integrity sha512-moDjwBN63CL+P/Q+OKhrID+ceY8G51EosQ1SMJQgC2a5ueAz8GIH6f/QpKqbNFX+FUa6PUUkpvPQamvEmuC/ug== -"@spectrum-css/tabs@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.0-beta.3.tgz#d9dc83cf0c1e310dc39170c1de8dd45cbf36877f" - integrity sha512-ulLWE56VL+x2fmb0LfCYPknMCSvmreQMYYECjnvOMncxsJjPaLZ1a9v0mb5K+XTVXumHMkIEHDGHciY5fJiF3w== +"@spectrum-css/tabs@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.0-beta.4.tgz#99c37cb1664d6dc3bf8c0698cf8695f9e605a111" + integrity sha512-nOm8/sNNLbxAweS1/EJlPvjTFbreyJV3Dr996F9uj7xB8A4k/IHNCsghdnIsevlU7X98xEMtqkAv87IoCYbrWg== -"@spectrum-css/tags@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.0-beta.3.tgz#ba1ea7edcbf3f194d167c2f60a6d1a8062b4001f" - integrity sha512-MpwbMw4fsYkTEHg4gUVROXfSzhEYfy0hOg8OHXUwUNwlCU/kaEP/iGlC9HnpaeAfismi8xCoyPu2ZjslH4qHiA== +"@spectrum-css/tags@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.0-beta.4.tgz#2b002b4984ccf65d3097267560c3a5cbd842822f" + integrity sha512-kaA51fJD6Rd+QSlrPyJ8jBHVA24CJ6RnUv1gj3COleKQzvU3hAE2/iUix0iFSJuYd/v3mAePJil4R/zzYtmF+Q== -"@spectrum-css/textfield@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.3.tgz#251763260fedd38e256c8a225809b0ecdc70f68f" - integrity sha512-ihTZKLfnUxBnlSGRH4xdSMwd23EkpunC69uUvVB2LGGw1QAcmUcBNdS9xz7PPSWFw4qkCRXzVVX9tLC/2fQFbQ== +"@spectrum-css/textfield@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.4.tgz#ba56dd01c35ffb1af7f2873f9045069c10fa29ef" + integrity sha512-ryDPt2dlvLiglEQCiz/gMeCR80PsxMonNBXh4auGQLBFKP1BYSyILV3zfYjE2mzJUaxF/5eog2w8iKyLIZRaeQ== -"@spectrum-css/toast@^3.0.0-beta.3": - version "3.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.0-beta.3.tgz#98eb1320062e299cf5a96fe1c59357073fbee6f4" - integrity sha512-W0akUneCrda9Gad12ehOUeOQEYD4ND/S3JAEFKaQyO/4TKK2+70tEBN50w+2cvvvSry6JgSWgRTiU4a/EGbMZg== +"@spectrum-css/toast@^3.0.0-beta.4": + version "3.0.0-beta.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.0-beta.4.tgz#9ef391bf6a97f5ceeaa36cffdf3f4c733f51ceea" + integrity sha512-xrvm2xpJojglX0LvF/wHuH5vWRRmoNGy8a3wy7Lw0jcffVN+hgIGZ059QQWsy8fF/PJ9q+tzCoFLQypXqXH7OA== "@spectrum-css/toggle@^3.0.0-beta.2": version "3.0.0-beta.2" resolved "https://registry.yarnpkg.com/@spectrum-css/toggle/-/toggle-3.0.0-beta.2.tgz#5174d620ba9eb42198a6c1040814b53fdc89caff" integrity sha512-OzgUISU9INlouMa7nuxggB89YFBcoJvnz3HGJnim4R2F0l+iZVVdNfPKw1ypbcLYlAUgfV825uzkbdZOjf9jhw== -"@spectrum-css/tooltip@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.0-beta.2.tgz#b30538c05eb8edc080e4ab53538ef59bb6a60bc7" - integrity sha512-Kpl5rR13M/qlm82W0T6jJ0B9zE1v15onGmoDpntUMqixeNwCJYplVVnxG1qAOQWNoG3rokFD/uP2HfEVOXFWuA== +"@spectrum-css/tooltip@^3.0.0-beta.3": + version "3.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.0-beta.3.tgz#43f22c35940e6fda753a00de75315f130b996626" + integrity sha512-Vm6QBLSXw/8qESP4/iyFnjVy015VLIifEPdJ+rxjzPgNwjY+2wYyPOXPIAEIcgJieonquDYuOydd2PqAAYXX7g== -"@spectrum-css/typography@^2.1.3": - version "2.1.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-2.1.3.tgz#4d7bcf2f75e8d785bdbae098ef0121b73894f3c5" - integrity sha512-73lu0Le1zt+etNTS+kJsn+0TJzpy8aiTT6TCkVuJyUY9yxLcKXdV7mYRaz4U7jEYn39MKpndGFXkA7Qq0u16dw== +"@spectrum-css/typography@^2.1.4-beta.0": + version "2.1.4-beta.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-2.1.4-beta.0.tgz#5453ccd0702712380d488f07d8214b0d6a007b6c" + integrity sha512-3VnoMFyBySu1NjVR1nn23JGb4Mcck/xRe9heSiES/uOXQFgveETi/6Nxi6sFtSH+WZLaxjf22UEgCzdbIhCXgQ== -"@spectrum-css/underlay@^2.0.7": - version "2.0.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.7.tgz#41754825968ecfc2e7cd42117484113e24be8a35" - integrity sha512-KF3Yre/y89enQpoaFEwuPCx8tHTYeQJBjpxqAgamo+XS2ENz4Cbxxy+xJJX9AUiGwNe3LNKN5iSTnZ655DBmEA== +"@spectrum-css/underlay@^2.0.8-beta.0": + version "2.0.8-beta.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.8-beta.0.tgz#50603bef28e7a77a10fa2a8377721b9b760a7e86" + integrity sha512-SxGECJAFowg1BVSuVn0mA/V1YZfe4Hi5dk08maXkLjTbOK00idTdKL/tMiHOMA95AN3Y5lPhmfpkGxd98ZXKNw== "@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== +"@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== + "@stylelint/postcss-css-in-js@^0.37.1": version "0.37.1" resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.1.tgz#41e5e7660f73d88227610e18c6ebb262d56ac125" @@ -4472,7 +4482,7 @@ open "^7.1.0" portfinder "^1.0.27" -"@web/dev-server-core@^0.2.11", "@web/dev-server-core@^0.2.5": +"@web/dev-server-core@^0.2.11": version "0.2.11" resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.2.11.tgz#d7c5b43557ff29cf857e389a2cd2d78c426a98b2" integrity sha512-67lt5WRJBSOrKqR9pALC+818B3fhhV3vtSl+A36inp4/U9stUZrDK62aVTTEd2Y8Im2OsVyc0k9MgUY2AvEvKQ== @@ -4532,6 +4542,27 @@ parse5 "^6.0.0" picomatch "^2.2.2" +"@web/dev-server-core@^0.2.5": + version "0.2.10" + resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.2.10.tgz#af769b0a3a3c81164193f3a936e17fc02947b4e4" + integrity sha512-W78G7+oNp2Z8ECsdsiTAWCzS9qm5Hhl2fdf9xGOGG4zJAVT8XHqvQG0FCDqvRlQhcuA5RoQbTgCROlsA1TllwA== + dependencies: + "@types/ws" "^7.2.6" + chokidar "^3.4.0" + clone "^2.1.2" + es-module-lexer "^0.3.24" + get-stream "^6.0.0" + is-stream "^2.0.0" + isbinaryfile "^4.0.6" + koa "^2.13.0" + koa-etag "^3.0.0" + koa-static "^5.0.0" + lru-cache "^5.1.1" + mime-types "^2.1.27" + parse5 "^6.0.0" + picomatch "^2.2.2" + ws "^7.3.1" + "@web/dev-server-core@^0.2.6": version "0.2.9" resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.2.9.tgz#bf142fa3c09c52a31a9d9e5991128724887de3c2" @@ -15178,9 +15209,9 @@ mdast-util-to-string@^1.0.0: integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== mdn-browser-compat-data@^1.0.29: - version "1.1.0" - resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-1.1.0.tgz#a3e2c7fa7151eaf10eb78dbbf7aef048aa020e70" - integrity sha512-UnOo+rQMzTeH1tI0TJjKczhtG70wk4S9MADTTyjbnFrOke0pyAGlA8QZ7dIPHr7UgrgQd+xAehbGgtiJsbCidQ== + version "1.0.40" + resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-1.0.40.tgz#6e8f6e1dd2d8cf880ebea94cf66cfe000a16603b" + integrity sha512-yjM/OG0krZIgi+XrhJWS3CJ9UQuGM4FfjIUIt2f65er6qczkM+WjtNEv/9ZF9DxDs/2GR3SO6hDaZLplTRrrfw== dependencies: extend "3.0.2"