OXY-158: composable media-query support in the stylesheet DSL

[Kalin-Rudnicki]

OXY-158 — Media query support in the stylesheet DSL

Ticket: https://kr-oxygen.atlassian.net/browse/OXY-158

Problem

Oxygen has a nice, composable stylesheet DSL, but media queries were a raw-string one-off: MediaCSS + hand-written @media { ... } blocks (ColumnsStyle, HolyGrail.responsiveSheet, inline strings in Motion/Tooltip) that bypass the DSL entirely. StyleSheet.compile had no @media support at all.

What this does

Makes responsive styles first-class — written with the same selector DSL as everything else.

• MediaQuery (create/MediaQuery.scala): composable condition type — minWidth/maxWidth/minHeight/maxHeight, breakpoint helpers (smUp/mdUp/lgUp/xlUp, below*, between), prefersDark/prefersLight, portrait/landscape, reducedMotion, canHover/pointer, screen/print, &&/and, ||/or, and a raw escape hatch.
• media(query){ ... } (create/media.scala): DSL block that tags every rule emitted inside with the query (scoped MutableAdder); nests/composes with existing selectors — nested blocks AND together.
• StyleSheet.compile now threads Option[MediaQuery] through the leaf model and emits correct @media (...) { selector { ... } }, merging consecutive same-query rules into one block.
• Dogfooded: OxygenStyleSheet h1 shrinks below md; new showcase page (MediaQueryPage) built entirely with the DSL (reflow + responsive visibility), wired into the example app nav.
• Back-compat: MediaCSS stays functional with a scaladoc pointer to the new DSL (repo builds with -Werror -deprecation, so its live raw call sites can't carry @deprecated). No existing call site changed.

Emitted CSS (from tests)

.mq-test-box { display: flex; flex-direction: column; }
@media (min-width: 768px) { .mq-test-box { flex-direction: row; } }
@media (min-width: 768px) and (orientation: landscape) { .mq-test-box { gap: 8px; } }

Verification

• oxygen-ui-web/compile ✓, example-ui-web/compile ✓, oxygen-ui-web/test ✓ (48 passed, 3 new)

🤖 Generated with Claude Code

https://claude.ai/code/session_011YxWKdsz97QT9BD7AdpSq6