Suggestion: Document theme-based scale alongside new default icon sizing

[hunterloftis]

Would this be a good place to document that app-wide (or DOM-tree-wide) icon sizes can be managed with sp-theme scale?

[Westbrook]

Thanks for opening this conversation. This could be a place to note this. However, sp-them scale="large" effects EVERYTHING: https://webcomponents.dev/edit/V3ptg575TjMxlWDCWsos See the way Textfield, body copy, spacing and sizing are all effected by the use of scale=large.

Do you see a specific value in reiterating that throughout the documentation? Or should we focus on doing a better job of clarifying that here: https://opensource.adobe.com/spectrum-web-components/components/theme or here: https://opensource.adobe.com/spectrum-web-components/components/styles

We also discuss this a small amount in https://opensource.adobe.com/spectrum-web-components/getting-started, which could use a lot of expansion beyond just better scale usage information. The reality that we're implementing Spectrum scaling often leaves me at a loss of how often and where to reiterate things like this.

[hunterloftis]

My perspective is pretty limited, as a novice Spectrum user, so I'm making some assumptions here that might be incorrect!

The way I'm using theme is to wrap my whole app, and so far I'm loving the ability to make consistent, app-wide theming changes, that look good, in a single place. One assumption I made from the getting started page is that this might be a recommended / "best" practice.

If that's the case, then one way of tackling documentation could be to clarify and expand on when/why/how to use sp-theme in a dedicated, thorough "anchor" page. Then, in areas where a user might be trying to accomplish theming indirectly (icon size, button size, responding to mobile devices, etc), a short single-sentence note with a link to the sp-theme anchor page would be sufficient to let them know about all their options.

[Westbrook]

Good to hear things are getting across, at least for the most part. You're absolutely getting into the themeing pattern as expected here. I also like the idea on how to expand it. I've been working on moving the documentation site from a more bespoke build process to 11ty, which should make including repeated helpers like this across the documentation site much easier to maintain.

[velara3]

Possibly related: There is a related post about creating a small scale theme.

https://github.com/adobe/spectrum-web-components/issues/953

[Westbrook]

@hunterloftis now that you're more intimately acquitted to the the scale and t-shirt sizeing system, do you have thoughts on what would be the right path to clarifying this usage for other users?

[hunterloftis]

@Westbrook I think sharing values (medium, large) makes it easy to conflate SWC's scale and SWC components' size. Your clarification here, that Spectrum calls the scales desktop/mobile (vs medium/large), helps a lot.

What if we mapped "desktop" to "medium" and "mobile" to "large" in <sp-theme>? eg:

<sp-theme scale="mobile">...</sp-theme>

Another thing I ran into while implementing an app frame is that I couldn't find CSS values for mobile vs desktop dividers (issue https://github.com/adobe/spectrum-web-components/issues/1107), so I added them myself:

  sp-theme {
    --spectrum-divider-thickness: 2px;
  }
  sp-theme.mobile {
    --spectrum-divider-thickness: 1px;
  }

[najikahalsema]

@hunterloftis Do you have any opinions on this a year in the future?