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

package/scss/elements/dialog/index.scss

@@ -19,6 +19,7 @@
 @use "../_layer";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -34,206 +35,208 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    position: relative;
-    padding: 0;
-
-    &:modal {
-      @include layout.size("md");
-      @include layout.density("normal");
-      @include layer.styles;
-
-      display: flex;
-      flex-direction: column;
-      color: theme.$text-primary;
-      border: none;
-      padding-inline: layout.$density--padding;
-      box-shadow: none;
-      margin: auto;
-      box-sizing: border-box;
-
-      &:focus {
-        @include focus-outline.focus-outline("outline");
-      }
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      position: relative;
+      padding: 0;
 
-      @include breakpoint.breakpoint("xlg") {
-        inline-size: 48%;
-      }
+      &:modal {
+        @include layout.size("md");
+        @include layout.density("normal");
+        @include layer.styles;
+
+        display: flex;
+        flex-direction: column;
+        color: theme.$text-primary;
+        border: none;
+        padding-inline: layout.$density--padding;
+        box-shadow: none;
+        margin: auto;
+        box-sizing: border-box;
+
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
 
-      @include breakpoint.breakpoint-down("xlg") {
-        inline-size: 60%;
-        max-block-size: 84%;
-      }
+        @include breakpoint.breakpoint("xlg") {
+          inline-size: 48%;
+        }
 
-      @include breakpoint.breakpoint-down("lg") {
-        inline-size: 84%;
-        max-block-size: 90%;
+        @include breakpoint.breakpoint-down("xlg") {
+          inline-size: 60%;
+          max-block-size: 84%;
+        }
+
+        @include breakpoint.breakpoint-down("lg") {
+          inline-size: 84%;
+          max-block-size: 90%;
+        }
+
+        @include breakpoint.breakpoint-down("md") {
+          inline-size: 100%;
+          block-size: 100%;
+          max-inline-size: 100dvi;
+          max-block-size: 100dvb;
+        }
       }
 
-      @include breakpoint.breakpoint-down("md") {
-        inline-size: 100%;
-        block-size: 100%;
-        max-inline-size: 100dvi;
-        max-block-size: 100dvb;
+      &:modal::backdrop {
+        background-color: theme.$overlay;
       }
-    }
 
-    &:modal::backdrop {
-      background-color: theme.$overlay;
-    }
+      &:modal header {
+        @include layout.mode--heading-level-4;
+        margin-block: layout.$density--padding;
+        margin-inline-end: calc(layout.$size--block-size + spacing.$spacing-05);
+      }
 
-    &:modal header {
-      @include layout.mode--heading-level-4;
-      margin-block: layout.$density--padding;
-      margin-inline-end: calc(layout.$size--block-size + spacing.$spacing-05);
-    }
+      &:modal footer {
+        @include layout.size("xl");
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        margin-inline: calc(layout.$density--padding * -1);
+        margin-block-start: spacing.$spacing-09;
+      }
 
-    &:modal footer {
-      @include layout.size("xl");
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      margin-inline: calc(layout.$density--padding * -1);
-      margin-block-start: spacing.$spacing-09;
-    }
+      &:modal:not(:has(footer)) {
+        padding-block-end: spacing.$spacing-09;
+      }
 
-    &:modal:not(:has(footer)) {
-      padding-block-end: spacing.$spacing-09;
-    }
+      // single button
+      &:modal footer > button:only-child {
+        grid-column: 3 / span 2;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "primary",
+          )
+        );
+      }
 
-    // single button
-    &:modal footer > button:only-child {
-      grid-column: 3 / span 2;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "primary",
-        )
-      );
-    }
+      // two buttons
+      &:modal footer > button:first-child:has(+ button:last-child) {
+        grid-column: 1 / span 2;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "secondary",
+          )
+        );
+      }
 
-    // two buttons
-    &:modal footer > button:first-child:has(+ button:last-child) {
-      grid-column: 1 / span 2;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "secondary",
-        )
-      );
-    }
+      &:modal footer > button:first-child + button:last-child {
+        grid-column: 3 / span 2;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "primary",
+          )
+        );
+      }
 
