diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 3dc0dec..4b879ac 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,4 +6,4 @@ "mikestead.dotenv", "styled-components.vscode-styled-components" ] -} \ No newline at end of file +} diff --git a/scripts/version.cjs b/scripts/version.cjs index 6fce28e..c25a5dc 100644 --- a/scripts/version.cjs +++ b/scripts/version.cjs @@ -1,8 +1,8 @@ -const fs = require('fs'); -const path = require('path'); +const fs = require("fs"); +const path = require("path"); -const pkgPath = path.join(__dirname, '..', 'package.json'); +const pkgPath = path.join(__dirname, "..", "package.json"); const pkg = JSON.parse(fs.readFileSync(pkgPath)); const version = pkg.version; -console.log(version); \ No newline at end of file +console.log(version); diff --git a/src/core/color.ts b/src/core/color.ts index 9d319e0..9b8e30c 100644 --- a/src/core/color.ts +++ b/src/core/color.ts @@ -1,6 +1,6 @@ import { rgba } from "polished"; import { scaleColorLight } from "src/functions"; -import type { Ansi, Other, Console, Diff, Message, Named, Primary, Secondary } from "src/types"; +import type { Ansi, Console, Diff, Message, Named, Other, Primary, Secondary } from "src/types"; import { themeVars } from "src/types/vars"; import type { Theme } from "./theme"; @@ -23,8 +23,10 @@ interface ColorTheme { olive: string; /** 绿色 */ green: string; - /** 蓝绿色/青色 */ + /** 蓝绿色/青色(偏绿) */ teal: string; + /** 蓝绿色/青色(偏蓝) */ + cyan: string; /** 蓝色 */ blue: string; /** 蓝紫色/紫罗兰色 */ @@ -66,6 +68,7 @@ interface ColorTheme { * ... * } * ... + * // 会经过 lightningcss 打包处理生成最终的 CSS * export default defineTheme({ * isDarkTheme: true, * primary: "#0969da", @@ -82,22 +85,22 @@ export function defineTheme(theme: ColorTheme): Theme { self: theme.primary, contrast: theme.primaryContrast, dark: { - num1: scaleColorLight(theme.primary, -3 * lighten), - num2: scaleColorLight(theme.primary, -6 * lighten), - num3: scaleColorLight(theme.primary, -9 * lighten), - num4: scaleColorLight(theme.primary, -12 * lighten), - num5: scaleColorLight(theme.primary, -15 * lighten), - num6: scaleColorLight(theme.primary, -18 * lighten), - num7: scaleColorLight(theme.primary, -21 * lighten), + num1: scaleColorLight(theme.primary, -12 * lighten), + num2: scaleColorLight(theme.primary, -24 * lighten), + num3: scaleColorLight(theme.primary, -36 * lighten), + num4: scaleColorLight(theme.primary, -48 * lighten), + num5: scaleColorLight(theme.primary, -60 * lighten), + num6: scaleColorLight(theme.primary, -72 * lighten), + num7: scaleColorLight(theme.primary, -84 * lighten), }, light: { - num1: scaleColorLight(theme.primary, 3 * lighten), - num2: scaleColorLight(theme.primary, 6 * lighten), - num3: scaleColorLight(theme.primary, 9 * lighten), - num4: scaleColorLight(theme.primary, 12 * lighten), - num5: scaleColorLight(theme.primary, 15 * lighten), - num6: scaleColorLight(theme.primary, 18 * lighten), - num7: scaleColorLight(theme.primary, 21 * lighten), + num1: scaleColorLight(theme.primary, 12 * lighten), + num2: scaleColorLight(theme.primary, 24 * lighten), + num3: scaleColorLight(theme.primary, 36 * lighten), + num4: scaleColorLight(theme.primary, 48 * lighten), + num5: scaleColorLight(theme.primary, 60 * lighten), + num6: scaleColorLight(theme.primary, 72 * lighten), + num7: scaleColorLight(theme.primary, 84 * lighten), }, alpha: { num10: rgba(theme.primary, 0.1), @@ -117,25 +120,25 @@ export function defineTheme(theme: ColorTheme): Theme { const secondary: Secondary = { self: theme.secondary, dark: { - num1: scaleColorLight(theme.secondary, -3 * lighten), - num2: scaleColorLight(theme.secondary, -6 * lighten), - num3: scaleColorLight(theme.secondary, -9 * lighten), - num4: scaleColorLight(theme.secondary, -12 * lighten), - num5: scaleColorLight(theme.secondary, -15 * lighten), - num6: scaleColorLight(theme.secondary, -18 * lighten), - num7: scaleColorLight(theme.secondary, -21 * lighten), - num8: scaleColorLight(theme.secondary, -24 * lighten), - num9: scaleColorLight(theme.secondary, -27 * lighten), - num10: scaleColorLight(theme.secondary, -30 * lighten), - num11: scaleColorLight(theme.secondary, -33 * lighten), - num12: scaleColorLight(theme.secondary, -36 * lighten), - num13: scaleColorLight(theme.secondary, -39 * lighten), + num1: scaleColorLight(theme.secondary, -6 * lighten), + num2: scaleColorLight(theme.secondary, -12 * lighten), + num3: scaleColorLight(theme.secondary, -18 * lighten), + num4: scaleColorLight(theme.secondary, -24 * lighten), + num5: scaleColorLight(theme.secondary, -30 * lighten), + num6: scaleColorLight(theme.secondary, -36 * lighten), + num7: scaleColorLight(theme.secondary, -42 * lighten), + num8: scaleColorLight(theme.secondary, -48 * lighten), + num9: scaleColorLight(theme.secondary, -54 * lighten), + num10: scaleColorLight(theme.secondary, -60 * lighten), + num11: scaleColorLight(theme.secondary, -66 * lighten), + num12: scaleColorLight(theme.secondary, -72 * lighten), + num13: scaleColorLight(theme.secondary, -80 * lighten), }, light: { - num1: scaleColorLight(theme.secondary, 3 * lighten), - num2: scaleColorLight(theme.secondary, 6 * lighten), - num3: scaleColorLight(theme.secondary, 9 * lighten), - num4: scaleColorLight(theme.secondary, 12 * lighten), + num1: scaleColorLight(theme.secondary, 18 * lighten), + num2: scaleColorLight(theme.secondary, 36 * lighten), + num3: scaleColorLight(theme.secondary, 54 * lighten), + num4: scaleColorLight(theme.secondary, 72 * lighten), }, alpha: { num10: rgba(theme.secondary, 0.1), @@ -293,22 +296,22 @@ export function defineTheme(theme: ColorTheme): Theme { active: rgba(theme.red, 0.5), hover: rgba(theme.red, 0.3), }, - border: scaleColorLight(theme.red, 20 * lighten), + border: rgba(theme.red, 0.4), text: theme.red, }, success: { bg: rgba(theme.green, 0.1), - border: scaleColorLight(theme.green, 20 * lighten), + border: rgba(theme.green, 0.4), text: theme.green, }, warning: { bg: rgba(theme.yellow, 0.1), - border: scaleColorLight(theme.yellow, 20 * lighten), + border: rgba(theme.yellow, 0.4), text: theme.yellow, }, info: { bg: rgba(theme.blue, 0.1), - border: scaleColorLight(theme.blue, 20 * lighten), + border: rgba(theme.blue, 0.4), text: theme.blue, }, }; @@ -320,7 +323,7 @@ export function defineTheme(theme: ColorTheme): Theme { yellow: themeVars.color.yellow.self, blue: themeVars.color.blue.self, magenta: themeVars.color.pink.self, - cyan: themeVars.color.teal.self, + cyan: theme.cyan, white: themeVars.color.console.fg.subtle, bright: { black: themeVars.color.black.light, @@ -329,7 +332,7 @@ export function defineTheme(theme: ColorTheme): Theme { yellow: themeVars.color.yellow.light, blue: themeVars.color.blue.light, magenta: themeVars.color.pink.light, - cyan: themeVars.color.teal.light, + cyan: theme.isDarkTheme ? scaleColorLight(theme.cyan, 10) : scaleColorLight(theme.cyan, 25), white: themeVars.color.console.fg.self, }, }; diff --git a/src/core/vite.ts b/src/core/vite.ts index d10ed56..2716457 100644 --- a/src/core/vite.ts +++ b/src/core/vite.ts @@ -4,7 +4,7 @@ import fs from "node:fs"; import path from "node:path"; import type { Plugin } from "vite"; -const suffix = ".css.tsx" +const suffix = ".css.tsx"; /** * 生成主题输入 @@ -103,7 +103,7 @@ export function themePlugin(): Plugin { console.log("[themePlugin] exec:", cmd); try { execSync(cmd, { stdio: "inherit" }); - // eslint-disable-next-line @typescript-eslint/no-unused-vars + // eslint-disable-next-line @typescript-eslint/no-unused-vars } catch (_) { // continue regardless of error } diff --git a/src/index.ts b/src/index.ts index da58d65..dc5b6be 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ export { css } from "@linaria/core"; export { defineTheme } from "./core/color"; -export type { Other, Console, Diff } from "./types"; +export type { Console, Diff, Other } from "./types"; export { themeVars } from "./types/vars"; diff --git a/src/types/color/index.ts b/src/types/color/index.ts index c594e2b..94336c2 100644 --- a/src/types/color/index.ts +++ b/src/types/color/index.ts @@ -1,6 +1,6 @@ -export { other } from "./other"; export { ansi, console } from "./console"; export { diff } from "./diff"; export { primary, secondary } from "./main"; export { message } from "./message"; export { named } from "./named"; +export { other } from "./other"; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 7e99fdf..8aa61d2 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -1,12 +1,40 @@ -import type { Other, Console, Diff } from "src"; +import type { Console, Diff, Other } from "src"; import { defineTheme, themeVars } from "src"; +const github = { + display: { + brown: { fgColor: "#b69a6d" }, + cyan: { fgColor: "#07ace4" }, + indigo: { fgColor: "#9899ec" }, + lemon: { fgColor: "#ba9b12" }, + olive: { fgColor: "#a2a626" }, + teal: { fgColor: "#1cb0ab" }, + }, + fgColor: { + accent: "#4493f8", + attention: "#d29922", + danger: "#f85149", + default: "#f0f6fc", + disabled: "#656c7699", + done: "#ab7df8", + neutral: "#9198a1", + severe: "#db6d28", + sponsors: "#db61a2", + success: "#3fb950", + black: "#010409", + white: "#ffffff", + }, + bgColor: { + black: "#010409", + }, +}; + const console: Console = { fg: { self: "#f0f6fc", subtle: "#9198a1", }, - bg: "#010409", + bg: github.bgColor.black, border: "#2b3139", activeBg: "#2a313c", hoverBg: "#15191f", @@ -70,7 +98,7 @@ const other: Other = { num3: "#707687", }, }, - footer: "#010409", + footer: github.bgColor.black, timeline: "#4c525e", input: { text: "#d5dbe6", @@ -122,11 +150,11 @@ const other: Other = { bg: "#000000f0", }, nav: { - bg: "#010409", + bg: github.bgColor.black, hoverBg: themeVars.color.hover.self, text: themeVars.color.text.self, }, - secondaryNavBg: "#181c20", + secondaryNavBg: themeVars.color.nav.bg, label: { text: "#fff", bg: "#7c84974b", @@ -144,24 +172,25 @@ const other: Other = { export default defineTheme({ isDarkTheme: true, - primary: "#4493f8", - primaryContrast: "#fff", + primary: github.fgColor.accent, + primaryContrast: github.fgColor.default, secondary: "#3d444d", - red: "#da3737", - orange: "#f17a2b", - yellow: "#f3c640", - olive: "#c8df36", - green: "#39d353", - teal: "#69d4cf", - blue: "#4493f8", - violet: "#754ad3", - purple: "#8957e5", - pink: "#e04b9f", - brown: "#a86d45", - black: "#141516", - grey: "#505665", - gold: "#b1983b", - white: "#ffffff", + red: github.fgColor.danger, + orange: github.fgColor.severe, + yellow: github.fgColor.attention, + olive: github.display.olive.fgColor, + green: github.fgColor.success, + cyan: github.display.cyan.fgColor, + teal: github.display.teal.fgColor, + blue: github.fgColor.accent, + violet: github.display.indigo.fgColor, + purple: github.fgColor.done, + pink: github.fgColor.sponsors, + brown: github.display.brown.fgColor, + black: github.fgColor.black, + grey: github.fgColor.neutral, + gold: github.display.lemon.fgColor, + white: github.fgColor.white, console, diff, other, diff --git a/vite.config.ts b/vite.config.ts index 5de6068..461698f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,7 @@ import * as sass from "sass-embedded"; import { defineConfig } from "vite"; import { themeInput, themePlugin } from "./src/core/vite"; -dotenv.config({quiet: true}); +dotenv.config({ quiet: true }); const require = createRequire(import.meta.url);