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

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

@@ -12,6 +12,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 @use "../../utilities/active-indicator";
 
@@ -27,122 +28,124 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: 9999;
-    inline-size: 100%;
-    block-size: layout.$size--block-size;
-    background-color: theme.$layer-background;
-    border-block-end: 0.0625rem solid theme.$border-subtle;
-    align-items: center;
-    display: flex;
-
-    & > nav {
-      flex-shrink: 0;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 9999;
+      inline-size: 100%;
+      block-size: layout.$size--block-size;
+      background-color: theme.$layer-background;
+      border-block-end: 0.0625rem solid theme.$border-subtle;
+      align-items: center;
       display: flex;
-      block-size: 100%;
-      flex-grow: 1;
-    }
 
-    & > nav ul {
-      position: relative;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      block-size: 100%;
-      display: flex;
-    }
+      & > nav {
+        flex-shrink: 0;
+        display: flex;
+        block-size: 100%;
+        flex-grow: 1;
+      }
 
-    & > nav ul:first-of-type {
-      flex-grow: 1;
-    }
+      & > nav ul {
+        position: relative;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        block-size: 100%;
+        display: flex;
+      }
 
-    & > nav ul li {
-      @include layout.mode--body-compact;
-      padding: 0;
-      margin: 0;
-      block-size: 100%;
-    }
+      & > nav ul:first-of-type {
+        flex-grow: 1;
+      }
 
-    & > nav ul li a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      color: theme.$text-secondary;
-      block-size: 100%;
-      padding-inline: layout.$density--padding;
-      transition-property: color, background-color;
-      transition-duration: layout.$mode--transition-duration;
-      transition-timing-function: layout.$mode--transition-timing-function;
-
-      @include guards.hover {
-        &:hover {
+      & > nav ul li {
+        @include layout.mode--body-compact;
+        padding: 0;
+        margin: 0;
+        block-size: 100%;
+      }
+
+      & > nav ul li a {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: theme.$text-secondary;
+        block-size: 100%;
+        padding-inline: layout.$density--padding;
+        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-hover;
-          color: theme.$text-primary;
         }
-      }
 
-      &:active {
-        background-color: theme.$layer-hover;
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
       }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+      & > nav ul li a[aria-current="page"] {
+        color: theme.$text-primary;
+        box-shadow: active-indicator.bottom();
       }
-    }
-
-    & > nav ul li a[aria-current="page"] {
-      color: theme.$text-primary;
-      box-shadow: active-indicator.bottom();
-    }
-
-    & > nav ul li a svg {
-      fill: currentColor;
-      block-size: 1rem;
-      inline-size: 1rem;
-    }
 
-    & > nav ul li a:has(svg:only-child) {
-      padding-inline: unset;
-      inline-size: layout.$size--block-size;
-      justify-content: center;
-    }
+      & > nav ul li a svg {
+        fill: currentColor;
+        block-size: 1rem;
+        inline-size: 1rem;
+      }
 
-    & > nav a {
-      @include layout.mode--body-compact;
-      color: theme.$text-primary;
-      text-decoration: none;
-      padding-inline: layout.$density--padding;
-      block-size: 100%;
-      display: inline-flex;
-      align-items: center;
-      column-gap: spacing.$spacing-02;
-      flex-shrink: 0;
-      white-space: nowrap;
+      & > nav ul li a:has(svg:only-child) {
+        padding-inline: unset;
+        inline-size: layout.$size--block-size;
+        justify-content: center;
+      }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+      & > nav a {
+        @include layout.mode--body-compact;
+        color: theme.$text-primary;
+        text-decoration: none;
+        padding-inline: layout.$density--padding;
+        block-size: 100%;
+        display: inline-flex;
+        align-items: center;
+        column-gap: spacing.$spacing-02;
+        flex-shrink: 0;
+        white-space: nowrap;
+
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
       }
-    }
 
-    & > nav a + ul {
-      margin-inline-start: layout.$density--padding;
-      padding-inline-start: layout.$density--padding;
-    }
+      & > nav a + ul {
+        margin-inline-start: layout.$density--padding;
+        padding-inline-start: layout.$density--padding;
+      }
 
-    & > nav a + ul::before {
-      content: "";
-      display: block;
-      inline-size: 0.0625rem;
-      inset-inline-start: -0.0625rem;
-      position: absolute;
-      inset-block: spacing.$spacing-04;
-      background-color: theme.$border-subtle;
-    }
+      & > nav a + ul::before {
+        content: "";
+        display: block;
+        inline-size: 0.0625rem;
+        inset-inline-start: -0.0625rem;
+        position: absolute;
+        inset-block: spacing.$spacing-04;
+        background-color: theme.$border-subtle;
+      }
 
-    & + nav {
-      inset-block-start: layout.$size--block-size;
+      & + nav {
+        inset-block-start: layout.$size--block-size;
+      }
     }
   }
 }

package/scss/elements/heading-level-1/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-1;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-1;
+    }
   }
 }

package/scss/elements/heading-level-2/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-2;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-2;
+    }
   }
 }

package/scss/elements/heading-level-3/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-3;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-3;
+    }
   }
 }

package/scss/elements/heading-level-4/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-4;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-4;
+    }
   }
 }

package/scss/elements/heading-level-5/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-5;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-5;
+    }
   }
 }

package/scss/elements/heading-level-6/index.scss

@@ -10,6 +10,7 @@
 @use "../_heading";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,8 +24,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include heading.styles;
-    @include layout.mode--heading-level-6;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include heading.styles;
+      @include layout.mode--heading-level-6;
+    }
   }
 }

