From b5db13dc430108ab57656c03d4712743c804ad82 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 19 Mar 2024 08:36:50 -0700
Subject: [PATCH] fix(AISkeleton): export ai skeleton, update dark theme tokens
 (#15991)

* fix(AISkeleton): export AI Skeleton components

* fix(AISkeleton): update tokens in dark themes

* test(AISkeleton): update snapshots

* chore(eslint): fix linting error
---
 .../__snapshots__/PublicAPI-test.js.snap      | 36 +++++++++++++++++++
 packages/react/src/__tests__/index-test.js    |  3 ++
 packages/react/src/index.ts                   |  5 +++
 packages/themes/src/g100.js                   |  4 +--
 packages/themes/src/g90.js                    |  5 ++-
 5 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 279d3bba51d0..1da006e3a326 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9700,6 +9700,42 @@ Map {
       },
     },
   },
+  "unstable__AiSkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "unstable__AiSkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "unstable__AiSkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__ChatButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index 4505669d263d..c0d2e4242b2b 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -246,6 +246,9 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__AiSkeletonIcon",
+        "unstable__AiSkeletonPlaceholder",
+        "unstable__AiSkeletonText",
         "unstable__ChatButton",
         "unstable__ChatButtonSkeleton",
         "unstable__FluidComboBox",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index dad7ce909f26..d2896ffe0c79 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -162,6 +162,11 @@ export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
 } from './components/ChatButton';
+export {
+  AiSkeletonText as unstable__AiSkeletonText,
+  AiSkeletonIcon as unstable__AiSkeletonIcon,
+  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AiSkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export {
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index c5a5eca2ebdb..d491aceab8ed 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -228,8 +228,8 @@ export const aiPopoverShadowOuter01 = rgba(black, 0.12);
 export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
 export const aiOverlay = rgba(black, 0.5);
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 7bf4cad32134..c36ceba9a4d4 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -10,7 +10,6 @@ import {
   blue40,
   blue60,
   blue70,
-  blue80,
 
   // Gray
   gray10,
@@ -229,8 +228,8 @@ export const aiPopoverShadowOuter01 = rgba(black, 0.12);
 export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
 export const aiOverlay = rgba(black, 0.5);