Skip to content

Latest commit

 

History

History
130 lines (107 loc) · 3.12 KB

CONTRIBUTING.md

File metadata and controls

130 lines (107 loc) · 3.12 KB

Contributing

Contributions to Red Hat's design tokens are welcome, and must abide by our code of conduct.

Getting Started

npm ci
npm run style-dictionary

If you receive an error Package libsecret-1 was not found in the pkg-config search path. when running npm ci, you may need to install libsecret sources. This is necessary to package and publish VSCode snippets.

Fedora/RHEL:

sudo dnf install libsecret-devel

Debian/Ubuntu:

sudo apt-get install libsecret-1-dev

Arch:

sudo pacman -S libsecret

You should see something like this output:

```css
✔︎ css/global.css
✔︎ css/shared.css
✔︎ css/reset.css.js

scss
✔︎ scss/_variables.scss

json
✔︎ json/rhds.tokens.json

js
✔︎ js/rhds.tokens.js
✔︎ js/tokens.d.ts
✔︎ js/tokens.cjs
✔︎ js/tokens.d.cts

html
✔︎ build/index.html

editor
✔︎ editor/vscode.json
✔︎ editor/hexokinase.json

Dev Server

To build automatically whenever you save inputs or the config file, open a terminal and run

npm run build watch

To develop tokens against a dev server / demo, run the above command, then in a separate terminal run

npm run start

Defining Tokens

Tokens are defined in YAML files, following the Design Tokens Draft Community Group Report.

YAML Notes

YAML strings do not need to be quoted, unless they start with a special character. Therefore, $descriptions should not be quoted, but color values and references should.

If a token has both a value and nested tokens, e.g. rh-color-brand-red and rh-color-brand-red-lighter, then the top-level value must be defined under _. This is a workaround, and will likely become unnecessary if any when style-dictionary adopts the draft community group report on token format.

color:
  red:
    # Hex values must be quoted
    50:
      $value: "#faeae8"
      # Comments should not be quoted
      $description: Danger Alert background
    100:
      $value: "#fddbdb"
    200:
      $value: "#fab6b6"
    300:
      $value: "#f56d6d"
    400:
      $value: "#ee0000"
    500:
      $value: "#be0000"
    600:
      $value: "#8f0000"
    700:
      $value: "#5f0000"

  brand:
    red:
      # parent values must be defined under `_`
      _:
        # value aliases must be quoted
        $value: "{color.red.400}"
        $description: Brand red
      lightest:
        $value: "{color.red.100}"
        $description: Lightest brand red
      lighter:
        $value: "{color.red.200}"
        $description: lighter brand red
      light:
        $value: "{color.red.300}"
        $description: Light brand red
      dark:
        $value: "{color.red.500}"
        $description: Dark brand red/Brand red hover
      darker:
        $value: "{color.red.600}"
        $description: Darker brand red
      darkest:
        $value: "{color.red.700}"
        $description: Darkest brand red