Scheme

Many sections of our website could be rendered with a neutral or contrast color scheme. To switch one, wrap it in .tng-scheme — every supported descendant re-resolves its semantic color tokens against the scheme you set.

Note

A color scheme in this case is design token based and does not relate to the browser’s color-scheme feature. Components with different color schemes can be mixed and even nested within one page.

Neutral and contrast

The system has exactly two schemes, and they are named neutral and contrast.

• Neutral is the ordinary surface a page is built on — what you get from .tng-scheme with no modifier, and what every component renders as by default.
• Contrast is the deliberately opposite surface: a dark panel, a hero, a media-backed band. You opt into it with .is-contrast on the wrapper, or .on-contrast on a single element.

Those two words are the same everywhere the scheme is expressed, which is how you recognise a scheme-aware token or API:

Where	Neutral	Contrast
Wrapper class	.tng-scheme	.tng-scheme.is-contrast
Single element	—	.on-contrast
Semantic tokens	--tng-color-foreground-neutral-*	--tng-color-foreground-contrast-*
Brand accent tokens	…-primary-on-neutral-*	…-primary-on-contrast-*
@tmedxp/styleguide JS	Scheme.Neutral	Scheme.Contrast

Caution

“Default” is not a scheme. default is an emphasis step inside a family — neutral-default sits alongside neutral-emphasis, neutral-subtle and neutral-muted, and the contrast family has the same four. So “the default scheme” is ambiguous at best: say neutral. Likewise, avoid “base”, “light” and “dark” — a scheme names the role a surface plays, and the tokens decide how light it renders.

The scheme never remaps a token’s value. It changes which family you reference — see the pairing contract for what that means when you pick a foreground.

With wrapper

<div class="tng-scheme">
  <p class="tng-text-body">This text is in neutral color scheme.</p>
</div>
<div class="tng-scheme is-contrast">
  <p class="tng-text-body">This text is in contrast color scheme.</p>
</div>

Open in playground

This text is in neutral color scheme.

This text is in contrast color scheme.

Without wrapper

Should you need to render any of the supported components on a contrast color scheme without a wrapper, you can use the .on-contrast modifier on the element itself to have it switch to the contrast color scheme.

<button class="tng-button on-contrast">Button</button>

Open in playground

Button

Components

These components will automatically adapt to a contrast color scheme.

• Typography (through normal CSS inheritance)
• Asset Download
• Button
• Carousel
• Content
• Count Indicator
• Icon
• Table
• Tabs
• Tag
• Toggle
• Toggletip

Utilities

• Overflow Indicators

Kitchen-sink demo

<h3 class="tng-text-title is-3">Heading</h3>
<i aria-hidden class="tng-icon icon-car is-md"></i>
<p class="tng-text-body">…</p>
<button class="tng-button">Button</button>
<div class="tng-group">
  <div class="tng-tag"><span>Default</span></div>
  <div class="tng-tag is-success"><span>In stock</span></div>
  <div class="tng-tag is-danger"><span>Sold out</span></div>
</div>
<div class="tng-count-indicator">
  <span class="tng-count-indicator-label">1 of 3</span>
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>
<div class="tng-toggle-control">
  <input id="c1" type="checkbox" />
  <label for="c1">Off</label>
</div>
<div class="tng-scheme p-2xl | tng-stack align-items-center">
  <button class="tng-icon-button is-ghost" aria-label="Info">
    <i class="tng-icon icon-info" aria-hidden="true"></i>
  </button>
  <div class="tng-toggletip is-contrast">
    <div class="tng-toggletip-arrow" data-placement="top"></div>
    <div class="tng-toggletip-bubble">
      <button class="tng-icon-button is-ghost" aria-label="Close">
        <i class="tng-icon icon-close" aria-hidden="true"></i>
      </button>
      <div class="tng-text-title">…</div>
      <p class="tng-text-body">…</p>
      <a class="tng-link">Link</a>
    </div>
  </div>
</div>
<div
  class="tng-stack gap-lg | tng-scheme p-2xl is-contrast tng-stack"
>
  <p class="tng-text-body">…</p>
  <div class="tng-tabs">
    <button class="tng-tabs-item is-selected">Tab 1</button>
    <button class="tng-tabs-item">Tab 2</button>
    <button class="tng-tabs-item">Tab 3</button>
  </div>
  <table class="tng-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
  <div class="tng-scheme p-2xl is-contrast">
    <p class="tng-text-body">…</p>
  </div>
</div>

Open in playground

Neutral

Heading

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Button

Default

In stock

Sold out

1 of 3

Off

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Tab 1 Tab 2 Tab 3

Header 1	Header 2
Data 1	Data 2

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Heading

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Button

Default

In stock

Sold out

1 of 3

Off

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Tab 1 Tab 2 Tab 3

Header 1	Header 2
Data 1	Data 2

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.