@carbon/element-styles 0.3.15 → 0.3.16-rc.0

package/scss/elements/side-navigation/index.scss

@@ -12,6 +12,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 @use "../../utilities/active-indicator";
@@ -29,170 +30,173 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    padding-block: layout.$density--padding;
-    inline-size: 16rem;
-    background-color: theme.$layer-background;
-    border-inline-end: 0.0625rem solid theme.$border-subtle;
-    position: fixed;
-    inset-inline-start: 0;
-    inset-block: 0;
-    overflow-y: auto;
-    box-sizing: border-box;
-
-    & section + section {
-      padding-block-start: layout.$density--padding;
-    }
-
-    & header {
-      @include layout.mode--helper-text;
-      color: theme.$text-helper;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: spacing.$spacing-03;
-      padding-inline: layout.$density--padding;
-    }
-
-    & ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      padding-block: layout.$density--padding;
+      inline-size: 16rem;
+      background-color: theme.$layer-background;
+      border-inline-end: 0.0625rem solid theme.$border-subtle;
+      position: fixed;
+      inset-inline-start: 0;
+      inset-block: 0;
+      overflow-y: auto;
+      box-sizing: border-box;
 
-    @for $i from 1 through 8 {
-      $nesting-selector: "& ul";
+      & section + section {
+        padding-block-start: layout.$density--padding;
+      }
 
-      @for $_ from 1 to $i {
-        $nesting-selector: "#{$nesting-selector} ul";
+      & header {
+        @include layout.mode--helper-text;
+        color: theme.$text-helper;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: spacing.$spacing-03;
+        padding-inline: layout.$density--padding;
       }
 
-      #{$nesting-selector} {
-        @include tokens.set("side-navigation--level", $i);
+      & ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
       }
-    }
 
