From 058a432ac970676ba6704f90df9efadae01e6484 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 7 Feb 2024 13:35:22 -0500
Subject: [PATCH] fix(ai-gradient): ensure strings are returned as color tokens
 (#15695)

* fix(ai-gradient): ensure strings are returned as color tokens

* test(Slug): fix test failures
---
 e2e/components/Slug/Slug-test.avt.e2e.js         | 4 ++--
 packages/styles/scss/utilities/_ai-gradient.scss | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/e2e/components/Slug/Slug-test.avt.e2e.js b/e2e/components/Slug/Slug-test.avt.e2e.js
index a2e72c9e400d..7505b18527ad 100644
--- a/e2e/components/Slug/Slug-test.avt.e2e.js
+++ b/e2e/components/Slug/Slug-test.avt.e2e.js
@@ -22,7 +22,7 @@ test.describe('Slug @avt', () => {
     await expect(page).toHaveNoACViolations('Slug');
   });
 
-  test('@avt-advanced-states open state', async ({ page }) => {
+  test.slow('@avt-advanced-states open state', async ({ page }) => {
     await visitStory(page, {
       component: 'Slug',
       id: 'experimental-unstable-slug--default',
@@ -37,7 +37,7 @@ test.describe('Slug @avt', () => {
     await expect(page).toHaveNoACViolations('Slug-open');
   });
 
-  test('@avt-advanced-states ai form', async ({ page }) => {
+  test.slow('@avt-advanced-states ai form', async ({ page }) => {
     await visitStory(page, {
       component: 'Slug',
       id: 'experimental-unstable-slug-form--form-example',
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index 6d399c4954ac..011e99a28c04 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -6,6 +6,7 @@
 //
 
 @use '../theme';
+@use './custom-property';
 
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds AI gradient styles to a component
@@ -43,7 +44,7 @@
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
-/// @param {String} $background  - specify if the background should be `layer` or `background`
+/// @param {String} $background  - specify the token to be used as the background
 /// @group utilities
 @mixin callout-gradient(
   $type: 'default',
@@ -55,9 +56,7 @@
     $start: calc(0% + #{$offset});
   }
 
-  @if $background == 'layer' {
-    $background: theme.$layer;
-  }
+  $background: custom-property.get-var($background, theme.$background);
 
   @if $type == 'hover' {
     background: linear-gradient(