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

package/scss/elements/main/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -24,9 +25,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    padding-inline: spacing.$spacing-07;
-    padding-block-start: spacing.$spacing-07;
-    padding-block-end: spacing.$spacing-10;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      padding-inline: spacing.$spacing-07;
+      padding-block-start: spacing.$spacing-07;
+      padding-block-end: spacing.$spacing-10;
+    }
   }
 }

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

@@ -12,6 +12,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -25,9 +26,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    padding-inline: spacing.$spacing-01;
-    background-color: colors.$yellow-20;
-    color: colors.$black;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      padding-inline: spacing.$spacing-01;
+      background-color: colors.$yellow-20;
+      color: colors.$black;
+    }
   }
 }

package/scss/elements/menu/index.scss

@@ -13,6 +13,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -28,83 +29,89 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include box-shadow.box-shadow;
-    background-color: theme.$layer;
-    list-style: none;
-    margin: 0;
-    padding-inline: 0;
-    padding-block: spacing.$spacing-02;
-    inline-size: 14rem;
-
-    & li[role="menuitem"],
-    & li[role="menuitemcheckbox"],
-    & li[role="menuitemradio"] {
-      @include layout.mode--body-compact;
-      display: flex;
-      column-gap: spacing.$spacing-03;
-      color: theme.$text-secondary;
-      padding-inline: layout.$density--padding;
-      block-size: layout.$size--block-size;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: layout.$size--padding-block-end;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      @include guards.hover {
-        &:hover {
-          background-color: theme.$layer-hover;
-          color: theme.$text-primary;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include box-shadow.box-shadow;
+      background-color: theme.$layer;
+      list-style: none;
+      margin: 0;
+      padding-inline: 0;
+      padding-block: spacing.$spacing-02;
+      inline-size: 14rem;
+
+      & li[role="menuitem"],
+      & li[role="menuitemcheckbox"],
+      & li[role="menuitemradio"] {
+        @include layout.mode--body-compact;
+        display: flex;
+        column-gap: spacing.$spacing-03;
+        color: theme.$text-secondary;
+        padding-inline: layout.$density--padding;
+        block-size: layout.$size--block-size;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: layout.$size--padding-block-end;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        @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");
         }
       }
 
-      &:active {
-        background-color: theme.$layer-active;
+      &:has(li[aria-checked]) {
+        & li[role="menuitem"]::before,
+        & li[role="menuitemcheckbox"]::before,
+        & li[role="menuitemradio"]::before {
+          content: "";
+          display: block;
+          inline-size: 1rem;
+          translate: 0 0.0625rem;
+        }
       }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+      & li[role="menuitemcheckbox"][aria-checked="true"]::before,
+      & li[role="menuitemradio"][aria-checked="true"]::before {
+        @include icons.checkmark;
       }
-    }
 
-    &:has(li[aria-checked]) {
-      & li[role="menuitem"]::before,
-      & li[role="menuitemcheckbox"]::before,
-      & li[role="menuitemradio"]::before {
-        content: "";
-        display: block;
+      & li > svg {
+        fill: currentColor;
+        block-size: 1rem;
         inline-size: 1rem;
         translate: 0 0.0625rem;
       }
-    }
-
-    & li[role="menuitemcheckbox"][aria-checked="true"]::before,
-    & li[role="menuitemradio"][aria-checked="true"]::before {
-      @include icons.checkmark;
-    }
-
-    & li > svg {
-      fill: currentColor;
-      block-size: 1rem;
-      inline-size: 1rem;
-      translate: 0 0.0625rem;
-    }
 
-    &:has(li > svg)
-      li:not(:has(> svg)):is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
-      column-gap: calc(spacing.$spacing-03 + 1rem + spacing.$spacing-03);
-    }
+      &:has(li > svg)
+        li:not(:has(> svg)):is(
+          [role="menuitem"],
+          [role="menuitemcheckbox"],
+          [role="menuitemradio"]
+        ) {
+        column-gap: calc(spacing.$spacing-03 + 1rem + spacing.$spacing-03);
+      }
 
-    & li[role="separator"] {
-      block-size: 0.0625rem;
-      background-color: theme.$border-subtle;
-      margin-block: spacing.$spacing-02;
-    }
+      & li[role="separator"] {
+        block-size: 0.0625rem;
+        background-color: theme.$border-subtle;
+        margin-block: spacing.$spacing-02;
+      }
 
-    & ul[role="group"] {
-      list-style: none;
-      margin: 0;
-      padding: 0;
+      & ul[role="group"] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
     }
   }
 }

package/scss/elements/meter/index.scss

