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

package/scss/elements/preformatted/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,21 +24,23 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--code;
-    white-space: pre;
-    margin-block: layout.$mode--margin-block;
-    padding: layout.$density--padding;
-    background-color: theme.$layer;
-    inline-size: 100%;
-    overflow-x: auto;
-    box-sizing: border-box;
-
-    & code {
-      box-shadow: none;
-      border-radius: 0;
-      padding-inline: 0;
-      background-color: transparent;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--code;
+      white-space: pre;
+      margin-block: layout.$mode--margin-block;
+      padding: layout.$density--padding;
+      background-color: theme.$layer;
+      inline-size: 100%;
+      overflow-x: auto;
+      box-sizing: border-box;
+
+      & code {
+        box-shadow: none;
+        border-radius: 0;
+        padding-inline: 0;
+        background-color: transparent;
+      }
     }
   }
 }

package/scss/elements/progress-bar/index.scss

@@ -15,6 +15,7 @@
 
 @use "../../config";
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -33,85 +34,87 @@ $-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"),
-      )
-    );
-
-    & progress {
-      appearance: none;
-      background-color: theme.$layer;
-      border: none;
-      box-shadow: none;
-      border-radius: 0;
-      overflow: hidden;
-
-      @if map.get($props, "thickness") == "thick" {
-        block-size: 0.5rem;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include label.styles(
+        (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        )
+      );
+
+      & progress {
+        appearance: none;
+        background-color: theme.$layer;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        overflow: hidden;
+
+        @if map.get($props, "thickness") == "thick" {
+          block-size: 0.5rem;
+        }
+
+        @if map.get($props, "thickness") == "thin" {
+          block-size: 0.25rem;
+        }
       }
 
-      @if map.get($props, "thickness") == "thin" {
-        block-size: 0.25rem;
+      & progress::-webkit-progress-bar {
+        background-color: theme.$layer;
+        block-size: inherit;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        overflow: hidden;
       }
-    }
-
-    & progress::-webkit-progress-bar {
-      background-color: theme.$layer;
-      block-size: inherit;
-      border: none;
-      box-shadow: none;
-      border-radius: 0;
-      overflow: hidden;
-    }
-
-    & progress::-webkit-progress-value {
-      background-color: theme.$interactive;
-    }
 
-    & progress::-moz-progress-bar {
-      background-color: theme.$interactive;
-    }
+      & progress::-webkit-progress-value {
+        background-color: theme.$interactive;
+      }
 
-    & progress:not([value])::-moz-progress-bar {
-      background-color: transparent;
-      background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
-      background-position-x: 0%;
-      background-size: 200% 100%;
-      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
-      animation-duration: calc(motion.$duration-slow-02 * 5);
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-
-      @include guards.motion {
-        animation-duration: calc(motion.$duration-slow-02 * 2);
+      & progress::-moz-progress-bar {
+        background-color: theme.$interactive;
       }
-    }
 
-    & progress:not([value])::-webkit-progress-bar {
-      background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
-      background-position-x: 0%;
-      background-size: 200% 100%;
-      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
-      animation-duration: calc(motion.$duration-slow-02 * 5);
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-
-      @include guards.motion {
-        animation-duration: calc(motion.$duration-slow-02 * 2);
+      & progress:not([value])::-moz-progress-bar {
+        background-color: transparent;
+        background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
+        background-position-x: 0%;
+        background-size: 200% 100%;
+        animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
+        animation-duration: calc(motion.$duration-slow-02 * 5);
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+        @include guards.motion {
+          animation-duration: calc(motion.$duration-slow-02 * 2);
+        }
       }
-    }
 
-    @keyframes #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate {
-      0% {
-        background-position-x: 25%;
+      & progress:not([value])::-webkit-progress-bar {
+        background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
+        background-position-x: 0%;
+        background-size: 200% 100%;
+        animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
+        animation-duration: calc(motion.$duration-slow-02 * 5);
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+        @include guards.motion {
+          animation-duration: calc(motion.$duration-slow-02 * 2);
+        }
       }
 
-      80%,
-      100% {
-        background-position-x: -105%;
+      @keyframes #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate {
+        0% {
+          background-position-x: 25%;
+        }
+
+        80%,
+        100% {
+          background-position-x: -105%;
+        }
       }
     }
   }

package/scss/elements/radio-button/index.scss

@@ -13,6 +13,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -26,43 +27,45 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include label.styles(
-      (
-        selector: "&",
-        axis: "inline",
-      )
-    );
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include label.styles(
+        (
+          selector: "&",
+          axis: "inline",
+        )
+      );
 
-    justify-content: start;
-    cursor: pointer;
+      justify-content: start;
+      cursor: pointer;
 
-    & input[type="radio"] {
-      grid-column: 1;
-      position: relative;
-      appearance: none;
-      border: none;
-      block-size: 1rem;
-      inline-size: 1rem;
-      border-radius: 50%;
-      color: theme.$icon-primary;
-      border: 0.0625rem solid currentColor;
+      & input[type="radio"] {
+        grid-column: 1;
+        position: relative;
+        appearance: none;
+        border: none;
+        block-size: 1rem;
+        inline-size: 1rem;
+        border-radius: 50%;
+        color: theme.$icon-primary;
+        border: 0.0625rem solid currentColor;
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
-        outline-offset: 0.125rem;
-      }
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+          outline-offset: 0.125rem;
+        }
 
-      &:disabled {
-        color: theme.$icon-disabled;
-      }
+        &:disabled {
+          color: theme.$icon-disabled;
+        }
 
-      &:checked::before {
-        content: "";
-        position: absolute;
-        inset: 0.25rem;
-        border-radius: 50%;
-        background-color: currentColor;
+        &:checked::before {
+          content: "";
+          position: absolute;
+          inset: 0.25rem;
+          border-radius: 50%;
+          background-color: currentColor;
+        }
       }
     }
   }

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

@@ -13,6 +13,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -28,51 +29,53 @@ $-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"),
-      )
-    );
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include label.styles(
+        (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        )
+      );
 
