From fa01360498348d7f720bfd69e3a067c4856b1df5 Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 13 Nov 2024 13:11:47 +0800 Subject: [PATCH] fix: Fix theme initialization issue --- web/themes/dark.css | 701 ++++++++++++++++++++++++++++++++++++++++++ web/themes/light.css | 702 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1403 insertions(+) diff --git a/web/themes/dark.css b/web/themes/dark.css index 08994039eb..6e645616fb 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -1,4 +1,705 @@ /* Attention: Generate by code. Don't update by hand!!! */ +@media (prefers-color-scheme: dark) { + html:not([data-theme="dark"]):not([data-theme="light"]) { + color-scheme: dark; + --color-components-input-bg-normal: #FFFFFF14; + --color-components-input-text-placeholder: #C8CEDA4D; + --color-components-input-bg-hover: #FFFFFF08; + --color-components-input-bg-active: #FFFFFF0D; + --color-components-input-border-active: #747481; + --color-components-input-border-destructive: #F97066; + --color-components-input-text-filled: #F4F4F5; + --color-components-input-bg-destructive: #FFFFFF03; + --color-components-input-bg-disabled: #FFFFFF08; + --color-components-input-text-disabled: #C8CEDA4D; + --color-components-input-text-filled-disabled: #C8CEDA99; + --color-components-input-border-hover: #3A3A40; + --color-components-input-border-active-prompt-1: #36BFFA; + --color-components-input-border-active-prompt-2: #296DFF; + + --color-components-kbd-bg-gray: #FFFFFF08; + --color-components-kbd-bg-white: #FFFFFF1F; + + --color-components-tooltip-bg: #18181BF2; + + --color-components-button-primary-text: #FFFFFFF2; + --color-components-button-primary-bg: #155AEF; + --color-components-button-primary-border: #FFFFFF1F; + --color-components-button-primary-bg-hover: #296DFF; + --color-components-button-primary-border-hover: #FFFFFF33; + --color-components-button-primary-bg-disabled: #FFFFFF08; + --color-components-button-primary-border-disabled: #FFFFFF14; + --color-components-button-primary-text-disabled: #FFFFFF33; + + --color-components-button-secondary-text: #FFFFFFCC; + --color-components-button-secondary-text-disabled: #FFFFFF33; + --color-components-button-secondary-bg: #FFFFFF1F; + --color-components-button-secondary-bg-hover: #FFFFFF33; + --color-components-button-secondary-bg-disabled: #FFFFFF08; + --color-components-button-secondary-border: #FFFFFF14; + --color-components-button-secondary-border-hover: #FFFFFF1F; + --color-components-button-secondary-border-disabled: #FFFFFF0D; + + --color-components-button-tertiary-text: #D9D9DE; + --color-components-button-tertiary-text-disabled: #FFFFFF33; + --color-components-button-tertiary-bg: #FFFFFF14; + --color-components-button-tertiary-bg-hover: #FFFFFF1F; + --color-components-button-tertiary-bg-disabled: #FFFFFF08; + + --color-components-button-ghost-text: #D9D9DE; + --color-components-button-ghost-text-disabled: #FFFFFF33; + --color-components-button-ghost-bg-hover: #C8CEDA14; + + --color-components-button-destructive-primary-text: #FFFFFFF2; + --color-components-button-destructive-primary-text-disabled: #FFFFFF33; + --color-components-button-destructive-primary-bg: #D92D20; + --color-components-button-destructive-primary-bg-hover: #F04438; + --color-components-button-destructive-primary-bg-disabled: #F0443824; + --color-components-button-destructive-primary-border: #FFFFFF1F; + --color-components-button-destructive-primary-border-hover: #FFFFFF33; + --color-components-button-destructive-primary-border-disabled: #FFFFFF14; + + --color-components-button-destructive-secondary-text: #F97066; + --color-components-button-destructive-secondary-text-disabled: #F0443833; + --color-components-button-destructive-secondary-bg: #FFFFFF1F; + --color-components-button-destructive-secondary-bg-hover: #F0443824; + --color-components-button-destructive-secondary-bg-disabled: #F0443814; + --color-components-button-destructive-secondary-border: #FFFFFF14; + --color-components-button-destructive-secondary-border-hover: #FFFFFF1F; + --color-components-button-destructive-secondary-border-disabled: #F0443814; + + --color-components-button-destructive-tertiary-text: #F97066; + --color-components-button-destructive-tertiary-text-disabled: #F0443833; + --color-components-button-destructive-tertiary-bg: #F0443824; + --color-components-button-destructive-tertiary-bg-hover: #F0443840; + --color-components-button-destructive-tertiary-bg-disabled: #F0443814; + + --color-components-button-destructive-ghost-text: #F97066; + --color-components-button-destructive-ghost-text-disabled: #F0443833; + --color-components-button-destructive-ghost-bg-hover: #F0443824; + + --color-components-button-secondary-accent-text: #FFFFFFCC; + --color-components-button-secondary-accent-text-disabled: #FFFFFF33; + --color-components-button-secondary-accent-bg: #FFFFFF0D; + --color-components-button-secondary-accent-bg-hover: #FFFFFF14; + --color-components-button-secondary-accent-bg-disabled: #FFFFFF08; + --color-components-button-secondary-accent-border: #FFFFFF14; + --color-components-button-secondary-accent-border-hover: #FFFFFF1F; + --color-components-button-secondary-accent-border-disabled: #FFFFFF0D; + + --color-components-checkbox-icon: #FFFFFFF2; + --color-components-checkbox-icon-disabled: #FFFFFF33; + --color-components-checkbox-bg: #296DFF; + --color-components-checkbox-bg-hover: #5289FF; + --color-components-checkbox-bg-disabled: #FFFFFF08; + --color-components-checkbox-border: #FFFFFF66; + --color-components-checkbox-border-hover: #FFFFFF99; + --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: #155AEF33; + --color-components-radio-bg-disabled: #FFFFFF08; + --color-components-radio-border: #FFFFFF66; + --color-components-radio-border-hover: #FFFFFF99; + --color-components-radio-border-disabled: #FFFFFF03; + --color-components-radio-bg: #FFFFFF00; + --color-components-radio-bg-hover: #FFFFFF0D; + + --color-components-toggle-knob: #F4F4F5; + --color-components-toggle-knob-disabled: #FFFFFF33; + --color-components-toggle-bg: #296DFF; + --color-components-toggle-bg-hover: #5289FF; + --color-components-toggle-bg-disabled: #FFFFFF14; + --color-components-toggle-bg-unchecked: #FFFFFF33; + --color-components-toggle-bg-unchecked-hover: #FFFFFF4D; + --color-components-toggle-bg-unchecked-disabled: #FFFFFF14; + --color-components-toggle-knob-hover: #FEFEFE; + + --color-components-card-bg: #222225; + --color-components-card-border: #FFFFFF08; + --color-components-card-bg-alt: #27272B; + + --color-components-menu-item-text: #C8CEDA99; + --color-components-menu-item-text-active: #FFFFFFF2; + --color-components-menu-item-text-hover: #C8CEDACC; + --color-components-menu-item-text-active-accent: #FFFFFFF2; + + --color-components-panel-bg: #222225; + --color-components-panel-bg-blur: #2C2C30F2; + --color-components-panel-border: #C8CEDA24; + --color-components-panel-border-subtle: #C8CEDA14; + --color-components-panel-gradient-2: #222225; + --color-components-panel-gradient-1: #27272B; + --color-components-panel-bg-alt: #222225; + --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; + + --color-components-main-nav-nav-button-text: #C8CEDA99; + --color-components-main-nav-nav-button-text-active: #F4F4F5; + --color-components-main-nav-nav-button-bg: #FFFFFF00; + --color-components-main-nav-nav-button-bg-active: #C8CEDA24; + --color-components-main-nav-nav-button-border: #FFFFFF14; + --color-components-main-nav-nav-button-bg-hover: #C8CEDA0A; + + --color-components-main-nav-nav-user-border: #FFFFFF0D; + + --color-components-slider-knob: #F4F4F5; + --color-components-slider-knob-hover: #FEFEFE; + --color-components-slider-knob-disabled: #FFFFFF33; + --color-components-slider-range: #296DFF; + --color-components-slider-track: #FFFFFF33; + --color-components-slider-knob-border-hover: #1018284D; + --color-components-slider-knob-border: #10182833; + + --color-components-segmented-control-item-active-bg: #FFFFFF14; + --color-components-segmented-control-item-active-border: #C8CEDA14; + --color-components-segmented-control-bg-normal: #18181BB2; + --color-components-segmented-control-item-active-accent-bg: #155AEF33; + --color-components-segmented-control-item-active-accent-border: #155AEF4D; + + --color-components-option-card-option-bg: #C8CEDA0A; + --color-components-option-card-option-selected-bg: #FFFFFF0D; + --color-components-option-card-option-selected-border: #5289FF; + --color-components-option-card-option-border: #C8CEDA33; + --color-components-option-card-option-bg-hover: #C8CEDA24; + --color-components-option-card-option-border-hover: #C8CEDA4D; + + --color-components-tab-active: #296DFF; + + --color-components-badge-white-to-dark: #18181BCC; + --color-components-badge-status-light-success-bg: #17B26A; + --color-components-badge-status-light-success-border-inner: #47CD89; + --color-components-badge-status-light-success-halo: #17B26A4D; + + --color-components-badge-status-light-border-outer: #222225; + --color-components-badge-status-light-high-light: #FFFFFF4D; + --color-components-badge-status-light-warning-bg: #F79009; + --color-components-badge-status-light-warning-border-inner: #FDB022; + --color-components-badge-status-light-warning-halo: #F790094D; + + --color-components-badge-status-light-error-bg: #F04438; + --color-components-badge-status-light-error-border-inner: #F97066; + --color-components-badge-status-light-error-halo: #F044384D; + + --color-components-badge-status-light-normal-bg: #0BA5EC; + --color-components-badge-status-light-normal-border-inner: #36BFFA; + --color-components-badge-status-light-normal-halo: #0BA5EC4D; + + --color-components-badge-status-light-disabled-bg: #676F83; + --color-components-badge-status-light-disabled-border-inner: #98A2B2; + --color-components-badge-status-light-disabled-halo: #C8CEDA14; + + --color-components-badge-bg-green-soft: #17B26A24; + --color-components-badge-bg-orange-soft: #F7900924; + --color-components-badge-bg-red-soft: #F0443824; + --color-components-badge-bg-blue-light-soft: #0BA5EC24; + --color-components-badge-bg-gray-soft: #C8CEDA14; + + --color-components-chart-line: #5289FF; + --color-components-chart-area-1: #155AEF33; + --color-components-chart-area-2: #155AEF0A; + --color-components-chart-current-1: #5289FF; + --color-components-chart-current-2: #155AEF4D; + --color-components-chart-bg: #18181BF2; + + --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: #155AEF33; + --color-components-dropzone-border: #C8CEDA24; + --color-components-dropzone-border-alt: #C8CEDA33; + --color-components-dropzone-border-accent: #84ABFF; + + --color-components-progress-brand-progress: #5289FF; + --color-components-progress-brand-border: #5289FF; + --color-components-progress-brand-bg: #155AEF0A; + + --color-components-progress-white-progress: #FFFFFF; + --color-components-progress-white-border: #FFFFFFF2; + --color-components-progress-white-bg: #FFFFFF03; + + --color-components-progress-gray-progress: #98A2B2; + --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; + --color-components-chat-input-bg-mask-2: #18181B99; + --color-components-chat-input-border: #C8CEDA33; + --color-components-chat-input-audio-wave-active: #84ABFF; + --color-components-chat-input-audio-bg-alt: #18181BE5; + + --color-components-avatar-shape-fill-stop-0: #FFFFFFF2; + --color-components-avatar-shape-fill-stop-100: #FFFFFFCC; + + --color-components-avatar-bg-mask-stop-0: #FFFFFF33; + --color-components-avatar-bg-mask-stop-100: #FFFFFF08; + + --color-components-avatar-default-avatar-bg: #222225; + --color-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; + --color-text-tertiary: #C8CEDA99; + --color-text-quaternary: #C8CEDA66; + --color-text-destructive: #F97066; + --color-text-success: #17B26A; + --color-text-warning: #F79009; + --color-text-destructive-secondary: #F97066; + --color-text-success-secondary: #47CD89; + --color-text-warning-secondary: #FDB022; + --color-text-accent: #5289FF; + --color-text-primary-on-surface: #FFFFFFF2; + --color-text-placeholder: #C8CEDA4D; + --color-text-disabled: #C8CEDA4D; + --color-text-accent-secondary: #84ABFF; + --color-text-accent-light-mode-only: #D9D9DE; + --color-text-text-selected: #155AEF4D; + --color-text-secondary-on-surface: #FFFFFFE5; + --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; + --color-background-neutral-subtle: #1D1D20; + --color-background-sidenav-bg: #27272AEB; + --color-background-default: #222225; + --color-background-soft: #18181B40; + --color-background-gradient-bg-fill-chat-bg-1: #222225; + --color-background-gradient-bg-fill-chat-bg-2: #1D1D20; + --color-background-gradient-bg-fill-chat-bubble-bg-1: #C8CEDA14; + --color-background-gradient-bg-fill-chat-bubble-bg-2: #C8CEDA05; + --color-background-gradient-bg-fill-debug-bg-1: #C8CEDA14; + --color-background-gradient-bg-fill-debug-bg-2: #18181B0A; + + --color-background-gradient-mask-gray: #18181B14; + --color-background-gradient-mask-transparent: #00000000; + --color-background-gradient-mask-input-clear-2: #393A3E00; + --color-background-gradient-mask-input-clear-1: #393A3E; + --color-background-gradient-mask-transparent-dark: #00000000; + --color-background-gradient-mask-side-panel-2: #18181BE5; + --color-background-gradient-mask-side-panel-1: #18181B0A; + + --color-background-default-burn: #1D1D20; + --color-background-overlay-fullscreen: #27272AF7; + --color-background-default-lighter: #C8CEDA0A; + --color-background-section: #18181B66; + --color-background-interaction-from-bg-1: #18181B66; + --color-background-interaction-from-bg-2: #18181B24; + --color-background-section-burn: #18181B99; + --color-background-default-dodge: #3A3A40; + --color-background-overlay: #18181BCC; + --color-background-default-dimm: #27272B; + --color-background-default-hover: #27272B; + --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; + --color-shadow-shadow-4: #0000001F; + --color-shadow-shadow-5: #00000029; + --color-shadow-shadow-6: #00000033; + --color-shadow-shadow-7: #0000003D; + --color-shadow-shadow-8: #00000047; + --color-shadow-shadow-9: #0000005C; + --color-shadow-shadow-2: #00000014; + --color-shadow-shadow-10: #00000066; + + --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: #5289FF; + --color-workflow-link-line-normal: #676F83; + --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; + + --color-workflow-display-success-bg: #17B26A33; + --color-workflow-display-success-border-1: #17B26AE5; + --color-workflow-display-success-border-2: #17B26ACC; + --color-workflow-display-success-vignette-color: #17B26A40; + --color-workflow-display-success-bg-line-pattern: #18181BCC; + + --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; + --color-workflow-display-error-bg: #F0443833; + --color-workflow-display-error-bg-line-pattern: #18181BCC; + --color-workflow-display-error-border-1: #F04438E5; + --color-workflow-display-error-border-2: #F04438CC; + --color-workflow-display-error-vignette-color: #F0443840; + + --color-workflow-display-warning-bg: #F7900933; + --color-workflow-display-warning-bg-line-pattern: #18181BCC; + --color-workflow-display-warning-border-1: #F79009E5; + --color-workflow-display-warning-border-2: #F79009CC; + --color-workflow-display-warning-vignette-color: #F7900940; + + --color-workflow-display-normal-bg: #0BA5EC33; + --color-workflow-display-normal-bg-line-pattern: #18181BCC; + --color-workflow-display-normal-border-1: #0BA5ECE5; + --color-workflow-display-normal-border-2: #0BA5ECCC; + --color-workflow-display-normal-vignette-color: #0BA5EC40; + + --color-workflow-display-disabled-bg: #C8CEDA33; + --color-workflow-display-disabled-bg-line-pattern: #18181BCC; + --color-workflow-display-disabled-border-1: #C8CEDA99; + --color-workflow-display-disabled-border-2: #C8CEDA40; + --color-workflow-display-disabled-vignette-color: #C8CEDA40; + --color-workflow-display-disabled-outline: #18181BF2; + + --color-workflow-workflow-progress-bg-1: #18181B40; + --color-workflow-workflow-progress-bg-2: #18181B0A; + + --color-divider-subtle: #C8CEDA14; + --color-divider-regular: #C8CEDA24; + --color-divider-deep: #C8CEDA33; + --color-divider-burn: #18181BF2; + --color-divider-intense: #C8CEDA66; + --color-divider-solid: #3A3A40; + --color-divider-solid-alt: #747481; + + --color-state-base-hover: #C8CEDA14; + --color-state-base-active: #C8CEDA33; + --color-state-base-hover-alt: #C8CEDA24; + --color-state-base-handle: #C8CEDA4D; + --color-state-base-handle-hover: #C8CEDA80; + + --color-state-accent-hover: #155AEF24; + --color-state-accent-active: #155AEF24; + --color-state-accent-hover-alt: #155AEF40; + --color-state-accent-solid: #5289FF; + --color-state-accent-active-alt: #155AEF33; + + --color-state-destructive-hover: #F0443824; + --color-state-destructive-hover-alt: #F0443840; + --color-state-destructive-active: #F044384D; + --color-state-destructive-solid: #F97066; + --color-state-destructive-border: #F97066; + + --color-state-success-hover: #17B26A24; + --color-state-success-hover-alt: #17B26A40; + --color-state-success-active: #17B26A4D; + --color-state-success-solid: #47CD89; + + --color-state-warning-hover: #F7900924; + --color-state-warning-hover-alt: #F7900940; + --color-state-warning-active: #F790094D; + --color-state-warning-solid: #F79009; + + --color-effects-highlight: #C8CEDA14; + --color-effects-highlight-lightmode-off: #C8CEDA14; + --color-effects-image-frame: #FFFFFF; + + --color-util-colors-orange-dark-orange-dark-50: #57130A; + --color-util-colors-orange-dark-orange-dark-100: #771A0D; + --color-util-colors-orange-dark-orange-dark-200: #97180C; + --color-util-colors-orange-dark-orange-dark-300: #BC1B06; + --color-util-colors-orange-dark-orange-dark-400: #E62E05; + --color-util-colors-orange-dark-orange-dark-500: #FF4405; + --color-util-colors-orange-dark-orange-dark-600: #FF692E; + --color-util-colors-orange-dark-orange-dark-700: #FF9C66; + + --color-util-colors-orange-orange-50: #511C10; + --color-util-colors-orange-orange-100: #772917; + --color-util-colors-orange-orange-200: #932F19; + --color-util-colors-orange-orange-300: #B93815; + --color-util-colors-orange-orange-400: #E04F16; + --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; + --color-util-colors-pink-pink-200: #9E165F; + --color-util-colors-pink-pink-300: #C11574; + --color-util-colors-pink-pink-400: #DD2590; + --color-util-colors-pink-pink-500: #EE46BC; + --color-util-colors-pink-pink-600: #F670C7; + --color-util-colors-pink-pink-700: #FAA7E0; + + --color-util-colors-fuchsia-fuchsia-50: #47104C; + --color-util-colors-fuchsia-fuchsia-100: #6F1877; + --color-util-colors-fuchsia-fuchsia-200: #821890; + --color-util-colors-fuchsia-fuchsia-300: #9F1AB1; + --color-util-colors-fuchsia-fuchsia-400: #BA24D5; + --color-util-colors-fuchsia-fuchsia-500: #D444F1; + --color-util-colors-fuchsia-fuchsia-600: #E478FA; + --color-util-colors-fuchsia-fuchsia-700: #EEAAFD; + + --color-util-colors-purple-purple-50: #27115F; + --color-util-colors-purple-purple-100: #3E1C96; + --color-util-colors-purple-purple-200: #4A1FB8; + --color-util-colors-purple-purple-300: #5925DC; + --color-util-colors-purple-purple-400: #6938EF; + --color-util-colors-purple-purple-500: #7A5AF8; + --color-util-colors-purple-purple-600: #9B8AFB; + --color-util-colors-purple-purple-700: #BDB4FE; + + --color-util-colors-indigo-indigo-50: #1F235B; + --color-util-colors-indigo-indigo-100: #2D3282; + --color-util-colors-indigo-indigo-200: #2D31A6; + --color-util-colors-indigo-indigo-300: #3538CD; + --color-util-colors-indigo-indigo-400: #444CE7; + --color-util-colors-indigo-indigo-500: #6172F3; + --color-util-colors-indigo-indigo-600: #8098F9; + --color-util-colors-indigo-indigo-700: #A4BCFD; + + --color-util-colors-blue-blue-50: #102A56; + --color-util-colors-blue-blue-100: #194185; + --color-util-colors-blue-blue-200: #1849A9; + --color-util-colors-blue-blue-300: #175CD3; + --color-util-colors-blue-blue-400: #1570EF; + --color-util-colors-blue-blue-500: #2E90FA; + --color-util-colors-blue-blue-600: #53B1FD; + --color-util-colors-blue-blue-700: #84CAFF; + + --color-util-colors-blue-light-blue-light-50: #062C41; + --color-util-colors-blue-light-blue-light-100: #0B4A6F; + --color-util-colors-blue-light-blue-light-200: #065986; + --color-util-colors-blue-light-blue-light-300: #026AA2; + --color-util-colors-blue-light-blue-light-400: #0086C9; + --color-util-colors-blue-light-blue-light-500: #0BA5EC; + --color-util-colors-blue-light-blue-light-600: #36BFFA; + --color-util-colors-blue-light-blue-light-700: #7CD4FD; + + --color-util-colors-gray-blue-gray-blue-50: #0D0F1C; + --color-util-colors-gray-blue-gray-blue-100: #101323; + --color-util-colors-gray-blue-gray-blue-200: #293056; + --color-util-colors-gray-blue-gray-blue-300: #363F72; + --color-util-colors-gray-blue-gray-blue-400: #3E4784; + --color-util-colors-gray-blue-gray-blue-500: #4E5BA6; + --color-util-colors-gray-blue-gray-blue-600: #717BBC; + --color-util-colors-gray-blue-gray-blue-700: #B3B8DB; + + --color-util-colors-blue-brand-blue-brand-50: #002066; + --color-util-colors-blue-brand-blue-brand-100: #00329E; + --color-util-colors-blue-brand-blue-brand-200: #003DC1; + --color-util-colors-blue-brand-blue-brand-300: #004AEB; + --color-util-colors-blue-brand-blue-brand-400: #155AEF; + --color-util-colors-blue-brand-blue-brand-500: #296DFF; + --color-util-colors-blue-brand-blue-brand-600: #5289FF; + --color-util-colors-blue-brand-blue-brand-700: #84ABFF; + + --color-util-colors-red-red-50: #55160C; + --color-util-colors-red-red-100: #7A271A; + --color-util-colors-red-red-200: #912018; + --color-util-colors-red-red-300: #B42318; + --color-util-colors-red-red-400: #D92D20; + --color-util-colors-red-red-500: #F04438; + --color-util-colors-red-red-600: #F97066; + --color-util-colors-red-red-700: #FDA29B; + + --color-util-colors-green-green-50: #053321; + --color-util-colors-green-green-100: #074D31; + --color-util-colors-green-green-200: #085D3A; + --color-util-colors-green-green-300: #067647; + --color-util-colors-green-green-400: #079455; + --color-util-colors-green-green-500: #17B26A; + --color-util-colors-green-green-600: #47CD89; + --color-util-colors-green-green-700: #75E0A7; + + --color-util-colors-warning-warning-50: #4E1D09; + --color-util-colors-warning-warning-100: #7A2E0E; + --color-util-colors-warning-warning-200: #93370D; + --color-util-colors-warning-warning-300: #B54708; + --color-util-colors-warning-warning-400: #DC6803; + --color-util-colors-warning-warning-500: #F79009; + --color-util-colors-warning-warning-600: #FDB022; + --color-util-colors-warning-warning-700: #FEC84B; + + --color-util-colors-yellow-yellow-50: #542C0D; + --color-util-colors-yellow-yellow-100: #713B12; + --color-util-colors-yellow-yellow-200: #854A0E; + --color-util-colors-yellow-yellow-300: #A15C07; + --color-util-colors-yellow-yellow-400: #CA8504; + --color-util-colors-yellow-yellow-500: #EAAA08; + --color-util-colors-yellow-yellow-600: #FAC515; + --color-util-colors-yellow-yellow-700: #FDE272; + + --color-util-colors-teal-teal-50: #0A2926; + --color-util-colors-teal-teal-100: #134E48; + --color-util-colors-teal-teal-200: #125D56; + --color-util-colors-teal-teal-300: #107569; + --color-util-colors-teal-teal-400: #0E9384; + --color-util-colors-teal-teal-500: #15B79E; + --color-util-colors-teal-teal-600: #2ED3B7; + --color-util-colors-teal-teal-700: #5FE9D0; + + --color-util-colors-cyan-cyan-50: #0D2D3A; + --color-util-colors-cyan-cyan-100: #164C63; + --color-util-colors-cyan-cyan-200: #155B75; + --color-util-colors-cyan-cyan-300: #0E7090; + --color-util-colors-cyan-cyan-400: #088AB2; + --color-util-colors-cyan-cyan-500: #06AED4; + --color-util-colors-cyan-cyan-600: #22CCEE; + --color-util-colors-cyan-cyan-700: #67E3F9; + + --color-util-colors-violet-violet-50: #2E125E; + --color-util-colors-violet-violet-100: #491C96; + --color-util-colors-violet-violet-200: #5720B7; + --color-util-colors-violet-violet-300: #6927DA; + --color-util-colors-violet-violet-400: #7839EE; + --color-util-colors-violet-violet-500: #875BF7; + --color-util-colors-violet-violet-600: #A48AFB; + --color-util-colors-violet-violet-700: #C3B5FD; + + --color-util-colors-gray-gray-50: #0C111C; + --color-util-colors-gray-gray-100: #101828; + --color-util-colors-gray-gray-200: #18222F; + --color-util-colors-gray-gray-300: #354052; + --color-util-colors-gray-gray-400: #495464; + --color-util-colors-gray-gray-500: #676F83; + --color-util-colors-gray-gray-600: #98A2B2; + --color-util-colors-gray-gray-700: #D0D5DC; + + --color-util-colors-green-light-green-light-50: #15290A; + --color-util-colors-green-light-green-light-100: #2B5314; + --color-util-colors-green-light-green-light-200: #326212; + --color-util-colors-green-light-green-light-300: #3B7C0F; + --color-util-colors-green-light-green-light-500: #66C61C; + --color-util-colors-green-light-green-light-400: #4CA30D; + --color-util-colors-green-light-green-light-600: #85E13A; + --color-util-colors-green-light-green-light-700: #A6EF67; + + --color-util-colors-rose-rose-50: #510B24; + --color-util-colors-rose-rose-100: #89123E; + --color-util-colors-rose-rose-200: #A11043; + --color-util-colors-rose-rose-300: #C01048; + --color-util-colors-rose-rose-400: #E31B54; + --color-util-colors-rose-rose-500: #F63D68; + --color-util-colors-rose-rose-600: #FD6F8E; + --color-util-colors-rose-rose-700: #FEA3B4; + + --color-util-colors-midnight-midnight-50: #171C22; + --color-util-colors-midnight-midnight-100: #202431; + --color-util-colors-midnight-midnight-200: #2F3648; + --color-util-colors-midnight-midnight-300: #3E465E; + --color-util-colors-midnight-midnight-400: #5D698D; + --color-util-colors-midnight-midnight-500: #828DAD; + --color-util-colors-midnight-midnight-600: #A7AEC5; + --color-util-colors-midnight-midnight-700: #C6CBD9; + + --color-third-party-LangChain: #FFFFFF; + --color-third-party-Langfuse: #FFFFFF; + + --color-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%); + --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); + } +} + html[data-theme="dark"] { --color-components-input-bg-normal: #FFFFFF14; --color-components-input-text-placeholder: #C8CEDA4D; diff --git a/web/themes/light.css b/web/themes/light.css index ed563ad594..4e0ee8ae3e 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -1,4 +1,706 @@ /* Attention: Generate by code. Don't update by hand!!! */ +@media (prefers-color-scheme: light) { + html:not([data-theme="light"]):not([data-theme="dark"]) { + color-scheme: light; + --color-components-input-bg-normal: #C8CEDA40; + --color-components-input-text-placeholder: #98A2B2; + --color-components-input-bg-hover: #C8CEDA24; + --color-components-input-bg-active: #F9FAFB; + --color-components-input-border-active: #D0D5DC; + --color-components-input-border-destructive: #FDA29B; + --color-components-input-text-filled: #101828; + --color-components-input-bg-destructive: #FFFFFF; + --color-components-input-bg-disabled: #C8CEDA24; + --color-components-input-text-disabled: #D0D5DC; + --color-components-input-text-filled-disabled: #676F83; + --color-components-input-border-hover: #D0D5DC; + --color-components-input-border-active-prompt-1: #0BA5EC; + --color-components-input-border-active-prompt-2: #155AEF; + + --color-components-kbd-bg-gray: #1018280A; + --color-components-kbd-bg-white: #FFFFFF1F; + + --color-components-tooltip-bg: #FFFFFFF2; + + --color-components-button-primary-text: #FFFFFF; + --color-components-button-primary-bg: #155AEF; + --color-components-button-primary-border: #1018280A; + --color-components-button-primary-bg-hover: #004AEB; + --color-components-button-primary-border-hover: #10182814; + --color-components-button-primary-bg-disabled: #155AEF24; + --color-components-button-primary-border-disabled: #FFFFFF00; + --color-components-button-primary-text-disabled: #FFFFFF99; + + --color-components-button-secondary-text: #354052; + --color-components-button-secondary-text-disabled: #10182840; + --color-components-button-secondary-bg: #FFFFFF; + --color-components-button-secondary-bg-hover: #F9FAFB; + --color-components-button-secondary-bg-disabled: #F9FAFB; + --color-components-button-secondary-border: #10182824; + --color-components-button-secondary-border-hover: #10182833; + --color-components-button-secondary-border-disabled: #1018280A; + + --color-components-button-tertiary-text: #354052; + --color-components-button-tertiary-text-disabled: #10182840; + --color-components-button-tertiary-bg: #F2F4F7; + --color-components-button-tertiary-bg-hover: #E9EBF0; + --color-components-button-tertiary-bg-disabled: #F9FAFB; + + --color-components-button-ghost-text: #354052; + --color-components-button-ghost-text-disabled: #10182840; + --color-components-button-ghost-bg-hover: #C8CEDA33; + + --color-components-button-destructive-primary-text: #FFFFFF; + --color-components-button-destructive-primary-text-disabled: #FFFFFF99; + --color-components-button-destructive-primary-bg: #D92D20; + --color-components-button-destructive-primary-bg-hover: #B42318; + --color-components-button-destructive-primary-bg-disabled: #FEE4E2; + --color-components-button-destructive-primary-border: #18181B0A; + --color-components-button-destructive-primary-border-hover: #18181B14; + --color-components-button-destructive-primary-border-disabled: #FFFFFF00; + + --color-components-button-destructive-secondary-text: #D92D20; + --color-components-button-destructive-secondary-text-disabled: #F0443833; + --color-components-button-destructive-secondary-bg: #FFFFFF; + --color-components-button-destructive-secondary-bg-hover: #FEF3F2; + --color-components-button-destructive-secondary-bg-disabled: #FEF3F2; + --color-components-button-destructive-secondary-border: #18181B14; + --color-components-button-destructive-secondary-border-hover: #F0443840; + --color-components-button-destructive-secondary-border-disabled: #F044380A; + + --color-components-button-destructive-tertiary-text: #D92D20; + --color-components-button-destructive-tertiary-text-disabled: #F0443833; + --color-components-button-destructive-tertiary-bg: #FEE4E2; + --color-components-button-destructive-tertiary-bg-hover: #FECDCA; + --color-components-button-destructive-tertiary-bg-disabled: #F044380A; + + --color-components-button-destructive-ghost-text: #D92D20; + --color-components-button-destructive-ghost-text-disabled: #F0443833; + --color-components-button-destructive-ghost-bg-hover: #FEE4E2; + + --color-components-button-secondary-accent-text: #155AEF; + --color-components-button-secondary-accent-text-disabled: #B2CAFF; + --color-components-button-secondary-accent-bg: #FFFFFF; + --color-components-button-secondary-accent-bg-hover: #F2F4F7; + --color-components-button-secondary-accent-bg-disabled: #F9FAFB; + --color-components-button-secondary-accent-border: #10182824; + --color-components-button-secondary-accent-border-hover: #10182824; + --color-components-button-secondary-accent-border-disabled: #1018280A; + + --color-components-checkbox-icon: #FFFFFF; + --color-components-checkbox-icon-disabled: #FFFFFF80; + --color-components-checkbox-bg: #155AEF; + --color-components-checkbox-bg-hover: #004AEB; + --color-components-checkbox-bg-disabled: #F2F4F7; + --color-components-checkbox-border: #D0D5DC; + --color-components-checkbox-border-hover: #98A2B2; + --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: #B2CAFF; + --color-components-radio-bg-disabled: #FFFFFF00; + --color-components-radio-border: #D0D5DC; + --color-components-radio-border-hover: #98A2B2; + --color-components-radio-border-disabled: #18181B0A; + --color-components-radio-bg: #FFFFFF00; + --color-components-radio-bg-hover: #FFFFFF00; + + --color-components-toggle-knob: #FFFFFF; + --color-components-toggle-knob-disabled: #FFFFFFF2; + --color-components-toggle-bg: #155AEF; + --color-components-toggle-bg-hover: #004AEB; + --color-components-toggle-bg-disabled: #D1E0FF; + --color-components-toggle-bg-unchecked: #E9EBF0; + --color-components-toggle-bg-unchecked-hover: #D0D5DC; + --color-components-toggle-bg-unchecked-disabled: #F2F4F7; + --color-components-toggle-knob-hover: #FFFFFF; + + --color-components-card-bg: #FCFCFD; + --color-components-card-border: #FFFFFF; + --color-components-card-bg-alt: #FFFFFF; + + --color-components-menu-item-text: #495464; + --color-components-menu-item-text-active: #18222F; + --color-components-menu-item-text-hover: #354052; + --color-components-menu-item-text-active-accent: #18222F; + + --color-components-panel-bg: #FFFFFF; + --color-components-panel-bg-blur: #FFFFFFF2; + --color-components-panel-border: #10182814; + --color-components-panel-border-subtle: #10182814; + --color-components-panel-gradient-2: #F9FAFB; + --color-components-panel-gradient-1: #FFFFFF; + --color-components-panel-bg-alt: #F9FAFB; + --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; + + --color-components-main-nav-nav-button-text: #495464; + --color-components-main-nav-nav-button-text-active: #155AEF; + --color-components-main-nav-nav-button-bg: #FFFFFF00; + --color-components-main-nav-nav-button-bg-active: #FCFCFD; + --color-components-main-nav-nav-button-border: #FFFFFFF2; + --color-components-main-nav-nav-button-bg-hover: #1018280A; + + --color-components-main-nav-nav-user-border: #FFFFFF; + + --color-components-slider-knob: #FFFFFF; + --color-components-slider-knob-hover: #FFFFFF; + --color-components-slider-knob-disabled: #FFFFFFF2; + --color-components-slider-range: #296DFF; + --color-components-slider-track: #E9EBF0; + --color-components-slider-knob-border-hover: #10182833; + --color-components-slider-knob-border: #10182824; + + --color-components-segmented-control-item-active-bg: #FFFFFF; + --color-components-segmented-control-item-active-border: #FFFFFF; + --color-components-segmented-control-bg-normal: #C8CEDA33; + --color-components-segmented-control-item-active-accent-bg: #FFFFFF; + --color-components-segmented-control-item-active-accent-border: #FFFFFF; + + --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: #E9EBF0; + --color-components-option-card-option-bg-hover: #FFFFFF; + --color-components-option-card-option-border-hover: #D0D5DC; + + --color-components-tab-active: #155AEF; + + --color-components-badge-white-to-dark: #FFFFFF; + --color-components-badge-status-light-success-bg: #47CD89; + --color-components-badge-status-light-success-border-inner: #17B26A; + --color-components-badge-status-light-success-halo: #17B26A40; + + --color-components-badge-status-light-border-outer: #FFFFFF; + --color-components-badge-status-light-high-light: #FFFFFF4D; + --color-components-badge-status-light-warning-bg: #FDB022; + --color-components-badge-status-light-warning-border-inner: #F79009; + --color-components-badge-status-light-warning-halo: #F7900940; + + --color-components-badge-status-light-error-bg: #F97066; + --color-components-badge-status-light-error-border-inner: #F04438; + --color-components-badge-status-light-error-halo: #F0443840; + + --color-components-badge-status-light-normal-bg: #36BFFA; + --color-components-badge-status-light-normal-border-inner: #0BA5EC; + --color-components-badge-status-light-normal-halo: #0BA5EC40; + + --color-components-badge-status-light-disabled-bg: #98A2B2; + --color-components-badge-status-light-disabled-border-inner: #676F83; + --color-components-badge-status-light-disabled-halo: #1018280A; + + --color-components-badge-bg-green-soft: #17B26A14; + --color-components-badge-bg-orange-soft: #F7900914; + --color-components-badge-bg-red-soft: #F0443814; + --color-components-badge-bg-blue-light-soft: #0BA5EC14; + --color-components-badge-bg-gray-soft: #1018280A; + + --color-components-chart-line: #296DFF; + --color-components-chart-area-1: #155AEF24; + --color-components-chart-area-2: #155AEF0A; + --color-components-chart-current-1: #155AEF; + --color-components-chart-current-2: #D1E0FF; + --color-components-chart-bg: #FFFFFF; + + --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: #155AEF24; + --color-components-dropzone-border: #10182814; + --color-components-dropzone-border-alt: #10182833; + --color-components-dropzone-border-accent: #84ABFF; + + --color-components-progress-brand-progress: #296DFF; + --color-components-progress-brand-border: #296DFF; + --color-components-progress-brand-bg: #155AEF0A; + + --color-components-progress-white-progress: #FFFFFF; + --color-components-progress-white-border: #FFFFFFF2; + --color-components-progress-white-bg: #FFFFFF03; + + --color-components-progress-gray-progress: #98A2B2; + --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; + --color-components-chat-input-bg-mask-2: #F2F4F7; + --color-components-chat-input-border: #FFFFFF; + --color-components-chat-input-audio-wave-active: #296DFF; + --color-components-chat-input-audio-bg-alt: #FCFCFD; + + --color-components-avatar-shape-fill-stop-0: #FFFFFF; + --color-components-avatar-shape-fill-stop-100: #FFFFFFE5; + + --color-components-avatar-bg-mask-stop-0: #FFFFFF1F; + --color-components-avatar-bg-mask-stop-100: #FFFFFF14; + + --color-components-avatar-default-avatar-bg: #D0D5DC; + --color-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; + --color-text-tertiary: #676F83; + --color-text-quaternary: #1018284D; + --color-text-destructive: #D92D20; + --color-text-success: #079455; + --color-text-warning: #DC6803; + --color-text-destructive-secondary: #F04438; + --color-text-success-secondary: #17B26A; + --color-text-warning-secondary: #F79009; + --color-text-accent: #155AEF; + --color-text-primary-on-surface: #FFFFFF; + --color-text-placeholder: #98A2B2; + --color-text-disabled: #D0D5DC; + --color-text-accent-secondary: #296DFF; + --color-text-accent-light-mode-only: #155AEF; + --color-text-text-selected: #155AEF24; + --color-text-secondary-on-surface: #FFFFFFE5; + --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; + --color-background-neutral-subtle: #F9FAFB; + --color-background-sidenav-bg: #FFFFFFCC; + --color-background-default: #FFFFFF; + --color-background-soft: #F9FAFB; + --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB; + --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7; + --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF; + --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF99; + --color-background-gradient-bg-fill-debug-bg-1: #FFFFFF00; + --color-background-gradient-bg-fill-debug-bg-2: #C8CEDA24; + + --color-background-gradient-mask-gray: #C8CEDA33; + --color-background-gradient-mask-transparent: #FFFFFF00; + --color-background-gradient-mask-input-clear-2: #E9EBF000; + --color-background-gradient-mask-input-clear-1: #E9EBF0; + --color-background-gradient-mask-transparent-dark: #00000000; + --color-background-gradient-mask-side-panel-2: #1018284D; + --color-background-gradient-mask-side-panel-1: #10182805; + + --color-background-default-burn: #E9EBF0; + --color-background-overlay-fullscreen: #F9FAFBF2; + --color-background-default-lighter: #FFFFFF80; + --color-background-section: #F9FAFB; + --color-background-interaction-from-bg-1: #C8CEDA33; + --color-background-interaction-from-bg-2: #C8CEDA24; + --color-background-section-burn: #F2F4F7; + --color-background-default-dodge: #FFFFFF; + --color-background-overlay: #10182899; + --color-background-default-dimm: #E9EBF0; + --color-background-default-hover: #F9FAFB; + --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; + --color-shadow-shadow-4: #09090B0F; + --color-shadow-shadow-5: #09090B14; + --color-shadow-shadow-6: #09090B1A; + --color-shadow-shadow-7: #09090B1F; + --color-shadow-shadow-8: #09090B24; + --color-shadow-shadow-9: #09090B2E; + --color-shadow-shadow-2: #09090B0A; + --color-shadow-shadow-10: #09090B0D; + + --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; + --color-workflow-canvas-workflow-bg: #F2F4F7; + + --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; + + --color-workflow-display-success-bg: #ECFDF3; + --color-workflow-display-success-border-1: #17B26ACC; + --color-workflow-display-success-border-2: #17B26A80; + --color-workflow-display-success-vignette-color: #17B26A33; + --color-workflow-display-success-bg-line-pattern: #17B26A4D; + + --color-workflow-display-glass-1: #FFFFFF1F; + --color-workflow-display-glass-2: #FFFFFF80; + --color-workflow-display-vignette-dark: #0000001F; + --color-workflow-display-highlight: #FFFFFF80; + --color-workflow-display-outline: #0000000D; + --color-workflow-display-error-bg: #FEF3F2; + --color-workflow-display-error-bg-line-pattern: #F044384D; + --color-workflow-display-error-border-1: #F04438CC; + --color-workflow-display-error-border-2: #F0443880; + --color-workflow-display-error-vignette-color: #F0443833; + + --color-workflow-display-warning-bg: #FFFAEB; + --color-workflow-display-warning-bg-line-pattern: #F790094D; + --color-workflow-display-warning-border-1: #F79009CC; + --color-workflow-display-warning-border-2: #F7900980; + --color-workflow-display-warning-vignette-color: #F7900933; + + --color-workflow-display-normal-bg: #F0F9FF; + --color-workflow-display-normal-bg-line-pattern: #0BA5EC4D; + --color-workflow-display-normal-border-1: #0BA5ECCC; + --color-workflow-display-normal-border-2: #0BA5EC80; + --color-workflow-display-normal-vignette-color: #0BA5EC33; + + --color-workflow-display-disabled-bg: #F9FAFB; + --color-workflow-display-disabled-bg-line-pattern: #C8CEDA4D; + --color-workflow-display-disabled-border-1: #C8CEDA99; + --color-workflow-display-disabled-border-2: #C8CEDA66; + --color-workflow-display-disabled-vignette-color: #C8CEDA66; + --color-workflow-display-disabled-outline: #00000000; + + --color-workflow-workflow-progress-bg-1: #C8CEDA33; + --color-workflow-workflow-progress-bg-2: #C8CEDA0A; + + --color-divider-subtle: #1018280A; + --color-divider-regular: #10182814; + --color-divider-deep: #10182824; + --color-divider-burn: #1018280A; + --color-divider-intense: #1018284D; + --color-divider-solid: #D0D5DC; + --color-divider-solid-alt: #98A2B2; + + --color-state-base-hover: #C8CEDA33; + --color-state-base-active: #C8CEDA66; + --color-state-base-hover-alt: #C8CEDA66; + --color-state-base-handle: #10182833; + --color-state-base-handle-hover: #1018284D; + + --color-state-accent-hover: #EFF4FF; + --color-state-accent-active: #155AEF14; + --color-state-accent-hover-alt: #D1E0FF; + --color-state-accent-solid: #296DFF; + --color-state-accent-active-alt: #155AEF24; + + --color-state-destructive-hover: #FEF3F2; + --color-state-destructive-hover-alt: #FEE4E2; + --color-state-destructive-active: #FECDCA; + --color-state-destructive-solid: #F04438; + --color-state-destructive-border: #FDA29B; + + --color-state-success-hover: #ECFDF3; + --color-state-success-hover-alt: #DCFAE6; + --color-state-success-active: #ABEFC6; + --color-state-success-solid: #17B26A; + + --color-state-warning-hover: #FFFAEB; + --color-state-warning-hover-alt: #FEF0C7; + --color-state-warning-active: #FEDF89; + --color-state-warning-solid: #F79009; + + --color-effects-highlight: #FFFFFF; + --color-effects-highlight-lightmode-off: #FFFFFF00; + --color-effects-image-frame: #FFFFFF; + + --color-util-colors-orange-dark-orange-dark-50: #FFF4ED; + --color-util-colors-orange-dark-orange-dark-100: #FFE6D5; + --color-util-colors-orange-dark-orange-dark-200: #FFD6AE; + --color-util-colors-orange-dark-orange-dark-300: #FF9C66; + --color-util-colors-orange-dark-orange-dark-400: #FF692E; + --color-util-colors-orange-dark-orange-dark-500: #FF4405; + --color-util-colors-orange-dark-orange-dark-600: #E62E05; + --color-util-colors-orange-dark-orange-dark-700: #BC1B06; + + --color-util-colors-orange-orange-50: #FEF6EE; + --color-util-colors-orange-orange-100: #FDEAD7; + --color-util-colors-orange-orange-200: #F9DBAF; + --color-util-colors-orange-orange-300: #F7B27A; + --color-util-colors-orange-orange-400: #F38744; + --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; + --color-util-colors-pink-pink-200: #FCCEEE; + --color-util-colors-pink-pink-300: #FAA7E0; + --color-util-colors-pink-pink-400: #F670C7; + --color-util-colors-pink-pink-500: #EE46BC; + --color-util-colors-pink-pink-600: #DD2590; + --color-util-colors-pink-pink-700: #C11574; + + --color-util-colors-fuchsia-fuchsia-50: #FDF4FF; + --color-util-colors-fuchsia-fuchsia-100: #FBE8FF; + --color-util-colors-fuchsia-fuchsia-200: #F6D0FE; + --color-util-colors-fuchsia-fuchsia-300: #EEAAFD; + --color-util-colors-fuchsia-fuchsia-400: #E478FA; + --color-util-colors-fuchsia-fuchsia-500: #D444F1; + --color-util-colors-fuchsia-fuchsia-600: #BA24D5; + --color-util-colors-fuchsia-fuchsia-700: #9F1AB1; + + --color-util-colors-purple-purple-50: #F4F3FF; + --color-util-colors-purple-purple-100: #EBE9FE; + --color-util-colors-purple-purple-200: #D9D6FE; + --color-util-colors-purple-purple-300: #BDB4FE; + --color-util-colors-purple-purple-400: #9B8AFB; + --color-util-colors-purple-purple-500: #7A5AF8; + --color-util-colors-purple-purple-600: #6938EF; + --color-util-colors-purple-purple-700: #5925DC; + + --color-util-colors-indigo-indigo-50: #EEF4FF; + --color-util-colors-indigo-indigo-100: #E0EAFF; + --color-util-colors-indigo-indigo-200: #C7D7FE; + --color-util-colors-indigo-indigo-300: #A4BCFD; + --color-util-colors-indigo-indigo-400: #8098F9; + --color-util-colors-indigo-indigo-500: #6172F3; + --color-util-colors-indigo-indigo-600: #444CE7; + --color-util-colors-indigo-indigo-700: #3538CD; + + --color-util-colors-blue-blue-50: #EFF8FF; + --color-util-colors-blue-blue-100: #D1E9FF; + --color-util-colors-blue-blue-200: #B2DDFF; + --color-util-colors-blue-blue-300: #84CAFF; + --color-util-colors-blue-blue-400: #53B1FD; + --color-util-colors-blue-blue-500: #2E90FA; + --color-util-colors-blue-blue-600: #1570EF; + --color-util-colors-blue-blue-700: #175CD3; + + --color-util-colors-blue-light-blue-light-50: #F0F9FF; + --color-util-colors-blue-light-blue-light-100: #E0F2FE; + --color-util-colors-blue-light-blue-light-200: #B9E6FE; + --color-util-colors-blue-light-blue-light-300: #7CD4FD; + --color-util-colors-blue-light-blue-light-400: #36BFFA; + --color-util-colors-blue-light-blue-light-500: #0BA5EC; + --color-util-colors-blue-light-blue-light-600: #0086C9; + --color-util-colors-blue-light-blue-light-700: #026AA2; + + --color-util-colors-gray-blue-gray-blue-50: #F8F9FC; + --color-util-colors-gray-blue-gray-blue-100: #EAECF5; + --color-util-colors-gray-blue-gray-blue-200: #D5D9EB; + --color-util-colors-gray-blue-gray-blue-300: #B3B8DB; + --color-util-colors-gray-blue-gray-blue-400: #717BBC; + --color-util-colors-gray-blue-gray-blue-500: #4E5BA6; + --color-util-colors-gray-blue-gray-blue-600: #3E4784; + --color-util-colors-gray-blue-gray-blue-700: #363F72; + + --color-util-colors-blue-brand-blue-brand-50: #F5F7FF; + --color-util-colors-blue-brand-blue-brand-100: #D1E0FF; + --color-util-colors-blue-brand-blue-brand-200: #B2CAFF; + --color-util-colors-blue-brand-blue-brand-300: #84ABFF; + --color-util-colors-blue-brand-blue-brand-400: #5289FF; + --color-util-colors-blue-brand-blue-brand-500: #296DFF; + --color-util-colors-blue-brand-blue-brand-600: #155AEF; + --color-util-colors-blue-brand-blue-brand-700: #004AEB; + + --color-util-colors-red-red-50: #FEF3F2; + --color-util-colors-red-red-100: #FEE4E2; + --color-util-colors-red-red-200: #FECDCA; + --color-util-colors-red-red-300: #FDA29B; + --color-util-colors-red-red-400: #F97066; + --color-util-colors-red-red-500: #F04438; + --color-util-colors-red-red-600: #D92D20; + --color-util-colors-red-red-700: #B42318; + + --color-util-colors-green-green-50: #ECFDF3; + --color-util-colors-green-green-100: #DCFAE6; + --color-util-colors-green-green-200: #ABEFC6; + --color-util-colors-green-green-300: #75E0A7; + --color-util-colors-green-green-400: #47CD89; + --color-util-colors-green-green-500: #17B26A; + --color-util-colors-green-green-600: #079455; + --color-util-colors-green-green-700: #067647; + + --color-util-colors-warning-warning-50: #FFFAEB; + --color-util-colors-warning-warning-100: #FEF0C7; + --color-util-colors-warning-warning-200: #FEDF89; + --color-util-colors-warning-warning-300: #FEC84B; + --color-util-colors-warning-warning-400: #FDB022; + --color-util-colors-warning-warning-500: #F79009; + --color-util-colors-warning-warning-600: #DC6803; + --color-util-colors-warning-warning-700: #B54708; + + --color-util-colors-yellow-yellow-50: #FEFBE8; + --color-util-colors-yellow-yellow-100: #FEF7C3; + --color-util-colors-yellow-yellow-200: #FEEE95; + --color-util-colors-yellow-yellow-300: #FDE272; + --color-util-colors-yellow-yellow-400: #FAC515; + --color-util-colors-yellow-yellow-500: #EAAA08; + --color-util-colors-yellow-yellow-600: #CA8504; + --color-util-colors-yellow-yellow-700: #A15C07; + + --color-util-colors-teal-teal-50: #F0FDF9; + --color-util-colors-teal-teal-100: #CCFBEF; + --color-util-colors-teal-teal-200: #99F6E0; + --color-util-colors-teal-teal-300: #5FE9D0; + --color-util-colors-teal-teal-400: #2ED3B7; + --color-util-colors-teal-teal-500: #15B79E; + --color-util-colors-teal-teal-600: #0E9384; + --color-util-colors-teal-teal-700: #107569; + + --color-util-colors-cyan-cyan-50: #ECFDFF; + --color-util-colors-cyan-cyan-100: #CFF9FE; + --color-util-colors-cyan-cyan-200: #A5F0FC; + --color-util-colors-cyan-cyan-300: #67E3F9; + --color-util-colors-cyan-cyan-400: #22CCEE; + --color-util-colors-cyan-cyan-500: #06AED4; + --color-util-colors-cyan-cyan-600: #088AB2; + --color-util-colors-cyan-cyan-700: #0E7090; + + --color-util-colors-violet-violet-50: #F5F3FF; + --color-util-colors-violet-violet-100: #ECE9FE; + --color-util-colors-violet-violet-200: #DDD6FE; + --color-util-colors-violet-violet-300: #C3B5FD; + --color-util-colors-violet-violet-400: #A48AFB; + --color-util-colors-violet-violet-500: #875BF7; + --color-util-colors-violet-violet-600: #7839EE; + --color-util-colors-violet-violet-700: #6927DA; + + --color-util-colors-gray-gray-50: #F9FAFB; + --color-util-colors-gray-gray-100: #F2F4F7; + --color-util-colors-gray-gray-200: #E9EBF0; + --color-util-colors-gray-gray-300: #D0D5DC; + --color-util-colors-gray-gray-400: #98A2B2; + --color-util-colors-gray-gray-500: #676F83; + --color-util-colors-gray-gray-600: #495464; + --color-util-colors-gray-gray-700: #354052; + + --color-util-colors-green-light-green-light-50: #F3FEE7; + --color-util-colors-green-light-green-light-100: #E3FBCC; + --color-util-colors-green-light-green-light-200: #D0F8AB; + --color-util-colors-green-light-green-light-300: #A6EF67; + --color-util-colors-green-light-green-light-500: #66C61C; + --color-util-colors-green-light-green-light-400: #85E13A; + --color-util-colors-green-light-green-light-600: #4CA30D; + --color-util-colors-green-light-green-light-700: #3B7C0F; + + --color-util-colors-rose-rose-50: #FFF1F3; + --color-util-colors-rose-rose-100: #FFE4E8; + --color-util-colors-rose-rose-200: #FECDD6; + --color-util-colors-rose-rose-300: #FEA3B4; + --color-util-colors-rose-rose-400: #FD6F8E; + --color-util-colors-rose-rose-500: #F63D68; + --color-util-colors-rose-rose-600: #E31B54; + --color-util-colors-rose-rose-700: #C01048; + + --color-util-colors-midnight-midnight-50: #FBFBFC; + --color-util-colors-midnight-midnight-100: #F0F2F5; + --color-util-colors-midnight-midnight-200: #DFE1EA; + --color-util-colors-midnight-midnight-300: #C6CBD9; + --color-util-colors-midnight-midnight-400: #A7AEC5; + --color-util-colors-midnight-midnight-500: #828DAD; + --color-util-colors-midnight-midnight-600: #5D698D; + --color-util-colors-midnight-midnight-700: #3E465E; + + --color-third-party-LangChain: #1C3C3C; + --color-third-party-Langfuse: #000000; + + --color-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%); + --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); + } +} + + html[data-theme="light"] { --color-components-input-bg-normal: #C8CEDA40; --color-components-input-text-placeholder: #98A2B2;