颜色变量计算&颜色主题迁移

src/core/color.ts

@@ -0,0 +1,324 @@
+import { rgba } from "polished";
+import { scaleColorLight } from "src/functions";
+import type { Ansi, Based, Console, Diff, Message, Named, Primary, Secondary } from "src/types";
+import { themeVars } from "src/types/vars";
+import type { Theme } from "./theme";
+
+interface ColorTheme {
+  isDarkTheme: boolean;
+  primary: string;
+  primaryContrast: string;
+  secondary: string;
+  red: string;
+  orange: string;
+  yellow: string;
+  olive: string;
+  green: string;
+  teal: string;
+  blue: string;
+  violet: string;
+  purple: string;
+  pink: string;
+  brown: string;
+  black: string;
+  grey: string;
+  gold: string;
+  white: string;
+  console: Console;
+  diff: Diff;
+  based: Based;
+}
+
+/** 定义颜色, 用于生成颜色主题
+ * @example
+ * 文件名: `color-dark.css.ts`
+ * import type { Primary } from "src/types";
+ * import { defineTheme, themeVars } from "src";
+ *
+ * const primary: Primary = {
+ *   self: "#ffffff",
+ *   contrast: themeVars.color.white,
+ *   ...
+ * }
+ *
+ * export default defineTheme({
+ *   isDarkTheme: "true",
+ *   color: {
+ *     primary,
+ *     ...
+ *   }
+ * })
+ */
+export function defineTheme(theme: ColorTheme): Theme {
+  const lighten = theme.isDarkTheme ? -1 : 1;
+
+  const primary: Primary = {
+    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),
+    },
+    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),
+    },
+    alpha: {
+      num10: rgba(theme.primary, 0.1),
+      num20: rgba(theme.primary, 0.2),
+      num30: rgba(theme.primary, 0.3),
+      num40: rgba(theme.primary, 0.4),
+      num50: rgba(theme.primary, 0.5),
+      num60: rgba(theme.primary, 0.6),
+      num70: rgba(theme.primary, 0.7),
+      num80: rgba(theme.primary, 0.8),
+      num90: rgba(theme.primary, 0.9),
+    },
+    hover: theme.isDarkTheme ? themeVars.color.primary.light.num1 : themeVars.color.primary.dark.num1,
+    active: theme.isDarkTheme ? themeVars.color.primary.light.num2 : themeVars.color.primary.dark.num2,
+  };
+
+  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),
+    },
+    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),
+    },
+    alpha: {
+      num10: rgba(theme.secondary, 0.1),
+      num20: rgba(theme.secondary, 0.2),
+      num30: rgba(theme.secondary, 0.3),
+      num40: rgba(theme.secondary, 0.4),
+      num50: rgba(theme.secondary, 0.5),
+      num60: rgba(theme.secondary, 0.6),
+      num70: rgba(theme.secondary, 0.7),
+      num80: rgba(theme.secondary, 0.8),
+      num90: rgba(theme.secondary, 0.9),
+    },
+    button: themeVars.color.secondary.dark.num4,
+    hover: theme.isDarkTheme ? themeVars.color.secondary.dark.num3 : themeVars.color.secondary.dark.num5,
+    active: theme.isDarkTheme ? themeVars.color.secondary.dark.num2 : themeVars.color.secondary.dark.num6,
+  };
+
+  const named: Named = {
+    red: {
+      self: theme.red,
+      light: theme.isDarkTheme ? scaleColorLight(theme.red, 10) : scaleColorLight(theme.red, 25),
+      dark: {
+        num1: scaleColorLight(theme.red, -10),
+        num2: scaleColorLight(theme.red, -20),
+      },
+      badge: {
+        self: theme.red,
+        bg: rgba(theme.red, 0.1),
+        hover: {
+          bg: rgba(theme.red, 0.3),
+        },
+      },
+    },
+    orange: {
+      self: theme.orange,
+      light: theme.isDarkTheme ? scaleColorLight(theme.orange, 10) : scaleColorLight(theme.orange, 25),
+      dark: {
+        num1: scaleColorLight(theme.orange, -10),
+        num2: scaleColorLight(theme.orange, -20),
+      },
+      badge: {
+        self: theme.orange,
+        bg: rgba(theme.orange, 0.1),
+        hover: {
+          bg: rgba(theme.orange, 0.3),
+        },
+      },
+    },
+    yellow: {
+      self: theme.yellow,
+      light: theme.isDarkTheme ? scaleColorLight(theme.yellow, 10) : scaleColorLight(theme.yellow, 25),
+      dark: {
+        num1: scaleColorLight(theme.yellow, -10),
+        num2: scaleColorLight(theme.yellow, -20),
+      },
+      badge: {
+        self: theme.yellow,
+        bg: rgba(theme.yellow, 0.1),
+        hover: {
+          bg: rgba(theme.yellow, 0.3),
+        },
+      },
+    },
+    olive: {
+      self: theme.olive,
+      light: theme.isDarkTheme ? scaleColorLight(theme.olive, 10) : scaleColorLight(theme.olive, 25),
+      dark: {
+        num1: scaleColorLight(theme.olive, -10),
+        num2: scaleColorLight(theme.olive, -20),
+      },
+    },
+    green: {
+      self: theme.green,
+      light: theme.isDarkTheme ? scaleColorLight(theme.green, 10) : scaleColorLight(theme.green, 25),
+      dark: {
+        num1: scaleColorLight(theme.green, -10),
+        num2: scaleColorLight(theme.green, -20),
+      },
+      badge: {
+        self: theme.green,
+        bg: rgba(theme.green, 0.1),
+        hover: {
+          bg: rgba(theme.green, 0.3),
+        },
+      },
+    },
+    teal: {
+      self: theme.teal,
+      light: theme.isDarkTheme ? scaleColorLight(theme.teal, 10) : scaleColorLight(theme.teal, 25),
+      dark: {
+        num1: scaleColorLight(theme.teal, -10),
+        num2: scaleColorLight(theme.teal, -20),
+      },
+    },
+    blue: {
+      self: theme.blue,
+      light: theme.isDarkTheme ? scaleColorLight(theme.blue, 10) : scaleColorLight(theme.blue, 25),
+      dark: {
+        num1: scaleColorLight(theme.blue, -10),
+        num2: scaleColorLight(theme.blue, -20),
+      },
+    },
+    violet: {
+      self: theme.violet,
+      light: theme.isDarkTheme ? scaleColorLight(theme.violet, 10) : scaleColorLight(theme.violet, 25),
+      dark: {
+        num1: scaleColorLight(theme.violet, -10),
+        num2: scaleColorLight(theme.violet, -20),
+      },
+    },
+    purple: {
+      self: theme.purple,
+      light: theme.isDarkTheme ? scaleColorLight(theme.purple, 10) : scaleColorLight(theme.purple, 25),
+      dark: {
+        num1: scaleColorLight(theme.purple, -10),
+        num2: scaleColorLight(theme.purple, -20),
+      },
+    },
+    pink: {
+      self: theme.pink,
+      light: theme.isDarkTheme ? scaleColorLight(theme.pink, 10) : scaleColorLight(theme.pink, 25),
+      dark: {
+        num1: scaleColorLight(theme.pink, -10),
+        num2: scaleColorLight(theme.pink, -20),
+      },
+    },
+    brown: {
+      self: theme.brown,
+      light: theme.isDarkTheme ? scaleColorLight(theme.brown, 10) : scaleColorLight(theme.brown, 25),
+      dark: {
+        num1: scaleColorLight(theme.brown, -10),
+        num2: scaleColorLight(theme.brown, -20),
+      },
+    },
+    black: {
+      self: theme.black,
+      light: theme.isDarkTheme ? scaleColorLight(theme.black, 10) : scaleColorLight(theme.black, 25),
+      dark: {
+        num1: scaleColorLight(theme.black, -10),
+        num2: scaleColorLight(theme.black, -20),
+      },
+    },
+    grey: {
+      self: theme.grey,
+      light: theme.isDarkTheme ? scaleColorLight(theme.grey, 10) : scaleColorLight(theme.grey, 25),
+    },
+    gold: theme.gold,
+    white: theme.white,
+  };
+
+  const message: Message = {
+    error: {
+      bg: {
+        self: rgba(theme.red, 0.1),
+        active: rgba(theme.red, 0.5),
+        hover: rgba(theme.red, 0.3),
+      },
+      border: scaleColorLight(theme.red, 30 * lighten),
+      text: theme.red,
+    },
+    success: {
+      bg: rgba(theme.green, 0.1),
+      border: scaleColorLight(theme.green, 30 * lighten),
+      text: theme.green,
+    },
+    warning: {
+      bg: rgba(theme.yellow, 0.1),
+      border: scaleColorLight(theme.yellow, 30 * lighten),
+      text: theme.yellow,
+    },
+    info: {
+      bg: rgba(theme.blue, 0.1),
+      border: scaleColorLight(theme.blue, 30 * lighten),
+      text: theme.blue,
+    },
+  };
+
+  const ansi: Ansi = {
+    black: themeVars.color.black.self,
+    red: themeVars.color.red.self,
+    green: themeVars.color.green.self,
+    yellow: themeVars.color.yellow.self,
+    blue: themeVars.color.blue.self,
+    magenta: themeVars.color.pink.self,
+    cyan: themeVars.color.teal.self,
+    white: themeVars.color.console.fg.subtle,
+    bright: {
+      black: themeVars.color.black.light,
+      red: themeVars.color.red.light,
+      green: themeVars.color.green.light,
+      yellow: themeVars.color.yellow.light,
+      blue: themeVars.color.blue.light,
+      magenta: themeVars.color.pink.light,
+      cyan: themeVars.color.teal.light,
+      white: themeVars.color.console.fg.self,
+    },
+  };
+
+  return {
+    isDarkTheme: theme.isDarkTheme.toString(),
+    color: {
+      primary,
+      secondary,
+      ...named,
+      ansi,
+      console: theme.console,
+      diff: theme.diff,
+      ...message,
+      ...theme.based,
+    },
+  };
+}

