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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/element-styles",
-  "version": "0.3.15",
+  "version": "0.3.16-rc.0",
   "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
   "keywords": [
     "carbon",
@@ -54,7 +54,7 @@
     "lightningcss": "^1.33.0",
     "marked": "^18.0.6",
     "marked-highlight": "^2.2.4",
-    "oxfmt": "^0.66.0",
+    "oxfmt": "^0.71.0",
     "oxlint": "^1.76.0",
     "sass": "^1.101.0",
     "typescript": "^7.0.2",

package/scss/_config.scss

@@ -5,4 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// The prefix used for all css custom properties and `@keyframes`
+/// names defined by @carbon/element-styles.
+/// **NOTE:** The @carbon/styles prefix will always precede this.
+/// @group config
 $prefix: "es" !default;
+
+/// The name used for the CSS `@layer` declaration wrapping
+/// all emitted styles.
+/// @group config
+$cascade-layer-name: "carbon-element-styles" !default;

package/scss/elements/_heading/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -20,8 +21,10 @@ $-default-config: ();
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  margin-block-end: layout.$mode--margin-block;
-  margin-block-start: calc(layout.$mode--margin-block + 0.75lh);
-  max-inline-size: min(layout.$mode--max-inline-size, 75%);
-  text-wrap: balance;
+  @include cascade-layer.wrap {
+    margin-block-end: layout.$mode--margin-block;
+    margin-block-start: calc(layout.$mode--margin-block + 0.75lh);
+    max-inline-size: min(layout.$mode--max-inline-size, 75%);
+    text-wrap: balance;
+  }
 }

