Is there a Label or Text component that works with the Spectrum Theme?

[velara3]

I've set my page to use an sp-theme and when I set the color and scale attributes the spectrum components I'm using update their color as expected (nice) but the text in div tags and span tags do not change color. Is there a spectrum Label component that I should be using? Should I set the text colors the old fashioned way?

<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module"></script>

<sp-theme id="main" scale="medium" color="light">
      <sp-button onclick="main.color='dark'">Click me!</sp-button><br>
      Some text 
      <div>some more text in a div</div>
      <span>some more text in a span</span>
</sp-theme>

[Westbrook]

When working with Spectrum design, there is a fairly complex set of typographic rules that you have the option to leverage in your designs: https://opensource.adobe.com/spectrum-css/typography.html If you're writing HTML directly in the page as outlined in your snippet, you can apply this via the documentation found in Spectrum CSS or continue to leverage unpkg in a demo application via:

<link rel='stylesheet' href='https://unpkg.com/@spectrum-css/[email protected]/dist/index-vars.css' />

To make the classes outlined therein available in your HTML.

If you choose to leverage content within shadow DOM, Spectrum Web Components vends https://unpkg.com/@spectrum-web-components/[email protected]/typography.css which is processed for use with something like https://www.npmjs.com/package/rollup-plugin-lit-css to be injected into a tagged template literal leveraging custom element.