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

package/scss/elements/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="time"]',
-        ),
-        fixed-input-trailing-slots: 1,
-        input-invalid-slot: "after",
-      )
-    );
-
-    &::before {
-      @include labelled-input.input-trailing-slot {
-        @include icons.time;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: map.get($props, "axis"),
+          ),
+          input: (
+            selector: 'input[type="time"]',
+          ),
+          fixed-input-trailing-slots: 1,
+          input-invalid-slot: "after",
+        )
+      );
+
+      &::before {
+        @include labelled-input.input-trailing-slot {
+          @include icons.time;
+        }
       }
-    }
 
-    & ::-webkit-date-and-time-value {
-      text-align: start;
+      & ::-webkit-date-and-time-value {
+        text-align: start;
+      }
     }
   }
 }

package/scss/elements/toggle/index.scss

@@ -15,6 +15,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -34,83 +35,85 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include label.styles(
-      (
-        selector: "&",
-      )
-    );
-
-    inline-size: max-content;
-
-    & button[role="switch"] {
-      position: relative;
-      appearance: none;
-      border: none;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      block-size: $-block-size;
-      inline-size: $-inline-size;
-      border-radius: calc($-block-size * 0.5);
-      background-color: theme.$toggle-off;
-      color: theme.$text-primary;
-      transition: background-color layout.$mode--transition-duration
-        layout.$mode--transition-timing-function;
-      cursor: pointer;
-
-      &:disabled,
-      &[aria-checked="true"]:disabled {
-        background-color: carbon-button.$button-disabled;
-        cursor: not-allowed;
-        color: theme.$text-disabled;
-
-        &::before {
-          background-color: theme.$icon-on-color-disabled;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include label.styles(
+        (
+          selector: "&",
+        )
+      );
+
+      inline-size: max-content;
+
+      & button[role="switch"] {
+        position: relative;
+        appearance: none;
+        border: none;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+        block-size: $-block-size;
+        inline-size: $-inline-size;
+        border-radius: calc($-block-size * 0.5);
+        background-color: theme.$toggle-off;
+        color: theme.$text-primary;
+        transition: background-color layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
+        cursor: pointer;
+
+        &:disabled,
+        &[aria-checked="true"]:disabled {
+          background-color: carbon-button.$button-disabled;
+          cursor: not-allowed;
+          color: theme.$text-disabled;
+
+          &::before {
+            background-color: theme.$icon-on-color-disabled;
+          }
         }
-      }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
-        outline-offset: spacing.$spacing-01;
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+          outline-offset: spacing.$spacing-01;
+        }
       }
-    }
 
-    & button[role="switch"] > span {
-      @include layout.mode--body-compact;
-      position: absolute;
-      inset-inline-end: calc(spacing.$spacing-03 * -1);
-      inset-block-start: calc(($-block-size - 1lh) * 0.5);
-      translate: 100% 0;
-    }
+      & button[role="switch"] > span {
+        @include layout.mode--body-compact;
+        position: absolute;
+        inset-inline-end: calc(spacing.$spacing-03 * -1);
+        inset-block-start: calc(($-block-size - 1lh) * 0.5);
+        translate: 100% 0;
+      }
 
-    & button[role="switch"] > span[aria-hidden="true"] {
-      display: none;
-    }
+      & button[role="switch"] > span[aria-hidden="true"] {
+        display: none;
+      }
 
-    & button[role="switch"][aria-checked="true"] {
-      background-color: theme.$support-success;
-    }
+      & button[role="switch"][aria-checked="true"] {
+        background-color: theme.$support-success;
+      }
 
-    & button[role="switch"]::before {
-      content: "";
-      display: block;
-      position: absolute;
-      block-size: $-knob-size;
-      inline-size: $-knob-size;
-      border-radius: 50%;
-      background-color: theme.$icon-on-color;
-      inset-inline-start: $-knob-spacing;
-      inset-block-start: $-knob-spacing;
-
-      @include guards.motion {
-        transition: translate layout.$mode--transition-duration
-          layout.$mode--transition-timing-function;
+      & button[role="switch"]::before {
+        content: "";
+        display: block;
+        position: absolute;
+        block-size: $-knob-size;
+        inline-size: $-knob-size;
+        border-radius: 50%;
+        background-color: theme.$icon-on-color;
+        inset-inline-start: $-knob-spacing;
+        inset-block-start: $-knob-spacing;
+
+        @include guards.motion {
+          transition: translate layout.$mode--transition-duration
+            layout.$mode--transition-timing-function;
+        }
       }
-    }
 
-    & button[role="switch"][aria-checked="true"]::before {
-      translate: calc($-inline-size - $-knob-size - $-knob-spacing * 2) 0;
+      & button[role="switch"][aria-checked="true"]::before {
+        translate: calc($-inline-size - $-knob-size - $-knob-spacing * 2) 0;
+      }
     }
   }
 }