@@ -12,6 +12,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -27,48 +28,50 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include label.styles(
-      (
-        selector: "&",
-        axis: map.get($props, "axis"),
-      )
-    );
-
-    meter {
-      min-inline-size: 6rem;
-      background: theme.$layer;
-      block-size: 0.5rem;
-      inline-size: 100%;
-    }
-
-    meter::-webkit-meter-bar {
-      background: theme.$layer;
-      block-size: 0.5rem;
-    }
-
-    meter::-webkit-meter-optimum-value {
-      background: theme.$support-success;
-    }
-
-    meter:-moz-meter-optimum::-moz-meter-bar {
-      background: theme.$support-success;
-    }
-
-    meter::-webkit-meter-suboptimum-value {
-      background: theme.$support-caution-minor;
-    }
-
-    meter:-moz-meter-sub-optimum::-moz-meter-bar {
-      background: theme.$support-caution-minor;
-    }
-
-    meter::-webkit-meter-even-less-good-value {
-      background: theme.$support-caution-major;
-    }
-
-    meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-      background: theme.$support-caution-major;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include label.styles(
+        (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        )
+      );
+
+      meter {
+        min-inline-size: 6rem;
+        background: theme.$layer;
+        block-size: 0.5rem;
+        inline-size: 100%;
+      }
+
+      meter::-webkit-meter-bar {
+        background: theme.$layer;
+        block-size: 0.5rem;
+      }
+
+      meter::-webkit-meter-optimum-value {
+        background: theme.$support-success;
+      }
+
+      meter:-moz-meter-optimum::-moz-meter-bar {
+        background: theme.$support-success;
+      }
+
+      meter::-webkit-meter-suboptimum-value {
+        background: theme.$support-caution-minor;
+      }
+
+      meter:-moz-meter-sub-optimum::-moz-meter-bar {
+        background: theme.$support-caution-minor;
+      }
+
+      meter::-webkit-meter-even-less-good-value {
+        background: theme.$support-caution-major;
+      }
+
+      meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+        background: theme.$support-caution-major;
+      }
     }
   }
 }

package/scss/elements/number-input/index.scss

@@ -9,6 +9,8 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
+
 $config: () !default;
 
 $-default-config: (
@@ -23,17 +25,19 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include labelled-input.styles(
-      (
-        label: (
-          selector: "&",
-          axis: map.get($props, "axis"),
-        ),
-        input: (
-          selector: 'input[type="number"]',
-        ),
-      )
-    );
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="number"]',
+          ),
+        )
+      );
+    }
   }
 }

package/scss/elements/ordered-list/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,28 +24,30 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    list-style-type: decimal;
-    padding: 0;
-    margin-inline-start: layout.$density--padding;
-
-    & li {
-      @include layout.mode--body-compact;
-      max-inline-size: layout.$mode--max-inline-size;
-      margin-inline-start: spacing.$spacing-03;
-    }
-
-    & li p {
-      @include layout.mode--body-compact;
-      margin-block: 0;
-    }
-
-    & ol {
-      list-style-type: lower-alpha;
-    }
-
-    & ol ol {
-      list-style-type: lower-roman;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      list-style-type: decimal;
+      padding: 0;
+      margin-inline-start: layout.$density--padding;
+
+      & li {
+        @include layout.mode--body-compact;
+        max-inline-size: layout.$mode--max-inline-size;
+        margin-inline-start: spacing.$spacing-03;
+      }
+
+      & li p {
+        @include layout.mode--body-compact;
+        margin-block: 0;
+      }
+
+      & ol {
+        list-style-type: lower-alpha;
+      }
+
+      & ol ol {
+        list-style-type: lower-roman;
+      }
     }
   }
 }

package/scss/elements/paragraph/index.scss

@@ -8,6 +8,7 @@
 @use "sass:map";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -21,10 +22,12 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--body;
-    max-inline-size: layout.$mode--max-inline-size;
-    margin-block: layout.$mode--margin-block;
-    text-wrap: pretty;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--body;
+      max-inline-size: layout.$mode--max-inline-size;
+      margin-block: layout.$mode--margin-block;
+      text-wrap: pretty;
+    }
   }
 }

package/scss/elements/password-input/index.scss

@@ -9,6 +9,8 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
+
 $config: () !default;
 
 $-default-config: (
@@ -23,18 +25,20 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include labelled-input.styles(
-      (
-        label: (
-          selector: "&",
-          axis: map.get($props, "axis"),
-        ),
-        input: (
-          selector: 'input[type="password"]',
-        ),
-        input-invalid-slot: "after",
-      )
-    );
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="password"]',
+          ),
+          input-invalid-slot: "after",
+        )
+      );
+    }
   }
 }

package/scss/elements/popover/index.scss

@@ -16,6 +16,7 @@
 @use "../_layer";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/tokens";
 
 $config: () !default;
@@ -39,97 +40,99 @@ $-default-config: (
     $-caret-size: 0.75rem;
   }
 
