From 4135ab5c8f4b1c394acb1269614e570e226f0db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 25 Dec 2024 16:42:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=90=84=E5=BC=8F=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=9A=84=E6=A0=B7=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component.css | 48 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/component.css b/src/component.css
index 11a7298..5893a6b 100644
--- a/src/component.css
+++ b/src/component.css
@@ -3,7 +3,7 @@
   a:hover,
   a:visited {
     text-decoration: none;
-    color: var(--color-fg);
+    color: var(--color-typo-dark);
   }
 
   .center {
@@ -20,7 +20,9 @@
     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));
+    font-size: var(--font-size-s);
+    line-height: 1.5em;
+    color: 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);
@@ -32,6 +34,15 @@
       color: var(--color-typo-dark-darkness);
       background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
     }
+    &.small {
+      font-size: var(--font-size-xs);
+    }
+    &.large {
+      font-size: var(--font-size-m);
+    }
+    &.larger {
+      font-size: var(--font-size-l);
+    }
     &.primary {
       color: var(--color-typo-dark-lightness);
       background-color: var(--color-primary);
@@ -103,4 +114,37 @@
       }
     }
   }
+
+  /* 输入框以及输入框组合体默认样式 */
+  :where(input, textarea) {
+    border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
+    border-radius: var(--border-radius-xxs);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+    background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
+    .input_wrapper & {
+      padding: 0;
+      border: none;
+      flex-grow: 1;
+    }
+    &:focus {
+      outline: none;
+    }
+    &[type='number']::-webkit-outer-spin-button,
+    &[type='number']::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+  textarea {
+    resize: none;
+  }
+  .input_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
+    border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
+    padding: calc(var(--spacing) * 2);
+    background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
+  }
 }