Explorar o código

Fix regenerate themes (#11101)

NFish hai 5 meses
pai
achega
e9c098d024
Modificáronse 3 ficheiros con 406 adicións e 34 borrados
  1. 141 13
      web/themes/dark.css
  2. 135 13
      web/themes/light.css
  3. 130 8
      web/themes/tailwind-theme-var-define.ts

+ 141 - 13
web/themes/dark.css

@@ -85,6 +85,10 @@ html[data-theme="dark"] {
   --color-components-button-secondary-accent-border-hover: #FFFFFF1F;
   --color-components-button-secondary-accent-border-disabled: #FFFFFF0D;
 
+  --color-components-button-indigo-bg: #444CE7;
+  --color-components-button-indigo-bg-hover: #6172F3;
+  --color-components-button-indigo-bg-disabled: #FFFFFF08;
+
   --color-components-checkbox-icon: #FFFFFFF2;
   --color-components-checkbox-icon-disabled: #FFFFFF33;
   --color-components-checkbox-bg: #296DFF;
@@ -95,10 +99,11 @@ html[data-theme="dark"] {
   --color-components-checkbox-border-disabled: #FFFFFF03;
   --color-components-checkbox-bg-unchecked: #FFFFFF08;
   --color-components-checkbox-bg-unchecked-hover: #FFFFFF0D;
+  --color-components-checkbox-bg-disabled-checked: #155AEF33;
 
   --color-components-radio-border-checked: #296DFF;
   --color-components-radio-border-checked-hover: #5289FF;
-  --color-components-radio-border-checked-disabled: #FFFFFF14;
+  --color-components-radio-border-checked-disabled: #155AEF33;
   --color-components-radio-bg-disabled: #FFFFFF08;
   --color-components-radio-border: #FFFFFF66;
   --color-components-radio-border-hover: #FFFFFF99;
@@ -135,6 +140,9 @@ html[data-theme="dark"] {
   --color-components-panel-on-panel-item-bg: #27272B;
   --color-components-panel-on-panel-item-bg-hover: #3A3A40;
   --color-components-panel-on-panel-item-bg-alt: #3A3A40;
+  --color-components-panel-on-panel-item-bg-transparent: #2C2C30F2;
+  --color-components-panel-on-panel-item-bg-hover-transparent: #3A3A4000;
+  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #FFFBFA00;
 
   --color-components-panel-bg-transparent: #22222500;
 
@@ -208,10 +216,12 @@ html[data-theme="dark"] {
 
   --color-components-actionbar-bg: #222225;
   --color-components-actionbar-border: #C8CEDA14;
+  --color-components-actionbar-bg-accent: #27272B;
+  --color-components-actionbar-border-accent: #5289FF;
 
   --color-components-dropzone-bg-alt: #18181BCC;
   --color-components-dropzone-bg: #18181B66;
-  --color-components-dropzone-bg-accent: #155AEF24;
+  --color-components-dropzone-bg-accent: #155AEF33;
   --color-components-dropzone-border: #C8CEDA24;
   --color-components-dropzone-border-alt: #C8CEDA33;
   --color-components-dropzone-border-accent: #84ABFF;
@@ -228,6 +238,14 @@ html[data-theme="dark"] {
   --color-components-progress-gray-border: #98A2B2;
   --color-components-progress-gray-bg: #C8CEDA05;
 
+  --color-components-progress-warning-progress: #FDB022;
+  --color-components-progress-warning-border: #FDB022;
+  --color-components-progress-warning-bg: #F790090A;
+
+  --color-components-progress-error-progress: #F97066;
+  --color-components-progress-error-border: #F97066;
+  --color-components-progress-error-bg: #F044380A;
+
   --color-components-chat-input-audio-bg: #155AEF33;
   --color-components-chat-input-audio-wave-default: #C8CEDA24;
   --color-components-chat-input-bg-mask-1: #18181B0A;
@@ -236,13 +254,103 @@ html[data-theme="dark"] {
   --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-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-components-avatar-mask-darkmode-dimmed: #0000001F;
+
+  --color-components-label-gray: #C8CEDA24;
+
+  --color-components-premium-badge-blue-bg-stop-0: #5289FF;
+  --color-components-premium-badge-blue-bg-stop-100: #296DFF;
+  --color-components-premium-badge-blue-stroke-stop-0: #FFFFFF33;
+  --color-components-premium-badge-blue-stroke-stop-100: #296DFF;
+  --color-components-premium-badge-blue-text-stop-0: #EFF4FF;
+  --color-components-premium-badge-blue-text-stop-100: #B2CAFF;
+  --color-components-premium-badge-blue-glow: #004AEB;
+  --color-components-premium-badge-blue-bg-stop-0-hover: #84ABFF;
+  --color-components-premium-badge-blue-bg-stop-100-hover: #004AEB;
+  --color-components-premium-badge-blue-glow-hover: #D1E0FF;
+  --color-components-premium-badge-blue-stroke-stop-0-hover: #FFFFFF80;
+  --color-components-premium-badge-blue-stroke-stop-100-hover: #296DFF;
+
+  --color-components-premium-badge-highlight-stop-0: #FFFFFF1F;
+  --color-components-premium-badge-highlight-stop-100: #FFFFFF33;
+  --color-components-premium-badge-indigo-bg-stop-0: #6172F3;
+  --color-components-premium-badge-indigo-bg-stop-100: #3538CD;
+  --color-components-premium-badge-indigo-stroke-stop-0: #FFFFFF33;
+  --color-components-premium-badge-indigo-stroke-stop-100: #444CE7;
+  --color-components-premium-badge-indigo-text-stop-0: #EEF4FF;
+  --color-components-premium-badge-indigo-text-stop-100: #C7D7FE;
+  --color-components-premium-badge-indigo-glow: #3538CD;
+  --color-components-premium-badge-indigo-glow-hover: #E0EAFF;
+  --color-components-premium-badge-indigo-bg-stop-0-hover: #A4BCFD;
+  --color-components-premium-badge-indigo-bg-stop-100-hover: #3538CD;
+  --color-components-premium-badge-indigo-stroke-stop-0-hover: #FFFFFF80;
+  --color-components-premium-badge-indigo-stroke-stop-100-hover: #444CE7;
+
+  --color-components-premium-badge-grey-bg-stop-0: #676F83;
+  --color-components-premium-badge-grey-bg-stop-100: #495464;
+  --color-components-premium-badge-grey-stroke-stop-0: #FFFFFF1F;
+  --color-components-premium-badge-grey-stroke-stop-100: #495464;
+  --color-components-premium-badge-grey-text-stop-0: #F9FAFB;
+  --color-components-premium-badge-grey-text-stop-100: #E9EBF0;
+  --color-components-premium-badge-grey-glow: #354052;
+  --color-components-premium-badge-grey-glow-hover: #F2F4F7;
+  --color-components-premium-badge-grey-bg-stop-0-hover: #98A2B2;
+  --color-components-premium-badge-grey-bg-stop-100-hover: #354052;
+  --color-components-premium-badge-grey-stroke-stop-0-hover: #FFFFFF80;
+  --color-components-premium-badge-grey-stroke-stop-100-hover: #676F83;
+
+  --color-components-premium-badge-orange-bg-stop-0: #FF692E;
+  --color-components-premium-badge-orange-bg-stop-100: #E04F16;
+  --color-components-premium-badge-orange-stroke-stop-0: #FFFFFF33;
+  --color-components-premium-badge-orange-stroke-stop-100: #FF4405;
+  --color-components-premium-badge-orange-text-stop-0: #FEF6EE;
+  --color-components-premium-badge-orange-text-stop-100: #F9DBAF;
+  --color-components-premium-badge-orange-glow: #B93815;
+  --color-components-premium-badge-orange-glow-hover: #FDEAD7;
+  --color-components-premium-badge-orange-bg-stop-0-hover: #FF692E;
+  --color-components-premium-badge-orange-bg-stop-100-hover: #B93815;
+  --color-components-premium-badge-orange-stroke-stop-0-hover: #FFFFFF80;
+  --color-components-premium-badge-orange-stroke-stop-100-hover: #FF4405;
+
+  --color-components-progress-bar-bg: #C8CEDA14;
+  --color-components-progress-bar-progress: #C8CEDA24;
+  --color-components-progress-bar-border: #FFFFFF08;
+  --color-components-progress-bar-progress-solid: #FFFFFFF2;
+  --color-components-progress-bar-progress-highlight: #C8CEDA33;
+
+  --color-components-icon-bg-red-solid: #D92D20;
+  --color-components-icon-bg-rose-solid: #E31B54;
+  --color-components-icon-bg-pink-solid: #DD2590;
+  --color-components-icon-bg-orange-dark-solid: #FF4405;
+  --color-components-icon-bg-yellow-solid: #EAAA08;
+  --color-components-icon-bg-green-solid: #4CA30D;
+  --color-components-icon-bg-teal-solid: #0E9384;
+  --color-components-icon-bg-blue-light-solid: #0BA5EC;
+  --color-components-icon-bg-blue-solid: #155AEF;
+  --color-components-icon-bg-indigo-solid: #444CE7;
+  --color-components-icon-bg-violet-solid: #7839EE;
+  --color-components-icon-bg-midnight-solid: #5D698D;
+  --color-components-icon-bg-rose-soft: #F63D6833;
+  --color-components-icon-bg-pink-soft: #EE46BC33;
+  --color-components-icon-bg-orange-dark-soft: #FF440533;
+  --color-components-icon-bg-yellow-soft: #EAAA0833;
+  --color-components-icon-bg-green-soft: #66C61C33;
+  --color-components-icon-bg-teal-soft: #15B79E33;
+  --color-components-icon-bg-blue-light-soft: #0BA5EC33;
+  --color-components-icon-bg-blue-soft: #155AEF33;
+  --color-components-icon-bg-indigo-soft: #6172F333;
+  --color-components-icon-bg-violet-soft: #875BF733;
+  --color-components-icon-bg-midnight-soft: #828DAD33;
+  --color-components-icon-bg-red-soft: #F0443833;
+  --color-components-icon-bg-orange-solid: #F79009;
+  --color-components-icon-bg-orange-soft: #F7900933;
 
   --color-text-primary: #FBFBFC;
   --color-text-secondary: #D9D9DE;
@@ -302,6 +410,7 @@ html[data-theme="dark"] {
   --color-background-overlay-alt: #18181B66;
   --color-background-surface-white: #FFFFFFE5;
   --color-background-overlay-destructive: #F044384D;
+  --color-background-overlay-backdrop: #18181BF2;
 
   --color-shadow-shadow-1: #0000000D;
   --color-shadow-shadow-3: #0000001A;
@@ -317,14 +426,20 @@ html[data-theme="dark"] {
   --color-workflow-block-border: #FFFFFF14;
   --color-workflow-block-parma-bg: #FFFFFF0D;
   --color-workflow-block-bg: #27272B;
+  --color-workflow-block-bg-transparent: #27272BF5;
   --color-workflow-block-border-highlight: #C8CEDA33;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
   --color-workflow-canvas-workflow-bg: #1D1D20;
 
-  --color-workflow-link-line-active: #296DFF;
+  --color-workflow-link-line-active: #5289FF;
   --color-workflow-link-line-normal: #676F83;
-  --color-workflow-link-line-handle: #296DFF;
+  --color-workflow-link-line-handle: #5289FF;
+  --color-workflow-link-line-normal-transparent: #676F8333;
+  --color-workflow-link-line-failure-active: #FDB022;
+  --color-workflow-link-line-failure-handle: #FDB022;
+  --color-workflow-link-line-failure-button-bg: #F79009;
+  --color-workflow-link-line-failure-button-hover: #DC6803;
 
   --color-workflow-link-line-success-active: #47CD89;
   --color-workflow-link-line-success-handle: #47CD89;
@@ -341,8 +456,8 @@ html[data-theme="dark"] {
   --color-workflow-display-success-vignette-color: #17B26A40;
   --color-workflow-display-success-bg-line-pattern: #18181BCC;
 
-  --color-workflow-display-glass-1: #FFFFFF03;
-  --color-workflow-display-glass-2: #FFFFFF08;
+  --color-workflow-display-glass-1: #FFFFFF08;
+  --color-workflow-display-glass-2: #FFFFFF0D;
   --color-workflow-display-vignette-dark: #00000066;
   --color-workflow-display-highlight: #FFFFFF1F;
   --color-workflow-display-outline: #18181BF2;
@@ -431,6 +546,7 @@ html[data-theme="dark"] {
   --color-util-colors-orange-orange-500: #EF6820;
   --color-util-colors-orange-orange-600: #F38744;
   --color-util-colors-orange-orange-700: #F7B27A;
+  --color-util-colors-orange-orange-100-transparent: #77291700;
 
   --color-util-colors-pink-pink-50: #4E0D30;
   --color-util-colors-pink-pink-100: #851651;
@@ -606,4 +722,16 @@ html[data-theme="dark"] {
   --color-third-party-LangChain: #FFFFFF;
   --color-third-party-Langfuse: #FFFFFF;
   --color-third-party-Github: #FFFFFF;
+  --color-third-party-Github-tertiary: #C8CEDA99;
+  --color-third-party-Github-secondary: #D9D9DE;
+  --color-third-party-model-bg-openai: #121212;
+  --color-third-party-model-bg-anthropic: #1D1917;
+  --color-third-party-model-bg-default: #0B0B0E;
+
+  --color-third-party-aws: #141F2E;
+  --color-third-party-aws-alt: #192639;
+
+  --color-saas-background: #0B0B0E;
+  --color-saas-pricing-grid-bg: #C8CEDA33;
+
 }

+ 135 - 13
web/themes/light.css

@@ -85,8 +85,12 @@ html[data-theme="light"] {
   --color-components-button-secondary-accent-border-hover: #10182824;
   --color-components-button-secondary-accent-border-disabled: #1018280A;
 
+  --color-components-button-indigo-bg: #444CE7;
+  --color-components-button-indigo-bg-hover: #3538CD;
+  --color-components-button-indigo-bg-disabled: #6172F324;
+
   --color-components-checkbox-icon: #FFFFFF;
-  --color-components-checkbox-icon-disabled: #D0D5DC;
+  --color-components-checkbox-icon-disabled: #FFFFFF80;
   --color-components-checkbox-bg: #155AEF;
   --color-components-checkbox-bg-hover: #004AEB;
   --color-components-checkbox-bg-disabled: #F2F4F7;
@@ -95,10 +99,11 @@ html[data-theme="light"] {
   --color-components-checkbox-border-disabled: #18181B0A;
   --color-components-checkbox-bg-unchecked: #FFFFFF;
   --color-components-checkbox-bg-unchecked-hover: #FFFFFF;
+  --color-components-checkbox-bg-disabled-checked: #B2CAFF;
 
   --color-components-radio-border-checked: #155AEF;
   --color-components-radio-border-checked-hover: #004AEB;
-  --color-components-radio-border-checked-disabled: #F2F4F7;
+  --color-components-radio-border-checked-disabled: #B2CAFF;
   --color-components-radio-bg-disabled: #FFFFFF00;
   --color-components-radio-border: #D0D5DC;
   --color-components-radio-border-hover: #98A2B2;
@@ -135,6 +140,9 @@ html[data-theme="light"] {
   --color-components-panel-on-panel-item-bg: #FFFFFF;
   --color-components-panel-on-panel-item-bg-hover: #F9FAFB;
   --color-components-panel-on-panel-item-bg-alt: #F9FAFB;
+  --color-components-panel-on-panel-item-bg-transparent: #FFFFFFF2;
+  --color-components-panel-on-panel-item-bg-hover-transparent: #F9FAFB00;
+  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #FEF3F200;
 
   --color-components-panel-bg-transparent: #FFFFFF00;
 
@@ -161,10 +169,10 @@ html[data-theme="light"] {
   --color-components-segmented-control-item-active-accent-bg: #FFFFFF;
   --color-components-segmented-control-item-active-accent-border: #FFFFFF;
 
-  --color-components-option-card-option-bg: #F9FAFB;
+  --color-components-option-card-option-bg: #FCFCFD;
   --color-components-option-card-option-selected-bg: #FFFFFF;
   --color-components-option-card-option-selected-border: #296DFF;
-  --color-components-option-card-option-border: #F2F4F7;
+  --color-components-option-card-option-border: #E9EBF0;
   --color-components-option-card-option-bg-hover: #FFFFFF;
   --color-components-option-card-option-border-hover: #D0D5DC;
 
@@ -208,10 +216,12 @@ html[data-theme="light"] {
 
   --color-components-actionbar-bg: #FFFFFFF2;
   --color-components-actionbar-border: #1018280A;
+  --color-components-actionbar-bg-accent: #F5F7FF;
+  --color-components-actionbar-border-accent: #B2CAFF;
 
   --color-components-dropzone-bg-alt: #F2F4F7;
   --color-components-dropzone-bg: #F9FAFB;
-  --color-components-dropzone-bg-accent: #EFF4FF;
+  --color-components-dropzone-bg-accent: #155AEF24;
   --color-components-dropzone-border: #10182814;
   --color-components-dropzone-border-alt: #10182833;
   --color-components-dropzone-border-accent: #84ABFF;
@@ -228,6 +238,14 @@ html[data-theme="light"] {
   --color-components-progress-gray-border: #98A2B2;
   --color-components-progress-gray-bg: #C8CEDA05;
 
+  --color-components-progress-warning-progress: #F79009;
+  --color-components-progress-warning-border: #F79009;
+  --color-components-progress-warning-bg: #F790090A;
+
+  --color-components-progress-error-progress: #F04438;
+  --color-components-progress-error-border: #F04438;
+  --color-components-progress-error-bg: #F044380A;
+
   --color-components-chat-input-audio-bg: #EFF4FF;
   --color-components-chat-input-audio-wave-default: #155AEF33;
   --color-components-chat-input-bg-mask-1: #FFFFFF03;
@@ -236,13 +254,103 @@ html[data-theme="light"] {
   --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-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-components-avatar-mask-darkmode-dimmed: #FFFFFF00;
+
+  --color-components-label-gray: #F2F4F7;
+
+  --color-components-premium-badge-blue-bg-stop-0: #5289FF;
+  --color-components-premium-badge-blue-bg-stop-100: #155AEF;
+  --color-components-premium-badge-blue-stroke-stop-0: #FFFFFFF2;
+  --color-components-premium-badge-blue-stroke-stop-100: #155AEF;
+  --color-components-premium-badge-blue-text-stop-0: #F5F7FF;
+  --color-components-premium-badge-blue-text-stop-100: #D1E0FF;
+  --color-components-premium-badge-blue-glow: #00329E;
+  --color-components-premium-badge-blue-bg-stop-0-hover: #296DFF;
+  --color-components-premium-badge-blue-bg-stop-100-hover: #004AEB;
+  --color-components-premium-badge-blue-glow-hover: #84ABFF;
+  --color-components-premium-badge-blue-stroke-stop-0-hover: #FFFFFFF2;
+  --color-components-premium-badge-blue-stroke-stop-100-hover: #00329E;
+
+  --color-components-premium-badge-highlight-stop-0: #FFFFFF1F;
+  --color-components-premium-badge-highlight-stop-100: #FFFFFF4D;
+  --color-components-premium-badge-indigo-bg-stop-0: #8098F9;
+  --color-components-premium-badge-indigo-bg-stop-100: #444CE7;
+  --color-components-premium-badge-indigo-stroke-stop-0: #FFFFFFF2;
+  --color-components-premium-badge-indigo-stroke-stop-100: #6172F3;
+  --color-components-premium-badge-indigo-text-stop-0: #F5F8FF;
+  --color-components-premium-badge-indigo-text-stop-100: #E0EAFF;
+  --color-components-premium-badge-indigo-glow: #2D3282;
+  --color-components-premium-badge-indigo-glow-hover: #A4BCFD;
+  --color-components-premium-badge-indigo-bg-stop-0-hover: #6172F3;
+  --color-components-premium-badge-indigo-bg-stop-100-hover: #2D31A6;
+  --color-components-premium-badge-indigo-stroke-stop-0-hover: #FFFFFFF2;
+  --color-components-premium-badge-indigo-stroke-stop-100-hover: #2D31A6;
+
+  --color-components-premium-badge-grey-bg-stop-0: #98A2B2;
+  --color-components-premium-badge-grey-bg-stop-100: #676F83;
+  --color-components-premium-badge-grey-stroke-stop-0: #FFFFFFF2;
+  --color-components-premium-badge-grey-stroke-stop-100: #676F83;
+  --color-components-premium-badge-grey-text-stop-0: #FCFCFD;
+  --color-components-premium-badge-grey-text-stop-100: #F2F4F7;
+  --color-components-premium-badge-grey-glow: #101828;
+  --color-components-premium-badge-grey-glow-hover: #D0D5DC;
+  --color-components-premium-badge-grey-bg-stop-0-hover: #676F83;
+  --color-components-premium-badge-grey-bg-stop-100-hover: #354052;
+  --color-components-premium-badge-grey-stroke-stop-0-hover: #FFFFFFF2;
+  --color-components-premium-badge-grey-stroke-stop-100-hover: #354052;
+
+  --color-components-premium-badge-orange-bg-stop-0: #FF692E;
+  --color-components-premium-badge-orange-bg-stop-100: #E04F16;
+  --color-components-premium-badge-orange-stroke-stop-0: #FFFFFFF2;
+  --color-components-premium-badge-orange-stroke-stop-100: #E62E05;
+  --color-components-premium-badge-orange-text-stop-0: #FEFAF5;
+  --color-components-premium-badge-orange-text-stop-100: #FDEAD7;
+  --color-components-premium-badge-orange-glow: #772917;
+  --color-components-premium-badge-orange-glow-hover: #F7B27A;
+  --color-components-premium-badge-orange-bg-stop-0-hover: #FF4405;
+  --color-components-premium-badge-orange-bg-stop-100-hover: #B93815;
+  --color-components-premium-badge-orange-stroke-stop-0-hover: #FFFFFFF2;
+  --color-components-premium-badge-orange-stroke-stop-100-hover: #BC1B06;
+
+  --color-components-progress-bar-bg: #155AEF0A;
+  --color-components-progress-bar-progress: #155AEF24;
+  --color-components-progress-bar-border: #1018280A;
+  --color-components-progress-bar-progress-solid: #296DFF;
+  --color-components-progress-bar-progress-highlight: #155AEF33;
+
+  --color-components-icon-bg-red-solid: #D92D20;
+  --color-components-icon-bg-rose-solid: #E31B54;
+  --color-components-icon-bg-pink-solid: #DD2590;
+  --color-components-icon-bg-orange-dark-solid: #FF4405;
+  --color-components-icon-bg-yellow-solid: #EAAA08;
+  --color-components-icon-bg-green-solid: #4CA30D;
+  --color-components-icon-bg-teal-solid: #0E9384;
+  --color-components-icon-bg-blue-light-solid: #0BA5EC;
+  --color-components-icon-bg-blue-solid: #155AEF;
+  --color-components-icon-bg-indigo-solid: #444CE7;
+  --color-components-icon-bg-violet-solid: #7839EE;
+  --color-components-icon-bg-midnight-solid: #828DAD;
+  --color-components-icon-bg-rose-soft: #FFF1F3;
+  --color-components-icon-bg-pink-soft: #FDF2FA;
+  --color-components-icon-bg-orange-dark-soft: #FFF4ED;
+  --color-components-icon-bg-yellow-soft: #FEFBE8;
+  --color-components-icon-bg-green-soft: #F3FEE7;
+  --color-components-icon-bg-teal-soft: #F0FDF9;
+  --color-components-icon-bg-blue-light-soft: #F0F9FF;
+  --color-components-icon-bg-blue-soft: #EFF4FF;
+  --color-components-icon-bg-indigo-soft: #EEF4FF;
+  --color-components-icon-bg-violet-soft: #F5F3FF;
+  --color-components-icon-bg-midnight-soft: #F0F2F5;
+  --color-components-icon-bg-red-soft: #FEF3F2;
+  --color-components-icon-bg-orange-solid: #F79009;
+  --color-components-icon-bg-orange-soft: #FFFAEB;
 
   --color-text-primary: #101828;
   --color-text-secondary: #354052;
@@ -302,6 +410,7 @@ html[data-theme="light"] {
   --color-background-overlay-alt: #10182866;
   --color-background-surface-white: #FFFFFFF2;
   --color-background-overlay-destructive: #F044384D;
+  --color-background-overlay-backdrop: #F2F4F7F2;
 
   --color-shadow-shadow-1: #09090B08;
   --color-shadow-shadow-3: #09090B0D;
@@ -317,6 +426,7 @@ html[data-theme="light"] {
   --color-workflow-block-border: #FFFFFF;
   --color-workflow-block-parma-bg: #F2F4F7;
   --color-workflow-block-bg: #FCFCFD;
+  --color-workflow-block-bg-transparent: #FCFCFDE5;
   --color-workflow-block-border-highlight: #155AEF24;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
@@ -436,6 +546,7 @@ html[data-theme="light"] {
   --color-util-colors-orange-orange-500: #EF6820;
   --color-util-colors-orange-orange-600: #E04F16;
   --color-util-colors-orange-orange-700: #B93815;
+  --color-util-colors-orange-orange-100-transparent: #FDEAD700;
 
   --color-util-colors-pink-pink-50: #FDF2FA;
   --color-util-colors-pink-pink-100: #FCE7F6;
@@ -610,6 +721,17 @@ html[data-theme="light"] {
 
   --color-third-party-LangChain: #1C3C3C;
   --color-third-party-Langfuse: #000000;
-
   --color-third-party-Github: #1B1F24;
+  --color-third-party-Github-tertiary: #1B1F24;
+  --color-third-party-Github-secondary: #1B1F24;
+  --color-third-party-model-bg-openai: #E3E5E8;
+  --color-third-party-model-bg-anthropic: #EEEDE7;
+  --color-third-party-model-bg-default: #F9FAFB;
+
+  --color-third-party-aws: #141F2E;
+  --color-third-party-aws-alt: #0F1824;
+
+  --color-saas-background: #FCFCFD;
+  --color-saas-pricing-grid-bg: #C8CEDA80;
+
 }

+ 130 - 8
web/themes/tailwind-theme-var-define.ts

@@ -85,6 +85,10 @@ const vars = {
   'components-button-secondary-accent-border-hover': 'var(--color-components-button-secondary-accent-border-hover)',
   'components-button-secondary-accent-border-disabled': 'var(--color-components-button-secondary-accent-border-disabled)',
 
+  'components-button-indigo-bg': 'var(--color-components-button-indigo-bg)',
+  'components-button-indigo-bg-hover': 'var(--color-components-button-indigo-bg-hover)',
+  'components-button-indigo-bg-disabled': 'var(--color-components-button-indigo-bg-disabled)',
+
   'components-checkbox-icon': 'var(--color-components-checkbox-icon)',
   'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)',
   'components-checkbox-bg': 'var(--color-components-checkbox-bg)',
@@ -95,6 +99,7 @@ const vars = {
   'components-checkbox-border-disabled': 'var(--color-components-checkbox-border-disabled)',
   'components-checkbox-bg-unchecked': 'var(--color-components-checkbox-bg-unchecked)',
   'components-checkbox-bg-unchecked-hover': 'var(--color-components-checkbox-bg-unchecked-hover)',
+  'components-checkbox-bg-disabled-checked': 'var(--color-components-checkbox-bg-disabled-checked)',
 
   'components-radio-border-checked': 'var(--color-components-radio-border-checked)',
   'components-radio-border-checked-hover': 'var(--color-components-radio-border-checked-hover)',
@@ -135,6 +140,9 @@ const vars = {
   'components-panel-on-panel-item-bg': 'var(--color-components-panel-on-panel-item-bg)',
   '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-on-panel-item-bg-transparent': 'var(--color-components-panel-on-panel-item-bg-transparent)',
+  'components-panel-on-panel-item-bg-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-hover-transparent)',
+  'components-panel-on-panel-item-bg-destructive-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent)',
 
   'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)',
 
@@ -208,6 +216,8 @@ const vars = {
 
   'components-actionbar-bg': 'var(--color-components-actionbar-bg)',
   'components-actionbar-border': 'var(--color-components-actionbar-border)',
+  'components-actionbar-bg-accent': 'var(--color-components-actionbar-bg-accent)',
+  'components-actionbar-border-accent': 'var(--color-components-actionbar-border-accent)',
 
   'components-dropzone-bg-alt': 'var(--color-components-dropzone-bg-alt)',
   'components-dropzone-bg': 'var(--color-components-dropzone-bg)',
@@ -228,6 +238,14 @@ const vars = {
   'components-progress-gray-border': 'var(--color-components-progress-gray-border)',
   'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)',
 
+  'components-progress-warning-progress': 'var(--color-components-progress-warning-progress)',
+  'components-progress-warning-border': 'var(--color-components-progress-warning-border)',
+  'components-progress-warning-bg': 'var(--color-components-progress-warning-bg)',
+
+  'components-progress-error-progress': 'var(--color-components-progress-error-progress)',
+  'components-progress-error-border': 'var(--color-components-progress-error-border)',
+  'components-progress-error-bg': 'var(--color-components-progress-error-bg)',
+
   'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)',
   '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)',
@@ -236,13 +254,103 @@ const vars = {
   '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)',
+  '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)',
+  'components-avatar-mask-darkmode-dimmed': 'var(--color-components-avatar-mask-darkmode-dimmed)',
+
+  'components-label-gray': 'var(--color-components-label-gray)',
+
+  'components-premium-badge-blue-bg-stop-0': 'var(--color-components-premium-badge-blue-bg-stop-0)',
+  'components-premium-badge-blue-bg-stop-100': 'var(--color-components-premium-badge-blue-bg-stop-100)',
+  'components-premium-badge-blue-stroke-stop-0': 'var(--color-components-premium-badge-blue-stroke-stop-0)',
+  'components-premium-badge-blue-stroke-stop-100': 'var(--color-components-premium-badge-blue-stroke-stop-100)',
+  'components-premium-badge-blue-text-stop-0': 'var(--color-components-premium-badge-blue-text-stop-0)',
+  'components-premium-badge-blue-text-stop-100': 'var(--color-components-premium-badge-blue-text-stop-100)',
+  'components-premium-badge-blue-glow': 'var(--color-components-premium-badge-blue-glow)',
+  'components-premium-badge-blue-bg-stop-0-hover': 'var(--color-components-premium-badge-blue-bg-stop-0-hover)',
+  'components-premium-badge-blue-bg-stop-100-hover': 'var(--color-components-premium-badge-blue-bg-stop-100-hover)',
+  'components-premium-badge-blue-glow-hover': 'var(--color-components-premium-badge-blue-glow-hover)',
+  'components-premium-badge-blue-stroke-stop-0-hover': 'var(--color-components-premium-badge-blue-stroke-stop-0-hover)',
+  'components-premium-badge-blue-stroke-stop-100-hover': 'var(--color-components-premium-badge-blue-stroke-stop-100-hover)',
+
+  'components-premium-badge-highlight-stop-0': 'var(--color-components-premium-badge-highlight-stop-0)',
+  'components-premium-badge-highlight-stop-100': 'var(--color-components-premium-badge-highlight-stop-100)',
+  'components-premium-badge-indigo-bg-stop-0': 'var(--color-components-premium-badge-indigo-bg-stop-0)',
+  'components-premium-badge-indigo-bg-stop-100': 'var(--color-components-premium-badge-indigo-bg-stop-100)',
+  'components-premium-badge-indigo-stroke-stop-0': 'var(--color-components-premium-badge-indigo-stroke-stop-0)',
+  'components-premium-badge-indigo-stroke-stop-100': 'var(--color-components-premium-badge-indigo-stroke-stop-100)',
+  'components-premium-badge-indigo-text-stop-0': 'var(--color-components-premium-badge-indigo-text-stop-0)',
+  'components-premium-badge-indigo-text-stop-100': 'var(--color-components-premium-badge-indigo-text-stop-100)',
+  'components-premium-badge-indigo-glow': 'var(--color-components-premium-badge-indigo-glow)',
+  'components-premium-badge-indigo-glow-hover': 'var(--color-components-premium-badge-indigo-glow-hover)',
+  'components-premium-badge-indigo-bg-stop-0-hover': 'var(--color-components-premium-badge-indigo-bg-stop-0-hover)',
+  'components-premium-badge-indigo-bg-stop-100-hover': 'var(--color-components-premium-badge-indigo-bg-stop-100-hover)',
+  'components-premium-badge-indigo-stroke-stop-0-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-0-hover)',
+  'components-premium-badge-indigo-stroke-stop-100-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-100-hover)',
+
+  'components-premium-badge-grey-bg-stop-0': 'var(--color-components-premium-badge-grey-bg-stop-0)',
+  'components-premium-badge-grey-bg-stop-100': 'var(--color-components-premium-badge-grey-bg-stop-100)',
+  'components-premium-badge-grey-stroke-stop-0': 'var(--color-components-premium-badge-grey-stroke-stop-0)',
+  'components-premium-badge-grey-stroke-stop-100': 'var(--color-components-premium-badge-grey-stroke-stop-100)',
+  'components-premium-badge-grey-text-stop-0': 'var(--color-components-premium-badge-grey-text-stop-0)',
+  'components-premium-badge-grey-text-stop-100': 'var(--color-components-premium-badge-grey-text-stop-100)',
+  'components-premium-badge-grey-glow': 'var(--color-components-premium-badge-grey-glow)',
+  'components-premium-badge-grey-glow-hover': 'var(--color-components-premium-badge-grey-glow-hover)',
+  'components-premium-badge-grey-bg-stop-0-hover': 'var(--color-components-premium-badge-grey-bg-stop-0-hover)',
+  'components-premium-badge-grey-bg-stop-100-hover': 'var(--color-components-premium-badge-grey-bg-stop-100-hover)',
+  'components-premium-badge-grey-stroke-stop-0-hover': 'var(--color-components-premium-badge-grey-stroke-stop-0-hover)',
+  'components-premium-badge-grey-stroke-stop-100-hover': 'var(--color-components-premium-badge-grey-stroke-stop-100-hover)',
+
+  'components-premium-badge-orange-bg-stop-0': 'var(--color-components-premium-badge-orange-bg-stop-0)',
+  'components-premium-badge-orange-bg-stop-100': 'var(--color-components-premium-badge-orange-bg-stop-100)',
+  'components-premium-badge-orange-stroke-stop-0': 'var(--color-components-premium-badge-orange-stroke-stop-0)',
+  'components-premium-badge-orange-stroke-stop-100': 'var(--color-components-premium-badge-orange-stroke-stop-100)',
+  'components-premium-badge-orange-text-stop-0': 'var(--color-components-premium-badge-orange-text-stop-0)',
+  'components-premium-badge-orange-text-stop-100': 'var(--color-components-premium-badge-orange-text-stop-100)',
+  'components-premium-badge-orange-glow': 'var(--color-components-premium-badge-orange-glow)',
+  'components-premium-badge-orange-glow-hover': 'var(--color-components-premium-badge-orange-glow-hover)',
+  'components-premium-badge-orange-bg-stop-0-hover': 'var(--color-components-premium-badge-orange-bg-stop-0-hover)',
+  'components-premium-badge-orange-bg-stop-100-hover': 'var(--color-components-premium-badge-orange-bg-stop-100-hover)',
+  'components-premium-badge-orange-stroke-stop-0-hover': 'var(--color-components-premium-badge-orange-stroke-stop-0-hover)',
+  'components-premium-badge-orange-stroke-stop-100-hover': 'var(--color-components-premium-badge-orange-stroke-stop-100-hover)',
+
+  'components-progress-bar-bg': 'var(--color-components-progress-bar-bg)',
+  'components-progress-bar-progress': 'var(--color-components-progress-bar-progress)',
+  'components-progress-bar-border': 'var(--color-components-progress-bar-border)',
+  'components-progress-bar-progress-solid': 'var(--color-components-progress-bar-progress-solid)',
+  'components-progress-bar-progress-highlight': 'var(--color-components-progress-bar-progress-highlight)',
+
+  'components-icon-bg-red-solid': 'var(--color-components-icon-bg-red-solid)',
+  'components-icon-bg-rose-solid': 'var(--color-components-icon-bg-rose-solid)',
+  'components-icon-bg-pink-solid': 'var(--color-components-icon-bg-pink-solid)',
+  'components-icon-bg-orange-dark-solid': 'var(--color-components-icon-bg-orange-dark-solid)',
+  'components-icon-bg-yellow-solid': 'var(--color-components-icon-bg-yellow-solid)',
+  'components-icon-bg-green-solid': 'var(--color-components-icon-bg-green-solid)',
+  'components-icon-bg-teal-solid': 'var(--color-components-icon-bg-teal-solid)',
+  'components-icon-bg-blue-light-solid': 'var(--color-components-icon-bg-blue-light-solid)',
+  'components-icon-bg-blue-solid': 'var(--color-components-icon-bg-blue-solid)',
+  'components-icon-bg-indigo-solid': 'var(--color-components-icon-bg-indigo-solid)',
+  'components-icon-bg-violet-solid': 'var(--color-components-icon-bg-violet-solid)',
+  'components-icon-bg-midnight-solid': 'var(--color-components-icon-bg-midnight-solid)',
+  'components-icon-bg-rose-soft': 'var(--color-components-icon-bg-rose-soft)',
+  'components-icon-bg-pink-soft': 'var(--color-components-icon-bg-pink-soft)',
+  'components-icon-bg-orange-dark-soft': 'var(--color-components-icon-bg-orange-dark-soft)',
+  'components-icon-bg-yellow-soft': 'var(--color-components-icon-bg-yellow-soft)',
+  'components-icon-bg-green-soft': 'var(--color-components-icon-bg-green-soft)',
+  'components-icon-bg-teal-soft': 'var(--color-components-icon-bg-teal-soft)',
+  'components-icon-bg-blue-light-soft': 'var(--color-components-icon-bg-blue-light-soft)',
+  'components-icon-bg-blue-soft': 'var(--color-components-icon-bg-blue-soft)',
+  'components-icon-bg-indigo-soft': 'var(--color-components-icon-bg-indigo-soft)',
+  'components-icon-bg-violet-soft': 'var(--color-components-icon-bg-violet-soft)',
+  'components-icon-bg-midnight-soft': 'var(--color-components-icon-bg-midnight-soft)',
+  'components-icon-bg-red-soft': 'var(--color-components-icon-bg-red-soft)',
+  'components-icon-bg-orange-solid': 'var(--color-components-icon-bg-orange-solid)',
+  'components-icon-bg-orange-soft': 'var(--color-components-icon-bg-orange-soft)',
 
   'text-primary': 'var(--color-text-primary)',
   'text-secondary': 'var(--color-text-secondary)',
@@ -302,6 +410,7 @@ const vars = {
   'background-overlay-alt': 'var(--color-background-overlay-alt)',
   'background-surface-white': 'var(--color-background-surface-white)',
   'background-overlay-destructive': 'var(--color-background-overlay-destructive)',
+  'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)',
 
   'shadow-shadow-1': 'var(--color-shadow-shadow-1)',
   'shadow-shadow-3': 'var(--color-shadow-shadow-3)',
@@ -317,6 +426,7 @@ const vars = {
   'workflow-block-border': 'var(--color-workflow-block-border)',
   'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)',
   'workflow-block-bg': 'var(--color-workflow-block-bg)',
+  'workflow-block-bg-transparent': 'var(--color-workflow-block-bg-transparent)',
   'workflow-block-border-highlight': 'var(--color-workflow-block-border-highlight)',
 
   'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)',
@@ -436,6 +546,7 @@ const vars = {
   'util-colors-orange-orange-500': 'var(--color-util-colors-orange-orange-500)',
   'util-colors-orange-orange-600': 'var(--color-util-colors-orange-orange-600)',
   'util-colors-orange-orange-700': 'var(--color-util-colors-orange-orange-700)',
+  'util-colors-orange-orange-100-transparent': 'var(--color-util-colors-orange-orange-100-transparent)',
 
   'util-colors-pink-pink-50': 'var(--color-util-colors-pink-pink-50)',
   'util-colors-pink-pink-100': 'var(--color-util-colors-pink-pink-100)',
@@ -611,6 +722,17 @@ const vars = {
   'third-party-LangChain': 'var(--color-third-party-LangChain)',
   'third-party-Langfuse': 'var(--color-third-party-Langfuse)',
   'third-party-Github': 'var(--color-third-party-Github)',
-}
+  'third-party-Github-tertiary': 'var(--color-third-party-Github-tertiary)',
+  'third-party-Github-secondary': 'var(--color-third-party-Github-secondary)',
+  'third-party-model-bg-openai': 'var(--color-third-party-model-bg-openai)',
+  'third-party-model-bg-anthropic': 'var(--color-third-party-model-bg-anthropic)',
+  'third-party-model-bg-default': 'var(--color-third-party-model-bg-default)',
+
+  'third-party-aws': 'var(--color-third-party-aws)',
+  'third-party-aws-alt': 'var(--color-third-party-aws-alt)',
 
+  'saas-background': 'var(--color-saas-background)',
+  'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)',
+
+}
 export default vars