@carbon/styles 1.48.1 → 1.49.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.48.1",
+  "version": "1.49.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@carbon/grid": "^11.21.0",
     "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.29.1",
+    "@carbon/themes": "^11.30.0-rc.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "68c58d98fe0c287eb4456c8b5153f6cb7b58c5bf"
+  "gitHead": "79048666dc3d8f66c3d64b46de45b25ce13d9adf"
 }

package/scss/__tests__/theme-test.js

@@ -154,6 +154,9 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-inner-shadow",
         "ai-aura-start",
         "ai-aura-end",
+        "ai-aura-hover-background",
+        "ai-aura-hover-start",
+        "ai-aura-hover-end",
         "ai-border-strong",
         "ai-border-start",
         "ai-border-end",
@@ -162,6 +165,15 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-caret-bottom",
         "slug-callout-caret-bottom-background",
         "slug-callout-caret-bottom-background-actions",
+        "chat-prompt-background",
+        "chat-prompt-border-start",
+        "chat-prompt-border-end",
+        "chat-bubble-user",
+        "chat-bubble-agent",
+        "chat-bubble-agent-border",
+        "chat-avatar-bot",
+        "chat-avatar-agent",
+        "chat-avatar-user",
         "highlight",
         "overlay",
         "toggle-off",

package/scss/components/button/_button.scss

@@ -176,6 +176,12 @@
     }
   }
 
+  // Adjust icon positioning in small, medium variants only
+  .#{$prefix}--btn--sm:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon,
+  .#{$prefix}--btn--md:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
     background: $background-selected;
   }

package/scss/components/modal/_modal.scss

@@ -489,7 +489,7 @@
 
   // Slug styles
   .#{$prefix}--modal--slug .#{$prefix}--modal-container {
-    @include callout-gradient('default');
+    @include callout-gradient();
 
     background-color: $layer;
   }

package/scss/components/number-input/_number-input.scss

@@ -453,7 +453,12 @@
     padding-inline-end: convert.to-rem(112px);
   }
 
-  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__control-btn {
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='number']:not([data-invalid]):not(
+      :has(~ .#{$prefix}--slug--revert)
+    )
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
     border-block-end-color: $ai-border-strong;
   }
 

package/scss/components/slug/_slug.scss

@@ -572,13 +572,7 @@ $sizes: (
   }
 
   .#{$prefix}--slug.#{$prefix}--slug--enabled
-    .#{$prefix}--slug-content--with-actions
-    .#{$prefix}--toggletip-content {
-    max-inline-size: convert.to-rem(334px);
-  }
-
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
-    .#{$prefix}--slug-content:not(.#{$prefix}--slug-content--with-actions)
+    .#{$prefix}--slug-content
     .#{$prefix}--toggletip-content {
     max-inline-size: convert.to-rem(320px);
   }

package/scss/components/tile/_tile.scss

@@ -387,13 +387,15 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile {
-    @include callout-gradient();
+    @include callout-gradient('default', 0, 'layer');
 
-    border: 1px solid $border-tile;
+    border: 1px solid transparent;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
-    @include callout-gradient();
+    @include callout-gradient('default', 0, 'layer');
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
@@ -412,7 +414,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
-    @include callout-gradient('hover');
+    @include callout-gradient('hover', 0, 'layer');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
@@ -421,7 +425,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
-    @include callout-gradient('selected');
+    @include callout-gradient('selected', 0, 'layer');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {
+    opacity: 0;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
@@ -467,11 +477,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
-    border-radius: $spacing-05;
+    border-radius: $spacing-03;
   }
 
   .#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
-    border-end-end-radius: $spacing-05;
+    border-end-end-radius: $spacing-03;
   }
 
   // Windows HCM fix

package/scss/utilities/_ai-gradient.scss

@@ -43,45 +43,58 @@
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
+/// @param {String} $background  - specify if the background should be `layer` or `background`
 /// @group utilities
-@mixin callout-gradient($type: 'default', $offset: 0) {
+@mixin callout-gradient(
+  $type: 'default',
+  $offset: 0,
+  $background: theme.$background
+) {
   $start: 0%;
   @if $offset != 0 {
     $start: calc(0% + #{$offset});
   }
 
+  @if $background == 'layer' {
+    $background: theme.$layer;
+  }
+
   @if $type == 'hover' {
     background: linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-hover-01 $start,
-        theme.$slug-callout-aura-end-hover-01 50%,
-        transparent 50%
-      ),
+          to top,
+          theme.$ai-aura-hover-start $start,
+          15%,
+          theme.$ai-aura-hover-end 50%
+        )
+        padding-box,
       linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-hover-02 $start,
-        theme.$slug-callout-aura-end-hover-02 50%,
-        transparent 50%
-      ),
+          to top,
+          theme.$ai-aura-hover-background,
+          theme.$ai-aura-hover-background
+        )
+        padding-box,
+      linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
+        border-box,
+      // Needed to underlay the transparent border
       linear-gradient(
-          180deg,
-          theme.$slug-callout-gradient-top-hover $start,
-          theme.$slug-callout-gradient-bottom-hover 100%
+          to top,
+          theme.$ai-aura-hover-background,
+          theme.$ai-aura-hover-background
         )
-        rgba(0, 0, 0, 0.01);
+        border-box;
   } @else if $type == 'selected' {
     background: linear-gradient(
-        0deg,
-        theme.$slug-callout-aura-start-selected $start,
-        theme.$slug-callout-aura-end-selected 50%,
-        transparent 50%
-      ),
-      linear-gradient(
-          180deg,
-          theme.$slug-callout-gradient-top-selected $start,
-          theme.$slug-callout-gradient-bottom-selected 100%
+          to top,
+          theme.$ai-aura-start $start,
+          theme.$ai-aura-end 50%
         )
-        rgba(0, 0, 0, 0.01);
+        padding-box,
+      linear-gradient(to top, theme.$layer, theme.$layer) padding-box,
+      linear-gradient(to bottom, theme.$border-inverse, theme.$border-inverse)
+        border-box,
+      // Needed to underlay the transparent border
+      linear-gradient(to top, theme.$layer, theme.$layer)
+        border-box;
   } @else {
     background: linear-gradient(
           to top,
@@ -89,11 +102,11 @@
           theme.$ai-aura-end 50%
         )
         padding-box,
-      linear-gradient(to top, theme.$background, theme.$background) padding-box,
+      linear-gradient(to top, $background, $background) padding-box,
       linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
         border-box,
       // Needed to underlay the transparent border
-      linear-gradient(to top, theme.$background, theme.$background)
+      linear-gradient(to top, $background, $background)
         border-box;
   }
 }