@carbon/styles 1.53.0 → 1.54.0-rc.0

package/scss/components/slug/_slug.scss

@@ -15,49 +15,42 @@ $sizes: (
     width: convert.to-rem(16px),
     font-size: convert.to-rem(9px),
     line-height: convert.to-rem(12px),
-    background: $slug-background,
   ),
   2xs: (
     height: convert.to-rem(20px),
     width: convert.to-rem(20px),
     font-size: convert.to-rem(12px),
     line-height: convert.to-rem(16px),
-    background: $slug-background,
   ),
   xs: (
     height: convert.to-rem(24px),
     width: convert.to-rem(24px),
     font-size: convert.to-rem(12px),
     line-height: convert.to-rem(16px),
-    background: $slug-gradient,
   ),
   sm: (
     height: convert.to-rem(32px),
     width: convert.to-rem(32px),
     font-size: convert.to-rem(16px),
     line-height: convert.to-rem(21px),
-    background: $slug-gradient,
   ),
   md: (
     height: convert.to-rem(40px),
     width: convert.to-rem(40px),
     font-size: convert.to-rem(16px),
     line-height: convert.to-rem(21px),
-    background: $slug-gradient,
   ),
   lg: (
     height: convert.to-rem(48px),
     width: convert.to-rem(48px),
     font-size: convert.to-rem(16px),
     line-height: convert.to-rem(21px),
-    background: $slug-gradient,
   ),
   xl: (
     height: convert.to-rem(64px),
     width: convert.to-rem(64px),
     font-size: convert.to-rem(20px),
     line-height: convert.to-rem(26px),
-    background: $slug-gradient,
   ),
 );
 
@@ -78,11 +71,15 @@ $sizes: (
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $text-inverse;
+    border: 1px solid $border-inverse;
+    background: transparent;
+    color: $text-primary;
     font-weight: 600;
+    outline: none;
     transition: color $duration-fast-01 motion(entrance, productive),
       border-color $duration-fast-01 motion(entrance, productive),
-      box-shadow $duration-fast-01 motion(entrance, productive);
+      box-shadow $duration-fast-01 motion(entrance, productive),
+      background $duration-fast-01 motion(entrance, productive);
 
     @each $group, $size in $sizes {
       // Create a class for each size slug
@@ -96,91 +93,38 @@ $sizes: (
   }
 
   .#{$prefix}--slug .#{$prefix}--slug__button:focus {
-    box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
-    outline: none;
-  }
-
-  .#{$prefix}--slug__text {
-    position: relative;
-    z-index: 1;
-  }
-
-  // pseudo element to animate the hover transition
-  .#{$prefix}--slug__button::before {
-    position: absolute;
-    background: $slug-gradient-hover;
-    block-size: 100%;
-    content: '';
-    inline-size: 100%;
-    opacity: 0;
-    transition: opacity $duration-fast-01 motion(entrance, productive);
-  }
-
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini::after,
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::after {
-    position: absolute;
-    block-size: convert.to-rem(24px);
-    content: '';
-    inline-size: convert.to-rem(24px);
-    opacity: 0;
-  }
-
-  .#{$prefix}--slug__button:hover::before {
-    opacity: 1;
+    border: 1px solid $focus;
+    box-shadow: inset 0 0 0 1px $focus;
   }
 
-  // Focus styles
-  .#{$prefix}--slug .#{$prefix}--slug__button:focus::before {
-    block-size: calc(100% - 6px);
-    inline-size: calc(100% - 6px);
+  .#{$prefix}--slug
+    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
+  .#{$prefix}--slug
+    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
+    box-shadow: none;
   }
 
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini::before,
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::before {
-    background: $slug-background-hover;
+  .#{$prefix}--slug .#{$prefix}--slug__button:hover {
+    background: $border-inverse;
+    color: $text-inverse;
   }
 
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
+  .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
+    background: $border-inverse;
     box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+    color: $text-inverse;
   }
 
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus::before,
-  .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus::before {
-    block-size: calc(100% - 4px);
-    inline-size: calc(100% - 4px);
-  }
-
-  // Hollow slug
-  // Only allow mini, 2xs, and xs sizes
-  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--sm,
-  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--md,
-  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--lg,
-  .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--xl {
-    block-size: convert.to-rem(24px);
-    font-size: convert.to-rem(12px);
-    inline-size: convert.to-rem(24px);
-    line-height: convert.to-rem(16px);
-  }
-
-  .#{$prefix}--slug__button--hollow::before {
-    display: none;
-  }
-
-  .#{$prefix}--slug .#{$prefix}--slug__button--hollow {
-    border: 1px solid $border-inverse;
-    background: transparent;
-    color: $text-primary;
-  }
-
-  .#{$prefix}--slug__button--hollow:hover {
-    border-color: $slug-hollow-hover;
-    color: $slug-hollow-hover;
+  .#{$prefix}--slug
+    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:hover:active,
+  .#{$prefix}--slug
+    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:hover:active {
+    box-shadow: inset 0 0 0 1px $focus-inset;
   }
 
