Skip to content

Commit 0c0a9a2

Browse files
lutingltlutinglt
committed
Extract color values from primer/primitives.
1 parent c28507d commit 0c0a9a2

10 files changed

Lines changed: 399 additions & 801 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@catppuccin/palette": "^1.8.0",
2424
"@eslint/js": "^10.0.1",
2525
"@linaria/core": "^7.0.0",
26+
"@primer/primitives": "^11.9.0",
2627
"@types/node": "^25.5.2",
2728
"@typescript/native-preview": "^7.0.0-dev.20260509.2",
2829
"@vanilla-extract/css": "^1.20.1",

‎src/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@ import selectors from "./selectors";
2121

2222
export { createTheme, defineTheme } from "./core";
2323
export { extractVarName, scaleColorLight } from "./functions";
24-
export { catppuccin2Syntax, catppuccin2ThemeColor, display2GitHubColor, github2ThemeColor } from "./palette";
24+
export {
25+
catppuccin2Syntax,
26+
catppuccin2ThemeColor,
27+
display2GitHubColor,
28+
github2ThemeColor,
29+
primer2GitHubColor,
30+
primer2GitHubSyntax,
31+
primer,
32+
} from "./palette";
2533
export type { DisplayColor, GitHubColor, GitHubSyntax, GiteaColor, ThemeColor } from "./palette";
2634
export { createThemeMetaInfo } from "./styles";
2735
export { chromaVars, customThemeVars, otherThemeVars, syntaxVars, themeVars } from "./types";