src/core/theme.ts

@@ -2,7 +2,7 @@ import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
 import { otherThemeVars, themeVars } from "src/types/vars";
 import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
-type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
+export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 
 function stringToBoolean(str: string, name: string): boolean {
   try {
@@ -13,27 +13,6 @@ function stringToBoolean(str: string, name: string): boolean {
   }
 }
 
-/** 定义主题, 用于生成颜色主题
- * @example
- * 文件名: `color-dark.css.ts`
- * import type { Primary } from "src/types";
- * import { defineTheme, themeVars } from "src";
- *
- * const primary: Primary = {
- *   self: "#000000",
- *   contrast: themeVars.color.white,
- *   ...
- * }
- *
- * export default defineTheme({
- *   isDarkTheme: "true",
- *   color: {
- *     primary,
- *     ...
- *   }
- * })
- */
-export const defineTheme = (theme: Theme) => theme;
 export function createTheme(theme: Theme): void {
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
@@ -42,7 +21,7 @@ export function createTheme(theme: Theme): void {
     },
   });
   globalStyle(":root", {
-    accentColor: themeVars.color.blue,
+    accentColor: themeVars.color.accent,
     colorScheme: stringToBoolean(theme.isDarkTheme, "isDarkTheme") ? "dark" : "light",
   });
 }

