diff --git a/.github/release.md b/.github/release.md index 5736208..f34872d 100644 --- a/.github/release.md +++ b/.github/release.md @@ -9,4 +9,5 @@ ## 🐞 Fix - 修复仓库页面与探索页面下仓库主题标签字重不一致的问题 -- 修复发布页面下的分支按钮点击时高度变化问题 \ No newline at end of file +- 修复发布页面下的分支按钮点击时高度变化问题 +- 修复首页/登录页/注册页下导航栏右侧按钮样式问题 #10 \ No newline at end of file diff --git a/src/types/vars.ts b/src/types/vars.ts index 84f33a3..180ebeb 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -1,13 +1,18 @@ import { createGlobalThemeContract } from "@vanilla-extract/css"; import * as color from "./color"; -export function varMapper(value: string | null, path: string[]) { - if (value === null) { - path = path.filter(item => item !== "self"); - path = path.map(item => item.replace(/^num/, "")); - return path.join("-"); - } - return value; +function varMapper(prefix: string | null = null) { + return (value: string | null, path: string[]) => { + if (value === null) { + path = path.filter(item => item !== "self"); + path = path.map(item => item.replace(/^num/, "")); + value = path.join("-"); + } + if (prefix) { + value = `${prefix}-${value}`; + } + return value; + }; } const vars = { @@ -36,22 +41,23 @@ const otherVars = { }; const customVars = { - custom: { - cloneMenuWidth: "custom-clone-menu-width", - explore: { - repolistColumns: "custom-explore-repolist-columns", - userlistColumns: "custom-explore-userlist-columns", - }, - userRepolistColumns: "custom-user-repolist-columns", - org: { - repolistColumns: "custom-org-repolist-columns", - userlistColumns: "custom-org-userlist-columns", - }, + cloneMenuWidth: "clone-menu-width", + explore: { + repolistColumns: "explore-repolist-columns", + userlistColumns: "explore-userlist-columns", + }, + userRepolistColumns: "user-repolist-columns", + org: { + repolistColumns: "org-repolist-columns", + userlistColumns: "org-userlist-columns", }, }; -export const themeVars = createGlobalThemeContract(vars, varMapper); -export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper); -export const customThemeVars = createGlobalThemeContract(customVars, varMapper); +const chromaVars = {}; + +export const themeVars = createGlobalThemeContract(vars, varMapper()); +export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper()); +export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom")); +export const chromaThemeVars = createGlobalThemeContract(chromaVars, varMapper("chroma")); export { css } from "@linaria/core"; diff --git a/styles/components/clone.ts b/styles/components/clone.ts index e080b4a..41147a7 100644 --- a/styles/components/clone.ts +++ b/styles/components/clone.ts @@ -54,7 +54,7 @@ export const clone = css` font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); min-width: 150px; max-width: 400px; - width: ${customThemeVars.custom.cloneMenuWidth}; + width: ${customThemeVars.cloneMenuWidth}; &:hover { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; diff --git a/styles/components/explore.ts b/styles/components/explore.ts index c612b02..e87ea55 100644 --- a/styles/components/explore.ts +++ b/styles/components/explore.ts @@ -1,9 +1,9 @@ import { fallbackVar } from "src/functions"; import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; -const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2"); -const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2"); -const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1"); +const userRepoVar = fallbackVar(customThemeVars.userRepolistColumns, "2"); +const exploreRepoVar = fallbackVar(customThemeVars.explore.repolistColumns, "2"); +const orgRepoVar = fallbackVar(customThemeVars.org.repolistColumns, "1"); // 仓库列表 export const repoList = css` @@ -88,8 +88,8 @@ export const repoList = css` } `; -const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3"); -const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2"); +const exploreUserVar = fallbackVar(customThemeVars.explore.userlistColumns, "3"); +const orgUserVar = fallbackVar(customThemeVars.org.userlistColumns, "2"); // 用户列表 export const userList = css` diff --git a/styles/public/chroma.ts b/styles/public/chroma.ts index c1859ea..b01cf0b 100644 --- a/styles/public/chroma.ts +++ b/styles/public/chroma.ts @@ -2,278 +2,45 @@ import { css } from "src/types/vars"; // [TODO] 先重构为 Gitea 变量, 或者本主题的变量, 再建立 GitHub 的颜色映射 -export const chroma = css` +// 取自 https://github.com/go-gitea/gitea/blob/main/web_src/css/chroma/base.css +export const chromaBase = css` .chroma { - background-color: var(--color-code-bg); - + // LineTableTD .lntd { vertical-align: top; - border: 0; - margin: 0; padding: 0; + margin: 0; + border: 0; } - + // LineTable .lntable { border-spacing: 0; + padding: 0; + margin: 0; border: 0; width: auto; - margin: 0; - padding: 0; - display: block; overflow: auto; - } - - .hl { - width: 100%; display: block; } - + // LineHighlight + .hl { + display: block; + width: 100%; + } + // LineNumbersTable .lnt, + // LineNumbers .ln { margin-right: 0.4em; padding: 0 0.4em; } - + // GenericStrong .gs { font-weight: var(--font-weight-semibold); } - + // GenericUnderline .gl { text-decoration: underline; } - - .bp { - color: #fabd2f; - } - - .c, - .c1, - .ch, - .cm { - color: #777e94; - } - - .cp { - color: #8ec07c; - } - - .cpf { - color: #79c0ff; - } - - .cs { - color: #9075cd; - } - - .dl { - color: #79c0ff; - } - - .gd { - color: #fff; - background-color: #5f3737; - } - - .ge { - color: #ddee30; - } - - .gh { - color: #ffaa10; - } - - .gi { - color: #fff; - background-color: #3a523a; - } - - .go { - color: #777e94; - } - - .gp { - color: #ebdbb2; - } - - .gr { - color: #f43; - } - - .gs { - color: #ebdbb2; - } - - .gt { - color: #7ee787; - } - - .gu { - color: #a5d6ff; - } - - .il { - color: #79c0ff; - } - - .k { - color: #ff7b72; - } - - .kc { - color: #79c0ff; - } - - .kd { - color: #ff7b72; - } - - .kn { - color: #ff7b72; - } - - .kp { - color: #5f8700; - } - - .kr { - color: #7ee787; - } - - .kt { - color: #ff7b72; - } - - .m, - .mb, - .mf, - .mh, - .mi, - .mo { - color: #79c0ff; - } - - .n { - color: #c9d1d9; - } - - .na { - color: #d2a8ff; - } - - .nb { - color: #a5d6ff; - } - - .nc { - color: #e6edf3; - } - - .nd { - color: #79c0ff; - } - - .ne { - color: #7ee787; - } - - .nf, - .ni { - color: #d2a8ff; - } - - .nl { - color: #7ee787; - } - - .nn { - color: #e6edf3; - } - - .no { - color: #79c0ff; - } - - .nt { - color: #7ee787; - } - - .nv { - color: #ebdbb2; - } - - .nx { - color: #b6bac5; - } - - .o { - color: #7ee787; - } - - .ow { - color: #5f8700; - } - - .p { - color: #d2d4db; - } - - .s, - .s1, - .s2 { - color: #a5d6ff; - } - - .sa { - color: #79c0ff; - } - - .sb { - color: #a5d6ff; - } - - .sc { - color: #79c0ff; - } - - .sd { - color: #777e94; - } - - .se { - color: #7ee787; - } - - .sh { - color: #79c0ff; - } - - .si { - color: #ffaa10; - } - - .sr { - color: #9075cd; - } - - .ss { - color: #7ee787; - } - - .sx { - color: #ffaa10; - } - - .vc { - color: #7ee787; - } - - .vg, - .vi { - color: #ffaa10; - } - - .w { - color: #7f8699; - } } `; diff --git a/styles/public/navbar.ts b/styles/public/navbar.ts index 0274b0e..ab6034e 100644 --- a/styles/public/navbar.ts +++ b/styles/public/navbar.ts @@ -2,7 +2,8 @@ import { css, otherThemeVars, themeVars } from "src/types/vars"; export const navbarRight = css` #navbar { - .navbar-right { + // 进入用户页面后, 避免注册, 登录和首页等意外覆盖 + .navbar-right:has(.user-menu) { gap: 8px; // 右侧按钮, 但不包括头像 > .item:not(:last-child) { diff --git a/themes/chroma-dark.css b/themes/chroma-dark.css new file mode 100644 index 0000000..21010f6 --- /dev/null +++ b/themes/chroma-dark.css @@ -0,0 +1,76 @@ +/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */ +.chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */ +.chroma .c { color: #777e94; } /* Comment */ +.chroma .c1 { color: #777e94; } /* CommentSingle */ +.chroma .ch { color: #777e94; } /* CommentHashbang */ +.chroma .cm { color: #777e94; } /* CommentMultiline */ +.chroma .cp { color: #8ec07c; } /* CommentPreproc */ +.chroma .cpf { color: #649bc4; } /* CommentPreprocFile */ +.chroma .cs { color: #9075cd; } /* CommentSpecial */ +.chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */ +.chroma .fm {} /* NameFunctionMagic */ +.chroma .g {} /* Generic */ +.chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */ +.chroma .ge { color: #ddee30; } /* GenericEmph */ +.chroma .gh { color: #ffaa10; } /* GenericHeading */ +.chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */ +.chroma .gl {} /* GenericUnderline */ +.chroma .go { color: #777e94; } /* GenericOutput */ +.chroma .gp { color: #ebdbb2; } /* GenericPrompt */ +.chroma .gr { color: #ff4433; } /* GenericError */ +.chroma .gs { color: #ebdbb2; } /* GenericStrong */ +.chroma .gt { color: #ff7540; } /* GenericTraceback */ +.chroma .gu { color: #b8bb26; } /* GenericSubheading */ +.chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */ +.chroma .k { color: #ff7540; } /* Keyword */ +.chroma .kc { color: #649bc4; } /* KeywordConstant */ +.chroma .kd { color: #ff7540; } /* KeywordDeclaration */ +.chroma .kn { color: #ffaa10; } /* KeywordNamespace */ +.chroma .kp { color: #5f8700; } /* KeywordPseudo */ +.chroma .kr { color: #ff7540; } /* KeywordReserved */ +.chroma .kt { color: #ff7b72; } /* KeywordType */ +.chroma .l {} /* Literal */ +.chroma .ld {} /* LiteralDate */ +.chroma .m { color: #649bc4; } /* LiteralNumber */ +.chroma .mb { color: #649bc4; } /* LiteralNumberBin */ +.chroma .mf { color: #649bc4; } /* LiteralNumberFloat */ +.chroma .mh { color: #649bc4; } /* LiteralNumberHex */ +.chroma .mi { color: #649bc4; } /* LiteralNumberInteger */ +.chroma .mo { color: #649bc4; } /* LiteralNumberOct */ +.chroma .n { color: #c9d1d9; } /* Name */ +.chroma .na { color: #fabd2f; } /* NameAttribute */ +.chroma .nb { color: #fabd2f; } /* NameBuiltin */ +.chroma .nc { color: #ffaa10; } /* NameClass */ +.chroma .nd { color: #8ec07c; } /* NameDecorator */ +.chroma .ne { color: #ff7540; } /* NameException */ +.chroma .nf { color: #fabd2f; } /* NameFunction */ +.chroma .ni { color: #fabd2f; } /* NameEntity */ +.chroma .nl { color: #ff7540; } /* NameLabel */ +.chroma .nn { color: #c9d1d9; } /* NameNamespace */ +.chroma .no { color: #649bc4; } /* NameConstant */ +.chroma .nt { color: #ff7540; } /* NameTag */ +.chroma .nv { color: #ebdbb2; } /* NameVariable */ +.chroma .nx { color: #b6bac5; } /* NameOther */ +.chroma .o { color: #ff7540; } /* Operator */ +.chroma .ow { color: #5f8700; } /* OperatorWord */ +.chroma .p { color: #d2d4db; } /* Punctuation */ +.chroma .py {} /* NameProperty */ +.chroma .s { color: #b8bb26; } /* LiteralString */ +.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */ +.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */ +.chroma .sa { color: #ffaa10; } /* LiteralStringAffix */ +.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */ +.chroma .sc { color: #ffaa10; } /* LiteralStringChar */ +.chroma .sd { color: #b8bb26; } /* LiteralStringDoc */ +.chroma .se { color: #ff8540; } /* LiteralStringEscape */ +.chroma .sh { color: #b8bb26; } /* LiteralStringHeredoc */ +.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */ +.chroma .sr { color: #9075cd; } /* LiteralStringRegex */ +.chroma .ss { color: #ff8540; } /* LiteralStringSymbol */ +.chroma .sx { color: #ffaa10; } /* LiteralStringOther */ +.chroma .vc { color: #649bee; } /* NameVariableClass */ +.chroma .vg { color: #649bee; } /* NameVariableGlobal */ +.chroma .vi { color: #649bee; } /* NameVariableInstance */ +.chroma .vm {} /* NameVariableMagic */ +.chroma .w { color: #7f8699; } /* TextWhitespace */ +.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */ \ No newline at end of file