@omni-stove/retort

omni-stove のデザインシステム。React 向け。

Install

pnpm add @omni-stove/retort
# or
npm i @omni-stove/retort

peer 依存:

• react ^18 || ^19
• react-dom ^18 || ^19

Usage

アプリのエントリで CSS を 1 度だけ読み込む。tokens.css (CSS 変数) と styles.css (コンポーネント CSS、tokens.css を内包) のどちらかを選ぶ。

// アプリのエントリ (例: main.tsx)
import '@omni-stove/retort/styles.css';

コンポーネントは @omni-stove/retort/<ComponentName> で個別 import する。

import { Button } from '@omni-stove/retort/Button';

export function Example() {
  return <Button onPress={() => console.log('pressed')}>保存</Button>;
}

--ds-color-primary をルートで上書きするとブランドカラーを差し替えられる (詳細は docs/tokens.md)。

理想

アプリケーションの実装はコンポーネントしか使わない。

アプリは DS が公開するコンポーネントと prop だけで画面を組み立てる。アプリ側に現れるのは以下に限る:

• DS コンポーネントと、その公開 prop
• DS コンポーネントを組み合わせたアプリ独自のコンポーネント (DOM プリミティブは直書きしない)
• 汎用型 (文字列・数値・File / { id, label } 等) での値の受け渡し
• ルート 1 箇所での --ds-color-primary 上書き

詳細な規則はすべてこの理想から逆算されている。

目的

• UI の一貫性を担保する。全プロダクトで同じ顔・同じ操作感にする。
• AI エージェントが書きやすく・間違えにくい API にする。prop の選択肢を絞り、決定ポイントを減らす。
• AI が DS を読み書きすることを前提に設計する。人間が手でコンポーネントを書き下したり、デザイナーが Figma ライブラリを職人的にメンテしたりする運用は想定しない。

AI で実装スピードが上がっているため、一貫性を最優先の制約として置く。

Setup

make setup
pnpm dev