src/index.ts

@@ -1,3 +1,4 @@
 export { css } from "@linaria/core";
-export { defineTheme } from "./core/theme";
+export { defineTheme } from "./core/color";
+export type { Based, Console, Diff } from "./types";
 export { themeVars } from "./types/vars";

src/types/color/based.ts

@@ -28,13 +28,13 @@ export const based = {
   },
   /** 输入框 */
   input: {
+    text: null,
     background: null,
+    toggleBackgound: "color-input-toggle-background",
     border: {
       self: null,
       hover: null,
     },
-    text: null,
-    toggleBackgound: "color-input-toggle-background",
   },
   light: {
     self: null,
@@ -86,12 +86,8 @@ export const based = {
   label: {
     text: null,
     bg: null,
-    hover: {
-      bg: null,
-    },
-    active: {
-      bg: null,
-    },
+    hoverBg: "color-label-hover-bg",
+    activeBg: "color-label-active-bg",
   },
   accent: null,
   smallAccent: "color-small-accent",

src/types/color/index.ts

@@ -2,5 +2,5 @@ export { based } from "./based";
 export { ansi, console } from "./console";
 export { diff } from "./diff";
 export { primary, secondary } from "./main";
-export { error, info, success, warning } from "./message";
+export { message } from "./message";
 export { named } from "./named";

src/types/color/message.ts

@@ -4,7 +4,7 @@ const msg = {
   text: null,
 };
 
-export const error = {
+const error = {
   ...msg,
   bg: {
     self: null,
@@ -13,13 +13,20 @@ export const error = {
   },
 };
 
-export const success = {
+const success = {
   ...msg,
 };
 
-export const warning = {
+const warning = {
   ...msg,
 };
-export const info = {
+const info = {
   ...msg,
 };
+
+export const message = {
+  error,
+  success,
+  warning,
+  info,
+};

src/types/index.ts

@@ -4,3 +4,8 @@ import * as color from "./color";
 export type Primary = MapLeafNodes<typeof color.primary, string>;
 export type Secondary = MapLeafNodes<typeof color.secondary, string>;
 export type Named = MapLeafNodes<typeof color.named, string>;
+export type Message = MapLeafNodes<typeof color.message, string>;
+export type Ansi = MapLeafNodes<typeof color.ansi, string>;
+export type Console = MapLeafNodes<typeof color.console, string>;
+export type Diff = MapLeafNodes<typeof color.diff, string>;
+export type Based = MapLeafNodes<typeof color.based, string>;

src/types/vars.ts

@@ -14,19 +14,14 @@ const vars = {
   /** 用于标识当前是否为暗色主题: `"true"` 暗色 `"false"` 亮色 */
   isDarkTheme: "is-dark-theme",
   color: {
+    ...color.message,
+    ...color.based,
+    ...color.named,
     primary: color.primary,
     secondary: color.secondary,
-    self: {
-      ...color.based,
-      ...color.named,
-    },
     ansi: color.ansi,
     console: color.console,
     diff: color.diff,
-    error: color.error,
-    success: color.success,
-    warning: color.warning,
-    info: color.info,
   },
 };
 

styles/index.tsx

@@ -1,2 +0,0 @@
-import "styles/test";
-import "styles/t1";

styles/t1.tsx

@@ -1,20 +0,0 @@
-import { css, themeVars } from "src";
-
-export const setting_global = css`
-  .user-main-content,
-  .repo-setting-content,
-  .user-setting-content,
-  .org-setting-content,
-  .admin-setting-content {
-    .ui.right {
-      .ui.primary.button.tiny {
-        color: #fff;
-        background-color: #238636;
-        &:hover {
-          background-color: #29903b;
-          border-color: ${themeVars.color.primary.light.num1};
-        }
-      }
-    }
-  }
-`;

styles/test.tsx

@@ -1,22 +0,0 @@
-import { css, themeVars } from "src";
-import { scaleColorLight } from "src/functions";
-
-const red = "#cc4848";
-
-export const setting_global = css`
-  @use "sass:color";
-  .lines-num span:after {
-    color: ${themeVars.color.primary.hover};
-  }
-  .ui.cards > .card,
-  .ui.card {
-    > .extra a:not(.ui):hover {
-      color: ${scaleColorLight(red, 10)};
-      background-color: color.scale(#cc4848, $lightness: 10%);
-    }
-    .text {
-      color: ${scaleColorLight(red, -20)};
-      background-color: color.scale(#cc4848, $lightness: -20%);
-    }
-  }
-`;

themes/dark-pink.css.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "src";
-import dark_theme from "themes/dark";
-
-export default defineTheme({
-  ...dark_theme,
-  color: {
-    ...dark_theme.color,
-    primary: {
-      ...dark_theme.color.primary,
-      hover: "pink",
-    },
-  },
-});

themes/dark.css.ts

@@ -1,52 +1,172 @@
-import type { Primary } from "src/types";
+import type { Based, Console, Diff } from "src";
 import { defineTheme, themeVars } from "src";
 
-const dark = {
-  num1: "#739cb3",
-  num2: "#40aaff",
-  num3: "#92b4c4",
-  num4: "#a1bbcd",
-  num5: "#cfddc1",
-  num6: "#e7eee0",
-  num7: "#f8faf6",
+const console: Console = {
+  fg: {
+    self: "#f0f6fc",
+    subtle: "#9198a1",
+  },
+  bg: "#010409",
+  border: "#2b3139",
+  active: {
+    bg: "#2a313c",
+  },
+  hover: {
+    bg: "#15191f",
+  },
+  menu: {
+    bg: themeVars.color.body,
+    border: themeVars.color.light.border,
+  },
 };
 
-const light = {
-  num1: themeVars.color.primary.self,
-  num2: "#437aad",
-  num3: "#415b8b",
-  num4: "#25425a",
-  num5: "#223546",
-  num6: "#131923",
-  num7: "#06090b",
+const diff: Diff = {
+  added: {
+    linenum: {
+      bg: "#1c4428",
+    },
+    row: {
+      bg: "#12261e",
+      border: "#314a37",
+    },
+    word: {
+      bg: "#1d572d",
+    },
+  },
+  removed: {
+    linenum: {
+      bg: "#542426",
+    },
+    row: {
+      bg: "#25171c",
+      border: "#634343",
+    },
+    word: {
+      bg: "#792e2d",
+    },
+  },
+  moved: {
+    row: {
+      bg: "#818044",
+      border: "#bcca6f",
+    },
+  },
+  inactive: "#353846",
 };
 
-const alpha = {
-  num10: "#3683c019",
-  num20: "#3683c033",
-  num30: "#3683c04b",
-  num40: "#3683c066",
-  num50: "#3683c080",
-  num60: "#3683c099",
-  num70: "#3683c0b3",
-  num80: "#3683c0cc",
-  num90: "#3683c0e1",
-};
-
-const primary: Primary = {
-  self: themeVars.color.blue,
-  contrast: "#fff",
-  dark,
-  light,
-  alpha,
-  hover: light.num1,
-  active: light.num2,
+const based: Based = {
+  git: "#f05133",
+  body: "#0d1117",
+  box: {
+    header: "#151b23",
+    body: {
+      self: "#0d1117",
+      highlight: "#262c36",
+    },
+  },
+  text: {
+    self: "#dce2e7",
+    dark: "#dbe0ea",
+    light: {
+      self: "#a6aab5",
+      num1: "rgb(125, 133, 144)",
+      num2: "#8a8e99",
+      num3: "#707687",
+    },
+  },
+  footer: "#010409",
+  timeline: "#4c525e",
+  input: {
+    text: "#d5dbe6",
+    background: "#2c2f35",
+    toggleBackgound: "#454a57",
+    border: {
+      self: themeVars.color.light.border,
+      hover: themeVars.color.light.border,
+    },
+  },
+  light: {
+    self: "#00000028",
+    mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))",
+    border: "#3d444d",
+  },
+  hover: {
+    self: "#656c7633",
+    opaque: "#656c7666",
+  },
+  active: "#161a21",
+  menu: "#0d1117",
+  card: "#0d1117",
+  markup: {
+    tableRow: "#ffffff06",
+    code: {
+      block: "#ffffff16",
+      inline: "#ffffff26",
+    },
+  },
+  button: "#212830",
+  codeBg: "#0d1117",
+  shadow: {
+    self: "#00000060",
+    opaque: "#00000080",
+  },
+  secondaryBg: "#ffffff26",
+  expandButton: "#3c404d",
+  placeholderText: "#8a8e99",
+  editorLineHighlight: themeVars.color.primary.light.num5,
+  projectColumnBg: themeVars.color.secondary.light.num2,
+  caret: themeVars.color.text.self,
+  reaction: {
+    bg: "#ffffff12",
+    hoverBg: themeVars.color.primary.light.num4,
+    activeBg: themeVars.color.primary.light.num5,
+  },
+  tooltip: {
+    text: "#fff",
+    bg: "#000000f0",
+  },
+  nav: {
+    bg: "#010409",
+    hoverBg: themeVars.color.hover.self,
+    text: themeVars.color.text.self,
+  },
+  secondaryNavBg: "#181c20",
+  label: {
+    text: "#fff",
+    bg: "#7c84974b",
+    hoverBg: "#7c8497a0",
+    activeBg: "#7c8497",
+  },
+  accent: themeVars.color.primary.light.num1,
+  smallAccent: themeVars.color.primary.light.num5,
+  highlight: {
+    bg: "#87651e",
+    fg: "#352c1c",
+  },
+  overlayBackdrop: "#080808c0",
 };
 
 export default defineTheme({
-  isDarkTheme: "true",
-  color: {
-    blue: "blue",
-    primary: primary,
-  },
+  isDarkTheme: true,
+  primary: "#4493f8",
+  primaryContrast: "#fff",
+  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",
+  console,
+  diff,
+  based,
 });

themes/dark/gitea-dark.css

@@ -1,268 +0,0 @@
-/* Made by Luting ^-^ */
-:root {
-  --is-dark-theme: true;
-  --border-radius: 6px;
-
-  --color-primary: var(--color-blue);
-  --color-primary-contrast: #fff;
-  --color-primary-dark-1: #739cb3;
-  --color-primary-dark-2: #40aaff;
-  --color-primary-dark-3: #92b4c4;
-  --color-primary-dark-4: #a1bbcd;
-  --color-primary-dark-5: #cfddc1;
-  --color-primary-dark-6: #e7eee0;
-  --color-primary-dark-7: #f8faf6;
-  --color-primary-light-1: var(--color-blue);
-  --color-primary-light-2: #437aad;
-  --color-primary-light-3: #415b8b;
-  --color-primary-light-4: #25425a;
-  --color-primary-light-5: #223546;
-  --color-primary-light-6: #131923;
-  --color-primary-light-7: #06090b;
-  --color-primary-alpha-10: #3683c019;
-  --color-primary-alpha-20: #3683c033;
-  --color-primary-alpha-30: #3683c04b;
-  --color-primary-alpha-40: #3683c066;
-  --color-primary-alpha-50: #3683c080;
-  --color-primary-alpha-60: #3683c099;
-  --color-primary-alpha-70: #3683c0b3;
-  --color-primary-alpha-80: #3683c0cc;
-  --color-primary-alpha-90: #3683c0e1;
-  --color-primary-hover: var(--color-primary-light-1);
-  --color-primary-active: var(--color-primary-light-2);
-
-  --color-secondary: #3d444d;
-  --color-secondary-dark-1: #505665;
-  --color-secondary-dark-2: #5b6273;
-  --color-secondary-dark-3: #71798e;
-  --color-secondary-dark-4: #7f8699;
-  --color-secondary-dark-5: #8c93a4;
-  --color-secondary-dark-6: #9aa0af;
-  --color-secondary-dark-7: #a8adba;
-  --color-secondary-dark-8: #c4c7d0;
-  --color-secondary-dark-9: #dfe1e6;
-  --color-secondary-dark-10: #edeef1;
-  --color-secondary-dark-11: #fbfbfc;
-  --color-secondary-dark-12: #eeeff2;
-  --color-secondary-dark-13: #fbfbfc;
-  --color-secondary-light-1: #373b46;
-  --color-secondary-light-2: #292c34;
-  --color-secondary-light-3: #1c1e23;
-  --color-secondary-light-4: #0e0f11;
-  --color-secondary-alpha-10: #2c2f35;
-  --color-secondary-alpha-20: #2c2f3533;
-  --color-secondary-alpha-30: #2c2f354b;
-  --color-secondary-alpha-40: #2c2f3566;
-  --color-secondary-alpha-50: #ffffff28;
-  --color-secondary-alpha-60: #161b22;
-  --color-secondary-alpha-70: #2c2f35b3;
-  --color-secondary-alpha-80: #2c2f35cc;
-  --color-secondary-alpha-90: #2c2f35e1;
-
-  --color-red: #da3737;
-  --color-orange: #f17a2b;
-  --color-yellow: #f3c640;
-  --color-olive: #c8df36;
-  --color-green: #39d353;
-  --color-teal: #69d4cf;
-  --color-blue: #4493f8;
-  --color-violet: #754ad3;
-  --color-purple: #8957e5;
-  --color-pink: #e04b9f;
-  --color-brown: #a86d45;
-  --color-black: #141516;
-  --color-grey: #797c85;
-  --color-gold: #d4b74c;
-  --color-white: #ffffff;
-
-  --color-red-light: #d15a5a;
-  --color-orange-light: #f6a066;
-  --color-yellow-light: #eaaf03;
-  --color-olive-light: #abc016;
-  --color-green-light: #93b373;
-  --color-teal-light: #00b6ad;
-  --color-blue-light: #4e96cc;
-  --color-violet-light: #9b79e4;
-  --color-purple-light: #ba6ad5;
-  --color-pink-light: #d74397;
-  --color-brown-light: #b08061;
-  --color-black-light: #3f4555;
-
-  --color-red-dark-1: #c23636;
-  --color-orange-dark-1: #f38236;
-  --color-yellow-dark-1: #b88a03;
-  --color-olive-dark-1: #839311;
-  --color-green-dark-1: #238636;
-  --color-teal-dark-1: #00837c;
-  --color-blue-dark-1: #347cb3;
-  --color-violet-dark-1: #7b4edb;
-  --color-purple-dark-1: #a742c9;
-  --color-pink-dark-1: #be297d;
-  --color-brown-dark-1: #94674a;
-  --color-black-dark-1: #292d38;
-
-  --color-red-dark-2: #ad3030;
-  --color-orange-dark-2: #f16e17;
-  --color-yellow-dark-2: #a37a02;
-  --color-olive-dark-2: #74820f;
-  --color-green-dark-2: #6c8c4c;
-  --color-teal-dark-2: #00746e;
-  --color-blue-dark-2: #2e6e9f;
-  --color-violet-dark-2: #6733d6;
-  --color-purple-dark-2: #9834b9;
-  --color-pink-dark-2: #a9246f;
-  --color-brown-dark-2: #835b42;
-  --color-black-dark-2: #252832;
-
-  --color-ansi-black: var(--color-black);
-  --color-ansi-red: var(--color-red);
-  --color-ansi-green: var(--color-green);
-  --color-ansi-yellow: var(--color-yellow);
-  --color-ansi-blue: var(--color-blue);
-  --color-ansi-magenta: var(--color-pink);
-  --color-ansi-cyan: var(--color-teal);
-  --color-ansi-white: var(--color-console-fg-subtle);
-  --color-ansi-bright-black: var(--color-black-light);
-  --color-ansi-bright-red: var(--color-red-light);
-  --color-ansi-bright-green: var(--color-green-light);
-  --color-ansi-bright-yellow: var(--color-yellow-light);
-  --color-ansi-bright-blue: var(--color-blue-light);
-  --color-ansi-bright-magenta: var(--color-pink-light);
-  --color-ansi-bright-cyan: var(--color-teal-light);
-  --color-ansi-bright-white: var(--color-console-fg);
-
-  --color-console-fg: #f0f6fc;
-  --color-console-fg-subtle: #9198a1;
-  --color-console-bg: #010409;
-  --color-console-border: #2b3139;
-  --color-console-active-bg: #2a313c;
-  --color-console-hover-bg: #15191f;
-  --color-console-menu-bg: var(--color-body);
-  --color-console-menu-border: var(--color-light-border);
-
-  --color-grey: #505665;
-  --color-grey-light: #a1a6b7;
-  --color-gold: #b1983b;
-  --color-white: #fff;
-
-  --color-diff-removed-word-bg: #792e2d;
-  --color-diff-added-word-bg: #1d572d;
-  --color-diff-removed-row-bg: #25171c;
-  --color-diff-moved-row-bg: #818044;
-  --color-diff-added-row-bg: #12261e;
-  --color-diff-removed-row-border: #634343;
-  --color-diff-moved-row-border: #bcca6f;
-  --color-diff-added-row-border: #314a37;
-  --color-diff-inactive: #353846;
-
-  --color-error-border: #792e2e;
-  --color-error-bg: #26181d;
-  --color-error-bg-active: #744;
-  --color-error-bg-hover: #633;
-  --color-error-text: #f85149;
-
-  --color-success-border: #1d572d;
-  --color-success-bg: #12261e;
-  --color-success-text: #39d353;
-
-  --color-warning-border: #624711;
-  --color-warning-bg: #272115;
-  --color-warning-text: #fbbd08;
-
-  --color-info-border: #214a81;
-  --color-info-bg: #121d2f;
-  --color-info-text: #4493f8;
-
-  --color-red-badge: #db2828;
-  --color-red-badge-bg: #db28281a;
-  --color-red-badge-hover-bg: #db28284d;
-
-  --color-green-badge: #39d353;
-  --color-green-badge-bg: #12261e;
-  --color-green-badge-hover-bg: #153d22;
-
-  --color-yellow-badge: #fbbd08;
-  --color-yellow-badge-bg: #fbbd081a;
-  --color-yellow-badge-hover-bg: #fbbd084d;
-
-  --color-orange-badge: #f2711c;
-  --color-orange-badge-bg: #f2711c1a;
-  --color-orange-badge-hover-bg: #f2711c4d;
-
-  --color-git: #f05133;
-  --color-body: #0d1117;
-
-  --color-box-header: #151b23;
-  --color-box-body: #0d1117;
-  --color-box-body-highlight: #262c36;
-
-  --color-text-dark: #dbe0ea;
-  --color-text: #dce2e7;
-  --color-text-light: #a6aab5;
-  --color-text-light-1: rgb(125, 133, 144);
-  --color-text-light-2: #8a8e99;
-  --color-text-light-3: #707687;
-
-  --color-footer: #010409;
-  --color-timeline: #4c525e;
-
-  --color-input-text: #d5dbe6;
-  --color-input-background: #2c2f35;
-  --color-input-toggle-background: #454a57;
-  --color-input-border: var(--color-light-border);
-  --color-input-border-hover: var(--color-light-border);
-
-  --color-light: #00000028;
-  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
-  --color-light-border: #3d444d;
-
-  --color-hover: #656c7633;
-  --color-hover-opaque: ;
-
-  --color-active: #161a21;
-  --color-menu: #0d1117;
-  --color-card: #0d1117;
-  --color-markup-table-row: #ffffff06;
-  --color-markup-code-block: #ffffff16;
-  --color-markup-code-inline: ;
-
-  --color-button: #212830;
-  --color-code-bg: #0d1117;
-
-  --color-shadow: #00000060;
-  --color-shadow-opaque: ;
-
-  --color-secondary-bg: #ffffff26;
-
-  --color-expand-button: #3c404d;
-  --color-placeholder-text: #8a8e99;
-  --color-editor-line-highlight: var(--color-primary-light-5);
-  --color-project-column-bg: var(--color-secondary-light-2);
-
-  --color-caret: var(--color-text);
-
-  --color-reaction-bg: #ffffff12;
-  --color-reaction-hover-bg: var(--color-primary-light-4);
-  --color-reaction-active-bg: var(--color-primary-light-5);
-
-  --color-tooltip-text: #fff;
-  --color-tooltip-bg: #000000f0;
-
-  --color-nav-bg: #010409;
-  --color-nav-hover-bg: var(--color-hover);
-  --color-nav-text: ;
-  --color-secondary-nav-bg: ;
-
-  --color-label-text: #fff;
-  --color-label-bg: #7c84974b;
-  --color-label-hover-bg: #7c8497a0;
-  --color-label-active-bg: #7c8497;
-  --color-accent: var(--color-primary-light-1);
-  --color-small-accent: var(--color-primary-light-5);
-
-  --color-highlight-bg: ;
-  --color-highlight-fg: ;
-  --color-overlay-backdrop: ;
-  accent-color: var(--color-accent);
-  color-scheme: dark;
-}