- [Blueprint Web assets `@box/blueprint-web-assets`](#blueprint-web-assets-boxblueprint-web-assets)
- [Installation](#installation)
- [Usage](#usage)
- [Tokens](#tokens)
- [Assets](#assets)
- [How to update assets and tokens](#how-to-update-assets-and-tokens)
- [Project scripts](#project-scripts)
# Blueprint Web assets `@box/blueprint-web-assets`
`@box/blueprint-web-assets` is a comprehensive collection of Box assets(icons, illustrations) and tokens (color, font, spacing, etc..). You can check available assets in our [Portal](https://go/dsys).
# Installation
```
yarn add @box/blueprint-web-assets
```
# Usage
## Tokens
In `scss` files:
If possible, use css variables:
```
@use '@box/blueprint-web-assets/tokens/tokens-css-vars.scss';
...
.component {
background-color: var(--background-background);
}
```
Otherwise, you can use scss tokens, but bear in mind that this method is **deprecated**:
```
@use '@box/blueprint-web-assets/tokens/tokens.scss'; // or @import if you're not using dart sass
...
.component {
background-color: tokens.$background-background;
}
```
In `tsx` files:
```
import { BackgroundBackground } from '@box/blueprint-web-assets/tokens/tokens';
...
```
Currently we also distribute '@box/blueprint-web-assets/tokens/px-tokens' - js file containing tokens in pixel values. You should use it only if your use case doesn't support rem units, e.g. [e-mail clients](https://www.caniemail.com/features/css-unit-rem/).
## Assets
You can use all icons as regular React components.
```
import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';
...
```
To change icon color you can use `color` prop:
```
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
...
```
Icon path defines icon style:
```
import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { FileAudio } from '@box/blueprint-web-assets/icons/Content';
import { BoxLogo } from '@box/blueprint-web-assets/icons/Logo';
import { Compass } from '@box/blueprint-web-assets/icons/Multitone';
```
# How to update assets and tokens
```
yarn exec nx run blueprint-web-assets:build-assets
```
Push changes to a new branch. New version of package will be released after merge.
# Project scripts
- `nx test blueprint-web-assets` to execute unit tests via [Jest](https://jestjs.io)
- `nx lint blueprint-web-assets` to execute lint via [ESLint](https://eslint.org/)