From e4ae1a1e60de3a4783f2c6405af806e7a785a710 Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Fri, 2 Feb 2024 10:52:32 -0800
Subject: [PATCH] feat(tile): slug ai updates (#11484)

### Related Ticket(s)

Follows: https://github.com/carbon-design-system/carbon/pull/15596 & https://github.com/carbon-design-system/carbon/pull/15591
### Description

Updates Tile with carbon gradient
### Changelog

**Changed**

- new carbon upgrade (using RC atm -> will need to update to full release)
- updated tile slug styles like core
- the new core styles fix an error with number-input slug revert styles


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../carbon-web-components/package.json        |  2 +-
 .../src/components/modal/modal.scss           |  6 ++--
 .../src/components/slug/slug.scss             |  6 ----
 .../src/components/tile/tile.scss             | 28 +++++++++++--------
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/web-components/packages/carbon-web-components/package.json b/web-components/packages/carbon-web-components/package.json
index 9b46abe368aa..c0caa23afada 100644
--- a/web-components/packages/carbon-web-components/package.json
+++ b/web-components/packages/carbon-web-components/package.json
@@ -69,7 +69,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "2.20.1",
-    "@carbon/styles": "1.48.1",
+    "@carbon/styles": "1.49.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal.scss b/web-components/packages/carbon-web-components/src/components/modal/modal.scss
index a0a5e923ebf4..faf327d3f73e 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal.scss
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal.scss
@@ -140,13 +140,13 @@
 
 // Slug
 
-:host(#{$prefix}-modal) .#{$prefix}--modal-container {
-  @include callout-gradient('default');
+:host(#{$prefix}-modal[slug]) .#{$prefix}--modal-container {
+  @include callout-gradient('');
 
   background-color: $layer;
 }
 
-:host(#{$prefix}-modal[has-two-buttons]) .#{$prefix}--modal-container {
+:host(#{$prefix}-modal[slug][has-two-buttons]) .#{$prefix}--modal-container {
   @include callout-gradient('default', 64px);
 
   background-color: $layer;
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug.scss b/web-components/packages/carbon-web-components/src/components/slug/slug.scss
index 0a1081617302..ab5357a45458 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug.scss
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug.scss
@@ -78,12 +78,6 @@ $colorMap: (
   }
 }
 
-:host(#{$prefix}-slug[enabled][with-actions]) {
-  .#{$prefix}--toggletip-content {
-    max-inline-size: to-rem(334px);
-  }
-}
-
 :host(#{$prefix}-slug[enabled]:not([with-actions])) {
   .#{$prefix}--toggletip-content {
     max-inline-size: to-rem(320px);
diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile.scss b/web-components/packages/carbon-web-components/src/components/tile/tile.scss
index 36edce9fd325..826bdb2e2ad6 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/tile.scss
+++ b/web-components/packages/carbon-web-components/src/components/tile/tile.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -95,10 +95,6 @@ $css--plex: true !default;
   .#{$prefix}--tile__chevron {
     @extend .#{$prefix}--tile__chevron;
   }
-
-  ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-08;
-  }
 }
 
 :host(#{$prefix}-radio-tile),
@@ -178,9 +174,11 @@ $css--plex: true !default;
 :host(#{$prefix}-expandable-tile[slug]),
 :host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile,
 :host(#{$prefix}-selectable-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;
 }
 
 :host(#{$prefix}-tile),
@@ -194,8 +192,12 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-slug) {
+  inset-inline-end: $spacing-08;
+}
+
 :host(#{$prefix}-expandable-tile[slug]):hover {
-  @include callout-gradient();
+  @include callout-gradient('default', 0, 'layer');
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
@@ -214,7 +216,9 @@ $css--plex: true !default;
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
 :host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile::before {
-  @include callout-gradient('hover');
+  @include callout-gradient('hover', 0, 'layer');
+
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile:hover::before,
@@ -230,9 +234,9 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
-  @include callout-gradient('selected');
+  @include callout-gradient('selected', 0, 'layer');
 
-  opacity: 1;
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
 
 :host(#{$prefix}-expandable-tile[slug]) {
@@ -246,6 +250,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--tile--slug-rounded;
 
   .#{$prefix}--tile__chevron {
-    border-end-end-radius: $spacing-05;
+    border-end-end-radius: $spacing-03;
   }
 }