chore: update theme var define

This commit is contained in:
twwu 2024-11-08 15:26:59 +08:00
parent edc2fe050a
commit c6a6c53084
3 changed files with 299 additions and 26 deletions

View File

@ -95,10 +95,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 +136,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 +212,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 +234,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 +250,70 @@ 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-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-bg-mask-stop-0: #FFFFFF33;
--color-components-avatar-bg-mask-stop-100: #FFFFFF08;
--color-components-Avatar-default-avatar-bg: #222225;
--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-text-primary: #FBFBFC;
--color-text-secondary: #D9D9DE;
@ -265,6 +336,7 @@ html[data-theme="dark"] {
--color-text-logo-text: #E9E9EC;
--color-text-empty-state-icon: #C8CEDA4D;
--color-text-inverted: #FFFFFF;
--color-text-inverted-dimm: #FFFFFFCC;
--color-background-body: #1D1D20;
--color-background-default-subtle: #222225;
@ -301,6 +373,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;
@ -316,14 +389,26 @@ 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;
--color-workflow-link-line-error-active: #F97066;
--color-workflow-link-line-error-handle: #F97066;
--color-workflow-minimap-bg: #27272B;
--color-workflow-minimap-block: #C8CEDA14;
@ -334,8 +419,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;
@ -424,6 +509,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;
@ -602,5 +688,10 @@ html[data-theme="dark"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
--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-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
}

View File

@ -86,7 +86,7 @@ html[data-theme="light"] {
--color-components-button-secondary-accent-border-disabled: #1018280A;
--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 +95,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 +136,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 +165,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 +212,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 +234,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 +250,70 @@ 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-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-bg-mask-stop-0: #FFFFFF1F;
--color-components-avatar-bg-mask-stop-100: #FFFFFF14;
--color-components-Avatar-default-avatar-bg: #D0D5DC;
--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-text-primary: #101828;
--color-text-secondary: #354052;
@ -265,6 +336,7 @@ html[data-theme="light"] {
--color-text-logo-text: #18222F;
--color-text-empty-state-icon: #D0D5DC;
--color-text-inverted: #000000;
--color-text-inverted-dimm: #000000F2;
--color-background-body: #F2F4F7;
--color-background-default-subtle: #FCFCFD;
@ -301,6 +373,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;
@ -316,6 +389,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;
@ -324,6 +398,17 @@ html[data-theme="light"] {
--color-workflow-link-line-active: #296DFF;
--color-workflow-link-line-normal: #D0D5DC;
--color-workflow-link-line-handle: #296DFF;
--color-workflow-link-line-normal-transparent: #D0D5DC33;
--color-workflow-link-line-failure-active: #F79009;
--color-workflow-link-line-failure-handle: #F79009;
--color-workflow-link-line-failure-button-bg: #DC6803;
--color-workflow-link-line-failure-button-hover: #B54708;
--color-workflow-link-line-success-active: #17B26A;
--color-workflow-link-line-success-handle: #17B26A;
--color-workflow-link-line-error-active: #F04438;
--color-workflow-link-line-error-handle: #F04438;
--color-workflow-minimap-bg: #E9EBF0;
--color-workflow-minimap-block: #C8CEDA4D;
@ -424,6 +509,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;
@ -602,5 +688,10 @@ html[data-theme="light"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
--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-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
}

View File

@ -95,6 +95,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 +136,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 +212,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 +234,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 +250,70 @@ 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-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-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-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)',
'text-primary': 'var(--color-text-primary)',
'text-secondary': 'var(--color-text-secondary)',
@ -265,6 +336,7 @@ const vars = {
'text-logo-text': 'var(--color-text-logo-text)',
'text-empty-state-icon': 'var(--color-text-empty-state-icon)',
'text-inverted': 'var(--color-text-inverted)',
'text-inverted-dimm': 'var(--color-text-inverted-dimm)',
'background-body': 'var(--color-background-body)',
'background-default-subtle': 'var(--color-background-default-subtle)',
@ -301,6 +373,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)',
@ -316,6 +389,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)',
@ -324,6 +398,17 @@ const vars = {
'workflow-link-line-active': 'var(--color-workflow-link-line-active)',
'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)',
'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)',
'workflow-link-line-normal-transparent': 'var(--color-workflow-link-line-normal-transparent)',
'workflow-link-line-failure-active': 'var(--color-workflow-link-line-failure-active)',
'workflow-link-line-failure-handle': 'var(--color-workflow-link-line-failure-handle)',
'workflow-link-line-failure-button-bg': 'var(--color-workflow-link-line-failure-button-bg)',
'workflow-link-line-failure-button-hover': 'var(--color-workflow-link-line-failure-button-hover)',
'workflow-link-line-success-active': 'var(--color-workflow-link-line-success-active)',
'workflow-link-line-success-handle': 'var(--color-workflow-link-line-success-handle)',
'workflow-link-line-error-active': 'var(--color-workflow-link-line-error-active)',
'workflow-link-line-error-handle': 'var(--color-workflow-link-line-error-handle)',
'workflow-minimap-bg': 'var(--color-workflow-minimap-bg)',
'workflow-minimap-block': 'var(--color-workflow-minimap-block)',
@ -424,6 +509,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)',
@ -599,6 +685,11 @@ 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)',
}
export default vars