From f8afa49ab987aa865830f0eccce84deb289b85c4 Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Tue, 30 Jun 2026 15:54:13 +0800 Subject: [PATCH] chore(dify-ui): update theme tokens (#38189) --- packages/dify-ui/src/themes/dark.css | 977 +++++++++++++------------ packages/dify-ui/src/themes/light.css | 979 ++++++++++++++------------ packages/dify-ui/src/themes/theme.css | 945 +++++++++++++------------ 3 files changed, 1515 insertions(+), 1386 deletions(-) diff --git a/packages/dify-ui/src/themes/dark.css b/packages/dify-ui/src/themes/dark.css index 3f4a163a725..fb969b5fa01 100644 --- a/packages/dify-ui/src/themes/dark.css +++ b/packages/dify-ui/src/themes/dark.css @@ -1,33 +1,367 @@ /* Attention: Generate by code. Don't update by hand!!! */ html[data-theme="dark"] { + --color-text-primary: #fbfbfc; + --color-text-secondary: #d9d9de; + --color-text-tertiary: rgb(200 206 218 / 0.6); + --color-text-quaternary: rgb(200 206 218 / 0.4); + --color-text-empty-state-icon: rgb(200 206 218 / 0.3); + --color-text-primary-on-surface: rgb(255 255 255 / 0.95); + --color-text-secondary-on-surface: rgb(255 255 255 / 0.9); + --color-text-destructive: #f97066; + --color-text-destructive-secondary: #f97066; + --color-text-success: #17b26a; + --color-text-success-secondary: #47cd89; + --color-text-warning: #f79009; + --color-text-warning-secondary: #fdb022; + --color-text-accent: #6694ff; + --color-text-accent-secondary: #3072ff; + --color-text-accent-light-mode-only: #d9d9de; + --color-text-placeholder: rgb(200 206 218 / 0.3); + --color-text-disabled: rgb(200 206 218 / 0.3); + --color-text-text-selected: rgb(8 90 252 / 0.3); + --color-text-logo-text: #e9e9ec; + --color-text-inverted: #ffffff; + --color-text-inverted-dimmed: rgb(255 255 255 / 0.8); + + --color-background-body: #1d1d20; + --color-background-body-transparent: rgb(29 29 32 / 0); + --color-background-default: #222225; + --color-background-default-hover: #27272b; + --color-background-default-hover-alpha-0: rgb(39 39 43 / 0); + --color-background-default-subtle: #222225; + --color-background-default-dodge: #3a3a40; + --color-background-default-burn: #1d1d20; + --color-background-default-dimmed: #27272b; + --color-background-default-lighter: rgb(200 206 218 / 0.04); + --color-background-section: rgb(24 24 27 / 0.4); + --color-background-section-burn: rgb(24 24 27 / 0.6); + --color-background-section-burn-inverted: #27272b; + --color-background-soft: rgb(24 24 27 / 0.25); + --color-background-neutral-subtle: #1d1d20; + --color-background-surface-white: rgb(255 255 255 / 0.9); + --color-background-sidenav-bg: rgb(39 39 42 / 0.92); + --color-background-overlay-fullscreen: rgb(39 39 42 / 0.97); + --color-background-overlay-backdrop: rgb(24 24 27 / 0.95); + --color-background-overlay: rgb(24 24 27 / 0.8); + --color-background-overlay-alt: rgb(24 24 27 / 0.4); + --color-background-overlay-destructive: rgb(240 68 56 / 0.3); + --color-background-interaction-from-bg-1: rgb(24 24 27 / 0.4); + --color-background-interaction-from-bg-2: rgb(24 24 27 / 0.14); + --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: rgb(200 206 218 / 0.08); + --color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(200 206 218 / 0.02); + --color-background-gradient-bg-fill-debug-bg-1: rgb(200 206 218 / 0.08); + --color-background-gradient-bg-fill-debug-bg-2: rgb(24 24 27 / 0.04); + + --color-background-gradient-mask-gray: rgb(24 24 27 / 0.08); + --color-background-gradient-mask-transparent: rgb(0 0 0 / 0); + --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0); + --color-background-gradient-mask-side-panel-1: rgb(24 24 27 / 0.04); + --color-background-gradient-mask-side-panel-2: rgb(24 24 27 / 0.9); + --color-background-gradient-mask-input-clear-1: #393a3e; + --color-background-gradient-mask-input-clear-2: rgb(57 58 62 / 0); + + --color-state-base-hover-subtle: rgb(200 206 218 / 0.04); + --color-state-base-hover: rgb(200 206 218 / 0.08); + --color-state-base-hover-alt: rgb(200 206 218 / 0.14); + --color-state-base-active: rgb(200 206 218 / 0.2); + --color-state-base-handle: rgb(200 206 218 / 0.3); + --color-state-base-handle-hover: rgb(200 206 218 / 0.5); + + --color-state-accent-hover: rgb(8 90 252 / 0.14); + --color-state-accent-hover-alt: rgb(8 90 252 / 0.25); + --color-state-accent-active: rgb(8 90 252 / 0.14); + --color-state-accent-active-alt: rgb(8 90 252 / 0.2); + --color-state-accent-solid: #3072ff; + + --color-state-destructive-hover: rgb(240 68 56 / 0.14); + --color-state-destructive-hover-transparent: rgb(240 68 56 / 0); + --color-state-destructive-hover-alt: rgb(240 68 56 / 0.25); + --color-state-destructive-active: rgb(240 68 56 / 0.3); + --color-state-destructive-solid: #f97066; + --color-state-destructive-border: #f97066; + + --color-state-warning-hover: rgb(247 144 9 / 0.14); + --color-state-warning-hover-transparent: rgb(247 144 9 / 0); + --color-state-warning-hover-alt: rgb(247 144 9 / 0.25); + --color-state-warning-active: rgb(247 144 9 / 0.3); + --color-state-warning-solid: #f79009; + + --color-state-success-hover: rgb(23 178 106 / 0.14); + --color-state-success-hover-alt: rgb(23 178 106 / 0.25); + --color-state-success-active: rgb(23 178 106 / 0.3); + --color-state-success-solid: #47cd89; + + --color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25); + --color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04); + + --color-workflow-block-bg: #27272b; + --color-workflow-block-bg-transparent: rgb(39 39 43 / 0.96); + --color-workflow-block-border: rgb(255 255 255 / 0.08); + --color-workflow-block-border-highlight: rgb(200 206 218 / 0.2); + --color-workflow-block-parma-bg: rgb(255 255 255 / 0.05); + --color-workflow-block-wrapper-bg-1: #27272b; + --color-workflow-block-wrapper-bg-2: rgb(39 39 43 / 0.2); + + --color-workflow-link-line-normal: #676f83; + --color-workflow-link-line-normal-transparent: rgb(103 111 131 / 0.2); + --color-workflow-link-line-active: #3072ff; + --color-workflow-link-line-handle: #3072ff; + --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-block: rgb(200 206 218 / 0.08); + --color-workflow-minimap-bg: #27272b; + + --color-workflow-display-glass-1: rgb(255 255 255 / 0.03); + --color-workflow-display-glass-2: rgb(255 255 255 / 0.05); + --color-workflow-display-highlight: rgb(255 255 255 / 0.12); + --color-workflow-display-outline: rgb(24 24 27 / 0.95); + --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.4); + --color-workflow-display-success-bg: rgb(23 178 106 / 0.2); + --color-workflow-display-success-bg-line-pattern: rgb(24 24 27 / 0.8); + --color-workflow-display-success-border-1: rgb(23 178 106 / 0.9); + --color-workflow-display-success-border-2: rgb(23 178 106 / 0.8); + --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.25); + + --color-workflow-display-error-bg: rgb(240 68 56 / 0.2); + --color-workflow-display-error-bg-line-pattern: rgb(24 24 27 / 0.8); + --color-workflow-display-error-border-1: rgb(240 68 56 / 0.9); + --color-workflow-display-error-border-2: rgb(240 68 56 / 0.8); + --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.25); + + --color-workflow-display-warning-bg: rgb(247 144 9 / 0.2); + --color-workflow-display-warning-bg-line-pattern: rgb(24 24 27 / 0.8); + --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.9); + --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.8); + --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.25); + + --color-workflow-display-normal-bg: rgb(11 165 236 / 0.2); + --color-workflow-display-normal-bg-line-pattern: rgb(24 24 27 / 0.8); + --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.9); + --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.8); + --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.25); + + --color-workflow-display-disabled-bg: rgb(200 206 218 / 0.2); + --color-workflow-display-disabled-bg-line-pattern: rgb(24 24 27 / 0.8); + --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6); + --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.25); + --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.25); + --color-workflow-display-disabled-outline: rgb(24 24 27 / 0.95); + + --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11); + --color-workflow-canvas-workflow-bg: #1d1d20; + --color-workflow-canvas-workflow-top-bar-1: rgb(29 29 32 / 0.9); + --color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08); + --color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8); + + --color-workflow-debug-run-status-bg: rgb(230 46 5 / 0.4); + --color-workflow-debug-run-status-bg-alt: rgb(255 46 0 / 0.5); + --color-workflow-debug-breakpoint: #ff692e; + --color-workflow-debug-text: #ff9c66; + --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); + + --color-workflow-test-run-run-status-bg: rgb(8 90 252 / 0.5); + --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.3); + --color-workflow-test-run-paused-text: #fdb022; + --color-workflow-test-run-run-status-bg-alt: rgb(45 90 190 / 0.9); + --color-workflow-test-run-text: #d0dfff; + + --color-components-icon-bg-red-solid: #d92d20; + --color-components-icon-bg-rose-solid: #e31b54; + --color-components-icon-bg-pink-solid: #dd2590; + --color-components-icon-bg-orange-dark-solid: #ff4405; + --color-components-icon-bg-orange-solid: #f79009; + --color-components-icon-bg-yellow-solid: #eaaa08; + --color-components-icon-bg-green-solid: #4ca30d; + --color-components-icon-bg-teal-solid: #0e9384; + --color-components-icon-bg-blue-light-solid: #0ba5ec; + --color-components-icon-bg-blue-solid: #085afc; + --color-components-icon-bg-indigo-solid: #444ce7; + --color-components-icon-bg-violet-solid: #7839ee; + --color-components-icon-bg-midnight-solid: #5d698d; + --color-components-icon-bg-red-soft: rgb(240 68 56 / 0.2); + --color-components-icon-bg-rose-soft: rgb(246 61 104 / 0.2); + --color-components-icon-bg-pink-soft: rgb(238 70 188 / 0.2); + --color-components-icon-bg-orange-dark-soft: rgb(255 68 5 / 0.2); + --color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2); + --color-components-icon-bg-yellow-soft: rgb(234 170 8 / 0.2); + --color-components-icon-bg-green-soft: rgb(102 198 28 / 0.2); + --color-components-icon-bg-teal-soft: rgb(21 183 158 / 0.2); + --color-components-icon-bg-blue-light-soft: rgb(11 165 236 / 0.2); + --color-components-icon-bg-blue-soft: rgb(0 51 255 / 0.2); + --color-components-icon-bg-indigo-soft: rgb(97 114 243 / 0.2); + --color-components-icon-bg-violet-soft: rgb(135 91 247 / 0.2); + --color-components-icon-bg-midnight-soft: rgb(130 141 173 / 0.2); + + --color-components-avatar-default-avatar-bg: #222225; + --color-components-avatar-mask-darkmode-dimmed: rgb(0 0 0 / 0.12); + --color-components-avatar-shape-fill-stop-0: rgb(255 255 255 / 0.95); + --color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.8); + + --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.2); + --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.03); + + --color-components-chat-input-audio-bg: rgb(0 51 255 / 0.2); + --color-components-chat-input-audio-bg-alt: rgb(24 24 27 / 0.9); + --color-components-chat-input-audio-wave-default: rgb(200 206 218 / 0.14); + --color-components-chat-input-audio-wave-active: #6694ff; + --color-components-chat-input-bg-mask-1: rgb(24 24 27 / 0.04); + --color-components-chat-input-bg-mask-2: rgb(24 24 27 / 0.6); + --color-components-chat-input-border: rgb(200 206 218 / 0.2); + + --color-components-label-gray: rgb(200 206 218 / 0.14); + + --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12); + --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.2); + --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: rgb(255 255 255 / 0.2); + --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: rgb(255 255 255 / 0.5); + --color-components-premium-badge-orange-stroke-stop-100-hover: #ff4405; + + --color-components-premium-badge-blue-bg-stop-0: #3072ff; + --color-components-premium-badge-blue-bg-stop-100: #085afc; + --color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.2); + --color-components-premium-badge-blue-stroke-stop-100: #085afc; + --color-components-premium-badge-blue-text-stop-0: #e9f0ff; + --color-components-premium-badge-blue-text-stop-100: #a0bdff; + --color-components-premium-badge-blue-glow: #002cde; + --color-components-premium-badge-blue-glow-hover: #d0dfff; + --color-components-premium-badge-blue-bg-stop-0-hover: #6694ff; + --color-components-premium-badge-blue-bg-stop-100-hover: #002cde; + --color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.5); + --color-components-premium-badge-blue-stroke-stop-100-hover: #085afc; + + --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: rgb(255 255 255 / 0.2); + --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: rgb(255 255 255 / 0.5); + --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: rgb(255 255 255 / 0.12); + --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: rgb(255 255 255 / 0.5); + --color-components-premium-badge-grey-stroke-stop-100-hover: #676f83; + + --color-components-dropzone-bg: rgb(24 24 27 / 0.4); + --color-components-dropzone-bg-alt: rgb(24 24 27 / 0.8); + --color-components-dropzone-bg-accent: rgb(0 51 255 / 0.2); + --color-components-dropzone-border: rgb(200 206 218 / 0.14); + --color-components-dropzone-border-alt: rgb(200 206 218 / 0.2); + --color-components-dropzone-border-accent: #6694ff; + + --color-components-panel-bg: #222225; + --color-components-panel-bg-transparent: rgb(34 34 37 / 0); + --color-components-panel-bg-alt: #222225; + --color-components-panel-bg-blur: rgb(44 44 48 / 0.95); + --color-components-panel-bg-blur-burn: rgb(31 31 35 / 0.9); + --color-components-panel-border: rgb(200 206 218 / 0.14); + --color-components-panel-border-subtle: rgb(200 206 218 / 0.08); + --color-components-panel-gradient-1: #27272b; + --color-components-panel-gradient-2: #222225; + --color-components-panel-on-panel-item-bg: #27272b; + --color-components-panel-on-panel-item-bg-transparent: rgb(44 44 48 / 0.95); + --color-components-panel-on-panel-item-bg-hover: #3a3a40; + --color-components-panel-on-panel-item-bg-hover-transparent: rgb(58 58 64 / 0); + --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0); + --color-components-panel-on-panel-item-bg-alt: #3a3a40; + + --color-components-marketplace-header-bg: rgb(31 31 35 / 0.9); + + --color-components-card-bg: #222225; + --color-components-card-bg-alt: #27272b; + --color-components-card-bg-transparent: rgb(34 34 37 / 0); + --color-components-card-bg-alt-transparent: rgb(39 39 43 / 0); + --color-components-card-border: rgb(255 255 255 / 0.03); + + --color-components-actionbar-border: rgb(200 206 218 / 0.08); + --color-components-actionbar-bg: #222225; + --color-components-actionbar-bg-accent: #27272b; + --color-components-actionbar-border-accent: #3072ff; + --color-components-input-bg-normal: rgb(255 255 255 / 0.08); - --color-components-input-text-placeholder: rgb(200 206 218 / 0.3); --color-components-input-bg-hover: rgb(255 255 255 / 0.03); --color-components-input-bg-active: rgb(255 255 255 / 0.05); - --color-components-input-border-active: #747481; - --color-components-input-border-destructive: #f97066; - --color-components-input-text-filled: #f4f4f5; - --color-components-input-bg-destructive: rgb(255 255 255 / 0.01); --color-components-input-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-input-bg-destructive: rgb(255 255 255 / 0.01); + --color-components-input-text-filled: #f4f4f5; + --color-components-input-text-placeholder: rgb(200 206 218 / 0.3); --color-components-input-text-disabled: rgb(200 206 218 / 0.3); --color-components-input-text-filled-disabled: rgb(200 206 218 / 0.6); + --color-components-input-text-filled-blue: #6694ff; --color-components-input-border-hover: #3a3a40; + --color-components-input-border-active: #747481; --color-components-input-border-active-prompt-1: #36bffa; - --color-components-input-border-active-prompt-2: #296dff; + --color-components-input-border-active-prompt-2: #085afc; + --color-components-input-border-destructive: #f97066; - --color-components-kbd-bg-gray: rgb(255 255 255 / 0.03); - --color-components-kbd-bg-white: rgb(255 255 255 / 0.12); + --color-components-progress-brand-progress: #3072ff; + --color-components-progress-brand-border: #3072ff; + --color-components-progress-brand-bg: rgb(8 90 252 / 0.04); - --color-components-tooltip-bg: rgb(24 24 27 / 0.95); + --color-components-progress-white-progress: #ffffff; + --color-components-progress-white-border: rgb(255 255 255 / 0.95); + --color-components-progress-white-bg: rgb(255 255 255 / 0.01); + --color-components-progress-gray-progress: #98a2b2; + --color-components-progress-gray-border: #98a2b2; + --color-components-progress-gray-bg: rgb(200 206 218 / 0.02); + + --color-components-progress-warning-progress: #fdb022; + --color-components-progress-warning-border: #fdb022; + --color-components-progress-warning-bg: rgb(247 144 9 / 0.04); + + --color-components-progress-error-progress: #f97066; + --color-components-progress-error-border: #f97066; + --color-components-progress-error-bg: rgb(240 68 56 / 0.04); + + --color-components-progress-bar-progress: rgb(200 206 218 / 0.14); + --color-components-progress-bar-progress-highlight: rgb(200 206 218 / 0.2); + --color-components-progress-bar-progress-solid: rgb(255 255 255 / 0.95); + --color-components-progress-bar-border: rgb(255 255 255 / 0.03); + --color-components-progress-bar-bg: rgb(200 206 218 / 0.08); + + --color-components-button-button-seam: rgb(0 0 0 / 0.15); --color-components-button-primary-text: rgb(255 255 255 / 0.95); - --color-components-button-primary-bg: #155aef; - --color-components-button-primary-border: rgb(255 255 255 / 0.12); - --color-components-button-primary-bg-hover: #296dff; - --color-components-button-primary-border-hover: rgb(255 255 255 / 0.2); - --color-components-button-primary-bg-disabled: rgb(255 255 255 / 0.03); - --color-components-button-primary-border-disabled: rgb(255 255 255 / 0.08); --color-components-button-primary-text-disabled: rgb(255 255 255 / 0.2); + --color-components-button-primary-bg: #085afc; + --color-components-button-primary-bg-hover: #3072ff; + --color-components-button-primary-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-button-primary-border: rgb(255 255 255 / 0.12); + --color-components-button-primary-border-hover: rgb(255 255 255 / 0.2); + --color-components-button-primary-border-disabled: rgb(255 255 255 / 0.08); --color-components-button-secondary-text: rgb(255 255 255 / 0.8); --color-components-button-secondary-text-disabled: rgb(255 255 255 / 0.2); @@ -38,6 +372,15 @@ html[data-theme="dark"] { --color-components-button-secondary-border-hover: rgb(255 255 255 / 0.12); --color-components-button-secondary-border-disabled: rgb(255 255 255 / 0.05); + --color-components-button-secondary-accent-text: rgb(255 255 255 / 0.8); + --color-components-button-secondary-accent-text-disabled: rgb(255 255 255 / 0.2); + --color-components-button-secondary-accent-bg: rgb(255 255 255 / 0.05); + --color-components-button-secondary-accent-bg-hover: rgb(255 255 255 / 0.08); + --color-components-button-secondary-accent-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-button-secondary-accent-border: rgb(255 255 255 / 0.08); + --color-components-button-secondary-accent-border-hover: rgb(255 255 255 / 0.12); + --color-components-button-secondary-accent-border-disabled: rgb(255 255 255 / 0.05); + --color-components-button-tertiary-text: #d9d9de; --color-components-button-tertiary-text-disabled: rgb(255 255 255 / 0.2); --color-components-button-tertiary-bg: rgb(255 255 255 / 0.08); @@ -76,133 +419,99 @@ html[data-theme="dark"] { --color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2); --color-components-button-destructive-ghost-bg-hover: rgb(240 68 56 / 0.14); - --color-components-button-secondary-accent-text: rgb(255 255 255 / 0.8); - --color-components-button-secondary-accent-text-disabled: rgb(255 255 255 / 0.2); - --color-components-button-secondary-accent-bg: rgb(255 255 255 / 0.05); - --color-components-button-secondary-accent-bg-hover: rgb(255 255 255 / 0.08); - --color-components-button-secondary-accent-bg-disabled: rgb(255 255 255 / 0.03); - --color-components-button-secondary-accent-border: rgb(255 255 255 / 0.08); - --color-components-button-secondary-accent-border-hover: rgb(255 255 255 / 0.12); - --color-components-button-secondary-accent-border-disabled: rgb(255 255 255 / 0.05); - --color-components-button-indigo-bg: #444ce7; --color-components-button-indigo-bg-hover: #6172f3; --color-components-button-indigo-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-button-debug-text: rgb(255 255 255 / 0.95); + --color-components-button-debug-text-disabled: rgb(255 255 255 / 0.2); + --color-components-button-debug-bg: #ff4405; + --color-components-button-debug-bg-hover: #ff692e; + --color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.08); + --color-components-button-debug-border: rgb(255 255 255 / 0.12); + --color-components-button-debug-border-hover: rgb(255 255 255 / 0.2); + --color-components-button-debug-border-disabled: rgb(255 255 255 / 0.08); + --color-components-checkbox-icon: rgb(255 255 255 / 0.95); --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.2); - --color-components-checkbox-bg: #296dff; - --color-components-checkbox-bg-hover: #5289ff; + --color-components-checkbox-bg: #085afc; + --color-components-checkbox-bg-hover: #3072ff; --color-components-checkbox-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-checkbox-bg-disabled-checked: rgb(8 90 252 / 0.2); + --color-components-checkbox-bg-unchecked: rgb(255 255 255 / 0.03); + --color-components-checkbox-bg-unchecked-hover: rgb(255 255 255 / 0.05); --color-components-checkbox-border: rgb(255 255 255 / 0.4); --color-components-checkbox-border-hover: rgb(255 255 255 / 0.6); --color-components-checkbox-border-disabled: rgb(255 255 255 / 0.01); - --color-components-checkbox-bg-unchecked: rgb(255 255 255 / 0.03); - --color-components-checkbox-bg-unchecked-hover: rgb(255 255 255 / 0.05); - --color-components-checkbox-bg-disabled-checked: rgb(21 90 239 / 0.2); - --color-components-radio-border-checked: #296dff; - --color-components-radio-border-checked-hover: #5289ff; - --color-components-radio-border-checked-disabled: rgb(21 90 239 / 0.2); + --color-components-radio-bg: rgb(255 255 255 / 0); + --color-components-radio-bg-hover: rgb(255 255 255 / 0.05); --color-components-radio-bg-disabled: rgb(255 255 255 / 0.03); + --color-components-radio-border-checked: #085afc; + --color-components-radio-border-checked-hover: #3072ff; + --color-components-radio-border-checked-disabled: rgb(8 90 252 / 0.2); --color-components-radio-border: rgb(255 255 255 / 0.4); --color-components-radio-border-hover: rgb(255 255 255 / 0.6); --color-components-radio-border-disabled: rgb(255 255 255 / 0.01); - --color-components-radio-bg: rgb(255 255 255 / 0); - --color-components-radio-bg-hover: rgb(255 255 255 / 0.05); --color-components-toggle-knob: #f4f4f5; + --color-components-toggle-knob-hover: #fefefe; --color-components-toggle-knob-disabled: rgb(255 255 255 / 0.2); - --color-components-toggle-bg: #296dff; - --color-components-toggle-bg-hover: #5289ff; + --color-components-toggle-bg: #085afc; + --color-components-toggle-bg-hover: #3072ff; --color-components-toggle-bg-disabled: rgb(255 255 255 / 0.08); --color-components-toggle-bg-unchecked: rgb(255 255 255 / 0.2); --color-components-toggle-bg-unchecked-hover: rgb(255 255 255 / 0.3); --color-components-toggle-bg-unchecked-disabled: rgb(255 255 255 / 0.08); - --color-components-toggle-knob-hover: #fefefe; - - --color-components-card-bg: #222225; - --color-components-card-border: rgb(255 255 255 / 0.03); - --color-components-card-bg-alt: #27272b; - --color-components-card-bg-transparent: rgb(34 34 37 / 0); - --color-components-card-bg-alt-transparent: rgb(39 39 43 / 0); - - --color-components-menu-item-text: rgb(200 206 218 / 0.6); - --color-components-menu-item-text-active: rgb(255 255 255 / 0.95); - --color-components-menu-item-text-hover: rgb(200 206 218 / 0.8); - --color-components-menu-item-text-active-accent: rgb(255 255 255 / 0.95); - --color-components-menu-item-bg-active: rgb(200 206 218 / 0.14); - --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.08); - - --color-components-panel-bg: #222225; - --color-components-panel-bg-blur: rgb(44 44 48 / 0.95); - --color-components-panel-border: rgb(200 206 218 / 0.14); - --color-components-panel-border-subtle: rgb(200 206 218 / 0.08); - --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: rgb(44 44 48 / 0.95); - --color-components-panel-on-panel-item-bg-hover-transparent: rgb(58 58 64 / 0); - --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0); - - --color-components-panel-bg-transparent: rgb(34 34 37 / 0); - - --color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6); - --color-components-main-nav-nav-button-text-active: #f4f4f5; - --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0); - --color-components-main-nav-nav-button-bg-active: rgb(200 206 218 / 0.14); - --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.08); - --color-components-main-nav-nav-button-bg-hover: rgb(200 206 218 / 0.04); - --color-components-main-nav-glass-text-glow: #3146ff2e; - --color-components-main-nav-glass-surface-first: #0033ff14; - --color-components-main-nav-glass-surface-middle-1: #0033ff1f; - --color-components-main-nav-glass-surface-middle-2: #0033ff1a; - --color-components-main-nav-glass-surface-end: #0033ff14; - --color-components-main-nav-glass-edge-highlight-first: #fffffffa; - --color-components-main-nav-glass-edge-highlight-middle: #ffffff00; - --color-components-main-nav-glass-edge-highlight-end: #ffffff6b; - --color-components-main-nav-glass-edge-reflection-first: #0033ff00; - --color-components-main-nav-glass-edge-reflection-middle: #0033ff99; - --color-components-main-nav-glass-edge-reflection-end: #0033ff00; - --color-components-main-nav-glass-inner-glow: #ffffff4d; - --color-components-main-nav-glass-shadow-reflection: #0033ff0a; - --color-components-main-nav-glass-shadow-reflection-glow: #ffffff00; - - --color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05); - - --color-components-slider-knob: #f4f4f5; - --color-components-slider-knob-hover: #fefefe; - --color-components-slider-knob-disabled: rgb(255 255 255 / 0.2); - --color-components-slider-range: #296dff; - --color-components-slider-track: rgb(255 255 255 / 0.2); - --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.3); - --color-components-slider-knob-border: rgb(16 24 40 / 0.2); - - --color-components-segmented-control-item-active-bg: rgb(255 255 255 / 0.08); - --color-components-segmented-control-item-active-border: rgb(200 206 218 / 0.08); - --color-components-segmented-control-bg-normal: rgb(24 24 27 / 0.7); - --color-components-segmented-control-item-active-accent-bg: rgb(21 90 239 / 0.2); - --color-components-segmented-control-item-active-accent-border: rgb(21 90 239 / 0.3); --color-components-option-card-option-bg: rgb(200 206 218 / 0.04); - --color-components-option-card-option-selected-bg: rgb(255 255 255 / 0.05); - --color-components-option-card-option-selected-border: #5289ff; --color-components-option-card-option-border: rgb(200 206 218 / 0.2); --color-components-option-card-option-bg-hover: rgb(200 206 218 / 0.14); --color-components-option-card-option-border-hover: rgb(200 206 218 / 0.3); + --color-components-option-card-option-selected-bg: rgb(255 255 255 / 0.05); + --color-components-option-card-option-selected-border: #3072ff; - --color-components-tab-active: #296dff; + --color-components-slider-knob: #f4f4f5; + --color-components-slider-knob-border: rgb(16 24 40 / 0.2); + --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.3); + --color-components-slider-knob-hover: #fefefe; + --color-components-slider-knob-disabled: rgb(255 255 255 / 0.2); + --color-components-slider-range: #085afc; + --color-components-slider-track: rgb(255 255 255 / 0.2); + + --color-components-tooltip-bg: rgb(24 24 27 / 0.95); + + --color-components-kbd-bg-gray: rgb(255 255 255 / 0.03); + --color-components-kbd-bg-white: rgb(255 255 255 / 0.12); + + --color-components-menu-item-text: rgb(200 206 218 / 0.6); + --color-components-menu-item-text-hover: rgb(200 206 218 / 0.8); + --color-components-menu-item-text-active: rgb(255 255 255 / 0.95); + --color-components-menu-item-text-active-accent: rgb(255 255 255 / 0.95); + --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.08); + --color-components-menu-item-bg-active: rgb(200 206 218 / 0.14); + + --color-components-segmented-control-bg-normal: rgb(24 24 27 / 0.7); + --color-components-segmented-control-item-active-bg: rgb(255 255 255 / 0.08); + --color-components-segmented-control-item-active-border: rgb(200 206 218 / 0.08); + --color-components-segmented-control-item-active-accent-bg: rgb(8 90 252 / 0.2); + --color-components-segmented-control-item-active-accent-border: rgb(8 90 252 / 0.3); --color-components-badge-white-to-dark: rgb(24 24 27 / 0.8); + --color-components-badge-white-to-dark-alpha: rgb(24 24 27 / 0); + --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.14); + --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.14); + --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.14); + --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.14); + --color-components-badge-bg-gray-soft: rgb(200 206 218 / 0.08); + --color-components-badge-bg-dimm: rgb(255 255 255 / 0.03); + + --color-components-badge-status-light-border-outer: #222225; + --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3); --color-components-badge-status-light-success-bg: #17b26a; --color-components-badge-status-light-success-border-inner: #47cd89; --color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.3); - --color-components-badge-status-light-border-outer: #222225; - --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3); --color-components-badge-status-light-warning-bg: #f79009; --color-components-badge-status-light-warning-border-inner: #fdb022; --color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.3); @@ -219,221 +528,60 @@ html[data-theme="dark"] { --color-components-badge-status-light-disabled-border-inner: #98a2b2; --color-components-badge-status-light-disabled-halo: rgb(200 206 218 / 0.08); - --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.14); - --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.14); - --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.14); - --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.14); - --color-components-badge-bg-gray-soft: rgb(200 206 218 / 0.08); - --color-components-badge-bg-dimm: rgb(255 255 255 / 0.03); + --color-components-tab-active: #3072ff; + + --color-components-main-nav-text: #a8a8b3; + --color-components-main-nav-text-active: #ffffff; + --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.08); + --color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6); + --color-components-main-nav-nav-button-text-active: #f4f4f5; + --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0); + --color-components-main-nav-nav-button-bg-hover: rgb(200 206 218 / 0.04); + --color-components-main-nav-nav-button-bg-active: rgb(200 206 218 / 0.14); + + --color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05); + + --color-components-main-nav-glass-inner-glow: rgb(210 219 255 / 0.05); + --color-components-main-nav-glass-shadow-reflection: rgb(210 219 255 / 0.04); + --color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0.02); + --color-components-main-nav-glass-text-glow: rgb(245 246 255 / 0.27); + --color-components-main-nav-glass-surface-first: rgb(196 207 255 / 0.08); + --color-components-main-nav-glass-surface-middle-1: rgb(210 219 255 / 0.12); + --color-components-main-nav-glass-surface-middle-2: rgb(210 219 255 / 0.1); + --color-components-main-nav-glass-surface-end: rgb(196 207 255 / 0.08); + + --color-components-main-nav-glass-edge-reflection-first: rgb(92 124 255 / 0); + --color-components-main-nav-glass-edge-reflection-middle: rgb(210 219 255 / 0.8); + --color-components-main-nav-glass-edge-reflection-end: rgb(92 124 255 / 0); + + --color-components-main-nav-glass-edge-highlight-first: rgb(196 207 255 / 0.15); + --color-components-main-nav-glass-edge-highlight-middle: rgb(72 108 255 / 0); + --color-components-main-nav-glass-edge-highlight-end: rgb(196 207 255 / 0.05); - --color-components-chart-line: #5289ff; - --color-components-chart-area-1: rgb(21 90 239 / 0.2); - --color-components-chart-area-2: rgb(21 90 239 / 0.04); - --color-components-chart-current-1: #5289ff; - --color-components-chart-current-2: rgb(21 90 239 / 0.3); --color-components-chart-bg: rgb(24 24 27 / 0.95); + --color-components-chart-line: #3072ff; + --color-components-chart-current-1: #3072ff; + --color-components-chart-current-2: rgb(8 90 252 / 0.3); + --color-components-chart-area-1: rgb(8 90 252 / 0.2); + --color-components-chart-area-2: rgb(8 90 252 / 0.04); - --color-components-actionbar-bg: #222225; - --color-components-actionbar-border: rgb(200 206 218 / 0.08); - --color-components-actionbar-bg-accent: #27272b; - --color-components-actionbar-border-accent: #5289ff; + --color-divider-subtle: rgb(200 206 218 / 0.08); + --color-divider-regular: rgb(200 206 218 / 0.14); + --color-divider-deep: rgb(200 206 218 / 0.2); + --color-divider-intense: rgb(200 206 218 / 0.4); + --color-divider-burn: rgb(24 24 27 / 0.95); + --color-divider-solid: #3a3a40; + --color-divider-solid-alt: #747481; + --color-divider-accent: rgb(200 206 218 / 0.14); - --color-components-dropzone-bg-alt: rgb(24 24 27 / 0.8); - --color-components-dropzone-bg: rgb(24 24 27 / 0.4); - --color-components-dropzone-bg-accent: rgb(21 90 239 / 0.2); - --color-components-dropzone-border: rgb(200 206 218 / 0.14); - --color-components-dropzone-border-alt: rgb(200 206 218 / 0.2); - --color-components-dropzone-border-accent: #84abff; - - --color-components-progress-brand-progress: #5289ff; - --color-components-progress-brand-border: #5289ff; - --color-components-progress-brand-bg: rgb(21 90 239 / 0.04); - - --color-components-progress-white-progress: #ffffff; - --color-components-progress-white-border: rgb(255 255 255 / 0.95); - --color-components-progress-white-bg: rgb(255 255 255 / 0.01); - - --color-components-progress-gray-progress: #98a2b2; - --color-components-progress-gray-border: #98a2b2; - --color-components-progress-gray-bg: rgb(200 206 218 / 0.02); - - --color-components-progress-warning-progress: #fdb022; - --color-components-progress-warning-border: #fdb022; - --color-components-progress-warning-bg: rgb(247 144 9 / 0.04); - - --color-components-progress-error-progress: #f97066; - --color-components-progress-error-border: #f97066; - --color-components-progress-error-bg: rgb(240 68 56 / 0.04); - - --color-components-chat-input-audio-bg: rgb(21 90 239 / 0.2); - --color-components-chat-input-audio-wave-default: rgb(200 206 218 / 0.14); - --color-components-chat-input-bg-mask-1: rgb(24 24 27 / 0.04); - --color-components-chat-input-bg-mask-2: rgb(24 24 27 / 0.6); - --color-components-chat-input-border: rgb(200 206 218 / 0.2); - --color-components-chat-input-audio-wave-active: #84abff; - --color-components-chat-input-audio-bg-alt: rgb(24 24 27 / 0.9); - - --color-components-avatar-shape-fill-stop-0: rgb(255 255 255 / 0.95); - --color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.8); - - --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.2); - --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.03); - - --color-components-avatar-default-avatar-bg: #222225; - --color-components-avatar-mask-darkmode-dimmed: rgb(0 0 0 / 0.12); - - --color-components-label-gray: rgb(200 206 218 / 0.14); - - --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: rgb(255 255 255 / 0.2); - --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: rgb(255 255 255 / 0.5); - --color-components-premium-badge-blue-stroke-stop-100-hover: #296dff; - - --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12); - --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.2); - --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: rgb(255 255 255 / 0.2); - --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: rgb(255 255 255 / 0.5); - --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: rgb(255 255 255 / 0.12); - --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: rgb(255 255 255 / 0.5); - --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: rgb(255 255 255 / 0.2); - --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: rgb(255 255 255 / 0.5); - --color-components-premium-badge-orange-stroke-stop-100-hover: #ff4405; - - --color-components-progress-bar-bg: rgb(200 206 218 / 0.08); - --color-components-progress-bar-progress: rgb(200 206 218 / 0.14); - --color-components-progress-bar-border: rgb(255 255 255 / 0.03); - --color-components-progress-bar-progress-solid: rgb(255 255 255 / 0.95); - --color-components-progress-bar-progress-highlight: rgb(200 206 218 / 0.2); - - --color-components-icon-bg-red-solid: #d92d20; - --color-components-icon-bg-rose-solid: #e31b54; - --color-components-icon-bg-pink-solid: #dd2590; - --color-components-icon-bg-orange-dark-solid: #ff4405; - --color-components-icon-bg-yellow-solid: #eaaa08; - --color-components-icon-bg-green-solid: #4ca30d; - --color-components-icon-bg-teal-solid: #0e9384; - --color-components-icon-bg-blue-light-solid: #0ba5ec; - --color-components-icon-bg-blue-solid: #155aef; - --color-components-icon-bg-indigo-solid: #444ce7; - --color-components-icon-bg-violet-solid: #7839ee; - --color-components-icon-bg-midnight-solid: #5d698d; - --color-components-icon-bg-rose-soft: rgb(246 61 104 / 0.2); - --color-components-icon-bg-pink-soft: rgb(238 70 188 / 0.2); - --color-components-icon-bg-orange-dark-soft: rgb(255 68 5 / 0.2); - --color-components-icon-bg-yellow-soft: rgb(234 170 8 / 0.2); - --color-components-icon-bg-green-soft: rgb(102 198 28 / 0.2); - --color-components-icon-bg-teal-soft: rgb(21 183 158 / 0.2); - --color-components-icon-bg-blue-light-soft: rgb(11 165 236 / 0.2); - --color-components-icon-bg-blue-soft: rgb(21 90 239 / 0.2); - --color-components-icon-bg-indigo-soft: rgb(97 114 243 / 0.2); - --color-components-icon-bg-violet-soft: rgb(135 91 247 / 0.2); - --color-components-icon-bg-midnight-soft: rgb(130 141 173 / 0.2); - --color-components-icon-bg-red-soft: rgb(240 68 56 / 0.2); - --color-components-icon-bg-orange-solid: #f79009; - --color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2); - - --color-text-primary: #fbfbfc; - --color-text-secondary: #d9d9de; - --color-text-tertiary: rgb(200 206 218 / 0.6); - --color-text-quaternary: rgb(200 206 218 / 0.4); - --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: rgb(255 255 255 / 0.95); - --color-text-placeholder: rgb(200 206 218 / 0.3); - --color-text-disabled: rgb(200 206 218 / 0.3); - --color-text-accent-secondary: #84abff; - --color-text-accent-light-mode-only: #d9d9de; - --color-text-text-selected: rgb(21 90 239 / 0.3); - --color-text-secondary-on-surface: rgb(255 255 255 / 0.9); - --color-text-logo-text: #e9e9ec; - --color-text-empty-state-icon: rgb(200 206 218 / 0.3); - --color-text-inverted: #ffffff; - --color-text-inverted-dimmed: rgb(255 255 255 / 0.8); - - --color-background-body: #1d1d20; - --color-background-default-subtle: #222225; - --color-background-neutral-subtle: #1d1d20; - --color-background-sidenav-bg: rgb(39 39 42 / 0.92); - --color-background-default: #222225; - --color-background-soft: rgb(24 24 27 / 0.25); - --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: rgb(200 206 218 / 0.08); - --color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(200 206 218 / 0.02); - --color-background-gradient-bg-fill-debug-bg-1: rgb(200 206 218 / 0.08); - --color-background-gradient-bg-fill-debug-bg-2: rgb(24 24 27 / 0.04); - - --color-background-gradient-mask-gray: rgb(24 24 27 / 0.08); - --color-background-gradient-mask-transparent: rgb(0 0 0 / 0); - --color-background-gradient-mask-input-clear-2: rgb(57 58 62 / 0); - --color-background-gradient-mask-input-clear-1: #393a3e; - --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0); - --color-background-gradient-mask-side-panel-2: rgb(24 24 27 / 0.9); - --color-background-gradient-mask-side-panel-1: rgb(24 24 27 / 0.04); - - --color-background-default-burn: #1d1d20; - --color-background-overlay-fullscreen: rgb(39 39 42 / 0.97); - --color-background-default-lighter: rgb(200 206 218 / 0.04); - --color-background-section: rgb(24 24 27 / 0.4); - --color-background-interaction-from-bg-1: rgb(24 24 27 / 0.4); - --color-background-interaction-from-bg-2: rgb(24 24 27 / 0.14); - --color-background-section-burn: rgb(24 24 27 / 0.6); - --color-background-default-dodge: #3a3a40; - --color-background-overlay: rgb(24 24 27 / 0.8); - --color-background-default-dimmed: #27272b; - --color-background-default-hover: #27272b; - --color-background-overlay-alt: rgb(24 24 27 / 0.4); - --color-background-surface-white: rgb(255 255 255 / 0.9); - --color-background-overlay-destructive: rgb(240 68 56 / 0.3); - --color-background-overlay-backdrop: rgb(24 24 27 / 0.95); - --color-background-body-transparent: rgb(29 29 32 / 0); - --color-background-section-burn-inverted: #27272b; + --color-effects-highlight: rgb(200 206 218 / 0.08); + --color-effects-highlight-subtle: rgb(200 206 218 / 0.04); + --color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08); + --color-effects-image-frame: #ffffff; + --color-effects-icon-border: rgb(255 255 255 / 0.15); --color-shadow-shadow-1: rgb(0 0 0 / 0.05); + --color-shadow-shadow-2: rgb(0 0 0 / 0.08); --color-shadow-shadow-3: rgb(0 0 0 / 0.1); --color-shadow-shadow-4: rgb(0 0 0 / 0.12); --color-shadow-shadow-5: rgb(0 0 0 / 0.16); @@ -441,124 +589,18 @@ html[data-theme="dark"] { --color-shadow-shadow-7: rgb(0 0 0 / 0.24); --color-shadow-shadow-8: rgb(0 0 0 / 0.28); --color-shadow-shadow-9: rgb(0 0 0 / 0.36); - --color-shadow-shadow-2: rgb(0 0 0 / 0.08); --color-shadow-shadow-10: rgb(0 0 0 / 0.4); - --color-workflow-block-border: rgb(255 255 255 / 0.08); - --color-workflow-block-parma-bg: rgb(255 255 255 / 0.05); - --color-workflow-block-bg: #27272b; - --color-workflow-block-bg-transparent: rgb(39 39 43 / 0.96); - --color-workflow-block-border-highlight: rgb(200 206 218 / 0.2); - --color-workflow-block-wrapper-bg-1: #27272b; - --color-workflow-block-wrapper-bg-2: rgb(39 39 43 / 0.2); - - --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11); - --color-workflow-canvas-workflow-bg: #1d1d20; - --color-workflow-canvas-workflow-top-bar-1: rgb(29 29 32 / 0.9); - --color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08); - --color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8); - - --color-workflow-link-line-active: #5289ff; - --color-workflow-link-line-normal: #676f83; - --color-workflow-link-line-handle: #5289ff; - --color-workflow-link-line-normal-transparent: rgb(103 111 131 / 0.2); - --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: rgb(200 206 218 / 0.08); - - --color-workflow-display-success-bg: rgb(23 178 106 / 0.2); - --color-workflow-display-success-border-1: rgb(23 178 106 / 0.9); - --color-workflow-display-success-border-2: rgb(23 178 106 / 0.8); - --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.25); - --color-workflow-display-success-bg-line-pattern: rgb(24 24 27 / 0.8); - - --color-workflow-display-glass-1: rgb(255 255 255 / 0.03); - --color-workflow-display-glass-2: rgb(255 255 255 / 0.05); - --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.4); - --color-workflow-display-highlight: rgb(255 255 255 / 0.12); - --color-workflow-display-outline: rgb(24 24 27 / 0.95); - --color-workflow-display-error-bg: rgb(240 68 56 / 0.2); - --color-workflow-display-error-bg-line-pattern: rgb(24 24 27 / 0.8); - --color-workflow-display-error-border-1: rgb(240 68 56 / 0.9); - --color-workflow-display-error-border-2: rgb(240 68 56 / 0.8); - --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.25); - - --color-workflow-display-warning-bg: rgb(247 144 9 / 0.2); - --color-workflow-display-warning-bg-line-pattern: rgb(24 24 27 / 0.8); - --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.9); - --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.8); - --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.25); - - --color-workflow-display-normal-bg: rgb(11 165 236 / 0.2); - --color-workflow-display-normal-bg-line-pattern: rgb(24 24 27 / 0.8); - --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.9); - --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.8); - --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.25); - - --color-workflow-display-disabled-bg: rgb(200 206 218 / 0.2); - --color-workflow-display-disabled-bg-line-pattern: rgb(24 24 27 / 0.8); - --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6); - --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.25); - --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.25); - --color-workflow-display-disabled-outline: rgb(24 24 27 / 0.95); - - --color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25); - --color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04); - - --color-divider-subtle: rgb(200 206 218 / 0.08); - --color-divider-regular: rgb(200 206 218 / 0.14); - --color-divider-deep: rgb(200 206 218 / 0.2); - --color-divider-burn: rgb(24 24 27 / 0.95); - --color-divider-intense: rgb(200 206 218 / 0.4); - --color-divider-solid: #3a3a40; - --color-divider-solid-alt: #747481; - --color-divider-accent: rgb(200 206 218 / 0.14); - - --color-state-base-hover: rgb(200 206 218 / 0.08); - --color-state-base-active: rgb(200 206 218 / 0.2); - --color-state-base-hover-alt: rgb(200 206 218 / 0.14); - --color-state-base-handle: rgb(200 206 218 / 0.3); - --color-state-base-handle-hover: rgb(200 206 218 / 0.5); - --color-state-base-hover-subtle: rgb(200 206 218 / 0.04); - - --color-state-accent-hover: rgb(21 90 239 / 0.14); - --color-state-accent-active: rgb(21 90 239 / 0.14); - --color-state-accent-hover-alt: rgb(21 90 239 / 0.25); - --color-state-accent-solid: #5289ff; - --color-state-accent-active-alt: rgb(21 90 239 / 0.2); - - --color-state-destructive-hover: rgb(240 68 56 / 0.14); - --color-state-destructive-hover-alt: rgb(240 68 56 / 0.25); - --color-state-destructive-active: rgb(240 68 56 / 0.3); - --color-state-destructive-solid: #f97066; - --color-state-destructive-border: #f97066; - --color-state-destructive-hover-transparent: rgb(240 68 56 / 0); - - --color-state-success-hover: rgb(23 178 106 / 0.14); - --color-state-success-hover-alt: rgb(23 178 106 / 0.25); - --color-state-success-active: rgb(23 178 106 / 0.3); - --color-state-success-solid: #47cd89; - - --color-state-warning-hover: rgb(247 144 9 / 0.14); - --color-state-warning-hover-alt: rgb(247 144 9 / 0.25); - --color-state-warning-active: rgb(247 144 9 / 0.3); - --color-state-warning-solid: #f79009; - --color-state-warning-hover-transparent: rgb(247 144 9 / 0); - - --color-effects-highlight: rgb(200 206 218 / 0.08); - --color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08); - --color-effects-image-frame: #ffffff; - --color-effects-icon-border: rgb(255 255 255 / 0.15); + --color-third-party-LangChain: #ffffff; + --color-third-party-Langfuse: #ffffff; + --color-third-party-Github: #ffffff; + --color-third-party-Github-tertiary: rgb(200 206 218 / 0.6); + --color-third-party-Github-secondary: #d9d9de; + --color-third-party-aws: #141f2e; + --color-third-party-aws-alt: #192639; + --color-third-party-model-bg-openai: #121212; + --color-third-party-model-bg-anthropic: #1d1917; + --color-third-party-model-bg-default: #1d1d20; --color-util-colors-orange-dark-orange-dark-50: #57130a; --color-util-colors-orange-dark-orange-dark-100: #771a0d; @@ -633,6 +675,15 @@ html[data-theme="dark"] { --color-util-colors-blue-light-blue-light-600: #36bffa; --color-util-colors-blue-light-blue-light-700: #7cd4fd; + --color-util-colors-blue-brand-blue-brand-50: #001782; + --color-util-colors-blue-brand-blue-brand-100: #001ea0; + --color-util-colors-blue-brand-blue-brand-200: #0025be; + --color-util-colors-blue-brand-blue-brand-300: #002cde; + --color-util-colors-blue-brand-blue-brand-400: #0033ff; + --color-util-colors-blue-brand-blue-brand-500: #085afc; + --color-util-colors-blue-brand-blue-brand-600: #3072ff; + --color-util-colors-blue-brand-blue-brand-700: #6694ff; + --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; @@ -642,15 +693,6 @@ html[data-theme="dark"] { --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; @@ -669,6 +711,15 @@ html[data-theme="dark"] { --color-util-colors-green-green-600: #47cd89; --color-util-colors-green-green-700: #75e0a7; + --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-400: #4ca30d; + --color-util-colors-green-light-green-light-500: #66c61c; + --color-util-colors-green-light-green-light-600: #85e13a; + --color-util-colors-green-light-green-light-700: #a6ef67; + --color-util-colors-warning-warning-50: #4e1d09; --color-util-colors-warning-warning-100: #7a2e0e; --color-util-colors-warning-warning-200: #93370d; @@ -723,15 +774,6 @@ html[data-theme="dark"] { --color-util-colors-gray-gray-600: #98a2b2; --color-util-colors-gray-gray-700: #d0d5dc; - --color-util-colors-green-light-green-light-50: #15290a; - --color-util-colors-green-light-green-light-100: #2b5314; - --color-util-colors-green-light-green-light-200: #326212; - --color-util-colors-green-light-green-light-300: #3b7c0f; - --color-util-colors-green-light-green-light-500: #66c61c; - --color-util-colors-green-light-green-light-400: #4ca30d; - --color-util-colors-green-light-green-light-600: #85e13a; - --color-util-colors-green-light-green-light-700: #a6ef67; - --color-util-colors-rose-rose-50: #510b24; --color-util-colors-rose-rose-100: #89123e; --color-util-colors-rose-rose-200: #a11043; @@ -750,30 +792,31 @@ html[data-theme="dark"] { --color-util-colors-midnight-midnight-600: #a7aec5; --color-util-colors-midnight-midnight-700: #c6cbd9; - --color-third-party-LangChain: #ffffff; - --color-third-party-Langfuse: #ffffff; - --color-third-party-Github: #ffffff; - --color-third-party-Github-tertiary: rgb(200 206 218 / 0.6); - --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: #1d1d20; - - --color-third-party-aws: #141f2e; - --color-third-party-aws-alt: #192639; - --color-saas-background: #0b0b0e; + --color-saas-background-inverted: rgb(255 255 255 / 0.9); + --color-saas-background-inverted-hover: #ffffff; --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.2); --color-saas-dify-blue-static: #0033ff; - --color-saas-dify-blue-static-hover: #002cd6; + --color-saas-dify-blue-static-hover: #085afc; --color-saas-dify-blue-accessible: #0a68ff; --color-saas-dify-blue-inverted: #ffffff; --color-saas-dify-blue-inverted-dimmed: rgb(255 255 255 / 0.88); - --color-saas-background-inverted: rgb(255 255 255 / 0.9); - --color-saas-background-inverted-hover: #ffffff; - --color-dify-logo-blue: #e8e8e8; --color-dify-logo-black: #e8e8e8; + --color-dify-logo-outline-1: #ffffff; + --color-dify-logo-outline-2: #e8e8e8; + + --color-brand-color-opacity-50: #020821; + --color-brand-color-opacity-100: #031042; + --color-brand-color-opacity-200: #051969; + --color-brand-color-opacity-300: #07228e; + --color-brand-color-opacity-400: #082bb4; + --color-brand-color-opacity-500: #0033ff; + --color-brand-color-opacity-600: #4f6de5; + --color-brand-color-opacity-700: #899eee; + --color-brand-color-opacity-800: #bac6f5; + --color-brand-color-opacity-900: #e2e7fb; + --color-brand-color-opacity-1000: #f3f5fd; } diff --git a/packages/dify-ui/src/themes/light.css b/packages/dify-ui/src/themes/light.css index dd3252f3614..059e1e207e1 100644 --- a/packages/dify-ui/src/themes/light.css +++ b/packages/dify-ui/src/themes/light.css @@ -1,33 +1,367 @@ /* Attention: Generate by code. Don't update by hand!!! */ html[data-theme="light"] { + --color-text-primary: #101828; + --color-text-secondary: #354052; + --color-text-tertiary: #676f83; + --color-text-quaternary: rgb(16 24 40 / 0.3); + --color-text-empty-state-icon: #d0d5dc; + --color-text-primary-on-surface: #ffffff; + --color-text-secondary-on-surface: rgb(255 255 255 / 0.9); + --color-text-destructive: #d92d20; + --color-text-destructive-secondary: #f04438; + --color-text-success: #079455; + --color-text-success-secondary: #17b26a; + --color-text-warning: #dc6803; + --color-text-warning-secondary: #f79009; + --color-text-accent: #0033ff; + --color-text-accent-secondary: #085afc; + --color-text-accent-light-mode-only: #0033ff; + --color-text-placeholder: #98a2b2; + --color-text-disabled: #d0d5dc; + --color-text-text-selected: rgb(0 51 255 / 0.14); + --color-text-logo-text: #18222f; + --color-text-inverted: #000000; + --color-text-inverted-dimmed: rgb(0 0 0 / 0.95); + + --color-background-body: #f2f4f7; + --color-background-body-transparent: rgb(242 244 247 / 0); + --color-background-default: #ffffff; + --color-background-default-hover: #f9fafb; + --color-background-default-hover-alpha-0: rgb(249 250 251 / 0); + --color-background-default-subtle: #fcfcfd; + --color-background-default-dodge: #ffffff; + --color-background-default-burn: #e9ebf0; + --color-background-default-dimmed: #e9ebf0; + --color-background-default-lighter: rgb(255 255 255 / 0.5); + --color-background-section: #f9fafb; + --color-background-section-burn: #f2f4f7; + --color-background-section-burn-inverted: #f2f4f7; + --color-background-soft: #f9fafb; + --color-background-neutral-subtle: #f9fafb; + --color-background-surface-white: rgb(255 255 255 / 0.95); + --color-background-sidenav-bg: rgb(255 255 255 / 0.8); + --color-background-overlay-fullscreen: rgb(249 250 251 / 0.95); + --color-background-overlay-backdrop: rgb(242 244 247 / 0.95); + --color-background-overlay: rgb(16 24 40 / 0.6); + --color-background-overlay-alt: rgb(16 24 40 / 0.4); + --color-background-overlay-destructive: rgb(240 68 56 / 0.3); + --color-background-interaction-from-bg-1: rgb(200 206 218 / 0.2); + --color-background-interaction-from-bg-2: rgb(200 206 218 / 0.14); + --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: rgb(255 255 255 / 0.6); + --color-background-gradient-bg-fill-debug-bg-1: rgb(255 255 255 / 0); + --color-background-gradient-bg-fill-debug-bg-2: rgb(200 206 218 / 0.14); + + --color-background-gradient-mask-gray: rgb(200 206 218 / 0.2); + --color-background-gradient-mask-transparent: rgb(255 255 255 / 0); + --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0); + --color-background-gradient-mask-side-panel-1: rgb(16 24 40 / 0.02); + --color-background-gradient-mask-side-panel-2: rgb(16 24 40 / 0.3); + --color-background-gradient-mask-input-clear-1: #e9ebf0; + --color-background-gradient-mask-input-clear-2: rgb(233 235 240 / 0); + + --color-state-base-hover-subtle: rgb(200 206 218 / 0.08); + --color-state-base-hover: rgb(200 206 218 / 0.2); + --color-state-base-hover-alt: rgb(200 206 218 / 0.4); + --color-state-base-active: rgb(200 206 218 / 0.4); + --color-state-base-handle: rgb(16 24 40 / 0.2); + --color-state-base-handle-hover: rgb(16 24 40 / 0.3); + + --color-state-accent-hover: #e9f0ff; + --color-state-accent-hover-alt: #d0dfff; + --color-state-accent-active: rgb(0 51 255 / 0.08); + --color-state-accent-active-alt: rgb(0 51 255 / 0.14); + --color-state-accent-solid: #0033ff; + + --color-state-destructive-hover: #fef3f2; + --color-state-destructive-hover-transparent: rgb(254 243 242 / 0); + --color-state-destructive-hover-alt: #fee4e2; + --color-state-destructive-active: #fecdca; + --color-state-destructive-solid: #f04438; + --color-state-destructive-border: #fda29b; + + --color-state-warning-hover: #fffaeb; + --color-state-warning-hover-transparent: rgb(255 250 235 / 0); + --color-state-warning-hover-alt: #fef0c7; + --color-state-warning-active: #fedf89; + --color-state-warning-solid: #f79009; + + --color-state-success-hover: #ecfdf3; + --color-state-success-hover-alt: #dcfae6; + --color-state-success-active: #abefc6; + --color-state-success-solid: #17b26a; + + --color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2); + --color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04); + + --color-workflow-block-bg: #fcfcfd; + --color-workflow-block-bg-transparent: rgb(252 252 253 / 0.9); + --color-workflow-block-border: #ffffff; + --color-workflow-block-border-highlight: rgb(0 51 255 / 0.14); + --color-workflow-block-parma-bg: #f2f4f7; + --color-workflow-block-wrapper-bg-1: #e9ebf0; + --color-workflow-block-wrapper-bg-2: rgb(233 235 240 / 0.2); + + --color-workflow-link-line-normal: #d0d5dc; + --color-workflow-link-line-normal-transparent: rgb(208 213 220 / 0.2); + --color-workflow-link-line-active: #085afc; + --color-workflow-link-line-handle: #085afc; + --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-block: rgb(200 206 218 / 0.3); + --color-workflow-minimap-bg: #e9ebf0; + + --color-workflow-display-glass-1: rgb(255 255 255 / 0.12); + --color-workflow-display-glass-2: rgb(255 255 255 / 0.5); + --color-workflow-display-highlight: rgb(255 255 255 / 0.5); + --color-workflow-display-outline: rgb(0 0 0 / 0.05); + --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.12); + --color-workflow-display-success-bg: #ecfdf3; + --color-workflow-display-success-bg-line-pattern: rgb(23 178 106 / 0.3); + --color-workflow-display-success-border-1: rgb(23 178 106 / 0.8); + --color-workflow-display-success-border-2: rgb(23 178 106 / 0.5); + --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.2); + + --color-workflow-display-error-bg: #fef3f2; + --color-workflow-display-error-bg-line-pattern: rgb(240 68 56 / 0.3); + --color-workflow-display-error-border-1: rgb(240 68 56 / 0.8); + --color-workflow-display-error-border-2: rgb(240 68 56 / 0.5); + --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.2); + + --color-workflow-display-warning-bg: #fffaeb; + --color-workflow-display-warning-bg-line-pattern: rgb(247 144 9 / 0.3); + --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.8); + --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.5); + --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.2); + + --color-workflow-display-normal-bg: #f0f9ff; + --color-workflow-display-normal-bg-line-pattern: rgb(11 165 236 / 0.3); + --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.8); + --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.5); + --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.2); + + --color-workflow-display-disabled-bg: #f9fafb; + --color-workflow-display-disabled-bg-line-pattern: rgb(200 206 218 / 0.3); + --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6); + --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.4); + --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.4); + --color-workflow-display-disabled-outline: rgb(0 0 0 / 0); + + --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15); + --color-workflow-canvas-workflow-bg: #f2f4f7; + --color-workflow-canvas-workflow-top-bar-1: rgb(242 244 247 / 0.9); + --color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.05); + --color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8); + + --color-workflow-debug-run-status-bg: rgb(255 68 5 / 0.08); + --color-workflow-debug-run-status-bg-alt: rgb(255 68 5 / 0.14); + --color-workflow-debug-breakpoint: #e62e05; + --color-workflow-debug-text: #e62e05; + --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); + + --color-workflow-test-run-run-status-bg: rgb(0 51 255 / 0.08); + --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.14); + --color-workflow-test-run-paused-text: #dc6803; + --color-workflow-test-run-run-status-bg-alt: rgb(0 51 255 / 0.14); + --color-workflow-test-run-text: #002cde; + + --color-components-icon-bg-red-solid: #d92d20; + --color-components-icon-bg-rose-solid: #e31b54; + --color-components-icon-bg-pink-solid: #dd2590; + --color-components-icon-bg-orange-dark-solid: #ff4405; + --color-components-icon-bg-orange-solid: #f79009; + --color-components-icon-bg-yellow-solid: #eaaa08; + --color-components-icon-bg-green-solid: #4ca30d; + --color-components-icon-bg-teal-solid: #0e9384; + --color-components-icon-bg-blue-light-solid: #0ba5ec; + --color-components-icon-bg-blue-solid: #0033ff; + --color-components-icon-bg-indigo-solid: #444ce7; + --color-components-icon-bg-violet-solid: #7839ee; + --color-components-icon-bg-midnight-solid: #828dad; + --color-components-icon-bg-red-soft: #fef3f2; + --color-components-icon-bg-rose-soft: #fff1f3; + --color-components-icon-bg-pink-soft: #fdf2fa; + --color-components-icon-bg-orange-dark-soft: #fff4ed; + --color-components-icon-bg-orange-soft: #fffaeb; + --color-components-icon-bg-yellow-soft: #fefbe8; + --color-components-icon-bg-green-soft: #f3fee7; + --color-components-icon-bg-teal-soft: #f0fdf9; + --color-components-icon-bg-blue-light-soft: #f0f9ff; + --color-components-icon-bg-blue-soft: #e9f0ff; + --color-components-icon-bg-indigo-soft: #eef4ff; + --color-components-icon-bg-violet-soft: #f5f3ff; + --color-components-icon-bg-midnight-soft: #f0f2f5; + + --color-components-avatar-default-avatar-bg: #d0d5dc; + --color-components-avatar-mask-darkmode-dimmed: rgb(255 255 255 / 0); + --color-components-avatar-shape-fill-stop-0: #ffffff; + --color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.9); + + --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.12); + --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.08); + + --color-components-chat-input-audio-bg: #e9f0ff; + --color-components-chat-input-audio-bg-alt: #fcfcfd; + --color-components-chat-input-audio-wave-default: rgb(0 51 255 / 0.2); + --color-components-chat-input-audio-wave-active: #0033ff; + --color-components-chat-input-bg-mask-1: rgb(255 255 255 / 0.01); + --color-components-chat-input-bg-mask-2: #f2f4f7; + --color-components-chat-input-border: #ffffff; + + --color-components-label-gray: #f2f4f7; + + --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12); + --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.3); + --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: rgb(255 255 255 / 0.95); + --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: rgb(255 255 255 / 0.95); + --color-components-premium-badge-orange-stroke-stop-100-hover: #bc1b06; + + --color-components-premium-badge-blue-bg-stop-0: #3072ff; + --color-components-premium-badge-blue-bg-stop-100: #0033ff; + --color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.95); + --color-components-premium-badge-blue-stroke-stop-100: #0033ff; + --color-components-premium-badge-blue-text-stop-0: #f5f8ff; + --color-components-premium-badge-blue-text-stop-100: #d0dfff; + --color-components-premium-badge-blue-glow: #001ea0; + --color-components-premium-badge-blue-glow-hover: #6694ff; + --color-components-premium-badge-blue-bg-stop-0-hover: #085afc; + --color-components-premium-badge-blue-bg-stop-100-hover: #002cde; + --color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.95); + --color-components-premium-badge-blue-stroke-stop-100-hover: #001ea0; + + --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: rgb(255 255 255 / 0.95); + --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: rgb(255 255 255 / 0.95); + --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: rgb(255 255 255 / 0.95); + --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: rgb(255 255 255 / 0.95); + --color-components-premium-badge-grey-stroke-stop-100-hover: #354052; + + --color-components-dropzone-bg: #f9fafb; + --color-components-dropzone-bg-alt: #f2f4f7; + --color-components-dropzone-bg-accent: rgb(0 51 255 / 0.14); + --color-components-dropzone-border: rgb(16 24 40 / 0.08); + --color-components-dropzone-border-alt: rgb(16 24 40 / 0.2); + --color-components-dropzone-border-accent: #6694ff; + + --color-components-panel-bg: #ffffff; + --color-components-panel-bg-transparent: rgb(255 255 255 / 0); + --color-components-panel-bg-alt: #f9fafb; + --color-components-panel-bg-blur: rgb(255 255 255 / 0.95); + --color-components-panel-bg-blur-burn: rgb(255 255 255 / 0.9); + --color-components-panel-border: rgb(16 24 40 / 0.08); + --color-components-panel-border-subtle: rgb(16 24 40 / 0.08); + --color-components-panel-gradient-1: #ffffff; + --color-components-panel-gradient-2: #f9fafb; + --color-components-panel-on-panel-item-bg: #ffffff; + --color-components-panel-on-panel-item-bg-transparent: rgb(255 255 255 / 0.95); + --color-components-panel-on-panel-item-bg-hover: #f9fafb; + --color-components-panel-on-panel-item-bg-hover-transparent: rgb(249 250 251 / 0); + --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0); + --color-components-panel-on-panel-item-bg-alt: #f9fafb; + + --color-components-marketplace-header-bg: rgb(255 255 255 / 0.98); + + --color-components-card-bg: #fcfcfd; + --color-components-card-bg-alt: #ffffff; + --color-components-card-bg-transparent: rgb(252 252 253 / 0); + --color-components-card-bg-alt-transparent: rgb(255 255 255 / 0); + --color-components-card-border: #ffffff; + + --color-components-actionbar-border: rgb(16 24 40 / 0.04); + --color-components-actionbar-bg: rgb(255 255 255 / 0.95); + --color-components-actionbar-bg-accent: #f5f8ff; + --color-components-actionbar-border-accent: #a0bdff; + --color-components-input-bg-normal: rgb(200 206 218 / 0.25); - --color-components-input-text-placeholder: #98a2b2; --color-components-input-bg-hover: rgb(200 206 218 / 0.14); --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: rgb(200 206 218 / 0.14); + --color-components-input-bg-destructive: #ffffff; + --color-components-input-text-filled: #101828; + --color-components-input-text-placeholder: #98a2b2; --color-components-input-text-disabled: #d0d5dc; --color-components-input-text-filled-disabled: #676f83; + --color-components-input-text-filled-blue: #0033ff; --color-components-input-border-hover: #d0d5dc; + --color-components-input-border-active: #d0d5dc; --color-components-input-border-active-prompt-1: #0ba5ec; - --color-components-input-border-active-prompt-2: #155aef; + --color-components-input-border-active-prompt-2: #0033ff; + --color-components-input-border-destructive: #fda29b; - --color-components-kbd-bg-gray: rgb(16 24 40 / 0.04); - --color-components-kbd-bg-white: rgb(255 255 255 / 0.12); + --color-components-progress-brand-progress: #0033ff; + --color-components-progress-brand-border: #0033ff; + --color-components-progress-brand-bg: rgb(0 51 255 / 0.04); - --color-components-tooltip-bg: rgb(255 255 255 / 0.95); + --color-components-progress-white-progress: #ffffff; + --color-components-progress-white-border: rgb(255 255 255 / 0.95); + --color-components-progress-white-bg: rgb(255 255 255 / 0.01); + --color-components-progress-gray-progress: #98a2b2; + --color-components-progress-gray-border: #98a2b2; + --color-components-progress-gray-bg: rgb(200 206 218 / 0.02); + + --color-components-progress-warning-progress: #f79009; + --color-components-progress-warning-border: #f79009; + --color-components-progress-warning-bg: rgb(247 144 9 / 0.04); + + --color-components-progress-error-progress: #f04438; + --color-components-progress-error-border: #f04438; + --color-components-progress-error-bg: rgb(240 68 56 / 0.04); + + --color-components-progress-bar-progress: rgb(0 51 255 / 0.14); + --color-components-progress-bar-progress-highlight: rgb(0 51 255 / 0.2); + --color-components-progress-bar-progress-solid: #0033ff; + --color-components-progress-bar-border: rgb(16 24 40 / 0.04); + --color-components-progress-bar-bg: rgb(0 51 255 / 0.04); + + --color-components-button-button-seam: rgb(0 0 0 / 0.03); --color-components-button-primary-text: #ffffff; - --color-components-button-primary-bg: #155aef; - --color-components-button-primary-border: rgb(16 24 40 / 0.04); - --color-components-button-primary-bg-hover: #004aeb; - --color-components-button-primary-border-hover: rgb(16 24 40 / 0.08); - --color-components-button-primary-bg-disabled: rgb(21 90 239 / 0.14); - --color-components-button-primary-border-disabled: rgb(255 255 255 / 0); --color-components-button-primary-text-disabled: rgb(255 255 255 / 0.6); + --color-components-button-primary-bg: #0033ff; + --color-components-button-primary-bg-hover: #002cde; + --color-components-button-primary-bg-disabled: rgb(0 51 255 / 0.14); + --color-components-button-primary-border: rgb(16 24 40 / 0.04); + --color-components-button-primary-border-hover: rgb(16 24 40 / 0.08); + --color-components-button-primary-border-disabled: rgb(255 255 255 / 0); --color-components-button-secondary-text: #354052; --color-components-button-secondary-text-disabled: rgb(16 24 40 / 0.25); @@ -38,6 +372,15 @@ html[data-theme="light"] { --color-components-button-secondary-border-hover: rgb(16 24 40 / 0.2); --color-components-button-secondary-border-disabled: rgb(16 24 40 / 0.04); + --color-components-button-secondary-accent-text: #0033ff; + --color-components-button-secondary-accent-text-disabled: #a0bdff; + --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: rgb(16 24 40 / 0.14); + --color-components-button-secondary-accent-border-hover: rgb(16 24 40 / 0.14); + --color-components-button-secondary-accent-border-disabled: rgb(16 24 40 / 0.04); + --color-components-button-tertiary-text: #354052; --color-components-button-tertiary-text-disabled: rgb(16 24 40 / 0.25); --color-components-button-tertiary-bg: #f2f4f7; @@ -76,133 +419,99 @@ html[data-theme="light"] { --color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2); --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: rgb(16 24 40 / 0.14); - --color-components-button-secondary-accent-border-hover: rgb(16 24 40 / 0.14); - --color-components-button-secondary-accent-border-disabled: rgb(16 24 40 / 0.04); - --color-components-button-indigo-bg: #444ce7; --color-components-button-indigo-bg-hover: #3538cd; --color-components-button-indigo-bg-disabled: rgb(97 114 243 / 0.14); + --color-components-button-debug-text: #ffffff; + --color-components-button-debug-text-disabled: rgb(255 255 255 / 0.6); + --color-components-button-debug-bg: #ff4405; + --color-components-button-debug-bg-hover: #e62e05; + --color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.2); + --color-components-button-debug-border: rgb(16 24 40 / 0.04); + --color-components-button-debug-border-hover: rgb(16 24 40 / 0.08); + --color-components-button-debug-border-disabled: rgb(255 255 255 / 0); + --color-components-checkbox-icon: #ffffff; --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5); - --color-components-checkbox-bg: #155aef; - --color-components-checkbox-bg-hover: #004aeb; + --color-components-checkbox-bg: #0033ff; + --color-components-checkbox-bg-hover: #002cde; --color-components-checkbox-bg-disabled: #f2f4f7; + --color-components-checkbox-bg-disabled-checked: #a0bdff; + --color-components-checkbox-bg-unchecked: #ffffff; + --color-components-checkbox-bg-unchecked-hover: #ffffff; --color-components-checkbox-border: #d0d5dc; --color-components-checkbox-border-hover: #98a2b2; --color-components-checkbox-border-disabled: rgb(24 24 27 / 0.04); - --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: rgb(255 255 255 / 0); + --color-components-radio-bg-hover: rgb(255 255 255 / 0); --color-components-radio-bg-disabled: rgb(255 255 255 / 0); + --color-components-radio-border-checked: #0033ff; + --color-components-radio-border-checked-hover: #002cde; + --color-components-radio-border-checked-disabled: #a0bdff; --color-components-radio-border: #d0d5dc; --color-components-radio-border-hover: #98a2b2; --color-components-radio-border-disabled: rgb(24 24 27 / 0.04); - --color-components-radio-bg: rgb(255 255 255 / 0); - --color-components-radio-bg-hover: rgb(255 255 255 / 0); --color-components-toggle-knob: #ffffff; + --color-components-toggle-knob-hover: #ffffff; --color-components-toggle-knob-disabled: rgb(255 255 255 / 0.95); - --color-components-toggle-bg: #155aef; - --color-components-toggle-bg-hover: #004aeb; - --color-components-toggle-bg-disabled: #d1e0ff; + --color-components-toggle-bg: #0033ff; + --color-components-toggle-bg-hover: #002cde; + --color-components-toggle-bg-disabled: #d0dfff; --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-card-bg-transparent: rgb(252 252 253 / 0); - --color-components-card-bg-alt-transparent: rgb(255 255 255 / 0); - - --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-menu-item-bg-active: rgb(21 90 239 / 0.08); - --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.2); - - --color-components-panel-bg: #ffffff; - --color-components-panel-bg-blur: rgb(255 255 255 / 0.95); - --color-components-panel-border: rgb(16 24 40 / 0.08); - --color-components-panel-border-subtle: rgb(16 24 40 / 0.08); - --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: rgb(255 255 255 / 0.95); - --color-components-panel-on-panel-item-bg-hover-transparent: rgb(249 250 251 / 0); - --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0); - - --color-components-panel-bg-transparent: rgb(255 255 255 / 0); - - --color-components-main-nav-nav-button-text: #495464; - --color-components-main-nav-nav-button-text-active: #155aef; - --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0); - --color-components-main-nav-nav-button-bg-active: #fcfcfd; - --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.95); - --color-components-main-nav-nav-button-bg-hover: rgb(16 24 40 / 0.04); - --color-components-main-nav-glass-text-glow: #3146ff2e; - --color-components-main-nav-glass-surface-first: #0033ff14; - --color-components-main-nav-glass-surface-middle-1: #0033ff1f; - --color-components-main-nav-glass-surface-middle-2: #0033ff1a; - --color-components-main-nav-glass-surface-end: #0033ff14; - --color-components-main-nav-glass-edge-highlight-first: #fffffffa; - --color-components-main-nav-glass-edge-highlight-middle: #ffffff00; - --color-components-main-nav-glass-edge-highlight-end: #ffffff6b; - --color-components-main-nav-glass-edge-reflection-first: #0033ff00; - --color-components-main-nav-glass-edge-reflection-middle: #0033ff99; - --color-components-main-nav-glass-edge-reflection-end: #0033ff00; - --color-components-main-nav-glass-inner-glow: #ffffff4d; - --color-components-main-nav-glass-shadow-reflection: #0033ff0a; - --color-components-main-nav-glass-shadow-reflection-glow: #ffffff00; - - --color-components-main-nav-nav-user-border: #ffffff; - - --color-components-slider-knob: #ffffff; - --color-components-slider-knob-hover: #ffffff; - --color-components-slider-knob-disabled: rgb(255 255 255 / 0.95); - --color-components-slider-range: #296dff; - --color-components-slider-track: #e9ebf0; - --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.2); - --color-components-slider-knob-border: rgb(16 24 40 / 0.14); - - --color-components-segmented-control-item-active-bg: #ffffff; - --color-components-segmented-control-item-active-border: #ffffff; - --color-components-segmented-control-bg-normal: rgb(200 206 218 / 0.2); - --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-option-card-option-selected-bg: #ffffff; + --color-components-option-card-option-selected-border: #0033ff; - --color-components-tab-active: #155aef; + --color-components-slider-knob: #ffffff; + --color-components-slider-knob-border: rgb(16 24 40 / 0.14); + --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.2); + --color-components-slider-knob-hover: #ffffff; + --color-components-slider-knob-disabled: rgb(255 255 255 / 0.95); + --color-components-slider-range: #0033ff; + --color-components-slider-track: #e9ebf0; + + --color-components-tooltip-bg: rgb(255 255 255 / 0.95); + + --color-components-kbd-bg-gray: rgb(16 24 40 / 0.04); + --color-components-kbd-bg-white: rgb(255 255 255 / 0.12); + + --color-components-menu-item-text: #495464; + --color-components-menu-item-text-hover: #354052; + --color-components-menu-item-text-active: #18222f; + --color-components-menu-item-text-active-accent: #18222f; + --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.2); + --color-components-menu-item-bg-active: rgb(0 51 255 / 0.08); + + --color-components-segmented-control-bg-normal: rgb(200 206 218 / 0.2); + --color-components-segmented-control-item-active-bg: #ffffff; + --color-components-segmented-control-item-active-border: #ffffff; + --color-components-segmented-control-item-active-accent-bg: #ffffff; + --color-components-segmented-control-item-active-accent-border: #ffffff; --color-components-badge-white-to-dark: #ffffff; + --color-components-badge-white-to-dark-alpha: rgb(255 255 255 / 0); + --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.08); + --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.08); + --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.08); + --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.08); + --color-components-badge-bg-gray-soft: rgb(16 24 40 / 0.04); + --color-components-badge-bg-dimm: rgb(255 255 255 / 0.05); + + --color-components-badge-status-light-border-outer: #ffffff; + --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3); --color-components-badge-status-light-success-bg: #47cd89; --color-components-badge-status-light-success-border-inner: #17b26a; --color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.25); - --color-components-badge-status-light-border-outer: #ffffff; - --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3); --color-components-badge-status-light-warning-bg: #fdb022; --color-components-badge-status-light-warning-border-inner: #f79009; --color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.25); @@ -219,221 +528,60 @@ html[data-theme="light"] { --color-components-badge-status-light-disabled-border-inner: #676f83; --color-components-badge-status-light-disabled-halo: rgb(16 24 40 / 0.04); - --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.08); - --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.08); - --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.08); - --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.08); - --color-components-badge-bg-gray-soft: rgb(16 24 40 / 0.04); - --color-components-badge-bg-dimm: rgb(255 255 255 / 0.05); + --color-components-tab-active: #0033ff; + + --color-components-main-nav-text: #495464; + --color-components-main-nav-text-active: #0033ff; + --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.95); + --color-components-main-nav-nav-button-text: #495464; + --color-components-main-nav-nav-button-text-active: #0033ff; + --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0); + --color-components-main-nav-nav-button-bg-hover: rgb(16 24 40 / 0.04); + --color-components-main-nav-nav-button-bg-active: #fcfcfd; + + --color-components-main-nav-nav-user-border: #ffffff; + + --color-components-main-nav-glass-inner-glow: rgb(255 255 255 / 0.3); + --color-components-main-nav-glass-shadow-reflection: rgb(0 51 255 / 0.04); + --color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0); + --color-components-main-nav-glass-text-glow: rgb(49 70 255 / 0.18); + --color-components-main-nav-glass-surface-first: rgb(0 51 255 / 0.08); + --color-components-main-nav-glass-surface-middle-1: rgb(0 51 255 / 0.12); + --color-components-main-nav-glass-surface-middle-2: rgb(0 51 255 / 0.1); + --color-components-main-nav-glass-surface-end: rgb(0 51 255 / 0.08); + + --color-components-main-nav-glass-edge-reflection-first: rgb(0 51 255 / 0); + --color-components-main-nav-glass-edge-reflection-middle: rgb(0 51 255 / 0.6); + --color-components-main-nav-glass-edge-reflection-end: rgb(0 51 255 / 0); + + --color-components-main-nav-glass-edge-highlight-first: rgb(255 255 255 / 0.98); + --color-components-main-nav-glass-edge-highlight-middle: rgb(255 255 255 / 0); + --color-components-main-nav-glass-edge-highlight-end: rgb(255 255 255 / 0.42); - --color-components-chart-line: #296dff; - --color-components-chart-area-1: rgb(21 90 239 / 0.14); - --color-components-chart-area-2: rgb(21 90 239 / 0.04); - --color-components-chart-current-1: #155aef; - --color-components-chart-current-2: #d1e0ff; --color-components-chart-bg: #ffffff; + --color-components-chart-line: #0033ff; + --color-components-chart-current-1: #0033ff; + --color-components-chart-current-2: #d0dfff; + --color-components-chart-area-1: rgb(0 51 255 / 0.14); + --color-components-chart-area-2: rgb(0 51 255 / 0.04); - --color-components-actionbar-bg: rgb(255 255 255 / 0.95); - --color-components-actionbar-border: rgb(16 24 40 / 0.04); - --color-components-actionbar-bg-accent: #f5f7ff; - --color-components-actionbar-border-accent: #b2caff; + --color-divider-subtle: rgb(16 24 40 / 0.04); + --color-divider-regular: rgb(16 24 40 / 0.08); + --color-divider-deep: rgb(16 24 40 / 0.14); + --color-divider-intense: rgb(16 24 40 / 0.3); + --color-divider-burn: rgb(16 24 40 / 0.04); + --color-divider-solid: #d0d5dc; + --color-divider-solid-alt: #98a2b2; + --color-divider-accent: #e5eaff; - --color-components-dropzone-bg-alt: #f2f4f7; - --color-components-dropzone-bg: #f9fafb; - --color-components-dropzone-bg-accent: rgb(21 90 239 / 0.14); - --color-components-dropzone-border: rgb(16 24 40 / 0.08); - --color-components-dropzone-border-alt: rgb(16 24 40 / 0.2); - --color-components-dropzone-border-accent: #84abff; - - --color-components-progress-brand-progress: #296dff; - --color-components-progress-brand-border: #296dff; - --color-components-progress-brand-bg: rgb(21 90 239 / 0.04); - - --color-components-progress-white-progress: #ffffff; - --color-components-progress-white-border: rgb(255 255 255 / 0.95); - --color-components-progress-white-bg: rgb(255 255 255 / 0.01); - - --color-components-progress-gray-progress: #98a2b2; - --color-components-progress-gray-border: #98a2b2; - --color-components-progress-gray-bg: rgb(200 206 218 / 0.02); - - --color-components-progress-warning-progress: #f79009; - --color-components-progress-warning-border: #f79009; - --color-components-progress-warning-bg: rgb(247 144 9 / 0.04); - - --color-components-progress-error-progress: #f04438; - --color-components-progress-error-border: #f04438; - --color-components-progress-error-bg: rgb(240 68 56 / 0.04); - - --color-components-chat-input-audio-bg: #eff4ff; - --color-components-chat-input-audio-wave-default: rgb(21 90 239 / 0.2); - --color-components-chat-input-bg-mask-1: rgb(255 255 255 / 0.01); - --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: rgb(255 255 255 / 0.9); - - --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.12); - --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.08); - - --color-components-avatar-default-avatar-bg: #d0d5dc; - --color-components-avatar-mask-darkmode-dimmed: rgb(255 255 255 / 0); - - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --color-components-premium-badge-blue-stroke-stop-100-hover: #00329e; - - --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12); - --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.3); - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --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: rgb(255 255 255 / 0.95); - --color-components-premium-badge-orange-stroke-stop-100-hover: #bc1b06; - - --color-components-progress-bar-bg: rgb(21 90 239 / 0.04); - --color-components-progress-bar-progress: rgb(21 90 239 / 0.14); - --color-components-progress-bar-border: rgb(16 24 40 / 0.04); - --color-components-progress-bar-progress-solid: #296dff; - --color-components-progress-bar-progress-highlight: rgb(21 90 239 / 0.2); - - --color-components-icon-bg-red-solid: #d92d20; - --color-components-icon-bg-rose-solid: #e31b54; - --color-components-icon-bg-pink-solid: #dd2590; - --color-components-icon-bg-orange-dark-solid: #ff4405; - --color-components-icon-bg-yellow-solid: #eaaa08; - --color-components-icon-bg-green-solid: #4ca30d; - --color-components-icon-bg-teal-solid: #0e9384; - --color-components-icon-bg-blue-light-solid: #0ba5ec; - --color-components-icon-bg-blue-solid: #155aef; - --color-components-icon-bg-indigo-solid: #444ce7; - --color-components-icon-bg-violet-solid: #7839ee; - --color-components-icon-bg-midnight-solid: #828dad; - --color-components-icon-bg-rose-soft: #fff1f3; - --color-components-icon-bg-pink-soft: #fdf2fa; - --color-components-icon-bg-orange-dark-soft: #fff4ed; - --color-components-icon-bg-yellow-soft: #fefbe8; - --color-components-icon-bg-green-soft: #f3fee7; - --color-components-icon-bg-teal-soft: #f0fdf9; - --color-components-icon-bg-blue-light-soft: #f0f9ff; - --color-components-icon-bg-blue-soft: #eff4ff; - --color-components-icon-bg-indigo-soft: #eef4ff; - --color-components-icon-bg-violet-soft: #f5f3ff; - --color-components-icon-bg-midnight-soft: #f0f2f5; - --color-components-icon-bg-red-soft: #fef3f2; - --color-components-icon-bg-orange-solid: #f79009; - --color-components-icon-bg-orange-soft: #fffaeb; - - --color-text-primary: #101828; - --color-text-secondary: #354052; - --color-text-tertiary: #676f83; - --color-text-quaternary: rgb(16 24 40 / 0.3); - --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: rgb(21 90 239 / 0.14); - --color-text-secondary-on-surface: rgb(255 255 255 / 0.9); - --color-text-logo-text: #18222f; - --color-text-empty-state-icon: #d0d5dc; - --color-text-inverted: #000000; - --color-text-inverted-dimmed: rgb(0 0 0 / 0.95); - - --color-background-body: #f2f4f7; - --color-background-default-subtle: #fcfcfd; - --color-background-neutral-subtle: #f9fafb; - --color-background-sidenav-bg: rgb(255 255 255 / 0.8); - --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: rgb(255 255 255 / 0.6); - --color-background-gradient-bg-fill-debug-bg-1: rgb(255 255 255 / 0); - --color-background-gradient-bg-fill-debug-bg-2: rgb(200 206 218 / 0.14); - - --color-background-gradient-mask-gray: rgb(200 206 218 / 0.2); - --color-background-gradient-mask-transparent: rgb(255 255 255 / 0); - --color-background-gradient-mask-input-clear-2: rgb(233 235 240 / 0); - --color-background-gradient-mask-input-clear-1: #e9ebf0; - --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0); - --color-background-gradient-mask-side-panel-2: rgb(16 24 40 / 0.3); - --color-background-gradient-mask-side-panel-1: rgb(16 24 40 / 0.02); - - --color-background-default-burn: #e9ebf0; - --color-background-overlay-fullscreen: rgb(249 250 251 / 0.95); - --color-background-default-lighter: rgb(255 255 255 / 0.5); - --color-background-section: #f9fafb; - --color-background-interaction-from-bg-1: rgb(200 206 218 / 0.2); - --color-background-interaction-from-bg-2: rgb(200 206 218 / 0.14); - --color-background-section-burn: #f2f4f7; - --color-background-default-dodge: #ffffff; - --color-background-overlay: rgb(16 24 40 / 0.6); - --color-background-default-dimmed: #e9ebf0; - --color-background-default-hover: #f9fafb; - --color-background-overlay-alt: rgb(16 24 40 / 0.4); - --color-background-surface-white: rgb(255 255 255 / 0.95); - --color-background-overlay-destructive: rgb(240 68 56 / 0.3); - --color-background-overlay-backdrop: rgb(242 244 247 / 0.95); - --color-background-body-transparent: rgb(242 244 247 / 0); - --color-background-section-burn-inverted: #f2f4f7; + --color-effects-highlight: #ffffff; + --color-effects-highlight-subtle: rgb(255 255 255 / 0.5); + --color-effects-highlight-lightmode-off: rgb(255 255 255 / 0); + --color-effects-image-frame: #ffffff; + --color-effects-icon-border: rgb(16 24 40 / 0.08); --color-shadow-shadow-1: rgb(9 9 11 / 0.03); + --color-shadow-shadow-2: rgb(9 9 11 / 0.04); --color-shadow-shadow-3: rgb(9 9 11 / 0.05); --color-shadow-shadow-4: rgb(9 9 11 / 0.06); --color-shadow-shadow-5: rgb(9 9 11 / 0.08); @@ -441,124 +589,18 @@ html[data-theme="light"] { --color-shadow-shadow-7: rgb(9 9 11 / 0.12); --color-shadow-shadow-8: rgb(9 9 11 / 0.14); --color-shadow-shadow-9: rgb(9 9 11 / 0.18); - --color-shadow-shadow-2: rgb(9 9 11 / 0.04); --color-shadow-shadow-10: rgb(9 9 11 / 0.05); - --color-workflow-block-border: #ffffff; - --color-workflow-block-parma-bg: #f2f4f7; - --color-workflow-block-bg: #fcfcfd; - --color-workflow-block-bg-transparent: rgb(252 252 253 / 0.9); - --color-workflow-block-border-highlight: rgb(21 90 239 / 0.14); - --color-workflow-block-wrapper-bg-1: #e9ebf0; - --color-workflow-block-wrapper-bg-2: rgb(233 235 240 / 0.2); - - --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15); - --color-workflow-canvas-workflow-bg: #f2f4f7; - --color-workflow-canvas-workflow-top-bar-1: rgb(242 244 247 / 0.9); - --color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.05); - --color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8); - - --color-workflow-link-line-active: #296dff; - --color-workflow-link-line-normal: #d0d5dc; - --color-workflow-link-line-handle: #296dff; - --color-workflow-link-line-normal-transparent: rgb(208 213 220 / 0.2); - --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: rgb(200 206 218 / 0.3); - - --color-workflow-display-success-bg: #ecfdf3; - --color-workflow-display-success-border-1: rgb(23 178 106 / 0.8); - --color-workflow-display-success-border-2: rgb(23 178 106 / 0.5); - --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.2); - --color-workflow-display-success-bg-line-pattern: rgb(23 178 106 / 0.3); - - --color-workflow-display-glass-1: rgb(255 255 255 / 0.12); - --color-workflow-display-glass-2: rgb(255 255 255 / 0.5); - --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.12); - --color-workflow-display-highlight: rgb(255 255 255 / 0.5); - --color-workflow-display-outline: rgb(0 0 0 / 0.05); - --color-workflow-display-error-bg: #fef3f2; - --color-workflow-display-error-bg-line-pattern: rgb(240 68 56 / 0.3); - --color-workflow-display-error-border-1: rgb(240 68 56 / 0.8); - --color-workflow-display-error-border-2: rgb(240 68 56 / 0.5); - --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.2); - - --color-workflow-display-warning-bg: #fffaeb; - --color-workflow-display-warning-bg-line-pattern: rgb(247 144 9 / 0.3); - --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.8); - --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.5); - --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.2); - - --color-workflow-display-normal-bg: #f0f9ff; - --color-workflow-display-normal-bg-line-pattern: rgb(11 165 236 / 0.3); - --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.8); - --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.5); - --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.2); - - --color-workflow-display-disabled-bg: #f9fafb; - --color-workflow-display-disabled-bg-line-pattern: rgb(200 206 218 / 0.3); - --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6); - --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.4); - --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.4); - --color-workflow-display-disabled-outline: rgb(0 0 0 / 0); - - --color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2); - --color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04); - - --color-divider-subtle: rgb(16 24 40 / 0.04); - --color-divider-regular: rgb(16 24 40 / 0.08); - --color-divider-deep: rgb(16 24 40 / 0.14); - --color-divider-burn: rgb(16 24 40 / 0.04); - --color-divider-intense: rgb(16 24 40 / 0.3); - --color-divider-solid: #d0d5dc; - --color-divider-solid-alt: #98a2b2; - --color-divider-accent: #e5eaff; - - --color-state-base-hover: rgb(200 206 218 / 0.2); - --color-state-base-active: rgb(200 206 218 / 0.4); - --color-state-base-hover-alt: rgb(200 206 218 / 0.4); - --color-state-base-handle: rgb(16 24 40 / 0.2); - --color-state-base-handle-hover: rgb(16 24 40 / 0.3); - --color-state-base-hover-subtle: rgb(200 206 218 / 0.08); - - --color-state-accent-hover: #eff4ff; - --color-state-accent-active: rgb(21 90 239 / 0.08); - --color-state-accent-hover-alt: #d1e0ff; - --color-state-accent-solid: #296dff; - --color-state-accent-active-alt: rgb(21 90 239 / 0.14); - - --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-destructive-hover-transparent: rgb(254 243 242 / 0); - - --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-state-warning-hover-transparent: rgb(255 250 235 / 0); - - --color-effects-highlight: #ffffff; - --color-effects-highlight-lightmode-off: rgb(255 255 255 / 0); - --color-effects-image-frame: #ffffff; - --color-effects-icon-border: rgb(16 24 40 / 0.08); + --color-third-party-LangChain: #1c3c3c; + --color-third-party-Langfuse: #000000; + --color-third-party-Github: #1b1f24; + --color-third-party-Github-tertiary: #1b1f24; + --color-third-party-Github-secondary: #1b1f24; + --color-third-party-aws: #141f2e; + --color-third-party-aws-alt: #0f1824; + --color-third-party-model-bg-openai: #e3e5e8; + --color-third-party-model-bg-anthropic: #eeede7; + --color-third-party-model-bg-default: #f9fafb; --color-util-colors-orange-dark-orange-dark-50: #fff4ed; --color-util-colors-orange-dark-orange-dark-100: #ffe6d5; @@ -633,6 +675,15 @@ html[data-theme="light"] { --color-util-colors-blue-light-blue-light-600: #0086c9; --color-util-colors-blue-light-blue-light-700: #026aa2; + --color-util-colors-blue-brand-blue-brand-50: #f5f8ff; + --color-util-colors-blue-brand-blue-brand-100: #d0dfff; + --color-util-colors-blue-brand-blue-brand-200: #a0bdff; + --color-util-colors-blue-brand-blue-brand-300: #6694ff; + --color-util-colors-blue-brand-blue-brand-400: #3072ff; + --color-util-colors-blue-brand-blue-brand-500: #085afc; + --color-util-colors-blue-brand-blue-brand-600: #0033ff; + --color-util-colors-blue-brand-blue-brand-700: #002cde; + --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; @@ -642,15 +693,6 @@ html[data-theme="light"] { --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; @@ -669,6 +711,15 @@ html[data-theme="light"] { --color-util-colors-green-green-600: #079455; --color-util-colors-green-green-700: #067647; + --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-400: #85e13a; + --color-util-colors-green-light-green-light-500: #66c61c; + --color-util-colors-green-light-green-light-600: #4ca30d; + --color-util-colors-green-light-green-light-700: #3b7c0f; + --color-util-colors-warning-warning-50: #fffaeb; --color-util-colors-warning-warning-100: #fef0c7; --color-util-colors-warning-warning-200: #fedf89; @@ -723,15 +774,6 @@ html[data-theme="light"] { --color-util-colors-gray-gray-600: #495464; --color-util-colors-gray-gray-700: #354052; - --color-util-colors-green-light-green-light-50: #f3fee7; - --color-util-colors-green-light-green-light-100: #e3fbcc; - --color-util-colors-green-light-green-light-200: #d0f8ab; - --color-util-colors-green-light-green-light-300: #a6ef67; - --color-util-colors-green-light-green-light-500: #66c61c; - --color-util-colors-green-light-green-light-400: #85e13a; - --color-util-colors-green-light-green-light-600: #4ca30d; - --color-util-colors-green-light-green-light-700: #3b7c0f; - --color-util-colors-rose-rose-50: #fff1f3; --color-util-colors-rose-rose-100: #ffe4e8; --color-util-colors-rose-rose-200: #fecdd6; @@ -750,30 +792,31 @@ html[data-theme="light"] { --color-util-colors-midnight-midnight-600: #5d698d; --color-util-colors-midnight-midnight-700: #3e465e; - --color-third-party-LangChain: #1c3c3c; - --color-third-party-Langfuse: #000000; - --color-third-party-Github: #1b1f24; - --color-third-party-Github-tertiary: #1b1f24; - --color-third-party-Github-secondary: #1b1f24; - --color-third-party-model-bg-openai: #e3e5e8; - --color-third-party-model-bg-anthropic: #eeede7; - --color-third-party-model-bg-default: #f9fafb; - - --color-third-party-aws: #141f2e; - --color-third-party-aws-alt: #0f1824; - --color-saas-background: #ffffff; + --color-saas-background-inverted: #0b0b0e; + --color-saas-background-inverted-hover: #222225; --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.5); --color-saas-dify-blue-static: #0033ff; - --color-saas-dify-blue-static-hover: #002cd6; + --color-saas-dify-blue-static-hover: #002cde; --color-saas-dify-blue-accessible: #0033ff; --color-saas-dify-blue-inverted: #0033ff; --color-saas-dify-blue-inverted-dimmed: #0033ff; - --color-saas-background-inverted: #0b0b0e; - --color-saas-background-inverted-hover: #222225; - --color-dify-logo-blue: #0033ff; --color-dify-logo-black: #000000; + --color-dify-logo-outline-1: rgb(0 0 0 / 0); + --color-dify-logo-outline-2: rgb(0 0 0 / 0); + + --color-brand-color-opacity-50: #f3f5fd; + --color-brand-color-opacity-100: #e2e7fb; + --color-brand-color-opacity-200: #bac6f5; + --color-brand-color-opacity-300: #899eee; + --color-brand-color-opacity-400: #4f6de5; + --color-brand-color-opacity-500: #0033ff; + --color-brand-color-opacity-600: #082bb4; + --color-brand-color-opacity-700: #07228e; + --color-brand-color-opacity-800: #051969; + --color-brand-color-opacity-900: #031042; + --color-brand-color-opacity-1000: #020821; } diff --git a/packages/dify-ui/src/themes/theme.css b/packages/dify-ui/src/themes/theme.css index c14e54ea549..c6ed246f9b1 100644 --- a/packages/dify-ui/src/themes/theme.css +++ b/packages/dify-ui/src/themes/theme.css @@ -7,34 +7,368 @@ */ @theme inline { + --color-text-primary: var(--color-text-primary); + --color-text-secondary: var(--color-text-secondary); + --color-text-tertiary: var(--color-text-tertiary); + --color-text-quaternary: var(--color-text-quaternary); + --color-text-empty-state-icon: var(--color-text-empty-state-icon); + --color-text-primary-on-surface: var(--color-text-primary-on-surface); + --color-text-secondary-on-surface: var(--color-text-secondary-on-surface); + --color-text-destructive: var(--color-text-destructive); + --color-text-destructive-secondary: var(--color-text-destructive-secondary); + --color-text-success: var(--color-text-success); + --color-text-success-secondary: var(--color-text-success-secondary); + --color-text-warning: var(--color-text-warning); + --color-text-warning-secondary: var(--color-text-warning-secondary); + --color-text-accent: var(--color-text-accent); + --color-text-accent-secondary: var(--color-text-accent-secondary); + --color-text-accent-light-mode-only: var(--color-text-accent-light-mode-only); + --color-text-placeholder: var(--color-text-placeholder); + --color-text-disabled: var(--color-text-disabled); + --color-text-text-selected: var(--color-text-text-selected); + --color-text-logo-text: var(--color-text-logo-text); + --color-text-inverted: var(--color-text-inverted); + --color-text-inverted-dimmed: var(--color-text-inverted-dimmed); + + --color-background-body: var(--color-background-body); + --color-background-body-transparent: var(--color-background-body-transparent); + --color-background-default: var(--color-background-default); + --color-background-default-hover: var(--color-background-default-hover); + --color-background-default-hover-alpha-0: var(--color-background-default-hover-alpha-0); + --color-background-default-subtle: var(--color-background-default-subtle); + --color-background-default-dodge: var(--color-background-default-dodge); + --color-background-default-burn: var(--color-background-default-burn); + --color-background-default-dimmed: var(--color-background-default-dimmed); + --color-background-default-lighter: var(--color-background-default-lighter); + --color-background-section: var(--color-background-section); + --color-background-section-burn: var(--color-background-section-burn); + --color-background-section-burn-inverted: var(--color-background-section-burn-inverted); + --color-background-soft: var(--color-background-soft); + --color-background-neutral-subtle: var(--color-background-neutral-subtle); + --color-background-surface-white: var(--color-background-surface-white); + --color-background-sidenav-bg: var(--color-background-sidenav-bg); + --color-background-overlay-fullscreen: var(--color-background-overlay-fullscreen); + --color-background-overlay-backdrop: var(--color-background-overlay-backdrop); + --color-background-overlay: var(--color-background-overlay); + --color-background-overlay-alt: var(--color-background-overlay-alt); + --color-background-overlay-destructive: var(--color-background-overlay-destructive); + --color-background-interaction-from-bg-1: var(--color-background-interaction-from-bg-1); + --color-background-interaction-from-bg-2: var(--color-background-interaction-from-bg-2); + --color-background-gradient-bg-fill-chat-bg-1: var(--color-background-gradient-bg-fill-chat-bg-1); + --color-background-gradient-bg-fill-chat-bg-2: var(--color-background-gradient-bg-fill-chat-bg-2); + --color-background-gradient-bg-fill-chat-bubble-bg-1: var(--color-background-gradient-bg-fill-chat-bubble-bg-1); + --color-background-gradient-bg-fill-chat-bubble-bg-2: var(--color-background-gradient-bg-fill-chat-bubble-bg-2); + --color-background-gradient-bg-fill-debug-bg-1: var(--color-background-gradient-bg-fill-debug-bg-1); + --color-background-gradient-bg-fill-debug-bg-2: var(--color-background-gradient-bg-fill-debug-bg-2); + + --color-background-gradient-mask-gray: var(--color-background-gradient-mask-gray); + --color-background-gradient-mask-transparent: var(--color-background-gradient-mask-transparent); + --color-background-gradient-mask-transparent-dark: var(--color-background-gradient-mask-transparent-dark); + --color-background-gradient-mask-side-panel-1: var(--color-background-gradient-mask-side-panel-1); + --color-background-gradient-mask-side-panel-2: var(--color-background-gradient-mask-side-panel-2); + --color-background-gradient-mask-input-clear-1: var(--color-background-gradient-mask-input-clear-1); + --color-background-gradient-mask-input-clear-2: var(--color-background-gradient-mask-input-clear-2); + + --color-state-base-hover-subtle: var(--color-state-base-hover-subtle); + --color-state-base-hover: var(--color-state-base-hover); + --color-state-base-hover-alt: var(--color-state-base-hover-alt); + --color-state-base-active: var(--color-state-base-active); + --color-state-base-handle: var(--color-state-base-handle); + --color-state-base-handle-hover: var(--color-state-base-handle-hover); + + --color-state-accent-hover: var(--color-state-accent-hover); + --color-state-accent-hover-alt: var(--color-state-accent-hover-alt); + --color-state-accent-active: var(--color-state-accent-active); + --color-state-accent-active-alt: var(--color-state-accent-active-alt); + --color-state-accent-solid: var(--color-state-accent-solid); + + --color-state-destructive-hover: var(--color-state-destructive-hover); + --color-state-destructive-hover-transparent: var(--color-state-destructive-hover-transparent); + --color-state-destructive-hover-alt: var(--color-state-destructive-hover-alt); + --color-state-destructive-active: var(--color-state-destructive-active); + --color-state-destructive-solid: var(--color-state-destructive-solid); + --color-state-destructive-border: var(--color-state-destructive-border); + + --color-state-warning-hover: var(--color-state-warning-hover); + --color-state-warning-hover-transparent: var(--color-state-warning-hover-transparent); + --color-state-warning-hover-alt: var(--color-state-warning-hover-alt); + --color-state-warning-active: var(--color-state-warning-active); + --color-state-warning-solid: var(--color-state-warning-solid); + + --color-state-success-hover: var(--color-state-success-hover); + --color-state-success-hover-alt: var(--color-state-success-hover-alt); + --color-state-success-active: var(--color-state-success-active); + --color-state-success-solid: var(--color-state-success-solid); + + --color-workflow-workflow-progress-bg-1: var(--color-workflow-workflow-progress-bg-1); + --color-workflow-workflow-progress-bg-2: var(--color-workflow-workflow-progress-bg-2); + + --color-workflow-block-bg: var(--color-workflow-block-bg); + --color-workflow-block-bg-transparent: var(--color-workflow-block-bg-transparent); + --color-workflow-block-border: var(--color-workflow-block-border); + --color-workflow-block-border-highlight: var(--color-workflow-block-border-highlight); + --color-workflow-block-parma-bg: var(--color-workflow-block-parma-bg); + --color-workflow-block-wrapper-bg-1: var(--color-workflow-block-wrapper-bg-1); + --color-workflow-block-wrapper-bg-2: var(--color-workflow-block-wrapper-bg-2); + + --color-workflow-link-line-normal: var(--color-workflow-link-line-normal); + --color-workflow-link-line-normal-transparent: var(--color-workflow-link-line-normal-transparent); + --color-workflow-link-line-active: var(--color-workflow-link-line-active); + --color-workflow-link-line-handle: var(--color-workflow-link-line-handle); + --color-workflow-link-line-failure-active: var(--color-workflow-link-line-failure-active); + --color-workflow-link-line-failure-handle: var(--color-workflow-link-line-failure-handle); + --color-workflow-link-line-failure-button-bg: var(--color-workflow-link-line-failure-button-bg); + --color-workflow-link-line-failure-button-hover: var(--color-workflow-link-line-failure-button-hover); + + --color-workflow-link-line-success-active: var(--color-workflow-link-line-success-active); + --color-workflow-link-line-success-handle: var(--color-workflow-link-line-success-handle); + + --color-workflow-link-line-error-active: var(--color-workflow-link-line-error-active); + --color-workflow-link-line-error-handle: var(--color-workflow-link-line-error-handle); + + --color-workflow-minimap-block: var(--color-workflow-minimap-block); + --color-workflow-minimap-bg: var(--color-workflow-minimap-bg); + + --color-workflow-display-glass-1: var(--color-workflow-display-glass-1); + --color-workflow-display-glass-2: var(--color-workflow-display-glass-2); + --color-workflow-display-highlight: var(--color-workflow-display-highlight); + --color-workflow-display-outline: var(--color-workflow-display-outline); + --color-workflow-display-vignette-dark: var(--color-workflow-display-vignette-dark); + --color-workflow-display-success-bg: var(--color-workflow-display-success-bg); + --color-workflow-display-success-bg-line-pattern: var(--color-workflow-display-success-bg-line-pattern); + --color-workflow-display-success-border-1: var(--color-workflow-display-success-border-1); + --color-workflow-display-success-border-2: var(--color-workflow-display-success-border-2); + --color-workflow-display-success-vignette-color: var(--color-workflow-display-success-vignette-color); + + --color-workflow-display-error-bg: var(--color-workflow-display-error-bg); + --color-workflow-display-error-bg-line-pattern: var(--color-workflow-display-error-bg-line-pattern); + --color-workflow-display-error-border-1: var(--color-workflow-display-error-border-1); + --color-workflow-display-error-border-2: var(--color-workflow-display-error-border-2); + --color-workflow-display-error-vignette-color: var(--color-workflow-display-error-vignette-color); + + --color-workflow-display-warning-bg: var(--color-workflow-display-warning-bg); + --color-workflow-display-warning-bg-line-pattern: var(--color-workflow-display-warning-bg-line-pattern); + --color-workflow-display-warning-border-1: var(--color-workflow-display-warning-border-1); + --color-workflow-display-warning-border-2: var(--color-workflow-display-warning-border-2); + --color-workflow-display-warning-vignette-color: var(--color-workflow-display-warning-vignette-color); + + --color-workflow-display-normal-bg: var(--color-workflow-display-normal-bg); + --color-workflow-display-normal-bg-line-pattern: var(--color-workflow-display-normal-bg-line-pattern); + --color-workflow-display-normal-border-1: var(--color-workflow-display-normal-border-1); + --color-workflow-display-normal-border-2: var(--color-workflow-display-normal-border-2); + --color-workflow-display-normal-vignette-color: var(--color-workflow-display-normal-vignette-color); + + --color-workflow-display-disabled-bg: var(--color-workflow-display-disabled-bg); + --color-workflow-display-disabled-bg-line-pattern: var(--color-workflow-display-disabled-bg-line-pattern); + --color-workflow-display-disabled-border-1: var(--color-workflow-display-disabled-border-1); + --color-workflow-display-disabled-border-2: var(--color-workflow-display-disabled-border-2); + --color-workflow-display-disabled-vignette-color: var(--color-workflow-display-disabled-vignette-color); + --color-workflow-display-disabled-outline: var(--color-workflow-display-disabled-outline); + + --color-workflow-canvas-workflow-dot-color: var(--color-workflow-canvas-workflow-dot-color); + --color-workflow-canvas-workflow-bg: var(--color-workflow-canvas-workflow-bg); + --color-workflow-canvas-workflow-top-bar-1: var(--color-workflow-canvas-workflow-top-bar-1); + --color-workflow-canvas-workflow-top-bar-2: var(--color-workflow-canvas-workflow-top-bar-2); + --color-workflow-canvas-canvas-overlay: var(--color-workflow-canvas-canvas-overlay); + + --color-workflow-debug-run-status-bg: var(--color-workflow-debug-run-status-bg); + --color-workflow-debug-run-status-bg-alt: var(--color-workflow-debug-run-status-bg-alt); + --color-workflow-debug-breakpoint: var(--color-workflow-debug-breakpoint); + --color-workflow-debug-text: var(--color-workflow-debug-text); + --color-workflow-debug-text-disabled: var(--color-workflow-debug-text-disabled); + + --color-workflow-test-run-run-status-bg: var(--color-workflow-test-run-run-status-bg); + --color-workflow-test-run-paused-bg: var(--color-workflow-test-run-paused-bg); + --color-workflow-test-run-paused-text: var(--color-workflow-test-run-paused-text); + --color-workflow-test-run-run-status-bg-alt: var(--color-workflow-test-run-run-status-bg-alt); + --color-workflow-test-run-text: var(--color-workflow-test-run-text); + + --color-components-icon-bg-red-solid: var(--color-components-icon-bg-red-solid); + --color-components-icon-bg-rose-solid: var(--color-components-icon-bg-rose-solid); + --color-components-icon-bg-pink-solid: var(--color-components-icon-bg-pink-solid); + --color-components-icon-bg-orange-dark-solid: var(--color-components-icon-bg-orange-dark-solid); + --color-components-icon-bg-orange-solid: var(--color-components-icon-bg-orange-solid); + --color-components-icon-bg-yellow-solid: var(--color-components-icon-bg-yellow-solid); + --color-components-icon-bg-green-solid: var(--color-components-icon-bg-green-solid); + --color-components-icon-bg-teal-solid: var(--color-components-icon-bg-teal-solid); + --color-components-icon-bg-blue-light-solid: var(--color-components-icon-bg-blue-light-solid); + --color-components-icon-bg-blue-solid: var(--color-components-icon-bg-blue-solid); + --color-components-icon-bg-indigo-solid: var(--color-components-icon-bg-indigo-solid); + --color-components-icon-bg-violet-solid: var(--color-components-icon-bg-violet-solid); + --color-components-icon-bg-midnight-solid: var(--color-components-icon-bg-midnight-solid); + --color-components-icon-bg-red-soft: var(--color-components-icon-bg-red-soft); + --color-components-icon-bg-rose-soft: var(--color-components-icon-bg-rose-soft); + --color-components-icon-bg-pink-soft: var(--color-components-icon-bg-pink-soft); + --color-components-icon-bg-orange-dark-soft: var(--color-components-icon-bg-orange-dark-soft); + --color-components-icon-bg-orange-soft: var(--color-components-icon-bg-orange-soft); + --color-components-icon-bg-yellow-soft: var(--color-components-icon-bg-yellow-soft); + --color-components-icon-bg-green-soft: var(--color-components-icon-bg-green-soft); + --color-components-icon-bg-teal-soft: var(--color-components-icon-bg-teal-soft); + --color-components-icon-bg-blue-light-soft: var(--color-components-icon-bg-blue-light-soft); + --color-components-icon-bg-blue-soft: var(--color-components-icon-bg-blue-soft); + --color-components-icon-bg-indigo-soft: var(--color-components-icon-bg-indigo-soft); + --color-components-icon-bg-violet-soft: var(--color-components-icon-bg-violet-soft); + --color-components-icon-bg-midnight-soft: var(--color-components-icon-bg-midnight-soft); + + --color-components-avatar-default-avatar-bg: var(--color-components-avatar-default-avatar-bg); + --color-components-avatar-mask-darkmode-dimmed: var(--color-components-avatar-mask-darkmode-dimmed); + --color-components-avatar-shape-fill-stop-0: var(--color-components-avatar-shape-fill-stop-0); + --color-components-avatar-shape-fill-stop-100: var(--color-components-avatar-shape-fill-stop-100); + + --color-components-avatar-bg-mask-stop-0: var(--color-components-avatar-bg-mask-stop-0); + --color-components-avatar-bg-mask-stop-100: var(--color-components-avatar-bg-mask-stop-100); + + --color-components-chat-input-audio-bg: var(--color-components-chat-input-audio-bg); + --color-components-chat-input-audio-bg-alt: var(--color-components-chat-input-audio-bg-alt); + --color-components-chat-input-audio-wave-default: var(--color-components-chat-input-audio-wave-default); + --color-components-chat-input-audio-wave-active: var(--color-components-chat-input-audio-wave-active); + --color-components-chat-input-bg-mask-1: var(--color-components-chat-input-bg-mask-1); + --color-components-chat-input-bg-mask-2: var(--color-components-chat-input-bg-mask-2); + --color-components-chat-input-border: var(--color-components-chat-input-border); + + --color-components-label-gray: var(--color-components-label-gray); + + --color-components-premium-badge-highlight-stop-0: var(--color-components-premium-badge-highlight-stop-0); + --color-components-premium-badge-highlight-stop-100: var(--color-components-premium-badge-highlight-stop-100); + --color-components-premium-badge-orange-bg-stop-0: var(--color-components-premium-badge-orange-bg-stop-0); + --color-components-premium-badge-orange-bg-stop-100: var(--color-components-premium-badge-orange-bg-stop-100); + --color-components-premium-badge-orange-stroke-stop-0: var(--color-components-premium-badge-orange-stroke-stop-0); + --color-components-premium-badge-orange-stroke-stop-100: var(--color-components-premium-badge-orange-stroke-stop-100); + --color-components-premium-badge-orange-text-stop-0: var(--color-components-premium-badge-orange-text-stop-0); + --color-components-premium-badge-orange-text-stop-100: var(--color-components-premium-badge-orange-text-stop-100); + --color-components-premium-badge-orange-glow: var(--color-components-premium-badge-orange-glow); + --color-components-premium-badge-orange-glow-hover: var(--color-components-premium-badge-orange-glow-hover); + --color-components-premium-badge-orange-bg-stop-0-hover: var(--color-components-premium-badge-orange-bg-stop-0-hover); + --color-components-premium-badge-orange-bg-stop-100-hover: var(--color-components-premium-badge-orange-bg-stop-100-hover); + --color-components-premium-badge-orange-stroke-stop-0-hover: var(--color-components-premium-badge-orange-stroke-stop-0-hover); + --color-components-premium-badge-orange-stroke-stop-100-hover: var(--color-components-premium-badge-orange-stroke-stop-100-hover); + + --color-components-premium-badge-blue-bg-stop-0: var(--color-components-premium-badge-blue-bg-stop-0); + --color-components-premium-badge-blue-bg-stop-100: var(--color-components-premium-badge-blue-bg-stop-100); + --color-components-premium-badge-blue-stroke-stop-0: var(--color-components-premium-badge-blue-stroke-stop-0); + --color-components-premium-badge-blue-stroke-stop-100: var(--color-components-premium-badge-blue-stroke-stop-100); + --color-components-premium-badge-blue-text-stop-0: var(--color-components-premium-badge-blue-text-stop-0); + --color-components-premium-badge-blue-text-stop-100: var(--color-components-premium-badge-blue-text-stop-100); + --color-components-premium-badge-blue-glow: var(--color-components-premium-badge-blue-glow); + --color-components-premium-badge-blue-glow-hover: var(--color-components-premium-badge-blue-glow-hover); + --color-components-premium-badge-blue-bg-stop-0-hover: var(--color-components-premium-badge-blue-bg-stop-0-hover); + --color-components-premium-badge-blue-bg-stop-100-hover: var(--color-components-premium-badge-blue-bg-stop-100-hover); + --color-components-premium-badge-blue-stroke-stop-0-hover: var(--color-components-premium-badge-blue-stroke-stop-0-hover); + --color-components-premium-badge-blue-stroke-stop-100-hover: var(--color-components-premium-badge-blue-stroke-stop-100-hover); + + --color-components-premium-badge-indigo-bg-stop-0: var(--color-components-premium-badge-indigo-bg-stop-0); + --color-components-premium-badge-indigo-bg-stop-100: var(--color-components-premium-badge-indigo-bg-stop-100); + --color-components-premium-badge-indigo-stroke-stop-0: var(--color-components-premium-badge-indigo-stroke-stop-0); + --color-components-premium-badge-indigo-stroke-stop-100: var(--color-components-premium-badge-indigo-stroke-stop-100); + --color-components-premium-badge-indigo-text-stop-0: var(--color-components-premium-badge-indigo-text-stop-0); + --color-components-premium-badge-indigo-text-stop-100: var(--color-components-premium-badge-indigo-text-stop-100); + --color-components-premium-badge-indigo-glow: var(--color-components-premium-badge-indigo-glow); + --color-components-premium-badge-indigo-glow-hover: var(--color-components-premium-badge-indigo-glow-hover); + --color-components-premium-badge-indigo-bg-stop-0-hover: var(--color-components-premium-badge-indigo-bg-stop-0-hover); + --color-components-premium-badge-indigo-bg-stop-100-hover: var(--color-components-premium-badge-indigo-bg-stop-100-hover); + --color-components-premium-badge-indigo-stroke-stop-0-hover: var(--color-components-premium-badge-indigo-stroke-stop-0-hover); + --color-components-premium-badge-indigo-stroke-stop-100-hover: var(--color-components-premium-badge-indigo-stroke-stop-100-hover); + + --color-components-premium-badge-grey-bg-stop-0: var(--color-components-premium-badge-grey-bg-stop-0); + --color-components-premium-badge-grey-bg-stop-100: var(--color-components-premium-badge-grey-bg-stop-100); + --color-components-premium-badge-grey-stroke-stop-0: var(--color-components-premium-badge-grey-stroke-stop-0); + --color-components-premium-badge-grey-stroke-stop-100: var(--color-components-premium-badge-grey-stroke-stop-100); + --color-components-premium-badge-grey-text-stop-0: var(--color-components-premium-badge-grey-text-stop-0); + --color-components-premium-badge-grey-text-stop-100: var(--color-components-premium-badge-grey-text-stop-100); + --color-components-premium-badge-grey-glow: var(--color-components-premium-badge-grey-glow); + --color-components-premium-badge-grey-glow-hover: var(--color-components-premium-badge-grey-glow-hover); + --color-components-premium-badge-grey-bg-stop-0-hover: var(--color-components-premium-badge-grey-bg-stop-0-hover); + --color-components-premium-badge-grey-bg-stop-100-hover: var(--color-components-premium-badge-grey-bg-stop-100-hover); + --color-components-premium-badge-grey-stroke-stop-0-hover: var(--color-components-premium-badge-grey-stroke-stop-0-hover); + --color-components-premium-badge-grey-stroke-stop-100-hover: var(--color-components-premium-badge-grey-stroke-stop-100-hover); + + --color-components-dropzone-bg: var(--color-components-dropzone-bg); + --color-components-dropzone-bg-alt: var(--color-components-dropzone-bg-alt); + --color-components-dropzone-bg-accent: var(--color-components-dropzone-bg-accent); + --color-components-dropzone-border: var(--color-components-dropzone-border); + --color-components-dropzone-border-alt: var(--color-components-dropzone-border-alt); + --color-components-dropzone-border-accent: var(--color-components-dropzone-border-accent); + + --color-components-panel-bg: var(--color-components-panel-bg); + --color-components-panel-bg-transparent: var(--color-components-panel-bg-transparent); + --color-components-panel-bg-alt: var(--color-components-panel-bg-alt); + --color-components-panel-bg-blur: var(--color-components-panel-bg-blur); + --color-components-panel-bg-blur-burn: var(--color-components-panel-bg-blur-burn); + --color-components-panel-border: var(--color-components-panel-border); + --color-components-panel-border-subtle: var(--color-components-panel-border-subtle); + --color-components-panel-gradient-1: var(--color-components-panel-gradient-1); + --color-components-panel-gradient-2: var(--color-components-panel-gradient-2); + --color-components-panel-on-panel-item-bg: var(--color-components-panel-on-panel-item-bg); + --color-components-panel-on-panel-item-bg-transparent: var(--color-components-panel-on-panel-item-bg-transparent); + --color-components-panel-on-panel-item-bg-hover: var(--color-components-panel-on-panel-item-bg-hover); + --color-components-panel-on-panel-item-bg-hover-transparent: var(--color-components-panel-on-panel-item-bg-hover-transparent); + --color-components-panel-on-panel-item-bg-destructive-hover-transparent: var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent); + --color-components-panel-on-panel-item-bg-alt: var(--color-components-panel-on-panel-item-bg-alt); + + --color-components-marketplace-header-bg: var(--color-components-marketplace-header-bg); + + --color-components-card-bg: var(--color-components-card-bg); + --color-components-card-bg-alt: var(--color-components-card-bg-alt); + --color-components-card-bg-transparent: var(--color-components-card-bg-transparent); + --color-components-card-bg-alt-transparent: var(--color-components-card-bg-alt-transparent); + --color-components-card-border: var(--color-components-card-border); + + --color-components-actionbar-border: var(--color-components-actionbar-border); + --color-components-actionbar-bg: var(--color-components-actionbar-bg); + --color-components-actionbar-bg-accent: var(--color-components-actionbar-bg-accent); + --color-components-actionbar-border-accent: var(--color-components-actionbar-border-accent); + --color-components-input-bg-normal: var(--color-components-input-bg-normal); - --color-components-input-text-placeholder: var(--color-components-input-text-placeholder); --color-components-input-bg-hover: var(--color-components-input-bg-hover); --color-components-input-bg-active: var(--color-components-input-bg-active); - --color-components-input-border-active: var(--color-components-input-border-active); - --color-components-input-border-destructive: var(--color-components-input-border-destructive); - --color-components-input-text-filled: var(--color-components-input-text-filled); - --color-components-input-bg-destructive: var(--color-components-input-bg-destructive); --color-components-input-bg-disabled: var(--color-components-input-bg-disabled); + --color-components-input-bg-destructive: var(--color-components-input-bg-destructive); + --color-components-input-text-filled: var(--color-components-input-text-filled); + --color-components-input-text-placeholder: var(--color-components-input-text-placeholder); --color-components-input-text-disabled: var(--color-components-input-text-disabled); --color-components-input-text-filled-disabled: var(--color-components-input-text-filled-disabled); + --color-components-input-text-filled-blue: var(--color-components-input-text-filled-blue); --color-components-input-border-hover: var(--color-components-input-border-hover); + --color-components-input-border-active: var(--color-components-input-border-active); --color-components-input-border-active-prompt-1: var(--color-components-input-border-active-prompt-1); --color-components-input-border-active-prompt-2: var(--color-components-input-border-active-prompt-2); + --color-components-input-border-destructive: var(--color-components-input-border-destructive); - --color-components-kbd-bg-gray: var(--color-components-kbd-bg-gray); - --color-components-kbd-bg-white: var(--color-components-kbd-bg-white); + --color-components-progress-brand-progress: var(--color-components-progress-brand-progress); + --color-components-progress-brand-border: var(--color-components-progress-brand-border); + --color-components-progress-brand-bg: var(--color-components-progress-brand-bg); - --color-components-tooltip-bg: var(--color-components-tooltip-bg); + --color-components-progress-white-progress: var(--color-components-progress-white-progress); + --color-components-progress-white-border: var(--color-components-progress-white-border); + --color-components-progress-white-bg: var(--color-components-progress-white-bg); + --color-components-progress-gray-progress: var(--color-components-progress-gray-progress); + --color-components-progress-gray-border: var(--color-components-progress-gray-border); + --color-components-progress-gray-bg: var(--color-components-progress-gray-bg); + + --color-components-progress-warning-progress: var(--color-components-progress-warning-progress); + --color-components-progress-warning-border: var(--color-components-progress-warning-border); + --color-components-progress-warning-bg: var(--color-components-progress-warning-bg); + + --color-components-progress-error-progress: var(--color-components-progress-error-progress); + --color-components-progress-error-border: var(--color-components-progress-error-border); + --color-components-progress-error-bg: var(--color-components-progress-error-bg); + + --color-components-progress-bar-progress: var(--color-components-progress-bar-progress); + --color-components-progress-bar-progress-highlight: var(--color-components-progress-bar-progress-highlight); + --color-components-progress-bar-progress-solid: var(--color-components-progress-bar-progress-solid); + --color-components-progress-bar-border: var(--color-components-progress-bar-border); + --color-components-progress-bar-bg: var(--color-components-progress-bar-bg); + + --color-components-button-button-seam: var(--color-components-button-button-seam); --color-components-button-primary-text: var(--color-components-button-primary-text); - --color-components-button-primary-bg: var(--color-components-button-primary-bg); - --color-components-button-primary-border: var(--color-components-button-primary-border); - --color-components-button-primary-bg-hover: var(--color-components-button-primary-bg-hover); - --color-components-button-primary-border-hover: var(--color-components-button-primary-border-hover); - --color-components-button-primary-bg-disabled: var(--color-components-button-primary-bg-disabled); - --color-components-button-primary-border-disabled: var(--color-components-button-primary-border-disabled); --color-components-button-primary-text-disabled: var(--color-components-button-primary-text-disabled); + --color-components-button-primary-bg: var(--color-components-button-primary-bg); + --color-components-button-primary-bg-hover: var(--color-components-button-primary-bg-hover); + --color-components-button-primary-bg-disabled: var(--color-components-button-primary-bg-disabled); + --color-components-button-primary-border: var(--color-components-button-primary-border); + --color-components-button-primary-border-hover: var(--color-components-button-primary-border-hover); + --color-components-button-primary-border-disabled: var(--color-components-button-primary-border-disabled); --color-components-button-secondary-text: var(--color-components-button-secondary-text); --color-components-button-secondary-text-disabled: var(--color-components-button-secondary-text-disabled); @@ -45,6 +379,15 @@ --color-components-button-secondary-border-hover: var(--color-components-button-secondary-border-hover); --color-components-button-secondary-border-disabled: var(--color-components-button-secondary-border-disabled); + --color-components-button-secondary-accent-text: var(--color-components-button-secondary-accent-text); + --color-components-button-secondary-accent-text-disabled: var(--color-components-button-secondary-accent-text-disabled); + --color-components-button-secondary-accent-bg: var(--color-components-button-secondary-accent-bg); + --color-components-button-secondary-accent-bg-hover: var(--color-components-button-secondary-accent-bg-hover); + --color-components-button-secondary-accent-bg-disabled: var(--color-components-button-secondary-accent-bg-disabled); + --color-components-button-secondary-accent-border: var(--color-components-button-secondary-accent-border); + --color-components-button-secondary-accent-border-hover: var(--color-components-button-secondary-accent-border-hover); + --color-components-button-secondary-accent-border-disabled: var(--color-components-button-secondary-accent-border-disabled); + --color-components-button-tertiary-text: var(--color-components-button-tertiary-text); --color-components-button-tertiary-text-disabled: var(--color-components-button-tertiary-text-disabled); --color-components-button-tertiary-bg: var(--color-components-button-tertiary-bg); @@ -83,42 +426,43 @@ --color-components-button-destructive-ghost-text-disabled: var(--color-components-button-destructive-ghost-text-disabled); --color-components-button-destructive-ghost-bg-hover: var(--color-components-button-destructive-ghost-bg-hover); - --color-components-button-secondary-accent-text: var(--color-components-button-secondary-accent-text); - --color-components-button-secondary-accent-text-disabled: var(--color-components-button-secondary-accent-text-disabled); - --color-components-button-secondary-accent-bg: var(--color-components-button-secondary-accent-bg); - --color-components-button-secondary-accent-bg-hover: var(--color-components-button-secondary-accent-bg-hover); - --color-components-button-secondary-accent-bg-disabled: var(--color-components-button-secondary-accent-bg-disabled); - --color-components-button-secondary-accent-border: var(--color-components-button-secondary-accent-border); - --color-components-button-secondary-accent-border-hover: var(--color-components-button-secondary-accent-border-hover); - --color-components-button-secondary-accent-border-disabled: var(--color-components-button-secondary-accent-border-disabled); - --color-components-button-indigo-bg: var(--color-components-button-indigo-bg); --color-components-button-indigo-bg-hover: var(--color-components-button-indigo-bg-hover); --color-components-button-indigo-bg-disabled: var(--color-components-button-indigo-bg-disabled); + --color-components-button-debug-text: var(--color-components-button-debug-text); + --color-components-button-debug-text-disabled: var(--color-components-button-debug-text-disabled); + --color-components-button-debug-bg: var(--color-components-button-debug-bg); + --color-components-button-debug-bg-hover: var(--color-components-button-debug-bg-hover); + --color-components-button-debug-bg-disabled: var(--color-components-button-debug-bg-disabled); + --color-components-button-debug-border: var(--color-components-button-debug-border); + --color-components-button-debug-border-hover: var(--color-components-button-debug-border-hover); + --color-components-button-debug-border-disabled: var(--color-components-button-debug-border-disabled); + --color-components-checkbox-icon: var(--color-components-checkbox-icon); --color-components-checkbox-icon-disabled: var(--color-components-checkbox-icon-disabled); --color-components-checkbox-bg: var(--color-components-checkbox-bg); --color-components-checkbox-bg-hover: var(--color-components-checkbox-bg-hover); --color-components-checkbox-bg-disabled: var(--color-components-checkbox-bg-disabled); + --color-components-checkbox-bg-disabled-checked: var(--color-components-checkbox-bg-disabled-checked); + --color-components-checkbox-bg-unchecked: var(--color-components-checkbox-bg-unchecked); + --color-components-checkbox-bg-unchecked-hover: var(--color-components-checkbox-bg-unchecked-hover); --color-components-checkbox-border: var(--color-components-checkbox-border); --color-components-checkbox-border-hover: var(--color-components-checkbox-border-hover); --color-components-checkbox-border-disabled: var(--color-components-checkbox-border-disabled); - --color-components-checkbox-bg-unchecked: var(--color-components-checkbox-bg-unchecked); - --color-components-checkbox-bg-unchecked-hover: var(--color-components-checkbox-bg-unchecked-hover); - --color-components-checkbox-bg-disabled-checked: var(--color-components-checkbox-bg-disabled-checked); + --color-components-radio-bg: var(--color-components-radio-bg); + --color-components-radio-bg-hover: var(--color-components-radio-bg-hover); + --color-components-radio-bg-disabled: var(--color-components-radio-bg-disabled); --color-components-radio-border-checked: var(--color-components-radio-border-checked); --color-components-radio-border-checked-hover: var(--color-components-radio-border-checked-hover); --color-components-radio-border-checked-disabled: var(--color-components-radio-border-checked-disabled); - --color-components-radio-bg-disabled: var(--color-components-radio-bg-disabled); --color-components-radio-border: var(--color-components-radio-border); --color-components-radio-border-hover: var(--color-components-radio-border-hover); --color-components-radio-border-disabled: var(--color-components-radio-border-disabled); - --color-components-radio-bg: var(--color-components-radio-bg); - --color-components-radio-bg-hover: var(--color-components-radio-bg-hover); --color-components-toggle-knob: var(--color-components-toggle-knob); + --color-components-toggle-knob-hover: var(--color-components-toggle-knob-hover); --color-components-toggle-knob-disabled: var(--color-components-toggle-knob-disabled); --color-components-toggle-bg: var(--color-components-toggle-bg); --color-components-toggle-bg-hover: var(--color-components-toggle-bg-hover); @@ -126,90 +470,55 @@ --color-components-toggle-bg-unchecked: var(--color-components-toggle-bg-unchecked); --color-components-toggle-bg-unchecked-hover: var(--color-components-toggle-bg-unchecked-hover); --color-components-toggle-bg-unchecked-disabled: var(--color-components-toggle-bg-unchecked-disabled); - --color-components-toggle-knob-hover: var(--color-components-toggle-knob-hover); - --color-components-card-bg: var(--color-components-card-bg); - --color-components-card-border: var(--color-components-card-border); - --color-components-card-bg-alt: var(--color-components-card-bg-alt); - --color-components-card-bg-transparent: var(--color-components-card-bg-transparent); - --color-components-card-bg-alt-transparent: var(--color-components-card-bg-alt-transparent); - - --color-components-menu-item-text: var(--color-components-menu-item-text); - --color-components-menu-item-text-active: var(--color-components-menu-item-text-active); - --color-components-menu-item-text-hover: var(--color-components-menu-item-text-hover); - --color-components-menu-item-text-active-accent: var(--color-components-menu-item-text-active-accent); - --color-components-menu-item-bg-active: var(--color-components-menu-item-bg-active); - --color-components-menu-item-bg-hover: var(--color-components-menu-item-bg-hover); - - --color-components-panel-bg: var(--color-components-panel-bg); - --color-components-panel-bg-blur: var(--color-components-panel-bg-blur); - --color-components-panel-border: var(--color-components-panel-border); - --color-components-panel-border-subtle: var(--color-components-panel-border-subtle); - --color-components-panel-gradient-2: var(--color-components-panel-gradient-2); - --color-components-panel-gradient-1: var(--color-components-panel-gradient-1); - --color-components-panel-bg-alt: var(--color-components-panel-bg-alt); - --color-components-panel-on-panel-item-bg: var(--color-components-panel-on-panel-item-bg); - --color-components-panel-on-panel-item-bg-hover: var(--color-components-panel-on-panel-item-bg-hover); - --color-components-panel-on-panel-item-bg-alt: var(--color-components-panel-on-panel-item-bg-alt); - --color-components-panel-on-panel-item-bg-transparent: var(--color-components-panel-on-panel-item-bg-transparent); - --color-components-panel-on-panel-item-bg-hover-transparent: var(--color-components-panel-on-panel-item-bg-hover-transparent); - --color-components-panel-on-panel-item-bg-destructive-hover-transparent: var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent); - - --color-components-panel-bg-transparent: var(--color-components-panel-bg-transparent); - - --color-components-main-nav-nav-button-text: var(--color-components-main-nav-nav-button-text); - --color-components-main-nav-nav-button-text-active: var(--color-components-main-nav-nav-button-text-active); - --color-components-main-nav-nav-button-bg: var(--color-components-main-nav-nav-button-bg); - --color-components-main-nav-nav-button-bg-active: var(--color-components-main-nav-nav-button-bg-active); - --color-components-main-nav-nav-button-border: var(--color-components-main-nav-nav-button-border); - --color-components-main-nav-nav-button-bg-hover: var(--color-components-main-nav-nav-button-bg-hover); - --color-components-main-nav-glass-text-glow: var(--color-components-main-nav-glass-text-glow); - --color-components-main-nav-glass-surface-first: var(--color-components-main-nav-glass-surface-first); - --color-components-main-nav-glass-surface-middle-1: var(--color-components-main-nav-glass-surface-middle-1); - --color-components-main-nav-glass-surface-middle-2: var(--color-components-main-nav-glass-surface-middle-2); - --color-components-main-nav-glass-surface-end: var(--color-components-main-nav-glass-surface-end); - --color-components-main-nav-glass-edge-highlight-first: var(--color-components-main-nav-glass-edge-highlight-first); - --color-components-main-nav-glass-edge-highlight-middle: var(--color-components-main-nav-glass-edge-highlight-middle); - --color-components-main-nav-glass-edge-highlight-end: var(--color-components-main-nav-glass-edge-highlight-end); - --color-components-main-nav-glass-edge-reflection-first: var(--color-components-main-nav-glass-edge-reflection-first); - --color-components-main-nav-glass-edge-reflection-middle: var(--color-components-main-nav-glass-edge-reflection-middle); - --color-components-main-nav-glass-edge-reflection-end: var(--color-components-main-nav-glass-edge-reflection-end); - --color-components-main-nav-glass-inner-glow: var(--color-components-main-nav-glass-inner-glow); - --color-components-main-nav-glass-shadow-reflection: var(--color-components-main-nav-glass-shadow-reflection); - --color-components-main-nav-glass-shadow-reflection-glow: var(--color-components-main-nav-glass-shadow-reflection-glow); - - --color-components-main-nav-nav-user-border: var(--color-components-main-nav-nav-user-border); + --color-components-option-card-option-bg: var(--color-components-option-card-option-bg); + --color-components-option-card-option-border: var(--color-components-option-card-option-border); + --color-components-option-card-option-bg-hover: var(--color-components-option-card-option-bg-hover); + --color-components-option-card-option-border-hover: var(--color-components-option-card-option-border-hover); + --color-components-option-card-option-selected-bg: var(--color-components-option-card-option-selected-bg); + --color-components-option-card-option-selected-border: var(--color-components-option-card-option-selected-border); --color-components-slider-knob: var(--color-components-slider-knob); + --color-components-slider-knob-border: var(--color-components-slider-knob-border); + --color-components-slider-knob-border-hover: var(--color-components-slider-knob-border-hover); --color-components-slider-knob-hover: var(--color-components-slider-knob-hover); --color-components-slider-knob-disabled: var(--color-components-slider-knob-disabled); --color-components-slider-range: var(--color-components-slider-range); --color-components-slider-track: var(--color-components-slider-track); - --color-components-slider-knob-border-hover: var(--color-components-slider-knob-border-hover); - --color-components-slider-knob-border: var(--color-components-slider-knob-border); + --color-components-tooltip-bg: var(--color-components-tooltip-bg); + + --color-components-kbd-bg-gray: var(--color-components-kbd-bg-gray); + --color-components-kbd-bg-white: var(--color-components-kbd-bg-white); + + --color-components-menu-item-text: var(--color-components-menu-item-text); + --color-components-menu-item-text-hover: var(--color-components-menu-item-text-hover); + --color-components-menu-item-text-active: var(--color-components-menu-item-text-active); + --color-components-menu-item-text-active-accent: var(--color-components-menu-item-text-active-accent); + --color-components-menu-item-bg-hover: var(--color-components-menu-item-bg-hover); + --color-components-menu-item-bg-active: var(--color-components-menu-item-bg-active); + + --color-components-segmented-control-bg-normal: var(--color-components-segmented-control-bg-normal); --color-components-segmented-control-item-active-bg: var(--color-components-segmented-control-item-active-bg); --color-components-segmented-control-item-active-border: var(--color-components-segmented-control-item-active-border); - --color-components-segmented-control-bg-normal: var(--color-components-segmented-control-bg-normal); --color-components-segmented-control-item-active-accent-bg: var(--color-components-segmented-control-item-active-accent-bg); --color-components-segmented-control-item-active-accent-border: var(--color-components-segmented-control-item-active-accent-border); - --color-components-option-card-option-bg: var(--color-components-option-card-option-bg); - --color-components-option-card-option-selected-bg: var(--color-components-option-card-option-selected-bg); - --color-components-option-card-option-selected-border: var(--color-components-option-card-option-selected-border); - --color-components-option-card-option-border: var(--color-components-option-card-option-border); - --color-components-option-card-option-bg-hover: var(--color-components-option-card-option-bg-hover); - --color-components-option-card-option-border-hover: var(--color-components-option-card-option-border-hover); - - --color-components-tab-active: var(--color-components-tab-active); - --color-components-badge-white-to-dark: var(--color-components-badge-white-to-dark); + --color-components-badge-white-to-dark-alpha: var(--color-components-badge-white-to-dark-alpha); + --color-components-badge-bg-green-soft: var(--color-components-badge-bg-green-soft); + --color-components-badge-bg-orange-soft: var(--color-components-badge-bg-orange-soft); + --color-components-badge-bg-red-soft: var(--color-components-badge-bg-red-soft); + --color-components-badge-bg-blue-light-soft: var(--color-components-badge-bg-blue-light-soft); + --color-components-badge-bg-gray-soft: var(--color-components-badge-bg-gray-soft); + --color-components-badge-bg-dimm: var(--color-components-badge-bg-dimm); + + --color-components-badge-status-light-border-outer: var(--color-components-badge-status-light-border-outer); + --color-components-badge-status-light-high-light: var(--color-components-badge-status-light-high-light); --color-components-badge-status-light-success-bg: var(--color-components-badge-status-light-success-bg); --color-components-badge-status-light-success-border-inner: var(--color-components-badge-status-light-success-border-inner); --color-components-badge-status-light-success-halo: var(--color-components-badge-status-light-success-halo); - --color-components-badge-status-light-border-outer: var(--color-components-badge-status-light-border-outer); - --color-components-badge-status-light-high-light: var(--color-components-badge-status-light-high-light); --color-components-badge-status-light-warning-bg: var(--color-components-badge-status-light-warning-bg); --color-components-badge-status-light-warning-border-inner: var(--color-components-badge-status-light-warning-border-inner); --color-components-badge-status-light-warning-halo: var(--color-components-badge-status-light-warning-halo); @@ -226,221 +535,60 @@ --color-components-badge-status-light-disabled-border-inner: var(--color-components-badge-status-light-disabled-border-inner); --color-components-badge-status-light-disabled-halo: var(--color-components-badge-status-light-disabled-halo); - --color-components-badge-bg-green-soft: var(--color-components-badge-bg-green-soft); - --color-components-badge-bg-orange-soft: var(--color-components-badge-bg-orange-soft); - --color-components-badge-bg-red-soft: var(--color-components-badge-bg-red-soft); - --color-components-badge-bg-blue-light-soft: var(--color-components-badge-bg-blue-light-soft); - --color-components-badge-bg-gray-soft: var(--color-components-badge-bg-gray-soft); - --color-components-badge-bg-dimm: var(--color-components-badge-bg-dimm); + --color-components-tab-active: var(--color-components-tab-active); + --color-components-main-nav-text: var(--color-components-main-nav-text); + --color-components-main-nav-text-active: var(--color-components-main-nav-text-active); + --color-components-main-nav-nav-button-border: var(--color-components-main-nav-nav-button-border); + --color-components-main-nav-nav-button-text: var(--color-components-main-nav-nav-button-text); + --color-components-main-nav-nav-button-text-active: var(--color-components-main-nav-nav-button-text-active); + --color-components-main-nav-nav-button-bg: var(--color-components-main-nav-nav-button-bg); + --color-components-main-nav-nav-button-bg-hover: var(--color-components-main-nav-nav-button-bg-hover); + --color-components-main-nav-nav-button-bg-active: var(--color-components-main-nav-nav-button-bg-active); + + --color-components-main-nav-nav-user-border: var(--color-components-main-nav-nav-user-border); + + --color-components-main-nav-glass-inner-glow: var(--color-components-main-nav-glass-inner-glow); + --color-components-main-nav-glass-shadow-reflection: var(--color-components-main-nav-glass-shadow-reflection); + --color-components-main-nav-glass-shadow-reflection-glow: var(--color-components-main-nav-glass-shadow-reflection-glow); + --color-components-main-nav-glass-text-glow: var(--color-components-main-nav-glass-text-glow); + --color-components-main-nav-glass-surface-first: var(--color-components-main-nav-glass-surface-first); + --color-components-main-nav-glass-surface-middle-1: var(--color-components-main-nav-glass-surface-middle-1); + --color-components-main-nav-glass-surface-middle-2: var(--color-components-main-nav-glass-surface-middle-2); + --color-components-main-nav-glass-surface-end: var(--color-components-main-nav-glass-surface-end); + + --color-components-main-nav-glass-edge-reflection-first: var(--color-components-main-nav-glass-edge-reflection-first); + --color-components-main-nav-glass-edge-reflection-middle: var(--color-components-main-nav-glass-edge-reflection-middle); + --color-components-main-nav-glass-edge-reflection-end: var(--color-components-main-nav-glass-edge-reflection-end); + + --color-components-main-nav-glass-edge-highlight-first: var(--color-components-main-nav-glass-edge-highlight-first); + --color-components-main-nav-glass-edge-highlight-middle: var(--color-components-main-nav-glass-edge-highlight-middle); + --color-components-main-nav-glass-edge-highlight-end: var(--color-components-main-nav-glass-edge-highlight-end); + + --color-components-chart-bg: var(--color-components-chart-bg); --color-components-chart-line: var(--color-components-chart-line); - --color-components-chart-area-1: var(--color-components-chart-area-1); - --color-components-chart-area-2: var(--color-components-chart-area-2); --color-components-chart-current-1: var(--color-components-chart-current-1); --color-components-chart-current-2: var(--color-components-chart-current-2); - --color-components-chart-bg: var(--color-components-chart-bg); + --color-components-chart-area-1: var(--color-components-chart-area-1); + --color-components-chart-area-2: var(--color-components-chart-area-2); - --color-components-actionbar-bg: var(--color-components-actionbar-bg); - --color-components-actionbar-border: var(--color-components-actionbar-border); - --color-components-actionbar-bg-accent: var(--color-components-actionbar-bg-accent); - --color-components-actionbar-border-accent: var(--color-components-actionbar-border-accent); + --color-divider-subtle: var(--color-divider-subtle); + --color-divider-regular: var(--color-divider-regular); + --color-divider-deep: var(--color-divider-deep); + --color-divider-intense: var(--color-divider-intense); + --color-divider-burn: var(--color-divider-burn); + --color-divider-solid: var(--color-divider-solid); + --color-divider-solid-alt: var(--color-divider-solid-alt); + --color-divider-accent: var(--color-divider-accent); - --color-components-dropzone-bg-alt: var(--color-components-dropzone-bg-alt); - --color-components-dropzone-bg: var(--color-components-dropzone-bg); - --color-components-dropzone-bg-accent: var(--color-components-dropzone-bg-accent); - --color-components-dropzone-border: var(--color-components-dropzone-border); - --color-components-dropzone-border-alt: var(--color-components-dropzone-border-alt); - --color-components-dropzone-border-accent: var(--color-components-dropzone-border-accent); - - --color-components-progress-brand-progress: var(--color-components-progress-brand-progress); - --color-components-progress-brand-border: var(--color-components-progress-brand-border); - --color-components-progress-brand-bg: var(--color-components-progress-brand-bg); - - --color-components-progress-white-progress: var(--color-components-progress-white-progress); - --color-components-progress-white-border: var(--color-components-progress-white-border); - --color-components-progress-white-bg: var(--color-components-progress-white-bg); - - --color-components-progress-gray-progress: var(--color-components-progress-gray-progress); - --color-components-progress-gray-border: var(--color-components-progress-gray-border); - --color-components-progress-gray-bg: var(--color-components-progress-gray-bg); - - --color-components-progress-warning-progress: var(--color-components-progress-warning-progress); - --color-components-progress-warning-border: var(--color-components-progress-warning-border); - --color-components-progress-warning-bg: var(--color-components-progress-warning-bg); - - --color-components-progress-error-progress: var(--color-components-progress-error-progress); - --color-components-progress-error-border: var(--color-components-progress-error-border); - --color-components-progress-error-bg: var(--color-components-progress-error-bg); - - --color-components-chat-input-audio-bg: var(--color-components-chat-input-audio-bg); - --color-components-chat-input-audio-wave-default: var(--color-components-chat-input-audio-wave-default); - --color-components-chat-input-bg-mask-1: var(--color-components-chat-input-bg-mask-1); - --color-components-chat-input-bg-mask-2: var(--color-components-chat-input-bg-mask-2); - --color-components-chat-input-border: var(--color-components-chat-input-border); - --color-components-chat-input-audio-wave-active: var(--color-components-chat-input-audio-wave-active); - --color-components-chat-input-audio-bg-alt: var(--color-components-chat-input-audio-bg-alt); - - --color-components-avatar-shape-fill-stop-0: var(--color-components-avatar-shape-fill-stop-0); - --color-components-avatar-shape-fill-stop-100: var(--color-components-avatar-shape-fill-stop-100); - - --color-components-avatar-bg-mask-stop-0: var(--color-components-avatar-bg-mask-stop-0); - --color-components-avatar-bg-mask-stop-100: var(--color-components-avatar-bg-mask-stop-100); - - --color-components-avatar-default-avatar-bg: var(--color-components-avatar-default-avatar-bg); - --color-components-avatar-mask-darkmode-dimmed: var(--color-components-avatar-mask-darkmode-dimmed); - - --color-components-label-gray: var(--color-components-label-gray); - - --color-components-premium-badge-blue-bg-stop-0: var(--color-components-premium-badge-blue-bg-stop-0); - --color-components-premium-badge-blue-bg-stop-100: var(--color-components-premium-badge-blue-bg-stop-100); - --color-components-premium-badge-blue-stroke-stop-0: var(--color-components-premium-badge-blue-stroke-stop-0); - --color-components-premium-badge-blue-stroke-stop-100: var(--color-components-premium-badge-blue-stroke-stop-100); - --color-components-premium-badge-blue-text-stop-0: var(--color-components-premium-badge-blue-text-stop-0); - --color-components-premium-badge-blue-text-stop-100: var(--color-components-premium-badge-blue-text-stop-100); - --color-components-premium-badge-blue-glow: var(--color-components-premium-badge-blue-glow); - --color-components-premium-badge-blue-bg-stop-0-hover: var(--color-components-premium-badge-blue-bg-stop-0-hover); - --color-components-premium-badge-blue-bg-stop-100-hover: var(--color-components-premium-badge-blue-bg-stop-100-hover); - --color-components-premium-badge-blue-glow-hover: var(--color-components-premium-badge-blue-glow-hover); - --color-components-premium-badge-blue-stroke-stop-0-hover: var(--color-components-premium-badge-blue-stroke-stop-0-hover); - --color-components-premium-badge-blue-stroke-stop-100-hover: var(--color-components-premium-badge-blue-stroke-stop-100-hover); - - --color-components-premium-badge-highlight-stop-0: var(--color-components-premium-badge-highlight-stop-0); - --color-components-premium-badge-highlight-stop-100: var(--color-components-premium-badge-highlight-stop-100); - --color-components-premium-badge-indigo-bg-stop-0: var(--color-components-premium-badge-indigo-bg-stop-0); - --color-components-premium-badge-indigo-bg-stop-100: var(--color-components-premium-badge-indigo-bg-stop-100); - --color-components-premium-badge-indigo-stroke-stop-0: var(--color-components-premium-badge-indigo-stroke-stop-0); - --color-components-premium-badge-indigo-stroke-stop-100: var(--color-components-premium-badge-indigo-stroke-stop-100); - --color-components-premium-badge-indigo-text-stop-0: var(--color-components-premium-badge-indigo-text-stop-0); - --color-components-premium-badge-indigo-text-stop-100: var(--color-components-premium-badge-indigo-text-stop-100); - --color-components-premium-badge-indigo-glow: var(--color-components-premium-badge-indigo-glow); - --color-components-premium-badge-indigo-glow-hover: var(--color-components-premium-badge-indigo-glow-hover); - --color-components-premium-badge-indigo-bg-stop-0-hover: var(--color-components-premium-badge-indigo-bg-stop-0-hover); - --color-components-premium-badge-indigo-bg-stop-100-hover: var(--color-components-premium-badge-indigo-bg-stop-100-hover); - --color-components-premium-badge-indigo-stroke-stop-0-hover: var(--color-components-premium-badge-indigo-stroke-stop-0-hover); - --color-components-premium-badge-indigo-stroke-stop-100-hover: var(--color-components-premium-badge-indigo-stroke-stop-100-hover); - - --color-components-premium-badge-grey-bg-stop-0: var(--color-components-premium-badge-grey-bg-stop-0); - --color-components-premium-badge-grey-bg-stop-100: var(--color-components-premium-badge-grey-bg-stop-100); - --color-components-premium-badge-grey-stroke-stop-0: var(--color-components-premium-badge-grey-stroke-stop-0); - --color-components-premium-badge-grey-stroke-stop-100: var(--color-components-premium-badge-grey-stroke-stop-100); - --color-components-premium-badge-grey-text-stop-0: var(--color-components-premium-badge-grey-text-stop-0); - --color-components-premium-badge-grey-text-stop-100: var(--color-components-premium-badge-grey-text-stop-100); - --color-components-premium-badge-grey-glow: var(--color-components-premium-badge-grey-glow); - --color-components-premium-badge-grey-glow-hover: var(--color-components-premium-badge-grey-glow-hover); - --color-components-premium-badge-grey-bg-stop-0-hover: var(--color-components-premium-badge-grey-bg-stop-0-hover); - --color-components-premium-badge-grey-bg-stop-100-hover: var(--color-components-premium-badge-grey-bg-stop-100-hover); - --color-components-premium-badge-grey-stroke-stop-0-hover: var(--color-components-premium-badge-grey-stroke-stop-0-hover); - --color-components-premium-badge-grey-stroke-stop-100-hover: var(--color-components-premium-badge-grey-stroke-stop-100-hover); - - --color-components-premium-badge-orange-bg-stop-0: var(--color-components-premium-badge-orange-bg-stop-0); - --color-components-premium-badge-orange-bg-stop-100: var(--color-components-premium-badge-orange-bg-stop-100); - --color-components-premium-badge-orange-stroke-stop-0: var(--color-components-premium-badge-orange-stroke-stop-0); - --color-components-premium-badge-orange-stroke-stop-100: var(--color-components-premium-badge-orange-stroke-stop-100); - --color-components-premium-badge-orange-text-stop-0: var(--color-components-premium-badge-orange-text-stop-0); - --color-components-premium-badge-orange-text-stop-100: var(--color-components-premium-badge-orange-text-stop-100); - --color-components-premium-badge-orange-glow: var(--color-components-premium-badge-orange-glow); - --color-components-premium-badge-orange-glow-hover: var(--color-components-premium-badge-orange-glow-hover); - --color-components-premium-badge-orange-bg-stop-0-hover: var(--color-components-premium-badge-orange-bg-stop-0-hover); - --color-components-premium-badge-orange-bg-stop-100-hover: var(--color-components-premium-badge-orange-bg-stop-100-hover); - --color-components-premium-badge-orange-stroke-stop-0-hover: var(--color-components-premium-badge-orange-stroke-stop-0-hover); - --color-components-premium-badge-orange-stroke-stop-100-hover: var(--color-components-premium-badge-orange-stroke-stop-100-hover); - - --color-components-progress-bar-bg: var(--color-components-progress-bar-bg); - --color-components-progress-bar-progress: var(--color-components-progress-bar-progress); - --color-components-progress-bar-border: var(--color-components-progress-bar-border); - --color-components-progress-bar-progress-solid: var(--color-components-progress-bar-progress-solid); - --color-components-progress-bar-progress-highlight: var(--color-components-progress-bar-progress-highlight); - - --color-components-icon-bg-red-solid: var(--color-components-icon-bg-red-solid); - --color-components-icon-bg-rose-solid: var(--color-components-icon-bg-rose-solid); - --color-components-icon-bg-pink-solid: var(--color-components-icon-bg-pink-solid); - --color-components-icon-bg-orange-dark-solid: var(--color-components-icon-bg-orange-dark-solid); - --color-components-icon-bg-yellow-solid: var(--color-components-icon-bg-yellow-solid); - --color-components-icon-bg-green-solid: var(--color-components-icon-bg-green-solid); - --color-components-icon-bg-teal-solid: var(--color-components-icon-bg-teal-solid); - --color-components-icon-bg-blue-light-solid: var(--color-components-icon-bg-blue-light-solid); - --color-components-icon-bg-blue-solid: var(--color-components-icon-bg-blue-solid); - --color-components-icon-bg-indigo-solid: var(--color-components-icon-bg-indigo-solid); - --color-components-icon-bg-violet-solid: var(--color-components-icon-bg-violet-solid); - --color-components-icon-bg-midnight-solid: var(--color-components-icon-bg-midnight-solid); - --color-components-icon-bg-rose-soft: var(--color-components-icon-bg-rose-soft); - --color-components-icon-bg-pink-soft: var(--color-components-icon-bg-pink-soft); - --color-components-icon-bg-orange-dark-soft: var(--color-components-icon-bg-orange-dark-soft); - --color-components-icon-bg-yellow-soft: var(--color-components-icon-bg-yellow-soft); - --color-components-icon-bg-green-soft: var(--color-components-icon-bg-green-soft); - --color-components-icon-bg-teal-soft: var(--color-components-icon-bg-teal-soft); - --color-components-icon-bg-blue-light-soft: var(--color-components-icon-bg-blue-light-soft); - --color-components-icon-bg-blue-soft: var(--color-components-icon-bg-blue-soft); - --color-components-icon-bg-indigo-soft: var(--color-components-icon-bg-indigo-soft); - --color-components-icon-bg-violet-soft: var(--color-components-icon-bg-violet-soft); - --color-components-icon-bg-midnight-soft: var(--color-components-icon-bg-midnight-soft); - --color-components-icon-bg-red-soft: var(--color-components-icon-bg-red-soft); - --color-components-icon-bg-orange-solid: var(--color-components-icon-bg-orange-solid); - --color-components-icon-bg-orange-soft: var(--color-components-icon-bg-orange-soft); - - --color-text-primary: var(--color-text-primary); - --color-text-secondary: var(--color-text-secondary); - --color-text-tertiary: var(--color-text-tertiary); - --color-text-quaternary: var(--color-text-quaternary); - --color-text-destructive: var(--color-text-destructive); - --color-text-success: var(--color-text-success); - --color-text-warning: var(--color-text-warning); - --color-text-destructive-secondary: var(--color-text-destructive-secondary); - --color-text-success-secondary: var(--color-text-success-secondary); - --color-text-warning-secondary: var(--color-text-warning-secondary); - --color-text-accent: var(--color-text-accent); - --color-text-primary-on-surface: var(--color-text-primary-on-surface); - --color-text-placeholder: var(--color-text-placeholder); - --color-text-disabled: var(--color-text-disabled); - --color-text-accent-secondary: var(--color-text-accent-secondary); - --color-text-accent-light-mode-only: var(--color-text-accent-light-mode-only); - --color-text-text-selected: var(--color-text-text-selected); - --color-text-secondary-on-surface: var(--color-text-secondary-on-surface); - --color-text-logo-text: var(--color-text-logo-text); - --color-text-empty-state-icon: var(--color-text-empty-state-icon); - --color-text-inverted: var(--color-text-inverted); - --color-text-inverted-dimmed: var(--color-text-inverted-dimmed); - - --color-background-body: var(--color-background-body); - --color-background-default-subtle: var(--color-background-default-subtle); - --color-background-neutral-subtle: var(--color-background-neutral-subtle); - --color-background-sidenav-bg: var(--color-background-sidenav-bg); - --color-background-default: var(--color-background-default); - --color-background-soft: var(--color-background-soft); - --color-background-gradient-bg-fill-chat-bg-1: var(--color-background-gradient-bg-fill-chat-bg-1); - --color-background-gradient-bg-fill-chat-bg-2: var(--color-background-gradient-bg-fill-chat-bg-2); - --color-background-gradient-bg-fill-chat-bubble-bg-1: var(--color-background-gradient-bg-fill-chat-bubble-bg-1); - --color-background-gradient-bg-fill-chat-bubble-bg-2: var(--color-background-gradient-bg-fill-chat-bubble-bg-2); - --color-background-gradient-bg-fill-debug-bg-1: var(--color-background-gradient-bg-fill-debug-bg-1); - --color-background-gradient-bg-fill-debug-bg-2: var(--color-background-gradient-bg-fill-debug-bg-2); - - --color-background-gradient-mask-gray: var(--color-background-gradient-mask-gray); - --color-background-gradient-mask-transparent: var(--color-background-gradient-mask-transparent); - --color-background-gradient-mask-input-clear-2: var(--color-background-gradient-mask-input-clear-2); - --color-background-gradient-mask-input-clear-1: var(--color-background-gradient-mask-input-clear-1); - --color-background-gradient-mask-transparent-dark: var(--color-background-gradient-mask-transparent-dark); - --color-background-gradient-mask-side-panel-2: var(--color-background-gradient-mask-side-panel-2); - --color-background-gradient-mask-side-panel-1: var(--color-background-gradient-mask-side-panel-1); - - --color-background-default-burn: var(--color-background-default-burn); - --color-background-overlay-fullscreen: var(--color-background-overlay-fullscreen); - --color-background-default-lighter: var(--color-background-default-lighter); - --color-background-section: var(--color-background-section); - --color-background-interaction-from-bg-1: var(--color-background-interaction-from-bg-1); - --color-background-interaction-from-bg-2: var(--color-background-interaction-from-bg-2); - --color-background-section-burn: var(--color-background-section-burn); - --color-background-default-dodge: var(--color-background-default-dodge); - --color-background-overlay: var(--color-background-overlay); - --color-background-default-dimmed: var(--color-background-default-dimmed); - --color-background-default-hover: var(--color-background-default-hover); - --color-background-overlay-alt: var(--color-background-overlay-alt); - --color-background-surface-white: var(--color-background-surface-white); - --color-background-overlay-destructive: var(--color-background-overlay-destructive); - --color-background-overlay-backdrop: var(--color-background-overlay-backdrop); - --color-background-body-transparent: var(--color-background-body-transparent); - --color-background-section-burn-inverted: var(--color-background-section-burn-inverted); + --color-effects-highlight: var(--color-effects-highlight); + --color-effects-highlight-subtle: var(--color-effects-highlight-subtle); + --color-effects-highlight-lightmode-off: var(--color-effects-highlight-lightmode-off); + --color-effects-image-frame: var(--color-effects-image-frame); + --color-effects-icon-border: var(--color-effects-icon-border); --color-shadow-shadow-1: var(--color-shadow-shadow-1); + --color-shadow-shadow-2: var(--color-shadow-shadow-2); --color-shadow-shadow-3: var(--color-shadow-shadow-3); --color-shadow-shadow-4: var(--color-shadow-shadow-4); --color-shadow-shadow-5: var(--color-shadow-shadow-5); @@ -448,124 +596,18 @@ --color-shadow-shadow-7: var(--color-shadow-shadow-7); --color-shadow-shadow-8: var(--color-shadow-shadow-8); --color-shadow-shadow-9: var(--color-shadow-shadow-9); - --color-shadow-shadow-2: var(--color-shadow-shadow-2); --color-shadow-shadow-10: var(--color-shadow-shadow-10); - --color-workflow-block-border: var(--color-workflow-block-border); - --color-workflow-block-parma-bg: var(--color-workflow-block-parma-bg); - --color-workflow-block-bg: var(--color-workflow-block-bg); - --color-workflow-block-bg-transparent: var(--color-workflow-block-bg-transparent); - --color-workflow-block-border-highlight: var(--color-workflow-block-border-highlight); - --color-workflow-block-wrapper-bg-1: var(--color-workflow-block-wrapper-bg-1); - --color-workflow-block-wrapper-bg-2: var(--color-workflow-block-wrapper-bg-2); - - --color-workflow-canvas-workflow-dot-color: var(--color-workflow-canvas-workflow-dot-color); - --color-workflow-canvas-workflow-bg: var(--color-workflow-canvas-workflow-bg); - --color-workflow-canvas-workflow-top-bar-1: var(--color-workflow-canvas-workflow-top-bar-1); - --color-workflow-canvas-workflow-top-bar-2: var(--color-workflow-canvas-workflow-top-bar-2); - --color-workflow-canvas-canvas-overlay: var(--color-workflow-canvas-canvas-overlay); - - --color-workflow-link-line-active: var(--color-workflow-link-line-active); - --color-workflow-link-line-normal: var(--color-workflow-link-line-normal); - --color-workflow-link-line-handle: var(--color-workflow-link-line-handle); - --color-workflow-link-line-normal-transparent: var(--color-workflow-link-line-normal-transparent); - --color-workflow-link-line-failure-active: var(--color-workflow-link-line-failure-active); - --color-workflow-link-line-failure-handle: var(--color-workflow-link-line-failure-handle); - --color-workflow-link-line-failure-button-bg: var(--color-workflow-link-line-failure-button-bg); - --color-workflow-link-line-failure-button-hover: var(--color-workflow-link-line-failure-button-hover); - - --color-workflow-link-line-success-active: var(--color-workflow-link-line-success-active); - --color-workflow-link-line-success-handle: var(--color-workflow-link-line-success-handle); - - --color-workflow-link-line-error-active: var(--color-workflow-link-line-error-active); - --color-workflow-link-line-error-handle: var(--color-workflow-link-line-error-handle); - - --color-workflow-minimap-bg: var(--color-workflow-minimap-bg); - --color-workflow-minimap-block: var(--color-workflow-minimap-block); - - --color-workflow-display-success-bg: var(--color-workflow-display-success-bg); - --color-workflow-display-success-border-1: var(--color-workflow-display-success-border-1); - --color-workflow-display-success-border-2: var(--color-workflow-display-success-border-2); - --color-workflow-display-success-vignette-color: var(--color-workflow-display-success-vignette-color); - --color-workflow-display-success-bg-line-pattern: var(--color-workflow-display-success-bg-line-pattern); - - --color-workflow-display-glass-1: var(--color-workflow-display-glass-1); - --color-workflow-display-glass-2: var(--color-workflow-display-glass-2); - --color-workflow-display-vignette-dark: var(--color-workflow-display-vignette-dark); - --color-workflow-display-highlight: var(--color-workflow-display-highlight); - --color-workflow-display-outline: var(--color-workflow-display-outline); - --color-workflow-display-error-bg: var(--color-workflow-display-error-bg); - --color-workflow-display-error-bg-line-pattern: var(--color-workflow-display-error-bg-line-pattern); - --color-workflow-display-error-border-1: var(--color-workflow-display-error-border-1); - --color-workflow-display-error-border-2: var(--color-workflow-display-error-border-2); - --color-workflow-display-error-vignette-color: var(--color-workflow-display-error-vignette-color); - - --color-workflow-display-warning-bg: var(--color-workflow-display-warning-bg); - --color-workflow-display-warning-bg-line-pattern: var(--color-workflow-display-warning-bg-line-pattern); - --color-workflow-display-warning-border-1: var(--color-workflow-display-warning-border-1); - --color-workflow-display-warning-border-2: var(--color-workflow-display-warning-border-2); - --color-workflow-display-warning-vignette-color: var(--color-workflow-display-warning-vignette-color); - - --color-workflow-display-normal-bg: var(--color-workflow-display-normal-bg); - --color-workflow-display-normal-bg-line-pattern: var(--color-workflow-display-normal-bg-line-pattern); - --color-workflow-display-normal-border-1: var(--color-workflow-display-normal-border-1); - --color-workflow-display-normal-border-2: var(--color-workflow-display-normal-border-2); - --color-workflow-display-normal-vignette-color: var(--color-workflow-display-normal-vignette-color); - - --color-workflow-display-disabled-bg: var(--color-workflow-display-disabled-bg); - --color-workflow-display-disabled-bg-line-pattern: var(--color-workflow-display-disabled-bg-line-pattern); - --color-workflow-display-disabled-border-1: var(--color-workflow-display-disabled-border-1); - --color-workflow-display-disabled-border-2: var(--color-workflow-display-disabled-border-2); - --color-workflow-display-disabled-vignette-color: var(--color-workflow-display-disabled-vignette-color); - --color-workflow-display-disabled-outline: var(--color-workflow-display-disabled-outline); - - --color-workflow-workflow-progress-bg-1: var(--color-workflow-workflow-progress-bg-1); - --color-workflow-workflow-progress-bg-2: var(--color-workflow-workflow-progress-bg-2); - - --color-divider-subtle: var(--color-divider-subtle); - --color-divider-regular: var(--color-divider-regular); - --color-divider-deep: var(--color-divider-deep); - --color-divider-burn: var(--color-divider-burn); - --color-divider-intense: var(--color-divider-intense); - --color-divider-solid: var(--color-divider-solid); - --color-divider-solid-alt: var(--color-divider-solid-alt); - --color-divider-accent: var(--color-divider-accent); - - --color-state-base-hover: var(--color-state-base-hover); - --color-state-base-active: var(--color-state-base-active); - --color-state-base-hover-alt: var(--color-state-base-hover-alt); - --color-state-base-handle: var(--color-state-base-handle); - --color-state-base-handle-hover: var(--color-state-base-handle-hover); - --color-state-base-hover-subtle: var(--color-state-base-hover-subtle); - - --color-state-accent-hover: var(--color-state-accent-hover); - --color-state-accent-active: var(--color-state-accent-active); - --color-state-accent-hover-alt: var(--color-state-accent-hover-alt); - --color-state-accent-solid: var(--color-state-accent-solid); - --color-state-accent-active-alt: var(--color-state-accent-active-alt); - - --color-state-destructive-hover: var(--color-state-destructive-hover); - --color-state-destructive-hover-alt: var(--color-state-destructive-hover-alt); - --color-state-destructive-active: var(--color-state-destructive-active); - --color-state-destructive-solid: var(--color-state-destructive-solid); - --color-state-destructive-border: var(--color-state-destructive-border); - --color-state-destructive-hover-transparent: var(--color-state-destructive-hover-transparent); - - --color-state-success-hover: var(--color-state-success-hover); - --color-state-success-hover-alt: var(--color-state-success-hover-alt); - --color-state-success-active: var(--color-state-success-active); - --color-state-success-solid: var(--color-state-success-solid); - - --color-state-warning-hover: var(--color-state-warning-hover); - --color-state-warning-hover-alt: var(--color-state-warning-hover-alt); - --color-state-warning-active: var(--color-state-warning-active); - --color-state-warning-solid: var(--color-state-warning-solid); - --color-state-warning-hover-transparent: var(--color-state-warning-hover-transparent); - - --color-effects-highlight: var(--color-effects-highlight); - --color-effects-highlight-lightmode-off: var(--color-effects-highlight-lightmode-off); - --color-effects-image-frame: var(--color-effects-image-frame); - --color-effects-icon-border: var(--color-effects-icon-border); + --color-third-party-LangChain: var(--color-third-party-LangChain); + --color-third-party-Langfuse: var(--color-third-party-Langfuse); + --color-third-party-Github: var(--color-third-party-Github); + --color-third-party-Github-tertiary: var(--color-third-party-Github-tertiary); + --color-third-party-Github-secondary: var(--color-third-party-Github-secondary); + --color-third-party-aws: var(--color-third-party-aws); + --color-third-party-aws-alt: var(--color-third-party-aws-alt); + --color-third-party-model-bg-openai: var(--color-third-party-model-bg-openai); + --color-third-party-model-bg-anthropic: var(--color-third-party-model-bg-anthropic); + --color-third-party-model-bg-default: var(--color-third-party-model-bg-default); --color-util-colors-orange-dark-orange-dark-50: var(--color-util-colors-orange-dark-orange-dark-50); --color-util-colors-orange-dark-orange-dark-100: var(--color-util-colors-orange-dark-orange-dark-100); @@ -640,15 +682,6 @@ --color-util-colors-blue-light-blue-light-600: var(--color-util-colors-blue-light-blue-light-600); --color-util-colors-blue-light-blue-light-700: var(--color-util-colors-blue-light-blue-light-700); - --color-util-colors-gray-blue-gray-blue-50: var(--color-util-colors-gray-blue-gray-blue-50); - --color-util-colors-gray-blue-gray-blue-100: var(--color-util-colors-gray-blue-gray-blue-100); - --color-util-colors-gray-blue-gray-blue-200: var(--color-util-colors-gray-blue-gray-blue-200); - --color-util-colors-gray-blue-gray-blue-300: var(--color-util-colors-gray-blue-gray-blue-300); - --color-util-colors-gray-blue-gray-blue-400: var(--color-util-colors-gray-blue-gray-blue-400); - --color-util-colors-gray-blue-gray-blue-500: var(--color-util-colors-gray-blue-gray-blue-500); - --color-util-colors-gray-blue-gray-blue-600: var(--color-util-colors-gray-blue-gray-blue-600); - --color-util-colors-gray-blue-gray-blue-700: var(--color-util-colors-gray-blue-gray-blue-700); - --color-util-colors-blue-brand-blue-brand-50: var(--color-util-colors-blue-brand-blue-brand-50); --color-util-colors-blue-brand-blue-brand-100: var(--color-util-colors-blue-brand-blue-brand-100); --color-util-colors-blue-brand-blue-brand-200: var(--color-util-colors-blue-brand-blue-brand-200); @@ -658,6 +691,15 @@ --color-util-colors-blue-brand-blue-brand-600: var(--color-util-colors-blue-brand-blue-brand-600); --color-util-colors-blue-brand-blue-brand-700: var(--color-util-colors-blue-brand-blue-brand-700); + --color-util-colors-gray-blue-gray-blue-50: var(--color-util-colors-gray-blue-gray-blue-50); + --color-util-colors-gray-blue-gray-blue-100: var(--color-util-colors-gray-blue-gray-blue-100); + --color-util-colors-gray-blue-gray-blue-200: var(--color-util-colors-gray-blue-gray-blue-200); + --color-util-colors-gray-blue-gray-blue-300: var(--color-util-colors-gray-blue-gray-blue-300); + --color-util-colors-gray-blue-gray-blue-400: var(--color-util-colors-gray-blue-gray-blue-400); + --color-util-colors-gray-blue-gray-blue-500: var(--color-util-colors-gray-blue-gray-blue-500); + --color-util-colors-gray-blue-gray-blue-600: var(--color-util-colors-gray-blue-gray-blue-600); + --color-util-colors-gray-blue-gray-blue-700: var(--color-util-colors-gray-blue-gray-blue-700); + --color-util-colors-red-red-50: var(--color-util-colors-red-red-50); --color-util-colors-red-red-100: var(--color-util-colors-red-red-100); --color-util-colors-red-red-200: var(--color-util-colors-red-red-200); @@ -676,6 +718,15 @@ --color-util-colors-green-green-600: var(--color-util-colors-green-green-600); --color-util-colors-green-green-700: var(--color-util-colors-green-green-700); + --color-util-colors-green-light-green-light-50: var(--color-util-colors-green-light-green-light-50); + --color-util-colors-green-light-green-light-100: var(--color-util-colors-green-light-green-light-100); + --color-util-colors-green-light-green-light-200: var(--color-util-colors-green-light-green-light-200); + --color-util-colors-green-light-green-light-300: var(--color-util-colors-green-light-green-light-300); + --color-util-colors-green-light-green-light-400: var(--color-util-colors-green-light-green-light-400); + --color-util-colors-green-light-green-light-500: var(--color-util-colors-green-light-green-light-500); + --color-util-colors-green-light-green-light-600: var(--color-util-colors-green-light-green-light-600); + --color-util-colors-green-light-green-light-700: var(--color-util-colors-green-light-green-light-700); + --color-util-colors-warning-warning-50: var(--color-util-colors-warning-warning-50); --color-util-colors-warning-warning-100: var(--color-util-colors-warning-warning-100); --color-util-colors-warning-warning-200: var(--color-util-colors-warning-warning-200); @@ -730,15 +781,6 @@ --color-util-colors-gray-gray-600: var(--color-util-colors-gray-gray-600); --color-util-colors-gray-gray-700: var(--color-util-colors-gray-gray-700); - --color-util-colors-green-light-green-light-50: var(--color-util-colors-green-light-green-light-50); - --color-util-colors-green-light-green-light-100: var(--color-util-colors-green-light-green-light-100); - --color-util-colors-green-light-green-light-200: var(--color-util-colors-green-light-green-light-200); - --color-util-colors-green-light-green-light-300: var(--color-util-colors-green-light-green-light-300); - --color-util-colors-green-light-green-light-500: var(--color-util-colors-green-light-green-light-500); - --color-util-colors-green-light-green-light-400: var(--color-util-colors-green-light-green-light-400); - --color-util-colors-green-light-green-light-600: var(--color-util-colors-green-light-green-light-600); - --color-util-colors-green-light-green-light-700: var(--color-util-colors-green-light-green-light-700); - --color-util-colors-rose-rose-50: var(--color-util-colors-rose-rose-50); --color-util-colors-rose-rose-100: var(--color-util-colors-rose-rose-100); --color-util-colors-rose-rose-200: var(--color-util-colors-rose-rose-200); @@ -757,19 +799,9 @@ --color-util-colors-midnight-midnight-600: var(--color-util-colors-midnight-midnight-600); --color-util-colors-midnight-midnight-700: var(--color-util-colors-midnight-midnight-700); - --color-third-party-LangChain: var(--color-third-party-LangChain); - --color-third-party-Langfuse: var(--color-third-party-Langfuse); - --color-third-party-Github: var(--color-third-party-Github); - --color-third-party-Github-tertiary: var(--color-third-party-Github-tertiary); - --color-third-party-Github-secondary: var(--color-third-party-Github-secondary); - --color-third-party-model-bg-openai: var(--color-third-party-model-bg-openai); - --color-third-party-model-bg-anthropic: var(--color-third-party-model-bg-anthropic); - --color-third-party-model-bg-default: var(--color-third-party-model-bg-default); - - --color-third-party-aws: var(--color-third-party-aws); - --color-third-party-aws-alt: var(--color-third-party-aws-alt); - --color-saas-background: var(--color-saas-background); + --color-saas-background-inverted: var(--color-saas-background-inverted); + --color-saas-background-inverted-hover: var(--color-saas-background-inverted-hover); --color-saas-pricing-grid-bg: var(--color-saas-pricing-grid-bg); --color-saas-dify-blue-static: var(--color-saas-dify-blue-static); --color-saas-dify-blue-static-hover: var(--color-saas-dify-blue-static-hover); @@ -777,10 +809,21 @@ --color-saas-dify-blue-inverted: var(--color-saas-dify-blue-inverted); --color-saas-dify-blue-inverted-dimmed: var(--color-saas-dify-blue-inverted-dimmed); - --color-saas-background-inverted: var(--color-saas-background-inverted); - --color-saas-background-inverted-hover: var(--color-saas-background-inverted-hover); - --color-dify-logo-blue: var(--color-dify-logo-blue); --color-dify-logo-black: var(--color-dify-logo-black); + --color-dify-logo-outline-1: var(--color-dify-logo-outline-1); + --color-dify-logo-outline-2: var(--color-dify-logo-outline-2); + + --color-brand-color-opacity-50: var(--color-brand-color-opacity-50); + --color-brand-color-opacity-100: var(--color-brand-color-opacity-100); + --color-brand-color-opacity-200: var(--color-brand-color-opacity-200); + --color-brand-color-opacity-300: var(--color-brand-color-opacity-300); + --color-brand-color-opacity-400: var(--color-brand-color-opacity-400); + --color-brand-color-opacity-500: var(--color-brand-color-opacity-500); + --color-brand-color-opacity-600: var(--color-brand-color-opacity-600); + --color-brand-color-opacity-700: var(--color-brand-color-opacity-700); + --color-brand-color-opacity-800: var(--color-brand-color-opacity-800); + --color-brand-color-opacity-900: var(--color-brand-color-opacity-900); + --color-brand-color-opacity-1000: var(--color-brand-color-opacity-1000); }