[MCP Apps] Add styles prop to host context

[martinalong]

Best read commit by commit (ignore last 2 commits--those are autogenerated)

Summary

• Adds a way for hosts to pass a basic set of theming variables to MCP Apps, primarily around colors and fonts
  • The set of variable names to pass is preset/standardized
• Also adds some utilities for plugging these styles in as CSS variables, and setting/getting theme

Some choices we made in landing on this architecture / our thought process:

• The goal is to just make the app relatively cohesive with the host, not to make it look native to the host. The latter simply isn't realistic because there are some things that simply can't be UI paradigms
• We chose to not provide a UI component set (buttons, modals, inputs, etc), since no single component set would work for all hosts
• The number of variables is intentionally limited, since hosts that use this would be recommended to supply all variables
• After some debate, we settled on not including spacing variables, because we figured that many designs would simply break (or look bad) if spacing varied too much from how they'd originally been designed

What if a host doesn't provide styles?

• Apps should always provide their own defaults for each style variable that they rely on.
  • This is to account for hosts that don't pass the style object
  • And to allow for future additions to the spec that some hosts might not have updated to support yet

Request for input

Making a standard for styling that'll work with many hosts is a tricky thing to get right, so this definitely isn't final, and we welcome discussion on it!

Some things that we are still thinking about and would love input on:

• How hosts can specify fonts that require importing (e.g. google fonts or entirely custom fonts)
• Are there any variables we're missing that should be added?
  • We already have plans to add a few more heading levels, some more color styles, and box shadow styles

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@127

commit: d07eb1f

[ochafik]

Maybe merge the spec change into this one? Spec types are really part of the spec, I think having it all atomically together is best.

[liady]

Agreed, I added some comments on the spec's PR (since they're more high-level) - and it would be easier to have the SDK and the spec at the same PR.

[liady]

Nice!
Commented on the spec PR on some of the questions - #130 (comment) .
I think we should define the level of design consistency we're aiming for across apps - this might require some more semantic variables in addition to the atomic ones.