style: update banner item styles and enhance dark/light theme variables (#32111)

Co-authored-by: Crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

web/app/components/explore/banner/banner-item.tsx

@@ -116,10 +116,10 @@ export const BannerItem: FC<BannerItemProps> = ({ banner, autoplayDelay, isPause
               className="flex min-w-[480px] max-w-[680px] flex-[1_0_0] flex-col pr-4"
               style={responsiveStyle}
             >
-              <p className="title-4xl-semi-bold line-clamp-1 text-dify-logo-dify-logo-blue">
+              <p className="title-4xl-semi-bold line-clamp-1 text-dify-logo-blue">
                 {category}
               </p>
-              <p className="title-4xl-semi-bold line-clamp-2 text-dify-logo-dify-logo-black">
+              <p className="title-4xl-semi-bold line-clamp-2 text-dify-logo-black">
                 {title}
               </p>
             </div>

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-blue: #e8e8e8;
-  --color-dify-logo-dify-logo-black: #e8e8e8;
+  --color-dify-logo-black: #e8e8e8;
+  --color-dify-logo-outline-1: #ffffff;
+  --color-dify-logo-outline-2: #e8e8e8;
 
 }

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-blue: #0033ff;
-  --color-dify-logo-dify-logo-black: #000000;
+  --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);
 
 }

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-blue': 'var(--color-dify-logo-blue)',
-  'dify-logo-dify-logo-black': 'var(--color-dify-logo-dify-logo-black)',
+  '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