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

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

@@ -13,6 +13,7 @@
 @use "../_labelled-input";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -30,23 +31,24 @@ $-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="color"]',
-          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: 'input[type="color"]',
+            emit-readonly: false,
+          ),
+          fixed-input-trailing-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
+
+      /*
         inline padding
       + color swatch
       + spacing-05
@@ -55,64 +57,65 @@ $-default-config: (
       + trailing icon space
       + inline padding
     */
-    $-min-inline-size: calc(
-      layout.$density--padding + 1rem + spacing.$spacing-05 + 1rem + spacing.$spacing-03 + 1rem +
-        layout.$density--padding
-    );
-
-    & input[type="color"] {
-      min-inline-size: $-min-inline-size;
-      inline-size: 100%;
-      cursor: pointer;
-
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: theme.$field-hover;
+      $-min-inline-size: calc(
+        layout.$density--padding + 1rem + spacing.$spacing-05 + 1rem + spacing.$spacing-03 + 1rem +
+          layout.$density--padding
+      );
+
+      & input[type="color"] {
+        min-inline-size: $-min-inline-size;
+        inline-size: 100%;
+        cursor: pointer;
+
+        @include guards.hover {
+          &:enabled:hover {
+            background-color: theme.$field-hover;
+          }
         }
-      }
 
-      &:enabled:active {
-        background-color: theme.$layer-active;
+        &:enabled:active {
+          background-color: theme.$layer-active;
+        }
       }
-    }
 
-    & input[type="color"]::-webkit-color-swatch-wrapper {
-      padding: 0;
-      inline-size: 1rem;
-      block-size: 1rem;
-    }
+      & input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+        inline-size: 1rem;
+        block-size: 1rem;
+      }
 
-    & input[type="color"]::-webkit-color-swatch {
-      position: relative;
-      inset-block-start: 0.0625rem;
-      padding: 0;
-      margin: 0;
-      border-radius: 0;
-      inline-size: 1rem;
-      block-size: 1rem;
-      border: none;
-      box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
-    }
+      & input[type="color"]::-webkit-color-swatch {
+        position: relative;
+        inset-block-start: 0.0625rem;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+        inline-size: 1rem;
+        block-size: 1rem;
+        border: none;
+        box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
+      }
 
-    & input[type="color"]::-moz-color-swatch {
-      position: relative;
-      inset-block-start: 0.0625rem;
-      padding: 0;
-      margin: 0;
-      border-radius: 0;
-      inline-size: 1rem;
-      block-size: 1rem;
-      border: none;
-      box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
-    }
+      & input[type="color"]::-moz-color-swatch {
+        position: relative;
+        inset-block-start: 0.0625rem;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+        inline-size: 1rem;
+        block-size: 1rem;
+        border: none;
+        box-shadow: inset 0 0 0 0.0625rem rgb(from theme.$border-inverse r g b / 0.15);
+      }
 
-    & input[type="color"]:disabled::-webkit-color-swatch-wrapper {
-      opacity: 0.5;
-    }
+      & input[type="color"]:disabled::-webkit-color-swatch-wrapper {
+        opacity: 0.5;
+      }
 
-    &::before {
-      @include labelled-input.input-trailing-slot {
-        @include icons.color-palette;
+      &::before {
+        @include labelled-input.input-trailing-slot {
+          @include icons.color-palette;
+        }
       }
     }
   }

package/scss/elements/combo-box/index.scss

@@ -11,6 +11,7 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -28,44 +29,46 @@ $-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="text"][list]',
-          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: 'input[type="text"][list]',
+            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;
+        }
       }
-    }
 
-    & input[type="text"][list] {
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: theme.$field-hover;
+      & input[type="text"][list] {
+        @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;
+          }
         }
       }
     }

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

@@ -9,6 +9,7 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 
 $config: () !default;
@@ -25,29 +26,31 @@ $-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="date"]',
-        ),
-        fixed-input-trailing-slots: 1,
-        input-invalid-slot: "after",
-      )
-    );
-
-    &::before {
-      @include labelled-input.input-trailing-slot {
-        @include icons.calendar;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="date"]',
+          ),
+          fixed-input-trailing-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
+
+      &::before {
+        @include labelled-input.input-trailing-slot {
+          @include icons.calendar;
+        }
       }
-    }
 
-    & ::-webkit-date-and-time-value {
-      text-align: start;
+      & ::-webkit-date-and-time-value {
+        text-align: start;
+      }
     }
   }
 }

package/scss/elements/date-time-input/index.scss

@@ -9,6 +9,7 @@
 
 @use "../_labelled-input";
 
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 
 $config: () !default;