-    & li {
-      margin: 0;
-      padding: 0;
-    }
+      @for $i from 1 through 8 {
+        $nesting-selector: "& ul";
 
-    & li > button[aria-expanded],
-    & li > a {
-      @include layout.mode--heading-compact;
-      position: relative;
-      appearance: none;
-      border: none;
-      box-shadow: none;
-      border-radius: 0;
-      inline-size: 100%;
-      text-align: start;
-      display: block;
-      box-sizing: border-box;
-      color: theme.$text-secondary;
-      background-color: transparent;
-      text-decoration: none;
-      block-size: layout.$size--block-size;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: layout.$size--padding-block-end;
-      padding-inline-start: calc(
-        layout.$density--padding * tokens.get("side-navigation--level", 1)
-      );
-      padding-inline-end: layout.$density--padding;
-      cursor: pointer;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition-property: color, background-color;
-      transition-duration: layout.$mode--transition-duration;
-      transition-timing-function: layout.$mode--transition-timing-function;
-
-      @include guards.hover {
-        &:hover {
-          background-color: theme.$layer-hover;
-          color: theme.$text-primary;
+        @for $_ from 1 to $i {
+          $nesting-selector: "#{$nesting-selector} ul";
+        }
+
+        #{$nesting-selector} {
+          @include tokens.set("side-navigation--level", $i);
         }
       }
 
-      &:active {
-        background-color: theme.$layer-active;
+      & li {
+        margin: 0;
+        padding: 0;
       }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+      & li > button[aria-expanded],
+      & li > a {
+        @include layout.mode--heading-compact;
+        position: relative;
+        appearance: none;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        inline-size: 100%;
+        text-align: start;
+        display: block;
+        box-sizing: border-box;
+        color: theme.$text-secondary;
+        background-color: transparent;
+        text-decoration: none;
+        block-size: layout.$size--block-size;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: layout.$size--padding-block-end;
+        padding-inline-start: calc(
+          layout.$density--padding * tokens.get("side-navigation--level", 1)
+        );
+        padding-inline-end: layout.$density--padding;
+        cursor: pointer;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        transition-property: color, background-color;
+        transition-duration: layout.$mode--transition-duration;
+        transition-timing-function: layout.$mode--transition-timing-function;
+
+        @include guards.hover {
+          &:hover {
+            background-color: theme.$layer-hover;
+            color: theme.$text-primary;
+          }
+        }
+
+        &:active {
+          background-color: theme.$layer-active;
+        }
+
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
       }
-    }
 
-    & li > button[aria-expanded] {
-      padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
-    }
+      & li > button[aria-expanded] {
+        padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
+      }
 
-    & li > button[aria-expanded]::after {
-      content: "";
-      @include icons.chevron--down;
-      display: block;
-      position: absolute;
-      inset-inline-end: layout.$density--padding;
-      inset-block-start: layout.$size--padding-block-start;
-      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
-    }
+      & li > button[aria-expanded]::after {
+        content: "";
+        @include icons.chevron--down;
+        display: block;
+        position: absolute;
+        inset-inline-end: layout.$density--padding;
+        inset-block-start: layout.$size--padding-block-start;
+        transition: rotate layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
+      }
 
-    & li > button[aria-expanded="true"]::after {
-      rotate: 180deg;
-    }
+      & li > button[aria-expanded="true"]::after {
+        rotate: 180deg;
+      }
 
-    & li > button[aria-expanded] + ul a {
-      @include layout.mode--body-compact;
-    }
+      & li > button[aria-expanded] + ul a {
+        @include layout.mode--body-compact;
+      }
 
-    & li > button[aria-expanded]:has(+ ul a[aria-current="page"]) {
-      color: theme.$text-primary;
-    }
+      & li > button[aria-expanded]:has(+ ul a[aria-current="page"]) {
+        color: theme.$text-primary;
+      }
 
-    & li > button[aria-expanded="false"]:has(+ ul a[aria-current="page"]),
-    & li > button[aria-expanded] + ul a[aria-current="page"],
-    & li > a[aria-current="page"] {
-      @include layout.mode--heading-compact;
-      background-color: theme.$layer-selected;
-      box-shadow: active-indicator.left();
-      color: theme.$text-primary;
-
-      @include guards.hover {
-        &:hover {
-          background-color: theme.$layer-selected-hover;
+      & li > button[aria-expanded="false"]:has(+ ul a[aria-current="page"]),
+      & li > button[aria-expanded] + ul a[aria-current="page"],
+      & li > a[aria-current="page"] {
+        @include layout.mode--heading-compact;
+        background-color: theme.$layer-selected;
+        box-shadow: active-indicator.left();
+        color: theme.$text-primary;
+
+        @include guards.hover {
+          &:hover {
+            background-color: theme.$layer-selected-hover;
+          }
         }
       }
-    }
 
-    & li > button[aria-expanded="false"] + ul {
-      display: none;
-    }
+      & li > button[aria-expanded="false"] + ul {
+        display: none;
+      }
 
-    & li[role="separator"] {
-      block-size: 0.0625rem;
-      background-color: theme.$border-subtle;
-      margin-block: spacing.$spacing-03;
-      margin-inline: layout.$density--padding;
-    }
+      & li[role="separator"] {
+        block-size: 0.0625rem;
+        background-color: theme.$border-subtle;
+        margin-block: spacing.$spacing-03;
+        margin-inline: layout.$density--padding;
+      }
 
-    & ul > li a:has(svg) {
-      padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
-    }
+      & ul > li a:has(svg) {
+        padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
+      }
 
-    & ul > li a svg {
-      fill: currentColor;
-      block-size: 1rem;
-      inline-size: 1rem;
-      position: absolute;
-      inset-inline-end: layout.$density--padding;
-      inset-block-start: layout.$size--padding-block-start;
-    }
+      & ul > li a svg {
+        fill: currentColor;
+        block-size: 1rem;
+        inline-size: 1rem;
+        position: absolute;
+        inset-inline-end: layout.$density--padding;
+        inset-block-start: layout.$size--padding-block-start;
+      }
 
-    & ul ul button[aria-expanded] {
-      @include layout.mode--body-compact;
-    }
+      & ul ul button[aria-expanded] {
+        @include layout.mode--body-compact;
+      }
 
-    & + main,
-    & + main + footer {
-      margin-inline-start: 16rem;
+      & + main,
+      & + main + footer {
+        margin-inline-start: 16rem;
+      }
     }
   }
 }

package/scss/elements/small-text/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,9 +24,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--helper-text;
-    display: inline-block;
-    color: theme.$text-helper;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--helper-text;
+      display: inline-block;
+      color: theme.$text-helper;
+    }
   }
 }

package/scss/elements/table/index.scss

@@ -13,6 +13,7 @@
 @use "../_layer";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -29,119 +30,121 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    border-spacing: 0;
-    inline-size: 100%;
-    margin-block: layout.$mode--margin-block;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      border-spacing: 0;
+      inline-size: 100%;
+      margin-block: layout.$mode--margin-block;
 
