@allenai/varnish-theme
TypeScript icon, indicating that this package has built-in type declarations

2.0.6 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @allenai/varnish-theme

Weekly Downloads

117

Version

2.0.6

License

Apache-2.0

Unpacked Size

2.53 MB

Total Files

28

Last publish

Collaborators

  • mtblanton
  • darrellp
  • undfinedxyz
  • arnavic
  • ericm995
  • yensungc-ai2
  • huytr1995
  • smitar
  • codeviking
  • jon.borchardt
  • aimichal