package/scss/elements/tooltip/index.scss

@@ -12,6 +12,7 @@
 @use "../popover";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -27,18 +28,20 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include popover.styles(
-      (
-        selector: "&",
-        caret: true,
-        alignment: map.get($props, "alignment"),
-      )
-    );
-
-    background-color: theme.$background-inverse;
-    color: theme.$text-inverse;
-    inline-size: max-content;
-    max-inline-size: 20rem;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include popover.styles(
+        (
+          selector: "&",
+          caret: true,
+          alignment: map.get($props, "alignment"),
+        )
+      );
+
+      background-color: theme.$background-inverse;
+      color: theme.$text-inverse;
+      inline-size: max-content;
+      max-inline-size: 20rem;
+    }
   }
 }

package/scss/elements/tree-view/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,108 +29,111 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    background-color: theme.$layer;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    & li[role="treeitem"] > :is(span, a) {
-      @include layout.mode--body-compact;
-      color: theme.$text-secondary;
-      display: flex;
-      flex-direction: row;
-      column-gap: spacing.$spacing-03;
-      block-size: layout.$size--block-size;
-      padding-block-start: layout.$size--padding-block-start;
-      padding-block-end: layout.$size--padding-block-end;
-      padding-inline-end: layout.$density--padding;
-      box-sizing: border-box;
-      cursor: pointer;
-      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;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      background-color: theme.$layer;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      & li[role="treeitem"] > :is(span, a) {
+        @include layout.mode--body-compact;
+        color: theme.$text-secondary;
+        display: flex;
+        flex-direction: row;
+        column-gap: spacing.$spacing-03;
+        block-size: layout.$size--block-size;
+        padding-block-start: layout.$size--padding-block-start;
+        padding-block-end: layout.$size--padding-block-end;
+        padding-inline-end: layout.$density--padding;
+        box-sizing: border-box;
+        cursor: pointer;
+        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-active;
-      }
+        &:active {
+          background-color: theme.$layer-active;
+        }
 
-      & > svg {
-        fill: currentColor;
-        block-size: 1rem;
-        inline-size: 1rem;
-        translate: 0 0.0625rem;
+        & > svg {
+          fill: currentColor;
+          block-size: 1rem;
+          inline-size: 1rem;
+          translate: 0 0.0625rem;
+        }
       }
-    }
 
