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

2025-10-26 13:00:31 +00:00 · 2025-08-08 21:40:21 +08:00
parent 2bf3ef90f1
commit 2338383f76
7 changed files with 130 additions and 279 deletions
--- a/.github/release.md
+++ b/.github/release.md
@@ -9,4 +9,5 @@
 ## 🐞 Fix

 - 修复仓库页面与探索页面下仓库主题标签字重不一致的问题
- 修复发布页面下的分支按钮点击时高度变化问题
+- 修复发布页面下的分支按钮点击时高度变化问题
+- 修复首页/登录页/注册页下导航栏右侧按钮样式问题 #10
--- 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";
--- 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};
--- 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`
--- 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;
-    }
  }
 `;
--- 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) {
--- a/themes/chroma-dark.css
+++ 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 */