‎src/palette/github.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,9 +268,9 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
268268
floating: {
269269
small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
270270
},
271-
inset: `inset 0px 1px 0px 0px ${githubColor.shadow.inset}`,
271+
inset: githubColor.shadow.inset,
272272
resting: {
273-
small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`,
273+
small: githubColor.shadow.resting.small,
274274
// 此阴影用于工作流的流程图的节点悬浮效果, 该效果在 Gitea 中通过 svg, g 的 filter 实现, 而非 box-shadow
275275
medium: `drop-shadow(0 1px 1px ${githubColor.shadow.floating.small}) drop-shadow(0 3px 6px ${githubColor.shadow.resting.medium})`,
276276
},

‎src/palette/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@ export { display2GitHubColor, type DisplayColor } from "./display";
2323
export { gitea2ThemeVars, type GiteaColor } from "./gitea";
2424
export { github2ThemeColor, type GitHubColor } from "./github";
2525
export { githubSyntax2CodeMirror, prettylights2Chroma, type GitHubSyntax } from "./githubSyntax";
26+
export { default as primer, primer2GitHubColor, primer2GitHubSyntax } from "./primer";
2627
export { theme2ThemeVars, type ThemeColor } from "./theme";

‎src/palette/primer.ts‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
/*!
2+
* Copyright (c) https://github.com/lutinglt
3+
*
4+
* See the NOTICE file distributed with this work for additional
5+
* information regarding copyright ownership.
6+
*
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
*/
19+
20+
import type { GitHubColor } from "./github";
21+
import type { CodeMirrorColor, GitHubSyntax, PrettylightsColor } from "./githubSyntax";
22+
23+
type PrimerTokens = Record<string, { $value: string | { color: string } }>;
24+
25+
function primerTokensGet(primerTokens: PrimerTokens): (key: string) => string {
26+
return (key: string) => {
27+
const entry = primerTokens[key];
28+
if (typeof entry.$value === "object") return entry.$value.color;
29+
return entry.$value;
30+
};
31+
}
32+
33+
export function primer2GitHubColor(primerTokens: PrimerTokens, isDarkTheme: boolean = false): GitHubColor {
34+
// 安全获取色值: 从 $value 和 alpha 组合成最终 CSS 色值
35+
const $ = primerTokensGet(primerTokens);
36+
37+
return {
38+
isDarkTheme,
39+
avatar: {
40+
bgColor: $("avatar-bgColor"),
41+
borderColor: $("avatar-borderColor"),
42+
},
43+
display: {
44+
blue: { fgColor: $("display-blue-fgColor") },
45+
brown: { fgColor: $("display-brown-fgColor") },
46+
cyan: { fgColor: $("display-cyan-fgColor") },
47+
indigo: { fgColor: $("display-indigo-fgColor") },
48+
lemon: { fgColor: $("display-lemon-fgColor") },
49+
olive: { fgColor: $("display-olive-fgColor") },
50+
teal: { fgColor: $("display-teal-fgColor") },
51+
},
52+
diffBlob: {
53+
addtionNum: { bgColor: $("diffBlob-additionNum-bgColor") },
54+
addtionWord: { bgColor: $("diffBlob-additionWord-bgColor") },
55+
deletionNum: { bgColor: $("diffBlob-deletionNum-bgColor") },
56+
deletionWord: { bgColor: $("diffBlob-deletionWord-bgColor") },
57+
hunkNum: { bgColor: { rest: $("diffBlob-hunkNum-bgColor-rest") } },
58+
},
59+
fgColor: {
60+
accent: $("fgColor-accent"),
61+
attention: $("fgColor-attention"),
62+
danger: $("fgColor-danger"),
63+
default: $("fgColor-default"),
64+
disabled: $("fgColor-disabled"),
65+
done: $("fgColor-done"),
66+
neutral: $("fgColor-neutral"),
67+
severe: $("fgColor-severe"),
68+
sponsors: $("fgColor-sponsors"),
69+
success: $("fgColor-success"),
70+
black: $("fgColor-black"),
71+
white: $("fgColor-white"),
72+
muted: $("fgColor-muted"),
73+
onEmphasis: $("fgColor-onEmphasis"),
74+
},
75+
bgColor: {
76+
accent: {
77+
emphasis: $("bgColor-accent-emphasis"),
78+
muted: $("bgColor-accent-muted"),
79+
},
80+
attention: {
81+
emphasis: $("bgColor-attention-emphasis"),
82+
muted: $("bgColor-attention-muted"),
83+
},
84+
emphasis: $("bgColor-emphasis"),
85+
success: {
86+
emphasis: $("bgColor-success-emphasis"),
87+
muted: $("bgColor-success-muted"),
88+
},
89+
danger: {
90+
emphasis: $("bgColor-danger-emphasis"),
91+
muted: $("bgColor-danger-muted"),
92+
},
93+
done: { emphasis: $("bgColor-done-emphasis") },
94+
default: $("bgColor-default"),
95+
inset: $("bgColor-inset"),
96+
muted: $("bgColor-muted"),
97+
neutral: {
98+
muted: $("bgColor-neutral-muted"),
99+
emphasis: $("bgColor-neutral-emphasis"),
100+
},
101+
},
102+
borderColor: {
103+
accent: { emphasis: $("borderColor-accent-emphasis") },
104+
attention: { emphasis: $("borderColor-attention-emphasis") },
105+
default: $("borderColor-default"),
106+
success: { emphasis: $("borderColor-success-emphasis") },
107+
done: { emphasis: $("borderColor-done-emphasis") },
108+
muted: $("borderColor-muted"),
109+
translucent: $("borderColor-translucent"),
110+
emphasis: $("borderColor-emphasis"),
111+
},
112+
button: {
113+
primary: {
114+
fgColor: {
115+
accent: $("fgColor-success"), // 此为主题自定义值, 特殊绿色按钮颜色
116+
rest: $("button-primary-fgColor-rest"),
117+
},
118+
bgColor: {
119+
rest: $("button-primary-bgColor-rest"),
120+
hover: $("button-primary-bgColor-hover"),
121+
active: $("button-primary-bgColor-active"),
122+
},
123+
},
124+
danger: {
125+
fgColor: {
126+
rest: $("button-danger-fgColor-rest"),
127+
hover: $("button-danger-fgColor-hover"),
128+
},
129+
bgColor: {
130+
hover: $("button-danger-bgColor-hover"),
131+
active: $("button-danger-bgColor-active"),
132+
},
133+
},
134+
star: { iconColor: $("button-star-iconColor") },
135+
invisible: { iconColor: { rest: $("button-invisible-iconColor-rest") } },
136+
},
137+
control: {
138+
bgColor: {
139+
active: $("control-bgColor-active"),
140+
hover: $("control-bgColor-hover"),
141+
rest: $("control-bgColor-rest"),
142+
},
143+
transparent: {
144+
bgColor: {
145+
active: $("control-transparent-bgColor-active"),
146+
hover: $("control-transparent-bgColor-hover"),
147+
selected: $("control-transparent-bgColor-selected"),
148+
},
149+
},
150+
danger: { bgColor: { active: $("control-danger-bgColor-active") } },
151+
},
152+
controlTrack: { bgColor: { rest: $("controlTrack-bgColor-rest") } },
153+
controlKnob: { bgColor: { rest: $("controlKnob-bgColor-rest") } },
154+
shadow: {
155+
floating: { small: isDarkTheme ? "#01040966" : "#25292e0a" }, // 特殊颜色, 因 Gitea 实现无法使用原始值, 提取对应值交给后续生成
156+
inset: $("shadow-inset"),
157+
resting: {
158+
small: $("shadow-resting-small"),
159+
medium: isDarkTheme ? "#010409cc" : "#25292e1f", // 特殊颜色, 因 Gitea 实现无法使用原始值, 提取对应值交给后续生成
160+
},
161+
},
162+
overlay: {
163+
backdrop: { bgColor: $("overlay-backdrop-bgColor") },
164+
bgColor: $("overlay-bgColor"),
165+
},
166+
underlineNav: { borderColor: { active: $("underlineNav-borderColor-active") } },
167+
contribution: {
168+
default: {
169+
bgColor: {
170+
num0: $("contribution-default-bgColor-0"),
171+
num1: $("contribution-default-bgColor-1"),
172+
num2: $("contribution-default-bgColor-2"),
173+
num3: $("contribution-default-bgColor-3"),
174+
num4: $("contribution-default-bgColor-4"),
175+
},
176+
borderColor: { num0: $("contribution-default-borderColor-0") },
177+
},
178+
},
179+
};
180+
}
181+
export function primer2GitHubSyntax(primerTokens: PrimerTokens): GitHubSyntax {
182+
const $ = primerTokensGet(primerTokens);
183+
184+
const prettyLights: PrettylightsColor = {
185+
syntax: {
186+
brackethighlighter: {
187+
angle: $("color-prettylights-syntax-brackethighlighter-angle"),
188+
unmatched: $("color-prettylights-syntax-brackethighlighter-unmatched"),
189+
},
190+
carriage: {
191+
return: {
192+
bg: $("color-prettylights-syntax-carriage-return-bg"),
193+
text: $("color-prettylights-syntax-carriage-return-text"),
194+
},
195+
},
196+
comment: $("color-prettylights-syntax-comment"),
197+
constant: $("color-prettylights-syntax-constant"),
198+
constantOtherReferenceLink: $("color-prettylights-syntax-constant-other-reference-link"),
199+
entity: $("color-prettylights-syntax-entity"),
200+
entityTag: $("color-prettylights-syntax-entity-tag"),
201+
invalid: {
202+
illegal: {
203+
bg: $("color-prettylights-syntax-invalid-illegal-bg"),
204+
text: $("color-prettylights-syntax-invalid-illegal-text"),
205+
},
206+
},
207+
keyword: $("color-prettylights-syntax-keyword"),
208+
markup: {
209+
bold: $("color-prettylights-syntax-markup-bold"),
210+
changed: {
211+
bg: $("color-prettylights-syntax-markup-changed-bg"),
212+
text: $("color-prettylights-syntax-markup-changed-text"),
213+
},
214+
deleted: {
215+
bg: $("color-prettylights-syntax-markup-deleted-bg"),
216+
text: $("color-prettylights-syntax-markup-deleted-text"),
217+
},
218+
heading: $("color-prettylights-syntax-markup-heading"),
219+
ignored: {
220+
bg: $("color-prettylights-syntax-markup-ignored-bg"),
221+
text: $("color-prettylights-syntax-markup-ignored-text"),
222+
},
223+
inserted: {
224+
bg: $("color-prettylights-syntax-markup-inserted-bg"),
225+
text: $("color-prettylights-syntax-markup-inserted-text"),
226+
},
227+
italic: $("color-prettylights-syntax-markup-italic"),
228+
list: $("color-prettylights-syntax-markup-list"),
229+
},
230+
metaDiffRange: $("color-prettylights-syntax-meta-diff-range"),
231+
storageModifierImport: $("color-prettylights-syntax-storage-modifier-import"),
232+
string: $("color-prettylights-syntax-string"),
233+
stringRegexp: $("color-prettylights-syntax-string-regexp"),
234+
sublimelinterGutterMark: $("color-prettylights-syntax-sublimelinter-gutter-mark"),
235+
variable: $("color-prettylights-syntax-variable"),
236+
},
237+
};
238+
239+
const codeMirror: CodeMirrorColor = {
240+
syntax: {
241+
fgColor: {
242+
comment: $("codeMirror-syntax-fgColor-comment"),
243+
constant: $("codeMirror-syntax-fgColor-constant"),
244+
entity: $("codeMirror-syntax-fgColor-entity"),
245+
keyword: $("codeMirror-syntax-fgColor-keyword"),
246+
storage: $("codeMirror-syntax-fgColor-storage"),
247+
string: $("codeMirror-syntax-fgColor-string"),
248+
support: $("codeMirror-syntax-fgColor-support"),
249+
variable: $("codeMirror-syntax-fgColor-variable"),
250+
},
251+
},
252+
matchingBracket: {
253+
fgColor: $("codeMirror-matchingBracket-fgColor"),
254+
},
255+
};
256+
257+
return { prettyLights, codeMirror };
258+
}
259+
260+
import darkColorblind from "@primer/primitives/dist/styleLint/functional/themes/dark-colorblind.json" with { type: "json" };
261+
import darkDimmed from "@primer/primitives/dist/styleLint/functional/themes/dark-dimmed.json" with { type: "json" };
262+
import darkTritanopia from "@primer/primitives/dist/styleLint/functional/themes/dark-tritanopia.json" with { type: "json" };
263+
import dark from "@primer/primitives/dist/styleLint/functional/themes/dark.json" with { type: "json" };
264+
import lightColorblind from "@primer/primitives/dist/styleLint/functional/themes/light-colorblind.json" with { type: "json" };
265+
import lightTritanopia from "@primer/primitives/dist/styleLint/functional/themes/light-tritanopia.json" with { type: "json" };
266+
import light from "@primer/primitives/dist/styleLint/functional/themes/light.json" with { type: "json" };
267+
268+
export default {
269+
dark,
270+
darkColorblind,
271+
darkDimmed,
272+
darkTritanopia,
273+
light,
274+
lightColorblind,
275+
lightTritanopia,
276+
};

0 commit comments

Comments
 (0)