From 532304f3f5c12ed1daef0c8f227b8e82b1a7173e Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 19 Nov 2020 17:45:09 -0500 Subject: [PATCH] fix: stop merging selectors in a way that alters the cascade --- .../accordion/src/spectrum-accordion-item.css | 67 ++- .../src/spectrum-action-group.css | 76 ++- packages/actionbar/src/spectrum-actionbar.css | 14 +- packages/banner/src/spectrum-banner.css | 11 +- .../bar-loader/src/spectrum-bar-loader.css | 36 +- .../button/src/spectrum-action-button.css | 80 ++-- packages/button/src/spectrum-clear-button.css | 53 ++- packages/button/src/spectrum-fieldbutton.css | 61 +-- .../button/stories/action-button.stories.ts | 9 + packages/card/src/spectrum-card.css | 171 ++++--- packages/checkbox/src/checkbox.css | 27 -- packages/checkbox/src/spectrum-checkbox.css | 93 ++-- .../src/spectrum-circle-loader.css | 22 +- packages/coachmark/src/spectrum-coachmark.css | 77 ++-- packages/dialog/src/spectrum-dialog.css | 92 ++-- packages/dropdown/src/spectrum-dropdown.css | 20 +- packages/dropzone/src/spectrum-dropzone.css | 38 +- .../src/spectrum-illustratedmessage.css | 11 +- packages/link/src/spectrum-link.css | 28 +- packages/menu/src/spectrum-menu-divider.css | 13 +- packages/menu/src/spectrum-menu-item.css | 52 ++- .../menu/src/spectrum-menu-sectionHeading.css | 5 +- packages/menu/src/spectrum-menu.css | 10 +- packages/meter/src/spectrum-meter.css | 36 +- packages/modal/src/spectrum-modal.css | 29 +- packages/popover/src/spectrum-popover.css | 109 +++-- .../src/spectrum-quick-actions.css | 56 ++- packages/radio/src/spectrum-radio.css | 55 ++- packages/rule/src/spectrum-rule.css | 33 +- .../sidenav/src/spectrum-sidenav-heading.css | 13 +- .../sidenav/src/spectrum-sidenav-item.css | 32 +- packages/slider/src/spectrum-slider.css | 269 +++++++---- .../src/spectrum-split-button.css | 436 +++++++++++++----- .../src/spectrum-status-light.css | 22 +- packages/switch/src/spectrum-switch.css | 53 ++- packages/tabs/src/spectrum-tab.css | 20 +- packages/tabs/src/spectrum-tabs.css | 83 ++-- packages/tags/src/spectrum-tag.css | 58 +-- packages/textfield/src/spectrum-textfield.css | 96 ++-- packages/toast/src/spectrum-toast.css | 123 +++-- packages/tooltip/src/spectrum-tooltip.css | 137 +++--- packages/underlay/src/spectrum-underlay.css | 29 +- scripts/process-spectrum-postcss-plugin.js | 13 +- test/visual/stories.js | 2 + 44 files changed, 1748 insertions(+), 1022 deletions(-) diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 8300f2ae64..7ecfce7e01 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -43,11 +43,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) / 2 ); transition: transform ease - var(--spectrum-global-animation-duration-100, 0.13s); /* .spectrum-Accordion-itemIndicator */ - color: var( - --spectrum-accordion-icon-color, - var(--spectrum-global-color-gray-600) - ); + var(--spectrum-global-animation-duration-100, 0.13s); } :host { /* .spectrum-Accordion-item */ @@ -59,11 +55,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin) ) - solid transparent; /* .spectrum-Accordion-item */ - border-color: var( - --spectrum-accordion-border-color, - var(--spectrum-global-color-gray-300) - ); + solid transparent; } :host(:first-of-type) { /* .spectrum-Accordion-item:first-of-type */ @@ -98,12 +90,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --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-x, - var(--spectrum-global-dimension-size-225) - ); /* [dir=ltr] .spectrum-Accordion-itemHeader */ - text-align: left; + ); } :host([dir='rtl']) #header { /* [dir=rtl] .spectrum-Accordion-itemHeader */ @@ -124,11 +111,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-accordion-item-border-left-size-key-focus, var(--spectrum-alias-border-size-thick) ) - ); /* [dir=rtl] .spectrum-Accordion-itemHeader */ + ); +} +:host([dir='ltr']) #header { + /* [dir=ltr] .spectrum-Accordion-itemHeader */ + padding-right: var( + --spectrum-accordion-item-padding-x, + var(--spectrum-global-dimension-size-225) + ); +} +:host([dir='rtl']) #header { + /* [dir=rtl] .spectrum-Accordion-itemHeader */ padding-left: var( --spectrum-accordion-item-padding-x, var(--spectrum-global-dimension-size-225) - ); /* [dir=rtl] .spectrum-Accordion-itemHeader */ + ); +} +:host([dir='ltr']) #header { + /* [dir=ltr] .spectrum-Accordion-itemHeader */ + text-align: left; +} +:host([dir='rtl']) #header { + /* [dir=rtl] .spectrum-Accordion-itemHeader */ text-align: right; } #header { @@ -169,11 +173,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ background-color: inherit; border: 0; font-family: inherit; - width: 100%; /* .spectrum-Accordion-itemHeader */ - color: var( - --spectrum-accordion-text-color, - var(--spectrum-global-color-gray-700) - ); + width: 100%; } #header:focus { /* .spectrum-Accordion-itemHeader:focus */ @@ -253,6 +253,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader */ cursor: default; } +:host { + /* .spectrum-Accordion-item */ + border-color: var( + --spectrum-accordion-border-color, + var(--spectrum-global-color-gray-300) + ); +} +#indicator { + /* .spectrum-Accordion-itemIndicator */ + color: var( + --spectrum-accordion-icon-color, + var(--spectrum-global-color-gray-600) + ); +} +#header { + /* .spectrum-Accordion-itemHeader */ + color: var( + --spectrum-accordion-text-color, + var(--spectrum-global-color-gray-700) + ); +} #header:hover { /* .spectrum-Accordion-itemHeader:hover */ color: var( diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index b1e3cec909..40f965bcc4 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -121,11 +121,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-actionbutton-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + ); +} +:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + border-top-right-radius: var( + --spectrum-actionbutton-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:first-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ border-bottom-left-radius: var( --spectrum-actionbutton-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + ); +} +:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + border-bottom-right-radius: var( + --spectrum-actionbutton-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:first-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ margin-right: calc( -1 * var( --spectrum-actionbutton-border-size, @@ -135,14 +155,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ - border-top-right-radius: var( - --spectrum-actionbutton-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ - border-bottom-right-radius: var( - --spectrum-actionbutton-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ margin-left: calc( -1 * var( --spectrum-actionbutton-border-size, @@ -155,35 +167,53 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-right-radius: var( --spectrum-actionbutton-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + ); +} +:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + border-top-left-radius: var( + --spectrum-actionbutton-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ border-bottom-right-radius: var( --spectrum-actionbutton-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + ); +} +:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + border-bottom-left-radius: var( + --spectrum-actionbutton-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-left: calc( -1 * var( --spectrum-actionbutton-border-size, var(--spectrum-alias-border-size-thin) ) / 2 - ); /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - margin-right: 0; + ); } :host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - border-top-left-radius: var( - --spectrum-actionbutton-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - border-bottom-left-radius: var( - --spectrum-actionbutton-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-right: calc( -1 * var( --spectrum-actionbutton-border-size, var(--spectrum-alias-border-size-thin) ) / 2 - ); /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + ); +} +:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + margin-right: 0; +} +:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ margin-left: 0; } :host([compact]:not([quiet])) ::slotted([selected]) { diff --git a/packages/actionbar/src/spectrum-actionbar.css b/packages/actionbar/src/spectrum-actionbar.css index 566985d618..089ed8609e 100644 --- a/packages/actionbar/src/spectrum-actionbar.css +++ b/packages/actionbar/src/spectrum-actionbar.css @@ -63,16 +63,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #popover { /* [dir=ltr] .spectrum-ActionBar-popover */ - padding-left: var( - --spectrum-global-dimension-size-200 - ); /* [dir=ltr] .spectrum-ActionBar-popover */ + padding-left: var(--spectrum-global-dimension-size-200); +} +:host([dir='rtl']) #popover { + /* [dir=rtl] .spectrum-ActionBar-popover */ + padding-right: var(--spectrum-global-dimension-size-200); +} +:host([dir='ltr']) #popover { + /* [dir=ltr] .spectrum-ActionBar-popover */ padding-right: calc(var(--spectrum-global-dimension-size-200) / 2); } :host([dir='rtl']) #popover { /* [dir=rtl] .spectrum-ActionBar-popover */ - padding-right: var( - --spectrum-global-dimension-size-200 - ); /* [dir=rtl] .spectrum-ActionBar-popover */ padding-left: calc(var(--spectrum-global-dimension-size-200) / 2); } #popover { diff --git a/packages/banner/src/spectrum-banner.css b/packages/banner/src/spectrum-banner.css index bc4ba12465..0e5ed49371 100644 --- a/packages/banner/src/spectrum-banner.css +++ b/packages/banner/src/spectrum-banner.css @@ -32,10 +32,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ line-height: var( --spectrum-banner-text-line-height, var(--spectrum-alias-heading-text-line-height) - ); /* .spectrum-Banner */ - color: var( - --spectrum-banner-text-color, - var(--spectrum-global-color-static-white) ); } #header { @@ -55,6 +51,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ position: absolute; top: -10px; } +:host { + /* .spectrum-Banner */ + color: var( + --spectrum-banner-text-color, + var(--spectrum-global-color-static-white) + ); +} :host([type='info']) { /* .spectrum-Banner--info */ background-color: var( diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css index 11d9d5ea94..1570d016f5 100644 --- a/packages/bar-loader/src/spectrum-bar-loader.css +++ b/packages/bar-loader/src/spectrum-bar-loader.css @@ -66,11 +66,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ProgressBar-track */ overflow: hidden; border-radius: var(--spectrum-progressbar-large-border-radius); - z-index: 1; /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ - background-color: var( - --spectrum-progressbar-large-track-color, - var(--spectrum-alias-track-color-default) - ); + z-index: 1; } .fill, .track { @@ -84,11 +80,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .fill { /* .spectrum-ProgressBar-fill */ border: none; - transition: width 1s; /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-track-fill-color, - var(--spectrum-global-color-blue-500) - ); + transition: width 1s; } :host([dir='ltr']) .label, :host([dir='ltr']) .percentage { @@ -172,7 +164,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][side-label]) .percentage { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - text-align: right; /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: right; +} +:host([dir='rtl'][side-label]) .percentage { + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: left; +} +:host([dir='ltr'][side-label]) .percentage { + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-left: var( --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) @@ -180,7 +179,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][side-label]) .percentage { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - text-align: left; /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-right: var( --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) @@ -242,6 +240,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) infinite; } +.fill { + /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ + background: var( + --spectrum-progressbar-large-track-fill-color, + var(--spectrum-global-color-blue-500) + ); +} +.track { + /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ + background-color: var( + --spectrum-progressbar-large-track-color, + var(--spectrum-alias-track-color-default) + ); +} :host([over-background]) .fill { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ background: var( diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css index 62e4179e3b..96f6cf7850 100644 --- a/packages/button/src/spectrum-action-button.css +++ b/packages/button/src/spectrum-action-button.css @@ -47,18 +47,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ font-weight: var( --spectrum-actionbutton-text-font-weight, var(--spectrum-alias-body-text-font-weight) - ); /* .spectrum-ActionButton */ - background-color: var( - --spectrum-actionbutton-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-actionbutton-border-color, - var(--spectrum-alias-border-color) - ); - color: var( - --spectrum-actionbutton-text-color, - var(--spectrum-alias-text-color) ); } :host([dir='ltr']) .button slot[name='icon'] + #label { @@ -66,7 +54,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: var( --spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85) - ); /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + ); +} +:host([dir='rtl']) .button slot[name='icon'] + #label { + /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ + padding-right: var( + --spectrum-actionbutton-icon-padding-x, + var(--spectrum-global-dimension-size-85) + ); +} +:host([dir='ltr']) .button slot[name='icon'] + #label { + /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ padding-right: calc( var( --spectrum-actionbutton-text-padding-x, @@ -80,10 +78,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) .button slot[name='icon'] + #label { /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ - padding-right: var( - --spectrum-actionbutton-icon-padding-x, - var(--spectrum-global-dimension-size-85) - ); /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ padding-left: calc( var( --spectrum-actionbutton-text-padding-x, @@ -161,10 +155,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ bottom: var( --spectrum-actionbutton-hold-icon-padding-bottom, var(--spectrum-global-dimension-size-40) - ); /* .spectrum-ActionButton .spectrum-ActionButton-hold */ - color: var( - --spectrum-actionbutton-hold-icon-color, - var(--spectrum-alias-icon-color) ); } #label { @@ -172,16 +162,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Button-label */ align-self: center; justify-self: center; - text-align: center; /* .spectrum-ActionButton-label */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + text-align: center; } #label:empty { /* .spectrum-ActionButton-label:empty, * .spectrum-Button-label:empty */ display: none; } +#label { + /* .spectrum-ActionButton-label */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} :host([quiet]) .button { /* .spectrum-ActionButton--quiet */ border-width: var( @@ -199,17 +192,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ font-weight: var( --spectrum-actionbutton-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight) - ); /* .spectrum-ActionButton--quiet */ + ); +} +.button { + /* .spectrum-ActionButton */ background-color: var( - --spectrum-actionbutton-quiet-background-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-actionbutton-background-color, + var(--spectrum-global-color-gray-75) ); border-color: var( - --spectrum-actionbutton-quiet-border-color, - var(--spectrum-alias-border-color-transparent) + --spectrum-actionbutton-border-color, + var(--spectrum-alias-border-color) ); color: var( - --spectrum-actionbutton-quiet-text-color, + --spectrum-actionbutton-text-color, var(--spectrum-alias-text-color) ); } @@ -220,6 +216,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-icon-color) ); } +#hold-affordance { + /* .spectrum-ActionButton .spectrum-ActionButton-hold */ + color: var( + --spectrum-actionbutton-hold-icon-color, + var(--spectrum-alias-icon-color) + ); +} .button:hover { /* .spectrum-ActionButton:hover */ background-color: var( @@ -765,6 +768,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-icon-color-disabled) ); } +:host([quiet]) .button { + /* .spectrum-ActionButton--quiet */ + background-color: var( + --spectrum-actionbutton-quiet-background-color, + var(--spectrum-alias-background-color-transparent) + ); + border-color: var( + --spectrum-actionbutton-quiet-border-color, + var(--spectrum-alias-border-color-transparent) + ); + color: var( + --spectrum-actionbutton-quiet-text-color, + var(--spectrum-alias-text-color) + ); +} :host([quiet]) .button:hover { /* .spectrum-ActionButton--quiet:hover */ background-color: var( diff --git a/packages/button/src/spectrum-clear-button.css b/packages/button/src/spectrum-clear-button.css index 2ed223dccb..2e728bd9f8 100644 --- a/packages/button/src/spectrum-clear-button.css +++ b/packages/button/src/spectrum-clear-button.css @@ -65,20 +65,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: 100%; padding: 0; margin: 0; - border: none; /* .spectrum-ClearButton */ - background-color: var( - --spectrum-clearbutton-medium-background-color, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-clearbutton-medium-icon-color, - var(--spectrum-alias-icon-color) - ); + border: none; } .button > .icon { /* .spectrum-ClearButton>.spectrum-Icon */ - margin: 0 auto; /* .spectrum-ClearButton>.spectrum-Icon */ - margin: 0; + margin: 0 auto; } :host([variant='overBackground']) .button:focus-visible:after { /* .spectrum-ClearButton--overBackground.focus-ring:after */ @@ -87,17 +78,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * -1 - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring:after, - * .spectrum-ClearButton--overBackground.focus-ring:after */ - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-over-background-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); + ); +} +.button > .icon { + /* .spectrum-ClearButton>.spectrum-Icon */ + margin: 0; } :host([small]) .button { /* .spectrum-ClearButton--small */ @@ -110,6 +95,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-300) ); } +.button { + /* .spectrum-ClearButton */ + background-color: var( + --spectrum-clearbutton-medium-background-color, + var(--spectrum-alias-background-color-transparent) + ); + color: var( + --spectrum-clearbutton-medium-icon-color, + var(--spectrum-alias-icon-color) + ); +} .button:hover { /* .spectrum-ClearButton:hover */ background-color: var( @@ -196,6 +192,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-ClearButton--overBackground.focus-ring */ box-shadow: none; } +:host([variant='overBackground']) .button:focus-visible:after { + /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring:after, + * .spectrum-ClearButton--overBackground.focus-ring:after */ + box-shadow: 0 0 0 + var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ) + var( + --spectrum-button-over-background-border-color-key-focus, + var(--spectrum-global-color-static-white) + ); +} :host([variant='overBackground']) .button:active { /* .spectrum-Button--overBackground.spectrum-Button--quiet:active, * .spectrum-ClearButton--overBackground:active */ diff --git a/packages/button/src/spectrum-fieldbutton.css b/packages/button/src/spectrum-fieldbutton.css index 40bc1e2eff..bacc665911 100644 --- a/packages/button/src/spectrum-fieldbutton.css +++ b/packages/button/src/spectrum-fieldbutton.css @@ -60,19 +60,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transition: background-color var(--spectrum-global-animation-duration-100, 0.13s), box-shadow var(--spectrum-global-animation-duration-100, 0.13s), - border-color var(--spectrum-global-animation-duration-100, 0.13s); /* .spectrum-FieldButton */ - color: var( - --spectrum-fieldbutton-text-color, - var(--spectrum-alias-text-color) - ); - background-color: var( - --spectrum-fieldbutton-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-fieldbutton-border-color, - var(--spectrum-alias-border-color) - ); + border-color var(--spectrum-global-animation-duration-100, 0.13s); } .button.is-disabled, .button:disabled { @@ -93,22 +81,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin: 0; padding: 0; border-width: 0; - border-radius: var( - --spectrum-fieldbutton-quiet-border-radius, - 0 - ); /* .spectrum-FieldButton--quiet */ - color: var( - --spectrum-fieldbutton-text-color, - var(--spectrum-alias-text-color) - ); - border-color: var( - --spectrum-fieldbutton-quiet-border-color, - var(--spectrum-alias-border-color-transparent) - ); - background-color: var( - --spectrum-fieldbutton-quiet-background-color, - var(--spectrum-alias-background-color-transparent) - ); + border-radius: var(--spectrum-fieldbutton-quiet-border-radius, 0); } :host([quiet]) .button.is-disabled:focus-visible, :host([quiet]) .button:disabled:focus-visible { @@ -116,6 +89,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-FieldButton--quiet:disabled.focus-ring */ box-shadow: none; } +.button { + /* .spectrum-FieldButton */ + color: var( + --spectrum-fieldbutton-text-color, + var(--spectrum-alias-text-color) + ); + background-color: var( + --spectrum-fieldbutton-background-color, + var(--spectrum-global-color-gray-75) + ); + border-color: var( + --spectrum-fieldbutton-border-color, + var(--spectrum-alias-border-color) + ); +} .button:hover { /* .spectrum-FieldButton:hover */ color: var( @@ -236,6 +224,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-icon-color-disabled) ); } +:host([quiet]) .button { + /* .spectrum-FieldButton--quiet */ + color: var( + --spectrum-fieldbutton-text-color, + var(--spectrum-alias-text-color) + ); + border-color: var( + --spectrum-fieldbutton-quiet-border-color, + var(--spectrum-alias-border-color-transparent) + ); + background-color: var( + --spectrum-fieldbutton-quiet-background-color, + var(--spectrum-alias-background-color-transparent) + ); +} :host([quiet]) .button:hover { /* .spectrum-FieldButton--quiet:hover */ background-color: var( diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts index 47966baaee..0dace6bdd1 100644 --- a/packages/button/stories/action-button.stories.ts +++ b/packages/button/stories/action-button.stories.ts @@ -70,6 +70,15 @@ export const emphasized = (): TemplateResult => { }); }; +export const emphasizedAndQuiet = (): TemplateResult => { + return renderButtonsSelected({ + emphasized: true, + quiet: true, + disabled: false, + selected: false, + }); +}; + export const quiet = (): TemplateResult => { return renderButtonsSelected({ quiet: true, diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index d02f8ab5f9..a5d65fac46 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -29,15 +29,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular) ); - text-decoration: none; /* .spectrum-Card */ - border-color: var( - --spectrum-card-border-color, - var(--spectrum-global-color-gray-200) - ); - background-color: var( - --spectrum-card-background-color, - var(--spectrum-global-color-gray-50) - ); + text-decoration: none; } :host(:focus) { /* .spectrum-Card:focus */ @@ -157,25 +149,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-size: cover; - background-position: 50%; /* .spectrum-Card-coverPhoto */ - background-color: var( - --spectrum-card-coverphoto-background-color, - var(--spectrum-global-color-gray-200) - ); - border-bottom-color: var( - --spectrum-card-coverphoto-border-color, - var(--spectrum-global-color-gray-200) - ); + background-position: 50%; } :host([dir='ltr']) .body { /* [dir=ltr] .spectrum-Card-body */ padding-right: var( --spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300) - ); /* [dir=ltr] .spectrum-Card-body */ - padding-left: var( - --spectrum-card-body-padding-left, - var(--spectrum-global-dimension-size-300) ); } :host([dir='rtl']) .body { @@ -183,7 +163,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: var( --spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300) - ); /* [dir=rtl] .spectrum-Card-body */ + ); +} +:host([dir='ltr']) .body { + /* [dir=ltr] .spectrum-Card-body */ + padding-left: var( + --spectrum-card-body-padding-left, + var(--spectrum-global-dimension-size-300) + ); +} +:host([dir='rtl']) .body { + /* [dir=rtl] .spectrum-Card-body */ padding-right: var( --spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300) @@ -236,9 +226,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ height: var( --spectrum-card-body-header-height, var(--spectrum-global-dimension-size-225) - ); /* .spectrum-Card-header */ - display: flex; - align-items: baseline; + ); } .content { /* .spectrum-Card-content */ @@ -316,10 +304,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin-right: var( --spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300) - ); /* [dir=ltr] .spectrum-Card-footer */ - margin-left: var( - --spectrum-card-body-padding-left, - var(--spectrum-global-dimension-size-300) ); } :host([dir='rtl']) ::slotted([slot='footer']) { @@ -327,7 +311,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin-left: var( --spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300) - ); /* [dir=rtl] .spectrum-Card-footer */ + ); +} +:host([dir='ltr']) ::slotted([slot='footer']) { + /* [dir=ltr] .spectrum-Card-footer */ + margin-left: var( + --spectrum-card-body-padding-left, + var(--spectrum-global-dimension-size-300) + ); +} +:host([dir='rtl']) ::slotted([slot='footer']) { + /* [dir=rtl] .spectrum-Card-footer */ margin-right: var( --spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300) @@ -347,11 +341,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-card-footer-border-top-size, var(--spectrum-global-dimension-size-10) ) - solid; /* .spectrum-Card-footer */ - border-color: var( - --spectrum-card-border-color, - var(--spectrum-global-color-gray-200) - ); + solid; +} +.header { + /* .spectrum-Card-header */ + display: flex; + align-items: baseline; } .actionButton { /* .spectrum-Card-actionButton */ @@ -522,13 +517,47 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-top-right-radius: 0; /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ + ); +} +:host([dir='rtl'][horizontal]) #preview { + /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-top-right-radius: var( + --spectrum-card-quiet-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][horizontal]) #preview { + /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-top-right-radius: 0; +} +:host([dir='rtl'][horizontal]) #preview { + /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-top-left-radius: 0; +} +:host([dir='ltr'][horizontal]) #preview { + /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ border-bottom-left-radius: var( --spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-bottom-right-radius: 0; /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ + ); +} +:host([dir='rtl'][horizontal]) #preview { + /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-bottom-right-radius: var( + --spectrum-card-quiet-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} +:host([dir='ltr'][horizontal]) #preview { + /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-bottom-right-radius: 0; +} +:host([dir='rtl'][horizontal]) #preview { + /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ + border-bottom-left-radius: 0; +} +:host([dir='ltr'][horizontal]) #preview { + /* [dir=ltr] .spectrum-Card--horizontal .spectrum-Card-preview */ border-right: var( --spectrum-card-border-size, var(--spectrum-alias-border-size-thin) @@ -537,16 +566,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][horizontal]) #preview { /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-top-right-radius: var( - --spectrum-card-quiet-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-top-left-radius: 0; /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-bottom-right-radius: var( - --spectrum-card-quiet-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ - border-bottom-left-radius: 0; /* [dir=rtl] .spectrum-Card--horizontal .spectrum-Card-preview */ border-left: var( --spectrum-card-border-size, var(--spectrum-alias-border-size-thin) @@ -560,17 +579,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: flex; align-items: center; justify-content: center; - padding: var( - --spectrum-global-dimension-size-175 - ); /* .spectrum-Card--horizontal .spectrum-Card-preview */ - background-color: var( - --spectrum-card-quiet-preview-background-color, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-card-border-color, - var(--spectrum-global-color-gray-200) - ); + padding: var(--spectrum-global-dimension-size-175); } :host([horizontal]) .content, :host([horizontal]) .header { @@ -607,6 +616,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding: 0; border-radius: 0; } +:host { + /* .spectrum-Card */ + border-color: var( + --spectrum-card-border-color, + var(--spectrum-global-color-gray-200) + ); + background-color: var( + --spectrum-card-background-color, + var(--spectrum-global-color-gray-50) + ); +} :host(:hover) { /* .spectrum-Card:hover */ border-color: var( @@ -643,6 +663,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-700) ); } +#cover-photo { + /* .spectrum-Card-coverPhoto */ + background-color: var( + --spectrum-card-coverphoto-background-color, + var(--spectrum-global-color-gray-200) + ); + border-bottom-color: var( + --spectrum-card-coverphoto-border-color, + var(--spectrum-global-color-gray-200) + ); +} +::slotted([slot='footer']) { + /* .spectrum-Card-footer */ + border-color: var( + --spectrum-card-border-color, + var(--spectrum-global-color-gray-200) + ); +} :host([variant='gallery']), :host([variant='quiet']) { /* .spectrum-Card--gallery, @@ -792,3 +830,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-400) ); } +:host([horizontal]) #preview { + /* .spectrum-Card--horizontal .spectrum-Card-preview */ + background-color: var( + --spectrum-card-quiet-preview-background-color, + var(--spectrum-global-color-gray-200) + ); + border-color: var( + --spectrum-card-border-color, + var(--spectrum-global-color-gray-200) + ); +} diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css index 7643deae2c..7e18d54133 100644 --- a/packages/checkbox/src/checkbox.css +++ b/packages/checkbox/src/checkbox.css @@ -20,30 +20,3 @@ governing permissions and limitations under the License. :host(:empty) label { display: none; } - -/* Work around specificity changes in the selector processing from Spectrum CSS */ -/* stylelint-disable no-descending-specificity */ -:host([disabled][checked]) #input + #box:before, -:host([disabled][checked]) #input:checked + #box:before { - /* .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled+.spectrum-Checkbox-box:before, - * .spectrum-Checkbox .spectrum-Checkbox-input:disabled+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-emphasized-box-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); - background-color: var( - --spectrum-checkbox-emphasized-box-background-color-disabled, - var(--spectrum-global-color-gray-75) - ); -} - -:host([invalid][indeterminate]) #box:before, -:host([invalid][indeterminate]) #input:checked + #box:before { - /* .spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, - * .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */ - border-color: var( - --spectrum-checkbox-box-border-color-error, - var(--spectrum-global-color-red-500) - ); -} -/* stylelint-enable no-descending-specificity */ diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index 425a4e0759..373057d03a 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -20,15 +20,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-400) ); max-width: 100%; - vertical-align: top; /* .spectrum-Checkbox */ - color: var( - --spectrum-checkbox-text-color, - var(--spectrum-alias-text-color) - ); /* .spectrum-Checkbox */ - border-color: var( - --spectrum-checkbox-box-border-color, - var(--spectrum-global-color-gray-600) - ); + vertical-align: top; } #input { /* .spectrum-Checkbox-input */ @@ -71,16 +63,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * -1 - ); /* .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:after */ - box-shadow: 0 0 0 - var( - --spectrum-checkbox-focus-ring-size-key-focus, - var(--spectrum-alias-focus-ring-size) - ) - var( - --spectrum-checkbox-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) - ); + ); } :host([indeterminate]) #box:before, :host([indeterminate]) #input:checked + #box:before { @@ -109,7 +92,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Checkbox-label */ - text-align: left; /* [dir=ltr] .spectrum-Checkbox-label */ + text-align: left; +} +:host([dir='rtl']) #label { + /* [dir=rtl] .spectrum-Checkbox-label */ + text-align: right; +} +:host([dir='ltr']) #label { + /* [dir=ltr] .spectrum-Checkbox-label */ margin-left: var( --spectrum-checkbox-text-gap, var(--spectrum-global-dimension-size-125) @@ -117,7 +107,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) #label { /* [dir=rtl] .spectrum-Checkbox-label */ - text-align: right; /* [dir=rtl] .spectrum-Checkbox-label */ margin-right: var( --spectrum-checkbox-text-gap, var(--spectrum-global-dimension-size-125) @@ -143,11 +132,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 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-text-color, - var(--spectrum-alias-text-color) - ); + ease-in-out; } #box { /* .spectrum-Checkbox-box */ @@ -200,16 +185,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transition: border var(--spectrum-global-animation-duration-100, 0.13s) 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-box-border-color, - var(--spectrum-global-color-gray-600) - ); - background-color: var( - --spectrum-checkbox-box-background-color, - var(--spectrum-global-color-gray-75) - ); + ease-in-out; } #box:after { /* .spectrum-Checkbox-box:after */ @@ -281,6 +257,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Checkbox-partialCheckmark */ display: none; } +:host { + /* .spectrum-Checkbox */ + color: var( + --spectrum-checkbox-text-color, + var(--spectrum-alias-text-color) + ); +} #checkmark, #partialCheckmark { /* .spectrum-Checkbox-checkmark, @@ -290,6 +273,25 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-75) ); } +#box:before { + /* .spectrum-Checkbox-box:before */ + forced-color-adjust: none; + border-color: var( + --spectrum-checkbox-box-border-color, + var(--spectrum-global-color-gray-600) + ); + background-color: var( + --spectrum-checkbox-box-background-color, + var(--spectrum-global-color-gray-75) + ); +} +#label { + /* .spectrum-Checkbox-label */ + color: var( + --spectrum-checkbox-text-color, + var(--spectrum-alias-text-color) + ); +} #input:checked + #box:before, :host([indeterminate]) #box:before { /* .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before, @@ -317,6 +319,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-900) ); } +:host { + /* .spectrum-Checkbox */ + border-color: var( + --spectrum-checkbox-box-border-color, + var(--spectrum-global-color-gray-600) + ); +} :host(:hover) #box:before { /* .spectrum-Checkbox:hover .spectrum-Checkbox-box:before */ border-color: var( @@ -375,6 +384,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-700) ); } +#input:focus-visible + #box:after { + /* .spectrum-Checkbox-input.focus-ring+.spectrum-Checkbox-box:after */ + box-shadow: 0 0 0 + var( + --spectrum-checkbox-focus-ring-size-key-focus, + var(--spectrum-alias-focus-ring-size) + ) + var( + --spectrum-checkbox-focus-ring-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); +} #input:checked:focus-visible + #box:before, :host([indeterminate]) #input:focus-visible + #box:before { /* .spectrum-Checkbox-input:checked.focus-ring+.spectrum-Checkbox-box:before, diff --git a/packages/circle-loader/src/spectrum-circle-loader.css b/packages/circle-loader/src/spectrum-circle-loader.css index e9cf9bc218..c8d44e3813 100644 --- a/packages/circle-loader/src/spectrum-circle-loader.css +++ b/packages/circle-loader/src/spectrum-circle-loader.css @@ -413,10 +413,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400) - ); /* .spectrum-ProgressCircle-track */ - border-color: var( - --spectrum-progresscircle-medium-track-color, - var(--spectrum-alias-track-color-default) ); } :host([dir='ltr']) .fills { @@ -450,10 +446,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400) - ); /* .spectrum-ProgressCircle-fill */ - border-color: var( - --spectrum-progresscircle-medium-track-fill-color, - var(--spectrum-global-color-blue-500) ); } .fillMask1, @@ -564,6 +556,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transform: translateZ(0); animation: spectrum-fill-mask-2 1s linear infinite; } +.track { + /* .spectrum-ProgressCircle-track */ + border-color: var( + --spectrum-progresscircle-medium-track-color, + var(--spectrum-alias-track-color-default) + ); +} +.fill { + /* .spectrum-ProgressCircle-fill */ + border-color: var( + --spectrum-progresscircle-medium-track-fill-color, + var(--spectrum-global-color-blue-500) + ); +} :host([over-background]) .track { /* .spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track */ border-color: var( diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index 106748c92e..bc10d3edb4 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -85,18 +85,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin: var( --spectrum-coachmark-indicator-gap, var(--spectrum-global-dimension-size-75) - ); /* .spectrum-CoachMarkIndicator */ - min-width: calc( - var( - --spectrum-coachmark-indicator-ring-diameter, - var(--spectrum-global-dimension-size-200) - ) * 3 - ); - min-height: calc( - var( - --spectrum-coachmark-indicator-ring-diameter, - var(--spectrum-global-dimension-size-200) - ) * 3 ); } .ring { @@ -108,28 +96,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-coachmark-indicator-ring-border-size, var(--spectrum-global-dimension-static-size-25) ); - border-radius: 50%; /* .spectrum-CoachMarkIndicator-ring */ - top: calc( - var( - --spectrum-coachmark-indicator-ring-diameter, - var(--spectrum-global-dimension-size-200) - ) * 0.75 - ); - width: var( - --spectrum-coachmark-indicator-ring-diameter, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-coachmark-indicator-ring-diameter, - var(--spectrum-global-dimension-size-200) - ); - animation: pulse - var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) linear - infinite; /* .spectrum-CoachMarkIndicator-ring */ - border-color: var( - --spectrum-coachmark-indicator-ring-default-color, - var(--spectrum-alias-focus-color) - ); + border-radius: 50%; } .ring:nth-child(2) { /* .spectrum-CoachMarkIndicator-ring:nth-child(2) */ @@ -151,6 +118,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) ); } +:host { + /* .spectrum-CoachMarkIndicator */ + min-width: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 3 + ); + min-height: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 3 + ); +} :host([dir='ltr']) .ring { /* [dir=ltr] .spectrum-CoachMarkIndicator-ring */ left: calc( @@ -169,6 +151,26 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) * 0.75 ); } +.ring { + /* .spectrum-CoachMarkIndicator-ring */ + top: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 0.75 + ); + width: var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ); + height: var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ); + animation: pulse + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) linear + infinite; +} .ring:first-child { /* .spectrum-CoachMarkIndicator-ring:first-child */ animation-delay: calc( @@ -242,6 +244,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) ); } +.ring { + /* .spectrum-CoachMarkIndicator-ring */ + border-color: var( + --spectrum-coachmark-indicator-ring-default-color, + var(--spectrum-alias-focus-color) + ); +} :host([variant='light']) .ring { /* .spectrum-CoachMarkIndicator--light .spectrum-CoachMarkIndicator-ring */ border-color: var( diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 921b0a76eb..fa8ec69b25 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -56,20 +56,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .grid { /* .spectrum-Dialog .spectrum-Dialog-grid */ display: grid; - grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax( - 0, - auto - ) var(--spectrum-dialog-confirm-padding); + grid-template-columns: + var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) + var(--spectrum-dialog-confirm-padding); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading header header typeIcon .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; - width: 100%; /* .spectrum-Dialog .spectrum-Dialog-grid */ - grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax( - 0, - auto - ) var(--spectrum-dialog-confirm-padding); - grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading heading heading typeIcon .' '. header header header header .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; + width: 100%; } :host([dir='ltr']) ::slotted([slot='heading']) { /* [dir=ltr] .spectrum-Dialog-heading */ @@ -92,11 +86,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-dialog-confirm-title-text-line-height, var(--spectrum-alias-heading-text-line-height) ); - outline: none; /* .spectrum-Dialog-heading */ - color: var( - --spectrum-dialog-confirm-title-text-color, - var(--spectrum-global-color-gray-900) - ); + outline: none; } .header { /* .spectrum-Dialog-header */ @@ -105,16 +95,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ align-items: center; justify-content: flex-end; box-sizing: border-box; - outline: none; /* .spectrum-Dialog .spectrum-Dialog-header */ - justify-content: flex-start; + outline: none; } .type-icon { /* .spectrum-Dialog-typeIcon */ - grid-area: typeIcon; /* .spectrum-Dialog-typeIcon */ - color: var( - --spectrum-dialog-confirm-icon-color, - var(--spectrum-global-color-gray-900) - ); + grid-area: typeIcon; } .divider { /* .spectrum-Dialog .spectrum-Dialog-divider */ @@ -158,11 +143,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-body-text-line-height) ); padding: 0 var(--spectrum-global-dimension-size-25); - margin: 0 calc(var(--spectrum-global-dimension-size-25) * -1); /* .spectrum-Dialog-content */ - color: var( - --spectrum-dialog-confirm-description-text-color, - var(--spectrum-global-color-gray-800) - ); + margin: 0 calc(var(--spectrum-global-dimension-size-25) * -1); } .footer { /* .spectrum-Dialog-footer */ @@ -199,23 +180,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dismissable]) .grid { /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */ - grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax( - 0, - auto - ) minmax(0, var(--spectrum-global-dimension-size-400)) var( - --spectrum-dialog-confirm-padding - ); + grid-template-columns: + var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) + minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); - grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading header header typeIcon closeButton closeButton' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */ - grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax( - 0, - auto - ) minmax(0, var(--spectrum-global-dimension-size-400)) var( - --spectrum-dialog-confirm-padding - ); - grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading heading heading typeIcon closeButton closeButton' '. header header header header header .' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; + grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading header header typeIcon closeButton closeButton' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; } :host([dismissable]) .grid .buttonGroup { /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup */ @@ -310,6 +281,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ grid-area: buttonGroup; align-self: start; } +.grid { + /* .spectrum-Dialog .spectrum-Dialog-grid */ + grid-template-columns: + var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) + var(--spectrum-dialog-confirm-padding); + grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading heading heading typeIcon .' '. header header header header .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; +} :host([dismissable]) .grid, .grid { /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid, @@ -318,6 +296,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-dialog-confirm-padding ); } +:host([dismissable]) .grid { + /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */ + grid-template-columns: + var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) + minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding); + grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading heading heading typeIcon closeButton closeButton' '. header header header header header .' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; +} +.header { + /* .spectrum-Dialog .spectrum-Dialog-header */ + justify-content: flex-start; +} :host([mode='fullscreen']) .grid, :host([mode='fullscreenTakeover']) .grid { /* .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, @@ -343,6 +332,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading */ font-size: var(--spectrum-dialog-confirm-title-text-size); } +::slotted([slot='heading']) { + /* .spectrum-Dialog-heading */ + color: var( + --spectrum-dialog-confirm-title-text-color, + var(--spectrum-global-color-gray-900) + ); +} +.content { + /* .spectrum-Dialog-content */ + color: var( + --spectrum-dialog-confirm-description-text-color, + var(--spectrum-global-color-gray-800) + ); +} +.type-icon { + /* .spectrum-Dialog-typeIcon */ + color: var( + --spectrum-dialog-confirm-icon-color, + var(--spectrum-global-color-gray-900) + ); +} :host([error]) .type-icon { /* .spectrum-Dialog--error .spectrum-Dialog-typeIcon */ color: var( diff --git a/packages/dropdown/src/spectrum-dropdown.css b/packages/dropdown/src/spectrum-dropdown.css index 3bb7f13675..b54bbf11f4 100644 --- a/packages/dropdown/src/spectrum-dropdown.css +++ b/packages/dropdown/src/spectrum-dropdown.css @@ -113,11 +113,7 @@ select + .dropdown { var(--spectrum-global-font-style-italic) ); transition: color var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; /* .spectrum-Picker-label.is-placeholder */ - color: var( - --spectrum-picker-placeholder-text-color, - var(--spectrum-alias-placeholder-text-color) - ); + ease-in-out; } :host([dir='ltr']) #label + .dropdown { /* [dir=ltr] .spectrum-Picker-label+.spectrum-Picker-icon */ @@ -200,8 +196,7 @@ select + .dropdown { ) ) / 2 ); - opacity: 1; /* .spectrum-Picker-icon */ - color: var(--spectrum-picker-icon-color, var(--spectrum-alias-icon-color)); + opacity: 1; } #button .icon:not(.dropdown) { /* .spectrum-Picker-trigger .spectrum-Icon:not(.spectrum-Picker-icon) */ @@ -342,6 +337,17 @@ select + .dropdown { var(--spectrum-alias-text-color-disabled) ); } +.dropdown { + /* .spectrum-Picker-icon */ + color: var(--spectrum-picker-icon-color, var(--spectrum-alias-icon-color)); +} +#label.placeholder { + /* .spectrum-Picker-label.is-placeholder */ + color: var( + --spectrum-picker-placeholder-text-color, + var(--spectrum-alias-placeholder-text-color) + ); +} #label.placeholder:hover { /* .spectrum-Picker-label.is-placeholder:hover */ color: var( diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 6d6f7a52ac..6cbac5ec73 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -25,7 +25,23 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-dropzone-padding, var(--spectrum-global-dimension-size-900) ); - border-style: dashed; /* .spectrum-Dropzone */ + border-style: dashed; +} +:host([dragged]) { + /* .spectrum-Dropzone.is-dragged */ + border-style: solid; +} +:host(:focus) { + /* .spectrum-Dropzone:focus */ + outline: 0; + border-style: dashed; +} +:host(:focus:focus-visible) { + /* .spectrum-Dropzone:focus.focus-ring */ + border-style: solid; +} +:host { + /* .spectrum-Dropzone */ border-color: var( --spectrum-dropzone-border-color, var(--spectrum-global-color-gray-300) @@ -33,7 +49,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dragged]) { /* .spectrum-Dropzone.is-dragged */ - border-style: solid; /* .spectrum-Dropzone.is-dragged */ border-color: var( --spectrum-dropzone-border-color-selected-hover, var(--spectrum-global-color-blue-400) @@ -43,31 +58,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-highlight-selected) ); } +:host([dragged]) ::slotted(*) { + /* .spectrum-Dropzone.is-dragged .spectrum-IllustratedMessage-illustration */ + color: var(--spectrum-global-color-blue-400); +} :host(:focus) { /* .spectrum-Dropzone:focus */ - outline: 0; - border-style: dashed; /* .spectrum-Dropzone:focus */ border-color: var( --spectrum-dropzone-border-color, var(--spectrum-global-color-gray-300) ); } +:host(:focus) ::slotted(*) { + /* .spectrum-Dropzone:focus .spectrum-IllustratedMessage-illustration */ + color: var(--spectrum-global-color-static-gray-500, #bcbcbc); +} :host(:focus:focus-visible) { /* .spectrum-Dropzone:focus.focus-ring */ - border-style: solid; /* .spectrum-Dropzone:focus.focus-ring */ border-color: var( --spectrum-dropzone-border-color-selected-hover, var(--spectrum-global-color-blue-400) ); } -:host([dragged]) ::slotted(*) { - /* .spectrum-Dropzone.is-dragged .spectrum-IllustratedMessage-illustration */ - color: var(--spectrum-global-color-blue-400); -} -:host(:focus) ::slotted(*) { - /* .spectrum-Dropzone:focus .spectrum-IllustratedMessage-illustration */ - color: var(--spectrum-global-color-static-gray-500, #bcbcbc); -} :host(:focus[dragged]:focus-visible) ::slotted(*) { /* .spectrum-Dropzone:focus.is-dragged.focus-ring .spectrum-IllustratedMessage-illustration */ color: var(--spectrum-global-color-blue-400); diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css index 118ef5890a..903029b3b7 100644 --- a/packages/illustrated-message/src/spectrum-illustratedmessage.css +++ b/packages/illustrated-message/src/spectrum-illustratedmessage.css @@ -21,10 +21,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #illustration { /* .spectrum-IllustratedMessage-illustration */ - margin-bottom: 24px; /* .spectrum-IllustratedMessage-illustration */ - color: var(--spectrum-global-color-gray-500); - fill: currentColor; - stroke: currentColor; + margin-bottom: 24px; } #heading { /* .spectrum-IllustratedMessage-heading */ @@ -41,3 +38,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-IllustratedMessage--cta .spectrum-IllustratedMessage-description */ font-style: normal; } +#illustration { + /* .spectrum-IllustratedMessage-illustration */ + color: var(--spectrum-global-color-gray-500); + fill: currentColor; + stroke: currentColor; +} diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index a597081bae..188702183c 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -18,11 +18,7 @@ a { transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; outline: none; - cursor: pointer; /* .spectrum-Link */ - color: var( - --spectrum-link-primary-text-color, - var(--spectrum-global-color-blue-600) - ); + cursor: pointer; } :host([quiet]) a:focus-visible, :host([over-background]) a:focus-visible, @@ -30,11 +26,7 @@ a:focus-visible { /* .spectrum-Link.focus-ring */ text-decoration: underline; -webkit-text-decoration-style: double; - text-decoration-style: double; /* .spectrum-Link.focus-ring */ - color: var( - --spectrum-link-primary-text-color-key-focus, - var(--spectrum-alias-text-color-key-focus) - ); + text-decoration-style: double; } :host([quiet]) a { /* .spectrum-Link--quiet */ @@ -44,6 +36,13 @@ a:focus-visible { /* .spectrum-Link--quiet:hover */ text-decoration: underline; } +a { + /* .spectrum-Link */ + color: var( + --spectrum-link-primary-text-color, + var(--spectrum-global-color-blue-600) + ); +} a:hover { /* .spectrum-Link:hover */ color: var( @@ -58,6 +57,15 @@ a:active { var(--spectrum-global-color-blue-700) ); } +:host([quiet]) a:focus-visible, +:host([over-background]) a:focus-visible, +a:focus-visible { + /* .spectrum-Link.focus-ring */ + color: var( + --spectrum-link-primary-text-color-key-focus, + var(--spectrum-alias-text-color-key-focus) + ); +} .spectrum-Link--secondary, .spectrum-Link--secondary:active, .spectrum-Link--secondary:focus, diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index f9016db12c..770af15ba3 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -170,11 +170,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-static-size-150) ); padding: 0; - border: none; /* .spectrum-Menu-divider */ - background-color: var( - --spectrum-listitem-divider-color, - var(--spectrum-alias-border-color-extralight) - ); + border: none; } :host([dir='ltr']) .spectrum-Menu-item:focus-visible, :host([dir='ltr']) .spectrum-Menu-item.is-focused { @@ -194,3 +190,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-border-color-focus) ); } +:host { + /* .spectrum-Menu-divider */ + background-color: var( + --spectrum-listitem-divider-color, + var(--spectrum-alias-border-color-extralight) + ); +} diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 442c416489..75aad01e9a 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -61,12 +61,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #selected { /* .spectrum-Menu-checkmark */ transform: scale(1); - opacity: 1; /* .spectrum-Menu-checkmark */ - display: none; - align-self: flex-start; /* .spectrum-Menu-checkmark, - * .spectrum-Menu-chevron */ - flex-grow: 0; - margin-top: var(--spectrum-global-dimension-size-50); + opacity: 1; } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-Menu-item */ @@ -118,15 +113,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-font-weight-regular) ); font-style: normal; - text-decoration: none; /* .spectrum-Menu-item */ - background-color: var( - --spectrum-listitem-option-background-color, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-listitem-option-text-color, - var(--spectrum-alias-text-color) - ); + text-decoration: none; } #button:focus { /* .spectrum-Menu-item:focus */ @@ -160,11 +147,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([selected]) #button #selected { /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ - display: block; /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ - color: var( - --spectrum-listitem-option-icon-color-selected, - var(--spectrum-alias-icon-color-selected) - ); + display: block; } ::slotted([slot='icon']), .spectrum-Menu-itemIcon { @@ -232,6 +215,11 @@ slot[name='icon'] + #label, white-space: nowrap; overflow: hidden; } +#selected { + /* .spectrum-Menu-checkmark */ + display: none; + align-self: flex-start; +} :host([dir='ltr']) #selected, :host([dir='ltr']) .spectrum-Menu-chevron { /* [dir=ltr] .spectrum-Menu-checkmark, @@ -250,10 +238,27 @@ slot[name='icon'] + #label, var(--spectrum-global-dimension-size-150) ); } +#selected { + /* .spectrum-Menu-checkmark, + * .spectrum-Menu-chevron */ + flex-grow: 0; + margin-top: var(--spectrum-global-dimension-size-50); +} :host([dir='rtl']) .spectrum-Menu-chevron { /* [dir=rtl] .spectrum-Menu-chevron */ transform: matrix(-1, 0, 0, 1, 0, 0); } +#button { + /* .spectrum-Menu-item */ + background-color: var( + --spectrum-listitem-option-background-color, + var(--spectrum-alias-background-color-transparent) + ); + color: var( + --spectrum-listitem-option-text-color, + var(--spectrum-alias-text-color) + ); +} :host([dir='ltr']) #button:focus-visible, :host([dir='ltr'][focused]) #button { /* [dir=ltr] .spectrum-Menu-item.focus-ring, @@ -309,6 +314,13 @@ slot[name='icon'] + #label, var(--spectrum-alias-text-color) ); } +:host([selected]) #button #selected { + /* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */ + color: var( + --spectrum-listitem-option-icon-color-selected, + var(--spectrum-alias-icon-color-selected) + ); +} .is-active, #button:active { /* .spectrum-Menu-item .is-active, diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index 5b06f57ba5..ce9d629479 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -23,6 +23,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-font-line-height-medium) ); text-transform: uppercase; - letter-spacing: 0.06em; /* .spectrum-Menu-sectionHeading */ + letter-spacing: 0.06em; +} +.header { + /* .spectrum-Menu-sectionHeading */ color: var(--spectrum-global-color-gray-700); } diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index fce8cf3908..9b1d7e14a3 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -26,8 +26,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin-right: 0; padding: 0; list-style-type: none; - overflow: auto; /* .spectrum-Menu .spectrum-Menu */ - display: block; /* .spectrum-Menu */ + overflow: auto; +} +:host { + /* .spectrum-Menu .spectrum-Menu */ + display: block; +} +:host { + /* .spectrum-Menu */ background-color: var( --spectrum-listitem-background-color, var(--spectrum-alias-background-color-transparent) diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 11d9d5ea94..1570d016f5 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -66,11 +66,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-ProgressBar-track */ overflow: hidden; border-radius: var(--spectrum-progressbar-large-border-radius); - z-index: 1; /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ - background-color: var( - --spectrum-progressbar-large-track-color, - var(--spectrum-alias-track-color-default) - ); + z-index: 1; } .fill, .track { @@ -84,11 +80,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .fill { /* .spectrum-ProgressBar-fill */ border: none; - transition: width 1s; /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ - background: var( - --spectrum-progressbar-large-track-fill-color, - var(--spectrum-global-color-blue-500) - ); + transition: width 1s; } :host([dir='ltr']) .label, :host([dir='ltr']) .percentage { @@ -172,7 +164,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][side-label]) .percentage { /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - text-align: right; /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: right; +} +:host([dir='rtl'][side-label]) .percentage { + /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ + text-align: left; +} +:host([dir='ltr'][side-label]) .percentage { + /* [dir=ltr] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-left: var( --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) @@ -180,7 +179,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][side-label]) .percentage { /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ - text-align: left; /* [dir=rtl] .spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage */ margin-right: var( --spectrum-progressbar-large-label-gap-x, var(--spectrum-global-dimension-size-150) @@ -242,6 +240,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) infinite; } +.fill { + /* .spectrum-ProgressBar .spectrum-ProgressBar-fill */ + background: var( + --spectrum-progressbar-large-track-fill-color, + var(--spectrum-global-color-blue-500) + ); +} +.track { + /* .spectrum-ProgressBar .spectrum-ProgressBar-track */ + background-color: var( + --spectrum-progressbar-large-track-color, + var(--spectrum-alias-track-color-default) + ); +} :host([over-background]) .fill { /* .spectrum-ProgressBar.spectrum-ProgressBar--overBackground .spectrum-ProgressBar-fill */ background: var( diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index a95c66bc7c..2196206296 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -19,7 +19,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 0.13s); - pointer-events: none; /* .spectrum-Modal */ + pointer-events: none; +} +:host([open]) .modal { + /* .spectrum-Modal.is-open */ + visibility: visible; + opacity: 1; + transition-delay: 0ms; + pointer-events: auto; +} +.modal { + /* .spectrum-Modal */ transform: translateY( var( --spectrum-dialog-confirm-entry-animation-distance, @@ -56,18 +66,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100) ) - ); /* .spectrum-Modal */ - background: var( - --spectrum-dialog-confirm-background-color, - var(--spectrum-alias-background-color-default) - ); + ); } :host([open]) .modal { /* .spectrum-Modal.is-open */ - visibility: visible; - opacity: 1; - transition-delay: 0ms; - pointer-events: auto; /* .spectrum-Modal.is-open */ transition: transform var( --spectrum-dialog-confirm-entry-animation-duration, @@ -127,3 +129,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * .spectrum-Modal--fullscreenTakeover.is-open */ transform: none; } +.modal { + /* .spectrum-Modal */ + background: var( + --spectrum-dialog-confirm-background-color, + var(--spectrum-alias-background-color-default) + ); +} diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index eb5063218d..9e74e06982 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -19,48 +19,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 0.13s); - pointer-events: none; /* .spectrum-Popover */ - display: inline-flex; - flex-direction: column; - min-width: var(--spectrum-global-dimension-size-400); - min-height: var(--spectrum-global-dimension-size-400); - position: absolute; - border-style: solid; - border-width: var( - --spectrum-popover-border-size, - var(--spectrum-alias-border-size-thin) - ); - border-radius: var( - --spectrum-popover-border-radius, - var(--spectrum-alias-border-radius-regular) - ); - outline: none; - box-sizing: border-box; /* .spectrum-Popover */ - background-color: var( - --spectrum-popover-background-color, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-popover-border-color, - var(--spectrum-alias-border-color-dark) - ); - 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); + pointer-events: none; } :host([open]) { /* .spectrum-Popover.is-open */ @@ -103,6 +62,25 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) ); } +:host { + /* .spectrum-Popover */ + display: inline-flex; + flex-direction: column; + min-width: var(--spectrum-global-dimension-size-400); + min-height: var(--spectrum-global-dimension-size-400); + position: absolute; + border-style: solid; + border-width: var( + --spectrum-popover-border-size, + var(--spectrum-alias-border-size-thin) + ); + border-radius: var( + --spectrum-popover-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + outline: none; + box-sizing: border-box; +} #tip { /* .spectrum-Popover-tip */ position: absolute; @@ -123,14 +101,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 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) - ); - stroke: var( - --spectrum-popover-border-color, - var(--spectrum-alias-border-color-dark) ); } :host([dialog]) { @@ -186,3 +156,42 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ left: 50%; margin-left: calc(var(--spectrum-global-dimension-size-150) * -1); } +:host { + /* .spectrum-Popover */ + background-color: var( + --spectrum-popover-background-color, + var(--spectrum-global-color-gray-50) + ); + border-color: var( + --spectrum-popover-border-color, + var(--spectrum-alias-border-color-dark) + ); + 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); +} +#tip .triangle { + /* .spectrum-Popover .spectrum-Popover-tip .spectrum-Popover-tip-triangle */ + fill: var( + --spectrum-popover-background-color, + var(--spectrum-global-color-gray-50) + ); + stroke: var( + --spectrum-popover-border-color, + var(--spectrum-alias-border-color-dark) + ); +} diff --git a/packages/quick-actions/src/spectrum-quick-actions.css b/packages/quick-actions/src/spectrum-quick-actions.css index b0d20b49a4..ac063c26c8 100644 --- a/packages/quick-actions/src/spectrum-quick-actions.css +++ b/packages/quick-actions/src/spectrum-quick-actions.css @@ -19,31 +19,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 0.13s); - pointer-events: none; /* .spectrum-QuickActions */ - box-sizing: border-box; - display: inline-flex; - align-items: center; - justify-content: center; - padding: var( - --spectrum-quickactions-padding-y, - var(--spectrum-global-dimension-size-50) - ) - var( - --spectrum-quickactions-padding-x, - var(--spectrum-global-dimension-size-50) - ); - height: var( - --spectrum-quickactions-height, - var(--spectrum-global-dimension-size-500) - ); - border-radius: var( - --spectrum-quickactions-border-radius, - var(--spectrum-alias-border-radius-regular) - ); /* .spectrum-QuickActions */ - background-color: var( - --spectrum-quickactions-background-color, - var(--spectrum-alias-background-color-quickactions) - ); + pointer-events: none; } :host([opened]) { /* .spectrum-QuickActions.is-open */ @@ -69,6 +45,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) ); } +:host { + /* .spectrum-QuickActions */ + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + padding: var( + --spectrum-quickactions-padding-y, + var(--spectrum-global-dimension-size-50) + ) + var( + --spectrum-quickactions-padding-x, + var(--spectrum-global-dimension-size-50) + ); + height: var( + --spectrum-quickactions-height, + var(--spectrum-global-dimension-size-500) + ); + border-radius: var( + --spectrum-quickactions-border-radius, + var(--spectrum-alias-border-radius-regular) + ); +} :host([dir='ltr']) slot[name='action'] + ::slotted([slot='action']) { /* [dir=ltr] .spectrum-QuickActions .spectrum-ActionButton+.spectrum-ActionButton */ margin-left: var( @@ -104,3 +103,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-background-color-quickactions-overlay) ); } +:host { + /* .spectrum-QuickActions */ + background-color: var( + --spectrum-quickactions-background-color, + var(--spectrum-alias-background-color-quickactions) + ); +} diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 7ea2b09d22..9ae1a1903b 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -53,10 +53,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-radio-circle-dot-size, var(--spectrum-global-dimension-static-size-50) ) / 2 - ); /* .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ - border-color: var( - --spectrum-radio-emphasized-circle-border-color-selected, - var(--spectrum-global-color-blue-500) ); } #input:focus-visible + #button:after { @@ -70,7 +66,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Radio-label */ - text-align: left; /* [dir=ltr] .spectrum-Radio-label */ + text-align: left; +} +:host([dir='rtl']) #label { + /* [dir=rtl] .spectrum-Radio-label */ + text-align: right; +} +:host([dir='ltr']) #label { + /* [dir=ltr] .spectrum-Radio-label */ margin-left: var( --spectrum-radio-text-gap, var(--spectrum-global-dimension-size-125) @@ -78,7 +81,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) #label { /* [dir=rtl] .spectrum-Radio-label */ - text-align: right; /* [dir=rtl] .spectrum-Radio-label */ margin-right: var( --spectrum-radio-text-gap, var(--spectrum-global-dimension-size-125) @@ -104,11 +106,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 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( - --spectrum-radio-emphasized-text-color, - var(--spectrum-alias-text-color) - ); + ease-in-out; } #button { /* .spectrum-Radio-button */ @@ -163,15 +161,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transition: border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; /* .spectrum-Radio-button:before */ - background-color: var( - --spectrum-radio-emphasized-circle-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-radio-emphasized-circle-border-color, - var(--spectrum-global-color-gray-600) - ); + ease-in-out; } #button:after { /* .spectrum-Radio-button:after */ @@ -207,6 +197,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Radio--labelBelow .spectrum-Radio-label */ margin: var(--spectrum-global-dimension-size-40) 0 0 0; } +:host([checked]) #input + #button:before { + /* .spectrum-Radio-input:checked+.spectrum-Radio-button:before */ + border-color: var( + --spectrum-radio-emphasized-circle-border-color-selected, + var(--spectrum-global-color-blue-500) + ); +} +#label { + /* .spectrum-Radio-label */ + color: var( + --spectrum-radio-emphasized-text-color, + var(--spectrum-alias-text-color) + ); +} +#button:before { + /* .spectrum-Radio-button:before */ + background-color: var( + --spectrum-radio-emphasized-circle-background-color, + var(--spectrum-global-color-gray-75) + ); + border-color: var( + --spectrum-radio-emphasized-circle-border-color, + var(--spectrum-global-color-gray-600) + ); +} :host(:hover) #button:before { /* .spectrum-Radio:hover .spectrum-Radio-button:before */ border-color: var( diff --git a/packages/rule/src/spectrum-rule.css b/packages/rule/src/spectrum-rule.css index 8e30438bdc..fd3060775d 100644 --- a/packages/rule/src/spectrum-rule.css +++ b/packages/rule/src/spectrum-rule.css @@ -33,10 +33,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-large-border-radius, var(--spectrum-global-dimension-static-size-25) - ); /* .spectrum-Divider--large */ - background-color: var( - --spectrum-divider-large-background-color, - var(--spectrum-global-color-gray-800) ); } :host([size='medium']) { @@ -48,10 +44,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-medium-border-radius, var(--spectrum-global-dimension-static-size-10) - ); /* .spectrum-Divider--medium */ - background-color: var( - --spectrum-divider-medium-background-color, - var(--spectrum-global-color-gray-300) ); } :host([size='small']) { @@ -63,10 +55,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-divider-small-border-radius, var(--spectrum-global-dimension-static-size-10) - ); /* .spectrum-Divider--small */ - background-color: var( - --spectrum-divider-small-background-color, - var(--spectrum-global-color-gray-300) ); } :host([vertical]) { @@ -94,3 +82,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-static-size-10) ); } +:host([size='large']) { + /* .spectrum-Divider--large */ + background-color: var( + --spectrum-divider-large-background-color, + var(--spectrum-global-color-gray-800) + ); +} +:host([size='medium']) { + /* .spectrum-Divider--medium */ + background-color: var( + --spectrum-divider-medium-background-color, + var(--spectrum-global-color-gray-300) + ); +} +:host([size='small']) { + /* .spectrum-Divider--small */ + background-color: var( + --spectrum-divider-small-background-color, + var(--spectrum-global-color-gray-300) + ); +} diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index 4e74bb0788..e84713ff74 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -103,11 +103,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-sidenav-heading-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium) ); - text-transform: uppercase; /* .spectrum-SideNav-heading */ - color: var( - --spectrum-sidenav-heading-text-color, - var(--spectrum-global-color-gray-700) - ); + text-transform: uppercase; } :host([dir='ltr']) .spectrum-SideNav--multiLevel @@ -175,3 +171,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) ); } +#heading { + /* .spectrum-SideNav-heading */ + color: var( + --spectrum-sidenav-heading-text-color, + var(--spectrum-global-color-gray-700) + ); +} diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index 9da6d5deac..d8b1a19eb7 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -67,15 +67,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ cursor: pointer; transition: background-color var(--spectrum-global-animation-duration-100, 0.13s) ease-out, - color var(--spectrum-global-animation-duration-100, 0.13s) ease-out; /* .spectrum-SideNav-itemLink */ - background-color: var( - --spectrum-sidenav-item-background-color, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-sidenav-item-text-color, - var(--spectrum-alias-text-color) - ); + color var(--spectrum-global-animation-duration-100, 0.13s) ease-out; } #itemLink:focus { /* .spectrum-SideNav-itemLink:focus */ @@ -114,10 +106,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-sidenav-item-border-radius, var(--spectrum-alias-border-radius-regular) - ); /* .spectrum-SideNav-itemLink.focus-ring:before */ - border-color: var( - --spectrum-sidenav-item-border-color-key-focus, - var(--spectrum-alias-border-color-focus) ); } :host([dir='ltr']) #itemLink ::slotted([slot='icon']) { @@ -235,6 +223,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ cursor: default; pointer-events: none; } +#itemLink { + /* .spectrum-SideNav-itemLink */ + background-color: var( + --spectrum-sidenav-item-background-color, + var(--spectrum-alias-background-color-transparent) + ); + color: var( + --spectrum-sidenav-item-text-color, + var(--spectrum-alias-text-color) + ); +} #itemLink:hover { /* .spectrum-SideNav-itemLink:hover */ background-color: var( @@ -264,3 +263,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-text-color-hover) ); } +#itemLink:focus-visible:before { + /* .spectrum-SideNav-itemLink.focus-ring:before */ + border-color: var( + --spectrum-sidenav-item-border-color-key-focus, + var(--spectrum-alias-border-color-focus) + ); +} diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index ae9f34d1c0..9af05538f3 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -174,7 +174,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #fill { /* [dir=ltr] .spectrum-Slider-fill */ - margin-left: 0; /* [dir=ltr] .spectrum-Slider-fill */ + margin-left: 0; +} +:host([dir='rtl']) #fill { + /* [dir=rtl] .spectrum-Slider-fill */ + margin-right: 0; +} +:host([dir='ltr']) #fill { + /* [dir=ltr] .spectrum-Slider-fill */ padding-left: calc( var( --spectrum-slider-handle-width, @@ -189,7 +196,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) #fill { /* [dir=rtl] .spectrum-Slider-fill */ - margin-right: 0; /* [dir=rtl] .spectrum-Slider-fill */ padding-right: calc( var( --spectrum-slider-handle-width, @@ -242,14 +248,46 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .track ~ .track { /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - left: auto; /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - right: 0; /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ + left: auto; +} +:host([dir='rtl']) .track ~ .track { + /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ + right: auto; +} +:host([dir='ltr']) .track ~ .track { + /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ + right: 0; +} +:host([dir='rtl']) .track ~ .track { + /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ + left: 0; +} +:host([dir='ltr']) .track ~ .track { + /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ padding-left: var( --spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker) ); - padding-right: 0; /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-left: 0; /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ + padding-right: 0; +} +:host([dir='rtl']) .track ~ .track { + /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ + padding-right: var( + --spectrum-slider-handle-gap, + var(--spectrum-alias-border-size-thicker) + ); + padding-left: 0; +} +:host([dir='ltr']) .track ~ .track { + /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ + margin-left: 0; +} +:host([dir='rtl']) .track ~ .track { + /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ + margin-right: 0; +} +:host([dir='ltr']) .track ~ .track { + /* [dir=ltr] .spectrum-Slider-track~.spectrum-Slider-track */ margin-right: calc( var( --spectrum-slider-handle-width, @@ -259,14 +297,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) .track ~ .track { /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - right: auto; /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - left: 0; /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); - padding-left: 0; /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ - margin-right: 0; /* [dir=rtl] .spectrum-Slider-track~.spectrum-Slider-track */ margin-left: calc( var( --spectrum-slider-handle-width, @@ -291,9 +321,34 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-right: var( --spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker) - ); /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - left: 0; /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - right: auto; /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + ); +} +:host([dir='rtl'][variant='range']) .track:first-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + padding-right: 0; + padding-left: var( + --spectrum-slider-handle-gap, + var(--spectrum-alias-border-size-thicker) + ); +} +:host([dir='ltr'][variant='range']) .track:first-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + left: 0; +} +:host([dir='rtl'][variant='range']) .track:first-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + right: 0; +} +:host([dir='ltr'][variant='range']) .track:first-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + right: auto; +} +:host([dir='rtl'][variant='range']) .track:first-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ + left: auto; +} +:host([dir='ltr'][variant='range']) .track:first-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ margin-left: calc( var( --spectrum-slider-handle-width, @@ -303,13 +358,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][variant='range']) .track:first-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - padding-right: 0; - padding-left: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - right: 0; /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ - left: auto; /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:first-of-type */ margin-right: calc( var( --spectrum-slider-handle-width, @@ -378,9 +426,34 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker) ); - padding-right: 0; /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - left: auto; /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - right: 0; /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + padding-right: 0; +} +:host([dir='rtl'][variant='range']) .track:last-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + padding-right: var( + --spectrum-slider-handle-gap, + var(--spectrum-alias-border-size-thicker) + ); + padding-left: 0; +} +:host([dir='ltr'][variant='range']) .track:last-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + left: auto; +} +:host([dir='rtl'][variant='range']) .track:last-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + right: auto; +} +:host([dir='ltr'][variant='range']) .track:last-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + right: 0; +} +:host([dir='rtl'][variant='range']) .track:last-of-type { + /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ + left: 0; +} +:host([dir='ltr'][variant='range']) .track:last-of-type { + /* [dir=ltr] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ margin-right: calc( var( --spectrum-slider-handle-width, @@ -390,13 +463,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][variant='range']) .track:last-of-type { /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - padding-right: var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ); - padding-left: 0; /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - right: auto; /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ - left: 0; /* [dir=rtl] .spectrum-Slider--range .spectrum-Slider-track:last-of-type */ margin-left: calc( var( --spectrum-slider-handle-width, @@ -464,7 +530,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #handle { /* [dir=ltr] .spectrum-Slider-handle */ - left: 0; /* [dir=ltr] .spectrum-Slider-handle */ + left: 0; +} +:host([dir='rtl']) #handle { + /* [dir=rtl] .spectrum-Slider-handle */ + right: 0; +} +:host([dir='ltr']) #handle { + /* [dir=ltr] .spectrum-Slider-handle */ margin-left: calc( var( --spectrum-slider-handle-width, @@ -475,7 +548,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) #handle { /* [dir=rtl] .spectrum-Slider-handle */ - right: 0; /* [dir=rtl] .spectrum-Slider-handle */ margin-right: calc( var( --spectrum-slider-handle-width, @@ -524,15 +596,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-animation-duration-100) ) ease-in-out; - outline: none; /* .spectrum-Slider-handle */ - border-color: var( - --spectrum-slider-handle-border-color, - var(--spectrum-global-color-gray-700) - ); - background: var( - --spectrum-slider-handle-background-color, - var(--spectrum-alias-background-color-transparent) - ); + outline: none; } :host([dragging]) #handle, :host([handle-highlight]) #handle, @@ -598,13 +662,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * 2 - ); /* .spectrum-Slider-handle.is-focused:before */ - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)); + ); } :host([dir='ltr']) #input { /* [dir=ltr] .spectrum-Slider-input */ @@ -648,8 +706,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ cursor: default; -webkit-appearance: none; border: 0; - pointer-events: none; /* .spectrum-Slider-input */ - background: transparent; + pointer-events: none; } #input:focus { /* .spectrum-Slider-input:focus */ @@ -665,14 +722,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-dimension-size-50) ); font-size: var(--spectrum-global-dimension-font-size-75); - line-height: var( - --spectrum-global-font-line-height-small, - 1.3 - ); /* .spectrum-Slider-labelContainer */ - color: var( - --spectrum-alias-label-text-color, - var(--spectrum-global-color-gray-700) - ); + line-height: var(--spectrum-global-font-line-height-small, 1.3); } :host([dir='ltr']) #label { /* [dir=ltr] .spectrum-Slider-label */ @@ -688,8 +738,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #value { /* [dir=ltr] .spectrum-Slider-value */ - padding-right: 0; /* [dir=ltr] .spectrum-Slider-value */ - text-align: right; /* [dir=ltr] .spectrum-Slider-value */ + padding-right: 0; +} +:host([dir='rtl']) #value { + /* [dir=rtl] .spectrum-Slider-value */ + padding-left: 0; +} +:host([dir='ltr']) #value { + /* [dir=ltr] .spectrum-Slider-value */ + text-align: right; +} +:host([dir='rtl']) #value { + /* [dir=rtl] .spectrum-Slider-value */ + text-align: left; +} +#value { + /* .spectrum-Slider-value */ + flex-grow: 0; + cursor: default; + font-feature-settings: 'tnum'; +} +:host([dir='ltr']) #value { + /* [dir=ltr] .spectrum-Slider-value */ margin-left: var( --spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200) @@ -697,19 +767,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl']) #value { /* [dir=rtl] .spectrum-Slider-value */ - padding-left: 0; /* [dir=rtl] .spectrum-Slider-value */ - text-align: left; /* [dir=rtl] .spectrum-Slider-value */ margin-right: var( --spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200) ); } -#value { - /* .spectrum-Slider-value */ - flex-grow: 0; - cursor: default; - font-feature-settings: 'tnum'; -} .ticks { /* .spectrum-Slider-ticks */ display: flex; @@ -772,10 +834,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-slider-tick-mark-border-radius, var(--spectrum-alias-border-radius-xsmall) - ); /* .spectrum-Slider-tick:after */ - background-color: var( - --spectrum-slider-tick-mark-color, - var(--spectrum-alias-track-color-default) ); } .tick .tickLabel { @@ -838,15 +896,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([disabled]) #handle { /* .spectrum-Slider.is-disabled .spectrum-Slider-handle */ cursor: default; - pointer-events: none; /* .spectrum-Slider.is-disabled .spectrum-Slider-handle */ - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); - background: var( - --spectrum-alias-background-color-default, - var(--spectrum-global-color-gray-100) - ); + pointer-events: none; } .track:before { /* .spectrum-Slider-track:before */ @@ -855,6 +905,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-300) ); } +#labelContainer { + /* .spectrum-Slider-labelContainer */ + color: var( + --spectrum-alias-label-text-color, + var(--spectrum-global-color-gray-700) + ); +} :host([variant='filled']) .track:first-child:before, #fill:before { /* .spectrum-Slider--filled .spectrum-Slider-track:first-child:before, @@ -871,6 +928,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-300) ); } +#handle { + /* .spectrum-Slider-handle */ + border-color: var( + --spectrum-slider-handle-border-color, + var(--spectrum-global-color-gray-700) + ); + background: var( + --spectrum-slider-handle-background-color, + var(--spectrum-alias-background-color-transparent) + ); +} #handle:hover { /* .spectrum-Slider-handle:hover */ border-color: var( @@ -882,6 +950,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Slider-handle.is-focused */ border-color: var(--spectrum-global-color-gray-800); } +:host([handle-highlight]) #handle:before { + /* .spectrum-Slider-handle.is-focused:before */ + box-shadow: 0 0 0 + var( + --spectrum-alias-focus-ring-size, + var(--spectrum-global-dimension-static-size-25) + ) + var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)); +} :host([dragging]) #handle, #handle:active { /* .spectrum-Slider-handle.is-dragged, @@ -899,6 +976,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-100) ); } +#input { + /* .spectrum-Slider-input */ + background: transparent; +} +.tick:after { + /* .spectrum-Slider-tick:after */ + background-color: var( + --spectrum-slider-tick-mark-color, + var(--spectrum-alias-track-color-default) + ); +} :host([dragging]) #handle { /* .spectrum-Slider-handle.is-dragged */ border-color: var( @@ -924,6 +1012,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-500) ); } +:host([disabled]) #handle { + /* .spectrum-Slider.is-disabled .spectrum-Slider-handle */ + border-color: var( + --spectrum-slider-handle-border-color-disabled, + var(--spectrum-global-color-gray-400) + ); + background: var( + --spectrum-alias-background-color-default, + var(--spectrum-global-color-gray-100) + ); +} :host([disabled]) #handle:active, :host([disabled]) #handle:hover { /* .spectrum-Slider.is-disabled .spectrum-Slider-handle:active, diff --git a/packages/split-button/src/spectrum-split-button.css b/packages/split-button/src/spectrum-split-button.css index 81974a9ab3..125ad5bd09 100644 --- a/packages/split-button/src/spectrum-split-button.css +++ b/packages/split-button/src/spectrum-split-button.css @@ -27,27 +27,51 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) #button { /* [dir=ltr] .spectrum-SplitButton-action */ - margin-left: 0; /* [dir=ltr] .spectrum-SplitButton-action */ + margin-left: 0; +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ + margin-right: 0; +} +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ border-top-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton-action */ - border-top-right-radius: 0; /* [dir=ltr] .spectrum-SplitButton-action */ - border-bottom-right-radius: 0; /* [dir=ltr] .spectrum-SplitButton-action */ - border-bottom-left-radius: var( + ); +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ + border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) ); } +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ + border-top-right-radius: 0; +} :host([dir='rtl']) #button { /* [dir=rtl] .spectrum-SplitButton-action */ - margin-right: 0; /* [dir=rtl] .spectrum-SplitButton-action */ - border-top-right-radius: var( + border-top-left-radius: 0; +} +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ + border-bottom-right-radius: 0; +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ + border-bottom-left-radius: 0; +} +:host([dir='ltr']) #button { + /* [dir=ltr] .spectrum-SplitButton-action */ + border-bottom-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton-action */ - border-top-left-radius: 0; /* [dir=rtl] .spectrum-SplitButton-action */ - border-bottom-left-radius: 0; /* [dir=rtl] .spectrum-SplitButton-action */ + ); +} +:host([dir='rtl']) #button { + /* [dir=rtl] .spectrum-SplitButton-action */ border-bottom-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) @@ -72,10 +96,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-right-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=ltr] .spectrum-SplitButton-action:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) ); } :host([dir='rtl']) #button:after { @@ -83,7 +103,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=rtl] .spectrum-SplitButton-action:after */ + ); +} +:host([dir='ltr']) #button:after { + /* [dir=ltr] .spectrum-SplitButton-action:after */ + border-bottom-right-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +:host([dir='rtl']) #button:after { + /* [dir=rtl] .spectrum-SplitButton-action:after */ border-bottom-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) @@ -91,18 +121,66 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .trigger { /* [dir=ltr] .spectrum-SplitButton-trigger */ - margin-left: 0; /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-top-left-radius: 0; /* [dir=ltr] .spectrum-SplitButton-trigger */ + margin-left: 0; +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + margin-right: 0; +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ + border-top-left-radius: 0; +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + border-top-right-radius: 0; +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton-trigger */ + ); +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + border-top-left-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ border-bottom-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-bottom-left-radius: 0; /* [dir=ltr] .spectrum-SplitButton-trigger */ - border-left-width: 0; /* [dir=ltr] .spectrum-SplitButton-trigger */ + ); +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + border-bottom-left-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ + border-bottom-left-radius: 0; +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + border-bottom-right-radius: 0; +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ + border-left-width: 0; +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ + border-right-width: 0; +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ padding-left: calc( var( --spectrum-button-primary-text-padding-x, @@ -112,29 +190,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) * 4 - ); /* [dir=ltr] .spectrum-SplitButton-trigger */ - padding-right: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) ); } :host([dir='rtl']) .trigger { /* [dir=rtl] .spectrum-SplitButton-trigger */ - margin-right: 0; /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-top-right-radius: 0; /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-top-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-bottom-right-radius: 0; /* [dir=rtl] .spectrum-SplitButton-trigger */ - border-right-width: 0; /* [dir=rtl] .spectrum-SplitButton-trigger */ padding-right: calc( var( --spectrum-button-primary-text-padding-x, @@ -144,7 +203,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) * 4 - ); /* [dir=rtl] .spectrum-SplitButton-trigger */ + ); +} +:host([dir='ltr']) .trigger { + /* [dir=ltr] .spectrum-SplitButton-trigger */ + padding-right: calc( + var(--spectrum-global-dimension-size-150) - + var( + --spectrum-button-primary-border-size, + var(--spectrum-alias-border-size-thick) + ) + ); +} +:host([dir='rtl']) .trigger { + /* [dir=rtl] .spectrum-SplitButton-trigger */ padding-left: calc( var(--spectrum-global-dimension-size-150) - var( @@ -180,10 +252,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=ltr] .spectrum-SplitButton-trigger:after */ - border-bottom-left-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) ); } :host([dir='rtl']) .trigger:after { @@ -191,7 +259,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-right-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=rtl] .spectrum-SplitButton-trigger:after */ + ); +} +:host([dir='ltr']) .trigger:after { + /* [dir=ltr] .spectrum-SplitButton-trigger:after */ + border-bottom-left-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +:host([dir='rtl']) .trigger:after { + /* [dir=rtl] .spectrum-SplitButton-trigger:after */ border-bottom-right-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) @@ -224,30 +302,50 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][left]) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-top-left-radius: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + border-top-left-radius: 0; +} +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + border-top-right-radius: 0; +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-bottom-left-radius: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - margin-right: 0; + ); } :host([dir='rtl'][left]) #button { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-top-right-radius: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ border-top-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + ); +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + border-bottom-right-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ border-bottom-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ - border-bottom-right-radius: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + ); +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + border-bottom-left-radius: 0; +} +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + border-bottom-right-radius: 0; +} +:host([dir='ltr'][left]) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action */ margin-right: 0; } :host([dir='ltr'][left]) #button, @@ -256,6 +354,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ * [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ margin-left: 0; } +:host([dir='rtl'][left]) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action */ + margin-right: 0; +} :host([dir='ltr'][left][variant='cta']) #button { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ padding-left: calc( @@ -271,10 +373,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ - margin-left: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) ); } :host([dir='rtl'][left][variant='cta']) #button { @@ -292,7 +390,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ + ); +} +:host([dir='ltr'][left][variant='cta']) #button { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ + margin-left: var( + --spectrum-button-primary-border-size, + var(--spectrum-alias-border-size-thick) + ); +} +:host([dir='rtl'][left][variant='cta']) #button { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta */ margin-right: var( --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) @@ -303,15 +411,45 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + ); +} +:host([dir='rtl'][left]) #button:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + border-top-right-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +:host([dir='ltr'][left]) #button:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + ); +} +:host([dir='rtl'][left]) #button:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + border-top-left-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='ltr'][left]) #button:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ border-bottom-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + ); +} +:host([dir='rtl'][left]) #button:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + border-bottom-left-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='ltr'][left]) #button:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ border-bottom-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) @@ -319,41 +457,87 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='rtl'][left]) #button:after { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-top-right-radius: var( + border-bottom-right-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ + ); +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + margin-right: 0; +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + margin-left: 0; +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ border-top-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-left-radius: var( + ); +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-action:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) ); } :host([dir='ltr'][left]) .trigger { /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - margin-right: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-left-radius: var( + border-top-right-radius: 0; +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-top-left-radius: 0; +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-bottom-right-radius: 0; +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-bottom-left-radius: 0; +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-bottom-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-right-radius: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-right-radius: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-left-radius: var( + ); +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-bottom-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + ); +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ border-left-width: var( --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-right-width: 0; /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + ); +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-right-width: var( + --spectrum-button-primary-border-size, + var(--spectrum-alias-border-size-thick) + ); +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-right-width: 0; +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + border-left-width: 0; +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ padding-right: calc( var( --spectrum-button-primary-text-padding-x, @@ -363,33 +547,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) * 4 - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - padding-left: calc( - var(--spectrum-global-dimension-size-150) - - var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ) ); } :host([dir='rtl'][left]) .trigger { /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - margin-left: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-top-left-radius: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-left-radius: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-bottom-right-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-right-width: var( - --spectrum-button-primary-border-size, - var(--spectrum-alias-border-size-thick) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ - border-left-width: 0; /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ padding-left: calc( var( --spectrum-button-primary-text-padding-x, @@ -399,7 +560,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick) ) * 4 - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + ); +} +:host([dir='ltr'][left]) .trigger { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ + padding-left: calc( + var(--spectrum-global-dimension-size-150) - + var( + --spectrum-button-primary-border-size, + var(--spectrum-alias-border-size-thick) + ) + ); +} +:host([dir='rtl'][left]) .trigger { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger */ padding-right: calc( var(--spectrum-global-dimension-size-150) - var( @@ -427,18 +601,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-left-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-top-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-right-radius: var( - --spectrum-alias-border-radius-small, - var(--spectrum-global-dimension-size-25) - ); /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ - border-bottom-left-radius: var( - --spectrum-button-primary-border-radius, - var(--spectrum-alias-border-radius-large) ); } :host([dir='rtl'][left]) .trigger:after { @@ -446,15 +608,45 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-top-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + ); +} +:host([dir='ltr'][left]) .trigger:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + border-top-right-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +:host([dir='rtl'][left]) .trigger:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ border-top-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + ); +} +:host([dir='ltr'][left]) .trigger:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + border-bottom-right-radius: var( + --spectrum-alias-border-radius-small, + var(--spectrum-global-dimension-size-25) + ); +} +:host([dir='rtl'][left]) .trigger:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ border-bottom-left-radius: var( --spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25) - ); /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + ); +} +:host([dir='ltr'][left]) .trigger:after { + /* [dir=ltr] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ + border-bottom-left-radius: var( + --spectrum-button-primary-border-radius, + var(--spectrum-alias-border-radius-large) + ); +} +:host([dir='rtl'][left]) .trigger:after { + /* [dir=rtl] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after */ border-bottom-right-radius: var( --spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large) diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 5ed344e104..3123edb68a 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -32,11 +32,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-statuslight-info-text-font-weight, var(--spectrum-alias-body-text-font-weight) ); - line-height: 1.44; /* .spectrum-StatusLight */ - color: var( - --spectrum-statuslight-info-text-color, - var(--spectrum-alias-text-color) - ); + line-height: 1.44; } #root:before { /* .spectrum-StatusLight:before */ @@ -64,10 +60,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([variant='neutral']) #root { /* .spectrum-StatusLight--neutral */ - font-style: italic; /* .spectrum-StatusLight--neutral */ + font-style: italic; +} +#root { + /* .spectrum-StatusLight */ color: var( - --spectrum-statuslight-neutral-text-color, - var(--spectrum-global-color-gray-700) + --spectrum-statuslight-info-text-color, + var(--spectrum-alias-text-color) ); } :host([disabled]) #root, @@ -118,6 +117,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-semantic-informative-color-status) ); } +:host([variant='neutral']) #root { + /* .spectrum-StatusLight--neutral */ + color: var( + --spectrum-statuslight-neutral-text-color, + var(--spectrum-global-color-gray-700) + ); +} :host([variant='neutral']) #root:before { /* .spectrum-StatusLight--neutral:before */ background-color: var( diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index d7ef26b9a4..c5c1bd6690 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -177,10 +177,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-switch-track-height, var(--spectrum-global-dimension-size-175) ) / 2 - ); /* .spectrum-Switch-switch */ - background-color: var( - --spectrum-switch-track-color, - var(--spectrum-global-color-gray-300) ); } #switch:before { @@ -188,7 +184,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: block; position: absolute; content: ''; - box-sizing: border-box; /* .spectrum-Switch-switch:before */ + box-sizing: border-box; +} +:host([dir='ltr']) #switch:before { + /* [dir=ltr] .spectrum-Switch-switch:before */ + left: 0; +} +:host([dir='rtl']) #switch:before { + /* [dir=rtl] .spectrum-Switch-switch:before */ + right: 0; +} +#switch:before { + /* .spectrum-Switch-switch:before */ transition: background var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, @@ -210,23 +217,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-border-size-thick) ); border-radius: var(--spectrum-switch-handle-border-radius); - border-style: solid; /* .spectrum-Switch-switch:before */ - background-color: var( - --spectrum-switch-handle-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-switch-handle-border-color, - var(--spectrum-global-color-gray-600) - ); -} -:host([dir='ltr']) #switch:before { - /* [dir=ltr] .spectrum-Switch-switch:before */ - left: 0; -} -:host([dir='rtl']) #switch:before { - /* [dir=rtl] .spectrum-Switch-switch:before */ - right: 0; + border-style: solid; } :host([dir='ltr']) #switch:after { /* [dir=ltr] .spectrum-Switch-switch:after */ @@ -264,6 +255,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ease-out, margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out; } +#switch { + /* .spectrum-Switch-switch */ + background-color: var( + --spectrum-switch-track-color, + var(--spectrum-global-color-gray-300) + ); +} +#switch:before { + /* .spectrum-Switch-switch:before */ + background-color: var( + --spectrum-switch-handle-background-color, + var(--spectrum-global-color-gray-75) + ); + border-color: var( + --spectrum-switch-handle-border-color, + var(--spectrum-global-color-gray-600) + ); +} #input ~ #label { /* .spectrum-Switch-input~.spectrum-Switch-label */ color: var(--spectrum-switch-text-color, var(--spectrum-alias-text-color)); diff --git a/packages/tabs/src/spectrum-tab.css b/packages/tabs/src/spectrum-tab.css index 516873f8d4..ab069d15a0 100644 --- a/packages/tabs/src/spectrum-tab.css +++ b/packages/tabs/src/spectrum-tab.css @@ -34,11 +34,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-out; cursor: pointer; - outline: none; /* .spectrum-Tabs-item */ - color: var( - --spectrum-tabs-text-color, - var(--spectrum-alias-label-text-color) - ); + outline: none; } :host([disabled]), :host([disabled]) #itemLabel { @@ -54,8 +50,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick) ) - ); /* .spectrum-Tabs-item .spectrum-Icon */ - color: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color)); + ); } :host([dir='ltr']) slot[name='icon'] + #itemLabel { /* [dir=ltr] .spectrum-Tabs-item .spectrum-Icon+.spectrum-Tabs-itemLabel */ @@ -138,6 +133,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ /* .spectrum-Tabs-itemLabel:empty */ display: none; } +:host { + /* .spectrum-Tabs-item */ + color: var( + --spectrum-tabs-text-color, + var(--spectrum-alias-label-text-color) + ); +} +::slotted([slot='icon']) { + /* .spectrum-Tabs-item .spectrum-Icon */ + color: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color)); +} :host(:hover) { /* .spectrum-Tabs-item:hover */ color: var( diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index 1ef275d386..2a5ef66ffe 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -26,11 +26,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100) ); - vertical-align: top; /* .spectrum-Tabs */ - border-bottom-color: var( - --spectrum-tabs-rule-color, - var(--spectrum-global-color-gray-200) - ); + vertical-align: top; } :host([dir='ltr']) ::slotted(*):before { /* [dir=ltr] .spectrum-Tabs-item:before */ @@ -74,10 +70,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-radius: var( --spectrum-tabs-rule-border-radius, var(--spectrum-global-dimension-static-size-10) - ); /* .spectrum-Tabs-selectionIndicator */ - background-color: var( - --spectrum-tabs-selection-indicator-color, - var(--spectrum-global-color-gray-900) ); } :host([compact]) ::slotted(*) { @@ -91,7 +83,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick) ) - ); /* .spectrum-Tabs--compact .spectrum-Tabs-item, + ); +} +:host([compact]) ::slotted(*) { + /* .spectrum-Tabs--compact .spectrum-Tabs-item, * .spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon */ height: calc( var( @@ -160,11 +155,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([quiet]) { /* .spectrum-Tabs--quiet */ - display: inline-flex; /* .spectrum-Tabs--quiet */ - border-bottom-color: var( - --spectrum-tabs-quiet-rule-color, - var(--spectrum-alias-border-color-transparent) - ); + display: inline-flex; } :host([dir='ltr'][direction='vertical']) { /* [dir=ltr] .spectrum-Tabs--vertical */ @@ -172,11 +163,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick) ) - solid; /* [dir=ltr] .spectrum-Tabs--vertical */ - border-left-color: var( - --spectrum-tabs-vertical-rule-color, - var(--spectrum-global-color-gray-200) - ); + solid; } :host([dir='rtl'][direction='vertical']) { /* [dir=rtl] .spectrum-Tabs--vertical */ @@ -184,11 +171,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick) ) - solid; /* [dir=rtl] .spectrum-Tabs--vertical */ - border-right-color: var( - --spectrum-tabs-vertical-rule-color, - var(--spectrum-global-color-gray-200) - ); + solid; } :host([direction='vertical']) { /* .spectrum-Tabs--vertical */ @@ -281,7 +264,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin-bottom: var( --spectrum-tabs-compact-vertical-item-gap, var(--spectrum-global-dimension-size-50) - ); /* .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item, + ); +} +:host([direction='vertical'][compact]) ::slotted(*) { + /* .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item, * .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon */ height: var( --spectrum-tabs-compact-vertical-item-height, @@ -290,14 +276,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr'][direction='vertical']) #selectionIndicator { /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ - left: 0; /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ + left: 0; +} +:host([dir='rtl'][direction='vertical']) #selectionIndicator { + /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ + right: 0; +} +:host([dir='ltr'][direction='vertical']) #selectionIndicator { + /* [dir=ltr] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ left: calc( -1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) ); } :host([dir='rtl'][direction='vertical']) #selectionIndicator { /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ - right: 0; /* [dir=rtl] .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */ right: calc( -1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) ); @@ -310,6 +302,41 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-border-size-thick) ); } +:host { + /* .spectrum-Tabs */ + border-bottom-color: var( + --spectrum-tabs-rule-color, + var(--spectrum-global-color-gray-200) + ); +} +:host([dir='ltr'][direction='vertical']) { + /* [dir=ltr] .spectrum-Tabs--vertical */ + border-left-color: var( + --spectrum-tabs-vertical-rule-color, + var(--spectrum-global-color-gray-200) + ); +} +:host([dir='rtl'][direction='vertical']) { + /* [dir=rtl] .spectrum-Tabs--vertical */ + border-right-color: var( + --spectrum-tabs-vertical-rule-color, + var(--spectrum-global-color-gray-200) + ); +} +#selectionIndicator { + /* .spectrum-Tabs-selectionIndicator */ + background-color: var( + --spectrum-tabs-selection-indicator-color, + var(--spectrum-global-color-gray-900) + ); +} +:host([quiet]) { + /* .spectrum-Tabs--quiet */ + border-bottom-color: var( + --spectrum-tabs-quiet-rule-color, + var(--spectrum-alias-border-color-transparent) + ); +} :host([quiet]) #selectionIndicator { /* .spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator */ background-color: var( diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 3f14fe4369..5d0dddff2a 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -64,35 +64,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, background-color var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; /* .spectrum-Tags-item */ - color: var( - --spectrum-tag-text-color, - var(--spectrum-global-color-gray-700) - ); - background-color: var( - --spectrum-tag-background-color, - var(--spectrum-global-color-gray-75) - ); - border-color: var( - --spectrum-tag-border-color, - var(--spectrum-global-color-gray-600) - ); + ease-in-out; } :host([disabled]) { /* .spectrum-Tags-item.is-disabled */ - pointer-events: none; /* .spectrum-Tags-item.is-disabled */ - color: var( - --spectrum-tag-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); - background-color: var( - --spectrum-tag-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); - border-color: var( - --spectrum-tag-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); + pointer-events: none; } :host([dir='ltr']) > ::slotted([slot='avatar']), :host([dir='ltr']) > ::slotted([slot='icon']) { @@ -193,6 +169,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ white-space: nowrap; text-overflow: ellipsis; } +:host { + /* .spectrum-Tags-item */ + color: var( + --spectrum-tag-text-color, + var(--spectrum-global-color-gray-700) + ); + background-color: var( + --spectrum-tag-background-color, + var(--spectrum-global-color-gray-75) + ); + border-color: var( + --spectrum-tag-border-color, + var(--spectrum-global-color-gray-600) + ); +} .clear-button { /* .spectrum-Tags-item .spectrum-ClearButton */ color: var( @@ -410,6 +401,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-red-500) ); } +:host([disabled]) { + /* .spectrum-Tags-item.is-disabled */ + color: var( + --spectrum-tag-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); + background-color: var( + --spectrum-tag-background-color-disabled, + var(--spectrum-global-color-gray-200) + ); + border-color: var( + --spectrum-tag-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); +} :host([disabled]) ::slotted([slot='avatar']) { /* .spectrum-Tags-item.is-disabled .spectrum-Avatar */ opacity: var(--spectrum-avatar-size-100-opacity-disabled, 0.3); diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 38bebde151..8a898277d2 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -86,19 +86,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ease-in-out; outline: none; -webkit-appearance: none; - -moz-appearance: textfield; /* .spectrum-Textfield-input */ - background-color: var( - --spectrum-textfield-background-color, - var(--spectrum-global-color-gray-50) - ); - border-color: var( - --spectrum-textfield-border-color, - var(--spectrum-alias-border-color) - ); - color: var( - --spectrum-textfield-text-color, - var(--spectrum-alias-text-color) - ); + -moz-appearance: textfield; } #input::placeholder { /* .spectrum-Textfield-input::placeholder */ @@ -112,11 +100,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); transition: color var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; - opacity: 1; /* .spectrum-Textfield-input::placeholder */ - color: var( - --spectrum-textfield-placeholder-text-color, - var(--spectrum-alias-placeholder-text-color) - ); + opacity: 1; } #input:lang(ja)::placeholder, #input:lang(ko)::placeholder, @@ -264,15 +248,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ border-left-width: 0; border-right-width: 0; resize: none; - overflow-y: hidden; /* .spectrum-Textfield--quiet .spectrum-Textfield-input */ - background-color: var( - --spectrum-textfield-quiet-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-textfield-quiet-border-color, - var(--spectrum-alias-border-color) - ); + overflow-y: hidden; } :host([dir='ltr'][invalid][quiet]) #input { /* [dir=ltr] .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input */ @@ -366,10 +342,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-textfield-validation-icon-height-error, var(--spectrum-global-dimension-size-225) ) / 2 - ); /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ - color: var( - --spectrum-textfield-validation-icon-color-error, - var(--spectrum-semantic-negative-color-icon) ); } :host([dir='ltr'][quiet][invalid]) .icon { @@ -413,10 +385,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --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, - var(--spectrum-global-color-green-600) ); } :host([dir='ltr'][quiet][valid]) .icon { @@ -462,10 +430,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225) ) / 2 - ); /* .spectrum-Textfield-icon */ - color: var( - --spectrum-textfield-icon-color, - var(--spectrum-alias-icon-color) ); } :host([dir='ltr'][quiet]) .icon-workflow { @@ -567,6 +531,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-icon-color-down) ); } +:host([valid]) .icon { + /* .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon */ + color: var( + --spectrum-semantic-positive-color-icon, + var(--spectrum-global-color-green-600) + ); +} +:host([invalid]) .icon { + /* .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon */ + color: var( + --spectrum-textfield-validation-icon-color-error, + var(--spectrum-semantic-negative-color-icon) + ); +} :host([invalid]:hover) #input { /* .spectrum-Textfield.is-invalid:hover .spectrum-Textfield-input */ border-color: var( @@ -588,6 +566,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-global-color-gray-500) ); } +.icon-workflow { + /* .spectrum-Textfield-icon */ + color: var( + --spectrum-textfield-icon-color, + var(--spectrum-alias-icon-color) + ); +} +#input { + /* .spectrum-Textfield-input */ + background-color: var( + --spectrum-textfield-background-color, + var(--spectrum-global-color-gray-50) + ); + border-color: var( + --spectrum-textfield-border-color, + var(--spectrum-alias-border-color) + ); + color: var( + --spectrum-textfield-text-color, + var(--spectrum-alias-text-color) + ); +} +#input::placeholder { + /* .spectrum-Textfield-input::placeholder */ + color: var( + --spectrum-textfield-placeholder-text-color, + var(--spectrum-alias-placeholder-text-color) + ); +} #input:focus, :host([focused]) #input { /* .spectrum-Textfield-input:focus, @@ -666,6 +673,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-text-color-disabled) ); } +:host([quiet]) #input { + /* .spectrum-Textfield--quiet .spectrum-Textfield-input */ + background-color: var( + --spectrum-textfield-quiet-background-color, + var(--spectrum-alias-background-color-transparent) + ); + border-color: var( + --spectrum-textfield-quiet-border-color, + var(--spectrum-alias-border-color) + ); +} :host([focused][quiet]) #input, :host([quiet]) #input:focus { /* .is-focused.spectrum-Textfield--quiet .spectrum-Textfield-input, diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index ec3605439c..040d360689 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -15,10 +15,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-right: var( --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) - ); /* [dir=ltr] .spectrum-Toast */ - padding-left: var( - --spectrum-toast-neutral-padding-left, - var(--spectrum-global-dimension-size-200) ); } :host([dir='rtl']) { @@ -26,7 +22,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: var( --spectrum-toast-neutral-padding-right, var(--spectrum-global-dimension-size-100) - ); /* [dir=rtl] .spectrum-Toast */ + ); +} +:host([dir='ltr']) { + /* [dir=ltr] .spectrum-Toast */ + padding-left: var( + --spectrum-toast-neutral-padding-left, + var(--spectrum-global-dimension-size-200) + ); +} +:host([dir='rtl']) { + /* [dir=rtl] .spectrum-Toast */ padding-right: var( --spectrum-toast-neutral-padding-left, var(--spectrum-global-dimension-size-200) @@ -58,30 +64,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-toast-neutral-text-font-weight, var(--spectrum-global-font-weight-bold) ); - -webkit-font-smoothing: antialiased; /* .spectrum-Toast */ - background-color: var( - --spectrum-toast-neutral-background-color, - var(--spectrum-global-color-static-gray-700) - ); - color: var( - --spectrum-toast-neutral-background-color, - var(--spectrum-global-color-static-gray-700) - ); + -webkit-font-smoothing: antialiased; } :host([dir='ltr']) .type { /* [dir=ltr] .spectrum-Toast-typeIcon */ margin-right: var( --spectrum-toast-neutral-icon-padding-right, var(--spectrum-global-dimension-size-150) - ); /* [dir=ltr] .spectrum-Toast-typeIcon */ - margin-left: 0; + ); } :host([dir='rtl']) .type { /* [dir=rtl] .spectrum-Toast-typeIcon */ margin-left: var( --spectrum-toast-neutral-icon-padding-right, var(--spectrum-global-dimension-size-150) - ); /* [dir=rtl] .spectrum-Toast-typeIcon */ + ); +} +:host([dir='ltr']) .type { + /* [dir=ltr] .spectrum-Toast-typeIcon */ + margin-left: 0; +} +:host([dir='rtl']) .type { + /* [dir=rtl] .spectrum-Toast-typeIcon */ margin-right: 0; } .type { @@ -89,27 +93,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ flex-shrink: 0; flex-grow: 0; margin-top: var(--spectrum-global-dimension-size-85); - margin-bottom: var( - --spectrum-global-dimension-size-85 - ); /* .spectrum-Toast-typeIcon */ - color: #fff; + margin-bottom: var(--spectrum-global-dimension-size-85); } :host([dir='ltr']) .content { /* [dir=ltr] .spectrum-Toast-content */ padding-right: var( --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 */ - text-align: left; + ); } :host([dir='rtl']) .content { /* [dir=rtl] .spectrum-Toast-content */ padding-left: var( --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 */ + ); +} +:host([dir='ltr']) .content { + /* [dir=ltr] .spectrum-Toast-content */ + padding-left: 0; +} +:host([dir='rtl']) .content { + /* [dir=rtl] .spectrum-Toast-content */ + padding-right: 0; +} +:host([dir='ltr']) .content { + /* [dir=ltr] .spectrum-Toast-content */ + text-align: left; +} +:host([dir='rtl']) .content { + /* [dir=rtl] .spectrum-Toast-content */ text-align: right; } .content { @@ -130,10 +143,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ line-height: var( --spectrum-toast-info-text-line-height, var(--spectrum-alias-body-text-line-height) - ); /* .spectrum-Toast-content */ - color: var( - --spectrum-toast-neutral-text-color, - var(--spectrum-global-color-static-white) ); } .buttons { @@ -175,12 +184,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host([dir='ltr']) .body ::slotted([slot='action']) { /* [dir=ltr] .spectrum-Toast-body .spectrum-Button */ - float: right; /* [dir=ltr] .spectrum-Toast-body .spectrum-Button */ + float: right; +} +:host([dir='rtl']) .body ::slotted([slot='action']) { + /* [dir=rtl] .spectrum-Toast-body .spectrum-Button */ + float: left; +} +:host([dir='ltr']) .body ::slotted([slot='action']) { + /* [dir=ltr] .spectrum-Toast-body .spectrum-Button */ margin-right: var(--spectrum-global-dimension-size-130); } :host([dir='rtl']) .body ::slotted([slot='action']) { /* [dir=rtl] .spectrum-Toast-body .spectrum-Button */ - float: left; /* [dir=rtl] .spectrum-Toast-body .spectrum-Button */ margin-left: var(--spectrum-global-dimension-size-130); } :host([dir='ltr']) .body + .buttons { @@ -188,19 +203,53 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ padding-left: var( --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 */ - border-left-style: solid; + ); } :host([dir='rtl']) .body + .buttons { /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ padding-right: var( --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 */ + ); +} +:host([dir='ltr']) .body + .buttons { + /* [dir=ltr] .spectrum-Toast-body+.spectrum-Toast-buttons */ + border-left-width: 1px; +} +:host([dir='rtl']) .body + .buttons { + /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ + border-right-width: 1px; +} +:host([dir='ltr']) .body + .buttons { + /* [dir=ltr] .spectrum-Toast-body+.spectrum-Toast-buttons */ + border-left-style: solid; +} +:host([dir='rtl']) .body + .buttons { + /* [dir=rtl] .spectrum-Toast-body+.spectrum-Toast-buttons */ border-right-style: solid; } +:host { + /* .spectrum-Toast */ + background-color: var( + --spectrum-toast-neutral-background-color, + var(--spectrum-global-color-static-gray-700) + ); + color: var( + --spectrum-toast-neutral-background-color, + var(--spectrum-global-color-static-gray-700) + ); +} +.content { + /* .spectrum-Toast-content */ + color: var( + --spectrum-toast-neutral-text-color, + var(--spectrum-global-color-static-white) + ); +} +.type { + /* .spectrum-Toast-typeIcon */ + color: #fff; +} :host([dir='ltr']) .buttons { /* [dir=ltr] .spectrum-Toast-buttons */ border-left-color: hsla(0, 0%, 100%, 0.2); diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 9ef043904b..aa3b4297a5 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -19,7 +19,51 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 0.13s); - pointer-events: none; /* .spectrum-Tooltip */ + pointer-events: none; +} +:host([open]) { + /* .spectrum-Tooltip.is-open */ + visibility: visible; + opacity: 1; + transition-delay: 0ms; + pointer-events: auto; +} +:host([placement*='bottom'][open]) { + /* .spectrum-Tooltip--bottom.is-open */ + transform: translateY( + var( + --spectrum-picker-popover-offset-y, + var(--spectrum-global-dimension-size-75) + ) + ); +} +:host([placement*='top'][open]) { + /* .spectrum-Tooltip--top.is-open */ + transform: translateY( + calc( + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + ) + ); +} +:host([placement*='right'][open]) { + /* .spectrum-Tooltip--right.is-open */ + transform: translateX( + var( + --spectrum-picker-popover-offset-y, + var(--spectrum-global-dimension-size-75) + ) + ); +} +:host([placement*='left'][open]) { + /* .spectrum-Tooltip--left.is-open */ + transform: translateX( + calc( + -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) + ) + ); +} +:host { + /* .spectrum-Tooltip */ position: relative; left: 0; top: 0; @@ -66,56 +110,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ cursor: default; -webkit-user-select: none; -moz-user-select: none; - user-select: none; /* .spectrum-Tooltip */ - background-color: var( - --spectrum-tooltip-background-color, - var(--spectrum-global-color-static-gray-700) - ); - color: var( - --spectrum-tooltip-text-color, - var(--spectrum-global-color-static-white) - ); -} -:host([open]) { - /* .spectrum-Tooltip.is-open */ - visibility: visible; - opacity: 1; - transition-delay: 0ms; - pointer-events: auto; -} -:host([placement*='bottom'][open]) { - /* .spectrum-Tooltip--bottom.is-open */ - transform: translateY( - var( - --spectrum-picker-popover-offset-y, - var(--spectrum-global-dimension-size-75) - ) - ); -} -:host([placement*='top'][open]) { - /* .spectrum-Tooltip--top.is-open */ - transform: translateY( - calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) - ) - ); -} -:host([placement*='right'][open]) { - /* .spectrum-Tooltip--right.is-open */ - transform: translateX( - var( - --spectrum-picker-popover-offset-y, - var(--spectrum-global-dimension-size-75) - ) - ); -} -:host([placement*='left'][open]) { - /* .spectrum-Tooltip--left.is-open */ - transform: translateX( - calc( - -1 * var(--spectrum-picker-popover-offset-y, var(--spectrum-global-dimension-size-75)) - ) - ); + user-select: none; } p { /* .spectrum-Tooltip p */ @@ -145,11 +140,7 @@ p { --spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50) ) - solid transparent; /* .spectrum-Tooltip-tip */ - border-top-color: var( - --spectrum-tooltip-background-color, - var(--spectrum-global-color-static-gray-700) - ); + solid transparent; } :host([placement*='left']) #tip, :host([placement*='right']) #tip { @@ -215,10 +206,6 @@ p { --spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125) ) - ); /* [dir=ltr] .spectrum-Tooltip-typeIcon */ - margin-right: var( - --spectrum-tooltip-icon-margin-x, - var(--spectrum-global-dimension-size-100) ); } :host([dir='rtl']) ::slotted([slot='icon']) { @@ -232,7 +219,17 @@ p { --spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125) ) - ); /* [dir=rtl] .spectrum-Tooltip-typeIcon */ + ); +} +:host([dir='ltr']) ::slotted([slot='icon']) { + /* [dir=ltr] .spectrum-Tooltip-typeIcon */ + margin-right: var( + --spectrum-tooltip-icon-margin-x, + var(--spectrum-global-dimension-size-100) + ); +} +:host([dir='rtl']) ::slotted([slot='icon']) { + /* [dir=rtl] .spectrum-Tooltip-typeIcon */ margin-left: var( --spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100) @@ -259,6 +256,24 @@ p { var(--spectrum-global-dimension-font-size-200) ); } +:host { + /* .spectrum-Tooltip */ + background-color: var( + --spectrum-tooltip-background-color, + var(--spectrum-global-color-static-gray-700) + ); + color: var( + --spectrum-tooltip-text-color, + var(--spectrum-global-color-static-white) + ); +} +#tip { + /* .spectrum-Tooltip-tip */ + border-top-color: var( + --spectrum-tooltip-background-color, + var(--spectrum-global-color-static-gray-700) + ); +} .spectrum-Tooltip--error, :host([variant='negative']) { /* .spectrum-Tooltip--error, diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index 524c8ae88b..795ba71d44 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -19,7 +19,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 0.13s); - pointer-events: none; /* .spectrum-Underlay */ + pointer-events: none; +} +:host([open]) { + /* .spectrum-Underlay.is-open */ + visibility: visible; + opacity: 1; + transition-delay: 0ms; + pointer-events: auto; +} +:host { + /* .spectrum-Underlay */ position: fixed; top: 0; right: 0; @@ -47,18 +57,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-dialog-confirm-background-exit-animation-duration, var(--spectrum-global-animation-duration-300) ) - ); /* .spectrum-Underlay */ - background: var( - --spectrum-dialog-confirm-overlay-background-color, - var(--spectrum-alias-background-color-modal-overlay) - ); + ); } :host([open]) { /* .spectrum-Underlay.is-open */ - visibility: visible; - opacity: 1; - transition-delay: 0ms; - pointer-events: auto; /* .spectrum-Underlay.is-open */ transition: opacity var( --spectrum-dialog-confirm-background-entry-animation-duration, @@ -66,3 +68,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ) cubic-bezier(0, 0, 0.4, 1) 0ms; } +:host { + /* .spectrum-Underlay */ + background: var( + --spectrum-dialog-confirm-overlay-background-color, + var(--spectrum-alias-background-color-modal-overlay) + ); +} diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js index fffae24790..12c6cc8e4d 100644 --- a/scripts/process-spectrum-postcss-plugin.js +++ b/scripts/process-spectrum-postcss-plugin.js @@ -590,17 +590,8 @@ class SpectrumProcessor { appendRule(selectors, nodes, comment) { if (selectors.length === 0) return; - const selector = selectors.join(','); - let parentRule; - this.result.root.walkRules(selector, (rule) => { - parentRule = rule; - return false; - }); - - if (!parentRule) { - parentRule = postcss.rule({ selectors }); - this.result.root.append(parentRule); - } + const parentRule = postcss.rule({ selectors }); + this.result.root.append(parentRule); if (comment) { comment = postcss.comment({ text: comment }); diff --git a/test/visual/stories.js b/test/visual/stories.js index 4995d1832c..39655f3715 100644 --- a/test/visual/stories.js +++ b/test/visual/stories.js @@ -49,6 +49,8 @@ module.exports = [ 'bar-loader--over-background-side-label', 'actionbutton--default', 'actionbutton--emphasized', + 'actionbutton--emphasized-and-quiet', + 'actionbutton--quiet', 'actionbutton--w-icon-button', 'actionbutton--icon-only-button', 'actionbutton--hold-affordance',