@@ -25,29 +26,31 @@ $-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="datetime-local"]',
-        ),
-        fixed-input-trailing-slots: 1,
-        input-invalid-slot: "after",
-      )
-    );
-
-    &::before {
-      @include labelled-input.input-trailing-slot {
-        @include icons.event--schedule;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="datetime-local"]',
+          ),
+          fixed-input-trailing-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
+
+      &::before {
+        @include labelled-input.input-trailing-slot {
+          @include icons.event--schedule;
+        }
       }
-    }
 
-    & ::-webkit-date-and-time-value {
-      text-align: start;
+      & ::-webkit-date-and-time-value {
+        text-align: start;
+      }
     }
   }
 }

package/scss/elements/deleted-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,10 +25,12 @@ $-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-red;
-    color: tag-tokens.$tag-color-red;
-    text-decoration: line-through;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      padding-inline: spacing.$spacing-01;
+      background-color: tag-tokens.$tag-background-red;
+      color: tag-tokens.$tag-color-red;
+      text-decoration: line-through;
+    }
   }
 }

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

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,20 +24,22 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    column-gap: spacing.$spacing-04;
-    row-gap: layout.$density--padding;
-
-    & dt {
-      @include layout.mode--heading;
-    }
-
-    & dd {
-      @include layout.mode--body;
-      max-inline-size: layout.$mode--max-inline-size;
-      margin-inline-start: 0;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      column-gap: spacing.$spacing-04;
+      row-gap: layout.$density--padding;
+
+      & dt {
+        @include layout.mode--heading;
+      }
+
+      & dd {
+        @include layout.mode--body;
+        max-inline-size: layout.$mode--max-inline-size;
+        margin-inline-start: 0;
+      }
     }
   }
 }

package/scss/elements/details/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -26,67 +27,71 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    border-block-start: 0.0625rem solid theme.$border-subtle;
-    box-sizing: border-box;
-    padding-inline-start: calc(layout.$density--padding + 1rem + layout.$density--padding);
-    padding-inline-end: layout.$density--padding;
-
-    &:last-of-type {
-      border-block-end: 0.0625rem solid theme.$border-subtle;
-    }
-
-    & summary {
-      @include layout.mode--body-compact;
-      block-size: layout.$size--block-size;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      border-block-start: 0.0625rem solid theme.$border-subtle;
       box-sizing: border-box;
-      cursor: pointer;
-      display: flex;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: layout.$size--padding-block-end;
-      margin-inline-start: calc((layout.$density--padding + 1rem + layout.$density--padding) * -1);
-      padding-inline-start: layout.$density--padding;
-      margin-inline-end: calc(layout.$density--padding * -1);
+      padding-inline-start: calc(layout.$density--padding + 1rem + layout.$density--padding);
       padding-inline-end: layout.$density--padding;
 
-      @include guards.hover {
-        &:hover {
-          background-color: theme.$layer-hover;
-        }
+      &:last-of-type {
+        border-block-end: 0.0625rem solid theme.$border-subtle;
       }
 
-      &:active {
-        background-color: theme.$layer-active;
-      }
+      & summary {
+        @include layout.mode--body-compact;
+        block-size: layout.$size--block-size;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: layout.$size--padding-block-end;
+        margin-inline-start: calc(
+          (layout.$density--padding + 1rem + layout.$density--padding) * -1
+        );
+        padding-inline-start: layout.$density--padding;
+        margin-inline-end: calc(layout.$density--padding * -1);
+        padding-inline-end: layout.$density--padding;
+
+        @include guards.hover {
+          &:hover {
+            background-color: theme.$layer-hover;
+          }
+        }
+
+        &:active {
+          background-color: theme.$layer-active;
+        }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
       }
-    }
 
-    & summary::before {
-      content: "";
-      @include icons.chevron--down;
-      translate: 0 calc((1lh - 1rem) * 0.5);
-      display: inline-block;
-      margin-inline-end: layout.$density--padding;
+      & summary::before {
+        content: "";
+        @include icons.chevron--down;
+        translate: 0 calc((1lh - 1rem) * 0.5);
+        display: inline-block;
+        margin-inline-end: layout.$density--padding;
 
-      @include guards.motion {
-        transition: rotate layout.$mode--transition-duration
-          layout.$mode--transition-timing-function;
+        @include guards.motion {
+          transition: rotate layout.$mode--transition-duration
+            layout.$mode--transition-timing-function;
+        }
       }
-    }
 
-    &[open] {
-      padding-block-end: layout.$density--padding;
-    }
+      &[open] {
+        padding-block-end: layout.$density--padding;
+      }
 
-    &[open] summary {
-      margin-block-end: layout.$density--padding;
-    }
+      &[open] summary {
+        margin-block-end: layout.$density--padding;
+      }
 
-    &[open] summary::before {
-      rotate: 180deg;
+      &[open] summary::before {
+        rotate: 180deg;
+      }
     }
   }
 }