-    & li[role="treeitem"]:focus {
-      outline: none;
+      & li[role="treeitem"]:focus {
+        outline: none;
 
-      & > :is(span, a) {
-        @include focus-outline.focus-outline("outline");
+        & > :is(span, a) {
+          @include focus-outline.focus-outline("outline");
+        }
       }
-    }
-
-    & li[role="treeitem"][aria-selected="true"] > :is(span, a) {
-      color: theme.$text-primary;
-      background-color: theme.$layer-selected;
-    }
 
-    & li[role="treeitem"][aria-current] > :is(span, a) {
-      box-shadow: inset 0.25rem 0 0 0 theme.$border-interactive;
-    }
-
-    & li[role="treeitem"][aria-disabled="true"] > :is(span, a) {
-      color: theme.$text-disabled;
-      cursor: not-allowed;
+      & li[role="treeitem"][aria-selected="true"] > :is(span, a) {
+        color: theme.$text-primary;
+        background-color: theme.$layer-selected;
+      }
 
-      &:active {
-        background-color: transparent;
+      & li[role="treeitem"][aria-current] > :is(span, a) {
+        box-shadow: inset 0.25rem 0 0 0 theme.$border-interactive;
       }
 
-      @include guards.hover {
-        &:hover {
+      & li[role="treeitem"][aria-disabled="true"] > :is(span, a) {
+        color: theme.$text-disabled;
+        cursor: not-allowed;
+
+        &:active {
           background-color: transparent;
         }
+
+        @include guards.hover {
+          &:hover {
+            background-color: transparent;
+          }
+        }
       }
-    }
 
-    & li[role="treeitem"] > ul[role="group"] {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
+      & li[role="treeitem"] > ul[role="group"] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-    & li[role="treeitem"][aria-expanded="false"] > ul[role="group"] {
-      display: none;
-    }
+      & li[role="treeitem"][aria-expanded="false"] > ul[role="group"] {
+        display: none;
+      }
 
-    & li[role="treeitem"][aria-expanded="false"] > :is(span, a)::before {
-      rotate: -90deg;
-    }
+      & li[role="treeitem"][aria-expanded="false"] > :is(span, a)::before {
+        rotate: -90deg;
+      }
 
-    &:has([aria-expanded]) li[role="treeitem"] > :is(span, a)::before {
-      content: "";
-      display: block;
-      inline-size: 1rem;
-      translate: 0 0.0625rem;
-      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
-    }
+      &:has([aria-expanded]) li[role="treeitem"] > :is(span, a)::before {
+        content: "";
+        display: block;
+        inline-size: 1rem;
+        translate: 0 0.0625rem;
+        transition: rotate layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
+      }
 
-    & li[role="treeitem"][aria-expanded] > :is(span, a)::before {
-      @include icons.caret--down;
-    }
+      & li[role="treeitem"][aria-expanded] > :is(span, a)::before {
+        @include icons.caret--down;
+      }
 
-    @for $i from 1 through 16 {
-      & li[role="treeitem"][aria-level="#{$i}"] > :is(span, a) {
-        padding-inline-start: calc(layout.$density--padding * $i);
+      @for $i from 1 through 16 {
+        & li[role="treeitem"][aria-level="#{$i}"] > :is(span, a) {
+          padding-inline-start: calc(layout.$density--padding * $i);
+        }
       }
     }
   }

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

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

package/scss/elements/url-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="url"]',
-        ),
-        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="url"]',
+          ),
+          input-invalid-slot: "after",
+        )
+      );
+    }
   }
 }

package/scss/prebuilt/editorial/_elements.scss

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use "../../utilities/cascade-layer";
+
 @use "../../elements/abbreviation";
 @use "../../elements/anchor";
 @use "../../elements/block-quotation";
@@ -36,37 +38,39 @@
 @use "../../elements/unordered-list";
 
 @mixin styles {
-  @include abbreviation.styles;
-  @include anchor.styles;
-  @include block-quotation.styles;
-  @include body.styles;
-  @include bold-text.styles;
-  @include code.styles;
-  @include deleted-text.styles;
-  @include description-list.styles;
-  @include details.styles;
-  @include heading-level-1.styles;
-  @include heading-level-2.styles;
-  @include heading-level-3.styles;
-  @include heading-level-4.styles;
-  @include heading-level-5.styles;
-  @include heading-level-6.styles;
-  @include horizontal-rule.styles;
-  @include image.styles;
-  @include inline-quotation.styles;
-  @include inserted-text.styles;
-  @include italic-text.styles;
-  @include keyboard-input.styles;
-  @include main.styles;
-  @include marked-text.styles;
-  @include ordered-list.styles;
-  @include paragraph.styles;
-  @include preformatted.styles;
-  @include small-text.styles;
-  @include table.styles(
-    (
-      kind: "structured-list--flush",
-    )
-  );
-  @include unordered-list.styles;
+  @include cascade-layer.wrap {
+    @include abbreviation.styles;
+    @include anchor.styles;
+    @include block-quotation.styles;
+    @include body.styles;
+    @include bold-text.styles;
+    @include code.styles;
+    @include deleted-text.styles;
+    @include description-list.styles;
+    @include details.styles;
+    @include heading-level-1.styles;
+    @include heading-level-2.styles;
+    @include heading-level-3.styles;
+    @include heading-level-4.styles;
+    @include heading-level-5.styles;
+    @include heading-level-6.styles;
+    @include horizontal-rule.styles;
+    @include image.styles;
+    @include inline-quotation.styles;
+    @include inserted-text.styles;
+    @include italic-text.styles;
+    @include keyboard-input.styles;
+    @include main.styles;
+    @include marked-text.styles;
+    @include ordered-list.styles;
+    @include paragraph.styles;
+    @include preformatted.styles;
+    @include small-text.styles;
+    @include table.styles(
+      (
+        kind: "structured-list--flush",
+      )
+    );
+    @include unordered-list.styles;
+  }
 }