diff --git a/web/app/components/explore/banner/banner-item.tsx b/web/app/components/explore/banner/banner-item.tsx index 5ce810bafb..d90a1060f9 100644 --- a/web/app/components/explore/banner/banner-item.tsx +++ b/web/app/components/explore/banner/banner-item.tsx @@ -116,10 +116,10 @@ export const BannerItem: FC = ({ banner, autoplayDelay, isPause className="flex min-w-[480px] max-w-[680px] flex-[1_0_0] flex-col pr-4" style={responsiveStyle} > -

+

{category}

-

+

{title}

diff --git a/web/themes/dark.css b/web/themes/dark.css index 186080854a..59c9811412 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -101,6 +101,17 @@ html[data-theme="dark"] { --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-button-button-seam: rgb(0 0 0 / 0.15); + --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; @@ -161,6 +172,7 @@ html[data-theme="dark"] { --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-panel-bg-blur-burn: rgb(31 31 35 / 0.9); --color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6); --color-components-main-nav-nav-button-text-active: #f4f4f5; @@ -171,6 +183,26 @@ html[data-theme="dark"] { --color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05); + --color-components-main-nav-text: #a8a8b3; + --color-components-main-nav-text-active: #ffffff; + --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-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-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-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-slider-knob: #f4f4f5; --color-components-slider-knob-hover: #fefefe; --color-components-slider-knob-disabled: rgb(255 255 255 / 0.2); @@ -369,6 +401,8 @@ html[data-theme="dark"] { --color-components-icon-bg-orange-solid: #f79009; --color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2); + --color-components-marketplace-header-bg: rgb(31 31 35 / 0.9); + --color-text-primary: #fbfbfc; --color-text-secondary: #d9d9de; --color-text-tertiary: rgb(200 206 218 / 0.6); @@ -430,6 +464,7 @@ html[data-theme="dark"] { --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-background-default-hover-alpha-0: rgb(39 39 43 / 0); --color-shadow-shadow-1: rgb(0 0 0 / 0.05); --color-shadow-shadow-3: rgb(0 0 0 / 0.1); @@ -447,7 +482,7 @@ html[data-theme="dark"] { --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: #323236; + --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); @@ -513,6 +548,18 @@ html[data-theme="dark"] { --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-debug-run-status-bg: rgb(230 46 5 / 0.4); + --color-workflow-debug-breakpoint: #ff692e; + --color-workflow-debug-text: #ff9c66; + --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); + --color-workflow-debug-run-status-bg-alt: rgb(255 46 0 / 0.5); + + --color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.5); + --color-workflow-test-run-text: #d1e0ff; + --color-workflow-test-run-run-status-bg-alt: rgb(45 90 190 / 0.9); + --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.3); + --color-workflow-test-run-paused-text: #fdb022; + --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); @@ -557,6 +604,7 @@ html[data-theme="dark"] { --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-effects-highlight-subtle: rgb(200 206 218 / 0.04); --color-util-colors-orange-dark-orange-dark-50: #57130a; --color-util-colors-orange-dark-orange-dark-100: #771a0d; @@ -771,7 +819,9 @@ html[data-theme="dark"] { --color-saas-background-inverted: rgb(255 255 255 / 0.9); --color-saas-background-inverted-hover: #ffffff; - --color-dify-logo-dify-logo-blue: #e8e8e8; - --color-dify-logo-dify-logo-black: #e8e8e8; + --color-dify-logo-blue: #e8e8e8; + --color-dify-logo-black: #e8e8e8; + --color-dify-logo-outline-1: #ffffff; + --color-dify-logo-outline-2: #e8e8e8; } \ No newline at end of file diff --git a/web/themes/light.css b/web/themes/light.css index 93b76cbfec..3901de4d8b 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -89,6 +89,17 @@ html[data-theme="light"] { --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-button-button-seam: rgb(0 0 0 / 0.03); + --color-components-checkbox-icon: #ffffff; --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5); --color-components-checkbox-bg: #155aef; @@ -149,6 +160,7 @@ html[data-theme="light"] { --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-panel-bg-blur-burn: rgb(255 255 255 / 0.9); --color-components-main-nav-nav-button-text: #495464; --color-components-main-nav-nav-button-text-active: #155aef; @@ -159,6 +171,26 @@ html[data-theme="light"] { --color-components-main-nav-nav-user-border: #ffffff; + --color-components-main-nav-text: #495464; + --color-components-main-nav-text-active: #0033ff; + --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-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-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-inner-glow: rgb(255 255 255 / 0.3); + --color-components-main-nav-glass-shadow-reflection: rgb(0 51 255 / 0.06); + --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-slider-knob: #ffffff; --color-components-slider-knob-hover: #ffffff; --color-components-slider-knob-disabled: rgb(255 255 255 / 0.95); @@ -357,6 +389,8 @@ html[data-theme="light"] { --color-components-icon-bg-orange-solid: #f79009; --color-components-icon-bg-orange-soft: #fffaeb; + --color-components-marketplace-header-bg: rgb(255 255 255 / 0.98); + --color-text-primary: #101828; --color-text-secondary: #354052; --color-text-tertiary: #676f83; @@ -418,6 +452,7 @@ html[data-theme="light"] { --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-background-default-hover-alpha-0: rgb(249 250 251 / 0); --color-shadow-shadow-1: rgb(9 9 11 / 0.03); --color-shadow-shadow-3: rgb(9 9 11 / 0.05); @@ -501,6 +536,18 @@ html[data-theme="light"] { --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-debug-run-status-bg: rgb(255 68 5 / 0.08); + --color-workflow-debug-breakpoint: #e62e05; + --color-workflow-debug-text: #e62e05; + --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); + --color-workflow-debug-run-status-bg-alt: rgb(255 68 5 / 0.14); + + --color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.08); + --color-workflow-test-run-text: #004aeb; + --color-workflow-test-run-run-status-bg-alt: rgb(21 90 239 / 0.14); + --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.14); + --color-workflow-test-run-paused-text: #dc6803; + --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); @@ -545,6 +592,7 @@ html[data-theme="light"] { --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-effects-highlight-subtle: rgb(255 255 255 / 0.5); --color-util-colors-orange-dark-orange-dark-50: #fff4ed; --color-util-colors-orange-dark-orange-dark-100: #ffe6d5; @@ -759,7 +807,9 @@ html[data-theme="light"] { --color-saas-background-inverted: #0b0b0e; --color-saas-background-inverted-hover: #222225; - --color-dify-logo-dify-logo-blue: #0033ff; - --color-dify-logo-dify-logo-black: #000000; + --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); } \ No newline at end of file diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts index 23d65b4bab..2ea617284f 100644 --- a/web/themes/tailwind-theme-var-define.ts +++ b/web/themes/tailwind-theme-var-define.ts @@ -89,6 +89,17 @@ const vars = { 'components-button-indigo-bg-hover': 'var(--color-components-button-indigo-bg-hover)', 'components-button-indigo-bg-disabled': 'var(--color-components-button-indigo-bg-disabled)', + 'components-button-debug-text': 'var(--color-components-button-debug-text)', + 'components-button-debug-text-disabled': 'var(--color-components-button-debug-text-disabled)', + 'components-button-debug-bg': 'var(--color-components-button-debug-bg)', + 'components-button-debug-bg-hover': 'var(--color-components-button-debug-bg-hover)', + 'components-button-debug-bg-disabled': 'var(--color-components-button-debug-bg-disabled)', + 'components-button-debug-border': 'var(--color-components-button-debug-border)', + 'components-button-debug-border-hover': 'var(--color-components-button-debug-border-hover)', + 'components-button-debug-border-disabled': 'var(--color-components-button-debug-border-disabled)', + + 'components-button-button-seam': 'var(--color-components-button-button-seam)', + 'components-checkbox-icon': 'var(--color-components-checkbox-icon)', 'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)', 'components-checkbox-bg': 'var(--color-components-checkbox-bg)', @@ -149,6 +160,7 @@ const vars = { 'components-panel-on-panel-item-bg-destructive-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent)', 'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)', + 'components-panel-bg-blur-burn': 'var(--color-components-panel-bg-blur-burn)', 'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)', 'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)', @@ -159,6 +171,26 @@ const vars = { 'components-main-nav-nav-user-border': 'var(--color-components-main-nav-nav-user-border)', + 'components-main-nav-text': 'var(--color-components-main-nav-text)', + 'components-main-nav-text-active': 'var(--color-components-main-nav-text-active)', + 'components-main-nav-glass-edge-highlight-first': 'var(--color-components-main-nav-glass-edge-highlight-first)', + 'components-main-nav-glass-edge-highlight-middle': 'var(--color-components-main-nav-glass-edge-highlight-middle)', + 'components-main-nav-glass-edge-highlight-end': 'var(--color-components-main-nav-glass-edge-highlight-end)', + + 'components-main-nav-glass-edge-reflection-first': 'var(--color-components-main-nav-glass-edge-reflection-first)', + 'components-main-nav-glass-edge-reflection-middle': 'var(--color-components-main-nav-glass-edge-reflection-middle)', + 'components-main-nav-glass-edge-reflection-end': 'var(--color-components-main-nav-glass-edge-reflection-end)', + + 'components-main-nav-glass-surface-first': 'var(--color-components-main-nav-glass-surface-first)', + 'components-main-nav-glass-surface-middle-1': 'var(--color-components-main-nav-glass-surface-middle-1)', + 'components-main-nav-glass-surface-middle-2': 'var(--color-components-main-nav-glass-surface-middle-2)', + 'components-main-nav-glass-surface-end': 'var(--color-components-main-nav-glass-surface-end)', + + 'components-main-nav-glass-inner-glow': 'var(--color-components-main-nav-glass-inner-glow)', + 'components-main-nav-glass-shadow-reflection': 'var(--color-components-main-nav-glass-shadow-reflection)', + 'components-main-nav-glass-shadow-reflection-glow': 'var(--color-components-main-nav-glass-shadow-reflection-glow)', + 'components-main-nav-glass-text-glow': 'var(--color-components-main-nav-glass-text-glow)', + 'components-slider-knob': 'var(--color-components-slider-knob)', 'components-slider-knob-hover': 'var(--color-components-slider-knob-hover)', 'components-slider-knob-disabled': 'var(--color-components-slider-knob-disabled)', @@ -357,6 +389,8 @@ const vars = { 'components-icon-bg-orange-solid': 'var(--color-components-icon-bg-orange-solid)', 'components-icon-bg-orange-soft': 'var(--color-components-icon-bg-orange-soft)', + 'components-marketplace-header-bg': 'var(--color-components-marketplace-header-bg)', + 'text-primary': 'var(--color-text-primary)', 'text-secondary': 'var(--color-text-secondary)', 'text-tertiary': 'var(--color-text-tertiary)', @@ -418,6 +452,7 @@ const vars = { 'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)', 'background-body-transparent': 'var(--color-background-body-transparent)', 'background-section-burn-inverted': 'var(--color-background-section-burn-inverted)', + 'background-default-hover-alpha-0': 'var(--color-background-default-hover-alpha-0)', 'shadow-shadow-1': 'var(--color-shadow-shadow-1)', 'shadow-shadow-3': 'var(--color-shadow-shadow-3)', @@ -501,6 +536,18 @@ const vars = { 'workflow-workflow-progress-bg-1': 'var(--color-workflow-workflow-progress-bg-1)', 'workflow-workflow-progress-bg-2': 'var(--color-workflow-workflow-progress-bg-2)', + 'workflow-debug-run-status-bg': 'var(--color-workflow-debug-run-status-bg)', + 'workflow-debug-breakpoint': 'var(--color-workflow-debug-breakpoint)', + 'workflow-debug-text': 'var(--color-workflow-debug-text)', + 'workflow-debug-text-disabled': 'var(--color-workflow-debug-text-disabled)', + 'workflow-debug-run-status-bg-alt': 'var(--color-workflow-debug-run-status-bg-alt)', + + 'workflow-test-run-run-status-bg': 'var(--color-workflow-test-run-run-status-bg)', + 'workflow-test-run-text': 'var(--color-workflow-test-run-text)', + 'workflow-test-run-run-status-bg-alt': 'var(--color-workflow-test-run-run-status-bg-alt)', + 'workflow-test-run-paused-bg': 'var(--color-workflow-test-run-paused-bg)', + 'workflow-test-run-paused-text': 'var(--color-workflow-test-run-paused-text)', + 'divider-subtle': 'var(--color-divider-subtle)', 'divider-regular': 'var(--color-divider-regular)', 'divider-deep': 'var(--color-divider-deep)', @@ -545,6 +592,7 @@ const vars = { 'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)', 'effects-image-frame': 'var(--color-effects-image-frame)', 'effects-icon-border': 'var(--color-effects-icon-border)', + 'effects-highlight-subtle': 'var(--color-effects-highlight-subtle)', 'util-colors-orange-dark-orange-dark-50': 'var(--color-util-colors-orange-dark-orange-dark-50)', 'util-colors-orange-dark-orange-dark-100': 'var(--color-util-colors-orange-dark-orange-dark-100)', @@ -759,8 +807,10 @@ const vars = { 'saas-background-inverted': 'var(--color-saas-background-inverted)', 'saas-background-inverted-hover': 'var(--color-saas-background-inverted-hover)', - 'dify-logo-dify-logo-blue': 'var(--color-dify-logo-dify-logo-blue)', - 'dify-logo-dify-logo-black': 'var(--color-dify-logo-dify-logo-black)', + 'dify-logo-blue': 'var(--color-dify-logo-blue)', + 'dify-logo-black': 'var(--color-dify-logo-black)', + 'dify-logo-outline-1': 'var(--color-dify-logo-outline-1)', + 'dify-logo-outline-2': 'var(--color-dify-logo-outline-2)', } export default vars