Skip to content

Colors

Use color utility classes to convey meaning and enhance readability.

Apply color to text elements using the following classes:

<!-- Default Text Color -->
<div class="text-body">default</div>

<!-- Text Color Classes -->
<hr />
<div class="text-secondary">text-secondary</div>
<div class="text-muted">text-muted</div>
<div class="text-primary">text-primary</div>

<!-- Inverse Color Classes -->
<hr />
<div class="text-inverse bg-secondary">text-inverse</div>

<!-- Context Color Classes -->
<hr />
<div class="text-success">text-success</div>
<div class="text-warning">text-warning</div>
<div class="text-caution">text-caution</div>
<div class="text-info">text-info</div>
<div class="text-danger">text-danger</div>

Using SASS variables

For greater flexibility, apply color variants using SASS. We recommend using semantic color tokens:

@use '@siemens/element-theme/src/styles/variables';

/* Pick the tokens you need: */
color: variables.$element-text-primary;
background-color: variables.$element-base-warning;

For a complete list of available tokens, see _semantic-tokens.

Except where otherwise noted, content on this site is licensed under MIT License.