テーマの記述

ファサードがPrimeVueテーマを記述します。モジュールはそのテーマを消費するのであって、並行するミニデザインシステムを作るわけではありません。

Wippyは現在、PrimeVueを theme: 'none' で実行しています。コンポーネントの見た目は、WippyのTailwindで記述されたPrimeVue CSS、公開ランタイム変数、ファサードのカスタマイズによって供給されます。

スタイリングの所属先

スタイリングの関心事 所有者
製品全体で共有されるPrimeVueコンポーネントの見た目 custom_css 内のファサードPrimeVueテーマと公開テーマ変数
ホストシェルのクロームのみ .wippy-host-app にスコープされたファサードCSS
ホストと子のrootの両方に意図された共有の .p-* ルール グローバルなファサード custom_css。ホストスコープは不要
ページ限定のテーマオーバーライド サポートされたフロントエンドのケーシングを使うページ設定
ドメイン固有のレイアウトや新規の構造 モジュールのCSSまたはTailwind
必要なPrimeVue以外のカスタム部品 モジュールのCSS。公開トークンとドキュメント化された不変ユーティリティを再利用する
自分の複数モジュールが必要とする同じPrimeVue以外の部品 共有パッケージ — デザインレイヤーを参照
1つのファサードから期待される任意のクラス ポータブルではない。FE-STYLE-001により禁止

グローバルな .p-drawer-content ルールは、ホストと子のrootにあるすべてのDrawerに意図されている場合、正当なテーマ実装です。.wippy-host-app .p-drawer-content が適切なのは、そのルールがホスト固有である場合だけです。

重複したモジュールCSSをファサードCSSに移しても、依存は解消されません。そのセレクタが共有PrimeVueテーマの語彙の一部でないなら、それは非公開のファサード契約を生みます。自分のモジュール間で共有されるがテーマには存在しない語彙の置き場所は、公開されたパッケージです。デザインレイヤーを参照してください。

セマンティックな同一性

セマンティックに等価なコントロールは、等価に見えるべきです。PrimeVueコンポーネントを直接使うことを優先してください。本当にカスタムなコントロールが必要な場合は、そのPrimeVueにおける視覚的な兄弟を特定し、色、ボーダー、フォーカス、状態、およびテーマ変数に分類されるジオメトリについて、同じ公開ランタイムプロパティを使用してください。

カスタム部品が所有してよいのは、その兄弟が提供しない新規の構造だけです。ドキュメント化されたテーマのパディング、寸法、タイポグラフィ、角丸、シャドウ、フォーカス、モーションの契約が存在する場合は、それらを再利用してください。生成されたコンポーネントCSSから現在のリテラル値をコピーして、それを継承と呼んではいけません。

ランタイムプロパティと不変プロパティ

共有される見た目のプロパティには、それぞれ1つのポリシーがあります:

  • theme-variable: ドキュメント化された公開ランタイム変数を通じて解決されなければならない。
  • platform-invariant: 共有のコンパイル済みTailwind値が、準拠するすべてのテーマにわたって意図的に安定している。

理論上の柔軟性のためにランタイムトークンを追加してはいけません。トークンを追加または採用するのは、実効契約の台帳が、実際のランタイム上のギャップ、正確なサポート経路、実在する消費者、そして変化の証拠を示した後だけです。

CSSの輸送は許可ではない

ページはiframe内でスタイルを受け取ります。Webコンポーネントはshadow root内でスタイルを受け取ることがあります。これはCSSがどこで効果を持てるかを説明するものであり、モジュールが任意のファサードセレクタに依存することを許可するものではありません。

ランタイムのモード切り替え

公開されたテーマモードの契約は、AppConfigと @wippy-fe/proxy です:

import { host, on } from '@wippy-fe/proxy'

async function setThemeMode(mode: 'auto' | 'light' | 'dark') {
  await new Promise<void>((resolve, reject) => {
    const stop = on('@theme', (appliedMode) => {
      if (appliedMode !== mode) return
      stop()
      const currentMode = host.getThemeMode()
      if (currentMode !== mode) {
        reject(new Error(`Theme propagation mismatch: ${currentMode}`))
        return
      }
      resolve()
    })
    host.setThemeMode(mode)
  })
}

await setThemeMode('dark')

使用できるのは autolightdark だけです。適用と子への再帰的な伝播は ホストが所有し、永続化はファサード/埋め込み側が所有します。 w-theme-dark / w-theme-light を直接編集すること、内部のテーマヘルパーを 呼ぶこと、AppConfigのグローバルに書き込むこと、ホストにメッセージを送ることは、 いずれもこの契約を迂回するものであり、非準拠です。視覚的な証拠が有効なのは、 公開APIが伝播後のモードを報告した後だけです。

Tailwind契約トークンカタログポータブルUI契約を参照してください。