From f2b22e2301c2b293526ca07b0fa98b8f9ce19fa4 Mon Sep 17 00:00:00 2001 From: Vadym Date: Tue, 30 Jul 2024 13:25:11 +0200 Subject: [PATCH] feat(ProductSwitcher): adding platform, hello colors and openwidget uri --- .../ProductSwitcher/ProductSwitcher.tsx | 1 - .../components/ProductRow/ProductRow.tsx | 3 ++- .../ProductTile/ProductTile.module.scss | 17 ++++++++++++---- .../components/ProductTile/ProductTile.tsx | 8 ++++---- .../components/ProductSwitcher/constants.ts | 20 ++++++++++++++----- .../ProductSwitcher/openwidgetLogoUri.ts | 2 ++ .../src/components/ProductSwitcher/types.ts | 2 ++ .../src/foundations/design-token.ts | 2 ++ .../src/stories/foundations/Color/data.ts | 10 ++++++++++ .../react-components/src/themes/dark.scss | 2 ++ .../react-components/src/themes/legacy.scss | 2 ++ .../react-components/src/themes/light.scss | 2 ++ 12 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 packages/react-components/src/components/ProductSwitcher/openwidgetLogoUri.ts diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx index 7f6eaca09..27725a36d 100644 --- a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx +++ b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx @@ -48,7 +48,6 @@ export const ProductSwitcher: FC = ({ placement="right" triggerRenderer={ = ({ product: { id, icon, + iconColor, backgroundColors, notificationCount, name, @@ -56,8 +57,8 @@ export const ProductRow: FC = ({ >
& { isMainProduct?: boolean; withBorder?: boolean; @@ -20,8 +20,8 @@ type IProps = Pick< const baseClass = 'product-tile'; export const ProductTile: FC = ({ - id, icon, + iconColor, expired, backgroundColors, notificationCount, @@ -40,7 +40,7 @@ export const ProductTile: FC = ({ [styles[`${baseClass}__main-product`]]: isMainProduct, })} style={{ - backgroundColor: expired + background: expired ? 'var(--surface-moderate-default)' : backgroundColors.main, }} @@ -57,10 +57,10 @@ export const ProductTile: FC = ({
{isMainProduct && ( diff --git a/packages/react-components/src/components/ProductSwitcher/constants.ts b/packages/react-components/src/components/ProductSwitcher/constants.ts index 59c493451..87395ee49 100644 --- a/packages/react-components/src/components/ProductSwitcher/constants.ts +++ b/packages/react-components/src/components/ProductSwitcher/constants.ts @@ -8,6 +8,7 @@ import { OpenWidgetMono, } from '@livechat/design-system-icons'; +import { OpenWidgetLogoUri } from './openwidgetLogoUri'; import { IProductOption } from './types'; export const ProductSwitcherProducts: IProductOption[] = [ @@ -21,7 +22,6 @@ export const ProductSwitcherProducts: IProductOption[] = [ third: 'var(--products-chatbot)', }, url: '/livechat', - notificationCount: 1, }, { id: 'chatbot', @@ -33,7 +33,6 @@ export const ProductSwitcherProducts: IProductOption[] = [ third: 'var(--products-helpdesk)', }, url: '/chatbot', - notificationCount: 1, }, { id: 'helpdesk', @@ -45,7 +44,6 @@ export const ProductSwitcherProducts: IProductOption[] = [ third: 'var(--products-chatbot)', }, url: '/helpdesk', - notificationCount: 1, expired: true, }, { @@ -65,7 +63,7 @@ export const ProductSwitcherProducts: IProductOption[] = [ name: 'OpenWidget', icon: OpenWidgetMono, backgroundColors: { - main: 'var(--products-openwidget)', + main: `url("${OpenWidgetLogoUri}")`, second: 'var(--products-livechat)', third: 'var(--products-chatbot)', }, @@ -81,7 +79,18 @@ export const ProductSwitcherProducts: IProductOption[] = [ third: 'var(--products-chatbot)', }, url: '/hello', - notificationCount: 1, + }, + { + id: 'platform', + name: 'Platform', + icon: HelloMono, + iconColor: 'var(--content-locked-black)', + backgroundColors: { + main: 'var(--products-platform)', + second: 'var(--products-livechat)', + third: 'var(--products-chatbot)', + }, + url: '/platform', }, { id: 'accounts', @@ -92,6 +101,7 @@ export const ProductSwitcherProducts: IProductOption[] = [ second: 'var(--products-livechat)', third: 'var(--products-chatbot)', }, + iconColor: 'var(--content-locked-black)', withDivider: true, url: '/accounts', }, diff --git a/packages/react-components/src/components/ProductSwitcher/openwidgetLogoUri.ts b/packages/react-components/src/components/ProductSwitcher/openwidgetLogoUri.ts new file mode 100644 index 000000000..1a624fd39 --- /dev/null +++ b/packages/react-components/src/components/ProductSwitcher/openwidgetLogoUri.ts @@ -0,0 +1,2 @@ +export const OpenWidgetLogoUri = + "data:image/svg+xml,%3Csvg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_24776_25528' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='41' height='41'%3E%3Cpath d='M0.431152 8.64392C0.431152 4.22564 4.01287 0.643921 8.43115 0.643921H32.4312C36.8494 0.643921 40.4312 4.22564 40.4312 8.64392V32.6439C40.4312 37.0622 36.8494 40.6439 32.4312 40.6439H8.43115C4.01287 40.6439 0.431152 37.0622 0.431152 32.6439V8.64392Z' fill='%230066FF'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_24776_25528)'%3E%3Cg filter='url(%23filter0_f_24776_25528)'%3E%3Ccircle cx='33.0694' cy='14.7943' r='16.9312' fill='%23FF4205'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_24776_25528)'%3E%3Ccircle cx='10.8482' cy='33.8419' r='16.9312' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter2_f_24776_25528)'%3E%3Ccircle cx='9.78904' cy='6.32865' r='10.582' fill='%233750FF'/%3E%3C/g%3E%3Cg filter='url(%23filter3_f_24776_25528)'%3E%3Ccircle cx='7.6739' cy='7.38686' r='11.6402' fill='%233750FF'/%3E%3C/g%3E%3Cg filter='url(%23filter4_f_24776_25528)'%3E%3Ccircle cx='8.73054' cy='10.5614' r='11.6402' fill='%233750FF'/%3E%3C/g%3E%3Cg filter='url(%23filter5_f_24776_25528)'%3E%3Ccircle cx='34.1285' cy='34.9001' r='11.6402' fill='%23FFD001'/%3E%3C/g%3E%3Cg filter='url(%23filter6_f_24776_25528)'%3E%3Ccircle cx='29.8951' cy='37.0165' r='11.6402' fill='%23FFD001'/%3E%3C/g%3E%3Cg filter='url(%23filter7_f_24776_25528)'%3E%3Ccircle cx='29.8951' cy='37.0165' r='11.6402' fill='%23FFD001'/%3E%3C/g%3E%3Cg filter='url(%23filter8_f_24776_25528)'%3E%3Ccircle cx='6.61414' cy='30.6673' r='9.52381' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter9_f_24776_25528)'%3E%3Ccircle cx='6.61414' cy='30.6673' r='9.52381' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter10_f_24776_25528)'%3E%3Ccircle cx='6.61414' cy='30.6673' r='9.52381' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter11_f_24776_25528)'%3E%3Ccircle cx='6.61414' cy='30.6673' r='9.52381' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter12_f_24776_25528)'%3E%3Ccircle cx='6.61414' cy='30.6673' r='9.52381' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter13_f_24776_25528)'%3E%3Ccircle cx='9.79012' cy='32.7837' r='6.34921' fill='%2373CE3B'/%3E%3C/g%3E%3Cg filter='url(%23filter14_f_24776_25528)'%3E%3Ccircle cx='39.4182' cy='17.9689' r='13.7566' fill='%23FF4205'/%3E%3C/g%3E%3Cg filter='url(%23filter15_f_24776_25528)'%3E%3Ccircle cx='39.419' cy='14.7942' r='11.6402' fill='%23FF4205'/%3E%3C/g%3E%3Cg filter='url(%23filter16_f_24776_25528)'%3E%3Ccircle cx='9.78983' cy='13.7361' r='8.46561' fill='%233750FF'/%3E%3C/g%3E%3Cg filter='url(%23filter17_f_24776_25528)'%3E%3Ccircle cx='32.0108' cy='12.6778' r='6.34921' fill='%23FF2E00'/%3E%3C/g%3E%3Cg filter='url(%23filter18_f_24776_25528)'%3E%3Ccircle cx='12.9624' cy='4.21223' r='10.582' fill='%233851FF'/%3E%3C/g%3E%3Cg filter='url(%23filter19_f_24776_25528)'%3E%3Ccircle cx='28.8369' cy='3.15406' r='10.582' fill='%23F3354D'/%3E%3C/g%3E%3Cg filter='url(%23filter20_f_24776_25528)'%3E%3Ccircle cx='34.1269' cy='38.0747' r='10.582' fill='%23FFD101'/%3E%3C/g%3E%3Cg filter='url(%23filter21_f_24776_25528)'%3E%3Ccircle cx='8.73289' cy='33.8419' r='10.582' fill='%237FCF35'/%3E%3C/g%3E%3Cg filter='url(%23filter22_f_24776_25528)'%3E%3Ccircle cx='6.6157' cy='24.3181' r='10.582' fill='%231D7DD0'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_24776_25528' x='-7.86182' y='-26.137' width='81.8623' height='81.8624' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter1_f_24776_25528' x='-30.083' y='-7.08932' width='81.8623' height='81.8624' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter2_f_24776_25528' x='-24.793' y='-28.2534' width='69.1641' height='69.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter3_f_24776_25528' x='-27.9663' y='-28.2534' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter4_f_24776_25528' x='-26.9097' y='-25.0788' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter5_f_24776_25528' x='-1.51172' y='-0.740143' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter6_f_24776_25528' x='-5.74512' y='1.37628' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter7_f_24776_25528' x='-5.74512' y='1.37628' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter8_f_24776_25528' x='-26.9097' y='-2.85651' width='67.0479' height='67.0476' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter9_f_24776_25528' x='-26.9097' y='-2.85651' width='67.0479' height='67.0476' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter10_f_24776_25528' x='-26.9097' y='-2.85651' width='67.0479' height='67.0476' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter11_f_24776_25528' x='-26.9097' y='-2.85651' width='67.0479' height='67.0476' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter12_f_24776_25528' x='-26.9097' y='-2.85651' width='67.0479' height='67.0476' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter13_f_24776_25528' x='-20.5591' y='2.43448' width='60.6982' height='60.6984' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter14_f_24776_25528' x='1.66162' y='-19.7878' width='75.5132' height='75.5132' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter15_f_24776_25528' x='3.77881' y='-20.846' width='71.2803' height='71.2804' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter16_f_24776_25528' x='-22.6758' y='-18.7296' width='64.9312' height='64.9312' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter17_f_24776_25528' x='1.66162' y='-17.6714' width='60.6982' height='60.6984' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter18_f_24776_25528' x='-8.61963' y='-17.3698' width='43.1641' height='43.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='5.5' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter19_f_24776_25528' x='7.25488' y='-18.4279' width='43.1641' height='43.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='5.5' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter20_f_24776_25528' x='12.5449' y='16.4927' width='43.1641' height='43.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='5.5' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter21_f_24776_25528' x='-12.8491' y='12.2599' width='43.1641' height='43.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='5.5' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3Cfilter id='filter22_f_24776_25528' x='-14.9663' y='2.73605' width='43.1641' height='43.164' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='5.5' result='effect1_foregroundBlur_24776_25528'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"; diff --git a/packages/react-components/src/components/ProductSwitcher/types.ts b/packages/react-components/src/components/ProductSwitcher/types.ts index 204228239..cf6fd4d4d 100644 --- a/packages/react-components/src/components/ProductSwitcher/types.ts +++ b/packages/react-components/src/components/ProductSwitcher/types.ts @@ -9,6 +9,7 @@ export type ProductId = | 'openwidget' | 'knowledgebase' | 'hello' + | 'platform' | 'accounts'; export interface IProductSwitcherProps { @@ -24,6 +25,7 @@ export interface IProductOption { trialDaysLeft?: number; nameAdornment?: ReactNode; icon: IconSource; + iconColor?: string; notificationCount?: number; backgroundColors: { main: string; diff --git a/packages/react-components/src/foundations/design-token.ts b/packages/react-components/src/foundations/design-token.ts index 87f2e2cfa..61ef8ea63 100644 --- a/packages/react-components/src/foundations/design-token.ts +++ b/packages/react-components/src/foundations/design-token.ts @@ -377,6 +377,8 @@ export const DesignToken = { OnePopoverBorderActive: '--one-popover-border-active', OneTooltipBackground: '--one-tooltip-background', ContentBasicAutofill: '--content-basic-autofill', + ProductsHello: '--products-hello', + ProductsPlatform: '--products-platform', }; export type DesignTokenKey = keyof typeof DesignToken; diff --git a/packages/react-components/src/stories/foundations/Color/data.ts b/packages/react-components/src/stories/foundations/Color/data.ts index ad93e49fd..98480b12c 100644 --- a/packages/react-components/src/stories/foundations/Color/data.ts +++ b/packages/react-components/src/stories/foundations/Color/data.ts @@ -1621,4 +1621,14 @@ export const ColorsData: Record< desc: '', deprecated: undefined, }, + ProductsHello: { + group: ColorGroup.Products, + desc: '', + deprecated: undefined, + }, + ProductsPlatform: { + group: ColorGroup.Products, + desc: '', + deprecated: undefined, + }, }; diff --git a/packages/react-components/src/themes/dark.scss b/packages/react-components/src/themes/dark.scss index d06c11fbd..1680d8e0a 100644 --- a/packages/react-components/src/themes/dark.scss +++ b/packages/react-components/src/themes/dark.scss @@ -390,4 +390,6 @@ $surface-invert-primary: #e2e2e4; #2d3a4c 94.44% ); --content-basic-autofill: hsl(240deg 6% 97% / 59%); + --products-hello: #e8bb00; + --products-platform: #04df90; } diff --git a/packages/react-components/src/themes/legacy.scss b/packages/react-components/src/themes/legacy.scss index f252e25f3..7f14115b5 100644 --- a/packages/react-components/src/themes/legacy.scss +++ b/packages/react-components/src/themes/legacy.scss @@ -380,4 +380,6 @@ $decor-gray800: #29292f; #1b2b46 96.36% ); --content-basic-autofill: hsl(240deg 10% 8% / 59%); + --products-hello: #e8bb00; + --products-platform: #04df90; } diff --git a/packages/react-components/src/themes/light.scss b/packages/react-components/src/themes/light.scss index 83b95720f..4328daff3 100644 --- a/packages/react-components/src/themes/light.scss +++ b/packages/react-components/src/themes/light.scss @@ -391,4 +391,6 @@ $content-basic-internal-note: #3a310c; #1b2b46 96.36% ); --content-basic-autofill: hsl(240deg 10% 8% / 59%); + --products-hello: #e8bb00; + --products-platform: #04df90; }