package/scss/elements/_input/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -30,64 +31,66 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  @include layout.mode--body-compact;
-  position: relative;
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  border-radius: 0;
-  block-size: layout.$size--block-size;
-  padding-block-start: layout.$size--padding-block-start;
-  padding-block-end: layout.$size--padding-block-end;
-  padding-inline: layout.$density--padding;
-  background-color: theme.$field;
-  color: theme.$text-primary;
-  border-block-end: 0.0625rem solid theme.$border-strong;
-  box-sizing: border-box;
-  transition-property: color, background-color;
-  transition-duration: layout.$mode--transition-duration;
-  transition-timing-function: layout.$mode--transition-timing-function;
+  @include cascade-layer.wrap {
+    @include layout.mode--body-compact;
+    position: relative;
+    appearance: none;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    block-size: layout.$size--block-size;
+    padding-block-start: layout.$size--padding-block-start;
+    padding-block-end: layout.$size--padding-block-end;
+    padding-inline: layout.$density--padding;
+    background-color: theme.$field;
+    color: theme.$text-primary;
+    border-block-end: 0.0625rem solid theme.$border-strong;
+    box-sizing: border-box;
+    transition-property: color, background-color;
+    transition-duration: layout.$mode--transition-duration;
+    transition-timing-function: layout.$mode--transition-timing-function;
 
-  &::placeholder {
-    font: inherit;
-    color: theme.$text-placeholder;
-  }
-
-  @if map.get($props, "emit-readonly") {
-    &:read-only {
-      background-color: transparent;
-      border-block-end-color: theme.$border-subtle;
+    &::placeholder {
+      font: inherit;
+      color: theme.$text-placeholder;
     }
-  }
 
-  @if map.get($props, "emit-disabled") {
-    &:disabled {
-      color: theme.$text-disabled;
-      background-color: theme.$layer;
-      border-block-end-color: transparent;
-      cursor: not-allowed;
+    @if map.get($props, "emit-readonly") {
+      &:read-only {
+        background-color: transparent;
+        border-block-end-color: theme.$border-subtle;
+      }
     }
-  }
 
-  @if map.get($props, "emit-invalid") {
-    &:invalid,
-    &[aria-invalid="true"] {
-      outline-offset: -0.125rem;
-      outline: 0.125rem solid theme.$support-error;
-      border-block-end-color: transparent;
+    @if map.get($props, "emit-disabled") {
+      &:disabled {
+        color: theme.$text-disabled;
+        background-color: theme.$layer;
+        border-block-end-color: transparent;
+        cursor: not-allowed;
+      }
     }
-  }
 
-  @if map.get($props, "emit-focus") {
-    &:focus {
-      @include focus-outline.focus-outline("outline");
+    @if map.get($props, "emit-invalid") {
+      &:invalid,
+      &[aria-invalid="true"] {
+        outline-offset: -0.125rem;
+        outline: 0.125rem solid theme.$support-error;
+        border-block-end-color: transparent;
+      }
     }
 
-    @if map.get($props, "emit-invalid") {
-      &:focus:invalid,
-      &:focus[aria-invalid="true"] {
+    @if map.get($props, "emit-focus") {
+      &:focus {
         @include focus-outline.focus-outline("outline");
       }
+
+      @if map.get($props, "emit-invalid") {
+        &:focus:invalid,
+        &:focus[aria-invalid="true"] {
+          @include focus-outline.focus-outline("outline");
+        }
+      }
     }
   }
 }

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

@@ -14,6 +14,7 @@
 @use "../_input";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/icons";
 
 $config: () !default;
@@ -52,57 +53,59 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "label", "selector")} {
-    @include label.styles(
-      (
-        selector: "&",
-        axis: map.get($props, "label", "axis"),
-      )
-    );
-
-    position: relative;
-
-    #{map.get($props, "input", "selector")} {
-      @include input.styles(
+  @include cascade-layer.wrap {
+    #{map.get($props, "label", "selector")} {
+      @include label.styles(
         (
           selector: "&",
-          emit-readonly: map.get($props, "input", "emit-readonly"),
-          emit-disabled: map.get($props, "input", "emit-disabled"),
-          emit-invalid: map.get($props, "input", "emit-invalid"),
-          emit-focus: map.get($props, "input", "emit-focus"),
+          axis: map.get($props, "label", "axis"),
         )
       );
 
-      padding-inline-start: -get-slot-space(map.get($props, "fixed-input-leading-slots"));
-      padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots"));
-    }
+      position: relative;
+
+      #{map.get($props, "input", "selector")} {
+        @include input.styles(
+          (
+            selector: "&",
+            emit-readonly: map.get($props, "input", "emit-readonly"),
+            emit-disabled: map.get($props, "input", "emit-disabled"),
+            emit-invalid: map.get($props, "input", "emit-invalid"),
+            emit-focus: map.get($props, "input", "emit-focus"),
+          )
+        );
+
+        padding-inline-start: -get-slot-space(map.get($props, "fixed-input-leading-slots"));
+        padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots"));
+      }
 
-    &::before,
-    &::after {
-      z-index: 9999;
-      position: absolute;
-      pointer-events: none;
-      inset-block-start: calc(layout.$size--padding-block-start - ((1rem - 1lh) * 0.5));
-
-      @if map.get($props, "label", "axis") == "block" {
-        grid-row: 2;
-      } @else {
-        grid-column: 2;
+      &::before,
+      &::after {
+        z-index: 9999;
+        position: absolute;
+        pointer-events: none;
+        inset-block-start: calc(layout.$size--padding-block-start - ((1rem - 1lh) * 0.5));
+
+        @if map.get($props, "label", "axis") == "block" {
+          grid-row: 2;
+        } @else {
+          grid-column: 2;
+        }
       }
-    }
 
-    @if map.get($props, "input-invalid-slot") and map.get($props, "input", "emit-invalid") {
-      &:has(#{map.get($props, "input", "selector")}:invalid),
-      &:has(#{map.get($props, "input", "selector")}[aria-invalid="true"]) {
-        &::#{map.get($props, 'input-invalid-slot')} {
-          @include input-trailing-slot(map.get($props, "fixed-input-trailing-slots") + 1) {
-            @include icons.warning--filled;
-            color: theme.$support-error;
+      @if map.get($props, "input-invalid-slot") and map.get($props, "input", "emit-invalid") {
+        &:has(#{map.get($props, "input", "selector")}:invalid),
+        &:has(#{map.get($props, "input", "selector")}[aria-invalid="true"]) {
+          &::#{map.get($props, 'input-invalid-slot')} {
+            @include input-trailing-slot(map.get($props, "fixed-input-trailing-slots") + 1) {
+              @include icons.warning--filled;
+              color: theme.$support-error;
+            }
           }
-        }
 
-        #{map.get($props, "input", "selector")} {
-          padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots") + 1);
+          #{map.get($props, "input", "selector")} {
+            padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots") + 1);
+          }
         }
       }
     }

package/scss/elements/_layer/index.scss

@@ -12,6 +12,7 @@
 @use "@carbon/styles/scss/utilities/custom-property";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/tokens";
 
 $config: () !default;
@@ -39,23 +40,25 @@ $-default-config: ();
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  // fallback for browers without container style query support
-  background-color: theme.$layer;
+  @include cascade-layer.wrap {
+    // fallback for browers without container style query support
+    background-color: theme.$layer;
 
-  @include -on-layer("01", true) {
-    background-color: theme.$layer-background;
-    @include tokens.set("layer-level", "02");
-    @include layer-tokens.emit-layer-tokens(2);
-  }
+    @include -on-layer("01", true) {
+      background-color: theme.$layer-background;
+      @include tokens.set("layer-level", "02");
+      @include layer-tokens.emit-layer-tokens(2);
+    }
 
-  @include -on-layer("02") {
-    background-color: theme.$layer-background;
-    @include tokens.set("layer-level", "03");
-    @include layer-tokens.emit-layer-tokens(3);
-  }
+    @include -on-layer("02") {
+      background-color: theme.$layer-background;
+      @include tokens.set("layer-level", "03");
+      @include layer-tokens.emit-layer-tokens(3);
+    }
 
-  @include -on-layer("03") {
-    background-color: theme.$layer;
+    @include -on-layer("03") {
+      background-color: theme.$layer;
+    }
   }
 }
 

package/scss/elements/abbreviation/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,9 +24,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    text-decoration: none;
-    cursor: help;
-    border-block-end: 0.0625rem dotted theme.$border-strong;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      text-decoration: none;
+      cursor: help;
+      border-block-end: 0.0625rem dotted theme.$border-strong;
+    }
   }
 }

package/scss/elements/address/index.scss

@@ -10,6 +10,7 @@
 @use "@carbon/styles/scss/theme";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -23,9 +24,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--helper-text;
-    color: theme.$text-secondary;
-    font-style: normal;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--helper-text;
+      color: theme.$text-secondary;
+      font-style: normal;
+    }
   }
 }

package/scss/elements/anchor/index.scss

@@ -12,6 +12,7 @@
 @use "@carbon/styles/scss/utilities/focus-outline";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 @use "../../utilities/guards";
 
 $config: () !default;
@@ -29,44 +30,46 @@ $-default-config: (
   $props: map.deep-merge($-default-config, $config);
   $emit-visited: map.get($props, "emit-visited") == true;
 
-  #{map.get($props, "selector")} {
-    display: inline-flex;
-    align-items: center;
-    column-gap: spacing.$spacing-03;
-    color: theme.$link-primary;
-    text-decoration: underline;
-    transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      display: inline-flex;
+      align-items: center;
+      column-gap: spacing.$spacing-03;
+      color: theme.$link-primary;
+      text-decoration: underline;
+      transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
 
-    // TODO: remove when fixed firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=868975
-    @if $emit-visited {
-      @supports (-moz-appearance: none) {
-        transition: none;
+      // TODO: remove when fixed firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=868975
+      @if $emit-visited {
+        @supports (-moz-appearance: none) {
+          transition: none;
+        }
       }
-    }
 
-    @include guards.hover {
-      &:hover {
-        color: theme.$link-primary-hover;
+      @include guards.hover {
+        &:hover {
+          color: theme.$link-primary-hover;
+        }
       }
-    }
 
-    @if $emit-visited {
-      &:visited {
-        color: theme.$link-visited;
+      @if $emit-visited {
+        &:visited {
+          color: theme.$link-visited;
+        }
+        &:visited svg {
+          fill: theme.$link-visited;
+        }
       }
-      &:visited svg {
-        fill: theme.$link-visited;
-      }
-    }
 
-    &:focus {
-      @include focus-outline.focus-outline("outline");
-    }
+      &:focus {
+        @include focus-outline.focus-outline("outline");
+      }
 
-    & svg {
-      fill: currentColor;
-      block-size: 1rem;
-      inline-size: 1rem;
+      & svg {
+        fill: currentColor;
+        block-size: 1rem;
+        inline-size: 1rem;
+      }
     }
   }
 }

package/scss/elements/block-quotation/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -24,40 +25,42 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    margin-block: layout.$mode--margin-block;
-    margin-inline: spacing.$spacing-08;
-    max-inline-size: 50ch;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      margin-block: layout.$mode--margin-block;
+      margin-inline: spacing.$spacing-08;
+      max-inline-size: 50ch;
 
-    @include layout.mode--quotation;
-
-    & p {
       @include layout.mode--quotation;
-      quotes: auto;
-    }
 
-    & p::before {
-      content: open-quote;
-      margin-inline-start: -1.1ch;
-    }
+      & p {
+        @include layout.mode--quotation;
+        quotes: auto;
+      }
 
-    & p::after {
-      content: close-quote;
-    }
+      & p::before {
+        content: open-quote;
+        margin-inline-start: -1.1ch;
+      }
 
-    & p {
-      margin-block: 0;
-    }
+      & p::after {
+        content: close-quote;
+      }
 
-    & + cite {
-      @include layout.mode--body-compact;
-      margin-inline-start: spacing.$spacing-08;
-      font-style: italic;
-    }
+      & p {
+        margin-block: 0;
+      }
+
+      & + cite {
+        @include layout.mode--body-compact;
+        margin-inline-start: spacing.$spacing-08;
+        font-style: italic;
+      }
 
-    & + cite::before {
-      content: "—";
-      margin-inline-end: spacing.$spacing-02;
+      & + cite::before {
+        content: "—";
+        margin-inline-end: spacing.$spacing-02;
+      }
     }
   }
 }

package/scss/elements/body/index.scss

@@ -11,6 +11,7 @@
 @use "@carbon/styles/scss/spacing";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -24,9 +25,11 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    @include layout.mode--body;
-    background-color: theme.$background;
-    margin: 0;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      @include layout.mode--body;
+      background-color: theme.$background;
+      margin: 0;
+    }
   }
 }

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

@@ -8,6 +8,7 @@
 @use "sass:map";
 
 @use "../../layout";
+@use "../../utilities/cascade-layer";
 
 $config: () !default;
 
@@ -21,7 +22,9 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, "selector")} {
-    font-weight: 600;
+  @include cascade-layer.wrap {
+    #{map.get($props, "selector")} {
+      font-weight: 600;
+    }
   }
 }