-    & input[type="range"] {
-      display: block;
-      appearance: none;
-      background-color: transparent;
-      block-size: 1.25rem;
-    }
+      & input[type="range"] {
+        display: block;
+        appearance: none;
+        background-color: transparent;
+        block-size: 1.25rem;
+      }
 
-    & input[type="range"]::-webkit-slider-thumb {
-      appearance: none;
-      block-size: 0.875rem;
-      inline-size: 0.875rem;
-      border-radius: 50%;
-      background-color: theme.$layer-selected-inverse;
-      translate: 0 calc(-50% + 0.125rem * 0.5);
-      cursor: pointer;
-    }
+      & input[type="range"]::-webkit-slider-thumb {
+        appearance: none;
+        block-size: 0.875rem;
+        inline-size: 0.875rem;
+        border-radius: 50%;
+        background-color: theme.$layer-selected-inverse;
+        translate: 0 calc(-50% + 0.125rem * 0.5);
+        cursor: pointer;
+      }
 
-    & input[type="range"]::-webkit-slider-runnable-track {
-      height: 0.125rem;
-      background-color: theme.$border-subtle;
-      cursor: pointer;
-    }
+      & input[type="range"]::-webkit-slider-runnable-track {
+        height: 0.125rem;
+        background-color: theme.$border-subtle;
+        cursor: pointer;
+      }
 
-    & input[type="range"]:focus {
-      outline: none;
-    }
+      & input[type="range"]:focus {
+        outline: none;
+      }
 
-    & input[type="range"]:focus::-webkit-slider-thumb {
-      background-color: theme.$border-interactive;
-      outline: 0.125rem solid theme.$border-interactive;
-      outline-offset: calc(0.0625rem + 0.125rem);
-    }
+      & input[type="range"]:focus::-webkit-slider-thumb {
+        background-color: theme.$border-interactive;
+        outline: 0.125rem solid theme.$border-interactive;
+        outline-offset: calc(0.0625rem + 0.125rem);
+      }
 
-    & input[type="range"]:disabled::-webkit-slider-thumb,
-    & input[type="range"]::-webkit-slider-runnable-track {
-      background-color: theme.$border-disabled;
-      cursor: not-allowed;
+      & input[type="range"]:disabled::-webkit-slider-thumb,
+      & input[type="range"]::-webkit-slider-runnable-track {
+        background-color: theme.$border-disabled;
+        cursor: not-allowed;
+      }
     }
   }
 }

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

@@ -9,6 +9,7 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 
 $config: () !default;
@@ -25,24 +26,26 @@ $-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="search"]',
-        ),
-        fixed-input-leading-slots: 1,
-        input-invalid-slot: "after",
-      )
-    );
-
-    &::before {
-      @include labelled-input.input-leading-slot {
-        @include icons.search;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="search"]',
+          ),
+          fixed-input-leading-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
+
+      &::before {
+        @include labelled-input.input-leading-slot {
+          @include icons.search;
+        }
       }
     }
   }

package/scss/elements/select/index.scss

@@ -12,6 +12,7 @@
 @use "../_labelled-input";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -29,46 +30,48 @@ $-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: "select",
-          emit-readonly: false,
-        ),
-        fixed-input-trailing-slots: 1,
-        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: "select",
+            emit-readonly: false,
+          ),
+          fixed-input-trailing-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
 
-    &::before {
-      @include labelled-input.input-trailing-slot {
-        @include icons.chevron--down;
+      &::before {
+        @include labelled-input.input-trailing-slot {
+          @include icons.chevron--down;
+        }
       }
-    }
 
-    & select {
-      cursor: pointer;
+      & select {
+        cursor: pointer;
 
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: theme.$field-hover;
+        @include guards.hover {
+          &:enabled:hover {
+            background-color: theme.$field-hover;
+          }
         }
-      }
 
-      &:enabled:active {
-        background-color: theme.$layer-active;
-      }
+        &:enabled:active {
+          background-color: theme.$layer-active;
+        }
 
-      @if map.get($props, "axis") == "inline" {
-        &:enabled,
-        &:disabled {
-          background-color: transparent;
-          border-block-end: none;
+        @if map.get($props, "axis") == "inline" {
+          &:enabled,
+          &:disabled {
+            background-color: transparent;
+            border-block-end: none;
+          }
         }
       }
     }