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

package/scss/elements/tabs/index.scss

@@ -14,6 +14,7 @@
 @use "@carbon/styles/scss/components/content-switcher/tokens" as carbon-content-switcher;
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -30,206 +31,208 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    display: flex;
-    flex-direction: row;
-
-    & button[role="tab"] {
-      @include layout.mode--body-compact;
-      position: relative;
-      appearance: none;
-      border: none;
-      box-shadow: none;
-      border-radius: 0;
-      background: none;
-      color: theme.$text-secondary;
-      block-size: layout.$size--block-size;
-      padding-inline: layout.$density--padding;
-      cursor: pointer;
-      transition-property: color, background-color, border-color;
-      transition-duration: layout.$mode--transition-duration;
-      transition-timing-function: layout.$mode--transition-timing-function;
-
-      @include guards.hover {
-        &:enabled:hover:not([aria-selected="true"]) {
-          color: theme.$text-primary;
-        }
-      }
-
-      &:focus {
-        @include focus-outline.focus-outline("outline");
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-      }
-    }
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      display: flex;
+      flex-direction: row;
 
-    & ~ [role="tabpanel"] {
-      @include layout.mode--body;
-      padding: layout.$density--padding;
-    }
-
-    @if map.get($props, "kind") == "line" {
       & button[role="tab"] {
-        border-block-end: 0.125rem solid theme.$border-subtle;
-        margin-inline-end: 0.0625rem;
+        @include layout.mode--body-compact;
+        position: relative;
+        appearance: none;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        background: none;
+        color: theme.$text-secondary;
+        block-size: layout.$size--block-size;
+        padding-inline: layout.$density--padding;
+        cursor: pointer;
+        transition-property: color, background-color, border-color;
+        transition-duration: layout.$mode--transition-duration;
+        transition-timing-function: layout.$mode--transition-timing-function;
 
         @include guards.hover {
           &:enabled:hover:not([aria-selected="true"]) {
-            border-block-end-color: theme.$border-strong;
+            color: theme.$text-primary;
           }
         }
 
-        &[aria-selected="true"] {
-          @include layout.mode--heading-compact;
-          color: theme.$text-primary;
-          border-block-end-color: theme.$border-interactive;
+        &:focus {
+          @include focus-outline.focus-outline("outline");
         }
 
         &:disabled {
-          color: theme.$text-disabled;
+          cursor: not-allowed;
         }
       }
-    }
 
-    @if map.get($props, "kind") == "contained" {
-      & button[role="tab"] {
-        background-color: theme.$layer-accent;
-        border-block-start: 0.125rem solid transparent;
+      & ~ [role="tabpanel"] {
+        @include layout.mode--body;
+        padding: layout.$density--padding;
+      }
 
-        &:not(:last-of-type, [aria-selected="true"], :has(+ [aria-selected="true"])) {
-          border-inline-end: 0.0625rem solid theme.$border-strong;
-        }
+      @if map.get($props, "kind") == "line" {
+        & button[role="tab"] {
+          border-block-end: 0.125rem solid theme.$border-subtle;
+          margin-inline-end: 0.0625rem;
 
-        @include guards.hover {
-          &:enabled:hover:not([aria-selected="true"]) {
-            background-color: theme.$layer-accent-hover;
+          @include guards.hover {
+            &:enabled:hover:not([aria-selected="true"]) {
+              border-block-end-color: theme.$border-strong;
+            }
           }
-        }
 
-        &[aria-selected="true"] {
-          @include layout.mode--heading-compact;
-          color: theme.$text-primary;
-          border-block-start: 0.125rem solid theme.$border-interactive;
-          background-color: theme.$layer;
-        }
+          &[aria-selected="true"] {
+            @include layout.mode--heading-compact;
+            color: theme.$text-primary;
+            border-block-end-color: theme.$border-interactive;
+          }
 
-        &:disabled {
-          background-color: carbon-button.$button-disabled;
-          color: theme.$text-on-color-disabled;
+          &:disabled {
+            color: theme.$text-disabled;
+          }
         }
       }
 
-      & ~ [role="tabpanel"] {
-        background-color: theme.$layer;
-      }
-    }
-
-    @if map.get($props, "kind") ==
-      "content-switcher" or
-      map.get($props, "kind") ==
-      "content-switcher--low-contrast"
-    {
-      & {
-        box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
-        border-radius: 0.25rem;
-        display: inline-grid;
-        grid-auto-flow: column;
-        grid-auto-columns: 1fr;
-      }
+      @if map.get($props, "kind") == "contained" {
+        & button[role="tab"] {
+          background-color: theme.$layer-accent;
+          border-block-start: 0.125rem solid transparent;
 
-      & button[role="tab"] {
-        text-align: start;
+          &:not(:last-of-type, [aria-selected="true"], :has(+ [aria-selected="true"])) {
+            border-inline-end: 0.0625rem solid theme.$border-strong;
+          }
 
-        &:first-child {
-          border-start-start-radius: inherit;
-          border-end-start-radius: inherit;
-        }
+          @include guards.hover {
+            &:enabled:hover:not([aria-selected="true"]) {
+              background-color: theme.$layer-accent-hover;
+            }
+          }
 
-        &:last-child {
-          border-start-end-radius: inherit;
-          border-end-end-radius: inherit;
-        }
+          &[aria-selected="true"] {
+            @include layout.mode--heading-compact;
+            color: theme.$text-primary;
+            border-block-start: 0.125rem solid theme.$border-interactive;
+            background-color: theme.$layer;
+          }
 
-        @include guards.hover {
-          &:enabled:hover:not([aria-selected="true"]) {
-            background-color: theme.$layer-hover;
+          &:disabled {
+            background-color: carbon-button.$button-disabled;
+            color: theme.$text-on-color-disabled;
           }
         }
 
-        &:enabled:active:not([aria-selected="true"]) {
-          background-color: theme.$layer-active;
+        & ~ [role="tabpanel"] {
+          background-color: theme.$layer;
         }
+      }
 
-        &[aria-selected="true"] {
-          z-index: 1;
-          border-radius: inherit;
-          color: theme.$text-inverse;
-          background-color: theme.$border-inverse;
+      @if map.get($props, "kind") ==
+        "content-switcher" or
+        map.get($props, "kind") ==
+        "content-switcher--low-contrast"
+      {
+        & {
+          box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
+          border-radius: 0.25rem;
+          display: inline-grid;
+          grid-auto-flow: column;
+          grid-auto-columns: 1fr;
         }
 
-        &:focus {
-          box-shadow: inset 0 0 0 0.1875rem theme.$background;
-        }
+        & button[role="tab"] {
+          text-align: start;
 
-        &:disabled {
-          color: theme.$text-disabled;
-        }
+          &:first-child {
+            border-start-start-radius: inherit;
+            border-end-start-radius: inherit;
+          }
 
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          inset-inline-end: 0;
-          block-size: 1lh;
-          inset-block: calc(50% - 0.5lh);
-          inline-size: 0.0625rem;
-          background-color: theme.$border-subtle;
-        }
+          &:last-child {
+            border-start-end-radius: inherit;
+            border-end-end-radius: inherit;
+          }
 
-        &[aria-selected="true"]::after,
-        &:last-child::after,
-        &:has(+ [aria-selected="true"])::after,
-        &:focus::after {
-          visibility: hidden;
-        }
+          @include guards.hover {
+            &:enabled:hover:not([aria-selected="true"]) {
+              background-color: theme.$layer-hover;
+            }
+          }
 
-        @include guards.hover {
-          &:hover::after,
-          &:has(+ :hover)::after {
+          &:enabled:active:not([aria-selected="true"]) {
+            background-color: theme.$layer-active;
+          }
+
+          &[aria-selected="true"] {
+            z-index: 1;
+            border-radius: inherit;
+            color: theme.$text-inverse;
+            background-color: theme.$border-inverse;
+          }
+
+          &:focus {
+            box-shadow: inset 0 0 0 0.1875rem theme.$background;
+          }
+
+          &:disabled {
+            color: theme.$text-disabled;
+          }
+
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            inset-inline-end: 0;
+            block-size: 1lh;
+            inset-block: calc(50% - 0.5lh);
+            inline-size: 0.0625rem;
+            background-color: theme.$border-subtle;
+          }
+
+          &[aria-selected="true"]::after,
+          &:last-child::after,
+          &:has(+ [aria-selected="true"])::after,
+          &:focus::after {
             visibility: hidden;
           }
-        }
-      }
-    }
 
-    @if map.get($props, "kind") == "content-switcher--low-contrast" {
-      & {
-        background-color: carbon-content-switcher.$content-switcher-background;
-        box-shadow: 0 0 0 0.0625rem theme.$border-strong;
+          @include guards.hover {
+            &:hover::after,
+            &:has(+ :hover)::after {
+              visibility: hidden;
+            }
+          }
+        }
       }
 
-      & button[role="tab"] {
-        &:enabled:active:not([aria-selected="true"]) {
-          background-color: carbon-content-switcher.$content-switcher-background-hover;
+      @if map.get($props, "kind") == "content-switcher--low-contrast" {
+        & {
+          background-color: carbon-content-switcher.$content-switcher-background;
+          box-shadow: 0 0 0 0.0625rem theme.$border-strong;
         }
 
-        @include guards.hover {
-          &:enabled:hover:not([aria-selected="true"]) {
+        & button[role="tab"] {
+          &:enabled:active:not([aria-selected="true"]) {
             background-color: carbon-content-switcher.$content-switcher-background-hover;
           }
-        }
 
-        &[aria-selected="true"] {
-          @include layout.mode--heading-compact;
-          background-color: carbon-content-switcher.$content-switcher-selected;
-          color: theme.$text-primary;
-          box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
-        }
+          @include guards.hover {
+            &:enabled:hover:not([aria-selected="true"]) {
+              background-color: carbon-content-switcher.$content-switcher-background-hover;
+            }
+          }
+
+          &[aria-selected="true"] {
+            @include layout.mode--heading-compact;
+            background-color: carbon-content-switcher.$content-switcher-selected;
+            color: theme.$text-primary;
+            box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
+          }
 
-        &::after {
-          background-color: theme.$border-strong;
+          &::after {
+            background-color: theme.$border-strong;
+          }
         }
       }
     }

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

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

@@ -10,6 +10,7 @@
 @use "../_labelled-input";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,25 +24,27 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include labelled-input.styles(
-      (
-        label: (
-          selector: "&",
-          axis: "block",
-        ),
-        input: (
-          selector: "textarea",
-        ),
-        input-invalid-slot: "after",
-      )
-    );
-
-    & textarea {
-      min-block-size: calc(
-        layout.$size--padding-block-start + 2lh + layout.$size--padding-block-end
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include labelled-input.styles(
+        (
+          label: (
+            selector: "&",
+            axis: "block",
+          ),
+          input: (
+            selector: "textarea",
+          ),
+          input-invalid-slot: "after",
+        )
       );
-      resize: vertical;
+
+      & textarea {
+        min-block-size: calc(
+          layout.$size--padding-block-start + 2lh + layout.$size--padding-block-end
+        );
+        resize: vertical;
+      }
     }
   }
 }

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

package/scss/elements/tile/index.scss

@@ -14,6 +14,7 @@
 @use "../_layer";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 @use "../../utilities/guards";
 
@@ -29,58 +30,61 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layer.styles;
-    padding: layout.$density--padding;
-    box-sizing: border-box;
-
-    &:is(a) {
-      position: relative;
-      display: block;
-      color: theme.$text-primary;
-      text-decoration: none;
-      padding-inline-end: spacing.$spacing-09;
-      border: 0.0625rem solid theme.$border-tile;
-      transition: background-color layout.$mode--transition-duration
-        layout.$mode--transition-timing-function;
-
-      &:visited {
-        color: inherit;
-      }
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layer.styles;
+      padding: layout.$density--padding;
+      box-sizing: border-box;
+
+      &:is(a) {
+        position: relative;
+        display: block;
+        color: theme.$text-primary;
+        text-decoration: none;
+        padding-inline-end: spacing.$spacing-09;
+        border: 0.0625rem solid theme.$border-tile;
+        transition: background-color layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
+
+        &:visited {
+          color: inherit;
+        }
 
-      & svg,
-      &:visited svg {
-        fill: currentColor;
-      }
+        & svg,
+        &:visited svg {
+          fill: currentColor;
+        }
 
-      @include guards.hover {
-        &:hover {
-          @include layer.layer-background-hover;
-          color: inherit;
+        @include guards.hover {
+          &:hover {
+            @include layer.layer-background-hover;
+            color: inherit;
+          }
         }
-      }
 
-      &:active {
-        @include layer.layer-background-active;
-      }
+        &:active {
+          @include layer.layer-background-active;
+        }
 
-      &:focus {
-        @include focus-outline.focus-outline("outline");
-      }
+        &:focus {
+          @include focus-outline.focus-outline("outline");
+        }
 
-      &::after {
-        @include icons.arrow--right;
-        content: "";
-        position: absolute;
-        color: theme.$link-primary;
-        inset-block-end: layout.$density--padding;
-        inset-inline-end: layout.$density--padding;
-        transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
-      }
+        &::after {
+          @include icons.arrow--right;
+          content: "";
+          position: absolute;
+          color: theme.$link-primary;
+          inset-block-end: layout.$density--padding;
+          inset-inline-end: layout.$density--padding;
+          transition: color layout.$mode--transition-duration
+            layout.$mode--transition-timing-function;
+        }
 
-      @include guards.hover {
-        &:hover::after {
-          color: theme.$icon-primary;
+        @include guards.hover {
+          &:hover::after {
+            color: theme.$icon-primary;
+          }
         }
       }
     }