@box/blueprint-web-assets

• Blueprint Web assets @box/blueprint-web-assets
• Installation
• Usage
  • Tokens
  • Assets
• How to update assets and tokens
• 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.

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';

...

<Checkmark color={BackgroundBackground} />

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.

Assets

You can use all icons as regular React components.

import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';

...

<InfoBadge />

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';
...

<Alert color={IconIconErrorOnLight} />

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';

How to update assets and tokens

yarn nx build-local-all blueprint-web-assets
yarn nx lint blueprint-web-assets --fix
yarn nx format blueprint-web-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
• nx lint blueprint-web-assets to execute lint via ESLint