fix: remove sass nesting in favor of nested specs

adobe · Mar 28, 2024 · a2593f7 · a2593f7
1 parent 9186c5c
commit a2593f7
Show file tree

Hide file tree

Showing 22 changed files with 472 additions and 488 deletions.
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
@@ -61,14 +61,14 @@ governing permissions and limitations under the License.
   &.is-open {
     display: flex;
   }
+}
 
-  &--info {
-    background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
-  }
+.spectrum-AlertBanner--info {
+  background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
+}
 
-  &--negative {
-    background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
-  }
+.spectrum-AlertBanner--negative {
+  background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
 }
 
 .spectrum-AlertBanner-body {

diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
@@ -59,16 +59,16 @@ governing permissions and limitations under the License.
     margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
     flex-shrink: 0;
   }
+}
 
-  &--warning {
-    /* @passthrough */
-    --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
-  }
+.spectrum-AlertDialog--warning {
+  /* @passthrough */
+  --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
+}
 
-  &--error {
-    /* @passthrough */
-    --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
-  }
+.spectrum-AlertDialog--error {
+  /* @passthrough */
+  --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
 }
 
 .spectrum-AlertDialog-grid {

diff --git a/components/badge/index.css b/components/badge/index.css
@@ -22,16 +22,6 @@ governing permissions and limitations under the License.
   /* text and icon color default white for all t-shirt sizes and all themes */
   --spectrum-badge-label-icon-color: var(--spectrum-white);
 
-  /* text and icon color is black for these background colors */
-  &--orange, &--yellow, &--chartreuse, &--celery {
-    --spectrum-badge-label-icon-color: var(--spectrum-black);
-  }
-
-  /* dark theme all non-semantic colors are black */
-  &--gray, &--red, &--green, &--seafoam, &--cyan, &--blue, &--indigo, &--purple, &--fuchsia, &--magenta {
-    --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
-  }
-
   /* background color default for all t-shirt sizes and all themes */
   --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 
@@ -81,6 +71,27 @@ governing permissions and limitations under the License.
   --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
 }
 
+/* text and icon color is black for these background colors */
+.spectrum-Badge--orange,
+.spectrum-Badge--yellow,
+.spectrum-Badge--chartreuse,
+.spectrum-Badge--celery {
+  --spectrum-badge-label-icon-color: var(--spectrum-black);
+}
+
+/* dark theme all non-semantic colors are black */
+.spectrum-Badge--gray,
+.spectrum-Badge--red,
+.spectrum-Badge--green,
+.spectrum-Badge--seafoam,
+.spectrum-Badge--cyan,
+.spectrum-Badge--blue,
+.spectrum-Badge--indigo,
+.spectrum-Badge--purple,
+.spectrum-Badge--fuchsia,
+.spectrum-Badge--magenta {
+  --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
+}
 
 .spectrum-Badge--sizeS {
   --spectrum-badge-height: var(--spectrum-component-height-75);
@@ -162,116 +173,117 @@ governing permissions and limitations under the License.
                   var(--spectrum-badge-background-color-default));
   color: var(--mod-badge-label-icon-color,
             var(--spectrum-badge-label-icon-color));
+}
 
-  /* background color variants */
-  &--neutral {
-    background: var(--mod-badge-background-color-default,
-                    var(--spectrum-badge-background-color-default));
-  }
+/* background color variants */
+.spectrum-Badge--neutral {
+  background: var(--mod-badge-background-color-default,
+                  var(--spectrum-badge-background-color-default));
+}
 
-  &--accent {
-    background: var(--mod-badge-background-color-accent,
-                    var(--spectrum-badge-background-color-accent));
-  }
+.spectrum-Badge--accent {
+  background: var(--mod-badge-background-color-accent,
+                  var(--spectrum-badge-background-color-accent));
+}
 
-  &--informative {
-    background: var(--mod-badge-background-color-informative,
-                    var(--spectrum-badge-background-color-informative));
-  }
+.spectrum-Badge--informative {
+  background: var(--mod-badge-background-color-informative,
+                  var(--spectrum-badge-background-color-informative));
+}
 
