Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research TeamĀ - Ā Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More ā
@vonage/vivid
Advanced tools
@vonage/vivid
Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
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
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 š.
Prerequisite
Tokens
To include the tokens, you must load theme css:
'node_modules/@vonage/vivid/styles/tokens/theme-light.css';
Or
'node_modules/@vonage/vivid/styles/tokens/theme-dark.css';
About tokens
The Vivid components library rely on a set of design tokens (in the form of css custom properties).
Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to 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.
Setting Vivid class
The Vivid tokens require a vvd-root class selector to be present on a wrapping element (advisably the :root) for it to apply its css custom properties to.
š” The :root CSS pseudo-class matches the root element of a tree representing the document
<html class="vvd-root">...</html>
You can also add it to any wrapping element if you would like to scope the styles to only a certain part of your application.
Fonts (Prerequisite)
Vivid uses Montserrat and Roboto Mono Google fonts. Learn how to load fonts into your application with google-fonts
Unless explicitly stated otherwise, Vonage products should use the brand specified font families by Spezia. Vonage teams may review guidelines at the Spezia webfont kit.
š” For more information check out vonage fonts
Advanced Usage
š” For more information on core application styles & scoped elements check out advanced usage
CDN - 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 Montserrat & Roboto-Mono fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- import light theme style tokens -->
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
<!-- import Vivid button component -->
<script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
<!-- Part of the app (or a whole app) that contains vivid components -->
<div class="vvd-root">
<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
</div>
Support Matrix
This library is supported on 2 recent versions of major browsers (Chrome, Firefox, Safari, Edge).
Support
This library is open source, developed and maintained by the Vonage Vivid teams.
For any questions, please open a bug report or feature request.
Roadmap
-
View components status
-
See the open issues for a full list of proposed features (and known issues).
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 ā” And
- 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
- Floating UI - for positioning floating elements
- Dropzone - for handling dropped files
Have questions?
Still looking for answers, ask us in #ask-vivid slack channel.
FAQs
The component library of the Vivid design system, provided as a set of web components.
We found that @vonage/vivid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 0 open source maintainers collaborating on the project.
Package last updated on 04 Sep 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill BoychenkoĀ - Ā Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah GoodingĀ - Ā Nov 26, 2024