@carbon/styles 1.45.0 → 1.46.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.45.0",
+  "version": "1.46.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "670dffcae241d9bf9b3a64ea06e100e7e5a08c37"
+  "gitHead": "89fe49b63bf2b4b5902d30f3bfeff2face55897e"
 }

package/scss/components/accordion/_accordion.scss

@@ -200,6 +200,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     .#{$prefix}--accordion__wrapper {
       // Properties for when the accordion opens
+      max-block-size: fit-content;
       opacity: 1;
       padding-block: $spacing-03;
       padding-block-end: $spacing-06;

package/scss/components/modal/_modal.scss

@@ -12,6 +12,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
@@ -155,7 +156,6 @@
   .#{$prefix}--modal-container {
     position: fixed;
     display: grid;
-    overflow: hidden;
     background-color: $layer;
     block-size: 100%;
     grid-template-columns: 100%;
@@ -485,6 +485,38 @@
     margin: 0;
   }
 
+  // Slug styles
+  .#{$prefix}--modal--slug .#{$prefix}--modal-container {
+    @include callout-gradient('default');
+
+    background-color: $layer;
+  }
+
+  // Start the gradient 64px from bottom only when two buttons are present
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-container:has(
+      .#{$prefix}--btn-set:not(.#{$prefix}--modal-footer--three-button)
+        > button:not(:only-child)
+    ) {
+    @include callout-gradient('default', 64px);
+
+    background-color: $layer;
+  }
+
+  .#{$prefix}--modal--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--modal-header > .#{$prefix}--slug:has(+ .#{$prefix}--modal-close),
+  .#{$prefix}--modal-header > .#{$prefix}--modal-close ~ .#{$prefix}--slug,
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-container-body
+    > .#{$prefix}--slug {
+    inset-inline-end: convert.to-rem(48px);
+  }
+
   // Windows HCM fix
   /* stylelint-disable */
   .#{$prefix}--modal-close__icon {

package/scss/components/slug/_slug.scss

@@ -6,6 +6,7 @@
 @use '../../type' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
+@use '../toggletip';
 
 $sizes: (
   mini: (

package/scss/utilities/_ai-gradient.scss

@@ -45,50 +45,56 @@
 /// @access private
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
+/// @param {Number} $type  - specify a pixel offset the callout should start from the bottom
 /// @group utilities
-@mixin callout-gradient($type: 'default') {
+@mixin callout-gradient($type: 'default', $offset: 0) {
+  $start: 0%;
+  @if $offset != 0 {
+    $start: calc(0% + #{$offset});
+  }
+
   @if $type == 'hover' {
     background: linear-gradient(
         0deg,
-        theme.$slug-callout-aura-start-hover-01 0%,
+        theme.$slug-callout-aura-start-hover-01 $start,
         theme.$slug-callout-aura-end-hover-01 50%,
         transparent 50%
       ),
       linear-gradient(
         0deg,
-        theme.$slug-callout-aura-start-hover-02 0%,
+        theme.$slug-callout-aura-start-hover-02 $start,
         theme.$slug-callout-aura-end-hover-02 50%,
         transparent 50%
       ),
       linear-gradient(
           180deg,
-          theme.$slug-callout-gradient-top-hover 0%,
+          theme.$slug-callout-gradient-top-hover $start,
           theme.$slug-callout-gradient-bottom-hover 100%
         )
         rgba(0, 0, 0, 0.01);
   } @else if $type == 'selected' {
     background: linear-gradient(
         0deg,
-        theme.$slug-callout-aura-start-selected 0%,
+        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 0%,
+          theme.$slug-callout-gradient-top-selected $start,
           theme.$slug-callout-gradient-bottom-selected 100%
         )
         rgba(0, 0, 0, 0.01);
   } @else {
     background: linear-gradient(
         0deg,
-        theme.$slug-callout-aura-start 0%,
+        theme.$slug-callout-aura-start $start,
         theme.$slug-callout-aura-end 50%,
         transparent 50%
       ),
       linear-gradient(
           180deg,
-          theme.$slug-callout-gradient-top 0%,
+          theme.$slug-callout-gradient-top $start,
           theme.$slug-callout-gradient-bottom 100%
         )
         rgba(0, 0, 0, 0.01);