紹介
lh-ui-core は lh-ui ファミリーのネイティブ血脈のビルド時中心です。
このリポジトリとは
Section titled “このリポジトリとは”@lh-ui/core は、デザイントークンの唯一真源、コンポーネント契約、ゴールデンケースの置き場所であり、加えて、プラットフォーム中立のトークンから 4 つのネイティブ端向けの言語スケルトンを生成する codegen ツールです。
ランタイムの依存関係ではありません。ビルド時にのみ動作します:プラットフォーム非依存の JSON トークンとコンポーネント契約を Android(Kotlin)/ iOS(Swift)/ HarmonyOS(ArkTS)/ C の 4 つのネイティブ端へ生成し、その後、各端の UI ライブラリが実装を手書きします。ネイティブ端のランタイムには JavaScript が一切存在しません。
二つの血脈アーキテクチャ
Section titled “二つの血脈アーキテクチャ”ファミリーには、互いに独立していて決して結合してはならない二つの血脈があります:
lh-ui ファミリー├── Web 血脈:lh-ui-share(TS core + 唯一の SCSS スタイルソース)→ plus / vue2 / react / uniapp└── ネイティブ血脈:このリポジトリ(JSON トークン + 仕様 + codegen)→ android / ios / harmony / windowsこのリポジトリと lh-ui-share はコード上の依存関係を一切持ちません。各リポジトリが独自に完結し、独自にリリースします。ブランドとビジュアルの統一は、ファミリーのドキュメントリポジトリにある docs/設計言語ベースライン.md の手動による位置合わせの仕組みで保たれており、自動同期によるものではありません。
3 層の契約
Section titled “3 層の契約”このリポジトリの中身は、互いに独立しつつ相互に参照し合う 3 層の JSON 契約で構成されます:
| 層 | 場所 | 答える質問 |
|---|---|---|
| トークン | tokens/*.json |
「UI はどんな見た目か」——色、間隔、フォントサイズ、角丸、シャドウ、モーション、階層、コンポーネントレベルの寸法 |
| 契約 | specs/*.json |
「コンポーネントにどんな能力があるか」——props / 列挙 / デフォルト値 / イベント / スロット / 振る舞い |
| 用例 | cases/*.json |
「コンポーネントをどうテストするか」——クロスプラットフォームで翻訳可能な given/when/then の振る舞いレベルのアサーション |
codegen はトークンのみを消費して 4 端のスケルトンを生成します。契約と用例は現在各ネイティブ端が手動で消費します(将来的に、型スケルトンやテストテンプレートの自動生成へ拡張される可能性があります)。
トークンのシード
Section titled “トークンのシード”このリポジトリの tokens/*.json の初期値は、lh-ui-share/styles/theme/common/variables.scss と var-dark.scss から 2026-10-10 に一回限りで手動抽出された、位置合わせ用のシードです(ファミリーの docs/設計言語ベースライン.md を参照)。以降、両リポジトリはそれぞれ独自に進化し、同期は行いません。ブランドレベルのトークン(カラーパレット、間隔のスケール)の変更は、必ずこの基線ドキュメントに登録してください。
このドキュメントの読者
Section titled “このドキュメントの読者”- ネイティブ端の開発者(android / ios / harmony / windows):
dist/生成物の命名規則、単位の換算、ダークモードの仕組みを理解し、トークンがどこから来て、値がどう計算されているかを知るため。 - このリポジトリのメンテナー:codegen パイプラインの各モジュールの責務と関数を理解し、テンプレートを編集し、トークンやコンポーネントを追加できるようになるため。
次のステップ
Section titled “次のステップ”- クイックスタート —— クローン、インストール、codegen を一度実行する
- ディレクトリ構造 —— 各ディレクトリの責務
- トークンフォーマット —— トークン JSON のフィールド制約
- パイプライン概要 —— codegen の完全なデータフロー
Copyright © 2024-2026 FengMo WenXue