enhance(style):调整PostCSS配置以及全局主题配置。

postcss.config.js

@@ -6,7 +6,9 @@ export default {
     "postcss-advanced-variables": {},
     "postcss-custom-properties": {},
     "postcss-color-mod-function": {},
-    "postcss-utilities": {},
+    "postcss-utilities": {
+      centerMethod: "flexbox",
+    },
     lost: {},
     precss: {},
     "postcss-preset-env": {

src/mixins.css

@@ -8,11 +8,24 @@
   $direction: row,
   $justify: flex-start,
   $align: flex-start,
-  $gap: 0
+  $gap: --space-none
 ) {
-  display: flex;
+  display: block flex;
   flex-direction: $direction;
   justify-content: $justify;
   align-items: $align;
-  gap: $gap;
+  gap: var($gap);
+}
+
+@mixin inline-flex(
+  $direction: row,
+  $justify: flex-start,
+  $align: flex-start,
+  $gap: --spacing-none
+) {
+  display: inline flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  gap: var($gap);
 }

src/styles.css

@@ -30,6 +30,7 @@
 }
 
 body {
+  font-size: var(--font-size-m);
   background-color: rgba(219, 219, 219, 0.05);
   @include dark-mode {
     background-color: rgba(36, 36, 36, 0.05);
@@ -42,3 +43,7 @@ body,
   overflow: hidden;
   user-select: none;
 }
+
+a {
+  text-decoration: none;
+}

src/variables.css

@@ -18,6 +18,30 @@
   --palette-pink: #f018e8;
   --palette-blue-gray: #63687c;
   --palette-indigo: #4c5897;
+  --palette-white: #ffffff;
+  --palette-black: #000000;
+
+  --palette-white-0: var(--palette-white);
+  --palette-white-1: color-mod(var(--palette-white) shade(10%));
+  --palette-white-2: color-mod(var(--palette-white) shade(20%));
+  --palette-white-3: color-mod(var(--palette-white) shade(30%));
+  --palette-white-4: color-mod(var(--palette-white) shade(40%));
+  --palette-white-5: color-mod(var(--palette-white) shade(50%));
+  --palette-white-6: color-mod(var(--palette-white) shade(60%));
+  --palette-white-7: color-mod(var(--palette-white) shade(70%));
+  --palette-white-8: color-mod(var(--palette-white) shade(80%));
+  --palette-white-9: color-mod(var(--palette-white) shade(90%));
+
+  --palette-black-0: color-mod(var(--palette-black) tint(90%));
+  --palette-black-1: color-mod(var(--palette-black) tint(80%));
+  --palette-black-2: color-mod(var(--palette-black) tint(70%));
+  --palette-black-3: color-mod(var(--palette-black) tint(60%));
+  --palette-black-4: color-mod(var(--palette-black) tint(50%));
+  --palette-black-5: color-mod(var(--palette-black) tint(40%));
+  --palette-black-6: color-mod(var(--palette-black) tint(30%));
+  --palette-black-7: color-mod(var(--palette-black) tint(20%));
+  --palette-black-8: color-mod(var(--palette-black) tint(10%));
+  --palette-black-9: var(--palette-black);
 
   --palette-gray-0: color-mod(var(--palette-gray) tint(60%));
   --palette-gray-1: color-mod(var(--palette-gray) tint(50%));
@@ -184,6 +208,7 @@
   --palette-indigo-8: color-mod(var(--palette-indigo) shade(20%));
   --palette-indigo-9: color-mod(var(--palette-indigo) shade(30%));
 
+  --spacing-none: 0;
   --spacing-xxs: 0.25rem;
   --spacing-xs: 0.5rem;
   --spacing-s: 0.75rem;
@@ -191,4 +216,21 @@
   --spacing-l: 1.5rem;
   --spacing-xl: 2rem;
   --spacing-xxl: 3rem;
+
+  --border-radius-none: 0;
+  --border-radius-xxs: 2px;
+  --border-radius-xs: 4px;
+  --border-radius-s: 6px;
+  --border-radius-m: 8px;
+  --border-radius-l: 12px;
+  --border-radius-xl: 16px;
+  --border-radius-xxl: 24px;
+
+  --font-size-xxs: 0.5rem;
+  --font-size-xs: 0.65rem;
+  --font-size-s: 0.875rem;
+  --font-size-m: 1rem;
+  --font-size-l: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 2rem;
 }