Vega Lite

While it would be ideal if all designs could adopt the full version of Vega, some Heartland projects exist that are heavily invested in a pre-existing framework or UI library. They may want the overall look and feel of Vega, but because of these limitations are prevented from the full Vega platform, including the use of pre-designed components. Vega Lite is designed to help bridge this gap by allowing teams to make use of Vega tokens to create a compatible library without having to abandon their existing frameworks.

Additionally, as Vega is still in its growing stages, we have had to temporarily deprecate some of the components, due to refactoring requirements and upgrades to meet the needs of external teams.

For both of the above reasons, we have been encouraging teams to make use of the Vega style sheets, and the existing color and typography tokens, and by using the Vega plugin in Figma. While this does not provide all of the full features of Vega components (such as automatic accessibility verification), it at least ensures that designers and developers are working with a limited approved set of tokens, which are, at least to some degree, scalable to handle any future changes to the palettes.

Automation Options

To make processes easier, the Vega team can provide custom generated SCSS scripts based on the core tokens. This is designed to make development easier, faster, and more compliant with overall business goals. For development teams to be able to make use of this, they simply need to contact us either via the team slack channel, or at vega@e-hps.com. We will consult directly with these teams to be able create something that will work with existing needs.

Example Use-case

One thing that we realized along the way is that while the CSS files have been useful for development teams, they still required a lot of customization and coding by the developers. We learned that what developers really need is a way to programmatically pull the data as a JSON object, and convert it into useful React-style variables.

Our current output required that this be handled manually. With the communication we received from the development team, we were able to change the format and output of the JSON object generated from Vega, so that teams could automatically plugin the data into their systems.

This involved simply converting existing token names which were hyphenated (e.g. bg-brand) into PascalCase (e.g. BgBrand).

For instance, we were able to generate files which looked like this:

let colors = {
    BgBrand: '#596063', // bg-brand
    BgPage: '#F0F3F7', // bg-page
    BgTransparent: 'rgba(0, 0, 0, 0)', // bg-transparent
    BgPrimary: '#FCFCFC', // bg-primary
    BgSecondary: '#F5F7F7', // bg-secondary
… etc.
}

For this project, we also needed to split light and dark modes into separate files, which we were also able to do. This enabled the development teams to be able to integrate files from Vega directly into their projects.

Summary

The overall point is that the Vega team can work directly with individual development teams to be able to make the transition into their existing processes much easier, and while the full Vega components are being built.

If your team needs assistance in making the transition to Vega or Vega Lite, please reach out to us through our slack channel, or at vega@e-hps.com.