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

package/scss/layout/_density.scss

@@ -5,23 +5,23 @@
  * 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 '../utilities/tokens';
+@use "../utilities/tokens";
 
 $-densities: (
   condensed: spacing.$spacing-03,
   normal: spacing.$spacing-05,
 );
 
-$-default-density: 'normal';
+$-default-density: "normal";
 
 /// @group layout--density
 /// @param {'condensed' | 'normal'} density ['normal']
 @mixin density($density: $-default-density) {
-  @include tokens.set('density--padding', map.get($-densities, $density));
+  @include tokens.set("density--padding", map.get($-densities, $density));
 }
 
-$density--padding: tokens.get('density--padding', map.get($-densities, $-default-density));
+$density--padding: tokens.get("density--padding", map.get($-densities, $-default-density));

package/scss/layout/_mode.scss

@@ -5,214 +5,316 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/motion';
-@use '@carbon/styles/scss/breakpoint';
-@use '@carbon/styles/scss/utilities/custom-property';
+@use "@carbon/styles/scss/type";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/motion";
+@use "@carbon/styles/scss/breakpoint";
+@use "@carbon/styles/scss/utilities/custom-property";
 
-@use '../utilities/tokens';
+@use "../utilities/tokens";
 
 $-modes: (
-  'productive': (
+  "productive": (
     constants: (
       max-inline-size: 75ch,
       margin-block: spacing.$spacing-05,
       transition-duration: motion.$duration-fast-02,
-      transition-timing-function: motion.motion('standard', 'productive'),
+      transition-timing-function: motion.motion("standard", "productive"),
     ),
     type-styles: (
       body: (
-        name: 'body-01',
-        style: map.merge(type.$body-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "body-01",
+        style:
+          map.merge(
+            type.$body-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       body-compact: (
-        name: 'body-compact-01',
-        style: map.merge(type.$body-compact-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "body-compact-01",
+        style:
+          map.merge(
+            type.$body-compact-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading: (
-        name: 'heading-01',
-        style: map.merge(type.$heading-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-01",
+        style:
+          map.merge(
+            type.$heading-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-compact: (
-        name: 'heading-compact-01',
-        style: map.merge(type.$heading-compact-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-compact-01",
+        style:
+          map.merge(
+            type.$heading-compact-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       label: (
-        name: 'label-01',
-        style: map.merge(type.$label-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "label-01",
+        style:
+          map.merge(
+            type.$label-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       helper-text: (
-        name: 'helper-text-01',
-        style: map.merge(type.$helper-text-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "helper-text-01",
+        style:
+          map.merge(
+            type.$helper-text-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       code: (
-        name: 'code-01',
-        style: map.merge(type.$code-01, (
-          font-family: type.font-family('mono'),
-        )),
+        name: "code-01",
+        style:
+          map.merge(
+            type.$code-01,
+            (
+              font-family: type.font-family("mono"),
+            )
+          ),
       ),
       quotation: (
-        name: 'quotation',
-        style: map.merge(type.$body-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "quotation",
+        style:
+          map.merge(
+            type.$body-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-1: (
-        name: 'heading-06',
-        style: map.merge(type.$heading-06, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-06",
+        style:
+          map.merge(
+            type.$heading-06,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-2: (
-        name: 'heading-05',
-        style: map.merge(type.$heading-05, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-05",
+        style:
+          map.merge(
+            type.$heading-05,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-3: (
-        name: 'heading-04',
-        style: map.merge(type.$heading-04, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-04",
+        style:
+          map.merge(
+            type.$heading-04,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-4: (
-        name: 'heading-03',
-        style: map.merge(type.$heading-03, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-03",
+        style:
+          map.merge(
+            type.$heading-03,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-5: (
-        name: 'heading-02',
-        style: map.merge(type.$heading-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-02",
+        style:
+          map.merge(
+            type.$heading-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-6: (
-        name: 'heading-01',
-        style: map.merge(type.$heading-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-01",
+        style:
+          map.merge(
+            type.$heading-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
     ),
   ),
-  'expressive': (
+  "expressive": (
     constants: (
       max-inline-size: 60ch,
       margin-block: spacing.$spacing-06,
       transition-duration: motion.$duration-moderate-01,
-      transition-timing-function: motion.motion('standard', 'expressive'),
+      transition-timing-function: motion.motion("standard", "expressive"),
     ),
     type-styles: (
       body: (
-        name: 'body-02',
-        style: map.merge(type.$body-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "body-02",
+        style:
+          map.merge(
+            type.$body-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       body-compact: (
-        name: 'body-compact-02',
-        style: map.merge(type.$body-compact-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "body-compact-02",
+        style:
+          map.merge(
+            type.$body-compact-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading: (
-        name: 'heading-02',
-        style: map.merge(type.$heading-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-02",
+        style:
+          map.merge(
+            type.$heading-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-compact: (
-        name: 'heading-compact-02',
-        style: map.merge(type.$heading-compact-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-compact-02",
+        style:
+          map.merge(
+            type.$heading-compact-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       label: (
-        name: 'label-02',
-        style: map.merge(type.$label-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "label-02",
+        style:
+          map.merge(
+            type.$label-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       helper-text: (
-        name: 'helper-text-02',
-        style: map.merge(type.$helper-text-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "helper-text-02",
+        style:
+          map.merge(
+            type.$helper-text-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       code: (
-        name: 'code-02',
-        style: map.merge(type.$code-02, (
-          font-family: type.font-family('mono'),
-        )),
+        name: "code-02",
+        style:
+          map.merge(
+            type.$code-02,
+            (
+              font-family: type.font-family("mono"),
+            )
+          ),
       ),
       quotation: (
-        name: 'fluid-quotation-01',
+        name: "fluid-quotation-01",
         style: type.$fluid-quotation-01,
       ),
       heading-level-1: (
-        name: 'fluid-heading-06',
-        style: map.merge(type.$fluid-heading-06, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "fluid-heading-06",
+        style:
+          map.merge(
+            type.$fluid-heading-06,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-2: (
-        name: 'fluid-heading-05',
-        style: map.merge(type.$fluid-heading-05, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "fluid-heading-05",
+        style:
+          map.merge(
+            type.$fluid-heading-05,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-3: (
-        name: 'fluid-heading-04',
-        style: map.merge(type.$fluid-heading-04, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "fluid-heading-04",
+        style:
+          map.merge(
+            type.$fluid-heading-04,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-4: (
-        name: 'fluid-heading-03',
-        style: map.merge(type.$fluid-heading-03, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "fluid-heading-03",
+        style:
+          map.merge(
+            type.$fluid-heading-03,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-5: (
-        name: 'heading-02',
-        style: map.merge(type.$heading-02, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-02",
+        style:
+          map.merge(
+            type.$heading-02,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
       heading-level-6: (
-        name: 'heading-01',
-        style: map.merge(type.$heading-01, (
-          font-family: type.font-family('sans'),
-        )),
+        name: "heading-01",
+        style:
+          map.merge(
+            type.$heading-01,
+            (
+              font-family: type.font-family("sans"),
+            )
+          ),
       ),
     ),
   ),
 );
 
-$-default-mode: 'productive';
+$-default-mode: "productive";
 
-$-type-properties: (
-  'font-family',
-  'font-size',
-  'font-weight',
-  'line-height',
-  'letter-spacing',
-);
+$-type-properties: ("font-family", "font-size", "font-weight", "line-height", "letter-spacing");
 
 /// Emits every property of a type style definition as css custom properties
 /// @group layout--mode
@@ -225,11 +327,8 @@ $-type-properties: (
 
     @if $fallback-value {
       @include tokens.set(
-        'mode--#{$type-style}-#{$property}',
-        custom-property.get-var(
-          '#{$name}-#{$property}',
-          $fallback-value,
-        ),
+        "mode--#{$type-style}-#{$property}",
+        custom-property.get-var("#{$name}-#{$property}", $fallback-value)
       );
     }
   }
@@ -238,18 +337,18 @@ $-type-properties: (
 /// @group layout--mode
 /// @param {'productive' | 'expressive'} mode ['productive']
 @mixin mode($mode: $-default-mode) {
-  @each $constant, $value in map.get($-modes, $mode, 'constants') {
-    @include tokens.set('mode--#{$constant}', $value);
+  @each $constant, $value in map.get($-modes, $mode, "constants") {
+    @include tokens.set("mode--#{$constant}", $value);
   }
 
-  @each $type-style, $mapped-type-style in map.get($-modes, $mode, 'type-styles') {
-    $name: map.get($mapped-type-style, 'name');
-    $style: map.get($mapped-type-style, 'style');
+  @each $type-style, $mapped-type-style in map.get($-modes, $mode, "type-styles") {
+    $name: map.get($mapped-type-style, "name");
+    $style: map.get($mapped-type-style, "style");
 
     @include -emit-type-properties($type-style, $name, $style);
 
-    @if map.has-key($style, 'breakpoints') {
-      @each $breakpoint, $overrides in map.get($style, 'breakpoints') {
+    @if map.has-key($style, "breakpoints") {
+      @each $breakpoint, $overrides in map.get($style, "breakpoints") {
         @include breakpoint.breakpoint-up($breakpoint) {
           @include -emit-type-properties($type-style, $name, $overrides);
         }
@@ -258,92 +357,101 @@ $-type-properties: (
   }
 }
 
-$-default-constants: map.get($-modes, $-default-mode, 'constants');
+$-default-constants: map.get($-modes, $-default-mode, "constants");
 
-$mode--max-inline-size: tokens.get('mode--max-inline-size', map.get($-default-constants, 'max-inline-size'));
-$mode--margin-block: tokens.get('mode--margin-block', map.get($-default-constants, 'margin-block'));
-$mode--transition-duration: tokens.get('mode--transition-duration', map.get($-default-constants, 'transition-duration'));
-$mode--transition-timing-function: tokens.get('mode--transition-timing-function', map.get($-default-constants, 'transition-timing-function'));
+$mode--max-inline-size: tokens.get(
+  "mode--max-inline-size",
+  map.get($-default-constants, "max-inline-size")
+);
+$mode--margin-block: tokens.get("mode--margin-block", map.get($-default-constants, "margin-block"));
+$mode--transition-duration: tokens.get(
+  "mode--transition-duration",
+  map.get($-default-constants, "transition-duration")
+);
+$mode--transition-timing-function: tokens.get(
+  "mode--transition-timing-function",
+  map.get($-default-constants, "transition-timing-function")
+);
 
 /// Defines all type properties for a given type style
 /// @group layout--mode
 /// @param {String} name
 @mixin -type-style($name) {
-  $type-style: map.get($-modes, $-default-mode, 'type-styles', $name, 'style');
+  $type-style: map.get($-modes, $-default-mode, "type-styles", $name, "style");
 
   @each $property in $-type-properties {
     $fallback-value: map.get($type-style, $property);
 
-    #{$property}: tokens.get('mode--#{$name}-#{$property}', $fallback-value);
+    #{$property}: tokens.get("mode--#{$name}-#{$property}", $fallback-value);
   }
 }
 
 /// @group layout--mode
 @mixin mode--body {
-  @include -type-style('body');
+  @include -type-style("body");
 }
 
 /// @group layout--mode
 @mixin mode--body-compact {
-  @include -type-style('body-compact');
+  @include -type-style("body-compact");
 }
 
 /// @group layout--mode
 @mixin mode--heading {
-  @include -type-style('heading');
+  @include -type-style("heading");
 }
 
 /// @group layout--mode
 @mixin mode--heading-compact {
-  @include -type-style('heading-compact');
+  @include -type-style("heading-compact");
 }
 
 /// @group layout--mode
 @mixin mode--label {
-  @include -type-style('label');
+  @include -type-style("label");
 }
 
 /// @group layout--mode
 @mixin mode--helper-text {
-  @include -type-style('helper-text');
+  @include -type-style("helper-text");
 }
 
 /// @group layout--mode
 @mixin mode--code {
-  @include -type-style('code');
+  @include -type-style("code");
 }
 
 /// @group layout--mode
 @mixin mode--quotation {
-  @include -type-style('quotation');
+  @include -type-style("quotation");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-1 {
-  @include -type-style('heading-level-1');
+  @include -type-style("heading-level-1");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-2 {
-  @include -type-style('heading-level-2');
+  @include -type-style("heading-level-2");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-3 {
-  @include -type-style('heading-level-3');
+  @include -type-style("heading-level-3");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-4 {
-  @include -type-style('heading-level-4');
+  @include -type-style("heading-level-4");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-5 {
-  @include -type-style('heading-level-5');
+  @include -type-style("heading-level-5");
 }
 
 /// @group layout--mode
 @mixin mode--heading-level-6 {
-  @include -type-style('heading-level-6');
+  @include -type-style("heading-level-6");
 }