@allenai/varnish-theme

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