Examples of wrapping Vanilla Extract over an existing design system?

[JLee21]

Our team likes to use https://blueprintjs.com/docs/ colors, spacing, components.
But we still need to style custom components that look and feel like Blueprint by using Blueprint's color palette.
This is how I'd imagined it'd start off with: importing Blueprint's core variables and exporting it as our own via a theme.

// styles.css.ts

import { createTheme, style } from '@vanilla-extract/css';
import { Colors } from '@blueprintjs/core';

export const [themeClass, vars] = createTheme({
  color: {
    brand: Colors.BLUE_1
  },
  font: {
    body: 'arial'
  },
 spacing: {}
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10
});