fix(styles): move scoped styles out and add layer import for contextu…

…al tokens (carbon-design-system#10565) * fix(styles): move scoped styles out and add layer * fix(styles): hover styles for dropdown and multiselect * fix(layer): remove unnessary import * Update button.scss * fix(button): format scss --------- Co-authored-by: Ariella Gilmore <[email protected]>
kennylam · Jun 22, 2023 · 8e10161 · 8e10161
1 parent 16a9c98
commit 8e10161
Show file tree

Hide file tree

Showing 13 changed files with 320 additions and 269 deletions.
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss b/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss
@@ -11,11 +11,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/accordion';
 
 :host(#{$prefix}-accordion),
 :host(#{$prefix}-accordion-skeleton) {
   @extend .#{$prefix}--accordion;
+
+  @include layer-tokens.emit-layer-tokens(1);
 }
 
 :host(#{$prefix}-accordion-item),
@@ -33,22 +36,26 @@ $css--plex: true !default;
       margin: 0;
     }
   }
+}
 
-  &[size='sm'] {
-    @extend .#{$prefix}--accordion--sm;
-  }
+:host(#{$prefix}-accordion-item[size='sm']),
+:host(#{$prefix}-accordion-item-skeleton[size='sm']) {
+  @extend .#{$prefix}--accordion--sm;
+}
 
-  &[size='lg'] {
-    @extend .#{$prefix}--accordion--lg;
-  }
+:host(#{$prefix}-accordion-item[size='lg']),
+:host(#{$prefix}-accordion-item-skeleton[size='lg']) {
+  @extend .#{$prefix}--accordion--lg;
+}
 
-  &[alignment='start'] {
-    @extend .#{$prefix}--accordion--start;
-  }
+:host(#{$prefix}-accordion-item[alignment='start']),
+:host(#{$prefix}-accordion-item-skeleton[alignment='start']) {
+  @extend .#{$prefix}--accordion--start;
+}
 
-  &[isFlush] {
-    @extend .#{$prefix}--accordion--flush;
-  }
+:host(#{$prefix}-accordion-item[isFlush]),
+:host(#{$prefix}-accordion-item-skeleton[isFlush]) {
+  @extend .#{$prefix}--accordion--flush;
 }
 
 :host(#{$prefix}-accordion-item[expanding]) {

diff --git a/web-components/packages/carbon-web-components/src/components/button/button.scss b/web-components/packages/carbon-web-components/src/components/button/button.scss
@@ -10,62 +10,75 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/tooltip';
-@use '@carbon/styles/scss/theme' as *;
 
 @include code-snippet;
 
 :host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
+  @include layer-tokens.emit-layer-tokens(1);
   display: inline-flex;
+}
 
-  &[isExpressive] ::slotted([slot='icon']) {
-    width: rem(20px);
-    height: rem(20px);
-  }
+:host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),
+:host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']) {
+  width: rem(20px);
+  height: rem(20px);
+}
 
-  &[pagination] {
-    .#{$prefix}--btn {
-      border: none;
-      border-left: 1px solid $border-subtle;
-      transition: none;
+:host(#{$prefix}-button[pagination]),
+:host(#{$prefix}-modal-footer-button[pagination]) {
+  .#{$prefix}--btn {
+    border: none;
+    border-left: 1px solid $border-subtle;
+    transition: none;
 
-      &:focus {
-        outline: 2px solid $focus;
-        outline-offset: -2px;
-        box-shadow: none;
-        border-left: 1px solid transparent;
-      }
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: -2px;
+      box-shadow: none;
+      border-left: 1px solid transparent;
     }
+  }
+}
 
-    &:not([disabled]) {
-      .#{$prefix}--btn {
-        color: $icon-primary;
-        &:active {
-          background-color: $layer-hover;
-        }
-      }
+:host(#{$prefix}-button[pagination]:not([disabled])),
+:host(#{$prefix}-modal-footer-button[pagination]:not([disabled])) {
+  .#{$prefix}--btn {
+    color: $icon-primary;
+    &:active {
+      background-color: $layer-hover;
     }
   }
+}
 
-  &[batch-action] {
-    .#{$prefix}--btn {
-      padding: $button-padding-ghost;
+:host(#{$prefix}-button[pagination][batch-action]:not([disabled])),
+:host(
+    #{$prefix}-modal-footer-button[pagination][batch-action]:not([disabled])
+  ) {
+  .#{$prefix}--btn {
+    padding: $button-padding-ghost;
 
-      &:focus {
-        outline: 2px solid $layer;
-        outline-offset: -#{$spacing-01};
-      }
+    &:focus {
+      outline: 2px solid $layer;
+      outline-offset: -#{$spacing-01};
     }
+  }
 
-    &[has-main-content] {
-      ::slotted([slot='icon']) {
-        position: static;
-        margin-left: $spacing-02;
-      }
+  :host(#{$prefix}-button[pagination][has-main-content]:not([disabled])),
+  :host(
+      #{$prefix}-modal-footer-button[pagination][has-main-content]:not(
+          [disabled]
+        )
+    ) {
+    ::slotted([slot='icon']) {
+      position: static;
+      margin-left: $spacing-02;
     }
   }
 }
@@ -83,8 +96,8 @@ $css--plex: true !default;
     // 196px from design kit
     max-width: rem(196px);
   }
+}
 
-  &[stacked] {
-    @extend .#{$prefix}--btn-set--stacked;
-  }
+:host(#{$prefix}-button-set[stacked]) {
+  @extend .#{$prefix}--btn-set--stacked;
 }
diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss
@@ -17,23 +17,23 @@ $css--plex: true !default;
 :host(#{$prefix}-checkbox) {
   @extend .#{$prefix}--form-item;
   @extend .#{$prefix}--checkbox-wrapper;
+}
 
-  &[readonly] {
-    @extend .#{$prefix}--checkbox-wrapper--readonly;
-  }
+:host(#{$prefix}-checkbox[readonly]) {
+  @extend .#{$prefix}--checkbox-wrapper--readonly;
+}
 
-  &[data-table] {
-    margin: 0;
+:host(#{$prefix}-checkbox[data-table]) {
+  margin: 0;
+}
 
-    &[hide-checkbox] {
-      pointer-events: none;
+:host(#{$prefix}-checkbox[data-table][hide-checkbox]) {
+  pointer-events: none;
 
-      .#{$prefix}--checkbox-label::before,
-      .#{$prefix}--checkbox-label::after {
-        background-color: transparent;
-        border-color: transparent;
-      }
-    }
+  .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label::after {
+    background-color: transparent;
+    border-color: transparent;
   }
 }
 

diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss
@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/copy-button/copy-button';
 
@@ -23,6 +24,8 @@ $css--plex: true !default;
 :host(#{$prefix}-code-snippet-skeleton) {
   @extend .#{$prefix}--snippet;
 
+  @include layer-tokens.emit-layer-tokens(1);
+
   .#{$prefix}--snippet-container {
     @extend .#{$prefix}--snippet-container;
   }
@@ -109,27 +112,27 @@ $css--plex: true !default;
     }
   }
 
-  &[expanded-code] {
-    .#{$prefix}--snippet-container {
-      padding-bottom: $spacing-05;
-      transition: max-height $duration-moderate-01 motion(standard, productive);
-    }
-
-    #{$prefix}-button {
-      .#{$prefix}--snippet__icon {
-        transform: rotate(180deg);
-        transition: transform $transition-expansion;
-      }
-    }
-  }
-
   #{$prefix}-copy-button {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
   }
 }
 
+:host(#{$prefix}-code-snippet[type='multi'][expanded-code]) {
+  .#{$prefix}--snippet-container {
+    padding-bottom: $spacing-05;
+    transition: max-height $duration-moderate-01 motion(standard, productive);
+  }
+
+  #{$prefix}-button {
+    .#{$prefix}--snippet__icon {
+      transform: rotate(180deg);
+      transition: transform $transition-expansion;
+    }
+  }
+}
+
 :host(#{$prefix}-code-snippet-skeleton[type='single']) {
   @extend .#{$prefix}--snippet--single, .#{$prefix}--skeleton;
 }