Vega Website 2.0

We are pleased to announce the release of the new Vega website. We have finished converting the original site from the Jekyll framework to the Svelte engine. While both engines provide content in a static format, the reason for doing this was to provide us the ability to create more interactive features which will better serve end-users.

Components

With the new site, we are also happy to announce the release of the newly designed Vega 2.0 components. Each component page has several new features.

These include fully working code examples, where you have the option of viewing and copying the HTML code necessary to make the example work on your own site.

We also include any necessary JavaScript to create the shown example in a static HTML page.

Example Component

<vega-input-select 
    id ="my-select"
    required=false
    placeholder="placeholder text"
    max-height="400"
    auto-validation="true">
</vega-input-select>

      const vegaInputSelect = document.getElementById("my-select");
      vegaInputSelect.source = [
        {id: "id1", displayName: "Jason Simon"},
        {id: "id2", displayName: "Jeff Ruble"},
        {id: "id3", displayName: "Chloe Chen"},
        {id: "id4", displayName: "Cassidy McKnight"},
        ];

By default, we also now include a couple of handy links for developers and designers. Each page has widgetd which will connect, where applicable, to the Figma Sticker Sheet for the element and to the Storybook page for more detailed coding information.

Note: to access the 2.0 version of Storybook, you will need to have Gitlab access. If you would like Guest or Developer access to Storybook, please contact us via Slack or email.

The components pages, like all of Vega, are constantly under development. Please stay tuned to these pages to see new components appear.

Interactive Searching

Searching the site just became considerably easier. Searches will separate results into several categories of content. You can search for any documentation on the site, as well as for specific icons, colors, typography, and borders. All searches happen interactively and will retrieve results as you type.

Styles

We have added several new token tables for the Styles section, including icons and spacing. The tables in the styles section are completely live, and will always show the current state of the Vega tokens.

Light and Dark Mode

One thing you may notice is the ability to view the site in either light or dark mode. You may either manually set it up to view the site in whichever mode you choose, or you may set the site to detect and match your system settings. Beyond meeting your personal preferences, you may find this helpful to see how components or colors will render in various modes in your applications.

To switch modes on the Vega website, navigate to the gear icon on the upper right of your screen. Choose light, dark, or system.

Getting Started

Developer Instructions

If you have been using Vega 1.0 and wish to transition to 2.0, please note that the installation instructions have changed.

To get Vega up and running in your development environment, read the following instructions for how to install it.

• HTML/JavaScript
• Angular
• React
• Vue

Vega Lite

For those working on reskin projects, the Vega Lite instructions have been updated to provide information about the new v2 version of all Vega tokens, including some detailed usage guidelines.

Summary

The point of the Vega website is to be a one-stop shop for designers and developers who make use of Vega in your sites. The site will continue to evolve to include new functionality or to meet the needs of our users. Vega is, after all, yours, so we always welcome contributions or feedback.