@vonage/vivid

Vivid UI

Essential UI web components for building modern web applications, bound to provide a safe, simple and intuitive interface.

Installation

To integrate Vivid components into your project, run:

npm install @vonage/vivid # or yarn add @vonage/vivid

Usage

Import components in your project via side effect imports:

import '@vonage/vivid/button';

And include in HTML:

<vwc-button label="Click me"></vwc-button>

For a full list of components and API, explore the components docs 📚.

Prerequisites

The Vivid components library rely on a set of core styles to:

• Be present in the DOM

• Be shared across all components

• Apply common design identities (such as colors, typography, spacing etc')

• Ensure the components look as intended.

As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.

To include the styles, css files must be loaded into the project from the node_modules/@vonage/vivid/styles folder.

The folder contains the following files:

• Fonts

  • fonts/spezia.css - Loads the Spezia variable font and specifies its font face definition. Spezia is Vonage's branded font and is required by most Vivid components. folder also contains the font files

• Typography

  • typography/desktop.css - Defines the typography for desktop devices viewport

  • typography/mobile.css - Defines the typography for mobile devices viewport (resolves to a system font)

• Themes - only one theme can apply at a time. thus, only one is required to be loaded

  • themes/light.css - Light theme

  • themes/dark.css - Dark theme

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

@forward 'node_modules/@vonage/vivid/styles/fonts/spezia.css';
@forward 'node_modules/@vonage/vivid/styles/typography/desktop.css';
@forward 'node_modules/@vonage/vivid/styles/themes/light.css';

Support

This library is open source, developed and maintained by the Vonage Vivid team.

For any questions, please open a bug report or feature request.

Roadmap

• View components status

• What's on our plate

• See the open issues for a full list of proposed features (and known issues).

We publish a next release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the npm page.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the Apache 2.0 License - see the LICENSE.md file for details

Built With

• Fast - to extend element classes and compile code to native web components
• Typescript - for ergonomic and type-safe code
• Sass - for styles authoring extensibility and consistency

Quickstart

Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely. Such practice is often used when working on POCs or reproduction environments. Tools like UNPKG, jsDeliver, Skypack etc' are bound to deliver any content registered in the npm registry.

The following snippet fully renders a Vivid button component

<!-- import spezia font -->
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/fonts/spezia.css">

<!-- import light theme style tokens -->
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/themes/light.css">

<!-- import typography for desktop -->
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/typography/desktop.css">

<!-- import Vivid button component -->
<script type="module" src="https://unpkg.com/@vonage/vivid@next/button/index.js"></script>

<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>