Advanced

Vivid provides a set of styles (combined with the tokens and fonts) that can be used to embody the Vivid design system into an application.
These styles are not required by vivid components directly. however, native HTML tags do.

• theme.css - Sets theme related styles

• typography.css - Sets typography related styles

• all.css - Sets all the above styles

These core styles rely on the tokens and fonts to be loaded

To include the styles, its css files must be loaded into the project from: node_modules/@vonage/vivid/styles/[path to file].css.

Note: scss users can simply forward the styles to their scss project:

@forward 'node_modules/@vonage/vivid/styles/[path to file].css';

As in tokens, styles require a vvd-root class* selector to be present on a wrapping element (advisably the :root.
When set on the :root (html element), typeface sizes are able to descend from the root font-size, thus comply with the WCAG 1.4.4) to ensure text readability experience..

Custom elements are registered globally by the browser. When two custom elements with the same tag name are registered on the same document, it creates a conflict that results in an error. Loading multiple versions of vivid is likely to cause this error as vivid elements are named the same.

Enforcing only a single version of the library to be used simultaneously makes it difficult to progressively migrate to newer versions of the library, as each update will require a full application update. Also, in a micro-frontend architecture, this can be a major bottleneck as each micro-frontend may use a different version of the library.

To work around this limitation, Vivid provides a way for authors' to scope each custom element namespace by passing an argument to the prefix parameter when registering each custom element.

The following example will register badge custom element as dashboard-badge:

import { registerBadge } from '@vonage/vivid';

registerBadge('dashboard');

then use it as:

<dashboard-badge text="dashboard scoped badge"></dashboard-badge>

Remember to not include the default side-effect import (import '@vonage/vivid/button';) when using scoped elements as it will register the default namespace.

In addition to avoiding namespace collision and customizing elements' tag names, this approach lets you enjoy the benefits of npm dedupe. With npm dedupe, only the least needed versions of the library are used in the application.