package/scss/elements/horizontal-rule/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -25,17 +26,19 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    border: none;
-    block-size: 0.0625rem;
-    margin-block: layout.$mode--margin-block;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      border: none;
+      block-size: 0.0625rem;
+      margin-block: layout.$mode--margin-block;
 
-    @if map.get($props, "kind") == "subtle" {
-      background-color: theme.$border-subtle;
-    }
+      @if map.get($props, "kind") == "subtle" {
+        background-color: theme.$border-subtle;
+      }
 
-    @if map.get($props, "kind") == "strong" {
-      background-color: theme.$border-strong;
+      @if map.get($props, "kind") == "strong" {
+        background-color: theme.$border-strong;
+      }
     }
   }
 }

package/scss/elements/image/index.scss

@@ -7,6 +7,8 @@
 
 @use "sass:map";
 
+@use "../../utilities/cascade-layer";
+
 $config: () !default;
 
 $-default-config: (
@@ -19,7 +21,9 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    max-inline-size: 100%;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      max-inline-size: 100%;
+    }
   }
 }

package/scss/elements/inline-loading/index.scss

@@ -14,6 +14,7 @@
 
 @use "../../config";
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -31,43 +32,45 @@ $-stroke-width: 0.125rem;
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    display: flex;
-    align-items: center;
-    column-gap: spacing.$spacing-03;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      display: flex;
+      align-items: center;
+      column-gap: spacing.$spacing-03;
 
-    &::before {
-      content: "";
-      display: inline-block;
-      block-size: calc($-size - $-stroke-width * 2);
-      inline-size: calc($-size - $-stroke-width * 2);
-      border-radius: 50%;
-      border: $-stroke-width solid theme.$layer-accent;
-      border-block-end-color: theme.$border-interactive;
-      border-inline-end-color: theme.$border-interactive;
-      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner;
-      animation-duration: calc(motion.$duration-slow-02 * 3);
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
+      &::before {
+        content: "";
+        display: inline-block;
+        block-size: calc($-size - $-stroke-width * 2);
+        inline-size: calc($-size - $-stroke-width * 2);
+        border-radius: 50%;
+        border: $-stroke-width solid theme.$layer-accent;
+        border-block-end-color: theme.$border-interactive;
+        border-inline-end-color: theme.$border-interactive;
+        animation-name: #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner;
+        animation-duration: calc(motion.$duration-slow-02 * 3);
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
 
-      @include guards.motion {
-        animation-duration: motion.$duration-slow-02;
+        @include guards.motion {
+          animation-duration: motion.$duration-slow-02;
+        }
       }
-    }
-
-    &::after {
-      @include layout.mode--body-compact;
-      content: "Loading";
-      color: theme.$text-secondary;
-    }
 
-    @keyframes #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner {
-      0% {
-        rotate: 0;
+      &::after {
+        @include layout.mode--body-compact;
+        content: "Loading";
+        color: theme.$text-secondary;
       }
 
-      100% {
-        rotate: 360deg;
+      @keyframes #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner {
+        0% {
+          rotate: 0;
+        }
+
+        100% {
+          rotate: 360deg;
+        }
       }
     }
   }

package/scss/elements/inline-quotation/index.scss

@@ -8,6 +8,7 @@
 @use "sass:map";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -21,8 +22,10 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    quotes: auto;
-    font-style: italic;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      quotes: auto;
+      font-style: italic;
+    }
   }
 }

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

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/components/tag/tokens" as tag-tokens;
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -24,11 +25,13 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    padding-inline: spacing.$spacing-01;
-    background-color: tag-tokens.$tag-background-green;
-    color: tag-tokens.$tag-color-green;
-    text-decoration: underline;
-    text-decoration-style: dashed;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      padding-inline: spacing.$spacing-01;
+      background-color: tag-tokens.$tag-background-green;
+      color: tag-tokens.$tag-color-green;
+      text-decoration: underline;
+      text-decoration-style: dashed;
+    }
   }
 }

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

@@ -8,6 +8,7 @@
 @use "sass:map";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -21,7 +22,9 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    font-style: italic;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      font-style: italic;
+    }
   }
 }

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

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -24,11 +25,13 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--code;
-    background-color: transparent;
-    outline: 0.0625rem solid theme.$border-subtle;
-    border-radius: 0.125rem;
-    padding-inline: spacing.$spacing-02;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--code;
+      background-color: transparent;
+      outline: 0.0625rem solid theme.$border-subtle;
+      border-radius: 0.125rem;
+      padding-inline: spacing.$spacing-02;
+    }
   }
 }

package/scss/elements/label/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -26,25 +27,27 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    display: grid;
-    gap: spacing.$spacing-03;
-    color: theme.$text-secondary;
-
-    &:has([disabled]) {
-      color: theme.$text-disabled;
-    }
-
-    @if map.get($props, "axis") == "block" {
-      @include layout.mode--label;
-      grid-auto-flow: row;
-    }
-
-    @if map.get($props, "axis") == "inline" {
-      @include layout.mode--body-compact;
-      grid-auto-flow: column;
-      align-items: center;
-      inline-size: fit-content;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      display: grid;
+      gap: spacing.$spacing-03;
+      color: theme.$text-secondary;
+
+      &:has([disabled]) {
+        color: theme.$text-disabled;
+      }
+
+      @if map.get($props, "axis") == "block" {
+        @include layout.mode--label;
+        grid-auto-flow: row;
+      }
+
+      @if map.get($props, "axis") == "inline" {
+        @include layout.mode--body-compact;
+        grid-auto-flow: column;
+        align-items: center;
+        inline-size: fit-content;
+      }
     }
   }
 }