调整基础样式。

src/component.css

@@ -0,0 +1,106 @@
+@layer base {
+  a,
+  a:hover,
+  a:visited {
+    text-decoration: none;
+    color: var(--color-fg);
+  }
+
+  .center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* 按钮默认样式 */
+  button {
+    --button-neutral-bg: light-dark(var(--color-yuzanlv), var(--color-lvhui));
+    border: none;
+    border-radius: var(--border-radius-xxs);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+    color: light-dark(var(--color-typo-light), var(--color-typo-dark));
+    background-color: var(--button-neutral-bg);
+    &:hover {
+      background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
+    }
+    &:active {
+      background-color: oklch(from var(--button-neutral-bg) calc(l * 0.9) c h);
+    }
+    &[disabled] {
+      color: var(--color-typo-dark-darkness);
+      background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
+    }
+    &.primary {
+      color: var(--color-typo-dark-lightness);
+      background-color: var(--color-primary);
+      &:hover {
+        background-color: var(--color-primary-hover);
+      }
+      &:active {
+        background-color: var(--color-primary-active);
+      }
+      &[disabled] {
+        color: var(--color-typo-dark-darkness);
+        background-color: var(--color-primary-disabled);
+      }
+    }
+    &.secondary {
+      color: var(--color-typo-dark-lightness);
+      background-color: var(--color-secondary);
+      &:hover {
+        background-color: var(--color-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-secondary-active);
+      }
+      &[disabled] {
+        color: var(--color-typo-dark-darkness);
+        background-color: var(--color-secondary-disabled);
+      }
+    }
+    &.accent {
+      color: var(--color-typo-dark-lightness);
+      background-color: var(--color-accent);
+      &:hover {
+        background-color: var(--color-accent-hover);
+      }
+      &:active {
+        background-color: var(--color-accent-active);
+      }
+      &[disabled] {
+        color: var(--color-typo-dark-darkness);
+        background-color: var(--color-accent-disabled);
+      }
+    }
+    &.danger {
+      color: var(--color-typo-dark-lightness);
+      background-color: var(--color-danger);
+      &:hover {
+        background-color: var(--color-danger-hover);
+      }
+      &:active {
+        background-color: var(--color-danger-active);
+      }
+      &[disabled] {
+        color: var(--color-typo-dark-darkness);
+        background-color: var(--color-danger-disabled);
+      }
+    }
+    &.warn {
+      color: var(--color-typo-dark-lightness);
+      background-color: var(--color-warn);
+      &:hover {
+        background-color: var(--color-warn-hover);
+      }
+      &:active {
+        background-color: var(--color-warn-active);
+      }
+      &[disabled] {
+        color: var(--color-typo-dark-darkness);
+        background-color: var(--color-warn-disabled);
+      }
+    }
+  }
+}

src/index.css

