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

package/scss/elements/button/index.scss

@@ -5,21 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
-@use 'sass:string';
+@use "sass:map";
+@use "sass:string";
 
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/components/button/tokens' as carbon-button;
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/components/button/tokens" as carbon-button;
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'button',
-  kind: 'secondary',
+  selector: "button",
+  kind: "secondary",
 );
 
 /// @group button
@@ -29,7 +29,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;
     appearance: none;
     border: none;
@@ -78,12 +78,12 @@ $-default-config: (
       aspect-ratio: 1;
       justify-content: center;
 
-       & > svg {
+      & > svg {
         margin-inline: 0;
-       }
+      }
     }
 
-    @if map.get($props, 'kind') == 'primary' {
+    @if map.get($props, "kind") == "primary" {
       background-color: carbon-button.$button-primary;
       color: theme.$text-on-color;
 
@@ -103,7 +103,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'secondary' {
+    @if map.get($props, "kind") == "secondary" {
       background-color: carbon-button.$button-secondary;
       color: theme.$text-on-color;
 
@@ -123,7 +123,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'tertiary' {
+    @if map.get($props, "kind") == "tertiary" {
       background-color: transparent;
       color: carbon-button.$button-tertiary;
       outline: 0.0625rem solid carbon-button.$button-tertiary;
@@ -151,7 +151,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'ghost' {
+    @if map.get($props, "kind") == "ghost" {
       background-color: transparent;
       color: theme.$link-primary;
       padding-inline-end: layout.$density--padding;
@@ -186,7 +186,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'danger--primary' {
+    @if map.get($props, "kind") == "danger--primary" {
       background-color: carbon-button.$button-danger-primary;
       color: theme.$text-on-color;
 
@@ -206,7 +206,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'danger--tertiary' {
+    @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;
@@ -236,7 +236,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'danger--ghost' {
+    @if map.get($props, "kind") == "danger--ghost" {
       background-color: transparent;
       color: carbon-button.$button-danger-secondary;
       padding-inline-end: layout.$density--padding;

package/scss/elements/checkbox/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/focus-outline';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@use '../label';
+@use "../label";
 
-@use '../../layout';
-@use '../../utilities/icons';
+@use "../../layout";
+@use "../../utilities/icons";
 
 $config: () !default;
 
@@ -28,11 +28,13 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    @include label.styles((
-      selector: '&',
-      axis: 'inline',
-    ));
+  #{map.get($props, "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+        axis: "inline",
+      )
+    );
 
     justify-content: start;
     cursor: pointer;
@@ -48,7 +50,7 @@ $-default-config: (
       border-radius: 0.125rem;
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
         outline-offset: 0.125rem;
       }
 
@@ -57,7 +59,7 @@ $-default-config: (
       }
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         inset: 0;
         @include icons.checkbox;

package/scss/elements/code/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/theme';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'code',
+  selector: "code",
 );
 
 /// @group code
@@ -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: theme.$layer;
     padding-inline: spacing.$spacing-01;

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

@@ -5,22 +5,22 @@
  * 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 '../_labelled-input';
+@use "../_labelled-input";
 
-@use '../../layout';
-@use '../../utilities/icons';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="color"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group color-input
@@ -30,19 +30,21 @@ $-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="color"]',
-        emit-readonly: false,
-      ),
-      fixed-input-trailing-slots: 1,
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="color"]',
+          emit-readonly: false,
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     /*
         inline padding
@@ -54,13 +56,8 @@ $-default-config: (
       + inline padding
     */
     $-min-inline-size: calc(
+      layout.$density--padding + 1rem + spacing.$spacing-05 + 1rem + spacing.$spacing-03 + 1rem +
         layout.$density--padding
-      + 1rem
-      + spacing.$spacing-05
-      + 1rem
-      + spacing.$spacing-03
-      + 1rem
-      + layout.$density--padding
     );
 
     & input[type="color"] {

package/scss/elements/combo-box/index.scss

@@ -5,20 +5,20 @@
  * 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 '../_labelled-input';
+@use "../_labelled-input";
 
-@use '../../utilities/icons';
-@use '../../utilities/guards';
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="text"][list])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group combo-box
@@ -28,19 +28,21 @@ $-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"][list]',
-        emit-readonly: false,
-      ),
-      fixed-input-trailing-slots: 1,
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="text"][list]',
+          emit-readonly: false,
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     &::before {
       @include labelled-input.input-trailing-slot {
@@ -59,7 +61,7 @@ $-default-config: (
         background-color: theme.$layer-active;
       }
 
-      @if map.get($props, 'axis') == 'inline' {
+      @if map.get($props, "axis") == "inline" {
         &:enabled,
         &:disabled {
           background-color: transparent;

package/scss/elements/date-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 '../../utilities/icons';
+@use "../../utilities/icons";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="date"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group date-input
@@ -25,18 +25,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="date"]',
-      ),
-      fixed-input-trailing-slots: 1,
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="date"]',
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     &::before {
       @include labelled-input.input-trailing-slot {

package/scss/elements/date-time-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 '../../utilities/icons';
+@use "../../utilities/icons";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="datetime-local"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group date-time-input
@@ -25,18 +25,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="datetime-local"]',
-      ),
-      fixed-input-trailing-slots: 1,
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="datetime-local"]',
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     &::before {
       @include labelled-input.input-trailing-slot {

package/scss/elements/deleted-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: 'del',
+  selector: "del",
 );
 
 /// @group deleted-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-red;
     color: tag-tokens.$tag-color-red;

package/scss/elements/description-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: 'dl',
+  selector: "dl",
 );
 
 /// @group description-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")} {
     display: grid;
     grid-template-columns: max-content 1fr;
     column-gap: spacing.$spacing-04;

package/scss/elements/details/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/theme';
-@use '@carbon/styles/scss/utilities/focus-outline';
+@use "@carbon/styles/scss/theme";
+@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;
 
 $-default-config: (
-  selector: 'details',
+  selector: "details",
 );
 
 /// @group details
@@ -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")} {
     border-block-start: 0.0625rem solid theme.$border-subtle;
     box-sizing: border-box;
     padding-inline-start: calc(layout.$density--padding + 1rem + layout.$density--padding);
@@ -60,19 +60,20 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
     & summary::before {
-      content: '';
+      content: "";
       @include icons.chevron--down;
       translate: 0 calc((1lh - 1rem) * 0.5);
       display: inline-block;
       margin-inline-end: layout.$density--padding;
 
       @include guards.motion {
-        transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+        transition: rotate layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
       }
     }