animal-island-ui-style

animal-island-ui スタイル

animal-island-ui は、オリジナルの居心地のよい島風デザインを備えた React + TypeScript コンポーネントライブラリです。40 個のコンポーネント、2 つの実行時依存関係（アイコン用の naive-icons、日付用の dayjs）、MIT ライセンスで提供されています。

ソースと正式なデザイン定義：https://github.com/guokaigdg/animal-island-ui

まずシナリオを選んでください

シナリオ	エントリー
React プロジェクト — animal-island-ui npm パッケージがインストール済み、またはインストール可能	references/react-project.md
単一の自己完結型 HTML ファイル — npm とバンドラーを使わず、CDN 経由の React + Babel ランタイムを使用	references/standalone-html.md

どちらのシナリオでも、コンポーネントカタログと以下の厳守事項を共通で使用します。

スタイルの概要

温かみのある羊皮紙色の背景（--animal-bg）、アースブラウンのテキスト（純粋な黒は使用しません）、ミントティールのプライマリアクセント、大きな角丸のピル形状（ボタンと入力欄は半径 50px のピル形状で、操作可能な要素の角丸は 12px 未満にしません）、プライマリボタンのみに適用する 3D の「ゲームボタン」風の重ね合わせシャドウ、丸みのある Nunito + Noto Sans SC のタイポグラフィ（本文のウェイトは 500、見出しは 600～900）、0.15～0.35 秒の柔らかな cubic-bezier(0.4, 0, 0.2, 1) モーション、そして幾何学的な形状（燕尾形リボンの Title、数字タイルの Countdown）と有機的な形状（SVG でクリップした Modal）の組み合わせです。

デザイントークン

同梱のスタイルシートでは、ライブラリのコンパイル時トークンに対応する --animal-* 接頭辞の実行時 CSS カスタムプロパティを :root に定義しています。グループは、プライマリ／ステータスカラー（ホバー／アクティブ／背景のバリエーションを含む）、テキストカラー、背景、境界線、角丸、間隔、シャドウ、フォントファミリー／サイズ、モーションの時間／イージング、コントロールの高さです。

使用する場面：

• ライブラリコンポーネントの隣に配置するレイアウトラッパー、カスタム要素、アプリ固有の装飾をスタイリングする場合は、生の HEX 値ではなく var(--animal-*) を使用してください。カスタム UI をパレットに合わせて統一できます。
• テーマ設定：ライブラリのスタイルをインポートした後で、利用側が --animal-* 変数を上書きできます。
• ライブラリを使わずにスタイルを再実装する場合（スタンドアロン HTML）：正確な値を含む完全な :root テンプレートはデザインシステムにあります — css-variables.md （raw: https://raw.githubusercontent.com/guokaigdg/animal-island-ui/main/docs/design-system/css-variables.md）。

トークンの値は、意図的にここでは再掲していません。正確な定義（すべての HEX／px／ms）： design-tokens.md。 コンポーネントごとのピクセル単位で正確な CSS（シャドウ、キーフレーム、クリップパス）： design-system/components/。

コンポーネントカタログ

props のリファレンスは、カテゴリ別に references/components/ にまとめられています（props、使用可能な値、デフォルト値 — ソースからコピー）：

カテゴリ	コンポーネント	リファレンス
一般	Button, Typewriter, Cursor	general.md
レイアウト	Card, Title, Divider, Collapse, Tabs	layout.md
フォームコントロール	Input, Switch, Checkbox, Radio, Rate, Select	form-controls.md
アップロード	Upload	upload.md
日付と時刻	DatePicker, TimePicker	date-time.md
フォームコンテナー	Form（+ FormItem, useForm）	Form.md
オーバーレイ	Modal, Drawer, Tooltip	overlays.md
フィードバック	Progress, Skeleton, BackTop, Loading, Countdown, Time	feedback.md
通知	Notification（命令型 API）	Notification.md
データ表示	Table, CodeBlock, Tag, Badge, Pagination	data-display.md
カレンダー	Calendar	calendar.md
スコアのカウントアップ	CountUp	CountUp.md
メディア	Image, Avatar, Carousel	media.md
装飾	Footer, Divider, Cursor, Typewriter, Background	decorative.md

厳守事項（違反はバグです）

1. props を捏造しないでください。すべての prop は、コンポーネントのリファレンス（インストール済みのプロジェクトでは、正となるパッケージの TypeScript 宣言）に記載されている必要があります。
2. アプリのエントリーポイントで、スタイルシートを正確に1回だけインポートしてください：import 'animal-island-ui/style'。インポートしないと、コンポーネントはスタイルなしで表示されます。
3. 純粋な黒（#000／#111）のテキストや、寒色系のグレー（#fafafa／#f5f5f5）の背景は使用しないでください。
4. 寒色系の青いフォーカスリングは使用しないでください。フォーカスカラーは黄色（#ffcc00 の入力）またはミント色のプライマリカラー（ボタン）です。
5. インタラクティブ要素の角の半径は12px未満にしないでください。ボタンと入力欄は50pxのピル型です。
6. 3Dピクセルスタックのシャドウは、プライマリボタン／デンジャープライマリボタン専用です。カードにボックスシャドウはありません。Switch に外側のシャドウはありません。Input のシャドウはオプトインです（shadow={true}）。
7. Modal の SVG ブロブのクリップパスはそのまま維持してください。角丸四角形にはしないでください。Title はスワローテイル型リボンです。ブロブ型、ピル型、単なるブロック型にはしないでください（Card type="title" はすでに存在しません）。
8. フォントは Nunito + Noto Sans SC を使用してください。ウェイトは400未満にしないでください。UI テキストに等幅フォントを使用しないでください（CodeBlock は除きます）。
9. モーションには、0.15～0.35秒の cubic-bezier(0.4, 0, 0.2, 1) を使用してください。
10. アイコンは外部の naive-icons パッケージから使用してください（例：import { FlowerIcon } from 'naive-icons'）。絵文字、Unicode 記号（✓ ✕ →）、手書きの SVG、サードパーティのアイコンライブラリは使用しないでください。可能な限り、絵文字よりも naive-icons のアイコンコンポーネントを優先してください。例外は Cursor のみです。CSS の cursor は画像 URL しか受け付けないため、そのアートワークはインライン SVG で手作業により作成されています。変更せずにそのまま使用してください。
11. Select は制御専用です（options、value、onChange のすべてが必須）。制御対象の Input／Switch／Checkbox／Radio／Rate にも onChange が必要です。
12. 生の HTML よりライブラリのコンポーネントを優先してください。表示されるネイティブの <button>、<input>、<select>、チェックボックス／ラジオボタンは使用せず、ラップするかライブラリの同等コンポーネントを使用してください。
13. インポート元はパッケージのルートと animal-island-ui/style のみにしてください。深い階層からのインポートは禁止です。
14. カスタム要素のスタイルには、色をハードコードせず var(--animal-*) トークンを使用してください。コンポーネントの色、角の半径、シャドウを上書きするために className／style を使用しないでください。