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

package/scss/elements/image/index.scss

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'img, picture',
+  selector: "img, picture",
 );
 
 /// @group image
@@ -19,7 +19,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     max-inline-size: 100%;
   }
 }

package/scss/elements/inline-loading/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/config' as carbon-config;
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/motion';
+@use "@carbon/styles/scss/config" as carbon-config;
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/motion";
 
-@use '../../config';
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../config";
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
@@ -31,14 +31,13 @@ $-stroke-width: 0.125rem;
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-
+  #{map.get($props, "selector")} {
     display: flex;
     align-items: center;
     column-gap: spacing.$spacing-03;
 
     &::before {
-      content: '';
+      content: "";
       display: inline-block;
       block-size: calc($-size - $-stroke-width * 2);
       inline-size: calc($-size - $-stroke-width * 2);
@@ -58,7 +57,7 @@ $-stroke-width: 0.125rem;
 
     &::after {
       @include layout.mode--body-compact;
-      content: 'Loading';
+      content: "Loading";
       color: theme.$text-secondary;
     }
 

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'q',
+  selector: "q",
 );
 
 /// @group inline-quotation
@@ -21,7 +21,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     quotes: auto;
     font-style: italic;
   }

package/scss/elements/inserted-text/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/spacing';
-@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/components/tag/tokens" as tag-tokens;
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'ins',
+  selector: "ins",
 );
 
 /// @group inserted-text
@@ -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")} {
     padding-inline: spacing.$spacing-01;
     background-color: tag-tokens.$tag-background-green;
     color: tag-tokens.$tag-color-green;

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'i, em',
+  selector: "i, em",
 );
 
 /// @group italic-text
@@ -21,7 +21,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     font-style: italic;
   }
 }

package/scss/elements/keyboard-input/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: 'kbd',
+  selector: "kbd",
 );
 
 /// @group keyboard-input
@@ -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--code;
     background-color: transparent;
     outline: 0.0625rem solid theme.$border-subtle;

package/scss/elements/label/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/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: 'label',
-  axis: 'block',
+  selector: "label",
+  axis: "block",
 );
 
 /// @group label
@@ -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")} {
     display: grid;
     gap: spacing.$spacing-03;
     color: theme.$text-secondary;
@@ -35,13 +35,13 @@ $-default-config: (
       color: theme.$text-disabled;
     }
 
-    @if map.get($props, 'axis') == 'block' {
+    @if map.get($props, "axis") == "block" {
       @include layout.mode--label;
       // flex-direction: column;
       grid-auto-flow: row;
     }
 
-    @if map.get($props, 'axis') == 'inline' {
+    @if map.get($props, "axis") == "inline" {
       @include layout.mode--body-compact;
       // flex-direction: row;
       grid-auto-flow: column;

package/scss/elements/main/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',
+  selector: "main",
 );
 
 /// @group main
@@ -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")} {
     padding-inline: spacing.$spacing-07;
     padding-block-start: spacing.$spacing-07;
     padding-block-end: spacing.$spacing-10;

package/scss/elements/marked-text/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/colors';
-@use '@carbon/styles/scss/theme';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/colors";
+@use "@carbon/styles/scss/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'mark',
+  selector: "mark",
 );
 
 /// @group marked-text
@@ -25,7 +25,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     padding-inline: spacing.$spacing-01;
     background-color: colors.$yellow-20;
     color: colors.$black;

package/scss/elements/menu/index.scss

@@ -5,16 +5,16 @@
  * 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/box-shadow';
-@use '@carbon/styles/scss/utilities/focus-outline';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/box-shadow";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@use '../../layout';
-@use '../../utilities/icons';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
@@ -28,7 +28,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include box-shadow.box-shadow;
     background-color: theme.$layer;
     list-style: none;
@@ -63,7 +63,7 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -71,7 +71,7 @@ $-default-config: (
       & li[role="menuitem"]::before,
       & li[role="menuitemcheckbox"]::before,
       & li[role="menuitemradio"]::before {
-        content: '';
+        content: "";
         display: block;
         inline-size: 1rem;
         translate: 0 0.0625rem;
@@ -90,7 +90,8 @@ $-default-config: (
       translate: 0 0.0625rem;
     }
 
-    &:has(li > svg) li:not(:has(> svg)):is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
+    &:has(li > svg)
+      li:not(:has(> svg)):is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
       column-gap: calc(spacing.$spacing-03 + 1rem + spacing.$spacing-03);
     }
 

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

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_labelled-input';
+@use "../_labelled-input";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="number"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group number-input
@@ -23,15 +23,17 @@ $-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="number"]',
-      ),
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="number"]',
+        ),
+      )
+    );
   }
 }

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

@@ -5,16 +5,16 @@
  * 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 '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'ol',
+  selector: "ol",
 );
 
 /// @group ordered-list
@@ -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")} {
     list-style-type: decimal;
     padding: 0;
     margin-inline-start: layout.$density--padding;

package/scss/elements/paragraph/index.scss

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'p',
+  selector: "p",
 );
 
 /// @group paragraph
@@ -21,7 +21,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;
     max-inline-size: layout.$mode--max-inline-size;
     margin-block: layout.$mode--margin-block;

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

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../_labelled-input';
+@use "../_labelled-input";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="password"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group password-input
@@ -23,16 +23,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="password"]',
-      ),
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="password"]',
+        ),
+        input-invalid-slot: "after",
+      )
+    );
   }
 }