Vivid API

Color

Colors have assigned meanings and are used consistently throughout Vivid to set expectations of meaning for users. Color is used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication.

Connotation

  • Black - Accent
  • Purple - CTA
  • Magenta - Announcement
  • Blue - Information
  • Red - Alert
  • Green - Success
  • Yellow - Warning
Canvas: --vvd-color-{n}
canvas
canvas-text
Neutral: --vvd-color-neutral-{n}
50
100
200
300
400
500
600
700
800
900
950
Neutral-Tint: --vvd-color-neutral-tint-{n}
50
100
200
300
400
500
600
700
800
900
950
CTA: --vvd-color-cta-{n}
50
100
200
300
400
500
600
700
800
900
950
Success: --vvd-color-success-{n}
50
100
200
300
400
500
600
700
800
900
950
Alert: --vvd-color-alert-{n}
50
100
200
300
400
500
600
700
800
900
950
Information: --vvd-color-information-{n}
50
100
200
300
400
500
600
700
800
900
950
Announcement: --vvd-color-announcement-{n}
50
100
200
300
400
500
600
700
800
900
950
Warning: --vvd-color-warning-{n}
50
100
200
300
400
500
600
700
800
900
950

Usage

The color tokens are referenced using the --vvd-color-{name}-{n}.

vwc-side-drawer::part(base) {
  background-color: var(--vvd-color-neutral-100);
}

Alternate

Alternate Attribute

Some components (eg. Header, Side Drawer, Toggletip) have an alternate attribute. This switch the component itself and all of it’s children to use the design tokens from the alternate theme (light / dark).

If you need a child element to still use the parent (non-alternative) theme, add the class vvd-root.

In the example below, the first button ("Parent theme") is still using the parent theme's design tokens.

 
<vwc-header alternate>
  <div>Alternate Header</div>
  <vwc-action-group appearance="ghost" slot="action-items">
    <vwc-button appearance="filled" label="Parent theme" class="vvd-root"></vwc-button>
    <vwc-button appearance="filled" label="Alternate theme"></vwc-button>
  </vwc-action-group>
</vwc-header>

Alternate Class

A single component can be set to use the design tokens for the alternate (light/dark) theme by adding the class vvd-theme-alternate to the component.

In the example below, the background color is set to the opposite on the theme’s canvas color. The button inside (with the class vvd-theme-alternate) is using the alternative theme colors.

<style>
  .wrapper {
    background-color: var(--vvd-color-neutral-950);
    width: 200px;
    height: 60px;
    display: grid;
    place-content: center;
  }
</style>
<div class="wrapper">
  <vwc-button label="Alternate color" appearance="filled" class="vvd-theme-alternate"></vwc-button>
</div>

If the component has part, add part='vvd-theme-alternate'

Neutral Tint Color Drop-Shadow

Neutral-Tint color comes with elevation custom colors. In order to use them the class .vvd-neutral-tint-elevation should be added to the component.

<style>
  .card {
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
</style>
<div style="display: flex; gap: 50px; padding: 32px; background-color: var(--vvd-color-neutral-tint-50); ">
  <div style="display: flex; flex-direction: column; gap: 40px;">
    <vwc-elevation dp="0" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 0</div>
    </vwc-elevation>
    <vwc-elevation dp="2" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 2</div>
    </vwc-elevation>
    <vwc-elevation dp="4" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 4</div>
    </vwc-elevation>
    <vwc-elevation dp="8" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 8</div>
    </vwc-elevation>
    <vwc-elevation dp="12" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 12</div>
    </vwc-elevation>
    <vwc-elevation dp="16" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 16</div>
    </vwc-elevation>
    <vwc-elevation dp="24" class="vvd-neutral-tint-elevation">
      <div class="card">Neutral-Tint elevation with DP 24</div>
    </vwc-elevation>
  </div>
  <div style="display: flex; flex-direction: column; gap: 40px;">
    <vwc-elevation dp="0">
      <div class="card">Vivid elevation with DP 0</div>
    </vwc-elevation>
    <vwc-elevation dp="2">
      <div class="card">Vivid elevation with DP 2</div>
    </vwc-elevation>
    <vwc-elevation dp="4">
      <div class="card">Vivid elevation with DP 4</div>
    </vwc-elevation>
    <vwc-elevation dp="8">
      <div class="card">Vivid elevation with DP 8</div>
    </vwc-elevation>
    <vwc-elevation dp="12">
      <div class="card">Vivid elevation with DP 12</div>
    </vwc-elevation>
    <vwc-elevation dp="16">
      <div class="card">Vivid elevation with DP 16</div>
    </vwc-elevation>
    <vwc-elevation dp="24">
      <div class="card">Vivid elevation with DP 24</div>
    </vwc-elevation>
  </div>
</div>