wip: use ubuntu font

cdsctf · Sep 6, 2024 · 98ded6a · 98ded6a
1 parent a41b7b8
commit 98ded6a
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 63 deletions.
diff --git a/public/fonts/baloo-bhaijaan-2-latin-wght-normal.woff2 b/public/fonts/baloo-bhaijaan-2-latin-wght-normal.woff2
diff --git a/public/fonts/ubuntu.woff2 b/public/fonts/ubuntu.woff2
diff --git a/src/components/atoms/TextInput.tsx b/src/components/atoms/TextInput.tsx
@@ -13,6 +13,7 @@ export interface InputProps extends ComponentProps<"input"> {
     invalid?: boolean;
     value?: string;
     label?: string;
+    icon?: React.ReactNode;
     placeholder?: string;
     helperText?: string;
     errorText?: string;
@@ -27,6 +28,7 @@ export default function Input(props: InputProps) {
         clearable = false,
         password = false,
         invalid = false,
+        icon,
         value = "",
         onChange,
         label = "",
@@ -38,7 +40,7 @@ export default function Input(props: InputProps) {
     } = props;
 
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
+    const [_, setIsFocused] = useState(false);
     const handleFocus = () => setIsFocused(true);
     const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
         if (!e.target.value) setIsFocused(false);
@@ -65,29 +67,22 @@ export default function Input(props: InputProps) {
 
     return (
         <div className={styles["root"]} style={variables} {...rest}>
-            <span className={styles["label"]}>{label}</span>
-            <span className={styles["helper-text"]}>{helperText}</span>
+            <label className={styles["label"]}>{label}</label>
+            <p className={styles["helper-text"]}>{helperText}</p>
             <div className={styles["container"]}>
                 <div className={styles["wrapper"]}>
+                    {icon && <div className={styles["icon"]}>{icon}</div>}
                     <input
                         value={value}
                         type={
                             password && !isPasswordVisible ? "password" : "text"
                         }
+                        placeholder={placeholder}
                         onChange={onChange}
                         onFocus={handleFocus}
                         onBlur={handleBlur}
                         style={style}
                     />
-                    <span
-                        className={`${styles["placeholder"]} ${
-                            isFocused || value
-                                ? styles["placeholder-active"]
-                                : ""
-                        }`}
-                    >
-                        {placeholder}
-                    </span>
                     {clearable && (
                         <button
                             className={styles["clear-button"]}
@@ -108,9 +103,7 @@ export default function Input(props: InputProps) {
                     )}
                 </div>
             </div>
-            {invalid && (
-                <span className={styles["error-text"]}>{errorText}</span>
-            )}
+            {invalid && <p className={styles["error-text"]}>{errorText}</p>}
         </div>
     );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import DatetimePicker from "@/components/atoms/DatetimePicker";
 import Dialog from "@/components/atoms/Dialog";
 import TextInput from "@/components/atoms/TextInput";
 import Tooltip from "@/components/atoms/Tooltip";
+import UserBold from "~icons/solar/user-bold";
 import { useToastStore } from "@/stores/toast";
 import { DateTime } from "luxon";
 import { useState } from "react";
@@ -52,36 +53,39 @@ export default function Page() {
                     </Button>
                 </div>
                 <p>
-                    甲乙丙丁Lorem ipsum dolor sit amet, consectetur adipiscing
-                    elit. Integer nec odio. Praesent libero. Sed cursus ante
-                    dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
-                    imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
-                    tellus sed augue semper porta. Mauris massa. Vestibulum
-                    lacinia arcu eget nulla. Class aptent taciti sociosqu ad
-                    litora torquent per conubia nostra, per inceptos himenaeos.
-                    Curabitur sodales ligula in libero. Sed dignissim lacinia
-                    nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In
-                    scelerisque sem at dolor. Maecenas mattis. Sed convallis
-                    tristique sem. Proin ut ligula vel nunc egestas porttitor.
-                    Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
-                    massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris
-                    ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
-                    euismod in, nibh. Quisque volutpat condimentum velit. Class
-                    aptent taciti sociosqu ad litora torquent per conubia
-                    nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia,
-                    urna non tincidunt mattis, tortor neque adipiscing diam, a
-                    cursus ipsum ante quis turpis.
+                    在现代社会中，technology
+                    已经成为生活中不可或缺的一部分。无论是使用 smartphones 还是
+                    laptops，我们都能感受到 innovation 带来的便利。同时，
+                    <span
+                        style={{
+                            fontStyle: "italic",
+                        }}
+                    >
+                        communication
+                    </span>
+                    方式也因为 Internet 而发生了巨大的变化，人们可以通过
+                    <span
+                        style={{
+                            fontWeight: 800,
+                        }}
+                    >
+                        email
+                    </span>
+                    、social media
+                    与世界各地的朋友保持联系。这种中英文的混合使用，不仅方便了表达，也让我们的生活充满了
+                    globalization 的色彩。
                 </p>
                 <TextInput
                     clearable
                     // passwd
                     invalid
                     value={value}
                     onChange={(e) => setValue(e.target.value)}
-                    // label={"用户名"}
+                    label={"用户名"}
                     placeholder="Username"
-                    // helperText={"请输入用户名 helperText"}
-                    // errorText={"请输入用户名 errorText"}
+                    helperText={"请输入用户名 helperText"}
+                    errorText={"请输入用户名 errorText"}
+                    icon={<UserBold />}
                 />
                 <TextInput
                     // clearable

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -1,10 +1,9 @@
 @font-face {
-    font-family: "Baloo Bhaijaan 2";
+    font-family: "ubuntu";
     font-style: normal;
     font-display: swap;
     font-weight: 400 800;
-    src: url("/fonts/baloo-bhaijaan-2-latin-wght-normal.woff2")
-        format("woff2-variations");
+    src: url("/fonts/ubuntu.woff2") format("woff2-variations");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
         U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
         U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

diff --git a/src/styles/components/atoms/TextInput.module.scss b/src/styles/components/atoms/TextInput.module.scss
@@ -4,23 +4,29 @@ $bg-color: var(--bg-color);
 $border-color: var(--border-color);
 
 .root {
+    width: fit-content;
     display: flex;
     flex-direction: column;
     align-items: start;
     justify-content: start;
 
     .label {
-        margin: 0 4px;
-        font-size: 14px;
+        display: inline-block;
+        margin: 2px 5px;
+        font-size: 0.9;
+        font-weight: 500;
+        line-height: 1;
+        cursor: default;
     }
 
     .helper-text {
-        margin: 2px 4px;
+        margin: 2px 5px;
         font-size: 11px;
+        line-height: 1.5;
     }
 
     .error-text {
-        margin: 2px 4px;
+        margin: 5px 5px;
         color: var(--color-error);
         font-size: 12px;
     }
@@ -41,6 +47,7 @@ $border-color: var(--border-color);
         border-radius: 12px;
         padding: 8px 10px;
         box-shadow: 0 3px 0 #e5e5e5;
+        gap: 5px;
         @include mixins.transition;
 
         @include mixins.dark {
@@ -49,18 +56,36 @@ $border-color: var(--border-color);
             box-shadow: 0 3px 0 #37464f;
         }
 
+        .icon {
+            color: #e5e5e5;
+            @include mixins.transition;
+
+            @include mixins.dark {
+                color: #37464f;
+            }
+        }
+
         &:hover {
             border-color: $border-color;
             box-shadow: 0 3px 0 $border-color;
+
+            .icon {
+                color: $border-color;
+            }
         }
 
         &:focus-within {
             border-color: $border-color;
             box-shadow: 0 3px 0 $border-color;
 
+            .icon {
+                color: $border-color;
+            }
+
             .clear-button {
                 opacity: 0.5;
             }
+
             .toggle-button {
                 opacity: 0.5;
             }
@@ -72,14 +97,15 @@ $border-color: var(--border-color);
             border: none;
             outline: none;
             caret-color: $border-color;
-            font-size: 16px;
+            font-size: 15px;
+            line-height: 0.8;
 
             &:disabled {
                 cursor: not-allowed;
             }
         }
 
-        .input[type="password"] {
+        input[type="password"] {
             &::-webkit-textfield-decoration-container,
             &::-webkit-password-toggle-button,
             &::-ms-reveal,
@@ -88,21 +114,6 @@ $border-color: var(--border-color);
             }
         }
 
-        .placeholder {
-            color: #37464f;
-            position: absolute;
-            font-size: 12px;
-            pointer-events: none;
-            transition: all 0.3s ease;
-            z-index: 1;
-            user-select: none;
-        }
-
-        .placeholder-active {
-            transform: translateY(-32px) translateX(-15px) scale(0.8);
-            color: var(--border-color);
-        }
-
         .clear-button {
             opacity: 0;
             display: flex;

diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss
@@ -9,11 +9,11 @@
 
 html,
 :host {
-    line-height: 1.5rem;
+    line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     tab-size: 4;
-    font-family: "Baloo Bhaijaan 2", ui-sans-serif, system-ui, sans-serif,
+    font-family: ubuntu, ui-sans-serif, system-ui, sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
     font-feature-settings: normal;