fix: stop merging selectors in a way that alters the cascade

adobe · Nov 24, 2020 · 532304f · 532304f
1 parent e55e8a5
commit 532304f
Show file tree

Hide file tree

Showing 44 changed files with 1,748 additions and 1,022 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +164,21 @@ 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)
     );
 }
 :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(