chore(carbon): upgrade ai tokens and versions (#11634)

packages/carbon-web-components/package.json

@@ -70,8 +70,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibm-products-styles": "^2.28.0",
-    "@carbon/styles": "1.52.0",
+    "@carbon/ibm-products-styles": "^2.30.1",
+    "@carbon/styles": "1.53.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",
     "flatpickr": "4.6.13",

packages/carbon-web-components/src/components/modal/modal.scss

@@ -150,7 +150,7 @@
 }
 
 :host(#{$prefix}-modal[slug]) .#{$prefix}--modal-container {
-  @include callout-gradient('default', 0, 'layer');
+  @include ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
   background-color: $layer;
@@ -159,7 +159,7 @@
 }
 
 :host(#{$prefix}-modal[slug][has-footer]) .#{$prefix}--modal-container {
-  @include callout-gradient('default', 64px, 'layer');
+  @include ai-popover-gradient('default', 64px, 'layer');
 
   box-shadow: inset 0 -80px 0 -16px $layer,
     inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;

packages/carbon-web-components/src/components/slug/slug.scss

@@ -46,13 +46,13 @@ $colorMap: (
 
 :host(#{$prefix}-slug[enabled]) {
   .#{$prefix}--popover-content {
-    @include callout-gradient();
+    @include ai-popover-gradient();
 
     border: 1px solid transparent;
     border-radius: $spacing-03;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      -40px 30px 100px -25px $slug-callout-shadow-outer-01,
-      -60px 80px 60px -45px $slug-callout-shadow-outer-02;
+      -40px 30px 100px -25px $ai-popover-shadow-outer-01,
+      -60px 80px 60px -45px $ai-popover-shadow-outer-02;
     color: $text-primary;
     min-inline-size: to-rem(280px);
   }
@@ -189,7 +189,7 @@ $colorMap: (
     }
 
     &::after {
-      background: $slug-callout-caret-bottom-background;
+      background: $ai-popover-caret-bottom-background;
       block-size: $spacing-01;
       border-end-end-radius: 50%;
       border-end-start-radius: 50%;
@@ -327,8 +327,8 @@ $colorMap: (
       )[alignment^='top']
   ) {
   .#{$prefix}--popover-caret::before {
-    border-color: $slug-callout-caret-bottom;
-    background: $slug-callout-caret-bottom-background;
+    border-color: $ai-popover-caret-bottom;
+    background: $ai-popover-caret-bottom-background;
   }
 }
 
@@ -358,7 +358,7 @@ $colorMap: (
       )[alignment^='top'][has-actions]
   ) {
   .#{$prefix}--popover-caret::before {
-    background: $slug-callout-caret-bottom-background-actions;
+    background: $ai-popover-caret-bottom-background-actions;
   }
 }
 
@@ -375,7 +375,7 @@ $colorMap: (
       )[alignment='right']
   ) {
   .#{$prefix}--popover-caret::before {
-    border-color: $slug-callout-caret-center;
+    border-color: $ai-popover-caret-center;
   }
 }
 

packages/carbon-web-components/src/components/tearsheet/tearsheet.scss

@@ -126,7 +126,7 @@ $motion-duration: $duration-moderate-02;
     }
 
     .#{$block-class}__content {
-      @include utilities.callout-gradient('default', 0);
+      @include utilities.ai-popover-gradient('default', 0);
 
       box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
     }

packages/carbon-web-components/src/components/tile/tile.scss

@@ -170,7 +170,7 @@ $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('default', 0, 'layer');
+  @include ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -193,7 +193,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-expandable-tile[slug]):hover {
-  @include callout-gradient('default', 0, 'layer');
+  @include ai-popover-gradient('default', 0, 'layer');
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
@@ -212,7 +212,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
 :host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile::before {
-  @include callout-gradient('hover', 0, 'layer');
+  @include ai-popover-gradient('hover', 0, 'layer');
 
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
@@ -230,7 +230,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
-  @include callout-gradient('selected', 0, 'layer');
+  @include ai-popover-gradient('selected', 0, 'layer');
 
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }

packages/styles/package.json

@@ -31,12 +31,12 @@
   "dependencies": {
     "@carbon/icons-react": "11.37.0",
     "@carbon/layout": "11.20.1",
-    "@carbon/styles": "1.52.0",
+    "@carbon/styles": "1.53.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/type": "11.25.1"
   },
   "devDependencies": {
-    "@carbon/themes": "11.32.0",
+    "@carbon/themes": "11.33.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",

packages/web-components/package.json

@@ -95,7 +95,7 @@
     "@carbon/ibmdotcom-utilities": "2.5.0",
     "@carbon/layout": "11.20.1",
     "@carbon/motion": "11.16.1",
-    "@carbon/styles": "1.52.0",
+    "@carbon/styles": "1.53.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/web-components": "2.5.0",
     "lit": "^2.7.6",
@@ -135,7 +135,7 @@
     "@carbon/icons": "10.48.3",
     "@carbon/icons-react": "^11.33.0",
     "@carbon/pictograms-react": "11.57.0",
-    "@carbon/react": "1.52.0",
+    "@carbon/react": "1.53.0",
     "@carbon/type": "11.25.1",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",