添加 sass 预处理

src/color.ts

@@ -3,3 +3,4 @@ import { color } from "src/vars";
 
 export type Primary = MapLeafNodes<typeof color.primary, string>;
 export type Secondary = MapLeafNodes<typeof color.secondary, string>;
+export type Self = MapLeafNodes<typeof color.self, string>;

src/index.ts

@@ -1,2 +1,4 @@
 export * as color from "src/color";
 export { defineTheme, themeVars } from "src/theme";
+
+export { css } from "@linaria/core";

src/theme.ts

@@ -11,12 +11,23 @@ function stringToBoolean(str: string, name: string): boolean {
   }
 }
 
+const otherVars = {
+  border: {
+    radius: null,
+  },
+};
+const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
 export const themeVars = createGlobalThemeContract(vars, varMapper);
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 export const defineTheme = (theme: Theme) => theme;
 
 export function createTheme(theme: Theme): void {
   createGlobalTheme(":root", themeVars, theme);
+  createGlobalTheme(":root", otherThemeVars, {
+    border: {
+      radius: "6px",
+    },
+  });
   globalStyle(":root", {
     accentColor: themeVars.color.blue,
     colorScheme: stringToBoolean(theme.isDarkTheme, "isDarkTheme") ? "dark" : "light",

src/vars/color.ts

@@ -1,23 +1,23 @@
 const num = {
-  1: null,
-  2: null,
-  3: null,
-  4: null,
-  5: null,
-  6: null,
-  7: null,
+  num1: null,
+  num2: null,
+  num3: null,
+  num4: null,
+  num5: null,
+  num6: null,
+  num7: null,
 };
 
 const alpha = {
-  10: null,
-  20: null,
-  30: null,
-  40: null,
-  50: null,
-  60: null,
-  70: null,
-  80: null,
-  90: null,
+  num10: null,
+  num20: null,
+  num30: null,
+  num40: null,
+  num50: null,
+  num60: null,
+  num70: null,
+  num80: null,
+  num90: null,
 };
 
 export const primary = {
@@ -33,37 +33,108 @@ export const primary = {
 export const secondary = {
   self: null,
   dark: {
-    8: null,
-    9: null,
-    10: null,
-    11: null,
-    12: null,
-    13: null,
+    num8: null,
+    num9: null,
+    num10: null,
+    num11: null,
+    num12: null,
+    num13: null,
     ...num,
   },
   light: {
-    1: null,
-    2: null,
-    3: null,
-    4: null,
+    num1: null,
+    num2: null,
+    num3: null,
+    num4: null,
   },
   alpha: alpha,
 };
 
-export const color = {
-  red: null,
-  orange: null,
-  yellow: null,
-  olive: null,
-  green: null,
-  teal: null,
-  blue: null,
-  violet: null,
-  purple: null,
-  pink: null,
-  brown: null,
-  black: null,
-  grey: null,
+const baseColor = {
+  self: null,
+  light: null,
+  dark: {
+    num1: null,
+    num2: null,
+  },
+};
+
+export const self = {
+  red: baseColor,
+  orange: baseColor,
+  yellow: baseColor,
+  olive: baseColor,
+  green: baseColor,
+  teal: baseColor,
+  blue: baseColor,
+  violet: baseColor,
+  purple: baseColor,
+  pink: baseColor,
+  brown: baseColor,
+  black: baseColor,
+  grey: {
+    self: null,
+    light: null,
+  },
   gold: null,
   white: null,
 };
+
+const ansiColor = {
+  black: null,
+  red: null,
+  green: null,
+  yellow: null,
+  blue: null,
+  magenta: null,
+  cyan: null,
+  white: null,
+};
+
+export const ansi = {
+  bright: ansiColor,
+  ...ansiColor,
+};
+
+export const console = {
+  fg: {
+    self: null,
+    subtle: null,
+  },
+  bg: null,
+  border: null,
+  active: {
+    bg: null,
+  },
+  hover: {
+    bg: null,
+  },
+  menu: {
+    bg: null,
+    border: null,
+  },
+};
+
+const row = {
+  bg: null,
+  border: null,
+};
+
+const line = {
+  linenum: {
+    bg: null,
+  },
+  row: row,
+  word: {
+    bg: null,
+  },
+};
+
+export const diff = {
+  added: line,
+  moved: {
+    row: row,
+  },
+  removed: line,
+  inactive: null,
+};

src/vars/index.ts

@@ -2,7 +2,8 @@ import * as color from "src/vars/color";
 
 export function varMapper(value: string | null, path: string[]) {
   if (value === null) {
-    if (path.at(-1) === "self") return path.slice(0, -1).join("-");
+    path = path.filter((item) => item !== "self");
+    path = path.map((item) => item.replace(/^num/, ""))
     return path.join("-");
   }
   return value;

src/vite.ts

@@ -1,5 +1,6 @@
-import fs from "fs";
-import path from "path";
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
 import type { Plugin } from "vite";
 
 export function themeInput(
@@ -8,7 +9,9 @@ export function themeInput(
   devTheme: string,
   mode: string
 ): { [key: string]: string } {
-  const tmpDir = `${outDir}/tmp`; // 输出目录下的临时目录
+  const hash = crypto.randomBytes(6).toString("hex");
+  const tmpDir = `${outDir}/tmp-${hash}`; // 输出目录下的临时目录
+
   fs.mkdirSync(tmpDir, { recursive: true });
 
   const input: { [key: string]: string } = {};