Skip to content
Toyota Motor Europe

Scheme

Many sections of our website could be rendered with a default or contrast color scheme. To help you implement this easily, we provide the Box foundation component that can switch all its (supported) child content to the contrast color scheme.

With wrapper

Section titled “With wrapper”
<div class="tng-scheme">
  <p class="tng-text-body">This text is in base color scheme.</p>
</div>
<div class="tng-scheme is-contrast">
  <p class="tng-text-body">This text is in contrast color scheme.</p>
</div>

This text is in base color scheme.

This text is in contrast color scheme.

Without wrapper

Section titled “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>

Components

Section titled “Components”

These components will automatically adapt to a contrast color scheme.

Kitchen-sink Demo

Section titled “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>
<div class="tng-divider"></div>
<button class="tng-button">Button</button>
<div class="tng-count-indicator">
  <div class="item" aria-current></div>
  <div class="item"></div>
  <div class="item"></div>
</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-neutral" aria-label="Info">
    <i class="tng-icon icon-info" aria-hidden="true"></i>
  </button>
  <div class="tng-popover is-contrast">
    <div class="tng-popover-arrow" data-placement="top"></div>
    <div class="tng-popover-bubble">
      <button class="tng-icon-button is-neutral" 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>

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.

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.

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.