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

package/scss/elements/button/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;
@@ -29,242 +30,244 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--body-compact;
-    appearance: none;
-    border: none;
-    box-shadow: none;
-    border-radius: 0;
-    text-align: start;
-    display: flex;
-    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-property: color, background-color;
-    transition-duration: layout.$mode--transition-duration;
-    transition-timing-function: layout.$mode--transition-timing-function;
-
-    &:focus {
-      outline: 0.125rem solid theme.$focus;
-      outline-offset: -0.125rem;
-      box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    & > svg {
-      fill: currentColor;
-      block-size: 1rem;
-      inline-size: 1rem;
-      translate: 0 0.125rem;
-    }
-
-    &:has(> svg:not(:only-child)) {
-      padding-inline-end: layout.$density--padding;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--body-compact;
+      appearance: none;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      text-align: start;
+      display: flex;
+      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-property: color, background-color;
+      transition-duration: layout.$mode--transition-duration;
+      transition-timing-function: layout.$mode--transition-timing-function;
 
-      & > svg {
-        margin-inline-start: layout.$density--padding;
+      &:focus {
+        outline: 0.125rem solid theme.$focus;
+        outline-offset: -0.125rem;
+        box-shadow: inset 0 0 0 0.1875rem theme.$layer-background;
       }
-    }
 
-    &:has(> svg:only-child),
-    &:has(> svg:first-child + [popover="hint"]:last-child) {
-      padding-inline: unset;
-      aspect-ratio: 1;
-      justify-content: center;
+      &:disabled {
+        cursor: not-allowed;
+      }
 
       & > svg {
-        margin-inline: 0;
+        fill: currentColor;
+        block-size: 1rem;
+        inline-size: 1rem;
+        translate: 0 0.125rem;
       }
-    }
 
-    @if map.get($props, "kind") == "primary" {
-      background-color: carbon-button.$button-primary;
-      color: theme.$text-on-color;
+      &:has(> svg:not(:only-child)) {
+        padding-inline-end: layout.$density--padding;
 
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: carbon-button.$button-primary-hover;
+        & > svg {
+          margin-inline-start: layout.$density--padding;
         }
       }
 
-      &:active {
-        background-color: carbon-button.$button-primary-active;
-      }
+      &:has(> svg:only-child),
+      &:has(> svg:first-child + [popover="hint"]:last-child) {
+        padding-inline: unset;
+        aspect-ratio: 1;
+        justify-content: center;
 
-      &:disabled {
-        background-color: carbon-button.$button-disabled;
-        color: theme.$text-on-color-disabled;
+        & > svg {
+          margin-inline: 0;
+        }
       }
-    }
 
-    @if map.get($props, "kind") == "secondary" {
-      background-color: carbon-button.$button-secondary;
-      color: theme.$text-on-color;
+      @if map.get($props, "kind") == "primary" {
+        background-color: carbon-button.$button-primary;
+        color: theme.$text-on-color;
 
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: carbon-button.$button-secondary-hover;
+        @include guards.hover {
+          &:enabled:hover {
+            background-color: carbon-button.$button-primary-hover;
+          }
         }
-      }
 
-      &:enabled:active {
-        background-color: carbon-button.$button-secondary-active;
-      }
+        &:active {
+          background-color: carbon-button.$button-primary-active;
+        }
 
-      &:disabled {
-        background-color: carbon-button.$button-disabled;
-        color: theme.$text-on-color-disabled;
+        &:disabled {
+          background-color: carbon-button.$button-disabled;
+          color: theme.$text-on-color-disabled;
+        }
       }
-    }
 
-    @if map.get($props, "kind") == "tertiary" {
-      background-color: transparent;
-      color: carbon-button.$button-tertiary;
-      outline: 0.0625rem solid carbon-button.$button-tertiary;
-      outline-offset: -0.0625rem;
+      @if map.get($props, "kind") == "secondary" {
+        background-color: carbon-button.$button-secondary;
+        color: theme.$text-on-color;
 
-      @include guards.hover {
-        &:enabled:hover {
-          color: theme.$text-inverse;
-          background-color: carbon-button.$button-tertiary-hover;
+        @include guards.hover {
+          &:enabled:hover {
+            background-color: carbon-button.$button-secondary-hover;
+          }
         }
-      }
 
-      &:focus {
-        color: theme.$text-inverse;
-        background-color: carbon-button.$button-tertiary;
-      }
+        &:enabled:active {
+          background-color: carbon-button.$button-secondary-active;
+        }
 
-      &:enabled:active {
-        background-color: carbon-button.$button-tertiary-active;
+        &:disabled {
+          background-color: carbon-button.$button-disabled;
+          color: theme.$text-on-color-disabled;
+        }
       }
 
-      &:disabled {
-        outline-color: carbon-button.$button-disabled;
-        color: theme.$text-disabled;
-      }
-    }
+      @if map.get($props, "kind") == "tertiary" {
+        background-color: transparent;
+        color: carbon-button.$button-tertiary;
+        outline: 0.0625rem solid carbon-button.$button-tertiary;
+        outline-offset: -0.0625rem;
+
+        @include guards.hover {
+          &:enabled:hover {
+            color: theme.$text-inverse;
+            background-color: carbon-button.$button-tertiary-hover;
+          }
+        }
 
-    @if map.get($props, "kind") == "ghost" {
-      background-color: transparent;
-      color: theme.$link-primary;
-      padding-inline-end: layout.$density--padding;
+        &:focus {
+          color: theme.$text-inverse;
+          background-color: carbon-button.$button-tertiary;
+        }
 
-      @include guards.hover {
-        &:enabled:hover {
-          color: theme.$link-primary-hover;
-          background-color: theme.$layer-hover;
+        &:enabled:active {
+          background-color: carbon-button.$button-tertiary-active;
         }
-      }
 
-      &:enabled:active {
-        background-color: theme.$layer-active;
+        &:disabled {
+          outline-color: carbon-button.$button-disabled;
+          color: theme.$text-disabled;
+        }
       }
 
-      &:disabled {
-        color: theme.$text-disabled;
-      }
+      @if map.get($props, "kind") == "ghost" {
+        background-color: transparent;
+        color: theme.$link-primary;
+        padding-inline-end: layout.$density--padding;
 
-      &:has(> svg:not(:only-child)) > svg {
-        margin-inline-start: spacing.$spacing-03;
-      }
+        @include guards.hover {
+          &:enabled:hover {
+            color: theme.$link-primary-hover;
+            background-color: theme.$layer-hover;
+          }
+        }
 
-      & > svg:only-child,
-      & > svg:first-child:has(+ [popover="hint"]:last-child) {
-        color: theme.$icon-primary;
-      }
+        &:enabled:active {
+          background-color: theme.$layer-active;
+        }
 
-      &:disabled > svg:only-child,
-      &:disabled > svg:first-child:has(+ [popover="hint"]:last-child) {
-        color: theme.$icon-disabled;
-      }
+        &:disabled {
+          color: theme.$text-disabled;
+        }
 
-      &[aria-pressed="true"]:has(> svg:only-child),
-      &[aria-pressed="true"]:has(> svg:first-child + [popover="hint"]:last-child) {
-        background-color: theme.$background-selected;
-      }
-    }
+        &:has(> svg:not(:only-child)) > svg {
+          margin-inline-start: spacing.$spacing-03;
+        }
 
-    @if map.get($props, "kind") == "danger--primary" {
-      background-color: carbon-button.$button-danger-primary;
-      color: theme.$text-on-color;
+        & > svg:only-child,
+        & > svg:first-child:has(+ [popover="hint"]:last-child) {
+          color: theme.$icon-primary;
+        }
 
-      @include guards.hover {
-        &:enabled:hover {
-          background-color: carbon-button.$button-danger-hover;
+        &:disabled > svg:only-child,
+        &:disabled > svg:first-child:has(+ [popover="hint"]:last-child) {
+          color: theme.$icon-disabled;
         }
-      }
 
-      &:enabled:active {
-        background-color: carbon-button.$button-danger-active;
+        &[aria-pressed="true"]:has(> svg:only-child),
+        &[aria-pressed="true"]:has(> svg:first-child + [popover="hint"]:last-child) {
+          background-color: theme.$background-selected;
+        }
       }
 
-      &:disabled {
-        background-color: carbon-button.$button-disabled;
-        color: theme.$text-on-color-disabled;
-      }
-    }
+      @if map.get($props, "kind") == "danger--primary" {
+        background-color: carbon-button.$button-danger-primary;
+        color: theme.$text-on-color;
 
-    @if map.get($props, "kind") == "danger--tertiary" {
-      background-color: transparent;
-      color: carbon-button.$button-danger-secondary;
-      outline: 0.0625rem solid carbon-button.$button-danger-secondary;
-      outline-offset: -0.0625rem;
+        @include guards.hover {
+          &:enabled:hover {
+            background-color: carbon-button.$button-danger-hover;
+          }
+        }
 
-      @include guards.hover {
-        &:enabled:hover {
-          color: theme.$text-on-color;
-          background-color: carbon-button.$button-danger-hover;
-          outline-color: carbon-button.$button-danger-hover;
+        &:enabled:active {
+          background-color: carbon-button.$button-danger-active;
         }
-      }
 
-      &:focus {
-        color: theme.$text-on-color;
-        background-color: carbon-button.$button-danger-primary;
+        &:disabled {
+          background-color: carbon-button.$button-disabled;
+          color: theme.$text-on-color-disabled;
+        }
       }
 
-      &:enabled:active {
-        background-color: carbon-button.$button-danger-active;
-        outline-color: carbon-button.$button-danger-active;
-      }
+      @if map.get($props, "kind") == "danger--tertiary" {
+        background-color: transparent;
+        color: carbon-button.$button-danger-secondary;
+        outline: 0.0625rem solid carbon-button.$button-danger-secondary;
+        outline-offset: -0.0625rem;
+
+        @include guards.hover {
+          &:enabled:hover {
+            color: theme.$text-on-color;
+            background-color: carbon-button.$button-danger-hover;
+            outline-color: carbon-button.$button-danger-hover;
+          }
+        }
 
-      &:disabled {
-        outline-color: carbon-button.$button-disabled;
-        color: theme.$text-disabled;
-      }
-    }
+        &:focus {
+          color: theme.$text-on-color;
+          background-color: carbon-button.$button-danger-primary;
+        }
 
-    @if map.get($props, "kind") == "danger--ghost" {
-      background-color: transparent;
-      color: carbon-button.$button-danger-secondary;
-      padding-inline-end: layout.$density--padding;
+        &:enabled:active {
+          background-color: carbon-button.$button-danger-active;
+          outline-color: carbon-button.$button-danger-active;
+        }
 
-      @include guards.hover {
-        &:enabled:hover {
-          color: theme.$text-on-color;
-          background-color: carbon-button.$button-danger-hover;
-          outline-color: carbon-button.$button-danger-hover;
+        &:disabled {
+          outline-color: carbon-button.$button-disabled;
+          color: theme.$text-disabled;
         }
       }
 
-      &:enabled:active {
-        background-color: carbon-button.$button-danger-active;
-        outline-color: carbon-button.$button-danger-active;
-      }
+      @if map.get($props, "kind") == "danger--ghost" {
+        background-color: transparent;
+        color: carbon-button.$button-danger-secondary;
+        padding-inline-end: layout.$density--padding;
+
+        @include guards.hover {
+          &:enabled:hover {
+            color: theme.$text-on-color;
+            background-color: carbon-button.$button-danger-hover;
+            outline-color: carbon-button.$button-danger-hover;
+          }
+        }
 
-      &:disabled {
-        color: theme.$text-disabled;
-      }
+        &:enabled:active {
+          background-color: carbon-button.$button-danger-active;
+          outline-color: carbon-button.$button-danger-active;
+        }
 
-      &:has(> svg:not(:only-child)) > svg {
-        margin-inline-start: spacing.$spacing-03;
+        &:disabled {
+          color: theme.$text-disabled;
+        }
+
+        &:has(> svg:not(:only-child)) > svg {
+          margin-inline-start: spacing.$spacing-03;
+        }
       }
     }
   }

package/scss/elements/checkbox/index.scss

@@ -14,6 +14,7 @@
 @use "../label";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 
 $config: () !default;
@@ -28,50 +29,52 @@ $-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="checkbox"] {
-      grid-column: 1;
-      position: relative;
-      appearance: none;
-      border: none;
-      block-size: 1rem;
-      inline-size: 1rem;
-      color: theme.$icon-primary;
-      border-radius: 0.125rem;
+      & input[type="checkbox"] {
+        grid-column: 1;
+        position: relative;
+        appearance: none;
+        border: none;
+        block-size: 1rem;
+        inline-size: 1rem;
+        color: theme.$icon-primary;
+        border-radius: 0.125rem;
 
-      &: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;
+        }
 
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        @include icons.checkbox;
-        scale: 1.25;
-      }
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          @include icons.checkbox;
+          scale: 1.25;
+        }
 
-      &:checked::before {
-        @include icons.checkbox--checked--filled;
-      }
+        &:checked::before {
+          @include icons.checkbox--checked--filled;
+        }
 
-      &:indeterminate::before {
-        @include icons.checkbox--indeterminate--filled;
+        &:indeterminate::before {
+          @include icons.checkbox--indeterminate--filled;
+        }
       }
     }
   }

package/scss/elements/code/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/theme";
 
 @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--code;
-    background-color: theme.$layer;
-    padding-inline: spacing.$spacing-01;
-    border-radius: 0.0625rem;
-    box-shadow: 0 0 0 0.125rem theme.$layer;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--code;
+      background-color: theme.$layer;
+      padding-inline: spacing.$spacing-01;
+      border-radius: 0.0625rem;
+      box-shadow: 0 0 0 0.125rem theme.$layer;
+    }
   }
 }