-  .#{$prefix}--slug__button--hollow:focus {
-    border-color: $focus;
-    box-shadow: inset 0 0 0 1px $focus;
+  .#{$prefix}--slug__text {
+    position: relative;
+    z-index: 1;
   }
 
   // Inline slug
@@ -205,8 +149,11 @@ $sizes: (
     box-shadow: none;
   }
 
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover,
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover:active {
     border-color: $icon-secondary;
+    background: transparent;
+    box-shadow: none;
     color: $text-secondary;
   }
 
@@ -220,18 +167,13 @@ $sizes: (
     background: $icon-secondary;
   }
 
-  .#{$prefix}--slug--hollow
-    .#{$prefix}--slug__button--inline:hover
-    .#{$prefix}--slug__text::before {
-    background: transparent;
-    box-shadow: inset 0 0 0 1px $icon-secondary;
-  }
-
   .#{$prefix}--slug__button--inline .#{$prefix}--slug__text {
     padding-inline-start: convert.to-rem(8px);
   }
 
   .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg
+    .#{$prefix}--slug__text,
+  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl
     .#{$prefix}--slug__text {
     padding-inline-start: convert.to-rem(12px);
   }
@@ -251,27 +193,8 @@ $sizes: (
       box-shadow $duration-fast-01 motion(entrance, productive);
   }
 
-  // Inline slug hollow dot
-  .#{$prefix}--slug--hollow .#{$prefix}--slug__text::before {
-    background: transparent;
-    block-size: convert.to-rem(6px);
-    box-shadow: inset 0 0 0 1px $icon-primary;
-    inline-size: convert.to-rem(6px);
-  }
-
-  .#{$prefix}--slug--hollow
-    .#{$prefix}--slug__button--sm
-    .#{$prefix}--slug__text,
-  .#{$prefix}--slug--hollow
-    .#{$prefix}--slug__button--md
-    .#{$prefix}--slug__text {
-    padding-inline-start: convert.to-rem(9px);
-  }
-
   .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before,
-  .#{$prefix}--slug--hollow
-    .#{$prefix}--slug__button--lg
-    .#{$prefix}--slug__text::before {
+  .#{$prefix}--slug__button--xl .#{$prefix}--slug__text::before {
     block-size: convert.to-rem(8px);
     inline-size: convert.to-rem(8px);
   }
@@ -316,40 +239,42 @@ $sizes: (
     font-size: convert.to-rem(14px);
   }
 
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus {
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus,
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:hover:focus {
     box-shadow: inset 0 0 0 1px $focus;
   }
 
-  // Default callout styles
-  .#{$prefix}--slug.#{$prefix}--slug--hollow .#{$prefix}--toggletip-content {
-    row-gap: 0;
-  }
-
   // Slug callout styles
