chroma变量和修复注册页导航栏

.github/release.md

@@ -10,3 +10,4 @@
 
 - 修复仓库页面与探索页面下仓库主题标签字重不一致的问题
 - 修复发布页面下的分支按钮点击时高度变化问题
+- 修复首页/登录页/注册页下导航栏右侧按钮样式问题 #10

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[]) {
+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/, ""));
-    return path.join("-");
+      value = path.join("-");
+    }
+    if (prefix) {
+      value = `${prefix}-${value}`;
     }
     return value;
+  };
 }
 
 const vars = {
@@ -36,22 +41,23 @@ const otherVars = {
 };
 
 const customVars = {
-  custom: {
+  cloneMenuWidth: "clone-menu-width",
-    cloneMenuWidth: "custom-clone-menu-width",
   explore: {
-      repolistColumns: "custom-explore-repolist-columns",
+    repolistColumns: "explore-repolist-columns",
-      userlistColumns: "custom-explore-userlist-columns",
+    userlistColumns: "explore-userlist-columns",
   },
-    userRepolistColumns: "custom-user-repolist-columns",
+  userRepolistColumns: "user-repolist-columns",
   org: {
-      repolistColumns: "custom-org-repolist-columns",
+    repolistColumns: "org-repolist-columns",
-      userlistColumns: "custom-org-userlist-columns",
+    userlistColumns: "org-userlist-columns",
-    },
   },
 };
 
-export const themeVars = createGlobalThemeContract(vars, varMapper);
+const chromaVars = {};
-export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
+
-export const customThemeVars = createGlobalThemeContract(customVars, varMapper);
+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";

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};

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 userRepoVar = fallbackVar(customThemeVars.userRepolistColumns, "2");
-const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2");
+const exploreRepoVar = fallbackVar(customThemeVars.explore.repolistColumns, "2");
-const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1");
+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 exploreUserVar = fallbackVar(customThemeVars.explore.userlistColumns, "3");
-const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2");
+const orgUserVar = fallbackVar(customThemeVars.org.userlistColumns, "2");
 
 // 用户列表
 export const userList = css`

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;
-    }
   }
 `;

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) {

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 */