@carbon/styles 1.36.0-rc.0 → 1.36.1-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.36.0-rc.0",
+  "version": "1.36.1-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,11 +40,11 @@
   "dependencies": {
     "@carbon/colors": "^11.19.0",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/grid": "^11.19.0-rc.0",
-    "@carbon/layout": "^11.19.0-rc.0",
+    "@carbon/grid": "^11.19.0",
+    "@carbon/layout": "^11.19.0",
     "@carbon/motion": "^11.15.0",
-    "@carbon/themes": "^11.24.0-rc.0",
-    "@carbon/type": "^11.23.0-rc.0",
+    "@carbon/themes": "^11.24.0",
+    "@carbon/type": "^11.23.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "d51dfbb8dc951c6f609561a1e2935e8208bf6e30"
+  "gitHead": "30f17c6417c64542e422b7959e6633d8ffa0e061"
 }

package/scss/components/checkbox/_checkbox.scss

@@ -223,12 +223,13 @@
   .#{$prefix}--checkbox-group__validation-msg,
   .#{$prefix}--checkbox__validation-msg {
     display: none;
-    align-items: flex-end;
+    align-items: flex-start;
     margin-top: $spacing-02;
   }
 
   .#{$prefix}--checkbox__invalid-icon {
-    margin: 0 convert.to-rem(1px) 0 convert.to-rem(3px);
+    min-width: convert.to-rem(16px);
+    margin: convert.to-rem(1px) convert.to-rem(1px) 0 convert.to-rem(3px);
     fill: $support-error;
   }
 

package/scss/components/data-table/action/_data-table-action.scss

@@ -510,6 +510,10 @@
     @include type-style('body-compact-01');
   }
 
+  .#{$prefix}--batch-summary__divider {
+    padding-left: $spacing-03;
+  }
+
   //-------------------------------------------------
   //SMALL TOOLBAR
   //-------------------------------------------------

package/scss/components/modal/_modal.scss

@@ -63,7 +63,8 @@
     .#{$prefix}--date-picker__input,
     .#{$prefix}--multi-select,
     .#{$prefix}--number__control-btn::before,
-    .#{$prefix}--number__control-btn::after {
+    .#{$prefix}--number__control-btn::after,
+    .#{$prefix}--list-box input[role='combobox'] {
       background-color: $field-02;
     }
 

package/scss/components/notification/_tokens.scss

@@ -125,11 +125,11 @@ $notification-action-hover: (
   values: (
     (
       theme: themes.$white,
-      value: map.get(notification.$notification-background-info, white-theme),
+      value: map.get(notification.$notification-action-hover, white-theme),
     ),
     (
       theme: themes.$g10,
-      value: map.get(notification.$notification-background-info, g-10),
+      value: map.get(notification.$notification-action-hover, g-10),
     ),
     (
       theme: themes.$g90,

package/scss/components/tile/_tile.scss

@@ -125,8 +125,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
     .#{$prefix}--tile--disabled-icon {
     position: absolute;
-    right: layout.density('padding-inline');
-    bottom: layout.density('padding-inline');
+    inset-block-end: layout.density('padding-inline');
+    inset-inline-end: layout.density('padding-inline');
   }
 
   .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {
@@ -157,11 +157,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile__checkmark {
     position: absolute;
-    top: layout.density('padding-inline');
-    right: layout.density('padding-inline');
     height: 1rem;
     border: none;
     background: transparent;
+    inset-block-start: layout.density('padding-inline');
+    inset-inline-end: layout.density('padding-inline');
     opacity: 0;
     transition: $duration-fast-02 motion(standard, productive);
 
@@ -181,13 +181,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile__chevron {
     position: absolute;
-    right: 0;
-    bottom: 0;
     display: flex;
     width: $-icon-container-size;
     height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    inset-block-end: 0;
+    inset-inline-end: 0;
 
     svg {
       fill: $icon-primary;
@@ -211,13 +211,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include button-reset.reset;
 
     position: absolute;
-    right: 0;
-    bottom: 0;
     display: flex;
     width: $-icon-container-size;
     height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    inset-block-end: 0;
+    inset-inline-end: 0;
 
     &:focus {
       outline: 2px solid $focus;
@@ -239,7 +239,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     cursor: pointer;
     font-family: inherit;
     font-size: inherit;
-    text-align: left;
+    text-align: start;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
     @include type-style('body-compact-01');

package/scss/components/time-picker/_time-picker.scss

@@ -27,10 +27,7 @@
 
   .#{$prefix}--time-picker__select {
     justify-content: center;
-
-    &:not(:last-of-type) {
-      margin: 0 $spacing-01;
-    }
+    margin-left: $spacing-01;
   }
 
   .#{$prefix}--time-picker__input {

package/scss/utilities/_convert.scss

@@ -26,6 +26,21 @@ $base-font-size: 16px !default;
   @return math.div($px, $base-font-size) * 1rem;
 }
 
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @deprecated
+/// @group @carbon/layout
+@function rem($px) {
+  @if unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1rem;
+}
+
 /// Convert a given px unit to a em unit
 /// @param {Number} $px - Number with px unit
 /// @return {Number} Number with em unit