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

package/scss/elements/tabs/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/utilities/focus-outline';
-@use '@carbon/styles/scss/components/button/tokens' as carbon-button;
-@use '@carbon/styles/scss/components/content-switcher/tokens' as carbon-content-switcher;
+@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/components/content-switcher/tokens" as carbon-content-switcher;
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
   selector: '[role="tablist"]',
-  kind: 'line',
+  kind: "line",
 );
 
 /// @group tabs
@@ -30,7 +30,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     display: flex;
     flex-direction: row;
 
@@ -57,7 +57,7 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
 
       &:disabled {
@@ -70,7 +70,7 @@ $-default-config: (
       padding: layout.$density--padding;
     }
 
-    @if map.get($props, 'kind') == 'line' {
+    @if map.get($props, "kind") == "line" {
       & button[role="tab"] {
         border-block-end: 0.125rem solid theme.$border-subtle;
         margin-inline-end: 0.0625rem;
@@ -93,7 +93,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'contained' {
+    @if map.get($props, "kind") == "contained" {
       & button[role="tab"] {
         background-color: theme.$layer-accent;
         border-block-start: 0.125rem solid transparent;
@@ -126,7 +126,11 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'content-switcher' or map.get($props, 'kind') == 'content-switcher--low-contrast' {
+    @if map.get($props, "kind") ==
+      "content-switcher" or
+      map.get($props, "kind") ==
+      "content-switcher--low-contrast"
+    {
       & {
         box-shadow: 0 0 0 0.0625rem theme.$border-inverse;
         border-radius: 0.25rem;
@@ -174,7 +178,7 @@ $-default-config: (
         }
 
         &::after {
-          content: '';
+          content: "";
           display: block;
           position: absolute;
           inset-inline-end: 0;
@@ -200,7 +204,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'content-switcher--low-contrast' {
+    @if map.get($props, "kind") == "content-switcher--low-contrast" {
       & {
         background-color: carbon-content-switcher.$content-switcher-background;
         box-shadow: 0 0 0 0.0625rem theme.$border-strong;

package/scss/elements/telephone-number-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="tel"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group telephone-number-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="tel"]',
-      ),
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="tel"]',
+        ),
+        input-invalid-slot: "after",
+      )
+    );
   }
 }

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

@@ -5,16 +5,16 @@
  * 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(textarea)',
+  selector: "label:has(textarea)",
 );
 
 /// @group text-area
@@ -23,20 +23,24 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    @include labelled-input.styles((
-      label: (
-        selector: '&',
-        axis: 'block',
-      ),
-      input: (
-        selector: 'textarea',
-      ),
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: "block",
+        ),
+        input: (
+          selector: "textarea",
+        ),
+        input-invalid-slot: "after",
+      )
+    );
 
     & textarea {
-      min-block-size: calc(layout.$size--padding-block-start + 2lh + layout.$size--padding-block-end);
+      min-block-size: calc(
+        layout.$size--padding-block-start + 2lh + layout.$size--padding-block-end
+      );
       resize: vertical;
     }
   }

package/scss/elements/text-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="text"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group text-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="text"]',
-      ),
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="text"]',
+        ),
+        input-invalid-slot: "after",
+      )
+    );
   }
 }

package/scss/elements/tile/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/utilities/focus-outline';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@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: '[data-tile]',
+  selector: "[data-tile]",
 );
 
 /// @group tile
@@ -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 layer.styles;
     padding: layout.$density--padding;
     box-sizing: border-box;
@@ -41,7 +41,8 @@ $-default-config: (
       text-decoration: none;
       padding-inline-end: spacing.$spacing-09;
       border: 0.0625rem solid theme.$border-tile;
-      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      transition: background-color layout.$mode--transition-duration
+        layout.$mode--transition-timing-function;
 
       &:visited {
         color: inherit;
@@ -64,12 +65,12 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
 
       &::after {
         @include icons.arrow--right;
-        content: '';
+        content: "";
         position: absolute;
         color: theme.$link-primary;
         inset-block-end: layout.$density--padding;

package/scss/elements/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="time"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group 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="time"]',
-      ),
-      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="time"]',
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     &::before {
       @include labelled-input.input-trailing-slot {

package/scss/elements/toggle/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/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 '../label';
+@use "../label";
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
@@ -34,10 +34,12 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    @include label.styles((
-      selector: '&',
-    ));
+  #{map.get($props, "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+      )
+    );
 
     inline-size: max-content;
 
@@ -53,7 +55,8 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
       border-radius: calc($-block-size * 0.5);
       background-color: theme.$toggle-off;
       color: theme.$text-primary;
-      transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      transition: background-color layout.$mode--transition-duration
+        layout.$mode--transition-timing-function;
       cursor: pointer;
 
       &:disabled,
@@ -68,7 +71,7 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
         outline-offset: spacing.$spacing-01;
       }
     }
@@ -90,7 +93,7 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
     }
 
     & button[role="switch"]::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       block-size: $-knob-size;
@@ -101,7 +104,8 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
       inset-block-start: $-knob-spacing;
 
       @include guards.motion {
-        transition: translate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+        transition: translate layout.$mode--transition-duration
+          layout.$mode--transition-timing-function;
       }
     }
 

package/scss/elements/tooltip/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/theme";
 
-@use '../popover';
+@use "../popover";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
   selector: '[popover="hint"]',
-  alignment: 'start center',
+  alignment: "start center",
 );
 
 /// @group tooltip
@@ -27,12 +27,14 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    @include popover.styles((
-      selector: '&',
-      caret: true,
-      alignment: map.get($props, 'alignment'),
-    ));
+  #{map.get($props, "selector")} {
+    @include popover.styles(
+      (
+        selector: "&",
+        caret: true,
+        alignment: map.get($props, "alignment"),
+      )
+    );
 
     background-color: theme.$background-inverse;
     color: theme.$text-inverse;

package/scss/elements/tree-view/index.scss

@@ -5,16 +5,16 @@
  * 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/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 '../../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")} {
     background-color: theme.$layer;
     list-style: none;
     margin: 0;
@@ -73,7 +73,7 @@ $-default-config: (
       outline: none;
 
       & > :is(span, a) {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -116,7 +116,7 @@ $-default-config: (
     }
 
     &:has([aria-expanded]) li[role="treeitem"] > :is(span, a)::before {
-      content: '';
+      content: "";
       display: block;
       inline-size: 1rem;
       translate: 0 0.0625rem;

package/scss/elements/unordered-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: 'ul',
+  selector: "ul",
 );
 
 /// @group unordered-list
@@ -23,8 +23,8 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    list-style-type: '–';
+  #{map.get($props, "selector")} {
+    list-style-type: "–";
     padding: 0;
 
     & li {
@@ -35,7 +35,7 @@ $-default-config: (
     }
 
     & li li {
-      list-style-type: '▪\FE0E';
+      list-style-type: "▪\FE0E";
     }
 
     & li p {

package/scss/elements/url-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="url"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group url-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="url"]',
-      ),
-      input-invalid-slot: 'after',
-    ));
+  #{map.get($props, "selector")} {
+    @include labelled-input.styles(
+      (
+        label: (
+          selector: "&",
+          axis: map.get($props, "axis"),
+        ),
+        input: (
+          selector: 'input[type="url"]',
+        ),
+        input-invalid-slot: "after",
+      )
+    );
   }
 }