输入框, svg, 弹窗样式迁移

.github/release.md

@@ -16,12 +16,14 @@
 - 普通按钮激活背景色同步
 - 主色调按钮边框色同步
 - 设置界面右上角小按钮样式同步
+- 弹窗背景色和叠加背景色同步
 
 ## 🎈 Perf
 
 - Actions 日志页面标题间隔优化
 - 管理员后台按钮样式优化
 - 信息提示颜色优化
+- 修复意外点亮其他页面关闭图标的颜色
 
 ## 🐞 Fix
 

src/core/github.ts

@@ -58,6 +58,9 @@ export type GithubColor = {
     };
   };
   borderColor: {
+    accent: {
+      emphasis: string;
+    };
     default: string;
     muted: string;
     translucent: string;
@@ -100,6 +103,11 @@ export type GithubColor = {
   shadow: {
     floating: string;
   };
+  overlay: {
+    backdrop: {
+      bgColor: string;
+    };
+  };
 };
 
 export function defineGithubTheme(githubColor: GithubColor): Theme {
@@ -175,7 +183,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
     timeline: githubColor.borderColor.muted,
     input: {
       text: themeVars.color.text.self,
-      background: themeVars.color.body,
+      background: githubColor.bgColor.muted,
       toggleBackgound: themeVars.color.body,
       border: {
         self: themeVars.color.light.border,
@@ -239,7 +247,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
       fg: githubColor.fgColor.attention,
       bg: githubColor.bgColor.attention.muted,
     },
-    overlayBackdrop: themeVars.color.body,
+    overlayBackdrop: githubColor.overlay.backdrop.bgColor,
   };
 
   const github: Github = {
@@ -255,6 +263,11 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
         emphasis: githubColor.bgColor.accent.emphasis,
       },
     },
+    borderColor: {
+      accent: {
+        emphasis: githubColor.borderColor.accent.emphasis,
+      },
+    },
     button: {
       default: {
         bgColor: {

src/types/color/github.ts

@@ -19,6 +19,7 @@ export const github = {
     success: null,
     /** 完成的文本颜色
      * @issue `button` 关闭工单按钮文本颜色
+     * @svg `issueClosed` 工单已关闭图标颜色
      */
     done: null,
   },
@@ -32,6 +33,14 @@ export const github = {
       emphasis: null,
     },
   },
+  borderColor: {
+    accent: {
+      /** 强调色
+       * @input `input` 输入框被选中时的边框颜色
+       */
+      emphasis: null,
+    },
+  },
   button: {
     /** 普通按钮 */
     default: {

src/types/color/other.ts

@@ -149,6 +149,6 @@ export const other = {
     /** 背景色 */
     bg: null,
   },
-  /** 不知道啥玩意 dimmer 的背景色 */
+  /** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */
   overlayBackdrop: "color-overlay-backdrop",
 };

styles/components.scss

@@ -1,9 +0,0 @@
-// Made by Luting ^-^
-@use "components/dashboard"; // 首页
-@use "components/repo"; // 仓库
-@use "components/issue"; // 工单&拉取请求
-@use "components/setting"; // 设置
-@use "components/release"; // 发布
-@use "components/actions"; // 操作
-@use "components/heatmap"; // 热力图
-@use "components/diff"; // 对比

styles/public.scss

@@ -1,13 +0,0 @@
-// Made by Luting ^-^
-@use "public/chroma"; // 代码高亮
-@use "public/codemirror";
-@use "public/emoji";
-@use "public/transition"; // 添加过渡动画
-@use "public/modal"; // 弹窗
-@use "public/input"; // 输入框
-@use "public/button"; // 按钮
-@use "public/label"; // 标签
-@use "public/dropdown"; // 下拉菜单
-@use "public/svg"; // svg
-@use "public/fontcolor"; // 字体颜色
-@use "public/radius"; // 圆角

styles/public/index.tsx

@@ -1,2 +1,5 @@
-import "./button";
+import "./button"; // 按钮
-import "./chroma";
+import "./chroma"; // 代码高亮
+import "./input"; // 输入框
+import "./modal"; // 弹窗
+import "./svg"; // svg 图标

styles/public/input.scss

@@ -1,34 +0,0 @@
-// Made by Luting ^-^
-input,
-textarea,
-.ui.input input,
-.ui.form input:not([type]),
-.ui.form select,
-.ui.form textarea,
-.ui.form input[type="date"],
-.ui.form input[type="datetime-local"],
-.ui.form input[type="email"],
-.ui.form input[type="file"],
-.ui.form input[type="number"],
-.ui.form input[type="password"],
-.ui.form input[type="search"],
-.ui.form input[type="tel"],
-.ui.form input[type="text"],
-.ui.form input[type="time"],
-.ui.form input[type="url"],
-.ui.selection.dropdown {
-  background: unset;
-
-  &:hover {
-    background: unset;
-  }
-
-  &:focus,
-  &:focus-visible {
-    background: unset !important;
-    border-radius: var(--border-radius);
-    border-color: #1f6feb;
-    outline: none;
-    box-shadow: inset 0 0 0 1px #1f6feb;
-  }
-}

styles/public/input.tsx

@@ -0,0 +1,31 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+export const input = css`
+  input,
+  textarea,
+  .ui.input input,
+  .ui.form input:not([type]),
+  .ui.form select,
+  .ui.form textarea,
+  .ui.form input[type="date"],
+  .ui.form input[type="datetime-local"],
+  .ui.form input[type="email"],
+  .ui.form input[type="file"],
+  .ui.form input[type="number"],
+  .ui.form input[type="password"],
+  .ui.form input[type="search"],
+  .ui.form input[type="tel"],
+  .ui.form input[type="text"],
+  .ui.form input[type="time"],
+  .ui.form input[type="url"] {
+    &:focus,
+    &:focus-visible {
+      background: ${themeVars.color.body} !important;
+      border-radius: ${otherThemeVars.border.radius};
+      border-color: ${themeVars.github.borderColor.accent.emphasis};
+      // 向内部添加一个 1px 的边框
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+      outline: none;
+    }
+  }
+`;

styles/public/modal.scss

@@ -1,45 +0,0 @@
-// Made by Luting ^-^
-.ui.modal {
-  border: 1.5px solid var(--color-light-border);
-
-  > .header {
-    background-color: var(--color-box-header);
-    border-bottom: 1.5px solid var(--color-light-border);
-  }
-
-  > .content,
-  form > .content {
-    background-color: var(--color-box-header);
-  }
-
-  > .actions,
-  .content + .actions,
-  .content + form > .actions {
-    background-color: var(--color-box-header);
-    border-top: 1.5px solid var(--color-light-border);
-  }
-
-  input,
-  textarea,
-  .ui.input input,
-  .ui.form input:not([type]),
-  .ui.form select,
-  .ui.form textarea,
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"],
-  .ui.selection.dropdown {
-    &:focus,
-    &:focus-visible {
-      background: #0d1117 !important;
-    }
-  }
-}

styles/public/modal.tsx

@@ -0,0 +1,24 @@
+import { css, themeVars } from "src/types/vars";
+
+export const modal = css`
+  .ui.modal {
+    border: 1.5px solid ${themeVars.color.light.border};
+
+    > .header {
+      background-color: ${themeVars.color.menu};
+      border-bottom: 1.5px solid ${themeVars.color.light.border};
+    }
+
+    > .content,
+    form > .content {
+      background-color: ${themeVars.color.menu};
+    }
+
+    > .actions,
+    .content + .actions,
+    .content + form > .actions {
+      background-color: ${themeVars.color.menu};
+      border-top: 1.5px solid ${themeVars.color.light.border};
+    }
+  }
+`;

styles/public/svg.scss

@@ -1,15 +0,0 @@
-.text {
-  .purple {
-    color: #ab7df8 !important;
-  }
-
-  .green {
-    color: #3fb950 !important;
-  }
-}
-
-.svg {
-  &.octicon-issue-closed {
-    color: #ab7df8 !important;
-  }
-}

styles/public/svg.tsx

@@ -0,0 +1,11 @@
+import { css, themeVars } from "src/types/vars";
+
+// 关闭工单按钮设置为紫色
+export const issueClosed = css`
+  .text.red .svg,
+  .text.red.svg {
+    &.octicon-issue-closed {
+      color: ${themeVars.github.fgColor.done} !important;
+    }
+  }
+`;

themes/dark.css.tsx

@@ -46,6 +46,9 @@ const github: GithubColor = {
     danger: {
       muted: "#f851491a",
     },
+    // done: {
+    //   emphasis: "#8957e5",
+    // },
     default: "#0d1117",
     inset: "#010409",
     muted: "#151b23",
@@ -54,6 +57,9 @@ const github: GithubColor = {
     },
   },
   borderColor: {
+    accent: {
+      emphasis: "#1f6feb",
+    },
     default: "#3d444d",
     muted: "#3d444db3",
     translucent: "#ffffff26",
@@ -96,6 +102,11 @@ const github: GithubColor = {
   shadow: {
     floating: "#01040966",
   },
+  overlay: {
+    backdrop: {
+      bgColor: "#21283066"
+    }
+  }
 };
 
 export default defineGithubTheme(github);