chore: add and update theme related css variables values (#7442)

web/themes/dark.css

@@ -10,7 +10,7 @@ html[data-theme="dark"] {
   --color-components-input-bg-destructive: #FFFFFF03;
   --color-components-input-bg-disabled: #FFFFFF08;
   --color-components-input-text-disabled: #C8CEDA4D;
-  --color-components-input-text-filled-disabled: #C8CEDA66;
+  --color-components-input-text-filled-disabled: #C8CEDA99;
   --color-components-input-border-hover: #3A3A40;
   --color-components-input-border-active-prompt-1: #36BFFA;
   --color-components-input-border-active-prompt-2: #296DFF;
@@ -57,7 +57,7 @@ html[data-theme="dark"] {
   --color-components-button-destructive-primary-border-hover: #FFFFFF33;
   --color-components-button-destructive-primary-border-disabled: #FFFFFF14;
 
-  --color-components-button-destructive-secondary-text: #F04438;
+  --color-components-button-destructive-secondary-text: #F97066;
   --color-components-button-destructive-secondary-text-disabled: #F0443833;
   --color-components-button-destructive-secondary-bg: #FFFFFF1F;
   --color-components-button-destructive-secondary-bg-hover: #F0443824;
@@ -66,13 +66,13 @@ html[data-theme="dark"] {
   --color-components-button-destructive-secondary-border-hover: #FFFFFF1F;
   --color-components-button-destructive-secondary-border-disabled: #F0443814;
 
-  --color-components-button-destructive-tertiary-text: #F04438;
+  --color-components-button-destructive-tertiary-text: #F97066;
   --color-components-button-destructive-tertiary-text-disabled: #F0443833;
   --color-components-button-destructive-tertiary-bg: #F0443824;
   --color-components-button-destructive-tertiary-bg-hover: #F0443840;
   --color-components-button-destructive-tertiary-bg-disabled: #F0443814;
 
-  --color-components-button-destructive-ghost-text: #F04438;
+  --color-components-button-destructive-ghost-text: #F97066;
   --color-components-button-destructive-ghost-text-disabled: #F0443833;
   --color-components-button-destructive-ghost-bg-hover: #F0443824;
 
@@ -136,6 +136,8 @@ html[data-theme="dark"] {
   --color-components-panel-on-panel-item-bg-hover: #3A3A40;
   --color-components-panel-on-panel-item-bg-alt: #3A3A40;
 
+  --color-components-panel-bg-transparent: #22222500;
+
   --color-components-main-nav-nav-button-text: #C8CEDA99;
   --color-components-main-nav-nav-button-text-active: #F4F4F5;
   --color-components-main-nav-nav-button-bg: #FFFFFF00;
@@ -204,7 +206,7 @@ html[data-theme="dark"] {
   --color-components-chart-current-2: #155AEF4D;
   --color-components-chart-bg: #18181BF2;
 
-  --color-components-actionbar-bg: #18181BCC;
+  --color-components-actionbar-bg: #222225;
   --color-components-actionbar-border: #C8CEDA14;
 
   --color-components-dropzone-bg-alt: #18181BCC;
@@ -227,19 +229,29 @@ html[data-theme="dark"] {
   --color-components-progress-gray-bg: #C8CEDA05;
 
   --color-components-chat-input-audio-bg: #155AEF33;
-  --color-components-chat-input-audio-wave: #C8CEDA24;
+  --color-components-chat-input-audio-wave-default: #C8CEDA24;
   --color-components-chat-input-bg-mask-1: #18181B0A;
   --color-components-chat-input-bg-mask-2: #18181B99;
   --color-components-chat-input-border: #C8CEDA33;
+  --color-components-chat-input-audio-wave-active: #84ABFF;
+  --color-components-chat-input-audio-bg-alt: #18181BE5;
+
+  --color-components-Avatar-shape-fill-stop-0: #FFFFFFF2;
+  --color-components-Avatar-shape-fill-stop-100: #FFFFFFCC;
+
+  --color-components-Avatar-bg-mask-stop-0: #FFFFFF33;
+  --color-components-Avatar-bg-mask-stop-100: #FFFFFF08;
+
+  --color-components-Avatar-default-avatar-bg: #222225;
 
   --color-text-primary: #FBFBFC;
   --color-text-secondary: #D9D9DE;
   --color-text-tertiary: #C8CEDA99;
   --color-text-quaternary: #C8CEDA66;
-  --color-text-destructive: #F04438;
+  --color-text-destructive: #F97066;
   --color-text-success: #17B26A;
   --color-text-warning: #F79009;
-  --color-text-destructive-secondary: #F04438;
+  --color-text-destructive-secondary: #F97066;
   --color-text-success-secondary: #47CD89;
   --color-text-warning-secondary: #FDB022;
   --color-text-accent: #5289FF;
@@ -252,17 +264,20 @@ html[data-theme="dark"] {
   --color-text-secondary-on-surface: #FFFFFFE5;
   --color-text-logo-text: #E9E9EC;
   --color-text-empty-state-icon: #C8CEDA4D;
+  --color-text-inverted: #FFFFFF;
 
   --color-background-body: #1D1D20;
   --color-background-default-subtle: #222225;
   --color-background-neurtral-subtle: #1D1D20;
-  --color-background-sidenav-bg: #18181B80;
+  --color-background-sidenav-bg: #27272AEB;
   --color-background-default: #222225;
   --color-background-soft: #18181B40;
   --color-background-gradient-bg-fill-chat-bg-1: #222225;
   --color-background-gradient-bg-fill-chat-bg-2: #1D1D20;
   --color-background-gradient-bg-fill-chat-bubble-bg-1: #C8CEDA14;
   --color-background-gradient-bg-fill-chat-bubble-bg-2: #C8CEDA05;
+  --color-background-gradient-bg-fill-debug-bg-1: #C8CEDA14;
+  --color-background-gradient-bg-fill-debug-bg-2: #18181B0A;
 
   --color-background-gradient-mask-gray: #18181B14;
   --color-background-gradient-mask-transparent: #00000000;
@@ -298,12 +313,8 @@ html[data-theme="dark"] {
   --color-shadow-shadow-2: #00000014;
   --color-shadow-shadow-10: #00000066;
 
-  --color-workflow-block-border: #FFFFFF14;
-  --color-workflow-block-panel-bg: #27272B;
   --color-workflow-block-border: #FFFFFF14;
   --color-workflow-block-parma-bg: #FFFFFF0D;
-  --color-workflow-block-nav-bg: #1D1D20;
-  --color-workflow-block-nav-border-right: #FFFFFF0D;
   --color-workflow-block-bg: #27272B;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
@@ -557,6 +568,34 @@ html[data-theme="dark"] {
   --color-util-colors-gray-gray-600: #98A2B2;
   --color-util-colors-gray-gray-700: #D0D5DC;
 
+  --color-util-colors-green-light-green-light-50: #15290A;
+  --color-util-colors-green-light-green-light-100: #2B5314;
+  --color-util-colors-green-light-green-light-200: #326212;
+  --color-util-colors-green-light-green-light-300: #3B7C0F;
+  --color-util-colors-green-light-green-light-500: #66C61C;
+  --color-util-colors-green-light-green-light-400: #4CA30D;
+  --color-util-colors-green-light-green-light-600: #85E13A;
+  --color-util-colors-green-light-green-light-700: #A6EF67;
+
+  --color-util-colors-rose-rose-50: #510B24;
+  --color-util-colors-rose-rose-100: #89123E;
+  --color-util-colors-rose-rose-200: #A11043;
+  --color-util-colors-rose-rose-300: #C01048;
+  --color-util-colors-rose-rose-400: #E31B54;
+  --color-util-colors-rose-rose-500: #F63D68;
+  --color-util-colors-rose-rose-600: #FD6F8E;
+  --color-util-colors-rose-rose-700: #FEA3B4;
+
+  --color-util-colors-midnight-midnight-50: #171C22;
+  --color-util-colors-midnight-midnight-100: #202431;
+  --color-util-colors-midnight-midnight-200: #2F3648;
+  --color-util-colors-midnight-midnight-300: #3E465E;
+  --color-util-colors-midnight-midnight-400: #5D698D;
+  --color-util-colors-midnight-midnight-500: #828DAD;
+  --color-util-colors-midnight-midnight-600: #A7AEC5;
+  --color-util-colors-midnight-midnight-700: #C6CBD9;
+
   --color-third-party-LangChain: #FFFFFF;
   --color-third-party-Langfuse: #FFFFFF;
+  --color-third-party-Github: #FFFFFF;
 }

web/themes/light.css

@@ -10,7 +10,7 @@ html[data-theme="light"] {
   --color-components-input-bg-destructive: #FFFFFF;
   --color-components-input-bg-disabled: #C8CEDA24;
   --color-components-input-text-disabled: #D0D5DC;
-  --color-components-input-text-filled-disabled: #1018284D;
+  --color-components-input-text-filled-disabled: #676F83;
   --color-components-input-border-hover: #D0D5DC;
   --color-components-input-border-active-prompt-1: #0BA5EC;
   --color-components-input-border-active-prompt-2: #155AEF;
@@ -136,6 +136,8 @@ html[data-theme="light"] {
   --color-components-panel-on-panel-item-bg-hover: #F9FAFB;
   --color-components-panel-on-panel-item-bg-alt: #F9FAFB;
 
+  --color-components-panel-bg-transparent: #FFFFFF00;
+
   --color-components-main-nav-nav-button-text: #495464;
   --color-components-main-nav-nav-button-text-active: #155AEF;
   --color-components-main-nav-nav-button-bg: #FFFFFF00;
@@ -227,10 +229,20 @@ html[data-theme="light"] {
   --color-components-progress-gray-bg: #C8CEDA05;
 
   --color-components-chat-input-audio-bg: #EFF4FF;
-  --color-components-chat-input-audio-wave: #155AEF24;
+  --color-components-chat-input-audio-wave-default: #155AEF33;
   --color-components-chat-input-bg-mask-1: #FFFFFF03;
   --color-components-chat-input-bg-mask-2: #F2F4F7;
   --color-components-chat-input-border: #FFFFFF;
+  --color-components-chat-input-audio-wave-active: #296DFF;
+  --color-components-chat-input-audio-bg-alt: #FCFCFD;
+
+  --color-components-Avatar-shape-fill-stop-0: #FFFFFF;
+  --color-components-Avatar-shape-fill-stop-100: #FFFFFFE5;
+
+  --color-components-Avatar-bg-mask-stop-0: #FFFFFF1F;
+  --color-components-Avatar-bg-mask-stop-100: #FFFFFF14;
+
+  --color-components-Avatar-default-avatar-bg: #D0D5DC;
 
   --color-text-primary: #101828;
   --color-text-secondary: #354052;
@@ -252,17 +264,20 @@ html[data-theme="light"] {
   --color-text-secondary-on-surface: #FFFFFFE5;
   --color-text-logo-text: #18222F;
   --color-text-empty-state-icon: #D0D5DC;
+  --color-text-inverted: #000000;
 
   --color-background-body: #F2F4F7;
   --color-background-default-subtle: #FCFCFD;
   --color-background-neurtral-subtle: #F9FAFB;
-  --color-background-sidenav-bg: #FCFCFD;
+  --color-background-sidenav-bg: #FFFFFFCC;
   --color-background-default: #FFFFFF;
   --color-background-soft: #F9FAFB;
   --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB;
   --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7;
   --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF;
   --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF99;
+  --color-background-gradient-bg-fill-debug-bg-1: #FFFFFF00;
+  --color-background-gradient-bg-fill-debug-bg-2: #C8CEDA24;
 
   --color-background-gradient-mask-gray: #C8CEDA33;
   --color-background-gradient-mask-transparent: #FFFFFF00;
@@ -298,12 +313,8 @@ html[data-theme="light"] {
   --color-shadow-shadow-2: #09090B0A;
   --color-shadow-shadow-10: #09090B0D;
 
-  --color-workflow-block-border: #18181B14;
-  --color-workflow-block-panel-bg: #FFFFFF;
   --color-workflow-block-border: #FFFFFF;
   --color-workflow-block-parma-bg: #F2F4F7;
-  --color-workflow-block-nav-bg: #FFFFFF;
-  --color-workflow-block-nav-border-right: #FFFFFF;
   --color-workflow-block-bg: #FCFCFD;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
@@ -557,6 +568,34 @@ html[data-theme="light"] {
   --color-util-colors-gray-gray-600: #495464;
   --color-util-colors-gray-gray-700: #354052;
 
+  --color-util-colors-green-light-green-light-50: #F3FEE7;
+  --color-util-colors-green-light-green-light-100: #E3FBCC;
+  --color-util-colors-green-light-green-light-200: #D0F8AB;
+  --color-util-colors-green-light-green-light-300: #A6EF67;
+  --color-util-colors-green-light-green-light-500: #66C61C;
+  --color-util-colors-green-light-green-light-400: #85E13A;
+  --color-util-colors-green-light-green-light-600: #4CA30D;
+  --color-util-colors-green-light-green-light-700: #3B7C0F;
+
+  --color-util-colors-rose-rose-50: #FFF1F3;
+  --color-util-colors-rose-rose-100: #FFE4E8;
+  --color-util-colors-rose-rose-200: #FECDD6;
+  --color-util-colors-rose-rose-300: #FEA3B4;
+  --color-util-colors-rose-rose-400: #FD6F8E;
+  --color-util-colors-rose-rose-500: #F63D68;
+  --color-util-colors-rose-rose-600: #E31B54;
+  --color-util-colors-rose-rose-700: #C01048;
+
+  --color-util-colors-midnight-midnight-50: #FBFBFC;
+  --color-util-colors-midnight-midnight-100: #F0F2F5;
+  --color-util-colors-midnight-midnight-200: #DFE1EA;
+  --color-util-colors-midnight-midnight-300: #C6CBD9;
+  --color-util-colors-midnight-midnight-400: #A7AEC5;
+  --color-util-colors-midnight-midnight-500: #828DAD;
+  --color-util-colors-midnight-midnight-600: #5D698D;
+  --color-util-colors-midnight-midnight-700: #3E465E;
+
   --color-third-party-LangChain: #1C3C3C;
   --color-third-party-Langfuse: #000000;
+  --color-third-party-Github: #1B1F24;
 }

web/themes/tailwind-theme-var-define.ts

@@ -136,6 +136,8 @@ const vars = {
   'components-panel-on-panel-item-bg-hover': 'var(--color-components-panel-on-panel-item-bg-hover)',
   'components-panel-on-panel-item-bg-alt': 'var(--color-components-panel-on-panel-item-bg-alt)',
 
+  'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)',
+
   'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)',
   'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)',
   'components-main-nav-nav-button-bg': 'var(--color-components-main-nav-nav-button-bg)',
@@ -227,10 +229,20 @@ const vars = {
   'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)',
 
   'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)',
-  'components-chat-input-audio-wave': 'var(--color-components-chat-input-audio-wave)',
+  'components-chat-input-audio-wave-default': 'var(--color-components-chat-input-audio-wave-default)',
   'components-chat-input-bg-mask-1': 'var(--color-components-chat-input-bg-mask-1)',
   'components-chat-input-bg-mask-2': 'var(--color-components-chat-input-bg-mask-2)',
   'components-chat-input-border': 'var(--color-components-chat-input-border)',
+  'components-chat-input-audio-wave-active': 'var(--color-components-chat-input-audio-wave-active)',
+  'components-chat-input-audio-bg-alt': 'var(--color-components-chat-input-audio-bg-alt)',
+
+  'components-Avatar-shape-fill-stop-0': 'var(--color-components-Avatar-shape-fill-stop-0)',
+  'components-Avatar-shape-fill-stop-100': 'var(--color-components-Avatar-shape-fill-stop-100)',
+
+  'components-Avatar-bg-mask-stop-0': 'var(--color-components-Avatar-bg-mask-stop-0)',
+  'components-Avatar-bg-mask-stop-100': 'var(--color-components-Avatar-bg-mask-stop-100)',
+
+  'components-Avatar-default-avatar-bg': 'var(--color-components-Avatar-default-avatar-bg)',
 
   'text-primary': 'var(--color-text-primary)',
   'text-secondary': 'var(--color-text-secondary)',
@@ -252,6 +264,7 @@ const vars = {
   'text-secondary-on-surface': 'var(--color-text-secondary-on-surface)',
   'text-logo-text': 'var(--color-text-logo-text)',
   'text-empty-state-icon': 'var(--color-text-empty-state-icon)',
+  'text-inverted': 'var(--color-text-inverted)',
 
   'background-body': 'var(--color-background-body)',
   'background-default-subtle': 'var(--color-background-default-subtle)',
@@ -263,6 +276,8 @@ const vars = {
   'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)',
   'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)',
   'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)',
+  'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)',
+  'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)',
 
   'background-gradient-mask-gray': 'var(--color-background-gradient-mask-gray)',
   'background-gradient-mask-transparent': 'var(--color-background-gradient-mask-transparent)',
@@ -299,10 +314,7 @@ const vars = {
   'shadow-shadow-10': 'var(--color-shadow-shadow-10)',
 
   'workflow-block-border': 'var(--color-workflow-block-border)',
-  'workflow-block-panel-bg': 'var(--color-workflow-block-panel-bg)',
   'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)',
-  'workflow-block-nav-bg': 'var(--color-workflow-block-nav-bg)',
-  'workflow-block-nav-border-right': 'var(--color-workflow-block-nav-border-right)',
   'workflow-block-bg': 'var(--color-workflow-block-bg)',
 
   'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)',
@@ -556,9 +568,36 @@ const vars = {
   'util-colors-gray-gray-600': 'var(--color-util-colors-gray-gray-600)',
   'util-colors-gray-gray-700': 'var(--color-util-colors-gray-gray-700)',
 
+  'util-colors-green-light-green-light-50': 'var(--color-util-colors-green-light-green-light-50)',
+  'util-colors-green-light-green-light-100': 'var(--color-util-colors-green-light-green-light-100)',
+  'util-colors-green-light-green-light-200': 'var(--color-util-colors-green-light-green-light-200)',
+  'util-colors-green-light-green-light-300': 'var(--color-util-colors-green-light-green-light-300)',
+  'util-colors-green-light-green-light-500': 'var(--color-util-colors-green-light-green-light-500)',
+  'util-colors-green-light-green-light-400': 'var(--color-util-colors-green-light-green-light-400)',
+  'util-colors-green-light-green-light-600': 'var(--color-util-colors-green-light-green-light-600)',
+  'util-colors-green-light-green-light-700': 'var(--color-util-colors-green-light-green-light-700)',
+
+  'util-colors-rose-rose-50': 'var(--color-util-colors-rose-rose-50)',
+  'util-colors-rose-rose-100': 'var(--color-util-colors-rose-rose-100)',
+  'util-colors-rose-rose-200': 'var(--color-util-colors-rose-rose-200)',
+  'util-colors-rose-rose-300': 'var(--color-util-colors-rose-rose-300)',
+  'util-colors-rose-rose-400': 'var(--color-util-colors-rose-rose-400)',
+  'util-colors-rose-rose-500': 'var(--color-util-colors-rose-rose-500)',
+  'util-colors-rose-rose-600': 'var(--color-util-colors-rose-rose-600)',
+  'util-colors-rose-rose-700': 'var(--color-util-colors-rose-rose-700)',
+
+  'util-colors-midnight-midnight-50': 'var(--color-util-colors-midnight-midnight-50)',
+  'util-colors-midnight-midnight-100': 'var(--color-util-colors-midnight-midnight-100)',
+  'util-colors-midnight-midnight-200': 'var(--color-util-colors-midnight-midnight-200)',
+  'util-colors-midnight-midnight-300': 'var(--color-util-colors-midnight-midnight-300)',
+  'util-colors-midnight-midnight-400': 'var(--color-util-colors-midnight-midnight-400)',
+  'util-colors-midnight-midnight-500': 'var(--color-util-colors-midnight-midnight-500)',
+  'util-colors-midnight-midnight-600': 'var(--color-util-colors-midnight-midnight-600)',
+  'util-colors-midnight-midnight-700': 'var(--color-util-colors-midnight-midnight-700)',
+
   'third-party-LangChain': 'var(--color-third-party-LangChain)',
   'third-party-Langfuse': 'var(--color-third-party-Langfuse)',
-
+  'third-party-Github': 'var(--color-third-party-Github)',
 }
 
 export default vars