feat(chroma): 代码高亮重构 (#9)

* feat(chroma): 代码高亮重构

* todo

* release 亮色适配

* 发布页分支按钮高度修正

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

* chroma 重构适配亮色

---------

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>
This commit is contained in:
鲁汀
2025-08-10 14:06:08 +08:00
committed by GitHub
parent 065d7893d8
commit dca1c34518
18 changed files with 835 additions and 295 deletions

View File

@@ -1,7 +1,8 @@
import { rgba, saturate } from "polished";
import { scaleColorLight } from "src/functions";
import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
import type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
import { themeVars } from "src/types/vars";
import { prettylightsDark, prettylightsLight } from "./prettylights";
import type { Theme } from "./theme";
type ThemeColor = {
@@ -57,7 +58,7 @@ type ThemeColor = {
/** 定义颜色, 用于生成颜色主题
* @example
* 文件名: "dark.css.tsx"
* 文件名: "dark.css.ts"
* import type { Console, Diff, Other } from "src/types";
* import { defineTheme, themeVars } from "src";
*
@@ -70,7 +71,6 @@ type ThemeColor = {
* ...
* }
* ...
* // 会经过 lightningcss 打包处理生成最终的 CSS
* export default defineTheme({
* isDarkTheme: true,
* primary: "#0969da",
@@ -80,7 +80,7 @@ type ThemeColor = {
* other,
* })
*/
export function defineTheme(themeColor: ThemeColor): Theme {
export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme {
const brightDir = themeColor.isDarkTheme ? -1 : 1;
const primary: Primary = {
@@ -341,6 +341,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
return {
isDarkTheme: themeColor.isDarkTheme.toString(),
chroma: chroma || (themeColor.isDarkTheme ? prettylightsDark : prettylightsLight),
color: {
primary,
secondary,

262
src/core/prettylights.ts Normal file
View File

@@ -0,0 +1,262 @@
import type { Chroma } from "src/types";
export type prettylightsColor = {
syntax: {
brackethighlighter: {
angle: string;
unmatched: string;
};
carriage: {
return: {
bg: string;
text: string;
};
};
comment: string;
constant: string;
constantOtherReferenceLink: string;
entity: string;
entityTag: string;
invalid: {
illegal: {
bg: string;
text: string;
};
};
keyword: string;
markup: {
bold: string;
changed: {
bg: string;
text: string;
};
deleted: {
bg: string;
text: string;
};
heading: string;
ignored: {
bg: string;
text: string;
};
inserted: {
bg: string;
text: string;
};
italic: string;
list: string;
};
metaDiffRange: string;
storageModifierImport: string;
string: string;
stringRegexp: string;
sublimelinterGutterMark: string;
variable: string;
};
};
export function prettylights2Chroma(prettylights: prettylightsColor): Chroma {
return {
textWhiteSpace: prettylights.syntax.brackethighlighter.unmatched,
err: prettylights.syntax.brackethighlighter.unmatched,
keyword: {
self: prettylights.syntax.keyword,
constant: prettylights.syntax.constant,
declaration: prettylights.syntax.keyword,
namespace: prettylights.syntax.keyword,
pseudo: prettylights.syntax.constant,
reserved: prettylights.syntax.keyword,
type: prettylights.syntax.markup.bold,
},
name: {
self: prettylights.syntax.markup.bold,
attribute: prettylights.syntax.entityTag,
builtin: prettylights.syntax.entity,
builtinPseudo: prettylights.syntax.markup.bold,
class: prettylights.syntax.variable,
constant: prettylights.syntax.variable,
decorator: prettylights.syntax.entity,
entity: prettylights.syntax.variable,
exception: prettylights.syntax.variable,
function: prettylights.syntax.entity,
functionMagic: prettylights.syntax.entity,
label: prettylights.syntax.constant,
other: prettylights.syntax.markup.bold,
namespace: prettylights.syntax.markup.bold,
property: prettylights.syntax.constant,
tag: prettylights.syntax.entityTag,
variable: prettylights.syntax.constant,
variableClass: prettylights.syntax.constant,
variableGlobal: prettylights.syntax.constant,
variableInstance: prettylights.syntax.constant,
variableMagic: prettylights.syntax.markup.bold,
},
literal: {
self: prettylights.syntax.string,
date: prettylights.syntax.constant,
},
string: {
self: prettylights.syntax.string,
affix: prettylights.syntax.string,
backtick: prettylights.syntax.string,
char: prettylights.syntax.string,
delimiter: prettylights.syntax.string,
doc: prettylights.syntax.comment,
double: prettylights.syntax.string,
escape: prettylights.syntax.string,
heredoc: prettylights.syntax.string,
interpol: prettylights.syntax.string,
other: prettylights.syntax.string,
regex: prettylights.syntax.stringRegexp,
single: prettylights.syntax.string,
symbol: prettylights.syntax.string,
},
number: {
self: prettylights.syntax.constant,
bin: prettylights.syntax.constant,
float: prettylights.syntax.constant,
hex: prettylights.syntax.constant,
integer: prettylights.syntax.constant,
integerLong: prettylights.syntax.constant,
oct: prettylights.syntax.constant,
},
operator: {
self: prettylights.syntax.constant,
word: prettylights.syntax.constant,
},
punctuation: prettylights.syntax.markup.bold,
comment: {
self: prettylights.syntax.comment,
hashbang: prettylights.syntax.comment,
multiline: prettylights.syntax.comment,
preproc: prettylights.syntax.constant,
preprocFile: prettylights.syntax.constant,
single: prettylights.syntax.comment,
special: prettylights.syntax.comment,
},
generic: {
self: prettylights.syntax.markup.bold,
deleted: prettylights.syntax.markup.deleted.text,
emph: prettylights.syntax.markup.italic,
error: prettylights.syntax.invalid.illegal.text,
heading: prettylights.syntax.markup.heading,
inserted: prettylights.syntax.markup.inserted.text,
output: prettylights.syntax.markup.bold,
prompt: prettylights.syntax.markup.bold,
strong: prettylights.syntax.markup.bold,
subheading: prettylights.syntax.markup.heading,
traceback: prettylights.syntax.invalid.illegal.text,
underline: prettylights.syntax.markup.italic,
},
};
}
export const prettylightsDark = prettylights2Chroma({
syntax: {
brackethighlighter: {
angle: "#9198a1",
unmatched: "#f85149",
},
carriage: {
return: {
bg: "#b62324",
text: "#f0f6fc",
},
},
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#7ee787",
invalid: {
illegal: {
bg: "#8e1519",
text: "#f0f6fc",
},
},
keyword: "#ff7b72",
markup: {
bold: "#f0f6fc",
changed: {
bg: "#5a1e02",
text: "#ffdfb6",
},
deleted: {
bg: "#67060c",
text: "#ffdcd7",
},
heading: "#1f6feb",
ignored: {
bg: "#1158c7",
text: "#f0f6fc",
},
inserted: {
bg: "#033a16",
text: "#aff5b4",
},
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#7ee787",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
}
})
export const prettylightsLight = prettylights2Chroma({
syntax: {
brackethighlighter: {
angle: "#59636e",
unmatched: "#82071e",
},
carriage: {
return: {
bg: "#cf222e",
text: "#f6f8fa",
},
},
comment: "#59636e",
constant: "#0550ae",
constantOtherReferenceLink: "#0a3069",
entity: "#6639ba",
entityTag: "#0550ae",
invalid: {
illegal: {
bg: "#82071e",
text: "#f6f8fa",
},
},
keyword: "#cf222e",
markup: {
bold: "#1f2328",
changed: {
bg: "#ffd8b5",
text: "#953800",
},
deleted: {
bg: "#ffebe9",
text: "#82071e",
},
heading: "#0550ae",
ignored: {
bg: "#0550ae",
text: "#d1d9e0",
},
inserted: {
bg: "#dafbe1",
text: "#116329",
},
italic: "#1f2328",
list: "#3b2300",
},
metaDiffRange: "#8250df",
storageModifierImport: "#1f2328",
string: "#0a3069",
stringRegexp: "#116329",
sublimelinterGutterMark: "#818b98",
variable: "#953800",
}
})

View File

@@ -4,15 +4,6 @@ import type { MapLeafNodes, WithOptionalLayer } from "./types";
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
function stringToBoolean(str: string, name: string): boolean {
try {
return JSON.parse(str);
} catch (error) {
console.error(error);
throw new Error(`Invalid boolean value(${name}): ${str}`);
}
}
export const overlayAppearDown = "overlay-appear-down";
export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`;
export const overlayAppearUp = "overlay-appear-up";
@@ -42,7 +33,7 @@ const emoji = `
`;
export function createTheme(theme: Theme): void {
const isDarkTheme = stringToBoolean(theme.isDarkTheme, "isDarkTheme");
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
if (isDarkTheme) {
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
}

255
src/types/color/chroma.ts Normal file
View File

@@ -0,0 +1,255 @@
// 注释来自 AI
export const chroma = {
textWhiteSpace: "text-white-space",
err: null,
keyword: {
/** 所有关键字
* @example class function var if else return
*/
self: null,
/** 常量关键字
* @example true false null
*/
constant: null,
/** 声明关键字
* @example var let const
*/
declaration: null,
/** 命名空间关键字
* @example package import export
*/
namespace: null,
/** 伪关键字
* @example this super __init__
*/
pseudo: null,
/** 保留关键字
* @example yield await goto
*/
reserved: null,
/** 类型关键字
* @example int float string bool
*/
type: null,
},
name: {
/** 通用标识符 */
self: null,
/** 属性名
* @example obj.foo HTML/XML 属性名 id="foo"
*/
attribute: null,
/** 内置函数/对象
* @example Math.PI Math.max
*/
builtin: null,
/** 内置伪标识符
* @example this super self
*/
builtinPseudo: null,
/** 类名 */
class: null,
/** 常量名 */
constant: null,
/** 装饰器 */
decorator: null,
/** 实体名
* @example HTML实体名 &lt; &gt; &amp;
*/
entity: null,
/** 异常类名 */
exception: null,
/** 函数名 */
function: null,
/** 魔术方法名
* @example __init__ __str__
*/
functionMagic: null,
/** 对象属性 */
property: null,
/** 标签名
* @example 跳转标签
*/
label: null,
/** 命名空间 */
namespace: null,
/** 其他未归类的标识符 */
other: null,
/** 标签名
* @example 跳转标签
*/
tag: null,
/** 变量名 */
variable: null,
/** 类变量 */
variableClass: null,
/** 全局变量 */
variableGlobal: null,
/** 实例变量 */
variableInstance: null,
/** 魔术变量
* @example __name__ __doc__
*/
variableMagic: null,
},
literal: {
/** 通用字面量 */
self: null,
/** 日期字面量
* @example SQL 日期
*/
date: null,
},
string: {
/** 通用字符串 */
self: null,
/** 字符串前缀/后缀
* @example f"..." 的 f
*/
affix: null,
/** 反引号字符串
* @example `string`
*/
backtick: null,
/** 字符字面量
* @example 'a'
*/
char: null,
/** 字符串分隔符
* @example 引号自身
*/
delimiter: null,
/** 文档字符串
* @example """docstring"""
*/
doc: null,
/** 双引号字符串
* @example "string"
*/
double: null,
/** 转义字符
* @example \n \t
*/
escape: null,
/** 定界字符串
* @example <<EOF EOF>>
*/
heredoc: null,
/** 插值字符串
* @example ${name}
*/
interpol: null,
/** 其他类型字符串 */
other: null,
/** 正则表达式字面量
* @example /^abc/
*/
regex: null,
/** 单引号字符串
* @example 'string'
*/
single: null,
/** 符号字符串
* @example ruby 的 :symbol
*/
symbol: null,
},
number: {
/** 通用数字 */
self: null,
/** 二进制数字
* @example 0b1010
*/
bin: null,
/** 浮点数
* @example 1.23
*/
float: null,
/** 十六进制数字
* @example 0x123
*/
hex: null,
/** 普通整数
* @example 123
*/
integer: null,
/** 长整数
* @example 123L
*/
integerLong: null,
/** 八进制数字
* @example 0o123
*/
oct: null,
},
operator: {
/** 运算符
* @example + - * / =
*/
self: null,
/** 单词运算符
* @example and or not in is
*/
word: null,
},
/** 标点符号
* @example , . : ; ( ) [ ] { }
*/
punctuation: null,
comment: {
/** 通用注释 */
self: null,
/** Hashbang 注释
* @example #!/bin/bash
*/
hashbang: null,
/** 多行注释 */
multiline: null,
/** 预处理器注释
* @example #include <stdio.h>
*/
preproc: null,
/** 预处理器文件注释
* @example 如 python 的编码声明 # -*- coding: utf-8 -*-
*/
preprocFile: null,
/** 单行注释 */
single: null,
/** 特殊注释
* @example JavaDoc 的 `@param`
*/
special: null,
},
generic: {
/** 通用文本容器 */
self: null,
/** 被删除的内容 */
deleted: null,
/** 强调文本 (斜体) */
emph: null,
/** 错误信息 */
error: null,
/** 标题
* @example Markdown 标题 #
*/
heading: null,
/** 新增内容 */
inserted: null,
/** 程序输出文本 */
output: null,
/** 交互式提示符
* @example shell 的 $
*/
prompt: null,
/** 强调文本 (粗体) */
strong: null,
/** 子标题
* @example Markdown 子标题 ##
*/
subheading: null,
/** 堆栈跟踪信息 */
traceback: null,
/** 下划线文本 */
underline: null,
},
};

View File

@@ -1,3 +1,4 @@
export { chroma } from "./chroma";
export { ansi, console } from "./console";
export { diff } from "./diff";
export { github } from "./github";

View File

@@ -1,6 +1,8 @@
import type { MapLeafNodes } from "src/core/types";
import * as color from "./color";
/** 代码高亮色 */
export type Chroma = MapLeafNodes<typeof color.chroma, string>;
/** 主色调(强调色) */
export type Primary = MapLeafNodes<typeof color.primary, string>;
/** 副色调(边框色) */

View File

@@ -1,17 +1,23 @@
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 = {
isDarkTheme: "is-dark-theme",
chroma: color.chroma,
color: {
...color.other,
...color.message,
@@ -36,22 +42,20 @@ 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);
export const themeVars = createGlobalThemeContract(vars, varMapper());
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
export { css } from "@linaria/core";