From c6a6c5308438466d50a12fc75f142278ed2e56c4 Mon Sep 17 00:00:00 2001 From: twwu Date: Fri, 8 Nov 2024 15:26:59 +0800 Subject: [PATCH] chore: update theme var define --- web/themes/dark.css | 113 +++++++++++++++++++++--- web/themes/light.css | 111 ++++++++++++++++++++--- web/themes/tailwind-theme-var-define.ts | 101 +++++++++++++++++++-- 3 files changed, 299 insertions(+), 26 deletions(-) diff --git a/web/themes/dark.css b/web/themes/dark.css index 3440a1a7a8..6b69342730 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -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%); } \ No newline at end of file diff --git a/web/themes/light.css b/web/themes/light.css index 717226e462..0d73875c29 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -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%); } \ No newline at end of file diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts index 643c96d1a1..0cd3559283 100644 --- a/web/themes/tailwind-theme-var-define.ts +++ b/web/themes/tailwind-theme-var-define.ts @@ -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