@carbon/element-styles 0.3.6 → 0.3.7-rc.0

package/scss/elements/dialog/index.scss

@@ -5,27 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/breakpoint';
-@use '@carbon/styles/scss/motion';
-@use '@carbon/styles/scss/utilities/focus-outline';
-@use '@carbon/styles/scss/layer/layer-tokens';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/breakpoint";
+@use "@carbon/styles/scss/motion";
+@use "@carbon/styles/scss/utilities/focus-outline";
+@use "@carbon/styles/scss/layer/layer-tokens";
 
-@use '../button';
+@use "../button";
 
-@use '../_layer';
+@use "../_layer";
 
-@use '../../layout';
-@use '../../utilities/icons';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'dialog',
+  selector: "dialog",
 );
 
 /// @group dialog
@@ -34,13 +34,13 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     position: relative;
     padding: 0;
 
     &:modal {
-      @include layout.size('md');
-      @include layout.density('normal');
+      @include layout.size("md");
+      @include layout.density("normal");
       @include layer.styles;
 
       color: theme.$text-primary;
@@ -51,24 +51,24 @@ $-default-config: (
       box-sizing: border-box;
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
 
-      @include breakpoint.breakpoint('xlg') {
+      @include breakpoint.breakpoint("xlg") {
         inline-size: 48%;
       }
 
-      @include breakpoint.breakpoint-down('xlg') {
+      @include breakpoint.breakpoint-down("xlg") {
         inline-size: 60%;
         max-block-size: 84%;
       }
 
-      @include breakpoint.breakpoint-down('lg') {
+      @include breakpoint.breakpoint-down("lg") {
         inline-size: 84%;
         max-block-size: 90%;
       }
 
-      @include breakpoint.breakpoint-down('md') {
+      @include breakpoint.breakpoint-down("md") {
         inline-size: 100%;
         block-size: 100%;
         max-inline-size: 100dvi;
@@ -83,10 +83,11 @@ $-default-config: (
     &: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');
+      @include layout.size("xl");
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       margin-inline: calc(layout.$density--padding * -1);
@@ -100,52 +101,64 @@ $-default-config: (
     // single button
     &:modal footer > button:only-child {
       grid-column: 3 / span 2;
-      @include button.styles((
-        selector: '&',
-        kind: 'primary',
-      ));
+      @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',
-      ));
+      @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',
-      ));
+      @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',
-      ));
+      @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',
-      ));
+      @include button.styles(
+        (
+          selector: "&",
+          kind: "secondary",
+        )
+      );
     }
 
     &:modal footer > button:not(:first-child) + button:last-child {
       grid-column: 4;
-      @include button.styles((
-        selector: '&',
-        kind: 'primary',
-      ));
+      @include button.styles(
+        (
+          selector: "&",
+          kind: "primary",
+        )
+      );
     }
 
     // header close button
@@ -166,7 +179,8 @@ $-default-config: (
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      transition: background-color layout.$mode--transition-duration
+        layout.$mode--transition-timing-function;
 
       @include guards.hover {
         &:hover {
@@ -179,7 +193,7 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -187,7 +201,7 @@ $-default-config: (
       @include icons.close($size: 1.25rem);
       display: block;
       inset: 0;
-      content: '';
+      content: "";
     }
 
     // entry animation

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

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_labelled-input';
+@use "../_labelled-input";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="email"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group email-input
@@ -25,16 +25,18 @@ $-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',
-    ));
+  #{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

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/spacing";
 
-@use '../label';
+@use "../label";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'fieldset',
+  selector: "fieldset",
 );
 
 /// @group fieldset
@@ -25,15 +25,17 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     border: none;
     padding: 0;
     margin-block: layout.$mode--margin-block;
 
     & legend {
-      @include label.styles((
-        selector: '&',
-      ));
+      @include label.styles(
+        (
+          selector: "&",
+        )
+      );
       padding: 0;
       margin-block-end: spacing.$spacing-03;
     }

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

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/utilities/focus-outline';
-@use '@carbon/styles/scss/components/button/tokens' as carbon-button;
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/focus-outline";
+@use "@carbon/styles/scss/components/button/tokens" as carbon-button;
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
@@ -27,7 +27,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include layout.mode--heading-compact;
     display: flex;
     flex-direction: column;
@@ -59,7 +59,8 @@ $-default-config: (
       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;
+      transition: background-color layout.$mode--transition-duration
+        layout.$mode--transition-timing-function;
 
       @include guards.hover {
         &:hover {

package/scss/elements/footer/index.scss

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'main + footer',
+  selector: "main + footer",
 );
 
 /// @group footer
@@ -24,7 +24,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include layout.mode--body-compact;
     color: theme.$text-secondary;
     border-block-start: 0.0625rem solid theme.$border-subtle;

package/scss/elements/header-navigation/index.scss

@@ -5,19 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/utilities/focus-outline';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'body > header:first-child',
+  selector: "body > header:first-child",
 );
 
 /// @group header-navigation
@@ -26,7 +26,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     position: sticky;
     inset-block-start: 0;
     z-index: 9999;
@@ -87,7 +87,7 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -109,7 +109,7 @@ $-default-config: (
       white-space: nowrap;
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -119,7 +119,7 @@ $-default-config: (
     }
 
     & > nav a + ul::before {
-      content: '';
+      content: "";
       display: block;
       inline-size: 0.0625rem;
       inset-inline-start: -0.0625rem;

package/scss/elements/heading-level-1/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h1',
+  selector: "h1",
 );
 
 /// @group heading-level-1
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-1;
   }

package/scss/elements/heading-level-2/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h2',
+  selector: "h2",
 );
 
 /// @group heading-level-2
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-2;
   }

package/scss/elements/heading-level-3/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h3',
+  selector: "h3",
 );
 
 /// @group heading-level-3
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-3;
   }

package/scss/elements/heading-level-4/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h4',
+  selector: "h4",
 );
 
 /// @group heading-level-4
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-4;
   }

package/scss/elements/heading-level-5/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h5',
+  selector: "h5",
 );
 
 /// @group heading-level-5
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-5;
   }

package/scss/elements/heading-level-6/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_heading';
+@use "../_heading";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'h6',
+  selector: "h6",
 );
 
 /// @group heading-level-6
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include heading.styles;
     @include layout.mode--heading-level-6;
   }

package/scss/elements/horizontal-rule/index.scss

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
+@use "@carbon/styles/scss/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'hr',
-  kind: 'subtle',
+  selector: "hr",
+  kind: "subtle",
 );
 
 /// @group horizontal-rule
@@ -25,16 +25,16 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     border: none;
     block-size: 0.0625rem;
     margin-block: layout.$mode--margin-block;
 
-    @if map.get($props, 'kind') == 'subtle' {
+    @if map.get($props, "kind") == "subtle" {
       background-color: theme.$border-subtle;
     }
 
-    @if map.get($props, 'kind') == 'strong' {
+    @if map.get($props, "kind") == "strong" {
       background-color: theme.$border-strong;
     }
   }