How to import specific styles package into component?

[mahdiridho]

It's not clear enough to do @import '@spectrum-web-components/styles/<STYLE_PACKAGE>.css'; into the webcomponent. I tried :

  static get styles() {
    return css`
        @import '@spectrum-web-components/styles/<STYLE_PACKAGE>.css';
    `
  }

seems I was on wrong way

[Westbrook]

Which CSS are you trying to leverage here?

As outlined here: #1552 we do offer a number of helper sheets that can be imported into a component for use in delivering text content. Those sheets can be imported as follows:

import spectrumHeadingStyles from '@spectrum-web-components/styles/heading.js';
import spectrumBodyStyles from '@spectrum-web-components/styles/body.js';
import spectrumTypographyStyles from '@spectrum-web-components/styles/typography.js';

@customElement('my-component')
class MyComponent extends LitElement
{
	public static styles: CSSResultGroup = [
		...spectrumHeadingStyles,
		...spectrumBodyStyles,
		...spectrumTypographyStyles,
	];
}

While, as the above issue outlines, we've definitely got some documenting to do to fully support users in leveraging this offering, you can currently access the following files in this way:

@spectrum-web-components/styles/body.js
@spectrum-web-components/styles/code.js
@spectrum-web-components/styles/detail.js
@spectrum-web-components/styles/heading.js
@spectrum-web-components/styles/typography.js

Other files in this package are not meant to be consumed at the component level due to the interactions of CSS Custom Property based design token in the CSS cascade and are structured for us directly in a link tag (requires tooling that resoles node module specifiers):

<link rel="stylesheet" href="@spectrum-web-components/styles/all-medium-dark.css" />

Or in SASS/PostCSS (note the use of the ~ to specify to the processor that this file is a node_module):

@import '~@spectrum-web-components/styles/all-medium-dark.css';

These token can also be provided via the <sp-theme> element, which can be used once to scope the theme of an entire application (most likely usage), or multiple times to scope specific parts of an application with a specific set of theme tokens. The can be seen in the following example: https://webcomponents.dev/edit/Sbhu1xWTHiQJS1XZSxi4/

      <sp-theme color="dark" scale="large">
          <sp-dialog id="example" size="large">
              <h2 slot="heading">Themed dialog with elements in its contents</h2>
              <sp-slider
                  value="5"
                  step="1"
                  min="1"
                  max="11"
                  id="volume-slider"
              >Volume</sp-slider>
              <div><sp-switch>Overdrive</sp-switch></div>
              <sp-button variant="primary" slot="button">Cancel</sp-button>
              <sp-button variant="cta" slot="button">Continue</sp-button>
          </sp-dialog>
      </sp-theme>

[mahdiridho]

I misunderstood here, I thought I have to @import "css_file" to reuse the theme style properties on my components. Just realized they have been there once we imported the sp-theme