Несколько дней исследований, почти десяток идей, и я таки смог с Опусом задизайнить хелпер на 50 строк.

Это вроде Provider скоупнутый только для стилей через переменные:

import { css, cssVar } from '@reatom/jsx'

export const pack = cssVar('theme-pack', [
  'minimal',
  'polaroid',
  'retroOs',
  'glass',
])
export const mode = cssVar('theme-mode', ['light', 'dark'])

<div {...pack.provide(themePack)} {...mode.provide(() => resolveMode())}>
  <span
    css={css`
      display: none;
      ${pack.container('polaroid')} {
        display: inline;
      }
    `}
  />
</div>

css`
  @container ${pack.style('retroOs')} and ${mode.style('light')} {
    background: navy;
  }
  @container not (${pack.style('polaroid')}) {
    display: block;
  }

И после этого мне будут затирать что coding solved... Первая итерация фронтир модели была максимально отвратительная - бойлерплейтная и тяжелая, и решить это удалось только через 5+ попыток рефакторинга и только благодаря моему острому взгляду, а брейншторму модели...