はじめに

よいらぼのデザインシステム。英語の正式名は Yoiai Labs Design System。Yoiai UI はその実装。公開の場所は ui.yoiailabs.com。npm は @yoiailabs/ui。

トークンと部品の小さな系。三段。思想 → 基礎 → 部品。原則が先。トークンがらしさ。部品はトークンの上に乗る。

• 思想 — 5つの原則
• 基礎 — 色、文字、一段の明暗
• 部品 — Card、Button など

ライト / ダークは prefers-color-scheme。切り替えは置かない。

入れ方

bun add @yoiailabs/ui

ライブラリは source export。アプリの Vite がコンパイルする。

@import "tailwindcss";
@import "@yoiailabs/ui/styles.css";

/* パスは、この CSS からの相対。 */
@source "../node_modules/@yoiailabs/ui/src";

アプリ側でこのパッケージをスキャンすること。@source がなければクラスが消える。

export default defineConfig({
  ssr: { noExternal: ["@yoiailabs/ui"] },
})