@@ -1,68 +1,4 @@
-:root {
+@layer theme, base, components, utilities, pages;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+@import 'sanitize.css' layer(base);
-  line-height: 1.5;
+@import './theme.css';
-  font-weight: 400;
+@import './component.css';
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/theme.css

@@ -0,0 +1,59 @@
+@import './variables.css' layer(theme);
+
+@layer base {
+  :root {
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 62.5%;
+    line-height: 1.5em;
+    font-weight: 400;
+
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    user-select: none;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+
+    --color-primary: var(--color-yejuzi);
+    --color-neutral: var(--color-xiayunhui);
+    --color-typo-light: var(--color-meihei);
+    --color-typo-dark: var(--color-yudubai);
+
+    --color-danger: var(--color-hedinghong);
+    --color-warn: var(--color-furonghong);
+    --color-success: var(--color-gongdianlv);
+    --color-info: var(--color-pinlan);
+
+    --color-fg: light-dark(var(--color-meihei), var(--color-yudubai));
+    --color-bg: light-dark(var(--color-yuebai), var(--color-qihei));
+  }
+
+  html,
+  body {
+    color-scheme: dark;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    &[data-theme='light'] {
+      color-scheme: light;
+    }
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+  }
+
+  body {
+    color: var(--color-fg);
+    background-color: var(--color-bg);
+  }
+
+  #root {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}

src/variables.css

@@ -0,0 +1,167 @@
+/* 定义应用原始色板 */
+@layer theme {
+  :root {
+    --font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+    --color-light-fg: hsla(0, 0%, 0%, 0.87);
+    --color-light-bg: hsla(0, 0%, 86%, 0.85);
+    --color-dark-fg: hsla(0, 0%, 100%, 0.87);
+    --color-dark-bg: hsla(0, 0%, 14%, 0.85);
+    --color-slate: hsl(215, 19%, 35%);
+    --color-gray: hsl(0, 0%, 52%);
+    --color-zinc: hsl(240, 5%, 34%);
+    --color-neutral: hsl(0, 0%, 32%);
+    --color-stone: hsl(33, 5%, 32%);
+    --color-bright-blue: hsl(217, 100%, 50%);
+    --color-blue: hsl(233, 73%, 45%);
+    --color-yellow: hsl(57, 69%, 52%);
+    --color-bright-green: hsl(99, 67%, 52%);
+    --color-green: hsl(140, 72%, 52%);
+    --color-tomato: hsl(21, 88%, 52%);
+    --color-bright-red: hsl(341, 88%, 52%);
+    --color-red: hsl(0, 89%, 52%);
+    --color-bright-orange: hsl(40, 100%, 51%);
+    --color-orange: hsl(32, 98%, 51%);
+    --color-violet: hsl(267, 70%, 52%);
+    --color-pink: hsl(302, 88%, 52%);
+    --color-blue-gray: hsl(228, 11%, 44%);
+    --color-indigo: hsl(230, 33%, 45%);
+    --color-white: hsl(0, 0%, 100%);
+    --color-black: hsl(0, 0%, 0%);
+
+    /* chinese colors */
+    /* theme colors */
+    --color-yuanweilan: hsl(197, 80%, 40%);
+    --color-pinlan: hsl(207, 61%, 43%);
+    --color-cuilan: hsl(188, 71%, 41%);
+    --color-xinglan: hsl(206, 38%, 69%);
+    --color-mantianxingzi: hsl(238, 46%, 33%);
+    --color-yuhong: hsl(356, 49%, 52%);
+    --color-hedinghong: hsl(4, 80%, 46%);
+    --color-jidanhuang: hsl(42, 97%, 53%);
+    --color-furonghong: hsl(17, 94%, 61%);
+    --color-baoshilv: hsl(117, 49%, 46%);
+    --color-gongdianlv: hsl(146, 62%, 33%);
+    --color-bohelv: hsl(148, 60%, 31%);
+    --color-dancuilv: hsl(125, 28%, 83%);
+    --color-youlv: hsl(118, 26%, 19%);
+    --color-jingtailan: hsl(207, 65%, 43%);
+    --color-yejuzi: hsl(240, 25%, 43%);
+    /* background colors */
+    --color-yunshanlv: hsl(146, 25%, 11%);
+    --color-wumeizi: hsl(305, 22%, 10%);
+    --color-yanhanlan: hsl(222, 31%, 11%);
+    --color-zise: hsl(0, 20%, 24%);
+    --color-meihei: hsl(18, 21%, 16%);
+    --color-qihei: hsl(231, 23%, 11%);
+    --color-mangconglv: hsl(162, 20%, 10%);
+    --color-hujishenglv: hsl(130, 7%, 18%);
+    /* neutral colors */
+    --color-yuanshanzi: hsl(240, 11%, 82%);
+    --color-xinhui: hsl(351, 3%, 46%);
+    --color-xuanqing: hsl(246, 14%, 27%);
+    --color-yaqing: hsl(197, 10%, 29%);
+    --color-mose: hsl(205, 15%, 37%);
+    --color-lvhui: hsl(163, 20%, 24%);
+    --color-xiayunhui: hsl(184, 8%, 41%);
+    --color-yuzanlv: hsl(148, 26%, 72%);
+    --color-yueyingbai: hsl(165, 3%, 76%);
+    --color-yudubai: hsl(42, 38%, 95%);
+    --color-qianbai: hsl(240, 15%, 95%);
+    --color-yuebai: hsl(189, 87%, 94%);
+
+    --spacing: 0.2rem;
+    --spacing-n: calc(var(--spacing) * 0);
+    --spacing-xxs: calc(var(--spacing) * 1);
+    --spacing-xs: calc(var(--spacing) * 2);
+    --spacing-s: calc(var(--spacing) * 3);
+    --spacing-m: calc(var(--spacing) * 4);
+    --spacing-l: calc(var(--spacing) * 6);
+    --spacing-xl: calc(var(--spacing) * 8);
+    --spacing-xxl: calc(var(--spacing) * 12);
+
+    --border-radius: 2px;
+    --border-radius-n: calc(var(--border-radius) * 0);
+    --border-radius-xxs: calc(var(--border-radius) * 1);
+    --border-radius-xs: calc(var(--border-radius) * 2);
+    --border-radius-s: calc(var(--border-radius) * 3);
+    --border-radius-m: calc(var(--border-radius) * 4);
+    --border-radius-l: calc(var(--border-radius) * 6);
+    --border-radius-xl: calc(var(--border-radius) * 8);
+    --border-radius-xxl: calc(var(--border-radius) * 12);
+
+    --font-size: 1rem;
+    --font-size-xxs: calc(var(--font-size) * 0.5);
+    --font-size-xs: calc(var(--font-size) * 0.65);
+    --font-size-s: calc(var(--font-size) * 0.8);
+    --font-size-m: calc(var(--font-size) * 1);
+    --font-size-l: calc(var(--font-size) * 1.25);
+    --font-size-xl: calc(var(--font-size) * 1.5);
+    --font-size-xxl: calc(var(--font-size) * 2);
+
+    --color-primary: var(--color-bright-blue);
+    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.3) c h);
+    --color-primary-active: oklch(from var(--color-primary) calc(l * 0.8) c h);
+    --color-primary-focus: oklch(from var(--color-primary) calc(l + (1 - l) * 0.5) c h);
+    --color-primary-disabled: oklch(from var(--color-primary) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-secondary: oklch(from var(--color-primary) l c calc(h + 30));
+    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.3) c h);
+    --color-secondary-active: oklch(from var(--color-secondary) calc(l * 0.8) c h);
+    --color-secondary-focus: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.5) c h);
+    --color-secondary-dissabled: oklch(from var(--color-secondary) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-accent: oklch(from var(--color-primary) l c calc(h + 180 - 30));
+    --color-accent-hover: oklch(from var(--color-accent) calc(l + (1 - l) * 0.3) c h);
+    --color-accent-active: oklch(from var(--color-accent) calc(l * 0.8) c h);
+    --color-accent-focus: oklch(from var(--color-accent) calc(l + (1 - l) * 0.5) c h);
+    --color-accent-disabled: oklch(from var(--color-accent) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-neutral: var(--color-slate);
+    --color-neutral-hover: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
+    --color-neutral-active: oklch(from var(--color-neutral) calc(l * 0.8) c h);
+    --color-neutral-focus: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.5) c h);
+    --color-neutral-disabled: oklch(from var(--color-neutral) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-danger: var(--color-red);
+    --color-danger-hover: oklch(from var(--color-danger) calc(l + (1 - l) * 0.3) c h);
+    --color-danger-active: oklch(from var(--color-danger) calc(l * 0.8) c h);
+    --color-danger-focus: oklch(from var(--color-danger) calc(l + (1 - l) * 0.5) c h);
+    --color-danger-disabled: oklch(from var(--color-danger) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-warn: var(--color-orange);
+    --color-warn-hover: oklch(from var(--color-warn) calc(l + (1 - l) * 0.3) c h);
+    --color-warn-active: oklch(from var(--color-warn) calc(l * 0.8) c h);
+    --color-warn-focus: oklch(from var(--color-warn) calc(l + (1 - l) * 0.5) c h);
+    --color-warn-disabled: oklch(from var(--color-warn) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-success: var(--color-green);
+    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.3) c h);
+    --color-success-active: oklch(from var(--color-success) calc(l * 0.8) c h);
+    --color-success-focus: oklch(from var(--color-success) calc(l + (1 - l) * 0.5) c h);
+    --dolor-success-disabled: oklch(from var(--color-success) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-info: var(--color-indigo);
+    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.3) c h);
+    --color-info-active: oklch(from var(--color-info) calc(l * 0.8) c h);
+    --color-info-focus: oklch(from var(--color-info) calc(l + (1 - l) * 0.5) c h);
+    --color-info-disabled: oklch(from var(--color-info) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-border: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
+    --color-border-focused: oklch(from var(--color-border) calc(l + (1 - l) * 0.2) c h);
+
+    --color-link: var(--color-blue);
+    --color-link-hover: oklch(from var(--color-link) calc(l + (1 - l) * 0.3) c h);
+    --color-link-active: oklch(from var(--color-link) calc(l * 0.8) c h);
+    --color-link-focus: oklch(from var(--color-link) calc(l + (1 - l) * 0.5) c h);
+    --color-link-disabled: oklch(from var(--color-link) calc(l * 0.8) calc(c * 0.1) h);
+
+    --color-typo-light: var(--color-xuanqing);
+    --color-typo-light-lightness: oklch(from var(--color-typo-light) calc(l + (1 - l) * 0.5) c h);
+    --color-typo-light-darkness: oklch(from var(--color-typo-light) calc(l * 0.5) c h);
+
+    --color-typo-dark: var(--color-yudubai);
+    --color-typo-dark-lightness: oklch(from var(--color-typo-dark) calc(l + (1 - l) * 0.5) c h);
+    --color-typo-dark-darkness: oklch(from var(--color-typo-dark) calc(l * 0.5) c h);
+  }
+}