diff --git a/.github/release.md b/.github/release.md index b51d2e2..9524021 100644 --- a/.github/release.md +++ b/.github/release.md @@ -16,12 +16,14 @@ - 普通按钮激活背景色同步 - 主色调按钮边框色同步 - 设置界面右上角小按钮样式同步 +- 弹窗背景色和叠加背景色同步 ## 🎈 Perf - Actions 日志页面标题间隔优化 - 管理员后台按钮样式优化 - 信息提示颜色优化 +- 修复意外点亮其他页面关闭图标的颜色 ## 🐞 Fix diff --git a/src/core/github.ts b/src/core/github.ts index 1eea292..937bcb9 100644 --- a/src/core/github.ts +++ b/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: { diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 522e5aa..25737bb 100644 --- a/src/types/color/github.ts +++ b/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: { diff --git a/src/types/color/other.ts b/src/types/color/other.ts index 963af46..de94650 100644 --- a/src/types/color/other.ts +++ b/src/types/color/other.ts @@ -149,6 +149,6 @@ export const other = { /** 背景色 */ bg: null, }, - /** 不知道啥玩意 dimmer 的背景色 */ + /** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */ overlayBackdrop: "color-overlay-backdrop", }; diff --git a/styles/components.scss b/styles/components.scss deleted file mode 100644 index 849928d..0000000 --- a/styles/components.scss +++ /dev/null @@ -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"; // 对比 diff --git a/styles/public.scss b/styles/public.scss deleted file mode 100644 index 7c567c2..0000000 --- a/styles/public.scss +++ /dev/null @@ -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"; // 圆角 diff --git a/styles/public/index.tsx b/styles/public/index.tsx index e905ffd..53ff0dc 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -1,2 +1,5 @@ -import "./button"; -import "./chroma"; +import "./button"; // 按钮 +import "./chroma"; // 代码高亮 +import "./input"; // 输入框 +import "./modal"; // 弹窗 +import "./svg"; // svg 图标 diff --git a/styles/public/input.scss b/styles/public/input.scss deleted file mode 100644 index c147530..0000000 --- a/styles/public/input.scss +++ /dev/null @@ -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; - } -} diff --git a/styles/public/input.tsx b/styles/public/input.tsx new file mode 100644 index 0000000..7afc762 --- /dev/null +++ b/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; + } + } +`; diff --git a/styles/public/modal.scss b/styles/public/modal.scss deleted file mode 100644 index f719cfd..0000000 --- a/styles/public/modal.scss +++ /dev/null @@ -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; - } - } -} diff --git a/styles/public/modal.tsx b/styles/public/modal.tsx new file mode 100644 index 0000000..be4db29 --- /dev/null +++ b/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}; + } + } +`; diff --git a/styles/public/svg.scss b/styles/public/svg.scss deleted file mode 100644 index 54a969f..0000000 --- a/styles/public/svg.scss +++ /dev/null @@ -1,15 +0,0 @@ -.text { - .purple { - color: #ab7df8 !important; - } - - .green { - color: #3fb950 !important; - } -} - -.svg { - &.octicon-issue-closed { - color: #ab7df8 !important; - } -} diff --git a/styles/public/svg.tsx b/styles/public/svg.tsx new file mode 100644 index 0000000..47b38ef --- /dev/null +++ b/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; + } + } +`; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 6f804b5..5575c69 100644 --- a/themes/dark.css.tsx +++ b/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);