nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

feat(ui): typography

Browse Source
This commit is contained in:
Neko Ayaka
2025-04-26 15:10:51 +08:00
parent 2e8542fef1
commit 56161afbbc
3 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stage-ui/histoire.config.ts
+4
View File
@@ -26,6 +26,10 @@ export default defineConfig({
id: 'design-system',
title: 'Design System',
},
{
id: 'typography',
title: 'Typography',
},
{
id: 'common',
title: 'Common',
packages/stage-ui/src/components/Typography/Mono.story.vue
+23
View File
@@ -0,0 +1,23 @@
<template>
<Story
title="Mono"
group="typography"
:layout="{ type: 'grid', width: 500 }"
>
<Variant title="Mono">
<div>
<div>
<div font-mono>
Hello, world!
</div>
<div font-mono>
こんにちは、世界！
</div>
<div font-mono>
你好，世界！
</div>
</div>
</div>
</Variant>
</Story>
</template>
packages/stage-ui/src/components/Typography/Sans.story.vue
+71
View File
@@ -0,0 +1,71 @@
<template>
<Story
title="Sans"
group="typography"
:layout="{ type: 'grid', width: 500 }"
>
<Variant title="Sans">
<div>
<div flex flex-col gap-1>
<div font-sans>
Hello, world!
</div>
<div font-sans>
こんにちは、世界！
</div>
<div font-sans>
你好，世界！
</div>
</div>
</div>
</Variant>
<Variant title="Cute Sans">
<div>
<div flex flex-col gap-1>
<div font-cuteen>
Hello, world!
</div>
<div font-cute>
こんにちは、世界！
</div>
<div font-cute>
你好，世界！
</div>
</div>
</div>
</Variant>
<Variant title="Jura Sans">
<div>
<div flex flex-col gap-1>
<div font-jura>
Hello, world!
</div>
<div font-jura bg="red-100" w-fit>
こんにちは、世界！
</div>
<div font-jura bg="red-100" w-fit>
你好，世界！
</div>
</div>
</div>
</Variant>
<Variant title="Tech Sans">
<div>
<div flex flex-col gap-1>
<div font-quicksand>
Hello, world!
</div>
<div font-quicksand bg="red-100" w-fit>
こんにちは、世界！
</div>
<div font-quicksand bg="red-100" w-fit>
你好，世界！
</div>
</div>
</div>
</Variant>
</Story>
</template>