Feat: Adjust the style of the delete button on the agent side #9869 (#10473)

### What problem does this PR solve?

Feat: Adjust the style of the delete button on the agent side #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/edge/index.tsx

@@ -116,7 +116,7 @@ function InnerButtonEdge({
         >
           <button
             className={cn(
-              'size-3.5 border border-state-error text-state-error rounded-full leading-none',
+              'size-3.5 border border-state-error text-state-error rounded-full leading-none bg-bg-canvas outline outline-bg-canvas',
               'invisible',
               { visible },
             )}

web/tailwind.config.js

@@ -69,6 +69,12 @@ module.exports = {
         'bg-card': 'var(--bg-card)',
         'bg-component': 'var(--bg-component)',
         'bg-input': 'var(--bg-input)',
+        'bg-canvas': {
+          DEFAULT: 'rgb(var(--bg-canvas) / <alpha-value>)',
+        },
+        'bg-list': {
+          DEFAULT: 'rgb(var(--bg-list) / <alpha-value>)',
+        },
         'text-primary': 'var(--text-primary)',
         'text-secondary': 'var(--text-secondary)',
         'text-disabled': 'var(--text-disabled)',
@@ -128,72 +134,14 @@ module.exports = {
           DEFAULT: 'var(--background-inverse-standard)',
           foreground: 'var(--background-inverse-standard-foreground)',
         },
-        backgroundInverseStandard: {
-          DEFAULT: 'var(--background-inverse-standard)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        backgroundInverseWeak: {
-          DEFAULT: 'var(--background-inverse-weak)',
-          foreground: 'var(--background-inverse-weak-foreground)',
-        },
-        backgroundCoreStandard: {
-          DEFAULT: 'var(--background-core-standard)',
-          foreground: 'var(--background-core-standard-foreground)',
-        },
         backgroundCoreWeak: {
           DEFAULT: 'var(--background-core-weak)',
           foreground: 'var(--background-core-weak-foreground)',
         },
-
         'colors-background-inverse-standard': {
           DEFAULT: 'var(--colors-background-inverse-standard)',
           foreground: 'var(--colors-background-inverse-standard-foreground)',
         },
-
-        'color-background-brand-default': {
-          DEFAULT: 'var(--color-background-brand-default)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'color-background-positive-default': {
-          DEFAULT: 'var(--color-background-positive-default)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-core-standard': {
-          DEFAULT: 'var(--colors-background-core-standard)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-core-strong': {
-          DEFAULT: 'var(--colors-background-core-strong)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-core-weak': {
-          DEFAULT: 'var(--colors-background-core-weak)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-functional-solid-danger': {
-          DEFAULT: 'var(--colors-background-functional-solid-danger)',
-          foreground: 'var(--colors-text-inverse-strong)',
-        },
-        'colors-background-functional-solid-notice': {
-          DEFAULT: 'var(--colors-background-functional-solid-notice)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-functional-solid-positive': {
-          DEFAULT: 'var(--colors-background-functional-solid-positive)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-functional-transparent-danger': {
-          DEFAULT: 'var(--colors-background-functional-transparent-danger)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-functional-transparent-notice': {
-          DEFAULT: 'var(--colors-background-functional-transparent-notice)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
-        'colors-background-functional-transparent-positive': {
-          DEFAULT: 'var(--colors-background-functional-transparent-positive)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
         'colors-background-inverse-standard': {
           DEFAULT: 'var(--colors-background-inverse-standard)',
           foreground: 'var(--background-inverse-standard-foreground)',
@@ -214,10 +162,6 @@ module.exports = {
           DEFAULT: 'var(--colors-background-neutral-weak)',
           foreground: 'var(--background-inverse-standard-foreground)',
         },
-        'colors-background-sentiment-solid-primary': {
-          DEFAULT: 'var(--colors-background-sentiment-solid-primary)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
         sidebar: {
           DEFAULT: 'hsl(var(--sidebar-background))',
           foreground: 'hsl(var(--sidebar-foreground))',

web/tailwind.css

@@ -42,10 +42,6 @@
     --colors-background-inverse-weak: rgba(17, 16, 23, 0.1);
     --colors-background-neutral-standard: white;
     --colors-background-neutral-strong: rgba(226, 223, 246, 1);
-    --colors-background-functional-solid-danger: rgba(222, 17, 53, 1);
-    --colors-background-core-strong: rgba(98, 72, 246, 1);
-    --colors-background-sentiment-solid-primary: rgba(127, 105, 255, 1);
-    --colors-background-core-standard: rgb(90, 75, 254);
 
     --button-blue-text: rgb(22, 119, 255);
 
@@ -100,6 +96,8 @@
     --bg-card: rgba(0, 0, 0, 0.05);
     --bg-component: #ffffff;
     --bg-input: rgba(255, 255, 255, 0);
+    --bg-canvas: 246 246 247;
+    --bg-list: 246 246 247;
     /* Button ,Body text, Input completed text */
     --text-primary: #161618;
     --text-secondary: #75787a;
@@ -180,26 +178,11 @@
     --background-badge: rgba(22, 22, 24, 0.5);
     --text-badge: rgba(151, 154, 171, 1);
 
-    --colors-background-core-standard: rgba(137, 126, 255, 1);
-    --colors-background-core-strong: rgba(152, 147, 255, 1);
-    --colors-background-core-weak: rgba(101, 75, 248, 1);
-    --colors-background-functional-solid-danger: rgba(255, 57, 92, 1);
-    --colors-background-functional-solid-notice: rgba(255, 208, 94, 1);
-    --colors-background-functional-solid-positive: rgba(74, 225, 145, 1);
-    --colors-background-functional-transparent-danger: rgba(234, 50, 83, 0.2);
-    --colors-background-functional-transparent-notice: rgba(248, 208, 111, 0.5);
-    --colors-background-functional-transparent-positive: rgba(
-      65,
-      203,
-      130,
-      0.5
-    );
     --colors-background-inverse-standard: rgba(230, 227, 246, 0.15);
     --colors-background-inverse-strong: rgba(255, 255, 255, 0.8);
     --colors-background-neutral-standard: rgba(11, 10, 18, 1);
     --colors-background-neutral-strong: rgba(29, 26, 44, 1);
     --colors-background-neutral-weak: rgba(17, 16, 23, 1);
-    --colors-background-sentiment-solid-primary: rgba(146, 118, 255, 1);
 
     --colors-outline-sentiment-primary: rgba(146, 118, 255, 1);
     --colors-outline-neutral-strong: rgba(255, 255, 255, 0.15);
@@ -246,6 +229,8 @@
     --bg-card: rgba(255, 255, 255, 0.05);
     --bg-component: #202025;
     --bg-input: rgba(255, 255, 255, 0.05);
+    --bg-canvas: 0 0 0;
+    --bg-list: 56 56 58;
     --text-primary: #f6f6f7;
     --text-secondary: #b2b5b7;
     --text-disabled: #75787a;