From a99ba7f50a5f0018a08313019ed8ae97e28e5919 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 28 May 2025 22:53:58 +0800
Subject: [PATCH] style(stage-ui): new font

Co-authored-by: Rynco Maekawa <10259119+lynzrand@users.noreply.github.com>
---
 .../stage-ui/stories/TypographySans.story.vue | 70 +++++++++++++++++--
 uno.config.ts                                 | 22 +++---
 2 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/packages/stage-ui/stories/TypographySans.story.vue b/packages/stage-ui/stories/TypographySans.story.vue
index 4d4d8ae2d..003949376 100644
--- a/packages/stage-ui/stories/TypographySans.story.vue
+++ b/packages/stage-ui/stories/TypographySans.story.vue
@@ -2,10 +2,13 @@
   <Story
     title="Typography Sans"
     group="design-system"
-    :layout="{ type: 'grid', width: 200 }"
+    :layout="{ type: 'grid', width: 350 }"
   >
     <Variant title="Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-sans>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-sans>
             Hello, world!
@@ -21,7 +24,10 @@
     </Variant>
 
     <Variant title="Quanlai Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-quanlai>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-quanlai>
             Hello, world!
@@ -37,7 +43,10 @@
     </Variant>
 
     <Variant title="Xiaolai Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-xiaolai>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-xiaolai>
             Hello, world!
@@ -53,7 +62,10 @@
     </Variant>
 
     <Variant title="Cute Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-cuteen>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-cuteen>
             Hello, world!
@@ -69,7 +81,10 @@
     </Variant>
 
     <Variant title="Jura Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-jura>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-jura>
             Hello, world!
@@ -85,7 +100,10 @@
     </Variant>
 
     <Variant title="Tech Sans">
-      <div>
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-quicksand>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
         <div flex flex-col gap-1>
           <div font-quicksand>
             Hello, world!
@@ -99,5 +117,43 @@
         </div>
       </div>
     </Variant>
+
+    <Variant title="Urbanist">
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-urbanist>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
+        <div flex flex-col gap-1>
+          <div font-urbanist>
+            Hello, world!
+          </div>
+          <div bg="red-100 dark:red-900" w-fit font-quicksand>
+            こんにちは、世界！
+          </div>
+          <div bg="red-100 dark:red-900" w-fit font-quicksand>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="M PLUS Rounded 1c">
+      <div flex flex-col gap-1>
+        <div mb-3 text-4xl font-bold tracking-wide font-m-plus-rounded>
+          <span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
+        </div>
+        <div flex flex-col gap-1>
+          <div font-m-plus-rounded>
+            Hello, world!
+          </div>
+          <div font-m-plus-rounded>
+            こんにちは、世界！
+          </div>
+          <div font-m-plus-rounded>
+            <span bg="red-100 dark:red-900">你</span>好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/uno.config.ts b/uno.config.ts
index 26b348d14..1aa695ffd 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -63,22 +63,24 @@ export function sharedUnoConfig() {
       presetTypography(),
       presetWebFonts({
         fonts: {
-          sans: 'DM Sans',
-          serif: 'DM Serif Display',
-          mono: 'DM Mono',
-          cute: 'Kiwi Maru',
-          cuteen: 'Sniglet',
-          jura: 'Jura',
-          gugi: 'Gugi',
-          quicksand: 'Quicksand',
-          quanlai: {
+          'sans': 'DM Sans',
+          'serif': 'DM Serif Display',
+          'mono': 'DM Mono',
+          'cute': 'Kiwi Maru',
+          'cuteen': 'Sniglet',
+          'jura': 'Jura',
+          'gugi': 'Gugi',
+          'quicksand': 'Quicksand',
+          'quanlai': {
             name: 'cjkfonts AllSeto',
             provider: 'none',
           },
-          xiaolai: {
+          'xiaolai': {
             name: 'Xiaolai SC',
             provider: 'none',
           },
+          'urbanist': 'Urbanist',
+          'm-plus-rounded': 'M PLUS Rounded 1c',
         },
         timeouts: {
           warning: 5000,