From 5ab79522346b75038511bd22f804f13210e8fd27 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 6 Mar 2024 12:14:23 -0800 Subject: [PATCH] refactor(Slug): rename callout to ai-popover (#15892) --- .../__snapshots__/PublicAPI-test.js.snap | 29 ++----- packages/styles/scss/__tests__/theme-test.js | 29 ++----- .../styles/scss/components/modal/_modal.scss | 4 +- .../styles/scss/components/slug/_slug.scss | 16 ++-- .../styles/scss/components/tile/_tile.scss | 8 +- .../styles/scss/utilities/_ai-gradient.scss | 4 +- packages/themes/src/g10.js | 36 ++------- packages/themes/src/g100.js | 35 ++------ packages/themes/src/g90.js | 35 ++------ .../__tests__/__snapshots__/v11-test.js.snap | 29 ++----- .../src/tokens/__tests__/metadata-test.js | 80 ++----------------- packages/themes/src/tokens/v11TokenGroup.js | 29 ++----- packages/themes/src/white.js | 36 ++------- 13 files changed, 74 insertions(+), 296 deletions(-) diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index 9d19501ab9eb..f56fe39aeca3 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -12,11 +12,14 @@ Array [ "aiBorderStart", "aiBorderStrong", "aiDropShadow", - "aiGradientEnd", - "aiGradientStart01", - "aiGradientStart02", "aiInnerShadow", "aiOverlay", + "aiPopoverCaretBottom", + "aiPopoverCaretBottomBackground", + "aiPopoverCaretBottomBackgroundActions", + "aiPopoverCaretCenter", + "aiPopoverShadowOuter01", + "aiPopoverShadowOuter02", "aiSkeletonBackground", "aiSkeletonElementBackground", "background", @@ -301,26 +304,6 @@ Array [ "slow02", "slugBackground", "slugBackgroundHover", - "slugCalloutAuraEnd", - "slugCalloutAuraEndHover01", - "slugCalloutAuraEndHover02", - "slugCalloutAuraEndSelected", - "slugCalloutAuraStart", - "slugCalloutAuraStartHover01", - "slugCalloutAuraStartHover02", - "slugCalloutAuraStartSelected", - "slugCalloutCaretBottom", - "slugCalloutCaretBottomBackground", - "slugCalloutCaretBottomBackgroundActions", - "slugCalloutCaretCenter", - "slugCalloutGradientBottom", - "slugCalloutGradientBottomHover", - "slugCalloutGradientBottomSelected", - "slugCalloutGradientTop", - "slugCalloutGradientTopHover", - "slugCalloutGradientTopSelected", - "slugCalloutShadowOuter01", - "slugCalloutShadowOuter02", "slugGradient", "slugGradientHover", "slugHollowHover", diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index 6506d43d075c..fc41dece5e1b 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -132,25 +132,8 @@ describe('@carbon/styles/scss/theme', () => { "slug-background-hover", "slug-gradient-hover", "slug-hollow-hover", - "slug-callout-gradient-top", - "slug-callout-gradient-bottom", - "slug-callout-aura-start", - "slug-callout-aura-end", - "slug-callout-gradient-top-hover", - "slug-callout-gradient-bottom-hover", - "slug-callout-aura-start-hover-01", - "slug-callout-aura-start-hover-02", - "slug-callout-aura-end-hover-01", - "slug-callout-aura-end-hover-02", - "slug-callout-gradient-top-selected", - "slug-callout-gradient-bottom-selected", - "slug-callout-aura-start-selected", - "slug-callout-aura-end-selected", - "ai-gradient-start-01", - "ai-gradient-start-02", - "ai-gradient-end", - "slug-callout-shadow-outer-01", - "slug-callout-shadow-outer-02", + "ai-popover-shadow-outer-01", + "ai-popover-shadow-outer-02", "ai-inner-shadow", "ai-aura-start", "ai-aura-start-table", @@ -165,10 +148,10 @@ describe('@carbon/styles/scss/theme', () => { "ai-skeleton-background", "ai-skeleton-element-background", "ai-overlay", - "slug-callout-caret-center", - "slug-callout-caret-bottom", - "slug-callout-caret-bottom-background", - "slug-callout-caret-bottom-background-actions", + "ai-popover-caret-center", + "ai-popover-caret-bottom", + "ai-popover-caret-bottom-background", + "ai-popover-caret-bottom-background-actions", "chat-prompt-background", "chat-prompt-border-start", "chat-prompt-border-end", diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index c234f25f7953..6db92e06535f 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -456,7 +456,7 @@ } .#{$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; @@ -466,7 +466,7 @@ .#{$prefix}--modal--slug .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) { - @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; diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss index aeb9ec8298f1..dfa5f735bf4a 100644 --- a/packages/styles/scss/components/slug/_slug.scss +++ b/packages/styles/scss/components/slug/_slug.scss @@ -327,14 +327,14 @@ $sizes: ( // Slug callout styles .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content { - @include callout-gradient(); + @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 $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: convert.to-rem(280px); } @@ -417,7 +417,7 @@ $sizes: ( } &::after { - background: $slug-callout-caret-bottom-background; + background: $ai-popover-caret-bottom-background; block-size: convert.to-rem(2px); border-end-end-radius: 50%; border-end-start-radius: 50%; @@ -530,8 +530,8 @@ $sizes: ( > .#{$prefix}--popover > .#{$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; } } @@ -547,7 +547,7 @@ $sizes: ( > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions) > .#{$prefix}--popover-caret { &::before { - background: $slug-callout-caret-bottom-background-actions; + background: $ai-popover-caret-bottom-background-actions; } } @@ -560,7 +560,7 @@ $sizes: ( > .#{$prefix}--popover > .#{$prefix}--popover-caret { &::before { - border-color: $slug-callout-caret-center; + border-color: $ai-popover-caret-center; } } diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss index 4b1880fa9062..00f8996a0f75 100644 --- a/packages/styles/scss/components/tile/_tile.scss +++ b/packages/styles/scss/components/tile/_tile.scss @@ -394,7 +394,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); } .#{$prefix}--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, @@ -402,7 +402,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); } .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover { - @include callout-gradient('default', 0, 'layer'); + @include ai-popover-gradient('default', 0, 'layer'); } .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before, @@ -421,7 +421,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before, .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before { - @include callout-gradient('hover', 0, 'layer'); + @include ai-popover-gradient('hover', 0, 'layer'); box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow; } @@ -432,7 +432,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); } .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after { - @include callout-gradient('selected', 0, 'layer'); + @include ai-popover-gradient('selected', 0, 'layer'); box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow; } diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss index 87ec673a9efe..549a844128be 100644 --- a/packages/styles/scss/utilities/_ai-gradient.scss +++ b/packages/styles/scss/utilities/_ai-gradient.scss @@ -68,12 +68,12 @@ /// Experimental - name and structure subject to change. Use at your own risk! /// Adds callout gradient styles to a component /// @access private -/// @example @include callout-gradient(); +/// @example @include ai-popover-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 the token to be used as the background /// @group utilities -@mixin callout-gradient( +@mixin ai-popover-gradient( $type: 'default', $offset: 0, $background: 'background' diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index e7b855e67fe1..986d0cf456f8 100644 --- a/packages/themes/src/g10.js +++ b/packages/themes/src/g10.js @@ -16,9 +16,6 @@ import { blue70, blue100, - // CoolGray - coolGray10, - // Gray gray10, gray10Hover, @@ -230,9 +227,9 @@ export const aiAuraHoverBackground = blue10; export const aiAuraHoverStart = rgba(blue50, 0.4); export const aiAuraHoverEnd = rgba(white, 0); -// Callout -export const slugCalloutShadowOuter01 = rgba(blue70, 0.25); -export const slugCalloutShadowOuter02 = rgba(black, 0.1); +// AI Popover +export const aiPopoverShadowOuter01 = rgba(blue70, 0.25); +export const aiPopoverShadowOuter02 = rgba(black, 0.1); // AI skeleton export const aiSkeletonBackground = blue20Hover; @@ -241,30 +238,11 @@ export const aiSkeletonElementBackground = blue100; // AI Modal tokens export const aiOverlay = rgba(blue100, 0.5); -//// Not used in phase 2 / possibly remove? -export const slugCalloutGradientTop = rgba(gray10, 0.85); -export const slugCalloutGradientBottom = rgba(gray20, 0.85); -export const aiGradientStart01 = rgba(coolGray10, 0.5); -export const aiGradientStart02 = rgba(blue10, 0.5); -export const aiGradientEnd = rgba(white, 0); -export const slugCalloutAuraStart = aiAuraStart; -export const slugCalloutAuraEnd = aiAuraEnd; -export const slugCalloutGradientTopHover = rgba(gray20, 0.55); -export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55); -export const slugCalloutAuraStartHover01 = rgba(white, 0.5); -export const slugCalloutAuraEndHover01 = rgba(white, 0); -export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5); -export const slugCalloutAuraEndHover02 = rgba(white, 0); -export const slugCalloutGradientTopSelected = rgba(gray20, 0.85); -export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85); -export const slugCalloutAuraStartSelected = rgba(blue10, 0.6); -export const slugCalloutAuraEndSelected = rgba(white, 0); - // One off tokens for caret -export const slugCalloutCaretCenter = '#A7C7FF'; -export const slugCalloutCaretBottom = blue20; -export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE'; -export const slugCalloutCaretBottomBackground = '#CCDBF8'; +export const aiPopoverCaretCenter = '#A7C7FF'; +export const aiPopoverCaretBottom = blue20; +export const aiPopoverCaretBottomBackgroundActions = '#D2DCEE'; +export const aiPopoverCaretBottomBackground = '#CCDBF8'; // Chat tokens export const chatPromptBackground = white; diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index 86a760f4bc75..d2b012d574f5 100644 --- a/packages/themes/src/g100.js +++ b/packages/themes/src/g100.js @@ -7,8 +7,6 @@ import { // Blue - blue20, - blue20Hover, blue40, blue60, blue70, @@ -235,9 +233,9 @@ export const aiAuraHoverBackground = layerHover01; export const aiAuraHoverStart = rgba(blue50, 0.4); export const aiAuraHoverEnd = rgba(black, 0); -// Callout -export const slugCalloutShadowOuter01 = rgba(blue80, 0.25); -export const slugCalloutShadowOuter02 = rgba(black, 0.65); +// AI Popover +export const aiPopoverShadowOuter01 = rgba(blue80, 0.25); +export const aiPopoverShadowOuter02 = rgba(black, 0.65); // AI skeleton export const aiSkeletonBackground = blue70Hover; @@ -246,30 +244,11 @@ export const aiSkeletonElementBackground = blue100; // AI Modal tokens export const aiOverlay = rgba(blue100, 0.5); -//// Not used in phase 2 / possibly remove? -export const slugCalloutGradientTop = rgba(gray100, 0.85); -export const slugCalloutGradientBottom = rgba(gray90, 0.85); -export const aiGradientStart01 = rgba(blue20, 0.2); -export const aiGradientStart02 = 'transparent'; -export const aiGradientEnd = 'rgba(38, 38, 38, 0)'; -export const slugCalloutAuraStart = aiAuraStart; -export const slugCalloutAuraEnd = aiAuraEnd; -export const slugCalloutGradientTopHover = rgba(gray80, 0.55); -export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55); -export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3); -export const slugCalloutAuraEndHover01 = rgba(gray100, 0); -export const slugCalloutAuraStartHover02 = 'transparent'; -export const slugCalloutAuraEndHover02 = 'transparent'; -export const slugCalloutGradientTopSelected = rgba(gray80, 0.85); -export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85); -export const slugCalloutAuraStartSelected = rgba(blue20, 0.2); -export const slugCalloutAuraEndSelected = rgba(gray100, 0); - // One off tokens for caret -export const slugCalloutCaretCenter = '#3F68AF'; -export const slugCalloutCaretBottom = '#3D4655'; -export const slugCalloutCaretBottomBackgroundActions = '#192436'; -export const slugCalloutCaretBottomBackground = '#213250'; +export const aiPopoverCaretCenter = '#3F68AF'; +export const aiPopoverCaretBottom = '#3D4655'; +export const aiPopoverCaretBottomBackgroundActions = '#192436'; +export const aiPopoverCaretBottomBackground = '#213250'; // Chat tokens export const chatPromptBackground = gray100; diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index e21bf6108c00..49efb2d12e23 100644 --- a/packages/themes/src/g90.js +++ b/packages/themes/src/g90.js @@ -7,8 +7,6 @@ import { // Blue - blue20, - blue20Hover, blue40, blue60, blue70, @@ -236,9 +234,9 @@ export const aiAuraHoverBackground = layerHover01; export const aiAuraHoverStart = rgba(blue50, 0.4); export const aiAuraHoverEnd = rgba(black, 0); -// Callout -export const slugCalloutShadowOuter01 = rgba(blue80, 0.25); -export const slugCalloutShadowOuter02 = rgba(black, 0.65); +// AI Popover +export const aiPopoverShadowOuter01 = rgba(blue80, 0.25); +export const aiPopoverShadowOuter02 = rgba(black, 0.65); // AI skeleton export const aiSkeletonBackground = blue70Hover; @@ -247,30 +245,11 @@ export const aiSkeletonElementBackground = blue100; // AI Modal tokens export const aiOverlay = rgba(blue100, 0.5); -//// Not used in phase 2 / possibly remove? -export const slugCalloutGradientTop = rgba(gray100, 0.85); -export const slugCalloutGradientBottom = rgba(gray90, 0.85); -export const aiGradientStart01 = rgba(blue20, 0.2); -export const aiGradientStart02 = 'transparent'; -export const aiGradientEnd = 'rgba(38, 38, 38, 0)'; -export const slugCalloutAuraStart = aiAuraStart; -export const slugCalloutAuraEnd = aiAuraEnd; -export const slugCalloutGradientTopHover = rgba(gray80, 0.55); -export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55); -export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3); -export const slugCalloutAuraEndHover01 = rgba(gray100, 0); -export const slugCalloutAuraStartHover02 = 'transparent'; -export const slugCalloutAuraEndHover02 = 'transparent'; -export const slugCalloutGradientTopSelected = rgba(gray80, 0.85); -export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85); -export const slugCalloutAuraStartSelected = rgba(blue20, 0.2); -export const slugCalloutAuraEndSelected = rgba(gray100, 0); - // One off tokens for caret -export const slugCalloutCaretCenter = '#456FB5'; -export const slugCalloutCaretBottom = '#465060'; -export const slugCalloutCaretBottomBackgroundActions = '#253042'; -export const slugCalloutCaretBottomBackground = '#2D3F5C'; +export const aiPopoverCaretCenter = '#456FB5'; +export const aiPopoverCaretBottom = '#465060'; +export const aiPopoverCaretBottomBackgroundActions = '#253042'; +export const aiPopoverCaretBottomBackground = '#2D3F5C'; // Chat tokens export const chatPromptBackground = gray100; diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap index b8aeb4c8d292..a34b47c63fc5 100644 --- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap +++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap @@ -243,25 +243,8 @@ Array [ "slug-background-hover", "slug-gradient-hover", "slug-hollow-hover", - "slug-callout-gradient-top", - "slug-callout-gradient-bottom", - "slug-callout-aura-start", - "slug-callout-aura-end", - "slug-callout-gradient-top-hover", - "slug-callout-gradient-bottom-hover", - "slug-callout-aura-start-hover-01", - "slug-callout-aura-start-hover-02", - "slug-callout-aura-end-hover-01", - "slug-callout-aura-end-hover-02", - "slug-callout-gradient-top-selected", - "slug-callout-gradient-bottom-selected", - "slug-callout-aura-start-selected", - "slug-callout-aura-end-selected", - "ai-gradient-start-01", - "ai-gradient-start-02", - "ai-gradient-end", - "slug-callout-shadow-outer-01", - "slug-callout-shadow-outer-02", + "ai-popover-shadow-outer-01", + "ai-popover-shadow-outer-02", "ai-inner-shadow", "ai-aura-start", "ai-aura-start-table", @@ -276,10 +259,10 @@ Array [ "ai-skeleton-background", "ai-skeleton-element-background", "ai-overlay", - "slug-callout-caret-center", - "slug-callout-caret-bottom", - "slug-callout-caret-bottom-background", - "slug-callout-caret-bottom-background-actions", + "ai-popover-caret-center", + "ai-popover-caret-bottom", + "ai-popover-caret-bottom-background", + "ai-popover-caret-bottom-background-actions", "chat-prompt-background", "chat-prompt-border-start", "chat-prompt-border-end", diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js index 01d8a638dd5a..4cd4e8a70077 100644 --- a/packages/themes/src/tokens/__tests__/metadata-test.js +++ b/packages/themes/src/tokens/__tests__/metadata-test.js @@ -946,79 +946,11 @@ test('metadata', () => { "type": "color", }, Object { - "name": "slug-callout-gradient-top", + "name": "ai-popover-shadow-outer-01", "type": "color", }, Object { - "name": "slug-callout-gradient-bottom", - "type": "color", - }, - Object { - "name": "slug-callout-aura-start", - "type": "color", - }, - Object { - "name": "slug-callout-aura-end", - "type": "color", - }, - Object { - "name": "slug-callout-gradient-top-hover", - "type": "color", - }, - Object { - "name": "slug-callout-gradient-bottom-hover", - "type": "color", - }, - Object { - "name": "slug-callout-aura-start-hover-01", - "type": "color", - }, - Object { - "name": "slug-callout-aura-start-hover-02", - "type": "color", - }, - Object { - "name": "slug-callout-aura-end-hover-01", - "type": "color", - }, - Object { - "name": "slug-callout-aura-end-hover-02", - "type": "color", - }, - Object { - "name": "slug-callout-gradient-top-selected", - "type": "color", - }, - Object { - "name": "slug-callout-gradient-bottom-selected", - "type": "color", - }, - Object { - "name": "slug-callout-aura-start-selected", - "type": "color", - }, - Object { - "name": "slug-callout-aura-end-selected", - "type": "color", - }, - Object { - "name": "ai-gradient-start-01", - "type": "color", - }, - Object { - "name": "ai-gradient-start-02", - "type": "color", - }, - Object { - "name": "ai-gradient-end", - "type": "color", - }, - Object { - "name": "slug-callout-shadow-outer-01", - "type": "color", - }, - Object { - "name": "slug-callout-shadow-outer-02", + "name": "ai-popover-shadow-outer-02", "type": "color", }, Object { @@ -1078,19 +1010,19 @@ test('metadata', () => { "type": "color", }, Object { - "name": "slug-callout-caret-center", + "name": "ai-popover-caret-center", "type": "color", }, Object { - "name": "slug-callout-caret-bottom", + "name": "ai-popover-caret-bottom", "type": "color", }, Object { - "name": "slug-callout-caret-bottom-background", + "name": "ai-popover-caret-bottom-background", "type": "color", }, Object { - "name": "slug-callout-caret-bottom-background-actions", + "name": "ai-popover-caret-bottom-background-actions", "type": "color", }, Object { diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js index 236515876e91..eb6badb711e5 100644 --- a/packages/themes/src/tokens/v11TokenGroup.js +++ b/packages/themes/src/tokens/v11TokenGroup.js @@ -350,26 +350,9 @@ export const ai = TokenGroup.create({ 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', - 'slug-callout-gradient-top', - 'slug-callout-gradient-bottom', - 'slug-callout-aura-start', - 'slug-callout-aura-end', - 'slug-callout-gradient-top-hover', - 'slug-callout-gradient-bottom-hover', - 'slug-callout-aura-start-hover-01', - 'slug-callout-aura-start-hover-02', - 'slug-callout-aura-end-hover-01', - 'slug-callout-aura-end-hover-02', - 'slug-callout-gradient-top-selected', - 'slug-callout-gradient-bottom-selected', - 'slug-callout-aura-start-selected', - 'slug-callout-aura-end-selected', - 'ai-gradient-start-01', - 'ai-gradient-start-02', - 'ai-gradient-end', // Phase 2 - 'slug-callout-shadow-outer-01', - 'slug-callout-shadow-outer-02', + 'ai-popover-shadow-outer-01', + 'ai-popover-shadow-outer-02', // Linear gradient refactor 'ai-inner-shadow', 'ai-aura-start', @@ -386,10 +369,10 @@ export const ai = TokenGroup.create({ 'ai-skeleton-element-background', 'ai-overlay', // Caret tokens - 'slug-callout-caret-center', - 'slug-callout-caret-bottom', - 'slug-callout-caret-bottom-background', - 'slug-callout-caret-bottom-background-actions', + 'ai-popover-caret-center', + 'ai-popover-caret-bottom', + 'ai-popover-caret-bottom-background', + 'ai-popover-caret-bottom-background-actions', // Chat tokens 'chat-prompt-background', 'chat-prompt-border-start', diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index eb3c2807c20d..0c2da2140337 100644 --- a/packages/themes/src/white.js +++ b/packages/themes/src/white.js @@ -16,9 +16,6 @@ import { blue70, blue100, - // CoolGray - coolGray10, - // Gray gray10, gray10Hover, @@ -230,9 +227,9 @@ export const aiAuraHoverBackground = blue10; export const aiAuraHoverStart = rgba(blue50, 0.4); export const aiAuraHoverEnd = rgba(white, 0); -// Callout -export const slugCalloutShadowOuter01 = rgba(blue70, 0.25); -export const slugCalloutShadowOuter02 = rgba(black, 0.1); +// AI Popover +export const aiPopoverShadowOuter01 = rgba(blue70, 0.25); +export const aiPopoverShadowOuter02 = rgba(black, 0.1); // AI skeleton export const aiSkeletonBackground = blue20Hover; @@ -241,30 +238,11 @@ export const aiSkeletonElementBackground = blue100; // AI Modal tokens export const aiOverlay = rgba(blue100, 0.5); -//// Not used in phase 2 / possibly remove? -export const slugCalloutGradientTop = rgba(gray10, 0.85); -export const slugCalloutGradientBottom = rgba(gray20, 0.85); -export const aiGradientStart01 = rgba(coolGray10, 0.5); -export const aiGradientStart02 = rgba(blue10, 0.5); -export const aiGradientEnd = rgba(white, 0); -export const slugCalloutAuraStart = aiAuraStart; -export const slugCalloutAuraEnd = aiAuraEnd; -export const slugCalloutGradientTopHover = rgba(gray20, 0.55); -export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55); -export const slugCalloutAuraStartHover01 = rgba(white, 0.5); -export const slugCalloutAuraEndHover01 = rgba(white, 0); -export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5); -export const slugCalloutAuraEndHover02 = rgba(white, 0); -export const slugCalloutGradientTopSelected = rgba(gray20, 0.85); -export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85); -export const slugCalloutAuraStartSelected = rgba(blue10, 0.6); -export const slugCalloutAuraEndSelected = rgba(white, 0); - // One off tokens for caret -export const slugCalloutCaretCenter = '#A7C7FF'; -export const slugCalloutCaretBottom = blue20; -export const slugCalloutCaretBottomBackgroundActions = '#DAE5F8'; -export const slugCalloutCaretBottomBackground = '#D5E5FF'; +export const aiPopoverCaretCenter = '#A7C7FF'; +export const aiPopoverCaretBottom = blue20; +export const aiPopoverCaretBottomBackgroundActions = '#DAE5F8'; +export const aiPopoverCaretBottomBackground = '#D5E5FF'; // Chat tokens export const chatPromptBackground = white;