Supplement the PR operation panel status style in PR

CHANGELOG.md

@@ -2,15 +2,16 @@
 
 #### More aligned with GitHub style
 
-- Optimize the selection style of items in the menu
+- Optimize the selection style of items in the menu.
-- Optimize code block styles
+- Optimize code block styles.
 
 ##### Template File
 
-- Synchronized repository commit page layout and styles
+- Synchronized repository commit page layout and styles.
-- Synchronized repository code list page layout and styles
+- Synchronized repository code list page layout and styles.
-- Synchronized repository add file button menu styles
+- Synchronized repository add file button menu styles.
 
 ### 🐞 Fix
 
 - Fixed extra lines under heatmap.
+- Supplement the PR operation panel status style in PR.

src/core/github.ts

@@ -42,10 +42,10 @@ export type GithubColor = {
   };
   bgColor: {
     accent: { emphasis: string; muted: string };
-    attention: { muted: string };
+    attention: { emphasis: string; muted: string };
     emphasis: string;
     success: { emphasis: string; muted: string };
-    danger: { muted: string };
+    danger: { emphasis: string; muted: string };
     done: { emphasis: string };
     default: string;
     inset: string;
@@ -240,6 +240,12 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       success: {
         emphasis: githubColor.bgColor.success.emphasis,
       },
+      attention: {
+        emphasis: githubColor.bgColor.attention.emphasis,
+      },
+      danger: {
+        emphasis: githubColor.bgColor.danger.emphasis,
+      },
       done: {
         emphasis: githubColor.bgColor.done.emphasis,
       },

src/types/color/github.ts

@@ -53,9 +53,22 @@ export const github = {
        */
       emphasis: null,
     },
+    attention: {
+      /** 注意的背景颜色
+       * @issue `prMerge` 头像颜色
+       */
+      emphasis: null,
+    },
+    danger: {
+      /** 危险的背景颜色
+       * @issue `prMerge` 头像颜色
+       */
+      emphasis: null,
+    },
     done: {
       /** 完成的背景颜色
        * @issue `babel` 工单已关闭图标背景颜色
+       * @issue `prMerge` 头像颜色
        */
       emphasis: null,
     },

styles/components/issue.ts

@@ -412,7 +412,6 @@ export const prMerge = css`
   .repository.view.issue .comment-list .timeline-item.pull-merge-box {
     // 头像
     .timeline-avatar {
-      color: ${themeVars.color.white} !important;
       border-radius: 9999px;
       width: 40px;
       height: 40px;
@@ -423,34 +422,67 @@ export const prMerge = css`
         width: 24px;
         height: 24px;
       }
