@carbon/styles 1.55.0 → 1.55.1-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.55.0",
+  "version": "1.55.1-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "0163f7e7932f667a892bc75f0aa35464f726f4ec"
+  "gitHead": "c6ef02eb0fa5b2dcaccbbe60d45f26884a167948"
 }

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -191,9 +191,10 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box.#{$prefix}--list-box--warning
     .#{$prefix}--list-box__invalid-icon {
     inset-block-start: convert.to-rem(81px);
     inset-inline-end: $spacing-05;
@@ -355,11 +356,21 @@
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--multi-select)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
   }
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
+  }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--slug::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--slug::before {
+    display: none;
   }
 }

package/scss/components/fluid-select/_fluid-select.scss

@@ -153,9 +153,11 @@
 
   .#{$prefix}--select--fluid
     .#{$prefix}--select--invalid
+    .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select__invalid-icon,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
+    .#{$prefix}--select-input__wrapper
     .#{$prefix}--select__invalid-icon {
     inset-block-start: convert.to-rem(73px);
     inset-inline-end: $spacing-05;
@@ -208,4 +210,11 @@
     .#{$prefix}--select-input {
     padding-inline-end: $spacing-10;
   }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--slug::before {
+    display: none;
+  }
 }

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -236,4 +236,11 @@
     ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
   }
+
+  // Remove ai border when invalid
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid {
+    border-block-end-color: transparent;
+  }
 }

package/scss/components/tile/_tile.scss

@@ -85,6 +85,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     &:focus {
       @include focus-outline('outline');
+
+      text-decoration: none;
     }
 
     &:hover,
@@ -398,7 +400,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     border: 1px solid transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      0 24px 40px -24px $ai-drop-shadow;
+      0 4px 8px 0 $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
@@ -423,7 +425,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
@@ -431,10 +434,16 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     opacity: 1;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus {
+    outline-offset: -1px;
+  }
+
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 8px 0 $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {

package/scss/utilities/_ai-gradient.scss

@@ -115,6 +115,7 @@
     background: linear-gradient(
           to top,
           theme.$ai-aura-start $start,
+          15%,
           theme.$ai-aura-end 50%
         )
         padding-box,
@@ -129,6 +130,7 @@
           to top,
           $background $start,
           theme.$ai-aura-start $start,
+          15%,
           theme.$ai-aura-end 50%
         )
         padding-box,