デザイン理念

lh-ui-plus は「国風の美で、コードの基を築く」をデザイン哲学とし、中国の伝統美学をモダンなフロントエンドのエンジニアリング実践に融合させています。

中華風の美学

配色体系

色	由来	色値	用途
靛藍	青花瓷の釉色	#2B4C7C	主要色（--lh-primary-color）
松花绿（松花緑）	竹の影の青々しさ	#5B8C5A	成功色（--lh-success-color）
藤黄	秋の葉の黄金色	#C4A35A	警告色（--lh-warning-color）
朱砂	印泥の朱赤	#B23A3A	危険色（--lh-danger-color）
黛色	水墨の淡彩	#7A7A7A	情報色（--lh-info-color）
水墨	墨の五色	#2C2C2C	文字色（--lh-text-color-primary）
宣纸	古い宣紙の白	#FAF6F0	背景色（--lh-bg-color）

完全なカラーパレットと階層はテーマカスタマイズを参照してください。

紋様背景

コンポーネントライブラリには 6 種類の伝統的な紋様の SVG 背景が内蔵されています（--lh-bg-pattern で適用、値は対応する CSS 変数です）：

• willow — 柳葉紋（柔らかく上品、--lh-pattern-willow）
• cloud — 祥雲紋（吉祥と如意、--lh-pattern-cloud）
• water — 水波紋（流れるような自然さ、--lh-pattern-water）
• snow — 雪花紋（六角のきらめき、--lh-pattern-snow）
• plum — 梅花紋（高潔で清雅、--lh-pattern-plum）
• bamboo — 竹葉紋（強靭で屈しない、--lh-pattern-bamboo）

クロスフレームワークアーキテクチャ

コアロジックは純関数として抽出され、フレームワークから分離されています：

@lh-ui/share           純粋なロジック層 + スタイルソース（フレームワーク依存なし、npm 依存として導入）
packages/components/    Vue 3 コンポーネントのラップ層
packages/composables/  Vue 専用の composables

TypeScript 駆動

全リンクにわたる TypeScript の型安全性：

• Props/Emit の強い型定義
• イベントコールバックのシグネチャがペイロードの型を運ぶ
• IDE のスマート補完
• 型カバレッジは pnpm typecheck で守護（LhSxProps などの動的なユーティリティ型は制御可能なインデックスシグネチャを保持）

CSS 変数テーマシステム

88 以上の CSS デザイントークンを --lh-* という命名プレフィックスで管理します。リアルタイムのテーマ切り替え、ダークモード、ConfigProvider によるグローバル設定をサポートしています。

国際化

ConfigProvider の設定体系を内蔵し、多言語の一元管理をサポートしています。 現在完全な言語パックが内蔵されているのは zh-CN と en-US です。ja-JP、ko-KR、de-DE、fr-FR は構造プレースホルダーとして登録されており（未翻訳部分は当面英語でフォールバック）、国際化に従って拡充できます。

アクセシビリティ

• キーボードナビゲーション
• ARIA 属性
• WCAG 2.1 AA のカラーコントラスト

国風の美で、コードの基を築く。