varnish-theme

varnish-theme contains design tokens and basic CSS for AI2's varnish component library.

Using varnish-theme

First, install varnish-theme:

yarn add @allenai/varnish-theme

CSS

You can use the CSS tokens or varnish CSS by importing them into your CSS file by using CSS @import.

If you have the webpack css-loader set up, you can import them this way: For the tokens:

@import '~@allenai/varnish-theme/dist/varnish-tokens.css' layer(varnish);

For the main CSS:

@import '~@allenai/varnish-theme/varnish.css' layer(varnish);

JS

We provide a typed JS file you can import.

import varnishTokens from '@allenai/varnish-theme'

JSON

We provide a JSON file similar to the JS file.

To import it in JS:

import varnishTokens from '@allenai/varnish-theme/varnish-tokens.json'

Simple Hex Unitless

If you want the theme with just the values, hexAlpha colors, and spacing tokens provided in pixels without a number, we provide that as well.

import simpleVarnishTokens from '@allenai/varnish-theme/simple-hex-unitless'

Development

We use (style-dictionary)[https://amzn.github.io/style-dictionary/#/] and (style-dictionary-utils)[https://github.com/lukasoppermann/style-dictionary-utils] to create the exported files.

To add or change tokens, modify .js files in the tokens folder. To update the output with your new tokens, run yarn workspace @allenai/varnish-theme build.

Adding Icons

First, add your svg file under icons folder. Then update tokens/assets/icon.cjs with this filepath. Then run yarn workspace @allenai/varnish-theme build

Updating Figma with varnish-theme tokens

Further instructions here

1. Go to your Figma document
2. Click the Figma button in the top left corner. Go to plugins, and install Tokens Studio for Figma and open it
3. Here you will see a visual representation of your tokens including colors, spacing, etc. Go to the tokens you want to edit and click the {} button in the top right.
4. Here will be an editable JSON file of your tokens. Insert/edit your tokens here. You may need to format your new tokens to be in the same JSON style
5. Click "Save JSON"
6. Message your designer that you updated the tokens in Figma. Done!