-    & th {
-      @include layout.mode--heading-compact;
-      text-align: start;
-      color: theme.$text-primary;
-    }
-
-    & td {
-      @include layout.mode--body-compact;
-      color: theme.$text-secondary;
-      vertical-align: top;
-    }
-
-    & th,
-    & td {
-      block-size: layout.$size--block-size;
-      box-sizing: border-box;
-      border-block-end: 0.0625rem solid theme.$border-subtle;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: layout.$size--padding-block-end;
-      padding-inline: layout.$density--padding;
-    }
-
-    & th p,
-    & td p {
-      font: inherit;
-      margin: 0;
-    }
-
-    & td p + p {
-      margin-block-start: layout.$mode--margin-block;
-    }
-
-    & tbody:has(+ tfoot) tr:last-child th,
-    & tbody:has(+ tfoot) tr:last-child td,
-    & tfoot th,
-    & tfoot td {
-      border-block-end: 0;
-    }
-
-    & tfoot td {
-      color: theme.$text-primary;
-    }
-
-    & caption {
-      text-align: start;
-      @include layout.mode--helper-text;
-      padding: layout.$density--padding;
-    }
+      & th {
+        @include layout.mode--heading-compact;
+        text-align: start;
+        color: theme.$text-primary;
+      }
 
-    @if map.get($props, "kind") == "data-table" {
-      background-color: theme.$layer;
+      & td {
+        @include layout.mode--body-compact;
+        color: theme.$text-secondary;
+        vertical-align: top;
+      }
 
-      & tbody tr,
-      & tfoot tr {
-        @include layer.styles;
+      & th,
+      & td {
+        block-size: layout.$size--block-size;
+        box-sizing: border-box;
+        border-block-end: 0.0625rem solid theme.$border-subtle;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: layout.$size--padding-block-end;
+        padding-inline: layout.$density--padding;
       }
 
-      & th {
-        background-color: theme.$layer-accent;
+      & th p,
+      & td p {
+        font: inherit;
+        margin: 0;
       }
 
-      @include guards.hover {
-        & tr:hover {
-          @include layer.layer-background-hover;
-        }
+      & td p + p {
+        margin-block-start: layout.$mode--margin-block;
       }
 
+      & tbody:has(+ tfoot) tr:last-child th,
+      & tbody:has(+ tfoot) tr:last-child td,
       & tfoot th,
       & tfoot td {
-        border-block-start: 0.0625rem solid theme.$border-strong;
+        border-block-end: 0;
       }
 
-      & caption {
-        background-color: theme.$layer;
-        color: theme.$text-secondary;
-      }
-    }
-
-    @if map.get($props, "kind") ==
-      "structured-list" or
-      map.get($props, "kind") ==
-      "structured-list--flush"
-    {
-      & tfoot th,
       & tfoot td {
-        border-block-start: 0.0625rem solid theme.$border-subtle;
+        color: theme.$text-primary;
       }
 
       & caption {
-        caption-side: bottom;
-        color: theme.$text-helper;
-        max-inline-size: layout.$mode--max-inline-size;
+        text-align: start;
+        @include layout.mode--helper-text;
+        padding: layout.$density--padding;
       }
-    }
 
-    @if map.get($props, "kind") == "structured-list--flush" {
-      & th:first-child,
-      & td:first-child {
-        padding-inline-start: 0;
+      @if map.get($props, "kind") == "data-table" {
+        background-color: theme.$layer;
+
+        & tbody tr,
+        & tfoot tr {
+          @include layer.styles;
+        }
+
+        & th {
+          background-color: theme.$layer-accent;
+        }
+
+        @include guards.hover {
+          & tr:hover {
+            @include layer.layer-background-hover;
+          }
+        }
+
+        & tfoot th,
+        & tfoot td {
+          border-block-start: 0.0625rem solid theme.$border-strong;
+        }
+
+        & caption {
+          background-color: theme.$layer;
+          color: theme.$text-secondary;
+        }
       }
 
-      & th:last-child,
-      & td:last-child {
-        padding-inline-end: 0;
+      @if map.get($props, "kind") ==
+        "structured-list" or
+        map.get($props, "kind") ==
+        "structured-list--flush"
+      {
+        & tfoot th,
+        & tfoot td {
+          border-block-start: 0.0625rem solid theme.$border-subtle;
+        }
+
+        & caption {
+          caption-side: bottom;
+          color: theme.$text-helper;
+          max-inline-size: layout.$mode--max-inline-size;
+        }
       }
 
-      & caption {
-        padding-inline: 0;
+      @if map.get($props, "kind") == "structured-list--flush" {
+        & th:first-child,
+        & td:first-child {
+          padding-inline-start: 0;
+        }
+
+        & th:last-child,
+        & td:last-child {
+          padding-inline-end: 0;
+        }
+
+        & caption {
+          padding-inline: 0;
+        }
       }
     }
   }