diff --git a/.github/release.md b/.github/release.md index 97c048f..78d0bea 100644 --- a/.github/release.md +++ b/.github/release.md @@ -32,6 +32,7 @@ - 仓库标签页样式和颜色同步 - 仓库发布页样式和颜色同步 - 关注按钮样式同步 +- Issue 评论菜单删除按钮样式同步 ## 🎈 Perf diff --git a/src/core/color.ts b/src/core/color.ts index ef2a105..0a59e0c 100644 --- a/src/core/color.ts +++ b/src/core/color.ts @@ -161,7 +161,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { const named: Named = { red: { self: themeColor.red, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 10) : scaleColorLight(themeColor.red, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25), dark: { num1: scaleColorLight(themeColor.red, -10), num2: scaleColorLight(themeColor.red, -20), @@ -176,7 +176,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, orange: { self: themeColor.orange, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 10) : scaleColorLight(themeColor.orange, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25), dark: { num1: scaleColorLight(themeColor.orange, -10), num2: scaleColorLight(themeColor.orange, -20), @@ -191,7 +191,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, yellow: { self: themeColor.yellow, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 10) : scaleColorLight(themeColor.yellow, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25), dark: { num1: scaleColorLight(themeColor.yellow, -10), num2: scaleColorLight(themeColor.yellow, -20), @@ -206,7 +206,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, olive: { self: themeColor.olive, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 10) : scaleColorLight(themeColor.olive, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25), dark: { num1: scaleColorLight(themeColor.olive, -10), num2: scaleColorLight(themeColor.olive, -20), @@ -214,7 +214,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, green: { self: themeColor.green, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 10) : scaleColorLight(themeColor.green, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25), dark: { num1: scaleColorLight(themeColor.green, -10), num2: scaleColorLight(themeColor.green, -20), @@ -229,7 +229,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, teal: { self: themeColor.teal, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 10) : scaleColorLight(themeColor.teal, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25), dark: { num1: scaleColorLight(themeColor.teal, -10), num2: scaleColorLight(themeColor.teal, -20), @@ -237,7 +237,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, blue: { self: themeColor.blue, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 10) : scaleColorLight(themeColor.blue, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25), dark: { num1: scaleColorLight(themeColor.blue, -10), num2: scaleColorLight(themeColor.blue, -20), @@ -245,7 +245,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, violet: { self: themeColor.violet, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 10) : scaleColorLight(themeColor.violet, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25), dark: { num1: scaleColorLight(themeColor.violet, -10), num2: scaleColorLight(themeColor.violet, -20), @@ -253,7 +253,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, purple: { self: themeColor.purple, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 10) : scaleColorLight(themeColor.purple, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25), dark: { num1: scaleColorLight(themeColor.purple, -10), num2: scaleColorLight(themeColor.purple, -20), @@ -261,7 +261,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, pink: { self: themeColor.pink, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 10) : scaleColorLight(themeColor.pink, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25), dark: { num1: scaleColorLight(themeColor.pink, -10), num2: scaleColorLight(themeColor.pink, -20), @@ -269,7 +269,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, brown: { self: themeColor.brown, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 10) : scaleColorLight(themeColor.brown, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25), dark: { num1: scaleColorLight(themeColor.brown, -10), num2: scaleColorLight(themeColor.brown, -20), @@ -277,7 +277,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, black: { self: themeColor.black, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 10) : scaleColorLight(themeColor.black, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25), dark: { num1: scaleColorLight(themeColor.black, -10), num2: scaleColorLight(themeColor.black, -20), @@ -285,7 +285,7 @@ export function defineTheme(themeColor: ThemeColor): Theme { }, grey: { self: themeColor.grey, - light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 10) : scaleColorLight(themeColor.grey, 25), + light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25), }, gold: themeColor.gold, white: themeColor.white, diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 11f6b95..fb0e097 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -165,6 +165,7 @@ export const github = { * @input `inputAction` 输入框动作按钮的悬停背景颜色 * @dropdown `dropdown` 下拉框子项的悬停背景颜色 * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 + * @menu `menu` 菜单项的悬停背景颜色 */ hover: null, }, diff --git a/styles/components/dashboard.tsx b/styles/components/dashboard.tsx index 3807fc4..0493e1a 100644 --- a/styles/components/dashboard.tsx +++ b/styles/components/dashboard.tsx @@ -2,9 +2,14 @@ import { css } from "src/types/vars"; export const dashboard = css` .page-content.dashboard { + // 动态的右侧 svg 图标 .flex-item .flex-item-trailing svg { height: 20px; width: 20px; } + // 仓库列表的仓库/组织切换按钮 + .ui.two.item.menu { + background-color: unset; + } } `; diff --git a/styles/components/issue.tsx b/styles/components/issue.tsx index 951e69a..03b87b3 100644 --- a/styles/components/issue.tsx +++ b/styles/components/issue.tsx @@ -93,6 +93,18 @@ export const comment = css` box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important; } } + .comment-header-right { + .context-dropdown { + // 评论菜单的删除按钮 + .menu .item.delete-comment { + color: ${themeVars.color.red.self}; + &:hover { + background-color: ${themeVars.color.red.badge.bg} !important; + color: ${themeVars.color.red.light}; + } + } + } + } } `; diff --git a/styles/public/menu.tsx b/styles/public/menu.tsx index d4b8127..81c3769 100644 --- a/styles/public/menu.tsx +++ b/styles/public/menu.tsx @@ -108,3 +108,20 @@ export const verticalMenu = css` } } `; + +export const menu = css` + // 菜单默认悬浮色更改 + .ui.menu a.item, + .ui.secondary.menu .dropdown.item { + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover}; + } + } + // 一些水平小型菜单的颜色更改 + .small-menu-items .item { + background-color: ${themeVars.color.body} !important; + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover} !important; + } + } +`; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index c4a0b90..2d23458 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -33,108 +33,40 @@ const github: GithubColor = { muted: "#9198a1", }, bgColor: { - accent: { - emphasis: "#1f6feb", - muted: "#388bfd1a", - }, - attention: { - muted: "#bb800926", - }, - success: { - emphasis: "#238636", - muted: "#2ea04326", - }, - danger: { - muted: "#f851491a", - }, - done: { - emphasis: "#8957e5", - }, + accent: { emphasis: "#1f6feb", muted: "#388bfd1a" }, + attention: { muted: "#bb800926" }, + success: { emphasis: "#238636", muted: "#2ea04326" }, + danger: { muted: "#f851491a" }, + done: { emphasis: "#8957e5" }, default: "#0d1117", inset: "#010409", muted: "#151b23", - neutral: { - muted: "#656c7633", - }, + neutral: { muted: "#656c7633" }, }, borderColor: { - accent: { - emphasis: "#1f6feb", - }, + accent: { emphasis: "#1f6feb" }, default: "#3d444d", - attention: { - emphasis: "#9e6a03", - }, - success: { - emphasis: "#238636", - }, - done: { - emphasis: "#8957e5", - }, + attention: { emphasis: "#9e6a03" }, + success: { emphasis: "#238636" }, + done: { emphasis: "#8957e5" }, muted: "#3d444db3", translucent: "#ffffff26", }, button: { - primary: { - fgColor: { - accent: "#39d353", - rest: "#ffffff", - }, - bgColor: { - rest: "#238636", - hover: "#29903b", - }, - }, - danger: { - fgColor: { - rest: "#fa5e55", - hover: "#ffffff", - }, - bgColor: { - hover: "#b62324", - }, - }, + primary: { fgColor: { accent: "#39d353", rest: "#ffffff" }, bgColor: { rest: "#238636", hover: "#29903b" } }, + danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, }, control: { - bgColor: { - active: "#2a313c", - hover: "#262c36", - rest: "#212830", - }, - transparent: { - bgColor: { - active: "#656c7640", - hover: "#656c7633", - selected: "#656c761a", - }, - }, - }, - shadow: { - floating: "#01040966", - }, - overlay: { - backdrop: { - bgColor: "#21283066", - }, - }, - underlineNav: { - borderColor: { - active: "#f78166", - }, + bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, + transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, }, + shadow: { floating: "#01040966" }, + overlay: { backdrop: { bgColor: "#21283066" } }, + underlineNav: { borderColor: { active: "#f78166" } }, contribution: { default: { - bgColor: { - num0: "#151b23", - num1: "#033a16", - num2: "#196c2e", - num3: "#2ea043", - num4: "#56d364", - num5: "#7ee787", - }, - borderColor: { - num0: "#0104090d", - }, + bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364", num5: "#7ee787" }, + borderColor: { num0: "#0104090d" }, }, }, };