@carbon/styles 1.31.0 → 1.31.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4f3787a474ab93252975d717426c186ec4355812"
+  "gitHead": "d08d95d74d074985456f6e452d3247789733e199"
 }

package/scss/_layout.scss

@@ -11,10 +11,29 @@
 @use './config' as *;
 @use './utilities/custom-property';
 @use './utilities/convert' as *;
-@use './utilities/layout' as *;
+@use './spacing' as *;
+
+$layout-tokens: (
+  size: (
+    height: (
+      xs: rem(24px),
+      sm: rem(32px),
+      md: rem(40px),
+      lg: rem(48px),
+      xl: rem(64px),
+      2xl: rem(80px),
+    ),
+  ),
+  density: (
+    padding-inline: (
+      condensed: $spacing-03,
+      normal: $spacing-05,
+    ),
+  ),
+);
 
 :root {
-  @each $group, $properties in $tokens {
+  @each $group, $properties in $layout-tokens {
     @each $property, $steps in $properties {
       @each $step, $value in $steps {
         @include custom-property.declaration(
@@ -39,7 +58,7 @@
   }
 }
 
-@each $group, $properties in $tokens {
+@each $group, $properties in $layout-tokens {
   @each $property, $steps in $properties {
     @each $step, $value in $steps {
       .#{$prefix}--layout--#{$group}-#{$step} {

package/scss/components/button/_mixins.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 @use 'vars' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -21,10 +23,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   // https://caniuse.com/mdn-css_types_length_lh
-  --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height) * 1em);
+  --temp-1lh: (
+    #{custom-property.get-var(
+        'body-compact-01-line-height',
+        map.get($body-compact-01, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
-    (var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)}
+    (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
+      #{rem(1px)}
   );
 
   @include component-reset.reset;

package/scss/components/contained-list/_contained-list.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:list';
+@use 'sass:map';
 
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -15,6 +15,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/layout';
 
 /// Contained List styles
@@ -26,6 +27,11 @@
     @include layout.use('density', $default: 'normal');
   }
 
+  .#{$prefix}--contained-list > ul {
+    padding: 0;
+    margin: 0;
+  }
+
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
@@ -126,12 +132,17 @@
 
   .#{$prefix}--contained-list-item {
     position: relative;
+    list-style: none;
   }
 
   .#{$prefix}--contained-list-item:not(:first-of-type) {
     margin-top: -1px;
   }
 
+  .#{$prefix}--contained-list-item__content {
+    box-sizing: border-box;
+  }
+
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     @include button-reset.reset;
@@ -145,7 +156,12 @@
   .#{$prefix}--contained-list-item--clickable
     .#{$prefix}--contained-list-item__content {
     // https://caniuse.com/mdn-css_types_length_lh
-    --temp-1lh: (var(--#{$prefix}-body-01-line-height) * 1em);
+    --temp-1lh: (
+      #{custom-property.get-var(
+          'body-01-line-height',
+          map.get($body-01, line-height)
+        )} * 1em
+    );
 
     @include type-style('body-01');
 

package/scss/components/notification/_actionable-notification.scss

@@ -315,7 +315,8 @@
 
   /* Tertiary action button when not inline (toast) */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
-    padding: 0 $spacing-05;
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
     margin-bottom: $spacing-05;
 
     // Button should be left aligned with text.

package/scss/utilities/_layout.scss

@@ -8,28 +8,8 @@
 @use 'sass:map';
 
 @use '../config';
-@use '../spacing' as *;
+@use '../layout' as *;
 @use './custom-property';
-@use './convert' as *;
-
-$tokens: (
-  size: (
-    height: (
-      xs: rem(24px),
-      sm: rem(32px),
-      md: rem(40px),
-      lg: rem(48px),
-      xl: rem(64px),
-      2xl: rem(80px),
-    ),
-  ),
-  density: (
-    padding-inline: (
-      condensed: $spacing-03,
-      normal: $spacing-05,
-    ),
-  ),
-);
 
 /// Enables the use of contextual layout tokens within a component. This mixin should be
 /// included on the outermost selector of the component.
@@ -41,7 +21,7 @@ $tokens: (
 /// @group utilities
 /// @access public
 @mixin use($group, $default, $min: null, $max: null) {
-  $properties: map.get($tokens, $group);
+  $properties: map.get($layout-tokens, $group);
 
   @each $property, $steps in $properties {
     $minValue: custom-property.get-var('layout-#{$group}-#{$property}-min');
@@ -106,7 +86,7 @@ $tokens: (
 }
 
 /// Internal base function for retrieving a property from a layout group.
-/// @param {String} $group - The group name as defined in the $tokens
+/// @param {String} $group - The group name as defined in the $layout-tokens
 /// @param {String} $property - The property name
 /// @example @include -group('size', $property)
 /// @group utilities