-    &:modal footer > button:first-child + button:last-child {
-      grid-column: 3 / span 2;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "primary",
-        )
-      );
-    }
+      // three buttons
+      &:modal footer > button:first-child:not(:has(+ button:last-child), :last-child) {
+        grid-column: 1;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "ghost",
+          )
+        );
+      }
 
-    // three buttons
-    &:modal footer > button:first-child:not(:has(+ button:last-child), :last-child) {
-      grid-column: 1;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "ghost",
-        )
-      );
-    }
+      &:modal footer > button:not(:first-child):has(+ button:last-child) {
+        grid-column: 3;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "secondary",
+          )
+        );
+      }
 
-    &:modal footer > button:not(:first-child):has(+ button:last-child) {
-      grid-column: 3;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "secondary",
-        )
-      );
-    }
+      &:modal footer > button:not(:first-child) + button:last-child {
+        grid-column: 4;
+        @include button.styles(
+          (
+            selector: "&",
+            kind: "primary",
+          )
+        );
+      }
 
-    &:modal footer > button:not(:first-child) + button:last-child {
-      grid-column: 4;
-      @include button.styles(
-        (
-          selector: "&",
-          kind: "primary",
-        )
-      );
-    }
+      // header close button
+      &:modal header > button {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        appearance: none;
+        box-shadow: none;
+        border: none;
+        border-radius: 0;
+        padding: 0;
+        background-color: transparent;
+        color: theme.$icon-primary;
+        block-size: layout.$size--block-size;
+        inline-size: layout.$size--block-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
+
+        @include guards.hover {
+          &:hover {
+            background-color: theme.$layer-hover;
+          }
+        }
 
-    // header close button
-    &:modal header > button {
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      appearance: none;
-      box-shadow: none;
-      border: none;
-      border-radius: 0;
-      padding: 0;
-      background-color: transparent;
-      color: theme.$icon-primary;
-      block-size: layout.$size--block-size;
-      inline-size: layout.$size--block-size;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: background-color layout.$mode--transition-duration
-        layout.$mode--transition-timing-function;
-
-      @include guards.hover {
-        &:hover {
-          background-color: theme.$layer-hover;
+        &:active {
+          background-color: theme.$layer-active;
         }
-      }
 
-      &:active {
-        background-color: theme.$layer-active;
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
       }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
+      &:modal header > button::after {
+        @include icons.close($size: 1.25rem);
+        display: block;
+        inset: 0;
+        content: "";
       }
-    }
-
-    &:modal header > button::after {
-      @include icons.close($size: 1.25rem);
-      display: block;
-      inset: 0;
-      content: "";
-    }
 
-    // entry animation
-    &[open]:modal {
-      translate: 0 0;
-      opacity: 1;
-      transition-property: opacity;
-      transition-duration: motion.$duration-moderate-02;
-      transition-timing-function: layout.$mode--transition-timing-function;
-
-      @include guards.motion {
-        transition-property: opacity, translate;
+      // entry animation
+      &[open]:modal {
+        translate: 0 0;
+        opacity: 1;
+        transition-property: opacity;
+        transition-duration: motion.$duration-moderate-02;
+        transition-timing-function: layout.$mode--transition-timing-function;
+
+        @include guards.motion {
+          transition-property: opacity, translate;
+
+          @starting-style {
+            opacity: 0;
+            translate: 0 -1.5rem;
+          }
+        }
 
         @starting-style {
           opacity: 0;
-          translate: 0 -1.5rem;
         }
       }
 
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    &[open]:modal::backdrop {
-      opacity: 1;
-      transition: inherit;
+      &[open]:modal::backdrop {
+        opacity: 1;
+        transition: inherit;
 
-      @starting-style {
-        opacity: 0;
+        @starting-style {
+          opacity: 0;
+        }
       }
     }
   }

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

@@ -10,6 +10,7 @@
 @use "../_labelled-input";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -25,18 +26,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="email"]',
-        ),
-        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="email"]',
+          ),
+          input-invalid-slot: "after",
+        )
+      );
+    }
   }
 }

package/scss/elements/fieldset/index.scss

