GreenWolf Design
GreenWolf Design
Get started

Install

Take the tokens and the components into an app through Hagrid, then load a scheme.

Vendor the libraries

In the folder of the app's package.json:

Terminal
hagrid vendor --update greenwolf_tokens-0.1 greenwolf_ui-0.1

This copies both libraries into vendor/, writes vendor/libraries.lock and adds them to package.json asfile:vendor/…. Commit vendor/ and package-lock.json together. npm ci then installs them anywhere, with no token. CI checks them with hagrid vendor.

Load a scheme

Import the tokens first, then the app's scheme, then each component the app uses. Set the scheme on <html>, for example<html data-scheme="ruby">. Without it, the page uses Curious chartreuse.

main.ts
import '@greenwolf/tokens/tokens.css'
import '@greenwolf/tokens/ruby.css'
import '@greenwolf/ui/button.js'
main.tsx
import '@greenwolf/tokens/tokens.css'
import '@greenwolf/tokens/orange.css'
import '@greenwolf/ui/button.js'

The schemes are chartreuse.css, ruby.css, orange.css and purple.css.