action 页面同步

scripts/version.cjs

@@ -4,5 +4,4 @@ const path = require("path");
 const pkgPath = path.join(__dirname, "..", "package.json");
 const pkg = JSON.parse(fs.readFileSync(pkgPath));
 
-const version = pkg.version;
+console.log(pkg.version);
-console.log(version);

src/core/vite.ts

@@ -14,11 +14,7 @@ const suffix = ".css.tsx";
  * @param mode 模式, 开发模式为 dev `vite build --mode dev`
  * @returns vite.rollupOptions.input 的配置
  */
-export function themeInput(
+export function themeInput(outDir: string, themeDir: string, mode: string): { [key: string]: string } {
-  outDir: string,
-  themeDir: string,
-  mode: string
-): { [key: string]: string } {
   const hash = crypto.randomBytes(6).toString("hex");
   const tmpDir = `${outDir}/tmp-${hash}`; // 输出目录下的临时目录
   fs.mkdirSync(tmpDir, { recursive: true });

src/types/color/console.ts

@@ -1,30 +1,49 @@
 const ansiColor = {
+  /** 黑色 */
   black: null,
+  /** 红色 */
   red: null,
+  /** 绿色 */
   green: null,
+  /** 黄色 */
   yellow: null,
+  /** 蓝色 */
   blue: null,
+  /** 品红 */
   magenta: null,
+  /** 青色 */
   cyan: null,
+  /** 白色 */
   white: null,
 };
 
 export const ansi = {
+  /** 亮色 */
   bright: ansiColor,
   ...ansiColor,
 };
 
 export const console = {
+  /** Action 页面日志部分字体颜色 */
   fg: {
+    /** 亮色用于标题或步骤标题激活时 */
     self: null,
+    /** 暗色用于副标题或步骤标题 */
     subtle: null,
   },
+  /** Action 页面日志部分背景色 */
   bg: null,
+  /** Action 页面日志部分边框色 */
   border: null,
+  /** Action 页面日志部分步骤标题激活颜色 */
   activeBg: "color-console-active-bg",
+  /** Action 页面日志部分步骤标题悬停颜色 */
   hoverBg: "color-console-hover-bg",
+  /** Action 页面日志部分设置菜单颜色 */
   menu: {
+    /** 菜单背景色 */
     bg: null,
+    /** 菜单边框色 */
     border: null,
   },
 };

src/types/color/github.ts

@@ -1,56 +1,27 @@
 export const github = {
-  display: {
+  /** 用于 color 属性的颜色 */
-    brown: { fgColor: null },
-    cyan: { fgColor: null },
-    indigo: { fgColor: null },
-    lemon: { fgColor: null },
-    olive: { fgColor: null },
-    teal: { fgColor: null },
-  },
-  diffBlob: {
-    addtionNum: {
-      bgColor: null,
-    },
-    addtionWord: {
-      bgColor: null,
-    },
-    deletionNum: {
-      bgColor: null,
-    },
-    deletionWord: {
-      bgColor: null,
-    },
-    hunkNum: {
-      /** diff 按钮色 */
-      bgColorRest: null,
-    },
-  },
   fgColor: {
+    /** 强调色
+     * @actions 右侧日志标题颜色
+     */
     accent: null,
-    attention: null,
+    /** 默认的文本颜色
-    danger: null,
+     * @diff 增加/删除代码块的文本颜色
+     */
     default: null,
-    disabled: null,
+    /** 暗淡的文本颜色
-    done: null,
+     * @diff 折叠行的文本颜色
-    neutral: null,
+     */
-    severe: null,
-    sponsors: null,
-    success: null,
-    black: null,
-    white: null,
-  },
-  bgColor: {
-    accent: {
-      emphasis: null,
-      muted: null,
-    },
-    black: null,
-    success: {
-      muted: null,
-    },
-    danger: {
-      muted: null,
-    },
     muted: null,
   },
+  /** 用于 background 属性的颜色 */
+  bgColor: {
+    accent: {
+      /** 强调色
+       * @diff 折叠/展开按钮的悬停颜色
+       * @actions 左侧子作业激活伪元素颜色
+       */
+      emphasis: null,
+    },
+  },
 };

src/types/color/other.ts

@@ -12,6 +12,7 @@ export const other = {
     header: null,
     body: {
       self: null,
+      /** diff 按钮行行色 */
       highlight: null,
     },
   },

src/types/index.ts

@@ -1,12 +1,21 @@
 import type { MapLeafNodes } from "src/core/types";
 import * as color from "./color";
 
+/** 主色调 */
 export type Primary = MapLeafNodes<typeof color.primary, string>;
+/** 副色调 */
 export type Secondary = MapLeafNodes<typeof color.secondary, string>;
+/** 基础颜色 */
 export type Named = MapLeafNodes<typeof color.named, string>;
+/** 提示消息 */
 export type Message = MapLeafNodes<typeof color.message, string>;
+/** Actions 日志 ANSI 颜色 */
 export type Ansi = MapLeafNodes<typeof color.ansi, string>;
+/** Actions 颜色 */
 export type Console = MapLeafNodes<typeof color.console, string>;
+/** 代码差异对比颜色 */
 export type Diff = MapLeafNodes<typeof color.diff, string>;
+/** 其他颜色 */
 export type Other = MapLeafNodes<typeof color.other, string>;
+/** 仅限本主题的 Github 颜色 */
 export type Github = MapLeafNodes<typeof color.github, string>;

src/types/vars.ts

@@ -18,6 +18,7 @@ const vars = {
     ...color.named,
     primary: color.primary,
     secondary: color.secondary,
+    /** Actions 日志 ANSI 颜色 */
     ansi: color.ansi,
     console: color.console,
     diff: color.diff,

styles/components/actions.scss

@@ -1,234 +0,0 @@
-// Made by Luting ^-^
-
-.page-content.repository.actions .ui.grid {
-  .four.wide {
-    border-right: 1px solid var(--color-light-border);
-    min-height: calc(-104px + 100vh);
-
-    &:before {
-      content: "Actions";
-      display: block;
-      font-size: 20px;
-      font-weight: 600;
-      margin-top: 6px;
-      margin-bottom: 24px;
-    }
-  }
-
-  .twelve.wide {
-    &:before {
-      content: "Workflow Runs";
-      display: block;
-      font-size: 20px;
-      margin-top: 6px;
-      margin-bottom: 24px;
-      margin-left: 2px;
-    }
-
-    .ui.secondary.menu {
-      background-color: var(--color-box-header);
-      border: 1px solid var(--color-light-border);
-      border-bottom: 0;
-      border-top-left-radius: var(--border-radius);
-      border-top-right-radius: var(--border-radius);
-      padding: 16px;
-      margin-bottom: 0;
-
-      .item {
-        padding: 6px 12px;
-      }
-    }
-
-    .ui.info.message {
-      border-radius: 0;
-      border-left-color: var(--color-light-border);
-      border-right-color: var(--color-light-border);
-      margin: 0;
-
-      ~ .run-list {
-        border-top: 0;
-      }
-    }
-
-    .run-list {
-      border: 1px solid var(--color-light-border);
-      border-bottom-left-radius: var(--border-radius);
-      border-bottom-right-radius: var(--border-radius);
-
-      .flex-item {
-        padding: 16px;
-
-        .flex-item-leading {
-          align-self: flex-start;
-          margin-top: 2px;
-        }
-
-        .flex-item-main {
-          gap: 0.5rem;
-        }
-
-        .flex-item-trailing {
-          justify-content: space-between;
-
-          > .ui.label {
-            border-radius: var(--border-radius);
-            margin-left: 32px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 767.98px) {
-  .page-content.repository.actions .ui.grid .four.wide {
-    min-height: auto;
-  }
-}
-
-// 工作流禁用标签
-.ui.vertical.menu .item > .ui.red.label {
-  color: var(--color-error-text);
-  border: 1px solid var(--color-error-border);
-  background: var(--color-error-bg);
-  margin-top: 0.5px;
-}
-
-// 手动工作流下拉列表
-#runWorkflowDispatchForm {
-  // 分支选择按钮
-  .ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
-    margin-right: 6px;
-  }
-}
-
-// 日志
-.ui.container.action-view-container {
-  width: auto;
-  max-width: 100%;
-  padding: 0 24px 0 16px;
-
-  .action-view-header {
-    margin-top: 20px;
-
-    .action-info-summary {
-      margin-left: 14px;
-    }
-
-    .action-commit-summary {
-      margin-left: 28 + 14px;
-    }
-  }
-}
-
-.action-view-left.action-view-left {
-  width: 16.5%;
-}
-
-.action-view-right.action-view-right {
-  width: 83.5%;
-}
-
-@media (max-width: 767.98px) {
-  .action-view-left.action-view-left,
-  .action-view-right.action-view-right {
-    width: 100%;
-  }
-}
-
-.action-view-left {
-  margin-top: 16px;
-  margin-right: 28px;
-  border-top: 1px solid #2f353d;
-
-  &:before {
-    content: "Jobs";
-    color: #9198a1;
-    font-size: 12px;
-    font-weight: 600;
-    position: relative;
-    display: inline-block;
-    margin-top: 22px;
-    top: -8px;
-    left: 15px;
-  }
-
-  .job-group-section {
-    padding-right: 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #2f353d;
-
-    .job-brief-item {
-      border-radius: 0.5rem !important;
-      padding: 8px;
-      position: relative;
-      margin-left: 0.5rem;
-
-      &.selected {
-        background-color: #161a21;
-
-        &:hover {
-          background-color: var(--color-hover);
-        }
-
-        &:after {
-          overflow: visible;
-          background: #1f6feb;
-          border-radius: 0.375rem;
-          content: "";
-          height: 24px;
-          left: calc(0.5rem * -1);
-          position: absolute;
-          top: calc(50% - 12px);
-          width: 4px;
-        }
-      }
-    }
-  }
-}
-
-.action-view-right {
-  margin-top: 16px;
-  min-height: calc(100vh - 245px);
-
-  .job-info-header {
-    padding: 16px 12px 16px 24px;
-    height: auto;
-  }
-
-  .job-step-container {
-    .job-step-summary {
-      color: var(--color-console-fg-subtle);
-      padding: 8px 10px;
-
-      &.step-expandable:hover {
-        color: var(--color-console-fg-subtle);
-      }
-
-      .tw-mr-2:not(.svg) svg.svg {
-        margin: 1.5px 6px 0px 2px;
-      }
-
-      svg.svg.text.green {
-        color: #9198a1 !important;
-      }
-
-      &.selected {
-        color: var(--color-console-fg) !important;
-        background-color: var(--color-console-active-bg) !important;
-
-        svg.svg.text.green {
-          color: #f0f6fc !important;
-        }
-      }
-    }
-
-    .job-log-line {
-      color: #f0f6fc;
-
-      .log-msg:hover * {
-        color: #f0f6fc !important;
-      }
-    }
-  }
-}

styles/components/actions.tsx

@@ -0,0 +1,222 @@
+import { css, themeVars } from "src";
+import { otherThemeVars } from "src/types/vars";
+
+export const actions = css`
+  .page-content.repository.actions .ui.grid {
+    .four.wide {
+      border-right: 1px solid ${themeVars.color.light.border};
+      min-height: calc(-104px + 100vh);
+
+      &:before {
+        content: "Actions";
+        display: block;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 6px;
+        margin-bottom: 24px;
+      }
+    }
+
+    .twelve.wide {
+      &:before {
+        content: "Workflow Runs";
+        display: block;
+        font-size: 20px;
+        margin-top: 6px;
+        margin-bottom: 24px;
+        margin-left: 2px;
+      }
+
+      .ui.secondary.menu {
+        background-color: ${themeVars.color.box.header};
+        border: 1px solid ${themeVars.color.light.border};
+        border-bottom: 0;
+        border-top-left-radius: ${otherThemeVars.border.radius};
+        border-top-right-radius: ${otherThemeVars.border.radius};
+        padding: 16px;
+        margin-bottom: 0;
+
+        .item {
+          padding: 6px 12px;
+        }
+      }
+
+      .ui.info.message {
+        border-radius: 0;
+        border-left-color: ${themeVars.color.light.border};
+        border-right-color: ${themeVars.color.light.border};
+        margin: 0;
+
+        ~ .run-list {
+          border-top: 0;
+        }
+      }
+
+      .run-list {
+        border: 1px solid ${themeVars.color.light.border};
+        border-bottom-left-radius: ${otherThemeVars.border.radius};
+        border-bottom-right-radius: ${otherThemeVars.border.radius};
+
+        .flex-item {
+          padding: 16px;
+
+          .flex-item-leading {
+            align-self: flex-start;
+            margin-top: 2px;
+          }
+
+          .flex-item-main {
+            gap: 0.5rem;
+          }
+
+          .flex-item-trailing {
+            justify-content: space-between;
+
+            > .ui.label {
+              border-radius: ${otherThemeVars.border.radius};
+              margin-left: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 避免手机下左侧工作流项空白过长
+export const actionsMedia = css`
+  @media (max-width: 767.98px) {
+    .page-content.repository.actions .ui.grid .four.wide {
+      min-height: auto;
+    }
+  }
+`;
+
+// 工作流禁用标签
+export const label = css`
+  .ui.vertical.menu .item > .ui.red.label {
+    color: ${themeVars.color.error.text};
+    border: 1px solid ${themeVars.color.error.border};
+    background: ${themeVars.color.error.bg.self};
+    margin-top: 0.5px;
+  }
+`;
+
+// 手动工作流下拉列表
+export const runWorkflow = css`
+  #runWorkflowDispatchForm {
+    // 分支选择按钮
+    .ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
+      margin-right: 6px;
+    }
+  }
+`;
+
+// 工作流左侧作业列表
+export const actionViewLeft = css`
+  .action-view-left {
+    margin-right: 28px;
+    border-top: 1px solid ${themeVars.color.console.border};
+
+    &:before {
+      content: "Jobs";
+      color: ${themeVars.color.console.fg.subtle};
+      font-size: 12px;
+      font-weight: 600;
+      position: relative;
+      display: inline-block;
+      margin-top: 22px;
+      top: -8px;
+      left: 15px;
+    }
+
+    .job-group-section {
+      padding-right: 8px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid ${themeVars.color.console.border};
+
+      .job-brief-item {
+        border-radius: ${otherThemeVars.border.radius} !important;
+        padding: 8px;
+        position: relative;
+        margin-left: 0.5rem;
+
+        &.selected {
+          &:hover {
+            background-color: ${themeVars.color.hover.self};
+          }
+
+          &:after {
+            overflow: visible;
+            background: ${themeVars.github.bgColor.accent.emphasis};
+            border-radius: 0.375rem;
+            content: "";
+            height: 24px;
+            left: calc(0.5rem * -1);
+            position: absolute;
+            top: calc(50% - 12px);
+            width: 4px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 工作流右侧作业步骤日志详情
+export const actionViewRight = css`
+  .action-view-right {
+    /* 提前加载高度和滚动条 */
+    min-height: calc(100vh - 245px);
+
+    .job-info-header {
+      padding: 16px 12px 16px 24px;
+      height: auto;
+
+      .job-info-header-title {
+        color: ${themeVars.github.fgColor.accent};
+      }
+
+      .job-info-header-detail {
+        margin-top: 8px;
+      }
+    }
+
+    .job-step-container {
+      .job-step-summary {
+        color: ${themeVars.color.console.fg.subtle};
+        padding: 8px 10px;
+
+        &.step-expandable:hover {
+          color: ${themeVars.color.console.fg.subtle};
+        }
+
+        .tw-mr-2:not(.svg) svg.svg {
+          margin: 1.5px 6px 0px 2px;
+        }
+        /* 绿色步骤状态改为白色 */
+        svg.svg.text.green {
+          color: ${themeVars.color.console.fg.subtle} !important;
+        }
+
+        &.selected {
+          /* 不被 hover 效果影响 */
+          color: ${themeVars.color.console.fg.self} !important;
+          background-color: ${themeVars.color.console.activeBg} !important;
+
+          svg.svg.text.green {
+            color: ${themeVars.color.console.fg.self} !important;
+          }
+        }
+      }
+      /* 日志字体颜色白色 */
+      .job-log-line {
+        color: ${themeVars.color.console.fg.self};
+        /* 被 hover 时覆盖 ANSI 颜色 */
+        .log-msg:hover * {
+          color: ${themeVars.color.console.fg.self} !important;
+        }
+      }
+    }
+  }
+`;

styles/components/diff.tsx

@@ -1,12 +1,12 @@
 import { css, themeVars } from "src";
 
 export const diff = css`
-  /* 间隔行多余的颜色 */
+  /* 折叠行多余的颜色 */
   .tag-code {
     background-color: unset;
-
+    /* 折叠行文本 */
     .code-inner {
-      color: ${themeVars.github.fgColor.neutral};
+      color: ${themeVars.github.fgColor.muted};
     }
   }
   /* 增加/删除行多余的颜色 */

styles/components/index.tsx

@@ -1 +1,5 @@
-import "./diff"
+// organize-imports-ignore
+// tslint:disable:ordered-imports
+// 组件导入有顺序, 禁止插件优化
+import "./actions";
+import "./diff";

styles/index.tsx

@@ -1,2 +1,5 @@
-import "./public"
+// organize-imports-ignore
-import "./components"
+// tslint:disable:ordered-imports
+// 组件导入有顺序, 禁止插件优化
+import "./public";
+import "./components";

styles/public/index.tsx

@@ -1 +1,4 @@
-import "./chroma"
+// organize-imports-ignore
+// tslint:disable:ordered-imports
+// 组件导入有顺序, 禁止插件优化
+import "./chroma";

themes/dark.css.tsx

@@ -11,22 +11,11 @@ const github = {
     teal: { fgColor: "#1cb0ab" },
   },
   diffBlob: {
-    addtionNum: {
+    addtionNum: { bgColor: "#3fb9504d" },
-      bgColor: "#3fb9504d",
+    addtionWord: { bgColor: "#2ea04366" },
-    },
+    deletionNum: { bgColor: "#f851494d" },
-    addtionWord: {
+    deletionWord: { bgColor: "#f8514966" },
-      bgColor: "#2ea04366",
+    hunkNum: { bgColor: { rest: "#0c2d6b" } },
-    },
-    deletionNum: {
-      bgColor: "#f851494d",
-    },
-    deletionWord: {
-      bgColor: "#f8514966",
-    },
-    hunkNum: {
-      /** diff 按钮色 */
-      bgColorRest: "#0c2d6b",
-    },
   },
   fgColor: {
     accent: "#4493f8",
@@ -41,12 +30,16 @@ const github = {
     success: "#3fb950",
     black: "#010409",
     white: "#ffffff",
+    muted: "#9198a1",
   },
   bgColor: {
     accent: {
       emphasis: "#1f6feb",
       muted: "#388bfd1a",
     },
+    attention: {
+      muted: "#bb800926",
+    },
     black: "#010409",
     success: {
       muted: "#2ea04326",
@@ -54,22 +47,36 @@ const github = {
     danger: {
       muted: "#f851491a",
     },
+    inset: "#010409",
     muted: "#151b23",
   },
+  borderColor: {
+    muted: "#3d444db3",
+  },
+  control: {
+    bgColor: {
+      active: "#2a313c",
+    },
+    transparent: {
+      bgColor: {
+        hover: "#656c7633",
+      },
+    },
+  },
 };
 
 const console: Console = {
   fg: {
-    self: "#f0f6fc",
+    self: github.fgColor.default,
-    subtle: "#9198a1",
+    subtle: github.fgColor.muted,
   },
-  bg: github.bgColor.black,
+  bg: github.bgColor.inset,
-  border: "#2b3139",
+  border: github.borderColor.muted,
-  activeBg: "#2a313c",
+  activeBg: github.control.bgColor.active,
-  hoverBg: "#15191f",
+  hoverBg: github.control.transparent.bgColor.hover,
   menu: {
-    bg: themeVars.color.body,
+    bg: github.bgColor.inset,
-    border: themeVars.color.light.border,
+    border: github.borderColor.muted,
   },
 };
 
@@ -100,8 +107,8 @@ const diff: Diff = {
   },
   moved: {
     row: {
-      bg: "#818044",
+      bg: github.bgColor.attention.muted,
-      border: "#bcca6f",
+      border: github.bgColor.attention.muted,
     },
   },
   inactive: github.bgColor.muted,
@@ -114,7 +121,6 @@ const other: Other = {
     header: "#151b23",
     body: {
       self: "#0d1117",
-      /** diff 按钮行行色 */
       highlight: github.bgColor.accent.muted,
     },
   },
@@ -165,7 +171,7 @@ const other: Other = {
     opaque: "#00000080",
   },
   secondaryBg: "#ffffff26",
-  expandButton: github.diffBlob.hunkNum.bgColorRest,
+  expandButton: github.diffBlob.hunkNum.bgColor.rest,
   placeholderText: "#8a8e99",
   editorLineHighlight: themeVars.color.primary.light.num5,
   projectColumnBg: themeVars.color.secondary.light.num2,
@@ -224,5 +230,16 @@ export default defineTheme({
   console,
   diff,
   other,
-  github,
+  github: {
+    fgColor: {
+      accent: github.fgColor.accent,
+      default: github.fgColor.default,
+      muted: github.fgColor.muted,
+    },
+    bgColor: {
+      accent: {
+        emphasis: github.bgColor.accent.emphasis,
+      },
+    },
+  },
 });