紋様背景システム

lh-ui-plus は中華風の詩的な紋様背景システムを提供し、6 種類のプリセット紋様パターンをサポートします。CSS 変数（bg-pattern）またはコンポーネントの bgPattern prop 経由で適用できます。ライト/ダークモードの切り替えは別の独立した能力です。末尾の「ライト/ダークモード」を参照してください。

プリセット紋様

システムには以下の 6 種類の紋様が内蔵されています：

紋様名	CSS 変数	説明
なし	--lh-pattern-none	デフォルトは紋様なし
柳葉	--lh-pattern-willow	細長い柳の葉、疎密のバランス
祥雲	var(--lh-pattern-cloud)	祥雲が広がり、蜿蜒と流れる
水波	var(--lh-pattern-water)	涟漪が微かに動き、幾重にも重なる
雪花	var(--lh-pattern-snow)	六角の雪花、細い枝が分かれる
梅花	var(--lh-pattern-plum)	五弁が広がり、蕊の中心がはっきりと
竹葉	var(--lh-pattern-bamboo)	披針形の竹の葉、雑然とせず整然と並ぶ

使用方式

ConfigProvider によるグローバル設定

<template>
  <LhConfigProvider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-willow)' }">
    <LhButton>デフォルト</LhButton>
    <LhButton type="primary">主要</LhButton>
  </LhConfigProvider>
</template>

紋様の適用範囲の制御（patternComponents ホワイトリスト）

デフォルトでは、グローバルな bg-pattern はどのコンポーネントにも適用されません。patternComponents ホワイトリストで明示的に有効にする必要があります：

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <LhConfigProvider
    :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-cloud)' }"
    :pattern-components="['button', 'input']"
  >
    <!-- ボタンと入力フィールドに紋様が適用され、Dialog には適用されない -->
    <LhButton>紋様付きボタン</LhButton>
    <LhInput placeholder="紋様付き入力フィールド" />
    <LhDialog v-model="visible">このダイアログには紋様がない</LhDialog>
  </LhConfigProvider>
</template>

コンポーネントレベルの紋様設定

コンポーネント自身が bgPattern prop または themeVars で設定した紋様は、ホワイトリストの制限を受けません：

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    このボタンは常に紋様を持つ
  </LhButton>
</template>

紋様の不透明度のカスタマイズ

<template>
  <LhConfigProvider
    :theme-vars="{
      'bg-pattern': 'var(--lh-pattern-snow)',
      'bg-pattern-opacity': '0.3',
      'bg-pattern-color': 'rgba(255, 0, 0, 0.2)',
    }"
  >
    <LhButton>カスタム不透明度</LhButton>
  </LhConfigProvider>
</template>

CSS 変数リファレンス

変数名	説明	デフォルト値
--lh-bg-pattern	紋様背景の URL	none
--lh-bg-pattern-repeat	紋様のタイリングモード	repeat
--lh-bg-pattern-size	紋様のサイズ	40px
--lh-bg-pattern-opacity	紋様の不透明度	0.15
--lh-bg-pattern-color	紋様の色	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	紋様のブレンドモード	soft-light

ライト/ダークモード

紋様システム自体は CSS 変数で制御されており、ライト/ダークモードとは相互に影響しません。ライト/ダークモードは useLhTheme composable 関数で切り替えます（data-theme 属性に書き込む）：

<script setup lang="ts">
import { useLhTheme } from '@lh-ui/vue3'

const { theme, toggleTheme, setTheme } = useLhTheme()

// ライト/ダークテーマを切り替える
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? 'ライトに切り替え' : 'ダークに切り替え' }}
    </LhButton>
  </div>
</template>

テーマ変数の優先順位

コンポーネントが最終的に使用する CSS 変数は、以下の優先順位でマージされます（後のものが前のものを上書きします）：

1. ConfigProvider のグローバル themeVars（最優先順位が低い）
2. ConfigProvider のコンポーネント別 componentTheme[コンポーネント名]
3. コンポーネント自身の themeVars prop
4. コンポーネント自身の bgPattern prop（最優先順位が高い）

bg-pattern 変数については、さらに patternComponents ホワイトリストの制御を受けます：ホワイトリストに含まれるコンポーネントだけがグローバル設定の bg-pattern を適用します。