CSS styling

Spectrum is Adobe's design system, used across multiple applications. We recommend that you use Spectrum-based controls wherever possible for UI, for consistency. In fact, UXP offers a ready-made Spectrum-styled UI library.

While you are exploring importing a stylesheet or making tweaks, you should keep in mind that UXP is not a browser. Its architecture does not (and will not) support all the CSS properties. For example, UXP cannot support grid layout innately. The ones that are supported are listed in the API reference docs.

data-variant=info

data-slots=header, text1, text2
Scripts and plugins
In scripts, since you don't have an HTML file as such, you will have to rely on adding styling via JavaScript to your UI components.
In plugins, you have a lot more flexibility to manage CSS styling. You can add it via CSS classes or use inline styling or add it via JavaScript.

System requirements

Please make sure your local environment uses the following application versions before proceeding.

Example

Example to add a background color to divs in three different ways:

data-slots=heading, code

data-repeat=3

data-languages=HTML, JavaScript, CSS

HTML

<div class="green">
  <h1>Styling from CSS class</h1>
</div>

<div style="background-color: yellow;">
  <h1>Inline styling</h1>
</div>

<div id="exampleDiv">
  <h1>Styling from JS</h1>
</div>

JavaScript

const exampleDiv = document.getElementById("exampleDiv");
exampleDiv.style.backgroundColor = 'orange';

CSS

.green {
  background-color: green;
}

Additional notes

Reference material