-  &--negative {
-    background: var(--mod-badge-background-color-negative,
-                    var(--spectrum-badge-background-color-negative));
-  }
+.spectrum-Badge--negative {
+  background: var(--mod-badge-background-color-negative,
+                  var(--spectrum-badge-background-color-negative));
+}
 
-  &--positive {
-    background: var(--mod-badge-background-color-positive,
-                    var(--spectrum-badge-background-color-positive));
-  }
+.spectrum-Badge--positive {
+  background: var(--mod-badge-background-color-positive,
+                  var(--spectrum-badge-background-color-positive));
+}
 
-  &--notice {
-    background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
-  }
+.spectrum-Badge--notice {
+  background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
+}
 
-  /* non-semantic colors */
-  &--gray {
-    background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
-  }
+/* non-semantic colors */
+.spectrum-Badge--gray {
+  background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
+}
 
-  &--red {
-    background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
-  }
+.spectrum-Badge--red {
+  background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
+}
 
-  &--orange {
-    background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
-  }
+.spectrum-Badge--orange {
+  background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
+}
 
-  &--yellow {
-    background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
-  }
+.spectrum-Badge--yellow {
+  background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
+}
 
-  &--chartreuse {
-    background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
-  }
+.spectrum-Badge--chartreuse {
+  background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
+}
 
-  &--celery {
-    background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
-  }
+.spectrum-Badge--celery {
+  background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
+}
 
-  &--green {
-    background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
-  }
+.spectrum-Badge--green {
+  background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
+}
 
-  &--seafoam {
-    background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
-  }
+.spectrum-Badge--seafoam {
+  background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
+}
 
-  &--cyan {
-    background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
-  }
+.spectrum-Badge--cyan {
+  background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
+}
 
-  &--blue {
-    background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
-  }
+.spectrum-Badge--blue {
+  background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
+}
 
-  &--indigo {
-    background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
-  }
+.spectrum-Badge--indigo {
+  background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
+}
 
-  &--purple {
-    background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
-  }
+.spectrum-Badge--purple {
+  background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
+}
 
-  &--fuchsia {
-    background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
-  }
+.spectrum-Badge--fuchsia {
+  background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
+}
 
-  &--magenta {
-    background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
-  }
+.spectrum-Badge--magenta {
+  background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
+}
 
-  /* fixed position variants with border radius 0 on the fixed edge of the component */
-  &--fixed-inline-start {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
+/* fixed position variants with border radius 0 on the fixed edge of the component */
+.spectrum-Badge--fixed-inline-start {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
 
-  &--fixed-inline-end {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
+.spectrum-Badge--fixed-inline-end {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
 
-  &--fixed-block-start {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
+.spectrum-Badge--fixed-block-start {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
 
-  &--fixed-block-end {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
+.spectrum-Badge--fixed-block-end {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
+
 /* label */
 .spectrum-Badge-label {
   font-size: var(--mod-badge-font-size,
@@ -328,12 +340,12 @@ governing permissions and limitations under the License.
 
   color: var(--mod-badge-label-icon-color,
                       var(--spectrum-badge-label-icon-color));
+}
 
-  &--no-label {
-    /* icon without label has identical padding left and right */
-    padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal,
-                      var(--spectrum-badge-icon-only-spacing-horizontal));
-    padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
-                      var(--spectrum-badge-icon-only-spacing-horizontal));
-  }
+.spectrum-Badge-icon--no-label {
+  /* icon without label has identical padding left and right */
+  padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal,
+                    var(--spectrum-badge-icon-only-spacing-horizontal));
+  padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
+                    var(--spectrum-badge-icon-only-spacing-horizontal));
 }
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
@@ -134,17 +134,17 @@ governing permissions and limitations under the License.
   flex: 1 0 0%;
 
   block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size));
+}
 
-  &--compact {
-    block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact));
-  }
+.spectrum-Breadcrumbs--compact {
+  block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact));
+}
 
-  &--multiline {
-    block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline));
+.spectrum-Breadcrumbs--multiline {
+  block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline));
 
-    flex-wrap: wrap;
-    align-content: center;
-  }
+  flex-wrap: wrap;
+  align-content: center;
 }
 
 .spectrum-Breadcrumbs-itemSeparator {