fix(Color): new tokens, tokens update

packages/react-components/src/foundations/design-token.ts

@@ -72,10 +72,16 @@ export const DesignToken = {
   SurfaceGradient09: '--surface-gradient-09',
   SurfaceGradient10: '--surface-gradient-10',
   SurfaceGradient11: '--surface-gradient-11',
+  SurfaceGradient12: '--surface-gradient-12',
+  SurfaceGradient13: '--surface-gradient-13',
   SurfaceOtherOverlay: '--surface-other-overlay',
   SurfaceOtherAgent: '--surface-other-agent',
   SurfaceOtherAgentHover: '--surface-other-agent-hover',
   SurfaceOtherSkeleton: '--surface-other-skeleton',
+  SurfaceOtherInternalNote: '--surface-other-internal-note',
+  SurfaceOtherInternalNoteHover: '--surface-other-internal-note-hover',
+  SurfaceOtherVisitor: '--surface-other-visitor',
+  SurfaceOtherVisitorHover: '--surface-other-visitor-hover',
   ContentDefault: '--content-default',
   ContentBasicPrimary: '--content-basic-primary',
   ContentSubtle: '--content-subtle',
@@ -238,6 +244,8 @@ export const DesignToken = {
   DecorPurple200: '--decor-purple200',
   DecorPurple100: '--decor-purple100',
   DecorPurple50: '--decor-purple50',
+  DecorBrown50: '--decor-brown50',
+  DecorBrown300: '--decor-brown300',
   ProductsLivechat: '--products-livechat',
   ProductsHelpdesk: '--products-helpdesk',
   ProductsChatbot: '--products-chatbot',

packages/react-components/src/stories/foundations/Color/data.ts

@@ -886,6 +886,16 @@ export const ColorsData: Record<
     desc: '',
     deprecated: false,
   },
+  DecorBrown50: {
+    group: ColorGroup.Decor,
+    desc: '',
+    deprecated: false,
+  },
+  DecorBrown300: {
+    group: ColorGroup.Decor,
+    desc: '',
+    deprecated: false,
+  },
   IllustrationsPrimary: {
     group: ColorGroup.Illustration,
     desc: 'Accent background color for illustration',
@@ -1196,6 +1206,16 @@ export const ColorsData: Record<
     desc: 'Surface gradient color, as a background for banners, tags, badges',
     deprecated: false,
   },
+  SurfaceGradient12: {
+    group: ColorGroup.SurfaceGradient,
+    desc: 'Surface gradient color, as a background for banners, tags, badges',
+    deprecated: false,
+  },
+  SurfaceGradient13: {
+    group: ColorGroup.SurfaceGradient,
+    desc: 'Surface gradient color, as a background for banners, tags, badges',
+    deprecated: false,
+  },
   SurfaceInvertDefault: {
     group: ColorGroup.Deprecated,
     desc: '',
@@ -1296,6 +1316,26 @@ export const ColorsData: Record<
     desc: 'Skeleton background',
     deprecated: false,
   },
+  SurfaceOtherInternalNote: {
+    group: ColorGroup.SurfaceOther,
+    desc: '',
+    deprecated: false,
+  },
+  SurfaceOtherInternalNoteHover: {
+    group: ColorGroup.SurfaceOther,
+    desc: '',
+    deprecated: false,
+  },
+  SurfaceOtherVisitor: {
+    group: ColorGroup.SurfaceOther,
+    desc: '',
+    deprecated: false,
+  },
+  SurfaceOtherVisitorHover: {
+    group: ColorGroup.SurfaceOther,
+    desc: '',
+    deprecated: false,
+  },
   SurfaceOverlay: {
     group: ColorGroup.Deprecated,
     desc: '',

packages/react-components/src/themes/dark.scss

@@ -90,10 +90,16 @@ $surface-tertiary-hover: #43434b;
   --surface-gradient-09: linear-gradient(95deg, #105230, #4b4119 112%);
   --surface-gradient-10: linear-gradient(95deg, #513e79, #1f2d44 112%);
   --surface-gradient-11: linear-gradient(95deg, #513e79, #423a1b 112%);
+  --surface-gradient-12: linear-gradient(95deg, #5b4939 0%, #262426 111.28%);
+  --surface-gradient-13: linear-gradient(95deg, #49494c 0%, #242428 111.28%);
   --surface-other-overlay: rgb(19 19 23 / 90%);
   --surface-other-agent: #0845a2;
-  --surface-other-agent-hover: #2158ab;
+  --surface-other-agent-hover: #195dc8;
   --surface-other-skeleton: #3b3b43;
+  --surface-other-internal-note: #3d361b;
+  --surface-other-internal-note-hover: #634d00;
+  --surface-other-visitor: #2d2d33;
+  --surface-other-visitor-hover: #43434b;
   --content-default: rgb(255 255 255 / 80%); // deprecated
   --content-basic-primary: #f6f6f7;
   --content-subtle: rgb(255 255 255 / 60%); // deprecated
@@ -186,7 +192,7 @@ $surface-tertiary-hover: #43434b;
   --action-high-contrast-disabled: rgb(252 252 252 / 20%);
   --color-bot: #50009c; // deprecated
   --surface-other-bot: #50009c;
-  --surface-other-bot-hover: #6119a6;
+  --surface-other-bot-hover: #7333b0;
   --color-black: #131317;
   --color-white: #fff;
   --decor-blue900: #003288;
@@ -264,6 +270,8 @@ $surface-tertiary-hover: #43434b;
   --decor-purple200: #d1c0ff;
   --decor-purple100: #eee8ff;
   --decor-purple50: #faf8ff;
+  --decor-brown50: #584637;
+  --decor-brown300: #ac8668;
   --products-livechat: #fe5100;
   --products-helpdesk: #00c057;
   --products-chatbot: #06f;

packages/react-components/src/themes/legacy.scss

@@ -73,6 +73,10 @@ $surface-tertiary-hover: #d3dde3;
   --surface-other-agent: #4284f5;
   --surface-other-agent-hover: #034fc3;
   --surface-other-skeleton: #e5e8ec;
+  --surface-other-internal-note: #ffe9bc;
+  --surface-other-internal-note-hover: #fed65e;
+  --surface-other-visitor: #f5f5f5;
+  --surface-other-visitor-hover: #e4e4e5;
   --surface-gradient-01: linear-gradient(
     107.08deg,
     #8609ff 9.14%,
@@ -92,6 +96,8 @@ $surface-tertiary-hover: #d3dde3;
   --surface-gradient-09: linear-gradient(95deg, #d1f4d5, #fff9ee 112%);
   --surface-gradient-10: linear-gradient(95deg, #eee8ff, #f4faff 112%);
   --surface-gradient-11: linear-gradient(95deg, #eee8ff, #fff4dd 112%);
+  --surface-gradient-12: linear-gradient(95deg, #efded2 0%, #fdfcfa 111.28%);
+  --surface-gradient-13: linear-gradient(95deg, #e2e2e4 0%, #fcfcfc 111.28%);
   --content-default: #424d57; // deprecated
   --content-basic-primary: #424d57;
   --content-subtle: #677179; // deprecated
@@ -262,6 +268,8 @@ $surface-tertiary-hover: #d3dde3;
   --decor-purple200: #d1c0ff;
   --decor-purple100: #eee8ff;
   --decor-purple50: #faf8ff;
+  --decor-brown50: #efded2;
+  --decor-brown300: #ac8668;
   --products-livechat: #fe5100;
   --products-helpdesk: #00c057;
   --products-chatbot: #06f;

packages/react-components/src/themes/light.scss

@@ -69,8 +69,12 @@ $surface-tertiary-hover: #e4e4e5;
   --surface-overlay: rgb(19 19 23 / 70%); // deprecated
   --surface-other-overlay: rgb(19 19 23 / 70%);
   --surface-other-agent: #0059e1;
-  --surface-other-agent-hover: #034fc3;
+  --surface-other-agent-hover: #07419a;
   --surface-other-skeleton: #e2e2e4;
+  --surface-other-internal-note: #ffe9bc;
+  --surface-other-internal-note-hover: #fed65e;
+  --surface-other-visitor: #f5f5f5;
+  --surface-other-visitor-hover: #e4e4e5;
   --surface-gradient-01: linear-gradient(
     107.08deg,
     #8609ff 9.14%,
@@ -90,6 +94,8 @@ $surface-tertiary-hover: #e4e4e5;
   --surface-gradient-09: linear-gradient(95deg, #d1f4d5, #fff9ee 112%);
   --surface-gradient-10: linear-gradient(95deg, #eee8ff, #f4faff 112%);
   --surface-gradient-11: linear-gradient(95deg, #eee8ff, #fff4dd 112%);
+  --surface-gradient-12: linear-gradient(95deg, #efded2 0%, #fdfcfa 111.28%);
+  --surface-gradient-13: linear-gradient(95deg, #e2e2e4 0%, #fcfcfc 111.28%);
   --content-default: #131317; // deprecated
   --content-basic-primary: #131317;
   --content-subtle: #62626d; // deprecated
@@ -182,7 +188,7 @@ $surface-tertiary-hover: #e4e4e5;
   --action-high-contrast-disabled: rgb(27 27 32 / 20%);
   --color-bot: #50009c; // deprecated
   --surface-other-bot: #50009c;
-  --surface-other-bot-hover: #41057b;
+  --surface-other-bot-hover: #380867;
   --color-black: #131317;
   --color-white: #fff;
   --decor-blue900: #003288;
@@ -260,6 +266,8 @@ $surface-tertiary-hover: #e4e4e5;
   --decor-purple200: #d1c0ff;
   --decor-purple100: #eee8ff;
   --decor-purple50: #faf8ff;
+  --decor-brown50: #efded2;
+  --decor-brown300: #ac8668;
   --products-livechat: #fe5100;
   --products-helpdesk: #00c057;
   --products-chatbot: #06f;