Несколько дней исследований, почти десяток идей, и я таки смог с Опусом задизайнить хелпер на 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'])

resolveMode())}>





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


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