mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
feat(chroma): 代码高亮重构 (#9)
* feat(chroma): 代码高亮重构 * todo * release 亮色适配 * 发布页分支按钮高度修正 * chroma变量和修复注册页导航栏 * chroma 重构适配亮色 --------- Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>
This commit is contained in:
@@ -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
262
src/core/prettylights.ts
Normal 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",
|
||||
}
|
||||
})
|
||||
@@ -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
255
src/types/color/chroma.ts
Normal 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实体名 < > &
|
||||
*/
|
||||
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,
|
||||
},
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
export { chroma } from "./chroma";
|
||||
export { ansi, console } from "./console";
|
||||
export { diff } from "./diff";
|
||||
export { github } from "./github";
|
||||
|
||||
@@ -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>;
|
||||
/** 副色调(边框色) */
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user