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

package/scss/elements/popover/index.scss

@@ -5,25 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:list';
+@use "sass:map";
+@use "sass:string";
+@use "sass:list";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/utilities/box-shadow';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/box-shadow";
 
-@use '../_layer';
+@use "../_layer";
 
-@use '../../layout';
-@use '../../utilities/tokens';
+@use "../../layout";
+@use "../../utilities/tokens";
 
 $config: () !default;
 
 $-default-config: (
-  selector: '[popover]',
+  selector: "[popover]",
   caret: true,
-  alignment: 'end center',
+  alignment: "end center",
 );
 
 /// @group popover
@@ -35,11 +35,11 @@ $-default-config: (
   $props: map.deep-merge($-default-config, $config);
 
   $-caret-size: 0rem;
-  @if map.get($props, 'caret') {
+  @if map.get($props, "caret") {
     $-caret-size: 0.75rem;
   }
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include layer.styles;
     @include box-shadow.box-shadow;
     @include layout.mode--body;
@@ -52,25 +52,20 @@ $-default-config: (
 
     &::before {
       @include box-shadow.box-shadow;
-      content: '';
+      content: "";
       position: absolute;
       display: block;
       block-size: $-caret-size;
       inline-size: $-caret-size;
       background-color: inherit;
-      clip-path: polygon(
-        0% 0%,
-        100% 0%,
-        100% 100%,
-        0% 0%,
-      );
+      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
     }
 
-    $-alignment: string.split(map.get($props, 'alignment'), " ");
+    $-alignment: string.split(map.get($props, "alignment"), " ");
     $-alignment-block: list.nth($-alignment, 1);
     $-alignment-inline: list.nth($-alignment, 2);
 
-    @if $-alignment-block == 'start' {
+    @if $-alignment-block == "start" {
       position-area: start center;
       inset-block-end: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
       inset-block-start: unset;
@@ -82,7 +77,7 @@ $-default-config: (
       }
     }
 
-    @if $-alignment-block == 'end' {
+    @if $-alignment-block == "end" {
       position-area: end center;
       inset-block-start: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
       inset-block-end: unset;
@@ -94,44 +89,44 @@ $-default-config: (
       }
     }
 
-    @if $-alignment-block == 'start' or $-alignment-block == 'end' {
-      @if $-alignment-inline == 'start' {
+    @if $-alignment-block == "start" or $-alignment-block == "end" {
+      @if $-alignment-inline == "start" {
         translate: calc(-50% + layout.$density--padding + spacing.$spacing-02) 0;
 
         &::before {
-          inset-inline-start: -get-caret-offset('end', $-caret-size);
+          inset-inline-start: -get-caret-offset("end", $-caret-size);
         }
-      } @else if $-alignment-inline == 'end' {
+      } @else if $-alignment-inline == "end" {
         translate: calc(50% - layout.$density--padding - spacing.$spacing-02) 0;
 
         &::before {
-          inset-inline-start: -get-caret-offset('start', $-caret-size);
+          inset-inline-start: -get-caret-offset("start", $-caret-size);
         }
-      } @else if $-alignment-inline == 'center' {
+      } @else if $-alignment-inline == "center" {
         &::before {
-          inset-inline-start: -get-caret-offset('center', $-caret-size);
+          inset-inline-start: -get-caret-offset("center", $-caret-size);
         }
       }
     }
 
-    @if map.get($props, 'alignment') == 'center start' {
+    @if map.get($props, "alignment") == "center start" {
       position-area: center start;
       translate: calc((spacing.$spacing-02 + ($-caret-size * 0.5)) * -1);
 
       &::before {
-        inset-block-start: -get-caret-offset('center', $-caret-size);
+        inset-block-start: -get-caret-offset("center", $-caret-size);
         inset-block-end: unset;
         inset-inline-end: calc($-caret-size * -0.5);
         rotate: 45deg;
       }
     }
 
-    @if map.get($props, 'alignment') == 'center end' {
+    @if map.get($props, "alignment") == "center end" {
       position-area: center end;
       translate: calc(spacing.$spacing-02 + ($-caret-size * 0.5));
 
       &::before {
-        inset-block-start: -get-caret-offset('center', $-caret-size);
+        inset-block-start: -get-caret-offset("center", $-caret-size);
         inset-block-end: unset;
         inset-inline-start: calc($-caret-size * -0.5);
         rotate: -135deg;
@@ -141,15 +136,15 @@ $-default-config: (
 }
 
 @function -get-caret-offset($position, $caret-size: 0rem) {
-  @if ($position == 'start') {
+  @if ($position == "start") {
     @return calc(layout.$density--padding - $caret-size * 0.5 + spacing.$spacing-02);
   }
 
-  @if ($position == 'center') {
+  @if ($position == "center") {
     @return calc(50% - $caret-size * 0.5);
   }
 
-  @if ($position == 'end') {
+  @if ($position == "end") {
     @return calc(100% - layout.$density--padding - $caret-size * 0.5 - spacing.$spacing-02);
   }
 

package/scss/elements/preformatted/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/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'pre',
+  selector: "pre",
 );
 
 /// @group preformatted
@@ -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 layout.mode--code;
     white-space: pre;
     margin-block: layout.$mode--margin-block;

package/scss/elements/progress-bar/index.scss

@@ -5,24 +5,24 @@
  * 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/motion';
+@use "@carbon/styles/scss/config" as carbon-config;
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/motion";
 
-@use '../label';
+@use "../label";
 
-@use '../../config';
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../config";
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'label:has(progress)',
-  axis: 'block',
-  thickness: 'thick',
+  selector: "label:has(progress)",
+  axis: "block",
+  thickness: "thick",
 );
 
 $-indeterminate-ratio: 0.25;
@@ -35,20 +35,22 @@ $-indeterminate-ratio: 0.25;
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
-    @include label.styles((
-      selector: '&',
-      axis: map.get($props, 'axis'),
-    ));
+  #{map.get($props, "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+        axis: map.get($props, "axis"),
+      )
+    );
 
     & progress {
       appearance: none;
 
-      @if map.get($props, 'thickness') == 'thick' {
+      @if map.get($props, "thickness") == "thick" {
         block-size: 0.5rem;
       }
 
-      @if map.get($props, 'thickness') == 'thin' {
+      @if map.get($props, "thickness") == "thin" {
         block-size: 0.25rem;
       }
     }

package/scss/elements/radio-button/index.scss

@@ -5,14 +5,14 @@
  * 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 '../label';
+@use "../label";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
@@ -26,11 +26,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;
@@ -47,7 +49,7 @@ $-default-config: (
       border: 0.0625rem solid currentColor;
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
         outline-offset: 0.125rem;
       }
 
@@ -56,7 +58,7 @@ $-default-config: (
       }
 
       &:checked::before {
-        content: '';
+        content: "";
         position: absolute;
         inset: 0.25rem;
         border-radius: 50%;

package/scss/elements/range-input/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/spacing';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
 
-@use '../label';
+@use "../label";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
   selector: 'label:has(input[type="range"])',
-  axis: 'block',
+  axis: "block",
 );
 
 /// @group range-input
@@ -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: map.get($props, 'axis'),
-    ));
+  #{map.get($props, "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+        axis: map.get($props, "axis"),
+      )
+    );
 
     & input[type="range"] {
       display: block;

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

package/scss/elements/select/index.scss

@@ -5,21 +5,21 @@
  * 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 '../../layout';
-@use '../../utilities/icons';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'label:has(select)',
-  axis: 'block',
+  selector: "label:has(select)",
+  axis: "block",
 );
 
 /// @group select
@@ -29,19 +29,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: 'select',
-        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: "select",
+          emit-readonly: false,
+        ),
+        fixed-input-trailing-slots: 1,
+        input-invalid-slot: "after",
+      )
+    );
 
     &::before {
       @include labelled-input.input-trailing-slot {
@@ -62,7 +64,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/side-navigation/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/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/icons';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/icons";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'nav:has(+ main)',
+  selector: "nav:has(+ main)",
 );
 
 /// @group side-navigation
@@ -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")} {
     padding-block: layout.$density--padding;
     inline-size: 16rem;
     background-color: theme.$layer-background;
@@ -88,7 +88,7 @@ $-default-config: (
       }
 
       &:focus {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
 
@@ -97,7 +97,7 @@ $-default-config: (
     }
 
     & li > button[aria-expanded]::after {
-      content: '';
+      content: "";
       @include icons.chevron--down;
       display: block;
       position: absolute;

package/scss/elements/small-text/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/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'small',
+  selector: "small",
 );
 
 /// @group small-text
@@ -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 layout.mode--helper-text;
     display: inline-block;
     color: theme.$text-helper;

package/scss/elements/table/index.scss

@@ -5,21 +5,21 @@
  * 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 '../_layer';
+@use "../_layer";
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'table',
-  kind: 'data-table',
+  selector: "table",
+  kind: "data-table",
 );
 
 /// @group table
@@ -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")} {
     border-spacing: 0;
     inline-size: 100%;
     margin-block: layout.$mode--margin-block;
@@ -73,7 +73,7 @@ $-default-config: (
       padding: layout.$density--padding;
     }
 
-    @if map.get($props, 'kind') == 'data-table' {
+    @if map.get($props, "kind") == "data-table" {
       background-color: theme.$layer;
 
       & tbody tr,
@@ -102,7 +102,11 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'structured-list' or map.get($props, 'kind') == 'structured-list--flush' {
+    @if map.get($props, "kind") ==
+      "structured-list" or
+      map.get($props, "kind") ==
+      "structured-list--flush"
+    {
       & tfoot th,
       & tfoot td {
         border-block-start: 0.0625rem solid theme.$border-subtle;
@@ -115,7 +119,7 @@ $-default-config: (
       }
     }
 
-    @if map.get($props, 'kind') == 'structured-list--flush' {
+    @if map.get($props, "kind") == "structured-list--flush" {
       & th:first-child,
       & td:first-child {
         padding-inline-start: 0;