このデザインシステムについて

cloudensis で利用する CSS トークン・記事用スタイル・コンポーネントを提供します。 コンポーネントは Hono の JSX で実装されており、SSR・CSR・SSG のいずれからも利用できます。

導入

npm install @cloudensis/design-system

Tailwind CSS v4 のエントリで次の 1 行を読み込みます。

@import "tailwindcss";
@import "@cloudensis/design-system/index.css";

フォント（Outfit / Noto Sans JP）とトークン、記事用スタイルの定義に加えて、コンポーネントが使用している クラスの収集設定もこのファイルに含まれているため、利用側での @source の指定は不要です。

import { Button } from "@cloudensis/design-system/components/ui/button";

既定のスタイル

body には --color-bg / --color-fg とライト（300）の文字の太さが既定で適用されます。b / strong は --font-weight-strong（500）です。 利用側で bg-* や text-*、font-* のユーティリティクラスを指定すればいつでも上書きできます。

body {
	background-color: var(--color-bg);
	color: var(--color-fg);
	font-weight: var(--font-weight-base);
}

b,
strong {
	font-weight: var(--font-weight-strong);
}