-      // 可以合并
+      // PR 界面的 PR 操作评论
-      &.green {
+      &.text {
-        background-color: ${themeVars.github.bgColor.success.emphasis};
+        color: ${themeVars.color.white} !important;
         border-radius: ${otherThemeVars.border.radius};
-        // 操作评论边框色
+        // 操作评论边框
         + .content > .ui.attached.segment {
-          border-left-color: ${themeVars.github.bgColor.success.emphasis};
+          border-width: 1.5px;
-          border-right-color: ${themeVars.github.bgColor.success.emphasis};
+        }
-          &:first-child {
+        &.grey {
-            border-top-color: ${themeVars.github.bgColor.success.emphasis};
+          background-color: ${themeVars.color.text.light.num1};
-          }
+        }
-          &:last-child {
+        &.green {
-            border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
+          background-color: ${themeVars.github.bgColor.success.emphasis};
+          + .content > .ui.attached.segment {
+            border-left-color: ${themeVars.github.bgColor.success.emphasis};
+            border-right-color: ${themeVars.github.bgColor.success.emphasis};
+            &:first-child {
+              border-top-color: ${themeVars.github.bgColor.success.emphasis};
+            }
+            &:last-child {
+              border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
+            }
           }
         }
-      }
+        &.purple {
-      // 已合并
+          background-color: ${themeVars.github.bgColor.done.emphasis};
-      &.purple {
+          + .content > .ui.attached.segment {
-        background-color: ${themeVars.github.bgColor.done.emphasis};
+            border-left-color: ${themeVars.github.bgColor.done.emphasis};
-        border-radius: ${otherThemeVars.border.radius};
+            border-right-color: ${themeVars.github.bgColor.done.emphasis};
-        + .content > .ui.attached.segment {
+            &:first-child {
-          border-left-color: ${themeVars.github.bgColor.done.emphasis};
+              border-top-color: ${themeVars.github.bgColor.done.emphasis};
-          border-right-color: ${themeVars.github.bgColor.done.emphasis};
+            }
-          &:first-child {
+            &:last-child {
-            border-top-color: ${themeVars.github.bgColor.done.emphasis};
+              border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
+            }
           }
-          &:last-child {
+        }
-            border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
+        &.yellow {
+          background-color: ${themeVars.github.bgColor.attention.emphasis};
+          + .content > .ui.attached.segment {
+            border-left-color: ${themeVars.github.bgColor.attention.emphasis};
+            border-right-color: ${themeVars.github.bgColor.attention.emphasis};
+            &:first-child {
+              border-top-color: ${themeVars.github.bgColor.attention.emphasis};
+            }
+            &:last-child {
+              border-bottom-color: ${themeVars.github.bgColor.attention.emphasis};
+            }
+          }
+        }
+        &.red {
+          background-color: ${themeVars.github.bgColor.danger.emphasis};
+          + .content > .ui.attached.segment {
+            border-left-color: ${themeVars.github.bgColor.danger.emphasis};
+            border-right-color: ${themeVars.github.bgColor.danger.emphasis};
+            &:first-child {
+              border-top-color: ${themeVars.github.bgColor.danger.emphasis};
+            }
+            &:last-child {
+              border-bottom-color: ${themeVars.github.bgColor.danger.emphasis};
+            }
           }
         }
       }

themes/colorblind-dark.css.ts

@@ -25,7 +25,7 @@ export const colorblindDarkGithubColors: GithubColor = {
   },
   bgColor: {
     ...darkGithubColors.bgColor,
-    danger: { muted: "#db6d281a" },
+    danger: { emphasis: "#bd561d", muted: "#db6d281a" },
     success: { emphasis: "#1f6feb", muted: "#388bfd33" },
   },
   borderColor: {

themes/colorblind-light.css.ts

@@ -25,7 +25,7 @@ export const colorblindLightGithubColors: GithubColor = {
   },
   bgColor: {
     ...lightGithubColors.bgColor,
-    danger: { muted: "#fff1e5" },
+    danger: { emphasis: "#bc4c00", muted: "#fff1e5" },
     success: { emphasis: "#0969da", muted: "#ddf4ff" },
   },
   borderColor: {

themes/dark.css.ts

@@ -45,8 +45,8 @@ export const darkGithubColors: GithubColor = {
   },
   bgColor: {
     accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
-    attention: { muted: "#bb800926" },
+    attention: { emphasis: "#9e6a03", muted: "#bb800926" },
-    danger: { muted: "#f851491a" },
+    danger: { emphasis: "#da3633", muted: "#f851491a" },
     default: "#0d1117",
     done: { emphasis: "#8957e5" },
     emphasis: "#3d444d",

themes/light.css.ts

@@ -45,8 +45,8 @@ export const lightGithubColors: GithubColor = {
   },
   bgColor: {
     accent: { emphasis: "#0969da", muted: "#ddf4ff" },
-    attention: { muted: "#fff8c5" },
+    attention: { emphasis: "#9a6700", muted: "#fff8c5" },
-    danger: { muted: "#ffebe9" },
+    danger: { emphasis: "#cf222e", muted: "#ffebe9" },
     default: "#ffffff",
     done: { emphasis: "#8250df" },
     emphasis: "#25292e",

themes/soft-dark.css.ts

@@ -39,8 +39,8 @@ export const softDarkGithubColors: GithubColor = {
   },
   bgColor: {
     accent: { emphasis: "#316dca", muted: "#4184e41a" },
-    attention: { muted: "#ae7c1426" },
+    attention: { emphasis: "#966600", muted: "#ae7c1426" },
-    danger: { muted: "#e5534b1a" },
+    danger: { emphasis: "#c93c37", muted: "#e5534b1a" },
     default: "#212830",
     done: { emphasis: "#8256d0" },
     emphasis: "#3d444d",