Skip to content

Commit

Permalink
feat(ProductSwitcher): adding platform, hello colors and openwidget uri
Browse files Browse the repository at this point in the history
  • Loading branch information
@VadymBezpalko
VadymBezpalko committed Jul 30, 2024
1 parent 284f05b commit f2b22e2
Show file tree
Hide file tree
Showing 12 changed files with 56 additions and 15 deletions.
1 change: 0 additions & 1 deletion packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export const ProductSwitcher: FC<IProductSwitcherProps> = ({
placement="right"
triggerRenderer={
<ProductTile
id={mainProduct.id}
isMainProduct
icon={mainProduct.icon}
backgroundColors={mainProduct.backgroundColors}
Expand Down
3 changes: 2 additions & 1 deletion ...ages/react-components/src/components/ProductSwitcher/components/ProductRow/ProductRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const ProductRow: FC<IProps> = ({
product: {
id,
icon,
iconColor,
backgroundColors,
notificationCount,
name,
Expand Down Expand Up @@ -56,8 +57,8 @@ export const ProductRow: FC<IProps> = ({
>
<div className={styles[`${baseClass}__heading`]}>
<ProductTile
id={id}
icon={icon}
iconColor={iconColor}
expired={expired}
backgroundColors={backgroundColors}
notificationCount={notificationCount}
Expand Down
17 changes: 13 additions & 4 deletions ...-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,25 @@ $base-class: 'product-tile';
height: 36px;

&__main-product {
position: relative;
border: 1.5px solid var(--navbar-background);
cursor: pointer;
width: 42px;
height: 42px;
}

&__openwidget-product {
//overflow: hidden;
//&:after {
// background: var(--products-openwidget);
// content: '';
// position: absolute;
// inset: 0;
// z-index: -1;
// filter: blur(3px);
//}
}

&__badge {
position: absolute;
top: -6px;
Expand All @@ -72,10 +85,6 @@ $base-class: 'product-tile';
height: 24px;
}

&--black {
color: var(--content-locked-black);
}

&--large svg {
width: 28px;
height: 28px;
Expand Down
8 changes: 4 additions & 4 deletions ...es/react-components/src/components/ProductSwitcher/components/ProductTile/ProductTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import styles from './ProductTile.module.scss';

type IProps = Pick<
IProductOption,
'id' | 'icon' | 'notificationCount' | 'backgroundColors' | 'expired'
'icon' | 'notificationCount' | 'backgroundColors' | 'expired' | 'iconColor'
> & {
isMainProduct?: boolean;
withBorder?: boolean;
Expand All @@ -20,8 +20,8 @@ type IProps = Pick<
const baseClass = 'product-tile';

export const ProductTile: FC<IProps> = ({
id,
icon,
iconColor,
expired,
backgroundColors,
notificationCount,
Expand All @@ -40,7 +40,7 @@ export const ProductTile: FC<IProps> = ({
[styles[`${baseClass}__main-product`]]: isMainProduct,
})}
style={{
backgroundColor: expired
background: expired
? 'var(--surface-moderate-default)'
: backgroundColors.main,
}}
Expand All @@ -57,10 +57,10 @@ export const ProductTile: FC<IProps> = ({
<Icon
source={icon}
className={cx(styles[`${baseClass}__icon`], {
[styles[`${baseClass}__icon--black`]]: id === 'accounts',
[styles[`${baseClass}__icon--large`]]: isMainProduct,
[styles[`${baseClass}__icon--expired`]]: expired,
})}
customColor={iconColor}
/>
</div>
{isMainProduct && (
Expand Down
20 changes: 15 additions & 5 deletions packages/react-components/src/components/ProductSwitcher/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
OpenWidgetMono,
} from '@livechat/design-system-icons';

import { OpenWidgetLogoUri } from './openwidgetLogoUri';
import { IProductOption } from './types';

export const ProductSwitcherProducts: IProductOption[] = [
Expand All @@ -21,7 +22,6 @@ export const ProductSwitcherProducts: IProductOption[] = [
third: 'var(--products-chatbot)',
},
url: '/livechat',
notificationCount: 1,
},
{
id: 'chatbot',
Expand All @@ -33,7 +33,6 @@ export const ProductSwitcherProducts: IProductOption[] = [
third: 'var(--products-helpdesk)',
},
url: '/chatbot',
notificationCount: 1,
},
{
id: 'helpdesk',
Expand All @@ -45,7 +44,6 @@ export const ProductSwitcherProducts: IProductOption[] = [
third: 'var(--products-chatbot)',
},
url: '/helpdesk',
notificationCount: 1,
expired: true,
},
{
Expand All @@ -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)',
},
Expand All @@ -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',
Expand All @@ -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',
},
Expand Down
2 changes: 2 additions & 0 deletions packages/react-components/src/components/ProductSwitcher/openwidgetLogoUri.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 2 additions & 0 deletions packages/react-components/src/components/ProductSwitcher/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export type ProductId =
| 'openwidget'
| 'knowledgebase'
| 'hello'
| 'platform'
| 'accounts';

export interface IProductSwitcherProps {
Expand All @@ -24,6 +25,7 @@ export interface IProductOption {
trialDaysLeft?: number;
nameAdornment?: ReactNode;
icon: IconSource;
iconColor?: string;
notificationCount?: number;
backgroundColors: {
main: string;
Expand Down
2 changes: 2 additions & 0 deletions packages/react-components/src/foundations/design-token.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
10 changes: 10 additions & 0 deletions packages/react-components/src/stories/foundations/Color/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
};
2 changes: 2 additions & 0 deletions packages/react-components/src/themes/dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 2 additions & 0 deletions packages/react-components/src/themes/legacy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,4 +380,6 @@ $decor-gray800: #29292f;
#1b2b46 96.36%
);
--content-basic-autofill: hsl(240deg 10% 8% / 59%);
--products-hello: #e8bb00;
--products-platform: #04df90;
}
2 changes: 2 additions & 0 deletions packages/react-components/src/themes/light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit f2b22e2

Please sign in to comment.