-  #{map.get($props, "selector")} {
-    @include layer.styles;
-    @include box-shadow.box-shadow;
-    @include layout.mode--body;
-    margin: 0;
-    position: fixed;
-    border: none;
-    border-radius: 0.125rem;
-    padding: layout.$density--padding;
-    overflow: visible;
-
-    &::before {
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layer.styles;
       @include box-shadow.box-shadow;
-      content: "";
-      position: absolute;
-      display: block;
-      block-size: $-caret-size;
-      inline-size: $-caret-size;
-      background-color: inherit;
-      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
-    }
-
-    $-alignment: string.split(map.get($props, "alignment"), " ");
-    $-alignment-block: list.nth($-alignment, 1);
-    $-alignment-inline: list.nth($-alignment, 2);
-
-    @if $-alignment-block == "start" {
-      position-area: start center;
-      inset-block-end: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
-      inset-block-start: unset;
+      @include layout.mode--body;
+      margin: 0;
+      position: fixed;
+      border: none;
+      border-radius: 0.125rem;
+      padding: layout.$density--padding;
+      overflow: visible;
 
       &::before {
-        inset-block-end: calc($-caret-size * -0.5);
-        inset-block-start: unset;
-        rotate: 135deg;
+        @include box-shadow.box-shadow;
+        content: "";
+        position: absolute;
+        display: block;
+        block-size: $-caret-size;
+        inline-size: $-caret-size;
+        background-color: inherit;
+        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
       }
-    }
-
-    @if $-alignment-block == "end" {
-      position-area: end center;
-      inset-block-start: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
-      inset-block-end: unset;
 
-      &::before {
-        inset-block-start: calc($-caret-size * -0.5);
-        inset-block-end: unset;
-        rotate: -45deg;
-      }
-    }
+      $-alignment: string.split(map.get($props, "alignment"), " ");
+      $-alignment-block: list.nth($-alignment, 1);
+      $-alignment-inline: list.nth($-alignment, 2);
 
-    @if $-alignment-block == "start" or $-alignment-block == "end" {
-      @if $-alignment-inline == "start" {
-        translate: calc(-50% + layout.$density--padding + spacing.$spacing-02) 0;
+      @if $-alignment-block == "start" {
+        position-area: start center;
+        inset-block-end: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
+        inset-block-start: unset;
 
         &::before {
-          inset-inline-start: -get-caret-offset("end", $-caret-size);
+          inset-block-end: calc($-caret-size * -0.5);
+          inset-block-start: unset;
+          rotate: 135deg;
         }
-      } @else if $-alignment-inline == "end" {
-        translate: calc(50% - layout.$density--padding - spacing.$spacing-02) 0;
+      }
+
+      @if $-alignment-block == "end" {
+        position-area: end center;
+        inset-block-start: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
+        inset-block-end: unset;
 
         &::before {
-          inset-inline-start: -get-caret-offset("start", $-caret-size);
+          inset-block-start: calc($-caret-size * -0.5);
+          inset-block-end: unset;
+          rotate: -45deg;
         }
-      } @else if $-alignment-inline == "center" {
-        &::before {
-          inset-inline-start: -get-caret-offset("center", $-caret-size);
+      }
+
+      @if $-alignment-block == "start" or $-alignment-block == "end" {
+        @if $-alignment-inline == "start" {
+          translate: calc(-50% + layout.$density--padding + spacing.$spacing-02) 0;
+
+          &::before {
+            inset-inline-start: -get-caret-offset("end", $-caret-size);
+          }
+        } @else if $-alignment-inline == "end" {
+          translate: calc(50% - layout.$density--padding - spacing.$spacing-02) 0;
+
+          &::before {
+            inset-inline-start: -get-caret-offset("start", $-caret-size);
+          }
+        } @else if $-alignment-inline == "center" {
+          &::before {
+            inset-inline-start: -get-caret-offset("center", $-caret-size);
+          }
         }
       }
-    }
 
-    @if map.get($props, "alignment") == "center start" {
-      position-area: center start;
-      translate: calc((spacing.$spacing-02 + ($-caret-size * 0.5)) * -1);
+      @if map.get($props, "alignment") == "center start" {
+        position-area: center start;
+        translate: calc((spacing.$spacing-02 + ($-caret-size * 0.5)) * -1);
 
-      &::before {
-        inset-block-start: -get-caret-offset("center", $-caret-size);
-        inset-block-end: unset;
-        inset-inline-end: calc($-caret-size * -0.5);
-        rotate: 45deg;
+        &::before {
+          inset-block-start: -get-caret-offset("center", $-caret-size);
+          inset-block-end: unset;
+          inset-inline-end: calc($-caret-size * -0.5);
+          rotate: 45deg;
+        }
       }
-    }
 
-    @if map.get($props, "alignment") == "center end" {
-      position-area: center end;
-      translate: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
+      @if map.get($props, "alignment") == "center end" {
+        position-area: center end;
+        translate: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
 
-      &::before {
-        inset-block-start: -get-caret-offset("center", $-caret-size);
-        inset-block-end: unset;
-        inset-inline-start: calc($-caret-size * -0.5);
-        rotate: -135deg;
+        &::before {
+          inset-block-start: -get-caret-offset("center", $-caret-size);
+          inset-block-end: unset;
+          inset-inline-start: calc($-caret-size * -0.5);
+          rotate: -135deg;
+        }
       }
     }
   }