@useblu/tokens NPM

Design tokens

This is an internal project at Blu Pagamentos powered by Theo that provides design tokens for our design system.

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

Download and Install Manually

Tokens are available by plaftorm for download as packages in the github releases page.

Usage

Javascript

import styled from 'styled-components';
import {
  fontFamilyHighlight,
  fontSizeLg,
  fontWeightExtrabold,
  lineHeightMedium,
  colorInterfaceLightPure,
} from '@useblu/tokens';

export const Heading1 = styled.h1`
  font-family: ${fontFamilyHighlight};
  font-size: ${fontSizeLg};
  font-weight: ${fontWeightExtrabold};
  line-height: ${lineHeightMedium};
  color: ${colorInterfaceLightPure};
`;

Sass

@import '~@useblu/tokens/dist/tokens.scss';

.h1 {
  font-family: $font-family-highlight;
  font-size: $font-size-lg;
  font-weight: $font-weight-extrabold;
  line-height: $line-height-medium;
  color: $color-interface-light-pure;
}