Создание темы

Тему PrimeVue создаёт фасад. Модули потребляют эту тему; они не создают параллельные мини-дизайн-системы.

Сейчас Wippy запускает PrimeVue с theme: 'none'. Внешний вид компонентов обеспечивают написанный на Tailwind CSS PrimeVue от Wippy, публичные рантайм-переменные и настройки фасада.

Где чему место в оформлении

Глобальное правило .p-drawer-content — корректная реализация темы, когда оно предназначено для каждого Drawer в корнях хоста и потомков. .wippy-host-app .p-drawer-content уместно, только когда правило специфично для хоста.

Перенос дублирующегося CSS модуля в CSS фасада не устраняет зависимость. Если селектор не входит в общий словарь темы PrimeVue, он создаёт приватный контракт фасада. Место для словаря, общего для ваших собственных модулей, но отсутствующего в теме, — опубликованный пакет: см. Слой дизайна.

Семантическое равенство

Семантически эквивалентные элементы управления должны выглядеть одинаково. Предпочитайте компоненты PrimeVue напрямую. Когда действительно нужен собственный элемент управления, определите его визуального «родственника» в PrimeVue и используйте те же публичные рантайм-свойства для цвета, границ, фокуса, состояния и любой геометрии, классифицированной как theme-variable.

Собственная часть может владеть только новой структурой, которой у родственника нет. Переиспользуйте документированные контракты темы для отступов, размеров, типографики, скруглений, теней, фокуса и анимации везде, где они существуют. Не копируйте текущий литерал из сгенерированного CSS компонента, называя это наследованием.

Рантайм-свойства против инвариантных

У каждого общего свойства внешнего вида одна политика:

• theme-variable: оно должно разрешаться через документированную публичную рантайм-переменную.
• platform-invariant: общее скомпилированное значение Tailwind намеренно стабильно во всех совместимых темах.

Не добавляйте рантайм-токены ради теоретической гибкости. Добавляйте или принимайте токен только после того, как реестр действующих контрактов докажет наличие реального пробела во время выполнения, точного поддерживаемого пути, реального потребителя и свидетельств изменяемости.

Транспорт CSS не даёт разрешения

Страницы получают стили в iframe. Веб-компоненты могут получать стили внутри 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')

Используйте только auto, light или dark. Хост владеет применением и рекурсивным распространением в дочерние контексты; фасад/встраивающая сторона владеет сохранением. Прямое редактирование w-theme-dark / w-theme-light, вызов внутренних помощников темы, запись глобальных переменных AppConfig или отправка сообщений хосту обходят этот контракт и являются несоответствующими. Визуальные свидетельства действительны только после того, как публичный API сообщил о распространённом режиме.

См. Контракт Tailwind, Каталог токенов и Контракт переносимого UI.