-  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
+  .#{$prefix}--slug .#{$prefix}--slug-content {
     @include ai-popover-gradient();
 
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      -40px 30px 100px -25px $ai-popover-shadow-outer-01,
-      -60px 80px 60px -45px $ai-popover-shadow-outer-02;
+      -40px 44px 60px -24px $ai-popover-shadow-outer-01,
+      -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
     min-inline-size: convert.to-rem(280px);
   }
 
   // Slug callout caret styles
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     background: transparent;
     clip-path: none;
   }
 
   // Caret pseudo element base styles
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
@@ -365,6 +290,25 @@ $sizes: (
       .#{$prefix}--popover--right-bottom
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::before,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret::before {
     position: absolute;
     display: block;
@@ -377,7 +321,7 @@ $sizes: (
     transform: rotate(45deg);
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
@@ -393,6 +337,25 @@ $sizes: (
       .#{$prefix}--popover--right-bottom
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::after,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left,
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-right,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-top,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-top,
+      .#{$prefix}--popover--right-bottom
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret::after {
     position: absolute;
     display: block;
@@ -403,13 +366,23 @@ $sizes: (
   }
 
   // Top
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
       .#{$prefix}--popover--top-left
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       inset-block-end: convert.to-rem(1px);
@@ -427,7 +400,7 @@ $sizes: (
     }
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--top,
       .#{$prefix}--popover--top-right,
@@ -440,13 +413,23 @@ $sizes: (
   }
 
   // Right
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--right,
       .#{$prefix}--popover--right-bottom,
       .#{$prefix}--popover--right-top
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--right,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--right-top
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       inset-inline-start: convert.to-rem(1px);
@@ -462,13 +445,23 @@ $sizes: (
   }
 
   // Bottom
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--bottom,
       .#{$prefix}--popover--bottom-left,
       .#{$prefix}--popover--bottom-right
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--bottom,
+      .#{$prefix}--popover--bottom-left,
+      .#{$prefix}--popover--bottom-right
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       inset-block-start: convert.to-rem(1px);
@@ -486,13 +479,23 @@ $sizes: (
   }
 
   // Left
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--left-top
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--left-top
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       inset-inline-end: convert.to-rem(1px);
@@ -508,18 +511,27 @@ $sizes: (
   }
 
   // Override for specific alignments
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret::after,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret::after {
     background: transparent;
   }
 
   // Change caret color / border when it is near the bottom of the callout
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
@@ -528,6 +540,18 @@ $sizes: (
       .#{$prefix}--popover--top-left
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       border-color: $ai-popover-caret-bottom;
@@ -536,7 +560,7 @@ $sizes: (
   }
 
   // Adjust background if actions are present
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left-bottom,
       .#{$prefix}--popover--right-bottom,
@@ -545,6 +569,18 @@ $sizes: (
       .#{$prefix}--popover--top-left
     )
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left-bottom,
+      .#{$prefix}--popover--right-bottom,
+      .#{$prefix}--popover--top,
+      .#{$prefix}--popover--top-right,
+      .#{$prefix}--popover--top-left
+    )
+    > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       background: $ai-popover-caret-bottom-background-actions;
@@ -552,32 +588,39 @@ $sizes: (
   }
 
   // Change the caret border when it is near the middle of the callout
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
+  .#{$prefix}--slug
     > .#{$prefix}--toggletip:is(
       .#{$prefix}--popover--left,
       .#{$prefix}--popover--right
     )
     > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
+    .#{$prefix}--slug.#{$prefix}--slug--enabled
+    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
+      .#{$prefix}--popover--left,
+      .#{$prefix}--popover--right
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
     &::before {
       border-color: $ai-popover-caret-center;
     }
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--toggletip-content {
+  .#{$prefix}--slug .#{$prefix}--toggletip-content {
     // This sets the max size to the size of the action bar with 3 buttons
     padding-block-end: convert.to-rem(80px);
     padding-block-start: convert.to-rem(24px);
     padding-inline: convert.to-rem(24px);
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
-    .#{$prefix}--slug-content
-    .#{$prefix}--toggletip-content {
+  .#{$prefix}--slug .#{$prefix}--slug-content .#{$prefix}--toggletip-content {
     max-inline-size: convert.to-rem(320px);
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-actions {
+  .#{$prefix}--slug .#{$prefix}--slug-actions {
     position: absolute;
     justify-content: flex-end;
     backdrop-filter: blur(85px);
@@ -590,16 +633,12 @@ $sizes: (
     inset-inline-end: 0;
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
-    .#{$prefix}--slug-actions
-    .#{$prefix}--btn:focus {
+  .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
     border-color: $focus;
     box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
   }
 
-  .#{$prefix}--slug.#{$prefix}--slug--enabled
-    .#{$prefix}--slug-actions
-    .#{$prefix}--btn--primary {
+  .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary {
     order: 1;
     border-end-end-radius: convert.to-rem(7px);
   }

package/scss/components/tile/_tile.scss

@@ -398,7 +398,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 4px 10px 2px $ai-drop-shadow;
+      0 24px 40px -24px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {

package/scss/components/ui-shell/content/_content.scss

@@ -19,7 +19,8 @@
     will-change: margin-left;
   }
 
-  .#{$prefix}--header ~ .#{$prefix}--content {
+  .#{$prefix}--header ~ .#{$prefix}--content,
+  div:has(.#{$prefix}--header) ~ .#{$prefix}--content {
     margin-block-start: mini-units(6);
   }
 

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -41,8 +41,9 @@
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
-    transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
-    will-change: width;
+    transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
+      transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
+    will-change: inline-size;
   }
 
   .#{$prefix}--side-nav--ux {

package/scss/utilities/_ai-gradient.scss

@@ -29,7 +29,7 @@
 
   background-image: linear-gradient(
     $deg,
-    theme.$ai-inner-shadow 0%,
+    theme.$ai-aura-start-sm 0%,
     15%,
     theme.$ai-aura-end $span,
     transparent 100%
@@ -50,7 +50,7 @@
   } @else if $type == 'selected' {
     background: linear-gradient(
         to right,
-        theme.$ai-inner-shadow 0%,
+        theme.$ai-aura-start-sm 0%,
         theme.$ai-aura-end 50%,
         transparent 50%
       ),
@@ -58,7 +58,7 @@
   } @else {
     background: linear-gradient(
       to right,
-      theme.$ai-aura-start-table 0%,
+      theme.$ai-aura-start-sm 0%,
       theme.$ai-aura-end $span,
       transparent 50%
     );
@@ -76,14 +76,17 @@
 @mixin ai-popover-gradient(
   $type: 'default',
   $offset: 0,
-  $background: 'background'
+  $background: 'ai-popover-background'
 ) {
   $start: 0%;
   @if $offset != 0 {
     $start: calc(0% + #{$offset});
   }
 
-  $background: custom-property.get-var(#{$background}, theme.$background);
+  $background: custom-property.get-var(
+    #{$background},
+    theme.$ai-popover-background
+  );
 
   @if $type == 'hover' {
     background: linear-gradient(