@@ -12,6 +12,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -25,19 +26,21 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    border: none;
-    padding: 0;
-    margin-block: layout.$mode--margin-block;
-
-    & legend {
-      @include label.styles(
-        (
-          selector: "&",
-        )
-      );
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      border: none;
       padding: 0;
-      margin-block-end: spacing.$spacing-03;
+      margin-block: layout.$mode--margin-block;
+
+      & legend {
+        @include label.styles(
+          (
+            selector: "&",
+          )
+        );
+        padding: 0;
+        margin-block-end: spacing.$spacing-03;
+      }
     }
   }
 }

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

@@ -13,6 +13,7 @@
 @use "@carbon/styles/scss/components/button/tokens" as carbon-button;
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -27,69 +28,71 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--heading-compact;
-    display: flex;
-    flex-direction: column;
-    row-gap: spacing.$spacing-03;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--heading-compact;
+      display: flex;
+      flex-direction: column;
+      row-gap: spacing.$spacing-03;
 
-    & input[type="file"]:focus {
-      outline: none;
-      box-shadow: none;
-    }
+      & input[type="file"]:focus {
+        outline: none;
+        box-shadow: none;
+      }
 
-    & input[type="file"]:focus::file-selector-button {
-      outline: 0.125rem solid theme.$focus;
-      outline-offset: -0.125rem;
-      box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
-    }
+      & input[type="file"]:focus::file-selector-button {
+        outline: 0.125rem solid theme.$focus;
+        outline-offset: -0.125rem;
+        box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
+      }
 
-    & input[type="file"]::file-selector-button {
-      @include layout.mode--body-compact;
-      appearance: none;
-      border: none;
-      box-shadow: none;
-      border-radius: 0;
-      text-align: start;
-      background-color: carbon-button.$button-primary;
-      color: theme.$text-on-color;
-      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: layout.$density--padding;
-      padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
-      cursor: pointer;
-      transition: background-color layout.$mode--transition-duration
-        layout.$mode--transition-timing-function;
+      & input[type="file"]::file-selector-button {
+        @include layout.mode--body-compact;
+        appearance: none;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        text-align: start;
+        background-color: carbon-button.$button-primary;
+        color: theme.$text-on-color;
+        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: layout.$density--padding;
+        padding-inline-end: calc(layout.$density--padding + 1rem + layout.$density--padding);
+        cursor: pointer;
+        transition: background-color layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
 
-      @include guards.hover {
-        &:hover {
-          background-color: carbon-button.$button-primary-hover;
+        @include guards.hover {
+          &:hover {
+            background-color: carbon-button.$button-primary-hover;
+          }
         }
-      }
 
-      &:active {
-        background-color: carbon-button.$button-primary-active;
+        &:active {
+          background-color: carbon-button.$button-primary-active;
+        }
       }
-    }
 
-    &:has([disabled]) {
-      color: theme.$text-disabled;
-    }
-
-    & input[type="file"]:disabled::file-selector-button,
-    & input[type="file"]:disabled::file-selector-button:active {
-      cursor: not-allowed;
-      background-color: carbon-button.$button-disabled;
-      color: theme.$text-on-color-disabled;
-    }
+      &:has([disabled]) {
+        color: theme.$text-disabled;
+      }
 
-    @include guards.hover {
-      & input[type="file"]:disabled::file-selector-button:hover {
+      & input[type="file"]:disabled::file-selector-button,
+      & input[type="file"]:disabled::file-selector-button:active {
         cursor: not-allowed;
         background-color: carbon-button.$button-disabled;
         color: theme.$text-on-color-disabled;
       }
+
+      @include guards.hover {
+        & input[type="file"]:disabled::file-selector-button:hover {
+          cursor: not-allowed;
+          background-color: carbon-button.$button-disabled;
+          color: theme.$text-on-color-disabled;
+        }
+      }
     }
   }
 }

package/scss/elements/footer/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--body-compact;
-    color: theme.$text-secondary;
-    border-block-start: 0.0625rem solid theme.$border-subtle;
-    padding-inline: spacing.$spacing-07;
-    padding-block: layout.$density--padding;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--body-compact;
+      color: theme.$text-secondary;
+      border-block-start: 0.0625rem solid theme.$border-subtle;
+      padding-inline: spacing.$spacing-07;
+      padding-block: layout.$density--padding;
+    }
   }
 }